diff --git a/.cursor/mcp.json b/.cursor/mcp.json
new file mode 100644
index 00000000..7a87d1a0
--- /dev/null
+++ b/.cursor/mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "agent-orchestrator": {
+      "command": "node",
+      "args": ["/Users/gbpark/ERP-node/mcp-agent-orchestrator/build/index.js"]
+    }
+  }
+}
diff --git a/.cursorrules b/.cursorrules
index 3b0c3833..77180695 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -1,5 +1,48 @@
 # Cursor Rules for ERP-node Project
 
+## 🚨 비즈니스 로직 요청 양식 검증 (필수)
+
+**사용자가 화면 개발 또는 비즈니스 로직 구현을 요청할 때, 아래 양식을 따르지 않으면 반드시 다음과 같이 응답하세요:**
+
+```
+안녕하세요. Oh My Master! 양식을 못 알아 듣겠습니다. 
+다시 한번 작성해주십쇼.
+=== 비즈니스 로직 요청서 ===
+
+【화면 정보】
+- 화면명: 
+- 회사코드: 
+- 메뉴ID (있으면): 
+
+【테이블 정보】
+- 메인 테이블: 
+- 디테일 테이블 (있으면): 
+- 관계 FK (있으면): 
+
+【버튼 목록】
+버튼1:
+  - 버튼명: 
+  - 동작 유형: (저장/삭제/수정/조회/기타)
+  - 조건 (있으면): 
+  - 대상 테이블: 
+  - 추가 동작 (있으면): 
+
+【추가 요구사항】
+- 
+```
+
+**양식 미준수 판단 기준:**
+1. "화면 만들어줘" 같이 테이블명/버튼 정보 없이 요청
+2. "저장하면 저장해줘" 같이 구체적인 테이블/로직 설명 없음
+3. "이전이랑 비슷하게" 같이 모호한 참조
+4. 버튼별 조건/동작이 명시되지 않음
+
+**양식 미준수 시 절대 작업 진행하지 말고, 위 양식을 보여주며 다시 작성하라고 요청하세요.**
+
+**상세 가이드**: [화면개발_표준_가이드.md](docs/screen-implementation-guide/화면개발_표준_가이드.md)
+
+---
+
 ## 🚨 최우선 보안 규칙: 멀티테넌시
 
 **모든 코드 작성/수정 완료 후 반드시 다음 파일을 확인하세요:**
diff --git a/backend-node/package-lock.json b/backend-node/package-lock.json
index 7e1108c3..43b698d2 100644
--- a/backend-node/package-lock.json
+++ b/backend-node/package-lock.json
@@ -1044,6 +1044,7 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2371,6 +2372,7 @@
       "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.1.tgz",
       "integrity": "sha512-/KCsg3xSlR+nCK8/8ZYSknYxvXHwubJrU82F3Lm1Fp6789VQ0/3RJKfsmRXjqfaTA++23CvC3hqmqe/2GEt6Kw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cluster-key-slot": "1.1.2",
         "generic-pool": "3.9.0",
@@ -3474,6 +3476,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
       "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3710,6 +3713,7 @@
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -3927,6 +3931,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4453,6 +4458,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -5663,6 +5669,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -7425,6 +7432,7 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -8394,7 +8402,6 @@
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -9283,6 +9290,7 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -10133,7 +10141,6 @@
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -10942,6 +10949,7 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -11047,6 +11055,7 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 771ab80d..1fbefea5 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -10,6 +10,43 @@ import { logger } from "./utils/logger";
 import { errorHandler } from "./middleware/errorHandler";
 import { refreshTokenIfNeeded } from "./middleware/authMiddleware";
 
+// ============================================
+// 프로세스 레벨 예외 처리 (서버 크래시 방지)
+// ============================================
+
+// 처리되지 않은 Promise 거부 핸들러
+process.on("unhandledRejection", (reason: Error | any, promise: Promise<any>) => {
+  logger.error("⚠️ Unhandled Promise Rejection:", {
+    reason: reason?.message || reason,
+    stack: reason?.stack,
+  });
+  // 프로세스를 종료하지 않고 로깅만 수행
+  // 심각한 에러의 경우 graceful shutdown 고려
+});
+
+// 처리되지 않은 예외 핸들러
+process.on("uncaughtException", (error: Error) => {
+  logger.error("🔥 Uncaught Exception:", {
+    message: error.message,
+    stack: error.stack,
+  });
+  // 예외 발생 후에도 서버를 유지하되, 상태가 불안정할 수 있으므로 주의
+  // 심각한 에러의 경우 graceful shutdown 후 재시작 권장
+});
+
+// SIGTERM 시그널 처리 (Docker/Kubernetes 환경)
+process.on("SIGTERM", () => {
+  logger.info("📴 SIGTERM 시그널 수신, graceful shutdown 시작...");
+  // 여기서 연결 풀 정리 등 cleanup 로직 추가 가능
+  process.exit(0);
+});
+
+// SIGINT 시그널 처리 (Ctrl+C)
+process.on("SIGINT", () => {
+  logger.info("📴 SIGINT 시그널 수신, graceful shutdown 시작...");
+  process.exit(0);
+});
+
 // 라우터 임포트
 import authRoutes from "./routes/authRoutes";
 import adminRoutes from "./routes/adminRoutes";
@@ -64,6 +101,7 @@ import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 3D 필드
 import digitalTwinRoutes from "./routes/digitalTwinRoutes"; // 디지털 트윈 (야드 관제)
 import flowRoutes from "./routes/flowRoutes"; // 플로우 관리
 import flowExternalDbConnectionRoutes from "./routes/flowExternalDbConnectionRoutes"; // 플로우 전용 외부 DB 연결
+import scheduleRoutes from "./routes/scheduleRoutes"; // 스케줄 자동 생성
 import workHistoryRoutes from "./routes/workHistoryRoutes"; // 작업 이력 관리
 import tableHistoryRoutes from "./routes/tableHistoryRoutes"; // 테이블 변경 이력 조회
 import roleRoutes from "./routes/roleRoutes"; // 권한 그룹 관리
@@ -246,6 +284,7 @@ app.use("/api/yard-layouts", yardLayoutRoutes); // 3D 필드
 app.use("/api/digital-twin", digitalTwinRoutes); // 디지털 트윈 (야드 관제)
 app.use("/api/flow-external-db", flowExternalDbConnectionRoutes); // 플로우 전용 외부 DB 연결
 app.use("/api/flow", flowRoutes); // 플로우 관리 (마지막에 등록하여 다른 라우트와 충돌 방지)
+app.use("/api/schedule", scheduleRoutes); // 스케줄 자동 생성
 app.use("/api/work-history", workHistoryRoutes); // 작업 이력 관리
 app.use("/api/table-history", tableHistoryRoutes); // 테이블 변경 이력 조회
 app.use("/api/roles", roleRoutes); // 권한 그룹 관리
diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts
index a530cf15..a89e50d1 100644
--- a/backend-node/src/controllers/adminController.ts
+++ b/backend-node/src/controllers/adminController.ts
@@ -1461,11 +1461,8 @@ async function cleanupMenuRelatedData(menuObjid: number): Promise<void> {
     [menuObjid]
   );
   
-  // 4. numbering_rules에서 menu_objid를 NULL로 설정
-  await query(
-    `UPDATE numbering_rules SET menu_objid = NULL WHERE menu_objid = $1`,
-    [menuObjid]
-  );
+  // 4. numbering_rules: 새 스키마에서는 메뉴와 연결되지 않음 (스킵)
+  // 새 스키마: table_name + column_name + company_code 기반
   
   // 5. rel_menu_auth에서 관련 권한 삭제
   await query(
diff --git a/backend-node/src/controllers/categoryTreeController.ts b/backend-node/src/controllers/categoryTreeController.ts
index de6a8e2a..ec7ef92b 100644
--- a/backend-node/src/controllers/categoryTreeController.ts
+++ b/backend-node/src/controllers/categoryTreeController.ts
@@ -5,9 +5,13 @@
 import { Router, Request, Response } from "express";
 import { categoryTreeService, CreateCategoryValueInput, UpdateCategoryValueInput } from "../services/categoryTreeService";
 import { logger } from "../utils/logger";
+import { authenticateToken } from "../middleware/authMiddleware";
 
 const router = Router();
 
+// 모든 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
 // 인증된 사용자 타입
 interface AuthenticatedRequest extends Request {
   user?: {
diff --git a/backend-node/src/controllers/fileController.ts b/backend-node/src/controllers/fileController.ts
index d4e8d0cf..66418099 100644
--- a/backend-node/src/controllers/fileController.ts
+++ b/backend-node/src/controllers/fileController.ts
@@ -431,7 +431,7 @@ export const deleteFile = async (
     // 파일 정보 조회
     const fileRecord = await queryOne<any>(
       `SELECT * FROM attach_file_info WHERE objid = $1`,
-      [parseInt(objid)]
+      [objid]
     );
 
     if (!fileRecord) {
@@ -460,7 +460,7 @@ export const deleteFile = async (
     // 파일 상태를 DELETED로 변경 (논리적 삭제)
     await query<any>(
       "UPDATE attach_file_info SET status = $1 WHERE objid = $2",
-      ["DELETED", parseInt(objid)]
+      ["DELETED", objid]
     );
 
     // 🆕 레코드 모드: 해당 행의 attachments 컬럼 자동 업데이트
@@ -708,6 +708,40 @@ export const getComponentFiles = async (
       );
     }
 
+    // 3. 레코드의 컬럼 값으로 파일 직접 조회 (수정 모달에서 기존 파일 로드)
+    // target_objid 매칭이 안 될 때, 테이블 레코드의 컬럼 값(파일 objid)으로 직접 찾기
+    if (dataFiles.length === 0 && templateFiles.length === 0 && tableName && recordId && columnName) {
+      try {
+        // 레코드에서 해당 컬럼 값 조회 (파일 objid가 저장되어 있을 수 있음)
+        const safeTable = String(tableName).replace(/[^a-zA-Z0-9_]/g, "");
+        const safeColumn = String(columnName).replace(/[^a-zA-Z0-9_]/g, "");
+        const recordResult = await query<any>(
+          `SELECT "${safeColumn}" FROM "${safeTable}" WHERE id = $1 LIMIT 1`,
+          [recordId]
+        );
+        
+        if (recordResult.length > 0 && recordResult[0][safeColumn]) {
+          const columnValue = String(recordResult[0][safeColumn]);
+          // 숫자값인 경우 파일 objid로 간주하고 조회
+          if (/^\d+$/.test(columnValue)) {
+            console.log("🔍 [getComponentFiles] 레코드 컬럼 값으로 파일 조회:", { table: safeTable, column: safeColumn, fileObjid: columnValue });
+            const directFiles = await query<any>(
+              `SELECT * FROM attach_file_info
+               WHERE objid = $1 AND status = $2
+               ORDER BY regdate DESC`,
+              [columnValue, "ACTIVE"]
+            );
+            if (directFiles.length > 0) {
+              console.log("✅ [getComponentFiles] 레코드 컬럼 값으로 파일 찾음:", directFiles.length, "건");
+              dataFiles = directFiles;
+            }
+          }
+        }
+      } catch (lookupError) {
+        console.warn("⚠️ [getComponentFiles] 레코드 컬럼 값 조회 실패:", lookupError);
+      }
+    }
+
     // 파일 정보 포맷팅 함수
     const formatFileInfo = (file: any, isTemplate: boolean = false) => ({
       objid: file.objid.toString(),
@@ -782,7 +816,7 @@ export const previewFile = async (
 
     const fileRecord = await queryOne<any>(
       "SELECT * FROM attach_file_info WHERE objid = $1 LIMIT 1",
-      [parseInt(objid)]
+      [objid]
     );
 
     if (!fileRecord || fileRecord.status !== "ACTIVE") {
@@ -793,8 +827,9 @@ export const previewFile = async (
       return;
     }
 
-    // 🔒 멀티테넌시: 회사 코드 일치 여부 확인 (최고 관리자 제외)
-    if (companyCode !== "*" && fileRecord.company_code !== companyCode) {
+    // 🔒 멀티테넌시: 회사 코드 일치 여부 확인 (최고 관리자 및 공개 접근 제외)
+    // 공개 접근(req.user가 없는 경우)은 미리보기 허용 (이미지 표시용)
+    if (companyCode && companyCode !== "*" && fileRecord.company_code !== companyCode) {
       console.warn("⚠️ 다른 회사 파일 접근 시도:", {
         userId: req.user?.userId,
         userCompanyCode: companyCode,
@@ -920,7 +955,7 @@ export const downloadFile = async (
 
     const fileRecord = await queryOne<any>(
       `SELECT * FROM attach_file_info WHERE objid = $1`,
-      [parseInt(objid)]
+      [objid]
     );
 
     if (!fileRecord || fileRecord.status !== "ACTIVE") {
@@ -1211,7 +1246,7 @@ export const setRepresentativeFile = async (
     // 파일 존재 여부 및 권한 확인
     const fileRecord = await queryOne<any>(
       `SELECT * FROM attach_file_info WHERE objid = $1 AND status = $2`,
-      [parseInt(objid), "ACTIVE"]
+      [objid, "ACTIVE"]
     );
 
     if (!fileRecord) {
@@ -1236,7 +1271,7 @@ export const setRepresentativeFile = async (
       `UPDATE attach_file_info 
        SET is_representative = false 
        WHERE target_objid = $1 AND objid != $2`,
-      [fileRecord.target_objid, parseInt(objid)]
+      [fileRecord.target_objid, objid]
     );
 
     // 선택한 파일을 대표 파일로 설정
@@ -1244,7 +1279,7 @@ export const setRepresentativeFile = async (
       `UPDATE attach_file_info 
        SET is_representative = true 
        WHERE objid = $1`,
-      [parseInt(objid)]
+      [objid]
     );
 
     res.json({
@@ -1260,5 +1295,56 @@ export const setRepresentativeFile = async (
   }
 };
 
+/**
+ * 파일 정보 조회 (메타데이터만, 파일 내용 없음)
+ * 공개 접근 허용
+ */
+export const getFileInfo = async (req: Request, res: Response) => {
+  try {
+    const { objid } = req.params;
+
+    if (!objid) {
+      return res.status(400).json({
+        success: false,
+        message: "파일 ID가 필요합니다.",
+      });
+    }
+
+    // 파일 정보 조회
+    const fileRecord = await queryOne<any>(
+      `SELECT objid, real_file_name, file_size, file_ext, file_path, regdate, is_representative
+       FROM attach_file_info 
+       WHERE objid = $1 AND status = 'ACTIVE'`,
+      [objid]
+    );
+
+    if (!fileRecord) {
+      return res.status(404).json({
+        success: false,
+        message: "파일을 찾을 수 없습니다.",
+      });
+    }
+
+    res.json({
+      success: true,
+      data: {
+        objid: fileRecord.objid.toString(),
+        realFileName: fileRecord.real_file_name,
+        fileSize: fileRecord.file_size,
+        fileExt: fileRecord.file_ext,
+        filePath: fileRecord.file_path,
+        regdate: fileRecord.regdate,
+        isRepresentative: fileRecord.is_representative,
+      },
+    });
+  } catch (error) {
+    console.error("파일 정보 조회 오류:", error);
+    res.status(500).json({
+      success: false,
+      message: "파일 정보 조회 중 오류가 발생했습니다.",
+    });
+  }
+};
+
 // Multer 미들웨어 export
 export const uploadMiddleware = upload.array("files", 10); // 최대 10개 파일
diff --git a/backend-node/src/controllers/numberingRuleController.ts b/backend-node/src/controllers/numberingRuleController.ts
index f5cbc91a..d307b41a 100644
--- a/backend-node/src/controllers/numberingRuleController.ts
+++ b/backend-node/src/controllers/numberingRuleController.ts
@@ -3,392 +3,545 @@
  */
 
 import { Router, Response } from "express";
-import { authenticateToken, AuthenticatedRequest } from "../middleware/authMiddleware";
+import {
+  authenticateToken,
+  AuthenticatedRequest,
+} from "../middleware/authMiddleware";
 import { numberingRuleService } from "../services/numberingRuleService";
 import { logger } from "../utils/logger";
 
 const router = Router();
 
 // 규칙 목록 조회 (전체)
-router.get("/", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
+router.get(
+  "/",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
 
-  try {
-    const rules = await numberingRuleService.getRuleList(companyCode);
-    return res.json({ success: true, data: rules });
-  } catch (error: any) {
-    logger.error("규칙 목록 조회 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const rules = await numberingRuleService.getRuleList(companyCode);
+      return res.json({ success: true, data: rules });
+    } catch (error: any) {
+      logger.error("규칙 목록 조회 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // 메뉴별 사용 가능한 규칙 조회
-router.get("/available/:menuObjid?", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const menuObjid = req.params.menuObjid ? parseInt(req.params.menuObjid) : undefined;
+router.get(
+  "/available/:menuObjid?",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const menuObjid = req.params.menuObjid
+      ? parseInt(req.params.menuObjid)
+      : undefined;
 
-  logger.info("메뉴별 채번 규칙 조회 요청", { menuObjid, companyCode });
+    logger.info("메뉴별 채번 규칙 조회 요청", { menuObjid, companyCode });
 
-  try {
-    const rules = await numberingRuleService.getAvailableRulesForMenu(companyCode, menuObjid);
-    
-    logger.info("✅ 메뉴별 채번 규칙 조회 성공 (컨트롤러)", { 
-      companyCode, 
-      menuObjid,
-      rulesCount: rules.length 
-    });
-    
-    return res.json({ success: true, data: rules });
-  } catch (error: any) {
-    logger.error("❌ 메뉴별 사용 가능한 규칙 조회 실패 (컨트롤러)", {
-      error: error.message,
-      errorCode: error.code,
-      errorStack: error.stack,
-      companyCode,
-      menuObjid,
-    });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const rules = await numberingRuleService.getAvailableRulesForMenu(
+        companyCode,
+        menuObjid
+      );
+
+      logger.info("✅ 메뉴별 채번 규칙 조회 성공 (컨트롤러)", {
+        companyCode,
+        menuObjid,
+        rulesCount: rules.length,
+      });
+
+      return res.json({ success: true, data: rules });
+    } catch (error: any) {
+      logger.error("❌ 메뉴별 사용 가능한 규칙 조회 실패 (컨트롤러)", {
+        error: error.message,
+        errorCode: error.code,
+        errorStack: error.stack,
+        companyCode,
+        menuObjid,
+      });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // 화면용 채번 규칙 조회 (테이블 기반 필터링 - 간소화)
-router.get("/available-for-screen", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { tableName } = req.query;
+router.get(
+  "/available-for-screen",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { tableName } = req.query;
 
-  try {
-    // tableName 필수 검증
-    if (!tableName || typeof tableName !== "string") {
-      return res.status(400).json({
-        success: false,
-        error: "tableName is required",
-      });
-    }
-
-    const rules = await numberingRuleService.getAvailableRulesForScreen(
-      companyCode,
-      tableName
-    );
-
-    logger.info("화면용 채번 규칙 조회 성공", {
-      companyCode,
-      tableName,
-      count: rules.length,
-    });
-
-    return res.json({ success: true, data: rules });
-  } catch (error: any) {
-    logger.error("화면용 채번 규칙 조회 실패", {
-      error: error.message,
-      tableName,
-    });
-    return res.status(500).json({
-      success: false,
-      error: error.message,
-    });
-  }
-});
-
-// 특정 규칙 조회
-router.get("/:ruleId", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
-
-  try {
-    const rule = await numberingRuleService.getRuleById(ruleId, companyCode);
-    if (!rule) {
-      return res.status(404).json({ success: false, error: "규칙을 찾을 수 없습니다" });
-    }
-    return res.json({ success: true, data: rule });
-  } catch (error: any) {
-    logger.error("규칙 조회 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
-  }
-});
-
-// 규칙 생성
-router.post("/", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const userId = req.user!.userId;
-  const ruleConfig = req.body;
-
-  logger.info("🔍 [POST /numbering-rules] 채번 규칙 생성 요청:", {
-    companyCode,
-    userId,
-    ruleId: ruleConfig.ruleId,
-    ruleName: ruleConfig.ruleName,
-    scopeType: ruleConfig.scopeType,
-    menuObjid: ruleConfig.menuObjid,
-    tableName: ruleConfig.tableName,
-    partsCount: ruleConfig.parts?.length,
-  });
-
-  try {
-    if (!ruleConfig.ruleId || !ruleConfig.ruleName) {
-      return res.status(400).json({ success: false, error: "규칙 ID와 규칙명은 필수입니다" });
-    }
-
-    if (!Array.isArray(ruleConfig.parts) || ruleConfig.parts.length === 0) {
-      return res.status(400).json({ success: false, error: "최소 1개 이상의 규칙 파트가 필요합니다" });
-    }
-
-    // 🆕 scopeType이 'table'인 경우 tableName 필수 체크
-    if (ruleConfig.scopeType === "table") {
-      if (!ruleConfig.tableName || ruleConfig.tableName.trim() === "") {
+    try {
+      // tableName 필수 검증
+      if (!tableName || typeof tableName !== "string") {
         return res.status(400).json({
           success: false,
-          error: "테이블 범위 규칙은 테이블명(tableName)이 필수입니다",
+          error: "tableName is required",
         });
       }
-    }
 
-    const newRule = await numberingRuleService.createRule(ruleConfig, companyCode, userId);
-    
-    logger.info("✅ [POST /numbering-rules] 채번 규칙 생성 성공:", {
-      ruleId: newRule.ruleId,
-      menuObjid: newRule.menuObjid,
-    });
+      const rules = await numberingRuleService.getAvailableRulesForScreen(
+        companyCode,
+        tableName
+      );
 
-    return res.status(201).json({ success: true, data: newRule });
-  } catch (error: any) {
-    if (error.code === "23505") {
-      return res.status(409).json({ success: false, error: "이미 존재하는 규칙 ID입니다" });
+      logger.info("화면용 채번 규칙 조회 성공", {
+        companyCode,
+        tableName,
+        count: rules.length,
+      });
+
+      return res.json({ success: true, data: rules });
+    } catch (error: any) {
+      logger.error("화면용 채번 규칙 조회 실패", {
+        error: error.message,
+        tableName,
+      });
+      return res.status(500).json({
+        success: false,
+        error: error.message,
+      });
     }
-    logger.error("❌ [POST /numbering-rules] 규칙 생성 실패:", { 
-      error: error.message,
-      stack: error.stack,
-      code: error.code,
-    });
-    return res.status(500).json({ success: false, error: error.message });
   }
-});
+);
+
+// 특정 규칙 조회
+router.get(
+  "/:ruleId",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
+
+    try {
+      const rule = await numberingRuleService.getRuleById(ruleId, companyCode);
+      if (!rule) {
+        return res
+          .status(404)
+          .json({ success: false, error: "규칙을 찾을 수 없습니다" });
+      }
+      return res.json({ success: true, data: rule });
+    } catch (error: any) {
+      logger.error("규칙 조회 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
+  }
+);
+
+// 규칙 생성
+router.post(
+  "/",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+    const ruleConfig = req.body;
+
+    logger.info("🔍 [POST /numbering-rules] 채번 규칙 생성 요청:", {
+      companyCode,
+      userId,
+      ruleId: ruleConfig.ruleId,
+      ruleName: ruleConfig.ruleName,
+      scopeType: ruleConfig.scopeType,
+      menuObjid: ruleConfig.menuObjid,
+      tableName: ruleConfig.tableName,
+      partsCount: ruleConfig.parts?.length,
+    });
+
+    try {
+      if (!ruleConfig.ruleId || !ruleConfig.ruleName) {
+        return res
+          .status(400)
+          .json({ success: false, error: "규칙 ID와 규칙명은 필수입니다" });
+      }
+
+      if (!Array.isArray(ruleConfig.parts) || ruleConfig.parts.length === 0) {
+        return res
+          .status(400)
+          .json({
+            success: false,
+            error: "최소 1개 이상의 규칙 파트가 필요합니다",
+          });
+      }
+
+      // 🆕 scopeType이 'table'인 경우 tableName 필수 체크
+      if (ruleConfig.scopeType === "table") {
+        if (!ruleConfig.tableName || ruleConfig.tableName.trim() === "") {
+          return res.status(400).json({
+            success: false,
+            error: "테이블 범위 규칙은 테이블명(tableName)이 필수입니다",
+          });
+        }
+      }
+
+      const newRule = await numberingRuleService.createRule(
+        ruleConfig,
+        companyCode,
+        userId
+      );
+
+      logger.info("✅ [POST /numbering-rules] 채번 규칙 생성 성공:", {
+        ruleId: newRule.ruleId,
+        menuObjid: newRule.menuObjid,
+      });
+
+      return res.status(201).json({ success: true, data: newRule });
+    } catch (error: any) {
+      if (error.code === "23505") {
+        return res
+          .status(409)
+          .json({ success: false, error: "이미 존재하는 규칙 ID입니다" });
+      }
+      logger.error("❌ [POST /numbering-rules] 규칙 생성 실패:", {
+        error: error.message,
+        stack: error.stack,
+        code: error.code,
+      });
+      return res.status(500).json({ success: false, error: error.message });
+    }
+  }
+);
 
 // 규칙 수정
-router.put("/:ruleId", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
-  const updates = req.body;
+router.put(
+  "/:ruleId",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
+    const updates = req.body;
 
-  logger.info("채번 규칙 수정 요청", { ruleId, companyCode, updates });
+    logger.info("채번 규칙 수정 요청", { ruleId, companyCode, updates });
 
-  try {
-    const updatedRule = await numberingRuleService.updateRule(ruleId, updates, companyCode);
-    logger.info("채번 규칙 수정 성공", { ruleId, companyCode });
-    return res.json({ success: true, data: updatedRule });
-  } catch (error: any) {
-    logger.error("채번 규칙 수정 실패", { 
-      ruleId, 
-      companyCode, 
-      error: error.message,
-      stack: error.stack 
-    });
-    if (error.message.includes("찾을 수 없거나")) {
-      return res.status(404).json({ success: false, error: error.message });
+    try {
+      const updatedRule = await numberingRuleService.updateRule(
+        ruleId,
+        updates,
+        companyCode
+      );
+      logger.info("채번 규칙 수정 성공", { ruleId, companyCode });
+      return res.json({ success: true, data: updatedRule });
+    } catch (error: any) {
+      logger.error("채번 규칙 수정 실패", {
+        ruleId,
+        companyCode,
+        error: error.message,
+        stack: error.stack,
+      });
+      if (error.message.includes("찾을 수 없거나")) {
+        return res.status(404).json({ success: false, error: error.message });
+      }
+      return res.status(500).json({ success: false, error: error.message });
     }
-    return res.status(500).json({ success: false, error: error.message });
   }
-});
+);
 
 // 규칙 삭제
-router.delete("/:ruleId", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
+router.delete(
+  "/:ruleId",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
 
-  try {
-    await numberingRuleService.deleteRule(ruleId, companyCode);
-    return res.json({ success: true, message: "규칙이 삭제되었습니다" });
-  } catch (error: any) {
-    if (error.message.includes("찾을 수 없거나")) {
-      return res.status(404).json({ success: false, error: error.message });
+    try {
+      await numberingRuleService.deleteRule(ruleId, companyCode);
+      return res.json({ success: true, message: "규칙이 삭제되었습니다" });
+    } catch (error: any) {
+      if (error.message.includes("찾을 수 없거나")) {
+        return res.status(404).json({ success: false, error: error.message });
+      }
+      logger.error("규칙 삭제 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
     }
-    logger.error("규칙 삭제 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
   }
-});
+);
 
 // 코드 미리보기 (순번 증가 없음)
-router.post("/:ruleId/preview", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
-  const { formData } = req.body; // 폼 데이터 (카테고리 기반 채번 시 사용)
+router.post(
+  "/:ruleId/preview",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
+    const { formData } = req.body; // 폼 데이터 (카테고리 기반 채번 시 사용)
 
-  try {
-    const previewCode = await numberingRuleService.previewCode(ruleId, companyCode, formData);
-    return res.json({ success: true, data: { generatedCode: previewCode } });
-  } catch (error: any) {
-    logger.error("코드 미리보기 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const previewCode = await numberingRuleService.previewCode(
+        ruleId,
+        companyCode,
+        formData
+      );
+      return res.json({ success: true, data: { generatedCode: previewCode } });
+    } catch (error: any) {
+      logger.error("코드 미리보기 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // 코드 할당 (저장 시점에 실제 순번 증가)
-router.post("/:ruleId/allocate", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
-  const { formData } = req.body; // 폼 데이터 (날짜 컬럼 기준 생성 시 사용)
+router.post(
+  "/:ruleId/allocate",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
+    const { formData, userInputCode } = req.body; // 폼 데이터 + 사용자가 편집한 코드
 
-  logger.info("코드 할당 요청", { ruleId, companyCode, hasFormData: !!formData });
+    logger.info("코드 할당 요청", {
+      ruleId,
+      companyCode,
+      hasFormData: !!formData,
+      userInputCode,
+    });
 
-  try {
-    const allocatedCode = await numberingRuleService.allocateCode(ruleId, companyCode, formData);
-    logger.info("코드 할당 성공", { ruleId, allocatedCode });
-    return res.json({ success: true, data: { generatedCode: allocatedCode } });
-  } catch (error: any) {
-    logger.error("코드 할당 실패", { ruleId, companyCode, error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const allocatedCode = await numberingRuleService.allocateCode(
+        ruleId,
+        companyCode,
+        formData,
+        userInputCode
+      );
+      logger.info("코드 할당 성공", { ruleId, allocatedCode });
+      return res.json({
+        success: true,
+        data: { generatedCode: allocatedCode },
+      });
+    } catch (error: any) {
+      logger.error("코드 할당 실패", {
+        ruleId,
+        companyCode,
+        error: error.message,
+      });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // 코드 생성 (기존 호환성 유지, deprecated)
-router.post("/:ruleId/generate", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
+router.post(
+  "/:ruleId/generate",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
 
-  try {
-    const generatedCode = await numberingRuleService.generateCode(ruleId, companyCode);
-    return res.json({ success: true, data: { generatedCode } });
-  } catch (error: any) {
-    logger.error("코드 생성 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const generatedCode = await numberingRuleService.generateCode(
+        ruleId,
+        companyCode
+      );
+      return res.json({ success: true, data: { generatedCode } });
+    } catch (error: any) {
+      logger.error("코드 생성 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // 시퀀스 초기화
-router.post("/:ruleId/reset", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
+router.post(
+  "/:ruleId/reset",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
 
-  try {
-    await numberingRuleService.resetSequence(ruleId, companyCode);
-    return res.json({ success: true, message: "시퀀스가 초기화되었습니다" });
-  } catch (error: any) {
-    logger.error("시퀀스 초기화 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      await numberingRuleService.resetSequence(ruleId, companyCode);
+      return res.json({ success: true, message: "시퀀스가 초기화되었습니다" });
+    } catch (error: any) {
+      logger.error("시퀀스 초기화 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // ==================== 테스트 테이블용 API ====================
 
 // [테스트] 테스트 테이블에서 채번 규칙 목록 조회
-router.get("/test/list/:menuObjid?", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const menuObjid = req.params.menuObjid ? parseInt(req.params.menuObjid) : undefined;
+router.get(
+  "/test/list/:menuObjid?",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const menuObjid = req.params.menuObjid
+      ? parseInt(req.params.menuObjid)
+      : undefined;
 
-  logger.info("[테스트] 채번 규칙 목록 조회 요청", { companyCode, menuObjid });
+    logger.info("[테스트] 채번 규칙 목록 조회 요청", {
+      companyCode,
+      menuObjid,
+    });
 
-  try {
-    const rules = await numberingRuleService.getRulesFromTest(companyCode, menuObjid);
-    logger.info("[테스트] 채번 규칙 목록 조회 성공", { companyCode, menuObjid, count: rules.length });
-    return res.json({ success: true, data: rules });
-  } catch (error: any) {
-    logger.error("[테스트] 채번 규칙 목록 조회 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const rules = await numberingRuleService.getRulesFromTest(
+        companyCode,
+        menuObjid
+      );
+      logger.info("[테스트] 채번 규칙 목록 조회 성공", {
+        companyCode,
+        menuObjid,
+        count: rules.length,
+      });
+      return res.json({ success: true, data: rules });
+    } catch (error: any) {
+      logger.error("[테스트] 채번 규칙 목록 조회 실패", {
+        error: error.message,
+      });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // [테스트] 테이블+컬럼 기반 채번 규칙 조회
-router.get("/test/by-column/:tableName/:columnName", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { tableName, columnName } = req.params;
+router.get(
+  "/test/by-column/:tableName/:columnName",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { tableName, columnName } = req.params;
 
-  try {
-    const rule = await numberingRuleService.getNumberingRuleByColumn(companyCode, tableName, columnName);
-    return res.json({ success: true, data: rule });
-  } catch (error: any) {
-    logger.error("테이블+컬럼 기반 채번 규칙 조회 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const rule = await numberingRuleService.getNumberingRuleByColumn(
+        companyCode,
+        tableName,
+        columnName
+      );
+      return res.json({ success: true, data: rule });
+    } catch (error: any) {
+      logger.error("테이블+컬럼 기반 채번 규칙 조회 실패", {
+        error: error.message,
+      });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // [테스트] 테스트 테이블에 채번 규칙 저장
 // 채번 규칙은 독립적으로 생성 가능 (나중에 테이블 타입 관리에서 컬럼에 연결)
-router.post("/test/save", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const userId = req.user!.userId;
-  const ruleConfig = req.body;
+router.post(
+  "/test/save",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+    const ruleConfig = req.body;
 
-  logger.info("[테스트] 채번 규칙 저장 요청", { 
-    ruleId: ruleConfig.ruleId,
-    ruleName: ruleConfig.ruleName,
-    tableName: ruleConfig.tableName || "(미지정)",
-    columnName: ruleConfig.columnName || "(미지정)",
-  });
+    logger.info("[테스트] 채번 규칙 저장 요청", {
+      ruleId: ruleConfig.ruleId,
+      ruleName: ruleConfig.ruleName,
+      tableName: ruleConfig.tableName || "(미지정)",
+      columnName: ruleConfig.columnName || "(미지정)",
+    });
 
-  try {
-    // ruleName만 필수, tableName/columnName은 선택 (나중에 테이블 타입 관리에서 연결)
-    if (!ruleConfig.ruleName) {
-      return res.status(400).json({ 
-        success: false, 
-        error: "ruleName is required" 
-      });
+    try {
+      // ruleName만 필수, tableName/columnName은 선택 (나중에 테이블 타입 관리에서 연결)
+      if (!ruleConfig.ruleName) {
+        return res.status(400).json({
+          success: false,
+          error: "ruleName is required",
+        });
+      }
+
+      const savedRule = await numberingRuleService.saveRuleToTest(
+        ruleConfig,
+        companyCode,
+        userId
+      );
+      return res.json({ success: true, data: savedRule });
+    } catch (error: any) {
+      logger.error("[테스트] 채번 규칙 저장 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
     }
-
-    const savedRule = await numberingRuleService.saveRuleToTest(ruleConfig, companyCode, userId);
-    return res.json({ success: true, data: savedRule });
-  } catch (error: any) {
-    logger.error("[테스트] 채번 규칙 저장 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
   }
-});
+);
 
 // [테스트] 테스트 테이블에서 채번 규칙 삭제
-router.delete("/test/:ruleId", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
+router.delete(
+  "/test/:ruleId",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
 
-  try {
-    await numberingRuleService.deleteRuleFromTest(ruleId, companyCode);
-    return res.json({ success: true, message: "테스트 채번 규칙이 삭제되었습니다" });
-  } catch (error: any) {
-    logger.error("[테스트] 채번 규칙 삭제 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      await numberingRuleService.deleteRuleFromTest(ruleId, companyCode);
+      return res.json({
+        success: true,
+        message: "테스트 채번 규칙이 삭제되었습니다",
+      });
+    } catch (error: any) {
+      logger.error("[테스트] 채번 규칙 삭제 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // [테스트] 코드 미리보기 (테스트 테이블 사용)
-router.post("/test/:ruleId/preview", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const companyCode = req.user!.companyCode;
-  const { ruleId } = req.params;
-  const { formData } = req.body;
+router.post(
+  "/test/:ruleId/preview",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const companyCode = req.user!.companyCode;
+    const { ruleId } = req.params;
+    const { formData } = req.body;
 
-  try {
-    const previewCode = await numberingRuleService.previewCode(ruleId, companyCode, formData);
-    return res.json({ success: true, data: { generatedCode: previewCode } });
-  } catch (error: any) {
-    logger.error("[테스트] 코드 미리보기 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const previewCode = await numberingRuleService.previewCode(
+        ruleId,
+        companyCode,
+        formData
+      );
+      return res.json({ success: true, data: { generatedCode: previewCode } });
+    } catch (error: any) {
+      logger.error("[테스트] 코드 미리보기 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 // ==================== 회사별 채번규칙 복제 API ====================
 
 // 회사별 채번규칙 복제
-router.post("/copy-for-company", authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
-  const userCompanyCode = req.user!.companyCode;
-  const { sourceCompanyCode, targetCompanyCode } = req.body;
+router.post(
+  "/copy-for-company",
+  authenticateToken,
+  async (req: AuthenticatedRequest, res: Response) => {
+    const userCompanyCode = req.user!.companyCode;
+    const { sourceCompanyCode, targetCompanyCode } = req.body;
 
-  // 최고 관리자만 사용 가능
-  if (userCompanyCode !== "*") {
-    return res.status(403).json({ 
-      success: false, 
-      error: "최고 관리자만 사용할 수 있습니다" 
-    });
-  }
+    // 최고 관리자만 사용 가능
+    if (userCompanyCode !== "*") {
+      return res.status(403).json({
+        success: false,
+        error: "최고 관리자만 사용할 수 있습니다",
+      });
+    }
 
-  if (!sourceCompanyCode || !targetCompanyCode) {
-    return res.status(400).json({ 
-      success: false, 
-      error: "sourceCompanyCode와 targetCompanyCode가 필요합니다" 
-    });
-  }
+    if (!sourceCompanyCode || !targetCompanyCode) {
+      return res.status(400).json({
+        success: false,
+        error: "sourceCompanyCode와 targetCompanyCode가 필요합니다",
+      });
+    }
 
-  try {
-    const result = await numberingRuleService.copyRulesForCompany(sourceCompanyCode, targetCompanyCode);
-    return res.json({ success: true, data: result });
-  } catch (error: any) {
-    logger.error("회사별 채번규칙 복제 실패", { error: error.message });
-    return res.status(500).json({ success: false, error: error.message });
+    try {
+      const result = await numberingRuleService.copyRulesForCompany(
+        sourceCompanyCode,
+        targetCompanyCode
+      );
+      return res.json({ success: true, data: result });
+    } catch (error: any) {
+      logger.error("회사별 채번규칙 복제 실패", { error: error.message });
+      return res.status(500).json({ success: false, error: error.message });
+    }
   }
-});
+);
 
 export default router;
diff --git a/backend-node/src/controllers/scheduleController.ts b/backend-node/src/controllers/scheduleController.ts
new file mode 100644
index 00000000..15012053
--- /dev/null
+++ b/backend-node/src/controllers/scheduleController.ts
@@ -0,0 +1,223 @@
+/**
+ * 스케줄 자동 생성 컨트롤러
+ *
+ * 스케줄 미리보기, 적용, 조회 API를 제공합니다.
+ */
+
+import { Request, Response } from "express";
+import { ScheduleService } from "../services/scheduleService";
+
+export class ScheduleController {
+  private scheduleService: ScheduleService;
+
+  constructor() {
+    this.scheduleService = new ScheduleService();
+  }
+
+  /**
+   * 스케줄 미리보기
+   * POST /api/schedule/preview
+   *
+   * 선택한 소스 데이터를 기반으로 생성될 스케줄을 미리보기합니다.
+   * 실제 저장은 하지 않습니다.
+   */
+  preview = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { config, sourceData, period } = req.body;
+      const userId = (req as any).user?.userId || "system";
+      const companyCode = (req as any).user?.companyCode || "*";
+
+      console.log("[ScheduleController] preview 호출:", {
+        scheduleType: config?.scheduleType,
+        sourceDataCount: sourceData?.length,
+        period,
+        userId,
+        companyCode,
+      });
+
+      // 필수 파라미터 검증
+      if (!config || !config.scheduleType) {
+        res.status(400).json({
+          success: false,
+          message: "스케줄 설정(config)이 필요합니다.",
+        });
+        return;
+      }
+
+      if (!sourceData || sourceData.length === 0) {
+        res.status(400).json({
+          success: false,
+          message: "소스 데이터가 필요합니다.",
+        });
+        return;
+      }
+
+      // 미리보기 생성
+      const preview = await this.scheduleService.generatePreview(
+        config,
+        sourceData,
+        period,
+        companyCode
+      );
+
+      res.json({
+        success: true,
+        preview,
+      });
+    } catch (error: any) {
+      console.error("[ScheduleController] preview 오류:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "스케줄 미리보기 중 오류가 발생했습니다.",
+      });
+    }
+  };
+
+  /**
+   * 스케줄 적용
+   * POST /api/schedule/apply
+   *
+   * 미리보기 결과를 실제로 저장합니다.
+   */
+  apply = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { config, preview, options } = req.body;
+      const userId = (req as any).user?.userId || "system";
+      const companyCode = (req as any).user?.companyCode || "*";
+
+      console.log("[ScheduleController] apply 호출:", {
+        scheduleType: config?.scheduleType,
+        createCount: preview?.summary?.createCount,
+        deleteCount: preview?.summary?.deleteCount,
+        options,
+        userId,
+        companyCode,
+      });
+
+      // 필수 파라미터 검증
+      if (!config || !preview) {
+        res.status(400).json({
+          success: false,
+          message: "설정(config)과 미리보기(preview)가 필요합니다.",
+        });
+        return;
+      }
+
+      // 적용
+      const applied = await this.scheduleService.applySchedules(
+        config,
+        preview,
+        options || { deleteExisting: true, updateMode: "replace" },
+        companyCode,
+        userId
+      );
+
+      res.json({
+        success: true,
+        applied,
+        message: `${applied.created}건 생성, ${applied.deleted}건 삭제, ${applied.updated}건 수정되었습니다.`,
+      });
+    } catch (error: any) {
+      console.error("[ScheduleController] apply 오류:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "스케줄 적용 중 오류가 발생했습니다.",
+      });
+    }
+  };
+
+  /**
+   * 스케줄 목록 조회
+   * GET /api/schedule/list
+   *
+   * 타임라인 표시용 스케줄 목록을 조회합니다.
+   */
+  list = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        scheduleType,
+        resourceType,
+        resourceId,
+        startDate,
+        endDate,
+        status,
+      } = req.query;
+      const companyCode = (req as any).user?.companyCode || "*";
+
+      console.log("[ScheduleController] list 호출:", {
+        scheduleType,
+        resourceType,
+        resourceId,
+        startDate,
+        endDate,
+        status,
+        companyCode,
+      });
+
+      const result = await this.scheduleService.getScheduleList({
+        scheduleType: scheduleType as string,
+        resourceType: resourceType as string,
+        resourceId: resourceId as string,
+        startDate: startDate as string,
+        endDate: endDate as string,
+        status: status as string,
+        companyCode,
+      });
+
+      res.json({
+        success: true,
+        data: result.data,
+        total: result.total,
+      });
+    } catch (error: any) {
+      console.error("[ScheduleController] list 오류:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "스케줄 조회 중 오류가 발생했습니다.",
+      });
+    }
+  };
+
+  /**
+   * 스케줄 삭제
+   * DELETE /api/schedule/:scheduleId
+   */
+  delete = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { scheduleId } = req.params;
+      const userId = (req as any).user?.userId || "system";
+      const companyCode = (req as any).user?.companyCode || "*";
+
+      console.log("[ScheduleController] delete 호출:", {
+        scheduleId,
+        userId,
+        companyCode,
+      });
+
+      const result = await this.scheduleService.deleteSchedule(
+        parseInt(scheduleId, 10),
+        companyCode,
+        userId
+      );
+
+      if (!result.success) {
+        res.status(404).json({
+          success: false,
+          message: result.message || "스케줄을 찾을 수 없습니다.",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        message: "스케줄이 삭제되었습니다.",
+      });
+    } catch (error: any) {
+      console.error("[ScheduleController] delete 오류:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "스케줄 삭제 중 오류가 발생했습니다.",
+      });
+    }
+  };
+}
diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts
index d963aea6..88230f48 100644
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@@ -46,11 +46,13 @@ export const getScreenGroups = async (req: AuthenticatedRequest, res: Response)
     const countResult = await pool.query(countQuery, params);
     const total = parseInt(countResult.rows[0].total);
 
-    // 데이터 조회 (screens 배열 포함)
+    // 데이터 조회 (screens 배열 포함) - 삭제된 화면(is_active = 'D') 제외
     const dataQuery = `
       SELECT 
         sg.*,
-        (SELECT COUNT(*) FROM screen_group_screens sgs WHERE sgs.group_id = sg.id) as screen_count,
+        (SELECT COUNT(*) FROM screen_group_screens sgs 
+         LEFT JOIN screen_definitions sd ON sgs.screen_id = sd.screen_id
+         WHERE sgs.group_id = sg.id AND sd.is_active != 'D') as screen_count,
         (SELECT json_agg(
           json_build_object(
             'id', sgs.id,
@@ -64,6 +66,7 @@ export const getScreenGroups = async (req: AuthenticatedRequest, res: Response)
         ) FROM screen_group_screens sgs 
         LEFT JOIN screen_definitions sd ON sgs.screen_id = sd.screen_id
         WHERE sgs.group_id = sg.id
+          AND sd.is_active != 'D'
         ) as screens
       FROM screen_groups sg
       ${whereClause}
@@ -111,6 +114,7 @@ export const getScreenGroup = async (req: AuthenticatedRequest, res: Response) =
         ) FROM screen_group_screens sgs 
         LEFT JOIN screen_definitions sd ON sgs.screen_id = sd.screen_id
         WHERE sgs.group_id = sg.id
+          AND sd.is_active != 'D'
         ) as screens
       FROM screen_groups sg
       WHERE sg.id = $1
@@ -308,39 +312,108 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
 
     await client.query('BEGIN');
 
-    // 1. 삭제할 그룹과 하위 그룹 ID 수집 (CASCADE 삭제 대상)
+    // 0. 삭제할 그룹의 company_code 확인
+    const targetGroupResult = await client.query(
+      `SELECT company_code FROM screen_groups WHERE id = $1`,
+      [id]
+    );
+    if (targetGroupResult.rows.length === 0) {
+      await client.query('ROLLBACK');
+      return res.status(404).json({ success: false, message: "화면 그룹을 찾을 수 없습니다." });
+    }
+    const targetCompanyCode = targetGroupResult.rows[0].company_code;
+
+    // 권한 체크: 최고관리자가 아닌 경우 자신의 회사 그룹만 삭제 가능
+    if (companyCode !== "*" && targetCompanyCode !== companyCode) {
+      await client.query('ROLLBACK');
+      return res.status(403).json({ success: false, message: "권한이 없습니다." });
+    }
+
+    // 1. 삭제할 그룹과 하위 그룹 ID 수집 (같은 회사만 - CASCADE 삭제 대상)
     const childGroupsResult = await client.query(`
       WITH RECURSIVE child_groups AS (
-        SELECT id FROM screen_groups WHERE id = $1
+        SELECT id, company_code FROM screen_groups WHERE id = $1 AND company_code = $2
         UNION ALL
-        SELECT sg.id FROM screen_groups sg
-        JOIN child_groups cg ON sg.parent_group_id = cg.id
+        SELECT sg.id, sg.company_code FROM screen_groups sg
+        JOIN child_groups cg ON sg.parent_group_id = cg.id AND sg.company_code = cg.company_code
       )
       SELECT id FROM child_groups
-    `, [id]);
+    `, [id, targetCompanyCode]);
     const groupIdsToDelete = childGroupsResult.rows.map((r: any) => r.id);
 
-    // 2. menu_info에서 삭제될 screen_group 참조를 NULL로 정리
+    logger.info("화면 그룹 삭제 대상", { 
+      companyCode, 
+      targetCompanyCode,
+      groupId: id, 
+      childGroupIds: groupIdsToDelete 
+    });
+
+    // 2. 삭제될 그룹에 연결된 메뉴 정리
     if (groupIdsToDelete.length > 0) {
-      await client.query(`
-        UPDATE menu_info 
-        SET screen_group_id = NULL 
+      // 2-1. 삭제할 메뉴 objid 수집
+      const menusToDelete = await client.query(`
+        SELECT objid FROM menu_info 
         WHERE screen_group_id = ANY($1::int[])
-      `, [groupIdsToDelete]);
+        AND company_code = $2
+      `, [groupIdsToDelete, targetCompanyCode]);
+      const menuObjids = menusToDelete.rows.map((r: any) => r.objid);
+
+      if (menuObjids.length > 0) {
+        // 2-2. screen_menu_assignments에서 해당 메뉴 관련 데이터 삭제
+        await client.query(`
+          DELETE FROM screen_menu_assignments 
+          WHERE menu_objid = ANY($1::bigint[])
+          AND company_code = $2
+        `, [menuObjids, targetCompanyCode]);
+
+        // 2-3. menu_info에서 해당 메뉴 삭제
+        await client.query(`
+          DELETE FROM menu_info 
+          WHERE screen_group_id = ANY($1::int[])
+          AND company_code = $2
+        `, [groupIdsToDelete, targetCompanyCode]);
+
+        logger.info("그룹 삭제 시 연결된 메뉴 삭제", { 
+          groupIds: groupIdsToDelete, 
+          deletedMenuCount: menuObjids.length,
+          companyCode: targetCompanyCode 
+        });
+      }
+
+      // 2-4. 해당 회사의 채번 규칙 삭제 (최상위 그룹 삭제 시)
+      // 삭제되는 그룹이 최상위인지 확인
+      const isRootGroup = await client.query(
+        `SELECT 1 FROM screen_groups WHERE id = $1 AND parent_group_id IS NULL`,
+        [id]
+      );
+      
+      if (isRootGroup.rows.length > 0) {
+        // 최상위 그룹 삭제 시 해당 회사의 채번 규칙도 삭제
+        // 먼저 파트 삭제
+        await client.query(
+          `DELETE FROM numbering_rule_parts 
+           WHERE rule_id IN (SELECT rule_id FROM numbering_rules WHERE company_code = $1)`,
+          [targetCompanyCode]
+        );
+        // 규칙 삭제
+        const deletedRules = await client.query(
+          `DELETE FROM numbering_rules WHERE company_code = $1 RETURNING rule_id`,
+          [targetCompanyCode]
+        );
+        if (deletedRules.rowCount && deletedRules.rowCount > 0) {
+          logger.info("그룹 삭제 시 채번 규칙 삭제", { 
+            companyCode: targetCompanyCode, 
+            deletedCount: deletedRules.rowCount 
+          });
+        }
+      }
     }
 
-    // 3. screen_groups 삭제
-    let query = `DELETE FROM screen_groups WHERE id = $1`;
-    const params: any[] = [id];
-
-    if (companyCode !== "*") {
-      query += ` AND company_code = $2`;
-      params.push(companyCode);
-    }
-
-    query += " RETURNING id";
-
-    const result = await client.query(query, params);
+    // 3. screen_groups 삭제 (해당 그룹만 - 하위 그룹은 프론트엔드에서 순차 삭제)
+    const result = await client.query(
+      `DELETE FROM screen_groups WHERE id = $1 AND company_code = $2 RETURNING id`,
+      [id, targetCompanyCode]
+    );
 
     if (result.rows.length === 0) {
       await client.query('ROLLBACK');
@@ -349,7 +422,7 @@ export const deleteScreenGroup = async (req: AuthenticatedRequest, res: Response
 
     await client.query('COMMIT');
 
-    logger.info("화면 그룹 삭제", { companyCode, groupId: id, cleanedRefs: groupIdsToDelete.length });
+    logger.info("화면 그룹 삭제 완료", { companyCode, targetCompanyCode, groupId: id, cleanedRefs: groupIdsToDelete.length });
 
     res.json({ success: true, message: "화면 그룹이 삭제되었습니다." });
   } catch (error: any) {
@@ -1668,7 +1741,9 @@ export const getScreenSubTables = async (req: AuthenticatedRequest, res: Respons
     });
 
     // 4. rightPanel.relation 파싱 (split-panel-layout 등에서 사용)
+    // screen_layouts (v1)와 screen_layouts_v2 모두 조회
     const rightPanelQuery = `
+      -- V1: screen_layouts에서 조회
       SELECT 
         sd.screen_id,
         sd.screen_name,
@@ -1681,6 +1756,23 @@ export const getScreenSubTables = async (req: AuthenticatedRequest, res: Respons
       JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
       WHERE sd.screen_id = ANY($1)
       AND sl.properties->'componentConfig'->'rightPanel'->'relation' IS NOT NULL
+
+      UNION ALL
+
+      -- V2: screen_layouts_v2에서 조회 (v2-split-panel-layout 컴포넌트)
+      SELECT 
+        sd.screen_id,
+        sd.screen_name,
+        sd.table_name as main_table,
+        comp->'overrides'->>'type' as component_type,
+        comp->'overrides'->'rightPanel'->'relation' as right_panel_relation,
+        comp->'overrides'->'rightPanel'->>'tableName' as right_panel_table,
+        comp->'overrides'->'rightPanel'->'columns' as right_panel_columns
+      FROM screen_definitions sd
+      JOIN screen_layouts_v2 slv2 ON sd.screen_id = slv2.screen_id,
+      jsonb_array_elements(slv2.layout_data->'components') as comp
+      WHERE sd.screen_id = ANY($1)
+      AND comp->'overrides'->'rightPanel'->'relation' IS NOT NULL
     `;
 
     const rightPanelResult = await pool.query(rightPanelQuery, [screenIds]);
@@ -2049,9 +2141,56 @@ export const getScreenSubTables = async (req: AuthenticatedRequest, res: Respons
       }))
     });
 
+    // ============================================================
+    // 6. 전역 메인 테이블 목록 수집 (우선순위 적용용)
+    // ============================================================
+    // 메인 테이블 조건:
+    // 1. screen_definitions.table_name (컴포넌트 직접 연결)
+    // 2. v2-split-panel-layout의 rightPanel.tableName (WHERE 조건 대상)
+    // 
+    // 이 목록에 있으면 서브 테이블로 분류되지 않음 (우선순위: 메인 > 서브)
+    const globalMainTablesQuery = `
+      -- 1. 모든 화면의 메인 테이블 (screen_definitions.table_name)
+      SELECT DISTINCT table_name as main_table
+      FROM screen_definitions
+      WHERE screen_id = ANY($1)
+      AND table_name IS NOT NULL
+
+      UNION
+
+      -- 2. v2-split-panel-layout의 rightPanel.tableName (WHERE 조건 대상)
+      -- 현재 그룹의 화면들에서 마스터-디테일로 연결된 테이블
+      SELECT DISTINCT comp->'overrides'->'rightPanel'->>'tableName' as main_table
+      FROM screen_definitions sd
+      JOIN screen_layouts_v2 slv2 ON sd.screen_id = slv2.screen_id,
+      jsonb_array_elements(slv2.layout_data->'components') as comp
+      WHERE sd.screen_id = ANY($1)
+      AND comp->'overrides'->'rightPanel'->>'tableName' IS NOT NULL
+
+      UNION
+
+      -- 3. v1 screen_layouts의 rightPanel.tableName (WHERE 조건 대상)
+      SELECT DISTINCT sl.properties->'componentConfig'->'rightPanel'->>'tableName' as main_table
+      FROM screen_definitions sd
+      JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+      WHERE sd.screen_id = ANY($1)
+      AND sl.properties->'componentConfig'->'rightPanel'->>'tableName' IS NOT NULL
+    `;
+
+    const globalMainTablesResult = await pool.query(globalMainTablesQuery, [screenIds]);
+    const globalMainTables = globalMainTablesResult.rows
+      .map((r: any) => r.main_table)
+      .filter((t: string) => t != null && t !== '');
+
+    logger.info("전역 메인 테이블 목록 수집 완료", { 
+      count: globalMainTables.length,
+      tables: globalMainTables
+    });
+
     res.json({
       success: true,
       data: screenSubTables,
+      globalMainTables: globalMainTables,  // 메인 테이블로 분류되어야 하는 테이블 목록
     });
   } catch (error: any) {
     logger.error("화면 서브 테이블 정보 조회 실패:", error);
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index e38e2cc5..a494ae3d 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -557,7 +557,16 @@ export async function updateColumnInputType(
 ): Promise<void> {
   try {
     const { tableName, columnName } = req.params;
-    const { inputType, detailSettings } = req.body;
+    let { inputType, detailSettings } = req.body;
+
+    // 🔥 "direct" 또는 "auto"는 프론트엔드의 입력 방식 구분값이므로
+    // DB의 input_type(웹타입)으로 저장하면 안 됨 - "text"로 변환
+    if (inputType === "direct" || inputType === "auto") {
+      logger.warn(
+        `잘못된 inputType 값 감지: ${inputType} → 'text'로 변환 (${tableName}.${columnName})`
+      );
+      inputType = "text";
+    }
 
     // 🔥 회사 코드 추출 (JWT에서 또는 DB에서 조회)
     let companyCode = req.user?.companyCode;
@@ -662,14 +671,14 @@ export async function getTableRecord(
     logger.info(`필터: ${filterColumn} = ${filterValue}`);
     logger.info(`표시 컬럼: ${displayColumn}`);
 
-    if (!tableName || !filterColumn || !filterValue || !displayColumn) {
+    if (!tableName || !filterColumn || !filterValue) {
       const response: ApiResponse<null> = {
         success: false,
         message: "필수 파라미터가 누락되었습니다.",
         error: {
           code: "MISSING_PARAMETERS",
           details:
-            "tableName, filterColumn, filterValue, displayColumn이 필요합니다.",
+            "tableName, filterColumn, filterValue가 필요합니다. displayColumn은 선택적입니다.",
         },
       };
       res.status(400).json(response);
@@ -701,9 +710,12 @@ export async function getTableRecord(
     }
 
     const record = result.data[0];
-    const displayValue = record[displayColumn];
+    // displayColumn이 "*"이거나 없으면 전체 레코드 반환
+    const displayValue = displayColumn && displayColumn !== "*" 
+      ? record[displayColumn] 
+      : record;
 
-    logger.info(`레코드 조회 완료: ${displayColumn} = ${displayValue}`);
+    logger.info(`레코드 조회 완료: ${displayColumn || "*"} = ${typeof displayValue === 'object' ? '[전체 레코드]' : displayValue}`);
 
     const response: ApiResponse<{ value: any; record: any }> = {
       success: true,
@@ -1357,8 +1369,17 @@ export async function updateColumnWebType(
       `레거시 API 사용: updateColumnWebType → updateColumnInputType 사용 권장`
     );
 
-    // webType을 inputType으로 변환
-    const convertedInputType = inputType || webType || "text";
+    // 🔥 inputType이 "direct" 또는 "auto"이면 무시하고 webType 사용
+    // "direct"/"auto"는 프론트엔드의 입력 방식(직접입력/자동입력) 구분값이지
+    // DB에 저장할 웹 타입(text, number, date 등)이 아님
+    let convertedInputType = webType || "text";
+    if (inputType && inputType !== "direct" && inputType !== "auto") {
+      convertedInputType = inputType;
+    }
+
+    logger.info(
+      `웹타입 변환: webType=${webType}, inputType=${inputType} → ${convertedInputType}`
+    );
 
     // 새로운 메서드 호출
     req.body = { inputType: convertedInputType, detailSettings };
@@ -2323,6 +2344,8 @@ export async function getTableEntityRelations(
  *
  * table_type_columns에서 reference_table이 현재 테이블인 레코드를 찾아서
  * 해당 테이블과 FK 컬럼 정보를 반환합니다.
+ * 
+ * 우선순위: 현재 사용자의 company_code > 공통('*')
  */
 export async function getReferencedByTables(
   req: AuthenticatedRequest,
@@ -2330,9 +2353,11 @@ export async function getReferencedByTables(
 ): Promise<void> {
   try {
     const { tableName } = req.params;
+    // 현재 사용자의 회사 코드 (없으면 '*' 사용)
+    const userCompanyCode = req.user?.companyCode || "*";
 
     logger.info(
-      `=== 테이블 참조 관계 조회 시작: ${tableName} 을 참조하는 테이블 ===`
+      `=== 테이블 참조 관계 조회 시작: ${tableName} 을 참조하는 테이블 (회사코드: ${userCompanyCode}) ===`
     );
 
     if (!tableName) {
@@ -2350,23 +2375,41 @@ export async function getReferencedByTables(
 
     // table_type_columns에서 reference_table이 현재 테이블인 레코드 조회
     // input_type이 'entity'인 것만 조회 (실제 FK 관계)
+    // 우선순위: 현재 사용자의 company_code > 공통('*')
+    // ROW_NUMBER를 사용해서 같은 테이블/컬럼 조합에서 회사코드 우선순위로 하나만 선택
     const sqlQuery = `
+      WITH ranked AS (
+        SELECT 
+          ttc.table_name,
+          ttc.column_name,
+          ttc.column_label,
+          ttc.reference_table,
+          ttc.reference_column,
+          ttc.display_column,
+          ttc.company_code,
+          ROW_NUMBER() OVER (
+            PARTITION BY ttc.table_name, ttc.column_name 
+            ORDER BY CASE WHEN ttc.company_code = $2 THEN 1 ELSE 2 END
+          ) as rn
+        FROM table_type_columns ttc
+        WHERE ttc.reference_table = $1
+          AND ttc.input_type = 'entity'
+          AND ttc.company_code IN ($2, '*')
+      )
       SELECT DISTINCT 
-        ttc.table_name,
-        ttc.column_name,
-        ttc.column_label,
-        ttc.reference_table,
-        ttc.reference_column,
-        ttc.display_column,
-        ttc.table_name as table_label
-      FROM table_type_columns ttc
-      WHERE ttc.reference_table = $1
-        AND ttc.input_type = 'entity'
-        AND ttc.company_code = '*'
-      ORDER BY ttc.table_name, ttc.column_name
+        table_name,
+        column_name,
+        column_label,
+        reference_table,
+        reference_column,
+        display_column,
+        table_name as table_label
+      FROM ranked
+      WHERE rn = 1
+      ORDER BY table_name, column_name
     `;
 
-    const result = await query(sqlQuery, [tableName]);
+    const result = await query(sqlQuery, [tableName, userCompanyCode]);
 
     const referencedByTables = result.map((row: any) => ({
       tableName: row.table_name,
@@ -2379,7 +2422,7 @@ export async function getReferencedByTables(
     }));
 
     logger.info(
-      `테이블 참조 관계 조회 완료: ${referencedByTables.length}개 발견`
+      `테이블 참조 관계 조회 완료: ${referencedByTables.length}개 발견 (회사코드: ${userCompanyCode})`
     );
 
     const response: ApiResponse<any> = {
diff --git a/backend-node/src/database/db.ts b/backend-node/src/database/db.ts
index ae775525..4c249ac3 100644
--- a/backend-node/src/database/db.ts
+++ b/backend-node/src/database/db.ts
@@ -81,8 +81,26 @@ export const initializePool = (): Pool => {
 
   pool.on("error", (err, client) => {
     console.error("❌ PostgreSQL 연결 풀 에러:", err);
+    // 연결 풀 에러 발생 시 자동 재연결 시도
+    // Pool은 자동으로 연결을 재생성하므로 별도 처리 불필요
+    // 다만, 연속 에러 발생 시 알림이 필요할 수 있음
   });
 
+  // 연결 풀 상태 체크 (5분마다)
+  setInterval(() => {
+    if (pool) {
+      const status = {
+        totalCount: pool.totalCount,
+        idleCount: pool.idleCount,
+        waitingCount: pool.waitingCount,
+      };
+      // 대기 중인 연결이 많으면 경고
+      if (status.waitingCount > 5) {
+        console.warn("⚠️ PostgreSQL 연결 풀 대기열 증가:", status);
+      }
+    }
+  }, 5 * 60 * 1000);
+
   console.log(
     `🚀 PostgreSQL 연결 풀 초기화 완료: ${dbConfig.host}:${dbConfig.port}/${dbConfig.database}`
   );
diff --git a/backend-node/src/routes/commonCodeRoutes.ts b/backend-node/src/routes/commonCodeRoutes.ts
index 3885d12a..d1205e51 100644
--- a/backend-node/src/routes/commonCodeRoutes.ts
+++ b/backend-node/src/routes/commonCodeRoutes.ts
@@ -73,20 +73,4 @@ router.get("/categories/:categoryCode/options", (req, res) =>
   commonCodeController.getCodeOptions(req, res)
 );
 
-// 계층 구조 코드 조회 (트리 형태)
-router.get("/categories/:categoryCode/hierarchy", (req, res) =>
-  commonCodeController.getCodesHierarchy(req, res)
-);
-
-// 자식 코드 조회 (연쇄 선택용)
-router.get("/categories/:categoryCode/children", (req, res) =>
-  commonCodeController.getChildCodes(req, res)
-);
-
-// 카테고리 → 공통코드 호환 API (레거시 지원)
-// 기존 카테고리 타입이 공통코드로 마이그레이션된 후에도 동작
-router.get("/category-options/:tableName/:columnName", (req, res) =>
-  commonCodeController.getCategoryOptionsAsCode(req, res)
-);
-
 export default router;
diff --git a/backend-node/src/routes/fileRoutes.ts b/backend-node/src/routes/fileRoutes.ts
index 64f02d14..562a0b7f 100644
--- a/backend-node/src/routes/fileRoutes.ts
+++ b/backend-node/src/routes/fileRoutes.ts
@@ -11,6 +11,7 @@ import {
   generateTempToken,
   getFileByToken,
   setRepresentativeFile,
+  getFileInfo,
 } from "../controllers/fileController";
 import { authenticateToken } from "../middleware/authMiddleware";
 
@@ -24,6 +25,20 @@ const router = Router();
  */
 router.get("/public/:token", getFileByToken);
 
+/**
+ * @route GET /api/files/preview/:objid
+ * @desc 파일 미리보기 (이미지 등) - 공개 접근 허용
+ * @access Public
+ */
+router.get("/preview/:objid", previewFile);
+
+/**
+ * @route GET /api/files/info/:objid
+ * @desc 파일 정보 조회 (메타데이터만, 파일 내용 없음) - 공개 접근 허용
+ * @access Public
+ */
+router.get("/info/:objid", getFileInfo);
+
 // 모든 파일 API는 인증 필요
 router.use(authenticateToken);
 
@@ -64,12 +79,7 @@ router.get("/linked/:tableName/:recordId", getLinkedFiles);
  */
 router.delete("/:objid", deleteFile);
 
-/**
- * @route GET /api/files/preview/:objid
- * @desc 파일 미리보기 (이미지 등)
- * @access Private
- */
-router.get("/preview/:objid", previewFile);
+// preview 라우트는 상단 공개 접근 구역으로 이동됨
 
 /**
  * @route GET /api/files/download/:objid
diff --git a/backend-node/src/routes/scheduleRoutes.ts b/backend-node/src/routes/scheduleRoutes.ts
new file mode 100644
index 00000000..98dbc771
--- /dev/null
+++ b/backend-node/src/routes/scheduleRoutes.ts
@@ -0,0 +1,33 @@
+/**
+ * 스케줄 자동 생성 라우터
+ */
+
+import { Router } from "express";
+import { ScheduleController } from "../controllers/scheduleController";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+const scheduleController = new ScheduleController();
+
+// 모든 스케줄 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
+// ==================== 스케줄 생성 ====================
+
+// 스케줄 미리보기
+router.post("/preview", scheduleController.preview);
+
+// 스케줄 적용
+router.post("/apply", scheduleController.apply);
+
+// ==================== 스케줄 조회 ====================
+
+// 스케줄 목록 조회
+router.get("/list", scheduleController.list);
+
+// ==================== 스케줄 삭제 ====================
+
+// 스케줄 삭제
+router.delete("/:scheduleId", scheduleController.delete);
+
+export default router;
diff --git a/backend-node/src/services/categoryTreeService.ts b/backend-node/src/services/categoryTreeService.ts
index 985e671f..1550a780 100644
--- a/backend-node/src/services/categoryTreeService.ts
+++ b/backend-node/src/services/categoryTreeService.ts
@@ -43,6 +43,7 @@ export interface CreateCategoryValueInput {
   icon?: string;
   isActive?: boolean;
   isDefault?: boolean;
+  targetCompanyCode?: string; // 최고 관리자가 특정 회사를 선택할 때 사용
 }
 
 // 카테고리 값 수정 입력
@@ -89,7 +90,7 @@ class CategoryTreeService {
           updated_at AS "updatedAt",
           created_by AS "createdBy",
           updated_by AS "updatedBy"
-        FROM category_values_test
+        FROM category_values
         WHERE (company_code = $1 OR company_code = '*')
           AND table_name = $2
           AND column_name = $3
@@ -142,7 +143,7 @@ class CategoryTreeService {
           company_code AS "companyCode",
           created_at AS "createdAt",
           updated_at AS "updatedAt"
-        FROM category_values_test
+        FROM category_values
         WHERE (company_code = $1 OR company_code = '*')
           AND table_name = $2
           AND column_name = $3
@@ -184,7 +185,7 @@ class CategoryTreeService {
           company_code AS "companyCode",
           created_at AS "createdAt",
           updated_at AS "updatedAt"
-        FROM category_values_test
+        FROM category_values
         WHERE (company_code = $1 OR company_code = '*') AND value_id = $2
       `;
 
@@ -221,7 +222,7 @@ class CategoryTreeService {
       }
 
       const query = `
-        INSERT INTO category_values_test (
+        INSERT INTO category_values (
           table_name, column_name, value_code, value_label, value_order,
           parent_value_id, depth, path, description, color, icon,
           is_active, is_default, company_code, created_by, updated_by
@@ -334,7 +335,7 @@ class CategoryTreeService {
       }
 
       const query = `
-        UPDATE category_values_test
+        UPDATE category_values
         SET 
           value_code = COALESCE($3, value_code),
           value_label = COALESCE($4, value_label),
@@ -415,11 +416,11 @@ class CategoryTreeService {
     // 재귀 CTE를 사용하여 모든 하위 카테고리 수집
     const query = `
       WITH RECURSIVE category_tree AS (
-        SELECT value_id FROM category_values_test 
+        SELECT value_id FROM category_values 
         WHERE parent_value_id = $1 AND (company_code = $2 OR company_code = '*')
         UNION ALL
         SELECT cv.value_id
-        FROM category_values_test cv
+        FROM category_values cv
         INNER JOIN category_tree ct ON cv.parent_value_id = ct.value_id
         WHERE cv.company_code = $2 OR cv.company_code = '*'
       )
@@ -452,7 +453,7 @@ class CategoryTreeService {
       
       for (const id of reversedIds) {
         await pool.query(
-          `DELETE FROM category_values_test WHERE (company_code = $1 OR company_code = '*') AND value_id = $2`,
+          `DELETE FROM category_values WHERE (company_code = $1 OR company_code = '*') AND value_id = $2`,
           [companyCode, id]
         );
       }
@@ -479,7 +480,7 @@ class CategoryTreeService {
 
     const query = `
       SELECT value_id, value_label
-      FROM category_values_test
+      FROM category_values
       WHERE (company_code = $1 OR company_code = '*') AND parent_value_id = $2
     `;
 
@@ -488,7 +489,7 @@ class CategoryTreeService {
     for (const child of result.rows) {
       const newPath = `${parentPath}/${child.value_label}`;
 
-      await pool.query(`UPDATE category_values_test SET path = $1, updated_at = NOW() WHERE value_id = $2`, [
+      await pool.query(`UPDATE category_values SET path = $1, updated_at = NOW() WHERE value_id = $2`, [
         newPath,
         child.value_id,
       ]);
@@ -550,7 +551,7 @@ class CategoryTreeService {
 
   /**
    * 전체 카테고리 키 목록 조회 (모든 테이블.컬럼 조합)
-   * category_values_test 테이블에서 고유한 table_name, column_name 조합을 조회
+   * category_values 테이블에서 고유한 table_name, column_name 조합을 조회
    * 라벨 정보도 함께 반환
    */
   async getAllCategoryKeys(companyCode: string): Promise<{ tableName: string; columnName: string; tableLabel: string; columnLabel: string }[]> {
@@ -564,7 +565,7 @@ class CategoryTreeService {
           cv.column_name AS "columnName",
           COALESCE(tl.table_label, cv.table_name) AS "tableLabel",
           COALESCE(ttc.column_label, cv.column_name) AS "columnLabel"
-        FROM category_values_test cv
+        FROM category_values cv
         LEFT JOIN table_labels tl ON tl.table_name = cv.table_name
         LEFT JOIN table_type_columns ttc ON ttc.table_name = cv.table_name AND ttc.column_name = cv.column_name AND ttc.company_code = '*'
         WHERE cv.company_code = $1 OR cv.company_code = '*'
diff --git a/backend-node/src/services/menuCopyService.ts b/backend-node/src/services/menuCopyService.ts
index 1980a82c..e91124af 100644
--- a/backend-node/src/services/menuCopyService.ts
+++ b/backend-node/src/services/menuCopyService.ts
@@ -851,47 +851,10 @@ export class MenuCopyService {
     ]);
     logger.info(`  ✅ 메뉴 권한 삭제 완료`);
 
-    // 5-4. 채번 규칙 처리 (체크 제약조건 고려)
-    // scope_type = 'menu'인 채번 규칙: 메뉴 전용이므로 삭제 (파트 포함)
-    // check_menu_scope_requires_menu_objid 제약: scope_type='menu'이면 menu_objid NOT NULL 필수
-    const menuScopedRulesResult = await client.query(
-      `SELECT rule_id FROM numbering_rules 
-       WHERE menu_objid = ANY($1) AND company_code = $2 AND scope_type = 'menu'`,
-      [existingMenuIds, targetCompanyCode]
-    );
-    if (menuScopedRulesResult.rows.length > 0) {
-      const menuScopedRuleIds = menuScopedRulesResult.rows.map(
-        (r) => r.rule_id
-      );
-      // 채번 규칙 파트 먼저 삭제
-      await client.query(
-        `DELETE FROM numbering_rule_parts WHERE rule_id = ANY($1)`,
-        [menuScopedRuleIds]
-      );
-      // 채번 규칙 삭제
-      await client.query(
-        `DELETE FROM numbering_rules WHERE rule_id = ANY($1)`,
-        [menuScopedRuleIds]
-      );
-      logger.info(
-        `  ✅ 메뉴 전용 채번 규칙 삭제: ${menuScopedRuleIds.length}개`
-      );
-    }
-
-    // scope_type != 'menu'인 채번 규칙: menu_objid만 NULL로 설정 (규칙 보존)
-    const updatedNumberingRules = await client.query(
-      `UPDATE numbering_rules 
-       SET menu_objid = NULL
-       WHERE menu_objid = ANY($1) AND company_code = $2 
-         AND (scope_type IS NULL OR scope_type != 'menu')
-       RETURNING rule_id`,
-      [existingMenuIds, targetCompanyCode]
-    );
-    if (updatedNumberingRules.rowCount && updatedNumberingRules.rowCount > 0) {
-      logger.info(
-        `  ✅ 테이블 스코프 채번 규칙 연결 해제: ${updatedNumberingRules.rowCount}개 (데이터 보존됨)`
-      );
-    }
+    // 5-4. 채번 규칙 처리 (새 스키마에서는 menu_objid 없음 - 스킵)
+    // 새 numbering_rules 스키마: table_name + column_name + company_code 기반
+    // 메뉴와 직접 연결되지 않으므로 메뉴 삭제 시 처리 불필요
+    logger.info(`  ⏭️ 채번 규칙: 새 스키마에서는 메뉴와 연결되지 않음 (스킵)`);
 
     // 5-5. 카테고리 매핑 삭제 (menu_objid가 NOT NULL이므로 NULL 설정 불가)
     // 카테고리 매핑은 메뉴와 강하게 연결되어 있으므로 함께 삭제
@@ -961,6 +924,16 @@ export class MenuCopyService {
       const menus = await this.collectMenuTree(sourceMenuObjid, client);
       const sourceCompanyCode = menus[0].company_code!;
 
+      // 같은 회사로 복제하는 경우 경고 (자기 자신의 데이터 손상 위험)
+      if (sourceCompanyCode === targetCompanyCode) {
+        logger.warn(
+          `⚠️ 같은 회사로 메뉴 복제 시도: ${sourceCompanyCode} → ${targetCompanyCode}`
+        );
+        warnings.push(
+          "같은 회사로 복제하면 추가 데이터(카테고리, 채번 등)가 복제되지 않습니다."
+        );
+      }
+
       const screenIds = await this.collectScreens(
         menus.map((m) => m.objid),
         sourceCompanyCode,
@@ -1116,6 +1089,10 @@ export class MenuCopyService {
         client
       );
 
+      // === 6.5단계: 메뉴 URL 업데이트 (화면 ID 재매핑) ===
+      logger.info("\n🔄 [6.5단계] 메뉴 URL 화면 ID 재매핑");
+      await this.updateMenuUrls(menuIdMap, screenIdMap, client);
+
       // === 7단계: 테이블 타입 설정 복사 ===
       if (additionalCopyOptions?.copyTableTypeColumns) {
         logger.info("\n📦 [7단계] 테이블 타입 설정 복사");
@@ -1556,22 +1533,22 @@ export class MenuCopyService {
           // === 기존 복사본이 있는 경우: 업데이트 ===
           const existingScreenId = existingCopy.screen_id;
 
-          // 원본 레이아웃 조회
-          const sourceLayoutsResult = await client.query<ScreenLayout>(
-            `SELECT * FROM screen_layouts WHERE screen_id = $1 ORDER BY display_order`,
+          // 원본 V2 레이아웃 조회
+          const sourceLayoutV2Result = await client.query<{ layout_data: any }>(
+            `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1`,
             [originalScreenId]
           );
 
-          // 대상 레이아웃 조회
-          const targetLayoutsResult = await client.query<ScreenLayout>(
-            `SELECT * FROM screen_layouts WHERE screen_id = $1 ORDER BY display_order`,
+          // 대상 V2 레이아웃 조회
+          const targetLayoutV2Result = await client.query<{ layout_data: any }>(
+            `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1`,
             [existingScreenId]
           );
 
-          // 변경 여부 확인 (레이아웃 개수 또는 내용 비교)
-          const hasChanges = this.hasLayoutChanges(
-            sourceLayoutsResult.rows,
-            targetLayoutsResult.rows
+          // 변경 여부 확인 (V2 레이아웃 비교)
+          const hasChanges = this.hasLayoutChangesV2(
+            sourceLayoutV2Result.rows[0]?.layout_data,
+            targetLayoutV2Result.rows[0]?.layout_data
           );
 
           if (hasChanges) {
@@ -1673,9 +1650,9 @@ export class MenuCopyService {
       }
     }
 
-    // === 2단계: screen_layouts 처리 (이제 screenIdMap이 완성됨) ===
+    // === 2단계: screen_layouts_v2 처리 (이제 screenIdMap이 완성됨) ===
     logger.info(
-      `\n📐 레이아웃 처리 시작 (screenIdMap 완성: ${screenIdMap.size}개)`
+      `\n📐 V2 레이아웃 처리 시작 (screenIdMap 완성: ${screenIdMap.size}개)`
     );
 
     for (const {
@@ -1685,91 +1662,51 @@ export class MenuCopyService {
       isUpdate,
     } of screenDefsToProcess) {
       try {
-        // 원본 레이아웃 조회
-        const layoutsResult = await client.query<ScreenLayout>(
-          `SELECT * FROM screen_layouts WHERE screen_id = $1 ORDER BY display_order`,
+        // 원본 V2 레이아웃 조회
+        const layoutV2Result = await client.query<{ layout_data: any }>(
+          `SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = $1`,
           [originalScreenId]
         );
 
-        if (isUpdate) {
-          // 업데이트: 기존 레이아웃 삭제 후 새로 삽입
-          await client.query(
-            `DELETE FROM screen_layouts WHERE screen_id = $1`,
-            [targetScreenId]
+        const layoutData = layoutV2Result.rows[0]?.layout_data;
+        const components = layoutData?.components || [];
+
+        if (layoutData && components.length > 0) {
+          // component_id 매핑 생성 (원본 → 새 ID)
+          const componentIdMap = new Map<string, string>();
+          const timestamp = Date.now();
+          components.forEach((comp: any, idx: number) => {
+            const newComponentId = `comp_${timestamp}_${idx}_${Math.random().toString(36).substr(2, 5)}`;
+            componentIdMap.set(comp.id, newComponentId);
+          });
+
+          // V2 레이아웃 데이터 복사 및 참조 업데이트
+          const updatedLayoutData = this.updateReferencesInLayoutDataV2(
+            layoutData,
+            componentIdMap,
+            screenIdMap,
+            flowIdMap,
+            numberingRuleIdMap,
+            menuIdMap
           );
-          logger.info(`    ↳ 기존 레이아웃 삭제 (업데이트 준비)`);
-        }
 
-        // component_id 매핑 생성 (원본 → 새 ID)
-        const componentIdMap = new Map<string, string>();
-        const timestamp = Date.now();
-        layoutsResult.rows.forEach((layout, idx) => {
-          const newComponentId = `comp_${timestamp}_${idx}_${Math.random().toString(36).substr(2, 5)}`;
-          componentIdMap.set(layout.component_id, newComponentId);
-        });
-
-        // 레이아웃 배치 삽입 준비
-        if (layoutsResult.rows.length > 0) {
-          const layoutValues: string[] = [];
-          const layoutParams: any[] = [];
-          let paramIdx = 1;
-
-          for (const layout of layoutsResult.rows) {
-            const newComponentId = componentIdMap.get(layout.component_id)!;
-
-            const newParentId = layout.parent_id
-              ? componentIdMap.get(layout.parent_id) || layout.parent_id
-              : null;
-            const newZoneId = layout.zone_id
-              ? componentIdMap.get(layout.zone_id) || layout.zone_id
-              : null;
-
-            const updatedProperties = this.updateReferencesInProperties(
-              layout.properties,
-              screenIdMap,
-              flowIdMap,
-              numberingRuleIdMap,
-              menuIdMap
-            );
-
-            layoutValues.push(
-              `($${paramIdx}, $${paramIdx + 1}, $${paramIdx + 2}, $${paramIdx + 3}, $${paramIdx + 4}, $${paramIdx + 5}, $${paramIdx + 6}, $${paramIdx + 7}, $${paramIdx + 8}, $${paramIdx + 9}, $${paramIdx + 10}, $${paramIdx + 11}, $${paramIdx + 12}, $${paramIdx + 13})`
-            );
-            layoutParams.push(
-              targetScreenId,
-              layout.component_type,
-              newComponentId,
-              newParentId,
-              layout.position_x,
-              layout.position_y,
-              layout.width,
-              layout.height,
-              updatedProperties,
-              layout.display_order,
-              layout.layout_type,
-              layout.layout_config,
-              layout.zones_config,
-              newZoneId
-            );
-            paramIdx += 14;
-          }
-
-          // 배치 INSERT
+          // V2 레이아웃 저장 (UPSERT)
           await client.query(
-            `INSERT INTO screen_layouts (
-              screen_id, component_type, component_id, parent_id,
-              position_x, position_y, width, height, properties,
-              display_order, layout_type, layout_config, zones_config, zone_id
-            ) VALUES ${layoutValues.join(", ")}`,
-            layoutParams
+            `INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data, created_at, updated_at)
+             VALUES ($1, $2, $3, NOW(), NOW())
+             ON CONFLICT (screen_id, company_code) 
+             DO UPDATE SET layout_data = $3, updated_at = NOW()`,
+            [targetScreenId, targetCompanyCode, JSON.stringify(updatedLayoutData)]
           );
-        }
 
-        const action = isUpdate ? "업데이트" : "복사";
-        logger.info(`    ↳ 레이아웃 ${action}: ${layoutsResult.rows.length}개`);
+          const action = isUpdate ? "업데이트" : "복사";
+          logger.info(`    ↳ V2 레이아웃 ${action}: ${components.length}개 컴포넌트`);
+        } else {
+          logger.info(`    ↳ V2 레이아웃 없음 (스킵): screen_id=${originalScreenId}`);
+        }
       } catch (error: any) {
         logger.error(
-          `❌ 레이아웃 처리 실패: screen_id=${originalScreenId}`,
+          `❌ V2 레이아웃 처리 실패: screen_id=${originalScreenId}`,
           error
         );
         throw error;
@@ -1835,6 +1772,83 @@ export class MenuCopyService {
     return false;
   }
 
+  /**
+   * V2 레이아웃 변경 여부 확인 (screen_layouts_v2용)
+   */
+  private hasLayoutChangesV2(
+    sourceLayoutData: any,
+    targetLayoutData: any
+  ): boolean {
+    // 1. 둘 다 없으면 변경 없음
+    if (!sourceLayoutData && !targetLayoutData) return false;
+    
+    // 2. 하나만 있으면 변경됨
+    if (!sourceLayoutData || !targetLayoutData) return true;
+    
+    // 3. components 배열 비교
+    const sourceComps = sourceLayoutData.components || [];
+    const targetComps = targetLayoutData.components || [];
+    
+    if (sourceComps.length !== targetComps.length) return true;
+    
+    // 4. 각 컴포넌트 비교 (url, position, size, overrides)
+    for (let i = 0; i < sourceComps.length; i++) {
+      const s = sourceComps[i];
+      const t = targetComps[i];
+      
+      if (s.url !== t.url) return true;
+      if (JSON.stringify(s.position) !== JSON.stringify(t.position)) return true;
+      if (JSON.stringify(s.size) !== JSON.stringify(t.size)) return true;
+      if (JSON.stringify(s.overrides) !== JSON.stringify(t.overrides)) return true;
+    }
+    
+    return false;
+  }
+
+  /**
+   * V2 레이아웃 데이터의 참조 ID들을 업데이트 (componentId, flowId, ruleId, screenId, menuId)
+   */
+  private updateReferencesInLayoutDataV2(
+    layoutData: any,
+    componentIdMap: Map<string, string>,
+    screenIdMap: Map<number, number>,
+    flowIdMap: Map<number, number>,
+    numberingRuleIdMap?: Map<string, string>,
+    menuIdMap?: Map<number, number>
+  ): any {
+    if (!layoutData?.components) return layoutData;
+
+    const updatedComponents = layoutData.components.map((comp: any) => {
+      // 1. componentId 매핑
+      const newId = componentIdMap.get(comp.id) || comp.id;
+
+      // 2. overrides 복사 및 재귀적 참조 업데이트
+      let overrides = JSON.parse(JSON.stringify(comp.overrides || {}));
+
+      // 재귀적으로 모든 참조 업데이트
+      this.recursiveUpdateReferences(
+        overrides,
+        screenIdMap,
+        flowIdMap,
+        "",
+        numberingRuleIdMap,
+        menuIdMap
+      );
+
+      return {
+        ...comp,
+        id: newId,
+        overrides,
+      };
+    });
+
+    return {
+      ...layoutData,
+      components: updatedComponents,
+      updatedAt: new Date().toISOString(),
+    };
+  }
+
   /**
    * 메뉴 위상 정렬 (부모 먼저)
    */
@@ -2231,6 +2245,68 @@ export class MenuCopyService {
     }
   }
 
+  /**
+   * 메뉴 URL 업데이트 (화면 ID 재매핑)
+   * menu_url에 포함된 /screens/{screenId} 형식의 화면 ID를 복제된 화면 ID로 교체
+   */
+  private async updateMenuUrls(
+    menuIdMap: Map<number, number>,
+    screenIdMap: Map<number, number>,
+    client: PoolClient
+  ): Promise<void> {
+    if (menuIdMap.size === 0 || screenIdMap.size === 0) {
+      logger.info("📭 메뉴 URL 업데이트 대상 없음");
+      return;
+    }
+
+    const newMenuObjids = Array.from(menuIdMap.values());
+    
+    // 복제된 메뉴 중 menu_url이 있는 것 조회
+    const menusWithUrl = await client.query<{
+      objid: number;
+      menu_url: string;
+    }>(
+      `SELECT objid, menu_url FROM menu_info 
+       WHERE objid = ANY($1) AND menu_url IS NOT NULL AND menu_url != ''`,
+      [newMenuObjids]
+    );
+
+    if (menusWithUrl.rows.length === 0) {
+      logger.info("📭 menu_url 업데이트 대상 없음");
+      return;
+    }
+
+    let updatedCount = 0;
+    const screenIdPattern = /\/screens\/(\d+)/;
+
+    for (const menu of menusWithUrl.rows) {
+      const match = menu.menu_url.match(screenIdPattern);
+      if (!match) continue;
+
+      const originalScreenId = parseInt(match[1], 10);
+      const newScreenId = screenIdMap.get(originalScreenId);
+
+      if (newScreenId && newScreenId !== originalScreenId) {
+        const newMenuUrl = menu.menu_url.replace(
+          `/screens/${originalScreenId}`,
+          `/screens/${newScreenId}`
+        );
+
+        await client.query(
+          `UPDATE menu_info SET menu_url = $1 WHERE objid = $2`,
+          [newMenuUrl, menu.objid]
+        );
+
+        logger.info(
+          `  🔗 메뉴 URL 업데이트: ${menu.menu_url} → ${newMenuUrl}`
+        );
+        updatedCount++;
+      }
+    }
+
+    logger.info(`✅ 메뉴 URL 업데이트 완료: ${updatedCount}개`);
+  }
+
   /**
    * 코드 카테고리 + 코드 복사 (최적화: 배치 조회/삽입)
    */
@@ -2477,8 +2553,9 @@ export class MenuCopyService {
   }
 
   /**
-   * 채번 규칙 복사 (최적화: 배치 조회/삽입)
-   * 화면 복사 전에 호출되어 numberingRuleId 참조 업데이트에 사용됨
+   * 채번 규칙 복사 (새 스키마: table_name + column_name 기반)
+   * 프론트엔드에서 /numbering-rules/copy-for-company API를 별도 호출하므로
+   * 이 함수는 ruleIdMap 생성만 담당 (실제 복제는 numberingRuleService에서 처리)
    */
   private async copyNumberingRulesWithMap(
     menuObjids: number[],
@@ -2487,222 +2564,47 @@ export class MenuCopyService {
     userId: string,
     client: PoolClient
   ): Promise<{ copiedCount: number; ruleIdMap: Map<string, string> }> {
-    let copiedCount = 0;
     const ruleIdMap = new Map<string, string>();
 
-    if (menuObjids.length === 0) {
-      return { copiedCount, ruleIdMap };
-    }
-
-    // === 최적화: 배치 조회 ===
-    // 1. 모든 원본 채번 규칙 한 번에 조회
-    const allRulesResult = await client.query(
-      `SELECT * FROM numbering_rules WHERE menu_objid = ANY($1)`,
-      [menuObjids]
+    // 새 스키마에서는 채번규칙이 메뉴와 직접 연결되지 않음
+    // 프론트엔드에서 /numbering-rules/copy-for-company API를 별도 호출
+    // 여기서는 기존 규칙 ID를 그대로 매핑 (화면 레이아웃의 numberingRuleId 참조용)
+    
+    // 원본 회사의 채번규칙 조회 (company_code 기반)
+    const sourceRulesResult = await client.query(
+      `SELECT rule_id, rule_name FROM numbering_rules WHERE company_code = $1`,
+      [menuObjids.length > 0 ? (await client.query(
+        `SELECT company_code FROM menu_info WHERE objid = $1`,
+        [menuObjids[0]]
+      )).rows[0]?.company_code : null]
     );
 
-    if (allRulesResult.rows.length === 0) {
-      logger.info(`  📭 복사할 채번 규칙 없음`);
-      return { copiedCount, ruleIdMap };
-    }
-
-    // 2. 대상 회사에 이미 존재하는 모든 채번 규칙 조회 (원본 ID + 새로 생성될 ID 모두 체크 필요)
-    const existingRulesResult = await client.query(
-      `SELECT rule_id FROM numbering_rules WHERE company_code = $1`,
+    // 대상 회사의 채번규칙 조회 (이름 기준 매핑)
+    const targetRulesResult = await client.query(
+      `SELECT rule_id, rule_name FROM numbering_rules WHERE company_code = $1`,
       [targetCompanyCode]
     );
-    const existingRuleIds = new Set(
-      existingRulesResult.rows.map((r) => r.rule_id)
+
+    const targetRulesByName = new Map(
+      targetRulesResult.rows.map((r: any) => [r.rule_name, r.rule_id])
     );
 
-    // 3. 복사할 규칙과 스킵할 규칙 분류
-    const rulesToCopy: any[] = [];
-    const originalToNewRuleMap: Array<{ original: string; new: string }> = [];
-
-    // 기존 규칙 중 menu_objid 업데이트가 필요한 규칙들
-    const rulesToUpdate: Array<{ ruleId: string; newMenuObjid: number }> = [];
-
-    for (const rule of allRulesResult.rows) {
-      // 새 rule_id 계산: 회사코드 접두사 제거 후 대상 회사코드 추가
-      // 예: COMPANY_10_rule-123 -> rule-123 -> COMPANY_16_rule-123
-      // 예: rule-123 -> rule-123 -> COMPANY_16_rule-123
-      // 예: WACE_품목코드 -> 품목코드 -> COMPANY_16_품목코드
-      let baseName = rule.rule_id;
-
-      // 회사코드 접두사 패턴들을 순서대로 제거 시도
-      // 1. COMPANY_숫자_ 패턴 (예: COMPANY_10_)
-      // 2. 일반 접두사_ 패턴 (예: WACE_)
-      if (baseName.match(/^COMPANY_\d+_/)) {
-        baseName = baseName.replace(/^COMPANY_\d+_/, "");
-      } else if (baseName.includes("_")) {
-        baseName = baseName.replace(/^[^_]+_/, "");
-      }
-
-      const newRuleId = `${targetCompanyCode}_${baseName}`;
-
-      if (existingRuleIds.has(rule.rule_id)) {
-        // 원본 ID가 이미 존재 (동일한 ID로 매핑)
-        ruleIdMap.set(rule.rule_id, rule.rule_id);
-
-        const newMenuObjid = menuIdMap.get(rule.menu_objid);
-        if (newMenuObjid) {
-          rulesToUpdate.push({ ruleId: rule.rule_id, newMenuObjid });
-        }
-        logger.info(`  ♻️ 채번규칙 이미 존재 (원본 ID): ${rule.rule_id}`);
-      } else if (existingRuleIds.has(newRuleId)) {
-        // 새로 생성될 ID가 이미 존재 (기존 규칙으로 매핑)
-        ruleIdMap.set(rule.rule_id, newRuleId);
-
-        const newMenuObjid = menuIdMap.get(rule.menu_objid);
-        if (newMenuObjid) {
-          rulesToUpdate.push({ ruleId: newRuleId, newMenuObjid });
-        }
-        logger.info(
-          `  ♻️ 채번규칙 이미 존재 (대상 ID): ${rule.rule_id} -> ${newRuleId}`
-        );
-      } else {
-        // 새로 복사 필요
-        ruleIdMap.set(rule.rule_id, newRuleId);
-        originalToNewRuleMap.push({ original: rule.rule_id, new: newRuleId });
-        rulesToCopy.push({ ...rule, newRuleId });
-        logger.info(`  📋 채번규칙 복사 예정: ${rule.rule_id} -> ${newRuleId}`);
+    // 이름 기준으로 매핑 생성
+    for (const sourceRule of sourceRulesResult.rows) {
+      const targetRuleId = targetRulesByName.get(sourceRule.rule_name);
+      if (targetRuleId) {
+        ruleIdMap.set(sourceRule.rule_id, targetRuleId);
+        logger.info(`  🔗 채번규칙 매핑: ${sourceRule.rule_id} -> ${targetRuleId}`);
       }
     }
 
-    // 4. 배치 INSERT로 채번 규칙 복사
-    // menu 스코프인데 menu_objid 매핑이 없는 규칙은 제외 (연결 없이 복제하지 않음)
-    const validRulesToCopy = rulesToCopy.filter((r) => {
-      if (r.scope_type === "menu") {
-        const newMenuObjid = menuIdMap.get(r.menu_objid);
-        if (newMenuObjid === undefined) {
-          logger.info(`  ⏭️ 채번규칙 "${r.rule_name}" 건너뜀: 메뉴 연결 없음 (원본 menu_objid: ${r.menu_objid})`);
-          // ruleIdMap에서도 제거
-          ruleIdMap.delete(r.rule_id);
-          return false; // 복제 대상에서 제외
-        }
-      }
-      return true;
-    });
-
-    if (validRulesToCopy.length > 0) {
-      const ruleValues = validRulesToCopy
-        .map(
-          (_, i) =>
-            `($${i * 13 + 1}, $${i * 13 + 2}, $${i * 13 + 3}, $${i * 13 + 4}, $${i * 13 + 5}, $${i * 13 + 6}, $${i * 13 + 7}, $${i * 13 + 8}, $${i * 13 + 9}, NOW(), $${i * 13 + 10}, $${i * 13 + 11}, $${i * 13 + 12}, $${i * 13 + 13})`
-        )
-        .join(", ");
-
-      const ruleParams = validRulesToCopy.flatMap((r) => {
-        const newMenuObjid = menuIdMap.get(r.menu_objid);
-        // menu 스코프인 경우 반드시 menu_objid가 있음 (위에서 필터링됨)
-        const finalMenuObjid = newMenuObjid !== undefined ? newMenuObjid : null;
-        // scope_type은 원본 유지 (menu 스코프는 반드시 menu_objid가 있으므로)
-        const finalScopeType = r.scope_type;
-
-        return [
-          r.newRuleId,
-          r.rule_name,
-          r.description,
-          r.separator,
-          r.reset_period,
-          0,
-          r.table_name,
-          r.column_name,
-          targetCompanyCode,
-          userId,
-          finalMenuObjid,
-          finalScopeType,
-          null,
-        ];
-      });
-
-      await client.query(
-        `INSERT INTO numbering_rules (
-          rule_id, rule_name, description, separator, reset_period,
-          current_sequence, table_name, column_name, company_code,
-          created_at, created_by, menu_objid, scope_type, last_generated_date
-        ) VALUES ${ruleValues}`,
-        ruleParams
-      );
-
-      copiedCount = validRulesToCopy.length;
-      logger.info(`  ✅ 채번 규칙 ${copiedCount}개 복사 (${rulesToCopy.length - validRulesToCopy.length}개 건너뜀)`);
-    }
-
-    // 4-1. 기존 채번 규칙의 menu_objid 업데이트 (새 메뉴와 연결) - 배치 처리
-    if (rulesToUpdate.length > 0) {
-      // CASE WHEN을 사용한 배치 업데이트
-      // menu_objid는 numeric 타입이므로 ::numeric 캐스팅 필요
-      const caseWhen = rulesToUpdate
-        .map(
-          (_, i) => `WHEN rule_id = $${i * 2 + 1} THEN $${i * 2 + 2}::numeric`
-        )
-        .join(" ");
-      const ruleIdsForUpdate = rulesToUpdate.map((r) => r.ruleId);
-      const params = rulesToUpdate.flatMap((r) => [r.ruleId, r.newMenuObjid]);
-
-      await client.query(
-        `UPDATE numbering_rules 
-         SET menu_objid = CASE ${caseWhen} END, updated_at = NOW()
-         WHERE rule_id = ANY($${params.length + 1}) AND company_code = $${params.length + 2}`,
-        [...params, ruleIdsForUpdate, targetCompanyCode]
-      );
-      logger.info(
-        `  ✅ 기존 채번 규칙 ${rulesToUpdate.length}개 메뉴 연결 갱신`
-      );
-    }
-
-    // 5. 모든 원본 파트 한 번에 조회 (새로 복사한 규칙만 대상)
-    if (rulesToCopy.length > 0) {
-      const originalRuleIds = rulesToCopy.map((r) => r.rule_id);
-      const allPartsResult = await client.query(
-        `SELECT * FROM numbering_rule_parts 
-         WHERE rule_id = ANY($1) ORDER BY rule_id, part_order`,
-        [originalRuleIds]
-      );
-
-      // 6. 배치 INSERT로 채번 규칙 파트 복사
-      if (allPartsResult.rows.length > 0) {
-        // 원본 rule_id -> 새 rule_id 매핑
-        const ruleMapping = new Map(
-          originalToNewRuleMap.map((m) => [m.original, m.new])
-        );
-
-        const partValues = allPartsResult.rows
-          .map(
-            (_, i) =>
-              `($${i * 7 + 1}, $${i * 7 + 2}, $${i * 7 + 3}, $${i * 7 + 4}, $${i * 7 + 5}, $${i * 7 + 6}, $${i * 7 + 7}, NOW())`
-          )
-          .join(", ");
-
-        const partParams = allPartsResult.rows.flatMap((p) => [
-          ruleMapping.get(p.rule_id),
-          p.part_order,
-          p.part_type,
-          p.generation_method,
-          p.auto_config,
-          p.manual_config,
-          targetCompanyCode,
-        ]);
-
-        await client.query(
-          `INSERT INTO numbering_rule_parts (
-            rule_id, part_order, part_type, generation_method,
-            auto_config, manual_config, company_code, created_at
-          ) VALUES ${partValues}`,
-          partParams
-        );
-
-        logger.info(`  ✅ 채번 규칙 파트 ${allPartsResult.rows.length}개 복사`);
-      }
-    }
-
-    logger.info(
-      `✅ 채번 규칙 복사 완료: ${copiedCount}개, 매핑: ${ruleIdMap.size}개`
-    );
-    return { copiedCount, ruleIdMap };
+    logger.info(`  📋 채번규칙 매핑 완료: ${ruleIdMap.size}개`);
+    
+    // 실제 복제는 프론트엔드에서 별도 API 호출로 처리됨
+    return { copiedCount: 0, ruleIdMap };
   }
 
+
   /**
    * 카테고리 매핑 + 값 복사 (최적화: 배치 조회)
    *
diff --git a/backend-node/src/services/nodeFlowExecutionService.ts b/backend-node/src/services/nodeFlowExecutionService.ts
index eadddf9f..9bc59d97 100644
--- a/backend-node/src/services/nodeFlowExecutionService.ts
+++ b/backend-node/src/services/nodeFlowExecutionService.ts
@@ -102,6 +102,80 @@ export interface NodeExecutionSummary {
   error?: string;
 }
 
+// ===== 헬퍼 함수 =====
+
+/**
+ * 🔧 유효한 값인지 체크 (중괄호, 따옴표, 백슬래시 없어야 함)
+ * 숫자도 유효한 값으로 처리
+ */
+function isValidDBValue(v: any): boolean {
+  // 숫자면 유효 (나중에 문자열로 변환됨)
+  if (typeof v === "number" && !isNaN(v)) return true;
+  
+  // 문자열이 아니면 무효
+  if (typeof v !== "string") return false;
+  if (!v || v.trim() === "") return false;
+  if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
+  return true;
+}
+
+/**
+ * 🔧 값을 DB 저장용으로 정규화 (PostgreSQL 배열 형식 저장 방지)
+ * - JavaScript 배열 → 쉼표 구분 문자열 (유효한 값만)
+ * - PostgreSQL 배열 형식 문자열 → 쉼표 구분 문자열 (유효한 값만)
+ * - 중첩된 잘못된 형식 → null
+ */
+function normalizeValueForDB(value: any): any {
+  // 1. 배열이면 유효한 값만 필터링 후 쉼표 구분 문자열로 변환
+  if (Array.isArray(value)) {
+    // 숫자를 문자열로 변환하고 유효한 값만 필터링
+    const validValues = value
+      .map(v => typeof v === "number" ? String(v) : v)
+      .filter(isValidDBValue)
+      .map(v => typeof v === "number" ? String(v) : v); // 최종 문자열 변환
+    if (validValues.length === 0) {
+      console.warn(`⚠️ [normalizeValueForDB] 배열에 유효한 값 없음:`, value);
+      return null;
+    }
+    const normalized = validValues.join(",");
+    console.log(`🔧 [normalizeValueForDB] 배열→문자열:`, { original: value.length, valid: validValues.length, normalized });
+    return normalized;
+  }
+  
+  // 2. 문자열인데 잘못된 형식이면 정리
+  if (typeof value === "string" && value) {
+    // 잘못된 형식 감지
+    if (value.includes("{") || value.includes("}") || value.includes('\\"') || value.includes("\\\\")) {
+      console.warn(`⚠️ [normalizeValueForDB] 잘못된 문자열 형식:`, value.substring(0, 80));
+      
+      // 정규표현식으로 유효한 코드만 추출
+      const codePattern = /\b(CAT_[A-Z0-9_]+|[A-Z]{2,}_[A-Z0-9_]+)\b/g;
+      const matches = value.match(codePattern);
+      
+      if (matches && matches.length > 0) {
+        const uniqueValues = [...new Set(matches)];
+        const normalized = uniqueValues.join(",");
+        console.log(`🔧 [normalizeValueForDB] 코드 추출:`, { count: uniqueValues.length, normalized });
+        return normalized;
+      }
+      
+      console.warn(`⚠️ [normalizeValueForDB] 유효한 코드 없음, null 반환`);
+      return null;
+    }
+    
+    // 쉼표 구분 문자열이면 각 값 검증
+    if (value.includes(",")) {
+      const parts = value.split(",").map(v => v.trim()).filter(isValidDBValue);
+      if (parts.length === 0) {
+        return null;
+      }
+      return parts.join(",");
+    }
+  }
+  
+  return value;
+}
+
 // ===== 메인 실행 서비스 =====
 
 export class NodeFlowExecutionService {
@@ -845,6 +919,9 @@ export class NodeFlowExecutionService {
         logger.info(
           `📊 컨텍스트 데이터 사용: ${context.dataSourceType}, ${context.sourceData.length}건`
         );
+        // 🔍 디버깅: sourceData 내용 출력
+        logger.info(`📊 [테이블소스] sourceData 필드: ${JSON.stringify(Object.keys(context.sourceData[0]))}`);
+        logger.info(`📊 [테이블소스] sourceData.sabun: ${context.sourceData[0]?.sabun}`);
         return context.sourceData;
       }
 
@@ -1016,10 +1093,12 @@ export class NodeFlowExecutionService {
             );
           }
           
-          values.push(value);
+          // 🔧 배열을 쉼표 구분 문자열로 변환
+          const normalizedValue = normalizeValueForDB(value);
+          values.push(normalizedValue);
 
           // 🔥 삽입된 값을 데이터에 반영
-          insertedData[mapping.targetField] = value;
+          insertedData[mapping.targetField] = normalizedValue;
         }
 
         // 🆕 writer와 company_code 자동 추가 (필드 매핑에 없는 경우)
@@ -1152,9 +1231,11 @@ export class NodeFlowExecutionService {
             mapping.staticValue !== undefined
               ? mapping.staticValue
               : data[mapping.sourceField];
-          values.push(value);
+          // 🔧 배열을 쉼표 구분 문자열로 변환
+          const normalizedValue = normalizeValueForDB(value);
+          values.push(normalizedValue);
           // 🔥 삽입된 데이터 객체에 매핑된 값 적용
-          insertedData[mapping.targetField] = value;
+          insertedData[mapping.targetField] = normalizedValue;
         });
 
         // 외부 DB별 SQL 문법 차이 처리
@@ -1490,7 +1571,8 @@ export class NodeFlowExecutionService {
 
             if (mapping.targetField) {
               setClauses.push(`${mapping.targetField} = $${paramIndex}`);
-              values.push(value);
+              // 🔧 배열을 쉼표 구분 문자열로 변환
+              values.push(normalizeValueForDB(value));
               paramIndex++;
             }
           });
@@ -1553,11 +1635,13 @@ export class NodeFlowExecutionService {
           // targetField가 비어있지 않은 경우만 추가
           if (mapping.targetField) {
             setClauses.push(`${mapping.targetField} = $${paramIndex}`);
-            values.push(value);
+            // 🔧 배열을 쉼표 구분 문자열로 변환
+            const normalizedValue = normalizeValueForDB(value);
+            values.push(normalizedValue);
             paramIndex++;
 
             // 🔥 업데이트된 값을 데이터에 반영
-            updatedData[mapping.targetField] = value;
+            updatedData[mapping.targetField] = normalizedValue;
           } else {
             console.log(
               `⚠️ targetField가 비어있어 스킵: ${mapping.sourceField}`
@@ -1682,10 +1766,12 @@ export class NodeFlowExecutionService {
             setClauses.push(`${mapping.targetField} = $${paramIndex}`);
           }
 
-          values.push(value);
+          // 🔧 배열을 쉼표 구분 문자열로 변환
+          const normalizedValue = normalizeValueForDB(value);
+          values.push(normalizedValue);
           paramIndex++;
           // 🔥 업데이트된 데이터 객체에 매핑된 값 적용
-          updatedData[mapping.targetField] = value;
+          updatedData[mapping.targetField] = normalizedValue;
         });
 
         // WHERE 조건 생성
@@ -2314,7 +2400,8 @@ export class NodeFlowExecutionService {
                   ? mapping.staticValue
                   : data[mapping.sourceField];
               setClauses.push(`${mapping.targetField} = $${paramIndex}`);
-              updateValues.push(value);
+              // 🔧 배열을 쉼표 구분 문자열로 변환
+              updateValues.push(normalizeValueForDB(value));
               paramIndex++;
             }
           });
@@ -2365,7 +2452,8 @@ export class NodeFlowExecutionService {
                 ? mapping.staticValue
                 : data[mapping.sourceField];
             columns.push(mapping.targetField);
-            values.push(value);
+            // 🔧 배열을 쉼표 구분 문자열로 변환
+            values.push(normalizeValueForDB(value));
           });
 
           // 🆕 writer와 company_code 자동 추가 (필드 매핑에 없는 경우)
@@ -2546,7 +2634,8 @@ export class NodeFlowExecutionService {
                 setClauses.push(`${mapping.targetField} = $${paramIndex}`);
               }
 
-              updateValues.push(value);
+              // 🔧 배열을 쉼표 구분 문자열로 변환
+              updateValues.push(normalizeValueForDB(value));
               paramIndex++;
             }
           });
@@ -2584,7 +2673,8 @@ export class NodeFlowExecutionService {
                 ? mapping.staticValue
                 : data[mapping.sourceField];
             columns.push(mapping.targetField);
-            values.push(value);
+            // 🔧 배열을 쉼표 구분 문자열로 변환
+            values.push(normalizeValueForDB(value));
           });
 
           let insertSql: string;
diff --git a/backend-node/src/services/numberingRuleService.ts b/backend-node/src/services/numberingRuleService.ts
index 83e9b705..4f5bf1e9 100644
--- a/backend-node/src/services/numberingRuleService.ts
+++ b/backend-node/src/services/numberingRuleService.ts
@@ -47,11 +47,11 @@ class NumberingRuleService {
       logger.info("채번 규칙 목록 조회 시작", { companyCode });
 
       const pool = getPool();
-      
+
       // 멀티테넌시: 최고 관리자만 company_code="*" 데이터를 볼 수 있음
       let query: string;
       let params: any[];
-      
+
       if (companyCode === "*") {
         // 최고 관리자: 모든 회사 데이터 조회 가능
         query = `
@@ -65,8 +65,8 @@ class NumberingRuleService {
             table_name AS "tableName",
             column_name AS "columnName",
             company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            scope_type AS "scopeType",
+            category_column AS "categoryColumn",
+            category_value_id AS "categoryValueId",
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
@@ -88,8 +88,8 @@ class NumberingRuleService {
             table_name AS "tableName",
             column_name AS "columnName",
             company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            scope_type AS "scopeType",
+            category_column AS "categoryColumn",
+            category_value_id AS "categoryValueId",
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
@@ -107,7 +107,7 @@ class NumberingRuleService {
       for (const rule of result.rows) {
         let partsQuery: string;
         let partsParams: any[];
-        
+
         if (companyCode === "*") {
           // 최고 관리자: 모든 파트 조회
           partsQuery = `
@@ -156,7 +156,7 @@ class NumberingRuleService {
 
   /**
    * 현재 메뉴에서 사용 가능한 규칙 목록 조회 (메뉴 스코프)
-   * 
+   *
    * 메뉴 스코프 규칙:
    * - menuObjid가 제공되면 형제 메뉴의 채번 규칙 포함
    * - 우선순위: menu (형제 메뉴) > table > global
@@ -166,7 +166,7 @@ class NumberingRuleService {
     menuObjid?: number
   ): Promise<NumberingRuleConfig[]> {
     let menuAndChildObjids: number[] = []; // catch 블록에서 접근 가능하도록 함수 최상단에 선언
-    
+
     try {
       logger.info("메뉴별 사용 가능한 채번 규칙 조회 시작 (메뉴 스코프)", {
         companyCode,
@@ -178,14 +178,17 @@ class NumberingRuleService {
       // 1. 선택한 메뉴와 하위 메뉴 OBJID 조회 (형제 메뉴 제외)
       if (menuObjid) {
         menuAndChildObjids = await getMenuAndChildObjids(menuObjid);
-        logger.info("선택한 메뉴 및 하위 메뉴 OBJID 목록", { menuObjid, menuAndChildObjids });
+        logger.info("선택한 메뉴 및 하위 메뉴 OBJID 목록", {
+          menuObjid,
+          menuAndChildObjids,
+        });
       }
 
       // menuObjid가 없으면 global 규칙만 반환
       if (!menuObjid || menuAndChildObjids.length === 0) {
         let query: string;
         let params: any[];
-        
+
         if (companyCode === "*") {
           // 최고 관리자: 모든 global 규칙 조회
           query = `
@@ -199,13 +202,13 @@ class NumberingRuleService {
               table_name AS "tableName",
               column_name AS "columnName",
               company_code AS "companyCode",
-              menu_objid AS "menuObjid",
-              scope_type AS "scopeType",
+              category_column AS "categoryColumn",
+              category_value_id AS "categoryValueId",
               created_at AS "createdAt",
               updated_at AS "updatedAt",
               created_by AS "createdBy"
             FROM numbering_rules
-            WHERE scope_type = 'global'
+            WHERE 1=1
             ORDER BY created_at DESC
           `;
           params = [];
@@ -222,14 +225,13 @@ class NumberingRuleService {
               table_name AS "tableName",
               column_name AS "columnName",
               company_code AS "companyCode",
-              menu_objid AS "menuObjid",
-              scope_type AS "scopeType",
+              category_column AS "categoryColumn",
+              category_value_id AS "categoryValueId",
               created_at AS "createdAt",
               updated_at AS "updatedAt",
               created_by AS "createdBy"
             FROM numbering_rules
-            WHERE company_code = $1 AND scope_type = 'global'
-            ORDER BY created_at DESC
+            WHERE company_code = $1             ORDER BY created_at DESC
           `;
           params = [companyCode];
         }
@@ -240,7 +242,7 @@ class NumberingRuleService {
         for (const rule of result.rows) {
           let partsQuery: string;
           let partsParams: any[];
-          
+
           if (companyCode === "*") {
             partsQuery = `
               SELECT 
@@ -282,9 +284,9 @@ class NumberingRuleService {
       // 우선순위: menu (형제 메뉴) > table > global
       let query: string;
       let params: any[];
-      
+
       if (companyCode === "*") {
-        // 최고 관리자: 모든 규칙 조회 (선택한 메뉴 + 하위 메뉴)
+        // 최고 관리자: 모든 규칙 조회
         query = `
           SELECT 
             rule_id AS "ruleId",
@@ -296,28 +298,18 @@ class NumberingRuleService {
             table_name AS "tableName",
             column_name AS "columnName",
             company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            scope_type AS "scopeType",
+            category_column AS "categoryColumn",
+            category_value_id AS "categoryValueId",
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
           FROM numbering_rules
-          WHERE 
-            scope_type = 'global'
-            OR (scope_type = 'menu' AND menu_objid = ANY($1))
-            OR (scope_type = 'table' AND menu_objid = ANY($1))
-          ORDER BY 
-            CASE 
-              WHEN scope_type = 'menu' OR (scope_type = 'table' AND menu_objid = ANY($1)) THEN 1
-              WHEN scope_type = 'table' THEN 2
-              WHEN scope_type = 'global' THEN 3
-            END,
-            created_at DESC
+          ORDER BY created_at DESC
         `;
-        params = [menuAndChildObjids];
-        logger.info("최고 관리자: 메뉴 및 하위 메뉴 기반 채번 규칙 조회", { menuAndChildObjids });
+        params = [];
+        logger.info("최고 관리자: 전체 채번 규칙 조회");
       } else {
-        // 일반 회사: 자신의 규칙만 조회 (선택한 메뉴 + 하위 메뉴)
+        // 일반 회사: 자신의 규칙만 조회
         query = `
           SELECT 
             rule_id AS "ruleId",
@@ -329,33 +321,22 @@ class NumberingRuleService {
             table_name AS "tableName",
             column_name AS "columnName",
             company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            scope_type AS "scopeType",
+            category_column AS "categoryColumn",
+            category_value_id AS "categoryValueId",
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
           FROM numbering_rules
           WHERE company_code = $1
-            AND (
-              scope_type = 'global'
-              OR (scope_type = 'menu' AND menu_objid = ANY($2))
-              OR (scope_type = 'table' AND menu_objid = ANY($2))
-            )
-          ORDER BY 
-            CASE 
-              WHEN scope_type = 'menu' OR (scope_type = 'table' AND menu_objid = ANY($2)) THEN 1
-              WHEN scope_type = 'table' THEN 2
-              WHEN scope_type = 'global' THEN 3
-            END,
-            created_at DESC
+          ORDER BY created_at DESC
         `;
-        params = [companyCode, menuAndChildObjids];
-        logger.info("회사별: 메뉴 및 하위 메뉴 기반 채번 규칙 조회", { companyCode, menuAndChildObjids });
+        params = [companyCode];
+        logger.info("회사별 채번 규칙 조회", { companyCode });
       }
 
       logger.info("🔍 채번 규칙 쿼리 실행", {
         queryPreview: query.substring(0, 200),
-        paramsTypes: params.map(p => typeof p),
+        paramsTypes: params.map((p) => typeof p),
         paramsValues: params,
       });
 
@@ -368,7 +349,7 @@ class NumberingRuleService {
         try {
           let partsQuery: string;
           let partsParams: any[];
-          
+
           if (companyCode === "*") {
             partsQuery = `
               SELECT 
@@ -401,7 +382,7 @@ class NumberingRuleService {
 
           const partsResult = await pool.query(partsQuery, partsParams);
           rule.parts = partsResult.rows;
-          
+
           logger.info("✅ 규칙 파트 조회 성공", {
             ruleId: rule.ruleId,
             ruleName: rule.ruleName,
@@ -475,8 +456,8 @@ class NumberingRuleService {
             table_name AS "tableName",
             column_name AS "columnName",
             company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            scope_type AS "scopeType",
+            category_column AS "categoryColumn",
+            category_value_id AS "categoryValueId",
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
@@ -500,8 +481,8 @@ class NumberingRuleService {
             table_name AS "tableName",
             column_name AS "columnName",
             company_code AS "companyCode",
-            menu_objid AS "menuObjid",
-            scope_type AS "scopeType",
+            category_column AS "categoryColumn",
+            category_value_id AS "categoryValueId",
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
@@ -559,11 +540,11 @@ class NumberingRuleService {
     companyCode: string
   ): Promise<NumberingRuleConfig | null> {
     const pool = getPool();
-    
+
     // 멀티테넌시: 최고 관리자만 company_code="*" 데이터를 볼 수 있음
     let query: string;
     let params: any[];
-    
+
     if (companyCode === "*") {
       // 최고 관리자: 모든 규칙 조회 가능
       query = `
@@ -577,8 +558,8 @@ class NumberingRuleService {
           table_name AS "tableName",
           column_name AS "columnName",
           company_code AS "companyCode",
-          menu_objid AS "menuObjid",
-          scope_type AS "scopeType",
+          category_column AS "categoryColumn",
+          category_value_id AS "categoryValueId",
           created_at AS "createdAt",
           updated_at AS "updatedAt",
           created_by AS "createdBy"
@@ -599,8 +580,8 @@ class NumberingRuleService {
           table_name AS "tableName",
           column_name AS "columnName",
           company_code AS "companyCode",
-          menu_objid AS "menuObjid",
-          scope_type AS "scopeType",
+          category_column AS "categoryColumn",
+          category_value_id AS "categoryValueId",
           created_at AS "createdAt",
           updated_at AS "updatedAt",
           created_by AS "createdBy"
@@ -620,7 +601,7 @@ class NumberingRuleService {
     // 파트 정보 조회
     let partsQuery: string;
     let partsParams: any[];
-    
+
     if (companyCode === "*") {
       partsQuery = `
         SELECT 
@@ -676,7 +657,7 @@ class NumberingRuleService {
         INSERT INTO numbering_rules (
           rule_id, rule_name, description, separator, reset_period,
           current_sequence, table_name, column_name, company_code, 
-          menu_objid, scope_type, created_by
+          category_column, category_value_id, created_by
         ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
         RETURNING 
           rule_id AS "ruleId",
@@ -688,8 +669,8 @@ class NumberingRuleService {
           table_name AS "tableName",
           column_name AS "columnName",
           company_code AS "companyCode",
-          menu_objid AS "menuObjid",
-          scope_type AS "scopeType",
+          category_column AS "categoryColumn",
+          category_value_id AS "categoryValueId",
           created_at AS "createdAt",
           updated_at AS "updatedAt",
           created_by AS "createdBy"
@@ -705,8 +686,8 @@ class NumberingRuleService {
         config.tableName || null,
         config.columnName || null,
         companyCode,
-        config.menuObjid || null,
-        config.scopeType || "global",
+        config.categoryColumn || null,
+        config.categoryValueId || null,
         userId,
       ]);
 
@@ -778,8 +759,8 @@ class NumberingRuleService {
           reset_period = COALESCE($4, reset_period),
           table_name = COALESCE($5, table_name),
           column_name = COALESCE($6, column_name),
-          menu_objid = COALESCE($7, menu_objid),
-          scope_type = COALESCE($8, scope_type),
+          category_column = COALESCE($7, category_column),
+          category_value_id = COALESCE($8, category_value_id),
           updated_at = NOW()
         WHERE rule_id = $9 AND company_code = $10
         RETURNING 
@@ -792,8 +773,8 @@ class NumberingRuleService {
           table_name AS "tableName",
           column_name AS "columnName",
           company_code AS "companyCode",
-          menu_objid AS "menuObjid",
-          scope_type AS "scopeType",
+          category_column AS "categoryColumn",
+          category_value_id AS "categoryValueId",
           created_at AS "createdAt",
           updated_at AS "updatedAt",
           created_by AS "createdBy"
@@ -806,8 +787,8 @@ class NumberingRuleService {
         updates.resetPeriod,
         updates.tableName,
         updates.columnName,
-        updates.menuObjid,
-        updates.scopeType,
+        updates.categoryColumn,
+        updates.categoryValueId,
         ruleId,
         companyCode,
       ]);
@@ -858,12 +839,12 @@ class NumberingRuleService {
       return { ...ruleResult.rows[0], parts };
     } catch (error: any) {
       await client.query("ROLLBACK");
-      logger.error("채번 규칙 수정 실패", { 
+      logger.error("채번 규칙 수정 실패", {
         ruleId,
         companyCode,
         error: error.message,
         stack: error.stack,
-        updates 
+        updates,
       });
       throw error;
     } finally {
@@ -897,7 +878,7 @@ class NumberingRuleService {
    * @param formData 폼 데이터 (카테고리 기반 채번 시 사용)
    */
   async previewCode(
-    ruleId: string, 
+    ruleId: string,
     companyCode: string,
     formData?: Record<string, any>
   ): Promise<string> {
@@ -908,8 +889,9 @@ class NumberingRuleService {
       .sort((a: any, b: any) => a.order - b.order)
       .map((part: any) => {
         if (part.generationMethod === "manual") {
-          // 수동 입력 - 플레이스홀더 표시 (실제 값은 사용자가 입력)
-          return part.manualConfig?.placeholder || "____";
+          // 수동 입력 - 항상 ____ 마커 사용 (프론트엔드에서 편집 가능하게 처리)
+          // placeholder 텍스트는 프론트엔드에서 별도로 표시
+          return "____";
         }
 
         const autoConfig = part.autoConfig || {};
@@ -932,21 +914,26 @@ class NumberingRuleService {
           case "date": {
             // 날짜 (다양한 날짜 형식)
             const dateFormat = autoConfig.dateFormat || "YYYYMMDD";
-            
+
             // 컬럼 기준 생성인 경우 폼 데이터에서 날짜 추출
-            if (autoConfig.useColumnValue && autoConfig.sourceColumnName && formData) {
+            if (
+              autoConfig.useColumnValue &&
+              autoConfig.sourceColumnName &&
+              formData
+            ) {
               const columnValue = formData[autoConfig.sourceColumnName];
               if (columnValue) {
-                const dateValue = columnValue instanceof Date 
-                  ? columnValue 
-                  : new Date(columnValue);
-                
+                const dateValue =
+                  columnValue instanceof Date
+                    ? columnValue
+                    : new Date(columnValue);
+
                 if (!isNaN(dateValue.getTime())) {
                   return this.formatDate(dateValue, dateFormat);
                 }
               }
             }
-            
+
             return this.formatDate(new Date(), dateFormat);
           }
 
@@ -959,63 +946,68 @@ class NumberingRuleService {
             // 카테고리 기반 코드 생성
             const categoryKey = autoConfig.categoryKey; // 예: "item_info.material"
             const categoryMappings = autoConfig.categoryMappings || [];
-            
+
             if (!categoryKey || !formData) {
-              logger.warn("카테고리 키 또는 폼 데이터 없음", { categoryKey, hasFormData: !!formData });
+              logger.warn("카테고리 키 또는 폼 데이터 없음", {
+                categoryKey,
+                hasFormData: !!formData,
+              });
               return "";
             }
-            
+
             // categoryKey에서 컬럼명 추출 (예: "item_info.material" -> "material")
-            const columnName = categoryKey.includes(".") 
-              ? categoryKey.split(".")[1] 
+            const columnName = categoryKey.includes(".")
+              ? categoryKey.split(".")[1]
               : categoryKey;
-            
+
             // 폼 데이터에서 해당 컬럼의 값 가져오기
             const selectedValue = formData[columnName];
-            
-            logger.info("카테고리 파트 처리", { 
-              categoryKey, 
-              columnName, 
+
+            logger.info("카테고리 파트 처리", {
+              categoryKey,
+              columnName,
               selectedValue,
               formDataKeys: Object.keys(formData),
-              mappingsCount: categoryMappings.length
+              mappingsCount: categoryMappings.length,
             });
-            
+
             if (!selectedValue) {
-              logger.warn("카테고리 값이 선택되지 않음", { columnName, formDataKeys: Object.keys(formData) });
+              logger.warn("카테고리 값이 선택되지 않음", {
+                columnName,
+                formDataKeys: Object.keys(formData),
+              });
               return "";
             }
-            
+
             // 카테고리 매핑에서 해당 값에 대한 형식 찾기
             // selectedValue는 valueCode일 수 있음 (V2Select에서 valueCode를 value로 사용)
             const selectedValueStr = String(selectedValue);
-            const mapping = categoryMappings.find(
-              (m: any) => {
-                // ID로 매칭
-                if (m.categoryValueId?.toString() === selectedValueStr) return true;
-                // 라벨로 매칭
-                if (m.categoryValueLabel === selectedValueStr) return true;
-                // valueCode로 매칭 (라벨과 동일할 수 있음)
-                if (m.categoryValueLabel === selectedValueStr) return true;
-                return false;
-              }
-            );
-            
+            const mapping = categoryMappings.find((m: any) => {
+              // ID로 매칭
+              if (m.categoryValueId?.toString() === selectedValueStr)
+                return true;
+              // 라벨로 매칭
+              if (m.categoryValueLabel === selectedValueStr) return true;
+              // valueCode로 매칭 (라벨과 동일할 수 있음)
+              if (m.categoryValueLabel === selectedValueStr) return true;
+              return false;
+            });
+
             if (mapping) {
-              logger.info("카테고리 매핑 적용", { 
-                selectedValue, 
+              logger.info("카테고리 매핑 적용", {
+                selectedValue,
                 format: mapping.format,
-                categoryValueLabel: mapping.categoryValueLabel 
+                categoryValueLabel: mapping.categoryValueLabel,
               });
               return mapping.format || "";
             }
-            
-            logger.warn("카테고리 매핑을 찾을 수 없음", { 
-              selectedValue, 
-              availableMappings: categoryMappings.map((m: any) => ({ 
-                id: m.categoryValueId, 
-                label: m.categoryValueLabel 
-              }))
+
+            logger.warn("카테고리 매핑을 찾을 수 없음", {
+              selectedValue,
+              availableMappings: categoryMappings.map((m: any) => ({
+                id: m.categoryValueId,
+                label: m.categoryValueLabel,
+              })),
             });
             return "";
           }
@@ -1027,7 +1019,12 @@ class NumberingRuleService {
       });
 
     const previewCode = parts.join(rule.separator || "");
-    logger.info("코드 미리보기 생성", { ruleId, previewCode, companyCode, hasFormData: !!formData });
+    logger.info("코드 미리보기 생성", {
+      ruleId,
+      previewCode,
+      companyCode,
+      hasFormData: !!formData,
+    });
     return previewCode;
   }
 
@@ -1036,11 +1033,13 @@ class NumberingRuleService {
    * @param ruleId 채번 규칙 ID
    * @param companyCode 회사 코드
    * @param formData 폼 데이터 (날짜 컬럼 기준 생성 시 사용)
+   * @param userInputCode 사용자가 편집한 최종 코드 (수동 입력 부분 추출용)
    */
   async allocateCode(
-    ruleId: string, 
-    companyCode: string, 
-    formData?: Record<string, any>
+    ruleId: string,
+    companyCode: string,
+    formData?: Record<string, any>,
+    userInputCode?: string
   ): Promise<string> {
     const pool = getPool();
     const client = await pool.connect();
@@ -1051,11 +1050,117 @@ class NumberingRuleService {
       const rule = await this.getRuleById(ruleId, companyCode);
       if (!rule) throw new Error("규칙을 찾을 수 없습니다");
 
+      // 수동 입력 파트가 있고, 사용자가 입력한 코드가 있으면 수동 입력 부분 추출
+      const manualParts = rule.parts.filter(
+        (p: any) => p.generationMethod === "manual"
+      );
+      let extractedManualValues: string[] = [];
+
+      if (manualParts.length > 0 && userInputCode) {
+        // 프리뷰 코드를 생성해서 ____ 위치 파악
+        // 🔧 category 파트도 처리하여 올바른 템플릿 생성
+        const previewParts = rule.parts
+          .sort((a: any, b: any) => a.order - b.order)
+          .map((part: any) => {
+            if (part.generationMethod === "manual") {
+              return "____";
+            }
+            const autoConfig = part.autoConfig || {};
+            switch (part.partType) {
+              case "sequence": {
+                const length = autoConfig.sequenceLength || 3;
+                return "X".repeat(length); // 순번 자리 표시
+              }
+              case "text":
+                return autoConfig.textValue || "";
+              case "date":
+                return "DATEPART"; // 날짜 자리 표시
+              case "category": {
+                // 카테고리 파트: formData에서 실제 값을 가져와서 매핑된 형식 사용
+                const categoryKey = autoConfig.categoryKey;
+                const categoryMappings = autoConfig.categoryMappings || [];
+
+                if (!categoryKey || !formData) {
+                  return "CATEGORY"; // 폴백
+                }
+
+                const columnName = categoryKey.includes(".")
+                  ? categoryKey.split(".")[1]
+                  : categoryKey;
+                const selectedValue = formData[columnName];
+
+                if (!selectedValue) {
+                  return "CATEGORY"; // 폴백
+                }
+
+                const selectedValueStr = String(selectedValue);
+                const mapping = categoryMappings.find((m: any) => {
+                  if (m.categoryValueId?.toString() === selectedValueStr)
+                    return true;
+                  if (m.categoryValueLabel === selectedValueStr) return true;
+                  return false;
+                });
+
+                return mapping?.format || "CATEGORY";
+              }
+              default:
+                return "";
+            }
+          });
+
+        const separator = rule.separator || "";
+        const previewTemplate = previewParts.join(separator);
+
+        // 사용자 입력 코드에서 수동 입력 부분 추출
+        // 예: 템플릿 "R-____-XXX", 사용자입력 "R-MYVALUE-012" → "MYVALUE" 추출
+        const templateParts = previewTemplate.split("____");
+        if (templateParts.length > 1) {
+          let remainingCode = userInputCode;
+          for (let i = 0; i < templateParts.length - 1; i++) {
+            const prefix = templateParts[i];
+            const suffix = templateParts[i + 1];
+
+            // prefix 이후 부분 추출
+            if (prefix && remainingCode.startsWith(prefix)) {
+              remainingCode = remainingCode.slice(prefix.length);
+            }
+
+            // suffix 이전까지가 수동 입력 값
+            if (suffix) {
+              // suffix에서 순번(XXX)이나 날짜 부분을 제외한 실제 구분자 찾기
+              const suffixStart = suffix.replace(/X+|DATEPART/g, "");
+              const manualEndIndex = suffixStart
+                ? remainingCode.indexOf(suffixStart)
+                : remainingCode.length;
+              if (manualEndIndex > 0) {
+                extractedManualValues.push(
+                  remainingCode.slice(0, manualEndIndex)
+                );
+                remainingCode = remainingCode.slice(manualEndIndex);
+              }
+            } else {
+              extractedManualValues.push(remainingCode);
+            }
+          }
+        }
+
+        logger.info(
+          `수동 입력 값 추출: userInputCode=${userInputCode}, previewTemplate=${previewTemplate}, extractedManualValues=${JSON.stringify(extractedManualValues)}`
+        );
+      }
+
+      let manualPartIndex = 0;
       const parts = rule.parts
         .sort((a: any, b: any) => a.order - b.order)
         .map((part: any) => {
           if (part.generationMethod === "manual") {
-            return part.manualConfig?.value || "";
+            // 추출된 수동 입력 값 사용, 없으면 기본값 사용
+            const manualValue =
+              extractedManualValues[manualPartIndex] ||
+              part.manualConfig?.value ||
+              "";
+            manualPartIndex++;
+            return manualValue;
           }
 
           const autoConfig = part.autoConfig || {};
@@ -1078,16 +1183,21 @@ class NumberingRuleService {
             case "date": {
               // 날짜 (다양한 날짜 형식)
               const dateFormat = autoConfig.dateFormat || "YYYYMMDD";
-              
+
               // 컬럼 기준 생성인 경우 폼 데이터에서 날짜 추출
-              if (autoConfig.useColumnValue && autoConfig.sourceColumnName && formData) {
+              if (
+                autoConfig.useColumnValue &&
+                autoConfig.sourceColumnName &&
+                formData
+              ) {
                 const columnValue = formData[autoConfig.sourceColumnName];
                 if (columnValue) {
                   // 날짜 문자열 또는 Date 객체를 Date로 변환
-                  const dateValue = columnValue instanceof Date 
-                    ? columnValue 
-                    : new Date(columnValue);
-                  
+                  const dateValue =
+                    columnValue instanceof Date
+                      ? columnValue
+                      : new Date(columnValue);
+
                   if (!isNaN(dateValue.getTime())) {
                     logger.info("컬럼 기준 날짜 생성", {
                       sourceColumn: autoConfig.sourceColumnName,
@@ -1108,7 +1218,7 @@ class NumberingRuleService {
                   });
                 }
               }
-              
+
               // 기본: 현재 날짜 사용
               return this.formatDate(new Date(), dateFormat);
             }
@@ -1118,6 +1228,73 @@ class NumberingRuleService {
               return autoConfig.textValue || "TEXT";
             }
 
+            case "category": {
+              // 카테고리 기반 코드 생성 (allocateCode용)
+              const categoryKey = autoConfig.categoryKey; // 예: "item_info.material"
+              const categoryMappings = autoConfig.categoryMappings || [];
+
+              if (!categoryKey || !formData) {
+                logger.warn("allocateCode: 카테고리 키 또는 폼 데이터 없음", {
+                  categoryKey,
+                  hasFormData: !!formData,
+                });
+                return "";
+              }
+
+              // categoryKey에서 컬럼명 추출 (예: "item_info.material" -> "material")
+              const columnName = categoryKey.includes(".")
+                ? categoryKey.split(".")[1]
+                : categoryKey;
+
+              // 폼 데이터에서 해당 컬럼의 값 가져오기
+              const selectedValue = formData[columnName];
+
+              logger.info("allocateCode: 카테고리 파트 처리", {
+                categoryKey,
+                columnName,
+                selectedValue,
+                formDataKeys: Object.keys(formData),
+                mappingsCount: categoryMappings.length,
+              });
+
+              if (!selectedValue) {
+                logger.warn("allocateCode: 카테고리 값이 선택되지 않음", {
+                  columnName,
+                  formDataKeys: Object.keys(formData),
+                });
+                return "";
+              }
+
+              // 카테고리 매핑에서 해당 값에 대한 형식 찾기
+              const selectedValueStr = String(selectedValue);
+              const mapping = categoryMappings.find((m: any) => {
+                // ID로 매칭
+                if (m.categoryValueId?.toString() === selectedValueStr)
+                  return true;
+                // 라벨로 매칭
+                if (m.categoryValueLabel === selectedValueStr) return true;
+                return false;
+              });
+
+              if (mapping) {
+                logger.info("allocateCode: 카테고리 매핑 적용", {
+                  selectedValue,
+                  format: mapping.format,
+                  categoryValueLabel: mapping.categoryValueLabel,
+                });
+                return mapping.format || "";
+              }
+
+              logger.warn("allocateCode: 카테고리 매핑을 찾을 수 없음", {
+                selectedValue,
+                availableMappings: categoryMappings.map((m: any) => ({
+                  id: m.categoryValueId,
+                  label: m.categoryValueLabel,
+                })),
+              });
+              return "";
+            }
+
             default:
               logger.warn("알 수 없는 파트 타입", { partType: part.partType });
               return "";
@@ -1198,21 +1375,24 @@ class NumberingRuleService {
 
   /**
    * [테스트] 테스트 테이블에서 채번 규칙 목록 조회
-   * numbering_rules_test 테이블 사용
+   * numbering_rules 테이블 사용
    */
   async getRulesFromTest(
     companyCode: string,
     menuObjid?: number
   ): Promise<NumberingRuleConfig[]> {
     try {
-      logger.info("[테스트] 채번 규칙 목록 조회 시작", { companyCode, menuObjid });
+      logger.info("[테스트] 채번 규칙 목록 조회 시작", {
+        companyCode,
+        menuObjid,
+      });
 
       const pool = getPool();
-      
+
       // 멀티테넌시: 최고 관리자 vs 일반 회사
       let query: string;
       let params: any[];
-      
+
       if (companyCode === "*") {
         // 최고 관리자: 모든 규칙 조회
         query = `
@@ -1231,7 +1411,7 @@ class NumberingRuleService {
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
-          FROM numbering_rules_test
+          FROM numbering_rules
           ORDER BY created_at DESC
         `;
         params = [];
@@ -1253,7 +1433,7 @@ class NumberingRuleService {
             created_at AS "createdAt",
             updated_at AS "updatedAt",
             created_by AS "createdBy"
-          FROM numbering_rules_test
+          FROM numbering_rules
           WHERE company_code = $1
           ORDER BY created_at DESC
         `;
@@ -1272,7 +1452,7 @@ class NumberingRuleService {
             generation_method AS "generationMethod",
             auto_config AS "autoConfig",
             manual_config AS "manualConfig"
-          FROM numbering_rule_parts_test
+          FROM numbering_rule_parts
           WHERE rule_id = $1 AND company_code = $2
           ORDER BY part_order
         `;
@@ -1300,8 +1480,8 @@ class NumberingRuleService {
   }
 
   /**
-   * [테스트] 테이블명 + 컬럼명 기반으로 채번규칙 조회 (menu_objid 없이)
-   * numbering_rules_test 테이블 사용
+   * 테이블명 + 컬럼명 기반으로 채번규칙 조회
+   * numbering_rules 테이블 사용
    */
   async getNumberingRuleByColumn(
     companyCode: string,
@@ -1333,8 +1513,8 @@ class NumberingRuleService {
           r.created_at AS "createdAt",
           r.updated_at AS "updatedAt",
           r.created_by AS "createdBy"
-        FROM numbering_rules_test r
-        LEFT JOIN category_values_test cv ON r.category_value_id = cv.value_id
+        FROM numbering_rules r
+        LEFT JOIN category_values cv ON r.category_value_id = cv.value_id
         WHERE r.company_code = $1
           AND r.table_name = $2
           AND r.column_name = $3
@@ -1365,11 +1545,14 @@ class NumberingRuleService {
           generation_method AS "generationMethod",
           auto_config AS "autoConfig",
           manual_config AS "manualConfig"
-        FROM numbering_rule_parts_test
+        FROM numbering_rule_parts
         WHERE rule_id = $1 AND company_code = $2
         ORDER BY part_order
       `;
-      const partsResult = await pool.query(partsQuery, [rule.ruleId, companyCode]);
+      const partsResult = await pool.query(partsQuery, [
+        rule.ruleId,
+        companyCode,
+      ]);
       rule.parts = partsResult.rows;
 
       logger.info("테이블+컬럼 기반 채번 규칙 조회 성공 (테스트)", {
@@ -1391,7 +1574,7 @@ class NumberingRuleService {
 
   /**
    * [테스트] 테스트 테이블에 채번규칙 저장
-   * numbering_rules_test 테이블 사용
+   * numbering_rules 테이블 사용
    */
   async saveRuleToTest(
     config: NumberingRuleConfig,
@@ -1414,15 +1597,18 @@ class NumberingRuleService {
 
       // 기존 규칙 확인
       const existingQuery = `
-        SELECT rule_id FROM numbering_rules_test 
+        SELECT rule_id FROM numbering_rules 
         WHERE rule_id = $1 AND company_code = $2
       `;
-      const existingResult = await client.query(existingQuery, [config.ruleId, companyCode]);
+      const existingResult = await client.query(existingQuery, [
+        config.ruleId,
+        companyCode,
+      ]);
 
       if (existingResult.rows.length > 0) {
         // 업데이트
         const updateQuery = `
-          UPDATE numbering_rules_test SET
+          UPDATE numbering_rules SET
             rule_name = $1,
             description = $2,
             separator = $3,
@@ -1449,13 +1635,13 @@ class NumberingRuleService {
 
         // 기존 파트 삭제
         await client.query(
-          "DELETE FROM numbering_rule_parts_test WHERE rule_id = $1 AND company_code = $2",
+          "DELETE FROM numbering_rule_parts WHERE rule_id = $1 AND company_code = $2",
           [config.ruleId, companyCode]
         );
       } else {
         // 신규 등록
         const insertQuery = `
-          INSERT INTO numbering_rules_test (
+          INSERT INTO numbering_rules (
             rule_id, rule_name, description, separator, reset_period,
             current_sequence, table_name, column_name, company_code,
             category_column, category_value_id,
@@ -1482,7 +1668,7 @@ class NumberingRuleService {
       if (config.parts && config.parts.length > 0) {
         for (const part of config.parts) {
           const partInsertQuery = `
-            INSERT INTO numbering_rule_parts_test (
+            INSERT INTO numbering_rule_parts (
               rule_id, part_order, part_type, generation_method,
               auto_config, manual_config, company_code, created_at
             ) VALUES ($1, $2, $3, $4, $5, $6, $7, NOW())
@@ -1523,7 +1709,7 @@ class NumberingRuleService {
 
   /**
    * [테스트] 테스트 테이블에서 채번규칙 삭제
-   * numbering_rules_test 테이블 사용
+   * numbering_rules 테이블 사용
    */
   async deleteRuleFromTest(ruleId: string, companyCode: string): Promise<void> {
     const pool = getPool();
@@ -1532,17 +1718,20 @@ class NumberingRuleService {
     try {
       await client.query("BEGIN");
 
-      logger.info("테스트 테이블에서 채번 규칙 삭제 시작", { ruleId, companyCode });
+      logger.info("테스트 테이블에서 채번 규칙 삭제 시작", {
+        ruleId,
+        companyCode,
+      });
 
       // 파트 먼저 삭제
       await client.query(
-        "DELETE FROM numbering_rule_parts_test WHERE rule_id = $1 AND company_code = $2",
+        "DELETE FROM numbering_rule_parts WHERE rule_id = $1 AND company_code = $2",
         [ruleId, companyCode]
       );
 
       // 규칙 삭제
       const result = await client.query(
-        "DELETE FROM numbering_rules_test WHERE rule_id = $1 AND company_code = $2",
+        "DELETE FROM numbering_rules WHERE rule_id = $1 AND company_code = $2",
         [ruleId, companyCode]
       );
 
@@ -1608,8 +1797,8 @@ class NumberingRuleService {
             r.created_at AS "createdAt",
             r.updated_at AS "updatedAt",
             r.created_by AS "createdBy"
-          FROM numbering_rules_test r
-          LEFT JOIN category_values_test cv ON r.category_value_id = cv.value_id
+          FROM numbering_rules r
+          LEFT JOIN category_values cv ON r.category_value_id = cv.value_id
           WHERE r.company_code = $1
             AND r.table_name = $2
             AND r.column_name = $3
@@ -1636,11 +1825,14 @@ class NumberingRuleService {
               generation_method AS "generationMethod",
               auto_config AS "autoConfig",
               manual_config AS "manualConfig"
-            FROM numbering_rule_parts_test
+            FROM numbering_rule_parts
             WHERE rule_id = $1 AND company_code = $2
             ORDER BY part_order
           `;
-          const partsResult = await pool.query(partsQuery, [rule.ruleId, companyCode]);
+          const partsResult = await pool.query(partsQuery, [
+            rule.ruleId,
+            companyCode,
+          ]);
           rule.parts = partsResult.rows;
 
           logger.info("카테고리 조건 매칭 채번 규칙 찾음", {
@@ -1668,14 +1860,18 @@ class NumberingRuleService {
           r.created_at AS "createdAt",
           r.updated_at AS "updatedAt",
           r.created_by AS "createdBy"
-        FROM numbering_rules_test r
+        FROM numbering_rules r
         WHERE r.company_code = $1
           AND r.table_name = $2
           AND r.column_name = $3
           AND r.category_value_id IS NULL
         LIMIT 1
       `;
-      const defaultResult = await pool.query(defaultQuery, [companyCode, tableName, columnName]);
+      const defaultResult = await pool.query(defaultQuery, [
+        companyCode,
+        tableName,
+        columnName,
+      ]);
 
       if (defaultResult.rows.length > 0) {
         const rule = defaultResult.rows[0];
@@ -1688,11 +1884,14 @@ class NumberingRuleService {
             generation_method AS "generationMethod",
             auto_config AS "autoConfig",
             manual_config AS "manualConfig"
-          FROM numbering_rule_parts_test
+          FROM numbering_rule_parts
           WHERE rule_id = $1 AND company_code = $2
           ORDER BY part_order
         `;
-        const partsResult = await pool.query(partsQuery, [rule.ruleId, companyCode]);
+        const partsResult = await pool.query(partsQuery, [
+          rule.ruleId,
+          companyCode,
+        ]);
         rule.parts = partsResult.rows;
 
         logger.info("기본 채번 규칙 찾음 (카테고리 조건 없음)", {
@@ -1745,15 +1944,19 @@ class NumberingRuleService {
           r.created_at AS "createdAt",
           r.updated_at AS "updatedAt",
           r.created_by AS "createdBy"
-        FROM numbering_rules_test r
-        LEFT JOIN category_values_test cv ON r.category_value_id = cv.value_id
+        FROM numbering_rules r
+        LEFT JOIN category_values cv ON r.category_value_id = cv.value_id
         WHERE r.company_code = $1
           AND r.table_name = $2
           AND r.column_name = $3
         ORDER BY r.category_value_id NULLS FIRST, r.created_at
       `;
-      const result = await pool.query(query, [companyCode, tableName, columnName]);
-      
+      const result = await pool.query(query, [
+        companyCode,
+        tableName,
+        columnName,
+      ]);
+
       // 각 규칙의 파트 정보 조회
       for (const rule of result.rows) {
         const partsQuery = `
@@ -1764,11 +1967,14 @@ class NumberingRuleService {
             generation_method AS "generationMethod",
             auto_config AS "autoConfig",
             manual_config AS "manualConfig"
-          FROM numbering_rule_parts_test
+          FROM numbering_rule_parts
           WHERE rule_id = $1 AND company_code = $2
           ORDER BY part_order
         `;
-        const partsResult = await pool.query(partsQuery, [rule.ruleId, companyCode]);
+        const partsResult = await pool.query(partsQuery, [
+          rule.ruleId,
+          companyCode,
+        ]);
         rule.parts = partsResult.rows;
       }
 
@@ -1782,34 +1988,60 @@ class NumberingRuleService {
   }
 
   /**
-   * 회사별 채번규칙 복제 (메뉴 동기화 완료 후 호출)
-   * 메뉴 이름을 기준으로 채번규칙을 대상 회사의 메뉴에 연결
+   * 회사별 채번규칙 복제 (테이블 기반)
+   * numbering_rules, numbering_rule_parts 테이블 사용
    * 복제 후 화면 레이아웃의 numberingRuleId 참조도 업데이트
    */
   async copyRulesForCompany(
     sourceCompanyCode: string,
     targetCompanyCode: string
-  ): Promise<{ copiedCount: number; skippedCount: number; details: string[]; ruleIdMap: Record<string, string> }> {
+  ): Promise<{
+    copiedCount: number;
+    skippedCount: number;
+    details: string[];
+    ruleIdMap: Record<string, string>;
+  }> {
     const pool = getPool();
     const client = await pool.connect();
-    
-    const result = { copiedCount: 0, skippedCount: 0, details: [] as string[], ruleIdMap: {} as Record<string, string> };
+
+    const result = {
+      copiedCount: 0,
+      skippedCount: 0,
+      details: [] as string[],
+      ruleIdMap: {} as Record<string, string>,
+    };
 
     try {
       await client.query("BEGIN");
 
-      // 1. 원본 회사의 채번규칙 조회 (menu + table 스코프 모두)
+      // 0. 대상 회사의 기존 채번규칙 삭제 (깨끗하게 복제하기 위해)
+      // 먼저 파트 삭제
+      await client.query(
+        `DELETE FROM numbering_rule_parts 
+         WHERE rule_id IN (SELECT rule_id FROM numbering_rules WHERE company_code = $1)`,
+        [targetCompanyCode]
+      );
+      // 규칙 삭제
+      const deleteResult = await client.query(
+        `DELETE FROM numbering_rules WHERE company_code = $1 RETURNING rule_id`,
+        [targetCompanyCode]
+      );
+      if (deleteResult.rowCount && deleteResult.rowCount > 0) {
+        logger.info("기존 채번규칙 삭제", {
+          targetCompanyCode,
+          deletedCount: deleteResult.rowCount,
+        });
+      }
+
+      // 1. 원본 회사의 채번규칙 조회 - numbering_rules 사용
       const sourceRulesResult = await client.query(
-        `SELECT nr.*, mi.menu_name_kor as source_menu_name
-         FROM numbering_rules nr
-         LEFT JOIN menu_info mi ON nr.menu_objid = mi.objid
-         WHERE nr.company_code = $1 AND nr.scope_type IN ('menu', 'table')`,
+        `SELECT * FROM numbering_rules WHERE company_code = $1`,
         [sourceCompanyCode]
       );
 
-      logger.info("원본 채번규칙 조회", { 
-        sourceCompanyCode, 
-        count: sourceRulesResult.rowCount 
+      logger.info("원본 채번규칙 조회", {
+        sourceCompanyCode,
+        count: sourceRulesResult.rowCount,
       });
 
       // 2. 각 채번규칙 복제
@@ -1817,7 +2049,7 @@ class NumberingRuleService {
         // 새 rule_id 생성
         const newRuleId = `rule-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-        // 이미 존재하는지 확인 (이름 기반)
+        // 이미 존재하는지 확인 (이름 기반) - numbering_rules 사용
         const existsCheck = await client.query(
           `SELECT rule_id FROM numbering_rules 
            WHERE company_code = $1 AND rule_name = $2`,
@@ -1832,32 +2064,12 @@ class NumberingRuleService {
           continue;
         }
 
-        let targetMenuObjid = null;
-
-        // menu 스코프인 경우 대상 메뉴 찾기
-        if (rule.scope_type === 'menu' && rule.source_menu_name) {
-          const targetMenuResult = await client.query(
-            `SELECT objid FROM menu_info 
-             WHERE company_code = $1 AND menu_name_kor = $2
-             LIMIT 1`,
-            [targetCompanyCode, rule.source_menu_name]
-          );
-
-          if (targetMenuResult.rows.length === 0) {
-            result.skippedCount++;
-            result.details.push(`건너뜀 (메뉴 없음): ${rule.rule_name} - 메뉴: ${rule.source_menu_name}`);
-            continue;
-          }
-
-          targetMenuObjid = targetMenuResult.rows[0].objid;
-        }
-
-        // 채번규칙 복제
+        // 채번규칙 복제 - numbering_rules 사용
         await client.query(
           `INSERT INTO numbering_rules (
             rule_id, rule_name, description, separator, reset_period,
             current_sequence, table_name, column_name, company_code,
-            created_at, updated_at, created_by, scope_type, menu_objid
+            created_at, updated_at, created_by, category_column, category_value_id
           ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, NOW(), NOW(), $10, $11, $12)`,
           [
             newRuleId,
@@ -1870,12 +2082,12 @@ class NumberingRuleService {
             rule.column_name,
             targetCompanyCode,
             rule.created_by,
-            rule.scope_type,
-            targetMenuObjid,
+            rule.category_column,
+            rule.category_value_id,
           ]
         );
 
-        // 채번규칙 파트 복제
+        // 채번규칙 파트 복제 - numbering_rule_parts 사용
         const partsResult = await client.query(
           `SELECT * FROM numbering_rule_parts WHERE rule_id = $1 ORDER BY part_order`,
           [rule.rule_id]
@@ -1902,20 +2114,19 @@ class NumberingRuleService {
         // 매핑 추가
         result.ruleIdMap[rule.rule_id] = newRuleId;
         result.copiedCount++;
-        result.details.push(`복제 완료: ${rule.rule_name} (${rule.scope_type})`);
-        logger.info("채번규칙 복제 완료", { 
-          ruleName: rule.rule_name, 
+        result.details.push(`복제 완료: ${rule.rule_name}`);
+        logger.info("채번규칙 복제 완료", {
+          ruleName: rule.rule_name,
           oldRuleId: rule.rule_id,
-          newRuleId, 
-          targetMenuObjid 
+          newRuleId,
         });
       }
 
       // 3. 화면 레이아웃의 numberingRuleId 참조 업데이트
       if (Object.keys(result.ruleIdMap).length > 0) {
-        logger.info("화면 레이아웃 numberingRuleId 참조 업데이트 시작", { 
+        logger.info("화면 레이아웃 numberingRuleId 참조 업데이트 시작", {
           targetCompanyCode,
-          mappingCount: Object.keys(result.ruleIdMap).length 
+          mappingCount: Object.keys(result.ruleIdMap).length,
         });
 
         // 대상 회사의 모든 화면 레이아웃 조회
@@ -1935,9 +2146,13 @@ class NumberingRuleService {
           let updated = false;
 
           // 각 매핑에 대해 치환
-          for (const [oldRuleId, newRuleId] of Object.entries(result.ruleIdMap)) {
+          for (const [oldRuleId, newRuleId] of Object.entries(
+            result.ruleIdMap
+          )) {
             if (propsStr.includes(`"${oldRuleId}"`)) {
-              propsStr = propsStr.split(`"${oldRuleId}"`).join(`"${newRuleId}"`);
+              propsStr = propsStr
+                .split(`"${oldRuleId}"`)
+                .join(`"${newRuleId}"`);
               updated = true;
             }
           }
@@ -1951,27 +2166,33 @@ class NumberingRuleService {
           }
         }
 
-        logger.info("화면 레이아웃 numberingRuleId 참조 업데이트 완료", { 
+        logger.info("화면 레이아웃 numberingRuleId 참조 업데이트 완료", {
           targetCompanyCode,
-          updatedLayouts 
+          updatedLayouts,
         });
-        result.details.push(`화면 레이아웃 ${updatedLayouts}개의 채번규칙 참조 업데이트`);
+        result.details.push(
+          `화면 레이아웃 ${updatedLayouts}개의 채번규칙 참조 업데이트`
+        );
       }
 
       await client.query("COMMIT");
-      
-      logger.info("회사별 채번규칙 복제 완료", { 
-        sourceCompanyCode, 
-        targetCompanyCode, 
+
+      logger.info("회사별 채번규칙 복제 완료", {
+        sourceCompanyCode,
+        targetCompanyCode,
         copiedCount: result.copiedCount,
         skippedCount: result.skippedCount,
-        ruleIdMapCount: Object.keys(result.ruleIdMap).length
+        ruleIdMapCount: Object.keys(result.ruleIdMap).length,
       });
 
       return result;
     } catch (error) {
       await client.query("ROLLBACK");
-      logger.error("회사별 채번규칙 복제 실패", { error, sourceCompanyCode, targetCompanyCode });
+      logger.error("회사별 채번규칙 복제 실패", {
+        error,
+        sourceCompanyCode,
+        targetCompanyCode,
+      });
       throw error;
     } finally {
       client.release();
diff --git a/backend-node/src/services/scheduleService.ts b/backend-node/src/services/scheduleService.ts
new file mode 100644
index 00000000..0ce378d5
--- /dev/null
+++ b/backend-node/src/services/scheduleService.ts
@@ -0,0 +1,520 @@
+/**
+ * 스케줄 자동 생성 서비스
+ *
+ * 스케줄 미리보기 생성, 적용, 조회 로직을 처리합니다.
+ */
+
+import { pool } from "../database/db";
+
+// ============================================================================
+// 타입 정의
+// ============================================================================
+
+export interface ScheduleGenerationConfig {
+  scheduleType: "PRODUCTION" | "MAINTENANCE" | "SHIPPING" | "WORK_ASSIGN";
+  source: {
+    tableName: string;
+    groupByField: string;
+    quantityField: string;
+    dueDateField?: string;
+  };
+  resource: {
+    type: string;
+    idField: string;
+    nameField: string;
+  };
+  rules: {
+    leadTimeDays?: number;
+    dailyCapacity?: number;
+    workingDays?: number[];
+    considerStock?: boolean;
+    stockTableName?: string;
+    stockQtyField?: string;
+    safetyStockField?: string;
+  };
+  target: {
+    tableName: string;
+  };
+}
+
+export interface SchedulePreview {
+  toCreate: any[];
+  toDelete: any[];
+  toUpdate: any[];
+  summary: {
+    createCount: number;
+    deleteCount: number;
+    updateCount: number;
+    totalQty: number;
+  };
+}
+
+export interface ApplyOptions {
+  deleteExisting: boolean;
+  updateMode: "replace" | "merge";
+}
+
+export interface ApplyResult {
+  created: number;
+  deleted: number;
+  updated: number;
+}
+
+export interface ScheduleListQuery {
+  scheduleType?: string;
+  resourceType?: string;
+  resourceId?: string;
+  startDate?: string;
+  endDate?: string;
+  status?: string;
+  companyCode: string;
+}
+
+// ============================================================================
+// 서비스 클래스
+// ============================================================================
+
+export class ScheduleService {
+  /**
+   * 스케줄 미리보기 생성
+   */
+  async generatePreview(
+    config: ScheduleGenerationConfig,
+    sourceData: any[],
+    period: { start: string; end: string } | undefined,
+    companyCode: string
+  ): Promise<SchedulePreview> {
+    console.log("[ScheduleService] generatePreview 시작:", {
+      scheduleType: config.scheduleType,
+      sourceDataCount: sourceData.length,
+      period,
+      companyCode,
+    });
+
+    // 기본 기간 설정 (현재 월)
+    const now = new Date();
+    const defaultPeriod = {
+      start: new Date(now.getFullYear(), now.getMonth(), 1)
+        .toISOString()
+        .split("T")[0],
+      end: new Date(now.getFullYear(), now.getMonth() + 1, 0)
+        .toISOString()
+        .split("T")[0],
+    };
+    const effectivePeriod = period || defaultPeriod;
+
+    // 1. 소스 데이터를 리소스별로 그룹화
+    const groupedData = this.groupByResource(sourceData, config);
+
+    // 2. 각 리소스에 대해 스케줄 생성
+    const toCreate: any[] = [];
+    let totalQty = 0;
+
+    for (const [resourceId, items] of Object.entries(groupedData)) {
+      const schedules = this.generateSchedulesForResource(
+        resourceId,
+        items as any[],
+        config,
+        effectivePeriod,
+        companyCode
+      );
+      toCreate.push(...schedules);
+      totalQty += schedules.reduce((sum, s) => sum + (s.plan_qty || 0), 0);
+    }
+
+    // 3. 기존 스케줄 조회 (삭제 대상)
+    // 그룹 키에서 리소스 ID만 추출 ("리소스ID|날짜" 형식에서 "리소스ID"만)
+    const resourceIds = [
+      ...new Set(Object.keys(groupedData).map((key) => key.split("|")[0])),
+    ];
+    const toDelete = await this.getExistingSchedules(
+      config.scheduleType,
+      resourceIds,
+      effectivePeriod,
+      companyCode
+    );
+
+    // 4. 미리보기 결과 생성
+    const preview: SchedulePreview = {
+      toCreate,
+      toDelete,
+      toUpdate: [], // 현재는 Replace 모드만 지원
+      summary: {
+        createCount: toCreate.length,
+        deleteCount: toDelete.length,
+        updateCount: 0,
+        totalQty,
+      },
+    };
+
+    console.log("[ScheduleService] generatePreview 완료:", preview.summary);
+
+    return preview;
+  }
+
+  /**
+   * 스케줄 적용
+   */
+  async applySchedules(
+    config: ScheduleGenerationConfig,
+    preview: SchedulePreview,
+    options: ApplyOptions,
+    companyCode: string,
+    userId: string
+  ): Promise<ApplyResult> {
+    console.log("[ScheduleService] applySchedules 시작:", {
+      createCount: preview.summary.createCount,
+      deleteCount: preview.summary.deleteCount,
+      options,
+      companyCode,
+      userId,
+    });
+
+    const client = await pool.connect();
+    const result: ApplyResult = { created: 0, deleted: 0, updated: 0 };
+
+    try {
+      await client.query("BEGIN");
+
+      // 1. 기존 스케줄 삭제
+      if (options.deleteExisting && preview.toDelete.length > 0) {
+        const deleteIds = preview.toDelete.map((s) => s.schedule_id);
+        await client.query(
+          `DELETE FROM schedule_mng 
+           WHERE schedule_id = ANY($1) AND company_code = $2`,
+          [deleteIds, companyCode]
+        );
+        result.deleted = deleteIds.length;
+        console.log("[ScheduleService] 스케줄 삭제 완료:", result.deleted);
+      }
+
+      // 2. 새 스케줄 생성
+      for (const schedule of preview.toCreate) {
+        await client.query(
+          `INSERT INTO schedule_mng (
+            company_code, schedule_type, schedule_name,
+            resource_type, resource_id, resource_name,
+            start_date, end_date, due_date,
+            plan_qty, unit, status, priority,
+            source_table, source_id, source_group_key,
+            auto_generated, generated_at, generated_by,
+            metadata, created_by, updated_by
+          ) VALUES (
+            $1, $2, $3, $4, $5, $6, $7, $8, $9, $10,
+            $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22
+          )`,
+          [
+            companyCode,
+            schedule.schedule_type,
+            schedule.schedule_name,
+            schedule.resource_type,
+            schedule.resource_id,
+            schedule.resource_name,
+            schedule.start_date,
+            schedule.end_date,
+            schedule.due_date || null,
+            schedule.plan_qty,
+            schedule.unit || null,
+            schedule.status || "PLANNED",
+            schedule.priority || null,
+            schedule.source_table || null,
+            schedule.source_id || null,
+            schedule.source_group_key || null,
+            true,
+            new Date(),
+            userId,
+            schedule.metadata ? JSON.stringify(schedule.metadata) : null,
+            userId,
+            userId,
+          ]
+        );
+        result.created++;
+      }
+
+      await client.query("COMMIT");
+      console.log("[ScheduleService] applySchedules 완료:", result);
+
+      return result;
+    } catch (error) {
+      await client.query("ROLLBACK");
+      console.error("[ScheduleService] applySchedules 오류:", error);
+      throw error;
+    } finally {
+      client.release();
+    }
+  }
+
+  /**
+   * 스케줄 목록 조회
+   */
+  async getScheduleList(
+    query: ScheduleListQuery
+  ): Promise<{ data: any[]; total: number }> {
+    const conditions: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    // company_code 필터
+    if (query.companyCode !== "*") {
+      conditions.push(`company_code = $${paramIndex++}`);
+      params.push(query.companyCode);
+    }
+
+    // scheduleType 필터
+    if (query.scheduleType) {
+      conditions.push(`schedule_type = $${paramIndex++}`);
+      params.push(query.scheduleType);
+    }
+
+    // resourceType 필터
+    if (query.resourceType) {
+      conditions.push(`resource_type = $${paramIndex++}`);
+      params.push(query.resourceType);
+    }
+
+    // resourceId 필터
+    if (query.resourceId) {
+      conditions.push(`resource_id = $${paramIndex++}`);
+      params.push(query.resourceId);
+    }
+
+    // 기간 필터
+    if (query.startDate) {
+      conditions.push(`end_date >= $${paramIndex++}`);
+      params.push(query.startDate);
+    }
+    if (query.endDate) {
+      conditions.push(`start_date <= $${paramIndex++}`);
+      params.push(query.endDate);
+    }
+
+    // status 필터
+    if (query.status) {
+      conditions.push(`status = $${paramIndex++}`);
+      params.push(query.status);
+    }
+
+    const whereClause =
+      conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
+    const result = await pool.query(
+      `SELECT * FROM schedule_mng 
+       ${whereClause}
+       ORDER BY start_date, resource_id`,
+      params
+    );
+
+    return {
+      data: result.rows,
+      total: result.rows.length,
+    };
+  }
+
+  /**
+   * 스케줄 삭제
+   */
+  async deleteSchedule(
+    scheduleId: number,
+    companyCode: string,
+    userId: string
+  ): Promise<{ success: boolean; message?: string }> {
+    const result = await pool.query(
+      `DELETE FROM schedule_mng 
+       WHERE schedule_id = $1 AND (company_code = $2 OR $2 = '*')
+       RETURNING schedule_id`,
+      [scheduleId, companyCode]
+    );
+
+    if (result.rowCount === 0) {
+      return {
+        success: false,
+        message: "스케줄을 찾을 수 없거나 권한이 없습니다.",
+      };
+    }
+
+    // 이력 기록
+    await pool.query(
+      `INSERT INTO schedule_history (company_code, schedule_id, action, changed_by)
+       VALUES ($1, $2, 'DELETE', $3)`,
+      [companyCode, scheduleId, userId]
+    );
+
+    return { success: true };
+  }
+
+  // ============================================================================
+  // 헬퍼 메서드
+  // ============================================================================
+
+  /**
+   * 소스 데이터를 리소스별로 그룹화
+   * - 기준일(dueDateField)이 설정된 경우: 리소스 + 기준일 조합으로 그룹화
+   * - 기준일이 없는 경우: 리소스별로만 그룹화
+   */
+  private groupByResource(
+    sourceData: any[],
+    config: ScheduleGenerationConfig
+  ): Record<string, any[]> {
+    const grouped: Record<string, any[]> = {};
+    const dueDateField = config.source.dueDateField;
+
+    for (const item of sourceData) {
+      const resourceId = item[config.resource.idField];
+      if (!resourceId) continue;
+
+      // 그룹 키 생성: 기준일이 있으면 "리소스ID|기준일", 없으면 "리소스ID"
+      let groupKey = resourceId;
+      if (dueDateField && item[dueDateField]) {
+        // 날짜를 YYYY-MM-DD 형식으로 정규화
+        const dueDate = new Date(item[dueDateField])
+          .toISOString()
+          .split("T")[0];
+        groupKey = `${resourceId}|${dueDate}`;
+      }
+
+      if (!grouped[groupKey]) {
+        grouped[groupKey] = [];
+      }
+      grouped[groupKey].push(item);
+    }
+
+    console.log("[ScheduleService] 그룹화 결과:", {
+      groupCount: Object.keys(grouped).length,
+      groups: Object.keys(grouped),
+      dueDateField,
+    });
+
+    return grouped;
+  }
+
+  /**
+   * 리소스에 대한 스케줄 생성
+   * - groupKey 형식: "리소스ID" 또는 "리소스ID|기준일(YYYY-MM-DD)"
+   */
+  private generateSchedulesForResource(
+    groupKey: string,
+    items: any[],
+    config: ScheduleGenerationConfig,
+    period: { start: string; end: string },
+    companyCode: string
+  ): any[] {
+    const schedules: any[] = [];
+
+    // 그룹 키에서 리소스ID와 기준일 분리
+    const [resourceId, groupDueDate] = groupKey.split("|");
+    const resourceName = items[0]?.[config.resource.nameField] || resourceId;
+
+    // 총 수량 계산
+    const totalQty = items.reduce((sum, item) => {
+      return sum + (parseFloat(item[config.source.quantityField]) || 0);
+    }, 0);
+
+    if (totalQty <= 0) return schedules;
+
+    // 스케줄 규칙 적용
+    const {
+      leadTimeDays = 3,
+      dailyCapacity = totalQty,
+      workingDays = [1, 2, 3, 4, 5],
+    } = config.rules;
+
+    // 기준일(납기일/마감일) 결정
+    let dueDate: Date;
+    if (groupDueDate) {
+      // 그룹 키에 기준일이 포함된 경우
+      dueDate = new Date(groupDueDate);
+    } else if (config.source.dueDateField) {
+      // 아이템에서 기준일 찾기 (가장 빠른 날짜)
+      let earliestDate: Date | null = null;
+      for (const item of items) {
+        const itemDueDate = item[config.source.dueDateField];
+        if (itemDueDate) {
+          const date = new Date(itemDueDate);
+          if (!earliestDate || date < earliestDate) {
+            earliestDate = date;
+          }
+        }
+      }
+      dueDate = earliestDate || new Date(period.end);
+    } else {
+      // 기준일이 없으면 기간 종료일 사용
+      dueDate = new Date(period.end);
+    }
+
+    // 종료일 = 기준일 (납기일에 맞춰 완료)
+    const endDate = new Date(dueDate);
+
+    // 시작일 계산 (종료일에서 리드타임만큼 역산)
+    const startDate = new Date(endDate);
+    startDate.setDate(startDate.getDate() - leadTimeDays);
+
+    // 스케줄명 생성 (기준일 포함)
+    const dueDateStr = dueDate.toISOString().split("T")[0];
+    const scheduleName = groupDueDate
+      ? `${resourceName} (${dueDateStr})`
+      : `${resourceName} - ${config.scheduleType}`;
+
+    // 스케줄 생성
+    schedules.push({
+      schedule_type: config.scheduleType,
+      schedule_name: scheduleName,
+      resource_type: config.resource.type,
+      resource_id: resourceId,
+      resource_name: resourceName,
+      start_date: startDate.toISOString(),
+      end_date: endDate.toISOString(),
+      due_date: dueDate.toISOString(),
+      plan_qty: totalQty,
+      status: "PLANNED",
+      source_table: config.source.tableName,
+      source_id: items
+        .map((i) => i.id || i.order_no || i.sales_order_no)
+        .join(","),
+      source_group_key: resourceId,
+      metadata: {
+        sourceCount: items.length,
+        dailyCapacity,
+        leadTimeDays,
+        workingDays,
+        groupDueDate: groupDueDate || null,
+      },
+    });
+
+    console.log("[ScheduleService] 스케줄 생성:", {
+      groupKey,
+      resourceId,
+      resourceName,
+      dueDate: dueDateStr,
+      totalQty,
+      startDate: startDate.toISOString().split("T")[0],
+      endDate: endDate.toISOString().split("T")[0],
+    });
+
+    return schedules;
+  }
+
+  /**
+   * 기존 스케줄 조회 (삭제 대상)
+   */
+  private async getExistingSchedules(
+    scheduleType: string,
+    resourceIds: string[],
+    period: { start: string; end: string },
+    companyCode: string
+  ): Promise<any[]> {
+    if (resourceIds.length === 0) return [];
+
+    const result = await pool.query(
+      `SELECT * FROM schedule_mng 
+       WHERE schedule_type = $1 
+         AND resource_id = ANY($2)
+         AND end_date >= $3
+         AND start_date <= $4
+         AND (company_code = $5 OR $5 = '*')
+         AND auto_generated = true`,
+      [scheduleType, resourceIds, period.start, period.end, companyCode]
+    );
+
+    return result.rows;
+  }
+}
diff --git a/backend-node/src/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index 394c0b95..77c82a91 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -635,7 +635,76 @@ export class ScreenManagementService {
 
     // 트랜잭션으로 화면 삭제와 메뉴 할당 정리를 함께 처리 (Raw Query)
     await transaction(async (client) => {
-      // 소프트 삭제 (휴지통으로 이동)
+      // 1. 화면에서 사용하는 flowId 수집 (V2 레이아웃)
+      const layoutResult = await client.query<{ layout_data: any }>(
+        `SELECT layout_data FROM screen_layouts_v2 
+         WHERE screen_id = $1 AND (company_code = $2 OR company_code = '*')
+         ORDER BY CASE WHEN company_code = $2 THEN 0 ELSE 1 END
+         LIMIT 1`,
+        [screenId, userCompanyCode],
+      );
+      
+      const layoutData = layoutResult.rows[0]?.layout_data;
+      const flowIds = this.collectFlowIdsFromLayoutData(layoutData);
+      
+      // 2. 각 flowId가 다른 화면에서도 사용되는지 체크 후 삭제
+      if (flowIds.size > 0) {
+        for (const flowId of flowIds) {
+          // 다른 화면에서 사용 중인지 확인 (같은 회사 내, 삭제되지 않은 화면 기준)
+          const companyFilterForCheck = userCompanyCode === "*" ? "" : " AND sd.company_code = $3";
+          const checkParams = userCompanyCode === "*" 
+            ? [screenId, flowId] 
+            : [screenId, flowId, userCompanyCode];
+          
+          const otherUsageResult = await client.query<{ count: string }>(
+            `SELECT COUNT(*) as count FROM screen_layouts_v2 slv
+             JOIN screen_definitions sd ON slv.screen_id = sd.screen_id
+             WHERE slv.screen_id != $1 
+             AND sd.is_active != 'D'
+             ${companyFilterForCheck}
+             AND (
+               slv.layout_data::text LIKE '%"flowId":' || $2 || '%'
+               OR slv.layout_data::text LIKE '%"flowId":"' || $2 || '"%'
+             )`,
+            checkParams,
+          );
+          
+          const otherUsageCount = parseInt(otherUsageResult.rows[0]?.count || "0");
+          
+          // 다른 화면에서 사용하지 않는 경우에만 플로우 삭제
+          if (otherUsageCount === 0) {
+            // 해당 회사의 플로우만 삭제 (멀티테넌시)
+            const companyFilter = userCompanyCode === "*" ? "" : " AND company_code = $2";
+            const flowParams = userCompanyCode === "*" ? [flowId] : [flowId, userCompanyCode];
+            
+            // 1. flow_definition 관련 데이터 먼저 삭제 (외래키 순서)
+            await client.query(
+              `DELETE FROM flow_step_connection WHERE flow_definition_id = $1`,
+              [flowId],
+            );
+            await client.query(
+              `DELETE FROM flow_step WHERE flow_definition_id = $1`,
+              [flowId],
+            );
+            await client.query(
+              `DELETE FROM flow_definition WHERE id = $1${companyFilter}`,
+              flowParams,
+            );
+            
+            // 2. node_flows 테이블에서도 삭제 (제어플로우)
+            await client.query(
+              `DELETE FROM node_flows WHERE flow_id = $1${companyFilter}`,
+              flowParams,
+            );
+            
+            logger.info("화면 삭제 시 플로우 삭제 (flow_definition + node_flows)", { screenId, flowId, companyCode: userCompanyCode });
+          } else {
+            logger.debug("플로우가 다른 화면에서 사용 중 - 삭제 스킵", { screenId, flowId, otherUsageCount });
+          }
+        }
+      }
+
+      // 3. 소프트 삭제 (휴지통으로 이동)
       await client.query(
         `UPDATE screen_definitions
          SET is_active = 'D',
@@ -655,13 +724,21 @@ export class ScreenManagementService {
         ],
       );
 
-      // 메뉴 할당도 비활성화
+      // 4. 메뉴 할당도 비활성화
       await client.query(
         `UPDATE screen_menu_assignments
          SET is_active = 'N'
          WHERE screen_id = $1 AND is_active = 'Y'`,
         [screenId],
       );
+      
+      // 5. 화면 그룹 연결 삭제 (screen_group_screens)
+      await client.query(
+        `DELETE FROM screen_group_screens WHERE screen_id = $1`,
+        [screenId],
+      );
+      
+      logger.info("화면 삭제 시 그룹 연결 해제", { screenId });
     });
   }
 
@@ -1665,18 +1742,28 @@ export class ScreenManagementService {
       console.log(`V2 레이아웃 발견, V2 형식으로 반환`);
       const layoutData = v2Layout.layout_data;
 
+      // URL에서 컴포넌트 타입 추출하는 헬퍼 함수
+      const getTypeFromUrl = (url: string | undefined): string => {
+        if (!url) return "component";
+        const parts = url.split("/");
+        return parts[parts.length - 1] || "component";
+      };
+
       // V2 형식의 components를 LayoutData 형식으로 변환
-      const components = (layoutData.components || []).map((comp: any) => ({
-        id: comp.id,
-        type: comp.overrides?.type || "component",
-        position: comp.position || { x: 0, y: 0, z: 1 },
-        size: comp.size || { width: 200, height: 100 },
-        componentUrl: comp.url,
-        componentType: comp.overrides?.type,
-        componentConfig: comp.overrides || {},
-        displayOrder: comp.displayOrder || 0,
-        ...comp.overrides,
-      }));
+      const components = (layoutData.components || []).map((comp: any) => {
+        const componentType = getTypeFromUrl(comp.url);
+        return {
+          id: comp.id,
+          type: componentType,
+          position: comp.position || { x: 0, y: 0, z: 1 },
+          size: comp.size || { width: 200, height: 100 },
+          componentUrl: comp.url,
+          componentType: componentType,
+          componentConfig: comp.overrides || {},
+          displayOrder: comp.displayOrder || 0,
+          ...comp.overrides,
+        };
+      });
 
       // screenResolution이 없으면 컴포넌트 위치 기반으로 자동 계산
       let screenResolution = layoutData.screenResolution;
@@ -2936,7 +3023,7 @@ export class ScreenManagementService {
    * - current_sequence는 0으로 초기화
    */
   /**
-   * 채번 규칙 복제 (numbering_rules_test 테이블 사용)
+   * 채번 규칙 복제 (numbering_rules 테이블 사용)
    * - menu_objid 의존성 제거됨
    * - table_name + column_name + company_code 기반
    */
@@ -2954,10 +3041,10 @@ export class ScreenManagementService {
 
     console.log(`🔄 채번 규칙 복사 시작: ${ruleIds.size}개 규칙`);
 
-    // 1. 원본 채번 규칙 조회 (numbering_rules_test 테이블)
+    // 1. 원본 채번 규칙 조회 (numbering_rules 테이블)
     const ruleIdArray = Array.from(ruleIds);
     const sourceRulesResult = await client.query(
-      `SELECT * FROM numbering_rules_test WHERE rule_id = ANY($1)`,
+      `SELECT * FROM numbering_rules WHERE rule_id = ANY($1)`,
       [ruleIdArray],
     );
 
@@ -2970,7 +3057,7 @@ export class ScreenManagementService {
 
     // 2. 대상 회사의 기존 채번 규칙 조회 (이름 기준)
     const existingRulesResult = await client.query(
-      `SELECT rule_id, rule_name FROM numbering_rules_test WHERE company_code = $1`,
+      `SELECT rule_id, rule_name FROM numbering_rules WHERE company_code = $1`,
       [targetCompanyCode],
     );
     const existingRulesByName = new Map<string, string>(
@@ -2991,9 +3078,9 @@ export class ScreenManagementService {
         // 새로 복사 - 새 rule_id 생성
         const newRuleId = `rule-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-        // numbering_rules_test 복사 (current_sequence = 0으로 초기화)
+        // numbering_rules 복사 (current_sequence = 0으로 초기화)
         await client.query(
-          `INSERT INTO numbering_rules_test (
+          `INSERT INTO numbering_rules (
             rule_id, rule_name, description, separator, reset_period,
             current_sequence, table_name, column_name, company_code,
             created_at, updated_at, created_by, last_generated_date,
@@ -3018,15 +3105,15 @@ export class ScreenManagementService {
           ],
         );
 
-        // numbering_rule_parts_test 복사
+        // numbering_rule_parts 복사
         const partsResult = await client.query(
-          `SELECT * FROM numbering_rule_parts_test WHERE rule_id = $1 ORDER BY part_order`,
+          `SELECT * FROM numbering_rule_parts WHERE rule_id = $1 ORDER BY part_order`,
           [rule.rule_id],
         );
 
         for (const part of partsResult.rows) {
           await client.query(
-            `INSERT INTO numbering_rule_parts_test (
+            `INSERT INTO numbering_rule_parts (
               rule_id, part_order, part_type, generation_method,
               auto_config, manual_config, company_code, created_at
             ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
@@ -3471,6 +3558,371 @@ export class ScreenManagementService {
     return flowIds;
   }
 
+  /**
+   * V2 레이아웃에서 flowId 수집 (screen_layouts_v2용)
+   * - overrides.flowId (flow-widget)
+   * - overrides.webTypeConfig.dataflowConfig.flowConfig.flowId (버튼)
+   * - overrides.webTypeConfig.dataflowConfig.flowControls[].flowId
+   * - overrides.action.excelAfterUploadFlows[].flowId
+   */
+  private collectFlowIdsFromLayoutData(layoutData: any): Set<number> {
+    const flowIds = new Set<number>();
+    if (!layoutData?.components) return flowIds;
+
+    for (const comp of layoutData.components) {
+      const overrides = comp.overrides || {};
+
+      // 1. overrides.flowId (flow-widget 등)
+      if (overrides.flowId && !isNaN(parseInt(overrides.flowId))) {
+        flowIds.add(parseInt(overrides.flowId));
+      }
+
+      // 2. webTypeConfig.dataflowConfig.flowConfig.flowId (버튼)
+      const flowConfigId = overrides?.webTypeConfig?.dataflowConfig?.flowConfig?.flowId;
+      if (flowConfigId && !isNaN(parseInt(flowConfigId))) {
+        flowIds.add(parseInt(flowConfigId));
+      }
+
+      // 3. webTypeConfig.dataflowConfig.selectedDiagramId
+      const diagramId = overrides?.webTypeConfig?.dataflowConfig?.selectedDiagramId;
+      if (diagramId && !isNaN(parseInt(diagramId))) {
+        flowIds.add(parseInt(diagramId));
+      }
+
+      // 4. webTypeConfig.dataflowConfig.flowControls[].flowId
+      const flowControls = overrides?.webTypeConfig?.dataflowConfig?.flowControls;
+      if (Array.isArray(flowControls)) {
+        for (const control of flowControls) {
+          if (control?.flowId && !isNaN(parseInt(control.flowId))) {
+            flowIds.add(parseInt(control.flowId));
+          }
+        }
+      }
+
+      // 5. action.excelAfterUploadFlows[].flowId
+      const excelFlows = overrides?.action?.excelAfterUploadFlows;
+      if (Array.isArray(excelFlows)) {
+        for (const flow of excelFlows) {
+          if (flow?.flowId && !isNaN(parseInt(flow.flowId))) {
+            flowIds.add(parseInt(flow.flowId));
+          }
+        }
+      }
+    }
+
+    return flowIds;
+  }
+
+  /**
+   * V2 레이아웃에서 numberingRuleId 수집 (screen_layouts_v2용)
+   * - overrides.autoGeneration.options.numberingRuleId
+   * - overrides.sections[].fields[].numberingRule.ruleId
+   * - overrides.action.excelNumberingRuleId
+   * - overrides.action.numberingRuleId
+   */
+  private collectNumberingRuleIdsFromLayoutData(layoutData: any): Set<string> {
+    const ruleIds = new Set<string>();
+    if (!layoutData?.components) return ruleIds;
+
+    for (const comp of layoutData.components) {
+      const overrides = comp.overrides || {};
+
+      // 1. autoGeneration.options.numberingRuleId
+      const autoGenRuleId = overrides?.autoGeneration?.options?.numberingRuleId;
+      if (autoGenRuleId && typeof autoGenRuleId === "string" && autoGenRuleId.startsWith("rule-")) {
+        ruleIds.add(autoGenRuleId);
+      }
+
+      // 2. sections[].fields[].numberingRule.ruleId
+      const sections = overrides?.sections;
+      if (Array.isArray(sections)) {
+        for (const section of sections) {
+          const fields = section?.fields;
+          if (Array.isArray(fields)) {
+            for (const field of fields) {
+              const ruleId = field?.numberingRule?.ruleId;
+              if (ruleId && typeof ruleId === "string" && ruleId.startsWith("rule-")) {
+                ruleIds.add(ruleId);
+              }
+            }
+          }
+          // optionalFieldGroups 내부
+          const optGroups = section?.optionalFieldGroups;
+          if (Array.isArray(optGroups)) {
+            for (const optGroup of optGroups) {
+              const optFields = optGroup?.fields;
+              if (Array.isArray(optFields)) {
+                for (const field of optFields) {
+                  const ruleId = field?.numberingRule?.ruleId;
+                  if (ruleId && typeof ruleId === "string" && ruleId.startsWith("rule-")) {
+                    ruleIds.add(ruleId);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      // 3. action.excelNumberingRuleId
+      const excelRuleId = overrides?.action?.excelNumberingRuleId;
+      if (excelRuleId && typeof excelRuleId === "string" && excelRuleId.startsWith("rule-")) {
+        ruleIds.add(excelRuleId);
+      }
+
+      // 4. action.numberingRuleId
+      const actionRuleId = overrides?.action?.numberingRuleId;
+      if (actionRuleId && typeof actionRuleId === "string" && actionRuleId.startsWith("rule-")) {
+        ruleIds.add(actionRuleId);
+      }
+    }
+
+    return ruleIds;
+  }
+
+  /**
+   * V2 레이아웃 데이터의 참조 ID들을 업데이트
+   * - componentId, flowId, numberingRuleId, screenId 매핑 적용
+   */
+  private updateReferencesInLayoutData(
+    layoutData: any,
+    mappings: {
+      componentIdMap: Map<string, string>;
+      flowIdMap?: Map<number, number>;
+      ruleIdMap?: Map<string, string>;
+      screenIdMap?: Map<number, number>;
+    },
+  ): any {
+    if (!layoutData?.components) return layoutData;
+
+    const updatedComponents = layoutData.components.map((comp: any) => {
+      // 1. componentId 매핑
+      const newId = mappings.componentIdMap.get(comp.id) || comp.id;
+
+      // 2. overrides 복사 및 참조 업데이트
+      let overrides = JSON.parse(JSON.stringify(comp.overrides || {}));
+
+      // flowId 매핑
+      if (mappings.flowIdMap && mappings.flowIdMap.size > 0) {
+        overrides = this.updateFlowIdsInOverrides(overrides, mappings.flowIdMap);
+      }
+
+      // numberingRuleId 매핑
+      if (mappings.ruleIdMap && mappings.ruleIdMap.size > 0) {
+        overrides = this.updateNumberingRuleIdsInOverrides(overrides, mappings.ruleIdMap);
+      }
+
+      // screenId 매핑 (탭, 버튼 등)
+      if (mappings.screenIdMap && mappings.screenIdMap.size > 0) {
+        overrides = this.updateScreenIdsInOverrides(overrides, mappings.screenIdMap);
+      }
+
+      return {
+        ...comp,
+        id: newId,
+        overrides,
+      };
+    });
+
+    return {
+      ...layoutData,
+      components: updatedComponents,
+      updatedAt: new Date().toISOString(),
+    };
+  }
+
+  /**
+   * V2 overrides 내의 flowId 업데이트
+   */
+  private updateFlowIdsInOverrides(
+    overrides: any,
+    flowIdMap: Map<number, number>,
+  ): any {
+    if (!overrides || flowIdMap.size === 0) return overrides;
+
+    // 1. overrides.flowId (flow-widget)
+    if (overrides.flowId) {
+      const oldId = parseInt(overrides.flowId);
+      const newId = flowIdMap.get(oldId);
+      if (newId) {
+        overrides.flowId = newId;
+        console.log(`      🔗 flowId: ${oldId} → ${newId}`);
+      }
+    }
+
+    // 2. webTypeConfig.dataflowConfig.flowConfig.flowId
+    if (overrides?.webTypeConfig?.dataflowConfig?.flowConfig?.flowId) {
+      const oldId = parseInt(overrides.webTypeConfig.dataflowConfig.flowConfig.flowId);
+      const newId = flowIdMap.get(oldId);
+      if (newId) {
+        overrides.webTypeConfig.dataflowConfig.flowConfig.flowId = newId;
+        console.log(`      🔗 flowConfig.flowId: ${oldId} → ${newId}`);
+      }
+    }
+
+    // 3. webTypeConfig.dataflowConfig.selectedDiagramId
+    if (overrides?.webTypeConfig?.dataflowConfig?.selectedDiagramId) {
+      const oldId = parseInt(overrides.webTypeConfig.dataflowConfig.selectedDiagramId);
+      const newId = flowIdMap.get(oldId);
+      if (newId) {
+        overrides.webTypeConfig.dataflowConfig.selectedDiagramId = newId;
+        console.log(`      🔗 selectedDiagramId: ${oldId} → ${newId}`);
+      }
+    }
+
+    // 4. webTypeConfig.dataflowConfig.flowControls[]
+    if (Array.isArray(overrides?.webTypeConfig?.dataflowConfig?.flowControls)) {
+      for (const control of overrides.webTypeConfig.dataflowConfig.flowControls) {
+        if (control?.flowId) {
+          const oldId = parseInt(control.flowId);
+          const newId = flowIdMap.get(oldId);
+          if (newId) {
+            control.flowId = newId;
+            console.log(`      🔗 flowControls.flowId: ${oldId} → ${newId}`);
+          }
+        }
+      }
+    }
+
+    // 5. action.excelAfterUploadFlows[]
+    if (Array.isArray(overrides?.action?.excelAfterUploadFlows)) {
+      for (const flow of overrides.action.excelAfterUploadFlows) {
+        if (flow?.flowId) {
+          const oldId = parseInt(flow.flowId);
+          const newId = flowIdMap.get(oldId);
+          if (newId) {
+            flow.flowId = newId;
+            console.log(`      🔗 excelAfterUploadFlows.flowId: ${oldId} → ${newId}`);
+          }
+        }
+      }
+    }
+
+    return overrides;
+  }
+
+  /**
+   * V2 overrides 내의 numberingRuleId 업데이트
+   */
+  private updateNumberingRuleIdsInOverrides(
+    overrides: any,
+    ruleIdMap: Map<string, string>,
+  ): any {
+    if (!overrides || ruleIdMap.size === 0) return overrides;
+
+    // 1. autoGeneration.options.numberingRuleId
+    if (overrides?.autoGeneration?.options?.numberingRuleId) {
+      const oldId = overrides.autoGeneration.options.numberingRuleId;
+      const newId = ruleIdMap.get(oldId);
+      if (newId) {
+        overrides.autoGeneration.options.numberingRuleId = newId;
+        console.log(`      🔗 autoGeneration.numberingRuleId: ${oldId} → ${newId}`);
+      }
+    }
+
+    // 2. sections[].fields[].numberingRule.ruleId
+    if (Array.isArray(overrides?.sections)) {
+      for (const section of overrides.sections) {
+        if (Array.isArray(section?.fields)) {
+          for (const field of section.fields) {
+            if (field?.numberingRule?.ruleId) {
+              const oldId = field.numberingRule.ruleId;
+              const newId = ruleIdMap.get(oldId);
+              if (newId) {
+                field.numberingRule.ruleId = newId;
+                console.log(`      🔗 field.numberingRule.ruleId: ${oldId} → ${newId}`);
+              }
+            }
+          }
+        }
+        if (Array.isArray(section?.optionalFieldGroups)) {
+          for (const optGroup of section.optionalFieldGroups) {
+            if (Array.isArray(optGroup?.fields)) {
+              for (const field of optGroup.fields) {
+                if (field?.numberingRule?.ruleId) {
+                  const oldId = field.numberingRule.ruleId;
+                  const newId = ruleIdMap.get(oldId);
+                  if (newId) {
+                    field.numberingRule.ruleId = newId;
+                    console.log(`      🔗 optField.numberingRule.ruleId: ${oldId} → ${newId}`);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // 3. action.excelNumberingRuleId
+    if (overrides?.action?.excelNumberingRuleId) {
+      const oldId = overrides.action.excelNumberingRuleId;
+      const newId = ruleIdMap.get(oldId);
+      if (newId) {
+        overrides.action.excelNumberingRuleId = newId;
+        console.log(`      🔗 excelNumberingRuleId: ${oldId} → ${newId}`);
+      }
+    }
+
+    // 4. action.numberingRuleId
+    if (overrides?.action?.numberingRuleId) {
+      const oldId = overrides.action.numberingRuleId;
+      const newId = ruleIdMap.get(oldId);
+      if (newId) {
+        overrides.action.numberingRuleId = newId;
+        console.log(`      🔗 action.numberingRuleId: ${oldId} → ${newId}`);
+      }
+    }
+
+    return overrides;
+  }
+
+  /**
+   * V2 overrides 내의 screenId 업데이트 (탭, 버튼 등)
+   */
+  private updateScreenIdsInOverrides(
+    overrides: any,
+    screenIdMap: Map<number, number>,
+  ): any {
+    if (!overrides || screenIdMap.size === 0) return overrides;
+
+    // 1. tabs[].screenId (탭 위젯)
+    if (Array.isArray(overrides?.tabs)) {
+      for (const tab of overrides.tabs) {
+        if (tab?.screenId) {
+          const oldId = parseInt(tab.screenId);
+          const newId = screenIdMap.get(oldId);
+          if (newId) {
+            tab.screenId = newId;
+            console.log(`      🔗 tab.screenId: ${oldId} → ${newId}`);
+          }
+        }
+      }
+    }
+
+    // 2. action.targetScreenId (버튼)
+    if (overrides?.action?.targetScreenId) {
+      const oldId = parseInt(overrides.action.targetScreenId);
+      const newId = screenIdMap.get(oldId);
+      if (newId) {
+        overrides.action.targetScreenId = newId;
+        console.log(`      🔗 action.targetScreenId: ${oldId} → ${newId}`);
+      }
+    }
+
+    // 3. action.modalScreenId
+    if (overrides?.action?.modalScreenId) {
+      const oldId = parseInt(overrides.action.modalScreenId);
+      const newId = screenIdMap.get(oldId);
+      if (newId) {
+        overrides.action.modalScreenId = newId;
+        console.log(`      🔗 action.modalScreenId: ${oldId} → ${newId}`);
+      }
+    }
+
+    return overrides;
+  }
+
   /**
    * 노드 플로우 복사 및 ID 매핑 반환
    * - 원본 회사의 플로우를 대상 회사로 복사
@@ -3709,24 +4161,34 @@ export class ScreenManagementService {
 
       const newScreen = newScreenResult.rows[0];
 
-      // 4. 원본 화면의 레이아웃 정보 조회
-      const sourceLayoutsResult = await client.query<any>(
-        `SELECT * FROM screen_layouts
-         WHERE screen_id = $1
-         ORDER BY display_order ASC NULLS LAST`,
-        [sourceScreenId],
+      // 4. 원본 화면의 V2 레이아웃 조회
+      let sourceLayoutV2Result = await client.query<{ layout_data: any }>(
+        `SELECT layout_data FROM screen_layouts_v2
+         WHERE screen_id = $1 AND company_code = $2`,
+        [sourceScreenId, sourceScreen.company_code],
       );
 
-      const sourceLayouts = sourceLayoutsResult.rows;
+      // 없으면 공통(*) 레이아웃 조회
+      let layoutData = sourceLayoutV2Result.rows[0]?.layout_data;
+      if (!layoutData && sourceScreen.company_code !== "*") {
+        const fallbackResult = await client.query<{ layout_data: any }>(
+          `SELECT layout_data FROM screen_layouts_v2
+           WHERE screen_id = $1 AND company_code = '*'`,
+          [sourceScreenId],
+        );
+        layoutData = fallbackResult.rows[0]?.layout_data;
+      }
+
+      const components = layoutData?.components || [];
 
       // 5. 노드 플로우 복사 (회사가 다른 경우)
       let flowIdMap = new Map<number, number>();
       if (
-        sourceLayouts.length > 0 &&
+        components.length > 0 &&
         sourceScreen.company_code !== targetCompanyCode
       ) {
-        // 레이아웃에서 사용하는 flowId 수집
-        const flowIds = this.collectFlowIdsFromLayouts(sourceLayouts);
+        // V2 레이아웃에서 flowId 수집
+        const flowIds = this.collectFlowIdsFromLayoutData(layoutData);
 
         if (flowIds.size > 0) {
           console.log(`🔍 화면 복사 - flowId 수집: ${flowIds.size}개`);
@@ -3744,11 +4206,11 @@ export class ScreenManagementService {
       // 5.1. 채번 규칙 복사 (회사가 다른 경우)
       let ruleIdMap = new Map<string, string>();
       if (
-        sourceLayouts.length > 0 &&
+        components.length > 0 &&
         sourceScreen.company_code !== targetCompanyCode
       ) {
-        // 레이아웃에서 사용하는 채번 규칙 ID 수집
-        const ruleIds = this.collectNumberingRuleIdsFromLayouts(sourceLayouts);
+        // V2 레이아웃에서 채번 규칙 ID 수집
+        const ruleIds = this.collectNumberingRuleIdsFromLayoutData(layoutData);
 
         if (ruleIds.size > 0) {
           console.log(`🔍 화면 복사 - 채번 규칙 ID 수집: ${ruleIds.size}개`);
@@ -3763,81 +4225,43 @@ export class ScreenManagementService {
         }
       }
 
-      // 6. 레이아웃이 있다면 복사
-      if (sourceLayouts.length > 0) {
+      // 6. V2 레이아웃이 있다면 복사
+      if (layoutData && components.length > 0) {
         try {
-          // ID 매핑 맵 생성
-          const idMapping: { [oldId: string]: string } = {};
-
-          // 새로운 컴포넌트 ID 미리 생성
-          sourceLayouts.forEach((layout: any) => {
-            idMapping[layout.component_id] = generateId();
-          });
-
-          // 각 레이아웃 컴포넌트 복사
-          for (const sourceLayout of sourceLayouts) {
-            const newComponentId = idMapping[sourceLayout.component_id];
-            const newParentId = sourceLayout.parent_id
-              ? idMapping[sourceLayout.parent_id]
-              : null;
-
-            // properties 파싱
-            let properties = sourceLayout.properties;
-            if (typeof properties === "string") {
-              try {
-                properties = JSON.parse(properties);
-              } catch (e) {
-                // 파싱 실패 시 그대로 사용
-              }
-            }
-
-            // flowId 매핑 적용 (회사가 다른 경우)
-            if (flowIdMap.size > 0) {
-              properties = this.updateFlowIdsInProperties(
-                properties,
-                flowIdMap,
-              );
-            }
-
-            // 채번 규칙 ID 매핑 적용 (회사가 다른 경우)
-            if (ruleIdMap.size > 0) {
-              properties = this.updateNumberingRuleIdsInProperties(
-                properties,
-                ruleIdMap,
-              );
-            }
-
-            // 탭 컴포넌트의 screenId는 개별 복제 시점에 업데이트하지 않음
-            // 모든 화면 복제 완료 후 updateTabScreenReferences에서 screenIdMap 기반으로 일괄 업데이트
-
-            await client.query(
-              `INSERT INTO screen_layouts (
-                screen_id, component_type, component_id, parent_id,
-                position_x, position_y, width, height, properties,
-                display_order, created_date
-              ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)`,
-              [
-                newScreen.screen_id,
-                sourceLayout.component_type,
-                newComponentId,
-                newParentId,
-                Math.round(sourceLayout.position_x), // 정수로 반올림
-                Math.round(sourceLayout.position_y), // 정수로 반올림
-                Math.round(sourceLayout.width), // 정수로 반올림
-                Math.round(sourceLayout.height), // 정수로 반올림
-                JSON.stringify(properties),
-                sourceLayout.display_order,
-                new Date(),
-              ],
-            );
+          // componentId 매핑 생성
+          const componentIdMap = new Map<string, string>();
+          for (const comp of components) {
+            componentIdMap.set(comp.id, generateId());
           }
+
+          // V2 레이아웃 데이터 복사 및 참조 업데이트
+          const updatedLayoutData = this.updateReferencesInLayoutData(
+            layoutData,
+            {
+              componentIdMap,
+              flowIdMap: flowIdMap.size > 0 ? flowIdMap : undefined,
+              ruleIdMap: ruleIdMap.size > 0 ? ruleIdMap : undefined,
+              // screenIdMap은 모든 화면 복제 완료 후 updateTabScreenReferences에서 일괄 처리
+            },
+          );
+
+          // V2 레이아웃 저장 (UPSERT)
+          await client.query(
+            `INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data, created_at, updated_at)
+             VALUES ($1, $2, $3, NOW(), NOW())
+             ON CONFLICT (screen_id, company_code) 
+             DO UPDATE SET layout_data = $3, updated_at = NOW()`,
+            [newScreen.screen_id, targetCompanyCode, JSON.stringify(updatedLayoutData)],
+          );
+
+          console.log(`  ✅ V2 레이아웃 복사 완료: ${components.length}개 컴포넌트`);
         } catch (error) {
-          console.error("레이아웃 복사 중 오류:", error);
+          console.error("V2 레이아웃 복사 중 오류:", error);
           // 레이아웃 복사 실패해도 화면 생성은 유지
         }
       }
 
-      // 6. 생성된 화면 정보 반환
+      // 7. 생성된 화면 정보 반환
       return {
         screenId: newScreen.screen_id,
         screenCode: newScreen.screen_code,
@@ -4195,7 +4619,8 @@ export class ScreenManagementService {
           );
 
           if (menuInfo.rows.length > 0) {
-            const isAdminMenu = menuInfo.rows[0].menu_type === "1";
+            // menu_type: "0" = 관리자 메뉴, "1" = 사용자 메뉴
+            const isAdminMenu = menuInfo.rows[0].menu_type === "0";
             const newMenuUrl = isAdminMenu
               ? `/screens/${newScreenId}?mode=admin`
               : `/screens/${newScreenId}`;
@@ -4248,6 +4673,15 @@ export class ScreenManagementService {
       details: [] as string[],
     };
 
+    // 같은 회사로 복제하는 경우 스킵 (자기 자신의 데이터 삭제 방지)
+    if (sourceCompanyCode === targetCompanyCode) {
+      logger.warn(
+        `⚠️ 같은 회사로 코드 카테고리/코드 복제 시도 - 스킵: ${sourceCompanyCode}`,
+      );
+      result.details.push("같은 회사로는 복제할 수 없습니다.");
+      return result;
+    }
+
     return transaction(async (client) => {
       logger.info(
         `📦 코드 카테고리/코드 복제: ${sourceCompanyCode} → ${targetCompanyCode}`,
@@ -4351,7 +4785,7 @@ export class ScreenManagementService {
   }
 
   /**
-   * 카테고리 값 복제 (category_values_test 테이블 사용)
+   * 카테고리 값 복제 (category_values 테이블 사용)
    * - menu_objid 의존성 제거됨
    * - table_name + column_name + company_code 기반
    */
@@ -4369,20 +4803,29 @@ export class ScreenManagementService {
       details: [] as string[],
     };
 
+    // 같은 회사로 복제하는 경우 스킵 (자기 자신의 데이터 삭제 방지)
+    if (sourceCompanyCode === targetCompanyCode) {
+      logger.warn(
+        `⚠️ 같은 회사로 카테고리 값 복제 시도 - 스킵: ${sourceCompanyCode}`,
+      );
+      result.details.push("같은 회사로는 복제할 수 없습니다.");
+      return result;
+    }
+
     return transaction(async (client) => {
       logger.info(
         `📦 카테고리 값 복제: ${sourceCompanyCode} → ${targetCompanyCode}`,
       );
 
-      // 1. 기존 대상 회사 데이터 삭제
+      // 1. 기존 대상 회사 데이터 삭제 (다른 회사로 복제 시에만)
       await client.query(
-        `DELETE FROM category_values_test WHERE company_code = $1`,
+        `DELETE FROM category_values WHERE company_code = $1`,
         [targetCompanyCode],
       );
 
-      // 2. category_values_test 복제
+      // 2. category_values 복제
       const values = await client.query(
-        `SELECT * FROM category_values_test WHERE company_code = $1`,
+        `SELECT * FROM category_values WHERE company_code = $1`,
         [sourceCompanyCode],
       );
 
@@ -4391,7 +4834,7 @@ export class ScreenManagementService {
 
       for (const v of values.rows) {
         const insertResult = await client.query(
-          `INSERT INTO category_values_test 
+          `INSERT INTO category_values 
            (table_name, column_name, value_code, value_label, value_order, 
             parent_value_id, depth, path, description, color, icon, 
             is_active, is_default, company_code, created_by)
@@ -4426,7 +4869,7 @@ export class ScreenManagementService {
           const newValueId = valueIdMap.get(v.value_id);
           if (newParentId && newValueId) {
             await client.query(
-              `UPDATE category_values_test SET parent_value_id = $1 WHERE value_id = $2`,
+              `UPDATE category_values SET parent_value_id = $1 WHERE value_id = $2`,
               [newParentId, newValueId],
             );
           }
@@ -4451,6 +4894,15 @@ export class ScreenManagementService {
       details: [] as string[],
     };
 
+    // 같은 회사로 복제하는 경우 스킵 (자기 자신의 데이터 삭제 방지)
+    if (sourceCompanyCode === targetCompanyCode) {
+      logger.warn(
+        `⚠️ 같은 회사로 테이블 타입 컬럼 복제 시도 - 스킵: ${sourceCompanyCode}`,
+      );
+      result.details.push("같은 회사로는 복제할 수 없습니다.");
+      return result;
+    }
+
     return transaction(async (client) => {
       logger.info(
         `📦 테이블 타입 컬럼 복제: ${sourceCompanyCode} → ${targetCompanyCode}`,
@@ -4514,6 +4966,15 @@ export class ScreenManagementService {
       details: [] as string[],
     };
 
+    // 같은 회사로 복제하는 경우 스킵 (자기 자신의 데이터 삭제 방지)
+    if (sourceCompanyCode === targetCompanyCode) {
+      logger.warn(
+        `⚠️ 같은 회사로 연쇄관계 설정 복제 시도 - 스킵: ${sourceCompanyCode}`,
+      );
+      result.details.push("같은 회사로는 복제할 수 없습니다.");
+      return result;
+    }
+
     return transaction(async (client) => {
       logger.info(
         `📦 연쇄관계 설정 복제: ${sourceCompanyCode} → ${targetCompanyCode}`,
diff --git a/backend-node/src/services/tableCategoryValueService.ts b/backend-node/src/services/tableCategoryValueService.ts
index c4149147..2eb35f64 100644
--- a/backend-node/src/services/tableCategoryValueService.ts
+++ b/backend-node/src/services/tableCategoryValueService.ts
@@ -212,22 +212,22 @@ class TableCategoryValueService {
           updated_at AS "updatedAt",
           created_by AS "createdBy",
           updated_by AS "updatedBy"
-        FROM category_values_test
+        FROM category_values
         WHERE table_name = $1
           AND column_name = $2
       `;
       
-      // category_values_test 테이블 사용 (menu_objid 없음)
+      // category_values 테이블 사용 (menu_objid 없음)
       if (companyCode === "*") {
         // 최고 관리자: 모든 값 조회
         query = baseSelect;
         params = [tableName, columnName];
-        logger.info("최고 관리자 전체 카테고리 값 조회 (category_values_test)");
+        logger.info("최고 관리자 전체 카테고리 값 조회 (category_values)");
       } else {
         // 일반 회사: 자신의 회사 또는 공통(*) 카테고리 조회
         query = baseSelect + ` AND (company_code = $3 OR company_code = '*')`;
         params = [tableName, columnName, companyCode];
-        logger.info("회사별 카테고리 값 조회 (category_values_test)", { companyCode });
+        logger.info("회사별 카테고리 값 조회 (category_values)", { companyCode });
       }
 
       if (!includeInactive) {
diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index c8196235..db5f32ed 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -289,29 +289,48 @@ export class TableManagementService {
           companyCode,
         });
 
-        const mappings = await query<any>(
-          `SELECT 
-            logical_column_name as "columnName",
-            menu_objid as "menuObjid"
-          FROM category_column_mapping
-          WHERE table_name = $1 
-            AND company_code = $2`,
-          [tableName, companyCode]
-        );
+        try {
+          // menu_objid 컬럼이 있는지 먼저 확인
+          const columnCheck = await query<any>(
+            `SELECT column_name FROM information_schema.columns 
+             WHERE table_name = 'category_column_mapping' AND column_name = 'menu_objid'`
+          );
 
-        logger.info("✅ getColumnList: 카테고리 매핑 조회 완료", {
-          tableName,
-          companyCode,
-          mappingCount: mappings.length,
-          mappings: mappings,
-        });
+          if (columnCheck.length > 0) {
+            // menu_objid 컬럼이 있는 경우
+            const mappings = await query<any>(
+              `SELECT 
+                logical_column_name as "columnName",
+                menu_objid as "menuObjid"
+              FROM category_column_mapping
+              WHERE table_name = $1 
+                AND company_code = $2`,
+              [tableName, companyCode]
+            );
 
-        mappings.forEach((m: any) => {
-          if (!categoryMappings.has(m.columnName)) {
-            categoryMappings.set(m.columnName, []);
+            logger.info("✅ getColumnList: 카테고리 매핑 조회 완료", {
+              tableName,
+              companyCode,
+              mappingCount: mappings.length,
+            });
+
+            mappings.forEach((m: any) => {
+              if (!categoryMappings.has(m.columnName)) {
+                categoryMappings.set(m.columnName, []);
+              }
+              categoryMappings.get(m.columnName)!.push(Number(m.menuObjid));
+            });
+          } else {
+            // menu_objid 컬럼이 없는 경우 - 매핑 없이 진행
+            logger.info(
+              "⚠️ getColumnList: menu_objid 컬럼이 없음, 카테고리 매핑 스킵"
+            );
           }
-          categoryMappings.get(m.columnName)!.push(Number(m.menuObjid));
-        });
+        } catch (mappingError: any) {
+          logger.warn("⚠️ getColumnList: 카테고리 매핑 조회 실패, 스킵", {
+            error: mappingError.message,
+          });
+        }
 
         logger.info("✅ getColumnList: categoryMappings Map 생성 완료", {
           size: categoryMappings.size,
@@ -456,13 +475,25 @@ export class TableManagementService {
         `컬럼 설정 업데이트 시작: ${tableName}.${columnName}, company: ${companyCode}`
       );
 
+      // 🔥 "direct" 또는 "auto"는 프론트엔드의 입력 방식 구분값이므로
+      // DB의 input_type(웹타입)으로 저장하면 안 됨 - "text"로 변환
+      if (settings.inputType === "direct" || settings.inputType === "auto") {
+        logger.warn(
+          `잘못된 inputType 값 감지: ${settings.inputType} → 'text'로 변환 (${tableName}.${columnName})`
+        );
+        settings.inputType = "text";
+      }
+
       // 테이블이 table_labels에 없으면 자동 추가
       await this.insertTableIfNotExists(tableName);
 
       // table_type_columns에 모든 설정 저장 (멀티테넌시 지원)
       // detailSettings가 문자열이면 그대로, 객체면 JSON.stringify
       let detailSettingsStr = settings.detailSettings;
-      if (typeof settings.detailSettings === "object" && settings.detailSettings !== null) {
+      if (
+        typeof settings.detailSettings === "object" &&
+        settings.detailSettings !== null
+      ) {
         detailSettingsStr = JSON.stringify(settings.detailSettings);
       }
 
@@ -708,12 +739,23 @@ export class TableManagementService {
     inputType?: string
   ): Promise<void> {
     try {
+      // 🔥 'direct'나 'auto'는 프론트엔드의 입력 방식 구분값이므로
+      // DB의 input_type(웹타입)으로 저장하면 안 됨 - 'text'로 변환
+      let finalWebType = webType;
+      if (webType === "direct" || webType === "auto") {
+        logger.warn(
+          `잘못된 webType 값 감지: ${webType} → 'text'로 변환 (${tableName}.${columnName})`
+        );
+        finalWebType = "text";
+      }
+
       logger.info(
-        `컬럼 입력 타입 설정 시작: ${tableName}.${columnName} = ${webType}`
+        `컬럼 입력 타입 설정 시작: ${tableName}.${columnName} = ${finalWebType}`
       );
 
       // 웹 타입별 기본 상세 설정 생성
-      const defaultDetailSettings = this.generateDefaultDetailSettings(webType);
+      const defaultDetailSettings =
+        this.generateDefaultDetailSettings(finalWebType);
 
       // 사용자 정의 설정과 기본 설정 병합
       const finalDetailSettings = {
@@ -732,10 +774,15 @@ export class TableManagementService {
           input_type = EXCLUDED.input_type,
           detail_settings = EXCLUDED.detail_settings,
           updated_date = NOW()`,
-        [tableName, columnName, webType, JSON.stringify(finalDetailSettings)]
+        [
+          tableName,
+          columnName,
+          finalWebType,
+          JSON.stringify(finalDetailSettings),
+        ]
       );
       logger.info(
-        `컬럼 입력 타입 설정 완료: ${tableName}.${columnName} = ${webType}`
+        `컬럼 입력 타입 설정 완료: ${tableName}.${columnName} = ${finalWebType}`
       );
     } catch (error) {
       logger.error(
@@ -760,13 +807,23 @@ export class TableManagementService {
     detailSettings?: Record<string, any>
   ): Promise<void> {
     try {
+      // 🔥 'direct'나 'auto'는 프론트엔드의 입력 방식 구분값이므로
+      // DB의 input_type(웹타입)으로 저장하면 안 됨 - 'text'로 변환
+      let finalInputType = inputType;
+      if (inputType === "direct" || inputType === "auto") {
+        logger.warn(
+          `잘못된 input_type 값 감지: ${inputType} → 'text'로 변환 (${tableName}.${columnName})`
+        );
+        finalInputType = "text";
+      }
+
       logger.info(
-        `컬럼 입력 타입 설정 시작: ${tableName}.${columnName} = ${inputType}, company: ${companyCode}`
+        `컬럼 입력 타입 설정 시작: ${tableName}.${columnName} = ${finalInputType}, company: ${companyCode}`
       );
 
       // 입력 타입별 기본 상세 설정 생성
       const defaultDetailSettings =
-        this.generateDefaultInputTypeSettings(inputType);
+        this.generateDefaultInputTypeSettings(finalInputType);
 
       // 사용자 정의 설정과 기본 설정 병합
       const finalDetailSettings = {
@@ -788,7 +845,7 @@ export class TableManagementService {
         [
           tableName,
           columnName,
-          inputType,
+          finalInputType,
           JSON.stringify(finalDetailSettings),
           companyCode,
         ]
@@ -798,7 +855,7 @@ export class TableManagementService {
       await this.syncScreenLayoutsInputType(
         tableName,
         columnName,
-        inputType,
+        finalInputType,
         companyCode
       );
 
@@ -1415,6 +1472,44 @@ export class TableManagementService {
         });
       }
 
+      // 🔧 파이프로 구분된 문자열 처리 (객체에서 추출한 actualValue도 처리)
+      if (typeof actualValue === "string" && actualValue.includes("|")) {
+        const columnInfo = await this.getColumnWebTypeInfo(
+          tableName,
+          columnName
+        );
+
+        // 날짜 타입이면 날짜 범위로 처리
+        if (
+          columnInfo &&
+          (columnInfo.webType === "date" || columnInfo.webType === "datetime")
+        ) {
+          return this.buildDateRangeCondition(
+            columnName,
+            actualValue,
+            paramIndex
+          );
+        }
+
+        // 그 외 타입이면 다중선택(IN 조건)으로 처리
+        const multiValues = actualValue
+          .split("|")
+          .filter((v: string) => v.trim() !== "");
+        if (multiValues.length > 0) {
+          const placeholders = multiValues
+            .map((_: string, idx: number) => `$${paramIndex + idx}`)
+            .join(", ");
+          logger.info(
+            `🔍 다중선택 필터 적용 (객체에서 추출): ${columnName} IN (${multiValues.join(", ")})`
+          );
+          return {
+            whereClause: `${columnName}::text IN (${placeholders})`,
+            values: multiValues,
+            paramCount: multiValues.length,
+          };
+        }
+      }
+
       // "__ALL__" 값이거나 빈 값이면 필터 조건을 적용하지 않음
       if (
         actualValue === "__ALL__" ||
@@ -2171,6 +2266,9 @@ export class TableManagementService {
           ? `WHERE ${whereConditions.join(" AND ")}`
           : "";
 
+      // 안전한 테이블명 검증
+      const safeTableName = tableName.replace(/[^a-zA-Z0-9_]/g, "");
+
       // ORDER BY 조건 구성
       let orderClause = "";
       if (sortBy) {
@@ -2178,11 +2276,17 @@ export class TableManagementService {
         const safeSortOrder =
           sortOrder.toLowerCase() === "desc" ? "DESC" : "ASC";
         orderClause = `ORDER BY ${safeSortBy} ${safeSortOrder}`;
+      } else {
+        // sortBy가 없으면 created_date 컬럼이 있는 경우에만 기본 정렬 적용
+        const hasCreatedDate = await query<any>(
+          `SELECT 1 FROM information_schema.columns WHERE table_name = $1 AND column_name = 'created_date' LIMIT 1`,
+          [safeTableName]
+        );
+        if (hasCreatedDate.length > 0) {
+          orderClause = `ORDER BY main.created_date DESC`;
+        }
       }
 
-      // 안전한 테이블명 검증
-      const safeTableName = tableName.replace(/[^a-zA-Z0-9_]/g, "");
-
       // 전체 개수 조회 (main 별칭 추가 - buildWhereClause가 main. 접두사를 사용하므로 필요)
       const countQuery = `SELECT COUNT(*) as count FROM ${safeTableName} main ${whereClause}`;
       const countResult = await query<any>(countQuery, searchValues);
@@ -3090,9 +3194,13 @@ export class TableManagementService {
       }
 
       // ORDER BY 절 구성
+      // sortBy가 없으면 created_date 컬럼이 있는 경우에만 기본 정렬 적용
+      const hasCreatedDateColumn = selectColumns.includes("created_date");
       const orderBy = options.sortBy
-        ? `main.${options.sortBy} ${options.sortOrder === "desc" ? "DESC" : "ASC"}`
-        : "";
+        ? `main."${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}`
+        : hasCreatedDateColumn
+          ? `main."created_date" DESC`
+          : "";
 
       // 페이징 계산
       const offset = (options.page - 1) * options.size;
@@ -3302,14 +3410,17 @@ export class TableManagementService {
           const entitySearchColumns: string[] = [];
 
           // Entity 조인 쿼리 생성하여 별칭 매핑 얻기
+          const hasCreatedDateForSearch = selectColumns.includes("created_date");
           const joinQueryResult = entityJoinService.buildJoinQuery(
             tableName,
             joinConfigs,
             selectColumns,
             "", // WHERE 절은 나중에 추가
             options.sortBy
-              ? `main.${options.sortBy} ${options.sortOrder || "ASC"}`
-              : undefined,
+              ? `main."${options.sortBy}" ${options.sortOrder || "ASC"}`
+              : hasCreatedDateForSearch
+                ? `main."created_date" DESC`
+                : undefined,
             options.size,
             (options.page - 1) * options.size
           );
@@ -3323,14 +3434,16 @@ export class TableManagementService {
 
           if (options.search) {
             for (const [key, value] of Object.entries(options.search)) {
-              // 검색값 추출 (객체 형태일 수 있음)
+              // 검색값 및 operator 추출 (객체 형태일 수 있음)
               let searchValue = value;
+              let operator = "contains"; // 기본값: 부분 일치
               if (
                 typeof value === "object" &&
                 value !== null &&
                 "value" in value
               ) {
                 searchValue = value.value;
+                operator = (value as any).operator || "contains";
               }
 
               // 빈 값이면 스킵
@@ -3382,15 +3495,49 @@ export class TableManagementService {
                 // 기본 Entity 조인 컬럼인 경우: 조인된 테이블의 표시 컬럼에서 검색
                 const aliasKey = `${joinConfig.referenceTable}:${joinConfig.sourceColumn}`;
                 const alias = aliasMap.get(aliasKey);
-                whereConditions.push(
-                  `${alias}.${joinConfig.displayColumn} ILIKE '%${safeValue}%'`
-                );
-                entitySearchColumns.push(
-                  `${key} (${joinConfig.referenceTable}.${joinConfig.displayColumn})`
-                );
-                logger.info(
-                  `🎯 Entity 조인 검색: ${key} → ${joinConfig.referenceTable}.${joinConfig.displayColumn} LIKE '%${safeValue}%' (별칭: ${alias})`
-                );
+
+                // 🔧 파이프로 구분된 다중 선택값 처리
+                if (safeValue.includes("|")) {
+                  const multiValues = safeValue
+                    .split("|")
+                    .filter((v: string) => v.trim() !== "");
+                  if (multiValues.length > 0) {
+                    const inClause = multiValues
+                      .map((v: string) => `'${v}'`)
+                      .join(", ");
+                    whereConditions.push(
+                      `${alias}.${joinConfig.displayColumn}::text IN (${inClause})`
+                    );
+                    entitySearchColumns.push(
+                      `${key} (${joinConfig.referenceTable}.${joinConfig.displayColumn})`
+                    );
+                    logger.info(
+                      `🎯 Entity 조인 다중선택 검색: ${key} → ${joinConfig.referenceTable}.${joinConfig.displayColumn} IN (${multiValues.join(", ")}) (별칭: ${alias})`
+                    );
+                  }
+                } else if (operator === "equals") {
+                  // 🔧 equals 연산자: 정확히 일치
+                  whereConditions.push(
+                    `${alias}.${joinConfig.displayColumn}::text = '${safeValue}'`
+                  );
+                  entitySearchColumns.push(
+                    `${key} (${joinConfig.referenceTable}.${joinConfig.displayColumn})`
+                  );
+                  logger.info(
+                    `🎯 Entity 조인 정확히 일치 검색: ${key} → ${joinConfig.referenceTable}.${joinConfig.displayColumn} = '${safeValue}' (별칭: ${alias})`
+                  );
+                } else {
+                  // 기본: 부분 일치 (ILIKE)
+                  whereConditions.push(
+                    `${alias}.${joinConfig.displayColumn} ILIKE '%${safeValue}%'`
+                  );
+                  entitySearchColumns.push(
+                    `${key} (${joinConfig.referenceTable}.${joinConfig.displayColumn})`
+                  );
+                  logger.info(
+                    `🎯 Entity 조인 검색: ${key} → ${joinConfig.referenceTable}.${joinConfig.displayColumn} LIKE '%${safeValue}%' (별칭: ${alias})`
+                  );
+                }
               } else if (key === "writer_dept_code") {
                 // writer_dept_code: user_info.dept_code에서 검색
                 const userAliasKey = Array.from(aliasMap.keys()).find((k) =>
@@ -3427,18 +3574,44 @@ export class TableManagementService {
                 }
               } else {
                 // 일반 컬럼인 경우: 메인 테이블에서 검색
-                whereConditions.push(`main.${key} ILIKE '%${safeValue}%'`);
-                logger.info(
-                  `🔍 일반 컬럼 검색: ${key} → main.${key} LIKE '%${safeValue}%'`
-                );
+                // 🔧 파이프로 구분된 다중 선택값 처리
+                if (safeValue.includes("|")) {
+                  const multiValues = safeValue
+                    .split("|")
+                    .filter((v: string) => v.trim() !== "");
+                  if (multiValues.length > 0) {
+                    const inClause = multiValues
+                      .map((v: string) => `'${v}'`)
+                      .join(", ");
+                    whereConditions.push(`main.${key}::text IN (${inClause})`);
+                    logger.info(
+                      `🔍 다중선택 컬럼 검색: ${key} → main.${key} IN (${multiValues.join(", ")})`
+                    );
+                  }
+                } else if (operator === "equals") {
+                  // 🔧 equals 연산자: 정확히 일치
+                  whereConditions.push(`main.${key}::text = '${safeValue}'`);
+                  logger.info(
+                    `🔍 정확히 일치 검색: ${key} → main.${key} = '${safeValue}'`
+                  );
+                } else {
+                  // 기본: 부분 일치 (ILIKE)
+                  whereConditions.push(`main.${key} ILIKE '%${safeValue}%'`);
+                  logger.info(
+                    `🔍 일반 컬럼 검색: ${key} → main.${key} LIKE '%${safeValue}%'`
+                  );
+                }
               }
             }
           }
 
           const whereClause = whereConditions.join(" AND ");
+          const hasCreatedDateForOrder = selectColumns.includes("created_date");
           const orderBy = options.sortBy
-            ? `main.${options.sortBy} ${options.sortOrder === "desc" ? "DESC" : "ASC"}`
-            : "";
+            ? `main."${options.sortBy}" ${options.sortOrder === "desc" ? "DESC" : "ASC"}`
+            : hasCreatedDateForOrder
+              ? `main."created_date" DESC`
+              : "";
 
           // 페이징 계산
           const offset = (options.page - 1) * options.size;
@@ -3715,6 +3888,7 @@ export class TableManagementService {
       columnName: string;
       displayName: string;
       dataType: string;
+      inputType?: string;
     }>
   > {
     return await entityJoinService.getReferenceTableColumns(tableName);
@@ -4163,31 +4337,46 @@ export class TableManagementService {
       if (mappingTableExists) {
         logger.info("카테고리 매핑 조회 시작", { tableName, companyCode });
 
-        const mappings = await query<any>(
-          `SELECT DISTINCT ON (logical_column_name, menu_objid)
-            logical_column_name as "columnName",
-            menu_objid as "menuObjid"
-          FROM category_column_mapping
-          WHERE table_name = $1 
-            AND company_code IN ($2, '*')
-          ORDER BY logical_column_name, menu_objid,
-            CASE WHEN company_code = $2 THEN 0 ELSE 1 END`,
-          [tableName, companyCode]
-        );
+        try {
+          // menu_objid 컬럼이 있는지 먼저 확인
+          const columnCheck = await query<any>(
+            `SELECT column_name FROM information_schema.columns 
+             WHERE table_name = 'category_column_mapping' AND column_name = 'menu_objid'`
+          );
 
-        logger.info("카테고리 매핑 조회 완료", {
-          tableName,
-          companyCode,
-          mappingCount: mappings.length,
-          mappings: mappings,
-        });
+          if (columnCheck.length > 0) {
+            const mappings = await query<any>(
+              `SELECT DISTINCT ON (logical_column_name, menu_objid)
+                logical_column_name as "columnName",
+                menu_objid as "menuObjid"
+              FROM category_column_mapping
+              WHERE table_name = $1 
+                AND company_code IN ($2, '*')
+              ORDER BY logical_column_name, menu_objid,
+                CASE WHEN company_code = $2 THEN 0 ELSE 1 END`,
+              [tableName, companyCode]
+            );
 
-        mappings.forEach((m: any) => {
-          if (!categoryMappings.has(m.columnName)) {
-            categoryMappings.set(m.columnName, []);
+            logger.info("카테고리 매핑 조회 완료", {
+              tableName,
+              companyCode,
+              mappingCount: mappings.length,
+            });
+
+            mappings.forEach((m: any) => {
+              if (!categoryMappings.has(m.columnName)) {
+                categoryMappings.set(m.columnName, []);
+              }
+              categoryMappings.get(m.columnName)!.push(Number(m.menuObjid));
+            });
+          } else {
+            logger.info("⚠️ menu_objid 컬럼이 없음, 카테고리 매핑 스킵");
           }
-          categoryMappings.get(m.columnName)!.push(Number(m.menuObjid));
-        });
+        } catch (mappingError: any) {
+          logger.warn("⚠️ 카테고리 매핑 조회 실패, 스킵", {
+            error: mappingError.message,
+          });
+        }
 
         logger.info("categoryMappings Map 생성 완료", {
           size: categoryMappings.size,
diff --git a/db/migrations/RUN_078_MIGRATION.md b/db/migrations/RUN_078_MIGRATION.md
new file mode 100644
index 00000000..05669d0c
--- /dev/null
+++ b/db/migrations/RUN_078_MIGRATION.md
@@ -0,0 +1,83 @@
+# 078 마이그레이션 실행 가이드
+
+## 실행할 파일 (순서대로)
+
+1. **078_create_production_plan_tables.sql** - 테이블 생성
+2. **078b_insert_production_plan_sample_data.sql** - 샘플 데이터
+3. **078c_insert_production_plan_screen.sql** - 화면 정의 및 레이아웃
+
+## 실행 방법
+
+### 방법 1: psql 명령어 (터미널)
+
+```bash
+# 테이블 생성
+psql -h localhost -U postgres -d wace -f db/migrations/078_create_production_plan_tables.sql
+
+# 샘플 데이터 입력
+psql -h localhost -U postgres -d wace -f db/migrations/078b_insert_production_plan_sample_data.sql
+```
+
+### 방법 2: DBeaver / pgAdmin에서 실행
+
+1. DB 연결 후 SQL 에디터 열기
+2. `078_create_production_plan_tables.sql` 내용 복사 & 실행
+3. `078b_insert_production_plan_sample_data.sql` 내용 복사 & 실행
+
+### 방법 3: Docker 환경
+
+```bash
+# Docker 컨테이너 내부에서 실행
+docker exec -i <container_name> psql -U postgres -d wace < db/migrations/078_create_production_plan_tables.sql
+docker exec -i <container_name> psql -U postgres -d wace < db/migrations/078b_insert_production_plan_sample_data.sql
+```
+
+## 생성되는 테이블
+
+| 테이블명 | 설명 |
+|---------|------|
+| `equipment_info` | 설비 정보 마스터 |
+| `production_plan_mng` | 생산계획 관리 |
+| `production_plan_order_rel` | 생산계획-수주 연결 |
+
+## 생성되는 화면
+
+| 화면 | 설명 |
+|------|------|
+| 생산계획관리 (메인) | 생산계획 목록 조회/등록/수정/삭제 |
+| 생산계획 등록/수정 (모달) | 생산계획 상세 입력 폼 |
+
+## 확인 쿼리
+
+```sql
+-- 테이블 생성 확인
+SELECT table_name FROM information_schema.tables 
+WHERE table_schema = 'public' 
+AND table_name IN ('equipment_info', 'production_plan_mng', 'production_plan_order_rel');
+
+-- 샘플 데이터 확인
+SELECT * FROM equipment_info;
+SELECT * FROM production_plan_mng;
+
+-- 화면 생성 확인
+SELECT id, screen_name, screen_code, table_name 
+FROM screen_definitions 
+WHERE screen_code LIKE '%PP%';
+
+-- 레이아웃 확인
+SELECT sl.id, sd.screen_name, sl.layout_name
+FROM screen_layouts_v2 sl
+JOIN screen_definitions sd ON sl.screen_id = sd.id
+WHERE sd.screen_code LIKE '%PP%';
+```
+
+## 메뉴 연결 (수동 작업 필요)
+
+화면 생성 후, 메뉴에 연결하려면 `menu_info` 테이블에서 해당 메뉴의 `screen_id`를 업데이트하세요:
+
+```sql
+-- 예시: 생산관리 > 생산계획관리 메뉴에 연결
+UPDATE menu_info 
+SET screen_id = (SELECT id FROM screen_definitions WHERE screen_code = 'TOPSEAL_PP_MAIN')
+WHERE menu_name = '생산계획관리' AND company_code = 'TOPSEAL';
+```
diff --git a/db/migrations/so_main_layout.json b/db/migrations/so_main_layout.json
new file mode 100644
index 00000000..f00aac5a
--- /dev/null
+++ b/db/migrations/so_main_layout.json
@@ -0,0 +1,179 @@
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_search",
+      "url": "@/lib/registry/components/v2-table-search-widget",
+      "size": { "width": 1920, "height": 80 },
+      "position": { "x": 0, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-table-search-widget",
+        "label": "Search Filter",
+        "webTypeConfig": {}
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_table",
+      "url": "@/lib/registry/components/v2-table-list",
+      "size": { "width": 1920, "height": 800 },
+      "position": { "x": 0, "y": 150, "z": 1 },
+      "overrides": {
+        "type": "v2-table-list",
+        "label": "Sales Order List",
+        "filter": { "enabled": true, "filters": [] },
+        "height": "auto",
+        "actions": { "actions": [], "bulkActions": false, "showActions": false },
+        "columns": [
+          { "align": "left", "order": 0, "format": "text", "visible": true, "sortable": true, "columnName": "order_no", "searchable": true, "displayName": "Order No" },
+          { "align": "left", "order": 1, "format": "text", "visible": true, "sortable": true, "columnName": "partner_id", "searchable": true, "displayName": "Customer" },
+          { "align": "left", "order": 2, "format": "text", "visible": true, "sortable": true, "columnName": "part_code", "searchable": true, "displayName": "Part Code" },
+          { "align": "left", "order": 3, "format": "text", "visible": true, "sortable": true, "columnName": "part_name", "searchable": true, "displayName": "Part Name" },
+          { "align": "left", "order": 4, "format": "text", "visible": true, "sortable": true, "columnName": "spec", "searchable": true, "displayName": "Spec" },
+          { "align": "left", "order": 5, "format": "text", "visible": true, "sortable": true, "columnName": "material", "searchable": true, "displayName": "Material" },
+          { "align": "right", "order": 6, "format": "number", "visible": true, "sortable": true, "columnName": "order_qty", "searchable": false, "displayName": "Order Qty" },
+          { "align": "right", "order": 7, "format": "number", "visible": true, "sortable": true, "columnName": "ship_qty", "searchable": false, "displayName": "Ship Qty" },
+          { "align": "right", "order": 8, "format": "number", "visible": true, "sortable": true, "columnName": "balance_qty", "searchable": false, "displayName": "Balance" },
+          { "align": "right", "order": 9, "format": "number", "visible": true, "sortable": true, "columnName": "inventory_qty", "searchable": false, "displayName": "Stock" },
+          { "align": "right", "order": 10, "format": "number", "visible": true, "sortable": true, "columnName": "plan_ship_qty", "searchable": false, "displayName": "Plan Ship Qty" },
+          { "align": "right", "order": 11, "format": "number", "visible": true, "sortable": true, "columnName": "unit_price", "searchable": false, "displayName": "Unit Price" },
+          { "align": "right", "order": 12, "format": "number", "visible": true, "sortable": true, "columnName": "total_amount", "searchable": false, "displayName": "Amount" },
+          { "align": "left", "order": 13, "format": "text", "visible": true, "sortable": true, "columnName": "delivery_partner_id", "searchable": true, "displayName": "Delivery Partner" },
+          { "align": "left", "order": 14, "format": "text", "visible": true, "sortable": true, "columnName": "delivery_address", "searchable": true, "displayName": "Delivery Address" },
+          { "align": "center", "order": 15, "format": "text", "visible": true, "sortable": true, "columnName": "shipping_method", "searchable": true, "displayName": "Shipping Method" },
+          { "align": "center", "order": 16, "format": "date", "visible": true, "sortable": true, "columnName": "due_date", "searchable": false, "displayName": "Due Date" },
+          { "align": "center", "order": 17, "format": "date", "visible": true, "sortable": true, "columnName": "order_date", "searchable": false, "displayName": "Order Date" },
+          { "align": "center", "order": 18, "format": "text", "visible": true, "sortable": true, "columnName": "status", "searchable": true, "displayName": "Status" },
+          { "align": "left", "order": 19, "format": "text", "visible": true, "sortable": true, "columnName": "manager_name", "searchable": true, "displayName": "Manager" },
+          { "align": "left", "order": 20, "format": "text", "visible": true, "sortable": true, "columnName": "memo", "searchable": true, "displayName": "Memo" }
+        ],
+        "autoLoad": true,
+        "checkbox": { "enabled": true, "multiple": true, "position": "left", "selectAll": true },
+        "pagination": { "enabled": true, "pageSize": 20, "showPageInfo": true, "pageSizeOptions": [10, 20, 50, 100], "showSizeSelector": true },
+        "showFooter": true,
+        "showHeader": true,
+        "tableStyle": { "theme": "default", "rowHeight": "normal", "borderStyle": "light", "headerStyle": "default", "hoverEffect": true, "alternateRows": true },
+        "displayMode": "table",
+        "stickyHeader": false,
+        "selectedTable": "sales_order_mng",
+        "webTypeConfig": {},
+        "horizontalScroll": { "enabled": true, "maxColumnWidth": 300, "minColumnWidth": 80, "maxVisibleColumns": 10 }
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_btn_upload",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1610, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "Excel Upload",
+        "type": "v2-button-primary",
+        "label": "Excel Upload Button",
+        "action": { "type": "excel_upload" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_btn_download",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 110, "height": 40 },
+      "position": { "x": 1720, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "Excel Download",
+        "type": "v2-button-primary",
+        "label": "Excel Download Button",
+        "action": { "type": "excel_download" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_btn_register",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1500, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "New Order",
+        "type": "v2-button-primary",
+        "label": "New Order Button",
+        "action": {
+          "type": "modal",
+          "modalSize": "lg",
+          "modalTitle": "New Sales Order",
+          "targetScreenId": 3732,
+          "successMessage": "Saved successfully.",
+          "errorMessage": "Error saving."
+        },
+        "variant": "success",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_btn_edit",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1610, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "Edit",
+        "type": "v2-button-primary",
+        "label": "Edit Button",
+        "action": {
+          "type": "edit",
+          "modalSize": "lg",
+          "modalTitle": "Edit Sales Order",
+          "targetScreenId": 3732,
+          "successMessage": "Updated successfully.",
+          "errorMessage": "Error updating."
+        },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_btn_delete",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1700, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "Delete",
+        "type": "v2-button-primary",
+        "label": "Delete Button",
+        "action": {
+          "type": "delete",
+          "successMessage": "Deleted successfully.",
+          "errorMessage": "Error deleting."
+        },
+        "variant": "danger",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_btn_shipment",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1790, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "Shipment Plan",
+        "type": "v2-button-primary",
+        "label": "Shipment Plan Button",
+        "action": { "type": "custom" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 7
+    }
+  ]
+}
diff --git a/db/migrations/so_main_layout_kr.json b/db/migrations/so_main_layout_kr.json
new file mode 100644
index 00000000..16361a23
--- /dev/null
+++ b/db/migrations/so_main_layout_kr.json
@@ -0,0 +1,179 @@
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_search",
+      "url": "@/lib/registry/components/v2-table-search-widget",
+      "size": { "width": 1920, "height": 80 },
+      "position": { "x": 0, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-table-search-widget",
+        "label": "검색 필터",
+        "webTypeConfig": {}
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_table",
+      "url": "@/lib/registry/components/v2-table-list",
+      "size": { "width": 1920, "height": 800 },
+      "position": { "x": 0, "y": 150, "z": 1 },
+      "overrides": {
+        "type": "v2-table-list",
+        "label": "수주 목록",
+        "filter": { "enabled": true, "filters": [] },
+        "height": "auto",
+        "actions": { "actions": [], "bulkActions": false, "showActions": false },
+        "columns": [
+          { "align": "left", "order": 0, "format": "text", "visible": true, "sortable": true, "columnName": "order_no", "searchable": true, "displayName": "수주번호" },
+          { "align": "left", "order": 1, "format": "text", "visible": true, "sortable": true, "columnName": "partner_id", "searchable": true, "displayName": "거래처" },
+          { "align": "left", "order": 2, "format": "text", "visible": true, "sortable": true, "columnName": "part_code", "searchable": true, "displayName": "품목코드" },
+          { "align": "left", "order": 3, "format": "text", "visible": true, "sortable": true, "columnName": "part_name", "searchable": true, "displayName": "품명" },
+          { "align": "left", "order": 4, "format": "text", "visible": true, "sortable": true, "columnName": "spec", "searchable": true, "displayName": "규격" },
+          { "align": "left", "order": 5, "format": "text", "visible": true, "sortable": true, "columnName": "material", "searchable": true, "displayName": "재질" },
+          { "align": "right", "order": 6, "format": "number", "visible": true, "sortable": true, "columnName": "order_qty", "searchable": false, "displayName": "수주수량" },
+          { "align": "right", "order": 7, "format": "number", "visible": true, "sortable": true, "columnName": "ship_qty", "searchable": false, "displayName": "출하수량" },
+          { "align": "right", "order": 8, "format": "number", "visible": true, "sortable": true, "columnName": "balance_qty", "searchable": false, "displayName": "잔량" },
+          { "align": "right", "order": 9, "format": "number", "visible": true, "sortable": true, "columnName": "inventory_qty", "searchable": false, "displayName": "현재고" },
+          { "align": "right", "order": 10, "format": "number", "visible": true, "sortable": true, "columnName": "plan_ship_qty", "searchable": false, "displayName": "출하계획량" },
+          { "align": "right", "order": 11, "format": "number", "visible": true, "sortable": true, "columnName": "unit_price", "searchable": false, "displayName": "단가" },
+          { "align": "right", "order": 12, "format": "number", "visible": true, "sortable": true, "columnName": "total_amount", "searchable": false, "displayName": "금액" },
+          { "align": "left", "order": 13, "format": "text", "visible": true, "sortable": true, "columnName": "delivery_partner_id", "searchable": true, "displayName": "납품처" },
+          { "align": "left", "order": 14, "format": "text", "visible": true, "sortable": true, "columnName": "delivery_address", "searchable": true, "displayName": "납품장소" },
+          { "align": "center", "order": 15, "format": "text", "visible": true, "sortable": true, "columnName": "shipping_method", "searchable": true, "displayName": "배송방법" },
+          { "align": "center", "order": 16, "format": "date", "visible": true, "sortable": true, "columnName": "due_date", "searchable": false, "displayName": "납기일" },
+          { "align": "center", "order": 17, "format": "date", "visible": true, "sortable": true, "columnName": "order_date", "searchable": false, "displayName": "수주일" },
+          { "align": "center", "order": 18, "format": "text", "visible": true, "sortable": true, "columnName": "status", "searchable": true, "displayName": "상태" },
+          { "align": "left", "order": 19, "format": "text", "visible": true, "sortable": true, "columnName": "manager_name", "searchable": true, "displayName": "담당자" },
+          { "align": "left", "order": 20, "format": "text", "visible": true, "sortable": true, "columnName": "memo", "searchable": true, "displayName": "메모" }
+        ],
+        "autoLoad": true,
+        "checkbox": { "enabled": true, "multiple": true, "position": "left", "selectAll": true },
+        "pagination": { "enabled": true, "pageSize": 20, "showPageInfo": true, "pageSizeOptions": [10, 20, 50, 100], "showSizeSelector": true },
+        "showFooter": true,
+        "showHeader": true,
+        "tableStyle": { "theme": "default", "rowHeight": "normal", "borderStyle": "light", "headerStyle": "default", "hoverEffect": true, "alternateRows": true },
+        "displayMode": "table",
+        "stickyHeader": false,
+        "selectedTable": "sales_order_mng",
+        "webTypeConfig": {},
+        "horizontalScroll": { "enabled": true, "maxColumnWidth": 300, "minColumnWidth": 80, "maxVisibleColumns": 10 }
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_btn_upload",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1610, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "엑셀 업로드",
+        "type": "v2-button-primary",
+        "label": "엑셀 업로드 버튼",
+        "action": { "type": "excel_upload" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_btn_download",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 110, "height": 40 },
+      "position": { "x": 1720, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "엑셀 다운로드",
+        "type": "v2-button-primary",
+        "label": "엑셀 다운로드 버튼",
+        "action": { "type": "excel_download" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_btn_register",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1500, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "수주 등록",
+        "type": "v2-button-primary",
+        "label": "수주 등록 버튼",
+        "action": {
+          "type": "modal",
+          "modalSize": "lg",
+          "modalTitle": "수주 등록",
+          "targetScreenId": 3732,
+          "successMessage": "저장되었습니다.",
+          "errorMessage": "저장 중 오류가 발생했습니다."
+        },
+        "variant": "success",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_btn_edit",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1610, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "수정",
+        "type": "v2-button-primary",
+        "label": "수정 버튼",
+        "action": {
+          "type": "edit",
+          "modalSize": "lg",
+          "modalTitle": "수주 수정",
+          "targetScreenId": 3732,
+          "successMessage": "수정되었습니다.",
+          "errorMessage": "수정 중 오류가 발생했습니다."
+        },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_btn_delete",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1700, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "삭제",
+        "type": "v2-button-primary",
+        "label": "삭제 버튼",
+        "action": {
+          "type": "delete",
+          "successMessage": "삭제되었습니다.",
+          "errorMessage": "삭제 중 오류가 발생했습니다."
+        },
+        "variant": "danger",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_btn_shipment",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1790, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "출하계획",
+        "type": "v2-button-primary",
+        "label": "출하계획 버튼",
+        "action": { "type": "custom" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 7
+    }
+  ]
+}
diff --git a/db/migrations/so_modal_layout.json b/db/migrations/so_modal_layout.json
new file mode 100644
index 00000000..4245c052
--- /dev/null
+++ b/db/migrations/so_modal_layout.json
@@ -0,0 +1,254 @@
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_order_no",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Order No",
+        "fieldName": "order_no",
+        "placeholder": "Enter order number",
+        "required": true
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_order_date",
+      "url": "@/lib/registry/components/v2-date",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-date",
+        "label": "Order Date",
+        "fieldName": "order_date",
+        "required": true
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_partner_id",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "Customer",
+        "fieldName": "partner_id",
+        "required": true,
+        "config": {
+          "mode": "dropdown",
+          "source": "table",
+          "sourceTable": "customer_mng",
+          "valueField": "id",
+          "labelField": "name"
+        }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_part_code",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Part Code",
+        "fieldName": "part_code",
+        "placeholder": "Enter part code",
+        "required": true
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_part_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Part Name",
+        "fieldName": "part_name",
+        "placeholder": "Enter part name"
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_spec",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Spec",
+        "fieldName": "spec",
+        "placeholder": "Enter spec"
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_material",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Material",
+        "fieldName": "material",
+        "placeholder": "Enter material"
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_order_qty",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "number",
+        "label": "Order Qty",
+        "fieldName": "order_qty",
+        "placeholder": "Enter order quantity",
+        "required": true
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "comp_unit_price",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "number",
+        "label": "Unit Price",
+        "fieldName": "unit_price",
+        "placeholder": "Enter unit price",
+        "required": true
+      },
+      "displayOrder": 8
+    },
+    {
+      "id": "comp_due_date",
+      "url": "@/lib/registry/components/v2-date",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-date",
+        "label": "Due Date",
+        "fieldName": "due_date"
+      },
+      "displayOrder": 9
+    },
+    {
+      "id": "comp_status",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 420, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "Status",
+        "fieldName": "status",
+        "required": true,
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "수주", "label": "수주" },
+            { "value": "진행중", "label": "진행중" },
+            { "value": "완료", "label": "완료" },
+            { "value": "취소", "label": "취소" }
+          ]
+        }
+      },
+      "displayOrder": 10
+    },
+    {
+      "id": "comp_shipping_method",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 420, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "Shipping Method",
+        "fieldName": "shipping_method",
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "택배", "label": "택배" },
+            { "value": "화물", "label": "화물" },
+            { "value": "직송", "label": "직송" },
+            { "value": "퀵서비스", "label": "퀵서비스" },
+            { "value": "해상운송", "label": "해상운송" }
+          ]
+        }
+      },
+      "displayOrder": 11
+    },
+    {
+      "id": "comp_delivery_address",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 620, "height": 60 },
+      "position": { "x": 20, "y": 500, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Delivery Address",
+        "fieldName": "delivery_address",
+        "placeholder": "Enter delivery address"
+      },
+      "displayOrder": 12
+    },
+    {
+      "id": "comp_manager_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 580, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "Manager",
+        "fieldName": "manager_name",
+        "placeholder": "Enter manager name"
+      },
+      "displayOrder": 13
+    },
+    {
+      "id": "comp_memo",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 620, "height": 80 },
+      "position": { "x": 20, "y": 660, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "textarea",
+        "label": "Memo",
+        "fieldName": "memo",
+        "placeholder": "Enter memo"
+      },
+      "displayOrder": 14
+    },
+    {
+      "id": "comp_btn_save",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 540, "y": 760, "z": 1 },
+      "overrides": {
+        "text": "Save",
+        "type": "v2-button-primary",
+        "label": "Save Button",
+        "action": {
+          "type": "save",
+          "closeModalAfterSave": true,
+          "refreshParentTable": true,
+          "successMessage": "Saved successfully.",
+          "errorMessage": "Error saving."
+        },
+        "variant": "primary",
+        "actionType": "button"
+      },
+      "displayOrder": 15
+    }
+  ]
+}
diff --git a/db/migrations/so_modal_layout_kr.json b/db/migrations/so_modal_layout_kr.json
new file mode 100644
index 00000000..f07e3ae6
--- /dev/null
+++ b/db/migrations/so_modal_layout_kr.json
@@ -0,0 +1,254 @@
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_order_no",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "수주번호",
+        "fieldName": "order_no",
+        "placeholder": "수주번호를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_order_date",
+      "url": "@/lib/registry/components/v2-date",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-date",
+        "label": "수주일",
+        "fieldName": "order_date",
+        "required": true
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_partner_id",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "거래처",
+        "fieldName": "partner_id",
+        "required": true,
+        "config": {
+          "mode": "dropdown",
+          "source": "table",
+          "sourceTable": "customer_mng",
+          "valueField": "id",
+          "labelField": "name"
+        }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_part_code",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "품목코드",
+        "fieldName": "part_code",
+        "placeholder": "품목코드를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_part_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "품명",
+        "fieldName": "part_name",
+        "placeholder": "품명을 입력하세요"
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_spec",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "규격",
+        "fieldName": "spec",
+        "placeholder": "규격을 입력하세요"
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_material",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "재질",
+        "fieldName": "material",
+        "placeholder": "재질을 입력하세요"
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_order_qty",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "number",
+        "label": "수주수량",
+        "fieldName": "order_qty",
+        "placeholder": "수주수량을 입력하세요",
+        "required": true
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "comp_unit_price",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "number",
+        "label": "단가",
+        "fieldName": "unit_price",
+        "placeholder": "단가를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 8
+    },
+    {
+      "id": "comp_due_date",
+      "url": "@/lib/registry/components/v2-date",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-date",
+        "label": "납기일",
+        "fieldName": "due_date"
+      },
+      "displayOrder": 9
+    },
+    {
+      "id": "comp_status",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 420, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "상태",
+        "fieldName": "status",
+        "required": true,
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "수주", "label": "수주" },
+            { "value": "진행중", "label": "진행중" },
+            { "value": "완료", "label": "완료" },
+            { "value": "취소", "label": "취소" }
+          ]
+        }
+      },
+      "displayOrder": 10
+    },
+    {
+      "id": "comp_shipping_method",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 420, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "배송방법",
+        "fieldName": "shipping_method",
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "택배", "label": "택배" },
+            { "value": "화물", "label": "화물" },
+            { "value": "직송", "label": "직송" },
+            { "value": "퀵서비스", "label": "퀵서비스" },
+            { "value": "해상운송", "label": "해상운송" }
+          ]
+        }
+      },
+      "displayOrder": 11
+    },
+    {
+      "id": "comp_delivery_address",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 620, "height": 60 },
+      "position": { "x": 20, "y": 500, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "납품장소",
+        "fieldName": "delivery_address",
+        "placeholder": "납품장소를 입력하세요"
+      },
+      "displayOrder": 12
+    },
+    {
+      "id": "comp_manager_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 580, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "담당자",
+        "fieldName": "manager_name",
+        "placeholder": "담당자를 입력하세요"
+      },
+      "displayOrder": 13
+    },
+    {
+      "id": "comp_memo",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 620, "height": 80 },
+      "position": { "x": 20, "y": 660, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "textarea",
+        "label": "메모",
+        "fieldName": "memo",
+        "placeholder": "메모를 입력하세요"
+      },
+      "displayOrder": 14
+    },
+    {
+      "id": "comp_btn_save",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 540, "y": 760, "z": 1 },
+      "overrides": {
+        "text": "저장",
+        "type": "v2-button-primary",
+        "label": "저장 버튼",
+        "action": {
+          "type": "save",
+          "closeModalAfterSave": true,
+          "refreshParentTable": true,
+          "successMessage": "저장되었습니다.",
+          "errorMessage": "저장 중 오류가 발생했습니다."
+        },
+        "variant": "primary",
+        "actionType": "button"
+      },
+      "displayOrder": 15
+    }
+  ]
+}
diff --git a/docker-compose.frontend.win.yml b/docker-compose.frontend.win.yml
index db9722d8..79589463 100644
--- a/docker-compose.frontend.win.yml
+++ b/docker-compose.frontend.win.yml
@@ -5,13 +5,20 @@ services:
   frontend:
     build:
       context: ./frontend
-      dockerfile: Dockerfile.dev
+      dockerfile: ../docker/dev/frontend.Dockerfile
     container_name: pms-frontend-win
     ports:
       - "9771:3000"
     environment:
       - NEXT_PUBLIC_API_URL=http://localhost:8080/api
       - WATCHPACK_POLLING=true
+      - NODE_OPTIONS=--max-old-space-size=4096
+    deploy:
+      resources:
+        limits:
+          memory: 6G
+        reservations:
+          memory: 2G
     volumes:
       - ./frontend:/app
       - /app/node_modules
diff --git a/docker/dev/docker-compose.frontend.mac.yml b/docker/dev/docker-compose.frontend.mac.yml
index e02a1287..6428d481 100644
--- a/docker/dev/docker-compose.frontend.mac.yml
+++ b/docker/dev/docker-compose.frontend.mac.yml
@@ -9,6 +9,8 @@ services:
       - "9771:3000"
     environment:
       - NEXT_PUBLIC_API_URL=http://localhost:8080/api
+      - NODE_OPTIONS=--max-old-space-size=8192
+      - NEXT_TELEMETRY_DISABLED=1
     volumes:
       - ../../frontend:/app
       - /app/node_modules
diff --git a/docs/DDD1542/FLOW_BASED_RESPONSIVE_DESIGN.md b/docs/DDD1542/FLOW_BASED_RESPONSIVE_DESIGN.md
new file mode 100644
index 00000000..f885debb
--- /dev/null
+++ b/docs/DDD1542/FLOW_BASED_RESPONSIVE_DESIGN.md
@@ -0,0 +1,729 @@
+# Flow 기반 반응형 레이아웃 설계서
+
+> 작성일: 2026-01-30
+> 목표: 진정한 반응형 구현 (PC/태블릿/모바일 전체 대응)
+
+---
+
+## 1. 핵심 결론
+
+### 1.1 현재 방식 vs 반응형 표준
+
+| 항목 | 현재 시스템 | 웹 표준 (2025) |
+|------|-------------|----------------|
+| 배치 방식 | `position: absolute` | **Flexbox / CSS Grid** |
+| 좌표 | 픽셀 고정 (x, y) | **Flow 기반 (순서)** |
+| 화면 축소 시 | 그대로 (잘림) | **자동 재배치** |
+| 용도 | 툴팁, 오버레이 | **전체 레이아웃** |
+
+> **결론**: `position: absolute`는 전체 레이아웃에 사용하면 안 됨 (웹 표준)
+
+### 1.2 구현 방향
+
+```
+절대 좌표 (x, y 픽셀)
+    ↓ 변환
+Flow 기반 배치 (Flexbox + Grid)
+    ↓ 결과
+화면 크기에 따라 자동 재배치
+```
+
+---
+
+## 2. 실제 화면 데이터 분석
+
+### 2.1 분석 대상
+
+```
+총 레이아웃: 1,250개
+총 컴포넌트: 5,236개
+분석 샘플: 6개 화면 (23, 20, 18, 16, 18, 5개 컴포넌트)
+```
+
+### 2.2 화면 68 (수주 목록) - 가로 배치 패턴
+
+```
+y=88:  [분리] [저장] [수정] [삭제]  ← 같은 행에 버튼 4개
+       x=1277 x=1436 x=1594 x=1753
+
+y=128: [────────── 테이블 ──────────]
+       x=8, width=1904
+```
+
+**변환 후**:
+```html
+<div class="flex flex-wrap justify-end gap-2">  <!-- Row 1 -->
+  <button>분리</button>
+  <button>저장</button>
+  <button>수정</button>
+  <button>삭제</button>
+</div>
+<div class="w-full">  <!-- Row 2 -->
+  <Table />
+</div>
+```
+
+**반응형 동작**:
+```
+1920px: [분리] [저장] [수정] [삭제]  ← 가로 배치
+1280px: [분리] [저장] [수정] [삭제]  ← 가로 배치 (공간 충분)
+ 768px: [분리] [저장]                 ← 줄바꿈 발생
+        [수정] [삭제]
+ 375px: [분리]                        ← 세로 배치
+        [저장]
+        [수정]
+        [삭제]
+```
+
+### 2.3 화면 119 (장치 관리) - 2열 폼 패턴
+
+```
+y=80:  [장치 코드    ] [시리얼넘버  ]
+       x=136, w=256    x=408, w=256
+
+y=160: [제조사                      ]
+       x=136, w=528
+
+y=240: [품번        ] [모델명      ]
+       x=136, w=256    x=408, w=256
+
+y=320: [구매일      ] [상태        ]
+y=400: [공급사      ] [구매 가격    ]
+y=480: [계약 번호    ] [공급사 전화  ]
+... (2열 반복)
+
+y=840: [저장]
+       x=544
+```
+
+**변환 후**:
+```html
+<div class="grid grid-cols-2 gap-4">  <!-- 2열 그리드 -->
+  <Input label="장치 코드" />
+  <Input label="시리얼넘버" />
+</div>
+<div class="w-full">  <!-- 전체 너비 -->
+  <Input label="제조사" />
+</div>
+<div class="grid grid-cols-2 gap-4">
+  <Input label="품번" />
+  <Select label="모델명" />
+</div>
+<!-- ... 반복 ... -->
+<div class="flex justify-center">
+  <Button>저장</Button>
+</div>
+```
+
+**반응형 동작**:
+```
+1920px: [장치 코드] [시리얼넘버]  ← 2열
+1280px: [장치 코드] [시리얼넘버]  ← 2열
+ 768px: [장치 코드]               ← 1열
+        [시리얼넘버]
+ 375px: [장치 코드]               ← 1열
+        [시리얼넘버]
+```
+
+### 2.4 화면 4103 (수주 등록) - 섹션 기반 패턴
+
+```
+y=20:  [섹션: 옵션 설정                              ]
+y=35:  [입력방식▼] [판매유형▼] [단가방식▼] [☑ 단가수정]
+       
+y=110: [섹션: 거래처 정보                            ]
+y=190: [거래처 *  ] [담당자    ] [납품처    ] [납품장소        ]
+
+y=260: [섹션: 추가된 품목                            ]
+y=360: [리피터 테이블                                ]
+
+y=570: [섹션: 무역 정보                              ]
+y=690: [인코텀즈▼] [결제조건▼] [통화▼    ]
+y=740: [선적항    ] [도착항    ] [HS Code   ]
+
+y=890: [섹션: 추가 정보                              ]
+y=935: [메모                                         ]
+
+y=1080: [저장]
+```
+
+**변환 후**:
+```html
+<Card title="옵션 설정">
+  <div class="flex flex-wrap gap-4">
+    <Select label="입력방식" />
+    <Select label="판매유형" />
+    <Select label="단가방식" />
+    <Checkbox label="단가수정 허용" />
+  </div>
+</Card>
+
+<Card title="거래처 정보">
+  <div class="grid grid-cols-4 gap-4">  <!-- 4열 그리드 -->
+    <Select label="거래처 *" />
+    <Input label="담당자" />
+    <Input label="납품처" />
+    <Input label="납품장소" class="col-span-2" />
+  </div>
+</Card>
+
+<!-- ... 섹션 반복 ... -->
+
+<div class="flex justify-end">
+  <Button>저장</Button>
+</div>
+```
+
+**반응형 동작**:
+```
+1920px: [입력방식] [판매유형] [단가방식] [단가수정]  ← 4열
+1280px: [입력방식] [판매유형] [단가방식]             ← 3열
+        [단가수정]
+ 768px: [입력방식] [판매유형]                        ← 2열
+        [단가방식] [단가수정]
+ 375px: [입력방식]                                   ← 1열
+        [판매유형]
+        [단가방식]
+        [단가수정]
+```
+
+---
+
+## 3. 변환 규칙
+
+### 3.1 Row 그룹화 알고리즘
+
+```typescript
+const ROW_THRESHOLD = 40; // px
+
+function groupByRows(components: Component[]): Row[] {
+  // 1. y 좌표로 정렬
+  const sorted = [...components].sort((a, b) => a.position.y - b.position.y);
+  
+  const rows: Row[] = [];
+  let currentRow: Component[] = [];
+  let currentY = -Infinity;
+  
+  for (const comp of sorted) {
+    if (comp.position.y - currentY > ROW_THRESHOLD) {
+      // 새로운 Row 시작
+      if (currentRow.length > 0) {
+        rows.push({
+          y: currentY,
+          components: currentRow.sort((a, b) => a.position.x - b.position.x)
+        });
+      }
+      currentRow = [comp];
+      currentY = comp.position.y;
+    } else {
+      // 같은 Row에 추가
+      currentRow.push(comp);
+    }
+  }
+  
+  // 마지막 Row 추가
+  if (currentRow.length > 0) {
+    rows.push({
+      y: currentY,
+      components: currentRow.sort((a, b) => a.position.x - b.position.x)
+    });
+  }
+  
+  return rows;
+}
+```
+
+### 3.2 화면 68 적용 예시
+
+**입력**:
+```json
+[
+  { "id": "comp_1899", "position": { "x": 1277, "y": 88 }, "text": "분리" },
+  { "id": "comp_1898", "position": { "x": 1436, "y": 88 }, "text": "저장" },
+  { "id": "comp_1897", "position": { "x": 1594, "y": 88 }, "text": "수정" },
+  { "id": "comp_1896", "position": { "x": 1753, "y": 88 }, "text": "삭제" },
+  { "id": "comp_1895", "position": { "x": 8, "y": 128 }, "type": "table" }
+]
+```
+
+**변환 결과**:
+```json
+{
+  "rows": [
+    {
+      "y": 88,
+      "justify": "end",
+      "components": ["comp_1899", "comp_1898", "comp_1897", "comp_1896"]
+    },
+    {
+      "y": 128,
+      "justify": "start",
+      "components": ["comp_1895"]
+    }
+  ]
+}
+```
+
+### 3.3 정렬 방향 결정
+
+```typescript
+function determineJustify(row: Row, screenWidth: number): string {
+  const firstX = row.components[0].position.x;
+  const lastComp = row.components[row.components.length - 1];
+  const lastEnd = lastComp.position.x + lastComp.size.width;
+  
+  // 왼쪽 여백 vs 오른쪽 여백 비교
+  const leftMargin = firstX;
+  const rightMargin = screenWidth - lastEnd;
+  
+  if (leftMargin > rightMargin * 2) {
+    return "end";     // 오른쪽 정렬
+  } else if (rightMargin > leftMargin * 2) {
+    return "start";   // 왼쪽 정렬
+  } else {
+    return "center";  // 중앙 정렬
+  }
+}
+
+// 화면 68 버튼 그룹:
+// leftMargin = 1277, rightMargin = 1920 - 1912 = 8
+// → "end" (오른쪽 정렬)
+```
+
+---
+
+## 4. 렌더링 구현
+
+### 4.1 새로운 FlowLayout 컴포넌트
+
+```tsx
+// frontend/lib/registry/layouts/flow/FlowLayout.tsx
+
+interface FlowLayoutProps {
+  layout: LayoutData;
+  renderer: DynamicComponentRenderer;
+}
+
+export function FlowLayout({ layout, renderer }: FlowLayoutProps) {
+  // 1. Row 그룹화
+  const rows = useMemo(() => {
+    return groupByRows(layout.components);
+  }, [layout.components]);
+  
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      {rows.map((row, index) => (
+        <FlowRow 
+          key={index}
+          row={row}
+          renderer={renderer}
+        />
+      ))}
+    </div>
+  );
+}
+
+function FlowRow({ row, renderer }: { row: Row; renderer: any }) {
+  const justify = determineJustify(row, 1920);
+  
+  const justifyClass = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+  }[justify];
+  
+  return (
+    <div className={`flex flex-wrap gap-2 ${justifyClass}`}>
+      {row.components.map((comp) => (
+        <div 
+          key={comp.id}
+          style={{
+            minWidth: comp.size.width,
+            // width는 고정하지 않음 (flex로 자동 조정)
+          }}
+        >
+          {renderer.renderChild(comp)}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### 4.2 기존 코드 수정 위치
+
+**현재 (RealtimePreviewDynamic.tsx 라인 524-536)**:
+```tsx
+const baseStyle = {
+  left: `${adjustedPositionX}px`,  // ❌ 절대 좌표
+  top: `${position.y}px`,          // ❌ 절대 좌표
+  position: "absolute",            // ❌ 절대 위치
+};
+```
+
+**변경 후**:
+```tsx
+// FlowLayout 사용 시 position 관련 스타일 제거
+const baseStyle = isFlowMode ? {
+  // position, left, top 없음
+  minWidth: size.width,
+  height: size.height,
+} : {
+  left: `${adjustedPositionX}px`,
+  top: `${position.y}px`,
+  position: "absolute",
+};
+```
+
+---
+
+## 5. 가상 시뮬레이션
+
+### 5.1 시나리오 1: 화면 68 (버튼 4개 + 테이블)
+
+**렌더링 결과 (1920px)**:
+```
+┌────────────────────────────────────────────────────────────────────────┐
+│                                          [분리] [저장] [수정] [삭제]    │
+│                                          flex-wrap, justify-end        │
+├────────────────────────────────────────────────────────────────────────┤
+│ ┌────────────────────────────────────────────────────────────────────┐ │
+│ │                           테이블 (w-full)                           │ │
+│ └────────────────────────────────────────────────────────────────────┘ │
+└────────────────────────────────────────────────────────────────────────┘
+✅ 정상: 버튼 오른쪽 정렬, 테이블 전체 너비
+```
+
+**렌더링 결과 (1280px)**:
+```
+┌─────────────────────────────────────────────┐
+│               [분리] [저장] [수정] [삭제]    │
+│               flex-wrap, justify-end        │
+├─────────────────────────────────────────────┤
+│ ┌─────────────────────────────────────────┐ │
+│ │         테이블 (w-full)                  │ │
+│ └─────────────────────────────────────────┘ │
+└─────────────────────────────────────────────┘
+✅ 정상: 버튼 크기 유지, 테이블 너비 조정
+```
+
+**렌더링 결과 (768px)**:
+```
+┌──────────────────────────┐
+│       [분리] [저장]       │
+│       [수정] [삭제]       │ ← 자동 줄바꿈!
+├──────────────────────────┤
+│ ┌──────────────────────┐ │
+│ │    테이블 (w-full)    │ │
+│ └──────────────────────┘ │
+└──────────────────────────┘
+✅ 정상: 버튼 줄바꿈, 테이블 너비 조정
+```
+
+**렌더링 결과 (375px)**:
+```
+┌─────────────┐
+│    [분리]    │
+│    [저장]    │
+│    [수정]    │
+│    [삭제]    │ ← 세로 배치
+├─────────────┤
+│ ┌─────────┐ │
+│ │ 테이블   │ │ (가로 스크롤)
+│ └─────────┘ │
+└─────────────┘
+✅ 정상: 버튼 세로 배치, 테이블 가로 스크롤
+```
+
+### 5.2 시나리오 2: 화면 119 (2열 폼)
+
+**렌더링 결과 (1920px)**:
+```
+┌────────────────────────────────────────────────────────────────────────┐
+│  [장치 코드          ]  [시리얼넘버        ]                            │
+│  grid-cols-2                                                           │
+├────────────────────────────────────────────────────────────────────────┤
+│  [제조사                                    ]                           │
+│  col-span-2 (전체 너비)                                                │
+├────────────────────────────────────────────────────────────────────────┤
+│  [품번              ]  [모델명▼           ]                            │
+│  ...                                                                   │
+└────────────────────────────────────────────────────────────────────────┘
+✅ 정상: 2열 그리드
+```
+
+**렌더링 결과 (768px)**:
+```
+┌──────────────────────────┐
+│  [장치 코드            ]  │
+│  [시리얼넘버           ]  │ ← 1열로 변경
+├──────────────────────────┤
+│  [제조사               ]  │
+├──────────────────────────┤
+│  [품번                 ]  │
+│  [모델명▼              ]  │
+│  ...                      │
+└──────────────────────────┘
+✅ 정상: 1열 그리드
+```
+
+### 5.3 시나리오 3: 분할 패널
+
+**현재 SplitPanelLayout 동작**:
+```
+좌측 60% | 우측 40%  ← 이미 퍼센트 기반
+```
+
+**변경 후 (768px 이하)**:
+```
+┌────────────────────┐
+│      좌측 100%      │
+├────────────────────┤
+│      우측 100%      │
+└────────────────────┘
+← 세로 배치로 전환
+```
+
+**구현**:
+```tsx
+// SplitPanelLayoutComponent.tsx
+const isMobile = useMediaQuery("(max-width: 768px)");
+
+return (
+  <div className={isMobile ? "flex-col" : "flex-row"}>
+    <div className={isMobile ? "w-full" : "w-[60%]"}>
+      {/* 좌측 패널 */}
+    </div>
+    <div className={isMobile ? "w-full" : "w-[40%]"}>
+      {/* 우측 패널 */}
+    </div>
+  </div>
+);
+```
+
+---
+
+## 6. 엣지 케이스 검증
+
+### 6.1 겹치는 컴포넌트
+
+**현재 데이터 (화면 74)**:
+```json
+{ "id": "comp_2606", "position": { "x": 161, "y": 400 } },  // 분할 패널
+{ "id": "comp_fkk75q08", "position": { "x": 161, "y": 400 } }  // 라디오 버튼
+```
+
+**문제**: 같은 위치에 두 컴포넌트 → z-index로 겹쳐서 표시
+
+**해결**: 
+- z-index가 높은 컴포넌트 우선
+- 또는 parent-child 관계면 중첩 처리
+
+```typescript
+function resolveOverlaps(row: Row): Row {
+  // z-index로 정렬하여 높은 것만 표시
+  // 또는 parentId 확인하여 중첩 처리
+}
+```
+
+### 6.2 조건부 표시 컴포넌트
+
+**현재 데이터 (화면 4103)**:
+```json
+{
+  "id": "section-customer-info",
+  "conditionalConfig": {
+    "field": "input_method",
+    "value": "customer_first",
+    "action": "show"
+  }
+}
+```
+
+**동작**: 조건에 따라 show/hide
+**Flow 레이아웃에서**: 숨겨지면 공간도 사라짐 (flex 자동 조정)
+
+✅ 문제없음
+
+### 6.3 테이블 + 버튼 조합
+
+**패턴**:
+```
+[버튼 그룹]  ← flex-wrap, justify-end
+[테이블]    ← w-full
+```
+
+**테이블 가로 스크롤**:
+- 테이블 내부는 가로 스크롤 지원
+- 외부 컨테이너는 w-full
+
+✅ 문제없음
+
+### 6.4 섹션 카드 내부 컴포넌트
+
+**현재**: 섹션 카드와 내부 컴포넌트가 별도로 저장됨
+
+**변환 시**:
+1. 섹션 카드의 y 범위 파악
+2. 해당 y 범위 내 컴포넌트들을 섹션 자식으로 그룹화
+3. 섹션 내부에서 다시 Row 그룹화
+
+```typescript
+function groupWithinSection(
+  section: Component,
+  allComponents: Component[]
+): Component[] {
+  const sectionTop = section.position.y;
+  const sectionBottom = section.position.y + section.size.height;
+  
+  return allComponents.filter(comp => {
+    return comp.id !== section.id &&
+           comp.position.y >= sectionTop &&
+           comp.position.y < sectionBottom;
+  });
+}
+```
+
+---
+
+## 7. 호환성 검증
+
+### 7.1 기존 기능 호환
+
+| 기능 | 호환 여부 | 설명 |
+|------|----------|------|
+| 디자인 모드 | ⚠️ 수정 필요 | 드래그 앤 드롭 로직 수정 |
+| 미리보기 | ✅ 호환 | Flow 레이아웃으로 렌더링 |
+| 조건부 표시 | ✅ 호환 | flex로 자동 조정 |
+| 분할 패널 | ⚠️ 수정 필요 | 반응형 전환 로직 추가 |
+| 테이블 | ✅ 호환 | w-full 적용 |
+| 모달 | ✅ 호환 | 모달 내부도 Flow 적용 |
+
+### 7.2 디자인 모드 수정
+
+**현재**: 드래그하면 x, y 픽셀 저장
+**변경 후**: 드래그하면 x, y 픽셀 저장 (동일) → 렌더링 시 변환
+
+```
+저장: 픽셀 좌표 (기존 유지)
+렌더링: Flow 기반으로 변환
+```
+
+**장점**: DB 마이그레이션 불필요
+
+---
+
+## 8. 구현 계획
+
+### Phase 1: 핵심 변환 로직 (1일)
+
+1. `groupByRows()` 함수 구현
+2. `determineJustify()` 함수 구현
+3. `FlowLayout` 컴포넌트 생성
+
+### Phase 2: 렌더링 적용 (1일)
+
+1. `DynamicComponentRenderer`에 Flow 모드 추가
+2. `RealtimePreviewDynamic` 수정
+3. 기존 absolute 스타일 조건부 적용
+
+### Phase 3: 특수 케이스 처리 (1일)
+
+1. 섹션 카드 내부 그룹화
+2. 겹치는 컴포넌트 처리
+3. 분할 패널 반응형 전환
+
+### Phase 4: 테스트 (1일)
+
+1. 화면 68 (버튼 + 테이블) 테스트
+2. 화면 119 (2열 폼) 테스트
+3. 화면 4103 (복잡한 폼) 테스트
+4. PC 1920px → 1280px 테스트
+5. 태블릿 768px 테스트
+6. 모바일 375px 테스트
+
+---
+
+## 9. 예상 이슈
+
+### 9.1 디자이너 의도 손실
+
+**문제**: 디자이너가 의도적으로 배치한 위치가 변경될 수 있음
+
+**해결**:
+- 기본 Flow 레이아웃 적용
+- 필요시 `flexOrder` 속성으로 순서 조정 가능
+- 또는 `fixedPosition: true` 옵션으로 절대 좌표 유지
+
+### 9.2 복잡한 레이아웃
+
+**문제**: 일부 화면은 자유 배치가 필요할 수 있음
+
+**해결**:
+- 화면별 `layoutMode` 설정
+  - `"flow"`: Flow 기반 (기본값)
+  - `"absolute"`: 기존 절대 좌표
+
+### 9.3 성능
+
+**문제**: 매 렌더링마다 Row 그룹화 계산
+
+**해결**:
+- `useMemo`로 캐싱
+- 컴포넌트 목록 변경 시에만 재계산
+
+---
+
+## 10. 최종 체크리스트
+
+### 구현 전
+
+- [ ] 현재 동작하는 화면 스크린샷 (비교용)
+- [ ] 테스트 화면 목록 확정 (68, 119, 4103)
+
+### 구현 중
+
+- [ ] `groupByRows()` 구현
+- [ ] `determineJustify()` 구현
+- [ ] `FlowLayout` 컴포넌트 생성
+- [ ] `DynamicComponentRenderer` 수정
+- [ ] `RealtimePreviewDynamic` 수정
+
+### 테스트
+
+- [ ] 1920px 테스트
+- [ ] 1280px 테스트
+- [ ] 768px 테스트
+- [ ] 375px 테스트
+- [ ] 디자인 모드 테스트
+- [ ] 분할 패널 테스트
+- [ ] 조건부 표시 테스트
+
+---
+
+## 11. 결론
+
+### 11.1 구현 가능 여부
+
+**✅ 가능**
+
+- 기존 데이터 구조 유지 (DB 변경 없음)
+- 렌더링 레벨에서만 변환
+- 모든 화면 패턴 분석 완료
+- 엣지 케이스 해결책 확보
+
+### 11.2 핵심 변경 사항
+
+```
+Before: position: absolute + left/top 픽셀
+After:  Flexbox + flex-wrap + justify-*
+```
+
+### 11.3 예상 효과
+
+| 화면 크기 | Before | After |
+|-----------|--------|-------|
+| 1920px | 정상 | 정상 |
+| 1280px | 버튼 잘림 | **자동 조정** |
+| 768px | 레이아웃 깨짐 | **자동 재배치** |
+| 375px | 사용 불가 | **자동 세로 배치** |
diff --git a/docs/DDD1542/MULTI_SELECT_ARRAY_SERIALIZATION_FIX.md b/docs/DDD1542/MULTI_SELECT_ARRAY_SERIALIZATION_FIX.md
new file mode 100644
index 00000000..3d5ba77c
--- /dev/null
+++ b/docs/DDD1542/MULTI_SELECT_ARRAY_SERIALIZATION_FIX.md
@@ -0,0 +1,253 @@
+# 다중 선택(Multi-Select) 배열 직렬화 문제 해결 보고서
+
+## 문제 요약
+
+**증상**: 다중 선택 컴포넌트(TagboxSelect, 체크박스 등)로 선택한 값이 DB에 저장될 때 손상되거나 `null`로 저장됨
+
+**영향받는 기능**: 
+- 품목정보의 `division` (구분) 필드
+- 모든 다중 선택 카테고리 필드
+
+**손상된 데이터 예시**:
+```
+{"{\"{\\\"CAT_ML7SR2T9_IM7H\\\",\\\"CAT_ML8ZFQFU_EE5Z\\\"}\"}",...}
+```
+
+**정상 데이터 예시**:
+```
+CAT_ML7SR2T9_IM7H,CAT_ML8ZFQFU_EE5Z,CAT_ML8ZFVEL_1TOR
+```
+
+---
+
+## 문제 원인 분석
+
+### 1. PostgreSQL의 배열 자동 변환
+
+Node.js의 `node-pg` 라이브러리는 JavaScript 배열을 PostgreSQL 배열 리터럴(`{...}`)로 자동 변환합니다.
+
+```javascript
+// JavaScript
+["CAT_1", "CAT_2", "CAT_3"]
+
+// PostgreSQL로 자동 변환됨
+{"CAT_1","CAT_2","CAT_3"}
+```
+
+하지만 우리 시스템은 커스텀 테이블에서 **쉼표 구분 문자열**을 기대합니다:
+```
+CAT_1,CAT_2,CAT_3
+```
+
+### 2. 여러 저장 경로의 존재
+
+코드를 분석한 결과, 저장 로직이 여러 경로로 나뉘어 있었습니다:
+
+| 경로 | 파일 | 설명 |
+|------|------|------|
+| 1 | `buttonActions.ts` | 기본 저장 로직 (INSERT/UPDATE) |
+| 2 | `EditModal.tsx` | 모달 내 직접 저장 (CREATE/UPDATE) |
+| 3 | `nodeFlowExecutionService.ts` | 백엔드 노드 플로우 저장 |
+
+### 3. 왜 초기 수정이 실패했는가?
+
+#### 시도 1: `buttonActions.ts`에 배열 변환 추가
+```typescript
+// buttonActions.ts (라인 1002-1025)
+if (isUpdate) {
+  for (const key of Object.keys(formData)) {
+    if (Array.isArray(value)) {
+      formData[key] = value.join(",");
+    }
+  }
+}
+```
+
+**실패 이유**: `EditModal`이 `onSave` 콜백을 제공하면, `buttonActions.ts`는 이 콜백을 바로 호출하고 내부 저장 로직을 건너뜀
+
+```typescript
+// buttonActions.ts (라인 545-552)
+if (onSave) {
+  await onSave();  // 바로 여기서 EditModal.handleSave()가 호출됨
+  return true;     // 아래 배열 변환 로직에 도달하지 않음!
+}
+```
+
+#### 시도 2: `nodeFlowExecutionService.ts`에 `normalizeValueForDB` 추가
+
+**부분 성공**: INSERT에서는 동작했으나, EditModal의 UPDATE 경로는 여전히 문제
+
+---
+
+## 최종 해결 방법
+
+### 핵심 수정: `EditModal.tsx`에 직접 배열 변환 추가
+
+EditModal이 직접 `dynamicFormApi.updateFormDataPartial`을 호출하므로, **저장 직전**에 배열을 변환해야 했습니다.
+
+#### 수정 위치 1: UPDATE 경로 (라인 957-1002)
+
+```typescript
+// EditModal.tsx - UPDATE 모드
+Object.keys(formData).forEach((key) => {
+  if (formData[key] !== originalData[key]) {
+    let value = formData[key];
+    
+    if (Array.isArray(value)) {
+      // 리피터 데이터 제외
+      const isRepeaterData = value.length > 0 && 
+        typeof value[0] === "object" && 
+        ("_targetTable" in value[0] || "_isNewItem" in value[0]);
+      
+      if (!isRepeaterData) {
+        // 🔧 손상된 값 필터링
+        const isValidValue = (v: any): boolean => {
+          if (typeof v === "number") return true;
+          if (typeof v !== "string") return false;
+          if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) 
+            return false;
+          return true;
+        };
+        
+        // 유효한 값만 쉼표로 연결
+        const validValues = value.filter(isValidValue);
+        value = validValues.join(",");
+      }
+    }
+    
+    changedData[key] = value;
+  }
+});
+```
+
+#### 수정 위치 2: CREATE 경로 (라인 855-875)
+
+```typescript
+// EditModal.tsx - CREATE 모드
+Object.entries(dataToSave).forEach(([key, value]) => {
+  if (!Array.isArray(value)) {
+    masterDataToSave[key] = value;
+  } else {
+    const isRepeaterData = /* 리피터 체크 */;
+    
+    if (isRepeaterData) {
+      // 리피터 데이터는 제외 (별도 저장)
+    } else {
+      // 다중 선택 배열 → 쉼표 구분 문자열
+      const validValues = value.filter(isValidValue);
+      masterDataToSave[key] = validValues.join(",");
+    }
+  }
+});
+```
+
+#### 수정 위치 3: 그룹 UPDATE 경로 (라인 630-650)
+
+그룹 품목 수정 시에도 동일한 로직 적용
+
+---
+
+## 손상된 데이터 필터링
+
+기존에 손상된 데이터가 배열에 포함될 수 있어서, 변환 전 필터링이 필요했습니다:
+
+```typescript
+const isValidValue = (v: any): boolean => {
+  // 숫자는 유효
+  if (typeof v === "number" && !isNaN(v)) return true;
+  // 문자열이 아니면 무효
+  if (typeof v !== "string") return false;
+  // 빈 값 무효
+  if (!v || v.trim() === "") return false;
+  // PostgreSQL 배열 형식 감지 → 무효
+  if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) 
+    return false;
+  return true;
+};
+```
+
+**필터링 예시**:
+```
+입력 배열: ['{"CAT_1","CAT_2"}', 'CAT_ML7SR2T9_IM7H', 'CAT_ML8ZFQFU_EE5Z']
+              ↑ 손상됨 (필터링)      ↑ 유효                ↑ 유효
+
+출력: 'CAT_ML7SR2T9_IM7H,CAT_ML8ZFQFU_EE5Z'
+```
+
+---
+
+## 수정된 파일 목록
+
+| 파일 | 수정 내용 |
+|------|-----------|
+| `frontend/components/screen/EditModal.tsx` | CREATE/UPDATE/그룹UPDATE 경로에 배열→문자열 변환 + 손상값 필터링 |
+| `frontend/lib/utils/buttonActions.ts` | INSERT 경로에 배열→문자열 변환 (이미 수정됨) |
+| `frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx` | handleChange에서 배열→문자열 변환 |
+| `backend-node/src/services/nodeFlowExecutionService.ts` | normalizeValueForDB 헬퍼 추가 |
+
+---
+
+## 교훈 및 향후 주의사항
+
+### 1. 저장 경로 파악의 중요성
+
+프론트엔드에서 저장 로직이 여러 경로로 분기될 수 있으므로, **모든 경로를 추적**해야 합니다.
+
+```
+사용자 저장 버튼 클릭
+    ↓
+ButtonPrimaryComponent
+    ↓
+buttonActions.handleSave()
+    ↓
+┌─────────────────────────────────────┐
+│ onSave 콜백이 있으면?               │
+│   → EditModal.handleSave() 직접 호출│  ← 이 경로를 놓침!
+│ onSave 콜백이 없으면?               │
+│   → buttonActions 내부 저장 로직    │
+└─────────────────────────────────────┘
+```
+
+### 2. 로그 기반 디버깅
+
+로그가 어디까지 찍히고 어디서 안 찍히는지를 통해 코드 경로를 추적:
+
+```
+[예상한 로그]
+buttonActions.ts:512 🔍 [handleSave] 진입
+buttonActions.ts:1021 🔧 배열→문자열 변환  ← 이게 안 나옴!
+
+[실제 로그]
+buttonActions.ts:512 🔍 [handleSave] 진입
+dynamicForm.ts:140 🔄 폼 데이터 부분 업데이트  ← 바로 여기로 점프!
+```
+
+### 3. 리피터 데이터 vs 다중 선택 구분
+
+배열이라고 모두 쉼표 문자열로 변환하면 안 됩니다:
+
+| 타입 | 예시 | 처리 방법 |
+|------|------|-----------|
+| 다중 선택 | `["CAT_1", "CAT_2"]` | 쉼표 문자열로 변환 |
+| 리피터 데이터 | `[{id: 1, _targetTable: "..."}]` | 별도 테이블에 저장, 마스터에서 제외 |
+
+---
+
+## 확인된 정상 동작
+
+```
+EditModal.tsx:1002 🔧 [EditModal UPDATE] 배열→문자열 변환: division 
+  {original: 3, valid: 3, converted: 'CAT_ML7SR2T9_IM7H,CAT_ML8ZFQFU_EE5Z,CAT_ML8ZFVEL_1TOR'}
+
+dynamicForm.ts:153 ✅ 폼 데이터 부분 업데이트 성공
+```
+
+---
+
+## 작성일
+
+2026-02-05
+
+## 작성자
+
+AI Assistant (Claude)
diff --git a/docs/DDD1542/PC_RESPONSIVE_IMPLEMENTATION_PLAN.md b/docs/DDD1542/PC_RESPONSIVE_IMPLEMENTATION_PLAN.md
new file mode 100644
index 00000000..3d6ec12d
--- /dev/null
+++ b/docs/DDD1542/PC_RESPONSIVE_IMPLEMENTATION_PLAN.md
@@ -0,0 +1,688 @@
+# PC 반응형 구현 계획서
+
+> 작성일: 2026-01-30
+> 목표: PC 환경 (1280px ~ 1920px)에서 완벽한 반응형 구현
+
+---
+
+## 1. 목표 정의
+
+### 1.1 범위
+
+| 환경 | 화면 크기 | 우선순위 |
+|------|-----------|----------|
+| **PC (대형 모니터)** | 1920px | 기준 |
+| **PC (노트북)** | 1280px ~ 1440px | **1순위** |
+| 태블릿 | 768px ~ 1024px | 2순위 (추후) |
+| 모바일 | < 768px | 3순위 (추후) |
+
+### 1.2 목표 동작
+
+```
+1920px 화면에서 디자인
+    ↓
+1280px 화면으로 축소
+    ↓
+컴포넌트들이 비율에 맞게 재배치 (위치, 크기 모두)
+    ↓
+레이아웃 깨지지 않음
+```
+
+### 1.3 성공 기준
+
+- [ ] 1920px에서 디자인한 화면이 1280px에서 정상 표시
+- [ ] 버튼이 화면 밖으로 나가지 않음
+- [ ] 테이블이 화면 너비에 맞게 조정됨
+- [ ] 분할 패널이 비율 유지하며 축소됨
+
+---
+
+## 2. 현재 시스템 분석
+
+### 2.1 렌더링 흐름 (현재)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ 1. API 호출                                                  │
+│    screenApi.getLayoutV2(screenId)                          │
+│    → screen_layouts_v2.layout_data (JSONB)                  │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│ 2. 데이터 변환                                               │
+│    convertV2ToLegacy(v2Response)                            │
+│    → components 배열 (position, size 포함)                   │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│ 3. 스케일 계산 (page.tsx 라인 395-460)                       │
+│    const designWidth = layout.screenResolution.width || 1200│
+│    const newScale = containerWidth / designWidth            │
+│    → 전체 화면을 scale()로 축소                              │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│ 4. 컴포넌트 렌더링 (RealtimePreviewDynamic.tsx 라인 524-536) │
+│    left: `${position.x}px`  ← 픽셀 고정                      │
+│    top: `${position.y}px`   ← 픽셀 고정                      │
+│    position: absolute       ← 절대 위치                      │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 현재 방식의 문제점
+
+**현재**: `transform: scale()` 방식
+```tsx
+// page.tsx 라인 515-520
+<div style={{
+  width: `${screenWidth}px`,      // 1920px 고정
+  height: `${screenHeight}px`,    // 고정
+  transform: `scale(${scale})`,   // 전체 축소
+  transformOrigin: "top left",
+}}>
+```
+
+| 문제 | 설명 |
+|------|------|
+| **축소만 됨** | 레이아웃 재배치 없음 |
+| **폰트 작아짐** | 전체 scale로 폰트도 축소 |
+| **클릭 영역 오차** | scale 적용 시 클릭 위치 계산 오류 가능 |
+| **진정한 반응형 아님** | 비율만 유지, 레이아웃 최적화 없음 |
+
+### 2.3 position.x, position.y 사용 위치
+
+| 파일 | 라인 | 용도 |
+|------|------|------|
+| `RealtimePreviewDynamic.tsx` | 524-526 | 컴포넌트 위치 스타일 |
+| `AutoRegisteringComponentRenderer.ts` | 42-43 | 공통 컴포넌트 스타일 |
+| `page.tsx` | 744-745 | 자식 컴포넌트 상대 위치 |
+| `ScreenDesigner.tsx` | 2890-2894 | 드래그 앤 드롭 위치 |
+| `ScreenModal.tsx` | 620-621 | 모달 내 오프셋 조정 |
+
+---
+
+## 3. 구현 방식: 퍼센트 기반 배치
+
+### 3.1 핵심 아이디어
+
+```
+픽셀 좌표 (1920px 기준)
+    ↓
+퍼센트로 변환
+    ↓
+화면 크기에 관계없이 비율 유지
+```
+
+**예시**:
+```
+버튼 위치: x=1753px (1920px 기준)
+    ↓
+퍼센트: 1753 / 1920 = 91.3%
+    ↓
+1280px 화면: 1280 * 0.913 = 1168px
+    ↓
+버튼이 화면 안에 정상 표시
+```
+
+### 3.2 변환 공식
+
+```typescript
+// 픽셀 → 퍼센트 변환
+const DESIGN_WIDTH = 1920;
+
+function toPercent(pixelX: number): string {
+  return `${(pixelX / DESIGN_WIDTH) * 100}%`;
+}
+
+// 사용
+left: toPercent(position.x)  // "91.3%"
+width: toPercent(size.width) // "8.2%"
+```
+
+### 3.3 Y축 처리
+
+Y축은 두 가지 옵션:
+
+**옵션 A: Y축도 퍼센트 (권장)**
+```typescript
+const DESIGN_HEIGHT = 1080;
+top: `${(position.y / DESIGN_HEIGHT) * 100}%`
+```
+
+**옵션 B: Y축은 픽셀 유지**
+```typescript
+top: `${position.y}px`  // 세로는 스크롤로 해결
+```
+
+**결정: 옵션 B (Y축 픽셀 유지)**
+- 이유: 세로 스크롤은 자연스러움
+- 가로만 반응형이면 PC 환경에서 충분
+
+---
+
+## 4. 구현 상세
+
+### 4.1 수정 파일 목록
+
+| 파일 | 수정 내용 |
+|------|-----------|
+| `RealtimePreviewDynamic.tsx` | left, width를 퍼센트로 변경 |
+| `AutoRegisteringComponentRenderer.ts` | left, width를 퍼센트로 변경 |
+| `page.tsx` | scale 제거, 컨테이너 width: 100% |
+
+### 4.2 RealtimePreviewDynamic.tsx 수정
+
+**현재 (라인 524-530)**:
+```tsx
+const baseStyle = {
+  left: `${adjustedPositionX}px`,
+  top: `${position.y}px`,
+  width: displayWidth,
+  height: displayHeight,
+  zIndex: component.type === "layout" ? 1 : position.z || 2,
+};
+```
+
+**변경 후**:
+```tsx
+const DESIGN_WIDTH = 1920;
+
+const baseStyle = {
+  left: `${(adjustedPositionX / DESIGN_WIDTH) * 100}%`,  // 퍼센트
+  top: `${position.y}px`,                                 // Y축은 픽셀 유지
+  width: `${(parseFloat(displayWidth) / DESIGN_WIDTH) * 100}%`,  // 퍼센트
+  height: displayHeight,                                  // 높이는 픽셀 유지
+  zIndex: component.type === "layout" ? 1 : position.z || 2,
+};
+```
+
+### 4.3 AutoRegisteringComponentRenderer.ts 수정
+
+**현재 (라인 40-48)**:
+```tsx
+const baseStyle: React.CSSProperties = {
+  position: "absolute",
+  left: `${component.position?.x || 0}px`,
+  top: `${component.position?.y || 0}px`,
+  width: `${component.size?.width || 200}px`,
+  height: `${component.size?.height || 36}px`,
+  zIndex: component.position?.z || 1,
+};
+```
+
+**변경 후**:
+```tsx
+const DESIGN_WIDTH = 1920;
+
+const baseStyle: React.CSSProperties = {
+  position: "absolute",
+  left: `${((component.position?.x || 0) / DESIGN_WIDTH) * 100}%`,     // 퍼센트
+  top: `${component.position?.y || 0}px`,                               // Y축은 픽셀 유지
+  width: `${((component.size?.width || 200) / DESIGN_WIDTH) * 100}%`,  // 퍼센트
+  height: `${component.size?.height || 36}px`,                          // 높이는 픽셀 유지
+  zIndex: component.position?.z || 1,
+};
+```
+
+### 4.4 page.tsx 수정
+
+**현재 (라인 515-528)**:
+```tsx
+<div
+  className="bg-background relative"
+  style={{
+    width: `${screenWidth}px`,
+    height: `${screenHeight}px`,
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+    position: "relative",
+  }}
+>
+```
+
+**변경 후**:
+```tsx
+<div
+  className="bg-background relative"
+  style={{
+    width: "100%",              // 전체 너비 사용
+    minHeight: `${screenHeight}px`,  // 최소 높이
+    position: "relative",
+    // transform: scale 제거
+  }}
+>
+```
+
+### 4.5 공통 상수 파일 생성
+
+```typescript
+// frontend/lib/constants/responsive.ts
+
+export const RESPONSIVE_CONFIG = {
+  DESIGN_WIDTH: 1920,
+  DESIGN_HEIGHT: 1080,
+  MIN_WIDTH: 1280,
+  MAX_WIDTH: 1920,
+} as const;
+
+export function toPercentX(pixelX: number): string {
+  return `${(pixelX / RESPONSIVE_CONFIG.DESIGN_WIDTH) * 100}%`;
+}
+
+export function toPercentWidth(pixelWidth: number): string {
+  return `${(pixelWidth / RESPONSIVE_CONFIG.DESIGN_WIDTH) * 100}%`;
+}
+```
+
+---
+
+## 5. 가상 시뮬레이션
+
+### 5.1 시뮬레이션 시나리오
+
+**테스트 화면**: screen_id = 68 (수주 목록)
+```json
+{
+  "components": [
+    {
+      "id": "comp_1895",
+      "url": "v2-table-list",
+      "position": { "x": 8, "y": 128 },
+      "size": { "width": 1904, "height": 600 }
+    },
+    {
+      "id": "comp_1896",
+      "url": "v2-button-primary",
+      "position": { "x": 1753, "y": 88 },
+      "size": { "width": 158, "height": 40 }
+    },
+    {
+      "id": "comp_1897",
+      "url": "v2-button-primary",
+      "position": { "x": 1594, "y": 88 },
+      "size": { "width": 158, "height": 40 }
+    },
+    {
+      "id": "comp_1898",
+      "url": "v2-button-primary",
+      "position": { "x": 1436, "y": 88 },
+      "size": { "width": 158, "height": 40 }
+    }
+  ]
+}
+```
+
+### 5.2 현재 방식 시뮬레이션
+
+**1920px 화면**:
+```
+┌────────────────────────────────────────────────────────────────────────┐
+│                                          [분리] [저장] [수정] [삭제]    │
+│                                          1277   1436   1594   1753     │
+├────────────────────────────────────────────────────────────────────────┤
+│ x=8                                                            x=1904  │
+│ ┌────────────────────────────────────────────────────────────────────┐ │
+│ │                           테이블 (width: 1904px)                    │ │
+│ └────────────────────────────────────────────────────────────────────┘ │
+└────────────────────────────────────────────────────────────────────────┘
+✅ 정상 표시
+```
+
+**1280px 화면 (현재 scale 방식)**:
+```
+┌─────────────────────────────────────────────┐
+│ scale(0.67) 적용                             │
+│ ┌─────────────────────────────────────────┐ │
+│ │                    [분리][저][수][삭]    │ │ ← 전체 축소, 폰트 작아짐
+│ ├─────────────────────────────────────────┤ │
+│ │ ┌─────────────────────────────────────┐ │ │
+│ │ │       테이블 (축소됨)                 │ │ │
+│ │ └─────────────────────────────────────┘ │ │
+│ └─────────────────────────────────────────┘ │
+│                                             │
+│  (여백 발생)                                 │
+└─────────────────────────────────────────────┘
+⚠️ 작동하지만 폰트/여백 문제
+```
+
+### 5.3 퍼센트 방식 시뮬레이션
+
+**변환 계산**:
+```
+테이블:
+  x: 8px → 8/1920 = 0.42%
+  width: 1904px → 1904/1920 = 99.17%
+
+삭제 버튼:
+  x: 1753px → 1753/1920 = 91.30%
+  width: 158px → 158/1920 = 8.23%
+
+수정 버튼:
+  x: 1594px → 1594/1920 = 83.02%
+  width: 158px → 158/1920 = 8.23%
+
+저장 버튼:
+  x: 1436px → 1436/1920 = 74.79%
+  width: 158px → 158/1920 = 8.23%
+
+분리 버튼:
+  x: 1277px → 1277/1920 = 66.51%
+  width: 158px → 158/1920 = 8.23%
+```
+
+**1920px 화면**:
+```
+┌────────────────────────────────────────────────────────────────────────┐
+│                                          [분리] [저장] [수정] [삭제]    │
+│                                          66.5%  74.8%  83.0%  91.3%    │
+├────────────────────────────────────────────────────────────────────────┤
+│ 0.42%                                                           99.6%  │
+│ ┌────────────────────────────────────────────────────────────────────┐ │
+│ │                           테이블 (width: 99.17%)                    │ │
+│ └────────────────────────────────────────────────────────────────────┘ │
+└────────────────────────────────────────────────────────────────────────┘
+✅ 정상 표시 (1920px와 동일)
+```
+
+**1280px 화면 (퍼센트 방식)**:
+```
+┌─────────────────────────────────────────────┐
+│                    [분리][저장][수정][삭제]  │
+│                    66.5% 74.8% 83.0% 91.3%  │
+│                    = 851  957  1063  1169   │ ← 화면 안에 표시!
+├─────────────────────────────────────────────┤
+│ 0.42%                                99.6%  │
+│ = 5px                               = 1275  │
+│ ┌─────────────────────────────────────────┐ │
+│ │         테이블 (width: 99.17%)          │ │ ← 화면 너비에 맞게 조정
+│ │         = 1280 * 0.9917 = 1269px        │ │
+│ └─────────────────────────────────────────┘ │
+└─────────────────────────────────────────────┘
+✅ 비율 유지, 화면 안에 표시, 폰트 크기 유지
+```
+
+### 5.4 버튼 간격 검증
+
+**1920px**:
+```
+분리: 1277px, 너비 158px → 끝: 1435px
+저장: 1436px (간격: 1px)
+수정: 1594px (간격: 1px)
+삭제: 1753px (간격: 1px)
+```
+
+**1280px (퍼센트 변환 후)**:
+```
+분리: 1280 * 0.665 = 851px, 너비 1280 * 0.082 = 105px → 끝: 956px
+저장: 1280 * 0.748 = 957px (간격: 1px) ✅
+수정: 1280 * 0.830 = 1063px (간격: 1px) ✅
+삭제: 1280 * 0.913 = 1169px (간격: 1px) ✅
+```
+
+**결론**: 버튼 간격 비율도 유지됨
+
+---
+
+## 6. 엣지 케이스 검증
+
+### 6.1 분할 패널 (SplitPanelLayout)
+
+**현재 동작**:
+- 좌측 패널: 60% 너비
+- 우측 패널: 40% 너비
+- **이미 퍼센트 기반!**
+
+**시뮬레이션**:
+```
+1920px: 좌측 1152px, 우측 768px
+1280px: 좌측 768px, 우측 512px
+✅ 자동으로 비율 유지됨
+```
+
+**분할 패널 내부 컴포넌트**:
+- 문제: 내부 컴포넌트가 픽셀 고정이면 깨짐
+- 해결: 분할 패널 내부도 퍼센트 적용 필요
+
+### 6.2 테이블 컴포넌트 (TableList)
+
+**현재**:
+- 테이블 자체는 컨테이너 너비 100% 사용
+- 컬럼 너비는 내부적으로 조정
+
+**시뮬레이션**:
+```
+1920px: 테이블 컨테이너 width: 99.17% = 1904px
+1280px: 테이블 컨테이너 width: 99.17% = 1269px
+✅ 테이블이 자동으로 조정됨
+```
+
+### 6.3 자식 컴포넌트 상대 위치
+
+**현재 코드 (page.tsx 라인 744-745)**:
+```typescript
+const relativeChildComponent = {
+  position: {
+    x: child.position.x - component.position.x,
+    y: child.position.y - component.position.y,
+  },
+};
+```
+
+**문제**: 상대 좌표도 픽셀 기반
+
+**해결**: 부모 기준 퍼센트로 변환
+```typescript
+const relativeChildComponent = {
+  position: {
+    // 부모 너비 기준 퍼센트
+    xPercent: ((child.position.x - component.position.x) / component.size.width) * 100,
+    y: child.position.y - component.position.y,
+  },
+};
+```
+
+### 6.4 드래그 앤 드롭 (디자인 모드)
+
+**ScreenDesigner.tsx**:
+- 드롭 위치는 여전히 픽셀로 저장
+- 렌더링 시에만 퍼센트로 변환
+- **저장 방식 변경 없음!**
+
+**시뮬레이션**:
+```
+1. 디자이너가 1920px 화면에서 버튼 드롭
+2. position: { x: 1753, y: 88 } 저장 (픽셀)
+3. 렌더링 시 91.3%로 변환
+4. 1280px 화면에서도 정상 표시
+✅ 디자인 모드 호환
+```
+
+### 6.5 모달 내 화면
+
+**ScreenModal.tsx (라인 620-621)**:
+```typescript
+x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+```
+
+**문제**: 오프셋 계산이 픽셀 기반
+
+**해결**: 모달 컨테이너도 퍼센트 기반으로 변경
+```typescript
+// 모달 컨테이너 너비 기준으로 퍼센트 계산
+const modalWidth = containerRef.current?.clientWidth || DESIGN_WIDTH;
+const xPercent = ((position.x - offsetX) / DESIGN_WIDTH) * 100;
+```
+
+---
+
+## 7. 잠재적 문제 및 해결책
+
+### 7.1 최소 너비 문제
+
+**문제**: 버튼이 너무 작아질 수 있음
+```
+158px 버튼 → 1280px 화면에서 105px
+→ 텍스트가 잘릴 수 있음
+```
+
+**해결**: min-width 설정
+```css
+min-width: 80px;
+```
+
+### 7.2 겹침 문제
+
+**문제**: 화면이 작아지면 컴포넌트가 겹칠 수 있음
+
+**시뮬레이션**:
+```
+1920px: 버튼 4개가 간격 1px로 배치
+1280px: 버튼 4개가 간격 1px로 배치 (비율 유지)
+✅ 겹치지 않음 (간격도 비율로 축소)
+```
+
+### 7.3 폰트 크기
+
+**현재**: 폰트는 px 고정
+**변경 후**: 폰트 크기 유지 (scale이 아니므로)
+
+**결과**: 폰트 크기는 그대로, 레이아웃만 비율 조정
+✅ 가독성 유지
+
+### 7.4 height 처리
+
+**결정**: height는 픽셀 유지
+- 이유: 세로 스크롤은 자연스러움
+- 세로 반응형은 불필요 (PC 환경)
+
+---
+
+## 8. 호환성 검증
+
+### 8.1 기존 화면 호환
+
+| 항목 | 호환 여부 | 이유 |
+|------|----------|------|
+| 일반 버튼 | ✅ | 퍼센트로 변환, 위치 유지 |
+| 테이블 | ✅ | 컨테이너 비율 유지 |
+| 분할 패널 | ✅ | 이미 퍼센트 기반 |
+| 탭 레이아웃 | ✅ | 컨테이너 비율 유지 |
+| 그리드 레이아웃 | ✅ | 내부는 기존 방식 |
+| 인풋 필드 | ✅ | 컨테이너 비율 유지 |
+
+### 8.2 디자인 모드 호환
+
+| 항목 | 호환 여부 | 이유 |
+|------|----------|------|
+| 드래그 앤 드롭 | ✅ | 저장은 픽셀, 렌더링만 퍼센트 |
+| 리사이즈 | ✅ | 저장은 픽셀, 렌더링만 퍼센트 |
+| 그리드 스냅 | ✅ | 스냅은 픽셀 기준 유지 |
+| 미리보기 | ✅ | 렌더링 동일 방식 |
+
+### 8.3 API 호환
+
+| 항목 | 호환 여부 | 이유 |
+|------|----------|------|
+| DB 저장 | ✅ | 구조 변경 없음 (픽셀 저장) |
+| API 응답 | ✅ | 구조 변경 없음 |
+| V2 변환 | ✅ | 변환 로직 변경 없음 |
+
+---
+
+## 9. 구현 순서
+
+### Phase 1: 공통 유틸리티 생성 (30분)
+
+```typescript
+// frontend/lib/constants/responsive.ts
+export const RESPONSIVE_CONFIG = {
+  DESIGN_WIDTH: 1920,
+} as const;
+
+export function toPercentX(pixelX: number): string {
+  return `${(pixelX / RESPONSIVE_CONFIG.DESIGN_WIDTH) * 100}%`;
+}
+
+export function toPercentWidth(pixelWidth: number): string {
+  return `${(pixelWidth / RESPONSIVE_CONFIG.DESIGN_WIDTH) * 100}%`;
+}
+```
+
+### Phase 2: RealtimePreviewDynamic.tsx 수정 (1시간)
+
+1. import 추가
+2. baseStyle의 left, width를 퍼센트로 변경
+3. 분할 패널 위 버튼 조정 로직도 퍼센트 적용
+
+### Phase 3: AutoRegisteringComponentRenderer.ts 수정 (30분)
+
+1. import 추가
+2. getComponentStyle()의 left, width를 퍼센트로 변경
+
+### Phase 4: page.tsx 수정 (1시간)
+
+1. scale 로직 제거 또는 수정
+2. 컨테이너 width: 100%로 변경
+3. 자식 컴포넌트 상대 위치 계산 수정
+
+### Phase 5: 테스트 (1시간)
+
+1. 1920px 화면에서 기존 화면 정상 동작 확인
+2. 1280px 화면으로 축소 테스트
+3. 분할 패널 화면 테스트
+4. 디자인 모드 테스트
+
+---
+
+## 10. 최종 체크리스트
+
+### 구현 전
+
+- [ ] 현재 동작하는 화면 스크린샷 캡처 (비교용)
+- [ ] 테스트 화면 목록 선정
+
+### 구현 중
+
+- [ ] responsive.ts 생성
+- [ ] RealtimePreviewDynamic.tsx 수정
+- [ ] AutoRegisteringComponentRenderer.ts 수정
+- [ ] page.tsx 수정
+
+### 구현 후
+
+- [ ] 1920px 화면 테스트
+- [ ] 1440px 화면 테스트
+- [ ] 1280px 화면 테스트
+- [ ] 분할 패널 화면 테스트
+- [ ] 디자인 모드 테스트
+- [ ] 모달 내 화면 테스트
+
+---
+
+## 11. 예상 소요 시간
+
+| 작업 | 시간 |
+|------|------|
+| 유틸리티 생성 | 30분 |
+| RealtimePreviewDynamic.tsx | 1시간 |
+| AutoRegisteringComponentRenderer.ts | 30분 |
+| page.tsx | 1시간 |
+| 테스트 | 1시간 |
+| **합계** | **4시간** |
+
+---
+
+## 12. 결론
+
+**퍼센트 기반 배치**가 PC 반응형의 가장 확실한 해결책입니다.
+
+| 항목 | scale 방식 | 퍼센트 방식 |
+|------|-----------|------------|
+| 폰트 크기 | 축소됨 | **유지** |
+| 레이아웃 비율 | 유지 | **유지** |
+| 클릭 영역 | 오차 가능 | **정확** |
+| 구현 복잡도 | 낮음 | **중간** |
+| 진정한 반응형 | ❌ | **✅** |
+
+**DB 변경 없이, 렌더링 로직만 수정**하여 완벽한 PC 반응형을 구현할 수 있습니다.
diff --git a/docs/DDD1542/RESPONSIVE_GRID_SYSTEM_ARCHITECTURE.md b/docs/DDD1542/RESPONSIVE_GRID_SYSTEM_ARCHITECTURE.md
new file mode 100644
index 00000000..411fdd1f
--- /dev/null
+++ b/docs/DDD1542/RESPONSIVE_GRID_SYSTEM_ARCHITECTURE.md
@@ -0,0 +1,832 @@
+# 반응형 그리드 시스템 아키텍처
+
+> 최종 업데이트: 2026-01-30
+
+---
+
+## 1. 개요
+
+### 1.1 현재 문제
+
+**컴포넌트 위치/크기가 픽셀 단위로 고정되어 반응형 미지원**
+
+```json
+// 현재 DB 저장 방식 (screen_layouts_v2.layout_data)
+{
+  "position": { "x": 1753, "y": 88 },
+  "size": { "width": 158, "height": 40 }
+}
+```
+
+| 화면 크기 | 결과 |
+|-----------|------|
+| 1920px (디자인 기준) | 정상 |
+| 1280px (노트북) | 오른쪽 버튼 잘림 |
+| 768px (태블릿) | 레이아웃 완전히 깨짐 |
+| 375px (모바일) | 사용 불가 |
+
+### 1.2 목표
+
+| 목표 | 설명 |
+|------|------|
+| PC 대응 | 1280px ~ 1920px |
+| 태블릿 대응 | 768px ~ 1024px |
+| 모바일 대응 | 320px ~ 767px |
+
+### 1.3 해결 방향
+
+```
+현재: 픽셀 좌표 → position: absolute → 고정 레이아웃
+변경: 그리드 셀 번호 → CSS Grid + ResizeObserver → 반응형 레이아웃
+```
+
+---
+
+## 2. 현재 시스템 분석
+
+### 2.1 데이터 현황
+
+```
+총 레이아웃: 1,250개
+총 컴포넌트: 5,236개
+회사 수: 14개
+테이블 크기: 약 3MB
+```
+
+### 2.2 컴포넌트 타입별 분포
+
+| 컴포넌트 | 수량 | shadcn 사용 |
+|----------|------|-------------|
+| v2-input | 1,914 | ✅ `@/components/ui/input` |
+| v2-button-primary | 1,549 | ✅ `@/components/ui/button` |
+| v2-table-search-widget | 355 | ✅ shadcn 기반 |
+| v2-select | 327 | ✅ `@/components/ui/select` |
+| v2-table-list | 285 | ✅ `@/components/ui/table` |
+| v2-media | 181 | ✅ shadcn 기반 |
+| v2-date | 132 | ✅ `@/components/ui/calendar` |
+| **v2-split-panel-layout** | **131** | ✅ shadcn 기반 (**반응형 필요**) |
+| v2-tabs-widget | 75 | ✅ shadcn 기반 |
+| 기타 | 287 | ✅ shadcn 기반 |
+| **합계** | **5,236** | **전부 shadcn** |
+
+### 2.3 현재 렌더링 방식
+
+```tsx
+// frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx (라인 234-248)
+{components.map((child) => (
+  <div
+    style={{
+      position: "absolute",       // 절대 위치
+      left: child.position.x,     // 픽셀 고정
+      top: child.position.y,      // 픽셀 고정
+      width: child.size.width,    // 픽셀 고정
+      height: child.size.height,  // 픽셀 고정
+    }}
+  >
+    {renderer.renderChild(child)}
+  </div>
+))}
+```
+
+### 2.4 핵심 발견
+
+```
+✅ 이미 있는 것:
+- 12컬럼 그리드 설정 (gridSettings.columns: 12)
+- 그리드 스냅 기능 (snapToGrid: true)
+- shadcn/ui 기반 컴포넌트 (전체)
+
+❌ 없는 것:
+- 그리드 셀 번호 저장 (현재 픽셀 저장)
+- 반응형 브레이크포인트 설정
+- CSS Grid 기반 렌더링
+- 분할 패널 반응형 처리
+```
+
+### 2.5 레이아웃 시스템 구조
+
+현재 시스템에는 두 가지 레벨의 레이아웃이 존재합니다:
+
+#### 2.5.1 화면 레이아웃 (screen_layouts_v2)
+
+화면 전체의 컴포넌트 배치를 담당합니다.
+
+```json
+// DB 구조
+{
+  "version": "2.0",
+  "components": [
+    { "id": "comp_1", "position": { "x": 100, "y": 50 }, ... },
+    { "id": "comp_2", "position": { "x": 500, "y": 50 }, ... },
+    { "id": "GridLayout_1", "position": { "x": 100, "y": 200 }, ... }
+  ]
+}
+```
+
+**현재**: absolute 포지션으로 컴포넌트 배치 → **반응형 불가**
+
+#### 2.5.2 컴포넌트 레이아웃 (GridLayout, FlexboxLayout 등)
+
+개별 레이아웃 컴포넌트 내부의 zone 배치를 담당합니다.
+
+| 컴포넌트 | 위치 | 내부 구조 | CSS Grid 사용 |
+|----------|------|-----------|---------------|
+| `GridLayout` | `layouts/grid/` | zones 배열 | ✅ 이미 사용 |
+| `FlexboxLayout` | `layouts/flexbox/` | zones 배열 | ❌ absolute |
+| `SplitLayout` | `layouts/split/` | left/right | ❌ flex |
+| `TabsLayout` | `layouts/` | tabs 배열 | ❌ 탭 구조 |
+| `CardLayout` | `layouts/card-layout/` | zones 배열 | ❌ flex |
+| `AccordionLayout` | `layouts/accordion/` | items 배열 | ❌ 아코디언 |
+
+#### 2.5.3 구조 다이어그램
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  screen_layouts_v2 (화면 전체)                                   │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │  현재: absolute 포지션 → 반응형 불가                       │   │
+│  │  변경: ResponsiveGridLayout (CSS Grid) → 반응형 가능       │   │
+│  └──────────────────────────────────────────────────────────┘   │
+│                                                                  │
+│  ┌──────────┐  ┌──────────┐  ┌─────────────────────────────┐   │
+│  │ v2-button │  │ v2-input │  │ GridLayout (컴포넌트)        │   │
+│  │ (shadcn)  │  │ (shadcn) │  │ ┌─────────┬─────────────┐   │   │
+│  └──────────┘  └──────────┘  │ │ zone1   │ zone2       │   │   │
+│                              │ │ (이미   │ (이미       │   │   │
+│                              │ │ CSS Grid│ CSS Grid)   │   │   │
+│                              │ └─────────┴─────────────┘   │   │
+│                              └─────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 2.6 기존 레이아웃 컴포넌트 호환성
+
+#### 2.6.1 GridLayout (기존 커스텀 그리드)
+
+```tsx
+// frontend/lib/registry/layouts/grid/GridLayout.tsx
+// 이미 CSS Grid를 사용하고 있음!
+
+const gridStyle: React.CSSProperties = {
+  display: "grid",
+  gridTemplateRows: `repeat(${gridConfig.rows}, 1fr)`,
+  gridTemplateColumns: `repeat(${gridConfig.columns}, 1fr)`,
+  gap: `${gridConfig.gap || 16}px`,
+};
+```
+
+**호환성**: ✅ **완전 호환**
+- GridLayout은 화면 내 하나의 컴포넌트로 취급됨
+- ResponsiveGridLayout이 GridLayout의 **위치만** 관리
+- GridLayout 내부는 기존 방식 그대로 동작
+
+#### 2.6.2 FlexboxLayout
+
+```tsx
+// frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
+// zone 내부에서 컴포넌트를 absolute로 배치
+
+{zoneChildren.map((child) => (
+  <div style={{
+    position: "absolute",
+    left: child.position?.x || 0,
+    top: child.position?.y || 0,
+  }}>
+    {renderer.renderChild(child)}
+  </div>
+))}
+```
+
+**호환성**: ✅ **호환** (내부는 기존 방식 유지)
+- FlexboxLayout 컴포넌트 자체의 위치는 ResponsiveGridLayout이 관리
+- 내부 zone의 컴포넌트 배치는 기존 absolute 방식 유지
+
+#### 2.6.3 SplitPanelLayout (분할 패널)
+
+**호환성**: ⚠️ **별도 수정 필요**
+- 외부 위치: ResponsiveGridLayout이 관리 ✅
+- 내부 반응형: 별도 수정 필요 (모바일에서 상하 분할)
+
+#### 2.6.4 호환성 요약
+
+| 컴포넌트 | 외부 배치 | 내부 동작 | 추가 수정 |
+|----------|----------|----------|-----------|
+| **v2-button, v2-input 등** | ✅ 반응형 | ✅ shadcn 그대로 | ❌ 불필요 |
+| **GridLayout** | ✅ 반응형 | ✅ CSS Grid 그대로 | ❌ 불필요 |
+| **FlexboxLayout** | ✅ 반응형 | ⚠️ absolute 유지 | ❌ 불필요 |
+| **SplitPanelLayout** | ✅ 반응형 | ❌ 좌우 고정 | ⚠️ 내부 반응형 추가 |
+| **TabsLayout** | ✅ 반응형 | ✅ 탭 그대로 | ❌ 불필요 |
+
+### 2.7 동작 방식 비교
+
+#### 변경 전
+
+```
+화면 로드
+  ↓
+screen_layouts_v2에서 components 조회
+  ↓
+각 컴포넌트를 position.x, position.y로 absolute 배치
+  ↓
+GridLayout 컴포넌트도 absolute로 배치됨
+  ↓
+GridLayout 내부는 CSS Grid로 zone 배치
+  ↓
+결과: 화면 크기 변해도 모든 컴포넌트 위치 고정
+```
+
+#### 변경 후
+
+```
+화면 로드
+  ↓
+screen_layouts_v2에서 components 조회
+  ↓
+layoutMode === "grid" 확인
+  ↓
+ResponsiveGridLayout으로 렌더링 (CSS Grid)
+  ↓
+각 컴포넌트를 grid.col, grid.colSpan으로 배치
+  ↓
+화면 크기 감지 (ResizeObserver)
+  ↓
+breakpoint에 따라 responsive.sm/md/lg 적용
+  ↓
+GridLayout 컴포넌트도 반응형으로 배치됨
+  ↓
+GridLayout 내부는 기존 CSS Grid로 zone 배치 (변경 없음)
+  ↓
+결과: 화면 크기에 따라 컴포넌트 재배치
+```
+
+---
+
+## 3. 기술 결정
+
+### 3.1 왜 Tailwind 동적 클래스가 아닌 CSS Grid + Inline Style인가?
+
+**Tailwind 동적 클래스의 한계**:
+```tsx
+// ❌ 이건 안 됨 - Tailwind가 빌드 타임에 인식 못함
+className={`col-start-${col} md:col-start-${mdCol}`}
+
+// ✅ 이것만 됨 - 정적 클래스
+className="col-start-1 md:col-start-3"
+```
+
+Tailwind는 **빌드 타임**에 클래스를 스캔하므로, 런타임에 동적으로 생성되는 클래스는 인식하지 못합니다.
+
+**해결책: CSS Grid + Inline Style + ResizeObserver**:
+```tsx
+// ✅ 올바른 방법
+<div style={{
+  display: 'grid',
+  gridTemplateColumns: 'repeat(12, 1fr)',
+}}>
+  <div style={{
+    gridColumn: `${col} / span ${colSpan}`,  // 동적 값 가능
+  }}>
+    {component}
+  </div>
+</div>
+```
+
+### 3.2 역할 분담
+
+| 영역 | 기술 | 설명 |
+|------|------|------|
+| **UI 컴포넌트** | shadcn/ui | 버튼, 인풋, 테이블 등 (이미 적용됨) |
+| **레이아웃 배치** | CSS Grid + Inline Style | 컴포넌트 위치, 크기, 반응형 |
+| **반응형 감지** | ResizeObserver | 화면 크기 감지 및 브레이크포인트 변경 |
+
+```
+┌─────────────────────────────────────────────────────────┐
+│  ResponsiveGridLayout (CSS Grid)                         │
+│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐        │
+│  │ shadcn      │ │ shadcn      │ │ shadcn      │        │
+│  │ Button      │ │ Input       │ │ Select      │        │
+│  └─────────────┘ └─────────────┘ └─────────────┘        │
+│  ┌─────────────────────────────────────────────┐        │
+│  │ shadcn Table                                 │        │
+│  └─────────────────────────────────────────────┘        │
+└─────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 4. 데이터 구조 변경
+
+### 4.1 현재 구조 (V2)
+
+```json
+{
+  "version": "2.0",
+  "components": [{
+    "id": "comp_xxx",
+    "url": "@/lib/registry/components/v2-button-primary",
+    "position": { "x": 1753, "y": 88, "z": 1 },
+    "size": { "width": 158, "height": 40 },
+    "overrides": { ... }
+  }]
+}
+```
+
+### 4.2 변경 후 구조 (V2 + 그리드)
+
+```json
+{
+  "version": "2.0",
+  "layoutMode": "grid",
+  "components": [{
+    "id": "comp_xxx",
+    "url": "@/lib/registry/components/v2-button-primary",
+    "position": { "x": 1753, "y": 88, "z": 1 },
+    "size": { "width": 158, "height": 40 },
+    "grid": {
+      "col": 11,
+      "row": 2,
+      "colSpan": 1,
+      "rowSpan": 1
+    },
+    "responsive": {
+      "sm": { "col": 1, "colSpan": 12 },
+      "md": { "col": 7, "colSpan": 6 },
+      "lg": { "col": 11, "colSpan": 1 }
+    },
+    "overrides": { ... }
+  }],
+  "gridSettings": {
+    "columns": 12,
+    "rowHeight": 80,
+    "gap": 16
+  }
+}
+```
+
+### 4.3 필드 설명
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| `layoutMode` | string | "grid" (반응형 그리드 사용) |
+| `grid.col` | number | 시작 컬럼 (1-12) |
+| `grid.row` | number | 시작 행 (1부터) |
+| `grid.colSpan` | number | 차지하는 컬럼 수 |
+| `grid.rowSpan` | number | 차지하는 행 수 |
+| `responsive.sm` | object | 모바일 (< 768px) 설정 |
+| `responsive.md` | object | 태블릿 (768px ~ 1024px) 설정 |
+| `responsive.lg` | object | 데스크톱 (> 1024px) 설정 |
+
+### 4.4 호환성
+
+- `position`, `size` 필드는 유지 (디자인 모드 + 폴백용)
+- `layoutMode`가 없으면 기존 방식(absolute) 사용
+- 마이그레이션 후에도 기존 화면 정상 동작
+
+---
+
+## 5. 구현 상세
+
+### 5.1 그리드 변환 유틸리티
+
+```typescript
+// frontend/lib/utils/gridConverter.ts
+
+const DESIGN_WIDTH = 1920;
+const COLUMNS = 12;
+const COLUMN_WIDTH = DESIGN_WIDTH / COLUMNS; // 160px
+const ROW_HEIGHT = 80;
+
+/**
+ * 픽셀 좌표를 그리드 셀 번호로 변환
+ */
+export function pixelToGrid(
+  position: { x: number; y: number },
+  size: { width: number; height: number }
+): GridPosition {
+  return {
+    col: Math.max(1, Math.min(12, Math.round(position.x / COLUMN_WIDTH) + 1)),
+    row: Math.max(1, Math.round(position.y / ROW_HEIGHT) + 1),
+    colSpan: Math.max(1, Math.round(size.width / COLUMN_WIDTH)),
+    rowSpan: Math.max(1, Math.round(size.height / ROW_HEIGHT)),
+  };
+}
+
+/**
+ * 기본 반응형 설정 생성
+ */
+export function getDefaultResponsive(grid: GridPosition): ResponsiveConfig {
+  return {
+    sm: { col: 1, colSpan: 12 },                    // 모바일: 전체 너비
+    md: { 
+      col: Math.max(1, Math.round(grid.col / 2)),
+      colSpan: Math.min(grid.colSpan * 2, 12) 
+    },                                               // 태블릿: 2배 확장
+    lg: { col: grid.col, colSpan: grid.colSpan },   // 데스크톱: 원본
+  };
+}
+```
+
+### 5.2 반응형 그리드 레이아웃 컴포넌트
+
+```tsx
+// frontend/lib/registry/layouts/responsive-grid/ResponsiveGridLayout.tsx
+
+import React, { useRef, useState, useEffect } from "react";
+
+type Breakpoint = "sm" | "md" | "lg";
+
+interface ResponsiveGridLayoutProps {
+  layout: LayoutData;
+  isDesignMode: boolean;
+  renderer: ComponentRenderer;
+}
+
+export function ResponsiveGridLayout({
+  layout,
+  isDesignMode,
+  renderer,
+}: ResponsiveGridLayoutProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>("lg");
+
+  // 화면 크기 감지
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width;
+      if (width < 768) setBreakpoint("sm");
+      else if (width < 1024) setBreakpoint("md");
+      else setBreakpoint("lg");
+    });
+
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const gridSettings = layout.gridSettings || { columns: 12, rowHeight: 80, gap: 16 };
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(${gridSettings.columns}, 1fr)`,
+        gridAutoRows: `${gridSettings.rowHeight}px`,
+        gap: `${gridSettings.gap}px`,
+        minHeight: isDesignMode ? "600px" : "auto",
+      }}
+    >
+      {layout.components
+        .sort((a, b) => (a.grid?.row || 0) - (b.grid?.row || 0))
+        .map((component) => {
+          // 반응형 설정 가져오기
+          const gridConfig = component.responsive?.[breakpoint] || component.grid;
+          const { col, colSpan } = gridConfig;
+          const rowSpan = component.grid?.rowSpan || 1;
+
+          return (
+            <div
+              key={component.id}
+              style={{
+                gridColumn: `${col} / span ${colSpan}`,
+                gridRow: `span ${rowSpan}`,
+              }}
+            >
+              {renderer.renderChild(component)}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+```
+
+### 5.3 브레이크포인트 훅
+
+```typescript
+// frontend/lib/registry/layouts/responsive-grid/useBreakpoint.ts
+
+import { useState, useEffect, RefObject } from "react";
+
+type Breakpoint = "sm" | "md" | "lg";
+
+export function useBreakpoint(containerRef: RefObject<HTMLElement>): Breakpoint {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>("lg");
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width;
+      if (width < 768) setBreakpoint("sm");
+      else if (width < 1024) setBreakpoint("md");
+      else setBreakpoint("lg");
+    });
+
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [containerRef]);
+
+  return breakpoint;
+}
+```
+
+### 5.4 분할 패널 반응형 수정
+
+```tsx
+// frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+
+// 추가할 코드
+const containerRef = useRef<HTMLDivElement>(null);
+const [isMobile, setIsMobile] = useState(false);
+
+useEffect(() => {
+  if (!containerRef.current) return;
+
+  const observer = new ResizeObserver((entries) => {
+    const width = entries[0].contentRect.width;
+    setIsMobile(width < 768);
+  });
+
+  observer.observe(containerRef.current);
+  return () => observer.disconnect();
+}, []);
+
+// 렌더링 부분 수정
+return (
+  <div
+    ref={containerRef}
+    className={cn(
+      "flex h-full",
+      isMobile ? "flex-col" : "flex-row"  // 모바일: 상하, 데스크톱: 좌우
+    )}
+  >
+    <div style={{ 
+      width: isMobile ? "100%" : `${leftWidth}%`,
+      minHeight: isMobile ? "300px" : "auto"
+    }}>
+      {/* 좌측/상단 패널 */}
+    </div>
+    <div style={{ 
+      width: isMobile ? "100%" : `${100 - leftWidth}%`,
+      minHeight: isMobile ? "300px" : "auto"
+    }}>
+      {/* 우측/하단 패널 */}
+    </div>
+  </div>
+);
+```
+
+---
+
+## 6. 렌더링 분기 처리
+
+```typescript
+// frontend/lib/registry/DynamicComponentRenderer.tsx
+
+function renderLayout(layout: LayoutData) {
+  // layoutMode에 따라 분기
+  if (layout.layoutMode === "grid") {
+    return <ResponsiveGridLayout layout={layout} renderer={this} />;
+  }
+  
+  // 기존 방식 (폴백)
+  return <FlexboxLayout layout={layout} renderer={this} />;
+}
+```
+
+---
+
+## 7. 마이그레이션
+
+### 7.1 백업
+
+```sql
+-- 마이그레이션 전 백업
+CREATE TABLE screen_layouts_v2_backup_20260130 AS 
+SELECT * FROM screen_layouts_v2;
+```
+
+### 7.2 마이그레이션 스크립트
+
+```sql
+-- grid, responsive 필드 추가
+UPDATE screen_layouts_v2
+SET layout_data = (
+  SELECT jsonb_set(
+    jsonb_set(
+      layout_data,
+      '{layoutMode}',
+      '"grid"'
+    ),
+    '{components}',
+    (
+      SELECT jsonb_agg(
+        comp || jsonb_build_object(
+          'grid', jsonb_build_object(
+            'col', GREATEST(1, LEAST(12, ROUND((comp->'position'->>'x')::NUMERIC / 160) + 1)),
+            'row', GREATEST(1, ROUND((comp->'position'->>'y')::NUMERIC / 80) + 1),
+            'colSpan', GREATEST(1, ROUND((comp->'size'->>'width')::NUMERIC / 160)),
+            'rowSpan', GREATEST(1, ROUND((comp->'size'->>'height')::NUMERIC / 80))
+          ),
+          'responsive', jsonb_build_object(
+            'sm', jsonb_build_object('col', 1, 'colSpan', 12),
+            'md', jsonb_build_object(
+              'col', GREATEST(1, ROUND((ROUND((comp->'position'->>'x')::NUMERIC / 160) + 1) / 2.0)),
+              'colSpan', LEAST(ROUND((comp->'size'->>'width')::NUMERIC / 160) * 2, 12)
+            ),
+            'lg', jsonb_build_object(
+              'col', GREATEST(1, LEAST(12, ROUND((comp->'position'->>'x')::NUMERIC / 160) + 1)),
+              'colSpan', GREATEST(1, ROUND((comp->'size'->>'width')::NUMERIC / 160))
+            )
+          )
+        )
+      )
+      FROM jsonb_array_elements(layout_data->'components') as comp
+    )
+  )
+);
+```
+
+### 7.3 롤백
+
+```sql
+-- 문제 발생 시 롤백
+DROP TABLE screen_layouts_v2;
+ALTER TABLE screen_layouts_v2_backup_20260130 RENAME TO screen_layouts_v2;
+```
+
+---
+
+## 8. 동작 흐름
+
+### 8.1 데스크톱 (> 1024px)
+
+```
+┌────────────────────────────────────────────────────────────┐
+│ 1  2  3  4  5  6  7  8  9  10 │ 11    12 │                 │
+│                               │ [버튼]   │                 │
+├────────────────────────────────────────────────────────────┤
+│                                                             │
+│                      테이블 (12컬럼)                         │
+│                                                             │
+└────────────────────────────────────────────────────────────┘
+```
+
+### 8.2 태블릿 (768px ~ 1024px)
+
+```
+┌─────────────────────────────────────┐
+│ 1  2  3  4  5  6 │ 7  8  9 10 11 12 │
+│                  │ [버튼]           │
+├─────────────────────────────────────┤
+│                                      │
+│           테이블 (12컬럼)             │
+│                                      │
+└─────────────────────────────────────┘
+```
+
+### 8.3 모바일 (< 768px)
+
+```
+┌──────────────────┐
+│ [버튼]           │ ← 12컬럼 (전체 너비)
+├──────────────────┤
+│                   │
+│  테이블 (스크롤)   │ ← 12컬럼 (전체 너비)
+│                   │
+└──────────────────┘
+```
+
+### 8.4 분할 패널 (반응형)
+
+**데스크톱**:
+```
+┌─────────────────────────┬─────────────────────────┐
+│   좌측 패널 (60%)        │   우측 패널 (40%)        │
+└─────────────────────────┴─────────────────────────┘
+```
+
+**모바일**:
+```
+┌─────────────────────────┐
+│   상단 패널 (이전 좌측)   │
+├─────────────────────────┤
+│   하단 패널 (이전 우측)   │
+└─────────────────────────┘
+```
+
+---
+
+## 9. 수정 파일 목록
+
+### 9.1 새로 생성
+
+| 파일 | 설명 |
+|------|------|
+| `lib/utils/gridConverter.ts` | 픽셀 → 그리드 변환 유틸리티 |
+| `lib/registry/layouts/responsive-grid/ResponsiveGridLayout.tsx` | CSS Grid 레이아웃 |
+| `lib/registry/layouts/responsive-grid/useBreakpoint.ts` | ResizeObserver 훅 |
+| `lib/registry/layouts/responsive-grid/index.ts` | 모듈 export |
+
+### 9.2 수정
+
+| 파일 | 수정 내용 |
+|------|-----------|
+| `lib/registry/DynamicComponentRenderer.tsx` | layoutMode 분기 추가 |
+| `components/screen/ScreenDesigner.tsx` | 저장 시 grid/responsive 생성 |
+| `v2-split-panel-layout/SplitPanelLayoutComponent.tsx` | 반응형 처리 추가 |
+
+### 9.3 수정 없음
+
+| 파일 | 이유 |
+|------|------|
+| `v2-input/*` | 레이아웃과 무관 (shadcn 그대로) |
+| `v2-button-primary/*` | 레이아웃과 무관 (shadcn 그대로) |
+| `v2-table-list/*` | 레이아웃과 무관 (shadcn 그대로) |
+| `v2-select/*` | 레이아웃과 무관 (shadcn 그대로) |
+| **...모든 v2 컴포넌트** | **수정 불필요** |
+
+---
+
+## 10. 작업 일정
+
+| Phase | 작업 | 파일 | 시간 |
+|-------|------|------|------|
+| **1** | 그리드 변환 유틸리티 | `gridConverter.ts` | 2시간 |
+| **1** | 브레이크포인트 훅 | `useBreakpoint.ts` | 1시간 |
+| **2** | ResponsiveGridLayout | `ResponsiveGridLayout.tsx` | 4시간 |
+| **2** | 렌더링 분기 처리 | `DynamicComponentRenderer.tsx` | 1시간 |
+| **3** | 저장 로직 수정 | `ScreenDesigner.tsx` | 2시간 |
+| **3** | 분할 패널 반응형 | `SplitPanelLayoutComponent.tsx` | 3시간 |
+| **4** | 마이그레이션 스크립트 | SQL | 2시간 |
+| **4** | 마이그레이션 실행 | - | 1시간 |
+| **5** | 테스트 및 버그 수정 | - | 4시간 |
+| | **합계** | | **약 2.5일** |
+
+---
+
+## 11. 체크리스트
+
+### 개발 전
+
+- [ ] screen_layouts_v2 백업 완료
+- [ ] 개발 환경에서 테스트 데이터 준비
+
+### Phase 1: 유틸리티
+
+- [ ] `gridConverter.ts` 생성
+- [ ] `useBreakpoint.ts` 생성
+- [ ] 단위 테스트 작성
+
+### Phase 2: 레이아웃
+
+- [ ] `ResponsiveGridLayout.tsx` 생성
+- [ ] `DynamicComponentRenderer.tsx` 분기 추가
+- [ ] 기존 화면 정상 동작 확인
+
+### Phase 3: 저장/수정
+
+- [ ] `ScreenDesigner.tsx` 저장 로직 수정
+- [ ] `SplitPanelLayoutComponent.tsx` 반응형 추가
+- [ ] 디자인 모드 테스트
+
+### Phase 4: 마이그레이션
+
+- [ ] 마이그레이션 스크립트 테스트 (개발 DB)
+- [ ] 운영 DB 백업
+- [ ] 마이그레이션 실행
+- [ ] 검증
+
+### Phase 5: 테스트
+
+- [ ] PC (1920px, 1280px) 테스트
+- [ ] 태블릿 (768px, 1024px) 테스트
+- [ ] 모바일 (375px, 414px) 테스트
+- [ ] 분할 패널 화면 테스트
+- [ ] GridLayout 컴포넌트 포함 화면 테스트
+- [ ] FlexboxLayout 컴포넌트 포함 화면 테스트
+- [ ] TabsLayout 컴포넌트 포함 화면 테스트
+- [ ] 중첩 레이아웃 (GridLayout 안에 컴포넌트) 테스트
+
+---
+
+## 12. 리스크 및 대응
+
+| 리스크 | 영향 | 대응 |
+|--------|------|------|
+| 마이그레이션 실패 | 높음 | 백업 테이블에서 즉시 롤백 |
+| 기존 화면 깨짐 | 중간 | `layoutMode` 없으면 기존 방식 사용 (폴백) |
+| 디자인 모드 혼란 | 낮음 | position/size 필드 유지 |
+| GridLayout 내부 깨짐 | 낮음 | 내부는 기존 방식 유지, 외부 배치만 변경 |
+| 중첩 레이아웃 문제 | 낮음 | 각 레이아웃 컴포넌트는 독립적으로 동작 |
+
+---
+
+## 13. 참고
+
+- [COMPONENT_LAYOUT_V2_ARCHITECTURE.md](./COMPONENT_LAYOUT_V2_ARCHITECTURE.md) - V2 아키텍처
+- [CSS Grid Layout - MDN](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout)
+- [ResizeObserver - MDN](https://developer.mozilla.org/ko/docs/Web/API/ResizeObserver)
+- [shadcn/ui](https://ui.shadcn.com/) - 컴포넌트 라이브러리
diff --git a/docs/DDD1542/V2_마이그레이션_학습노트_DDD1542.md b/docs/DDD1542/V2_마이그레이션_학습노트_DDD1542.md
new file mode 100644
index 00000000..801fb213
--- /dev/null
+++ b/docs/DDD1542/V2_마이그레이션_학습노트_DDD1542.md
@@ -0,0 +1,399 @@
+# V2 마이그레이션 학습노트 (DDD1542 전용)
+
+> **목적**: 마이그레이션 작업 전 완벽한 이해를 위한 개인 학습노트
+> **작성일**: 2026-02-03
+> **절대 규칙**: 모르면 물어보기, 추측 금지
+
+---
+
+## 1. 가장 중요한 핵심 (이전 신하가 실패한 이유)
+
+### 1.1 "component" vs "v2-input" 차이
+
+```
+[잘못된 상태]              [올바른 상태]
+┌──────────────────┐      ┌──────────────────┐
+│ component        │      │ v2-input         │
+│ 업체코드         │      │ 업체코드         │
+│ "자동 생성됩니다" │      │ "자동 생성됩니다" │
+└──────────────────┘      └──────────────────┘
+    ↑                         ↑
+    테이블-컬럼 연결 없음        table_name + column_name 연결됨
+```
+
+**핵심**: 컬럼을 왼쪽 패널에서 **드래그**해야 올바른 연결이 생성됨
+
+### 1.2 올바른 컴포넌트 생성 방법
+
+```
+[왼쪽 패널: 테이블 컬럼 목록]
+운송업체 (8개)
+├── 업체코드 [numbering]  ─드래그→  화면 캔버스  →  v2-numbering-rule (또는 v2-input)
+├── 업체명 [text]         ─드래그→  화면 캔버스  →  v2-input
+├── 유형 [category]       ─드래그→  화면 캔버스  →  v2-select
+├── 연락처 [text]         ─드래그→  화면 캔버스  →  v2-input
+└── ...
+```
+
+### 1.3 input_type → V2 컴포넌트 매핑
+
+| table_type_columns.input_type | V2 컴포넌트 | 연동 테이블 |
+|-------------------------------|-------------|-------------|
+| text | v2-input | - |
+| number | v2-input (type=number) | - |
+| date | v2-date | - |
+| category | v2-select | category_values |
+| numbering | v2-numbering-rule 또는 v2-input | numbering_rules |
+| entity | v2-entity-search | 엔티티 조인 |
+
+---
+
+## 2. V1 vs V2 구조 차이
+
+### 2.1 테이블 구조
+
+```
+V1 (본서버: screen_layouts)          V2 (개발서버: screen_layouts_v2)
+──────────────────────────────────────────────────────────────────
+- 컴포넌트별 1개 레코드              - 화면당 1개 레코드
+- properties JSONB                   - layout_data JSONB
+- component_type VARCHAR             - url (컴포넌트 경로)
+- menu_objid 기반 채번/카테고리      - table_name + column_name 기반
+```
+
+### 2.2 V2 layout_data 구조
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_xxx",
+      "url": "@/lib/registry/components/v2-table-list",
+      "position": { "x": 0, "y": 0 },
+      "size": { "width": 100, "height": 50 },
+      "displayOrder": 0,
+      "overrides": {
+        "tableName": "inspection_standard",
+        "columns": ["id", "name", "status"]
+      }
+    }
+  ],
+  "updatedAt": "2026-02-03T12:00:00Z"
+}
+```
+
+### 2.3 컴포넌트 URL 매핑
+
+```typescript
+const V1_TO_V2_URL_MAPPING = {
+  'table-list':          '@/lib/registry/components/v2-table-list',
+  'button-primary':      '@/lib/registry/components/v2-button-primary',
+  'text-input':          '@/lib/registry/components/v2-input',
+  'select-basic':        '@/lib/registry/components/v2-select',
+  'date-input':          '@/lib/registry/components/v2-date',
+  'entity-search-input': '@/lib/registry/components/v2-entity-search',
+  'category-manager':    '@/lib/registry/components/v2-category-manager',
+  'numbering-rule':      '@/lib/registry/components/v2-numbering-rule',
+  'tabs-widget':         '@/lib/registry/components/v2-tabs-widget',
+  'split-panel-layout':  '@/lib/registry/components/v2-split-panel-layout',
+};
+```
+
+---
+
+## 3. 데이터 타입 관리 (V2)
+
+### 3.1 핵심 테이블 관계
+
+```
+table_type_columns (컬럼 타입 정의)
+├── input_type = 'category'  → category_values (table_name + column_name)
+├── input_type = 'numbering' → numbering_rules (detail_settings.numberingRuleId)
+├── input_type = 'entity'    → 엔티티 조인
+└── input_type = 'text', 'number', 'date', etc.
+```
+
+### 3.2 category_values 조회 쿼리
+
+```sql
+-- 특정 테이블.컬럼의 카테고리 값 조회
+SELECT value_id, value_code, value_label, parent_value_id, depth
+FROM category_values
+WHERE table_name = '테이블명'
+  AND column_name = '컬럼명'
+  AND company_code = 'COMPANY_7'
+ORDER BY value_order;
+```
+
+### 3.3 numbering_rules 연결 방식
+
+```json
+// table_type_columns.detail_settings
+{
+  "numberingRuleId": "rule-xxx"
+}
+
+// numbering_rules에서 해당 rule 조회
+SELECT * FROM numbering_rules WHERE rule_id = 'rule-xxx';
+```
+
+---
+
+## 4. V2 컴포넌트 목록 (23개)
+
+### 4.1 입력 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| v2-input | 입력 | 텍스트, 숫자, 비밀번호, 이메일 |
+| v2-select | 선택 | 드롭다운, 라디오, 체크박스 |
+| v2-date | 날짜 | 날짜, 시간, 날짜범위 |
+
+### 4.2 표시 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| v2-text-display | 텍스트 표시 | 라벨, 제목 |
+| v2-card-display | 카드 디스플레이 | 카드 형태 데이터 |
+| v2-aggregation-widget | 집계 위젯 | 합계, 평균, 개수 |
+
+### 4.3 테이블/데이터 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| v2-table-list | 테이블 리스트 | 데이터 그리드 |
+| v2-table-search-widget | 검색 필터 | 테이블 검색 |
+| v2-pivot-grid | 피벗 그리드 | 다차원 분석 |
+| v2-table-grouped | 그룹화 테이블 | 그룹별 접기/펼치기 |
+
+### 4.4 레이아웃 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| v2-split-panel-layout | 분할 패널 | 마스터-디테일 |
+| v2-tabs-widget | 탭 위젯 | 탭 전환 |
+| v2-section-card | 섹션 카드 | 제목+테두리 그룹 |
+| v2-section-paper | 섹션 페이퍼 | 배경색 그룹 |
+| v2-divider-line | 구분선 | 영역 구분 |
+| v2-repeat-container | 리피터 컨테이너 | 데이터 반복 |
+| v2-unified-repeater | 통합 리피터 | 인라인/모달/버튼 |
+
+### 4.5 액션/특수 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| v2-button-primary | 기본 버튼 | 저장, 삭제 등 |
+| v2-numbering-rule | 채번 규칙 | 자동 코드 생성 |
+| v2-category-manager | 카테고리 관리자 | 카테고리 관리 |
+| v2-location-swap-selector | 위치 교환 | 위치 선택 |
+| v2-rack-structure | 랙 구조 | 창고 랙 시각화 |
+
+---
+
+## 5. 화면 패턴 (5가지)
+
+### 5.1 패턴 A: 기본 마스터 화면
+
+```
+사용 조건: 단일 테이블 CRUD
+
+┌─────────────────────────────────────────────────┐
+│ v2-table-search-widget                          │
+├─────────────────────────────────────────────────┤
+│ v2-table-list                                   │
+│ [신규] [삭제] v2-button-primary                 │
+└─────────────────────────────────────────────────┘
+```
+
+### 5.2 패턴 B: 마스터-디테일 화면
+
+```
+사용 조건: 마스터 선택 → 디테일 표시
+
+┌──────────────────┬──────────────────────────────┐
+│ 마스터 리스트    │ 디테일 리스트                │
+│ v2-table-list    │ v2-table-list                │
+│                  │ (relation: foreignKey)       │
+└──────────────────┴──────────────────────────────┘
+          v2-split-panel-layout
+```
+
+**필수 설정:**
+```json
+{
+  "leftPanel": { "tableName": "master_table" },
+  "rightPanel": {
+    "tableName": "detail_table",
+    "relation": { "type": "detail", "foreignKey": "master_id" }
+  },
+  "splitRatio": 30
+}
+```
+
+### 5.3 패턴 C: 마스터-디테일 + 탭
+
+```
+┌──────────────────┬──────────────────────────────┐
+│ 마스터 리스트    │ v2-tabs-widget               │
+│ v2-table-list    │ ├─ 탭1: v2-table-list        │
+│                  │ ├─ 탭2: v2-table-list        │
+│                  │ └─ 탭3: 폼 컴포넌트들        │
+└──────────────────┴──────────────────────────────┘
+          v2-split-panel-layout
+```
+
+---
+
+## 6. 모달 처리 방식 변경
+
+### 6.1 V1 (본서버)
+
+```
+화면 A (screen_id: 142) - 검사장비관리
+    └── 버튼 클릭 → 화면 B (screen_id: 143) - 검사장비 등록모달 (별도 screen_id)
+```
+
+### 6.2 V2 (개발서버)
+
+```
+화면 A (screen_id: 142) - 검사장비관리
+    └── layout_data.components[] 내에 v2-dialog-form 또는 overlay 포함
+```
+
+**핵심**: V2에서는 모달을 별도 화면이 아닌, 부모 화면의 컴포넌트로 통합
+
+---
+
+## 7. 마이그레이션 절차 (Step by Step)
+
+### Step 1: 사전 분석
+
+```sql
+-- 본서버 화면 목록 확인
+SELECT sd.screen_id, sd.screen_code, sd.screen_name, sd.table_name,
+       COUNT(sl.layout_id) as component_count
+FROM screen_definitions sd
+LEFT JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sd.screen_code LIKE 'COMPANY_7_%'
+GROUP BY sd.screen_id, sd.screen_code, sd.screen_name, sd.table_name;
+
+-- 개발서버 V2 현황 확인
+SELECT sd.screen_id, sd.screen_code, sd.screen_name,
+       sv2.layout_data IS NOT NULL as has_v2_layout
+FROM screen_definitions sd
+LEFT JOIN screen_layouts_v2 sv2 ON sd.screen_id = sv2.screen_id
+WHERE sd.company_code = 'COMPANY_7';
+```
+
+### Step 2: table_type_columns 확인
+
+```sql
+-- 해당 테이블의 컬럼 타입 확인
+SELECT column_name, column_label, input_type, detail_settings
+FROM table_type_columns
+WHERE table_name = '대상테이블명'
+  AND company_code = 'COMPANY_7';
+```
+
+### Step 3: V2 layout_data 생성
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "생성된ID",
+      "url": "@/lib/registry/components/v2-컴포넌트타입",
+      "position": { "x": 0, "y": 0 },
+      "size": { "width": 100, "height": 50 },
+      "displayOrder": 0,
+      "overrides": {
+        "tableName": "테이블명",
+        "fieldName": "컬럼명"
+      }
+    }
+  ],
+  "migratedFrom": "V1",
+  "migratedAt": "2026-02-03T00:00:00Z"
+}
+```
+
+### Step 4: screen_layouts_v2 INSERT
+
+```sql
+INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data)
+VALUES ($1, $2, $3::jsonb)
+ON CONFLICT (screen_id, company_code) 
+DO UPDATE SET layout_data = $3::jsonb, updated_at = NOW();
+```
+
+### Step 5: 검증
+
+- [ ] 화면 렌더링 확인 (component가 아닌 v2-xxx로 표시되는지)
+- [ ] 컴포넌트별 테이블-컬럼 연결 확인
+- [ ] 카테고리 드롭다운 동작 확인
+- [ ] 채번 규칙 동작 확인
+- [ ] 저장/수정/삭제 테스트
+
+---
+
+## 8. 품질관리 메뉴 마이그레이션 현황
+
+| 본서버 코드 | 화면명 | 테이블 | 상태 | 비고 |
+|-------------|--------|--------|------|------|
+| COMPANY_7_126 | 검사정보 관리 | inspection_standard | ✅ V2 존재 | 컴포넌트 검증 필요 |
+| COMPANY_7_127 | 품목옵션 설정 | - | ✅ V2 존재 | v2-category-manager |
+| COMPANY_7_138 | 카테고리 설정 | inspection_standard | ❌ 누락 | table_name 기반 |
+| COMPANY_7_139 | 코드 설정 | inspection_standard | ❌ 누락 | table_name 기반 |
+| COMPANY_7_142 | 검사장비 관리 | inspection_equipment_mng | ❌ 누락 | 모달 통합 |
+| COMPANY_7_143 | 검사장비 등록모달 | inspection_equipment_mng | ❌ 누락 | → 142 통합 |
+| COMPANY_7_144 | 불량기준 정보 | defect_standard_mng | ❌ 누락 | 모달 통합 |
+| COMPANY_7_145 | 불량기준 등록모달 | defect_standard_mng | ❌ 누락 | → 144 통합 |
+
+---
+
+## 9. 관련 코드 파일 경로
+
+| 항목 | 경로 |
+|------|------|
+| V2 컴포넌트 폴더 | `frontend/lib/registry/components/v2-xxx/` |
+| 컴포넌트 등록 | `frontend/lib/registry/components/index.ts` |
+| 카테고리 서비스 | `backend-node/src/services/categoryTreeService.ts` |
+| 채번 서비스 | `backend-node/src/services/numberingRuleService.ts` |
+| 엔티티 조인 API | `frontend/lib/api/entityJoin.ts` |
+| 폼 호환성 훅 | `frontend/hooks/useFormCompatibility.ts` |
+
+---
+
+## 10. 절대 하지 말 것
+
+1. ❌ **테이블-컬럼 연결 없이 컴포넌트 배치** → "component"로 표시됨
+2. ❌ **menu_objid 기반 카테고리/채번 사용** → V2는 table_name + column_name 기반
+3. ❌ **모달을 별도 screen_id로 생성** → V2는 부모 화면에 통합
+4. ❌ **V1 컴포넌트 타입 사용** → 반드시 v2- 접두사 컴포넌트 사용
+5. ❌ **company_code 필터링 누락** → 멀티테넌시 필수
+
+---
+
+## 11. 모르면 확인할 곳
+
+1. **컴포넌트 구조**: `docs/V2_컴포넌트_분석_가이드.md`
+2. **화면 개발 표준**: `docs/screen-implementation-guide/화면개발_표준_가이드.md`
+3. **마이그레이션 절차**: `docs/DDD1542/본서버_개발서버_마이그레이션_상세가이드.md`
+4. **탑실 디자인 명세**: `/Users/gbpark/Downloads/화면개발 8/`
+5. **실제 코드**: 위 경로의 소스 파일들
+
+---
+
+## 12. 왕의 훈계
+
+> **"항상 애매한 거는 md파일 보거나 물어볼 것. 코드에는 전부 정답이 있음. 만약 모른다면 너 잘못. 실수해도 너 잘못."**
+
+---
+
+## 변경 이력
+
+| 날짜 | 작성자 | 내용 |
+|------|--------|------|
+| 2026-02-03 | DDD1542 | 초안 작성 (문서 4개 정독 후) |
diff --git a/docs/DDD1542/본서버_개발서버_마이그레이션_가이드.md b/docs/DDD1542/본서버_개발서버_마이그레이션_가이드.md
new file mode 100644
index 00000000..b7a0e353
--- /dev/null
+++ b/docs/DDD1542/본서버_개발서버_마이그레이션_가이드.md
@@ -0,0 +1,453 @@
+# 본서버 → 개발서버 마이그레이션 가이드 (공용)
+
+> **이 문서는 다음 AI 에이전트가 마이그레이션 작업을 이어받을 때 참고하는 핵심 가이드입니다.**
+
+---
+
+## 빠른 시작
+
+### 마이그레이션 방향 (절대 잊지 말 것)
+
+```
+본서버 (Production)  →  개발서버 (Development)
+211.115.91.141:11134     39.117.244.52:11132
+screen_layouts (V1)      screen_layouts_v2 (V2)
+```
+
+**반대로 하면 안 됨!** 개발서버 완성 후 → 본서버로 배포 예정
+
+### DB 접속 정보
+
+```bash
+# 본서버 (Production)
+docker exec pms-backend-mac node -e '
+const { Pool } = require("pg");
+const pool = new Pool({ 
+  connectionString: "postgresql://postgres:vexplor0909!!@211.115.91.141:11134/plm?sslmode=disable", 
+  ssl: false 
+});
+// 쿼리 실행
+'
+
+# 개발서버 (Development)
+docker exec pms-backend-mac node -e '
+const { Pool } = require("pg");
+const pool = new Pool({ 
+  connectionString: "postgresql://postgres:ph0909!!@39.117.244.52:11132/plm?sslmode=disable", 
+  ssl: false 
+});
+// 쿼리 실행
+'
+```
+
+---
+
+## 절대 주의: 컴포넌트-컬럼 연결 (이전 실패 원인)
+
+### "component" vs "v2-input" 구분
+
+```
+❌ 잘못된 상태                    ✅ 올바른 상태
+┌──────────────────┐              ┌──────────────────┐
+│ component        │              │ v2-input         │
+│ 업체코드         │              │ 업체코드         │
+└──────────────────┘              └──────────────────┘
+    ↑                                 ↑
+    overrides.type 없음               overrides.type = "v2-input"
+```
+
+**핵심 원인**: 컴포넌트를 그냥 배치하면 "component"로 표시됨. 반드시 왼쪽 패널에서 테이블 컬럼을 **드래그**해야 올바른 v2-xxx 컴포넌트가 생성됨.
+
+### 🔥 핵심 발견: overrides.type 필수 (2026-02-04 발견)
+
+**"component"로 표시되는 근본 원인:**
+
+| 항목 | 드래그로 배치 | 마이그레이션 (잘못된) |
+|------|---------------|----------------------|
+| `overrides.type` | **"v2-input"** ✅ | **없음** ❌ |
+| `overrides.webType` | "text" 등 | 없음 |
+| `overrides.tableName` | "carrier_mng" 등 | 없음 |
+
+**프론트엔드가 컴포넌트 타입을 인식하는 방법:**
+1. `overrides.type` 확인 → 있으면 해당 값 사용 (예: "v2-input")
+2. 없으면 → 기본값 "component"로 폴백
+
+**결론**: 마이그레이션 시 `overrides.type` 필드를 반드시 설정해야 함!
+
+### input_type → V2 컴포넌트 자동 매핑
+
+| table_type_columns.input_type | 드래그 시 생성되는 V2 컴포넌트 |
+|-------------------------------|-------------------------------|
+| text | v2-input |
+| number | v2-input (type=number) |
+| date | v2-date |
+| category | v2-select (category_values 연동) |
+| numbering | v2-numbering-rule 또는 v2-input |
+| entity | v2-entity-search |
+
+**절대 규칙**: 컴포넌트가 "component"로 표시되면 연결 실패 상태. 반드시 "v2-xxx"로 표시되어야 함.
+
+---
+
+## 핵심 개념
+
+### V1 vs V2 구조 차이
+
+| 구분 | V1 (본서버) | V2 (개발서버) |
+|------|-------------|---------------|
+| 테이블 | screen_layouts | screen_layouts_v2 |
+| 레코드 | 컴포넌트별 1개 | 화면당 1개 |
+| 설정 저장 | properties JSONB | layout_data.components[].overrides |
+| 채번/카테고리 | menu_objid 기반 | table_name + column_name 기반 |
+| 컴포넌트 참조 | component_type 문자열 | url 경로 (@/lib/registry/...) |
+
+### 데이터 타입 관리 (V2)
+
+```
+table_type_columns (input_type)
+├── 'category' → category_values 테이블
+├── 'numbering' → numbering_rules 테이블 (detail_settings.numberingRuleId)
+├── 'entity' → 엔티티 검색
+└── 'text', 'number', 'date', etc.
+```
+
+### 컴포넌트 URL 매핑
+
+```typescript
+const V1_TO_V2_MAPPING = {
+  'table-list': '@/lib/registry/components/v2-table-list',
+  'button-primary': '@/lib/registry/components/v2-button-primary',
+  'text-input': '@/lib/registry/components/v2-text-input',
+  'select-basic': '@/lib/registry/components/v2-select',
+  'date-input': '@/lib/registry/components/v2-date-input',
+  'entity-search-input': '@/lib/registry/components/v2-entity-search',
+  'category-manager': '@/lib/registry/components/v2-category-manager',
+  'numbering-rule': '@/lib/registry/components/v2-numbering-rule',
+  'tabs-widget': '@/lib/registry/components/v2-tabs-widget',
+  'textarea-basic': '@/lib/registry/components/v2-textarea',
+};
+```
+
+### 모달 처리 방식 변경
+
+- **V1**: 별도 화면(screen_id)으로 모달 관리
+- **V2**: 부모 화면에 overlay/dialog 컴포넌트로 통합
+
+---
+
+## 마이그레이션 대상 메뉴 현황
+
+### 품질관리 (우선순위 1)
+
+| 본서버 코드 | 화면명 | 상태 | 비고 |
+|-------------|--------|------|------|
+| COMPANY_7_126 | 검사정보 관리 | ✅ V2 존재 | 컴포넌트 검증 필요 |
+| COMPANY_7_127 | 품목옵션 설정 | ✅ V2 존재 | v2-category-manager 사용중 |
+| COMPANY_7_138 | 카테고리 설정 | ❌ 누락 | table_name 기반으로 변경 |
+| COMPANY_7_139 | 코드 설정 | ❌ 누락 | table_name 기반으로 변경 |
+| COMPANY_7_142 | 검사장비 관리 | ❌ 누락 | 모달 통합 필요 |
+| COMPANY_7_143 | 검사장비 등록모달 | ❌ 누락 | → 142에 통합 |
+| COMPANY_7_144 | 불량기준 정보 | ❌ 누락 | 모달 통합 필요 |
+| COMPANY_7_145 | 불량기준 등록모달 | ❌ 누락 | → 144에 통합 |
+
+### 다음 마이그레이션 대상 (미정)
+
+- [ ] 물류관리
+- [ ] 생산관리
+- [ ] 영업관리
+- [ ] 기타 메뉴들
+
+---
+
+## 마이그레이션 작업 절차
+
+### Step 1: 분석
+
+```sql
+-- 본서버 특정 메뉴 화면 목록 조회
+SELECT 
+  sd.screen_id, sd.screen_code, sd.screen_name, sd.table_name,
+  COUNT(sl.layout_id) as component_count
+FROM screen_definitions sd
+LEFT JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sd.screen_name LIKE '%[메뉴명]%'
+  AND sd.company_code = 'COMPANY_7'
+GROUP BY sd.screen_id, sd.screen_code, sd.screen_name, sd.table_name;
+
+-- 개발서버 V2 현황 확인
+SELECT 
+  sd.screen_id, sd.screen_code, sd.screen_name,
+  sv2.layout_id IS NOT NULL as has_v2
+FROM screen_definitions sd
+LEFT JOIN screen_layouts_v2 sv2 ON sd.screen_id = sv2.screen_id
+WHERE sd.company_code = 'COMPANY_7';
+```
+
+### Step 2: screen_definitions 동기화
+
+본서버에만 있는 화면을 개발서버에 추가
+
+### Step 3: V1 → V2 레이아웃 변환
+
+```typescript
+// layout_data 구조
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_xxx",
+      "url": "@/lib/registry/components/v2-table-list",
+      "position": { "x": 0, "y": 0 },
+      "size": { "width": 100, "height": 50 },
+      "displayOrder": 0,
+      "overrides": {
+        "tableName": "테이블명",
+        "columns": ["컬럼1", "컬럼2"]
+      }
+    }
+  ]
+}
+```
+
+### Step 4: 카테고리 데이터 확인/생성
+
+```sql
+-- 테이블의 category 컬럼 확인
+SELECT column_name, column_label
+FROM table_type_columns
+WHERE table_name = '[테이블명]'
+  AND input_type = 'category';
+
+-- category_values 데이터 확인
+SELECT value_id, value_code, value_label
+FROM category_values
+WHERE table_name = '[테이블명]'
+  AND column_name = '[컬럼명]'
+  AND company_code = 'COMPANY_7';
+```
+
+### Step 5: 채번 규칙 확인/생성
+
+```sql
+-- numbering 컬럼 확인
+SELECT column_name, column_label, detail_settings
+FROM table_type_columns
+WHERE table_name = '[테이블명]'
+  AND input_type = 'numbering';
+
+-- numbering_rules 데이터 확인
+SELECT rule_id, rule_name, table_name, column_name
+FROM numbering_rules
+WHERE company_code = 'COMPANY_7';
+```
+
+### Step 6: 검증
+
+- [ ] 화면 렌더링 확인
+- [ ] 컴포넌트 동작 확인
+- [ ] 저장/수정/삭제 테스트
+- [ ] 카테고리 드롭다운 동작
+- [ ] 채번 규칙 동작
+
+---
+
+## 핵심 테이블 스키마
+
+### screen_layouts_v2
+
+```sql
+CREATE TABLE screen_layouts_v2 (
+  layout_id SERIAL PRIMARY KEY,
+  screen_id INTEGER NOT NULL,
+  company_code VARCHAR(20) NOT NULL,
+  layout_data JSONB NOT NULL DEFAULT '{}'::jsonb,
+  created_at TIMESTAMPTZ DEFAULT NOW(),
+  updated_at TIMESTAMPTZ DEFAULT NOW(),
+  UNIQUE(screen_id, company_code)
+);
+```
+
+### category_values
+
+```sql
+-- 핵심 컬럼
+value_id, table_name, column_name, value_code, value_label,
+parent_value_id, depth, path, company_code
+```
+
+### numbering_rules + numbering_rule_parts
+
+```sql
+-- numbering_rules 핵심 컬럼
+rule_id, rule_name, table_name, column_name, separator,
+reset_period, current_sequence, company_code
+
+-- numbering_rule_parts 핵심 컬럼
+rule_id, part_order, part_type, generation_method,
+auto_config, manual_config, company_code
+```
+
+### table_type_columns
+
+```sql
+-- 핵심 컬럼
+table_name, column_name, input_type, column_label,
+detail_settings, company_code
+```
+
+---
+
+## 참고 문서
+
+### 필수 읽기
+
+1. **[본서버_개발서버_마이그레이션_상세가이드.md](./본서버_개발서버_마이그레이션_상세가이드.md)** - 상세 마이그레이션 절차
+2. **[화면개발_표준_가이드.md](../screen-implementation-guide/화면개발_표준_가이드.md)** - V2 화면 개발 표준
+3. **[SCREEN_DEVELOPMENT_STANDARD.md](../screen-implementation-guide/SCREEN_DEVELOPMENT_STANDARD.md)** - 영문 표준 가이드
+
+### 코드 참조
+
+| 파일 | 설명 |
+|------|------|
+| `backend-node/src/services/categoryTreeService.ts` | 카테고리 관리 서비스 |
+| `backend-node/src/services/numberingRuleService.ts` | 채번 규칙 서비스 |
+| `frontend/lib/registry/components/v2-category-manager/` | V2 카테고리 컴포넌트 |
+| `frontend/lib/registry/components/v2-numbering-rule/` | V2 채번 컴포넌트 |
+
+### 관련 문서
+
+- `docs/V2_컴포넌트_분석_가이드.md`
+- `docs/V2_컴포넌트_연동_가이드.md`
+- `docs/DDD1542/COMPONENT_LAYOUT_V2_ARCHITECTURE.md`
+- `docs/DDD1542/COMPONENT_MIGRATION_PLAN.md`
+
+---
+
+## 주의사항
+
+### 절대 하지 말 것
+
+1. **개발서버 → 본서버 마이그레이션** (반대 방향)
+2. **본서버 데이터 직접 수정** (SELECT만 허용)
+3. **company_code 누락** (멀티테넌시 필수)
+4. **테이블-컬럼 연결 없이 컴포넌트 배치** ("component"로 표시되면 실패)
+5. **menu_objid 기반 카테고리/채번 사용** (V2는 table_name + column_name 기반)
+
+### 반드시 할 것
+
+1. 마이그레이션 전 **개발서버 백업**
+2. 컴포넌트 변환 시 **V2 컴포넌트만 사용** (v2- prefix)
+3. 모달 화면은 **부모 화면에 통합**
+4. 카테고리/채번은 **table_name + column_name 기반**
+5. 컴포넌트 배치 후 **"v2-xxx"로 표시되는지 반드시 확인**
+
+### 실패 사례 (이전 작업자)
+
+**물류정보관리 → 운송업체 관리 마이그레이션 실패**
+
+- **원인**: 컴포넌트를 직접 배치하여 "component"로 생성됨
+- **증상**: 화면에 "component" 라벨 표시, 데이터 바인딩 실패
+- **해결**: 왼쪽 패널에서 테이블 컬럼을 드래그하여 "v2-input" 등으로 생성
+
+---
+
+## 🔧 일괄 수정 SQL (overrides.type 누락 문제)
+
+### 문제 진단 쿼리
+
+```sql
+-- overrides.type이 없는 컴포넌트 수 확인
+SELECT 
+  COUNT(DISTINCT sv2.screen_id) as affected_screens,
+  COUNT(*) as affected_components
+FROM screen_layouts_v2 sv2, 
+     jsonb_array_elements(sv2.layout_data->'components') as comp
+WHERE (comp->>'url' LIKE '%/v2-input' 
+       OR comp->>'url' LIKE '%/v2-select' 
+       OR comp->>'url' LIKE '%/v2-date')
+  AND NOT (comp->'overrides' ? 'type');
+```
+
+### 일괄 수정 쿼리 (개발서버에서만!)
+
+```sql
+UPDATE screen_layouts_v2 
+SET layout_data = jsonb_set(
+  layout_data,
+  '{components}',
+  (
+    SELECT jsonb_agg(
+      CASE 
+        WHEN comp->>'url' LIKE '%/v2-input' AND NOT (comp->'overrides' ? 'type')
+        THEN jsonb_set(comp, '{overrides,type}', '"v2-input"')
+        WHEN comp->>'url' LIKE '%/v2-select' AND NOT (comp->'overrides' ? 'type')
+        THEN jsonb_set(comp, '{overrides,type}', '"v2-select"')
+        WHEN comp->>'url' LIKE '%/v2-date' AND NOT (comp->'overrides' ? 'type')
+        THEN jsonb_set(comp, '{overrides,type}', '"v2-date"')
+        WHEN comp->>'url' LIKE '%/v2-textarea' AND NOT (comp->'overrides' ? 'type')
+        THEN jsonb_set(comp, '{overrides,type}', '"v2-textarea"')
+        ELSE comp
+      END
+    )
+    FROM jsonb_array_elements(layout_data->'components') comp
+  )
+),
+updated_at = NOW()
+WHERE EXISTS (
+  SELECT 1 FROM jsonb_array_elements(layout_data->'components') c
+  WHERE (c->>'url' LIKE '%/v2-input' OR c->>'url' LIKE '%/v2-select' 
+         OR c->>'url' LIKE '%/v2-date' OR c->>'url' LIKE '%/v2-textarea')
+    AND NOT (c->'overrides' ? 'type')
+);
+```
+
+### 2026-02-04 일괄 수정 실행 결과
+
+| 항목 | 수량 |
+|------|------|
+| 수정된 화면 | 397개 |
+| 수정된 컴포넌트 | 2,455개 |
+| v2-input | 1,983개 |
+| v2-select | 336개 |
+| v2-date | 136개 |
+
+---
+
+## 마이그레이션 진행 로그
+
+| 날짜 | 메뉴 | 담당 | 상태 | 비고 |
+|------|------|------|------|------|
+| 2026-02-03 | 품질관리 | DDD1542 | 분석 완료 | 마이그레이션 대기 |
+| 2026-02-03 | 물류관리 (운송업체) | 이전 신하 | ❌ 실패 | component 연결 오류 |
+| 2026-02-03 | 문서 학습 | DDD1542 | ✅ 완료 | 핵심 4개 문서 정독, 학습노트 작성 |
+| **2026-02-04** | **overrides.type 원인 분석** | **AI** | **✅ 완료** | **핵심 원인 발견: overrides.type 누락** |
+| **2026-02-04** | **전체 입력폼 일괄 수정** | **AI** | **✅ 완료** | **397개 화면, 2,455개 컴포넌트 수정** |
+| | 물류관리 | - | 미시작 | |
+| | 생산관리 | - | 미시작 | |
+| | 영업관리 | - | 미시작 | |
+
+---
+
+## 다음 작업 요청 예시
+
+다음 AI에게 요청할 때 이렇게 말하면 됩니다:
+
+```
+"본서버_개발서버_마이그레이션_가이드.md 읽고 품질관리 메뉴 마이그레이션 진행해줘"
+
+"본서버_개발서버_마이그레이션_가이드.md 참고해서 물류관리 메뉴 분석해줘"
+
+"본서버_개발서버_마이그레이션_상세가이드.md 보고 COMPANY_7_142 화면 V2로 변환해줘"
+```
+
+---
+
+## 변경 이력
+
+| 날짜 | 작성자 | 내용 |
+|------|--------|------|
+| 2026-02-03 | DDD1542 | 초안 작성 |
+| 2026-02-03 | DDD1542 | 컴포넌트-컬럼 연결 주의사항 추가 (이전 실패 원인) |
+| 2026-02-03 | DDD1542 | 개인 학습노트 작성 (V2_마이그레이션_학습노트_DDD1542.md) |
+| **2026-02-04** | **AI** | **핵심 원인 발견: overrides.type 필드 누락 문제** |
+| **2026-02-04** | **AI** | **일괄 수정 SQL 추가 및 397개 화면 수정 완료** |
diff --git a/docs/DDD1542/본서버_개발서버_마이그레이션_상세가이드.md b/docs/DDD1542/본서버_개발서버_마이그레이션_상세가이드.md
new file mode 100644
index 00000000..42ce37f1
--- /dev/null
+++ b/docs/DDD1542/본서버_개발서버_마이그레이션_상세가이드.md
@@ -0,0 +1,553 @@
+# 본서버 → 개발서버 마이그레이션 가이드
+
+## 개요
+
+본 문서는 **본서버(Production)**의 `screen_layouts` (V1) 데이터를 **개발서버(Development)**의 `screen_layouts_v2` 시스템으로 마이그레이션하는 절차를 정의합니다.
+
+### 마이그레이션 방향
+```
+본서버 (Production)          개발서버 (Development)
+┌─────────────────────┐      ┌─────────────────────┐
+│ screen_layouts (V1) │  →   │ screen_layouts_v2   │
+│ - 컴포넌트별 레코드  │      │ - 화면당 1개 레코드  │
+│ - properties JSONB  │      │ - layout_data JSONB │
+└─────────────────────┘      └─────────────────────┘
+```
+
+### 최종 목표
+개발서버에서 완성 후 **개발서버 → 본서버**로 배포
+
+---
+
+## 1. V1 vs V2 구조 차이
+
+### 1.1 screen_layouts (V1) - 본서버
+
+```sql
+-- 컴포넌트별 1개 레코드
+CREATE TABLE screen_layouts (
+  layout_id SERIAL PRIMARY KEY,
+  screen_id INTEGER,
+  component_type VARCHAR(50),
+  component_id VARCHAR(100),
+  properties JSONB,  -- 모든 설정값 포함
+  ...
+);
+```
+
+**특징:**
+- 화면당 N개 레코드 (컴포넌트 수만큼)
+- `properties`에 모든 설정 저장 (defaults + overrides 구분 없음)
+- `menu_objid` 기반 채번/카테고리 관리
+
+### 1.2 screen_layouts_v2 - 개발서버
+
+```sql
+-- 화면당 1개 레코드
+CREATE TABLE screen_layouts_v2 (
+  layout_id SERIAL PRIMARY KEY,
+  screen_id INTEGER NOT NULL,
+  company_code VARCHAR(20) NOT NULL,
+  layout_data JSONB NOT NULL DEFAULT '{}'::jsonb,
+  UNIQUE(screen_id, company_code)
+);
+```
+
+**layout_data 구조:**
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_xxx",
+      "url": "@/lib/registry/components/v2-table-list",
+      "position": { "x": 0, "y": 0 },
+      "size": { "width": 100, "height": 50 },
+      "displayOrder": 0,
+      "overrides": {
+        "tableName": "inspection_standard",
+        "columns": ["id", "name"]
+      }
+    }
+  ],
+  "updatedAt": "2026-02-03T12:00:00Z"
+}
+```
+
+**특징:**
+- 화면당 1개 레코드
+- `url` + `overrides` 방식 (Zod 스키마 defaults와 병합)
+- `table_name + column_name` 기반 채번/카테고리 관리 (전역)
+
+---
+
+## 2. 데이터 타입 관리 구조 (V2)
+
+### 2.1 핵심 테이블 관계
+
+```
+table_type_columns (컬럼 타입 정의)
+├── input_type = 'category' → category_values
+├── input_type = 'numbering' → numbering_rules
+└── input_type = 'text', 'date', 'number', etc.
+```
+
+### 2.2 table_type_columns
+
+각 테이블의 컬럼별 입력 타입을 정의합니다.
+
+```sql
+SELECT table_name, column_name, input_type, column_label
+FROM table_type_columns
+WHERE input_type IN ('category', 'numbering');
+```
+
+**주요 input_type:**
+| input_type | 설명 | 연결 테이블 |
+|------------|------|-------------|
+| text | 텍스트 입력 | - |
+| number | 숫자 입력 | - |
+| date | 날짜 입력 | - |
+| category | 카테고리 드롭다운 | category_values |
+| numbering | 자동 채번 | numbering_rules |
+| entity | 엔티티 검색 | - |
+
+### 2.3 category_values (카테고리 관리)
+
+```sql
+-- 카테고리 값 조회
+SELECT value_id, table_name, column_name, value_code, value_label, 
+       parent_value_id, depth, company_code
+FROM category_values
+WHERE table_name = 'inspection_standard'
+  AND column_name = 'inspection_method'
+  AND company_code = 'COMPANY_7';
+```
+
+**V1 vs V2 차이:**
+| 구분 | V1 | V2 |
+|------|----|----|
+| 키 | menu_objid | table_name + column_name |
+| 범위 | 화면별 | 전역 (테이블.컬럼별) |
+| 계층 | 단일 | 3단계 (대/중/소분류) |
+
+### 2.4 numbering_rules (채번 규칙)
+
+```sql
+-- 채번 규칙 조회
+SELECT rule_id, rule_name, table_name, column_name, separator, 
+       reset_period, current_sequence, company_code
+FROM numbering_rules
+WHERE company_code = 'COMPANY_7';
+```
+
+**연결 방식:**
+```
+table_type_columns.detail_settings = '{"numberingRuleId": "rule-xxx"}'
+                                              ↓
+                               numbering_rules.rule_id = "rule-xxx"
+```
+
+---
+
+## 3. 컴포넌트 매핑
+
+### 3.1 기본 컴포넌트 매핑
+
+| V1 (본서버) | V2 (개발서버) | 비고 |
+|-------------|---------------|------|
+| table-list | v2-table-list | 테이블 목록 |
+| button-primary | v2-button-primary | 버튼 |
+| text-input | v2-text-input | 텍스트 입력 |
+| select-basic | v2-select | 드롭다운 |
+| date-input | v2-date-input | 날짜 입력 |
+| entity-search-input | v2-entity-search | 엔티티 검색 |
+| tabs-widget | v2-tabs-widget | 탭 |
+
+### 3.2 특수 컴포넌트 매핑
+
+| V1 (본서버) | V2 (개발서버) | 마이그레이션 방식 |
+|-------------|---------------|-------------------|
+| category-manager | v2-category-manager | table_name 기반으로 변경 |
+| numbering-rule | v2-numbering-rule | table_name 기반으로 변경 |
+| 모달 화면 | overlay 통합 | 부모 화면에 통합 |
+
+### 3.3 모달 처리 방식 변경
+
+**V1 (본서버):**
+```
+화면 A (screen_id: 142) - 검사장비관리
+    └── 버튼 클릭 → 화면 B (screen_id: 143) - 검사장비 등록모달
+```
+
+**V2 (개발서버):**
+```
+화면 A (screen_id: 142) - 검사장비관리
+    └── v2-dialog-form 컴포넌트로 모달 통합
+```
+
+---
+
+## 4. 마이그레이션 절차
+
+### 4.1 사전 분석
+
+```sql
+-- 1. 본서버 화면 목록 확인
+SELECT sd.screen_id, sd.screen_code, sd.screen_name, sd.table_name,
+       COUNT(sl.layout_id) as component_count
+FROM screen_definitions sd
+LEFT JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sd.screen_code LIKE 'COMPANY_7_%'
+  AND sd.screen_name LIKE '%품질%'
+GROUP BY sd.screen_id, sd.screen_code, sd.screen_name, sd.table_name;
+
+-- 2. 개발서버 V2 화면 현황 확인
+SELECT sd.screen_id, sd.screen_code, sd.screen_name,
+       sv2.layout_data IS NOT NULL as has_v2_layout
+FROM screen_definitions sd
+LEFT JOIN screen_layouts_v2 sv2 ON sd.screen_id = sv2.screen_id
+WHERE sd.company_code = 'COMPANY_7';
+```
+
+### 4.2 Step 1: screen_definitions 동기화
+
+```sql
+-- 본서버에만 있는 화면을 개발서버에 추가
+INSERT INTO screen_definitions (screen_code, screen_name, table_name, company_code, ...)
+SELECT screen_code, screen_name, table_name, company_code, ...
+FROM [본서버].screen_definitions
+WHERE screen_code NOT IN (SELECT screen_code FROM screen_definitions);
+```
+
+### 4.3 Step 2: V1 → V2 레이아웃 변환
+
+```typescript
+// 변환 로직 (pseudo-code)
+async function convertV1toV2(screenId: number, companyCode: string) {
+  // 1. V1 레이아웃 조회
+  const v1Layouts = await getV1Layouts(screenId);
+  
+  // 2. V2 형식으로 변환
+  const v2Layout = {
+    version: "2.0",
+    components: v1Layouts.map(v1 => ({
+      id: v1.component_id,
+      url: mapComponentUrl(v1.component_type),
+      position: { x: v1.position_x, y: v1.position_y },
+      size: { width: v1.width, height: v1.height },
+      displayOrder: v1.display_order,
+      overrides: extractOverrides(v1.properties)
+    })),
+    updatedAt: new Date().toISOString()
+  };
+  
+  // 3. V2 테이블에 저장
+  await saveV2Layout(screenId, companyCode, v2Layout);
+}
+
+function mapComponentUrl(v1Type: string): string {
+  const mapping = {
+    'table-list': '@/lib/registry/components/v2-table-list',
+    'button-primary': '@/lib/registry/components/v2-button-primary',
+    'category-manager': '@/lib/registry/components/v2-category-manager',
+    'numbering-rule': '@/lib/registry/components/v2-numbering-rule',
+    // ... 기타 매핑
+  };
+  return mapping[v1Type] || `@/lib/registry/components/v2-${v1Type}`;
+}
+```
+
+### 4.4 Step 3: 카테고리 데이터 마이그레이션
+
+```sql
+-- 본서버 카테고리 데이터 → 개발서버 category_values
+INSERT INTO category_values (
+  table_name, column_name, value_code, value_label, 
+  value_order, parent_value_id, depth, company_code
+)
+SELECT 
+  -- V1 카테고리 데이터를 table_name + column_name 기반으로 변환
+  'inspection_standard' as table_name,
+  'inspection_method' as column_name,
+  value_code,
+  value_label,
+  sort_order,
+  NULL as parent_value_id,
+  1 as depth,
+  'COMPANY_7' as company_code
+FROM [본서버_카테고리_데이터];
+```
+
+### 4.5 Step 4: 채번 규칙 마이그레이션
+
+```sql
+-- 본서버 채번 규칙 → 개발서버 numbering_rules
+INSERT INTO numbering_rules (
+  rule_id, rule_name, table_name, column_name,
+  separator, reset_period, current_sequence, company_code
+)
+SELECT 
+  rule_id,
+  rule_name,
+  'inspection_standard' as table_name,
+  'inspection_code' as column_name,
+  separator,
+  reset_period,
+  0 as current_sequence,  -- 시퀀스 초기화
+  'COMPANY_7' as company_code
+FROM [본서버_채번_규칙];
+```
+
+### 4.6 Step 5: table_type_columns 설정
+
+```sql
+-- 카테고리 컬럼 설정
+UPDATE table_type_columns
+SET input_type = 'category'
+WHERE table_name = 'inspection_standard'
+  AND column_name = 'inspection_method'
+  AND company_code = 'COMPANY_7';
+
+-- 채번 컬럼 설정
+UPDATE table_type_columns
+SET 
+  input_type = 'numbering',
+  detail_settings = '{"numberingRuleId": "rule-xxx"}'
+WHERE table_name = 'inspection_standard'
+  AND column_name = 'inspection_code'
+  AND company_code = 'COMPANY_7';
+```
+
+---
+
+## 5. 품질관리 메뉴 마이그레이션 현황
+
+### 5.1 화면 매핑 현황
+
+| 본서버 코드 | 화면명 | 테이블 | 개발서버 상태 | 비고 |
+|-------------|--------|--------|---------------|------|
+| COMPANY_7_126 | 검사정보 관리 | inspection_standard | ✅ V2 존재 | 컴포넌트 수 확인 필요 |
+| COMPANY_7_127 | 품목옵션 설정 | - | ✅ V2 존재 | v2-category-manager 사용중 |
+| COMPANY_7_138 | 카테고리 설정 | inspection_standard | ❌ 누락 | V2: table_name 기반으로 변경 |
+| COMPANY_7_139 | 코드 설정 | inspection_standard | ❌ 누락 | V2: table_name 기반으로 변경 |
+| COMPANY_7_142 | 검사장비 관리 | inspection_equipment_mng | ❌ 누락 | 모달 통합 필요 |
+| COMPANY_7_143 | 검사장비 등록모달 | inspection_equipment_mng | ❌ 누락 | COMPANY_7_142에 통합 |
+| COMPANY_7_144 | 불량기준 정보 | defect_standard_mng | ❌ 누락 | 모달 통합 필요 |
+| COMPANY_7_145 | 불량기준 등록모달 | defect_standard_mng | ❌ 누락 | COMPANY_7_144에 통합 |
+
+### 5.2 카테고리/채번 컬럼 현황
+
+**inspection_standard:**
+| 컬럼 | input_type | 라벨 |
+|------|------------|------|
+| inspection_method | category | 검사방법 |
+| unit | category | 단위 |
+| apply_type | category | 적용구분 |
+| inspection_type | category | 유형 |
+
+**inspection_equipment_mng:**
+| 컬럼 | input_type | 라벨 |
+|------|------------|------|
+| equipment_type | category | 장비유형 |
+| installation_location | category | 설치장소 |
+| equipment_status | category | 장비상태 |
+
+**defect_standard_mng:**
+| 컬럼 | input_type | 라벨 |
+|------|------------|------|
+| defect_type | category | 불량유형 |
+| severity | category | 심각도 |
+| inspection_type | category | 검사유형 |
+
+---
+
+## 6. 자동화 스크립트
+
+### 6.1 마이그레이션 실행 스크립트
+
+```typescript
+// backend-node/src/scripts/migrateV1toV2.ts
+import { getPool } from "../database/db";
+
+interface MigrationResult {
+  screenCode: string;
+  success: boolean;
+  message: string;
+  componentCount?: number;
+}
+
+async function migrateScreenToV2(
+  screenCode: string,
+  companyCode: string
+): Promise<MigrationResult> {
+  const pool = getPool();
+  
+  try {
+    // 1. V1 레이아웃 조회 (본서버에서)
+    const v1Result = await pool.query(`
+      SELECT sl.*, sd.table_name, sd.screen_name
+      FROM screen_layouts sl
+      JOIN screen_definitions sd ON sl.screen_id = sd.screen_id
+      WHERE sd.screen_code = $1
+      ORDER BY sl.display_order
+    `, [screenCode]);
+    
+    if (v1Result.rows.length === 0) {
+      return { screenCode, success: false, message: "V1 레이아웃 없음" };
+    }
+    
+    // 2. V2 형식으로 변환
+    const components = v1Result.rows
+      .filter(row => row.component_type !== '_metadata')
+      .map(row => ({
+        id: row.component_id || `comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        url: mapComponentUrl(row.component_type),
+        position: { x: row.position_x || 0, y: row.position_y || 0 },
+        size: { width: row.width || 100, height: row.height || 50 },
+        displayOrder: row.display_order || 0,
+        overrides: extractOverrides(row.properties, row.component_type)
+      }));
+    
+    const layoutData = {
+      version: "2.0",
+      components,
+      migratedFrom: "V1",
+      migratedAt: new Date().toISOString()
+    };
+    
+    // 3. 개발서버 V2 테이블에 저장
+    const screenId = v1Result.rows[0].screen_id;
+    
+    await pool.query(`
+      INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (screen_id, company_code) 
+      DO UPDATE SET layout_data = $3, updated_at = NOW()
+    `, [screenId, companyCode, JSON.stringify(layoutData)]);
+    
+    return {
+      screenCode,
+      success: true,
+      message: "마이그레이션 완료",
+      componentCount: components.length
+    };
+  } catch (error: any) {
+    return { screenCode, success: false, message: error.message };
+  }
+}
+
+function mapComponentUrl(v1Type: string): string {
+  const mapping: Record<string, string> = {
+    'table-list': '@/lib/registry/components/v2-table-list',
+    'button-primary': '@/lib/registry/components/v2-button-primary',
+    'text-input': '@/lib/registry/components/v2-text-input',
+    'select-basic': '@/lib/registry/components/v2-select',
+    'date-input': '@/lib/registry/components/v2-date-input',
+    'entity-search-input': '@/lib/registry/components/v2-entity-search',
+    'category-manager': '@/lib/registry/components/v2-category-manager',
+    'numbering-rule': '@/lib/registry/components/v2-numbering-rule',
+    'tabs-widget': '@/lib/registry/components/v2-tabs-widget',
+    'textarea-basic': '@/lib/registry/components/v2-textarea',
+  };
+  return mapping[v1Type] || `@/lib/registry/components/v2-${v1Type}`;
+}
+
+function extractOverrides(properties: any, componentType: string): Record<string, any> {
+  if (!properties) return {};
+  
+  // V2 Zod 스키마 defaults와 비교하여 다른 값만 추출
+  // (실제 구현 시 각 컴포넌트의 defaultConfig와 비교)
+  const overrides: Record<string, any> = {};
+  
+  // 필수 설정만 추출
+  if (properties.tableName) overrides.tableName = properties.tableName;
+  if (properties.columns) overrides.columns = properties.columns;
+  if (properties.label) overrides.label = properties.label;
+  if (properties.onClick) overrides.onClick = properties.onClick;
+  
+  return overrides;
+}
+```
+
+---
+
+## 7. 검증 체크리스트
+
+### 7.1 마이그레이션 전
+
+- [ ] 본서버 화면 목록 확인
+- [ ] 개발서버 기존 V2 데이터 백업
+- [ ] 컴포넌트 매핑 테이블 검토
+- [ ] 카테고리/채번 데이터 분석
+
+### 7.2 마이그레이션 후
+
+- [ ] screen_definitions 동기화 확인
+- [ ] screen_layouts_v2 데이터 생성 확인
+- [ ] 컴포넌트 렌더링 테스트
+- [ ] 카테고리 드롭다운 동작 확인
+- [ ] 채번 규칙 동작 확인
+- [ ] 저장/수정/삭제 기능 테스트
+
+### 7.3 모달 통합 확인
+
+- [ ] 기존 모달 화면 → overlay 통합 완료
+- [ ] 부모-자식 데이터 연동 확인
+- [ ] 모달 열기/닫기 동작 확인
+
+---
+
+## 8. 롤백 계획
+
+마이그레이션 실패 시 롤백 절차:
+
+```sql
+-- 1. V2 레이아웃 롤백
+DELETE FROM screen_layouts_v2 
+WHERE screen_id IN (
+  SELECT screen_id FROM screen_definitions 
+  WHERE screen_code LIKE 'COMPANY_7_%'
+);
+
+-- 2. 추가된 screen_definitions 롤백
+DELETE FROM screen_definitions
+WHERE screen_code IN ('신규_추가된_코드들')
+  AND company_code = 'COMPANY_7';
+
+-- 3. category_values 롤백
+DELETE FROM category_values
+WHERE company_code = 'COMPANY_7'
+  AND created_at > '[마이그레이션_시작_시간]';
+
+-- 4. numbering_rules 롤백
+DELETE FROM numbering_rules
+WHERE company_code = 'COMPANY_7'
+  AND created_at > '[마이그레이션_시작_시간]';
+```
+
+---
+
+## 9. 참고 자료
+
+### 관련 코드 파일
+
+- **V2 Category Manager**: `frontend/lib/registry/components/v2-category-manager/`
+- **V2 Numbering Rule**: `frontend/lib/registry/components/v2-numbering-rule/`
+- **Category Service**: `backend-node/src/services/categoryTreeService.ts`
+- **Numbering Service**: `backend-node/src/services/numberingRuleService.ts`
+
+### 관련 문서
+
+- [V2 컴포넌트 분석 가이드](../V2_컴포넌트_분석_가이드.md)
+- [V2 컴포넌트 연동 가이드](../V2_컴포넌트_연동_가이드.md)
+- [화면 개발 표준 가이드](../screen-implementation-guide/SCREEN_DEVELOPMENT_STANDARD.md)
+- [컴포넌트 레이아웃 V2 아키텍처](./COMPONENT_LAYOUT_V2_ARCHITECTURE.md)
+
+---
+
+## 변경 이력
+
+| 날짜 | 작성자 | 내용 |
+|------|--------|------|
+| 2026-02-03 | DDD1542 | 초안 작성 |
diff --git a/docs/DDD1542/화면관계_시각화_개선_보고서.md b/docs/DDD1542/화면관계_시각화_개선_보고서.md
index 27946afa..aea92243 100644
--- a/docs/DDD1542/화면관계_시각화_개선_보고서.md
+++ b/docs/DDD1542/화면관계_시각화_개선_보고서.md
@@ -23,7 +23,8 @@
 | 테이블명 | 용도 | 주요 컬럼 |
 |----------|------|----------|
 | `screen_definitions` | 화면 정의 정보 | `screen_id`, `screen_name`, `table_name`, `company_code` |
-| `screen_layouts` | 화면 레이아웃/컴포넌트 정보 | `screen_id`, `properties` (JSONB - componentConfig 포함) |
+| `screen_layouts` | 화면 레이아웃/컴포넌트 정보 (Legacy) | `screen_id`, `properties` (JSONB - componentConfig 포함) |
+| `screen_layouts_v2` | 화면 레이아웃/컴포넌트 정보 (V2) | `screen_id`, `layout_data` (JSONB - components 배열) |
 | `screen_groups` | 화면 그룹 정보 | `group_id`, `group_code`, `group_name`, `parent_group_id` |
 | `screen_group_mappings` | 화면-그룹 매핑 | `group_id`, `screen_id`, `display_order` |
 
@@ -86,9 +87,17 @@ screen_groups (그룹)
     │           │
     │           └─── screen_definitions (화면)
     │                       │
-    │                       └─── screen_layouts (레이아웃/컴포넌트)
+    │                       ├─── screen_layouts (Legacy)
+    │                       │           │
+    │                       │           └─── properties.componentConfig
+    │                       │                   ├── fieldMappings
+    │                       │                   ├── parentDataMapping
+    │                       │                   ├── columns.mapping
+    │                       │                   └── rightPanel.relation
+    │                       │
+    │                       └─── screen_layouts_v2 (V2) ← 현재 표준
     │                                   │
-    │                                   └─── properties.componentConfig
+    │                                   └─── layout_data.components[].overrides
     │                                           ├── fieldMappings
     │                                           ├── parentDataMapping
     │                                           ├── columns.mapping
@@ -1120,9 +1129,12 @@ screenSubTables[screenId].subTables.push({
 21. [x] 필터 연결선 포커싱 제어 (해당 화면 포커싱 시에만 표시)
 22. [x] 저장 테이블 제외 조건 추가 (table-list + 체크박스 + openModalWithData)
 23. [x] 첫 진입 시 포커싱 없이 시작 (트리에서 화면 클릭 시 그룹만 진입)
-24. [ ] **선 교차점 이질감 해결** (계획 중)
-22. [ ] 범례 UI 추가 (선택사항)
-23. [ ] 엣지 라벨에 관계 유형 표시 (선택사항)
+24. [x] **screen_layouts_v2 지원 추가** (rightPanel.relation V2 UNION 쿼리) ✅ 2026-01-30
+25. [x] **테이블 분류 우선순위 시스템** (메인 > 서브 우선순위 적용) ✅ 2026-01-30
+26. [x] **globalMainTables API 추가** (WHERE 조건 대상 테이블 목록 반환) ✅ 2026-01-30
+27. [ ] **선 교차점 이질감 해결** (계획 중)
+28. [ ] 범례 UI 추가 (선택사항)
+29. [ ] 엣지 라벨에 관계 유형 표시 (선택사항)
 
 ---
 
@@ -1682,6 +1694,149 @@ frontend/
 
 ---
 
+## 테이블 분류 우선순위 시스템 (2026-01-30)
+
+### 배경
+
+마스터-디테일 관계의 디테일 테이블(예: `user_dept`)이 다른 곳에서 autocomplete 참조로도 사용되는 경우, 
+서브 테이블 영역에 잘못 배치되는 문제가 발생했습니다.
+
+### 문제 상황
+
+```
+[user_info] - 화면 139의 디테일 → 메인 테이블 영역 (O)
+[user_dept] - 화면 162의 디테일이지만 autocomplete 참조도 있음 → 서브 테이블 영역 (X)
+```
+
+**원인**: 테이블 분류 시 우선순위가 없어서 먼저 발견된 관계 타입으로 분류됨
+
+### 해결책: 우선순위 기반 테이블 분류
+
+#### 분류 규칙
+
+| 우선순위 | 분류 | 조건 | 비고 |
+|----------|------|------|------|
+| **1순위** | 메인 테이블 | `screen_definitions.table_name` | 컴포넌트 직접 연결 |
+| **1순위** | 메인 테이블 | `v2-split-panel-layout.rightPanel.tableName` | WHERE 조건 대상 |
+| **2순위** | 서브 테이블 | 조인으로만 연결된 테이블 | autocomplete 등 참조 |
+
+#### 핵심 규칙
+
+> **메인 조건에 해당하면, 서브 조건이 있어도 무조건 메인으로 분류**
+
+### 백엔드 변경 (`screenGroupController.ts`)
+
+#### 1. screen_layouts_v2 지원 추가
+
+`rightPanelQuery`에 V2 테이블 UNION 추가:
+
+```sql
+-- V1: screen_layouts에서 조회
+SELECT ...
+FROM screen_definitions sd
+JOIN screen_layouts sl ON sd.screen_id = sl.screen_id
+WHERE sl.properties->'componentConfig'->'rightPanel'->'relation' IS NOT NULL
+
+UNION ALL
+
+-- V2: screen_layouts_v2에서 조회 (v2-split-panel-layout 컴포넌트)
+SELECT 
+  sd.screen_id,
+  comp->'overrides'->>'type' as component_type,
+  comp->'overrides'->'rightPanel'->'relation' as right_panel_relation,
+  comp->'overrides'->'rightPanel'->>'tableName' as right_panel_table,
+  ...
+FROM screen_definitions sd
+JOIN screen_layouts_v2 slv2 ON sd.screen_id = slv2.screen_id,
+jsonb_array_elements(slv2.layout_data->'components') as comp
+WHERE comp->'overrides'->'rightPanel'->'relation' IS NOT NULL
+```
+
+#### 2. globalMainTables API 추가
+
+`getScreenSubTables` 응답에 전역 메인 테이블 목록 추가:
+
+```sql
+-- 모든 화면의 메인 테이블 수집
+SELECT DISTINCT table_name as main_table FROM screen_definitions WHERE screen_id = ANY($1)
+UNION
+SELECT DISTINCT comp->'overrides'->'rightPanel'->>'tableName' as main_table
+FROM screen_layouts_v2 ...
+```
+
+**응답 구조:**
+```typescript
+res.json({
+  success: true,
+  data: screenSubTables,
+  globalMainTables: globalMainTables,  // 메인 테이블 목록 추가
+});
+```
+
+### 프론트엔드 변경 (`ScreenRelationFlow.tsx`)
+
+#### 1. globalMainTables 상태 추가
+
+```typescript
+const [globalMainTables, setGlobalMainTables] = useState<Set<string>>(new Set());
+```
+
+#### 2. 우선순위 기반 테이블 분류
+
+```typescript
+// 1. globalMainTables를 mainTableSet에 먼저 추가 (우선순위 적용)
+globalMainTables.forEach((tableName) => {
+  if (!mainTableSet.has(tableName)) {
+    mainTableSet.add(tableName);
+    filterTableSet.add(tableName);  // 보라색 테두리
+  }
+});
+
+// 2. 서브 테이블 수집 (mainTableSet에 없는 것만)
+screenSubData.subTables.forEach((subTable) => {
+  if (mainTableSet.has(subTable.tableName)) {
+    return;  // 메인 테이블은 서브에서 제외
+  }
+  subTableSet.add(subTable.tableName);
+});
+```
+
+### 시각적 결과
+
+#### 변경 전
+
+```
+[화면 노드들]
+     │
+     ▼
+[메인 테이블: dept_info, user_info]  ← user_dept 없음
+     │
+     ▼
+[서브 테이블: user_dept, customer_mng]  ← user_dept가 잘못 배치됨
+```
+
+#### 변경 후
+
+```
+[화면 노드들]
+     │
+     ▼
+[메인 테이블: dept_info, user_info, user_dept]  ← user_dept 보라색 테두리
+     │
+     ▼
+[서브 테이블: customer_mng]  ← 조인 참조용 테이블만
+```
+
+### 관련 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `backend-node/src/controllers/screenGroupController.ts` | screen_layouts_v2 UNION 추가, globalMainTables 반환 |
+| `frontend/components/screen/ScreenRelationFlow.tsx` | globalMainTables 상태, 우선순위 분류 로직 |
+| `frontend/components/screen/ScreenNode.tsx` | isFilterTable prop 및 보라색 테두리 스타일 |
+
+---
+
 ## 화면 설정 모달 개선 (2026-01-12)
 
 ### 개요
@@ -1742,4 +1897,6 @@ npm install react-zoom-pan-pinch
 - [멀티테넌시 구현 가이드](.cursor/rules/multi-tenancy-guide.mdc)
 - [API 클라이언트 사용 규칙](.cursor/rules/api-client-usage.mdc)
 - [관리자 페이지 스타일 가이드](.cursor/rules/admin-page-style-guide.mdc)
+- [화면 복제 V2 마이그레이션 계획서](../SCREEN_COPY_V2_MIGRATION_PLAN.md) - screen_layouts_v2 복제 로직
+- [V2 컴포넌트 마이그레이션 분석](../V2_COMPONENT_MIGRATION_ANALYSIS.md) - V2 아키텍처
 
diff --git a/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md b/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
new file mode 100644
index 00000000..c60f1dfb
--- /dev/null
+++ b/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
@@ -0,0 +1,525 @@
+# 화면 복제 로직 V2 마이그레이션 계획서
+
+> 작성일: 2026-01-28
+
+## 1. 현황 분석
+
+### 1.1 현재 복제 방식 (Legacy)
+
+```
+테이블: screen_layouts (다중 레코드)
+방식: 화면당 N개 레코드 (컴포넌트 수만큼)
+저장: properties에 전체 설정 "박제"
+```
+
+**데이터 구조:**
+```sql
+-- 화면당 여러 레코드
+SELECT * FROM screen_layouts WHERE screen_id = 123;
+-- layout_id | screen_id | component_type | component_id | properties (전체 설정)
+-- 1         | 123       | table-list     | comp_001     | {"tableName": "user", "columns": [...], ...}
+-- 2         | 123       | button         | comp_002     | {"label": "저장", "variant": "default", ...}
+```
+
+### 1.2 V2 방식
+
+```
+테이블: screen_layouts_v2 (1개 레코드)
+방식: 화면당 1개 레코드 (JSONB)
+저장: url + overrides (차이값만)
+```
+
+**데이터 구조:**
+```sql
+-- 화면당 1개 레코드
+SELECT layout_data FROM screen_layouts_v2 WHERE screen_id = 123;
+-- {
+--   "version": "2.0",
+--   "components": [
+--     { "id": "comp_001", "url": "@/lib/registry/components/table-list", "overrides": {...} },
+--     { "id": "comp_002", "url": "@/lib/registry/components/button-primary", "overrides": {...} }
+--   ]
+-- }
+```
+
+---
+
+## 2. 현재 복제 로직 분석
+
+### 2.1 복제 진입점 (2곳)
+
+| 경로 | 파일 | 함수 | 용도 |
+|-----|------|------|-----|
+| 단일 화면 복제 | `screenManagementService.ts` | `copyScreen()` | 화면 관리에서 개별 화면 복제 |
+| 메뉴 일괄 복제 | `menuCopyService.ts` | `copyScreens()` | 메뉴 복제 시 연결된 화면들 복제 |
+
+### 2.2 screenManagementService.copyScreen() 흐름
+
+```
+1. screen_definitions 조회 (원본)
+2. screen_definitions INSERT (대상)
+3. screen_layouts 조회 (원본) ← Legacy
+4. flowId 수집 및 복제 (회사 간 복제 시)
+5. numberingRuleId 수집 및 복제 (회사 간 복제 시)
+6. componentId 재생성 (idMapping)
+7. properties 내 참조 업데이트 (flowId, ruleId)
+8. screen_layouts INSERT (대상) ← Legacy
+```
+
+**V2 처리: ❌ 없음**
+
+### 2.3 menuCopyService.copyScreens() 흐름
+
+```
+1단계: screen_definitions 처리
+  - 기존 복사본 존재 시: 업데이트
+  - 없으면: 신규 생성
+  - screenIdMap 생성
+
+2단계: screen_layouts 처리
+  - 원본 조회
+  - componentIdMap 생성
+  - properties 내 참조 업데이트 (screenId, flowId, ruleId, menuId)
+  - 배치 INSERT
+```
+
+**V2 처리: ❌ 없음**
+
+### 2.4 복제 시 처리되는 참조 ID들
+
+| 참조 ID | 설명 | 매핑 방식 |
+|--------|-----|----------|
+| `componentId` | 컴포넌트 고유 ID | 새로 생성 (`comp_xxx`) |
+| `parentId` | 부모 컴포넌트 ID | componentIdMap으로 매핑 |
+| `flowId` | 노드 플로우 ID | flowIdMap으로 매핑 (회사 간 복제 시) |
+| `numberingRuleId` | 채번 규칙 ID | ruleIdMap으로 매핑 (회사 간 복제 시) |
+| `screenId` (탭) | 탭에서 참조하는 화면 ID | screenIdMap으로 매핑 |
+| `menuObjid` | 메뉴 ID | menuIdMap으로 매핑 |
+
+---
+
+## 3. V2 마이그레이션 시 변경 필요 사항
+
+### 3.1 핵심 변경점
+
+| 항목 | Legacy | V2 |
+|-----|--------|-----|
+| 읽기 테이블 | `screen_layouts` | `screen_layouts_v2` |
+| 쓰기 테이블 | `screen_layouts` | `screen_layouts_v2` |
+| 데이터 형태 | N개 레코드 | 1개 JSONB |
+| ID 매핑 위치 | 각 레코드의 컬럼 | JSONB 내부 순회 |
+| 참조 업데이트 | `properties` JSON | `overrides` JSON |
+
+### 3.2 수정해야 할 함수들
+
+#### screenManagementService.ts
+
+| 함수 | 변경 내용 |
+|-----|----------|
+| `copyScreen()` | screen_layouts_v2 복제 로직 추가 |
+| `collectFlowIdsFromLayouts()` | V2 JSONB 구조에서 flowId 수집 |
+| `collectNumberingRuleIdsFromLayouts()` | V2 JSONB 구조에서 ruleId 수집 |
+| `updateFlowIdsInProperties()` | V2 overrides 내 flowId 업데이트 |
+| `updateNumberingRuleIdsInProperties()` | V2 overrides 내 ruleId 업데이트 |
+
+#### menuCopyService.ts
+
+| 함수 | 변경 내용 |
+|-----|----------|
+| `copyScreens()` | screen_layouts_v2 복제 로직 추가 |
+| `hasLayoutChanges()` | V2 JSONB 비교 로직 |
+| `updateReferencesInProperties()` | V2 overrides 내 참조 업데이트 |
+
+### 3.3 새로 추가할 함수들
+
+```typescript
+// V2 레이아웃 복제 (공통)
+async copyLayoutV2(
+  sourceScreenId: number,
+  targetScreenId: number,
+  targetCompanyCode: string,
+  mappings: {
+    componentIdMap: Map<string, string>;
+    flowIdMap: Map<number, number>;
+    ruleIdMap: Map<string, string>;
+    screenIdMap: Map<number, number>;
+    menuIdMap?: Map<number, number>;
+  },
+  client: PoolClient
+): Promise<void>
+
+// V2 JSONB에서 참조 ID 수집
+collectReferencesFromLayoutV2(layoutData: any): {
+  flowIds: Set<number>;
+  ruleIds: Set<string>;
+  screenIds: Set<number>;
+}
+
+// V2 JSONB 내 참조 업데이트
+updateReferencesInLayoutV2(
+  layoutData: any,
+  mappings: { ... }
+): any
+```
+
+---
+
+## 4. 마이그레이션 전략
+
+### 4.1 전략: V2 완전 전환
+
+```
+결정: V2만 복제 (Legacy 복제 제거)
+이유: 깔끔한 코드, 유지보수 용이, V2 아키텍처 일관성
+전제: 기존 화면들은 이미 screen_layouts_v2로 마이그레이션 완료 (1,347개 100%)
+```
+
+### 4.2 단계별 계획
+
+#### Phase 1: V2 복제 로직 구현 및 전환
+
+```
+목표: Legacy 복제를 V2 복제로 완전 교체
+영향: 복제 시 screen_layouts_v2 테이블만 사용
+
+작업:
+1. copyLayoutV2() 공통 함수 구현
+2. screenManagementService.copyScreen() - Legacy → V2 교체
+3. menuCopyService.copyScreens() - Legacy → V2 교체
+4. 테스트 및 검증
+```
+
+#### Phase 2: Legacy 코드 정리
+
+```
+목표: 불필요한 Legacy 복제 코드 제거
+영향: 코드 간소화
+
+작업:
+1. screen_layouts 관련 복제 코드 제거
+2. 관련 헬퍼 함수 정리 (collectFlowIdsFromLayouts 등)
+3. 코드 리뷰 및 정리
+```
+
+#### Phase 3: Legacy 테이블 정리 (선택, 추후)
+
+```
+목표: 불필요한 테이블 제거
+영향: 데이터 정리
+
+작업:
+1. screen_layouts 테이블 데이터 백업
+2. screen_layouts 테이블 삭제 (또는 보관)
+3. 관련 코드 정리
+```
+
+---
+
+## 5. 상세 구현 계획
+
+### 5.1 Phase 1 작업 목록
+
+| # | 작업 | 파일 | 예상 공수 |
+|---|-----|------|---------|
+| 1 | `copyLayoutV2()` 공통 함수 구현 | screenManagementService.ts | 2시간 |
+| 2 | `collectReferencesFromLayoutV2()` 구현 | screenManagementService.ts | 1시간 |
+| 3 | `updateReferencesInLayoutV2()` 구현 | screenManagementService.ts | 2시간 |
+| 4 | `copyScreen()` - Legacy 제거, V2로 교체 | screenManagementService.ts | 2시간 |
+| 5 | `copyScreens()` - Legacy 제거, V2로 교체 | menuCopyService.ts | 3시간 |
+| 6 | 단위 테스트 | - | 2시간 |
+| 7 | 통합 테스트 | - | 2시간 |
+
+**총 예상 공수: 14시간 (약 2일)**
+
+### 5.2 주요 변경 포인트
+
+#### copyScreen() 변경 전후
+
+**Before (Legacy):**
+```typescript
+// 4. 원본 화면의 레이아웃 정보 조회
+const sourceLayoutsResult = await client.query<any>(
+  `SELECT * FROM screen_layouts WHERE screen_id = $1`,
+  [sourceScreenId]
+);
+// ... N개 레코드 순회하며 INSERT
+```
+
+**After (V2):**
+```typescript
+// 4. 원본 V2 레이아웃 조회
+const sourceLayoutV2 = await client.query(
+  `SELECT layout_data FROM screen_layouts_v2 
+   WHERE screen_id = $1 AND company_code = $2`,
+  [sourceScreenId, sourceCompanyCode]
+);
+// ... JSONB 변환 후 1개 레코드 INSERT
+```
+
+#### copyScreens() 변경 전후
+
+**Before (Legacy):**
+```typescript
+// 레이아웃 배치 INSERT
+await client.query(
+  `INSERT INTO screen_layouts (...) VALUES ${layoutValues.join(", ")}`,
+  layoutParams
+);
+```
+
+**After (V2):**
+```typescript
+// V2 레이아웃 UPSERT
+await this.copyLayoutV2(
+  originalScreenId, targetScreenId, sourceCompanyCode, targetCompanyCode,
+  { componentIdMap, flowIdMap, ruleIdMap, screenIdMap, menuIdMap },
+  client
+);
+```
+
+### 5.2 copyLayoutV2() 구현 방안
+
+```typescript
+private async copyLayoutV2(
+  sourceScreenId: number,
+  targetScreenId: number,
+  sourceCompanyCode: string,
+  targetCompanyCode: string,
+  mappings: {
+    componentIdMap: Map<string, string>;
+    flowIdMap?: Map<number, number>;
+    ruleIdMap?: Map<string, string>;
+    screenIdMap?: Map<number, number>;
+    menuIdMap?: Map<number, number>;
+  },
+  client: PoolClient
+): Promise<void> {
+  // 1. 원본 V2 레이아웃 조회
+  const sourceResult = await client.query(
+    `SELECT layout_data FROM screen_layouts_v2 
+     WHERE screen_id = $1 AND company_code = $2`,
+    [sourceScreenId, sourceCompanyCode]
+  );
+
+  if (sourceResult.rows.length === 0) {
+    // V2 레이아웃 없으면 스킵 (Legacy만 있는 경우)
+    return;
+  }
+
+  const layoutData = sourceResult.rows[0].layout_data;
+
+  // 2. components 배열 순회하며 ID 매핑
+  const updatedComponents = layoutData.components.map((comp: any) => {
+    const newId = mappings.componentIdMap.get(comp.id) || comp.id;
+    
+    // overrides 내 참조 업데이트
+    let updatedOverrides = { ...comp.overrides };
+    
+    // flowId 매핑
+    if (mappings.flowIdMap && updatedOverrides.flowId) {
+      const newFlowId = mappings.flowIdMap.get(updatedOverrides.flowId);
+      if (newFlowId) updatedOverrides.flowId = newFlowId;
+    }
+    
+    // numberingRuleId 매핑
+    if (mappings.ruleIdMap && updatedOverrides.numberingRuleId) {
+      const newRuleId = mappings.ruleIdMap.get(updatedOverrides.numberingRuleId);
+      if (newRuleId) updatedOverrides.numberingRuleId = newRuleId;
+    }
+    
+    // screenId 매핑 (탭 컴포넌트 등)
+    if (mappings.screenIdMap && updatedOverrides.screenId) {
+      const newScreenId = mappings.screenIdMap.get(updatedOverrides.screenId);
+      if (newScreenId) updatedOverrides.screenId = newScreenId;
+    }
+    
+    // tabs 배열 내 screenId 매핑
+    if (mappings.screenIdMap && Array.isArray(updatedOverrides.tabs)) {
+      updatedOverrides.tabs = updatedOverrides.tabs.map((tab: any) => ({
+        ...tab,
+        screenId: mappings.screenIdMap.get(tab.screenId) || tab.screenId
+      }));
+    }
+
+    return {
+      ...comp,
+      id: newId,
+      overrides: updatedOverrides
+    };
+  });
+
+  const newLayoutData = {
+    ...layoutData,
+    components: updatedComponents,
+    updatedAt: new Date().toISOString()
+  };
+
+  // 3. 대상 V2 레이아웃 저장 (UPSERT)
+  await client.query(
+    `INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data, created_at, updated_at)
+     VALUES ($1, $2, $3, NOW(), NOW())
+     ON CONFLICT (screen_id, company_code) 
+     DO UPDATE SET layout_data = $3, updated_at = NOW()`,
+    [targetScreenId, targetCompanyCode, JSON.stringify(newLayoutData)]
+  );
+}
+```
+
+---
+
+## 6. 테스트 계획
+
+### 6.1 단위 테스트
+
+| 테스트 케이스 | 설명 |
+|-------------|------|
+| V2 레이아웃 복제 - 기본 | 단순 컴포넌트 복제 |
+| V2 레이아웃 복제 - flowId 매핑 | 회사 간 복제 시 flowId 변경 확인 |
+| V2 레이아웃 복제 - ruleId 매핑 | 회사 간 복제 시 ruleId 변경 확인 |
+| V2 레이아웃 복제 - 탭 screenId 매핑 | 탭 컴포넌트의 screenId 변경 확인 |
+| V2 레이아웃 없는 경우 | Legacy만 있는 화면 복제 시 스킵 확인 |
+
+### 6.2 통합 테스트
+
+| 테스트 케이스 | 설명 |
+|-------------|------|
+| 단일 화면 복제 (같은 회사) | copyScreen() - 동일 회사 내 복제 |
+| 단일 화면 복제 (다른 회사) | copyScreen() - 회사 간 복제 |
+| 메뉴 일괄 복제 | copyScreens() - 여러 화면 동시 복제 |
+| 모달 포함 복제 | copyScreenWithModals() - 메인 + 모달 복제 |
+
+### 6.3 검증 항목
+
+```
+복제 후 확인:
+- [ ] screen_layouts_v2에 레코드 생성됨
+- [ ] componentId가 새로 생성됨
+- [ ] flowId가 정확히 매핑됨
+- [ ] numberingRuleId가 정확히 매핑됨
+- [ ] 탭 컴포넌트의 screenId가 정확히 매핑됨
+- [ ] screen_layouts(Legacy)는 복제되지 않음
+- [ ] 복제된 화면이 프론트엔드에서 정상 로드됨
+- [ ] 복제된 화면 편집/저장 정상 동작
+```
+
+---
+
+## 7. 영향 분석
+
+### 7.1 영향 받는 기능
+
+| 기능 | 영향 | 비고 |
+|-----|-----|-----|
+| 화면 관리 - 화면 복제 | 직접 영향 | copyScreen() |
+| 화면 관리 - 그룹 복제 | 직접 영향 | copyScreenWithModals() |
+| 메뉴 복제 | 직접 영향 | menuCopyService.copyScreens() |
+| 화면 디자이너 | 간접 영향 | 복제된 화면 로드 시 V2 사용 |
+
+### 7.2 롤백 계획
+
+```
+V2 전환 롤백 (필요시):
+1. Git에서 이전 버전 복원 (copyScreen, copyScreens)
+2. Legacy 복제 코드 복원
+3. 테스트 후 배포
+
+주의사항:
+- V2로 복제된 화면들은 screen_layouts_v2에만 데이터 존재
+- 롤백 시 해당 화면들은 screen_layouts에 데이터 없음
+- 필요시 V2 → Legacy 역변환 스크립트 실행
+```
+
+---
+
+## 8. 관련 파일
+
+### 8.1 수정 대상
+
+| 파일 | 변경 내용 |
+|-----|----------|
+| `backend-node/src/services/screenManagementService.ts` | copyLayoutV2(), copyScreen() 수정 |
+| `backend-node/src/services/menuCopyService.ts` | copyScreens() 수정 |
+
+### 8.2 참고 파일
+
+| 파일 | 설명 |
+|-----|-----|
+| `docs/COMPONENT_LAYOUT_V2_ARCHITECTURE.md` | V2 아키텍처 문서 |
+| `frontend/lib/api/screen.ts` | getLayoutV2, saveLayoutV2 |
+| `frontend/lib/utils/layoutV2Converter.ts` | V2 변환 유틸리티 |
+
+---
+
+## 9. 체크리스트
+
+### 9.1 개발 전
+
+- [ ] V2 아키텍처 문서 숙지
+- [ ] 현재 복제 로직 코드 리뷰
+- [ ] 테스트 데이터 준비 (V2 레이아웃이 있는 화면)
+
+### 9.2 Phase 1 완료 조건
+
+- [x] copyLayoutV2() 함수 구현 ✅ 2026-01-28
+- [x] collectReferencesFromLayoutV2() 함수 구현 ✅ 2026-01-28
+- [x] updateReferencesInLayoutV2() 함수 구현 ✅ 2026-01-28
+- [x] copyScreen() - Legacy 제거, V2로 교체 ✅ 2026-01-28
+- [x] copyScreens() - Legacy 제거, V2로 교체 ✅ 2026-01-28
+- [x] hasLayoutChangesV2() 함수 추가 ✅ 2026-01-28
+- [x] updateTabScreenReferences() V2 지원 추가 ✅ 2026-01-28
+- [x] 단위 테스트 통과 ✅ 2026-01-30
+- [x] 통합 테스트 통과 ✅ 2026-01-30
+- [x] V2 전용 복제 동작 확인 ✅ 2026-01-30
+
+### 9.3 Phase 2 완료 조건
+
+- [ ] Legacy 관련 헬퍼 함수 정리
+- [ ] 불필요한 코드 제거
+- [ ] 코드 리뷰 완료
+- [ ] 회귀 테스트 통과
+
+---
+
+## 10. 시뮬레이션 검증 결과
+
+### 10.1 검증된 시나리오
+
+| 시나리오 | 결과 | 비고 |
+|---------|------|------|
+| 같은 회사 내 복제 | ✅ 정상 | componentId만 새로 생성 |
+| 회사 간 복제 (flowId 매핑) | ✅ 정상 | flowIdMap 적용됨 |
+| 회사 간 복제 (ruleId 매핑) | ✅ 정상 | ruleIdMap 적용됨 |
+| 탭 컴포넌트 screenId 매핑 | ✅ 정상 | updateTabScreenReferences V2 지원 추가 |
+| V2 레이아웃 없는 화면 | ✅ 정상 | 스킵 처리 |
+
+### 10.2 발견 및 수정된 문제
+
+| 문제 | 해결 |
+|-----|------|
+| updateTabScreenReferences가 V2 미지원 | V2 처리 로직 추가 완료 |
+
+### 10.3 Zod 활용 가능성
+
+프론트엔드에 이미 훌륭한 Zod 유틸리티 존재:
+- `deepMerge()` - 깊은 병합
+- `extractCustomConfig()` - 차이값 추출
+- `loadComponentV2()` / `saveComponentV2()` - V2 로드/저장
+
+향후 백엔드에도 Zod 추가 시:
+- 타입 안전성 향상
+- 프론트/백엔드 스키마 공유 가능
+- 범용 참조 탐색 로직으로 하드코딩 제거 가능
+
+---
+
+## 11. 변경 이력
+
+| 날짜 | 변경 내용 | 작성자 |
+|-----|----------|-------|
+| 2026-01-28 | 초안 작성 | Claude |
+| 2026-01-28 | V2 완전 전환 전략으로 변경 (병행 운영 → V2 전용) | Claude |
+| 2026-01-28 | Phase 1 구현 완료 - V2 복제 함수들 구현 및 Legacy 교체 | Claude |
+| 2026-01-28 | 시뮬레이션 검증 - updateTabScreenReferences V2 지원 추가 | Claude |
+| 2026-01-28 | V2 경로 지원 추가 - action/sections 직접 경로 (componentConfig 없이) | Claude |
+| 2026-01-30 | **실제 코드 구현 완료** - copyScreen(), copyScreens() V2 전환 | Claude |
+| 2026-01-30 | **Phase 1 테스트 완료** - 단위/통합 테스트 통과 확인 | Claude |
\ No newline at end of file
diff --git a/docs/V2_COMPONENT_MIGRATION_ANALYSIS.md b/docs/V2_COMPONENT_MIGRATION_ANALYSIS.md
new file mode 100644
index 00000000..591e243b
--- /dev/null
+++ b/docs/V2_COMPONENT_MIGRATION_ANALYSIS.md
@@ -0,0 +1,356 @@
+# V2 컴포넌트 마이그레이션 분석 보고서
+
+> 작성일: 2026-01-27  
+> 목적: 미구현 V1 컴포넌트들의 V2 마이그레이션 가능성 분석
+
+---
+
+## 1. 현황 요약
+
+| 구분 | 개수 | 비율 |
+|------|------|------|
+| V1 총 컴포넌트 | 7,170개 | 100% |
+| V2 마이그레이션 완료 | 5,212개 | 72.7% |
+| **미구현 (분석 대상)** | **~520개** | **7.3%** |
+
+---
+
+## 2. 미구현 컴포넌트 상세 분석
+
+### 2.1 ✅ 통합 가능 (기존 V2 컴포넌트로 대체)
+
+#### 2.1.1 `unified-list` (97개) → `v2-table-list`
+
+**분석 결과**: ✅ **통합 가능**
+
+| 항목 | unified-list | v2-table-list |
+|------|-------------|---------------|
+| 테이블 뷰 | ✅ | ✅ |
+| 카드 뷰 | ✅ | ❌ (추가 필요) |
+| 검색 | ✅ | ✅ |
+| 페이지네이션 | ✅ | ✅ |
+| 편집 가능 | ✅ | ✅ |
+
+**결론**: `v2-table-list`에 `cardView` 모드만 추가하면 통합 가능. 또는 DB 마이그레이션으로 `v2-table-list`로 변환.
+
+**작업량**: 중간 (v2-table-list 확장 또는 DB 마이그레이션)
+
+---
+
+#### 2.1.2 `autocomplete-search-input` (50개) → `v2-select`
+
+**분석 결과**: ✅ **통합 가능**
+
+| 항목 | autocomplete-search-input | v2-select |
+|------|--------------------------|-----------|
+| 자동완성 드롭다운 | ✅ | ✅ (mode: autocomplete) |
+| 테이블 데이터 검색 | ✅ | ✅ (dataSource 설정) |
+| 표시/값 필드 분리 | ✅ | ✅ |
+
+**결론**: `v2-select`의 `mode: "autocomplete"` 또는 `mode: "combobox"`로 대체 가능.
+
+**작업량**: 낮음 (DB 마이그레이션만)
+
+---
+
+#### 2.1.3 `repeater-field-group` (24개) → `v2-repeater`
+
+**분석 결과**: ✅ **통합 가능**
+
+`v2-repeater`가 이미 다음을 지원:
+- 인라인 테이블 모드
+- 모달 선택 모드
+- 버튼 모드
+
+**결론**: `v2-repeater`의 `renderMode: "inline"`으로 대체.
+
+**작업량**: 낮음 (DB 마이그레이션만)
+
+---
+
+#### 2.1.4 `simple-repeater-table` (1개) → `v2-repeater`
+
+**분석 결과**: ✅ **통합 가능**
+
+**결론**: `v2-repeater`로 대체.
+
+**작업량**: 매우 낮음
+
+---
+
+### 2.2 ⚠️ Renderer 추가만 필요 (코드 구조 있음)
+
+#### 2.2.1 `split-panel-layout2` (8개)
+
+**분석 결과**: ⚠️ **Renderer 추가 필요**
+
+- V1 Renderer: `SplitPanelLayout2Renderer.tsx` ✅ 존재
+- V2 Renderer: ❌ 없음
+- Component: `SplitPanelLayout2Component.tsx` ✅ 존재
+
+**결론**: V2 형식으로 DB 마이그레이션만 하면 됨 (기존 Renderer가 `split-panel-layout2` ID로 등록됨).
+
+**작업량**: 매우 낮음 (DB 마이그레이션만)
+
+---
+
+#### 2.2.2 `repeat-screen-modal` (7개)
+
+**분석 결과**: ⚠️ **Renderer 추가 필요**
+
+- V1 Renderer: `RepeatScreenModalRenderer.tsx` ✅ 존재
+- 정의: `hidden: true` (v2-repeat-screen-modal 사용으로 패널에서 숨김)
+
+**결론**: 기존 Renderer 사용 가능, DB 마이그레이션만.
+
+**작업량**: 매우 낮음
+
+---
+
+#### 2.2.3 `related-data-buttons` (5개)
+
+**분석 결과**: ⚠️ **Renderer 추가 필요**
+
+- V1 Renderer: `RelatedDataButtonsRenderer.tsx` ✅ 존재
+- Component: `RelatedDataButtonsComponent.tsx` ✅ 존재
+
+**결론**: 기존 Renderer 사용 가능, DB 마이그레이션만.
+
+**작업량**: 매우 낮음
+
+---
+
+### 2.3 ❌ 별도 V2 개발 필요 (복잡한 구조)
+
+#### 2.3.1 `entity-search-input` (99개)
+
+**분석 결과**: ❌ **별도 개발 필요**
+
+**특징**:
+```typescript
+// 모달 기반 엔티티 검색
+- 테이블 선택 (tableName)
+- 검색 필드 설정 (searchFields)
+- 모달 팝업 (modalTitle, modalColumns)
+- 값/표시 필드 분리 (valueField, displayField)
+- 추가 정보 표시 (additionalFields)
+```
+
+**복잡도 요인**:
+1. 모달 검색 UI가 필요
+2. 다양한 테이블 연동
+3. 추가 필드 연계 로직
+
+**권장 방안**: 
+- `v2-entity-search` 새로 개발
+- 또는 `v2-select`에 `mode: "entity"` 추가
+
+**작업량**: 높음 (1-2일)
+
+---
+
+#### 2.3.2 `modal-repeater-table` (68개)
+
+**분석 결과**: ❌ **별도 개발 필요**
+
+**특징**:
+```typescript
+// 모달에서 항목 검색 + 동적 테이블
+- 소스 테이블 (sourceTable, sourceColumns)
+- 모달 검색 (modalTitle, modalButtonText, multiSelect)
+- 동적 컬럼 추가 (columns)
+- 계산 규칙 (calculationRules)
+- 고유 필드 (uniqueField)
+```
+
+**복잡도 요인**:
+1. 모달 검색 + 선택
+2. 동적 테이블 행 추가/삭제
+3. 계산 규칙 (단가 × 수량 = 금액)
+4. 중복 방지 로직
+
+**권장 방안**: 
+- `v2-repeater`의 `modal` 모드 확장
+- `ItemSelectionModal` + `RepeaterTable` 재사용
+
+**작업량**: 중간 (v2-repeater가 이미 기반 제공)
+
+---
+
+#### 2.3.3 `selected-items-detail-input` (83개)
+
+**분석 결과**: ❌ **별도 개발 필요**
+
+**특징**:
+```typescript
+// 선택된 항목들의 상세 입력
+- 데이터 소스 (dataSourceId)
+- 표시 컬럼 (displayColumns)
+- 추가 입력 필드 (additionalFields)
+- 타겟 테이블 (targetTable)
+- 레이아웃 (grid/table)
+```
+
+**복잡도 요인**:
+1. 부모 컴포넌트에서 데이터 수신
+2. 동적 필드 생성
+3. 다중 테이블 저장
+
+**권장 방안**: 
+- `v2-selected-items-detail` 새로 개발
+- 또는 `v2-repeater`에 `mode: "detail-input"` 추가
+
+**작업량**: 중간~높음
+
+---
+
+#### 2.3.4 `conditional-container` (53개)
+
+**분석 결과**: ❌ **별도 개발 필요**
+
+**특징**:
+```typescript
+// 조건부 UI 분기
+- 제어 필드 (controlField, controlLabel)
+- 조건별 섹션 (sections: [{condition, label, screenId}])
+- 기본값 (defaultValue)
+```
+
+**복잡도 요인**:
+1. 셀렉트박스 값에 따른 동적 UI 변경
+2. 화면 임베딩 (screenId)
+3. 상태 관리 복잡
+
+**권장 방안**: 
+- `v2-conditional-container` 새로 개발
+- 조건부 렌더링 + 화면 임베딩 로직
+
+**작업량**: 높음
+
+---
+
+#### 2.3.5 `universal-form-modal` (26개)
+
+**분석 결과**: ❌ **별도 개발 필요**
+
+**특징**:
+```typescript
+// 범용 폼 모달
+- 섹션 기반 레이아웃
+- 반복 섹션
+- 채번규칙 연동
+- 다중 테이블 저장
+```
+
+**복잡도 요인**:
+1. 동적 섹션 구성
+2. 채번규칙 연동
+3. 다중 테이블 저장
+4. 반복 필드 그룹
+
+**권장 방안**: 
+- `v2-universal-form` 새로 개발
+- 또는 기존 컴포넌트 유지 (특수 목적)
+
+**작업량**: 매우 높음 (3일 이상)
+
+---
+
+### 2.4 🟢 V1 유지 권장 (특수 목적)
+
+| 컴포넌트 | 개수 | 이유 |
+|----------|------|------|
+| `tax-invoice-list` | 1 | 세금계산서 전용, 재사용 낮음 |
+| `mail-recipient-selector` | 1 | 메일 전용, 재사용 낮음 |
+| `unified-select` | 5 | → v2-select로 이미 마이그레이션 |
+| `unified-date` | 2 | → v2-date로 이미 마이그레이션 |
+| `unified-repeater` | 2 | → v2-repeater로 이미 마이그레이션 |
+
+---
+
+## 3. 마이그레이션 우선순위 권장
+
+### 3.1 즉시 처리 (1일 이내)
+
+| 순위 | 컴포넌트 | 개수 | 작업 |
+|------|----------|------|------|
+| 1 | `split-panel-layout2` | 8 | DB 마이그레이션만 |
+| 2 | `repeat-screen-modal` | 7 | DB 마이그레이션만 |
+| 3 | `related-data-buttons` | 5 | DB 마이그레이션만 |
+| 4 | `autocomplete-search-input` | 50 | → v2-select 변환 |
+| 5 | `repeater-field-group` | 24 | → v2-repeater 변환 |
+
+**총: 94개 컴포넌트**
+
+---
+
+### 3.2 단기 처리 (1주 이내)
+
+| 순위 | 컴포넌트 | 개수 | 작업 |
+|------|----------|------|------|
+| 1 | `unified-list` | 97 | → v2-table-list 확장 또는 변환 |
+| 2 | `modal-repeater-table` | 68 | v2-repeater modal 모드 확장 |
+
+**총: 165개 컴포넌트**
+
+---
+
+### 3.3 중기 처리 (2주 이상)
+
+| 순위 | 컴포넌트 | 개수 | 작업 |
+|------|----------|------|------|
+| 1 | `entity-search-input` | 99 | v2-entity-search 신규 개발 |
+| 2 | `selected-items-detail-input` | 83 | v2-selected-items-detail 개발 |
+| 3 | `conditional-container` | 53 | v2-conditional-container 개발 |
+| 4 | `universal-form-modal` | 26 | v2-universal-form 개발 |
+
+**총: 261개 컴포넌트**
+
+---
+
+## 4. 권장 아키텍처
+
+### 4.1 V2 컴포넌트 통합 계획
+
+```
+v2-input          ← text-input, number-input, textarea, unified-input ✅ 완료
+v2-select         ← select-basic, checkbox, radio, autocomplete ⚠️ 진행중
+v2-date           ← date-input, unified-date ✅ 완료
+v2-media          ← file-upload, image-widget ✅ 완료
+v2-table-list     ← table-list, unified-list ⚠️ 확장 필요
+v2-repeater       ← repeater-field-group, modal-repeater-table, 
+                    simple-repeater-table, related-data-buttons ⚠️ 진행중
+v2-entity-search  ← entity-search-input (신규 개발 필요)
+v2-conditional    ← conditional-container (신규 개발 필요)
+```
+
+---
+
+## 5. 결론
+
+### 즉시 처리 가능 (Renderer/DB만)
+- `split-panel-layout2`, `repeat-screen-modal`, `related-data-buttons`: **20개**
+- `autocomplete-search-input` → `v2-select`: **50개**
+- `repeater-field-group` → `v2-repeater`: **24개**
+
+### 통합 검토 필요
+- `unified-list` → `v2-table-list` 확장: **97개**
+- `modal-repeater-table` → `v2-repeater` 확장: **68개**
+
+### 신규 개발 필요
+- `entity-search-input`: **99개** (복잡도 높음)
+- `selected-items-detail-input`: **83개**
+- `conditional-container`: **53개**
+- `universal-form-modal`: **26개**
+
+### 유지
+- 특수 목적 컴포넌트: **3개** (tax-invoice-list, mail-recipient-selector)
+
+---
+
+## 6. 다음 단계
+
+1. **즉시**: `split-panel-layout2`, `repeat-screen-modal`, `related-data-buttons` DB 마이그레이션
+2. **이번 주**: `autocomplete-search-input` → `v2-select`, `repeater-field-group` → `v2-repeater` 변환
+3. **다음 주**: `unified-list`, `modal-repeater-table` 통합 설계
+4. **이후**: `entity-search-input`, `conditional-container` 신규 개발 계획 수립
diff --git a/docs/V2_컴포넌트_분석_가이드.md b/docs/V2_컴포넌트_분석_가이드.md
new file mode 100644
index 00000000..451cf602
--- /dev/null
+++ b/docs/V2_컴포넌트_분석_가이드.md
@@ -0,0 +1,1077 @@
+# V2 컴포넌트 분석 가이드
+
+## 개요
+
+V2 컴포넌트는 **화면관리 시스템 전용**으로 개발된 컴포넌트 세트입니다. 기존 컴포넌트와의 충돌을 방지하고, 새로운 기능(엔티티 조인, 다국어 지원, 커스텀 테이블 등)을 지원합니다.
+
+### 핵심 원칙
+
+- 모든 V2 컴포넌트는 `v2-` 접두사를 사용
+- 원본 컴포넌트는 기존 화면 호환성 유지용으로 보존
+- 새로운 화면 개발 시 반드시 V2 컴포넌트만 사용
+- Definition 이름에 `V2` 접두사 사용 (예: `V2TableListDefinition`)
+
+### 파일 경로
+
+```
+frontend/lib/registry/components/
+├── v2-button-primary/          ← V2 컴포넌트 (수정 대상)
+├── v2-table-list/              ← V2 컴포넌트 (수정 대상)
+├── v2-split-panel-layout/      ← V2 컴포넌트 (수정 대상)
+├── ...
+├── button-primary/             ← 원본 (수정 금지)
+├── table-list/                 ← 원본 (수정 금지)
+└── ...
+```
+
+---
+
+## V2 컴포넌트 목록 (18개)
+
+| 컴포넌트 ID | 이름 | 카테고리 | 용도 |
+|------------|------|----------|------|
+| `v2-table-list` | 테이블 리스트 | DISPLAY | 데이터 목록 표시 (테이블/카드 모드) |
+| `v2-table-grouped` | 그룹화 테이블 | DISPLAY | **NEW** 그룹별 접기/펼치기 테이블 |
+| `v2-split-panel-layout` | 분할 패널 | DISPLAY | 마스터-디테일 레이아웃 |
+| `v2-unified-repeater` | 통합 리피터 | UNIFIED | 반복 데이터 관리 (인라인/모달/버튼) |
+| `v2-pivot-grid` | 피벗 그리드 | DISPLAY | 다차원 데이터 분석 피벗 테이블 |
+| `v2-button-primary` | 기본 버튼 | ACTION | 저장/삭제 등 액션 버튼 |
+| `v2-text-display` | 텍스트 표시 | DISPLAY | 텍스트/라벨 표시 |
+| `v2-divider-line` | 구분선 | DISPLAY | 시각적 구분선 |
+| `v2-card-display` | 카드 디스플레이 | DISPLAY | 카드 형태 데이터 표시 |
+| `v2-numbering-rule` | 채번 규칙 | DISPLAY | 코드 자동 채번 설정 |
+| `v2-table-search-widget` | 검색 필터 | DISPLAY | 테이블 검색/필터 위젯 |
+| `v2-section-paper` | 섹션 페이퍼 | LAYOUT | 섹션 구분 컨테이너 |
+| `v2-section-card` | 섹션 카드 | LAYOUT | 카드형 섹션 컨테이너 |
+| `v2-tabs-widget` | 탭 위젯 | LAYOUT | 탭 기반 콘텐츠 전환 |
+| `v2-location-swap-selector` | 위치 선택 | INPUT | 출발지/도착지 스왑 선택 |
+| `v2-rack-structure` | 렉 구조 | DISPLAY | 창고 렉 시각화 |
+| `v2-aggregation-widget` | 집계 위젯 | DISPLAY | 데이터 집계 (합계/평균/개수) |
+| `v2-repeat-container` | 리피터 컨테이너 | LAYOUT | 데이터 수만큼 반복 렌더링 |
+
+---
+
+## 주요 컴포넌트 상세 분석
+
+### 1. v2-table-list (테이블 리스트)
+
+**용도**: 데이터베이스 테이블 데이터를 테이블/카드 형태로 표시
+
+#### 주요 특징
+
+- 테이블 모드 / 카드 모드 전환 가능
+- 페이지네이션, 정렬, 필터링 지원
+- 체크박스 선택 (단일/다중)
+- 가로 스크롤 및 컬럼 고정
+- 엔티티 조인 컬럼 지원
+- 인라인 편집 기능
+- Excel 내보내기
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    v2-table-list                            │
+├─────────────────────────────────────────────────────────────┤
+│  ① config.selectedTable / customTableName 확인              │
+│           ↓                                                  │
+│  ② tableTypeApi.getData() 호출                              │
+│           ↓                                                  │
+│  ③ entityJoinApi.getEntityJoinColumns() 조인 컬럼 로드      │
+│           ↓                                                  │
+│  ④ 데이터 + 조인 데이터 병합                                │
+│           ↓                                                  │
+│  ⑤ 테이블/카드 모드로 렌더링                                │
+│           ↓                                                  │
+│  ⑥ onRowClick / onSelectionChange 이벤트 발생              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface TableListConfig {
+  // 표시 모드
+  displayMode: "table" | "card";
+  
+  // 커스텀 테이블 설정
+  customTableName?: string;               // 커스텀 테이블
+  useCustomTable?: boolean;               // 커스텀 테이블 사용 여부
+  isReadOnly?: boolean;                   // 읽기전용
+  
+  // 컬럼 설정
+  columns: ColumnConfig[];
+  
+  // 페이지네이션
+  pagination: {
+    enabled: boolean;
+    pageSize: number;
+    showSizeSelector: boolean;
+    pageSizeOptions: number[];
+  };
+  
+  // 체크박스
+  checkbox: {
+    enabled: boolean;
+    multiple: boolean;                    // true: 체크박스, false: 라디오
+    position: "left" | "right";
+    selectAll: boolean;
+  };
+  
+  // 필터
+  filter: {
+    enabled: boolean;
+    filters: FilterConfig[];
+  };
+  
+  // 연결된 필터 (다른 컴포넌트 값으로 필터링)
+  linkedFilters?: LinkedFilterConfig[];
+  
+  // 제외 필터 (다른 테이블에 존재하는 데이터 제외)
+  excludeFilter?: ExcludeFilterConfig;
+  
+  // 가로 스크롤 설정
+  horizontalScroll: {
+    enabled: boolean;
+    maxVisibleColumns?: number;
+    minColumnWidth?: number;
+    maxColumnWidth?: number;
+  };
+}
+```
+
+#### 컬럼 설정
+
+```typescript
+interface ColumnConfig {
+  columnName: string;                     // 컬럼명
+  displayName: string;                    // 표시명
+  visible: boolean;                       // 표시 여부
+  sortable: boolean;                      // 정렬 가능
+  searchable: boolean;                    // 검색 가능
+  width?: number;                         // 너비
+  align: "left" | "center" | "right";     // 정렬
+  format?: "text" | "number" | "date" | "currency" | "boolean";
+  
+  // 엔티티 조인
+  isEntityJoin?: boolean;                 // 조인 컬럼 여부
+  entityJoinInfo?: {
+    sourceTable: string;
+    sourceColumn: string;
+    joinAlias: string;
+  };
+  
+  // 컬럼 고정
+  fixed?: "left" | "right" | false;
+  
+  // 자동생성
+  autoGeneration?: {
+    type: "uuid" | "current_user" | "current_time" | "sequence" | "numbering_rule";
+    enabled: boolean;
+  };
+  
+  // 편집 가능 여부
+  editable?: boolean;
+}
+```
+
+---
+
+### 2. v2-split-panel-layout (분할 패널)
+
+**용도**: 마스터-디테일 패턴의 좌우 분할 레이아웃
+
+#### 주요 특징
+
+- 좌측: 마스터 목록 (리스트/테이블/커스텀 모드)
+- 우측: 디테일 정보 (연관 데이터)
+- 좌우 비율 조절 가능 (드래그 리사이즈)
+- 다중 탭 지원 (우측 패널)
+- N:M 관계 데이터 지원
+- 중복 제거 기능
+- **커스텀 모드 (NEW)**: 패널 내부에 자유롭게 컴포넌트 배치
+
+#### 커스텀 모드 (displayMode: "custom")
+
+패널 내부에 다양한 컴포넌트를 자유롭게 배치할 수 있는 모드입니다. **v2-tabs-widget과 동일한 구조**로 구현되어 있습니다.
+
+**특징:**
+- 패널 내부에 버튼, 테이블, 입력 필드 등 모든 V2 컴포넌트 배치 가능
+- 드래그앤드롭으로 컴포넌트 이동
+- 리사이즈 핸들로 크기 조절
+- **컴포넌트 클릭 시 좌측 설정 패널에서 해당 컴포넌트 속성 편집**
+- 디자인 모드에서 실제 컴포넌트가 렌더링되어 미리보기 가능
+
+**사용 방법:**
+1. 좌측/우측 패널의 `displayMode`를 `"custom"`으로 설정
+2. 컴포넌트 팔레트에서 원하는 컴포넌트를 패널로 드래그
+3. 배치된 컴포넌트 클릭 → 좌측 패널에서 속성 편집
+4. 드래그 핸들(상단)로 이동, 모서리 핸들로 크기 조절
+
+**컴포넌트 구조:**
+```typescript
+interface PanelInlineComponent {
+  id: string;
+  componentType: string;
+  label?: string;
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+  componentConfig?: Record<string, any>;
+  style?: Record<string, any>;
+}
+```
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  v2-split-panel-layout                       │
+├─────────────────────────────────────────────────────────────┤
+│  ┌──────────────┐          ┌──────────────────────┐         │
+│  │  좌측 패널    │ ───────→ │      우측 패널        │         │
+│  │  (마스터)     │ 선택 이벤트│      (디테일)        │         │
+│  └──────────────┘          └──────────────────────┘         │
+│         │                            │                       │
+│         ↓                            ↓                       │
+│  leftPanel.tableName          rightPanel.tableName          │
+│  leftPanel.columns            rightPanel.relation           │
+│         │                            │                       │
+│         ↓                            ↓                       │
+│  좌측 데이터 조회 ─────────→ 관계 설정에 따라 우측 필터링      │
+│  (독립 API 호출)              (FK/조인 키 기반)              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface SplitPanelLayoutConfig {
+  // 좌측 패널
+  leftPanel: {
+    title: string;
+    tableName?: string;
+    useCustomTable?: boolean;
+    customTableName?: string;
+    displayMode?: "list" | "table" | "custom";  // 🆕 커스텀 모드 추가
+    showSearch?: boolean;
+    showAdd?: boolean;
+    showEdit?: boolean;
+    showDelete?: boolean;
+    columns?: ColumnConfig[];
+    tableConfig?: TableDisplayConfig;
+    dataFilter?: DataFilterConfig;
+    
+    // 🆕 커스텀 모드 전용: 내부 컴포넌트 배열
+    components?: PanelInlineComponent[];
+  };
+  
+  // 우측 패널
+  rightPanel: {
+    title: string;
+    tableName?: string;
+    displayMode?: "list" | "table" | "custom";  // 🆕 커스텀 모드 추가
+    columns?: ColumnConfig[];
+    
+    // 🆕 커스텀 모드 전용: 내부 컴포넌트 배열
+    components?: PanelInlineComponent[];
+    
+    // 관계 설정
+    relation?: {
+      type?: "join" | "detail";
+      leftColumn?: string;              // 좌측 조인 컬럼
+      rightColumn?: string;             // 우측 조인 컬럼
+      foreignKey?: string;              // FK 컬럼
+      keys?: Array<{                    // 복합키 지원
+        leftColumn: string;
+        rightColumn: string;
+      }>;
+    };
+    
+    // 추가 설정 (N:M 관계)
+    addConfig?: {
+      targetTable?: string;             // 실제 INSERT 테이블
+      autoFillColumns?: Record<string, any>;
+      leftPanelColumn?: string;
+      targetColumn?: string;
+    };
+    
+    // 중복 제거
+    deduplication?: {
+      enabled: boolean;
+      groupByColumn: string;
+      keepStrategy: "latest" | "earliest" | "base_price" | "current_date";
+    };
+    
+    // 추가 탭
+    additionalTabs?: AdditionalTabConfig[];
+  };
+  
+  // 레이아웃
+  splitRatio?: number;                  // 좌우 비율 (0-100)
+  resizable?: boolean;                  // 크기 조절 가능
+  minLeftWidth?: number;
+  minRightWidth?: number;
+  
+  // 동작
+  autoLoad?: boolean;
+  syncSelection?: boolean;
+}
+```
+
+---
+
+### 3. v2-unified-repeater (통합 리피터)
+
+**용도**: 반복 데이터 관리 (기존 여러 리피터 통합)
+
+#### 주요 특징
+
+- 3가지 렌더링 모드: 인라인/모달/버튼
+- 마스터-디테일 FK 자동 연결
+- 저장 테이블 분리 가능
+- 행 추가/삭제, 드래그 정렬
+- 선택 기능 (단일/다중)
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                   v2-unified-repeater                        │
+├─────────────────────────────────────────────────────────────┤
+│  ① 마스터 저장 이벤트 수신 (repeaterSave)                   │
+│           ↓                                                  │
+│  ② masterRecordId 전달받음                                  │
+│           ↓                                                  │
+│  ③ foreignKeyColumn에 masterRecordId 자동 설정             │
+│           ↓                                                  │
+│  ④ dataSource.tableName으로 데이터 저장                     │
+│           ↓                                                  │
+│  ⑤ 저장 완료 후 onDataChange 이벤트 발생                   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface UnifiedRepeaterConfig {
+  // 렌더링 모드
+  renderMode: "inline" | "modal" | "button" | "mixed";
+  
+  // 데이터 소스
+  dataSource: {
+    tableName: string;                  // 저장 테이블
+    foreignKey: string;                 // FK 컬럼
+    referenceKey: string;               // 참조할 PK 컬럼
+  };
+  
+  // 컬럼 설정
+  columns: ColumnConfig[];
+  
+  // 모달 설정
+  modal: {
+    size: "sm" | "md" | "lg" | "xl";
+  };
+  
+  // 버튼 설정
+  button: {
+    sourceType: "manual" | "auto";
+    manualButtons: ButtonConfig[];
+    layout: "horizontal" | "vertical";
+    style: "outline" | "solid";
+  };
+  
+  // 기능 설정
+  features: {
+    showAddButton: boolean;
+    showDeleteButton: boolean;
+    inlineEdit: boolean;
+    dragSort: boolean;
+    showRowNumber: boolean;
+    selectable: boolean;
+    multiSelect: boolean;
+  };
+}
+```
+
+#### 데이터 전달 인터페이스
+
+v2-unified-repeater는 **DataProvidable**과 **DataReceivable** 인터페이스를 구현하여 다른 컴포넌트와 데이터를 주고받을 수 있습니다.
+
+**DataProvidable 구현**:
+
+```typescript
+// 다른 컴포넌트에서 이 리피터의 데이터를 가져갈 수 있음
+const dataProvider: DataProvidable = {
+  componentId: parentId || config.fieldName || "unified-repeater",
+  componentType: "unified-repeater",
+  
+  // 선택된 행 데이터 반환
+  getSelectedData: () => {
+    return Array.from(selectedRows).map((idx) => data[idx]).filter(Boolean);
+  },
+  
+  // 전체 데이터 반환
+  getAllData: () => {
+    return [...data];
+  },
+  
+  // 선택 초기화
+  clearSelection: () => {
+    setSelectedRows(new Set());
+  },
+};
+```
+
+**DataReceivable 구현**:
+
+```typescript
+// 외부에서 이 리피터로 데이터를 전달받을 수 있음
+const dataReceiver: DataReceivable = {
+  componentId: parentId || config.fieldName || "unified-repeater",
+  componentType: "repeater",
+  
+  // 데이터 수신 (append, replace, merge 모드 지원)
+  receiveData: async (incomingData: any[], config: DataReceiverConfig) => {
+    // 매핑 규칙 적용 후 모드에 따라 처리
+    switch (config.mode) {
+      case "replace": setData(mappedData); break;
+      case "merge": /* 중복 제거 후 병합 */ break;
+      case "append": /* 기존 데이터에 추가 */ break;
+    }
+  },
+  
+  // 현재 데이터 반환
+  getData: () => [...data],
+};
+```
+
+**ScreenContext 자동 등록**:
+
+```typescript
+// 컴포넌트 마운트 시 ScreenContext에 자동 등록
+useEffect(() => {
+  if (screenContext && componentId) {
+    screenContext.registerDataProvider(componentId, dataProvider);
+    screenContext.registerDataReceiver(componentId, dataReceiver);
+    
+    return () => {
+      screenContext.unregisterDataProvider(componentId);
+      screenContext.unregisterDataReceiver(componentId);
+    };
+  }
+}, [screenContext, componentId]);
+```
+
+#### V2 이벤트 시스템
+
+**발행 이벤트**:
+
+| 이벤트 | 발행 시점 | 데이터 |
+|--------|----------|--------|
+| `repeaterDataChange` | 데이터 변경 시 | `{ componentId, tableName, data, selectedData }` |
+
+```typescript
+// 데이터 변경 시 V2 표준 이벤트 발행
+import { V2_EVENTS, dispatchV2Event } from "@/types/component-events";
+
+useEffect(() => {
+  if (data.length !== prevDataLengthRef.current) {
+    dispatchV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, {
+      componentId: parentId || config.fieldName || "unified-repeater",
+      tableName: config.dataSource?.tableName || "",
+      data: data,
+      selectedData: Array.from(selectedRows).map((idx) => data[idx]).filter(Boolean),
+    });
+  }
+}, [data, selectedRows]);
+```
+
+**구독 이벤트**:
+
+| 이벤트 | 용도 |
+|--------|------|
+| `beforeFormSave` | 저장 전 데이터 수집 |
+| `repeaterSave` | 마스터 저장 후 FK 설정 |
+| `componentDataTransfer` | 컴포넌트 간 데이터 전달 수신 |
+| `splitPanelDataTransfer` | 분할 패널 간 데이터 전달 수신 |
+
+---
+
+### 4. v2-pivot-grid (피벗 그리드)
+
+**용도**: 다차원 데이터 분석용 피벗 테이블
+
+#### 주요 특징
+
+- 행/열/데이터/필터 영역 드래그앤드롭
+- 다양한 집계 함수 (합계, 평균, 개수, 최대, 최소, 고유 개수)
+- 소계/총계 표시 (위치 설정 가능)
+- 조건부 서식 (색상 스케일, 데이터 바, 아이콘)
+- 차트 연동
+- Excel 내보내기
+- 날짜 그룹화 (연/분기/월/주/일)
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     v2-pivot-grid                            │
+├─────────────────────────────────────────────────────────────┤
+│  ① dataSource 설정 (테이블/API/정적 데이터)                 │
+│           ↓                                                  │
+│  ② fields 설정 (행/열/데이터 필드 배치)                     │
+│           ↓                                                  │
+│  ③ processPivotData() 로 피벗 계산                         │
+│           ↓                                                  │
+│  ④ 집계 함수 적용 (sum, avg, count 등)                     │
+│           ↓                                                  │
+│  ⑤ PivotResult 생성 (rowHeaders, columnHeaders, dataMatrix)│
+│           ↓                                                  │
+│  ⑥ 조건부 서식 적용 후 렌더링                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface PivotGridComponentConfig {
+  // 데이터 소스
+  dataSource?: {
+    type: "table" | "api" | "static";
+    tableName?: string;
+    apiEndpoint?: string;
+    staticData?: any[];
+    filterConditions?: FilterCondition[];
+    joinConfigs?: JoinConfig[];
+  };
+  
+  // 필드 설정
+  fields?: Array<{
+    field: string;                      // 데이터 필드명
+    caption: string;                    // 표시 라벨
+    area: "row" | "column" | "data" | "filter";
+    areaIndex?: number;                 // 영역 내 순서
+    
+    // 집계 (data 영역용)
+    summaryType?: "sum" | "count" | "avg" | "min" | "max" | "countDistinct";
+    
+    // 날짜 그룹화
+    groupInterval?: "year" | "quarter" | "month" | "week" | "day";
+    
+    // 포맷
+    format?: {
+      type: "number" | "currency" | "percent" | "date" | "text";
+      precision?: number;
+      thousandSeparator?: boolean;
+      prefix?: string;
+      suffix?: string;
+    };
+  }>;
+  
+  // 총합계 설정
+  totals?: {
+    showRowGrandTotals?: boolean;
+    showRowTotals?: boolean;
+    showColumnGrandTotals?: boolean;
+    showColumnTotals?: boolean;
+    rowGrandTotalPosition?: "top" | "bottom";
+    columnGrandTotalPosition?: "left" | "right";
+  };
+  
+  // 스타일
+  style?: {
+    theme: "default" | "compact" | "modern";
+    alternateRowColors?: boolean;
+    highlightTotals?: boolean;
+    conditionalFormats?: ConditionalFormatRule[];
+  };
+  
+  // 필드 선택기
+  fieldChooser?: {
+    enabled: boolean;
+    allowSearch?: boolean;
+  };
+  
+  // 차트 연동
+  chart?: {
+    enabled: boolean;
+    type: "bar" | "line" | "area" | "pie" | "stackedBar";
+    position: "top" | "bottom" | "left" | "right";
+  };
+}
+```
+
+---
+
+### 5. v2-aggregation-widget (집계 위젯)
+
+**용도**: 데이터 집계 결과 표시 (합계, 평균, 개수 등)
+
+#### 주요 특징
+
+- 다양한 집계 타입 (SUM, AVG, COUNT, MIN, MAX)
+- 필터링 지원 (폼 데이터 연동)
+- 가로/세로 레이아웃
+- 아이콘 표시
+- 폼 변경 시 자동 새로고침
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  v2-aggregation-widget                       │
+├─────────────────────────────────────────────────────────────┤
+│  ① dataSourceType 확인 (table / repeater)                  │
+│           ↓                                                  │
+│  ② filters 적용 (필터 조건 구성)                           │
+│           ↓                                                  │
+│  ③ items 순회하며 각 집계 함수 실행                        │
+│           ↓                                                  │
+│  ④ 집계 결과 포맷팅 (천단위 구분, 접두사/접미사)           │
+│           ↓                                                  │
+│  ⑤ layout에 따라 렌더링 (horizontal / vertical)           │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface AggregationWidgetConfig {
+  // 데이터 소스
+  dataSourceType: "table" | "repeater";
+  
+  // 집계 항목
+  items: Array<{
+    id: string;
+    label: string;
+    columnName: string;
+    aggregationType: "sum" | "avg" | "count" | "min" | "max";
+    format?: {
+      prefix?: string;
+      suffix?: string;
+      thousandSeparator?: boolean;
+      decimalPlaces?: number;
+    };
+    icon?: string;
+    color?: string;
+  }>;
+  
+  // 필터 조건
+  filters: Array<{
+    column: string;
+    operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN";
+    value?: any;
+    valueSource?: "static" | "formData" | "url";
+    valueField?: string;
+  }>;
+  filterLogic: "AND" | "OR";
+  
+  // 레이아웃
+  layout: "horizontal" | "vertical";
+  gap: string;
+  
+  // 스타일
+  showLabels: boolean;
+  showIcons: boolean;
+  backgroundColor: string;
+  borderRadius: string;
+  padding: string;
+  
+  // 동작
+  autoRefresh: boolean;
+  refreshOnFormChange: boolean;
+}
+```
+
+#### V2 이벤트 시스템
+
+v2-aggregation-widget은 V2 표준 이벤트 시스템을 사용하여 다른 컴포넌트의 데이터 변경을 감지합니다.
+
+**구독 이벤트**:
+
+| 이벤트 | 용도 | 발행자 |
+|--------|------|--------|
+| `tableListDataChange` | 테이블 데이터 변경 시 집계 갱신 | v2-table-list |
+| `repeaterDataChange` | 리피터 데이터 변경 시 집계 갱신 | v2-unified-repeater |
+
+```typescript
+import { V2_EVENTS, subscribeV2Event, type TableListDataChangeDetail, type RepeaterDataChangeDetail } from "@/types/component-events";
+
+useEffect(() => {
+  // 테이블 리스트 데이터 변경 이벤트 구독
+  const unsubscribeTableList = subscribeV2Event(
+    V2_EVENTS.TABLE_LIST_DATA_CHANGE,
+    (event: CustomEvent<TableListDataChangeDetail>) => {
+      const { data } = event.detail;
+      // 필터 적용 후 집계 재계산
+      const filteredData = applyFilters(data, filters, filterLogic, formData, selectedRows);
+      setData(filteredData);
+    }
+  );
+
+  // 리피터 데이터 변경 이벤트 구독
+  const unsubscribeRepeater = subscribeV2Event(
+    V2_EVENTS.REPEATER_DATA_CHANGE,
+    (event: CustomEvent<RepeaterDataChangeDetail>) => {
+      const { data, selectedData } = event.detail;
+      const rows = selectedData || data || [];
+      const filteredData = applyFilters(rows, filters, filterLogic, formData, selectedRows);
+      setData(filteredData);
+    }
+  );
+
+  return () => {
+    unsubscribeTableList();
+    unsubscribeRepeater();
+  };
+}, [dataSourceType, isDesignMode, filterLogic]);
+```
+
+**참고**: 이전에 사용하던 중복 이벤트(`selectionChange`, `tableSelectionChange`, `rowSelectionChange` 등)는 제거되었습니다. V2 표준 이벤트만 사용합니다.
+
+---
+
+### 6. v2-table-search-widget (검색 필터)
+
+**용도**: 테이블 데이터 검색 및 필터링
+
+#### 주요 특징
+
+- 동적/고정 필터 모드
+- 다중 테이블 지원
+- 탭별 필터 값 저장
+- 텍스트/숫자/날짜/셀렉트 필터 타입
+- 다중선택 지원
+- 대상 패널 지정 가능
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                 v2-table-search-widget                       │
+├─────────────────────────────────────────────────────────────┤
+│  ① TableOptionsContext에서 등록된 테이블 목록 조회          │
+│           ↓                                                  │
+│  ② targetPanelPosition에 따라 대상 테이블 필터링            │
+│           ↓                                                  │
+│  ③ 활성 필터 목록 로드 (localStorage에서 복원)              │
+│           ↓                                                  │
+│  ④ 필터 값 입력 → handleFilterChange()                     │
+│           ↓                                                  │
+│  ⑤ currentTable.onFilterChange(filters) 호출               │
+│           ↓                                                  │
+│  ⑥ 연결된 테이블이 자동으로 데이터 재조회                  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface TableSearchWidgetConfig {
+  // 자동 선택
+  autoSelectFirstTable?: boolean;
+  showTableSelector?: boolean;
+  
+  // 필터 모드
+  filterMode?: "dynamic" | "preset";
+  
+  // 고정 필터 (preset 모드)
+  presetFilters?: Array<{
+    id: string;
+    columnName: string;
+    columnLabel: string;
+    filterType: "text" | "number" | "date" | "select";
+    width?: number;
+    multiSelect?: boolean;
+  }>;
+  
+  // 대상 패널 위치
+  targetPanelPosition?: "left" | "right" | "auto";
+}
+```
+
+---
+
+### 7. v2-repeat-container (리피터 컨테이너)
+
+**용도**: 데이터 수만큼 내부 컴포넌트를 반복 렌더링
+
+#### 주요 특징
+
+- 수동/테이블/리피터 데이터 소스
+- 세로/가로/그리드 레이아웃
+- 페이징 지원
+- 클릭 이벤트 (단일/다중 선택)
+- 아이템 제목 템플릿
+
+#### 데이터 흐름
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  v2-repeat-container                         │
+├─────────────────────────────────────────────────────────────┤
+│  ① dataSourceType에 따라 데이터 로드                        │
+│     - manual: 수동 입력 데이터                              │
+│     - table: DB 테이블에서 조회                             │
+│     - repeater: 리피터 컴포넌트 데이터                      │
+│           ↓                                                  │
+│  ② layout에 따라 배치 (vertical / horizontal / grid)       │
+│           ↓                                                  │
+│  ③ 각 아이템에 대해 children 렌더링                        │
+│     (RepeatItemContext로 현재 아이템 데이터 전달)           │
+│           ↓                                                  │
+│  ④ 클릭 시 선택 상태 관리 (selectionMode: single/multi)   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+#### 주요 설정 인터페이스
+
+```typescript
+interface RepeatContainerConfig {
+  // 데이터 소스
+  dataSourceType: "manual" | "table" | "repeater";
+  tableName?: string;
+  repeaterComponentId?: string;
+  manualData?: any[];
+  
+  // 레이아웃
+  layout: "vertical" | "horizontal" | "grid";
+  gridColumns: number;
+  gap: string;
+  
+  // 스타일
+  showBorder: boolean;
+  showShadow: boolean;
+  borderRadius: string;
+  backgroundColor: string;
+  padding: string;
+  
+  // 아이템 제목
+  showItemTitle: boolean;
+  itemTitleTemplate: string;              // 예: "${name} - ${code}"
+  titleFontSize: string;
+  titleColor: string;
+  titleFontWeight: string;
+  
+  // 빈 상태
+  emptyMessage: string;
+  
+  // 페이징
+  usePaging: boolean;
+  pageSize: number;
+  
+  // 선택
+  clickable: boolean;
+  showSelectedState: boolean;
+  selectionMode: "single" | "multi";
+}
+```
+
+#### V2 이벤트 시스템
+
+v2-repeat-container는 V2 표준 이벤트 시스템을 사용하여 다른 컴포넌트의 데이터 변경을 감지하고 반복 렌더링합니다.
+
+**구독 이벤트**:
+
+| 이벤트 | 용도 | 발행자 |
+|--------|------|--------|
+| `tableListDataChange` | 테이블 데이터 변경 시 반복 항목 갱신 | v2-table-list |
+| `repeaterDataChange` | 리피터 데이터 변경 시 반복 항목 갱신 | v2-unified-repeater |
+
+```typescript
+import { V2_EVENTS, subscribeV2Event, type TableListDataChangeDetail, type RepeaterDataChangeDetail } from "@/types/component-events";
+
+useEffect(() => {
+  // 공통 데이터 처리 함수
+  const processIncomingData = (componentId: string | undefined, tableName: string | undefined, eventData: any[]) => {
+    // dataSourceComponentId가 설정된 경우 해당 컴포넌트만 매칭
+    if (dataSourceComponentId && componentId === dataSourceComponentId) {
+      setData(eventData);
+      setCurrentPage(1);
+      setSelectedIndices([]);
+    }
+    // 테이블명으로 매칭
+    else if (effectiveTableName && tableName === effectiveTableName) {
+      setData(eventData);
+      setCurrentPage(1);
+      setSelectedIndices([]);
+    }
+  };
+
+  // V2 표준 이벤트 구독
+  const unsubscribeTableList = subscribeV2Event(V2_EVENTS.TABLE_LIST_DATA_CHANGE, (event) => {
+    const { componentId, tableName, data } = event.detail;
+    processIncomingData(componentId, tableName, data);
+  });
+
+  const unsubscribeRepeater = subscribeV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, (event) => {
+    const { componentId, tableName, data } = event.detail;
+    processIncomingData(componentId, tableName, data);
+  });
+
+  return () => {
+    unsubscribeTableList();
+    unsubscribeRepeater();
+  };
+}, [dataSourceComponentId, effectiveTableName, isDesignMode]);
+```
+
+---
+
+## 공통 데이터 흐름 패턴
+
+### 1. 엔티티 조인 데이터 로드
+
+모든 테이블 기반 V2 컴포넌트는 엔티티 조인을 지원합니다.
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    엔티티 조인 흐름                          │
+├─────────────────────────────────────────────────────────────┤
+│  ① entityJoinApi.getEntityJoinColumns(tableName)           │
+│           ↓                                                  │
+│  ② 응답: { joinTables, availableColumns }                  │
+│           ↓                                                  │
+│  ③ ConfigPanel에서 조인 컬럼 선택                          │
+│           ↓                                                  │
+│  ④ entityJoinApi.getTableDataWithJoins() 데이터 조회       │
+│           ↓                                                  │
+│  ⑤ "테이블명.컬럼명" 형식으로 조인 데이터 포함             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 2. 폼 데이터 관리
+
+V2 컴포넌트는 통합 폼 시스템(UnifiedFormContext)을 사용합니다.
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    폼 데이터 흐름                            │
+├─────────────────────────────────────────────────────────────┤
+│  ① 컴포넌트에서 useFormCompatibility() 훅 사용             │
+│           ↓                                                  │
+│  ② getValue(fieldName) - 값 읽기                           │
+│  ③ setValue(fieldName, value) - 값 설정                    │
+│           ↓                                                  │
+│  ④ 값 변경이 전체 폼 시스템에 전파                         │
+│           ↓                                                  │
+│  ⑤ 저장 버튼 클릭 시 beforeFormSave 이벤트 발생            │
+│           ↓                                                  │
+│  ⑥ 모든 컴포넌트가 현재 값을 formData에 추가               │
+│           ↓                                                  │
+│  ⑦ API 호출하여 저장                                       │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 3. 컴포넌트 간 통신
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                   컴포넌트 간 통신                           │
+├─────────────────────────────────────────────────────────────┤
+│                                                              │
+│  ┌──────────────┐         ┌──────────────┐                  │
+│  │ 버튼 컴포넌트 │ ──────→ │ 리피터 컴포넌트│                  │
+│  │              │ repeater│              │                  │
+│  │ v2-button    │ Save    │ v2-unified-  │                  │
+│  │ -primary     │ 이벤트   │ repeater     │                  │
+│  └──────────────┘         └──────────────┘                  │
+│         │                        │                          │
+│         │  masterRecordId        │                          │
+│         └────────────────────────┘                          │
+│                                                              │
+│  ┌──────────────┐         ┌──────────────┐                  │
+│  │ 검색 위젯    │ ──────→ │ 테이블 리스트 │                  │
+│  │              │ onFilter│              │                  │
+│  │ v2-table-    │ Change  │ v2-table-    │                  │
+│  │ search-widget│         │ list         │                  │
+│  └──────────────┘         └──────────────┘                  │
+│                                                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 컴포넌트 등록 구조
+
+```typescript
+// frontend/lib/registry/components/index.ts
+
+// V2 컴포넌트들 (화면관리 전용)
+import "./v2-unified-repeater/UnifiedRepeaterRenderer";
+import "./v2-button-primary/ButtonPrimaryRenderer";
+import "./v2-split-panel-layout/SplitPanelLayoutRenderer";
+import "./v2-aggregation-widget/AggregationWidgetRenderer";
+import "./v2-card-display/CardDisplayRenderer";
+import "./v2-numbering-rule/NumberingRuleRenderer";
+import "./v2-table-list/TableListRenderer";
+import "./v2-text-display/TextDisplayRenderer";
+import "./v2-pivot-grid/PivotGridRenderer";
+import "./v2-divider-line/DividerLineRenderer";
+import "./v2-repeat-container/RepeatContainerRenderer";
+import "./v2-section-card/SectionCardRenderer";
+import "./v2-section-paper/SectionPaperRenderer";
+import "./v2-rack-structure/RackStructureRenderer";
+import "./v2-location-swap-selector/LocationSwapSelectorRenderer";
+import "./v2-table-search-widget";
+import "./v2-tabs-widget/tabs-component";
+```
+
+---
+
+## 파일 구조 표준
+
+각 V2 컴포넌트 폴더는 다음 구조를 따릅니다:
+
+```
+v2-{component-name}/
+├── index.ts                    # 컴포넌트 Definition (V2 접두사)
+├── types.ts                    # TypeScript 타입 정의
+├── {Component}Component.tsx    # 실제 컴포넌트 구현
+├── {Component}ConfigPanel.tsx  # 설정 패널
+├── {Component}Renderer.tsx     # 레지스트리 등록 및 래퍼
+├── config.ts                   # 기본 설정값 (선택)
+└── README.md                   # 사용 가이드 (선택)
+```
+
+---
+
+## 개발 가이드라인
+
+### 새 V2 컴포넌트 생성 시
+
+1. `v2-` 접두사로 폴더 생성
+2. Definition 이름에 `V2` 접두사 사용 (예: `V2NewComponentDefinition`)
+3. `index.ts`에서 import 추가
+4. 엔티티 조인 지원 필수 구현
+5. 다국어 키 필드 추가 (`langKeyId`, `langKey`)
+
+### 체크리스트
+
+- [ ] V2 폴더에서 작업 중인지 확인
+- [ ] 원본 폴더는 수정하지 않음
+- [ ] 컴포넌트 ID에 `v2-` 접두사 사용
+- [ ] Definition 이름에 `V2` 접두사 사용
+- [ ] 엔티티 조인 컬럼 지원
+- [ ] 커스텀 테이블 설정 지원
+- [ ] 다국어 필드 추가
+
+---
+
+## 관련 파일 목록
+
+| 파일 | 역할 |
+|------|------|
+| `frontend/lib/api/entityJoin.ts` | 엔티티 조인 API |
+| `frontend/hooks/useFormCompatibility.ts` | 폼 호환성 브릿지 |
+| `frontend/components/unified/UnifiedFormContext.tsx` | 통합 폼 Context |
+| `frontend/lib/utils/multilangLabelExtractor.ts` | 다국어 라벨 추출/매핑 |
+| `frontend/contexts/ScreenMultiLangContext.tsx` | 다국어 번역 Context |
+| `frontend/lib/registry/components/index.ts` | 컴포넌트 등록 |
+
+---
+
+## 참고 문서
+
+- [component-development-guide.mdc](.cursor/rules/component-development-guide.mdc) - 컴포넌트 개발 상세 가이드
+- [table-list-component-guide.mdc](.cursor/rules/table-list-component-guide.mdc) - 테이블 리스트 가이드
diff --git a/docs/V2_컴포넌트_연동_가이드.md b/docs/V2_컴포넌트_연동_가이드.md
new file mode 100644
index 00000000..a8496926
--- /dev/null
+++ b/docs/V2_컴포넌트_연동_가이드.md
@@ -0,0 +1,1519 @@
+# V2 컴포넌트 연동 가이드
+
+## 목차
+
+1. [개요](#1-개요)
+2. [V2 표준 이벤트 시스템](#2-v2-표준-이벤트-시스템)
+3. [이벤트 시스템 상세](#3-이벤트-시스템-상세)
+4. [Context 시스템](#4-context-시스템)
+5. [데이터 전달 인터페이스](#5-데이터-전달-인터페이스)
+6. [컴포넌트별 연동 능력](#6-컴포넌트별-연동-능력)
+7. [연동 가능한 조합](#7-연동-가능한-조합)
+8. [연동 설정 방법](#8-연동-설정-방법)
+
+---
+
+## 1. 개요
+
+V2 컴포넌트들은 세 가지 메커니즘을 통해 상호 통신합니다:
+
+| 메커니즘 | 용도 | 특징 |
+|----------|------|------|
+| **이벤트 시스템** | 비동기 통신, 느슨한 결합 | V2 표준 이벤트 타입 사용 |
+| **Context 시스템** | 상태 공유, 동기 통신 | React Context API |
+| **데이터 전달 인터페이스** | 명시적 데이터 전송 | `DataProvidable` / `DataReceivable` |
+
+---
+
+## 2. V2 표준 이벤트 시스템
+
+### 2.1 이벤트 타입 정의 파일
+
+**파일 위치**: `frontend/types/component-events.ts`
+
+모든 V2 컴포넌트는 이 파일에 정의된 **타입 안전한 이벤트 시스템**을 사용해야 합니다.
+
+### 2.2 이벤트 이름 상수
+
+```typescript
+import { V2_EVENTS } from "@/types/component-events";
+
+// 사용 가능한 이벤트
+V2_EVENTS.TABLE_LIST_DATA_CHANGE    // "tableListDataChange"
+V2_EVENTS.REPEATER_DATA_CHANGE      // "repeaterDataChange"
+V2_EVENTS.BEFORE_FORM_SAVE          // "beforeFormSave"
+V2_EVENTS.AFTER_FORM_SAVE           // "afterFormSave"
+V2_EVENTS.REPEATER_SAVE             // "repeaterSave"
+V2_EVENTS.REFRESH_TABLE             // "refreshTable"
+V2_EVENTS.REFRESH_CARD_DISPLAY      // "refreshCardDisplay"
+V2_EVENTS.COMPONENT_DATA_TRANSFER   // "componentDataTransfer"
+V2_EVENTS.SPLIT_PANEL_DATA_TRANSFER // "splitPanelDataTransfer"
+```
+
+### 2.3 유틸리티 함수
+
+#### 타입 안전한 이벤트 발행
+
+```typescript
+import { dispatchV2Event, V2_EVENTS } from "@/types/component-events";
+
+// 올바른 방법 (타입 안전)
+dispatchV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, {
+  componentId: "my-repeater",
+  tableName: "order_detail",
+  data: rows,
+  selectedData: selectedRows,
+});
+
+// 잘못된 방법 (타입 오류 발생)
+dispatchV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, {
+  wrongField: "value",  // 타입 에러!
+});
+```
+
+#### 타입 안전한 이벤트 구독
+
+```typescript
+import { subscribeV2Event, V2_EVENTS, type RepeaterDataChangeDetail } from "@/types/component-events";
+
+useEffect(() => {
+  // 구독 (자동 cleanup 함수 반환)
+  const unsubscribe = subscribeV2Event(
+    V2_EVENTS.REPEATER_DATA_CHANGE,
+    (event: CustomEvent<RepeaterDataChangeDetail>) => {
+      const { componentId, data } = event.detail;
+      // 타입 안전하게 데이터 접근
+    }
+  );
+
+  return () => unsubscribe();
+}, []);
+```
+
+### 2.4 이벤트 상세 타입
+
+```typescript
+// 테이블 리스트 데이터 변경
+interface TableListDataChangeDetail {
+  componentId: string;
+  tableName: string;
+  data: any[];
+  selectedRows: string[] | number[];
+}
+
+// 리피터 데이터 변경
+interface RepeaterDataChangeDetail {
+  componentId: string;
+  tableName: string;
+  data: any[];
+  selectedData?: any[];
+}
+
+// 폼 저장 전
+interface BeforeFormSaveDetail {
+  formData: Record<string, any>;
+  skipDefaultSave?: boolean;
+}
+
+// 리피터 저장 (마스터-디테일 FK 연결용)
+interface RepeaterSaveDetail {
+  parentId?: string | number;
+  masterRecordId: string | number;
+  mainFormData: Record<string, any>;
+  tableName: string;
+}
+
+// 컴포넌트 간 데이터 전달
+interface ComponentDataTransferDetail {
+  sourceComponentId: string;
+  targetComponentId: string;
+  data: any[];
+  mode: "append" | "replace" | "merge";
+  mappingRules?: MappingRule[];
+}
+```
+
+### 2.5 마이그레이션 가이드
+
+**이전 방식 (사용 금지)**:
+
+```typescript
+// ❌ 타입 안전하지 않음
+window.addEventListener("tableListDataChange" as any, handler);
+window.dispatchEvent(new CustomEvent("repeaterDataChange", { detail }));
+```
+
+**새로운 방식 (권장)**:
+
+```typescript
+// ✅ 타입 안전함
+import { subscribeV2Event, dispatchV2Event, V2_EVENTS } from "@/types/component-events";
+
+const unsubscribe = subscribeV2Event(V2_EVENTS.TABLE_LIST_DATA_CHANGE, handler);
+dispatchV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, detail);
+```
+
+---
+
+## 3. 이벤트 시스템 상세
+
+### 3.1 저장 관련 이벤트
+
+#### `beforeFormSave`
+
+폼 저장 직전에 발생하여 각 컴포넌트가 데이터를 수집할 기회를 제공합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `buttonActions.ts`, `UnifiedFormContext.tsx` |
+| **구독자** | `UnifiedRepeater`, `SimpleRepeaterTable`, `ModalRepeaterTable`, `SelectedItemsDetailInput`, `RepeatScreenModal`, `UniversalFormModal` |
+| **데이터 구조** | `{ formData: Record<string, any>, skipDefaultSave?: boolean }` |
+
+```typescript
+// 발행 예시
+window.dispatchEvent(new CustomEvent("beforeFormSave", {
+  detail: { formData: {}, skipDefaultSave: false }
+}));
+
+// 구독 예시
+window.addEventListener("beforeFormSave", (event: CustomEvent) => {
+  const { formData } = event.detail;
+  formData["myField"] = myValue; // 데이터 추가
+});
+```
+
+#### `afterFormSave`
+
+폼 저장 완료 후 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `UnifiedFormContext.tsx` |
+| **데이터 구조** | `{ success: boolean, data?: any }` |
+
+#### `repeaterSave`
+
+마스터 저장 후 리피터에 FK를 전달하기 위해 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `InteractiveScreenViewerDynamic.tsx` |
+| **구독자** | `UnifiedRepeater.tsx` |
+| **데이터 구조** | `{ parentId, masterRecordId, mainFormData, tableName }` |
+
+```typescript
+// 마스터-디테일 저장 흐름
+// 1. 마스터 저장 완료
+// 2. repeaterSave 이벤트 발행
+window.dispatchEvent(new CustomEvent("repeaterSave", {
+  detail: {
+    masterRecordId: savedId,  // 마스터 ID
+    tableName: "receiving_mng",
+    mainFormData: formData
+  }
+}));
+
+// 3. UnifiedRepeater에서 수신
+// → 모든 행의 foreignKeyColumn에 masterRecordId 설정
+// → 디테일 테이블에 저장
+```
+
+---
+
+### 3.2 데이터 변경 이벤트
+
+#### `tableListDataChange`
+
+테이블 리스트의 데이터가 변경될 때 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `v2-table-list`, `table-list` |
+| **구독자** | `v2-repeat-container`, `v2-aggregation-widget`, `repeat-container`, `aggregation-widget` |
+| **데이터 구조** | `{ componentId, tableName, data: any[], selectedRows: string[] }` |
+
+```typescript
+// 테이블 리스트 → 집계 위젯 연동
+// 테이블 데이터 변경 시 자동으로 집계 갱신
+```
+
+#### `repeaterDataChange`
+
+리피터 컴포넌트의 데이터가 변경될 때 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **구독자** | `v2-repeat-container`, `v2-aggregation-widget` |
+
+---
+
+### 3.3 UI 갱신 이벤트
+
+#### `refreshTable`
+
+테이블 데이터를 다시 로드합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `v2-button-primary`, `InteractiveScreenViewerDynamic`, `ScreenModal`, `buttonActions.ts` |
+| **구독자** | `v2-table-list`, `v2-split-panel-layout`, `InteractiveDataTable` |
+
+```typescript
+// 저장 후 테이블 새로고침
+window.dispatchEvent(new CustomEvent("refreshTable"));
+```
+
+#### `refreshCardDisplay`
+
+카드 디스플레이를 다시 로드합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `InteractiveScreenViewerDynamic`, `buttonActions.ts` |
+| **구독자** | `v2-card-display`, `card-display` |
+
+---
+
+### 3.4 모달 제어 이벤트
+
+#### `openEditModal`
+
+편집 모달을 엽니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `SplitPanelLayout2`, `InteractiveScreenViewer`, `InteractiveDataTable` |
+| **구독자** | `EditModal.tsx`, 화면 페이지 |
+
+#### `closeEditModal`
+
+편집 모달을 닫습니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `v2-button-primary`, `buttonActions.ts` |
+| **구독자** | `EditModal.tsx` |
+
+#### `saveSuccessInModal`
+
+모달 내 저장 성공 시 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `v2-button-primary`, `buttonActions.ts` |
+| **구독자** | `ScreenModal.tsx` |
+
+---
+
+### 3.5 데이터 전달 이벤트
+
+#### `componentDataTransfer`
+
+컴포넌트 간 데이터 전달 시 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `buttonActions.ts` |
+| **구독자** | `UnifiedRepeater.tsx` |
+
+#### `splitPanelDataTransfer`
+
+분할 패널 간 데이터 전달 시 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `buttonActions.ts` |
+| **구독자** | `UnifiedRepeater.tsx`, `RepeaterFieldGroupRenderer.tsx` |
+
+#### `screenDataTransfer`
+
+화면 간 데이터 전달 시 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `buttonActions.ts`, `useScreenDataTransfer.ts` |
+| **구독자** | `useScreenDataTransfer.ts` |
+
+---
+
+### 3.6 연관 데이터 버튼 이벤트
+
+#### `related-button-select`
+
+연관 데이터 버튼 클릭 시 발생합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `RelatedDataButtonsComponent.tsx` |
+| **구독자** | `v2-table-list`, `table-list`, `InteractiveDataTable` |
+| **데이터 구조** | `{ targetTable, filterColumn, filterValue, selectedData }` |
+
+#### `related-button-register` / `related-button-unregister`
+
+연관 데이터 버튼이 대상 테이블을 등록/해제합니다.
+
+| 항목 | 내용 |
+|------|------|
+| **발행자** | `RelatedDataButtonsComponent.tsx` |
+| **구독자** | `v2-table-list`, `table-list` |
+
+---
+
+### 3.7 이벤트 흐름 다이어그램
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                           저장 플로우                                    │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  [저장 버튼 클릭]                                                        │
+│        │                                                                 │
+│        ▼                                                                 │
+│  ┌─────────────────┐                                                    │
+│  │ beforeFormSave  │ ────────────────────────────────────────────┐      │
+│  └────────┬────────┘                                             │      │
+│           │                                                      │      │
+│           ▼                                                      ▼      │
+│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐         │
+│  │ UnifiedRepeater │  │ SimpleRepeater  │  │ ModalRepeater   │  ...    │
+│  │ (데이터 수집)    │  │ (데이터 수집)    │  │ (데이터 수집)    │         │
+│  └─────────────────┘  └─────────────────┘  └─────────────────┘         │
+│           │                                                             │
+│           ▼                                                             │
+│  ┌─────────────────┐                                                    │
+│  │   API 저장      │                                                    │
+│  └────────┬────────┘                                                    │
+│           │                                                             │
+│           ▼                                                             │
+│  ┌─────────────────┐         ┌─────────────────┐                       │
+│  │ afterFormSave   │         │  repeaterSave   │ (마스터-디테일 시)     │
+│  └────────┬────────┘         └────────┬────────┘                       │
+│           │                           │                                 │
+│           ▼                           ▼                                 │
+│  ┌─────────────────┐         ┌─────────────────┐                       │
+│  │  refreshTable   │         │ UnifiedRepeater │                       │
+│  └─────────────────┘         │ (FK 설정 후 저장)│                       │
+│                              └─────────────────┘                       │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+
+
+┌─────────────────────────────────────────────────────────────────────────┐
+│                        데이터 변경 플로우                                │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────┐                                                    │
+│  │  v2-table-list  │                                                    │
+│  │ (데이터 로드/변경)│                                                    │
+│  └────────┬────────┘                                                    │
+│           │                                                             │
+│           ▼                                                             │
+│  ┌─────────────────────┐                                                │
+│  │ tableListDataChange │                                                │
+│  └────────┬────────────┘                                                │
+│           │                                                             │
+│           ├─────────────────────┬─────────────────────┐                 │
+│           ▼                     ▼                     ▼                 │
+│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐         │
+│  │v2-aggregation-  │  │v2-repeat-       │  │ 기타 구독자     │         │
+│  │widget (집계갱신) │  │container        │  │                 │         │
+│  └─────────────────┘  └─────────────────┘  └─────────────────┘         │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 4. Context 시스템
+
+### 4.1 TableOptionsContext
+
+**역할**: 화면 내 테이블 컴포넌트 등록/관리 및 필터링 연동
+
+**파일**: `frontend/contexts/TableOptionsContext.tsx`
+
+#### 제공하는 기능
+
+| 함수/상태 | 설명 |
+|-----------|------|
+| `registeredTables` | 등록된 테이블 Map |
+| `selectedTableId` | 현재 선택된 테이블 ID |
+| `registerTable(tableId, registration)` | 테이블 등록 |
+| `unregisterTable(tableId)` | 테이블 해제 |
+| `getTable(tableId)` | 테이블 조회 |
+| `setSelectedTableId(id)` | 선택 테이블 설정 |
+| `updateTableDataCount(tableId, count)` | 데이터 건수 업데이트 |
+| `getActiveTabTables()` | 활성 탭의 테이블만 반환 |
+
+#### TableRegistration 구조
+
+```typescript
+interface TableRegistration {
+  tableId: string;
+  tableName: string;
+  columns: ColumnInfo[];
+  dataCount: number;
+  parentTabId?: string;                    // 소속 탭 ID
+  onFilterChange: (filters: TableFilter[]) => void;
+  getColumnUniqueValues: (columnName: string) => Promise<SelectOption[]>;
+}
+```
+
+#### 연동 흐름
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     TableOptionsContext 연동                            │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────┐                                                    │
+│  │  v2-table-list  │                                                    │
+│  └────────┬────────┘                                                    │
+│           │ registerTable()                                             │
+│           ▼                                                             │
+│  ┌─────────────────────────────────────┐                                │
+│  │      TableOptionsContext            │                                │
+│  │  ┌─────────────────────────────┐    │                                │
+│  │  │     registeredTables        │    │                                │
+│  │  │  - tableId                  │    │                                │
+│  │  │  - onFilterChange()         │    │                                │
+│  │  │  - columns                  │    │                                │
+│  │  └─────────────────────────────┘    │                                │
+│  └────────────────┬────────────────────┘                                │
+│                   │                                                      │
+│                   ▼                                                      │
+│  ┌─────────────────────────────────────┐                                │
+│  │    v2-table-search-widget           │                                │
+│  │  - 등록된 테이블 목록 표시           │                                │
+│  │  - 필터 입력                        │                                │
+│  │  - currentTable.onFilterChange()    │                                │
+│  └────────────────┬────────────────────┘                                │
+│                   │                                                      │
+│                   ▼                                                      │
+│  ┌─────────────────────────────────────┐                                │
+│  │    v2-table-list (자동 재조회)       │                                │
+│  └─────────────────────────────────────┘                                │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+#### 사용 컴포넌트
+
+| 컴포넌트 | 사용 방식 |
+|----------|----------|
+| `v2-table-list` | 테이블 등록/해제, 데이터 건수 업데이트 |
+| `v2-table-search-widget` | 등록된 테이블 목록 조회, 필터 적용 |
+| `v2-split-panel-layout` | 내부 테이블 등록/해제 |
+| `v2-card-display` | 테이블 등록 (선택적) |
+
+---
+
+### 4.2 SplitPanelContext
+
+**역할**: 좌우 분할 패널 간 데이터 전달 및 상태 관리
+
+**파일**: `frontend/contexts/SplitPanelContext.tsx`
+
+#### 제공하는 기능
+
+| 함수/상태 | 설명 |
+|-----------|------|
+| `splitPanelId` | 분할 패널 ID |
+| `leftScreenId`, `rightScreenId` | 좌우 화면 ID |
+| `selectedLeftData` | 좌측 선택 데이터 |
+| `setSelectedLeftData(data)` | 좌측 선택 데이터 설정 |
+| `addedItemIds` | 우측에 추가된 항목 ID Set |
+| `addItemIds(ids)` | 항목 ID 추가 |
+| `registerReceiver(receiver)` | 데이터 수신자 등록 |
+| `transferToOtherSide(data)` | 반대편으로 데이터 전달 |
+| `linkedFilters` | 연결 필터 설정 |
+| `parentDataMapping` | 부모 데이터 매핑 설정 |
+
+#### 연동 흐름
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     SplitPanelContext 연동                              │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │                    v2-split-panel-layout                         │    │
+│  │                    (SplitPanelProvider)                          │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│         │                                             │                  │
+│         ▼                                             ▼                  │
+│  ┌─────────────────┐                         ┌─────────────────┐        │
+│  │    좌측 패널     │                         │    우측 패널     │        │
+│  │  (CardDisplay)  │                         │  (TableList)    │        │
+│  └────────┬────────┘                         └────────┬────────┘        │
+│           │                                           │                  │
+│           │ 행 클릭                                   │                  │
+│           ▼                                           │                  │
+│  setSelectedLeftData(rowData)                         │                  │
+│           │                                           │                  │
+│           └──────────────────────────────────────────▶│                  │
+│                                                       │                  │
+│                     relation 설정에 따라              │                  │
+│                     자동 필터링 (FK 기반)             │                  │
+│                                                       ▼                  │
+│                                             ┌─────────────────┐         │
+│                                             │ 필터링된 데이터  │         │
+│                                             │ 표시            │         │
+│                                             └─────────────────┘         │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+#### 사용 컴포넌트
+
+| 컴포넌트 | 사용 방식 |
+|----------|----------|
+| `v2-split-panel-layout` | Provider 제공, 좌우 패널 관리 |
+| `v2-table-list` | 분할 패널 데이터 수신자로 등록 |
+| `v2-card-display` | 분할 패널 위치 확인, 데이터 수신 |
+| `v2-button-primary` | 분할 패널 컨텍스트 확인 |
+
+---
+
+### 4.3 ScreenContext
+
+**역할**: 같은 화면 내 컴포넌트 간 통신 (데이터 제공자/수신자 등록)
+
+**파일**: `frontend/contexts/ScreenContext.tsx`
+
+#### 제공하는 기능
+
+| 함수/상태 | 설명 |
+|-----------|------|
+| `screenId` | 화면 ID |
+| `tableName` | 테이블명 |
+| `menuObjid` | 메뉴 OBJID (카테고리 값 조회용) |
+| `splitPanelPosition` | 분할 패널 위치 (`left` \| `right`) |
+| `formData` | 폼 데이터 |
+| `updateFormData(field, value)` | 폼 데이터 업데이트 |
+| `registerDataProvider(provider)` | 데이터 제공자 등록 |
+| `registerDataReceiver(receiver)` | 데이터 수신자 등록 |
+| `getDataProvider(id)` | 데이터 제공자 조회 |
+| `getDataReceiver(id)` | 데이터 수신자 조회 |
+| `getAllDataProviders()` | 모든 데이터 제공자 조회 |
+
+#### 사용 컴포넌트
+
+| 컴포넌트 | 사용 방식 |
+|----------|----------|
+| `v2-table-list` | 데이터 제공자/수신자로 등록 |
+| `v2-card-display` | 화면 컨텍스트 확인 |
+| `v2-button-primary` | 화면 컨텍스트 확인, 데이터 전달 실행 |
+| `repeater-field-group` | 데이터 수신자 등록, formData 사용 |
+
+---
+
+### 4.4 UnifiedFormContext
+
+**역할**: 폼 상태 관리, 조건부 로직, 저장/검증/초기화
+
+**파일**: `frontend/components/unified/UnifiedFormContext.tsx`
+
+#### 제공하는 기능
+
+| 함수/상태 | 설명 |
+|-----------|------|
+| `formData` | 폼 데이터 |
+| `originalData` | 원본 데이터 (수정 모드) |
+| `status` | 폼 상태 (isSubmitting, isDirty, isValid 등) |
+| `errors` | 필드 에러 배열 |
+| `getValue(field)`, `setValue(field, value)` | 값 관리 |
+| `submit(options)` | 폼 저장 |
+| `reset()` | 폼 초기화 |
+| `validate()` | 폼 검증 |
+| `evaluateCondition(condition)` | 조건 평가 |
+| `getRepeaterData(key)`, `setRepeaterData(key, data)` | 리피터 데이터 관리 |
+
+---
+
+### 4.5 ActiveTabContext
+
+**역할**: 탭 컴포넌트의 활성 탭 추적
+
+**파일**: `frontend/contexts/ActiveTabContext.tsx`
+
+#### 제공하는 기능
+
+| 함수/상태 | 설명 |
+|-----------|------|
+| `activeTabs` | 활성 탭 정보 Map |
+| `setActiveTab(tabsId, tabId)` | 활성 탭 설정 |
+| `getActiveTabId(tabsId)` | 특정 탭 컴포넌트의 활성 탭 ID |
+| `getAllActiveTabIds()` | 전체 활성 탭 ID 목록 |
+
+#### 사용 컴포넌트
+
+| 컴포넌트 | 사용 방식 |
+|----------|----------|
+| `v2-table-search-widget` | 활성 탭 기반 테이블 필터링 |
+| `v2-tabs-widget` | 탭 활성화 관리 |
+
+---
+
+### 4.6 ScreenPreviewContext
+
+**역할**: 디자이너 모드와 실제 화면 모드 구분
+
+**파일**: `frontend/contexts/ScreenPreviewContext.tsx`
+
+#### 제공하는 기능
+
+| 함수/상태 | 설명 |
+|-----------|------|
+| `isPreviewMode` | 미리보기 모드 여부 |
+
+#### 사용 컴포넌트
+
+| 컴포넌트 | 사용 방식 |
+|----------|----------|
+| `v2-table-search-widget` | 미리보기 모드에서 설정 버튼 비활성화 |
+| `v2-button-primary` | 프리뷰 모드 확인 |
+
+---
+
+### 4.7 Context 계층 구조
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                        Context 계층 구조                                 │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ScreenPreviewContext (최상위 - 디자이너/실제 화면 구분)                 │
+│  │                                                                       │
+│  └─── ScreenContext (화면 레벨)                                         │
+│       │                                                                  │
+│       ├─── TableOptionsContext (테이블 관리)                            │
+│       │    │                                                             │
+│       │    └─── ActiveTabContext (탭 필터링)                            │
+│       │                                                                  │
+│       └─── SplitPanelContext (분할 패널 - 선택적)                       │
+│                                                                          │
+│  UnifiedFormContext (폼 상태 관리 - 독립적, 선택적 사용)                │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 5. 데이터 전달 인터페이스
+
+### 5.1 DataProvidable 인터페이스
+
+**데이터를 제공하는 컴포넌트**가 구현하는 인터페이스
+
+```typescript
+interface DataProvidable {
+  componentId: string;
+  componentType: string;
+  
+  // 선택된 데이터 반환
+  getSelectedData(): any[];
+  
+  // 모든 데이터 반환
+  getAllData(): any[];
+  
+  // 선택 초기화
+  clearSelection(): void;
+}
+```
+
+#### 구현 컴포넌트
+
+| 컴포넌트 | 제공 데이터 |
+|----------|------------|
+| `v2-table-list` | 선택된 행 데이터, 전체 데이터 |
+| `v2-card-display` | 선택된 카드 데이터 |
+| `select-basic` | 선택된 값 |
+| `conditional-container` | 조건부 컨테이너의 선택 값 |
+
+### 5.2 DataReceivable 인터페이스
+
+**데이터를 수신하는 컴포넌트**가 구현하는 인터페이스
+
+```typescript
+interface DataReceivable {
+  componentId: string;
+  componentType: DataReceivableComponentType;
+  
+  // 데이터 수신
+  receiveData(data: any[], config: DataReceiverConfig): Promise<void>;
+  
+  // 현재 데이터 반환
+  getData(): any;
+}
+
+type DataReceivableComponentType = 
+  | "table-list" 
+  | "unified-repeater" 
+  | "repeater-field-group"
+  | "simple-repeater-table";
+```
+
+#### 구현 컴포넌트
+
+| 컴포넌트 | 수신 모드 |
+|----------|----------|
+| `v2-table-list` | append, replace, merge |
+| `repeater-field-group` | append |
+| `embedded-screen` | 화면 임베딩 데이터 수신 |
+
+### 5.3 DataReceiverConfig
+
+데이터 전달 시 설정
+
+```typescript
+interface DataReceiverConfig {
+  // 타겟 컴포넌트 정보
+  targetComponentId: string;
+  targetComponentType: DataReceivableComponentType;
+  
+  // 수신 모드
+  mode: "append" | "replace" | "merge";
+  
+  // 필드 매핑 규칙
+  mappingRules: Array<{
+    sourceField: string;      // 소스 필드
+    targetField: string;      // 타겟 필드
+    transform?: string;       // 변환 함수 (선택)
+    defaultValue?: any;       // 기본값 (선택)
+  }>;
+  
+  // 조건부 전달
+  condition?: {
+    field: string;
+    operator: "=" | "!=" | ">" | "<";
+    value: any;
+  };
+  
+  // 검증 규칙
+  validation?: {
+    required: string[];       // 필수 필드
+    unique?: string[];        // 중복 불가 필드
+  };
+}
+```
+
+### 5.4 데이터 전달 흐름
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     데이터 전달 흐름 (버튼 액션)                         │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────┐                                                    │
+│  │ v2-button-      │                                                    │
+│  │ primary         │ action.type = "transferData"                       │
+│  └────────┬────────┘                                                    │
+│           │                                                              │
+│           ▼                                                              │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │                 handleTransferDataAction()                       │    │
+│  ├─────────────────────────────────────────────────────────────────┤    │
+│  │  1. ScreenContext에서 소스 컴포넌트 조회                         │    │
+│  │     getDataProvider(sourceComponentId)                           │    │
+│  │                                                                  │    │
+│  │  2. 소스에서 데이터 가져오기                                     │    │
+│  │     source.getSelectedData() 또는 source.getAllData()            │    │
+│  │                                                                  │    │
+│  │  3. 매핑 규칙 적용                                               │    │
+│  │     mappingRules.forEach(rule => ...)                            │    │
+│  │                                                                  │    │
+│  │  4. ScreenContext에서 타겟 컴포넌트 조회                         │    │
+│  │     getDataReceiver(targetComponentId)                           │    │
+│  │                                                                  │    │
+│  │  5. 타겟에 데이터 전달                                           │    │
+│  │     target.receiveData(mappedData, config)                       │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│           │                                                              │
+│           ▼                                                              │
+│  ┌─────────────────┐                                                    │
+│  │ 타겟 컴포넌트    │                                                    │
+│  │ (v2-table-list, │                                                    │
+│  │  repeater 등)   │                                                    │
+│  └─────────────────┘                                                    │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 6. 컴포넌트별 연동 능력
+
+### 6.1 연동 능력 매트릭스
+
+| 컴포넌트 | 이벤트 발행 | 이벤트 구독 | DataProvider | DataReceiver | Context 사용 |
+|----------|:-----------:|:-----------:|:------------:|:------------:|:------------:|
+| `v2-table-list` | ✅ | ✅ | ✅ | ✅ | TableOptions, Screen, SplitPanel |
+| `v2-split-panel-layout` | ✅ | ✅ | ❌ | ❌ | TableOptions (Provider) |
+| `v2-unified-repeater` | ✅ | ✅ | ✅ | ✅ | Screen |
+| `v2-button-primary` | ✅ | ❌ | ❌ | ❌ | Screen, SplitPanel |
+| `v2-table-search-widget` | ❌ | ❌ | ❌ | ❌ | TableOptions, ActiveTab |
+| `v2-aggregation-widget` | ❌ | ✅ | ❌ | ❌ | - |
+| `v2-repeat-container` | ❌ | ✅ | ❌ | ❌ | - |
+| `v2-card-display` | ✅ | ✅ | ✅ | ❌ | TableOptions, Screen, SplitPanel |
+| `v2-pivot-grid` | ❌ | ❌ | ❌ | ❌ | - |
+| `v2-tabs-widget` | ❌ | ❌ | ❌ | ❌ | ActiveTab |
+
+### 6.2 컴포넌트별 상세
+
+#### v2-table-list
+
+**발행 이벤트**:
+- `tableListDataChange` - 데이터 로드/변경 시
+
+**구독 이벤트**:
+- `refreshTable` - 테이블 새로고침
+- `related-button-select` - 연관 버튼 선택
+- `related-button-register/unregister` - 연관 버튼 등록/해제
+
+**DataProvidable 구현**:
+```typescript
+getSelectedData(): any[]    // 체크된 행 데이터
+getAllData(): any[]         // 전체 데이터
+clearSelection(): void      // 선택 초기화
+```
+
+**DataReceivable 구현**:
+```typescript
+receiveData(data, config): Promise<void>
+// mode: "append" - 기존 데이터에 추가
+// mode: "replace" - 데이터 교체
+// mode: "merge" - 키 기준 병합
+```
+
+---
+
+#### v2-unified-repeater
+
+**발행 이벤트**:
+- `repeaterDataChange` - 데이터 변경 시 (V2 표준 이벤트)
+
+**구독 이벤트**:
+- `beforeFormSave` - 저장 전 데이터 수집
+- `repeaterSave` - 마스터 저장 후 FK 설정
+- `componentDataTransfer` - 컴포넌트 간 데이터 전달
+- `splitPanelDataTransfer` - 분할 패널 간 데이터 전달
+
+**DataProvidable 구현**:
+- `getSelectedData()` - 선택된 행 데이터 반환
+- `getAllData()` - 전체 데이터 반환
+- `clearSelection()` - 선택 초기화
+
+**DataReceivable 구현**:
+- `receiveData(data, config)` - 데이터 수신 (append, replace, merge 모드 지원)
+- `getData()` - 현재 데이터 반환
+
+**Context 등록**:
+- ScreenContext에 DataProvider/DataReceiver 자동 등록
+
+---
+
+#### v2-button-primary
+
+**발행 이벤트**:
+- `refreshTable` - 저장 후 테이블 갱신
+- `closeEditModal` - 모달 닫기
+- `saveSuccessInModal` - 모달 저장 성공
+
+**역할**:
+- 저장, 삭제, 데이터 전달 등 액션 실행
+- `buttonActions.ts`의 함수들 호출
+
+---
+
+#### v2-table-search-widget
+
+**Context 의존**:
+- `TableOptionsContext` - 등록된 테이블 조회, 필터 적용
+- `ActiveTabContext` - 활성 탭 기반 테이블 필터링
+
+**동작**:
+1. `TableOptionsContext.registeredTables`에서 테이블 목록 조회
+2. 사용자가 필터 입력
+3. `currentTable.onFilterChange(filters)` 호출
+4. 해당 테이블이 자동으로 재조회
+
+---
+
+#### v2-aggregation-widget
+
+**구독 이벤트**:
+- `tableListDataChange` - 테이블 데이터 변경 시 집계 갱신
+- `repeaterDataChange` - 리피터 데이터 변경 시 집계 갱신
+
+---
+
+#### v2-split-panel-layout
+
+**Provider 제공**:
+- `SplitPanelContext` - 좌우 패널 데이터 전달
+
+**발행 이벤트**:
+- `openScreenModal` - 화면 모달 열기
+
+**구독 이벤트**:
+- `refreshTable` - 내부 테이블 갱신
+
+**커스텀 모드 (displayMode: "custom")**:
+- 패널 내부에 자유롭게 컴포넌트 배치 가능 (v2-tabs-widget과 동일 구조)
+- 컴포넌트 클릭 시 좌측 설정 패널에서 속성 편집
+- 드래그앤드롭으로 컴포넌트 이동, 리사이즈 핸들로 크기 조절
+- 디자인 모드에서 실제 컴포넌트 렌더링 (미리보기)
+
+```typescript
+// 커스텀 모드 설정 예시
+leftPanel: {
+  displayMode: "custom",
+  components: [
+    {
+      id: "btn-1",
+      componentType: "v2-button-primary",
+      label: "저장",
+      position: { x: 10, y: 10 },
+      size: { width: 100, height: 40 },
+      componentConfig: { buttonAction: "save" }
+    }
+  ]
+}
+```
+
+---
+
+## 7. 연동 가능한 조합
+
+### 7.1 검색/필터 연동
+
+#### v2-table-search-widget ↔ v2-table-list
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     검색 위젯 ↔ 테이블 리스트                           │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │              v2-table-search-widget                              │    │
+│  │  ┌─────┐ ┌─────────┐ ┌──────────┐ ┌────────┐                    │    │
+│  │  │ 이름 │ │ 날짜범위 │ │ 상태선택 │ │ 초기화 │                    │    │
+│  │  └──┬──┘ └────┬────┘ └────┬─────┘ └────────┘                    │    │
+│  └─────┼─────────┼───────────┼──────────────────────────────────────┘    │
+│        │         │           │                                           │
+│        └─────────┴───────────┘                                           │
+│                  │ onFilterChange(filters)                               │
+│                  ▼                                                       │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │              v2-table-list                                       │    │
+│  │  ┌─────────────────────────────────────────────────────────┐    │    │
+│  │  │ 필터링된 데이터 표시                                     │    │    │
+│  │  └─────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+│  연결 방식: TableOptionsContext                                         │
+│  설정: v2-table-search-widget의 targetPanelPosition 설정               │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+**설정 방법**:
+- `v2-table-search-widget`의 `filterMode`: `"dynamic"` 또는 `"preset"`
+- `v2-table-search-widget`의 `targetPanelPosition`: `"left"`, `"right"`, `"auto"`
+- `v2-table-list`는 자동으로 `TableOptionsContext`에 등록됨
+
+---
+
+### 7.2 마스터-디테일 연동
+
+#### v2-split-panel-layout (좌측 ↔ 우측)
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     마스터-디테일 (분할 패널)                            │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌──────────────────────────────────────────────────────────────────┐   │
+│  │                    v2-split-panel-layout                          │   │
+│  │  ┌────────────────────┐  │  ┌────────────────────────────────┐   │   │
+│  │  │    좌측 패널        │  │  │          우측 패널              │   │   │
+│  │  │   (마스터 목록)     │  │  │         (디테일 정보)           │   │   │
+│  │  │                    │  │  │                                │   │   │
+│  │  │  - 부서 목록       │  │  │  - 선택된 부서의 직원 목록      │   │   │
+│  │  │  - dept_info       │ ──▶ │  - user_info                   │   │   │
+│  │  │                    │  │  │  - dept_code = 선택값          │   │   │
+│  │  └────────────────────┘  │  └────────────────────────────────┘   │   │
+│  └──────────────────────────────────────────────────────────────────┘   │
+│                                                                          │
+│  연결 방식: SplitPanelContext + relation 설정                           │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+**설정 방법**:
+```typescript
+rightPanel: {
+  tableName: "user_info",
+  relation: {
+    type: "detail",
+    leftColumn: "dept_code",      // 좌측 테이블의 컬럼
+    rightColumn: "dept_code",     // 우측 테이블의 필터 컬럼
+    // 또는 복합키
+    keys: [
+      { leftColumn: "company_id", rightColumn: "company_id" },
+      { leftColumn: "dept_code", rightColumn: "dept_code" }
+    ]
+  }
+}
+```
+
+---
+
+### 7.3 폼 저장 연동
+
+#### v2-button-primary → v2-unified-repeater
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     폼 저장 + 리피터 저장                                │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  [폼 입력 필드들]                                                │    │
+│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐                         │    │
+│  │  │ 입고번호  │ │ 입고일자  │ │ 거래처   │                         │    │
+│  │  └──────────┘ └──────────┘ └──────────┘                         │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-unified-repeater (입고 상세)                                 │    │
+│  │  ┌─────────────────────────────────────────────────────────┐    │    │
+│  │  │ 품목코드 │ 품목명 │ 수량 │ 단가 │ 금액                   │    │    │
+│  │  ├─────────────────────────────────────────────────────────┤    │    │
+│  │  │ ITEM001  │ ...    │ 10   │ 1000 │ 10000                 │    │    │
+│  │  │ ITEM002  │ ...    │ 5    │ 2000 │ 10000                 │    │    │
+│  │  └─────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+│  ┌─────────────────┐                                                    │
+│  │   [저장 버튼]    │                                                    │
+│  │  v2-button-     │                                                    │
+│  │  primary        │                                                    │
+│  └────────┬────────┘                                                    │
+│           │                                                              │
+│           ▼                                                              │
+│  1. beforeFormSave 발행 → 리피터가 데이터 수집                          │
+│  2. 마스터 테이블 저장 (receiving_mng)                                   │
+│  3. repeaterSave 발행 → 리피터가 FK 설정 후 저장                        │
+│  4. 디테일 테이블 저장 (receiving_detail)                               │
+│  5. refreshTable 발행 → 테이블 갱신                                     │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+**설정 방법**:
+```typescript
+// v2-button-primary
+action: {
+  type: "save",
+  saveMode: "withRepeater",       // 리피터와 함께 저장
+  tableName: "receiving_mng"
+}
+
+// v2-unified-repeater
+dataSource: {
+  tableName: "receiving_detail",
+  foreignKey: "receiving_id",     // 마스터 FK 컬럼
+  referenceKey: "id"              // 마스터 PK 컬럼
+}
+```
+
+---
+
+### 7.4 데이터 전달 연동
+
+#### v2-table-list → v2-unified-repeater (버튼으로 데이터 추가)
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     테이블 선택 → 리피터 추가                            │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-table-list (품목 선택)                                       │    │
+│  │  ┌─────────────────────────────────────────────────────────┐    │    │
+│  │  │ ☑ │ 품목코드 │ 품목명         │ 단가                    │    │    │
+│  │  ├─────────────────────────────────────────────────────────┤    │    │
+│  │  │ ☑ │ ITEM001  │ 노트북         │ 1,000,000              │    │    │
+│  │  │ ☑ │ ITEM002  │ 마우스         │ 50,000                 │    │    │
+│  │  │ ☐ │ ITEM003  │ 키보드         │ 100,000                │    │    │
+│  │  └─────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+│  ┌─────────────────┐                                                    │
+│  │   [추가 버튼]    │ action.type = "transferData"                      │
+│  │  v2-button-     │                                                    │
+│  │  primary        │                                                    │
+│  └────────┬────────┘                                                    │
+│           │                                                              │
+│           ▼                                                              │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-unified-repeater (주문 상세)                                 │    │
+│  │  ┌─────────────────────────────────────────────────────────┐    │    │
+│  │  │ 품목코드 │ 품목명         │ 수량 │ 단가      │ 금액      │    │    │
+│  │  ├─────────────────────────────────────────────────────────┤    │    │
+│  │  │ ITEM001  │ 노트북         │ 1    │ 1,000,000 │ 1,000,000│    │    │
+│  │  │ ITEM002  │ 마우스         │ 1    │ 50,000    │ 50,000   │    │    │
+│  │  └─────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+**설정 방법**:
+```typescript
+// v2-button-primary
+action: {
+  type: "transferData",
+  sourceComponentId: "item-table-list",
+  targetComponentId: "order-detail-repeater",
+  mappingRules: [
+    { sourceField: "item_code", targetField: "item_code" },
+    { sourceField: "item_name", targetField: "item_name" },
+    { sourceField: "unit_price", targetField: "unit_price" },
+    { sourceField: "", targetField: "quantity", defaultValue: 1 }
+  ],
+  mode: "append"
+}
+```
+
+---
+
+### 7.5 데이터 집계 연동
+
+#### v2-table-list → v2-aggregation-widget
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     테이블 데이터 → 집계 위젯                            │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-aggregation-widget                                           │    │
+│  │  ┌───────────────┐ ┌───────────────┐ ┌───────────────┐          │    │
+│  │  │ 📊 총 건수     │ │ 💰 총 금액    │ │ 📈 평균 단가   │          │    │
+│  │  │    15건       │ │ ₩3,500,000   │ │ ₩233,333     │          │    │
+│  │  └───────────────┘ └───────────────┘ └───────────────┘          │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                              ▲                                           │
+│                              │ tableListDataChange 이벤트               │
+│                              │                                           │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-table-list                                                   │    │
+│  │  (데이터 변경 시 자동으로 이벤트 발행)                           │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+│  연결 방식: tableListDataChange 이벤트 자동 구독                        │
+│  설정: v2-aggregation-widget의 dataSourceType = "table"                 │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+**설정 방법**:
+```typescript
+// v2-aggregation-widget
+{
+  dataSourceType: "table",
+  items: [
+    { columnName: "id", aggregationType: "count", label: "총 건수" },
+    { columnName: "amount", aggregationType: "sum", label: "총 금액" },
+    { columnName: "unit_price", aggregationType: "avg", label: "평균 단가" }
+  ]
+}
+```
+
+---
+
+### 7.6 연관 데이터 버튼 연동
+
+#### related-data-buttons ↔ v2-table-list
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     연관 데이터 버튼 ↔ 테이블                           │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  좌측 패널 (거래처 선택)                                                │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-card-display (거래처 목록)                                   │    │
+│  │  ┌─────────────────────────────────────────────────────────┐    │    │
+│  │  │ [선택됨] ABC상사                                          │    │    │
+│  │  │          DEF물산                                          │    │    │
+│  │  └─────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                              │                                           │
+│                              ▼ 선택 데이터 전달                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  related-data-buttons                                            │    │
+│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐                         │    │
+│  │  │ 품목정보  │ │ 단가정보  │ │ 거래내역  │                         │    │
+│  │  │   (5)    │ │   (3)    │ │   (12)   │                         │    │
+│  │  └────┬─────┘ └──────────┘ └──────────┘                         │    │
+│  └───────┼─────────────────────────────────────────────────────────┘    │
+│          │ related-button-select 이벤트                                 │
+│          ▼                                                               │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-table-list (품목정보)                                        │    │
+│  │  - customer_code = "ABC상사" 조건으로 필터링                     │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 7.7 탭 기반 테이블 필터링
+
+#### v2-tabs-widget → v2-table-search-widget → v2-table-list
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                     탭 기반 테이블 필터링                                │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                          │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-tabs-widget                                                  │    │
+│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐                         │    │
+│  │  │ [주문]    │ │  입고    │ │  재고    │                         │    │
+│  │  └──────────┘ └──────────┘ └──────────┘                         │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                              │                                           │
+│                              ▼ ActiveTabContext                         │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-table-search-widget                                          │    │
+│  │  (활성 탭에 해당하는 테이블만 대상으로 표시)                      │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                              │                                           │
+│                              ▼ onFilterChange                           │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │  v2-table-list (주문 탭 내)                                      │    │
+│  │  - parentTabId가 활성 탭과 일치하는 테이블만 필터 적용           │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                          │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 8. 연동 설정 방법
+
+### 8.1 검색 위젯 + 테이블 리스트
+
+**필요한 컴포넌트**:
+- `v2-table-search-widget`
+- `v2-table-list`
+
+**설정**:
+
+```typescript
+// v2-table-search-widget 설정
+{
+  filterMode: "preset",                 // 또는 "dynamic"
+  presetFilters: [
+    { columnName: "name", filterType: "text", columnLabel: "이름" },
+    { columnName: "created_at", filterType: "date", columnLabel: "등록일" },
+    { columnName: "status", filterType: "select", columnLabel: "상태" }
+  ],
+  targetPanelPosition: "auto"           // "left" | "right" | "auto"
+}
+
+// v2-table-list는 특별한 설정 불필요 (자동 등록)
+```
+
+---
+
+### 8.2 분할 패널 마스터-디테일
+
+**필요한 컴포넌트**:
+- `v2-split-panel-layout`
+
+**설정**:
+
+```typescript
+{
+  leftPanel: {
+    title: "부서 목록",
+    tableName: "dept_info",
+    displayMode: "list",
+    columns: [
+      { name: "dept_code", label: "부서코드" },
+      { name: "dept_name", label: "부서명" }
+    ]
+  },
+  rightPanel: {
+    title: "직원 목록",
+    tableName: "user_info",
+    displayMode: "table",
+    columns: [
+      { name: "user_id", label: "사번" },
+      { name: "user_name", label: "이름" },
+      { name: "position", label: "직책" }
+    ],
+    relation: {
+      type: "detail",
+      leftColumn: "dept_code",
+      rightColumn: "dept_code"
+    }
+  },
+  splitRatio: 30,
+  resizable: true
+}
+```
+
+---
+
+### 8.3 폼 + 리피터 저장
+
+**필요한 컴포넌트**:
+- 입력 컴포넌트들 (text-input, date-input 등)
+- `v2-unified-repeater`
+- `v2-button-primary`
+
+**설정**:
+
+```typescript
+// v2-unified-repeater 설정
+{
+  renderMode: "inline",
+  dataSource: {
+    tableName: "order_detail",
+    foreignKey: "order_id",           // 마스터 테이블의 FK
+    referenceKey: "id"                // 마스터 테이블의 PK
+  },
+  columns: [
+    { name: "item_code", label: "품목코드" },
+    { name: "quantity", label: "수량" },
+    { name: "unit_price", label: "단가" }
+  ],
+  features: {
+    showAddButton: true,
+    showDeleteButton: true,
+    inlineEdit: true
+  }
+}
+
+// v2-button-primary 설정
+{
+  text: "저장",
+  action: {
+    type: "save",
+    saveMode: "withRepeater"
+  }
+}
+```
+
+---
+
+### 8.4 데이터 전달 (테이블 → 리피터)
+
+**필요한 컴포넌트**:
+- `v2-table-list` (소스)
+- `v2-button-primary` (전달 트리거)
+- `v2-unified-repeater` (타겟)
+
+**설정**:
+
+```typescript
+// v2-button-primary 설정
+{
+  text: "추가",
+  action: {
+    type: "transferData",
+    config: {
+      sourceComponentId: "item-selection-table",
+      targetComponentId: "order-detail-repeater",
+      mode: "append",
+      mappingRules: [
+        { sourceField: "item_code", targetField: "item_code" },
+        { sourceField: "item_name", targetField: "item_name" },
+        { sourceField: "unit_price", targetField: "unit_price" },
+        { sourceField: "", targetField: "quantity", defaultValue: 1 }
+      ],
+      validation: {
+        unique: ["item_code"]           // 중복 방지
+      }
+    }
+  }
+}
+```
+
+---
+
+### 8.5 집계 위젯 연동
+
+**필요한 컴포넌트**:
+- `v2-table-list` 또는 `v2-unified-repeater`
+- `v2-aggregation-widget`
+
+**설정**:
+
+```typescript
+// v2-aggregation-widget 설정
+{
+  dataSourceType: "table",              // 또는 "repeater"
+  // sourceComponentId는 자동 감지 (같은 화면의 첫 번째 테이블)
+  items: [
+    {
+      id: "total-count",
+      label: "총 건수",
+      columnName: "id",
+      aggregationType: "count",
+      icon: "FileText"
+    },
+    {
+      id: "total-amount",
+      label: "총 금액",
+      columnName: "amount",
+      aggregationType: "sum",
+      format: {
+        prefix: "₩",
+        thousandSeparator: true
+      }
+    }
+  ],
+  layout: "horizontal",
+  refreshOnFormChange: true
+}
+```
+
+---
+
+## 연동 조합 요약표
+
+| 소스 컴포넌트 | 타겟 컴포넌트 | 연동 방식 | 용도 |
+|--------------|--------------|----------|------|
+| `v2-table-search-widget` | `v2-table-list` | TableOptionsContext | 검색/필터 |
+| `v2-split-panel-layout` 좌 | `v2-split-panel-layout` 우 | SplitPanelContext | 마스터-디테일 |
+| `v2-button-primary` | `v2-unified-repeater` | beforeFormSave/repeaterSave | 저장 |
+| `v2-table-list` | `v2-unified-repeater` | DataProvidable/DataReceivable | 데이터 전달 |
+| `v2-table-list` | `v2-aggregation-widget` | tableListDataChange | 집계 |
+| `v2-unified-repeater` | `v2-aggregation-widget` | repeaterDataChange | 집계 |
+| `v2-tabs-widget` | `v2-table-search-widget` | ActiveTabContext | 탭 필터링 |
+| `related-data-buttons` | `v2-table-list` | related-button-select | 연관 데이터 |
+| `v2-button-primary` | `v2-table-list` | refreshTable | 새로고침 |
+| `v2-card-display` | `v2-table-list` | SplitPanelContext | 선택 연동 |
+
+---
+
+## 관련 파일 참조
+
+| 파일 | 역할 |
+|------|------|
+| `frontend/lib/utils/buttonActions.ts` | 버튼 액션 실행, 이벤트 발행 |
+| `frontend/contexts/TableOptionsContext.tsx` | 테이블 관리 Context |
+| `frontend/contexts/SplitPanelContext.tsx` | 분할 패널 Context |
+| `frontend/contexts/ScreenContext.tsx` | 화면 Context |
+| `frontend/contexts/ActiveTabContext.tsx` | 활성 탭 Context |
+| `frontend/components/unified/UnifiedFormContext.tsx` | 폼 Context |
+| `frontend/types/data-transfer.ts` | 데이터 전달 타입 |
diff --git a/docs/image-file-storage-guide.md b/docs/image-file-storage-guide.md
new file mode 100644
index 00000000..73c99baa
--- /dev/null
+++ b/docs/image-file-storage-guide.md
@@ -0,0 +1,214 @@
+# 이미지/파일 저장 방식 가이드
+
+## 개요
+
+WACE 솔루션에서 이미지 및 파일은 **attach_file_info 테이블**에 메타데이터를 저장하고, 실제 파일은 **서버 디스크**에 저장하는 이중 구조를 사용합니다.
+
+---
+
+## 1. 데이터 흐름
+
+```
+[사용자 업로드] → [백엔드 API] → [디스크 저장] + [DB 메타데이터 저장]
+                                        ↓                    ↓
+                          /uploads/COMPANY_7/     attach_file_info 테이블
+                          2026/02/06/              (objid, file_path, ...)
+                          1770346704685_5.png
+```
+
+### 저장 과정
+
+1. 사용자가 파일 업로드 → `POST /api/files/upload`
+2. 백엔드가 파일을 디스크에 저장: `/uploads/{company_code}/{YYYY}/{MM}/{DD}/{timestamp}_{filename}`
+3. `attach_file_info` 테이블에 메타데이터 INSERT (objid, file_path, target_objid 등)
+4. 비즈니스 테이블의 이미지 컬럼에 **파일 objid** 저장 (예: `item_info.image = '433765011963536400'`)
+
+### 조회 과정
+
+1. 비즈니스 테이블에서 이미지 컬럼 값(objid) 로드
+2. `GET /api/files/preview/{objid}` 로 이미지 프리뷰 요청
+3. 백엔드가 `attach_file_info`에서 objid로 파일 정보 조회
+4. 디스크에서 실제 파일을 읽어 응답
+
+---
+
+## 2. 테이블 구조
+
+### attach_file_info (파일 메타데이터)
+
+| 컬럼 | 타입 | 설명 |
+|------|------|------|
+| objid | numeric | 파일 고유 ID (PK, 큰 숫자) |
+| real_file_name | varchar | 원본 파일명 |
+| saved_file_name | varchar | 저장된 파일명 (timestamp_원본명) |
+| file_path | varchar | 저장 경로 (/uploads/COMPANY_7/2026/02/06/...) |
+| file_ext | varchar | 파일 확장자 |
+| file_size | numeric | 파일 크기 (bytes) |
+| target_objid | varchar | 연결 대상 (아래 패턴 참조) |
+| company_code | varchar | 회사 코드 (멀티테넌시) |
+| status | varchar | 상태 (ACTIVE, DELETED) |
+| writer | varchar | 업로더 ID |
+| regdate | timestamp | 등록일시 |
+| is_representative | boolean | 대표 이미지 여부 |
+
+### 비즈니스 테이블 (예: item_info, company_mng)
+
+이미지 컬럼에 `attach_file_info.objid` 값을 문자열로 저장합니다.
+
+```sql
+-- item_info.image = '433765011963536400'
+-- company_mng.company_image = '413276787660035200'
+```
+
+---
+
+## 3. target_objid 패턴
+
+`attach_file_info.target_objid`는 파일이 어디에 연결되어 있는지를 나타냅니다.
+
+| 패턴 | 예시 | 설명 |
+|------|------|------|
+| 템플릿 모드 | `screen_files:140:comp_z4yffowb:image` | 화면 설계 시 업로드 (screenId:componentId:columnName) |
+| 레코드 모드 | `item_info:uuid-xxx:image` | 특정 레코드에 연결 (tableName:recordId:columnName) |
+
+---
+
+## 4. 파일 조회 API
+
+### GET /api/files/preview/{objid}
+
+이미지 프리뷰 (공개 접근 허용).
+
+```
+GET /api/files/preview/433765011963536400
+→ 200 OK (이미지 바이너리)
+```
+
+**주의: objid를 parseInt()로 변환하면 안 됩니다.** JavaScript의 `Number.MAX_SAFE_INTEGER`(9007199254740991)를 초과하는 큰 숫자이므로 **정밀도 손실**이 발생합니다. 반드시 **문자열**로 전달해야 합니다.
+
+```typescript
+// 잘못된 방법
+const fileRecord = await query("SELECT * FROM attach_file_info WHERE objid = $1", [parseInt(objid)]);
+// → parseInt("433765011963536400") = 433765011963536416 (16 차이!)
+// → DB에서 찾을 수 없음 → 404
+
+// 올바른 방법
+const fileRecord = await query("SELECT * FROM attach_file_info WHERE objid = $1", [objid]);
+// → PostgreSQL이 문자열 → numeric 자동 캐스팅
+```
+
+### GET /api/files/component-files
+
+컴포넌트별 파일 목록 조회 (인증 필요).
+
+```
+GET /api/files/component-files?screenId=149&componentId=comp_z4yffowb&tableName=item_info&recordId=uuid-xxx&columnName=image
+```
+
+**조회 우선순위:**
+1. **데이터 파일**: `target_objid = '{tableName}:{recordId}:{columnName}'` 패턴으로 조회
+2. **템플릿 파일**: `target_objid = 'screen_files:{screenId}:{componentId}:{columnName}'` 패턴으로 조회
+3. **레코드 컬럼 값 조회 (fallback)**: 위 두 방법으로 파일을 찾지 못하면, 비즈니스 테이블의 레코드에서 해당 컬럼 값(파일 objid)을 읽어 직접 조회
+
+```sql
+-- fallback: 레코드의 image 컬럼에 저장된 objid로 직접 조회
+SELECT "image" FROM "item_info" WHERE id = $1;
+-- → '433765011963536400'
+SELECT * FROM attach_file_info WHERE objid = '433765011963536400' AND status = 'ACTIVE';
+```
+
+---
+
+## 5. 프론트엔드 컴포넌트
+
+### v2-file-upload (FileUploadComponent.tsx)
+
+현재 사용되는 V2 파일 업로드 컴포넌트입니다.
+
+**파일 경로**: `frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx`
+
+#### 이미지 로드 방식
+
+1. **formData의 컬럼 값으로 로드**: `formData[columnName]`에 파일 objid가 있으면 `/api/files/preview/{objid}`로 이미지 표시
+2. **getComponentFiles API로 로드**: target_objid 패턴으로 서버에서 파일 목록 조회
+
+#### 상태 관리
+
+- `uploadedFiles` state: 현재 표시 중인 파일 목록
+- `localStorage` 백업: `fileUpload_{componentId}_{columnName}` 키로 저장
+- `window.globalFileState`: 전역 파일 상태 (컴포넌트 간 동기화)
+
+#### 등록/수정 모드 구분
+
+- **수정 모드** (isRecordMode=true, recordId 있음): localStorage/서버에서 기존 파일 복원
+- **등록 모드** (isRecordMode=false, recordId 없음): localStorage 복원 스킵, 빈 상태로 시작
+- **단일 폼 화면** (회사정보 등): `formData[columnName]`의 objid 값으로 이미지 자동 로드
+
+### file-upload (레거시)
+
+**파일 경로**: `frontend/lib/registry/components/file-upload/FileUploadComponent.tsx`
+
+V2MediaRenderer에서 사용하는 레거시 컴포넌트. v2-file-upload와 유사하지만 별도 파일입니다.
+
+### ImageWidget
+
+**파일 경로**: `frontend/components/screen/widgets/types/ImageWidget.tsx`
+
+단순 이미지 표시용 위젯. 파일 업로드 기능은 있으나, `getFullImageUrl()`로 URL을 변환하여 `<img>` 태그로 직접 표시합니다. 파일 관리(목록, 삭제 등) 기능은 없습니다.
+
+---
+
+## 6. 디스크 저장 구조
+
+```
+backend-node/uploads/
+├── COMPANY_7/           # 회사별 격리
+│   ├── 2026/
+│   │   ├── 01/
+│   │   │   └── 08/
+│   │   │       └── 1767863580718_img.jpg
+│   │   └── 02/
+│   │       └── 06/
+│   │           ├── 1770346704685_5.png
+│   │           └── 1770352493105_5.png
+├── COMPANY_9/
+│   └── ...
+└── company_*/           # 최고 관리자 전용
+    └── ...
+```
+
+---
+
+## 7. 수정 이력 (2026-02-06)
+
+### parseInt 정밀도 손실 수정
+
+**파일**: `backend-node/src/controllers/fileController.ts`
+
+`attach_file_info.objid`는 `numeric` 타입으로 `433765011963536400` 같은 매우 큰 숫자입니다. JavaScript의 `parseInt()`는 `Number.MAX_SAFE_INTEGER`(약 9 * 10^15)를 초과하면 정밀도 손실이 발생합니다.
+
+| objid (원본) | parseInt 결과 | 차이 |
+|:---|:---|:---:|
+| 396361999644927100 | 396361999644927104 | -4 |
+| 433765011963536400 | 433765011963536384 | +16 |
+| 1128460590844245000 | 1128460590844244992 | +8 |
+
+**수정**: `parseInt(objid)` → `objid` (문자열 직접 전달, 8곳)
+
+### getComponentFiles fallback 추가
+
+**파일**: `backend-node/src/controllers/fileController.ts`
+
+수정 모달에서 이미지가 안 보이는 문제. `target_objid` 패턴이 일치하지 않을 때, 비즈니스 테이블의 레코드 컬럼 값으로 파일을 직접 조회하는 fallback 로직 추가.
+
+### v2-file-upload 등록 모드 파일 잔존 방지
+
+**파일**: `frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx`
+
+연속 등록 시 이전 등록의 이미지가 남아있는 문제. `loadComponentFiles`와 fallback 로직에서 등록 모드(recordId 없음)일 때 파일 복원을 스킵하도록 수정.
+
+### ORDER BY 기본 정렬 추가
+
+**파일**: `backend-node/src/services/tableManagementService.ts`
+
+`sortBy` 파라미터가 없을 때 `ORDER BY created_date DESC`를 기본값으로 적용. 4곳 수정.
diff --git a/docs/kjs/SAVED_DATA_NESTED_STRUCTURE_BUG_FIX.md b/docs/kjs/SAVED_DATA_NESTED_STRUCTURE_BUG_FIX.md
new file mode 100644
index 00000000..1cdf3af1
--- /dev/null
+++ b/docs/kjs/SAVED_DATA_NESTED_STRUCTURE_BUG_FIX.md
@@ -0,0 +1,149 @@
+# 저장 후 플로우 실행 시 폼 데이터 전달 오류 수정
+
+## 오류 현상
+
+사용자가 폼에서 데이터를 저장한 후, 연결된 노드 플로우(예: 비밀번호 자동 설정)가 실행될 때 `sabun` 값이 `undefined`로 전달되어 UPDATE 쿼리의 WHERE 조건이 작동하지 않는 문제.
+
+### 증상
+- 저장 버튼 클릭 시 INSERT는 정상 작동
+- 저장 후 실행되는 노드 플로우에서 `user_password` UPDATE가 실패 (0건 업데이트)
+- 콘솔 로그에서 `savedData.sabun: undefined` 출력
+
+```
+📦 [executeAfterSaveControl] savedData 필드: ['id', 'screenId', 'tableName', 'data', 'createdAt', 'updatedAt', 'createdBy', 'updatedBy']
+📦 [executeAfterSaveControl] savedData.sabun: undefined
+```
+
+---
+
+## 원인 분석
+
+### API 응답 구조의 3단계 중첩
+
+저장 API(`DynamicFormApi.saveFormData`)의 응답이 3단계로 중첩되어 있었음:
+
+```typescript
+// 1단계: Axios 응답
+saveResult = {
+  data: { ... }  // API 응답
+}
+
+// 2단계: API 응답 래핑 (ApiResponse 인터페이스)
+saveResult.data = {
+  success: true,
+  data: { ... },  // 저장된 레코드
+  message: "저장 완료"
+}
+
+// 3단계: 저장된 레코드 (dynamic_form_data 테이블 구조)
+saveResult.data.data = {
+  id: 123,
+  screenId: 106,
+  tableName: "user_info",
+  data: { sabun: "20260205-087", user_name: "TEST", ... },  // ← 실제 폼 데이터
+  createdAt: "2026-02-05T...",
+  updatedAt: "2026-02-05T...",
+  createdBy: "admin",
+  updatedBy: "admin"
+}
+
+// 4단계: 실제 폼 데이터 (우리가 필요한 데이터)
+saveResult.data.data.data = {
+  sabun: "20260205-087",
+  user_name: "TEST",
+  user_id: "Kim1542",
+  ...
+}
+```
+
+### 기존 코드의 문제점
+
+```typescript
+// 기존 코드 (buttonActions.ts:1619-1621)
+const savedData = saveResult?.data?.data || saveResult?.data || {};
+const formData = savedData;  // ← 2단계까지만 추출
+
+// savedData = { id, screenId, tableName, data: {...}, createdAt, ... }
+// savedData.sabun = undefined  ← 문제 발생!
+```
+
+기존 코드는 2단계(`saveResult.data.data`)까지만 추출했기 때문에, `savedData`가 저장된 레코드 메타데이터를 가리키고 있었음. 실제 폼 데이터는 `savedData.data` 안에 있었음.
+
+---
+
+## 해결 방법
+
+### 수정된 코드
+
+```typescript
+// 수정된 코드 (buttonActions.ts:1619-1628)
+// 🔧 수정: saveResult.data가 3단계로 중첩된 경우 실제 폼 데이터 추출
+// saveResult.data = API 응답 { success, data, message }
+// saveResult.data.data = 저장된 레코드 { id, screenId, tableName, data, createdAt... }
+// saveResult.data.data.data = 실제 폼 데이터 { sabun, user_name... }
+const savedRecord = saveResult?.data?.data || saveResult?.data || {};
+const actualFormData = savedRecord?.data || savedRecord;  // ← 3단계까지 추출
+const formData = (Object.keys(actualFormData).length > 0 ? actualFormData : context.formData || {});
+```
+
+### 수정 핵심
+1. `savedRecord`: 저장된 레코드 메타데이터 (`{ id, screenId, tableName, data, ... }`)
+2. `actualFormData`: `savedRecord.data`가 있으면 그것을 사용, 없으면 `savedRecord` 자체 사용
+3. 폴백: `actualFormData`가 비어있으면 `context.formData` 사용
+
+---
+
+## 수정된 파일
+
+| 파일 | 수정 내용 |
+|------|-----------|
+| `frontend/lib/utils/buttonActions.ts` | 3단계 중첩 데이터 구조에서 실제 폼 데이터 추출 로직 수정 (라인 1619-1628) |
+
+---
+
+## 검증 결과
+
+### 수정 전
+```
+📦 [executeAfterSaveControl] savedData 필드: ['id', 'screenId', 'tableName', 'data', ...]
+📦 [executeAfterSaveControl] savedData.sabun: undefined
+```
+
+### 수정 후
+```
+📦 [executeAfterSaveControl] savedRecord 구조: ['id', 'screenId', 'tableName', 'data', ...]
+📦 [executeAfterSaveControl] actualFormData 추출: ['sabun', 'user_id', 'user_password', ...]
+📦 [executeAfterSaveControl] formData.sabun: 20260205-087
+```
+
+### DB 확인
+```sql
+SELECT sabun, user_name, user_password FROM user_info WHERE sabun = '20260205-087';
+-- 결과: sabun: "20260205-087", user_name: "TEST", user_password: "1e538e2abdd9663437343212a4853591"
+```
+
+---
+
+## 교훈
+
+1. **API 응답 구조 확인**: API 응답이 여러 단계로 래핑될 수 있음. 프론트엔드에서 `apiClient`가 한 번, `ApiResponse` 인터페이스가 한 번, 그리고 실제 데이터 구조가 또 다른 레벨을 가질 수 있음.
+
+2. **로그 추가의 중요성**: 중간 단계마다 로그를 찍어 데이터 구조를 확인하는 것이 디버깅에 필수적.
+
+3. **폴백 처리**: 데이터 추출 시 여러 단계의 폴백을 두어 다양한 응답 구조에 대응.
+
+---
+
+## 관련 이슈
+
+- 비밀번호 자동 설정 노드 플로우가 저장 후 실행되지 않는 문제
+- 저장 후 연결된 UPDATE 플로우에서 WHERE 조건이 작동하지 않는 문제
+
+---
+
+## 작성 정보
+
+- **작성일**: 2026-02-05
+- **작성자**: AI Assistant
+- **관련 화면**: 부서관리 > 사용자 등록 모달
+- **관련 플로우**: flowId: 120 (부서관리 비밀번호 자동세팅)
diff --git a/docs/multi-agent-system-plan.md b/docs/multi-agent-system-plan.md
new file mode 100644
index 00000000..46a1df3c
--- /dev/null
+++ b/docs/multi-agent-system-plan.md
@@ -0,0 +1,989 @@
+# Multi-Agent 협업 시스템 설계서
+
+> Cursor 에이전트 간 협업을 통한 효율적인 개발 시스템
+
+## 목차
+
+1. [개요](#개요)
+2. [아키텍처](#아키텍처)
+3. [에이전트 역할 정의](#에이전트-역할-정의)
+4. [통신 프로토콜](#통신-프로토콜)
+5. [워크플로우](#워크플로우)
+6. [프롬프트 템플릿](#프롬프트-템플릿)
+7. [MCP 서버 구현](#mcp-서버-구현)
+8. [비용 분석](#비용-분석)
+9. [한계점 및 해결방안](#한계점-및-해결방안)
+
+---
+
+## 개요
+
+### 문제점: 단일 에이전트의 한계
+
+```
+단일 에이전트 문제:
+┌─────────────────────────────────────────┐
+│ • 컨텍스트 폭발 (50k+ 토큰 → 까먹음)    │
+│ • 전문성 분산 (모든 영역 얕게 앎)       │
+│ • 재작업 빈번 (실수, 누락)              │
+│ • 검증 부재 (크로스체크 없음)           │
+└─────────────────────────────────────────┘
+```
+
+### 해결책: Multi-Agent 협업
+
+```
+멀티 에이전트 장점:
+┌─────────────────────────────────────────┐
+│ • 컨텍스트 분리 (각자 작은 컨텍스트)    │
+│ • 전문성 집중 (영역별 깊은 이해)        │
+│ • 크로스체크 (서로 검증)                │
+│ • 병렬 처리 (동시 작업)                 │
+└─────────────────────────────────────────┘
+```
+
+### 모델 티어링 전략
+
+| 에이전트 | 모델 | 역할 | 비용 |
+|----------|------|------|------|
+| Agent A (PM) | Claude Opus 4.5 | 분석, 계획, 조율 | 높음 |
+| Agent B (Backend) | Claude Sonnet | 백엔드 구현 | 낮음 |
+| Agent C (DB) | Claude Sonnet | DB/쿼리 담당 | 낮음 |
+| Agent D (Frontend) | Claude Sonnet | 프론트 구현 | 낮음 |
+
+**예상 비용 절감: 50-60%**
+
+---
+
+## 아키텍처
+
+### 전체 구조
+
+```
+                         ┌─────────────┐
+                         │    USER     │
+                         └──────┬──────┘
+                                │
+                                ▼
+                    ┌───────────────────────┐
+                    │     Agent A (PM)      │
+                    │    Claude Opus 4.5    │
+                    │                       │
+                    │  • 사용자 의도 파악    │
+                    │  • 작업 분배          │
+                    │  • 결과 통합          │
+                    │  • 품질 검증          │
+                    └───────────┬───────────┘
+                                │
+              ┌─────────────────┼─────────────────┐
+              │                 │                 │
+              ▼                 ▼                 ▼
+    ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
+    │   Agent B       │ │   Agent C       │ │   Agent D       │
+    │   (Backend)     │ │   (Database)    │ │   (Frontend)    │
+    │   Sonnet        │ │   Sonnet        │ │   Sonnet        │
+    │                 │ │                 │ │                 │
+    │ • API 설계/구현 │ │ • 스키마 설계   │ │ • 컴포넌트 구현 │
+    │ • 서비스 로직   │ │ • 쿼리 작성     │ │ • 페이지 구현   │
+    │ • 라우팅        │ │ • 마이그레이션  │ │ • 스타일링      │
+    └─────────────────┘ └─────────────────┘ └─────────────────┘
+              │                 │                 │
+              └─────────────────┴─────────────────┘
+                                │
+                                ▼
+                    ┌───────────────────────┐
+                    │   MCP Orchestrator    │
+                    │                       │
+                    │  • 메시지 라우팅      │
+                    │  • 병렬 실행          │
+                    │  • 결과 수집          │
+                    └───────────────────────┘
+```
+
+### 폴더별 담당 영역
+
+| 에이전트 | 담당 폴더 | 파일 유형 |
+|----------|-----------|-----------|
+| Agent B (Backend) | `backend-node/src/` | `.ts`, `.js` |
+| Agent C (DB) | `src/com/pms/mapper/`, `db/` | `.xml`, `.sql` |
+| Agent D (Frontend) | `frontend/` | `.tsx`, `.ts`, `.css` |
+| Agent A (PM) | 전체 조율 | 모든 파일 (읽기 위주) |
+
+---
+
+## 에이전트 역할 정의
+
+### Agent A (PM) - 프로젝트 매니저
+
+```yaml
+역할: 전체 조율 및 사용자 인터페이스
+모델: Claude Opus 4.5
+
+핵심 책임:
+  의도 파악:
+    - 사용자 요청 분석
+    - 모호한 요청 명확화
+    - 숨겨진 요구사항 발굴
+  
+  작업 분배:
+    - 작업을 세부 태스크로 분해
+    - 적절한 에이전트에게 할당
+    - 우선순위 및 의존성 결정
+  
+  품질 관리:
+    - 결과물 검증
+    - 일관성 체크
+    - 충돌 해결
+  
+  통합:
+    - 개별 결과물 취합
+    - 최종 결과 생성
+    - 사용자에게 보고
+
+하지 않는 것:
+  - 직접 코드 구현 (전문가에게 위임)
+  - 특정 영역 깊이 분석 (전문가에게 요청)
+```
+
+### Agent B (Backend) - 백엔드 전문가
+
+```yaml
+역할: API 및 서버 로직 담당
+모델: Claude Sonnet
+
+담당 영역:
+  폴더:
+    - backend-node/src/controllers/
+    - backend-node/src/services/
+    - backend-node/src/routes/
+    - backend-node/src/middleware/
+    - backend-node/src/utils/
+  
+  작업:
+    - REST API 엔드포인트 설계/구현
+    - 비즈니스 로직 구현
+    - 미들웨어 작성
+    - 에러 핸들링
+    - 인증/인가 로직
+
+담당 아닌 것:
+  - frontend/ 폴더 (Agent D 담당)
+  - SQL 쿼리 직접 작성 (Agent C에게 요청)
+  - DB 스키마 변경 (Agent C 담당)
+
+협업 필요 시:
+  - DB 쿼리 필요 → Agent C에게 요청
+  - 프론트 연동 문제 → Agent D와 협의
+```
+
+### Agent C (Database) - DB 전문가
+
+```yaml
+역할: 데이터베이스 및 쿼리 담당
+모델: Claude Sonnet
+
+담당 영역:
+  폴더:
+    - src/com/pms/mapper/
+    - db/
+    - backend-node/src/database/
+  
+  작업:
+    - 테이블 스키마 설계
+    - MyBatis 매퍼 XML 작성
+    - SQL 쿼리 최적화
+    - 인덱스 설계
+    - 마이그레이션 스크립트
+
+담당 아닌 것:
+  - API 로직 (Agent B 담당)
+  - 프론트엔드 (Agent D 담당)
+  - 비즈니스 로직 판단 (Agent A에게 확인)
+
+협업 필요 시:
+  - API에서 필요한 데이터 구조 → Agent B와 협의
+  - 쿼리 결과 사용법 → Agent B에게 전달
+```
+
+### Agent D (Frontend) - 프론트엔드 전문가
+
+```yaml
+역할: UI/UX 및 클라이언트 로직 담당
+모델: Claude Sonnet
+
+담당 영역:
+  폴더:
+    - frontend/components/
+    - frontend/pages/
+    - frontend/lib/
+    - frontend/hooks/
+    - frontend/styles/
+  
+  작업:
+    - React 컴포넌트 구현
+    - 페이지 레이아웃
+    - 상태 관리
+    - API 연동 (호출)
+    - 스타일링
+
+담당 아닌 것:
+  - API 구현 (Agent B 담당)
+  - DB 쿼리 (Agent C 담당)
+  - API 스펙 결정 (Agent A/B와 협의)
+
+협업 필요 시:
+  - API 엔드포인트 필요 → Agent B에게 요청
+  - 데이터 구조 확인 → Agent C에게 문의
+```
+
+---
+
+## 통신 프로토콜
+
+### 메시지 포맷
+
+```typescript
+// 요청 메시지
+interface TaskRequest {
+  id: string;                    // 고유 ID (예: "task-001")
+  from: 'A' | 'B' | 'C' | 'D';   // 발신자
+  to: 'A' | 'B' | 'C' | 'D';     // 수신자
+  type: 'info_request' | 'work_request' | 'question';
+  priority: 'high' | 'medium' | 'low';
+  content: {
+    task: string;                // 작업 내용
+    context?: string;            // 배경 정보
+    expected_output?: string;    // 기대 결과
+    depends_on?: string[];       // 선행 작업 ID
+  };
+  timestamp: string;
+}
+
+// 응답 메시지
+interface TaskResponse {
+  id: string;                    // 요청 ID와 매칭
+  from: 'A' | 'B' | 'C' | 'D';
+  to: 'A' | 'B' | 'C' | 'D';
+  status: 'success' | 'partial' | 'failed' | 'need_clarification';
+  confidence: 'high' | 'medium' | 'low';
+  
+  result?: {
+    summary: string;             // 한 줄 요약
+    details: string;             // 상세 내용
+    files_affected?: string[];   // 영향받는 파일
+    code_changes?: CodeChange[]; // 코드 변경사항
+  };
+  
+  // 메타 정보
+  scope_violations?: string[];   // 스코프 벗어난 요청
+  dependencies?: string[];       // 필요한 선행 작업
+  side_effects?: string[];       // 부작용
+  alternatives?: string[];       // 대안
+  
+  // 추가 요청
+  questions?: string[];          // 명확화 필요
+  needs_from_others?: {
+    agent: 'A' | 'B' | 'C' | 'D';
+    request: string;
+  }[];
+  
+  timestamp: string;
+}
+
+// 코드 변경
+interface CodeChange {
+  file: string;
+  action: 'create' | 'modify' | 'delete';
+  content?: string;              // 전체 코드 또는 diff
+  line_start?: number;
+  line_end?: number;
+}
+```
+
+### 상태 코드 정의
+
+| 상태 | 의미 | 후속 조치 |
+|------|------|-----------|
+| `success` | 완전히 완료 | 결과 사용 가능 |
+| `partial` | 부분 완료 | 추가 작업 필요 |
+| `failed` | 실패 | 에러 확인 후 재시도 |
+| `need_clarification` | 명확화 필요 | 질문에 답변 후 재요청 |
+
+### 확신도 정의
+
+| 확신도 | 의미 | 권장 조치 |
+|--------|------|-----------|
+| `high` | 확실함 | 바로 적용 가능 |
+| `medium` | 대체로 맞음 | 검토 후 적용 |
+| `low` | 추측임 | 반드시 검증 필요 |
+
+---
+
+## 워크플로우
+
+### Phase 1: 정보 수집
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Phase 1: 정보 수집                        │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  1. User → Agent A: "주문 관리 기능 만들어줘"               │
+│                                                             │
+│  2. Agent A 분석:                                           │
+│     - 기능 범위 파악                                        │
+│     - 필요한 정보 식별                                      │
+│     - 정보 수집 요청 생성                                   │
+│                                                             │
+│  3. Agent A → B, C, D (병렬):                               │
+│     - B에게: "현재 order 관련 API 구조 분석해줘"           │
+│     - C에게: "orders 테이블 스키마 알려줘"                 │
+│     - D에게: "주문 관련 컴포넌트 현황 알려줘"              │
+│                                                             │
+│  4. B, C, D → Agent A (응답):                               │
+│     - B: API 현황 보고                                      │
+│     - C: 스키마 정보 보고                                   │
+│     - D: 컴포넌트 현황 보고                                 │
+│                                                             │
+│  5. Agent A: 정보 취합 및 계획 수립                         │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Phase 2: 작업 분배
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Phase 2: 작업 분배                        │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  1. Agent A: 종합 계획 수립                                 │
+│     ┌─────────────────────────────────────────┐             │
+│     │ 분석 결과:                               │             │
+│     │ - API에 pagination 추가 필요            │             │
+│     │ - DB는 현재 구조 유지                   │             │
+│     │ - 프론트 무한스크롤 → 페이지네이션      │             │
+│     │                                         │             │
+│     │ 작업 순서:                               │             │
+│     │ 1. C: 페이징 쿼리 준비                  │             │
+│     │ 2. B: API 수정 (C 결과 의존)            │             │
+│     │ 3. D: 프론트 수정 (B 결과 의존)         │             │
+│     └─────────────────────────────────────────┘             │
+│                                                             │
+│  2. Agent A → B, C, D: 작업 할당                            │
+│     - C에게: "cursor 기반 페이징 쿼리 작성"                │
+│     - B에게: "GET /api/orders에 pagination 추가" (C 대기)  │
+│     - D에게: "Pagination 컴포넌트 적용" (B 대기)           │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Phase 3: 실행 및 통합
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  Phase 3: 실행 및 통합                       │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  1. 순차/병렬 실행:                                         │
+│     - C: 쿼리 작성 → 완료 보고                             │
+│     - B: API 수정 (C 완료 후) → 완료 보고                  │
+│     - D: 프론트 수정 (B 완료 후) → 완료 보고               │
+│                                                             │
+│  2. Agent A: 결과 검증                                      │
+│     - 일관성 체크                                           │
+│     - 누락 확인                                             │
+│     - 충돌 해결                                             │
+│                                                             │
+│  3. Agent A → User: 최종 보고                               │
+│     ┌─────────────────────────────────────────┐             │
+│     │ 완료된 작업:                             │             │
+│     │ ✅ orders.xml - 페이징 쿼리 추가        │             │
+│     │ ✅ OrderController.ts - pagination 적용 │             │
+│     │ ✅ OrderListPage.tsx - UI 수정          │             │
+│     │                                         │             │
+│     │ 테스트 필요:                             │             │
+│     │ - GET /api/orders?page=1&limit=10       │             │
+│     └─────────────────────────────────────────┘             │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 프롬프트 템플릿
+
+### Agent A (PM) 시스템 프롬프트
+
+```markdown
+# 역할
+너는 PM(Project Manager) 에이전트야.
+사용자 요청을 분석하고, 전문가 에이전트들(Backend, DB, Frontend)에게 
+작업을 분배하고, 결과를 통합해서 최종 결과물을 만들어.
+
+# 사용 가능한 도구
+- ask_backend_agent: 백엔드 전문가에게 질문/작업 요청
+- ask_db_agent: DB 전문가에게 질문/작업 요청
+- ask_frontend_agent: 프론트 전문가에게 질문/작업 요청
+- parallel_ask: 여러 전문가에게 동시에 요청
+
+# 작업 프로세스
+
+## Phase 1: 분석
+1. 사용자 요청 분석
+2. 필요한 정보 식별
+3. 정보 수집 요청 (parallel_ask 활용)
+
+## Phase 2: 계획
+1. 수집된 정보 분석
+2. 작업 분해 및 의존성 파악
+3. 우선순위 결정
+4. 작업 분배 계획 수립
+
+## Phase 3: 실행
+1. 의존성 순서대로 작업 요청
+2. 결과 검증
+3. 필요시 재요청
+
+## Phase 4: 통합
+1. 모든 결과 취합
+2. 일관성 검증
+3. 사용자에게 보고
+
+# 작업 분배 기준
+- Backend Agent: API, 서비스 로직, 라우팅 (backend-node/)
+- DB Agent: 스키마, 쿼리, 마이그레이션 (mapper/, db/)
+- Frontend Agent: 컴포넌트, 페이지, 스타일 (frontend/)
+
+# 판단 기준
+- 불확실하면 사용자에게 물어봐
+- 에이전트 결과가 이상하면 재요청
+- 영향 범위 크면 사용자 확인
+- 충돌 시 더 안전한 방향 선택
+
+# 응답 형식
+작업 분배 시:
+```json
+{
+  "phase": "info_gathering | work_distribution | integration",
+  "reasoning": "왜 이렇게 분배하는지",
+  "tasks": [
+    {
+      "agent": "backend | db | frontend",
+      "priority": 1,
+      "task": "구체적인 작업 내용",
+      "depends_on": [],
+      "expected_output": "기대 결과"
+    }
+  ]
+}
+```
+
+최종 보고 시:
+```json
+{
+  "summary": "한 줄 요약",
+  "completed_tasks": ["완료된 작업들"],
+  "files_changed": ["변경된 파일들"],
+  "next_steps": ["다음 단계 (있다면)"],
+  "test_instructions": ["테스트 방법"]
+}
+```
+```
+
+### Agent B (Backend) 시스템 프롬프트
+
+```markdown
+# 역할
+너는 Backend 전문가 에이전트야.
+backend-node/ 폴더의 API, 서비스, 라우팅을 담당해.
+
+# 담당 영역 (이것만!)
+- backend-node/src/controllers/
+- backend-node/src/services/
+- backend-node/src/routes/
+- backend-node/src/middleware/
+- backend-node/src/utils/
+
+# 담당 아닌 것 (절대 건들지 마)
+- frontend/ → Frontend Agent 담당
+- src/com/pms/mapper/ → DB Agent 담당
+- SQL 쿼리 직접 작성 → DB Agent에게 요청
+
+# 코드 작성 규칙
+1. TypeScript 사용
+2. 에러 핸들링 필수
+3. 주석은 한글로
+4. 기존 코드 스타일 따르기
+5. ... 생략 없이 완전한 코드
+
+# 응답 형식
+```json
+{
+  "status": "success | partial | failed | need_clarification",
+  "confidence": "high | medium | low",
+  "result": {
+    "summary": "한 줄 요약",
+    "details": "상세 설명",
+    "files_affected": ["파일 경로들"],
+    "code_changes": [
+      {
+        "file": "경로",
+        "action": "create | modify | delete",
+        "content": "전체 코드"
+      }
+    ]
+  },
+  "needs_from_others": [
+    {"agent": "db", "request": "필요한 것"}
+  ],
+  "side_effects": ["영향받는 것들"],
+  "questions": ["명확하지 않은 것들"]
+}
+```
+
+# 협업 규칙
+1. 내 영역 아니면 즉시 보고 (scope_violation)
+2. 확실하지 않으면 confidence: "low"
+3. 다른 에이전트 필요하면 needs_from_others에 명시
+4. 부작용 있으면 반드시 보고
+```
+
+### Agent C (Database) 시스템 프롬프트
+
+```markdown
+# 역할
+너는 Database 전문가 에이전트야.
+DB 스키마, 쿼리, 마이그레이션을 담당해.
+
+# 담당 영역 (이것만!)
+- src/com/pms/mapper/ (MyBatis XML)
+- db/ (스키마, 마이그레이션)
+- backend-node/src/database/
+
+# 담당 아닌 것 (절대 건들지 마)
+- API 로직 → Backend Agent 담당
+- 프론트엔드 → Frontend Agent 담당
+- 비즈니스 로직 판단 → PM에게 확인
+
+# 코드 작성 규칙
+1. PostgreSQL 문법 사용
+2. 파라미터 바인딩 (#{}) 필수 - SQL 인젝션 방지
+3. 인덱스 고려
+4. 성능 최적화 (EXPLAIN 결과 고려)
+
+# MyBatis 매퍼 규칙
+```xml
+<!-- 파라미터 바인딩 (안전) -->
+WHERE id = #{id}
+
+<!-- 동적 쿼리 -->
+<if test="name != null and name != ''">
+  AND name LIKE '%' || #{name} || '%'
+</if>
+
+<!-- 페이징 -->
+LIMIT #{limit} OFFSET #{offset}
+```
+
+# 응답 형식
+```json
+{
+  "status": "success | partial | failed | need_clarification",
+  "confidence": "high | medium | low",
+  "result": {
+    "summary": "한 줄 요약",
+    "details": "상세 설명",
+    "schema_info": {
+      "tables": ["관련 테이블"],
+      "columns": ["주요 컬럼"],
+      "indexes": ["인덱스"]
+    },
+    "code_changes": [
+      {
+        "file": "경로",
+        "action": "create | modify",
+        "content": "쿼리/스키마"
+      }
+    ]
+  },
+  "performance_notes": ["성능 관련 참고사항"],
+  "questions": ["명확하지 않은 것들"]
+}
+```
+```
+
+### Agent D (Frontend) 시스템 프롬프트
+
+```markdown
+# 역할
+너는 Frontend 전문가 에이전트야.
+React/Next.js 기반 UI 구현을 담당해.
+
+# 담당 영역 (이것만!)
+- frontend/components/
+- frontend/pages/ (또는 app/)
+- frontend/lib/
+- frontend/hooks/
+- frontend/styles/
+
+# 담당 아닌 것 (절대 건들지 마)
+- backend-node/ → Backend Agent 담당
+- DB 관련 → DB Agent 담당
+- API 스펙 결정 → PM/Backend와 협의
+
+# 코드 작성 규칙
+1. TypeScript 사용
+2. React 함수형 컴포넌트
+3. 커스텀 훅 활용
+4. 주석은 한글로
+5. Tailwind CSS 또는 기존 스타일 시스템 따르기
+
+# API 호출 규칙
+- 절대 fetch 직접 사용 금지
+- lib/api/ 클라이언트 사용
+- 에러 핸들링 필수
+
+# 응답 형식
+```json
+{
+  "status": "success | partial | failed | need_clarification",
+  "confidence": "high | medium | low",
+  "result": {
+    "summary": "한 줄 요약",
+    "details": "상세 설명",
+    "components_affected": ["컴포넌트 목록"],
+    "code_changes": [
+      {
+        "file": "경로",
+        "action": "create | modify",
+        "content": "전체 코드"
+      }
+    ]
+  },
+  "needs_from_others": [
+    {"agent": "backend", "request": "필요한 API"}
+  ],
+  "ui_notes": ["UX 관련 참고사항"],
+  "questions": ["명확하지 않은 것들"]
+}
+```
+```
+
+---
+
+## MCP 서버 구현
+
+### 프로젝트 구조
+
+```
+mcp-agent-orchestrator/
+├── package.json
+├── tsconfig.json
+├── src/
+│   ├── index.ts          # 메인 서버
+│   ├── agents/
+│   │   ├── types.ts      # 타입 정의
+│   │   ├── pm.ts         # PM 에이전트 프롬프트
+│   │   ├── backend.ts    # Backend 에이전트 프롬프트
+│   │   ├── database.ts   # DB 에이전트 프롬프트
+│   │   └── frontend.ts   # Frontend 에이전트 프롬프트
+│   └── utils/
+│       └── logger.ts     # 로깅
+└── build/
+    └── index.js          # 컴파일된 파일
+```
+
+### 핵심 코드
+
+```typescript
+// src/index.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import Anthropic from "@anthropic-ai/sdk";
+import { PM_PROMPT, BACKEND_PROMPT, DB_PROMPT, FRONTEND_PROMPT } from "./agents";
+
+const server = new Server({
+  name: "agent-orchestrator",
+  version: "1.0.0",
+});
+
+const anthropic = new Anthropic();
+
+// 에이전트별 설정
+const AGENT_CONFIG = {
+  pm: { model: "claude-opus-4-5-20250214", prompt: PM_PROMPT },
+  backend: { model: "claude-sonnet-4-20250514", prompt: BACKEND_PROMPT },
+  db: { model: "claude-sonnet-4-20250514", prompt: DB_PROMPT },
+  frontend: { model: "claude-sonnet-4-20250514", prompt: FRONTEND_PROMPT },
+};
+
+// 도구 목록
+server.setRequestHandler("tools/list", async () => ({
+  tools: [
+    {
+      name: "ask_backend_agent",
+      description: "백엔드 전문가에게 질문하거나 작업 요청",
+      inputSchema: {
+        type: "object",
+        properties: {
+          task: { type: "string", description: "작업 내용" },
+          context: { type: "string", description: "배경 정보 (선택)" },
+        },
+        required: ["task"],
+      },
+    },
+    {
+      name: "ask_db_agent",
+      description: "DB 전문가에게 질문하거나 작업 요청",
+      inputSchema: {
+        type: "object",
+        properties: {
+          task: { type: "string", description: "작업 내용" },
+          context: { type: "string", description: "배경 정보 (선택)" },
+        },
+        required: ["task"],
+      },
+    },
+    {
+      name: "ask_frontend_agent",
+      description: "프론트엔드 전문가에게 질문하거나 작업 요청",
+      inputSchema: {
+        type: "object",
+        properties: {
+          task: { type: "string", description: "작업 내용" },
+          context: { type: "string", description: "배경 정보 (선택)" },
+        },
+        required: ["task"],
+      },
+    },
+    {
+      name: "parallel_ask",
+      description: "여러 전문가에게 동시에 질문 (병렬 실행)",
+      inputSchema: {
+        type: "object",
+        properties: {
+          requests: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                agent: { 
+                  type: "string", 
+                  enum: ["backend", "db", "frontend"] 
+                },
+                task: { type: "string" },
+                context: { type: "string" },
+              },
+              required: ["agent", "task"],
+            },
+          },
+        },
+        required: ["requests"],
+      },
+    },
+  ],
+}));
+
+// 도구 실행
+server.setRequestHandler("tools/call", async (request) => {
+  const { name, arguments: args } = request.params;
+
+  const callAgent = async (agentType: string, task: string, context?: string) => {
+    const config = AGENT_CONFIG[agentType];
+    const response = await anthropic.messages.create({
+      model: config.model,
+      max_tokens: 8192,
+      system: config.prompt,
+      messages: [
+        {
+          role: "user",
+          content: context ? `${task}\n\n배경 정보:\n${context}` : task,
+        },
+      ],
+    });
+    return response.content[0].text;
+  };
+
+  switch (name) {
+    case "ask_backend_agent":
+      return {
+        content: [
+          { type: "text", text: await callAgent("backend", args.task, args.context) },
+        ],
+      };
+
+    case "ask_db_agent":
+      return {
+        content: [
+          { type: "text", text: await callAgent("db", args.task, args.context) },
+        ],
+      };
+
+    case "ask_frontend_agent":
+      return {
+        content: [
+          { type: "text", text: await callAgent("frontend", args.task, args.context) },
+        ],
+      };
+
+    case "parallel_ask":
+      const results = await Promise.all(
+        args.requests.map(async (req) => ({
+          agent: req.agent,
+          result: await callAgent(req.agent, req.task, req.context),
+        }))
+      );
+      return {
+        content: [
+          { type: "text", text: JSON.stringify(results, null, 2) },
+        ],
+      };
+
+    default:
+      throw new Error(`Unknown tool: ${name}`);
+  }
+});
+
+// 서버 시작
+const transport = new StdioServerTransport();
+await server.connect(transport);
+```
+
+### Cursor 설정
+
+```json
+// .cursor/mcp.json
+{
+  "mcpServers": {
+    "agent-orchestrator": {
+      "command": "node",
+      "args": ["C:/Users/defaultuser0/mcp-agent-orchestrator/build/index.js"],
+      "env": {
+        "ANTHROPIC_API_KEY": "your-api-key-here"
+      }
+    }
+  }
+}
+```
+
+---
+
+## 비용 분석
+
+### 토큰 사용량 비교
+
+| 시나리오 | 단일 에이전트 | 멀티 에이전트 | 절감 |
+|----------|--------------|--------------|------|
+| 기능 1개 추가 | 100,000 토큰 | 60,000 토큰 | 40% |
+| 시스템 리팩토링 | 300,000 토큰 | 150,000 토큰 | 50% |
+| 새 모듈 개발 | 500,000 토큰 | 200,000 토큰 | 60% |
+
+### 비용 계산 (예시)
+
+```
+단일 에이전트 (전부 Opus):
+- 300,000 토큰 × $15/M = $4.50
+
+멀티 에이전트 (Opus PM + Sonnet Workers):
+- PM (Opus): 50,000 토큰 × $15/M = $0.75
+- Workers (Sonnet): 100,000 토큰 × $3/M = $0.30
+- 총: $1.05
+
+절감: $4.50 - $1.05 = $3.45 (76% 절감!)
+```
+
+### ROI 분석
+
+```
+초기 투자:
+- MCP 서버 개발: 4-6시간
+- 프롬프트 튜닝: 2-4시간
+- 테스트: 2시간
+- 총: 8-12시간
+
+회수:
+- 대규모 작업당 $3-5 절감
+- 재작업 시간 70% 감소
+- 품질 30% 향상
+
+손익분기점: 대규모 작업 3-5회
+```
+
+---
+
+## 한계점 및 해결방안
+
+### 현재 한계
+
+| 한계 | 설명 | 해결방안 |
+|------|------|----------|
+| 완전 자동화 불가 | Cursor 에이전트 간 직접 통신 없음 | MCP 서버로 우회 |
+| 파일 읽기 제한 | 각 에이전트가 모든 파일 접근 어려움 | 컨텍스트에 필요한 정보 전달 |
+| 실시간 동기화 | 변경사항 즉시 반영 어려움 | 명시적 갱신 요청 |
+| 에러 복구 | 자동 롤백 메커니즘 없음 | 수동 복구 또는 git 활용 |
+
+### 향후 개선 방향
+
+1. **파일 시스템 연동**
+   - MCP 서버에 파일 읽기/쓰기 도구 추가
+   - 에이전트가 직접 코드 확인 가능
+
+2. **결과 자동 적용**
+   - 코드 변경사항 자동 적용
+   - git 커밋 자동화
+
+3. **피드백 루프**
+   - 테스트 자동 실행
+   - 실패 시 자동 재시도
+
+4. **히스토리 관리**
+   - 대화 이력 저장
+   - 컨텍스트 캐싱
+
+---
+
+## 체크리스트
+
+### 구현 전 준비
+
+- [ ] Node.js 18+ 설치
+- [ ] Anthropic API 키 발급
+- [ ] 프로젝트 폴더 생성
+
+### MCP 서버 구현
+
+- [ ] package.json 설정
+- [ ] TypeScript 설정
+- [ ] 기본 서버 구조
+- [ ] 도구 정의 (4개)
+- [ ] 에이전트 프롬프트 작성
+- [ ] 빌드 및 테스트
+
+### Cursor 연동
+
+- [ ] mcp.json 설정
+- [ ] Cursor 재시작
+- [ ] 도구 호출 테스트
+- [ ] 실제 작업 테스트
+
+### 튜닝
+
+- [ ] 프롬프트 개선
+- [ ] 에러 핸들링 강화
+- [ ] 로깅 추가
+- [ ] 성능 최적화
+
+---
+
+## 참고 자료
+
+- [MCP SDK 문서](https://modelcontextprotocol.io/)
+- [Anthropic API 문서](https://docs.anthropic.com/)
+- [CrewAI](https://github.com/joaomdmoura/crewAI) - 멀티에이전트 프레임워크 참고
+- [AutoGen](https://github.com/microsoft/autogen) - Microsoft 멀티에이전트 참고
+
+---
+
+*작성일: 2026-02-05*
+*버전: 1.0*
diff --git a/docs/screen-implementation-guide/00_analysis/full-screen-analysis.md b/docs/screen-implementation-guide/00_analysis/full-screen-analysis.md
new file mode 100644
index 00000000..9b4a9908
--- /dev/null
+++ b/docs/screen-implementation-guide/00_analysis/full-screen-analysis.md
@@ -0,0 +1,331 @@
+# 화면 전체 분석 보고서
+
+> **분석 대상**: `/Users/kimjuseok/Downloads/화면개발 8` 폴더 내 핵심 업무 화면
+> **분석 기준**: 메뉴별 분류, 3개 이상 재활용 가능한 컴포넌트 식별
+> **분석 일자**: 2026-01-30
+
+---
+
+## 1. 현재 사용 중인 V2 컴포넌트 목록
+
+> **중요**: v2- 접두사가 붙은 컴포넌트만 사용합니다.
+
+### 입력 컴포넌트
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-input` | V2 입력 | 텍스트, 숫자, 비밀번호, 이메일 등 입력 |
+| `v2-select` | V2 선택 | 드롭다운, 콤보박스, 라디오, 체크박스 |
+| `v2-date` | V2 날짜 | 날짜, 시간, 날짜범위 입력 |
+
+### 표시 컴포넌트
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-text-display` | 텍스트 표시 | 라벨, 텍스트 표시 |
+| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 |
+| `v2-aggregation-widget` | 집계 위젯 | 합계, 평균, 개수 등 집계 표시 |
+
+### 테이블/데이터 컴포넌트
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-table-list` | 테이블 리스트 | 데이터 테이블 표시, 페이지네이션, 정렬, 필터 |
+| `v2-table-search-widget` | 검색 필터 | 화면 내 테이블 검색/필터/그룹 기능 |
+| `v2-pivot-grid` | 피벗 그리드 | 다차원 데이터 분석 (피벗 테이블) |
+
+### 레이아웃 컴포넌트
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 레이아웃 |
+| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 배치 |
+| `v2-section-card` | Section Card | 제목/테두리가 있는 그룹화 컨테이너 |
+| `v2-section-paper` | Section Paper | 배경색 기반 미니멀 그룹화 컨테이너 |
+| `v2-divider-line` | 구분선 | 영역 구분 |
+| `v2-repeat-container` | 리피터 컨테이너 | 데이터 수만큼 내부 컴포넌트 반복 렌더링 |
+| `v2-repeater` | 리피터 | 반복 컨트롤 |
+
+### 액션/기타 컴포넌트
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-button-primary` | 기본 버튼 | 저장, 삭제 등 액션 버튼 |
+| `v2-numbering-rule` | 채번규칙 | 자동 코드/번호 생성 |
+| `v2-category-manager` | 카테고리 관리자 | 카테고리 관리 |
+| `v2-location-swap-selector` | 위치 교환 선택기 | 위치 교환 기능 |
+| `v2-rack-structure` | 랙 구조 | 창고 랙 시각화 |
+| `v2-media` | 미디어 | 미디어 표시 |
+
+**총 23개 V2 컴포넌트**
+
+---
+
+## 2. 화면 분류 (메뉴별)
+
+### 01. 기준정보 (master-data)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 회사정보 | 회사정보.html | 검색+테이블 | ✅ 완전 |
+| 부서정보 | 부서정보.html | 검색+테이블 | ✅ 완전 |
+| 품목정보 | 품목정보.html | 검색+테이블+그룹화 | ⚠️ 그룹화 미지원 |
+| BOM관리 | BOM관리.html | 분할패널+트리 | ⚠️ 트리뷰 미지원 |
+| 공정정보관리 | 공정정보관리.html | 분할패널+테이블 | ✅ 완전 |
+| 공정작업기준 | 공정작업기준관리.html | 검색+테이블 | ✅ 완전 |
+| 품목라우팅 | 품목라우팅관리.html | 분할패널+테이블 | ✅ 완전 |
+
+### 02. 영업관리 (sales)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 수주관리 | 수주관리.html | 분할패널+테이블 | ✅ 완전 |
+| 견적관리 | 견적관리.html | 분할패널+테이블 | ✅ 완전 |
+| 거래처관리 | 거래처관리.html | 분할패널+탭+그룹화 | ⚠️ 그룹화 미지원 |
+| 판매품목정보 | 판매품목정보.html | 검색+테이블 | ✅ 완전 |
+| 출하계획관리 | 출하계획관리.html | 검색+테이블 | ✅ 완전 |
+
+### 03. 생산관리 (production)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 생산계획관리 | 생산계획관리.html | 분할패널+탭+타임라인 | ❌ 타임라인 미지원 |
+| 생산관리 | 생산관리.html | 검색+테이블 | ✅ 완전 |
+| 생산실적관리 | 생산실적관리.html | 검색+테이블 | ✅ 완전 |
+| 작업지시 | 작업지시.html | 탭+그룹화테이블+분할패널 | ⚠️ 그룹화 미지원 |
+| 공정관리 | 공정관리.html | 분할패널+테이블 | ✅ 완전 |
+
+### 04. 구매관리 (purchase)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 발주관리 | 발주관리.html | 검색+테이블 | ✅ 완전 |
+| 공급업체관리 | 공급업체관리.html | 검색+테이블 | ✅ 완전 |
+| 구매입고 | pages/구매입고.html | 검색+테이블 | ✅ 완전 |
+
+### 05. 설비관리 (equipment)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 설비정보 | 설비정보.html | 분할패널+카드+탭 | ✅ v2-card-display 활용 |
+
+### 06. 물류관리 (logistics)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 창고관리 | 창고관리.html | 모바일앱스타일+iframe | ❌ 별도개발 필요 |
+| 창고정보관리 | 창고정보관리.html | 검색+테이블 | ✅ 완전 |
+| 입출고관리 | 입출고관리.html | 검색+테이블+그룹화 | ⚠️ 그룹화 미지원 |
+| 재고현황 | 재고현황.html | 검색+테이블 | ✅ 완전 |
+
+### 07. 품질관리 (quality)
+| 화면명 | 파일명 | 패턴 | 구현 가능 |
+|--------|--------|------|----------|
+| 검사기준 | 검사기준.html | 검색+테이블 | ✅ 완전 |
+| 검사정보관리 | 검사정보관리.html | 탭+테이블 | ✅ 완전 |
+| 검사장비관리 | 검사장비관리.html | 검색+테이블 | ✅ 완전 |
+| 불량관리 | 불량관리.html | 검색+테이블 | ✅ 완전 |
+| 클레임관리 | 클레임관리.html | 검색+테이블 | ✅ 완전 |
+
+---
+
+## 3. 화면 UI 패턴 분석
+
+### 패턴 A: 검색 + 테이블 (가장 기본)
+**해당 화면**: 약 60% (15개 이상)
+
+**사용 컴포넌트**:
+- `v2-table-search-widget`: 검색 필터
+- `v2-table-list`: 데이터 테이블
+
+```
+┌─────────────────────────────────────────┐
+│ [검색필드들...] [조회] [엑셀]            │ ← v2-table-search-widget
+├─────────────────────────────────────────┤
+│ 테이블 제목     [신규등록] [삭제]        │
+│ ────────────────────────────────────── │
+│ □ | 코드 | 이름 | 상태 | 등록일 |       │ ← v2-table-list
+│ □ | A001 | 테스트| 사용 | 2026-01-30 | │
+└─────────────────────────────────────────┘
+```
+
+### 패턴 B: 분할 패널 (마스터-디테일)
+**해당 화면**: 약 25% (8개)
+
+**사용 컴포넌트**:
+- `v2-split-panel-layout`: 좌우 분할
+- `v2-table-list`: 마스터/디테일 테이블
+- `v2-tabs-widget`: 상세 탭 (선택)
+
+```
+┌──────────────────┬──────────────────────┐
+│ 마스터 리스트    │ 상세 정보 / 탭       │
+│ ───────────────  │ ┌────┬────┬────┐   │
+│ □ A001 제품A     │ │기본│이력│첨부│   │
+│ □ A002 제품B ←   │ └────┴────┴────┘   │
+│ □ A003 제품C     │ [테이블 or 폼]      │
+└──────────────────┴──────────────────────┘
+```
+
+### 패턴 C: 탭 + 테이블
+**해당 화면**: 약 10% (3개)
+
+**사용 컴포넌트**:
+- `v2-tabs-widget`: 탭 전환
+- `v2-table-list`: 탭별 테이블
+
+```
+┌─────────────────────────────────────────┐
+│ [탭1] [탭2] [탭3]                        │
+├─────────────────────────────────────────┤
+│ [테이블 영역]                            │
+└─────────────────────────────────────────┘
+```
+
+### 패턴 D: 특수 UI
+**해당 화면**: 약 5% (2개)
+
+- 생산계획관리: 타임라인/간트 차트 → **v2-timeline 미존재**
+- 창고관리: 모바일 앱 스타일 → **별도 개발 필요**
+
+---
+
+## 4. 신규 컴포넌트 분석 (3개 이상 재활용 기준)
+
+### 4.1 v2-grouped-table (그룹화 테이블)
+**재활용 화면 수**: 5개 이상 ✅
+
+| 화면 | 그룹화 기준 |
+|------|------------|
+| 품목정보 | 품목구분, 카테고리 |
+| 거래처관리 | 거래처유형, 지역 |
+| 작업지시 | 작업일자, 공정 |
+| 입출고관리 | 입출고구분, 창고 |
+| 견적관리 | 상태, 거래처 |
+
+**기능 요구사항**:
+- 특정 컬럼 기준 그룹핑
+- 그룹 접기/펼치기
+- 그룹 헤더에 집계 표시
+- 다중 그룹핑 지원
+
+**구현 복잡도**: 중
+
+### 4.2 v2-tree-view (트리 뷰)
+**재활용 화면 수**: 3개 ✅
+
+| 화면 | 트리 용도 |
+|------|----------|
+| BOM관리 | BOM 구조 (정전개/역전개) |
+| 부서정보 | 조직도 |
+| 메뉴관리 | 메뉴 계층 |
+
+**기능 요구사항**:
+- 노드 접기/펼치기
+- 드래그앤드롭 (선택)
+- 정전개/역전개 전환
+- 노드 선택 이벤트
+
+**구현 복잡도**: 중상
+
+### 4.3 v2-timeline-scheduler (타임라인)
+**재활용 화면 수**: 1~2개 (기준 미달)
+
+| 화면 | 용도 |
+|------|------|
+| 생산계획관리 | 간트 차트 |
+| 설비 가동 현황 | 타임라인 |
+
+**기능 요구사항**:
+- 시간축 기반 배치
+- 드래그로 일정 변경
+- 공정별 색상 구분
+- 줌 인/아웃
+
+**구현 복잡도**: 상
+
+> **참고**: 3개 미만이므로 우선순위 하향
+
+---
+
+## 5. 컴포넌트 커버리지
+
+### 현재 V2 컴포넌트로 구현 가능
+```
+┌─────────────────────────────────────────────────┐
+│ 17개 화면 (65%)                                  │
+│ - 기본 검색 + 테이블 패턴                         │
+│ - 분할 패널                                      │
+│ - 탭 전환                                       │
+│ - 카드 디스플레이                                │
+└─────────────────────────────────────────────────┘
+```
+
+### v2-grouped-table 개발 후
+```
+┌─────────────────────────────────────────────────┐
+│ +5개 화면 (22개, 85%)                            │
+│ - 품목정보, 거래처관리, 작업지시                  │
+│ - 입출고관리, 견적관리                           │
+└─────────────────────────────────────────────────┘
+```
+
+### v2-tree-view 개발 후
+```
+┌─────────────────────────────────────────────────┐
+│ +2개 화면 (24개, 92%)                            │
+│ - BOM관리, 부서정보(계층)                        │
+└─────────────────────────────────────────────────┘
+```
+
+### 별도 개발 필요
+```
+┌─────────────────────────────────────────────────┐
+│ 2개 화면 (8%)                                    │
+│ - 생산계획관리 (타임라인)                         │
+│ - 창고관리 (모바일 앱 스타일)                     │
+└─────────────────────────────────────────────────┘
+```
+
+---
+
+## 6. 신규 컴포넌트 개발 우선순위
+
+| 순위 | 컴포넌트 | 재활용 화면 수 | 복잡도 | ROI |
+|------|----------|--------------|--------|-----|
+| 1 | v2-grouped-table | 5+ | 중 | ⭐⭐⭐⭐⭐ |
+| 2 | v2-tree-view | 3 | 중상 | ⭐⭐⭐⭐ |
+| 3 | v2-timeline-scheduler | 1~2 | 상 | ⭐⭐ |
+
+---
+
+## 7. 권장 구현 전략
+
+### Phase 1: 즉시 구현 (현재 V2 컴포넌트)
+- 회사정보, 부서정보
+- 발주관리, 공급업체관리
+- 검사기준, 검사장비관리, 불량관리
+- 창고정보관리, 재고현황
+- 공정작업기준관리
+- 수주관리, 견적관리, 공정관리
+- 설비정보 (v2-card-display 활용)
+- 검사정보관리
+
+### Phase 2: v2-grouped-table 개발 후
+- 품목정보, 거래처관리, 입출고관리
+- 작업지시
+
+### Phase 3: v2-tree-view 개발 후
+- BOM관리
+- 부서정보 (계층 뷰)
+
+### Phase 4: 개별 개발
+- 생산계획관리 (타임라인)
+- 창고관리 (모바일 스타일)
+
+---
+
+## 8. 요약
+
+| 항목 | 수치 |
+|------|------|
+| 전체 분석 화면 수 | 26개 |
+| 현재 즉시 구현 가능 | 17개 (65%) |
+| v2-grouped-table 추가 시 | 22개 (85%) |
+| v2-tree-view 추가 시 | 24개 (92%) |
+| 별도 개발 필요 | 2개 (8%) |
+
+**핵심 결론**:
+1. **현재 V2 컴포넌트**로 65% 화면 구현 가능
+2. **v2-grouped-table** 1개 컴포넌트 개발로 85%까지 확대
+3. **v2-tree-view** 추가로 92% 도달
+4. 나머지 8%는 화면별 특수 UI (타임라인, 모바일 스타일)로 개별 개발 필요
diff --git a/docs/screen-implementation-guide/00_analysis/next-component-development-plan.md b/docs/screen-implementation-guide/00_analysis/next-component-development-plan.md
new file mode 100644
index 00000000..58c8cd3f
--- /dev/null
+++ b/docs/screen-implementation-guide/00_analysis/next-component-development-plan.md
@@ -0,0 +1,581 @@
+# 다음 구현 필요 컴포넌트 개발 계획
+
+> **작성일**: 2026-01-30
+> **상태**: 계획 수립 완료
+> **우선순위**: v2-table-grouped (1순위) → v2-timeline-scheduler (2순위)
+
+---
+
+## 개요
+
+생산계획관리 화면의 정식 버전 구현을 위해 필요한 2개의 신규 컴포넌트 개발 계획입니다.
+
+| 컴포넌트 | 용도 | 난이도 | 예상 작업량 |
+|----------|------|:------:|:----------:|
+| `v2-table-grouped` | 그룹화 테이블 (접기/펼치기) | 중 | 2-3일 |
+| `v2-timeline-scheduler` | 타임라인/간트차트 스케줄러 | 상 | 5-7일 |
+
+---
+
+## 1. v2-table-grouped (그룹화 테이블)
+
+### 1.1 컴포넌트 개요
+
+| 항목 | 내용 |
+|------|------|
+| **컴포넌트 ID** | `v2-table-grouped` |
+| **카테고리** | DISPLAY |
+| **용도** | 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능 제공 |
+| **기반 컴포넌트** | `v2-table-list` 확장 |
+| **참고 UI** | Excel 그룹화, VS Code 파일 그룹화 |
+
+### 1.2 핵심 기능
+
+| 기능 | 설명 | 우선순위 |
+|------|------|:--------:|
+| 그룹화 | 지정된 컬럼 기준으로 데이터 그룹핑 | 필수 |
+| 접기/펼치기 | 그룹 행 클릭 시 하위 항목 토글 | 필수 |
+| 그룹 요약 | 그룹별 합계/개수 표시 | 필수 |
+| 다중 그룹 | 여러 컬럼 기준 중첩 그룹화 | 선택 |
+| 그룹 선택 | 그룹 체크박스로 하위 전체 선택 | 필수 |
+| 전체 펼치기/접기 | 모든 그룹 일괄 토글 | 필수 |
+
+### 1.3 UI 목업
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [전체 펼치기] [전체 접기]                              [3개 그룹] │
+├─────────────────────────────────────────────────────────────────┤
+│ ▼ □ 품목A (P001)                           수량: 150  3건      │
+│   ├─ □ 2026-01-15  생산계획001  50개   설비A                   │
+│   ├─ □ 2026-01-16  생산계획002  50개   설비B                   │
+│   └─ □ 2026-01-17  생산계획003  50개   설비A                   │
+├─────────────────────────────────────────────────────────────────┤
+│ ► □ 품목B (P002)                           수량: 200  2건      │  ← 접힌 상태
+├─────────────────────────────────────────────────────────────────┤
+│ ▼ □ 품목C (P003)                           수량: 100  1건      │
+│   └─ □ 2026-01-18  생산계획004  100개  설비C                   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 1.4 타입 정의 (types.ts)
+
+```typescript
+import { ColumnConfig } from "../v2-table-list/types";
+
+/**
+ * 그룹화 설정
+ */
+export interface GroupConfig {
+  /** 그룹화 기준 컬럼 */
+  groupByColumn: string;
+  
+  /** 그룹 표시 형식 (예: "{item_name} ({item_code})") */
+  groupLabelFormat?: string;
+  
+  /** 그룹 요약 설정 */
+  summary?: {
+    /** 합계 컬럼 */
+    sumColumns?: string[];
+    /** 개수 표시 여부 */
+    showCount?: boolean;
+  };
+  
+  /** 초기 펼침 상태 */
+  defaultExpanded?: boolean;
+  
+  /** 중첩 그룹 (다중 그룹화) */
+  nestedGroup?: GroupConfig;
+}
+
+/**
+ * 그룹화 테이블 설정
+ */
+export interface TableGroupedConfig {
+  /** 테이블명 */
+  selectedTable?: string;
+  
+  /** 커스텀 테이블 사용 */
+  useCustomTable?: boolean;
+  customTableName?: string;
+  
+  /** 그룹화 설정 */
+  groupConfig: GroupConfig;
+  
+  /** 컬럼 설정 (v2-table-list와 동일) */
+  columns?: ColumnConfig[];
+  
+  /** 체크박스 표시 */
+  showCheckbox?: boolean;
+  
+  /** 체크박스 모드 */
+  checkboxMode?: "single" | "multi";
+  
+  /** 페이지네이션 (그룹 단위) */
+  pagination?: {
+    enabled: boolean;
+    pageSize: number;
+  };
+  
+  /** 정렬 설정 */
+  defaultSort?: {
+    column: string;
+    direction: "asc" | "desc";
+  };
+}
+
+/**
+ * 그룹 상태
+ */
+export interface GroupState {
+  /** 그룹 키 (groupByColumn 값) */
+  groupKey: string;
+  
+  /** 펼침 여부 */
+  expanded: boolean;
+  
+  /** 그룹 내 데이터 */
+  items: any[];
+  
+  /** 그룹 요약 데이터 */
+  summary?: Record<string, number>;
+}
+```
+
+### 1.5 파일 구조
+
+```
+frontend/lib/registry/components/v2-table-grouped/
+├── index.ts                      # Definition (V2TableGroupedDefinition)
+├── types.ts                      # 타입 정의
+├── config.ts                     # 기본 설정값
+├── TableGroupedComponent.tsx     # 메인 컴포넌트
+├── TableGroupedConfigPanel.tsx   # 설정 패널
+├── TableGroupedRenderer.tsx      # 레지스트리 등록
+├── components/
+│   ├── GroupHeader.tsx           # 그룹 헤더 (펼치기/접기)
+│   ├── GroupSummary.tsx          # 그룹 요약
+│   └── GroupCheckbox.tsx         # 그룹 체크박스
+├── hooks/
+│   └── useGroupedData.ts         # 그룹화 로직 훅
+└── README.md
+```
+
+### 1.6 구현 단계
+
+| 단계 | 작업 내용 | 예상 시간 |
+|:----:|----------|:---------:|
+| 1 | 타입 정의 및 기본 구조 생성 | 2시간 |
+| 2 | `useGroupedData` 훅 구현 (데이터 그룹화 로직) | 4시간 |
+| 3 | `GroupHeader` 컴포넌트 (펼치기/접기 UI) | 2시간 |
+| 4 | `TableGroupedComponent` 메인 구현 | 6시간 |
+| 5 | 그룹 체크박스 연동 | 2시간 |
+| 6 | 그룹 요약 (합계/개수) | 2시간 |
+| 7 | `TableGroupedConfigPanel` 설정 패널 | 4시간 |
+| 8 | 테스트 및 문서화 | 2시간 |
+
+**총 예상: 24시간 (약 3일)**
+
+### 1.7 v2-table-list와의 차이점
+
+| 항목 | v2-table-list | v2-table-grouped |
+|------|---------------|------------------|
+| 데이터 구조 | 플랫 리스트 | 계층 구조 (그룹 > 아이템) |
+| 렌더링 | 행 단위 | 그룹 헤더 + 상세 행 |
+| 선택 | 개별 행 | 그룹 단위 / 개별 단위 |
+| 요약 | 전체 합계 (선택) | 그룹별 요약 |
+| 페이지네이션 | 행 단위 | 그룹 단위 |
+
+---
+
+## 2. v2-timeline-scheduler (타임라인 스케줄러)
+
+### 2.1 컴포넌트 개요
+
+| 항목 | 내용 |
+|------|------|
+| **컴포넌트 ID** | `v2-timeline-scheduler` |
+| **카테고리** | DISPLAY |
+| **용도** | 간트차트 형태의 일정/계획 시각화 및 편집 |
+| **참고 UI** | MS Project, Jira Timeline, dhtmlxGantt |
+| **외부 라이브러리** | 고려 중: `@tanstack/react-virtual` (가상 스크롤) |
+
+### 2.2 핵심 기능
+
+| 기능 | 설명 | 우선순위 |
+|------|------|:--------:|
+| 타임라인 그리드 | 날짜 기준 그리드 표시 (일/주/월) | 필수 |
+| 스케줄 바 | 시작~종료 기간 바 렌더링 | 필수 |
+| 리소스 행 | 설비/작업자별 행 구분 | 필수 |
+| 드래그 이동 | 스케줄 바 드래그로 날짜 변경 | 필수 |
+| 리사이즈 | 바 양쪽 핸들로 기간 조정 | 필수 |
+| 줌 레벨 | 일/주/월 단위 전환 | 필수 |
+| 충돌 표시 | 같은 리소스 시간 겹침 경고 | 선택 |
+| 진행률 표시 | 바 내부 진행률 표시 | 선택 |
+| 마일스톤 | 단일 일정 마커 | 선택 |
+
+### 2.3 UI 목업
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│ [◀ 이전] [오늘] [다음 ▶]  2026년 1월           [일] [주] [월]   [+ 추가]     │
+├────────────┬─────────────────────────────────────────────────────────────────┤
+│            │ 15(수) │ 16(목) │ 17(금) │ 18(토) │ 19(일) │ 20(월) │ 21(화) │
+├────────────┼─────────────────────────────────────────────────────────────────┤
+│ 설비A      │ ████████████████                                               │
+│            │ [생산계획001]   │                                               │
+├────────────┼─────────────────────────────────────────────────────────────────┤
+│ 설비B      │        █████████████████████████                               │
+│            │        [생산계획002        ]                                    │
+├────────────┼─────────────────────────────────────────────────────────────────┤
+│ 설비C      │                        ████████████████                        │
+│            │                        [생산계획003]                            │
+└────────────┴─────────────────────────────────────────────────────────────────┘
+
+범례: ██ 진행중  ██ 완료  ██ 지연  ◆ 마일스톤
+```
+
+### 2.4 타입 정의 (types.ts)
+
+```typescript
+/**
+ * 줌 레벨
+ */
+export type ZoomLevel = "day" | "week" | "month";
+
+/**
+ * 스케줄 상태
+ */
+export type ScheduleStatus = "planned" | "in_progress" | "completed" | "delayed" | "cancelled";
+
+/**
+ * 스케줄 항목
+ */
+export interface ScheduleItem {
+  /** 고유 ID */
+  id: string;
+  
+  /** 리소스 ID (설비/작업자) */
+  resourceId: string;
+  
+  /** 표시 제목 */
+  title: string;
+  
+  /** 시작 일시 */
+  startDate: string;  // ISO 8601 format
+  
+  /** 종료 일시 */
+  endDate: string;
+  
+  /** 상태 */
+  status: ScheduleStatus;
+  
+  /** 진행률 (0-100) */
+  progress?: number;
+  
+  /** 색상 (CSS color) */
+  color?: string;
+  
+  /** 추가 데이터 */
+  data?: Record<string, any>;
+}
+
+/**
+ * 리소스 (행)
+ */
+export interface Resource {
+  /** 리소스 ID */
+  id: string;
+  
+  /** 표시명 */
+  name: string;
+  
+  /** 그룹 (선택) */
+  group?: string;
+  
+  /** 아이콘 (선택) */
+  icon?: string;
+  
+  /** 용량 (선택, 충돌 계산용) */
+  capacity?: number;
+}
+
+/**
+ * 타임라인 설정
+ */
+export interface TimelineSchedulerConfig {
+  /** 테이블명 (스케줄 데이터) */
+  selectedTable?: string;
+  
+  /** 리소스 테이블명 */
+  resourceTable?: string;
+  
+  /** 필드 매핑 */
+  fieldMapping: {
+    id: string;
+    resourceId: string;
+    title: string;
+    startDate: string;
+    endDate: string;
+    status?: string;
+    progress?: string;
+    color?: string;
+  };
+  
+  /** 리소스 필드 매핑 */
+  resourceFieldMapping?: {
+    id: string;
+    name: string;
+    group?: string;
+  };
+  
+  /** 초기 줌 레벨 */
+  defaultZoomLevel?: ZoomLevel;
+  
+  /** 초기 표시 날짜 */
+  initialDate?: string;
+  
+  /** 편집 가능 여부 */
+  editable?: boolean;
+  
+  /** 드래그 이동 허용 */
+  allowDrag?: boolean;
+  
+  /** 리사이즈 허용 */
+  allowResize?: boolean;
+  
+  /** 충돌 체크 */
+  checkConflicts?: boolean;
+  
+  /** 상태별 색상 */
+  statusColors?: Record<ScheduleStatus, string>;
+  
+  /** 리소스 컬럼 너비 */
+  resourceColumnWidth?: number;
+  
+  /** 행 높이 */
+  rowHeight?: number;
+  
+  /** 셀 너비 (줌 레벨별) */
+  cellWidth?: {
+    day: number;
+    week: number;
+    month: number;
+  };
+  
+  /** 툴바 표시 */
+  showToolbar?: boolean;
+  
+  /** 범례 표시 */
+  showLegend?: boolean;
+}
+
+/**
+ * 이벤트 핸들러
+ */
+export interface TimelineEvents {
+  /** 스케줄 클릭 */
+  onScheduleClick?: (schedule: ScheduleItem) => void;
+  
+  /** 스케줄 더블클릭 */
+  onScheduleDoubleClick?: (schedule: ScheduleItem) => void;
+  
+  /** 드래그 완료 */
+  onScheduleDrag?: (schedule: ScheduleItem, newStart: Date, newEnd: Date) => void;
+  
+  /** 리사이즈 완료 */
+  onScheduleResize?: (schedule: ScheduleItem, newStart: Date, newEnd: Date) => void;
+  
+  /** 빈 영역 클릭 (새 스케줄 추가용) */
+  onEmptyClick?: (resourceId: string, date: Date) => void;
+}
+```
+
+### 2.5 파일 구조
+
+```
+frontend/lib/registry/components/v2-timeline-scheduler/
+├── index.ts                          # Definition (V2TimelineSchedulerDefinition)
+├── types.ts                          # 타입 정의
+├── config.ts                         # 기본 설정값
+├── TimelineSchedulerComponent.tsx    # 메인 컴포넌트
+├── TimelineSchedulerConfigPanel.tsx  # 설정 패널
+├── TimelineSchedulerRenderer.tsx     # 레지스트리 등록
+├── components/
+│   ├── TimelineHeader.tsx            # 날짜 헤더
+│   ├── TimelineGrid.tsx              # 그리드 배경
+│   ├── ResourceColumn.tsx            # 리소스 컬럼 (좌측)
+│   ├── ScheduleBar.tsx               # 스케줄 바 (드래그/리사이즈)
+│   ├── TimelineToolbar.tsx           # 툴바 (줌, 네비게이션)
+│   ├── TimelineLegend.tsx            # 범례
+│   └── ConflictIndicator.tsx         # 충돌 표시
+├── hooks/
+│   ├── useTimelineState.ts           # 타임라인 상태 관리
+│   ├── useScheduleDrag.ts            # 드래그 로직
+│   ├── useScheduleResize.ts          # 리사이즈 로직
+│   └── useDateCalculation.ts         # 날짜/위치 계산
+├── utils/
+│   ├── dateUtils.ts                  # 날짜 유틸리티
+│   └── conflictDetection.ts          # 충돌 감지
+└── README.md
+```
+
+### 2.6 구현 단계
+
+| 단계 | 작업 내용 | 예상 시간 |
+|:----:|----------|:---------:|
+| 1 | 타입 정의 및 기본 구조 생성 | 3시간 |
+| 2 | `TimelineHeader` (날짜 헤더, 줌 레벨) | 4시간 |
+| 3 | `TimelineGrid` (그리드 배경) | 3시간 |
+| 4 | `ResourceColumn` (리소스 목록) | 2시간 |
+| 5 | `ScheduleBar` 기본 렌더링 | 4시간 |
+| 6 | 드래그 이동 구현 | 6시간 |
+| 7 | 리사이즈 구현 | 4시간 |
+| 8 | 줌 레벨 전환 (일/주/월) | 3시간 |
+| 9 | 날짜 네비게이션 | 2시간 |
+| 10 | 충돌 감지 및 표시 | 4시간 |
+| 11 | 가상 스크롤 (대용량 데이터) | 4시간 |
+| 12 | `TimelineSchedulerConfigPanel` | 4시간 |
+| 13 | API 연동 (저장/로드) | 4시간 |
+| 14 | 테스트 및 문서화 | 3시간 |
+
+**총 예상: 50시간 (약 6-7일)**
+
+### 2.7 핵심 알고리즘
+
+#### 날짜 → 픽셀 위치 변환
+
+```typescript
+function dateToPosition(date: Date, viewStart: Date, cellWidth: number, zoomLevel: ZoomLevel): number {
+  const diffMs = date.getTime() - viewStart.getTime();
+  
+  switch (zoomLevel) {
+    case "day":
+      const diffDays = diffMs / (1000 * 60 * 60 * 24);
+      return diffDays * cellWidth;
+    case "week":
+      const diffWeeks = diffMs / (1000 * 60 * 60 * 24 * 7);
+      return diffWeeks * cellWidth;
+    case "month":
+      // 월 단위는 일수가 다르므로 별도 계산
+      return calculateMonthPosition(date, viewStart, cellWidth);
+  }
+}
+```
+
+#### 충돌 감지
+
+```typescript
+function detectConflicts(schedules: ScheduleItem[], resourceId: string): ScheduleItem[][] {
+  const resourceSchedules = schedules
+    .filter(s => s.resourceId === resourceId)
+    .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+  
+  const conflicts: ScheduleItem[][] = [];
+  
+  for (let i = 0; i < resourceSchedules.length; i++) {
+    const current = resourceSchedules[i];
+    const overlapping = resourceSchedules.filter(s => 
+      s.id !== current.id &&
+      new Date(s.startDate) < new Date(current.endDate) &&
+      new Date(s.endDate) > new Date(current.startDate)
+    );
+    
+    if (overlapping.length > 0) {
+      conflicts.push([current, ...overlapping]);
+    }
+  }
+  
+  return conflicts;
+}
+```
+
+---
+
+## 3. 구현 우선순위 및 일정
+
+### 3.1 권장 순서
+
+```
+1단계: v2-table-grouped (2-3일)
+  ↓
+2단계: v2-timeline-scheduler (5-7일)
+  ↓
+3단계: 생산계획관리 정식 버전 화면 구성 (1-2일)
+```
+
+### 3.2 이유
+
+1. **v2-table-grouped 먼저**:
+   - `v2-table-list` 기반 확장으로 난이도 낮음
+   - 생산계획 외 다른 화면(BOM, 수주 등)에서도 활용 가능
+   - 타임라인 개발 중에도 테스트용으로 사용 가능
+
+2. **v2-timeline-scheduler 나중**:
+   - 복잡도가 높아 집중 개발 필요
+   - 드래그/리사이즈 등 인터랙션 테스트 필요
+   - 생산계획관리 전용 컴포넌트
+
+### 3.3 체크리스트
+
+#### v2-table-grouped ✅ 구현 완료 (2026-01-30)
+
+- [x] 타입 정의 완료
+- [x] 기본 구조 생성
+- [x] useGroupedData 훅 구현
+- [x] GroupHeader 컴포넌트
+- [x] 메인 컴포넌트 구현
+- [x] 그룹 체크박스 연동
+- [x] 그룹 요약 (합계/개수)
+- [x] 설정 패널 구현
+- [x] 레지스트리 등록
+- [x] 문서화 (README.md)
+
+#### v2-timeline-scheduler ✅ 구현 완료 (2026-01-30)
+
+- [x] 타입 정의 완료
+- [x] 기본 구조 생성
+- [x] TimelineHeader (날짜)
+- [x] TimelineGrid (배경)
+- [x] ResourceColumn (리소스)
+- [x] ScheduleBar 기본 렌더링
+- [x] 드래그 이동 (기본)
+- [x] 리사이즈 (기본)
+- [x] 줌 레벨 전환
+- [x] 날짜 네비게이션
+- [ ] 충돌 감지 (향후)
+- [ ] 가상 스크롤 (향후)
+- [x] 설정 패널 구현
+- [x] API 연동
+- [x] 레지스트리 등록
+- [ ] 테스트 완료
+- [x] 문서화 (README.md)
+
+---
+
+## 4. 참고 자료
+
+### 기존 V2 컴포넌트 참고
+
+- `v2-table-list`: 테이블 렌더링, 체크박스, 페이지네이션
+- `v2-pivot-grid`: 복잡한 그리드 렌더링, 가상 스크롤
+- `v2-split-panel-layout`: 커스텀 모드 컴포넌트 배치
+
+### 외부 라이브러리 검토
+
+| 라이브러리 | 용도 | 고려 사항 |
+|----------|------|----------|
+| `@tanstack/react-virtual` | 가상 스크롤 | 이미 사용 중, 확장 용이 |
+| `date-fns` | 날짜 계산 | 이미 사용 중 |
+| `react-dnd` | 드래그앤드롭 | 검토 필요, 현재 네이티브 구현 |
+
+### 관련 문서
+
+- [생산계획관리 화면 설계](../03_production/production-plan.md)
+- [V2 컴포넌트 분석 가이드](../../V2_컴포넌트_분석_가이드.md)
+- [컴포넌트 개발 가이드](../../../frontend/docs/component-development-guide.md)
+
+---
+
+**작성자**: Claude AI
+**최종 수정**: 2026-01-30
diff --git a/docs/screen-implementation-guide/00_analysis/schedule-auto-generation-guide.md b/docs/screen-implementation-guide/00_analysis/schedule-auto-generation-guide.md
new file mode 100644
index 00000000..02699843
--- /dev/null
+++ b/docs/screen-implementation-guide/00_analysis/schedule-auto-generation-guide.md
@@ -0,0 +1,894 @@
+# 스케줄 자동 생성 기능 구현 가이드
+
+> 버전: 2.0
+> 최종 수정: 2025-02-02
+> 적용 화면: 생산계획관리, 설비계획관리, 출하계획관리 등
+
+## 1. 개요
+
+### 1.1 기능 설명
+
+좌측 테이블에서 선택한 데이터(수주, 작업지시 등)를 기반으로 우측 타임라인에 스케줄을 자동 생성하는 기능입니다.
+
+### 1.2 주요 특징
+
+- **범용성**: 설정 기반으로 다양한 화면에서 재사용 가능
+- **미리보기**: 적용 전 변경사항 확인 가능
+- **소스 추적**: 스케줄이 어디서 생성되었는지 추적 가능
+- **연결 필터**: 좌측 선택 시 우측 타임라인 자동 필터링
+- **이벤트 버스 기반**: 컴포넌트 간 느슨한 결합 (Loose Coupling)
+
+### 1.3 아키텍처 원칙
+
+**이벤트 버스 패턴**을 활용하여 컴포넌트 간 직접 참조를 제거합니다:
+
+```
+┌─────────────────┐     이벤트 발송      ┌─────────────────┐
+│   v2-button     │ ──────────────────▶ │   EventBus      │
+│  (발송만 함)     │                     │  (중재자)        │
+└─────────────────┘                     └────────┬────────┘
+                                                 │
+                    ┌────────────────────────────┼────────────────────────────┐
+                    │                            │                            │
+                    ▼                            ▼                            ▼
+          ┌─────────────────┐         ┌─────────────────┐         ┌─────────────────┐
+          │ ScheduleService │         │  v2-timeline    │         │   기타 리스너    │
+          │  (처리 담당)     │         │   (갱신)        │         │                 │
+          └─────────────────┘         └─────────────────┘         └─────────────────┘
+```
+
+**장점**:
+- 버튼은 데이터가 어디서 오는지 알 필요 없음
+- 테이블은 누가 데이터를 사용하는지 알 필요 없음
+- 컴포넌트 교체/추가 시 기존 코드 수정 불필요
+
+---
+
+## 2. 데이터 흐름
+
+### 2.1 전체 흐름도
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                           분할 패널 (SplitPanelLayout)                        │
+├───────────────────────────────┬─────────────────────────────────────────────┤
+│         좌측 패널              │              우측 패널                       │
+│                               │                                             │
+│  ┌─────────────────────────┐  │  ┌─────────────────────────────────────┐   │
+│  │  v2-table-grouped       │  │  │  자동 스케줄 생성 버튼               │   │
+│  │  (수주 목록)             │  │  │  ↓                                  │   │
+│  │                         │  │  │  ① 좌측 선택 데이터 가져오기         │   │
+│  │  ☑ ITEM-001 (탕핑 A)    │──┼──│  ② 백엔드 API 호출 (미리보기)       │   │
+│  │    └ SO-2025-101        │  │  │  ③ 변경사항 다이얼로그 표시          │   │
+│  │    └ SO-2025-102        │  │  │  ④ 적용 API 호출                    │   │
+│  │  ☐ ITEM-002 (탕핑 B)    │  │  │  ⑤ 타임라인 새로고침                │   │
+│  │    └ SO-2025-201        │  │  └─────────────────────────────────────┘   │
+│  └─────────────────────────┘  │                                             │
+│            │                  │  ┌─────────────────────────────────────┐   │
+│            │ linkedFilter     │  │  v2-timeline-scheduler              │   │
+│            └──────────────────┼──│  (생산 타임라인)                     │   │
+│                               │  │                                     │   │
+│                               │  │  part_code = 선택된 품목 필터링      │   │
+│                               │  └─────────────────────────────────────┘   │
+└───────────────────────────────┴─────────────────────────────────────────────┘
+```
+
+### 2.2 단계별 데이터 흐름
+
+| 단계 | 동작 | 데이터 |
+|------|------|--------|
+| 1 | 좌측 테이블에서 품목 선택 | `selectedItems[]` (그룹 선택 시 자식 포함) |
+| 2 | 자동 스케줄 생성 버튼 클릭 | 버튼 액션 실행 |
+| 3 | 미리보기 API 호출 | `{ config, sourceData, period }` |
+| 4 | 변경사항 다이얼로그 표시 | `{ toCreate, toDelete, summary }` |
+| 5 | 적용 API 호출 | `{ config, preview, options }` |
+| 6 | 타임라인 새로고침 | `TABLE_REFRESH` 이벤트 발송 |
+| 7 | 다음 방문 시 좌측 선택 | `linkedFilter`로 우측 자동 필터링 |
+
+---
+
+## 3. 테이블 구조 설계
+
+### 3.1 범용 스케줄 테이블 (schedule_mng)
+
+```sql
+CREATE TABLE schedule_mng (
+    schedule_id SERIAL PRIMARY KEY,
+    company_code VARCHAR(20) NOT NULL,
+    
+    -- 스케줄 기본 정보
+    schedule_type VARCHAR(50) NOT NULL,      -- 'PRODUCTION', 'SHIPPING', 'MAINTENANCE' 등
+    schedule_name VARCHAR(200),
+    
+    -- 리소스 연결 (타임라인 Y축)
+    resource_type VARCHAR(50) NOT NULL,      -- 'ITEM', 'MACHINE', 'WORKER' 등
+    resource_id VARCHAR(50) NOT NULL,        -- 품목코드, 설비코드 등
+    resource_name VARCHAR(200),
+    
+    -- 일정
+    start_date TIMESTAMP NOT NULL,
+    end_date TIMESTAMP NOT NULL,
+    
+    -- 수량/값
+    plan_qty NUMERIC(15,3),
+    actual_qty NUMERIC(15,3),
+    
+    -- 상태
+    status VARCHAR(20) DEFAULT 'PLANNED',    -- PLANNED, IN_PROGRESS, COMPLETED, CANCELLED
+    
+    -- 소스 추적 (어디서 생성되었는지)
+    source_table VARCHAR(100),               -- 'sales_order_mng', 'work_order_mng' 등
+    source_id VARCHAR(50),                   -- 소스 테이블의 PK
+    source_group_key VARCHAR(100),           -- 그룹 키 (품목코드 등)
+    
+    -- 자동 생성 여부
+    auto_generated BOOLEAN DEFAULT FALSE,
+    generated_at TIMESTAMP,
+    generated_by VARCHAR(50),
+    
+    -- 메타데이터 (추가 정보 JSON)
+    metadata JSONB,
+    
+    created_at TIMESTAMP DEFAULT NOW(),
+    updated_at TIMESTAMP DEFAULT NOW(),
+    
+    CONSTRAINT fk_schedule_company FOREIGN KEY (company_code) 
+        REFERENCES company_mng(company_code)
+);
+
+-- 인덱스
+CREATE INDEX idx_schedule_company ON schedule_mng(company_code);
+CREATE INDEX idx_schedule_type ON schedule_mng(schedule_type);
+CREATE INDEX idx_schedule_resource ON schedule_mng(resource_type, resource_id);
+CREATE INDEX idx_schedule_source ON schedule_mng(source_table, source_id);
+CREATE INDEX idx_schedule_date ON schedule_mng(start_date, end_date);
+CREATE INDEX idx_schedule_status ON schedule_mng(status);
+```
+
+### 3.2 소스-스케줄 매핑 테이블 (N:M 관계)
+
+```sql
+-- 하나의 스케줄이 여러 소스에서 생성될 수 있음
+CREATE TABLE schedule_source_mapping (
+    mapping_id SERIAL PRIMARY KEY,
+    company_code VARCHAR(20) NOT NULL,
+    schedule_id INTEGER REFERENCES schedule_mng(schedule_id) ON DELETE CASCADE,
+    
+    -- 소스 정보
+    source_table VARCHAR(100) NOT NULL,
+    source_id VARCHAR(50) NOT NULL,
+    source_qty NUMERIC(15,3),                -- 해당 소스에서 기여한 수량
+    
+    created_at TIMESTAMP DEFAULT NOW(),
+    
+    CONSTRAINT fk_mapping_company FOREIGN KEY (company_code) 
+        REFERENCES company_mng(company_code)
+);
+
+CREATE INDEX idx_mapping_schedule ON schedule_source_mapping(schedule_id);
+CREATE INDEX idx_mapping_source ON schedule_source_mapping(source_table, source_id);
+```
+
+### 3.3 테이블 관계도
+
+```
+┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐
+│  sales_order_mng    │       │  schedule_mng       │       │  schedule_source_   │
+│  (소스 테이블)       │       │  (스케줄 테이블)     │       │  mapping            │
+├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤
+│ order_id (PK)       │───────│ source_id           │       │ mapping_id (PK)     │
+│ part_code           │       │ schedule_id (PK)    │──1:N──│ schedule_id (FK)    │
+│ order_qty           │       │ resource_id         │       │ source_table        │
+│ balance_qty         │       │ start_date          │       │ source_id           │
+│ due_date            │       │ end_date            │       │ source_qty          │
+└─────────────────────┘       │ plan_qty            │       └─────────────────────┘
+                              │ status              │
+                              │ auto_generated      │
+                              └─────────────────────┘
+```
+
+---
+
+## 4. 스케줄 생성 설정 구조
+
+### 4.1 TypeScript 인터페이스
+
+```typescript
+// 화면 레벨 설정 (screen_definitions 또는 screen_layouts_v2에 저장)
+interface ScheduleGenerationConfig {
+  // 스케줄 타입
+  scheduleType: "PRODUCTION" | "SHIPPING" | "MAINTENANCE" | "WORK_ASSIGN";
+  
+  // 소스 설정 (컴포넌트 ID 불필요 - 이벤트로 데이터 수신)
+  source: {
+    tableName: string;             // 소스 테이블명
+    groupByField: string;          // 그룹화 기준 필드 (part_code)
+    quantityField: string;         // 수량 필드 (order_qty, balance_qty)
+    dueDateField?: string;         // 납기일 필드 (선택)
+  };
+  
+  // 리소스 매핑 (타임라인 Y축)
+  resource: {
+    type: string;                  // 'ITEM', 'MACHINE', 'WORKER' 등
+    idField: string;               // part_code, machine_code 등
+    nameField: string;             // part_name, machine_name 등
+  };
+  
+  // 생성 규칙
+  rules: {
+    leadTimeDays?: number;         // 리드타임 (일)
+    dailyCapacity?: number;        // 일일 생산능력
+    workingDays?: number[];        // 작업일 [1,2,3,4,5] = 월~금
+    considerStock?: boolean;       // 재고 고려 여부
+    stockTableName?: string;       // 재고 테이블명
+    stockQtyField?: string;        // 재고 수량 필드
+    safetyStockField?: string;     // 안전재고 필드
+  };
+  
+  // 타겟 설정
+  target: {
+    tableName: string;             // 스케줄 테이블명 (schedule_mng 또는 전용 테이블)
+  };
+}
+```
+
+> **주의**: 기존 설계와 달리 `source.componentId`와 `target.timelineComponentId`가 제거되었습니다.
+> 이벤트 버스를 통해 데이터가 전달되므로 컴포넌트 ID를 직접 참조할 필요가 없습니다.
+
+### 4.2 화면별 설정 예시
+
+#### 생산계획관리 화면
+
+```json
+{
+  "scheduleType": "PRODUCTION",
+  "source": {
+    "tableName": "sales_order_mng",
+    "groupByField": "part_code",
+    "quantityField": "balance_qty",
+    "dueDateField": "due_date"
+  },
+  "resource": {
+    "type": "ITEM",
+    "idField": "part_code",
+    "nameField": "part_name"
+  },
+  "rules": {
+    "leadTimeDays": 3,
+    "dailyCapacity": 100,
+    "workingDays": [1, 2, 3, 4, 5],
+    "considerStock": true,
+    "stockTableName": "inventory_mng",
+    "stockQtyField": "current_qty",
+    "safetyStockField": "safety_stock"
+  },
+  "target": {
+    "tableName": "schedule_mng"
+  }
+}
+```
+
+#### 설비계획관리 화면
+
+```json
+{
+  "scheduleType": "MAINTENANCE",
+  "source": {
+    "tableName": "work_order_mng",
+    "groupByField": "machine_code",
+    "quantityField": "work_hours"
+  },
+  "resource": {
+    "type": "MACHINE",
+    "idField": "machine_code",
+    "nameField": "machine_name"
+  },
+  "rules": {
+    "workingDays": [1, 2, 3, 4, 5, 6]
+  },
+  "target": {
+    "tableName": "schedule_mng"
+  }
+}
+```
+
+---
+
+## 5. 백엔드 API 설계
+
+### 5.1 미리보기 API
+
+```typescript
+// POST /api/schedule/preview
+interface PreviewRequest {
+  config: ScheduleGenerationConfig;
+  sourceData: any[];           // 선택된 소스 데이터
+  period: {
+    start: string;             // ISO 날짜 문자열
+    end: string;
+  };
+}
+
+interface PreviewResponse {
+  success: boolean;
+  preview: {
+    toCreate: ScheduleItem[];    // 생성될 스케줄
+    toDelete: ScheduleItem[];    // 삭제될 기존 스케줄
+    toUpdate: ScheduleItem[];    // 수정될 스케줄
+    summary: {
+      createCount: number;
+      deleteCount: number;
+      updateCount: number;
+      totalQty: number;
+    };
+  };
+}
+```
+
+### 5.2 적용 API
+
+```typescript
+// POST /api/schedule/apply
+interface ApplyRequest {
+  config: ScheduleGenerationConfig;
+  preview: PreviewResponse["preview"];
+  options: {
+    deleteExisting: boolean;     // 기존 스케줄 삭제 여부
+    updateMode: "replace" | "merge";
+  };
+}
+
+interface ApplyResponse {
+  success: boolean;
+  applied: {
+    created: number;
+    deleted: number;
+    updated: number;
+  };
+}
+```
+
+### 5.3 스케줄 조회 API (타임라인용)
+
+```typescript
+// GET /api/schedule/list
+interface ListQuery {
+  scheduleType: string;
+  resourceType: string;
+  resourceId?: string;           // 필터링 (linkedFilter에서 사용)
+  startDate: string;
+  endDate: string;
+}
+
+interface ListResponse {
+  success: boolean;
+  data: ScheduleItem[];
+  total: number;
+}
+```
+
+---
+
+## 6. 이벤트 버스 기반 구현
+
+### 6.1 이벤트 타입 정의
+
+```typescript
+// frontend/lib/v2-core/events/types.ts에 추가
+
+export const V2_EVENTS = {
+  // ... 기존 이벤트들
+  
+  // 스케줄 생성 이벤트
+  SCHEDULE_GENERATE_REQUEST: "v2:schedule:generate:request",
+  SCHEDULE_GENERATE_PREVIEW: "v2:schedule:generate:preview",
+  SCHEDULE_GENERATE_APPLY: "v2:schedule:generate:apply",
+  SCHEDULE_GENERATE_COMPLETE: "v2:schedule:generate:complete",
+  SCHEDULE_GENERATE_ERROR: "v2:schedule:generate:error",
+} as const;
+
+/** 스케줄 생성 요청 이벤트 */
+export interface V2ScheduleGenerateRequestEvent {
+  requestId: string;
+  scheduleType: "PRODUCTION" | "MAINTENANCE" | "SHIPPING" | "WORK_ASSIGN";
+  sourceData?: any[];        // 선택 데이터 (없으면 TABLE_SELECTION_CHANGE로 받은 데이터 사용)
+  period?: { start: string; end: string };
+}
+
+/** 스케줄 미리보기 결과 이벤트 */
+export interface V2ScheduleGeneratePreviewEvent {
+  requestId: string;
+  preview: {
+    toCreate: any[];
+    toDelete: any[];
+    summary: { createCount: number; deleteCount: number; totalQty: number };
+  };
+}
+
+/** 스케줄 적용 이벤트 */
+export interface V2ScheduleGenerateApplyEvent {
+  requestId: string;
+  confirmed: boolean;
+}
+
+/** 스케줄 생성 완료 이벤트 */
+export interface V2ScheduleGenerateCompleteEvent {
+  requestId: string;
+  success: boolean;
+  applied: { created: number; deleted: number };
+  scheduleType: string;
+}
+```
+
+### 6.2 버튼 설정 (간소화)
+
+```json
+{
+  "componentType": "v2-button-primary",
+  "componentId": "btn_auto_schedule",
+  "componentConfig": {
+    "label": "자동 스케줄 생성",
+    "variant": "default",
+    "icon": "Calendar",
+    "action": {
+      "type": "event",
+      "eventName": "SCHEDULE_GENERATE_REQUEST",
+      "eventPayload": {
+        "scheduleType": "PRODUCTION"
+      }
+    }
+  }
+}
+```
+
+> **핵심**: 버튼은 이벤트만 발송하고, 데이터가 어디서 오는지 알 필요 없음
+
+### 6.3 스케줄 생성 서비스 (이벤트 리스너)
+
+```typescript
+// frontend/lib/v2-core/services/ScheduleGeneratorService.ts
+
+import { v2EventBus, V2_EVENTS } from "@/lib/v2-core";
+import apiClient from "@/lib/api/client";
+import { toast } from "sonner";
+
+export function useScheduleGenerator(scheduleConfig: ScheduleGenerationConfig) {
+  const [selectedData, setSelectedData] = useState<any[]>([]);
+  const [previewResult, setPreviewResult] = useState<any>(null);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [currentRequestId, setCurrentRequestId] = useState<string>("");
+  
+  // 1. 테이블 선택 데이터 추적 (TABLE_SELECTION_CHANGE 이벤트 수신)
+  useEffect(() => {
+    const unsubscribe = v2EventBus.on(
+      V2_EVENTS.TABLE_SELECTION_CHANGE,
+      (payload) => {
+        // 설정된 소스 테이블과 일치하는 경우에만 저장
+        if (payload.tableName === scheduleConfig.source.tableName) {
+          setSelectedData(payload.selectedRows);
+        }
+      }
+    );
+    return unsubscribe;
+  }, [scheduleConfig.source.tableName]);
+  
+  // 2. 스케줄 생성 요청 처리 (SCHEDULE_GENERATE_REQUEST 수신)
+  useEffect(() => {
+    const unsubscribe = v2EventBus.on(
+      V2_EVENTS.SCHEDULE_GENERATE_REQUEST,
+      async (payload) => {
+        // 스케줄 타입이 일치하는 경우에만 처리
+        if (payload.scheduleType !== scheduleConfig.scheduleType) {
+          return;
+        }
+        
+        const dataToUse = payload.sourceData || selectedData;
+        
+        if (dataToUse.length === 0) {
+          toast.warning("품목을 선택해주세요.");
+          return;
+        }
+        
+        setCurrentRequestId(payload.requestId);
+        
+        try {
+          // 미리보기 API 호출
+          const response = await apiClient.post("/api/schedule/preview", {
+            config: scheduleConfig,
+            sourceData: dataToUse,
+            period: payload.period || getDefaultPeriod(),
+          });
+          
+          if (!response.data.success) {
+            toast.error(response.data.message);
+            v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_ERROR, {
+              requestId: payload.requestId,
+              error: response.data.message,
+            });
+            return;
+          }
+          
+          setPreviewResult(response.data.preview);
+          setShowConfirmDialog(true);
+          
+          // 미리보기 결과 이벤트 발송 (다른 컴포넌트가 필요할 수 있음)
+          v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_PREVIEW, {
+            requestId: payload.requestId,
+            preview: response.data.preview,
+          });
+        } catch (error: any) {
+          toast.error("스케줄 생성 중 오류가 발생했습니다.");
+          v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_ERROR, {
+            requestId: payload.requestId,
+            error: error.message,
+          });
+        }
+      }
+    );
+    return unsubscribe;
+  }, [selectedData, scheduleConfig]);
+  
+  // 3. 스케줄 적용 처리 (SCHEDULE_GENERATE_APPLY 수신)
+  useEffect(() => {
+    const unsubscribe = v2EventBus.on(
+      V2_EVENTS.SCHEDULE_GENERATE_APPLY,
+      async (payload) => {
+        if (payload.requestId !== currentRequestId) return;
+        if (!payload.confirmed) {
+          setShowConfirmDialog(false);
+          return;
+        }
+        
+        try {
+          const response = await apiClient.post("/api/schedule/apply", {
+            config: scheduleConfig,
+            preview: previewResult,
+            options: { deleteExisting: true, updateMode: "replace" },
+          });
+          
+          if (!response.data.success) {
+            toast.error(response.data.message);
+            return;
+          }
+          
+          // 완료 이벤트 발송
+          v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_COMPLETE, {
+            requestId: payload.requestId,
+            success: true,
+            applied: response.data.applied,
+            scheduleType: scheduleConfig.scheduleType,
+          });
+          
+          // 테이블 새로고침 이벤트 발송
+          v2EventBus.emit(V2_EVENTS.TABLE_REFRESH, {
+            tableName: scheduleConfig.target.tableName,
+          });
+          
+          toast.success(`${response.data.applied.created}건의 스케줄이 생성되었습니다.`);
+          setShowConfirmDialog(false);
+        } catch (error: any) {
+          toast.error("스케줄 적용 중 오류가 발생했습니다.");
+        }
+      }
+    );
+    return unsubscribe;
+  }, [currentRequestId, previewResult, scheduleConfig]);
+  
+  // 확인 다이얼로그 핸들러
+  const handleConfirm = (confirmed: boolean) => {
+    v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_APPLY, {
+      requestId: currentRequestId,
+      confirmed,
+    });
+  };
+  
+  return {
+    showConfirmDialog,
+    previewResult,
+    handleConfirm,
+  };
+}
+
+function getDefaultPeriod() {
+  const now = new Date();
+  const start = new Date(now.getFullYear(), now.getMonth(), 1);
+  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+  return {
+    start: start.toISOString().split("T")[0],
+    end: end.toISOString().split("T")[0],
+  };
+}
+```
+
+### 6.4 타임라인 컴포넌트 (이벤트 수신)
+
+```typescript
+// v2-timeline-scheduler에서 이벤트 수신
+
+useEffect(() => {
+  // 스케줄 생성 완료 시 자동 새로고침
+  const unsubscribe1 = v2EventBus.on(
+    V2_EVENTS.SCHEDULE_GENERATE_COMPLETE,
+    (payload) => {
+      if (payload.success && payload.scheduleType === config.scheduleType) {
+        fetchSchedules();
+      }
+    }
+  );
+  
+  // TABLE_REFRESH 이벤트로도 새로고침
+  const unsubscribe2 = v2EventBus.on(
+    V2_EVENTS.TABLE_REFRESH,
+    (payload) => {
+      if (payload.tableName === config.selectedTable) {
+        fetchSchedules();
+      }
+    }
+  );
+  
+  return () => {
+    unsubscribe1();
+    unsubscribe2();
+  };
+}, [config.selectedTable, config.scheduleType]);
+```
+
+### 6.5 버튼 액션 핸들러 (이벤트 발송)
+
+```typescript
+// frontend/lib/utils/buttonActions.ts
+
+// 기존 handleButtonAction에 추가
+case "event":
+  const eventName = action.eventName as keyof typeof V2_EVENTS;
+  const eventPayload = {
+    requestId: crypto.randomUUID(),
+    ...action.eventPayload,
+  };
+  
+  v2EventBus.emit(V2_EVENTS[eventName], eventPayload);
+  return true;
+```
+
+---
+
+## 7. 컴포넌트 연동 설정
+
+### 7.1 분할 패널 연결 필터 (linkedFilters)
+
+좌측 테이블 선택 시 우측 타임라인 자동 필터링:
+
+```json
+{
+  "componentType": "v2-split-panel-layout",
+  "componentConfig": {
+    "linkedFilters": [
+      {
+        "sourceComponentId": "order_table",
+        "sourceField": "part_code",
+        "targetColumn": "resource_id"
+      }
+    ]
+  }
+}
+```
+
+### 7.2 타임라인 설정
+
+```json
+{
+  "componentType": "v2-timeline-scheduler",
+  "componentId": "production_timeline",
+  "componentConfig": {
+    "selectedTable": "production_plan_mng",
+    "fieldMapping": {
+      "id": "schedule_id",
+      "resourceId": "resource_id",
+      "title": "schedule_name",
+      "startDate": "start_date",
+      "endDate": "end_date",
+      "status": "status"
+    },
+    "useLinkedFilter": true
+  }
+}
+```
+
+### 7.3 이벤트 흐름도 (Event-Driven)
+
+```
+[좌측 테이블 선택]
+       │
+       ▼
+v2-table-grouped.onSelectionChange
+       │
+       ▼ emit(TABLE_SELECTION_CHANGE)
+       │
+       ├───────────────────────────────────────────────────┐
+       │                                                   │
+       ▼                                                   ▼
+ScheduleGeneratorService                       SplitPanelContext
+  (selectedData 저장)                            (linkedFilter 업데이트)
+                                                           │
+                                                           ▼
+                                               v2-timeline-scheduler
+                                                 (자동 필터링)
+
+
+[자동 스케줄 생성 버튼 클릭]
+       │
+       ▼ emit(SCHEDULE_GENERATE_REQUEST)
+       │
+       ▼
+ScheduleGeneratorService (이벤트 리스너)
+       │
+       ├─── selectedData (이미 저장됨)
+       │
+       ▼
+POST /api/schedule/preview
+       │
+       ▼ emit(SCHEDULE_GENERATE_PREVIEW)
+       │
+       ▼
+확인 다이얼로그 표시
+       │
+       ▼ (확인 클릭) emit(SCHEDULE_GENERATE_APPLY)
+       │
+       ▼
+POST /api/schedule/apply
+       │
+       ├─── emit(SCHEDULE_GENERATE_COMPLETE)
+       │
+       ├─── emit(TABLE_REFRESH)
+       │
+       ▼
+v2-timeline-scheduler (on TABLE_REFRESH)
+       │
+       ▼
+fetchSchedules() → 화면 갱신
+```
+
+### 7.4 이벤트 시퀀스 다이어그램
+
+```
+┌──────────┐    ┌──────────┐    ┌──────────────┐    ┌──────────┐    ┌──────────┐
+│  Table   │    │  Button  │    │ ScheduleSvc  │    │ Backend  │    │ Timeline │
+└────┬─────┘    └────┬─────┘    └──────┬───────┘    └────┬─────┘    └────┬─────┘
+     │               │                 │                 │               │
+     │ SELECT        │                 │                 │               │
+     ├──────────────────────────────▶ │                 │               │
+     │ TABLE_SELECTION_CHANGE         │                 │               │
+     │               │                 │                 │               │
+     │               │ CLICK           │                 │               │
+     │               ├────────────────▶│                 │               │
+     │               │ SCHEDULE_GENERATE_REQUEST         │               │
+     │               │                 │                 │               │
+     │               │                 ├────────────────▶│               │
+     │               │                 │ POST /preview   │               │
+     │               │                 │◀────────────────┤               │
+     │               │                 │                 │               │
+     │               │                 │ CONFIRM DIALOG  │               │
+     │               │                 │─────────────────│               │
+     │               │                 │                 │               │
+     │               │                 ├────────────────▶│               │
+     │               │                 │ POST /apply     │               │
+     │               │                 │◀────────────────┤               │
+     │               │                 │                 │               │
+     │               │                 ├─────────────────────────────────▶
+     │               │                 │ SCHEDULE_GENERATE_COMPLETE       │
+     │               │                 │                                  │
+     │               │                 ├─────────────────────────────────▶
+     │               │                 │ TABLE_REFRESH                    │
+     │               │                 │                                  │
+     │               │                 │                 │               ├──▶ refresh
+     │               │                 │                 │               │
+```
+
+---
+
+## 8. 범용성 활용 가이드
+
+### 8.1 다른 화면에서 재사용
+
+| 화면 | 소스 테이블 | 그룹 필드 | 스케줄 타입 | 리소스 타입 |
+|------|------------|----------|------------|------------|
+| 생산계획 | sales_order_mng | part_code | PRODUCTION | ITEM |
+| 설비계획 | work_order_mng | machine_code | MAINTENANCE | MACHINE |
+| 출하계획 | shipment_order_mng | customer_code | SHIPPING | CUSTOMER |
+| 작업자 배치 | task_mng | worker_id | WORK_ASSIGN | WORKER |
+
+### 8.2 새 화면 추가 시 체크리스트
+
+- [ ] 소스 테이블 정의 (어떤 데이터를 선택할 것인지)
+- [ ] 그룹화 기준 필드 정의 (품목, 설비, 고객 등)
+- [ ] 스케줄 테이블 생성 또는 기존 schedule_mng 사용
+- [ ] ScheduleGenerationConfig 작성
+- [ ] 버튼에 scheduleConfig 설정
+- [ ] 분할 패널 linkedFilters 설정
+- [ ] 타임라인 fieldMapping 설정
+
+---
+
+## 9. 구현 순서
+
+| 단계 | 작업 | 상태 |
+|------|------|------|
+| 1 | 테이블 마이그레이션 (schedule_mng, schedule_source_mapping) | 대기 |
+| 2 | 백엔드 API (scheduleController, scheduleService) | 대기 |
+| 3 | 버튼 액션 핸들러 (autoGenerateSchedule) | 대기 |
+| 4 | 확인 다이얼로그 (기존 AlertDialog 활용) | 대기 |
+| 5 | 타임라인 linkedFilter 연동 | 대기 |
+| 6 | 테스트 및 검증 | 대기 |
+
+---
+
+## 10. 참고 사항
+
+### 관련 컴포넌트
+
+- `v2-table-grouped`: 그룹화된 테이블 (소스 데이터, TABLE_SELECTION_CHANGE 발송)
+- `v2-timeline-scheduler`: 타임라인 스케줄러 (TABLE_REFRESH 수신)
+- `v2-button-primary`: 액션 버튼 (SCHEDULE_GENERATE_REQUEST 발송)
+- `v2-split-panel-layout`: 분할 패널
+
+### 관련 파일
+
+- `frontend/lib/v2-core/events/types.ts`: 이벤트 타입 정의
+- `frontend/lib/v2-core/events/EventBus.ts`: 이벤트 버스
+- `frontend/lib/v2-core/services/ScheduleGeneratorService.ts`: 스케줄 생성 서비스 (이벤트 리스너)
+- `frontend/lib/utils/buttonActions.ts`: 버튼 액션 핸들러 (이벤트 발송)
+- `backend-node/src/services/scheduleService.ts`: 스케줄 서비스
+- `backend-node/src/controllers/scheduleController.ts`: 스케줄 컨트롤러
+
+### 특이 사항
+
+- v2-table-grouped의 `selectedItems`는 그룹 선택 시 자식 행까지 포함됨
+- 스케줄 생성 시 기존 스케줄과 비교하여 변경사항만 적용 (미리보기 제공)
+- source_table, source_id로 소스 추적 가능
+- **컴포넌트 ID 직접 참조 없음** - 이벤트 버스로 느슨한 결합
+
+---
+
+## 11. 이벤트 버스 패턴의 장점
+
+### 11.1 기존 방식 vs 이벤트 버스 방식
+
+| 항목 | 기존 (직접 참조) | 이벤트 버스 |
+|------|------------------|-------------|
+| 결합도 | 강 (componentId 필요) | 약 (이벤트명만 필요) |
+| 버튼 설정 | `source.componentId: "order_table"` | `eventPayload.scheduleType: "PRODUCTION"` |
+| 컴포넌트 교체 | 설정 수정 필요 | 이벤트만 발송/수신하면 됨 |
+| 테스트 | 컴포넌트 모킹 필요 | 이벤트 발송으로 테스트 가능 |
+| 디버깅 | 쉬움 | 이벤트 로깅 필요 |
+
+### 11.2 확장성
+
+새로운 컴포넌트 추가 시:
+1. 기존 컴포넌트 수정 불필요
+2. 새 컴포넌트에서 이벤트 구독만 추가
+3. 이벤트 페이로드 구조만 유지하면 됨
+
+```typescript
+// 새로운 컴포넌트에서 스케줄 생성 완료 이벤트 구독
+useEffect(() => {
+  const unsubscribe = v2EventBus.on(
+    V2_EVENTS.SCHEDULE_GENERATE_COMPLETE,
+    (payload) => {
+      // 새로운 로직 추가
+      console.log("스케줄 생성 완료:", payload);
+    }
+  );
+  return unsubscribe;
+}, []);
+```
+
+### 11.3 디버깅 팁
+
+```typescript
+// 이벤트 디버깅용 전역 리스너 (개발 환경에서만)
+if (process.env.NODE_ENV === "development") {
+  v2EventBus.on("*", (event, payload) => {
+    console.log(`[EventBus] ${event}:`, payload);
+  });
+}
+```
diff --git a/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md b/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md
new file mode 100644
index 00000000..e32e68cc
--- /dev/null
+++ b/docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md
@@ -0,0 +1,580 @@
+# V2 공통 컴포넌트 사용 가이드
+
+> **목적**: 다양한 회사에서 V2 컴포넌트를 활용하여 화면을 개발할 때 참고하는 범용 가이드
+> **대상**: 화면 설계자, 개발자
+> **버전**: 1.0.0
+> **작성일**: 2026-01-30
+
+---
+
+## 1. V2 컴포넌트로 가능한 것 / 불가능한 것
+
+### 1.1 가능한 화면 유형
+
+| 화면 유형 | 설명 | 대표 예시 |
+|-----------|------|----------|
+| 마스터 관리 | 단일 테이블 CRUD | 회사정보, 부서정보, 코드관리 |
+| 마스터-디테일 | 좌측 선택 → 우측 상세 | 공정관리, 품목라우팅, 견적관리 |
+| 탭 기반 화면 | 탭별 다른 테이블/뷰 | 검사정보관리, 거래처관리 |
+| 카드 뷰 | 이미지+정보 카드 형태 | 설비정보, 대시보드 |
+| 피벗 분석 | 다차원 집계 | 매출분석, 재고현황 |
+| 반복 컨테이너 | 데이터 수만큼 UI 반복 | 주문 상세, 항목 리스트 |
+
+### 1.2 불가능한 화면 유형 (별도 개발 필요)
+
+| 화면 유형 | 이유 | 해결 방안 |
+|-----------|------|----------|
+| 간트 차트 / 타임라인 | 시간축 기반 UI 없음 | 별도 컴포넌트 개발 or 외부 라이브러리 |
+| 트리 뷰 (계층 구조) | 트리 컴포넌트 미존재 | `v2-tree-view` 개발 필요 |
+| 그룹화 테이블 | 그룹핑 기능 미지원 | `v2-grouped-table` 개발 필요 |
+| 드래그앤드롭 보드 | 칸반 스타일 UI 없음 | 별도 개발 |
+| 모바일 앱 스타일 | 네이티브 앱 UI | 별도 개발 |
+| 복잡한 차트 | 기본 집계 외 시각화 | 차트 라이브러리 연동 |
+
+---
+
+## 2. V2 컴포넌트 전체 목록 (23개)
+
+### 2.1 입력 컴포넌트 (3개)
+
+| ID | 이름 | 용도 | 주요 옵션 |
+|----|------|------|----------|
+| `v2-input` | 입력 | 텍스트, 숫자, 비밀번호, 이메일, 전화번호, URL, 여러 줄 | inputType, required, readonly, maxLength |
+| `v2-select` | 선택 | 드롭다운, 콤보박스, 라디오, 체크박스 | mode, source(distinct/static/code/entity), multiple |
+| `v2-date` | 날짜 | 날짜, 시간, 날짜시간, 날짜범위, 월, 연도 | dateType, format, showTime |
+
+### 2.2 표시 컴포넌트 (3개)
+
+| ID | 이름 | 용도 | 주요 옵션 |
+|----|------|------|----------|
+| `v2-text-display` | 텍스트 표시 | 라벨, 제목, 설명 텍스트 | fontSize, fontWeight, color, textAlign |
+| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 | cardsPerRow, showImage, columnMapping |
+| `v2-aggregation-widget` | 집계 위젯 | 합계, 평균, 개수, 최대, 최소 | items, filters, layout |
+
+### 2.3 테이블/데이터 컴포넌트 (3개)
+
+| ID | 이름 | 용도 | 주요 옵션 |
+|----|------|------|----------|
+| `v2-table-list` | 테이블 리스트 | 데이터 조회/편집 테이블 | selectedTable, columns, pagination, filter |
+| `v2-table-search-widget` | 검색 필터 | 테이블 검색/필터/그룹 | autoSelectFirstTable, showTableSelector |
+| `v2-pivot-grid` | 피벗 그리드 | 다차원 분석 (행/열/데이터 영역) | fields, totals, aggregation |
+
+### 2.4 레이아웃 컴포넌트 (8개)
+
+| ID | 이름 | 용도 | 주요 옵션 |
+|----|------|------|----------|
+| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, relation, **displayMode: custom** |
+| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 | tabs, activeTabId |
+| `v2-section-card` | 섹션 카드 | 제목+테두리 그룹화 | title, collapsible, padding |
+| `v2-section-paper` | 섹션 페이퍼 | 배경색 그룹화 | backgroundColor, padding, shadow |
+| `v2-divider-line` | 구분선 | 영역 구분 | orientation, thickness |
+| `v2-repeat-container` | 리피터 컨테이너 | 데이터 수만큼 반복 렌더링 | dataSourceType, layout, gridColumns |
+| `v2-repeater` | 리피터 | 반복 컨트롤 | - |
+| `v2-repeat-screen-modal` | 반복 화면 모달 | 모달 반복 | - |
+
+### 2.5 액션/특수 컴포넌트 (6개)
+
+| ID | 이름 | 용도 | 주요 옵션 |
+|----|------|------|----------|
+| `v2-button-primary` | 기본 버튼 | 저장, 삭제 등 액션 | text, actionType, variant |
+| `v2-numbering-rule` | 채번규칙 | 자동 코드/번호 생성 | rule, prefix, format |
+| `v2-category-manager` | 카테고리 관리자 | 카테고리 관리 UI | - |
+| `v2-location-swap-selector` | 위치 교환 | 위치 선택/교환 | - |
+| `v2-rack-structure` | 랙 구조 | 창고 랙 시각화 | - |
+| `v2-media` | 미디어 | 이미지/동영상 표시 | - |
+
+---
+
+## 3. 화면 패턴별 컴포넌트 조합
+
+### 3.1 패턴 A: 기본 마스터 화면 (가장 흔함)
+
+**적용 화면**: 코드관리, 사용자관리, 부서정보, 창고정보 등
+
+```
+┌─────────────────────────────────────────────────┐
+│ v2-table-search-widget                          │
+│ [검색필드1] [검색필드2] [조회] [엑셀]            │
+├─────────────────────────────────────────────────┤
+│ v2-table-list                                   │
+│ 제목        [신규] [삭제]                        │
+│ ─────────────────────────────────────────────── │
+│ □ | 코드 | 이름 | 상태 | 등록일 |               │
+└─────────────────────────────────────────────────┘
+```
+
+**필수 컴포넌트**:
+- `v2-table-search-widget` (1개)
+- `v2-table-list` (1개)
+
+**설정 포인트**:
+- 테이블명 지정
+- 검색 대상 컬럼 설정
+- 컬럼 표시/숨김 설정
+
+---
+
+### 3.2 패턴 B: 마스터-디테일 화면
+
+**적용 화면**: 공정관리, 견적관리, 수주관리, 품목라우팅 등
+
+```
+┌──────────────────┬──────────────────────────────┐
+│ v2-table-list    │ v2-table-list 또는 폼        │
+│ (마스터)         │ (디테일)                     │
+│ ───────────────  │                              │
+│ □ A001 항목1     │ [상세 정보]                  │
+│ □ A002 항목2 ←   │                              │
+│ □ A003 항목3     │                              │
+└──────────────────┴──────────────────────────────┘
+        v2-split-panel-layout
+```
+
+**필수 컴포넌트**:
+- `v2-split-panel-layout` (1개)
+- `v2-table-list` (2개: 마스터, 디테일)
+
+**설정 포인트**:
+- `splitRatio`: 좌우 비율 (기본 30:70)
+- `relation.type`: join / detail / custom
+- `relation.foreignKey`: 연결 키 컬럼
+
+---
+
+### 3.3 패턴 C: 마스터-디테일 + 탭
+
+**적용 화면**: 거래처관리, 품목정보, 설비정보 등
+
+```
+┌──────────────────┬──────────────────────────────┐
+│ v2-table-list    │ v2-tabs-widget               │
+│ (마스터)         │ ┌────┬────┬────┐            │
+│                  │ │기본│이력│첨부│            │
+│ □ A001 거래처1   │ └────┴────┴────┘            │
+│ □ A002 거래처2 ← │ [탭별 컨텐츠]               │
+└──────────────────┴──────────────────────────────┘
+```
+
+**필수 컴포넌트**:
+- `v2-split-panel-layout` (1개)
+- `v2-table-list` (1개: 마스터)
+- `v2-tabs-widget` (1개)
+
+**설정 포인트**:
+- 탭별 표시할 테이블/폼 설정
+- 마스터 선택 시 탭 컨텐츠 연동
+
+---
+
+### 3.4 패턴 D: 카드 뷰
+
+**적용 화면**: 설비정보, 대시보드, 상품 카탈로그 등
+
+```
+┌─────────────────────────────────────────────────┐
+│ v2-table-search-widget                          │
+├─────────────────────────────────────────────────┤
+│ v2-card-display                                 │
+│ ┌─────────┐ ┌─────────┐ ┌─────────┐           │
+│ │ [이미지]│ │ [이미지]│ │ [이미지]│           │
+│ │ 제목    │ │ 제목    │ │ 제목    │           │
+│ │ 설명    │ │ 설명    │ │ 설명    │           │
+│ └─────────┘ └─────────┘ └─────────┘           │
+└─────────────────────────────────────────────────┘
+```
+
+**필수 컴포넌트**:
+- `v2-table-search-widget` (1개)
+- `v2-card-display` (1개)
+
+**설정 포인트**:
+- `cardsPerRow`: 한 행당 카드 수
+- `columnMapping`: 제목, 부제목, 이미지, 상태 필드 매핑
+- `cardStyle`: 이미지 위치, 크기
+
+---
+
+### 3.5 패턴 E: 피벗 분석
+
+**적용 화면**: 매출분석, 재고현황, 생산실적 분석 등
+
+```
+┌─────────────────────────────────────────────────┐
+│ v2-pivot-grid                                   │
+│         │ 2024년 │ 2025년 │ 2026년 │ 합계     │
+│ ─────────────────────────────────────────────── │
+│ 지역A   │ 1,000  │ 1,200  │ 1,500  │ 3,700   │
+│ 지역B   │ 2,000  │ 2,500  │ 3,000  │ 7,500   │
+│ 합계    │ 3,000  │ 3,700  │ 4,500  │ 11,200  │
+└─────────────────────────────────────────────────┘
+```
+
+**필수 컴포넌트**:
+- `v2-pivot-grid` (1개)
+
+**설정 포인트**:
+- `fields[].area`: row / column / data / filter
+- `fields[].summaryType`: sum / avg / count / min / max
+- `fields[].groupInterval`: 날짜 그룹화 (year/quarter/month)
+
+---
+
+## 4. 회사별 개발 시 핵심 체크포인트
+
+### 4.1 테이블 설계 확인
+
+**가장 먼저 확인**:
+1. 회사에서 사용할 테이블 목록
+2. 테이블 간 관계 (FK)
+3. 조회 조건으로 쓸 컬럼
+
+```
+✅ 체크리스트:
+□ 테이블명이 DB에 존재하는가?
+□ company_code 컬럼이 있는가? (멀티테넌시)
+□ 마스터-디테일 관계의 FK가 정의되어 있는가?
+□ 검색 대상 컬럼에 인덱스가 있는가?
+```
+
+### 4.2 화면 패턴 판단
+
+**질문을 통한 판단**:
+
+| 질문 | 예 → 패턴 |
+|------|----------|
+| 단일 테이블만 조회/편집? | 패턴 A (기본 마스터) |
+| 마스터 선택 시 디테일 표시? | 패턴 B (마스터-디테일) |
+| 상세에 탭이 필요? | 패턴 C (마스터-디테일+탭) |
+| 이미지+정보 카드 형태? | 패턴 D (카드 뷰) |
+| 다차원 집계/분석? | 패턴 E (피벗) |
+
+### 4.3 컴포넌트 설정 필수 항목
+
+#### v2-table-list 필수 설정
+
+```typescript
+{
+  selectedTable: "테이블명",  // 필수
+  columns: [                  // 표시할 컬럼
+    { columnName: "id", displayName: "ID", visible: true, sortable: true },
+    // ...
+  ],
+  pagination: {
+    enabled: true,
+    pageSize: 20
+  }
+}
+```
+
+#### v2-split-panel-layout 필수 설정
+
+```typescript
+{
+  leftPanel: {
+    tableName: "마스터_테이블명"
+  },
+  rightPanel: {
+    tableName: "디테일_테이블명",
+    relation: {
+      type: "detail",          // join | detail | custom
+      foreignKey: "master_id"  // 연결 키
+    }
+  },
+  splitRatio: 30  // 좌측 비율
+}
+```
+
+#### v2-split-panel-layout 커스텀 모드 (NEW)
+
+패널 내부에 자유롭게 컴포넌트를 배치할 수 있습니다. (v2-tabs-widget과 동일 구조)
+
+```typescript
+{
+  leftPanel: {
+    displayMode: "custom",  // 커스텀 모드 활성화
+    components: [           // 내부 컴포넌트 배열
+      {
+        id: "btn-save",
+        componentType: "v2-button-primary",
+        label: "저장",
+        position: { x: 10, y: 10 },
+        size: { width: 100, height: 40 },
+        componentConfig: { buttonAction: "save" }
+      },
+      {
+        id: "tbl-list",
+        componentType: "v2-table-list",
+        label: "목록",
+        position: { x: 10, y: 60 },
+        size: { width: 400, height: 300 },
+        componentConfig: { selectedTable: "테이블명" }
+      }
+    ]
+  },
+  rightPanel: {
+    displayMode: "table"  // 기존 모드 유지
+  }
+}
+```
+
+**디자인 모드 기능**:
+- 컴포넌트 클릭 → 좌측 설정 패널에서 속성 편집
+- 드래그 핸들(상단)로 이동
+- 리사이즈 핸들(모서리)로 크기 조절
+- 실제 컴포넌트 미리보기 렌더링
+
+#### v2-card-display 필수 설정
+
+```typescript
+{
+  dataSource: "table",
+  columnMapping: {
+    title: "name",       // 제목 필드
+    subtitle: "code",    // 부제목 필드
+    image: "image_url",  // 이미지 필드 (선택)
+    status: "status"     // 상태 필드 (선택)
+  },
+  cardsPerRow: 3
+}
+```
+
+---
+
+## 5. 공통 컴포넌트 한계점
+
+### 5.1 현재 불가능한 기능
+
+| 기능 | 상태 | 대안 |
+|------|------|------|
+| 트리 뷰 (BOM, 조직도) | ❌ 미지원 | 테이블로 대체 or 별도 개발 |
+| 그룹화 테이블 | ❌ 미지원 | 일반 테이블로 대체 or 별도 개발 |
+| 간트 차트 | ❌ 미지원 | 별도 개발 필요 |
+| 드래그앤드롭 정렬 | ❌ 미지원 | 순서 컬럼으로 대체 |
+| 인라인 편집 | ⚠️ 제한적 | 모달 편집으로 대체 |
+| 복잡한 차트 | ❌ 미지원 | 외부 라이브러리 연동 |
+
+### 5.2 권장하지 않는 조합
+
+| 조합 | 이유 |
+|------|------|
+| 3단계 이상 중첩 분할 | 화면 복잡도 증가, 성능 저하 |
+| 탭 안에 탭 | 사용성 저하 |
+| 한 화면에 3개 이상 테이블 | 데이터 로딩 성능 |
+| 피벗 + 상세 테이블 동시 | 데이터 과부하 |
+
+---
+
+## 6. 제어관리 (비즈니스 로직) - 별도 설정 필수
+
+> **핵심**: V2 컴포넌트는 **UI만 담당**합니다. 비즈니스 로직은 **제어관리**에서 별도 설정해야 합니다.
+
+### 6.1 UI vs 제어 분리 구조
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                         화면 구성                               │
+├─────────────────────────────┬───────────────────────────────────┤
+│        UI 레이아웃           │         제어관리                  │
+│   (screen_layouts_v2)       │   (dataflow_diagrams)             │
+├─────────────────────────────┼───────────────────────────────────┤
+│ • 컴포넌트 배치              │ • 버튼 클릭 시 액션               │
+│ • 검색 필드 구성             │ • INSERT/UPDATE/DELETE 설정      │
+│ • 테이블 컬럼 표시           │ • 조건부 실행                     │
+│ • 카드/탭 레이아웃           │ • 다중 행 처리                    │
+│                             │ • 테이블 간 데이터 이동            │
+└─────────────────────────────┴───────────────────────────────────┘
+```
+
+### 6.2 HTML에서 파악 가능/불가능
+
+| 구분 | HTML에서 파악 | 이유 |
+|------|--------------|------|
+| 컴포넌트 배치 | ✅ 가능 | HTML 구조에서 보임 |
+| 검색 필드 | ✅ 가능 | input 태그로 확인 |
+| 테이블 컬럼 | ✅ 가능 | thead에서 확인 |
+| **저장 테이블** | ❌ 불가능 | JS/백엔드에서 처리 |
+| **버튼 액션** | ❌ 불가능 | 제어관리에서 설정 |
+| **전/후 처리** | ❌ 불가능 | 제어관리에서 설정 |
+| **다중 행 처리** | ❌ 불가능 | 제어관리에서 설정 |
+| **테이블 간 관계** | ❌ 불가능 | DB/제어관리에서 설정 |
+
+### 6.3 제어관리 설정 항목
+
+#### 트리거 타입
+- **버튼 클릭 전 (before)**: 클릭 직전 실행
+- **버튼 클릭 후 (after)**: 클릭 완료 후 실행
+
+#### 액션 타입
+- **INSERT**: 새로운 데이터 삽입
+- **UPDATE**: 기존 데이터 수정
+- **DELETE**: 데이터 삭제
+
+#### 조건 설정
+```typescript
+// 예: 선택된 행의 상태가 '대기'인 경우에만 실행
+{
+  field: "status",
+  operator: "=",
+  value: "대기",
+  dataType: "string"
+}
+```
+
+#### 필드 매핑
+```typescript
+// 예: 소스 테이블의 값을 타겟 테이블로 이동
+{
+  sourceTable: "order_master",
+  sourceField: "order_no",
+  targetTable: "order_history",
+  targetField: "order_no"
+}
+```
+
+### 6.4 제어관리 예시: 수주 확정 버튼
+
+**시나리오**: 수주 목록에서 3건 선택 후 [확정] 버튼 클릭
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [확정] 버튼 클릭                                                 │
+├─────────────────────────────────────────────────────────────────┤
+│ 1. 조건 체크: status = '대기' 인 행만                            │
+│ 2. UPDATE order_master SET status = '확정' WHERE id IN (선택)   │
+│ 3. INSERT order_history (수주이력 테이블에 기록)                 │
+│ 4. 외부 시스템 호출 (ERP 연동)                                   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**제어관리 설정**:
+```json
+{
+  "triggerType": "after",
+  "actions": [
+    {
+      "actionType": "update",
+      "targetTable": "order_master",
+      "conditions": [{ "field": "status", "operator": "=", "value": "대기" }],
+      "fieldMappings": [{ "targetField": "status", "defaultValue": "확정" }]
+    },
+    {
+      "actionType": "insert",
+      "targetTable": "order_history",
+      "fieldMappings": [
+        { "sourceField": "order_no", "targetField": "order_no" },
+        { "sourceField": "customer_name", "targetField": "customer_name" }
+      ]
+    }
+  ]
+}
+```
+
+### 6.5 회사별 개발 시 제어관리 체크리스트
+
+```
+□ 버튼별 액션 정의
+  - 어떤 버튼이 있는가?
+  - 각 버튼 클릭 시 무슨 동작?
+
+□ 저장/수정/삭제 대상 테이블
+  - 메인 테이블은?
+  - 이력 테이블은?
+  - 연관 테이블은?
+
+□ 조건부 실행
+  - 특정 상태일 때만 실행?
+  - 특정 값 체크 필요?
+
+□ 다중 행 처리
+  - 여러 행 선택 후 일괄 처리?
+  - 각 행별 개별 처리?
+
+□ 외부 연동
+  - ERP/MES 등 외부 시스템 호출?
+  - API 연동 필요?
+```
+
+---
+
+## 7. 회사별 커스터마이징 영역
+
+### 7.1 컴포넌트로 처리되는 영역 (표준화)
+
+| 영역 | 설명 |
+|------|------|
+| UI 레이아웃 | 컴포넌트 배치, 크기, 위치 |
+| 검색 조건 | 화면 디자이너에서 설정 |
+| 테이블 컬럼 | 표시/숨김, 순서, 너비 |
+| 기본 CRUD | 조회, 저장, 삭제 자동 처리 |
+| 페이지네이션 | 자동 처리 |
+| 정렬/필터 | 자동 처리 |
+
+### 7.2 회사별 개발 필요 영역
+
+| 영역 | 설명 | 개발 방법 |
+|------|------|----------|
+| 비즈니스 로직 | 저장 전/후 검증, 계산 | 데이터플로우 또는 백엔드 API |
+| 특수 UI | 간트, 트리, 차트 등 | 별도 컴포넌트 개발 |
+| 외부 연동 | ERP, MES 등 연계 | 외부 호출 설정 |
+| 리포트/인쇄 | 전표, 라벨 출력 | 리포트 컴포넌트 |
+| 결재 프로세스 | 승인/반려 흐름 | 워크플로우 설정 |
+
+---
+
+## 8. 빠른 개발 가이드
+
+### Step 1: 화면 분석
+1. 어떤 테이블을 사용하는가?
+2. 테이블 간 관계는?
+3. 어떤 패턴인가? (A/B/C/D/E)
+
+### Step 2: 컴포넌트 배치
+1. 화면 디자이너에서 패턴에 맞는 컴포넌트 배치
+2. 각 컴포넌트에 테이블/컬럼 설정
+
+### Step 3: 연동 설정
+1. 마스터-디테일 관계 설정 (FK)
+2. 검색 조건 설정
+3. 버튼 액션 설정
+
+### Step 4: 테스트
+1. 데이터 조회 확인
+2. 마스터 선택 시 디테일 연동 확인
+3. 저장/삭제 동작 확인
+
+---
+
+## 9. 요약
+
+### V2 컴포넌트 커버리지
+
+| 화면 유형 | 지원 여부 | 주요 컴포넌트 |
+|-----------|----------|--------------|
+| 기본 CRUD | ✅ 완전 | v2-table-list, v2-table-search-widget |
+| 마스터-디테일 | ✅ 완전 | v2-split-panel-layout |
+| 탭 화면 | ✅ 완전 | v2-tabs-widget |
+| 카드 뷰 | ✅ 완전 | v2-card-display |
+| 피벗 분석 | ✅ 완전 | v2-pivot-grid |
+| 그룹화 테이블 | ❌ 미지원 | 개발 필요 |
+| 트리 뷰 | ❌ 미지원 | 개발 필요 |
+| 간트 차트 | ❌ 미지원 | 개발 필요 |
+
+### 개발 시 핵심 원칙
+
+1. **테이블 먼저**: DB 테이블 구조 확인이 최우선
+2. **패턴 판단**: 5가지 패턴 중 어디에 해당하는지 판단
+3. **표준 조합**: 검증된 컴포넌트 조합 사용
+4. **한계 인식**: 불가능한 UI는 조기에 식별하여 별도 개발 계획
+5. **멀티테넌시**: 모든 테이블에 company_code 필터링 필수
+6. **제어관리 필수**: UI 완성 후 버튼별 비즈니스 로직 설정 필수
+
+### UI vs 제어 구분
+
+| 영역 | 담당 | 설정 위치 |
+|------|------|----------|
+| 화면 레이아웃 | V2 컴포넌트 | 화면 디자이너 |
+| 비즈니스 로직 | 제어관리 | dataflow_diagrams |
+| 외부 연동 | 외부호출 설정 | external_call_configs |
+
+**HTML에서 배낄 수 있는 것**: UI 구조만
+**별도 설정 필요한 것**: 저장 테이블, 버튼 액션, 조건 처리, 다중 행 처리
diff --git a/docs/screen-implementation-guide/01_master-data/bom.md b/docs/screen-implementation-guide/01_master-data/bom.md
new file mode 100644
index 00000000..6e626289
--- /dev/null
+++ b/docs/screen-implementation-guide/01_master-data/bom.md
@@ -0,0 +1,255 @@
+# BOM관리 화면 구현 가이드
+
+> **화면명**: BOM관리
+> **파일**: BOM관리.html
+> **분류**: 기준정보
+> **구현 가능**: ⚠️ 부분 (트리 뷰 컴포넌트 필요)
+
+---
+
+## 1. 화면 개요
+
+BOM(Bill of Materials) 관리 화면으로, 제품의 부품 구성을 트리 구조로 관리합니다.
+
+### 핵심 기능
+- BOM 목록 조회/검색
+- BOM 구조 트리 표시 (정전개/역전개)
+- BOM 등록/수정/삭제
+- 버전/차수 관리
+- 엑셀 업로드/다운로드
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [품목코드] [품목명] [품목구분▼] [버전▼] [사용여부▼] [초기화][조회]│
+│                                          [사용자옵션][업로드][다운로드]│
+├───────────────────────┬─────────────────────────────────────────┤
+│ 📦 BOM 목록            │ 📋 BOM 상세정보                          │
+│ ───────────────       │ [이력] [버전] [수정] [삭제]              │
+│ [신규등록]             │ ─────────────────────────               │
+│ ┌──────────────────┐  │ 품목코드: PRD-001                       │
+│ │□|코드|품목명|구분..│  │ 품목명: 제품A                           │
+│ │□|P01|제품A |제품  │  │ 기준수량: 1                             │
+│ │□|P02|제품B |제품  │  ├─────────────────────────────────────────┤
+│ └──────────────────┘  │ 🌳 BOM 구조                              │
+│                       │ 기준수량:[1] [트리|레벨] [정전개|역전개]  │
+│     리사이저 ↔        │ ─────────────────────────               │
+│                       │ ▼ PRD-001 제품A (1.00 EA)               │
+│                       │   ├─ MAT-001 원자재A (2.00 KG)          │
+│                       │   └─ SEM-001 반제품A (1.00 EA)          │
+│                       │       └─ MAT-002 원자재B (0.50 KG)      │
+└───────────────────────┴─────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+### 3.1 구현 가능 영역
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| BOM 목록 테이블 | `v2-table-list` | ✅ 가능 |
+| 분할 패널 | `v2-split-panel-layout` | ⚠️ 부분 |
+
+### 3.2 신규 컴포넌트 필요
+
+| HTML 영역 | 필요 컴포넌트 | 재활용 가능성 |
+|-----------|---------------|--------------|
+| BOM 트리 구조 | `v2-tree-view` | 3개 화면 (부서정보, 메뉴관리) |
+| BOM 등록 모달 | `v2-modal-form` | 모든 화면 |
+
+---
+
+## 4. 테이블 정의
+
+### 4.1 BOM 목록 테이블 (좌측)
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'item_code', label: '품목코드', width: 100 },
+  { id: 'item_name', label: '품목명', width: 150 },
+  { id: 'item_type', label: '품목구분', width: 80 },
+  { id: 'version', label: '버전', width: 70 },
+  { id: 'revision', label: '차수', width: 70 },
+  { id: 'status', label: '사용여부', width: 80 },
+  { id: 'reg_date', label: '등록일', width: 100 }
+]
+```
+
+### 4.2 BOM 상세 필드
+
+```typescript
+detailFields: [
+  { id: 'item_code', label: '품목코드' },
+  { id: 'item_name', label: '품목명' },
+  { id: 'item_type', label: '품목구분' },
+  { id: 'unit', label: '단위' },
+  { id: 'base_qty', label: '기준수량' },
+  { id: 'version', label: '버전' },
+  { id: 'revision', label: '차수' },
+  { id: 'status', label: '사용여부' },
+  { id: 'remark', label: '비고' }
+]
+```
+
+---
+
+## 5. 검색 조건
+
+| 필드명 | 컴포넌트 | 옵션 |
+|--------|----------|------|
+| 품목코드 | `v2-input` | placeholder: "품목코드" |
+| 품목명 | `v2-input` | placeholder: "품목명" |
+| 품목구분 | `v2-select` | 제품, 반제품, 원자재 |
+| 버전 | `v2-select` | 1.0, 2.0, 3.0 |
+| 사용여부 | `v2-select` | 사용, 미사용 |
+
+---
+
+## 6. 특수 기능: BOM 트리 (신규 컴포넌트 필요)
+
+### 6.1 트리 노드 구조
+
+```typescript
+interface BomTreeNode {
+  id: string;
+  itemCode: string;
+  itemName: string;
+  itemType: string;
+  quantity: number;
+  unit: string;
+  level: number;
+  children: BomTreeNode[];
+  expanded: boolean;
+}
+```
+
+### 6.2 정전개 vs 역전개
+
+| 모드 | 설명 |
+|------|------|
+| 정전개 (Forward) | 선택 품목 → 하위 구성품목 표시 |
+| 역전개 (Reverse) | 선택 품목 → 상위 사용처 표시 |
+
+### 6.3 필요 인터랙션
+
+- 노드 클릭: 펼치기/접기
+- 전체 펼치기/접기 버튼
+- 레벨 뷰/트리 뷰 전환
+- 기준수량 변경 시 수량 재계산
+
+---
+
+## 7. 모달 폼 정의
+
+### 7.1 BOM 등록 모달
+
+```typescript
+modalFields: [
+  { id: 'item_code', label: '품목코드', type: 'autocomplete', required: true },
+  { id: 'item_name', label: '품목명', type: 'autocomplete', required: true },
+  { id: 'item_type', label: '품목구분', type: 'select', required: true },
+  { id: 'unit', label: '단위', type: 'select', required: true },
+  { id: 'base_qty', label: '기준수량', type: 'number', required: true },
+  { id: 'version', label: '버전', type: 'text', readonly: true },
+  { id: 'revision', label: '차수', type: 'text', readonly: true },
+  { id: 'status', label: '사용여부', type: 'radio', options: ['사용', '미사용'] },
+  { id: 'remark', label: '비고', type: 'textarea' }
+]
+
+// 하위 품목 섹션
+childItemsSection: {
+  title: '하위 품목 구성',
+  addButton: '품목추가',
+  columns: [
+    { id: 'item_code', label: '품목코드' },
+    { id: 'item_name', label: '품목명' },
+    { id: 'quantity', label: '소요량' },
+    { id: 'unit', label: '단위' },
+    { id: 'loss_rate', label: '로스율(%)' },
+    { id: 'actions', label: '' }
+  ]
+}
+```
+
+---
+
+## 8. 현재 구현 가능 범위
+
+### ✅ 가능
+- 검색 영역 (v2-table-search-widget)
+- BOM 목록 테이블 (v2-table-list)
+- 분할 패널 레이아웃 (v2-split-panel-layout)
+- 기본 상세 정보 표시
+
+### ⚠️ 부분 가능 (대체 구현)
+- BOM 구조: 트리 대신 레벨 테이블로 표시 가능
+
+### ❌ 불가능 (신규 개발 필요)
+- 진정한 트리 뷰 (접기/펼치기)
+- 정전개/역전개 전환
+- 하위 품목 동적 추가 모달
+
+---
+
+## 9. 간소화 구현 JSON
+
+```json
+{
+  "screen_code": "BOM_MAIN",
+  "screen_name": "BOM관리",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "config": {
+        "searchFields": [
+          { "type": "input", "id": "item_code", "placeholder": "품목코드" },
+          { "type": "input", "id": "item_name", "placeholder": "품목명" },
+          { "type": "select", "id": "item_type", "placeholder": "품목구분" },
+          { "type": "select", "id": "status", "placeholder": "사용여부" }
+        ],
+        "buttons": [
+          { "label": "초기화", "action": "reset" },
+          { "label": "조회", "action": "search", "variant": "primary" }
+        ]
+      }
+    },
+    {
+      "type": "v2-split-panel-layout",
+      "config": {
+        "masterPanel": {
+          "title": "BOM 목록",
+          "entityId": "bom_header",
+          "columns": [
+            { "id": "item_code", "label": "품목코드", "width": 100 },
+            { "id": "item_name", "label": "품목명", "width": 150 },
+            { "id": "item_type", "label": "품목구분", "width": 80 },
+            { "id": "version", "label": "버전", "width": 70 }
+          ]
+        },
+        "detailPanel": {
+          "title": "BOM 상세정보",
+          "entityId": "bom_detail",
+          "relationType": "one-to-many"
+        }
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 10. 개발 권장사항
+
+1. **1단계**: 현재 컴포넌트로 기본 CRUD 구현
+2. **2단계**: `v2-tree-view` 개발 후 BOM 구조 통합
+3. **3단계**: 버전/차수 관리 기능 추가
+
+**예상 재활용**: `v2-tree-view`는 부서정보, 메뉴관리에서도 사용 가능 (3개 화면)
diff --git a/docs/screen-implementation-guide/01_master-data/item-info.md b/docs/screen-implementation-guide/01_master-data/item-info.md
new file mode 100644
index 00000000..b0ddd9e0
--- /dev/null
+++ b/docs/screen-implementation-guide/01_master-data/item-info.md
@@ -0,0 +1,1298 @@
+# 품목정보 (Item Info)
+
+> Screen ID: /screens/140
+> 메뉴 경로: 기준정보 > 품목정보
+> 테이블: `item_info`
+
+---
+
+## ⚠️ 문서 사용 안내
+
+> **이 문서는 "품목정보" 화면의 구현 예시입니다.**
+> 
+> ### 📌 중요: JSON 데이터는 참고용입니다!
+> 
+> 이 문서에 포함된 JSON 설정(레이아웃, 컴포넌트 구성 등)은 **품목정보 화면에 특화된 예시**입니다.
+> 
+> **다른 화면을 구현할 때:**
+> 1. 이 JSON을 그대로 복사해서 사용하지 마세요
+> 2. 해당 화면의 **테이블 구조를 먼저 분석**하세요
+> 3. 화면의 **요구사항과 기능을 파악**하세요
+> 4. 분석 결과에 맞는 **새로운 JSON 구조를 작성**하세요
+> 
+> ### 참고해야 할 항목
+> - ✅ 문서 구조 및 작성 형식
+> - ✅ V2 컴포넌트 종류 및 사용법
+> - ✅ API 호출 방식 및 DB INSERT 절차
+> - ✅ 컴포넌트 설정 패턴 (position, size, overrides 구조)
+> 
+> ### 복사하면 안 되는 항목
+> - ❌ 테이블명 (`item_info` → 해당 화면의 테이블로 변경)
+> - ❌ 컬럼 설정 (해당 테이블의 컬럼에 맞게 작성)
+> - ❌ 필드명 (`fieldName`, `columnName` 등)
+> - ❌ 화면명, screen_code, company_code
+> - ❌ screen_id, targetScreenId (동적 생성되는 값)
+> 
+> ### 🚨 컴포넌트 부족 시 필수 명시 사항
+> 
+> 화면 분석 결과, **현재 V2 컴포넌트로 구현이 불가능한 기능**이 있을 경우:
+> 
+> 1. 문서에 **"구현 불가 항목"** 섹션을 반드시 추가
+> 2. 다음 형식으로 명시:
+> 
+> ```markdown
+> ## 🚫 구현 불가 항목 (컴포넌트 개발 필요)
+> 
+> | 기능 | 필요한 컴포넌트 | 현재 상태 | 비고 |
+> |------|-----------------|-----------|------|
+> | 트리 구조 표시 | v2-tree-view | 미구현 | 계층형 데이터 표시 필요 |
+> | 드래그 앤 드롭 | v2-drag-drop | 미구현 | 순서 변경 기능 |
+> ```
+> 
+> 3. 컴포넌트 개발 **우선순위/중요도** 명시
+
+## 1. 테이블 선택 및 화면 구조
+
+### 1.1 사용 테이블
+
+| 테이블명 | 용도 | 비고 |
+|----------|------|------|
+| `item_info` | 품목 기본정보 | 주 테이블 |
+
+### 1.2 테이블 컬럼 정의 (실제 DB 기준)
+
+| 컬럼명 | 표시명 | 타입 | 필수 | 설명 |
+|--------|--------|------|------|------|
+| `id` | ID | varchar(500) | PK | UUID 자동 생성 |
+| `item_number` | 품번코드 | varchar(500) | | 품목 고유 코드 |
+| `item_name` | 품명 | varchar(500) | | 품목명 |
+| `status` | 상태 | varchar(500) | | 정상, 품절, 대기, 단종 |
+| `size` | 규격 | varchar(500) | | 규격 정보 |
+| `material` | 재질 | varchar(500) | | 재질 정보 |
+| `inventory_unit` | 재고단위 | varchar(500) | | EA, kg, L, Sheet, Box |
+| `weight` | 중량 | varchar(500) | | 중량 값 |
+| `unit` | 단위 | varchar(500) | | g, kg, kg/L, t |
+| `image` | 이미지 | varchar(500) | | 품목 이미지 경로 |
+| `division` | 구분 | varchar(500) | | 원자재, 중간재, 완제품, 포장재 (카테고리 코드) |
+| `type` | 유형 | varchar(500) | | 용도별 유형 |
+| `meno` | 메모 | varchar(500) | | 비고 (오타: memo) |
+| `selling_price` | 판매가 | varchar(500) | | 기본값 '0' |
+| `standard_price` | 기준가 | varchar(500) | | 기본값 '0' |
+| `currency_code` | 통화코드 | varchar(500) | | 기본값 'KRW' |
+| `writer` | 등록자 | varchar(500) | | 작성자 ID |
+| `company_code` | 회사코드 | varchar(500) | | 멀티테넌시 |
+| `created_date` | 등록일 | timestamp | | 자동 생성 |
+| `updated_date` | 수정일 | timestamp | | 자동 갱신 |
+
+### 1.3 화면 구조 개요
+
+- **화면 유형**: 목록형 (단일 테이블 CRUD)
+- **주요 기능**: 
+  - 품목 조회/검색/필터링
+  - 품목 등록/수정/삭제
+  - 그룹핑 (Group By)
+  - 코드 변경/합병
+  - 엑셀 업로드
+  - 컬럼 표시/숨기기 설정
+
+---
+
+## 2. 컴포넌트 배치도
+
+### 2.1 전체 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ [검색 영역]                                                                 │
+│ ┌─────────────────────────────────────────────────────────────────────────┐ │
+│ │ v2-table-search-widget                                                  │ │
+│ │ ┌───────────┐ ┌───────────────┐ ┌───────────────┐ ┌─────────┐          │ │
+│ │ │ 상태      │ │ 품번코드      │ │ 품명          │ │ [검색]  │          │ │
+│ │ │ (select)  │ │ (text)        │ │ (text)        │ │         │          │ │
+│ │ └───────────┘ └───────────────┘ └───────────────┘ └─────────┘          │ │
+│ └─────────────────────────────────────────────────────────────────────────┘ │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ [테이블 헤더 + 액션 버튼]                                                   │
+│ ┌─────────────────────────────────────────────────────────────────────────┐ │
+│ │ [코드변경][업로드][다운로드]                   [등록][복사][수정][삭제]  │ │
+│ └─────────────────────────────────────────────────────────────────────────┘ │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ [데이터 테이블]                                                             │
+│ ┌─────────────────────────────────────────────────────────────────────────┐ │
+│ │ v2-table-list                                                           │ │
+│ │ ┌──┬────┬────────┬────────┬──────┬──────┬────────┬─────┬─────┬────────┐ │ │
+│ │ │☐ │상태│품번코드│품명    │규격  │재질  │재고단위│중량 │단위 │구분    │ │ │
+│ │ ├──┼────┼────────┼────────┼──────┼──────┼────────┼─────┼─────┼────────┤ │ │
+│ │ │☐ │정상│R_001   │테스트A │100mm │SUS304│EA      │1.5  │kg   │원자재  │ │ │
+│ │ │☐ │대기│R_002   │테스트B │200mm │AL    │kg      │2.0  │kg   │완제품  │ │ │
+│ │ └──┴────┴────────┴────────┴──────┴──────┴────────┴─────┴─────┴────────┘ │ │
+│ └─────────────────────────────────────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 사용 가능한 V2 컴포넌트 목록
+
+> 📌 **V2 컴포넌트 전체 목록** - 화면 구성 시 사용 가능한 컴포넌트
+
+| 컴포넌트 ID | 설명 | 카테고리 |
+|-------------|------|----------|
+| `v2-input` | 텍스트, 숫자, 비밀번호, 이메일 등 입력 | 입력 |
+| `v2-select` | 드롭다운, 콤보박스, 라디오, 체크박스 | 입력 |
+| `v2-date` | 날짜/시간 입력 | 입력 |
+| `v2-button-primary` | 버튼 | 액션 |
+| `v2-table-list` | 테이블 리스트 (CRUD) | 테이블 |
+| `v2-table-search-widget` | 테이블 검색/필터 위젯 | 유틸리티 |
+| `v2-pivot-grid` | 피벗 그리드 (다차원 분석) | 테이블 |
+| `v2-aggregation-widget` | 집계 위젯 | 위젯 |
+| `v2-text-display` | 텍스트 표시 (읽기 전용) | 표시 |
+| `v2-card-display` | 카드 표시 | 표시 |
+| `v2-divider-line` | 구분선 | 레이아웃 |
+| `v2-section-card` | 섹션 카드 (그룹핑) | 레이아웃 |
+| `v2-section-paper` | 섹션 페이퍼 (그룹핑) | 레이아웃 |
+| `v2-split-panel-layout` | 분할 패널 레이아웃 | 레이아웃 |
+| `v2-repeat-container` | 반복 컨테이너 | 레이아웃 |
+| `v2-repeater` | 리피터 (동적 행) | 레이아웃 |
+| `v2-category-manager` | 카테고리 관리 | 특수 |
+| `v2-numbering-rule` | 채번규칙 | 특수 |
+| `v2-media` | 미디어 (이미지/영상) | 미디어 |
+| `v2-rack-structure` | 랙 구조 (창고) | 특수 |
+| `v2-location-swap-selector` | 위치 스왑 선택기 | 특수 |
+
+### 2.3 이 화면에서 사용하는 컴포넌트
+
+| 컴포넌트 타입 | 역할 |
+|---------------|------|
+| `v2-table-search-widget` | 검색 필터 |
+| `v2-table-list` | 품목 데이터 테이블 |
+| `v2-button-primary` | 코드변경 |
+| `v2-button-primary` | 업로드 (엑셀) |
+| `v2-button-primary` | 다운로드 (엑셀) |
+| `v2-button-primary` | 등록 (모달 열기) |
+| `v2-button-primary` | 복사 (모달 열기) |
+| `v2-button-primary` | 수정 (모달 열기) |
+| `v2-button-primary` | 삭제 |
+| `v2-input` | 모달 - 텍스트 입력 필드 |
+| `v2-select` | 모달 - 선택 필드 |
+
+---
+
+## 3. 화면 디자이너 설정 가이드
+
+### 3.1 v2-table-search-widget (검색 필터) 설정
+
+1. 좌측 컴포넌트 패널에서 `v2-table-search-widget` 드래그하여 화면 상단에 배치
+2. 대상 테이블로 아래에 배치할 테이블 리스트 선택
+
+> 💡 **참고**: 검색 필터는 사용자가 런타임에서 원하는 필드를 직접 추가/삭제하여 사용할 수 있습니다. 별도의 필드 설정이 필요 없습니다.
+
+---
+
+### 3.2 v2-table-list (품목 테이블) 설정
+
+#### Step 1: 컴포넌트 추가
+1. 좌측 컴포넌트 패널에서 `v2-table-list` 드래그하여 검색 필터 아래에 배치
+
+#### Step 2: 데이터 소스 설정
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 테이블 선택 | `item_info` |
+| 자동 컬럼 생성 | ✅ 체크 (테이블 컬럼 자동 로드) |
+
+#### Step 3: 컬럼 설정
+
+**[컬럼 설정]** 패널에서 표시할 컬럼 선택 및 순서 조정:
+
+| 순서 | 컬럼 | 표시명 | 너비 | 정렬 | 표시 | 특수 설정 |
+|------|------|--------|------|------|------|-----------|
+| 1 | `status` | 상태 | 80 | 중앙 | ✅ | 뱃지 스타일 (색상별) |
+| 2 | `item_number` | 품번코드 | 140 | 좌측 | ✅ | |
+| 3 | `item_name` | 품명 | 200 | 좌측 | ✅ | 굵게 표시 |
+| 4 | `size` | 규격 | 150 | 좌측 | ✅ | |
+| 5 | `material` | 재질 | 150 | 좌측 | ✅ | |
+| 6 | `inventory_unit` | 재고단위 | 100 | 중앙 | ✅ | |
+| 7 | `weight` | 중량 | 80 | 우측 | ✅ | |
+| 8 | `unit` | 단위 | 80 | 중앙 | ✅ | |
+| 9 | `image` | 이미지 | 80 | 중앙 | ✅ | 이미지 미리보기 |
+| 10 | `division` | 구분 | 100 | 중앙 | ✅ | 카테고리 표시 |
+| 11 | `type` | 유형 | 100 | 중앙 | ✅ | |
+| 12 | `selling_price` | 판매가 | 100 | 우측 | ☐ | 숫자 포맷 |
+| 13 | `standard_price` | 기준가 | 100 | 우측 | ☐ | 숫자 포맷 |
+| 14 | `meno` | 메모 | 180 | 좌측 | ☐ | |
+| 15 | `writer` | 등록자 | 100 | 좌측 | ☐ | 읽기 전용 |
+| 16 | `created_date` | 등록일 | 120 | 중앙 | ☐ | 읽기 전용 |
+| 17 | `updated_date` | 수정일 | 120 | 중앙 | ☐ | 읽기 전용 |
+
+#### Step 4: 기능 설정
+
+| 설정 항목 | 설정 값 | 설명 |
+|-----------|---------|------|
+| 체크박스 | ✅ 사용 | 다중 선택 활성화 |
+| 페이지네이션 | ✅ 사용 | |
+| 페이지 크기 | 20 | 기본 표시 행 수 |
+| 정렬 | ✅ 사용 | 컬럼 헤더 클릭 정렬 |
+| 컬럼 리사이즈 | ✅ 사용 | 컬럼 너비 조정 |
+| 그룹핑 | ✅ 사용 | Group By 기능 |
+
+#### Step 5: 그룹핑 옵션 설정
+
+Group By 드롭다운에 표시할 컬럼 선택:
+- ✅ `status` (상태)
+- ✅ `division` (구분)
+- ✅ `type` (유형)
+- ✅ `inventory_unit` (재고단위)
+- ✅ `writer` (등록자)
+
+---
+
+### 3.3 버튼 설정
+
+#### 좌측 버튼 그룹
+
+##### 코드변경 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `코드변경` |
+| 액션 타입 | `code_merge` |
+| 스타일 | `secondary` |
+| 선택 필수 | ✅ 체크 (복수 선택) |
+| 병합 대상 컬럼 | `item_number` |
+| 데이터플로우 연결 | 품번코드 통합 (flow_id: 18) |
+
+##### 업로드 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `업로드` |
+| 액션 타입 | `excel_upload` |
+| 스타일 | `secondary` |
+| 대상 테이블 | `item_info` |
+
+##### 다운로드 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `다운로드` |
+| 액션 타입 | `excel_download` |
+| 스타일 | `secondary` |
+| 대상 | 현재 테이블 리스트 |
+
+#### 우측 버튼 그룹
+
+##### 등록 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `등록` |
+| 액션 타입 | `modal` |
+| 스타일 | `default` |
+| 연결 화면 | 품목 등록/수정 화면 (아래 3.4 참조) |
+| 모달 제목 | 품목 등록 |
+| 모달 사이즈 | `md` |
+
+##### 복사 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `복사` |
+| 액션 타입 | `copy` |
+| 스타일 | `default` |
+| 선택 필수 | ✅ 체크 (1개만) |
+| 연결 화면 | 품목 등록/수정 화면 (아래 3.4 참조) |
+| 동작 | 선택된 데이터를 복사하여 신규 등록 폼에 채움 |
+
+##### 수정 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `수정` |
+| 액션 타입 | `edit` |
+| 스타일 | `default` |
+| 선택 필수 | ✅ 체크 (1개만) |
+| 연결 화면 | 품목 등록/수정 화면 (아래 3.4 참조) |
+| 동작 | 선택된 데이터 수정 모드로 폼 열기 |
+
+##### 삭제 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `삭제` |
+| 액션 타입 | `delete` |
+| 스타일 | `default` |
+| 선택 필수 | ✅ 체크 (복수 선택 가능) |
+| 확인 메시지 | 선택한 품목을 삭제하시겠습니까? |
+| 삭제 후 동작 | 테이블 새로고침 |
+
+---
+
+### 3.4 품목 등록/수정 화면 (모달용 화면)
+
+> 📌 **별도 화면 생성 필요**: 등록/복사/수정 버튼에 연결할 모달 화면을 새로 생성합니다.
+> 
+> 💡 **동일 화면 공유**: 등록, 복사, 수정 버튼 모두 동일한 폼 화면을 사용합니다.
+> - **등록**: 빈 폼으로 열림
+> - **복사**: 선택된 데이터가 채워진 상태로 열림 (신규 등록)
+> - **수정**: 선택된 데이터가 채워진 상태로 열림 (기존 데이터 업데이트)
+
+#### Step 1: 새 화면 생성
+
+1. 화면 관리에서 **[+ 새 화면]** 클릭
+2. 화면 정보 입력:
+   - 화면명: `품목 등록/수정`
+   - 테이블: `item_info`
+   - 화면 유형: `모달`
+
+#### Step 2: 폼 필드 배치
+
+**모달 레이아웃 배치도**:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ 품목 등록/수정                                         [✕] │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐   │
+│  │ 품번코드 *              │ │ 품명 *                  │   │
+│  │ [____________________]  │ │ [____________________]  │   │
+│  └─────────────────────────┘ └─────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐   │
+│  │ 규격                    │ │ 재질                    │   │
+│  │ [____________________]  │ │ [____________________]  │   │
+│  └─────────────────────────┘ └─────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────┐ ┌───────────┐ ┌───────────┐   │
+│  │ 재고단위 *              │ │ 중량      │ │ 중량단위  │   │
+│  │ [EA           ▼]       │ │ [_______] │ │ [kg   ▼]  │   │
+│  └─────────────────────────┘ └───────────┘ └───────────┘   │
+│                                                             │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐   │
+│  │ 구분 *                  │ │ 유형                    │   │
+│  │ [원자재         ▼]     │ │ [반도체용       ▼]     │   │
+│  └─────────────────────────┘ └─────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐   │
+│  │ 판매가                  │ │ 기준가                  │   │
+│  │ [____________________]  │ │ [____________________]  │   │
+│  └─────────────────────────┘ └─────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────────────────────────────────┐   │
+│  │ 메모                                                │   │
+│  │ [__________________________________________________]│   │
+│  └─────────────────────────────────────────────────────┘   │
+│                                                             │
+│  ┌─────────────────────────┐                               │
+│  │ 상태 *                  │                               │
+│  │ [정상           ▼]     │                               │
+│  └─────────────────────────┘                               │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│                              [취소]  [💾 저장]              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**필드 목록**:
+
+| 순서 | 필드 (컬럼명) | 라벨 | 입력 타입 | 필수 | 비고 |
+|------|---------------|------|-----------|------|------|
+| 1 | `item_number` | 품번코드 | text | ✅ | |
+| 2 | `item_name` | 품명 | text | ✅ | |
+| 3 | `size` | 규격 | text | | |
+| 4 | `material` | 재질 | text | | |
+| 5 | `inventory_unit` | 재고단위 | select | ✅ | 옵션: EA, kg, L, Sheet, Box |
+| 6 | `weight` | 중량 | number | | |
+| 7 | `unit` | 중량단위 | select | | 옵션: g, kg, kg/L, t |
+| 8 | `division` | 구분 | category | ✅ | 품목 구분 카테고리 |
+| 9 | `type` | 유형 | select | | 옵션: 반도체용, 태양광용, 산업용, 의료용, 건축용, 사출용, 화장품용 |
+| 10 | `selling_price` | 판매가 | number | | |
+| 11 | `standard_price` | 기준가 | number | | |
+| 12 | `meno` | 메모 | text | | |
+| 13 | `status` | 상태 | select | ✅ | 옵션: 정상, 품절, 대기, 단종 |
+
+#### Step 3: 버튼 배치
+
+| 버튼 | 액션 타입 | 스타일 | 설정 |
+|------|-----------|--------|------|
+| 저장 | `저장` | primary | 저장 후 모달 닫기, 부모 화면 테이블 새로고침 |
+| 취소 | `모달 닫기` | secondary | |
+
+#### Step 4: 버튼에 화면 연결
+
+1. 메인 화면(품목정보)으로 돌아가기
+2. **등록 버튼** 선택 → 설정 패널에서:
+   - 액션 타입: `modal`
+   - 연결 화면: `품목 등록/수정` 선택
+   - 모달 제목: `품목 등록`
+3. **복사 버튼** 선택 → 설정 패널에서:
+   - 액션 타입: `copy`
+   - 연결 화면: `품목 등록/수정` 선택
+   - 선택 필수: ✅ 체크
+   - 동작: 선택된 데이터를 복사하여 폼에 채움 (신규 등록)
+4. **수정 버튼** 선택 → 설정 패널에서:
+   - 액션 타입: `edit`
+   - 연결 화면: `품목 등록/수정` 선택
+   - 선택 필수: ✅ 체크
+   - 동작: 선택된 데이터를 수정 모드로 폼에 채움
+
+> 💡 **참고**: 컬럼별 스타일(뱃지 색상, 카테고리 표시 등)은 컴포넌트 기본 스타일을 따릅니다. 필요시 테이블 관리에서 컬럼별 상세 설정을 조정할 수 있습니다.
+
+---
+
+## 4. 컴포넌트 연동 설정
+
+### 4.1 이벤트 흐름
+
+```
+[검색 입력]
+    │
+    ▼
+v2-table-search-widget
+    │ onFilterChange
+    ▼
+v2-table-list (자동 재조회)
+    │
+    ▼
+[데이터 표시]
+
+
+[등록/복사/수정 버튼 클릭]
+    │
+    ▼
+[모달 열기] → [폼 입력] → [저장]
+    │                        │
+    │                        ▼
+    │                   refreshTable 이벤트
+    │                        │
+    └────────────────────────┘
+                             │
+                             ▼
+                    v2-table-list (재조회)
+```
+
+### 4.2 연동 설정
+
+| 소스 컴포넌트 | 이벤트/액션 | 대상 컴포넌트 | 동작 |
+|---------------|-------------|---------------|------|
+| 검색 위젯 | onFilterChange | 테이블 리스트 | 필터 적용, 재조회 |
+| 등록 버튼 | click | 모달 | 빈 폼으로 모달 열기 |
+| 복사 버튼 | click | 모달 | 선택 데이터가 채워진 폼 열기 (신규) |
+| 수정 버튼 | click | 모달 | 선택 데이터가 채워진 폼 열기 (수정) |
+| 삭제 버튼 | click | 테이블 리스트 | 선택 항목 삭제 |
+| 모달 저장 | afterSave | 테이블 리스트 | refreshTable |
+
+### 4.3 TableOptionsContext 연동
+
+```
+v2-table-search-widget ──── TableOptionsContext ──── v2-table-list
+        │                           │                      │
+        │ registeredTables에서      │                      │
+        │ item-table 참조           │                      │
+        │                           │                      │
+        └── onFilterChange() ───────┼──────────────────────┘
+                                    │
+                                    ▼
+                            필터 조건 전달 & 재조회
+```
+
+---
+
+## 5. 사용자 사용 예시 시나리오
+
+### 시나리오 1: 품목 조회
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 화면 진입 | 전체 품목 목록 표시 |
+| 2 | 상태 필터를 "정상"으로 선택 | 자동 필터링 |
+| 3 | 품명에 "폴리머" 입력 후 검색 | 품명에 "폴리머" 포함된 품목 표시 |
+| 4 | Group by에서 "구분" 선택 | division별 그룹핑 |
+
+### 시나리오 2: 품목 등록
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | [등록] 버튼 클릭 | 빈 폼 모달 표시 |
+| 2 | 데이터 입력 (품번코드, 품명, 규격 등) | 입력 필드 채움 |
+| 3 | [저장] 버튼 클릭 | 저장 완료, 모달 닫힘, 목록 갱신 |
+
+### 시나리오 3: 품목 복사
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 테이블에서 복사할 행 체크박스 선택 | 행 선택 표시 |
+| 2 | [복사] 버튼 클릭 | 선택된 데이터가 채워진 폼 모달 표시 |
+| 3 | 필요시 데이터 수정 (품번코드 등) | 필드 값 변경 |
+| 4 | [저장] 버튼 클릭 | 신규 등록 완료, 목록 갱신 |
+
+### 시나리오 4: 품목 수정
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 테이블에서 행 체크박스 선택 | 행 선택 표시 |
+| 2 | [수정] 버튼 클릭 | 수정 모달 표시 (기존 데이터 로드) |
+| 3 | 데이터 수정 | 필드 값 변경 |
+| 4 | [저장] 버튼 클릭 | 저장 완료, 목록 갱신 |
+
+### 시나리오 5: 품목 삭제
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 삭제할 행 체크박스 선택 (다중 가능) | 행 선택 표시 |
+| 2 | [삭제] 버튼 클릭 | 삭제 확인 다이얼로그 표시 |
+| 3 | 확인 | 삭제 완료, 목록 갱신 |
+
+---
+
+## 6. 검증 체크리스트
+
+### 기본 기능
+- [ ] 데이터 조회가 정상 동작하는가?
+- [ ] 검색 필터 (상태, 품번코드, 품명)가 정상 동작하는가?
+- [ ] 신규 등록이 정상 동작하는가?
+- [ ] 복사 기능이 정상 동작하는가?
+- [ ] 수정이 정상 동작하는가?
+- [ ] 삭제가 정상 동작하는가?
+- [ ] 코드변경이 정상 동작하는가?
+- [ ] 엑셀 업로드가 정상 동작하는가?
+- [ ] 엑셀 다운로드가 정상 동작하는가?
+
+### 테이블 기능
+- [ ] 페이지네이션이 정상 동작하는가?
+- [ ] 정렬이 정상 동작하는가?
+- [ ] 컬럼 너비 조정이 정상 동작하는가?
+- [ ] 체크박스 선택이 정상 동작하는가?
+
+### 검색 위젯 연동
+- [ ] v2-table-search-widget과 v2-table-list 연동이 정상 동작하는가?
+- [ ] 필터 변경 시 자동 재조회가 동작하는가?
+- [ ] 초기화 버튼이 정상 동작하는가?
+
+### 그룹핑 기능
+- [ ] Group by 선택 시 그룹핑이 정상 동작하는가?
+- [ ] 다중 그룹핑이 정상 동작하는가?
+
+---
+
+## 7. 참고 사항
+
+### 관련 테이블
+- `customer_item_mapping` - 거래처별 품목 매핑
+- `supplier_item_mapping` - 공급업체별 품목 매핑
+- `item_inspection_info` - 품목 검사 정보
+- `item_routing_version` - 품목별 공정 버전
+- `item_routing_detail` - 품목별 공정 상세
+
+### 특이 사항
+- `division` 컬럼은 카테고리 코드 (예: CATEGORY_191259)로 저장됨
+- `meno` 컬럼은 오타로 보임 (원래 memo)
+- `selling_price`, `standard_price`는 varchar로 저장됨 (숫자 형식 문자열)
+- `company_code`는 멀티테넌시용 회사 코드
+
+---
+
+## 8. DB INSERT용 JSON 설정 (screen_layouts_v2 방식)
+
+> 📌 실제 화면 저장은 `screen_definitions` + `screen_layouts_v2` 테이블을 사용합니다.
+> `screen_layouts_v2`는 전체 레이아웃을 하나의 JSON (`layout_data`)으로 저장합니다.
+
+> ⚠️ **주의: 아래 JSON은 "품목정보" 화면 전용 예시입니다!**
+> 
+> 다른 화면 구현 시:
+> 1. **테이블 분석 필수** - 해당 화면이 사용하는 테이블 구조 파악
+> 2. **컬럼 재정의** - `columns`, `fieldName` 등을 해당 테이블에 맞게 작성
+> 3. **기능 요구사항 반영** - 버튼, 모달, 액션 등을 화면 요구사항에 맞게 구성
+> 4. **ID 값 동적 처리** - `screen_id`, `targetScreenId`는 생성 시 할당되는 값 사용
+
+### 8.1 테이블 구조
+
+#### screen_definitions
+
+| 컬럼명 | 타입 | 필수 | 기본값 | 설명 |
+|--------|------|------|--------|------|
+| `screen_id` | integer | PK | 자동 생성 (시퀀스) | 화면 고유 ID |
+| `screen_name` | varchar(100) | ✅ | - | 화면명 |
+| `screen_code` | varchar(50) | ✅ | **자동 생성** | `{company_code}_{순번}` 형식 |
+| `table_name` | varchar(100) | | - | 기본 테이블명 |
+| `company_code` | varchar(50) | ✅ | - | 회사 코드 |
+| `description` | text | | - | 화면 설명 |
+| `is_active` | char(1) | | `'Y'` | Y=활성, N=비활성, D=삭제 |
+| `created_date` | timestamp | | `CURRENT_TIMESTAMP` | 생성일시 |
+| `db_source_type` | varchar(10) | | `'internal'` | internal/external |
+| `data_source_type` | varchar(20) | | `'database'` | database/rest_api |
+
+#### screen_layouts_v2
+
+| 컬럼명 | 타입 | 필수 | 기본값 | 설명 |
+|--------|------|------|--------|------|
+| `layout_id` | integer | PK | 자동 생성 (시퀀스) | 레이아웃 고유 ID |
+| `screen_id` | integer | ✅ | - | 화면 ID (FK) |
+| `company_code` | varchar(20) | ✅ | - | 회사 코드 |
+| `layout_data` | jsonb | ✅ | `'{}'` | 전체 레이아웃 JSON |
+| `created_at` | timestamp | | `now()` | 생성일시 |
+| `updated_at` | timestamp | | `now()` | 수정일시 |
+
+### 8.2 화면 정의 (screen_definitions)
+
+> ⚠️ `screen_code`는 API 호출 시 자동 생성됩니다. (`{company_code}_{순번}` 형식)
+
+**필수 입력 필드:**
+
+```json
+{
+  "screenName": "품목정보",
+  "tableName": "item_info",
+  "companyCode": "COMPANY_7",
+  "description": "품목 기본정보 관리 화면"
+}
+```
+
+**전체 필드 (자동 생성 포함):**
+
+```json
+{
+  "screen_id": 140,
+  "screen_name": "품목정보",
+  "screen_code": "COMPANY_7_3",
+  "table_name": "item_info",
+  "company_code": "COMPANY_7",
+  "description": "품목 기본정보 관리 화면",
+  "is_active": "Y",
+  "db_source_type": "internal",
+  "data_source_type": "database",
+  "created_date": "2025-01-29T00:00:00.000Z"
+}
+```
+
+### 8.2 레이아웃 데이터 (screen_layouts_v2.layout_data)
+
+> 전체 레이아웃을 하나의 JSON으로 저장
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_search",
+      "url": "@/lib/registry/components/v2-table-search-widget",
+      "size": { "width": 1920, "height": 80 },
+      "position": { "x": 0, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-table-search-widget",
+        "label": "검색 필터",
+        "webTypeConfig": {}
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_table",
+      "url": "@/lib/registry/components/v2-table-list",
+      "size": { "width": 1920, "height": 930 },
+      "position": { "x": 0, "y": 150, "z": 1 },
+      "overrides": {
+        "type": "v2-table-list",
+        "label": "테이블 리스트",
+        "filter": { "enabled": true, "filters": [] },
+        "height": "auto",
+        "actions": { "actions": [], "bulkActions": false, "showActions": false },
+        "columns": [
+          { "align": "left", "order": 0, "format": "text", "visible": true, "sortable": true, "columnName": "status", "searchable": true, "displayName": "status" },
+          { "align": "left", "order": 1, "format": "text", "visible": true, "sortable": true, "columnName": "item_number", "searchable": true, "displayName": "item_number" },
+          { "align": "left", "order": 2, "format": "text", "visible": true, "sortable": true, "columnName": "item_name", "searchable": true, "displayName": "item_name" },
+          { "align": "left", "order": 3, "format": "text", "visible": true, "sortable": true, "columnName": "size", "searchable": true, "displayName": "size" },
+          { "align": "left", "order": 4, "format": "text", "visible": true, "sortable": true, "columnName": "material", "searchable": true, "displayName": "material" },
+          { "align": "left", "order": 5, "format": "text", "visible": true, "sortable": true, "columnName": "inventory_unit", "searchable": true, "displayName": "inventory_unit" },
+          { "align": "left", "order": 6, "format": "text", "visible": true, "sortable": true, "columnName": "weight", "searchable": true, "displayName": "weight" },
+          { "align": "left", "order": 7, "format": "text", "visible": true, "sortable": true, "columnName": "unit", "searchable": true, "displayName": "unit" },
+          { "align": "left", "order": 8, "format": "text", "visible": true, "sortable": true, "columnName": "division", "searchable": true, "displayName": "division" },
+          { "align": "left", "order": 9, "format": "text", "visible": true, "sortable": true, "columnName": "type", "searchable": true, "displayName": "type" },
+          { "align": "left", "order": 10, "format": "text", "visible": true, "sortable": true, "columnName": "writer", "searchable": true, "displayName": "writer" }
+        ],
+        "autoLoad": true,
+        "checkbox": { "enabled": true, "multiple": true, "position": "left", "selectAll": true },
+        "pagination": { "enabled": true, "pageSize": 20, "showPageInfo": true, "pageSizeOptions": [10, 20, 50, 100], "showSizeSelector": true },
+        "showFooter": true,
+        "showHeader": true,
+        "tableStyle": { "theme": "default", "rowHeight": "normal", "borderStyle": "light", "headerStyle": "default", "hoverEffect": true, "alternateRows": true },
+        "displayMode": "table",
+        "stickyHeader": false,
+        "selectedTable": "item_info",
+        "webTypeConfig": {},
+        "horizontalScroll": { "enabled": true, "maxColumnWidth": 300, "minColumnWidth": 100, "maxVisibleColumns": 8 }
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_btn_code_merge",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 88, "height": 40 },
+      "position": { "x": 10, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "코드변경",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "code_merge",
+          "errorMessage": "저장 중 오류가 발생했습니다.",
+          "successMessage": "저장되었습니다.",
+          "mergeColumnName": "item_number"
+        },
+        "variant": "primary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_btn_upload",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 88, "height": 40 },
+      "position": { "x": 110, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "업로드",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "excel_upload",
+          "errorMessage": "업로드 중 오류가 발생했습니다.",
+          "successMessage": "업로드되었습니다."
+        },
+        "variant": "primary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_btn_download",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 88, "height": 40 },
+      "position": { "x": 210, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "다운로드",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "excel_download",
+          "errorMessage": "다운로드 중 오류가 발생했습니다.",
+          "successMessage": "다운로드되었습니다."
+        },
+        "variant": "primary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_btn_register",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1550, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "등록",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "modal",
+          "modalSize": "lg",
+          "modalTitle": "품목 등록",
+          "targetScreenId": {{modal_screen_id}},
+          "errorMessage": "저장 중 오류가 발생했습니다.",
+          "successMessage": "저장되었습니다."
+        },
+        "variant": "primary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_btn_copy",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1640, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "복사",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "copy",
+          "modalSize": "lg",
+          "modalTitle": "품목 복사",
+          "targetScreenId": {{modal_screen_id}},
+          "errorMessage": "복사 중 오류가 발생했습니다.",
+          "successMessage": "복사되었습니다."
+        },
+        "variant": "primary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_btn_edit",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1730, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "수정",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "edit",
+          "modalSize": "lg",
+          "modalTitle": "품목 수정",
+          "targetScreenId": {{modal_screen_id}},
+          "errorMessage": "수정 중 오류가 발생했습니다.",
+          "successMessage": "수정되었습니다."
+        },
+        "variant": "primary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "comp_btn_delete",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1820, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "삭제",
+        "type": "v2-button-primary",
+        "label": "기본 버튼",
+        "action": {
+          "type": "delete",
+          "errorMessage": "삭제 중 오류가 발생했습니다.",
+          "successMessage": "삭제되었습니다."
+        },
+        "variant": "danger",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 8
+    }
+  ]
+}
+```
+
+### 8.3 모달 화면 (품목 등록/수정)
+
+#### 화면 정의 (필수 입력)
+
+```json
+{
+  "screenName": "품목 등록/수정",
+  "tableName": "item_info",
+  "companyCode": "COMPANY_7",
+  "description": "품목 등록/수정 폼 화면"
+}
+```
+
+#### 레이아웃 데이터 (screen_layouts_v2.layout_data)
+
+> 📌 **실제 적용된 레이아웃** - 품목 등록/수정 폼 (모달용)
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_item_number",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "품번코드",
+        "fieldName": "item_number",
+        "placeholder": "품번코드를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_item_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "품명",
+        "fieldName": "item_name",
+        "placeholder": "품명을 입력하세요",
+        "required": true
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_size",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "규격",
+        "fieldName": "size",
+        "placeholder": "규격을 입력하세요"
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_material",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "재질",
+        "fieldName": "material",
+        "placeholder": "재질을 입력하세요"
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_inventory_unit",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "재고단위",
+        "fieldName": "inventory_unit",
+        "placeholder": "재고단위를 입력하세요"
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_weight",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "중량",
+        "fieldName": "weight",
+        "placeholder": "중량을 입력하세요"
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_unit",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "단위",
+        "fieldName": "unit",
+        "placeholder": "단위를 입력하세요"
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_division",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "구분",
+        "fieldName": "division",
+        "placeholder": "구분을 입력하세요"
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "comp_type",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "유형",
+        "fieldName": "type",
+        "placeholder": "유형을 입력하세요"
+      },
+      "displayOrder": 8
+    },
+    {
+      "id": "comp_status",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "상태",
+        "fieldName": "status",
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "정상", "label": "정상" },
+            { "value": "품절", "label": "품절" },
+            { "value": "대기", "label": "대기" },
+            { "value": "단종", "label": "단종" }
+          ]
+        }
+      },
+      "displayOrder": 9
+    },
+    {
+      "id": "comp_btn_save",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 540, "y": 420, "z": 1 },
+      "overrides": {
+        "text": "저장",
+        "type": "v2-button-primary",
+        "label": "저장 버튼",
+        "action": {
+          "type": "save",
+          "closeModalAfterSave": true,
+          "refreshParentTable": true,
+          "successMessage": "저장되었습니다.",
+          "errorMessage": "저장 중 오류가 발생했습니다."
+        },
+        "variant": "primary",
+        "actionType": "button"
+      },
+      "displayOrder": 10
+    }
+  ]
+}
+```
+
+### 8.4 API 호출 방식
+
+> 📌 실제 화면 생성은 API를 통해 진행됩니다. `screen_code`는 서버에서 자동 생성됩니다.
+
+#### Step 1: 화면 코드 자동 생성 API
+
+```http
+GET /api/screens/generate-code?companyCode=COMPANY_7
+```
+
+**응답:**
+```json
+{
+  "success": true,
+  "data": { "screenCode": "COMPANY_7_4" }
+}
+```
+
+#### Step 2: 화면 생성 API
+
+```http
+POST /api/screens
+Content-Type: application/json
+Authorization: Bearer {{token}}
+
+{
+  "screenName": "품목정보",
+  "screenCode": "COMPANY_7_4",
+  "tableName": "item_info",
+  "companyCode": "COMPANY_7",
+  "description": "품목 기본정보 관리 화면"
+}
+```
+
+**응답:**
+```json
+{
+  "success": true,
+  "data": {
+    "screenId": 141,
+    "screenCode": "COMPANY_7_4",
+    "screenName": "품목정보"
+  }
+}
+```
+
+#### Step 3: 레이아웃 저장 API
+
+```http
+PUT /api/screens/141/layout-v2
+Content-Type: application/json
+Authorization: Bearer {{token}}
+
+{
+  "layoutData": {
+    "version": "2.0",
+    "components": [ /* 8.2의 components 배열 */ ]
+  }
+}
+```
+
+### 8.5 SQL 직접 INSERT (실제 적용 방식)
+
+> 📌 **실제 테스트 완료된 방식**입니다. Docker psql을 통해 직접 DB에 삽입합니다.
+
+#### Step 1: 모달 화면 먼저 생성 (등록/수정 폼)
+
+```sql
+-- 모달 화면 정의
+INSERT INTO screen_definitions (
+  screen_code, screen_name, table_name, company_code, description, is_active
+) VALUES (
+  'COMPANY_19_ITEM_MODAL', 'Item Register/Edit Modal', 'item_info', 'COMPANY_19', 
+  'Item registration and edit form modal', 'Y'
+) RETURNING screen_id;
+-- 예: screen_id = 3731 반환됨
+```
+
+#### Step 2: 모달 레이아웃 저장
+
+```sql
+-- 레이아웃 JSON을 파일로 저장 후 INSERT (한글 인코딩 문제 방지)
+INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data, created_at, updated_at)
+VALUES (
+  3731,  -- Step 1에서 반환된 screen_id
+  'COMPANY_19',
+  '{"version":"2.0","components":[/* 8.3의 모달 components 배열 */]}'::jsonb,
+  NOW(), NOW()
+);
+```
+
+#### Step 3: 메인 화면 생성
+
+```sql
+-- 메인 화면 정의
+INSERT INTO screen_definitions (
+  screen_code, screen_name, table_name, company_code, description, is_active
+) VALUES (
+  'COMPANY_19_ITEM_INFO', 'Item Info', 'item_info', 'COMPANY_19', 
+  'Item master data management', 'Y'
+) RETURNING screen_id;
+-- 예: screen_id = 3730 반환됨
+```
+
+#### Step 4: 메인 레이아웃 저장 (모달 연결)
+
+```sql
+-- targetScreenId를 Step 1에서 생성한 모달 screen_id로 치환
+INSERT INTO screen_layouts_v2 (screen_id, company_code, layout_data, created_at, updated_at)
+VALUES (
+  3730,  -- Step 3에서 반환된 screen_id
+  'COMPANY_19',
+  '{"version":"2.0","components":[/* 8.2의 components 배열, targetScreenId: 3731 */]}'::jsonb,
+  NOW(), NOW()
+);
+```
+
+#### Step 5: 메뉴에 화면 연결 (선택사항)
+
+```sql
+-- 기존 메뉴에 화면 연결 (screen_menu_assignments 테이블 사용)
+INSERT INTO screen_menu_assignments (screen_id, menu_id, company_code, display_order)
+VALUES (3730, 55566, 'COMPANY_19', 1);
+```
+
+### 8.6 화면 생성 순서 (중요!)
+
+```
+1. 모달 화면 생성 (screen_definitions INSERT)
+      │
+      ▼
+2. 모달 레이아웃 저장 (screen_layouts_v2 INSERT)
+      │
+      ▼
+3. 메인 화면 생성 (screen_definitions INSERT)
+      │
+      ▼
+4. 메인 레이아웃 저장 (screen_layouts_v2 INSERT)
+   └── targetScreenId에 모달 screen_id 사용!
+      │
+      ▼
+5. (선택) 메뉴에 화면 연결
+```
+
+### 8.7 주의사항
+
+| 항목 | 설명 |
+|------|------|
+| `screen_code` | 회사별 고유, 형식: `{COMPANY_CODE}_{용도}` (예: `COMPANY_19_ITEM_INFO`) |
+| `screen_id` | AUTO INCREMENT, INSERT 후 RETURNING으로 획득 |
+| `component.id` | `comp_` prefix 권장, 화면 내 중복 불가 |
+| `component.url` | `@/lib/registry/components/v2-xxx` 형식 정확히 사용 |
+| `component.type` | `overrides.type`과 URL 마지막 부분 일치 필요 |
+| `targetScreenId` | **숫자** (문자열 아님), 모달 화면 먼저 생성 필요 |
+| `version` | 반드시 `"2.0"` 사용 |
+| `layout_data` | JSONB 타입, 복잡한 JSON은 파일로 저장 후 `-f` 옵션으로 실행 |
+| UNIQUE 제약 | `(screen_id, company_code)` 조합이 유니크 |
+| 한글 처리 | Docker psql에서 한글 직접 입력 시 인코딩 문제 → 영문 사용 또는 파일 사용 |
+
+### 8.8 컴포넌트 타입 레퍼런스
+
+| 컴포넌트 | URL | type (overrides) |
+|----------|-----|------------------|
+| 텍스트 입력 | `v2-input` | `v2-input` |
+| 선택 (드롭다운) | `v2-select` | `v2-select` |
+| 날짜 입력 | `v2-date` | `v2-date` |
+| 버튼 | `v2-button-primary` | `v2-button-primary` |
+| 테이블 리스트 | `v2-table-list` | `v2-table-list` |
+| 검색 위젯 | `v2-table-search-widget` | `v2-table-search-widget` |
+| 텍스트 표시 | `v2-text-display` | `v2-text-display` |
+| 구분선 | `v2-divider-line` | `v2-divider-line` |
+| 섹션 카드 | `v2-section-card` | `v2-section-card` |
+
+---
+
+## 9. 화면 구현 체크리스트
+
+> 📋 새로운 화면을 구현할 때 아래 체크리스트를 순서대로 확인하세요.
+
+### 9.1 분석 단계
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **테이블 구조 분석** | 해당 화면이 사용할 테이블 스키마 확인 (컬럼명, 타입, 필수 여부) |
+| ☐ | **화면 기능 파악** | 조회/등록/수정/삭제, 검색, 필터, 그룹핑 등 필요 기능 목록화 |
+| ☐ | **컴포넌트 매핑** | 필요 기능 → V2 컴포넌트 매핑 (2.2 목록 참조) |
+| ☐ | **구현 불가 항목 확인** | 현재 V2 컴포넌트로 구현 불가능한 기능 파악 |
+| ☐ | **대체 방안 검토** | 구현 불가 항목에 대해 기존 컴포넌트 조합으로 대체 가능 여부 확인 |
+
+### 9.2 문서 작성 단계
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **테이블 정의 작성** | 1.1~1.2 형식으로 테이블/컬럼 정보 작성 |
+| ☐ | **레이아웃 배치도 작성** | 2.1 형식으로 ASCII 다이어그램 작성 |
+| ☐ | **사용 컴포넌트 목록** | 2.3 형식으로 이 화면에서 사용할 컴포넌트 정리 |
+| ☐ | **모달 화면 정의** | 등록/수정 모달이 필요하면 별도 레이아웃 작성 |
+| ☐ | **JSON 설정 작성** | 8.2~8.3 형식으로 layout_data JSON 작성 |
+| ☐ | **구현 불가/대체 방안 명시** | 해당 사항 있으면 문서에 섹션 추가 |
+
+### 9.3 INSERT 전 확인
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **company_code 확인** | 대상 회사 코드 정확한지 확인 |
+| ☐ | **screen_code 형식** | `{COMPANY_CODE}_{용도}` 형식 준수 |
+| ☐ | **모달 먼저 생성** | 모달 화면이 있으면 반드시 먼저 INSERT |
+| ☐ | **JSON 파일 준비** | 복잡한 JSON은 파일로 저장 (한글 인코딩 대비) |
+| ☐ | **컴포넌트 ID 고유성** | `comp_` prefix, 화면 내 중복 없는지 확인 |
+| ☐ | **컴포넌트 URL/type 일치** | `url`의 마지막 부분과 `overrides.type` 동일한지 확인 |
+| ☐ | **targetScreenId 치환** | 모달 screen_id를 숫자로 정확히 입력 |
+
+### 9.4 INSERT 후 검증
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **화면 접속 테스트** | `/screens/{screen_id}` URL로 접속 |
+| ☐ | **컴포넌트 렌더링 확인** | 모든 컴포넌트가 "미구현" 없이 표시되는지 확인 |
+| ☐ | **검색 기능 테스트** | 검색 위젯 동작 확인 |
+| ☐ | **테이블 데이터 로드** | 테이블에 데이터 표시되는지 확인 |
+| ☐ | **버튼 동작 테스트** | 등록/수정/삭제 버튼 클릭 시 모달/액션 동작 확인 |
+| ☐ | **모달 폼 테스트** | 모달 열림, 입력 필드 표시, 저장 동작 확인 |
+| ☐ | **메뉴 연결 확인** | (연결한 경우) 메뉴에서 화면 접근 가능한지 확인 |
+
+### 9.5 문제 발생 시 확인 사항
+
+| 증상 | 확인 사항 |
+|------|-----------|
+| 화면이 안 보임 | `screen_layouts_v2`에 데이터 있는지 확인, `company_code` 일치 여부 |
+| "미구현 컴포넌트" 표시 | `url`과 `overrides.type` 일치 여부, 컴포넌트명 오타 확인 |
+| 모달이 안 열림 | `targetScreenId`가 숫자인지, 해당 screen_id 존재하는지 확인 |
+| 테이블 데이터 없음 | `selectedTable` 값 확인, 테이블에 데이터 존재 여부 |
+| 버튼 동작 안 함 | `action.type` 값 확인, `actionType: "button"` 설정 여부 |
diff --git a/docs/screen-implementation-guide/02_sales/customer.md b/docs/screen-implementation-guide/02_sales/customer.md
new file mode 100644
index 00000000..7699f798
--- /dev/null
+++ b/docs/screen-implementation-guide/02_sales/customer.md
@@ -0,0 +1,256 @@
+# 거래처관리 화면 구현 가이드
+
+> **화면명**: 거래처관리
+> **파일**: 거래처관리.html
+> **분류**: 영업관리
+> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)
+
+---
+
+## 1. 화면 개요
+
+고객사 및 공급업체 정보를 통합 관리하는 화면입니다.
+
+### 핵심 기능
+- 거래처 목록 조회/검색
+- 그룹화 기능 (거래처유형, 지역별)
+- 거래처 등록/수정/삭제
+- 거래처별 품목코드/단가 관리
+- 담당자 정보 관리
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [거래처코드] [거래처명] [거래처유형▼] [사용여부▼] [초기화][조회]  │
+│                                          [사용자옵션][업로드][다운로드]│
+├───────────────────────┬─────────────────────────────────────────┤
+│ 📋 거래처 목록          │ [기본정보][품목코드][단가정보][담당자]   │
+│ ─────────────────     │ ─────────────────────────────────────  │
+│ Group by: [거래처유형▼] │ 거래처코드: C-001                       │
+│ ┌──────────────────┐  │ 거래처명: (주)테스트                     │
+│ │▼ 고객사 (15)       │  │ 사업자번호: 123-45-67890               │
+│ │  C-001 | A사      │  │ 대표자: 홍길동                          │
+│ │  C-002 | B사      │  ├─────────────────────────────────────────┤
+│ │▼ 공급업체 (8)      │  │ [품목코드 탭 내용]                       │
+│ │  S-001 | 원자재사  │  │ ┌────────────────────────────────┐    │
+│ └──────────────────┘  │ │거래처품목코드|품목명|자사품목코드│    │
+│                       │ │CP-001      |원료A |M-001      │    │
+│     리사이저 ↔        │ └────────────────────────────────┘    │
+└───────────────────────┴─────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 거래처 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
+| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
+| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
+
+---
+
+## 4. 테이블 정의
+
+### 4.1 거래처 목록
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'customer_code', label: '거래처코드', width: 100 },
+  { id: 'customer_name', label: '거래처명', width: 200 },
+  { id: 'customer_type', label: '거래처유형', width: 100 },
+  { id: 'business_no', label: '사업자번호', width: 120 },
+  { id: 'ceo_name', label: '대표자', width: 100 },
+  { id: 'tel', label: '전화번호', width: 120 },
+  { id: 'status', label: '사용여부', width: 80 }
+]
+```
+
+### 4.2 품목코드 탭
+
+```typescript
+itemCodeColumns: [
+  { id: 'customer_item_code', label: '거래처품목코드', width: 150 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'our_item_code', label: '자사품목코드', width: 150 },
+  { id: 'spec', label: '규격', width: 150 }
+]
+```
+
+### 4.3 단가정보 탭
+
+```typescript
+priceColumns: [
+  { id: 'item_code', label: '품목코드', width: 120 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'unit_price', label: '단가', width: 100, format: 'currency' },
+  { id: 'currency', label: '통화', width: 60 },
+  { id: 'apply_date', label: '적용일', width: 100 },
+  { id: 'remark', label: '비고', width: 150 }
+]
+```
+
+---
+
+## 5. 그룹화 기능 (신규 컴포넌트 필요)
+
+### 5.1 그룹화 옵션
+
+```typescript
+groupByOptions: [
+  { id: 'customer_type', label: '거래처유형' },
+  { id: 'region', label: '지역' },
+  { id: 'status', label: '사용여부' }
+]
+```
+
+### 5.2 그룹 헤더 표시
+
+```
+▼ 고객사 (15) ← 그룹명 + 건수
+  │ C-001 │ (주)A사 │ ...
+  │ C-002 │ (주)B사 │ ...
+▼ 공급업체 (8)
+  │ S-001 │ 원자재사 │ ...
+```
+
+### 5.3 필요 인터랙션
+
+- 그룹 접기/펼치기
+- 그룹 전체 선택 체크박스
+- 다중 그룹핑 (선택)
+
+---
+
+## 6. 탭 구성
+
+```typescript
+tabs: [
+  {
+    id: 'basic',
+    label: '기본정보',
+    fields: [
+      { id: 'customer_code', label: '거래처코드' },
+      { id: 'customer_name', label: '거래처명' },
+      { id: 'customer_type', label: '거래처유형' },
+      { id: 'business_no', label: '사업자번호' },
+      { id: 'ceo_name', label: '대표자' },
+      { id: 'address', label: '주소' },
+      { id: 'tel', label: '전화번호' },
+      { id: 'fax', label: '팩스' },
+      { id: 'email', label: '이메일' }
+    ]
+  },
+  {
+    id: 'item_codes',
+    label: '품목코드',
+    type: 'table',
+    entityId: 'customer_item_mapping'
+  },
+  {
+    id: 'prices',
+    label: '단가정보',
+    type: 'table',
+    entityId: 'customer_prices'
+  },
+  {
+    id: 'contacts',
+    label: '담당자',
+    type: 'table',
+    entityId: 'customer_contacts'
+  }
+]
+```
+
+---
+
+## 7. 현재 구현 가능 범위
+
+### ✅ 가능
+- 검색 영역
+- 분할 패널 레이아웃
+- 상세 탭
+- 품목코드/단가/담당자 테이블
+
+### ⚠️ 부분 가능
+- 거래처 목록: 그룹화 없이 일반 테이블로 구현
+
+### ❌ 불가능
+- 동적 그룹화 (그룹 접기/펼치기)
+
+---
+
+## 8. 간소화 구현 JSON (그룹화 제외)
+
+```json
+{
+  "screen_code": "CUSTOMER_MAIN",
+  "screen_name": "거래처관리",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "config": {
+        "searchFields": [
+          { "type": "input", "id": "customer_code", "placeholder": "거래처코드" },
+          { "type": "input", "id": "customer_name", "placeholder": "거래처명" },
+          { "type": "select", "id": "customer_type", "placeholder": "거래처유형",
+            "options": [
+              { "value": "customer", "label": "고객사" },
+              { "value": "supplier", "label": "공급업체" },
+              { "value": "both", "label": "고객사/공급업체" }
+            ]
+          },
+          { "type": "select", "id": "status", "placeholder": "사용여부" }
+        ]
+      }
+    },
+    {
+      "type": "v2-split-panel-layout",
+      "config": {
+        "masterPanel": {
+          "title": "거래처 목록",
+          "entityId": "customer_master",
+          "columns": [
+            { "id": "customer_code", "label": "거래처코드", "width": 100 },
+            { "id": "customer_name", "label": "거래처명", "width": 200 },
+            { "id": "customer_type", "label": "거래처유형", "width": 100 },
+            { "id": "ceo_name", "label": "대표자", "width": 100 }
+          ]
+        },
+        "detailPanel": {
+          "tabs": [
+            { "id": "basic", "label": "기본정보", "type": "form" },
+            { "id": "items", "label": "품목코드", "type": "table", "entityId": "customer_items" },
+            { "id": "prices", "label": "단가정보", "type": "table", "entityId": "customer_prices" },
+            { "id": "contacts", "label": "담당자", "type": "table", "entityId": "customer_contacts" }
+          ]
+        }
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 9. v2-grouped-table 개발 시 추가 구현
+
+```typescript
+// 그룹화 테이블 설정
+groupedTableConfig: {
+  groupBy: 'customer_type',
+  groupByOptions: ['customer_type', 'region', 'status'],
+  showGroupCount: true,
+  expandAll: false,
+  groupCheckbox: true
+}
+```
+
+**예상 재활용**: `v2-grouped-table`은 5개 이상 화면에서 사용 가능
+- 거래처관리, 품목정보, 작업지시, 입출고관리, 견적관리
diff --git a/docs/screen-implementation-guide/02_sales/order.md b/docs/screen-implementation-guide/02_sales/order.md
new file mode 100644
index 00000000..ff302b67
--- /dev/null
+++ b/docs/screen-implementation-guide/02_sales/order.md
@@ -0,0 +1,1276 @@
+# 수주관리 (Sales Order Management)
+
+> Screen ID: /screens/156
+> 메뉴 경로: 영업관리 > 수주관리
+> 테이블: `sales_order_mng`
+
+---
+
+## ⚠️ 문서 사용 안내
+
+> **이 문서는 "수주관리" 화면의 구현 예시입니다.**
+> 
+> ### 📌 중요: JSON 데이터는 참고용입니다!
+> 
+> 이 문서에 포함된 JSON 설정(레이아웃, 컴포넌트 구성 등)은 **수주관리 화면에 특화된 예시**입니다.
+> 
+> **다른 화면을 구현할 때:**
+> 1. 이 JSON을 그대로 복사해서 사용하지 마세요
+> 2. 해당 화면의 **테이블 구조를 먼저 분석**하세요
+> 3. 화면의 **요구사항과 기능을 파악**하세요
+> 4. 분석 결과에 맞는 **새로운 JSON 구조를 작성**하세요
+
+---
+
+## 1. 테이블 선택 및 화면 구조
+
+### 1.1 사용 테이블
+
+| 테이블명 | 용도 | 비고 |
+|----------|------|------|
+| `sales_order_mng` | 수주 마스터 데이터 | 주 테이블 |
+| `customer_mng` | 거래처 정보 | FK: partner_id |
+| `item_info` | 품목 정보 | FK: part_code |
+
+### 1.2 테이블 컬럼 정의 (실제 DB 기준)
+
+| 컬럼명 | 표시명 | 타입 | 필수 | 설명 |
+|--------|--------|------|------|------|
+| `id` | ID | integer | PK | 자동 생성 (시퀀스) |
+| `company_code` | 회사코드 | varchar | ✅ | 멀티테넌시 |
+| `order_no` | 수주번호 | varchar | ✅ | 수주 고유 코드 |
+| `order_date` | 수주일 | date | | 수주 등록일 |
+| `due_date` | 납기일 | date | | 납품 예정일 |
+| `partner_id` | 거래처ID | varchar | | 거래처 코드 (FK) |
+| `delivery_partner_id` | 납품처ID | varchar | | 납품처 코드 |
+| `delivery_address` | 납품장소 | text | | 납품 주소 |
+| `shipping_method` | 배송방법 | varchar | | 택배, 화물, 직송 등 |
+| `part_code` | 품목코드 | varchar | | 품목 코드 (FK) |
+| `part_name` | 품명 | varchar | | 품목명 |
+| `spec` | 규격 | varchar | | 규격 정보 |
+| `material` | 재질 | varchar | | 재질 정보 |
+| `order_qty` | 수주수량 | numeric | | 기본값 0 |
+| `ship_qty` | 출하수량 | numeric | | 기본값 0 |
+| `balance_qty` | 잔량 | numeric | | 기본값 0 (수주수량 - 출하수량) |
+| `inventory_qty` | 현재고 | numeric | | 기본값 0 |
+| `plan_ship_qty` | 출하계획량 | numeric | | 기본값 0 |
+| `unit_price` | 단가 | numeric | | 기본값 0 |
+| `total_amount` | 금액 | numeric | | 기본값 0 (수주수량 × 단가) |
+| `status` | 상태 | varchar | | 수주, 진행중, 완료, 취소 (기본값: 수주) |
+| `manager_id` | 담당자ID | varchar | | 담당자 ID |
+| `manager_name` | 담당자명 | varchar | | 담당자 이름 |
+| `memo` | 메모 | text | | 비고 |
+| `sales_type` | 영업유형 | varchar | | 내수, 수출 등 |
+| `part_name_eng` | 품명(영문) | varchar | | 영문 품목명 |
+| `item_due_date` | 품목납기일 | varchar | | 품목별 납기일 |
+| `incoterms` | 인코텀즈 | varchar | | 무역조건 (수출용) |
+| `payment_term` | 결제조건 | varchar | | 결제 조건 |
+| `port_of_loading` | 선적항 | varchar | | 선적 항구 (수출용) |
+| `port_of_discharge` | 도착항 | varchar | | 도착 항구 (수출용) |
+| `hs_code` | HS코드 | varchar | | 관세 코드 (수출용) |
+| `currency` | 통화 | varchar | | 통화 코드 |
+| `created_date` | 등록일 | timestamp | | 자동 생성 |
+| `created_by` | 등록자 | varchar | | 등록자 ID |
+| `updated_date` | 수정일 | timestamp | | 자동 갱신 |
+| `updated_by` | 수정자 | varchar | | 수정자 ID |
+| `writer` | 작성자 | varchar | | 작성자 ID |
+
+### 1.3 화면 구조 개요
+
+- **화면 유형**: 목록형 (단일 테이블 CRUD)
+- **주요 기능**: 
+  - 수주 조회/검색/필터링
+  - 수주 등록/수정/삭제
+  - 그룹핑 (Group By)
+  - 출하계획 연동
+  - 엑셀 업로드/다운로드
+  - 통계 표시 (총 금액, 총 수량)
+
+---
+
+## 2. 컴포넌트 배치도
+
+### 2.1 전체 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ [검색 영역]                                                                 │
+│ ┌─────────────────────────────────────────────────────────────────────────┐ │
+│ │ v2-table-search-widget                                                  │ │
+│ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐  │ │
+│ │ │ 수주번호  │ │ 거래처    │ │ 품목명    │ │ 상태      │ │ 수주일    │  │ │
+│ │ │ (text)    │ │ (select)  │ │ (text)    │ │ (select)  │ │ (date)    │  │ │
+│ │ └───────────┘ └───────────┘ └───────────┘ └───────────┘ └───────────┘  │ │
+│ │                                      ┌─────────┐ ┌──────────┐ ┌──────┐ │ │
+│ │                                      │ 사용자  │ │ 엑셀     │ │엑셀  │ │ │
+│ │                                      │ 옵션    │ │ 업로드   │ │다운  │ │ │
+│ │                                      └─────────┘ └──────────┘ └──────┘ │ │
+│ └─────────────────────────────────────────────────────────────────────────┘ │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ [테이블 헤더 + 액션 버튼 + 통계]                                            │
+│ ┌─────────────────────────────────────────────────────────────────────────┐ │
+│ │ 📋 수주 목록 (10)  총 금액: 1,234,000원  총 수량: 5,000개  [Group by ▼]│ │
+│ │                                      [수주등록][수정][삭제][출하계획]   │ │
+│ └─────────────────────────────────────────────────────────────────────────┘ │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ [데이터 테이블]                                                             │
+│ ┌─────────────────────────────────────────────────────────────────────────┐ │
+│ │ v2-table-list                                                           │ │
+│ │ ┌──┬────────┬────────┬────────┬────────┬──────┬──────┬──────┬────────┐ │ │
+│ │ │☐ │수주번호│거래처  │품목코드│품명    │규격  │재질  │단위  │수주수량│ │ │
+│ │ ├──┼────────┼────────┼────────┼────────┼──────┼──────┼──────┼────────┤ │ │
+│ │ │☐ │ORD-001 │삼성전자│ITEM001 │볼트 M8 │M8x20 │SUS304│EA    │1,000   │ │ │
+│ │ │☐ │ORD-002 │LG전자  │ITEM002 │너트 M8 │M8    │SUS304│EA    │2,000   │ │ │
+│ │ └──┴────────┴────────┴────────┴────────┴──────┴──────┴──────┴────────┘ │ │
+│ │ (수평 스크롤: 출하수량, 잔량, 현재고, 출하계획량, 단가, 금액, 납품처,  │ │
+│ │  납품장소, 배송방법, 납기일, 수주일, 상태, 담당자, 메모)                │ │
+│ └─────────────────────────────────────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 사용 가능한 V2 컴포넌트 목록
+
+> 📌 **V2 컴포넌트 전체 목록** - 화면 구성 시 사용 가능한 컴포넌트
+
+| 컴포넌트 ID | 설명 | 카테고리 |
+|-------------|------|----------|
+| `v2-input` | 텍스트, 숫자, 비밀번호, 이메일 등 입력 | 입력 |
+| `v2-select` | 드롭다운, 콤보박스, 라디오, 체크박스 | 입력 |
+| `v2-date` | 날짜/시간 입력 | 입력 |
+| `v2-button-primary` | 버튼 | 액션 |
+| `v2-table-list` | 테이블 리스트 (CRUD) | 테이블 |
+| `v2-table-search-widget` | 테이블 검색/필터 위젯 | 유틸리티 |
+| `v2-aggregation-widget` | 집계 위젯 | 위젯 |
+| `v2-text-display` | 텍스트 표시 (읽기 전용) | 표시 |
+
+### 2.3 이 화면에서 사용하는 컴포넌트
+
+| 컴포넌트 타입 | 역할 |
+|---------------|------|
+| `v2-table-search-widget` | 검색 필터 (수주번호, 거래처, 품목명, 상태, 수주일) |
+| `v2-table-list` | 수주 데이터 테이블 |
+| `v2-button-primary` | 사용자옵션 |
+| `v2-button-primary` | 엑셀 업로드 |
+| `v2-button-primary` | 엑셀 다운로드 |
+| `v2-button-primary` | 수주등록 (모달 열기) |
+| `v2-button-primary` | 수정 (모달 열기) |
+| `v2-button-primary` | 삭제 |
+| `v2-button-primary` | 출하계획 |
+| `v2-aggregation-widget` | 통계 표시 (총 금액, 총 수량) |
+| `v2-input` | 모달 - 텍스트 입력 필드 |
+| `v2-select` | 모달 - 선택 필드 |
+| `v2-date` | 모달 - 날짜 입력 필드 |
+
+---
+
+## 3. 화면 디자이너 설정 가이드
+
+### 3.1 v2-table-search-widget (검색 필터) 설정
+
+1. 좌측 컴포넌트 패널에서 `v2-table-search-widget` 드래그하여 화면 상단에 배치
+2. 대상 테이블로 아래에 배치할 테이블 리스트 선택
+
+> 💡 **참고**: 검색 필터는 사용자가 런타임에서 원하는 필드를 직접 추가/삭제하여 사용할 수 있습니다.
+
+---
+
+### 3.2 v2-table-list (수주 테이블) 설정
+
+#### Step 1: 컴포넌트 추가
+1. 좌측 컴포넌트 패널에서 `v2-table-list` 드래그하여 검색 필터 아래에 배치
+
+#### Step 2: 데이터 소스 설정
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 테이블 선택 | `sales_order_mng` |
+| 자동 컬럼 생성 | ✅ 체크 (테이블 컬럼 자동 로드) |
+
+#### Step 3: 컬럼 설정
+
+**[컬럼 설정]** 패널에서 표시할 컬럼 선택 및 순서 조정:
+
+| 순서 | 컬럼 | 표시명 | 너비 | 정렬 | 표시 | 특수 설정 |
+|------|------|--------|------|------|------|-----------|
+| 1 | `order_no` | 수주번호 | 130 | 좌측 | ✅ | 굵게 표시 |
+| 2 | `partner_id` | 거래처 | 150 | 좌측 | ✅ | 조인: customer_mng.name |
+| 3 | `part_code` | 품목코드 | 130 | 좌측 | ✅ | |
+| 4 | `part_name` | 품명 | 180 | 좌측 | ✅ | |
+| 5 | `spec` | 규격 | 120 | 좌측 | ✅ | |
+| 6 | `material` | 재질 | 100 | 좌측 | ✅ | |
+| 7 | `unit` | 단위 | 80 | 중앙 | ✅ | 기본값: EA |
+| 8 | `order_qty` | 수주수량 | 100 | 우측 | ✅ | 숫자 포맷 |
+| 9 | `ship_qty` | 출하수량 | 100 | 우측 | ✅ | 숫자 포맷 |
+| 10 | `balance_qty` | 잔량 | 100 | 우측 | ✅ | 숫자 포맷, 굵게 |
+| 11 | `inventory_qty` | 현재고 | 100 | 우측 | ✅ | 숫자 포맷 |
+| 12 | `plan_ship_qty` | 출하계획량 | 100 | 우측 | ✅ | 숫자 포맷 |
+| 13 | `unit_price` | 단가 | 120 | 우측 | ✅ | 숫자 포맷 |
+| 14 | `total_amount` | 금액 | 140 | 우측 | ✅ | 숫자 포맷, 굵게 |
+| 15 | `delivery_partner_id` | 납품처 | 150 | 좌측 | ✅ | |
+| 16 | `delivery_address` | 납품장소 | 150 | 좌측 | ✅ | |
+| 17 | `shipping_method` | 배송방법 | 120 | 중앙 | ✅ | |
+| 18 | `due_date` | 납기일 | 120 | 중앙 | ✅ | 날짜 포맷 |
+| 19 | `order_date` | 수주일 | 120 | 중앙 | ✅ | 날짜 포맷 |
+| 20 | `status` | 상태 | 100 | 중앙 | ✅ | 뱃지 스타일 |
+| 21 | `manager_name` | 담당자 | 100 | 좌측 | ✅ | |
+| 22 | `memo` | 메모 | 200 | 좌측 | ✅ | |
+
+#### Step 4: 기능 설정
+
+| 설정 항목 | 설정 값 | 설명 |
+|-----------|---------|------|
+| 체크박스 | ✅ 사용 | 다중 선택 활성화 |
+| 페이지네이션 | ✅ 사용 | |
+| 페이지 크기 | 20 | 기본 표시 행 수 |
+| 정렬 | ✅ 사용 | 컬럼 헤더 클릭 정렬 |
+| 컬럼 리사이즈 | ✅ 사용 | 컬럼 너비 조정 |
+| 그룹핑 | ✅ 사용 | Group By 기능 |
+| 수평 스크롤 | ✅ 사용 | 컬럼 수가 많으므로 필수 |
+
+#### Step 5: 그룹핑 옵션 설정
+
+Group By 드롭다운에 표시할 컬럼 선택:
+- ✅ `partner_id` (거래처)
+- ✅ `status` (상태)
+- ✅ `part_name` (품목명)
+- ✅ `material` (재질)
+
+---
+
+### 3.3 버튼 설정
+
+#### 검색 영역 우측 버튼
+
+##### 사용자옵션 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `사용자옵션` |
+| 아이콘 | ⚙️ |
+| 액션 타입 | `custom` |
+| 스타일 | `secondary` |
+| 동작 | 사용자 옵션 모달 열기 |
+
+##### 엑셀 업로드 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `엑셀 업로드` |
+| 아이콘 | 📥 |
+| 액션 타입 | `excel_upload` |
+| 스타일 | `secondary` |
+| 대상 테이블 | `sales_order_mng` |
+
+##### 엑셀 다운로드 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `엑셀 다운로드` |
+| 아이콘 | 📤 |
+| 액션 타입 | `excel_download` |
+| 스타일 | `secondary` |
+| 대상 | 현재 테이블 리스트 |
+
+#### 테이블 헤더 우측 버튼
+
+##### 수주등록 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `수주 등록` |
+| 아이콘 | ➕ |
+| 액션 타입 | `modal` |
+| 스타일 | `success` |
+| 연결 화면 | 수주 등록/수정 화면 (아래 3.4 참조) |
+| 모달 제목 | 수주 등록 |
+| 모달 사이즈 | `lg` |
+
+##### 수정 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `수정` |
+| 아이콘 | ✏️ |
+| 액션 타입 | `edit` |
+| 스타일 | `secondary` |
+| 선택 필수 | ✅ 체크 (1개만) |
+| 연결 화면 | 수주 등록/수정 화면 (아래 3.4 참조) |
+
+##### 삭제 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `삭제` |
+| 아이콘 | 🗑️ |
+| 액션 타입 | `delete` |
+| 스타일 | `secondary` |
+| 선택 필수 | ✅ 체크 (복수 선택 가능) |
+| 확인 메시지 | 선택한 수주를 삭제하시겠습니까? |
+
+##### 출하계획 버튼
+
+| 설정 항목 | 설정 값 |
+|-----------|---------|
+| 라벨 | `출하계획` |
+| 아이콘 | 🚚 |
+| 액션 타입 | `custom` |
+| 스타일 | `secondary` |
+| 선택 필수 | ✅ 체크 (복수 선택 가능) |
+| 동작 | 출하계획 슬라이드 패널 열기 |
+
+---
+
+### 3.4 수주 등록/수정 화면 (모달용 화면)
+
+> 📌 **별도 화면 생성 필요**: 수주등록/수정 버튼에 연결할 모달 화면을 새로 생성합니다.
+
+#### Step 1: 새 화면 생성
+
+1. 화면 관리에서 **[+ 새 화면]** 클릭
+2. 화면 정보 입력:
+   - 화면명: `수주 등록/수정`
+   - 테이블: `sales_order_mng`
+   - 화면 유형: `모달`
+
+#### Step 2: 폼 필드 배치
+
+**모달 레이아웃 배치도**:
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ 수주 등록/수정                                             [✕] │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 수주번호 *              │ │ 수주일 *                │       │
+│  │ [____________________]  │ │ [____________________]  │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 거래처 *                │ │ 품목코드 *              │       │
+│  │ [삼성전자       ▼]     │ │ [____________________]  │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 품명                    │ │ 규격                    │       │
+│  │ [____________________]  │ │ [____________________]  │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 재질                    │ │ 단위                    │       │
+│  │ [____________________]  │ │ [EA           ▼]       │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 수주수량 *              │ │ 단가 *                  │       │
+│  │ [____________________]  │ │ [____________________]  │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 납기일                  │ │ 상태 *                  │       │
+│  │ [____________________]  │ │ [수주           ▼]     │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 납품처                  │ │ 납품장소                │       │
+│  │ [____________________]  │ │ [____________________]  │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────┐ ┌─────────────────────────┐       │
+│  │ 배송방법                │ │ 담당자                  │       │
+│  │ [택배           ▼]     │ │ [____________________]  │       │
+│  └─────────────────────────┘ └─────────────────────────┘       │
+│                                                                 │
+│  ┌─────────────────────────────────────────────────────────┐   │
+│  │ 메모                                                    │   │
+│  │ [______________________________________________________]│   │
+│  └─────────────────────────────────────────────────────────┘   │
+│                                                                 │
+├─────────────────────────────────────────────────────────────────┤
+│                                  [취소]  [💾 저장]              │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**필드 목록**:
+
+| 순서 | 필드 (컬럼명) | 라벨 | 입력 타입 | 필수 | 비고 |
+|------|---------------|------|-----------|------|------|
+| 1 | `order_no` | 수주번호 | text | ✅ | 자동채번 또는 수동입력 |
+| 2 | `order_date` | 수주일 | date | ✅ | 기본값: 오늘 |
+| 3 | `partner_id` | 거래처 | select | ✅ | 거래처 목록에서 선택 |
+| 4 | `part_code` | 품목코드 | text | ✅ | 품목 검색 |
+| 5 | `part_name` | 품명 | text | | 품목코드 선택 시 자동 입력 |
+| 6 | `spec` | 규격 | text | | 품목코드 선택 시 자동 입력 |
+| 7 | `material` | 재질 | text | | |
+| 8 | `unit` | 단위 | select | | 옵션: EA, kg, L, Box 등 |
+| 9 | `order_qty` | 수주수량 | number | ✅ | |
+| 10 | `unit_price` | 단가 | number | ✅ | |
+| 11 | `due_date` | 납기일 | date | | |
+| 12 | `status` | 상태 | select | ✅ | 옵션: 수주, 진행중, 완료, 취소 |
+| 13 | `delivery_partner_id` | 납품처 | text | | |
+| 14 | `delivery_address` | 납품장소 | text | | |
+| 15 | `shipping_method` | 배송방법 | select | | 옵션: 택배, 화물, 직송, 퀵서비스 등 |
+| 16 | `manager_name` | 담당자 | text | | |
+| 17 | `memo` | 메모 | textarea | | |
+
+#### Step 3: 버튼 배치
+
+| 버튼 | 액션 타입 | 스타일 | 설정 |
+|------|-----------|--------|------|
+| 저장 | `저장` | primary | 저장 후 모달 닫기, 부모 화면 테이블 새로고침 |
+| 취소 | `모달 닫기` | secondary | |
+
+---
+
+## 4. 컴포넌트 연동 설정
+
+### 4.1 이벤트 흐름
+
+```
+[검색 입력]
+    │
+    ▼
+v2-table-search-widget
+    │ onFilterChange
+    ▼
+v2-table-list (자동 재조회)
+    │
+    ▼
+[데이터 표시]
+    │
+    ▼
+v2-aggregation-widget (통계 업데이트)
+
+
+[수주등록/수정 버튼 클릭]
+    │
+    ▼
+[모달 열기] → [폼 입력] → [저장]
+    │                        │
+    │                        ▼
+    │                   refreshTable 이벤트
+    │                        │
+    └────────────────────────┘
+                             │
+                             ▼
+                    v2-table-list (재조회)
+                             │
+                             ▼
+                    v2-aggregation-widget (통계 업데이트)
+```
+
+### 4.2 연동 설정
+
+| 소스 컴포넌트 | 이벤트/액션 | 대상 컴포넌트 | 동작 |
+|---------------|-------------|---------------|------|
+| 검색 위젯 | onFilterChange | 테이블 리스트 | 필터 적용, 재조회 |
+| 테이블 리스트 | onDataChange | 집계 위젯 | 통계 업데이트 |
+| 수주등록 버튼 | click | 모달 | 빈 폼으로 모달 열기 |
+| 수정 버튼 | click | 모달 | 선택 데이터가 채워진 폼 열기 (수정) |
+| 삭제 버튼 | click | 테이블 리스트 | 선택 항목 삭제 |
+| 출하계획 버튼 | click | 슬라이드 패널 | 선택 항목 기반 출하계획 생성 |
+| 모달 저장 | afterSave | 테이블 리스트 | refreshTable |
+
+---
+
+## 5. 사용자 사용 예시 시나리오
+
+### 시나리오 1: 수주 조회
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 화면 진입 | 전체 수주 목록 표시, 통계(총 금액, 총 수량) 표시 |
+| 2 | 거래처 필터를 "삼성전자"로 선택 | 자동 필터링, 통계 업데이트 |
+| 3 | 상태를 "진행중"으로 선택 | 추가 필터링 |
+| 4 | Group by에서 "거래처" 선택 | 거래처별 그룹핑 표시 |
+
+### 시나리오 2: 수주 등록
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | [수주 등록] 버튼 클릭 | 빈 폼 모달 표시 |
+| 2 | 거래처 선택, 품목코드 입력 | 품명, 규격 자동 입력 |
+| 3 | 수주수량, 단가 입력 | 금액 자동 계산 |
+| 4 | [저장] 버튼 클릭 | 저장 완료, 모달 닫힘, 목록 갱신, 통계 업데이트 |
+
+### 시나리오 3: 수주 수정
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 테이블에서 행 체크박스 선택 | 행 선택 표시 |
+| 2 | [수정] 버튼 클릭 | 수정 모달 표시 (기존 데이터 로드) |
+| 3 | 데이터 수정 | 필드 값 변경 |
+| 4 | [저장] 버튼 클릭 | 저장 완료, 목록 갱신 |
+
+### 시나리오 4: 수주 삭제
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 삭제할 행 체크박스 선택 (다중 가능) | 행 선택 표시 |
+| 2 | [삭제] 버튼 클릭 | 삭제 확인 다이얼로그 표시 |
+| 3 | 확인 | 삭제 완료, 목록 갱신, 통계 업데이트 |
+
+### 시나리오 5: 출하계획 생성
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 출하할 수주 행 체크박스 선택 (다중) | 행 선택 표시 |
+| 2 | [출하계획] 버튼 클릭 | 출하계획 슬라이드 패널 열림 |
+| 3 | 출하 수량 입력, 출하일 선택 | 출하계획 데이터 설정 |
+| 4 | [적용] 버튼 클릭 | 출하계획 저장, 수주 데이터 업데이트 |
+
+---
+
+## 6. 검증 체크리스트
+
+### 기본 기능
+- [ ] 데이터 조회가 정상 동작하는가?
+- [ ] 검색 필터 (수주번호, 거래처, 품목명, 상태, 수주일)가 정상 동작하는가?
+- [ ] 신규 등록이 정상 동작하는가?
+- [ ] 수정이 정상 동작하는가?
+- [ ] 삭제가 정상 동작하는가?
+- [ ] 엑셀 업로드가 정상 동작하는가?
+- [ ] 엑셀 다운로드가 정상 동작하는가?
+
+### 테이블 기능
+- [ ] 페이지네이션이 정상 동작하는가?
+- [ ] 정렬이 정상 동작하는가?
+- [ ] 컬럼 너비 조정이 정상 동작하는가?
+- [ ] 체크박스 선택이 정상 동작하는가?
+- [ ] 수평 스크롤이 정상 동작하는가?
+
+### 검색 위젯 연동
+- [ ] v2-table-search-widget과 v2-table-list 연동이 정상 동작하는가?
+- [ ] 필터 변경 시 자동 재조회가 동작하는가?
+- [ ] 초기화 버튼이 정상 동작하는가?
+
+### 그룹핑 기능
+- [ ] Group by 선택 시 그룹핑이 정상 동작하는가?
+- [ ] 그룹 헤더에 건수, 수량, 금액이 표시되는가?
+- [ ] 그룹 접기/펼치기가 정상 동작하는가?
+
+### 통계 기능
+- [ ] 총 금액이 정확히 계산되는가?
+- [ ] 총 수량이 정확히 계산되는가?
+- [ ] 필터링 시 통계가 업데이트되는가?
+
+### 출하계획 연동
+- [ ] 선택한 수주를 기반으로 출하계획을 생성할 수 있는가?
+- [ ] 출하계획 적용 후 수주 데이터가 업데이트되는가?
+
+---
+
+## 7. 참고 사항
+
+### 관련 테이블
+- `customer_mng` - 거래처 정보 (partner_id 참조)
+- `item_info` - 품목 정보 (part_code 참조)
+- `sales_order_detail` - 수주 상세 (다중 품목 관리 시)
+- `shipment_mng` - 출하 정보 (출하계획 연동)
+
+### 특이 사항
+- `partner_id`는 거래처 테이블의 ID를 참조 (조인 필요)
+- `balance_qty` = `order_qty` - `ship_qty` (잔량 자동 계산)
+- `total_amount` = `order_qty` × `unit_price` (금액 자동 계산)
+- 상태별 뱃지 색상:
+  - 수주: 파란색 (#dbeafe, #1e40af)
+  - 진행중: 노란색 (#fef3c7, #92400e)
+  - 완료: 초록색 (#d1fae5, #065f46)
+  - 취소: 빨간색 (#fee2e2, #991b1b)
+- 수출용 필드: incoterms, payment_term, port_of_loading, port_of_discharge, hs_code, currency
+
+---
+
+## 8. DB INSERT용 JSON 설정 (screen_layouts_v2 방식)
+
+> 📌 실제 화면 저장은 `screen_definitions` + `screen_layouts_v2` 테이블을 사용합니다.
+
+> ⚠️ **주의: 아래 JSON은 "수주관리" 화면 전용 예시입니다!**
+
+### 8.1 화면 정의 (screen_definitions)
+
+**필수 입력 필드:**
+
+```json
+{
+  "screenName": "수주관리",
+  "tableName": "sales_order_mng",
+  "companyCode": "COMPANY_7",
+  "description": "수주 관리 화면"
+}
+```
+
+### 8.2 레이아웃 데이터 (screen_layouts_v2.layout_data)
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_search",
+      "url": "@/lib/registry/components/v2-table-search-widget",
+      "size": { "width": 1920, "height": 80 },
+      "position": { "x": 0, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-table-search-widget",
+        "label": "검색 필터",
+        "webTypeConfig": {}
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_table",
+      "url": "@/lib/registry/components/v2-table-list",
+      "size": { "width": 1920, "height": 800 },
+      "position": { "x": 0, "y": 150, "z": 1 },
+      "overrides": {
+        "type": "v2-table-list",
+        "label": "수주 목록",
+        "filter": { "enabled": true, "filters": [] },
+        "height": "auto",
+        "actions": { "actions": [], "bulkActions": false, "showActions": false },
+        "columns": [
+          { "align": "left", "order": 0, "format": "text", "visible": true, "sortable": true, "columnName": "order_no", "searchable": true, "displayName": "수주번호" },
+          { "align": "left", "order": 1, "format": "text", "visible": true, "sortable": true, "columnName": "partner_id", "searchable": true, "displayName": "거래처" },
+          { "align": "left", "order": 2, "format": "text", "visible": true, "sortable": true, "columnName": "part_code", "searchable": true, "displayName": "품목코드" },
+          { "align": "left", "order": 3, "format": "text", "visible": true, "sortable": true, "columnName": "part_name", "searchable": true, "displayName": "품명" },
+          { "align": "left", "order": 4, "format": "text", "visible": true, "sortable": true, "columnName": "spec", "searchable": true, "displayName": "규격" },
+          { "align": "left", "order": 5, "format": "text", "visible": true, "sortable": true, "columnName": "material", "searchable": true, "displayName": "재질" },
+          { "align": "right", "order": 6, "format": "number", "visible": true, "sortable": true, "columnName": "order_qty", "searchable": false, "displayName": "수주수량" },
+          { "align": "right", "order": 7, "format": "number", "visible": true, "sortable": true, "columnName": "ship_qty", "searchable": false, "displayName": "출하수량" },
+          { "align": "right", "order": 8, "format": "number", "visible": true, "sortable": true, "columnName": "balance_qty", "searchable": false, "displayName": "잔량" },
+          { "align": "right", "order": 9, "format": "number", "visible": true, "sortable": true, "columnName": "inventory_qty", "searchable": false, "displayName": "현재고" },
+          { "align": "right", "order": 10, "format": "number", "visible": true, "sortable": true, "columnName": "plan_ship_qty", "searchable": false, "displayName": "출하계획량" },
+          { "align": "right", "order": 11, "format": "number", "visible": true, "sortable": true, "columnName": "unit_price", "searchable": false, "displayName": "단가" },
+          { "align": "right", "order": 12, "format": "number", "visible": true, "sortable": true, "columnName": "total_amount", "searchable": false, "displayName": "금액" },
+          { "align": "left", "order": 13, "format": "text", "visible": true, "sortable": true, "columnName": "delivery_partner_id", "searchable": true, "displayName": "납품처" },
+          { "align": "left", "order": 14, "format": "text", "visible": true, "sortable": true, "columnName": "delivery_address", "searchable": true, "displayName": "납품장소" },
+          { "align": "center", "order": 15, "format": "text", "visible": true, "sortable": true, "columnName": "shipping_method", "searchable": true, "displayName": "배송방법" },
+          { "align": "center", "order": 16, "format": "date", "visible": true, "sortable": true, "columnName": "due_date", "searchable": false, "displayName": "납기일" },
+          { "align": "center", "order": 17, "format": "date", "visible": true, "sortable": true, "columnName": "order_date", "searchable": false, "displayName": "수주일" },
+          { "align": "center", "order": 18, "format": "text", "visible": true, "sortable": true, "columnName": "status", "searchable": true, "displayName": "상태" },
+          { "align": "left", "order": 19, "format": "text", "visible": true, "sortable": true, "columnName": "manager_name", "searchable": true, "displayName": "담당자" },
+          { "align": "left", "order": 20, "format": "text", "visible": true, "sortable": true, "columnName": "memo", "searchable": true, "displayName": "메모" }
+        ],
+        "autoLoad": true,
+        "checkbox": { "enabled": true, "multiple": true, "position": "left", "selectAll": true },
+        "pagination": { "enabled": true, "pageSize": 20, "showPageInfo": true, "pageSizeOptions": [10, 20, 50, 100], "showSizeSelector": true },
+        "showFooter": true,
+        "showHeader": true,
+        "tableStyle": { "theme": "default", "rowHeight": "normal", "borderStyle": "light", "headerStyle": "default", "hoverEffect": true, "alternateRows": true },
+        "displayMode": "table",
+        "stickyHeader": false,
+        "selectedTable": "sales_order_mng",
+        "webTypeConfig": {},
+        "horizontalScroll": { "enabled": true, "maxColumnWidth": 300, "minColumnWidth": 80, "maxVisibleColumns": 10 }
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_btn_user_options",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1500, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "사용자옵션",
+        "type": "v2-button-primary",
+        "label": "사용자옵션 버튼",
+        "action": { "type": "custom" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_btn_upload",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1610, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "엑셀 업로드",
+        "type": "v2-button-primary",
+        "label": "엑셀 업로드 버튼",
+        "action": { "type": "excel_upload" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_btn_download",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1720, "y": 30, "z": 1 },
+      "overrides": {
+        "text": "엑셀 다운로드",
+        "type": "v2-button-primary",
+        "label": "엑셀 다운로드 버튼",
+        "action": { "type": "excel_download" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_btn_register",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1500, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "수주 등록",
+        "type": "v2-button-primary",
+        "label": "수주 등록 버튼",
+        "action": {
+          "type": "modal",
+          "modalSize": "lg",
+          "modalTitle": "수주 등록",
+          "targetScreenId": "{{modal_screen_id}}",
+          "successMessage": "저장되었습니다.",
+          "errorMessage": "저장 중 오류가 발생했습니다."
+        },
+        "variant": "success",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "default", "actionType": "custom" }
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_btn_edit",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1610, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "수정",
+        "type": "v2-button-primary",
+        "label": "수정 버튼",
+        "action": {
+          "type": "edit",
+          "modalSize": "lg",
+          "modalTitle": "수주 수정",
+          "targetScreenId": "{{modal_screen_id}}",
+          "successMessage": "수정되었습니다.",
+          "errorMessage": "수정 중 오류가 발생했습니다."
+        },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_btn_delete",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1700, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "삭제",
+        "type": "v2-button-primary",
+        "label": "삭제 버튼",
+        "action": {
+          "type": "delete",
+          "successMessage": "삭제되었습니다.",
+          "errorMessage": "삭제 중 오류가 발생했습니다."
+        },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "comp_btn_shipment",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1790, "y": 100, "z": 1 },
+      "overrides": {
+        "text": "출하계획",
+        "type": "v2-button-primary",
+        "label": "출하계획 버튼",
+        "action": { "type": "custom" },
+        "variant": "secondary",
+        "actionType": "button",
+        "webTypeConfig": { "variant": "secondary", "actionType": "custom" }
+      },
+      "displayOrder": 8
+    }
+  ]
+}
+```
+
+### 8.3 모달 화면 (수주 등록/수정)
+
+#### 화면 정의 (필수 입력)
+
+```json
+{
+  "screenName": "수주 등록/수정",
+  "tableName": "sales_order_mng",
+  "companyCode": "COMPANY_7",
+  "description": "수주 등록/수정 폼 화면"
+}
+```
+
+#### 레이아웃 데이터 (screen_layouts_v2.layout_data)
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_order_no",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "수주번호",
+        "fieldName": "order_no",
+        "placeholder": "수주번호를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_order_date",
+      "url": "@/lib/registry/components/v2-date",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-date",
+        "label": "수주일",
+        "fieldName": "order_date",
+        "required": true
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_partner_id",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "거래처",
+        "fieldName": "partner_id",
+        "required": true,
+        "config": {
+          "mode": "dropdown",
+          "source": "table",
+          "sourceTable": "customer_mng",
+          "valueField": "id",
+          "labelField": "name"
+        }
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_part_code",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 100, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "품목코드",
+        "fieldName": "part_code",
+        "placeholder": "품목코드를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_part_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "품명",
+        "fieldName": "part_name",
+        "placeholder": "품명을 입력하세요"
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_spec",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 180, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "규격",
+        "fieldName": "spec",
+        "placeholder": "규격을 입력하세요"
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "comp_material",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "재질",
+        "fieldName": "material",
+        "placeholder": "재질을 입력하세요"
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "comp_order_qty",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 260, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "number",
+        "label": "수주수량",
+        "fieldName": "order_qty",
+        "placeholder": "수주수량을 입력하세요",
+        "required": true
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "comp_unit_price",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "number",
+        "label": "단가",
+        "fieldName": "unit_price",
+        "placeholder": "단가를 입력하세요",
+        "required": true
+      },
+      "displayOrder": 8
+    },
+    {
+      "id": "comp_due_date",
+      "url": "@/lib/registry/components/v2-date",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 340, "z": 1 },
+      "overrides": {
+        "type": "v2-date",
+        "label": "납기일",
+        "fieldName": "due_date"
+      },
+      "displayOrder": 9
+    },
+    {
+      "id": "comp_status",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 420, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "상태",
+        "fieldName": "status",
+        "required": true,
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "수주", "label": "수주" },
+            { "value": "진행중", "label": "진행중" },
+            { "value": "완료", "label": "완료" },
+            { "value": "취소", "label": "취소" }
+          ]
+        }
+      },
+      "displayOrder": 10
+    },
+    {
+      "id": "comp_shipping_method",
+      "url": "@/lib/registry/components/v2-select",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 340, "y": 420, "z": 1 },
+      "overrides": {
+        "type": "v2-select",
+        "label": "배송방법",
+        "fieldName": "shipping_method",
+        "config": {
+          "mode": "dropdown",
+          "source": "static",
+          "options": [
+            { "value": "택배", "label": "택배" },
+            { "value": "화물", "label": "화물" },
+            { "value": "직송", "label": "직송" },
+            { "value": "퀵서비스", "label": "퀵서비스" },
+            { "value": "해상운송", "label": "해상운송" }
+          ]
+        }
+      },
+      "displayOrder": 11
+    },
+    {
+      "id": "comp_delivery_address",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 620, "height": 60 },
+      "position": { "x": 20, "y": 500, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "납품장소",
+        "fieldName": "delivery_address",
+        "placeholder": "납품장소를 입력하세요"
+      },
+      "displayOrder": 12
+    },
+    {
+      "id": "comp_manager_name",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 300, "height": 60 },
+      "position": { "x": 20, "y": 580, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "label": "담당자",
+        "fieldName": "manager_name",
+        "placeholder": "담당자를 입력하세요"
+      },
+      "displayOrder": 13
+    },
+    {
+      "id": "comp_memo",
+      "url": "@/lib/registry/components/v2-input",
+      "size": { "width": 620, "height": 80 },
+      "position": { "x": 20, "y": 660, "z": 1 },
+      "overrides": {
+        "type": "v2-input",
+        "inputType": "textarea",
+        "label": "메모",
+        "fieldName": "memo",
+        "placeholder": "메모를 입력하세요"
+      },
+      "displayOrder": 14
+    },
+    {
+      "id": "comp_btn_save",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 540, "y": 760, "z": 1 },
+      "overrides": {
+        "text": "저장",
+        "type": "v2-button-primary",
+        "label": "저장 버튼",
+        "action": {
+          "type": "save",
+          "closeModalAfterSave": true,
+          "refreshParentTable": true,
+          "successMessage": "저장되었습니다.",
+          "errorMessage": "저장 중 오류가 발생했습니다."
+        },
+        "variant": "primary",
+        "actionType": "button"
+      },
+      "displayOrder": 15
+    }
+  ]
+}
+```
+
+### 8.4 화면 생성 순서 (중요!)
+
+```
+1. 모달 화면 생성 (screen_definitions INSERT)
+      │
+      ▼
+2. 모달 레이아웃 저장 (screen_layouts_v2 INSERT)
+      │
+      ▼
+3. 메인 화면 생성 (screen_definitions INSERT)
+      │
+      ▼
+4. 메인 레이아웃 저장 (screen_layouts_v2 INSERT)
+   └── targetScreenId에 모달 screen_id 사용!
+      │
+      ▼
+5. (선택) 메뉴에 화면 연결
+```
+
+---
+
+## 9. 화면 구현 체크리스트
+
+> 📋 새로운 화면을 구현할 때 아래 체크리스트를 순서대로 확인하세요.
+
+### 9.1 분석 단계
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **테이블 구조 분석** | `sales_order_mng` 테이블 스키마 확인 완료 |
+| ☐ | **화면 기능 파악** | 조회/등록/수정/삭제, 검색, 필터, 그룹핑, 출하계획 연동 |
+| ☐ | **컴포넌트 매핑** | 필요 기능 → V2 컴포넌트 매핑 완료 |
+| ☐ | **구현 불가 항목 확인** | 현재 V2 컴포넌트로 구현 가능 |
+
+### 9.2 INSERT 후 검증
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **화면 접속 테스트** | `/screens/{screen_id}` URL로 접속 |
+| ☐ | **컴포넌트 렌더링 확인** | 모든 컴포넌트가 정상 표시되는지 확인 |
+| ☐ | **검색 기능 테스트** | 검색 위젯 동작 확인 |
+| ☐ | **테이블 데이터 로드** | 테이블에 데이터 표시되는지 확인 |
+| ☐ | **버튼 동작 테스트** | 등록/수정/삭제/출하계획 버튼 동작 확인 |
+| ☐ | **모달 폼 테스트** | 모달 열림, 입력 필드 표시, 저장 동작 확인 |
+| ☐ | **통계 업데이트** | 총 금액, 총 수량이 정확히 표시되는지 확인 |
+
+---
+
+## 10. 메뉴에 화면 연결하기
+
+> 📋 화면 생성 후, 특정 메뉴에 연결하여 사용자가 접근할 수 있도록 설정합니다.
+
+### 10.1 메뉴 연결 절차
+
+```
+1. 대상 메뉴 찾기 (menu_info 테이블에서 objid 확인)
+      │
+      ▼
+2. screen_menu_assignments 테이블에 할당 레코드 INSERT
+      │
+      ▼
+3. menu_info 테이블의 menu_url, screen_code 업데이트
+      │
+      ▼
+4. 연결 결과 확인
+```
+
+### 10.2 메뉴 찾기
+
+```sql
+-- 메뉴 이름으로 검색
+SELECT objid, menu_name_kor, menu_url, screen_code, company_code
+FROM menu_info 
+WHERE menu_name_kor = '55566'  -- 메뉴 이름
+  AND company_code = 'COMPANY_19';  -- 회사 코드
+
+-- 결과 예시:
+-- objid: 1769415229091
+```
+
+### 10.3 기존 할당 확인 및 제거 (중복 방지)
+
+> ⚠️ **중요**: 새 화면을 할당하기 전에 해당 메뉴에 이미 할당된 화면이 있는지 확인해야 합니다. 중복 할당 시 화면이 정상적으로 표시되지 않을 수 있습니다.
+
+```sql
+-- 1. 해당 메뉴에 이미 할당된 화면 확인
+SELECT 
+    sma.assignment_id, 
+    sma.screen_id, 
+    sd.screen_name, 
+    sd.screen_code
+FROM screen_menu_assignments sma
+JOIN screen_definitions sd ON sma.screen_id = sd.screen_id
+WHERE sma.menu_objid = '1769415229091';  -- 대상 메뉴 objid
+
+-- 2. 기존 할당이 있다면 삭제
+DELETE FROM screen_menu_assignments 
+WHERE menu_objid = '1769415229091';  -- 모든 기존 할당 삭제
+
+-- 또는 특정 화면만 남기고 삭제
+DELETE FROM screen_menu_assignments 
+WHERE menu_objid = '1769415229091' 
+  AND screen_id != 3733;  -- 3733(수주관리)만 남기고 삭제
+```
+
+### 10.4 화면-메뉴 할당 INSERT
+
+```sql
+-- screen_menu_assignments에 할당 레코드 추가
+INSERT INTO screen_menu_assignments (
+    screen_id, 
+    menu_objid, 
+    company_code, 
+    display_order, 
+    is_active, 
+    created_date
+) VALUES (
+    3733,                -- 메인 화면의 screen_id
+    '1769415229091',     -- menu_info의 objid (문자열로 저장)
+    'COMPANY_19',        -- 회사 코드
+    1,                   -- 표시 순서
+    'Y',                 -- 활성화 여부
+    NOW()
+) RETURNING assignment_id;
+```
+
+### 10.6 메뉴 URL 및 screen_code 업데이트 (필수!)
+
+> ⚠️ **중요**: `screen_menu_assignments`에 레코드를 추가해도 `menu_info`의 `menu_url`과 `screen_code`를 업데이트하지 않으면 메뉴 클릭 시 화면이 표시되지 않습니다.
+
+```sql
+-- menu_info 테이블의 menu_url, screen_code 업데이트
+UPDATE menu_info 
+SET menu_url = '/screens/3733',           -- 화면 URL
+    screen_code = 'COMPANY_19_SO_MAIN'    -- 화면 코드
+WHERE objid = 1769415229091;
+```
+
+### 10.7 연결 확인
+
+```sql
+-- 메뉴-화면 연결 상태 확인
+SELECT 
+    mi.objid,
+    mi.menu_name_kor,
+    mi.menu_url,
+    mi.screen_code,
+    sd.screen_id,
+    sd.screen_name
+FROM menu_info mi
+JOIN screen_definitions sd ON mi.screen_code = sd.screen_code
+WHERE mi.objid = 1769415229091;
+
+-- 예상 결과:
+-- objid: 1769415229091
+-- menu_name_kor: 55566
+-- menu_url: /screens/3733
+-- screen_code: COMPANY_19_SO_MAIN
+-- screen_id: 3733
+-- screen_name: 수주관리
+```
+
+### 10.8 전체 SQL 예시 (수주관리 화면 → 55566 메뉴)
+
+```sql
+-- 1. 메뉴 찾기
+SELECT objid, menu_name_kor FROM menu_info 
+WHERE menu_name_kor = '55566' AND company_code = 'COMPANY_19';
+-- 결과: objid = 1769415229091
+
+-- 2. 기존 할당 확인 및 삭제 (중복 방지!)
+SELECT sma.assignment_id, sma.screen_id, sd.screen_name 
+FROM screen_menu_assignments sma
+JOIN screen_definitions sd ON sma.screen_id = sd.screen_id
+WHERE sma.menu_objid = '1769415229091';
+
+-- 기존 할당이 있다면 삭제
+DELETE FROM screen_menu_assignments 
+WHERE menu_objid = '1769415229091';
+
+-- 3. 새 화면 할당
+INSERT INTO screen_menu_assignments (screen_id, menu_objid, company_code, display_order, is_active, created_date)
+VALUES (3733, '1769415229091', 'COMPANY_19', 1, 'Y', NOW());
+
+-- 4. 메뉴 URL 업데이트 (필수!)
+UPDATE menu_info 
+SET menu_url = '/screens/3733', 
+    screen_code = 'COMPANY_19_SO_MAIN'
+WHERE objid = 1769415229091;
+```
+
+### 10.9 메뉴 연결 체크리스트
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **대상 메뉴 확인** | `menu_info`에서 메뉴 objid 확인 |
+| ☐ | **기존 할당 확인** | `screen_menu_assignments`에서 중복 할당 여부 확인 |
+| ☐ | **기존 할당 삭제** | 중복 할당이 있다면 기존 레코드 DELETE |
+| ☐ | **새 화면 할당 INSERT** | `screen_menu_assignments` 테이블에 새 레코드 추가 |
+| ☐ | **menu_url 업데이트** | `/screens/{screen_id}` 형식으로 업데이트 |
+| ☐ | **screen_code 업데이트** | 화면의 screen_code로 업데이트 |
+| ☐ | **메뉴 클릭 테스트** | 해당 회사로 로그인하여 메뉴 클릭 시 화면 표시 확인 |
diff --git a/docs/screen-implementation-guide/02_sales/quote.md b/docs/screen-implementation-guide/02_sales/quote.md
new file mode 100644
index 00000000..eac09315
--- /dev/null
+++ b/docs/screen-implementation-guide/02_sales/quote.md
@@ -0,0 +1,308 @@
+# 견적관리 화면 구현 가이드
+
+> **화면명**: 견적관리
+> **파일**: 견적관리.html
+> **분류**: 영업관리
+> **구현 가능**: ✅ 완전 (현재 V2 컴포넌트)
+
+---
+
+## 1. 화면 개요
+
+견적서 생성 및 관리 화면으로, 고객 요청에 대한 견적을 작성하고 수주로 전환합니다.
+
+### 핵심 기능
+- 견적 목록 조회/검색
+- 견적 등록/수정/삭제
+- 견적 상세 및 품목 내역 관리
+- 견적서 인쇄/PDF 출력
+- 수주 전환
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [기간] [거래처] [견적번호] [품목명] [상태▼] [초기화][조회]        │
+│                                          [사용자옵션][업로드][다운로드]│
+├───────────────────────┬─────────────────────────────────────────┤
+│ 📋 견적 목록            │ 📄 견적 상세                            │
+│ ───────────────       │ [인쇄] [복사] [수주전환] [수정] [삭제]   │
+│ [신규등록]             │ ─────────────────────────               │
+│ ┌──────────────────┐  │ 견적번호: QT-2026-0001                  │
+│ │견적번호|거래처|금액..│  │ 거래처: (주)테스트                      │
+│ │QT-001 |A사|1,000..│  │ 견적일: 2026-01-30                     │
+│ │QT-002 |B사|2,500..│  ├─────────────────────────────────────────┤
+│ └──────────────────┘  │ [기본정보] [품목내역] [첨부파일]         │
+│                       │ ───────────────────────────              │
+│     리사이저 ↔        │ │품목코드|품목명|수량|단가|금액|비고│    │
+│                       │ │P-001 |제품A|100|1,000|100,000|   │    │
+└───────────────────────┴─────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 견적 목록 | `v2-table-list` | ✅ 가능 |
+| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
+| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
+| 품목 내역 테이블 | `v2-table-list` | ✅ 가능 |
+
+---
+
+## 4. 테이블 정의
+
+### 4.1 견적 목록 (좌측)
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'quote_no', label: '견적번호', width: 120 },
+  { id: 'quote_date', label: '견적일', width: 100 },
+  { id: 'customer_name', label: '거래처', width: 150 },
+  { id: 'total_amount', label: '견적금액', width: 120, align: 'right', format: 'currency' },
+  { id: 'status', label: '상태', width: 80 },
+  { id: 'valid_date', label: '유효기간', width: 100 },
+  { id: 'manager', label: '담당자', width: 100 }
+]
+```
+
+### 4.2 품목 내역 (우측 탭)
+
+```typescript
+detailColumns: [
+  { id: 'seq', label: 'No', width: 50 },
+  { id: 'item_code', label: '품목코드', width: 100 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'spec', label: '규격', width: 150 },
+  { id: 'quantity', label: '수량', width: 80, align: 'right' },
+  { id: 'unit', label: '단위', width: 60 },
+  { id: 'unit_price', label: '단가', width: 100, align: 'right', format: 'currency' },
+  { id: 'amount', label: '금액', width: 120, align: 'right', format: 'currency' },
+  { id: 'remark', label: '비고', width: 150 }
+]
+```
+
+---
+
+## 5. 검색 조건
+
+| 필드명 | 컴포넌트 | 설정 |
+|--------|----------|------|
+| 기간 | `v2-date` | dateRange: true |
+| 거래처 | `v2-input` | placeholder: "거래처" |
+| 견적번호 | `v2-input` | placeholder: "견적번호" |
+| 품목명 | `v2-input` | placeholder: "품목명" |
+| 상태 | `v2-select` | 작성중, 제출, 승인, 반려, 수주전환 |
+
+---
+
+## 6. 상세 탭 구성
+
+```typescript
+tabs: [
+  {
+    id: 'basic',
+    label: '기본정보',
+    fields: [
+      { id: 'quote_no', label: '견적번호' },
+      { id: 'quote_date', label: '견적일' },
+      { id: 'customer_code', label: '거래처코드' },
+      { id: 'customer_name', label: '거래처명' },
+      { id: 'manager', label: '담당자' },
+      { id: 'valid_date', label: '유효기간' },
+      { id: 'delivery_date', label: '납기일' },
+      { id: 'payment_term', label: '결제조건' },
+      { id: 'remark', label: '비고' }
+    ]
+  },
+  {
+    id: 'items',
+    label: '품목내역',
+    type: 'table',
+    entityId: 'quote_items'
+  },
+  {
+    id: 'files',
+    label: '첨부파일',
+    type: 'file-list'
+  }
+]
+```
+
+---
+
+## 7. 버튼 액션
+
+### 7.1 목록 버튼
+| 버튼 | 액션 |
+|------|------|
+| 신규등록 | 견적 등록 모달 열기 |
+
+### 7.2 상세 버튼
+| 버튼 | 액션 |
+|------|------|
+| 인쇄 | 견적서 PDF 출력 |
+| 복사 | 선택 견적 복사하여 신규 생성 |
+| 수주전환 | 견적 → 수주 데이터 생성 |
+| 수정 | 견적 수정 모달 열기 |
+| 삭제 | 견적 삭제 (확인 후) |
+
+---
+
+## 8. 구현 JSON
+
+```json
+{
+  "screen_code": "QUOTE_MAIN",
+  "screen_name": "견적관리",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
+      "config": {
+        "searchFields": [
+          { "type": "date", "id": "date_range", "placeholder": "기간", "dateRange": true },
+          { "type": "input", "id": "customer_name", "placeholder": "거래처" },
+          { "type": "input", "id": "quote_no", "placeholder": "견적번호" },
+          { "type": "input", "id": "item_name", "placeholder": "품목명" },
+          { "type": "select", "id": "status", "placeholder": "상태",
+            "options": [
+              { "value": "draft", "label": "작성중" },
+              { "value": "submitted", "label": "제출" },
+              { "value": "approved", "label": "승인" },
+              { "value": "rejected", "label": "반려" },
+              { "value": "converted", "label": "수주전환" }
+            ]
+          }
+        ],
+        "buttons": [
+          { "label": "초기화", "action": "reset", "variant": "outline" },
+          { "label": "조회", "action": "search", "variant": "primary" }
+        ],
+        "rightButtons": [
+          { "label": "사용자옵션", "action": "userOptions", "variant": "outline" },
+          { "label": "엑셀업로드", "action": "excelUpload", "variant": "outline" },
+          { "label": "엑셀다운로드", "action": "excelDownload", "variant": "outline" }
+        ]
+      }
+    },
+    {
+      "type": "v2-split-panel-layout",
+      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
+      "config": {
+        "masterPanel": {
+          "title": "견적 목록",
+          "entityId": "quote_header",
+          "buttons": [
+            { "label": "신규등록", "action": "create", "variant": "primary" }
+          ],
+          "columns": [
+            { "id": "quote_no", "label": "견적번호", "width": 120 },
+            { "id": "quote_date", "label": "견적일", "width": 100 },
+            { "id": "customer_name", "label": "거래처", "width": 150 },
+            { "id": "total_amount", "label": "견적금액", "width": 120, "align": "right" },
+            { "id": "status", "label": "상태", "width": 80 },
+            { "id": "manager", "label": "담당자", "width": 100 }
+          ]
+        },
+        "detailPanel": {
+          "title": "견적 상세",
+          "buttons": [
+            { "label": "인쇄", "action": "print", "variant": "outline" },
+            { "label": "복사", "action": "copy", "variant": "outline" },
+            { "label": "수주전환", "action": "convert", "variant": "secondary" },
+            { "label": "수정", "action": "edit", "variant": "outline" },
+            { "label": "삭제", "action": "delete", "variant": "destructive" }
+          ],
+          "tabs": [
+            {
+              "id": "basic",
+              "label": "기본정보",
+              "type": "form"
+            },
+            {
+              "id": "items",
+              "label": "품목내역",
+              "type": "table",
+              "entityId": "quote_items",
+              "relationType": "one-to-many",
+              "relationKey": "quote_id"
+            },
+            {
+              "id": "files",
+              "label": "첨부파일",
+              "type": "file"
+            }
+          ]
+        },
+        "defaultRatio": 40,
+        "resizable": true
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 9. 데이터베이스 테이블
+
+### quote_header (견적 헤더)
+```sql
+CREATE TABLE quote_header (
+  id SERIAL PRIMARY KEY,
+  company_code VARCHAR(20) NOT NULL,
+  quote_no VARCHAR(50) NOT NULL,
+  quote_date DATE NOT NULL,
+  customer_code VARCHAR(50),
+  customer_name VARCHAR(200),
+  total_amount NUMERIC(15,2),
+  tax_amount NUMERIC(15,2),
+  status VARCHAR(20) DEFAULT 'draft',
+  valid_date DATE,
+  delivery_date DATE,
+  payment_term VARCHAR(100),
+  manager VARCHAR(100),
+  remark TEXT,
+  created_at TIMESTAMPTZ DEFAULT NOW(),
+  updated_at TIMESTAMPTZ DEFAULT NOW()
+);
+```
+
+### quote_items (견적 품목)
+```sql
+CREATE TABLE quote_items (
+  id SERIAL PRIMARY KEY,
+  company_code VARCHAR(20) NOT NULL,
+  quote_id INTEGER REFERENCES quote_header(id),
+  seq INTEGER,
+  item_code VARCHAR(50),
+  item_name VARCHAR(200),
+  spec VARCHAR(200),
+  quantity NUMERIC(15,3),
+  unit VARCHAR(20),
+  unit_price NUMERIC(15,2),
+  amount NUMERIC(15,2),
+  remark TEXT
+);
+```
+
+---
+
+## 10. 구현 체크리스트
+
+- [x] 검색 영역: v2-table-search-widget
+- [x] 분할 패널: v2-split-panel-layout
+- [x] 목록 테이블: v2-table-list
+- [x] 상세 탭: v2-tabs-widget
+- [x] 품목 내역 테이블: v2-table-list (nested)
+- [ ] 인쇄 기능: 별도 구현 필요
+- [ ] 수주 전환: 비즈니스 로직 구현
+
+**현재 V2 컴포넌트로 100% 구현 가능**
diff --git a/docs/screen-implementation-guide/03_production/.gitkeep b/docs/screen-implementation-guide/03_production/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/screen-implementation-guide/03_production/production-plan.md b/docs/screen-implementation-guide/03_production/production-plan.md
new file mode 100644
index 00000000..aa09cb47
--- /dev/null
+++ b/docs/screen-implementation-guide/03_production/production-plan.md
@@ -0,0 +1,1326 @@
+# 생산계획관리 (Production Plan Management)
+
+> **Screen ID**: /screens/{TBD}
+> **메뉴 경로**: 생산관리 > 생산계획관리
+
+> ⚠️ **구현 상태 안내**
+> - **간소화 버전 (패턴 A)**: ✅ 즉시 구현 가능
+> - **정식 버전 (복합 레이아웃)**: ⚠️ 컴포넌트 개발 후 구현 가능
+>   - ~~`v2-split-panel-layout` 커스텀 모드 확장~~ ✅ **구현 완료**
+>   - `v2-table-grouped`, `v2-timeline-scheduler` 신규 개발 (2개)
+
+---
+
+## 1. 화면 개요
+
+| 항목 | 내용 |
+|------|------|
+| **화면명** | 생산계획관리 |
+| **영문명** | Production Plan Management |
+| **Screen ID** | /screens/{TBD} |
+| **메뉴 경로** | 생산관리 > 생산계획관리 |
+| **화면 유형 (전체)** | 복합형 (좌우 분할 패널 + 타임라인 스케줄러) - ⚠️ 컴포넌트 확장 후 구현 |
+| **화면 유형 (간소화)** | **패턴 A** (기본 마스터 화면) - ✅ 즉시 구현 가능 |
+| **메인 테이블** | `production_plan_mng` |
+| **관련 테이블** | `sales_order_mng`, `item_info`, `equipment_info`, `bom_info` |
+| **주요 기능** | 수주 기반 생산계획 수립, 타임라인 스케줄러, 자동 스케줄 생성, 반제품 계획 연동 |
+| **필요 작업** | ~~1. `v2-split-panel-layout` 확장~~ ✅ 완료 / 2. `v2-table-grouped` 개발 / 3. `v2-timeline-scheduler` 개발 |
+
+---
+
+## 2. 테이블 선택 및 화면 구조
+
+### 2.1 사용 테이블
+
+| 테이블명 | 용도 | 비고 |
+|----------|------|------|
+| `production_plan_mng` | 생산계획 마스터 | 주 테이블 |
+| `sales_order_mng` | 수주 정보 | 참조 (수주 기반 계획) |
+| `item_info` | 품목 정보 | 참조 (품목코드, 품명) |
+| `equipment_info` | 설비 정보 | 참조 (설비 할당) |
+| `bom_info` | BOM 정보 | 참조 (반제품 계획 생성) |
+
+### 2.2 테이블 관계
+
+```
+┌──────────────────────┐       ┌──────────────────────┐
+│  sales_order_mng     │       │  production_plan_mng │
+├──────────────────────┤       ├──────────────────────┤
+│ order_no (PK)        │──N:1──│ order_no (FK)        │
+│ item_code            │       │ id (PK)              │
+│ ...                  │       │ plan_no              │
+└──────────────────────┘       │ item_code            │
+                               │ equipment_id (FK)    │
+┌──────────────────────┐       │ parent_plan_id (FK)  │
+│  item_info           │       │ ...                  │
+├──────────────────────┤       └──────────────────────┘
+│ item_code (PK)       │──1:N──        │
+│ item_name            │               │
+│ ...                  │               │
+└──────────────────────┘               │
+                                       │
+┌──────────────────────┐               │
+│  equipment_info      │               │
+├──────────────────────┤               │
+│ id (PK)              │──1:N──────────┘
+│ equipment_code       │
+│ equipment_name       │
+│ ...                  │
+└──────────────────────┘
+```
+
+### 2.3 화면 구조 분석 (전체 버전)
+
+#### 2.3.1 레이아웃 구조
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                              검색 섹션                                       │
+│  [검색필드들...]           [사용자옵션] [엑셀업로드] [엑셀다운로드]            │
+├────────────────────────────────┬──┬──────────────────────────────────────────┤
+│     왼쪽 패널 (50%, 리사이즈)   │  │      오른쪽 패널 (50%)                    │
+│ ┌────────────────────────────┐ │리│ ┌──────────────────────────────────────┐ │
+│ │ [수주데이터] [안전재고부족] │ │사│ │ [완제품 생산계획] [반제품 생산계획]   │ │
+│ ├────────────────────────────┤ │이│ ├──────────────────────────────────────┤ │
+│ │                            │ │즈│ │                                      │ │
+│ │  수주 목록 테이블           │ │핸│ │  타임라인 스케줄러                    │
+│ │  (그룹화된 품목별 수주)      │ │들│ │  (간트차트 형태)                      │
+│ │                            │ │  │ │                                      │ │
+│ │  - 체크박스                 │ │  │ │  - 날짜별 그리드                      │
+│ │  - 접기/펼치기 토글          │ │  │ │  - 생산계획 바 (드래그 가능)           │
+│ │  - 품목별 그룹 행            │ │  │ │  - 납기일 마커                        │
+│ │  - 수주 상세 행              │ │  │ │                                      │
+│ │                            │ │  │ │                                      │
+│ └────────────────────────────┘ │  │ └──────────────────────────────────────┘ │
+│ [계획에 없는 품목만] [선택품목 불러오기] [새로고침] │ [자동스케줄] [저장] [초기화] │
+└────────────────────────────────┴──┴──────────────────────────────────────────┘
+```
+
+#### 2.3.2 탭 구조
+
+**왼쪽 패널 탭**:
+1. **수주데이터**: 수주 목록 (품목별 그룹핑)
+2. **안전재고 부족분**: 안전재고 미달 품목 목록
+
+**오른쪽 패널 탭**:
+1. **완제품 생산계획**: 완제품 타임라인 스케줄러
+2. **반제품 생산계획**: 반제품 타임라인 스케줄러
+
+---
+
+## 3. 테이블 정의
+
+### 3.1 메인 테이블: `production_plan_mng`
+
+| 컬럼명 | 타입 | NULL | 설명 |
+|--------|------|------|------|
+| id | SERIAL | NO | PK |
+| company_code | VARCHAR(20) | NO | 회사 코드 |
+| plan_no | VARCHAR(50) | NO | 생산계획번호 |
+| plan_date | DATE | NO | 계획일자 |
+| item_code | VARCHAR(50) | NO | 품목코드 |
+| item_name | VARCHAR(200) | YES | 품명 |
+| plan_qty | NUMERIC(15,3) | NO | 계획수량 |
+| start_date | DATE | NO | 시작일 |
+| end_date | DATE | NO | 종료일 |
+| due_date | DATE | YES | 납기일 |
+| equipment_id | INTEGER | YES | 설비 ID (FK) |
+| equipment_name | VARCHAR(100) | YES | 설비명 |
+| status | VARCHAR(20) | YES | 상태 (계획/지시/진행/완료) |
+| priority | VARCHAR(20) | YES | 우선순위 |
+| work_shift | VARCHAR(20) | YES | 작업조 (주간/야간/주야) |
+| manager_name | VARCHAR(100) | YES | 담당자 |
+| work_order_no | VARCHAR(50) | YES | 작업지시번호 |
+| remarks | TEXT | YES | 비고 |
+| order_no | VARCHAR(50) | YES | 관련 수주번호 |
+| partner_id | VARCHAR(50) | YES | 거래처 ID |
+| hourly_capacity | NUMERIC(15,3) | YES | 시간당 생산능력 |
+| daily_capacity | NUMERIC(15,3) | YES | 일일 생산능력 |
+| lead_time | INTEGER | YES | 리드타임 (일) |
+| product_type | VARCHAR(20) | YES | 제품유형 (완제품/반제품) |
+| parent_plan_id | INTEGER | YES | 모품목 계획 ID (반제품용) |
+| created_date | TIMESTAMPTZ | YES | 생성일시 |
+| created_by | VARCHAR(50) | YES | 생성자 |
+| updated_date | TIMESTAMPTZ | YES | 수정일시 |
+| updated_by | VARCHAR(50) | YES | 수정자 |
+
+### 3.2 관련 테이블
+
+#### `equipment_info` (설비 정보)
+
+| 컬럼명 | 타입 | 설명 |
+|--------|------|------|
+| id | SERIAL | PK |
+| equipment_code | VARCHAR(50) | 설비코드 |
+| equipment_name | VARCHAR(100) | 설비명 |
+| equipment_type | VARCHAR(50) | 설비유형 |
+| capacity_per_hour | NUMERIC(15,3) | 시간당 생산능력 |
+| status | VARCHAR(20) | 상태 |
+
+---
+
+## 4. 구현 가능 여부 분석
+
+### 4.1 현재 V2 컴포넌트로 구현 가능한 기능
+
+| 기능 | 가능 여부 | 사용 컴포넌트 | 비고 |
+|------|:---------:|--------------|------|
+| 검색 필터 | ✅ | `v2-table-search-widget` | |
+| 기본 버튼 (엑셀, 사용자옵션) | ✅ | `v2-button-primary` | |
+| 단일 테이블 목록 | ✅ | `v2-table-list` | |
+| 기본 모달 폼 | ✅ | 모달 화면 | |
+| 좌우 분할 패널 (커스텀 모드) | ✅ | `v2-split-panel-layout` | **displayMode: "custom" 지원** |
+| 탭 컴포넌트 (기본) | ⚠️ | `v2-tabs-widget` | 디자인 모드에서 컴포넌트 배치 |
+
+### 4.2 현재 V2 컴포넌트의 제한 사항 및 확장 방안
+
+#### `v2-split-panel-layout` 현재 기능
+
+| 기능 | 지원 | 설명 |
+|------|:----:|------|
+| 좌우 분할 패널 | ✅ | 리사이즈 가능 |
+| 테이블/리스트 표시 | ✅ | `displayMode: "list" \| "table"` |
+| 마스터-디테일 관계 | ✅ | `relation` 설정 |
+| 우측 추가 탭 (`additionalTabs`) | ⚠️ | **타입만 정의, 렌더링 미구현** |
+| **패널 내 임의 컴포넌트 배치** | ✅ | **`displayMode: "custom"` - 구현 완료!** |
+
+#### ✅ 커스텀 모드 (구현 완료)
+
+`v2-tabs-widget`과 동일한 구조로 패널 안에 컴포넌트를 자유롭게 배치:
+
+```typescript
+leftPanel: {
+  displayMode: "list" | "table" | "custom",  // ✅ 커스텀 모드 지원
+  
+  // 기존 모드 (list, table)
+  tableName?: string,
+  columns?: [...],
+  
+  // ✅ 커스텀 모드 - 패널 안에 자유롭게 컴포넌트 배치
+  components?: PanelInlineComponent[],
+}
+
+// PanelInlineComponent 구조
+interface PanelInlineComponent {
+  id: string;
+  componentType: string;
+  label?: string;
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+  componentConfig?: Record<string, any>;
+}
+```
+
+**커스텀 모드 기능**:
+- ✅ 드래그앤드롭으로 컴포넌트 이동
+- ✅ 리사이즈 핸들로 크기 조절
+- ✅ 컴포넌트 클릭 시 좌측 설정 패널에서 속성 편집
+- ✅ 디자인 모드에서 실제 컴포넌트 미리보기 렌더링
+- ✅ 탭, 테이블, 버튼 등 모든 V2 컴포넌트 배치 가능
+
+#### `v2-tabs-widget` 현재 기능
+
+| 기능 | 지원 | 설명 |
+|------|:----:|------|
+| 탭별 컴포넌트 배치 | ✅ | `components[]` |
+| 디자인 모드 드래그&드롭 | ✅ | 위치/크기 조정 |
+| 런타임 렌더링 | ✅ | `DynamicComponentRenderer` 사용 |
+
+**`v2-tabs-widget` 구조** (참고용):
+```typescript
+interface TabItem {
+  id: string;
+  label: string;
+  components?: TabInlineComponent[];  // 탭 안에 배치된 컴포넌트들
+}
+
+interface TabInlineComponent {
+  id: string;
+  componentType: string;  // "v2-table-list", "v2-timeline-scheduler" 등
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+  componentConfig?: Record<string, any>;
+}
+```
+
+### 4.3 생산계획관리에 필요한 기능 vs 현재 지원
+
+| 필요 기능 | 현재 지원 | 해결 방안 |
+|----------|:---------:|----------|
+| 좌우 분할 패널 | ✅ | `v2-split-panel-layout` |
+| 왼쪽 패널 탭 (수주/안전재고) | ✅ | **커스텀 모드 + `v2-tabs-widget` 조합 (구현 완료)** |
+| 오른쪽 패널 탭 (완제품/반제품) | ✅ | **커스텀 모드 + `v2-tabs-widget` 조합 (구현 완료)** |
+| **그룹화된 테이블** (품목별 접기/펼치기) | ❌ | **신규 개발 필요** |
+| **타임라인 스케줄러** (간트차트) | ❌ | **신규 개발 필요** |
+| 드래그&드롭 스케줄 이동 | ❌ | `v2-timeline-scheduler`에 포함 |
+| 복잡한 상세 모달 | ✅ | 기존 모달 화면으로 충분 |
+
+### 4.4 향후 개발 필요 사항
+
+#### 기존 컴포넌트 확장 (1개)
+
+| 컴포넌트 | 작업 내용 | 상태 |
+|----------|----------|:------:|
+| `v2-split-panel-layout` | `displayMode: "custom"` 추가 + `components[]` 지원 | ✅ **완료** |
+
+#### 신규 컴포넌트 개발 (2개) - 대체 불가
+
+| 컴포넌트 | 필요 이유 | 상태 |
+|----------|----------|:------:|
+| ~~**`v2-table-grouped`**~~ | 품목별 접기/펼치기 그룹화 테이블 | ✅ **완료** |
+| **`v2-timeline-scheduler`** | 간트차트 형태의 타임라인 스케줄러 | ⏳ 대기 |
+
+#### 불필요한 컴포넌트 (이전 분석에서 제외)
+
+| 컴포넌트 | 제외 이유 |
+|----------|----------|
+| ~~`v2-split-panel-enhanced`~~ | 커스텀 모드로 대체 가능 |
+| ~~`v2-modal-complex`~~ | 기존 모달 화면으로 충분 |
+
+```
+최종 필요 작업:
+1. ✅ v2-split-panel-layout 확장 - displayMode: "custom" 추가 [완료]
+2. ✅ v2-table-grouped 신규 개발 - 그룹화 테이블 (접기/펼치기) [완료]
+3. v2-timeline-scheduler 신규 개발 - 타임라인/간트차트 (핵심!)
+```
+
+### 4.5 현재 구현 가능한 최대 범위
+
+현재 V2 컴포넌트로 구현 가능한 **최대 범위**:
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ 검색 섹션 (v2-table-search-widget)                           │
+├──────────────────────────────────────────────────────────────┤
+│                                                              │
+│  생산계획 테이블 (v2-table-list) - 단일 테이블, 그룹화 없음   │
+│                                                              │
+├──────────────────────────────────────────────────────────────┤
+│ [등록] [수정] [삭제] (v2-button-primary)                      │
+└──────────────────────────────────────────────────────────────┘
+```
+
+**구현 불가능한 핵심 기능**:
+- 품목별 그룹핑 (접기/펼치기)
+- 간트차트 타임라인
+- 자동 스케줄 생성
+- 드래그로 스케줄 이동
+
+### 4.6 정식 버전 구현 구조 (확장 후)
+
+`v2-split-panel-layout`에 커스텀 모드를 추가한 후의 **정식 버전 구현 구조**:
+
+```
+┌──────────────────────────────────────────────────────────────────────┐
+│ v2-split-panel-layout (양쪽 패널 displayMode: "custom")               │
+├────────────────────────────────┬─────────────────────────────────────┤
+│ leftPanel.components: [        │ rightPanel.components: [             │
+│   v2-tabs-widget {             │   v2-tabs-widget {                   │
+│     tabs: [                    │     tabs: [                          │
+│       {                        │       {                              │
+│         label: "수주데이터",    │         label: "완제품 생산계획",    │
+│         components: [          │         components: [                │
+│           v2-table-grouped     │           v2-timeline-scheduler     │
+│         ]                      │         ]                            │
+│       },                       │       },                             │
+│       {                        │       {                              │
+│         label: "안전재고부족", │         label: "반제품 생산계획",    │
+│         components: [          │         components: [                │
+│           v2-table-grouped     │           v2-timeline-scheduler     │
+│         ]                      │         ]                            │
+│       }                        │       }                              │
+│     ]                          │     ]                                │
+│   }                            │   }                                  │
+│ ]                              │ ]                                    │
+└────────────────────────────────┴─────────────────────────────────────┘
+```
+
+**컴포넌트 중첩 구조**:
+```
+v2-split-panel-layout (displayMode: "custom")
+├── leftPanel.components[]
+│   └── v2-tabs-widget
+│       ├── tabs[0]: "수주데이터"
+│       │   └── components[]
+│       │       └── v2-table-grouped (품목별 그룹화)
+│       └── tabs[1]: "안전재고부족"
+│           └── components[]
+│               └── v2-table-grouped
+│
+└── rightPanel.components[]
+    └── v2-tabs-widget
+        ├── tabs[0]: "완제품 생산계획"
+        │   └── components[]
+        │       └── v2-timeline-scheduler (간트차트)
+        └── tabs[1]: "반제품 생산계획"
+            └── components[]
+                └── v2-timeline-scheduler
+```
+
+**장점**:
+- 기존 `v2-tabs-widget` 로직 100% 재사용
+- 패널 안에 어떤 컴포넌트든 배치 가능
+- 별도 `v2-split-panel-enhanced` 개발 불필요
+- 확장성 뛰어남 (향후 다른 복합 화면에도 적용 가능)
+
+---
+
+## 5. 단순화된 구현 방안 (임시)
+
+> 현재 V2 컴포넌트만으로 **간소화된 버전**을 구현할 수 있습니다.
+
+### 5.1 간소화 버전 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────┐
+│ 검색 섹션                                                    │
+│ [품목코드] [품명] [계획기간] [상태]   [사용자옵션] [엑셀다운로드] │
+├──────────────────────────────────────────────────────────────┤
+│                                                              │
+│                  생산계획 목록 테이블                          │
+│  (단일 테이블, 그룹화 없음)                                    │
+│                                                              │
+├──────────────────────────────────────────────────────────────┤
+│ [신규등록] [수정] [삭제]                                       │
+└──────────────────────────────────────────────────────────────┘
+```
+
+### 5.2 컴포넌트 배치도 (간소화 버전)
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ v2-table-search-widget (comp_search)                                         │
+│ [품목코드] [품명] [계획기간: 시작~종료] [상태]      [조회] [엑셀다운로드]      │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ 생산계획 목록                    [신규등록] [수정] [삭제] [작업지시 생성]      │
+│ ─────────────────────────────────────────────────────────────────────────── │
+│ v2-table-list (comp_table)                                                   │
+│ □ | 계획번호 | 계획일자 | 품목코드 | 품명 | 계획수량 | 시작일 | 종료일 | ... │
+│ □ | PP-001   | 2026-01  | ITEM001  | 제품A| 1,000    | 01-30  | 02-05  | ... │
+│ □ | PP-002   | 2026-01  | ITEM002  | 제품B| 500      | 02-01  | 02-10  | ... │
+│                                                                              │
+│ [1] [2] [3] ... [10]  페이지당: [20] ▼                                       │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 5.3 컴포넌트 목록 (간소화 버전)
+
+| 컴포넌트 ID | 컴포넌트 타입 | 역할 |
+|-------------|---------------|------|
+| `comp_search` | v2-table-search-widget | 검색 필터 |
+| `comp_table` | v2-table-list | 생산계획 목록 |
+| `comp_btn_register` | v2-button-primary | 신규 등록 |
+| `comp_btn_edit` | v2-button-primary | 수정 |
+| `comp_btn_delete` | v2-button-primary | 삭제 |
+| `comp_btn_work_order` | v2-button-primary | 작업지시 생성 |
+
+### 5.4 간소화 버전 테이블 컬럼
+
+| 순서 | 컬럼명 | 표시명 | 정렬 | 형식 | 너비 |
+|:----:|--------|--------|:----:|------|:----:|
+| 1 | plan_no | 계획번호 | left | text | 120 |
+| 2 | plan_date | 계획일자 | center | date | 100 |
+| 3 | item_code | 품목코드 | left | text | 100 |
+| 4 | item_name | 품명 | left | text | 150 |
+| 5 | plan_qty | 계획수량 | right | number | 100 |
+| 6 | start_date | 시작일 | center | date | 100 |
+| 7 | end_date | 종료일 | center | date | 100 |
+| 8 | due_date | 납기일 | center | date | 100 |
+| 9 | equipment_name | 설비 | left | text | 120 |
+| 10 | status | 상태 | center | badge | 80 |
+| 11 | manager_name | 담당자 | left | text | 100 |
+| 12 | product_type | 제품유형 | center | text | 80 |
+
+### 5.5 간소화 버전 모달 필드
+
+| 필드명 | 라벨 | 타입 | 필수 | 비고 |
+|--------|------|------|:----:|------|
+| plan_no | 계획번호 | text (readonly) | ✅ | 자동채번: PP-YYYYMMDD-0001 |
+| plan_date | 계획일자 | date | ✅ | 기본값: 오늘 |
+| item_code | 품목코드 | select (품목 검색) | ✅ | 엔티티: item_info |
+| item_name | 품명 | text (readonly) | | 자동 입력 |
+| plan_qty | 계획수량 | number | ✅ | min: 1 |
+| start_date | 시작일 | date | ✅ | |
+| end_date | 종료일 | date | ✅ | start_date 이후 |
+| due_date | 납기일 | date | | |
+| equipment_id | 설비 | select | | 엔티티: equipment_info |
+| equipment_name | 설비명 | text (readonly) | | 자동 입력 |
+| status | 상태 | select | ✅ | 공통코드: PROD_PLAN_STATUS |
+| priority | 우선순위 | select | | 공통코드: PRIORITY |
+| work_shift | 작업조 | select | | 공통코드: WORK_SHIFT |
+| manager_name | 담당자 | text | | |
+| product_type | 제품유형 | select | | 공통코드: PRODUCT_TYPE |
+| remarks | 비고 | textarea | | |
+
+### 5.6 상태 배지 및 공통코드
+
+#### 상태 (PROD_PLAN_STATUS)
+
+| 코드 | 표시명 | 배경색 | 글자색 |
+|------|--------|--------|--------|
+| 계획 | 계획 | #dbeafe | #1e40af |
+| 지시 | 지시 | #fef3c7 | #92400e |
+| 진행 | 진행 | #d1fae5 | #065f46 |
+| 완료 | 완료 | #f3f4f6 | #4b5563 |
+
+#### 우선순위 (PRIORITY)
+
+| 코드 | 표시명 |
+|------|--------|
+| 긴급 | 긴급 |
+| 높음 | 높음 |
+| 보통 | 보통 |
+| 낮음 | 낮음 |
+
+#### 작업조 (WORK_SHIFT)
+
+| 코드 | 표시명 |
+|------|--------|
+| 주간 | 주간 |
+| 야간 | 야간 |
+| 주야 | 주야 |
+
+#### 제품유형 (PRODUCT_TYPE)
+
+| 코드 | 표시명 |
+|------|--------|
+| 완제품 | 완제품 |
+| 반제품 | 반제품 |
+
+---
+
+## 6. 원본 HTML 기능 상세 분석
+
+### 6.1 수주데이터 탭 (왼쪽 패널)
+
+**테이블 구조**:
+- 품목별 그룹 행 (접기/펼치기 가능)
+- 수주 상세 행 (그룹 행 하위)
+
+**품목 그룹 행 컬럼**:
+| 컬럼 | 설명 |
+|------|------|
+| 체크박스 | 품목 그룹 선택 |
+| 토글 | 상세 접기/펼치기 |
+| 품목코드 | |
+| 품목명 | |
+| 총수주량 | 해당 품목의 모든 수주 합계 |
+| 출고량 | |
+| 잔량 | 총수주량 - 출고량 |
+| 현재고 | |
+| 안전재고 | |
+| 출하계획량 | |
+| 기생산계획량 | 이미 등록된 생산계획 수량 |
+| 생산진행 | 현재 생산 중인 수량 |
+| 필요생산계획 | 추가로 계획해야 할 수량 (빨간색 강조) |
+
+**수주 상세 행**:
+- 수주번호, 거래처, 상태 배지
+- 수주량, 출고량, 잔량
+- 납기일
+
+**버튼**:
+- `계획에 없는 품목만` 체크박스 필터
+- `선택 품목 불러오기`: 선택한 품목을 생산계획으로 등록
+- `새로고침`
+
+### 6.2 안전재고 부족분 탭 (왼쪽 패널)
+
+**테이블 컬럼**:
+| 컬럼 | 설명 |
+|------|------|
+| 체크박스 | |
+| 품목코드 | |
+| 품목명 | |
+| 현재고 | |
+| 안전재고 | |
+| 부족수량 | 빨간색 (마이너스) |
+| 권장생산량 | 녹색 |
+| 최종입고일 | |
+
+### 6.3 완제품 생산계획 탭 (오른쪽 패널)
+
+**스케줄 옵션**:
+- 안전리드타임 (일)
+- 표시 기간 (주)
+- 미진행 계획 재계산 체크박스
+
+**범례**:
+- 계획 (파란색)
+- 지시 (주황색)
+- 진행 (녹색)
+- 완료 (회색)
+- 납기일 (빨간 테두리)
+- 긴급 (빨간 아이콘)
+
+**타임라인 구조**:
+- 날짜별 헤더 (일/월 표시, 주말 강조, 오늘 강조)
+- 품목별 행
+- 생산계획 바 (드래그로 이동 가능)
+- 클릭 시 상세 모달 오픈
+
+**버튼**:
+- `새로고침`
+- `자동 스케줄 생성`: 선택된 품목에 대해 자동으로 생산계획 생성
+- `선택 계획 병합`: 같은 품목의 계획을 하나로 병합
+- `선택 품목 → 반제품 계획`: BOM 기반 반제품 계획 생성
+- `저장`
+- `초기화`
+
+### 6.4 반제품 생산계획 탭 (오른쪽 패널)
+
+**옵션**:
+- 현재고 및 안전재고 감안
+- 진행중인 계획 유지하고 재계산
+- 투입 완료된 반제품 제외
+
+**안내**:
+- 완제품 생산계획 기준으로 필요한 반제품 계획 자동 생성
+- 모품목 생산 시작일 고려하여 납기일 설정
+- BOM(자재명세서) 정보 기반 필요 수량 계산
+
+### 6.5 생산 스케줄 상세 모달
+
+**기본 정보**:
+- 품목코드 (읽기전용)
+- 품목명 (읽기전용)
+
+**근거 정보**:
+- 수주번호, 안전재고, 재고부족 등 표시
+
+**생산 정보**:
+- 총 생산수량
+- 납기일 (읽기전용)
+- 계획 시작일 (수정 가능)
+- 계획 종료일 (수정 가능)
+- 생산 기간 (자동 계산)
+
+**과거 계획 경고**:
+- 시작일이 과거인 경우 경고 표시
+- `오늘부터 재조정` 버튼
+- `작업지시 즉시 생성` 버튼
+
+**계획 분할**:
+- 분할 개수 선택 (2~4개)
+- 각 분할 수량 입력
+- 분할 실행
+
+**설비 할당**:
+- 설비 선택 버튼
+- 선택된 설비 목록
+
+**생산 상태**:
+- 상태 (자동 관리): 계획됨/작업지시/진행중/완료
+
+**추가 정보**:
+- 담당자
+- 작업지시번호
+- 비고
+
+**버튼**:
+- 삭제
+- 취소
+- 저장
+
+---
+
+## 7. 구현 우선순위
+
+### Phase 1: 간소화 버전 (현재 구현 가능)
+
+V2 컴포넌트로 기본 CRUD 화면 구현:
+- 검색 위젯
+- 단일 테이블 (그룹화 없음)
+- 기본 모달 폼
+- 상태 배지
+
+### Phase 2: 컴포넌트 확장 및 개발
+
+1. ~~**`v2-split-panel-layout` 확장**~~ ✅ **완료**
+   - ✅ `displayMode: "custom"` 추가
+   - ✅ `components[]` 필드 지원 (탭 컴포넌트와 동일한 구조)
+   - ✅ 디자인 모드에서 컴포넌트 드래그&드롭 지원
+   - ✅ 컴포넌트 클릭 시 좌측 설정 패널에서 속성 편집
+
+2. ~~**`v2-table-grouped` 신규 개발**~~ ✅ **완료**
+   - ✅ 품목별 그룹핑 (접기/펼치기)
+   - ✅ 그룹 행과 상세 행 구분
+   - ✅ 체크박스 선택 (그룹 단위 / 개별 단위)
+   - ✅ 그룹 요약 (개수, 합계, 평균 등)
+
+### Phase 3: 타임라인 스케줄러
+
+1. **`v2-timeline-scheduler` 신규 개발**
+   - 간트차트 형태 타임라인
+   - 날짜 그리드 (일/주/월 단위)
+   - 생산계획 바 렌더링
+   
+2. **드래그&드롭 기능**
+   - 계획 바 드래그로 날짜 이동
+   - 계획 바 크기 조정 (기간 변경)
+   
+3. **비즈니스 로직**
+   - 자동 스케줄 생성 API
+   - BOM 기반 반제품 계획 연동
+   - 설비별 용량 체크
+
+---
+
+## 8. 참고 사항
+
+### 8.1 상태 배지 스타일
+
+| 상태 | 배경색 | 글자색 | 설명 |
+|------|--------|--------|------|
+| 계획 | #dbeafe | #1e40af | 파란색 |
+| 지시 | #fef3c7 | #92400e | 주황색 |
+| 진행 | #d1fae5 | #065f46 | 녹색 |
+| 완료 | #f3f4f6 | #4b5563 | 회색 |
+| 긴급 | #fee2e2 | #991b1b | 빨간색 |
+
+### 8.2 자동 스케줄 생성 로직
+
+```
+1. 선택된 품목의 필요 생산수량 계산
+   - 필요수량 = 잔량 + 안전재고 - 현재고 - 기생산계획량
+
+2. 납기일에서 안전리드타임 차감하여 완료일 계산
+
+3. 일일 생산능력으로 필요 생산일수 계산
+
+4. 완료일에서 역산하여 시작일 계산
+
+5. 설비 가용성 확인 및 자동 할당
+
+6. 반제품이 필요한 경우 BOM 기반 반제품 계획 생성
+```
+
+### 8.3 계획 분할 로직
+
+```
+1. 원본 계획의 총 수량 확인
+
+2. 분할 개수 선택 (2~4개)
+
+3. 각 분할 수량 입력 (합계 = 원본 수량)
+
+4. 분할 실행 시:
+   - 원본 계획 삭제
+   - 새로운 N개의 계획 생성
+   - 각각 별도의 시작일/종료일 설정 가능
+```
+
+---
+
+## 9. DB INSERT JSON (간소화 버전)
+
+> ⚠️ 이 JSON은 **간소화 버전**입니다. 전체 기능 구현 시 별도 개발이 필요합니다.
+
+### 9.1 screen_definitions
+
+```json
+{
+  "screen_name": "생산계획관리",
+  "screen_code": "{COMPANY_CODE}_PP_MAIN",
+  "table_name": "production_plan_mng",
+  "company_code": "{COMPANY_CODE}",
+  "description": "생산계획 관리 화면 (간소화 버전)",
+  "is_active": "Y",
+  "db_source_type": "internal",
+  "data_source_type": "database"
+}
+```
+
+### 9.2 screen_layouts_v2.layout_data (간소화 버전)
+
+```json
+{
+  "version": "2.0",
+  "components": [
+    {
+      "id": "comp_search",
+      "url": "@/lib/registry/components/v2-table-search-widget",
+      "size": { "width": 1920, "height": 80 },
+      "position": { "x": 0, "y": 20, "z": 1 },
+      "overrides": {
+        "type": "v2-table-search-widget",
+        "label": "검색 필터",
+        "searchFields": [
+          { "field": "item_code", "label": "품목코드", "type": "text" },
+          { "field": "item_name", "label": "품명", "type": "text" },
+          { "field": "plan_date", "label": "계획기간", "type": "daterange" },
+          { 
+            "field": "status", 
+            "label": "상태", 
+            "type": "select",
+            "options": [
+              { "value": "", "label": "전체" },
+              { "value": "계획", "label": "계획" },
+              { "value": "지시", "label": "지시" },
+              { "value": "진행", "label": "진행" },
+              { "value": "완료", "label": "완료" }
+            ]
+          }
+        ],
+        "targetTableId": "comp_table"
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "comp_table",
+      "url": "@/lib/registry/components/v2-table-list",
+      "size": { "width": 1920, "height": 700 },
+      "position": { "x": 0, "y": 120, "z": 1 },
+      "overrides": {
+        "type": "v2-table-list",
+        "label": "생산계획 목록",
+        "columns": [
+          { "columnName": "plan_no", "displayName": "계획번호", "order": 0, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 120 },
+          { "columnName": "plan_date", "displayName": "계획일자", "order": 1, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "item_code", "displayName": "품목코드", "order": 2, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 100 },
+          { "columnName": "item_name", "displayName": "품명", "order": 3, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 150 },
+          { "columnName": "plan_qty", "displayName": "계획수량", "order": 4, "visible": true, "sortable": true, "format": "number", "align": "right", "width": 100 },
+          { "columnName": "start_date", "displayName": "시작일", "order": 5, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "end_date", "displayName": "종료일", "order": 6, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "due_date", "displayName": "납기일", "order": 7, "visible": true, "sortable": true, "format": "date", "align": "center", "width": 100 },
+          { "columnName": "equipment_name", "displayName": "설비", "order": 8, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 120 },
+          { 
+            "columnName": "status", 
+            "displayName": "상태", 
+            "order": 9, 
+            "visible": true, 
+            "sortable": true, 
+            "format": "badge", 
+            "align": "center", 
+            "width": 80,
+            "badgeConfig": {
+              "계획": { "background": "#dbeafe", "color": "#1e40af" },
+              "지시": { "background": "#fef3c7", "color": "#92400e" },
+              "진행": { "background": "#d1fae5", "color": "#065f46" },
+              "완료": { "background": "#f3f4f6", "color": "#4b5563" }
+            }
+          },
+          { "columnName": "product_type", "displayName": "제품유형", "order": 10, "visible": true, "sortable": true, "format": "text", "align": "center", "width": 80 },
+          { "columnName": "manager_name", "displayName": "담당자", "order": 11, "visible": true, "sortable": true, "format": "text", "align": "left", "width": 100 }
+        ],
+        "selectedTable": "production_plan_mng",
+        "pagination": { "enabled": true, "pageSize": 20, "pageSizeOptions": [10, 20, 50, 100] },
+        "checkbox": { "enabled": true, "multiple": true },
+        "horizontalScroll": { "enabled": true, "minColumnWidth": 80, "maxColumnWidth": 200 },
+        "defaultSort": { "field": "plan_date", "order": "desc" }
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "comp_btn_register",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 100, "height": 40 },
+      "position": { "x": 1480, "y": 70, "z": 1 },
+      "overrides": {
+        "text": "신규 등록",
+        "type": "v2-button-primary",
+        "action": { "type": "modal", "modalTitle": "생산계획 등록", "targetScreenId": null },
+        "variant": "success"
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "comp_btn_edit",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1590, "y": 70, "z": 1 },
+      "overrides": {
+        "text": "수정",
+        "type": "v2-button-primary",
+        "action": { "type": "edit", "modalTitle": "생산계획 수정", "targetScreenId": null },
+        "variant": "secondary",
+        "requireSelection": true
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "comp_btn_delete",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 80, "height": 40 },
+      "position": { "x": 1680, "y": 70, "z": 1 },
+      "overrides": {
+        "text": "삭제",
+        "type": "v2-button-primary",
+        "action": { "type": "delete" },
+        "variant": "danger",
+        "requireSelection": true,
+        "enableDataflowControl": true,
+        "dataflowDiagramId": null
+      },
+      "displayOrder": 4
+    },
+    {
+      "id": "comp_btn_work_order",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "size": { "width": 120, "height": 40 },
+      "position": { "x": 1770, "y": 70, "z": 1 },
+      "overrides": {
+        "text": "작업지시 생성",
+        "type": "v2-button-primary",
+        "action": { "type": "custom" },
+        "variant": "primary",
+        "requireSelection": true,
+        "enableDataflowControl": true,
+        "dataflowDiagramId": null,
+        "confirmMessage": "선택한 계획에 대해 작업지시를 생성하시겠습니까?"
+      },
+      "displayOrder": 5
+    }
+  ]
+}
+```
+
+---
+
+## 10. 비즈니스 로직 요청서 (간소화 버전)
+
+> **중요**: 이 섹션은 표준 양식에 따라 작성되었습니다.
+
+```
+=== 비즈니스 로직 요청서 ===
+
+【화면 정보】
+- 화면명: 생산계획관리 (간소화 버전)
+- 회사코드: {COMPANY_CODE}
+- 메뉴ID: {TBD}
+
+【테이블 정보】
+- 메인 테이블: production_plan_mng
+- 디테일 테이블: 없음 (간소화 버전)
+- 관계 FK: 없음
+
+【버튼 목록】
+버튼1:
+  - 버튼명: 신규 등록
+  - 동작 유형: 모달 열기 (insert)
+  - 조건: 없음
+  - 대상 테이블: production_plan_mng
+  - 추가 동작: 
+    1. plan_no 자동채번 (PP-YYYYMMDD-0001)
+    2. plan_date 기본값 = 오늘
+    3. status 기본값 = '계획'
+
+버튼2:
+  - 버튼명: 수정
+  - 동작 유형: 모달 열기 (update)
+  - 조건: 행 선택 필수
+  - 대상 테이블: production_plan_mng
+  - 추가 동작: 없음
+
+버튼3:
+  - 버튼명: 삭제
+  - 동작 유형: 삭제 (delete)
+  - 조건: 
+    1. 행 선택 필수
+    2. status != '진행' AND status != '완료'
+  - 대상 테이블: production_plan_mng
+  - 추가 동작: 삭제 확인 다이얼로그
+
+버튼4:
+  - 버튼명: 작업지시 생성
+  - 동작 유형: 수정 (update)
+  - 조건: 
+    1. 행 선택 필수 (다중 선택 가능)
+    2. status = '계획'
+  - 대상 테이블: production_plan_mng
+  - 추가 동작:
+    1. status를 '지시'로 변경
+    2. work_order_no 자동채번 (WO-YYYYMMDD-0001)
+    3. work_order_mng에 INSERT (작업지시 테이블)
+
+【추가 요구사항】
+- 진행/완료 상태의 계획은 수정/삭제 불가
+- 계획번호(plan_no) 자동채번: PP-YYYYMMDD-0001
+- 품목코드 선택 시 품명 자동 입력
+- 설비 선택 시 시간당 생산능력 자동 입력
+- 시작일/종료일 기반 생산기간 자동 계산
+```
+
+---
+
+## 11. 제어관리 설정 (dataflow_diagrams)
+
+### 11.1 신규 등록 버튼 (기본 저장)
+
+> 기본 INSERT 액션은 화면 디자이너에서 처리되므로 별도 dataflow 불필요
+
+### 11.2 삭제 버튼 (조건부 삭제)
+
+```json
+{
+  "diagram_name": "생산계획관리_삭제",
+  "company_code": "{COMPANY_CODE}",
+  "control": {
+    "actionType": "delete",
+    "triggerType": "before",
+    "conditions": [
+      {
+        "id": "cond-status-not-in-progress",
+        "type": "condition",
+        "field": "status",
+        "operator": "!=",
+        "value": "진행",
+        "dataType": "string"
+      },
+      {
+        "id": "cond-status-not-completed",
+        "type": "condition",
+        "field": "status",
+        "operator": "!=",
+        "value": "완료",
+        "dataType": "string"
+      }
+    ],
+    "conditionLogic": "AND",
+    "errorMessage": "진행 중이거나 완료된 계획은 삭제할 수 없습니다."
+  },
+  "plan": {
+    "actions": [
+      {
+        "id": "action-delete",
+        "actionType": "delete",
+        "targetTable": "production_plan_mng"
+      }
+    ]
+  }
+}
+```
+
+### 11.3 작업지시 생성 버튼
+
+```json
+{
+  "diagram_name": "생산계획관리_작업지시생성",
+  "company_code": "{COMPANY_CODE}",
+  "control": {
+    "actionType": "update",
+    "triggerType": "after",
+    "conditions": [
+      {
+        "id": "cond-status-plan",
+        "type": "condition",
+        "field": "status",
+        "operator": "=",
+        "value": "계획",
+        "dataType": "string"
+      }
+    ],
+    "errorMessage": "계획 상태인 항목만 작업지시를 생성할 수 있습니다."
+  },
+  "plan": {
+    "actions": [
+      {
+        "id": "action-update-status",
+        "actionType": "update",
+        "targetTable": "production_plan_mng",
+        "fieldMappings": [
+          { "targetField": "status", "defaultValue": "지시" },
+          { "targetField": "updated_date", "defaultValue": "#NOW" },
+          { "targetField": "updated_by", "defaultValue": "#USER" }
+        ]
+      },
+      {
+        "id": "action-insert-workorder",
+        "actionType": "insert",
+        "targetTable": "work_order_mng",
+        "fieldMappings": [
+          { "sourceField": "plan_no", "targetField": "plan_no" },
+          { "sourceField": "item_code", "targetField": "item_code" },
+          { "sourceField": "item_name", "targetField": "item_name" },
+          { "sourceField": "plan_qty", "targetField": "order_qty" },
+          { "sourceField": "start_date", "targetField": "work_start_date" },
+          { "sourceField": "end_date", "targetField": "work_end_date" },
+          { "sourceField": "equipment_id", "targetField": "equipment_id" },
+          { "sourceField": "equipment_name", "targetField": "equipment_name" },
+          { "targetField": "status", "defaultValue": "대기" },
+          { "targetField": "company_code", "defaultValue": "#COMPANY" },
+          { "targetField": "created_date", "defaultValue": "#NOW" },
+          { "targetField": "created_by", "defaultValue": "#USER" }
+        ]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 12. 컴포넌트 연동 설정 (간소화 버전)
+
+### 12.1 이벤트 흐름
+
+```
+[화면 진입]
+    │
+    ▼
+v2-table-search-widget (검색 필터)
+    │ onFilterChange
+    ▼
+v2-table-list (생산계획 목록)
+    │ onRowSelect
+    ▼
+[버튼 활성화/비활성화]
+    │
+    ├── [신규 등록] 클릭 → 등록 모달 오픈
+    │                       │ onSave
+    │                       ▼
+    │                   INSERT → 테이블 Refresh
+    │
+    ├── [수정] 클릭 → 수정 모달 오픈
+    │                  │ onSave
+    │                  ▼
+    │              UPDATE → 테이블 Refresh
+    │
+    ├── [삭제] 클릭 → 조건 체크
+    │                  │ 통과 시
+    │                  ▼
+    │              DELETE → 테이블 Refresh
+    │
+    └── [작업지시 생성] 클릭 → 조건 체크
+                               │ 통과 시
+                               ▼
+                           UPDATE + INSERT → 테이블 Refresh
+```
+
+### 12.2 연동 설정 테이블
+
+| 소스 컴포넌트 | 이벤트 | 대상 컴포넌트 | 동작 |
+|---------------|--------|---------------|------|
+| search-widget | onFilterChange | main-table | 필터 적용 후 재조회 |
+| main-table | onRowSelect | btn-edit, btn-delete | 버튼 활성화 |
+| main-table | onRowDoubleClick | modal-edit | 수정 모달 오픈 |
+| btn-register | onClick | modal-register | 등록 모달 오픈 |
+| btn-edit | onClick | modal-edit | 수정 모달 오픈 |
+| btn-delete | onClick | dataflow | 삭제 실행 |
+| btn-work-order | onClick | dataflow | 작업지시 생성 실행 |
+| modal-* | onSave | main-table | 테이블 새로고침 |
+
+---
+
+## 13. 사용자 사용 예시 시나리오 (간소화 버전)
+
+### 시나리오 1: 생산계획 조회
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 화면 진입 | 전체 생산계획 목록 표시 (최근순) |
+| 2 | 품목코드 입력 후 [조회] 클릭 | 해당 품목의 생산계획만 필터링 |
+| 3 | 상태 드롭다운에서 '계획' 선택 | 계획 상태인 항목만 표시 |
+| 4 | 컬럼 헤더 클릭 | 해당 컬럼 기준 정렬 |
+
+### 시나리오 2: 생산계획 등록
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | [신규 등록] 버튼 클릭 | 등록 모달 오픈 |
+| 2 | 품목코드 검색/선택 | 품명 자동 입력 |
+| 3 | 계획수량, 시작일, 종료일 입력 | 입력 필드 채움 |
+| 4 | 설비 선택 | 시간당 생산능력 표시 |
+| 5 | [저장] 버튼 클릭 | 저장 완료, 목록에 신규 행 표시 |
+
+### 시나리오 3: 생산계획 수정
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 목록에서 행 선택 | 행 하이라이트 |
+| 2 | [수정] 버튼 클릭 (또는 더블클릭) | 수정 모달 오픈 (기존 값 로드) |
+| 3 | 필요한 필드 수정 | 값 변경 |
+| 4 | [저장] 버튼 클릭 | 저장 완료, 목록 갱신 |
+
+### 시나리오 4: 생산계획 삭제
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 삭제할 행 체크박스 선택 | 선택 표시 |
+| 2 | [삭제] 버튼 클릭 | 삭제 확인 다이얼로그 표시 |
+| 3-a | (상태가 계획/지시) 확인 클릭 | 삭제 완료, 목록에서 제거 |
+| 3-b | (상태가 진행/완료) 확인 클릭 | "삭제할 수 없습니다" 오류 메시지 |
+
+### 시나리오 5: 작업지시 생성
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|:----:|-------------|-----------|
+| 1 | 계획 상태인 행 체크박스 선택 (다중 가능) | 선택 표시 |
+| 2 | [작업지시 생성] 버튼 클릭 | 확인 다이얼로그 표시 |
+| 3-a | (상태가 계획) 확인 클릭 | 상태가 '지시'로 변경, 작업지시번호 생성 |
+| 3-b | (상태가 계획 아님) 확인 클릭 | "계획 상태만 가능합니다" 오류 메시지 |
+
+---
+
+## 14. 검증 체크리스트
+
+### 14.1 기능 테스트
+
+- [ ] 데이터 조회가 정상 동작하는가?
+- [ ] 검색 필터가 정상 동작하는가?
+- [ ] 신규 등록이 정상 동작하는가?
+- [ ] 수정이 정상 동작하는가?
+- [ ] 삭제가 정상 동작하는가? (조건 포함)
+- [ ] 작업지시 생성이 정상 동작하는가? (조건 포함)
+- [ ] 페이지네이션이 정상 동작하는가?
+- [ ] 정렬이 정상 동작하는가?
+
+### 14.2 데이터 검증
+
+- [ ] 계획번호(plan_no) 자동채번이 중복 없이 생성되는가?
+- [ ] 품목코드 선택 시 품명이 자동 입력되는가?
+- [ ] 설비 선택 시 시간당 생산능력이 표시되는가?
+- [ ] company_code 필터링이 적용되는가? (멀티테넌시)
+
+### 14.3 비즈니스 룰 검증
+
+- [ ] 진행/완료 상태는 삭제 불가한가?
+- [ ] 계획 상태만 작업지시 생성 가능한가?
+- [ ] 작업지시 생성 시 work_order_mng에 데이터가 INSERT되는가?
+
+---
+
+## 15. 구현 체크리스트
+
+### 15.1 간소화 버전 (현재 구현 가능)
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ☐ | **테이블 생성** | `production_plan_mng` 테이블 생성 |
+| ☐ | **화면 정의** | `screen_definitions` INSERT |
+| ☐ | **모달 화면 생성** | 등록/수정 모달 화면 생성 |
+| ☐ | **메인 화면 생성** | `screen_layouts_v2` INSERT |
+| ☐ | **제어관리 설정** | `dataflow_diagrams` INSERT (삭제, 작업지시 생성) |
+| ☐ | **메뉴 연결** | 대상 메뉴에 화면 할당 |
+| ☐ | **기본 CRUD 테스트** | 등록/수정/삭제/조회 테스트 |
+| ☐ | **비즈니스 룰 테스트** | 조건부 삭제, 작업지시 생성 테스트 |
+
+### 15.2 전체 버전 (향후 구현)
+
+| 체크 | 항목 | 설명 |
+|:----:|------|------|
+| ✅ | ~~**v2-split-panel-layout 확장**~~ | `displayMode: "custom"` + `components[]` 추가 **완료** |
+| ✅ | ~~**v2-table-grouped 개발**~~ | 그룹화 테이블 컴포넌트 **완료** |
+| ☐ | **v2-timeline-scheduler 개발** | 타임라인/간트차트 스케줄러 |
+| ☐ | **드래그&드롭 기능** | 타임라인 바 드래그 이동/크기 조정 |
+| ☐ | **자동 스케줄 로직** | 자동 스케줄 생성 백엔드 API |
+| ☐ | **반제품 연동** | BOM 기반 반제품 계획 생성 |
+| ☐ | **정식 버전 화면 구성** | 커스텀 모드로 탭+테이블+타임라인 조합 |
+
+---
+
+## 16. 자동 스케줄 생성 기능
+
+> 상세 가이드: [스케줄 자동 생성 기능 구현 가이드](../00_analysis/schedule-auto-generation-guide.md)
+
+### 16.1 개요
+
+좌측 수주 테이블에서 품목을 선택하고 "자동 스케줄 생성" 버튼을 클릭하면, 선택된 품목들에 대한 생산 스케줄이 자동으로 생성되어 우측 타임라인에 표시됩니다.
+
+### 16.2 데이터 흐름
+
+```
+1. 좌측 v2-table-grouped에서 품목 선택 (그룹 선택 시 자식 포함)
+2. "자동 스케줄 생성" 버튼 클릭
+3. 백엔드 API에서 미리보기 생성 (생성/삭제/수정될 스케줄)
+4. 변경사항 확인 다이얼로그 표시
+5. 확인 시 스케줄 적용 및 타임라인 새로고침
+6. 다음 방문 시: 좌측 선택 → linkedFilter로 우측 자동 필터링
+```
+
+### 16.3 스케줄 생성 설정
+
+```json
+{
+  "scheduleType": "PRODUCTION",
+  "source": {
+    "componentId": "order_table",
+    "tableName": "sales_order_mng",
+    "groupByField": "part_code",
+    "quantityField": "balance_qty",
+    "dueDateField": "due_date"
+  },
+  "resource": {
+    "type": "ITEM",
+    "idField": "part_code",
+    "nameField": "part_name"
+  },
+  "rules": {
+    "leadTimeDays": 3,
+    "dailyCapacity": 100,
+    "workingDays": [1, 2, 3, 4, 5],
+    "considerStock": true,
+    "stockTableName": "inventory_mng",
+    "stockQtyField": "current_qty"
+  },
+  "target": {
+    "tableName": "production_plan_mng",
+    "timelineComponentId": "production_timeline"
+  }
+}
+```
+
+### 16.4 버튼 설정
+
+```json
+{
+  "componentType": "v2-button-primary",
+  "componentId": "btn_auto_schedule",
+  "componentConfig": {
+    "label": "자동 스케줄 생성",
+    "variant": "default",
+    "icon": "Calendar",
+    "action": {
+      "type": "custom",
+      "customAction": "autoGenerateSchedule",
+      "scheduleConfig": { /* 위 설정 */ }
+    }
+  }
+}
+```
+
+### 16.5 연결 필터 설정 (linkedFilters)
+
+좌측 테이블 선택 시 우측 타임라인 자동 필터링:
+
+```json
+{
+  "linkedFilters": [
+    {
+      "sourceComponentId": "order_table",
+      "sourceField": "part_code",
+      "targetColumn": "resource_id"
+    }
+  ]
+}
+```
+
+### 16.6 구현 상태
+
+| 항목 | 상태 | 비고 |
+|------|:----:|------|
+| schedule_mng 테이블 | ⏳ 대기 | 범용 스케줄 테이블 |
+| /api/schedule/preview API | ⏳ 대기 | 미리보기 |
+| /api/schedule/apply API | ⏳ 대기 | 적용 |
+| autoGenerateSchedule 버튼 액션 | ⏳ 대기 | buttonActions.ts |
+| 확인 다이얼로그 | ⏳ 대기 | 기존 AlertDialog 활용 |
+| linkedFilter 연동 | ⏳ 대기 | 타임라인 필터링 |
+
+---
+
+## 17. 관련 문서
+
+- [수주관리](../02_sales/order.md)
+- [품목정보](../01_master-data/item-info.md)
+- [설비관리](../05_equipment/equipment-info.md)
+- [BOM관리](../01_master-data/bom.md)
+- [작업지시](./work-order.md)
+- **[스케줄 자동 생성 기능 가이드](../00_analysis/schedule-auto-generation-guide.md)**
+
+---
+
+## 18. 참고: 표준 가이드
+
+- [화면개발 표준 가이드](../화면개발_표준_가이드.md)
+- [V2 컴포넌트 사용 가이드](../00_analysis/v2-component-usage-guide.md)
+- [전체 화면 분석 보고서](../00_analysis/full-screen-analysis.md)
diff --git a/docs/screen-implementation-guide/03_production/work-order.md b/docs/screen-implementation-guide/03_production/work-order.md
new file mode 100644
index 00000000..47f3cd05
--- /dev/null
+++ b/docs/screen-implementation-guide/03_production/work-order.md
@@ -0,0 +1,194 @@
+# 작업지시 화면 구현 가이드
+
+> **화면명**: 작업지시
+> **파일**: 작업지시.html
+> **분류**: 생산관리
+> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)
+
+---
+
+## 1. 화면 개요
+
+생산계획을 기반으로 작업지시를 생성하고 관리하는 화면입니다.
+
+### 핵심 기능
+- 작업지시 목록 조회 (탭별 구분)
+- 그룹화 기능 (작업일자, 공정별)
+- 작업지시 생성/수정/삭제
+- 작업지시서 인쇄
+- 실적 연계
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [기간] [품목] [공정] [작업상태▼] [초기화][조회] [사용자옵션][엑셀] │
+├─────────────────────────────────────────────────────────────────┤
+│ [전체] [대기] [진행중] [완료] [지연]                             │
+├───────────────────────┬─────────────────────────────────────────┤
+│ 📋 작업지시 목록        │ 📄 작업지시 상세                        │
+│ ───────────────       │ [인쇄] [시작] [완료] [수정] [삭제]       │
+│ Group by: [작업일자▼]  │ ─────────────────────────               │
+│ ┌──────────────────┐  │ 지시번호: WO-2026-0001                  │
+│ │▼ 2026-01-30 (5)  │  │ 품목명: 제품A                           │
+│ │  WO-001|제품A|대기│  │ 지시수량: 100 EA                        │
+│ │  WO-002|제품B|진행│  ├─────────────────────────────────────────┤
+│ │▼ 2026-01-31 (3)  │  │ [자재투입] [공정현황] [실적현황]         │
+│ │  WO-003|제품C|대기│  │ ───────────────────────────              │
+│ └──────────────────┘  │ [투입자재 테이블]                        │
+└───────────────────────┴─────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 상태 탭 | `v2-tabs-widget` | ✅ 가능 |
+| 작업지시 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
+| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
+| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
+
+---
+
+## 4. 테이블 정의
+
+### 4.1 작업지시 목록
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'work_order_no', label: '지시번호', width: 120 },
+  { id: 'work_date', label: '작업일', width: 100 },
+  { id: 'item_code', label: '품목코드', width: 100 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'order_qty', label: '지시수량', width: 100, align: 'right' },
+  { id: 'prod_qty', label: '생산수량', width: 100, align: 'right' },
+  { id: 'process_name', label: '공정', width: 100 },
+  { id: 'status', label: '상태', width: 80 },
+  { id: 'worker', label: '작업자', width: 100 }
+]
+```
+
+### 4.2 자재투입 탭
+
+```typescript
+materialColumns: [
+  { id: 'item_code', label: '품목코드', width: 100 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'required_qty', label: '소요량', width: 100, align: 'right' },
+  { id: 'issued_qty', label: '투입량', width: 100, align: 'right' },
+  { id: 'unit', label: '단위', width: 60 },
+  { id: 'warehouse', label: '출고창고', width: 100 }
+]
+```
+
+---
+
+## 5. 상태 탭
+
+```typescript
+statusTabs: [
+  { id: 'all', label: '전체', count: 25 },
+  { id: 'waiting', label: '대기', count: 10 },
+  { id: 'progress', label: '진행중', count: 8 },
+  { id: 'completed', label: '완료', count: 5 },
+  { id: 'delayed', label: '지연', count: 2 }
+]
+```
+
+---
+
+## 6. 그룹화 기능 (v2-grouped-table 필요)
+
+```typescript
+groupByOptions: [
+  { id: 'work_date', label: '작업일자' },
+  { id: 'process_name', label: '공정' },
+  { id: 'item_type', label: '품목구분' }
+]
+```
+
+---
+
+## 7. 현재 구현 가능 범위
+
+### ✅ 가능
+- 검색 영역
+- 상태 탭 전환
+- 분할 패널
+- 상세 탭
+- 자재투입/공정현황/실적현황 테이블
+
+### ⚠️ 부분 가능
+- 작업지시 목록: 그룹화 없이 일반 테이블
+
+### ❌ 불가능
+- 동적 그룹화
+
+---
+
+## 8. 구현 JSON
+
+```json
+{
+  "screen_code": "WORK_ORDER_MAIN",
+  "screen_name": "작업지시",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "position": { "x": 0, "y": 0, "w": 12, "h": 1 },
+      "config": {
+        "searchFields": [
+          { "type": "date", "id": "date_range", "placeholder": "기간", "dateRange": true },
+          { "type": "input", "id": "item_name", "placeholder": "품목명" },
+          { "type": "select", "id": "process", "placeholder": "공정" },
+          { "type": "select", "id": "status", "placeholder": "상태" }
+        ]
+      }
+    },
+    {
+      "type": "v2-tabs-widget",
+      "position": { "x": 0, "y": 1, "w": 12, "h": 11 },
+      "config": {
+        "tabs": [
+          { "id": "all", "label": "전체" },
+          { "id": "waiting", "label": "대기" },
+          { "id": "progress", "label": "진행중" },
+          { "id": "completed", "label": "완료" },
+          { "id": "delayed", "label": "지연" }
+        ],
+        "tabContent": {
+          "type": "v2-split-panel-layout",
+          "config": {
+            "masterPanel": {
+              "title": "작업지시 목록",
+              "entityId": "work_order",
+              "columns": [
+                { "id": "work_order_no", "label": "지시번호" },
+                { "id": "work_date", "label": "작업일" },
+                { "id": "item_name", "label": "품목명" },
+                { "id": "order_qty", "label": "지시수량" },
+                { "id": "status", "label": "상태" }
+              ]
+            },
+            "detailPanel": {
+              "tabs": [
+                { "id": "material", "label": "자재투입", "entityId": "work_order_material" },
+                { "id": "process", "label": "공정현황", "entityId": "work_order_process" },
+                { "id": "result", "label": "실적현황", "entityId": "work_order_result" }
+              ]
+            }
+          }
+        }
+      }
+    }
+  ]
+}
+```
+
+**v2-grouped-table 개발 시 재활용 가능**
diff --git a/docs/screen-implementation-guide/04_purchase/.gitkeep b/docs/screen-implementation-guide/04_purchase/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/screen-implementation-guide/04_purchase/purchase-order.md b/docs/screen-implementation-guide/04_purchase/purchase-order.md
new file mode 100644
index 00000000..225a331b
--- /dev/null
+++ b/docs/screen-implementation-guide/04_purchase/purchase-order.md
@@ -0,0 +1,172 @@
+# 발주관리 화면 구현 가이드
+
+> **화면명**: 발주관리
+> **파일**: 발주관리.html
+> **분류**: 구매관리
+> **구현 가능**: ✅ 완전 (현재 V2 컴포넌트)
+
+---
+
+## 1. 화면 개요
+
+자재/원자재 발주를 생성하고 관리하는 화면입니다.
+
+### 핵심 기능
+- 발주 목록 조회/검색
+- 발주 등록/수정/삭제
+- 발주서 인쇄
+- 입고 연계
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [기간] [공급업체] [발주번호] [품목명] [상태▼] [초기화][조회]      │
+│                                          [사용자옵션][OCR][엑셀] │
+├─────────────────────────────────────────────────────────────────┤
+│ 📋 발주 목록                        [신규등록]                   │
+│ ─────────────────────────────────────────────────────────────  │
+│ │□|발주번호  |발주일    |공급업체  |발주금액   |상태  |담당자│   │
+│ │□|PO-2026..|2026-01-30|(주)원자재|5,000,000 |진행중|홍길동│   │
+│ │□|PO-2026..|2026-01-29|(주)부품사|3,200,000 |완료  |김철수│   │
+│ │□|PO-2026..|2026-01-28|(주)자재사|1,800,000 |진행중|이영희│   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 발주 목록 | `v2-table-list` | ✅ 가능 |
+| 발주 등록 모달 | `v2-modal-form` (필요) | ⚠️ 대체 가능 |
+
+---
+
+## 4. 테이블 정의
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'po_no', label: '발주번호', width: 120 },
+  { id: 'po_date', label: '발주일', width: 100 },
+  { id: 'supplier_name', label: '공급업체', width: 200 },
+  { id: 'total_amount', label: '발주금액', width: 120, align: 'right', format: 'currency' },
+  { id: 'delivery_date', label: '납기일', width: 100 },
+  { id: 'status', label: '상태', width: 80 },
+  { id: 'receive_status', label: '입고상태', width: 100 },
+  { id: 'manager', label: '담당자', width: 100 }
+]
+```
+
+---
+
+## 5. 검색 조건
+
+| 필드명 | 컴포넌트 | 설정 |
+|--------|----------|------|
+| 기간 | `v2-date` | dateRange: true |
+| 공급업체 | `v2-input` | placeholder: "공급업체" |
+| 발주번호 | `v2-input` | placeholder: "발주번호" |
+| 품목명 | `v2-input` | placeholder: "품목명" |
+| 상태 | `v2-select` | 작성중, 발주, 부분입고, 입고완료 |
+
+---
+
+## 6. 구현 JSON
+
+```json
+{
+  "screen_code": "PO_MAIN",
+  "screen_name": "발주관리",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
+      "config": {
+        "searchFields": [
+          { "type": "date", "id": "date_range", "placeholder": "발주기간", "dateRange": true },
+          { "type": "input", "id": "supplier_name", "placeholder": "공급업체" },
+          { "type": "input", "id": "po_no", "placeholder": "발주번호" },
+          { "type": "input", "id": "item_name", "placeholder": "품목명" },
+          { "type": "select", "id": "status", "placeholder": "상태" }
+        ],
+        "buttons": [
+          { "label": "초기화", "action": "reset", "variant": "outline" },
+          { "label": "조회", "action": "search", "variant": "primary" }
+        ],
+        "rightButtons": [
+          { "label": "사용자옵션", "action": "userOptions" },
+          { "label": "OCR입력", "action": "ocr" },
+          { "label": "엑셀다운로드", "action": "excelDownload" }
+        ]
+      }
+    },
+    {
+      "type": "v2-table-list",
+      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
+      "config": {
+        "title": "발주 목록",
+        "entityId": "purchase_order",
+        "buttons": [
+          { "label": "신규등록", "action": "create", "variant": "primary" }
+        ],
+        "columns": [
+          { "id": "po_no", "label": "발주번호", "width": 120 },
+          { "id": "po_date", "label": "발주일", "width": 100 },
+          { "id": "supplier_name", "label": "공급업체", "width": 200 },
+          { "id": "total_amount", "label": "발주금액", "width": 120, "align": "right" },
+          { "id": "delivery_date", "label": "납기일", "width": 100 },
+          { "id": "status", "label": "상태", "width": 80 },
+          { "id": "manager", "label": "담당자", "width": 100 }
+        ],
+        "rowActions": [
+          { "label": "상세", "action": "view" },
+          { "label": "수정", "action": "edit" },
+          { "label": "삭제", "action": "delete" }
+        ]
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 7. 데이터베이스 테이블
+
+### purchase_order (발주 헤더)
+```sql
+CREATE TABLE purchase_order (
+  id SERIAL PRIMARY KEY,
+  company_code VARCHAR(20) NOT NULL,
+  po_no VARCHAR(50) NOT NULL,
+  po_date DATE NOT NULL,
+  supplier_code VARCHAR(50),
+  supplier_name VARCHAR(200),
+  total_amount NUMERIC(15,2),
+  tax_amount NUMERIC(15,2),
+  status VARCHAR(20) DEFAULT 'draft',
+  delivery_date DATE,
+  manager VARCHAR(100),
+  remark TEXT,
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);
+```
+
+---
+
+## 8. 구현 체크리스트
+
+- [x] 검색 영역: v2-table-search-widget
+- [x] 발주 목록 테이블: v2-table-list
+- [x] 컬럼 정렬/필터
+- [ ] 발주 등록 모달
+- [ ] OCR 입력 기능 (별도)
+- [ ] 인쇄 기능
+
+**현재 V2 컴포넌트로 핵심 기능 구현 가능**
diff --git a/docs/screen-implementation-guide/05_equipment/.gitkeep b/docs/screen-implementation-guide/05_equipment/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/screen-implementation-guide/05_equipment/equipment-info.md b/docs/screen-implementation-guide/05_equipment/equipment-info.md
new file mode 100644
index 00000000..70405df8
--- /dev/null
+++ b/docs/screen-implementation-guide/05_equipment/equipment-info.md
@@ -0,0 +1,244 @@
+# 설비정보 화면 구현 가이드
+
+> **화면명**: 설비정보
+> **파일**: 설비정보.html
+> **분류**: 설비관리
+> **구현 가능**: ✅ 완전 (v2-card-display 활용)
+
+---
+
+## 1. 화면 개요
+
+생산 설비의 기본정보 및 상태를 관리하는 화면입니다.
+
+### 핵심 기능
+- 설비 목록 조회 (카드 형태)
+- 설비 등록/수정/삭제
+- 설비 상세 정보 탭 관리
+- 설비 이미지 관리
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [설비코드] [설비명] [설비유형▼] [상태▼] [초기화][조회]            │
+│                                          [사용자옵션][업로드][다운로드]│
+├───────────────────────┬─────────────────────────────────────────┤
+│ 🏭 설비 목록            │ [기본정보][보전이력][점검이력][가동현황]  │
+│ ───────────────       │ ─────────────────────────────────────  │
+│ [신규등록]             │ 설비코드: EQ-001                        │
+│ ┌──────────────────┐  │ 설비명: CNC 밀링머신 1호기               │
+│ │ [이미지] EQ-001   │  │ 설비유형: 가공설비                       │
+│ │ CNC 밀링 [가동중]  │  │ 상태: 가동중                            │
+│ ├──────────────────┤  │ 제조사: 현대공작기계                      │
+│ │ [이미지] EQ-002   │  ├─────────────────────────────────────────┤
+│ │ 선반 1호 [점검중]  │  │ [보전이력 테이블]                        │
+│ ├──────────────────┤  │ │일자    |유형  |내용        |담당자│    │
+│ │ [이미지] EQ-003   │  │ │2026-01|정기  |오일 교환    |김철수│    │
+│ │ 프레스 [고장]     │  │ │2026-01|수리  |베어링 교체  |이영희│    │
+│ └──────────────────┘  │                                         │
+└───────────────────────┴─────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 설비 카드 목록 | `v2-card-display` | ✅ 가능 |
+| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
+| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
+
+---
+
+## 4. 설비 카드 구조
+
+```typescript
+interface EquipmentCard {
+  id: string;
+  image: string;  // 설비 이미지 URL
+  code: string;   // 설비코드
+  name: string;   // 설비명
+  type: string;   // 설비유형
+  status: 'running' | 'idle' | 'maintenance' | 'broken';
+  location: string;
+}
+
+// 상태별 스타일
+statusStyles: {
+  running: { bg: '#d1fae5', color: '#065f46', label: '가동중' },
+  idle: { bg: '#e5e7eb', color: '#374151', label: '대기중' },
+  maintenance: { bg: '#fef3c7', color: '#92400e', label: '점검중' },
+  broken: { bg: '#fee2e2', color: '#991b1b', label: '고장' }
+}
+```
+
+---
+
+## 5. 상세 탭 구성
+
+```typescript
+tabs: [
+  {
+    id: 'basic',
+    label: '기본정보',
+    fields: [
+      { id: 'eq_code', label: '설비코드' },
+      { id: 'eq_name', label: '설비명' },
+      { id: 'eq_type', label: '설비유형' },
+      { id: 'status', label: '상태' },
+      { id: 'manufacturer', label: '제조사' },
+      { id: 'model', label: '모델명' },
+      { id: 'serial_no', label: '시리얼번호' },
+      { id: 'install_date', label: '설치일' },
+      { id: 'location', label: '설치위치' },
+      { id: 'manager', label: '담당자' }
+    ]
+  },
+  {
+    id: 'maintenance',
+    label: '보전이력',
+    type: 'table',
+    entityId: 'equipment_maintenance',
+    columns: [
+      { id: 'date', label: '일자' },
+      { id: 'type', label: '유형' },
+      { id: 'content', label: '내용' },
+      { id: 'worker', label: '담당자' },
+      { id: 'cost', label: '비용' }
+    ]
+  },
+  {
+    id: 'inspection',
+    label: '점검이력',
+    type: 'table',
+    entityId: 'equipment_inspection'
+  },
+  {
+    id: 'operation',
+    label: '가동현황',
+    type: 'chart'  // 향후 확장
+  }
+]
+```
+
+---
+
+## 6. 검색 조건
+
+| 필드명 | 컴포넌트 | 옵션 |
+|--------|----------|------|
+| 설비코드 | `v2-input` | placeholder: "설비코드" |
+| 설비명 | `v2-input` | placeholder: "설비명" |
+| 설비유형 | `v2-select` | 가공설비, 조립설비, 검사설비 등 |
+| 상태 | `v2-select` | 가동중, 대기중, 점검중, 고장 |
+
+---
+
+## 7. 현재 구현 가능 범위
+
+### ✅ 가능
+- 검색 영역: `v2-table-search-widget`
+- 설비 카드 목록: `v2-card-display` (이미지+정보 조합 지원)
+- 분할 패널 레이아웃: `v2-split-panel-layout`
+- 상세 탭: `v2-tabs-widget`
+- 보전이력/점검이력 테이블: `v2-table-list`
+
+### ⚠️ 부분 가능
+- 가동현황 차트: 별도 차트 컴포넌트 필요
+
+---
+
+## 8. 테이블 대체 구현 JSON
+
+```json
+{
+  "screen_code": "EQUIPMENT_MAIN",
+  "screen_name": "설비정보",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
+      "config": {
+        "searchFields": [
+          { "type": "input", "id": "eq_code", "placeholder": "설비코드" },
+          { "type": "input", "id": "eq_name", "placeholder": "설비명" },
+          { "type": "select", "id": "eq_type", "placeholder": "설비유형" },
+          { "type": "select", "id": "status", "placeholder": "상태",
+            "options": [
+              { "value": "running", "label": "가동중" },
+              { "value": "idle", "label": "대기중" },
+              { "value": "maintenance", "label": "점검중" },
+              { "value": "broken", "label": "고장" }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "type": "v2-split-panel-layout",
+      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
+      "config": {
+        "masterPanel": {
+          "title": "설비 목록",
+          "entityId": "equipment",
+          "buttons": [
+            { "label": "신규등록", "action": "create", "variant": "primary" }
+          ],
+          "columns": [
+            { "id": "eq_code", "label": "설비코드", "width": 100 },
+            { "id": "eq_name", "label": "설비명", "width": 200 },
+            { "id": "eq_type", "label": "설비유형", "width": 100 },
+            { "id": "status", "label": "상태", "width": 80 },
+            { "id": "location", "label": "설치위치", "width": 150 }
+          ]
+        },
+        "detailPanel": {
+          "tabs": [
+            { "id": "basic", "label": "기본정보", "type": "form" },
+            { "id": "maintenance", "label": "보전이력", "type": "table", "entityId": "eq_maintenance" },
+            { "id": "inspection", "label": "점검이력", "type": "table", "entityId": "eq_inspection" },
+            { "id": "operation", "label": "가동현황", "type": "custom" }
+          ]
+        }
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 9. v2-card-display 설정 예시
+
+`v2-card-display`는 이미 존재하는 컴포넌트입니다.
+
+```typescript
+// v2-card-display 설정
+cardDisplayConfig: {
+  cardsPerRow: 3,
+  cardSpacing: 16,
+  cardStyle: {
+    showTitle: true,      // eq_name 표시
+    showSubtitle: true,   // eq_code 표시
+    showDescription: true,
+    showImage: true,      // 설비 이미지 표시
+    showActions: true,
+    imagePosition: "top",
+    imageSize: "medium",
+  },
+  columnMapping: {
+    title: "eq_name",
+    subtitle: "eq_code",
+    image: "image_url",
+    status: "status"
+  },
+  dataSource: "table"
+}
+```
+
+**현재 V2 컴포넌트로 완전 구현 가능**
diff --git a/docs/screen-implementation-guide/06_logistics/.gitkeep b/docs/screen-implementation-guide/06_logistics/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/screen-implementation-guide/06_logistics/inout.md b/docs/screen-implementation-guide/06_logistics/inout.md
new file mode 100644
index 00000000..943e07a4
--- /dev/null
+++ b/docs/screen-implementation-guide/06_logistics/inout.md
@@ -0,0 +1,179 @@
+# 입출고관리 화면 구현 가이드
+
+> **화면명**: 입출고관리
+> **파일**: 입출고관리.html
+> **분류**: 물류관리
+> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)
+
+---
+
+## 1. 화면 개요
+
+자재/제품의 입고 및 출고 내역을 통합 관리하는 화면입니다.
+
+### 핵심 기능
+- 입출고 내역 조회/검색
+- 그룹화 기능 (입출고구분, 창고, 카테고리별)
+- 엑셀 업로드/다운로드
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [입출고구분▼][카테고리▼][창고▼][품목코드][품목명][기간][초기화][검색]│
+│                                          [사용자옵션][업로드][다운로드]│
+├─────────────────────────────────────────────────────────────────┤
+│ 📋 입출고 내역                         전체 150건                │
+│ ─────────────────────────────────────────────────────────────  │
+│ Group by: [입출고구분▼]                                         │
+│ ─────────────────────────────────────────────────────────────  │
+│ │▼ 입고 (80)                                                   │
+│ │  │IN-001|구매입고|2026-01-30|본사창고|P-001|원자재A|100|KG   │
+│ │  │IN-002|생산입고|2026-01-30|제1창고|P-002|제품A  |50 |EA   │
+│ │▼ 출고 (70)                                                   │
+│ │  │OUT-001|판매출고|2026-01-30|본사창고|P-003|제품B|30|EA    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 입출고 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
+
+---
+
+## 4. 테이블 정의
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'inout_type', label: '입출고구분', width: 100 },
+  { id: 'category', label: '카테고리', width: 120 },
+  { id: 'doc_no', label: '전표번호', width: 120 },
+  { id: 'process_date', label: '처리일자', width: 100 },
+  { id: 'warehouse', label: '창고', width: 120 },
+  { id: 'location', label: '위치', width: 100 },
+  { id: 'item_code', label: '품목코드', width: 120 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'quantity', label: '수량', width: 100, align: 'right' },
+  { id: 'unit', label: '단위', width: 60 },
+  { id: 'lot_no', label: '로트번호', width: 120 },
+  { id: 'customer', label: '거래처', width: 120 },
+  { id: 'manager', label: '담당자', width: 100 },
+  { id: 'remark', label: '비고', width: 200 }
+]
+```
+
+---
+
+## 5. 검색 조건
+
+| 필드명 | 컴포넌트 | 옵션 |
+|--------|----------|------|
+| 입출고구분 | `v2-select` | 입고, 출고 |
+| 카테고리 | `v2-select` | 구매입고, 생산입고, 반품입고, 판매출고, 생산출고 등 |
+| 창고 | `v2-select` | 본사창고, 제1창고, 제2창고 |
+| 품목코드 | `v2-input` | - |
+| 품목명 | `v2-input` | - |
+| 기간 | `v2-date` | dateRange: true |
+
+---
+
+## 6. 그룹화 기능 (v2-grouped-table 필요)
+
+```typescript
+groupByOptions: [
+  { id: 'inout_type', label: '입출고구분' },
+  { id: 'category', label: '카테고리' },
+  { id: 'warehouse', label: '창고' },
+  { id: 'item_code', label: '품목코드' },
+  { id: 'process_date', label: '처리일자' },
+  { id: 'customer', label: '거래처' }
+]
+```
+
+---
+
+## 7. 현재 구현 가능 범위
+
+### ✅ 가능
+- 검색 영역
+- 일반 테이블 목록
+
+### ⚠️ 부분 가능
+- 그룹화 없이 필터로 대체
+
+### ❌ 불가능
+- 동적 그룹화
+
+---
+
+## 8. 간소화 구현 JSON
+
+```json
+{
+  "screen_code": "INOUT_MAIN",
+  "screen_name": "입출고관리",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
+      "config": {
+        "searchFields": [
+          { "type": "select", "id": "inout_type", "placeholder": "입출고구분",
+            "options": [
+              { "value": "IN", "label": "입고" },
+              { "value": "OUT", "label": "출고" }
+            ]
+          },
+          { "type": "select", "id": "category", "placeholder": "카테고리",
+            "options": [
+              { "value": "purchase", "label": "구매입고" },
+              { "value": "production_in", "label": "생산입고" },
+              { "value": "return_in", "label": "반품입고" },
+              { "value": "sales", "label": "판매출고" },
+              { "value": "production_out", "label": "생산출고" }
+            ]
+          },
+          { "type": "select", "id": "warehouse", "placeholder": "창고" },
+          { "type": "input", "id": "item_code", "placeholder": "품목코드" },
+          { "type": "input", "id": "item_name", "placeholder": "품목명" },
+          { "type": "date", "id": "date_range", "placeholder": "처리일자", "dateRange": true }
+        ],
+        "buttons": [
+          { "label": "초기화", "action": "reset" },
+          { "label": "검색", "action": "search", "variant": "primary" }
+        ]
+      }
+    },
+    {
+      "type": "v2-table-list",
+      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
+      "config": {
+        "title": "입출고 내역",
+        "entityId": "inventory_transaction",
+        "showTotalCount": true,
+        "columns": [
+          { "id": "inout_type", "label": "입출고구분", "width": 100 },
+          { "id": "category", "label": "카테고리", "width": 120 },
+          { "id": "doc_no", "label": "전표번호", "width": 120 },
+          { "id": "process_date", "label": "처리일자", "width": 100 },
+          { "id": "warehouse", "label": "창고", "width": 120 },
+          { "id": "item_code", "label": "품목코드", "width": 120 },
+          { "id": "item_name", "label": "품목명", "width": 200 },
+          { "id": "quantity", "label": "수량", "width": 100, "align": "right" },
+          { "id": "unit", "label": "단위", "width": 60 }
+        ]
+      }
+    }
+  ]
+}
+```
+
+**v2-grouped-table 개발 시 그룹화 기능 추가 가능**
diff --git a/docs/screen-implementation-guide/07_quality/.gitkeep b/docs/screen-implementation-guide/07_quality/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/screen-implementation-guide/07_quality/inspection.md b/docs/screen-implementation-guide/07_quality/inspection.md
new file mode 100644
index 00000000..a2fdc95d
--- /dev/null
+++ b/docs/screen-implementation-guide/07_quality/inspection.md
@@ -0,0 +1,169 @@
+# 검사정보관리 화면 구현 가이드
+
+> **화면명**: 검사정보관리
+> **파일**: 검사정보관리.html
+> **분류**: 품질관리
+> **구현 가능**: ✅ 완전 (현재 V2 컴포넌트)
+
+---
+
+## 1. 화면 개요
+
+품질 검사 결과를 등록하고 관리하는 화면입니다.
+
+### 핵심 기능
+- 검사 유형별 탭 (수입검사, 공정검사, 출하검사)
+- 검사 결과 등록/수정
+- 불량 처리 연계
+- 검사 이력 관리
+
+---
+
+## 2. 화면 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ [기간] [품목] [거래처] [검사결과▼] [초기화][조회] [사용자옵션][엑셀]│
+├─────────────────────────────────────────────────────────────────┤
+│ [🔍수입검사(25)][⚙️공정검사(18)][📦출하검사(12)]                  │
+├─────────────────────────────────────────────────────────────────┤
+│ 📋 수입검사 목록                              [신규등록]          │
+│ ─────────────────────────────────────────────────────────────  │
+│ │□|검사번호  |검사일   |품목명    |검사수량|합격수량|불량수량|결과│
+│ │□|IQC-001 |2026-01-30|원자재A  |100    |98     |2     |합격│
+│ │□|IQC-002 |2026-01-30|원자재B  |200    |195    |5     |합격│
+│ │□|IQC-003 |2026-01-29|부품C   |50     |30     |20    |불합격│
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 3. V2 컴포넌트 매핑
+
+| HTML 영역 | V2 컴포넌트 | 상태 |
+|-----------|-------------|------|
+| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
+| 검사유형 탭 | `v2-tabs-widget` | ✅ 가능 |
+| 검사 목록 | `v2-table-list` | ✅ 가능 |
+
+---
+
+## 4. 탭 구성
+
+```typescript
+tabs: [
+  { id: 'incoming', label: '수입검사', icon: '🔍', count: 25 },
+  { id: 'process', label: '공정검사', icon: '⚙️', count: 18 },
+  { id: 'shipping', label: '출하검사', icon: '📦', count: 12 }
+]
+```
+
+---
+
+## 5. 테이블 정의
+
+```typescript
+columns: [
+  { id: 'checkbox', type: 'checkbox', width: 50 },
+  { id: 'inspect_no', label: '검사번호', width: 120 },
+  { id: 'inspect_date', label: '검사일', width: 100 },
+  { id: 'item_code', label: '품목코드', width: 100 },
+  { id: 'item_name', label: '품목명', width: 200 },
+  { id: 'lot_no', label: '로트번호', width: 120 },
+  { id: 'inspect_qty', label: '검사수량', width: 100, align: 'right' },
+  { id: 'pass_qty', label: '합격수량', width: 100, align: 'right' },
+  { id: 'fail_qty', label: '불량수량', width: 100, align: 'right' },
+  { id: 'result', label: '결과', width: 80 },
+  { id: 'inspector', label: '검사자', width: 100 }
+]
+```
+
+---
+
+## 6. 검색 조건
+
+| 필드명 | 컴포넌트 | 설정 |
+|--------|----------|------|
+| 기간 | `v2-date` | dateRange: true |
+| 품목 | `v2-input` | placeholder: "품목" |
+| 거래처 | `v2-input` | placeholder: "거래처" |
+| 검사결과 | `v2-select` | 전체, 합격, 불합격, 조건부합격 |
+
+---
+
+## 7. 구현 JSON
+
+```json
+{
+  "screen_code": "INSPECTION_MAIN",
+  "screen_name": "검사정보관리",
+  "components": [
+    {
+      "type": "v2-table-search-widget",
+      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
+      "config": {
+        "searchFields": [
+          { "type": "date", "id": "date_range", "placeholder": "검사기간", "dateRange": true },
+          { "type": "input", "id": "item_name", "placeholder": "품목" },
+          { "type": "input", "id": "supplier", "placeholder": "거래처" },
+          { "type": "select", "id": "result", "placeholder": "검사결과",
+            "options": [
+              { "value": "pass", "label": "합격" },
+              { "value": "fail", "label": "불합격" },
+              { "value": "conditional", "label": "조건부합격" }
+            ]
+          }
+        ],
+        "buttons": [
+          { "label": "초기화", "action": "reset" },
+          { "label": "조회", "action": "search", "variant": "primary" }
+        ]
+      }
+    },
+    {
+      "type": "v2-tabs-widget",
+      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
+      "config": {
+        "tabs": [
+          { "id": "incoming", "label": "수입검사" },
+          { "id": "process", "label": "공정검사" },
+          { "id": "shipping", "label": "출하검사" }
+        ],
+        "tabContent": {
+          "type": "v2-table-list",
+          "config": {
+            "entityId": "inspection",
+            "filterByTab": true,
+            "tabFilterField": "inspect_type",
+            "buttons": [
+              { "label": "신규등록", "action": "create", "variant": "primary" }
+            ],
+            "columns": [
+              { "id": "inspect_no", "label": "검사번호", "width": 120 },
+              { "id": "inspect_date", "label": "검사일", "width": 100 },
+              { "id": "item_name", "label": "품목명", "width": 200 },
+              { "id": "lot_no", "label": "로트번호", "width": 120 },
+              { "id": "inspect_qty", "label": "검사수량", "width": 100 },
+              { "id": "pass_qty", "label": "합격수량", "width": 100 },
+              { "id": "fail_qty", "label": "불량수량", "width": 100 },
+              { "id": "result", "label": "결과", "width": 80 }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}
+```
+
+---
+
+## 8. 구현 체크리스트
+
+- [x] 검색 영역: v2-table-search-widget
+- [x] 검사유형 탭: v2-tabs-widget
+- [x] 검사 목록 테이블: v2-table-list
+- [ ] 검사 등록 모달
+- [ ] 불량 처리 연계
+
+**현재 V2 컴포넌트로 핵심 기능 구현 가능**
diff --git a/docs/screen-implementation-guide/README.md b/docs/screen-implementation-guide/README.md
new file mode 100644
index 00000000..f82a1fda
--- /dev/null
+++ b/docs/screen-implementation-guide/README.md
@@ -0,0 +1,159 @@
+# 화면 구현 가이드
+
+V2 컴포넌트를 활용한 ERP 화면 구현 가이드입니다.
+
+---
+
+## 전체 화면 분석 요약 (2026-01-30)
+
+### 컴포넌트 커버리지
+
+| 구분 | 화면 수 | 비율 |
+|------|--------|------|
+| 현재 즉시 구현 가능 | 17개 | 65% |
+| v2-grouped-table 추가 시 | 22개 | 85% |
+| v2-tree-view 추가 시 | 24개 | 92% |
+| 별도 개발 필요 | 2개 | 8% |
+
+### 신규 컴포넌트 개발 우선순위
+
+| 순위 | 컴포넌트 | 재활용 화면 수 | ROI |
+|------|----------|--------------|-----|
+| 1 | v2-grouped-table | 5+ | 높음 |
+| 2 | v2-tree-view | 3 | 중간 |
+| 3 | v2-timeline-scheduler | 1~2 | 낮음 |
+
+> **참고**: 화면 디자이너에서 폼 배치가 자체 규격으로 처리되므로 별도 모달/폼 컴포넌트 불필요.
+> `v2-card-display`는 이미 존재합니다.
+
+> 상세 분석: [full-screen-analysis.md](./00_analysis/full-screen-analysis.md)
+
+---
+
+## 폴더 구조
+
+```
+screen-implementation-guide/
+├── 00_analysis/             # 전체 분석
+│   └── full-screen-analysis.md  # 화면 전체 분석 보고서
+│
+├── 01_master-data/          # 기준정보
+│   ├── item-info.md         # 품목정보 ✅
+│   ├── bom.md               # BOM관리 ⚠️
+│   ├── company-info.md      # 회사정보
+│   ├── department.md        # 부서관리
+│   └── options.md           # 옵션설정
+│
+├── 02_sales/                # 영업관리
+│   ├── order.md             # 수주관리 ✅
+│   ├── quote.md             # 견적관리 ✅
+│   ├── customer.md          # 거래처관리 ⚠️
+│   ├── sales-item.md        # 판매품목정보
+│   └── options.md           # 영업옵션설정
+│
+├── 03_production/           # 생산관리
+│   ├── production-plan.md   # 생산계획관리 ❌
+│   ├── work-order.md        # 작업지시 ⚠️
+│   ├── production-result.md # 생산실적
+│   ├── process-info.md      # 공정정보관리
+│   └── options.md           # 생산옵션설정
+│
+├── 04_purchase/             # 구매관리
+│   ├── purchase-order.md    # 발주관리 ✅
+│   ├── purchase-item.md     # 구매품목정보
+│   ├── supplier.md          # 공급업체관리
+│   ├── receiving.md         # 입고관리
+│   └── options.md           # 구매옵션설정
+│
+├── 05_equipment/            # 설비관리
+│   ├── equipment-info.md    # 설비정보 ✅
+│   └── options.md           # 설비옵션설정
+│
+├── 06_logistics/            # 물류관리
+│   ├── inout.md             # 입출고관리 ⚠️
+│   ├── logistics-info.md    # 물류정보관리
+│   ├── inventory.md         # 재고현황
+│   ├── warehouse.md         # 창고정보관리
+│   ├── shipping.md          # 출고관리
+│   └── options.md           # 물류옵션설정
+│
+├── 07_quality/              # 품질관리
+│   ├── inspection.md        # 검사정보관리 ✅
+│   ├── item-inspection.md   # 품목검사정보
+│   └── options.md           # 품질옵션설정
+│
+└── README.md
+
+# 범례: ✅ 완전구현 | ⚠️ 부분구현 | ❌ 신규개발필요
+```
+
+## 문서 작성 형식
+
+각 화면별 문서는 다음 구조로 작성됩니다:
+
+### 1. 테이블 선택 및 화면 구조
+- 사용할 데이터베이스 테이블
+- 테이블 간 관계 (FK, 조인)
+- 화면 전체 레이아웃
+
+### 2. 컴포넌트 배치도
+- ASCII 다이어그램으로 컴포넌트 배치
+- 각 영역별 사용 컴포넌트 명시
+
+### 3. 각 컴포넌트별 설정
+- 컴포넌트 타입
+- 상세 설정 (config)
+- 연동 설정
+
+### 4. 사용자 사용 예시 시나리오
+- 테스트 시나리오
+- 기대 동작
+- 검증 포인트
+
+## 메뉴별 Screen ID 매핑
+
+| 메뉴 | Screen ID | 상태 |
+|------|-----------|------|
+| **기준정보** | | |
+| 회사정보 | /screens/138 | 활성화 |
+| 부서관리 | /screens/1487 | 활성화 |
+| 품목정보 | /screens/140 | 활성화 |
+| 옵션설정 | /screens/1421 | 활성화 |
+| **영업관리** | | |
+| 견적관리 | - | 활성화 |
+| 수주관리 | /screens/156 | 활성화 |
+| 거래처관리 | - | 활성화 |
+| 판매품목정보 | - | 활성화 |
+| 영업옵션설정 | /screens/1552 | 활성화 |
+| **생산관리** | | |
+| 생산계획 | - | 활성화 |
+| 작업지시 | - | 활성화 |
+| 생산실적 | - | 활성화 |
+| 공정정보관리 | /screens/1599 | 활성화 |
+| BOM관리 | - | 활성화 |
+| 생산옵션설정 | /screens/1606 | 활성화 |
+| **구매관리** | | |
+| 발주관리 | /screens/1244 | 활성화 |
+| 구매품목정보 | /screens/1061 | 활성화 |
+| 공급업체관리 | /screens/1053 | 활성화 |
+| 입고관리 | /screens/1064 | 활성화 |
+| 구매옵션설정 | /screens/1057 | 활성화 |
+| **설비관리** | | |
+| 설비정보 | /screens/1253 | 활성화 |
+| 설비옵션설정 | /screens/1264 | 활성화 |
+| **물류관리** | | |
+| 물류정보관리 | /screens/1556 | 활성화 |
+| 입출고관리 | - | 활성화 |
+| 재고현황 | /screens/1587 | 활성화 |
+| 창고정보관리 | /screens/1562 | 활성화 |
+| 출고관리 | /screens/2296 | 활성화 |
+| 물류옵션설정 | /screens/1559 | 활성화 |
+| **품질관리** | | |
+| 검사정보관리 | /screens/1616 | 활성화 |
+| 품목검사정보 | /screens/2089 | 활성화 |
+| 품질옵션설정 | /screens/1622 | 활성화 |
+
+## 참고 문서
+
+- [V2 컴포넌트 분석 가이드](../V2_컴포넌트_분석_가이드.md)
+- [V2 컴포넌트 연동 가이드](../V2_컴포넌트_연동_가이드.md)
diff --git a/docs/screen-implementation-guide/SCREEN_DEVELOPMENT_STANDARD.md b/docs/screen-implementation-guide/SCREEN_DEVELOPMENT_STANDARD.md
new file mode 100644
index 00000000..606caa03
--- /dev/null
+++ b/docs/screen-implementation-guide/SCREEN_DEVELOPMENT_STANDARD.md
@@ -0,0 +1,572 @@
+# Screen Development Standard Guide (AI Agent Reference)
+
+> **Purpose**: Ensure consistent screen development output regardless of who develops it
+> **Target**: AI Agents (Cursor, etc.), Developers
+> **Version**: 1.0.0
+
+---
+
+## CRITICAL RULES
+
+1. **ONLY use V2 components** (components with `v2-` prefix)
+2. **SEPARATE UI and Logic**: UI in `screen_layouts_v2`, Logic in `dataflow_diagrams`
+3. **ALWAYS apply company_code filtering** (multi-tenancy)
+
+---
+
+## AVAILABLE V2 COMPONENTS (23 total)
+
+### Input Components
+| ID | Name | Purpose |
+|----|------|---------|
+| `v2-input` | Input | text, number, password, email, tel, url, textarea |
+| `v2-select` | Select | dropdown, combobox, radio, checkbox |
+| `v2-date` | Date | date, time, datetime, daterange, month, year |
+
+### Display Components
+| ID | Name | Purpose |
+|----|------|---------|
+| `v2-text-display` | Text Display | labels, titles |
+| `v2-card-display` | Card Display | table data as cards |
+| `v2-aggregation-widget` | Aggregation Widget | sum, avg, count, min, max |
+
+### Table/Data Components
+| ID | Name | Purpose |
+|----|------|---------|
+| `v2-table-list` | Table List | data grid with CRUD |
+| `v2-table-search-widget` | Search Widget | table search/filter |
+| `v2-pivot-grid` | Pivot Grid | multi-dimensional analysis |
+
+### Layout Components
+| ID | Name | Purpose |
+|----|------|---------|
+| `v2-split-panel-layout` | Split Panel | master-detail layout |
+| `v2-tabs-widget` | Tabs Widget | tab navigation |
+| `v2-section-card` | Section Card | titled grouping container |
+| `v2-section-paper` | Section Paper | background grouping |
+| `v2-divider-line` | Divider | area separator |
+| `v2-repeat-container` | Repeat Container | data-driven repeat |
+| `v2-repeater` | Repeater | repeat control |
+| `v2-repeat-screen-modal` | Repeat Screen Modal | modal repeat |
+
+### Action/Special Components
+| ID | Name | Purpose |
+|----|------|---------|
+| `v2-button-primary` | Primary Button | save, delete, etc. |
+| `v2-numbering-rule` | Numbering Rule | auto code generation |
+| `v2-category-manager` | Category Manager | category management |
+| `v2-location-swap-selector` | Location Swap | location selection |
+| `v2-rack-structure` | Rack Structure | warehouse rack visualization |
+| `v2-media` | Media | image/video display |
+
+---
+
+## SCREEN PATTERNS (5 types)
+
+### Pattern A: Basic Master Screen
+**When**: Single table CRUD
+**Components**:
+```
+v2-table-search-widget
+v2-table-list
+v2-button-primary
+```
+
+### Pattern B: Master-Detail Screen
+**When**: Master selection → Detail display
+**Components**:
+```
+v2-split-panel-layout
+  ├─ left: v2-table-list (master)
+  └─ right: v2-table-list (detail)
+```
+**Required Config**:
+```json
+{
+  "leftPanel": { "tableName": "master_table" },
+  "rightPanel": {
+    "tableName": "detail_table",
+    "relation": { "type": "detail", "foreignKey": "master_id" }
+  },
+  "splitRatio": 30
+}
+```
+
+### Pattern C: Master-Detail + Tabs
+**When**: Master selection → Multiple tabs
+**Components**:
+```
+v2-split-panel-layout
+  ├─ left: v2-table-list (master)
+  └─ right: v2-tabs-widget
+```
+
+### Pattern D: Card View
+**When**: Image + info card display
+**Components**:
+```
+v2-table-search-widget
+v2-card-display
+```
+**Required Config**:
+```json
+{
+  "cardsPerRow": 3,
+  "columnMapping": {
+    "title": "name",
+    "subtitle": "code",
+    "image": "image_url"
+  }
+}
+```
+
+### Pattern E: Pivot Analysis
+**When**: Multi-dimensional aggregation
+**Components**:
+```
+v2-pivot-grid
+```
+
+---
+
+## DATABASE TABLES
+
+### Screen Definition
+```sql
+-- screen_definitions: Screen basic info
+INSERT INTO screen_definitions (
+  screen_name, screen_code, description, table_name, company_code
+) VALUES (...) RETURNING screen_id;
+
+-- screen_layouts_v2: UI layout (JSON)
+INSERT INTO screen_layouts_v2 (
+  screen_id, company_code, layout_data
+) VALUES (...);
+
+-- screen_menu_assignments: Menu connection
+INSERT INTO screen_menu_assignments (
+  screen_id, menu_objid, company_code
+) VALUES (...);
+```
+
+### Control Management (Business Logic)
+```sql
+-- dataflow_diagrams: Business logic
+INSERT INTO dataflow_diagrams (
+  diagram_name, company_code, control, plan
+) VALUES (...);
+```
+
+---
+
+## UI SETTING vs BUSINESS LOGIC
+
+### UI Setting (Screen Designer)
+| Item | Storage |
+|------|---------|
+| Component placement | screen_layouts_v2.layout_data |
+| Table name | layout_data.tableName |
+| Column visibility | layout_data.columns |
+| Search fields | layout_data.searchFields |
+| Basic save/delete | button config.action.type |
+
+### Business Logic (Control Management)
+| Item | Storage |
+|------|---------|
+| Conditional execution | dataflow_diagrams.control |
+| Multi-table save | dataflow_diagrams.plan |
+| Before/after trigger | control.triggerType |
+| Field mapping | plan.mappings |
+
+---
+
+## BUSINESS LOGIC JSON STRUCTURE
+
+### Control (Conditions)
+```json
+{
+  "control": {
+    "actionType": "update|insert|delete",
+    "triggerType": "before|after",
+    "conditions": [
+      {
+        "id": "unique-id",
+        "type": "condition",
+        "field": "column_name",
+        "operator": "=|!=|>|<|>=|<=|LIKE|IN|IS NULL",
+        "value": "compare_value",
+        "dataType": "string|number|date|boolean"
+      }
+    ]
+  }
+}
+```
+
+### Plan (Actions)
+```json
+{
+  "plan": {
+    "actions": [
+      {
+        "id": "action-id",
+        "actionType": "update|insert|delete",
+        "targetTable": "table_name",
+        "fieldMappings": [
+          {
+            "sourceField": "source_column",
+            "targetField": "target_column",
+            "defaultValue": "static_value",
+            "valueType": "field|static"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+### Special Values
+| Value | Meaning |
+|-------|---------|
+| `#NOW` | Current timestamp |
+| `#USER` | Current user ID |
+| `#COMPANY` | Current company code |
+
+---
+
+## DEVELOPMENT STEPS
+
+### Step 1: Analyze Requirements
+```
+1. Which tables? (table names)
+2. Table relationships? (FK)
+3. Which pattern? (A/B/C/D/E)
+4. Which buttons?
+5. Business logic per button?
+```
+
+### Step 2: INSERT screen_definitions
+```sql
+INSERT INTO screen_definitions (
+  screen_name, screen_code, description, table_name, company_code, created_at
+) VALUES (
+  '화면명', 'SCREEN_CODE', '설명', 'main_table', 'COMPANY_CODE', NOW()
+) RETURNING screen_id;
+```
+
+### Step 3: INSERT screen_layouts_v2
+```sql
+INSERT INTO screen_layouts_v2 (
+  screen_id, company_code, layout_data
+) VALUES (
+  {screen_id}, 'COMPANY_CODE', '{layout_json}'::jsonb
+);
+```
+
+### Step 4: INSERT dataflow_diagrams (if complex logic)
+```sql
+INSERT INTO dataflow_diagrams (
+  diagram_name, company_code, control, plan
+) VALUES (
+  '화면명_제어', 'COMPANY_CODE', '{control_json}'::jsonb, '{plan_json}'::jsonb
+) RETURNING diagram_id;
+```
+
+### Step 5: Link button to dataflow
+In layout_data, set button config:
+```json
+{
+  "id": "btn-action",
+  "componentType": "v2-button-primary",
+  "componentConfig": {
+    "text": "확정",
+    "enableDataflowControl": true,
+    "dataflowDiagramId": {diagram_id}
+  }
+}
+```
+
+### Step 6: INSERT screen_menu_assignments
+```sql
+INSERT INTO screen_menu_assignments (
+  screen_id, menu_objid, company_code
+) VALUES (
+  {screen_id}, {menu_objid}, 'COMPANY_CODE'
+);
+```
+
+---
+
+## EXAMPLE: Order Management
+
+### Requirements
+```
+Screen: 수주관리 (Order Management)
+Pattern: B (Master-Detail)
+Tables:
+  - Master: order_master
+  - Detail: order_detail
+Buttons:
+  - [저장]: Save to order_master
+  - [확정]: 
+    - Condition: status = '대기'
+    - Action: Update status to '확정'
+    - Additional: Insert to order_history
+```
+
+### layout_data JSON
+```json
+{
+  "components": [
+    {
+      "id": "search-1",
+      "componentType": "v2-table-search-widget",
+      "position": {"x": 0, "y": 0},
+      "size": {"width": 1920, "height": 80}
+    },
+    {
+      "id": "split-1",
+      "componentType": "v2-split-panel-layout",
+      "position": {"x": 0, "y": 80},
+      "size": {"width": 1920, "height": 800},
+      "componentConfig": {
+        "leftPanel": {"tableName": "order_master"},
+        "rightPanel": {
+          "tableName": "order_detail",
+          "relation": {"type": "detail", "foreignKey": "order_id"}
+        },
+        "splitRatio": 30
+      }
+    },
+    {
+      "id": "btn-save",
+      "componentType": "v2-button-primary",
+      "componentConfig": {
+        "text": "저장",
+        "action": {"type": "save"}
+      }
+    },
+    {
+      "id": "btn-confirm",
+      "componentType": "v2-button-primary",
+      "componentConfig": {
+        "text": "확정",
+        "enableDataflowControl": true,
+        "dataflowDiagramId": 123
+      }
+    }
+  ]
+}
+```
+
+### dataflow_diagrams JSON (for 확정 button)
+```json
+{
+  "control": {
+    "actionType": "update",
+    "triggerType": "after",
+    "conditions": [
+      {
+        "id": "cond-1",
+        "type": "condition",
+        "field": "status",
+        "operator": "=",
+        "value": "대기",
+        "dataType": "string"
+      }
+    ]
+  },
+  "plan": {
+    "actions": [
+      {
+        "id": "action-1",
+        "actionType": "update",
+        "targetTable": "order_master",
+        "fieldMappings": [
+          {"targetField": "status", "defaultValue": "확정"}
+        ]
+      },
+      {
+        "id": "action-2",
+        "actionType": "insert",
+        "targetTable": "order_history",
+        "fieldMappings": [
+          {"sourceField": "order_no", "targetField": "order_no"},
+          {"sourceField": "customer_name", "targetField": "customer_name"},
+          {"defaultValue": "#NOW", "targetField": "confirmed_at"}
+        ]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## NOT SUPPORTED (Requires Custom Development)
+
+| UI Type | Status | Alternative |
+|---------|--------|-------------|
+| Tree View | ❌ | Develop `v2-tree-view` |
+| Grouped Table | ❌ | Develop `v2-grouped-table` |
+| Gantt Chart | ❌ | Separate development |
+| Drag & Drop | ❌ | Use order column |
+
+---
+
+## CHECKLIST
+
+### Screen Creation
+```
+□ screen_definitions INSERT completed
+□ screen_layouts_v2 INSERT completed
+□ screen_menu_assignments INSERT completed (if needed)
+□ company_code filtering applied
+□ All components have v2- prefix
+```
+
+### Business Logic
+```
+□ Basic actions (save/delete) → Screen designer setting
+□ Conditional/Multi-table → dataflow_diagrams INSERT
+□ Button config has dataflowDiagramId
+□ control.conditions configured
+□ plan.actions or plan.mappings configured
+```
+
+---
+
+## BUSINESS LOGIC REQUEST FORMAT (MANDATORY)
+
+> **WARNING**: No format = No processing. Write it properly, idiot.
+> Vague input = vague output. No input = no output.
+
+### Request Template
+
+```
+=== BUSINESS LOGIC REQUEST ===
+
+【SCREEN INFO】
+- Screen Name: 
+- Company Code: 
+- Menu ID (if any): 
+
+【TABLE INFO】
+- Main Table: 
+- Detail Table (if any): 
+- FK Relation (if any): 
+
+【BUTTON LIST】
+Button 1:
+  - Name: 
+  - Action Type: (save/delete/update/query/other)
+  - Condition (if any): 
+  - Target Table: 
+  - Additional Actions (if any): 
+
+Button 2:
+  - Name: 
+  - ...
+
+【ADDITIONAL REQUIREMENTS】
+- 
+```
+
+### Valid Example
+
+```
+=== BUSINESS LOGIC REQUEST ===
+
+【SCREEN INFO】
+- Screen Name: 수주관리 (Order Management)
+- Company Code: ssalmeog
+- Menu ID: 55566
+
+【TABLE INFO】
+- Main Table: order_master
+- Detail Table: order_detail
+- FK Relation: order_id
+
+【BUTTON LIST】
+Button 1:
+  - Name: 저장 (Save)
+  - Action Type: save
+  - Condition: none
+  - Target Table: order_master, order_detail
+  - Additional Actions: none
+
+Button 2:
+  - Name: 확정 (Confirm)
+  - Action Type: update
+  - Condition: status = '대기'
+  - Target Table: order_master
+  - Additional Actions: 
+    1. Change status to '확정'
+    2. INSERT to order_history (order_no, customer_name, confirmed_at=NOW)
+
+Button 3:
+  - Name: 삭제 (Delete)
+  - Action Type: delete
+  - Condition: status != '확정'
+  - Target Table: order_master, order_detail (cascade)
+  - Additional Actions: none
+
+【ADDITIONAL REQUIREMENTS】
+- Confirmed orders cannot be modified/deleted
+- Auto-numbering for order_no (ORDER-YYYYMMDD-0001)
+```
+
+### Invalid Examples (DO NOT DO THIS)
+
+```
+❌ "Make an order management screen"
+   → Which table? Buttons? Logic?
+
+❌ "Save button should save"
+   → To which table? Conditions?
+
+❌ "Handle inventory when confirmed"
+   → Which table? Increase? Decrease? By how much?
+
+❌ "Similar to the previous screen"
+   → What previous screen?
+```
+
+### Complex Logic Format
+
+For multiple conditions or complex workflows:
+
+```
+【COMPLEX BUTTON LOGIC】
+Button Name: 출고확정 (Shipment Confirm)
+
+Execution Conditions:
+  Cond1: status = '출고대기' AND
+  Cond2: qty > 0 AND
+  Cond3: warehouse_id IS NOT NULL
+
+Execution Steps (in order):
+  1. shipment_master.status → '출고완료'
+  2. Decrease qty in inventory (WHERE item_code = current_row.item_code)
+  3. INSERT to shipment_history:
+     - shipment_no ← current_row.shipment_no
+     - shipped_qty ← current_row.qty
+     - shipped_at ← #NOW
+     - shipped_by ← #USER
+
+On Failure:
+  - Insufficient stock: Show "재고가 부족합니다"
+  - Condition not met: Show "출고대기 상태만 확정 가능합니다"
+```
+
+---
+
+## REFERENCE PATHS
+
+| Item | Path/Table |
+|------|------------|
+| Control Management Page | `/admin/systemMng/dataflow` |
+| Screen Definition Table | `screen_definitions` |
+| Layout Table | `screen_layouts_v2` |
+| Control Table | `dataflow_diagrams` |
+| Menu Assignment Table | `screen_menu_assignments` |
diff --git a/docs/screen-implementation-guide/_TEMPLATE.md b/docs/screen-implementation-guide/_TEMPLATE.md
new file mode 100644
index 00000000..e9efd0ba
--- /dev/null
+++ b/docs/screen-implementation-guide/_TEMPLATE.md
@@ -0,0 +1,212 @@
+# [화면명]
+
+> Screen ID: /screens/XXX
+> 메뉴 경로: [L2 메뉴] > [L3 메뉴]
+
+## 1. 테이블 선택 및 화면 구조
+
+### 1.1 사용 테이블
+
+| 테이블명 | 용도 | 비고 |
+|----------|------|------|
+| `table_name` | 마스터 데이터 | 주 테이블 |
+| `detail_table` | 디테일 데이터 | FK: master_id |
+
+### 1.2 테이블 관계
+
+```
+┌─────────────────┐       ┌─────────────────┐
+│  master_table   │       │  detail_table   │
+├─────────────────┤       ├─────────────────┤
+│ id (PK)         │──1:N──│ master_id (FK)  │
+│ name            │       │ id (PK)         │
+│ ...             │       │ ...             │
+└─────────────────┘       └─────────────────┘
+```
+
+### 1.3 화면 구조 개요
+
+- **화면 유형**: [목록형 / 마스터-디테일 / 단일 폼 / 복합]
+- **주요 기능**: [CRUD / 조회 / 집계 등]
+
+---
+
+## 2. 컴포넌트 배치도
+
+### 2.1 전체 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [검색 영역] v2-table-search-widget                          │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│ [메인 테이블] v2-table-list                                 │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│ [버튼 영역] v2-button-primary (신규, 저장, 삭제)            │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 컴포넌트 목록
+
+| 컴포넌트 ID | 컴포넌트 타입 | 역할 |
+|-------------|---------------|------|
+| `search-widget` | v2-table-search-widget | 검색 필터 |
+| `main-table` | v2-table-list | 데이터 목록 |
+| `btn-new` | v2-button-primary | 신규 등록 |
+| `btn-save` | v2-button-primary | 저장 |
+| `btn-delete` | v2-button-primary | 삭제 |
+
+---
+
+## 3. 각 컴포넌트별 설정
+
+### 3.1 v2-table-search-widget
+
+```json
+{
+  "targetTableId": "main-table",
+  "searchFields": [
+    {
+      "field": "name",
+      "label": "이름",
+      "type": "text"
+    },
+    {
+      "field": "status",
+      "label": "상태",
+      "type": "select",
+      "options": [
+        { "value": "active", "label": "활성" },
+        { "value": "inactive", "label": "비활성" }
+      ]
+    }
+  ]
+}
+```
+
+### 3.2 v2-table-list
+
+```json
+{
+  "tableName": "master_table",
+  "columns": [
+    {
+      "field": "id",
+      "headerName": "ID",
+      "width": 80,
+      "visible": false
+    },
+    {
+      "field": "name",
+      "headerName": "이름",
+      "width": 150
+    },
+    {
+      "field": "status",
+      "headerName": "상태",
+      "width": 100
+    }
+  ],
+  "features": {
+    "checkbox": true,
+    "pagination": true,
+    "sorting": true
+  },
+  "pagination": {
+    "pageSize": 20
+  }
+}
+```
+
+### 3.3 v2-button-primary (저장)
+
+```json
+{
+  "label": "저장",
+  "actionType": "save",
+  "variant": "default",
+  "afterSaveActions": ["refreshTable"]
+}
+```
+
+---
+
+## 4. 컴포넌트 연동 설정
+
+### 4.1 이벤트 흐름
+
+```
+[검색 입력]
+    │
+    ▼
+v2-table-search-widget
+    │ onFilterChange
+    ▼
+v2-table-list (자동 재조회)
+    │
+    ▼
+[데이터 표시]
+```
+
+### 4.2 연동 설정
+
+| 소스 컴포넌트 | 이벤트/액션 | 대상 컴포넌트 | 동작 |
+|---------------|-------------|---------------|------|
+| search-widget | onFilterChange | main-table | 필터 적용 |
+| btn-save | click | main-table | refreshTable |
+
+---
+
+## 5. 사용자 사용 예시 시나리오
+
+### 시나리오 1: 데이터 조회
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 화면 진입 | 전체 목록 표시 |
+| 2 | 검색어 입력 | 필터링된 결과 표시 |
+| 3 | 정렬 클릭 | 정렬 순서 변경 |
+
+### 시나리오 2: 데이터 등록
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | [신규] 버튼 클릭 | 등록 모달/폼 표시 |
+| 2 | 데이터 입력 | 입력 필드 채움 |
+| 3 | [저장] 버튼 클릭 | 저장 완료, 목록 갱신 |
+
+### 시나리오 3: 데이터 수정
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 행 더블클릭 | 수정 모달/폼 표시 |
+| 2 | 데이터 수정 | 필드 값 변경 |
+| 3 | [저장] 버튼 클릭 | 저장 완료, 목록 갱신 |
+
+### 시나리오 4: 데이터 삭제
+
+| 단계 | 사용자 동작 | 기대 결과 |
+|------|-------------|-----------|
+| 1 | 행 체크박스 선택 | 선택 표시 |
+| 2 | [삭제] 버튼 클릭 | 삭제 확인 다이얼로그 |
+| 3 | 확인 | 삭제 완료, 목록 갱신 |
+
+---
+
+## 6. 검증 체크리스트
+
+- [ ] 데이터 조회가 정상 동작하는가?
+- [ ] 검색 필터가 정상 동작하는가?
+- [ ] 신규 등록이 정상 동작하는가?
+- [ ] 수정이 정상 동작하는가?
+- [ ] 삭제가 정상 동작하는가?
+- [ ] 페이지네이션이 정상 동작하는가?
+- [ ] 정렬이 정상 동작하는가?
+
+---
+
+## 7. 참고 사항
+
+- 관련 화면: [관련 화면명](./related-screen.md)
+- 특이 사항: 없음
diff --git a/docs/screen-implementation-guide/화면개발_표준_가이드.md b/docs/screen-implementation-guide/화면개발_표준_가이드.md
new file mode 100644
index 00000000..83774f38
--- /dev/null
+++ b/docs/screen-implementation-guide/화면개발_표준_가이드.md
@@ -0,0 +1,706 @@
+# 화면 개발 표준 가이드
+
+> **목적**: 어떤 개발자/AI가 화면을 개발하든 동일한 결과물이 나오도록 하는 표준 가이드
+> **대상**: 개발자, AI 에이전트 (Cursor 등)
+> **버전**: 1.0.0
+
+---
+
+## 1. 개요
+
+이 문서는 WACE 솔루션에서 화면을 개발할 때 반드시 따라야 하는 표준입니다.
+비즈니스 로직을 어떻게 설명하든, 최종 결과물은 이 가이드대로 생성되어야 합니다.
+
+### 핵심 원칙
+
+1. **V2 컴포넌트만 사용**: `v2-` 접두사가 붙은 컴포넌트만 사용
+2. **UI와 로직 분리**: UI는 `screen_layouts_v2`, 비즈니스 로직은 `dataflow_diagrams`
+3. **멀티테넌시 필수**: 모든 쿼리에 `company_code` 필터링
+
+---
+
+## 2. 사용 가능한 V2 컴포넌트 목록 (23개)
+
+### 입력 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-input` | 입력 | 텍스트, 숫자, 비밀번호, 이메일 등 |
+| `v2-select` | 선택 | 드롭다운, 콤보박스, 라디오, 체크박스 |
+| `v2-date` | 날짜 | 날짜, 시간, 날짜범위 |
+
+### 표시 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-text-display` | 텍스트 표시 | 라벨, 제목 |
+| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 |
+| `v2-aggregation-widget` | 집계 위젯 | 합계, 평균, 개수 등 |
+
+### 테이블/데이터 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-table-list` | 테이블 리스트 | 데이터 조회/편집 테이블 |
+| `v2-table-search-widget` | 검색 필터 | 테이블 검색/필터 |
+| `v2-pivot-grid` | 피벗 그리드 | 다차원 분석 |
+
+### 레이아웃 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 |
+| `v2-tabs-widget` | 탭 위젯 | 탭 전환 |
+| `v2-section-card` | 섹션 카드 | 제목+테두리 그룹화 |
+| `v2-section-paper` | 섹션 페이퍼 | 배경색 그룹화 |
+| `v2-divider-line` | 구분선 | 영역 구분 |
+| `v2-repeat-container` | 리피터 컨테이너 | 데이터 반복 렌더링 |
+| `v2-repeater` | 리피터 | 반복 컨트롤 |
+| `v2-repeat-screen-modal` | 반복 화면 모달 | 모달 반복 |
+
+### 액션/특수 컴포넌트
+
+| ID | 이름 | 용도 |
+|----|------|------|
+| `v2-button-primary` | 기본 버튼 | 저장, 삭제 등 액션 |
+| `v2-numbering-rule` | 채번규칙 | 자동 코드 생성 |
+| `v2-category-manager` | 카테고리 관리자 | 카테고리 관리 |
+| `v2-location-swap-selector` | 위치 교환 | 위치 선택/교환 |
+| `v2-rack-structure` | 랙 구조 | 창고 랙 시각화 |
+| `v2-media` | 미디어 | 이미지/동영상 표시 |
+
+---
+
+## 3. 화면 패턴 (5가지)
+
+### 패턴 A: 기본 마스터 화면
+
+**사용 조건**: 단일 테이블 CRUD
+
+**컴포넌트 구성**:
+```
+v2-table-search-widget (검색)
+v2-table-list (테이블)
+v2-button-primary (저장/삭제)
+```
+
+**레이아웃**:
+```
+┌─────────────────────────────────────────────────┐
+│ [검색필드들] [조회] [엑셀]                       │ ← v2-table-search-widget
+├─────────────────────────────────────────────────┤
+│ 제목        [신규] [삭제]                        │
+│ ─────────────────────────────────────────────── │
+│ □ | 코드 | 이름 | 상태 | 등록일 |               │ ← v2-table-list
+└─────────────────────────────────────────────────┘
+```
+
+---
+
+### 패턴 B: 마스터-디테일 화면
+
+**사용 조건**: 마스터 테이블 선택 → 디테일 테이블 표시
+
+**컴포넌트 구성**:
+```
+v2-split-panel-layout (분할)
+  ├─ 좌측: v2-table-list (마스터)
+  └─ 우측: v2-table-list (디테일)
+```
+
+**레이아웃**:
+```
+┌──────────────────┬──────────────────────────────┐
+│ 마스터 리스트    │ 디테일 리스트                │
+│ ───────────────  │                              │
+│ □ A001 항목1     │ [디테일 테이블]              │
+│ □ A002 항목2 ←   │                              │
+└──────────────────┴──────────────────────────────┘
+        v2-split-panel-layout
+```
+
+**필수 설정**:
+```json
+{
+  "leftPanel": {
+    "tableName": "마스터_테이블명"
+  },
+  "rightPanel": {
+    "tableName": "디테일_테이블명",
+    "relation": {
+      "type": "detail",
+      "foreignKey": "master_id"
+    }
+  },
+  "splitRatio": 30
+}
+```
+
+---
+
+### 패턴 C: 마스터-디테일 + 탭
+
+**사용 조건**: 마스터 선택 → 여러 탭으로 상세 정보 표시
+
+**컴포넌트 구성**:
+```
+v2-split-panel-layout (분할)
+  ├─ 좌측: v2-table-list (마스터)
+  └─ 우측: v2-tabs-widget (탭)
+           ├─ 탭1: v2-table-list
+           ├─ 탭2: v2-table-list
+           └─ 탭3: 폼 컴포넌트들
+```
+
+---
+
+### 패턴 D: 카드 뷰
+
+**사용 조건**: 이미지+정보 카드 형태 표시
+
+**컴포넌트 구성**:
+```
+v2-table-search-widget (검색)
+v2-card-display (카드)
+```
+
+**필수 설정**:
+```json
+{
+  "cardsPerRow": 3,
+  "columnMapping": {
+    "title": "name",
+    "subtitle": "code",
+    "image": "image_url",
+    "status": "status"
+  }
+}
+```
+
+---
+
+### 패턴 E: 피벗 분석
+
+**사용 조건**: 다차원 집계/분석
+
+**컴포넌트 구성**:
+```
+v2-pivot-grid (피벗)
+```
+
+**필수 설정**:
+```json
+{
+  "fields": [
+    { "field": "region", "area": "row" },
+    { "field": "year", "area": "column" },
+    { "field": "amount", "area": "data", "summaryType": "sum" }
+  ]
+}
+```
+
+---
+
+## 4. 데이터베이스 구조
+
+### 화면 정의 테이블
+
+```sql
+-- screen_definitions: 화면 기본 정보
+INSERT INTO screen_definitions (
+  screen_id,
+  screen_name,
+  screen_code,
+  description,
+  table_name,
+  company_code
+) VALUES (...);
+
+-- screen_layouts_v2: UI 레이아웃 (JSON)
+INSERT INTO screen_layouts_v2 (
+  screen_id,
+  company_code,
+  layout_data  -- JSON: 컴포넌트 배치 정보
+) VALUES (...);
+
+-- screen_menu_assignments: 메뉴 연결
+INSERT INTO screen_menu_assignments (
+  screen_id,
+  menu_objid,
+  company_code
+) VALUES (...);
+```
+
+### 제어관리 테이블
+
+```sql
+-- dataflow_diagrams: 비즈니스 로직
+INSERT INTO dataflow_diagrams (
+  diagram_name,
+  company_code,
+  control,  -- JSON: 조건 설정
+  plan      -- JSON: 실행 계획
+) VALUES (...);
+```
+
+---
+
+## 5. UI 설정 vs 비즈니스 로직 설정
+
+### UI 설정 (화면 디자이너에서 처리)
+
+| 항목 | 저장 위치 |
+|------|----------|
+| 컴포넌트 배치 | screen_layouts_v2.layout_data |
+| 테이블명 | layout_data 내 tableName |
+| 컬럼 표시/숨김 | layout_data 내 columns |
+| 검색 필드 | layout_data 내 searchFields |
+| 기본 저장/삭제 | 버튼 config.action.type |
+
+### 비즈니스 로직 (제어관리에서 처리)
+
+| 항목 | 저장 위치 |
+|------|----------|
+| 조건부 실행 | dataflow_diagrams.control |
+| 다중 테이블 저장 | dataflow_diagrams.plan |
+| 버튼 전/후 트리거 | dataflow_diagrams.control.triggerType |
+| 필드 매핑 | dataflow_diagrams.plan.mappings |
+
+---
+
+## 6. 비즈니스 로직 설정 표준 형식
+
+### 기본 구조
+
+```json
+{
+  "control": {
+    "actionType": "update",
+    "triggerType": "after",
+    "conditions": [
+      {
+        "id": "조건ID",
+        "type": "condition",
+        "field": "status",
+        "operator": "=",
+        "value": "대기",
+        "dataType": "string"
+      }
+    ]
+  },
+  "plan": {
+    "mappings": [
+      {
+        "id": "매핑ID",
+        "sourceField": "소스필드",
+        "targetField": "타겟필드",
+        "targetTable": "타겟테이블",
+        "valueType": "field"
+      }
+    ]
+  }
+}
+```
+
+### 조건 연산자
+
+| 연산자 | 설명 |
+|--------|------|
+| `=` | 같음 |
+| `!=` | 다름 |
+| `>` | 큼 |
+| `<` | 작음 |
+| `>=` | 크거나 같음 |
+| `<=` | 작거나 같음 |
+| `LIKE` | 포함 |
+| `IN` | 목록에 포함 |
+| `IS NULL` | NULL 값 |
+
+### 액션 타입
+
+| 타입 | 설명 |
+|------|------|
+| `insert` | 새 데이터 삽입 |
+| `update` | 기존 데이터 수정 |
+| `delete` | 데이터 삭제 |
+
+### 트리거 타입
+
+| 타입 | 설명 |
+|------|------|
+| `before` | 버튼 클릭 전 실행 |
+| `after` | 버튼 클릭 후 실행 |
+
+---
+
+## 7. 화면 개발 순서
+
+### Step 1: 요구사항 분석
+
+```
+1. 어떤 테이블을 사용하는가?
+2. 테이블 간 관계는? (FK)
+3. 어떤 패턴인가? (A/B/C/D/E)
+4. 어떤 버튼이 필요한가?
+5. 각 버튼의 비즈니스 로직은?
+```
+
+### Step 2: screen_definitions INSERT
+
+```sql
+INSERT INTO screen_definitions (
+  screen_name,
+  screen_code,
+  description,
+  table_name,
+  company_code,
+  created_at
+) VALUES (
+  '화면명',
+  'SCREEN_CODE',
+  '화면 설명',
+  '메인테이블명',
+  '회사코드',
+  NOW()
+) RETURNING screen_id;
+```
+
+### Step 3: screen_layouts_v2 INSERT
+
+```sql
+INSERT INTO screen_layouts_v2 (
+  screen_id,
+  company_code,
+  layout_data
+) VALUES (
+  위에서_받은_screen_id,
+  '회사코드',
+  '{"components": [...], "layout": {...}}'::jsonb
+);
+```
+
+### Step 4: dataflow_diagrams INSERT (비즈니스 로직 있는 경우)
+
+```sql
+INSERT INTO dataflow_diagrams (
+  diagram_name,
+  company_code,
+  control,
+  plan
+) VALUES (
+  '화면명_제어',
+  '회사코드',
+  '{"조건설정"}'::jsonb,
+  '{"실행계획"}'::jsonb
+);
+```
+
+### Step 5: screen_menu_assignments INSERT
+
+```sql
+INSERT INTO screen_menu_assignments (
+  screen_id,
+  menu_objid,
+  company_code
+) VALUES (
+  screen_id,
+  메뉴ID,
+  '회사코드'
+);
+```
+
+---
+
+## 8. 예시: 수주관리 화면
+
+### 요구사항
+
+```
+화면명: 수주관리
+패턴: B (마스터-디테일)
+테이블:
+  - 마스터: order_master
+  - 디테일: order_detail
+버튼:
+  - [저장]: order_master에 저장
+  - [확정]: 
+    - 조건: status = '대기'
+    - 동작: status를 '확정'으로 변경
+    - 추가: order_history에 이력 저장
+```
+
+### screen_definitions
+
+```sql
+INSERT INTO screen_definitions (
+  screen_name, screen_code, description, table_name, company_code
+) VALUES (
+  '수주관리', 'ORDER_MNG', '수주를 관리하는 화면', 'order_master', 'COMPANY_A'
+);
+```
+
+### screen_layouts_v2 (layout_data)
+
+```json
+{
+  "components": [
+    {
+      "id": "search-1",
+      "componentType": "v2-table-search-widget",
+      "position": {"x": 0, "y": 0},
+      "size": {"width": 1920, "height": 80}
+    },
+    {
+      "id": "split-1",
+      "componentType": "v2-split-panel-layout",
+      "position": {"x": 0, "y": 80},
+      "size": {"width": 1920, "height": 800},
+      "componentConfig": {
+        "leftPanel": {
+          "tableName": "order_master"
+        },
+        "rightPanel": {
+          "tableName": "order_detail",
+          "relation": {
+            "type": "detail",
+            "foreignKey": "order_id"
+          }
+        },
+        "splitRatio": 30
+      }
+    },
+    {
+      "id": "btn-save",
+      "componentType": "v2-button-primary",
+      "componentConfig": {
+        "text": "저장",
+        "action": {"type": "save"}
+      }
+    },
+    {
+      "id": "btn-confirm",
+      "componentType": "v2-button-primary",
+      "componentConfig": {
+        "text": "확정",
+        "enableDataflowControl": true,
+        "dataflowDiagramId": 123
+      }
+    }
+  ]
+}
+```
+
+### dataflow_diagrams (확정 버튼 로직)
+
+```json
+{
+  "control": {
+    "actionType": "update",
+    "triggerType": "after",
+    "conditions": [
+      {
+        "id": "cond-1",
+        "type": "condition",
+        "field": "status",
+        "operator": "=",
+        "value": "대기",
+        "dataType": "string"
+      }
+    ]
+  },
+  "plan": {
+    "actions": [
+      {
+        "id": "action-1",
+        "actionType": "update",
+        "targetTable": "order_master",
+        "fieldMappings": [
+          {"targetField": "status", "defaultValue": "확정"}
+        ]
+      },
+      {
+        "id": "action-2",
+        "actionType": "insert",
+        "targetTable": "order_history",
+        "fieldMappings": [
+          {"sourceField": "order_no", "targetField": "order_no"},
+          {"sourceField": "customer_name", "targetField": "customer_name"},
+          {"defaultValue": "#NOW", "targetField": "confirmed_at"}
+        ]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 9. 지원하지 않는 UI (별도 개발 필요)
+
+| UI 유형 | 상태 | 대안 |
+|---------|------|------|
+| 트리 뷰 | ❌ 미지원 | 테이블로 대체 or `v2-tree-view` 개발 필요 |
+| 그룹화 테이블 | ❌ 미지원 | 일반 테이블로 대체 or `v2-grouped-table` 개발 필요 |
+| 간트 차트 | ❌ 미지원 | 별도 개발 필요 |
+| 드래그앤드롭 | ❌ 미지원 | 순서 컬럼으로 대체 |
+
+---
+
+## 10. 체크리스트
+
+### 화면 생성 시
+
+```
+□ screen_definitions INSERT 완료
+□ screen_layouts_v2 INSERT 완료
+□ screen_menu_assignments INSERT 완료 (메뉴 연결 필요 시)
+□ company_code 필터링 적용
+□ 사용한 컴포넌트가 모두 v2- 접두사인지 확인
+```
+
+### 비즈니스 로직 설정 시
+
+```
+□ 기본 액션 (저장/삭제)만 → 화면 디자이너에서 설정
+□ 조건부/다중테이블 → dataflow_diagrams INSERT
+□ 버튼 config에 dataflowDiagramId 연결
+□ control.conditions 설정
+□ plan.actions 또는 plan.mappings 설정
+```
+
+---
+
+## 11. 비즈니스 로직 요청 양식 (필수)
+
+> **경고**: 양식대로 안 쓰면 처리 안 함. 병신아 제대로 써.
+> 대충 쓰면 대충 만들어지고, 안 쓰면 안 만들어줌.
+
+### 11.1 양식 템플릿
+
+```
+=== 비즈니스 로직 요청서 ===
+
+【화면 정보】
+- 화면명: 
+- 회사코드: 
+- 메뉴ID (있으면): 
+
+【테이블 정보】
+- 메인 테이블: 
+- 디테일 테이블 (있으면): 
+- 관계 FK (있으면): 
+
+【버튼 목록】
+버튼1:
+  - 버튼명: 
+  - 동작 유형: (저장/삭제/수정/조회/기타)
+  - 조건 (있으면): 
+  - 대상 테이블: 
+  - 추가 동작 (있으면): 
+
+버튼2:
+  - 버튼명: 
+  - ...
+
+【추가 요구사항】
+- 
+```
+
+### 11.2 작성 예시 (올바른 예시)
+
+```
+=== 비즈니스 로직 요청서 ===
+
+【화면 정보】
+- 화면명: 수주관리
+- 회사코드: ssalmeog
+- 메뉴ID: 55566
+
+【테이블 정보】
+- 메인 테이블: order_master
+- 디테일 테이블: order_detail
+- 관계 FK: order_id
+
+【버튼 목록】
+버튼1:
+  - 버튼명: 저장
+  - 동작 유형: 저장
+  - 조건: 없음
+  - 대상 테이블: order_master, order_detail
+  - 추가 동작: 없음
+
+버튼2:
+  - 버튼명: 확정
+  - 동작 유형: 수정
+  - 조건: status = '대기'
+  - 대상 테이블: order_master
+  - 추가 동작: 
+    1. status를 '확정'으로 변경
+    2. order_history에 이력 INSERT (order_no, customer_name, confirmed_at=현재시간)
+
+버튼3:
+  - 버튼명: 삭제
+  - 동작 유형: 삭제
+  - 조건: status != '확정'
+  - 대상 테이블: order_master, order_detail (cascade)
+  - 추가 동작: 없음
+
+【추가 요구사항】
+- 확정된 수주는 수정/삭제 불가
+- 수주번호 자동채번 (ORDER-YYYYMMDD-0001)
+```
+
+### 11.3 잘못된 예시 (이렇게 쓰면 안 됨)
+
+```
+❌ "수주관리 화면 만들어줘"
+   → 테이블이 뭔데? 버튼은? 로직은?
+
+❌ "저장 버튼 누르면 저장해줘"
+   → 어떤 테이블에? 조건은? 
+
+❌ "확정하면 재고 처리해줘"
+   → 어떤 테이블? 증가? 감소? 얼마나?
+
+❌ "이전 화면이랑 비슷하게"
+   → 이전 화면이 뭔데?
+```
+
+### 11.4 복잡한 로직 추가 양식
+
+조건이 여러 개이거나 복잡한 경우:
+
+```
+【복잡한 버튼 로직】
+버튼명: 출고확정
+
+실행 조건:
+  조건1: status = '출고대기' AND
+  조건2: qty > 0 AND
+  조건3: warehouse_id IS NOT NULL
+
+실행 동작 (순서대로):
+  1. shipment_master.status → '출고완료'
+  2. inventory에서 qty만큼 감소 (WHERE item_code = 현재행.item_code)
+  3. shipment_history에 INSERT:
+     - shipment_no ← 현재행.shipment_no
+     - shipped_qty ← 현재행.qty
+     - shipped_at ← 현재시간
+     - shipped_by ← 현재사용자
+
+실패 시:
+  - 재고 부족: "재고가 부족합니다" 메시지
+  - 조건 불충족: "출고대기 상태만 확정 가능합니다" 메시지
+```
+
+---
+
+## 12. 참고 경로
+
+| 항목 | 경로/테이블 |
+|------|------------|
+| 제어관리 페이지 | `/admin/systemMng/dataflow` |
+| 화면 정의 테이블 | `screen_definitions` |
+| 레이아웃 테이블 | `screen_layouts_v2` |
+| 제어관리 테이블 | `dataflow_diagrams` |
+| 메뉴 연결 테이블 | `screen_menu_assignments` |
diff --git a/docs/v2-sales-order-modal-layout.json b/docs/v2-sales-order-modal-layout.json
new file mode 100644
index 00000000..13e929e0
--- /dev/null
+++ b/docs/v2-sales-order-modal-layout.json
@@ -0,0 +1,573 @@
+{
+  "version": "2.0",
+  "screenResolution": {
+    "width": 1400,
+    "height": 900,
+    "name": "수주등록 모달",
+    "category": "modal"
+  },
+  "components": [
+    {
+      "id": "section-options",
+      "url": "@/lib/registry/components/v2-section-card",
+      "position": { "x": 20, "y": 20, "z": 1 },
+      "size": { "width": 1360, "height": 80 },
+      "overrides": {
+        "componentConfig": {
+          "title": "",
+          "showHeader": false,
+          "padding": "md",
+          "borderStyle": "solid"
+        }
+      },
+      "displayOrder": 0
+    },
+    {
+      "id": "select-input-method",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 40, "y": 35, "z": 2 },
+      "size": { "width": 300, "height": 40 },
+      "overrides": {
+        "label": "입력 방식",
+        "columnName": "input_method",
+        "mode": "dropdown",
+        "source": "static",
+        "options": [
+          { "value": "customer_first", "label": "거래처 우선" },
+          { "value": "item_first", "label": "품목 우선" }
+        ],
+        "placeholder": "입력 방식 선택"
+      },
+      "displayOrder": 1
+    },
+    {
+      "id": "select-sales-type",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 360, "y": 35, "z": 2 },
+      "size": { "width": 300, "height": 40 },
+      "overrides": {
+        "label": "판매 유형",
+        "columnName": "sales_type",
+        "mode": "dropdown",
+        "source": "static",
+        "options": [
+          { "value": "domestic", "label": "국내 판매" },
+          { "value": "overseas", "label": "해외 판매" }
+        ],
+        "placeholder": "판매 유형 선택"
+      },
+      "displayOrder": 2
+    },
+    {
+      "id": "select-price-method",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 680, "y": 35, "z": 2 },
+      "size": { "width": 250, "height": 40 },
+      "overrides": {
+        "label": "단가 방식",
+        "columnName": "price_method",
+        "mode": "dropdown",
+        "source": "static",
+        "options": [
+          { "value": "standard", "label": "기준 단가" },
+          { "value": "contract", "label": "계약 단가" },
+          { "value": "custom", "label": "개별 입력" }
+        ],
+        "placeholder": "단가 방식"
+      },
+      "displayOrder": 3
+    },
+    {
+      "id": "checkbox-price-edit",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 950, "y": 35, "z": 2 },
+      "size": { "width": 150, "height": 40 },
+      "overrides": {
+        "label": "단가 수정 허용",
+        "columnName": "allow_price_edit",
+        "mode": "check",
+        "source": "static",
+        "options": [{ "value": "Y", "label": "허용" }]
+      },
+      "displayOrder": 4
+    },
+
+    {
+      "id": "section-customer-info",
+      "url": "@/lib/registry/components/v2-section-card",
+      "position": { "x": 20, "y": 110, "z": 1 },
+      "size": { "width": 1360, "height": 120 },
+      "overrides": {
+        "componentConfig": {
+          "title": "거래처 정보",
+          "showHeader": true,
+          "padding": "md",
+          "borderStyle": "solid"
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 5
+    },
+    {
+      "id": "select-customer",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 40, "y": 155, "z": 3 },
+      "size": { "width": 320, "height": 40 },
+      "overrides": {
+        "label": "거래처 *",
+        "columnName": "partner_id",
+        "mode": "dropdown",
+        "source": "entity",
+        "entityTable": "customer_mng",
+        "entityValueColumn": "customer_code",
+        "entityLabelColumn": "customer_name",
+        "searchable": true,
+        "placeholder": "거래처명 입력하여 검색",
+        "required": true,
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 6
+    },
+    {
+      "id": "input-manager",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 380, "y": 155, "z": 3 },
+      "size": { "width": 240, "height": 40 },
+      "overrides": {
+        "label": "담당자",
+        "columnName": "manager_name",
+        "placeholder": "담당자",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 7
+    },
+    {
+      "id": "input-delivery-partner",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 640, "y": 155, "z": 3 },
+      "size": { "width": 240, "height": 40 },
+      "overrides": {
+        "label": "납품처",
+        "columnName": "delivery_partner_id",
+        "placeholder": "납품처",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 8
+    },
+    {
+      "id": "input-delivery-address",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 900, "y": 155, "z": 3 },
+      "size": { "width": 460, "height": 40 },
+      "overrides": {
+        "label": "납품장소",
+        "columnName": "delivery_address",
+        "placeholder": "납품장소",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 9
+    },
+
+    {
+      "id": "section-item-first",
+      "url": "@/lib/registry/components/v2-section-card",
+      "position": { "x": 20, "y": 110, "z": 1 },
+      "size": { "width": 1360, "height": 200 },
+      "overrides": {
+        "componentConfig": {
+          "title": "품목 및 거래처별 수주",
+          "showHeader": true,
+          "padding": "md",
+          "borderStyle": "solid"
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "item_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 10
+    },
+
+    {
+      "id": "section-items",
+      "url": "@/lib/registry/components/v2-section-card",
+      "position": { "x": 20, "y": 240, "z": 1 },
+      "size": { "width": 1360, "height": 280 },
+      "overrides": {
+        "componentConfig": {
+          "title": "추가된 품목",
+          "showHeader": true,
+          "padding": "md",
+          "borderStyle": "solid"
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 11
+    },
+    {
+      "id": "btn-item-search",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "position": { "x": 1140, "y": 245, "z": 5 },
+      "size": { "width": 100, "height": 36 },
+      "overrides": {
+        "label": "품목 검색",
+        "action": {
+          "type": "openModal",
+          "modalType": "itemSelection"
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 12
+    },
+    {
+      "id": "btn-shipping-plan",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "position": { "x": 1250, "y": 245, "z": 5 },
+      "size": { "width": 100, "height": 36 },
+      "overrides": {
+        "label": "출하계획",
+        "webTypeConfig": {
+          "variant": "destructive"
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 13
+    },
+    {
+      "id": "repeater-items",
+      "url": "@/lib/registry/components/v2-repeater",
+      "position": { "x": 40, "y": 290, "z": 3 },
+      "size": { "width": 1320, "height": 200 },
+      "overrides": {
+        "renderMode": "modal",
+        "dataSource": {
+          "tableName": "sales_order_detail",
+          "foreignKey": "order_no",
+          "referenceKey": "order_no"
+        },
+        "columns": [
+          { "field": "part_code", "header": "품번", "width": 100 },
+          { "field": "part_name", "header": "품명", "width": 150 },
+          { "field": "spec", "header": "규격", "width": 100 },
+          { "field": "unit", "header": "단위", "width": 80 },
+          { "field": "qty", "header": "수량", "width": 100, "editable": true },
+          {
+            "field": "unit_price",
+            "header": "단가",
+            "width": 100,
+            "editable": true
+          },
+          { "field": "amount", "header": "금액", "width": 100 },
+          {
+            "field": "due_date",
+            "header": "납기일",
+            "width": 120,
+            "editable": true
+          }
+        ],
+        "modal": {
+          "sourceTable": "item_info",
+          "sourceColumns": [
+            "part_code",
+            "part_name",
+            "spec",
+            "material",
+            "unit_price"
+          ],
+          "filterCondition": {}
+        },
+        "features": {
+          "showAddButton": false,
+          "showDeleteButton": true,
+          "inlineEdit": true
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "input_method",
+          "operator": "=",
+          "value": "customer_first",
+          "action": "show"
+        }
+      },
+      "displayOrder": 14
+    },
+
+    {
+      "id": "section-trade-info",
+      "url": "@/lib/registry/components/v2-section-card",
+      "position": { "x": 20, "y": 530, "z": 1 },
+      "size": { "width": 1360, "height": 150 },
+      "overrides": {
+        "componentConfig": {
+          "title": "무역 정보",
+          "showHeader": true,
+          "padding": "md",
+          "borderStyle": "solid"
+        },
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 15
+    },
+    {
+      "id": "select-incoterms",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 40, "y": 575, "z": 3 },
+      "size": { "width": 200, "height": 40 },
+      "overrides": {
+        "label": "인코텀즈",
+        "columnName": "incoterms",
+        "mode": "dropdown",
+        "source": "static",
+        "options": [
+          { "value": "FOB", "label": "FOB" },
+          { "value": "CIF", "label": "CIF" },
+          { "value": "EXW", "label": "EXW" },
+          { "value": "DDP", "label": "DDP" }
+        ],
+        "placeholder": "선택",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 16
+    },
+    {
+      "id": "select-payment-term",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 260, "y": 575, "z": 3 },
+      "size": { "width": 200, "height": 40 },
+      "overrides": {
+        "label": "결제 조건",
+        "columnName": "payment_term",
+        "mode": "dropdown",
+        "source": "static",
+        "options": [
+          { "value": "TT", "label": "T/T" },
+          { "value": "LC", "label": "L/C" },
+          { "value": "DA", "label": "D/A" },
+          { "value": "DP", "label": "D/P" }
+        ],
+        "placeholder": "선택",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 17
+    },
+    {
+      "id": "select-currency",
+      "url": "@/lib/registry/components/v2-select",
+      "position": { "x": 480, "y": 575, "z": 3 },
+      "size": { "width": 200, "height": 40 },
+      "overrides": {
+        "label": "통화",
+        "columnName": "currency",
+        "mode": "dropdown",
+        "source": "static",
+        "options": [
+          { "value": "KRW", "label": "KRW (원)" },
+          { "value": "USD", "label": "USD (달러)" },
+          { "value": "EUR", "label": "EUR (유로)" },
+          { "value": "JPY", "label": "JPY (엔)" },
+          { "value": "CNY", "label": "CNY (위안)" }
+        ],
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 18
+    },
+    {
+      "id": "input-port-loading",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 40, "y": 625, "z": 3 },
+      "size": { "width": 200, "height": 40 },
+      "overrides": {
+        "label": "선적항",
+        "columnName": "port_of_loading",
+        "placeholder": "선적항",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 19
+    },
+    {
+      "id": "input-port-discharge",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 260, "y": 625, "z": 3 },
+      "size": { "width": 200, "height": 40 },
+      "overrides": {
+        "label": "도착항",
+        "columnName": "port_of_discharge",
+        "placeholder": "도착항",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 20
+    },
+    {
+      "id": "input-hs-code",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 480, "y": 625, "z": 3 },
+      "size": { "width": 200, "height": 40 },
+      "overrides": {
+        "label": "HS Code",
+        "columnName": "hs_code",
+        "placeholder": "HS Code",
+        "conditionalConfig": {
+          "enabled": true,
+          "field": "sales_type",
+          "operator": "=",
+          "value": "overseas",
+          "action": "show"
+        }
+      },
+      "displayOrder": 21
+    },
+
+    {
+      "id": "section-additional",
+      "url": "@/lib/registry/components/v2-section-card",
+      "position": { "x": 20, "y": 690, "z": 1 },
+      "size": { "width": 1360, "height": 130 },
+      "overrides": {
+        "componentConfig": {
+          "title": "추가 정보",
+          "showHeader": true,
+          "padding": "md",
+          "borderStyle": "solid"
+        }
+      },
+      "displayOrder": 22
+    },
+    {
+      "id": "input-memo",
+      "url": "@/lib/registry/components/v2-input",
+      "position": { "x": 40, "y": 735, "z": 3 },
+      "size": { "width": 1320, "height": 70 },
+      "overrides": {
+        "label": "메모",
+        "columnName": "memo",
+        "type": "textarea",
+        "placeholder": "메모를 입력하세요"
+      },
+      "displayOrder": 23
+    },
+
+    {
+      "id": "btn-cancel",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "position": { "x": 1180, "y": 840, "z": 5 },
+      "size": { "width": 90, "height": 40 },
+      "overrides": {
+        "label": "취소",
+        "webTypeConfig": {
+          "variant": "outline"
+        },
+        "action": {
+          "type": "close"
+        }
+      },
+      "displayOrder": 24
+    },
+    {
+      "id": "btn-save",
+      "url": "@/lib/registry/components/v2-button-primary",
+      "position": { "x": 1280, "y": 840, "z": 5 },
+      "size": { "width": 90, "height": 40 },
+      "overrides": {
+        "label": "저장",
+        "action": {
+          "type": "save"
+        }
+      },
+      "displayOrder": 25
+    }
+  ],
+  "gridSettings": {
+    "columns": 12,
+    "gap": 16,
+    "padding": 20,
+    "snapToGrid": true,
+    "showGrid": false
+  }
+}
diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 73e5d282..17c52897 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -773,18 +773,81 @@ export default function TableManagementPage() {
 
       // 2. 모든 컬럼 설정 저장
       if (columns.length > 0) {
-        const columnSettings = columns.map((column) => ({
-          columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
-          columnLabel: column.displayName, // 사용자가 입력한 표시명
-          inputType: column.inputType || "text",
-          detailSettings: column.detailSettings || "",
-          description: column.description || "",
-          codeCategory: column.codeCategory || "",
-          codeValue: column.codeValue || "",
-          referenceTable: column.referenceTable || "",
-          referenceColumn: column.referenceColumn || "",
-          displayColumn: column.displayColumn || "", // 🎯 Entity 조인에서 표시할 컬럼명
-        }));
+        const columnSettings = columns.map((column) => {
+          // detailSettings 계산
+          let finalDetailSettings = column.detailSettings || "";
+
+          // 🆕 Numbering 타입인 경우 numberingRuleId를 detailSettings에 포함
+          if (column.inputType === "numbering" && column.numberingRuleId) {
+            let existingSettings: Record<string, unknown> = {};
+            if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
+              try {
+                existingSettings = JSON.parse(finalDetailSettings);
+              } catch {
+                existingSettings = {};
+              }
+            }
+            const numberingSettings = {
+              ...existingSettings,
+              numberingRuleId: column.numberingRuleId,
+            };
+            finalDetailSettings = JSON.stringify(numberingSettings);
+            console.log("🔧 전체저장 - Numbering 설정 JSON 생성:", {
+              columnName: column.columnName,
+              numberingRuleId: column.numberingRuleId,
+              finalDetailSettings,
+            });
+          }
+
+          // 🆕 Entity 타입인 경우 detailSettings에 엔티티 설정 포함
+          if (column.inputType === "entity" && column.referenceTable) {
+            let existingSettings: Record<string, unknown> = {};
+            if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
+              try {
+                existingSettings = JSON.parse(finalDetailSettings);
+              } catch {
+                existingSettings = {};
+              }
+            }
+            const entitySettings = {
+              ...existingSettings,
+              entityTable: column.referenceTable,
+              entityCodeColumn: column.referenceColumn || "id",
+              entityLabelColumn: column.displayColumn || "name",
+            };
+            finalDetailSettings = JSON.stringify(entitySettings);
+          }
+
+          // 🆕 Code 타입인 경우 hierarchyRole을 detailSettings에 포함
+          if (column.inputType === "code" && column.hierarchyRole) {
+            let existingSettings: Record<string, unknown> = {};
+            if (typeof finalDetailSettings === "string" && finalDetailSettings.trim().startsWith("{")) {
+              try {
+                existingSettings = JSON.parse(finalDetailSettings);
+              } catch {
+                existingSettings = {};
+              }
+            }
+            const codeSettings = {
+              ...existingSettings,
+              hierarchyRole: column.hierarchyRole,
+            };
+            finalDetailSettings = JSON.stringify(codeSettings);
+          }
+
+          return {
+            columnName: column.columnName, // 실제 DB 컬럼명 (변경 불가)
+            columnLabel: column.displayName, // 사용자가 입력한 표시명
+            inputType: column.inputType || "text",
+            detailSettings: finalDetailSettings,
+            description: column.description || "",
+            codeCategory: column.codeCategory || "",
+            codeValue: column.codeValue || "",
+            referenceTable: column.referenceTable || "",
+            referenceColumn: column.referenceColumn || "",
+            displayColumn: column.displayColumn || "", // 🎯 Entity 조인에서 표시할 컬럼명
+          };
+        });
 
         // console.log("저장할 전체 설정:", { tableLabel, tableDescription, columnSettings });
 
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index eb7ecce5..9f043adf 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -26,8 +26,11 @@ import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 
 import { evaluateConditional } from "@/lib/utils/conditionalEvaluator"; // 조건부 표시 평가
 import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
 import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter"; // V2 Zod 기반 변환
+import { useScheduleGenerator, ScheduleConfirmDialog } from "@/lib/v2-core/services/ScheduleGeneratorService"; // 스케줄 자동 생성
 
 function ScreenViewPage() {
+  // 스케줄 자동 생성 서비스 활성화
+  const { showConfirmDialog, previewResult, handleConfirm, closeDialog, isLoading: scheduleLoading } = useScheduleGenerator();
   const params = useParams();
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -158,7 +161,6 @@ function ScreenViewPage() {
             // V2 레이아웃: Zod 기반 변환 (기본값 병합)
             const convertedLayout = convertV2ToLegacy(v2Response);
             if (convertedLayout) {
-              console.log("📦 V2 레이아웃 로드 (Zod 기반):", v2Response.components?.length || 0, "개 컴포넌트");
               setLayout({
                 ...convertedLayout,
                 screenResolution: v2Response.screenResolution || convertedLayout.screenResolution,
@@ -202,7 +204,90 @@ function ScreenViewPage() {
     }
   }, [screenId]);
 
-  // 🆕 autoFill 자동 입력 초기화
+  // 🆕 메인 테이블 데이터 자동 로드 (단일 레코드 폼)
+  // 화면의 메인 테이블에서 사용자 회사 코드로 데이터를 조회하여 폼에 자동 채움
+  useEffect(() => {
+    const loadMainTableData = async () => {
+      if (!screen || !layout || !layout.components || !companyCode) {
+        return;
+      }
+
+      const mainTableName = screen.tableName;
+      if (!mainTableName) {
+        return;
+      }
+
+      // 테이블 위젯이 없는 경우에만 자동 로드 (테이블이 있으면 행 선택으로 데이터 로드)
+      const hasTableWidget = layout.components.some(
+        (comp: any) => 
+          comp.componentType === "table-list" || 
+          comp.componentType === "v2-table-list" ||
+          comp.widgetType === "table"
+      );
+
+      if (hasTableWidget) {
+        return;
+      }
+
+      // 인풋 컴포넌트들 중 메인 테이블의 컬럼을 사용하는 것들 찾기
+      const inputComponents = layout.components.filter((comp: any) => {
+        const compType = comp.componentType || comp.widgetType;
+        const isInputType = compType?.includes("input") || 
+                           compType?.includes("select") || 
+                           compType?.includes("textarea") ||
+                           compType?.includes("v2-input") ||
+                           compType?.includes("v2-select") ||
+                           compType?.includes("v2-media") ||
+                           compType?.includes("file-upload"); // 🆕 레거시 파일 업로드 포함
+        const hasColumnName = !!(comp as any).columnName;
+        return isInputType && hasColumnName;
+      });
+
+      if (inputComponents.length === 0) {
+        return;
+      }
+
+      // 메인 테이블에서 현재 회사의 데이터 조회
+      try {
+        const { tableTypeApi } = await import("@/lib/api/screen");
+        
+        // company_code로 필터링하여 단일 레코드 조회
+        const result = await tableTypeApi.getTableRecord(
+          mainTableName,
+          "company_code",
+          companyCode,
+          "*" // 모든 컬럼
+        );
+
+        if (result && result.record) {
+          console.log("📦 메인 테이블 데이터 자동 로드:", mainTableName, result.record);
+          
+          // 각 인풋 컴포넌트에 해당하는 데이터 채우기
+          const newFormData: Record<string, any> = {};
+          inputComponents.forEach((comp: any) => {
+            const columnName = comp.columnName;
+            if (columnName && result.record[columnName] !== undefined) {
+              newFormData[columnName] = result.record[columnName];
+            }
+          });
+
+          if (Object.keys(newFormData).length > 0) {
+            setFormData((prev) => ({
+              ...prev,
+              ...newFormData,
+            }));
+          }
+        }
+      } catch (error) {
+        console.log("메인 테이블 자동 로드 실패 (정상일 수 있음):", error);
+        // 에러는 무시 - 데이터가 없거나 권한이 없을 수 있음
+      }
+    };
+
+    loadMainTableData();
+  }, [screen, layout, companyCode]);
+
+  // 🆕 개별 autoFill 처리 (메인 테이블과 다른 테이블에서 조회하는 경우)
   useEffect(() => {
     const initAutoFill = async () => {
       if (!layout || !layout.components || !user) {
@@ -215,7 +300,7 @@ function ScreenViewPage() {
           const widget = comp as any;
           const fieldName = widget.columnName || widget.id;
 
-          // autoFill 처리
+          // autoFill 처리 (명시적으로 설정된 경우만)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
@@ -909,6 +994,16 @@ function ScreenViewPage() {
                 });
               }}
             />
+
+            {/* 스케줄 생성 확인 다이얼로그 */}
+            <ScheduleConfirmDialog
+              open={showConfirmDialog}
+              onOpenChange={(open) => !open && closeDialog()}
+              preview={previewResult}
+              onConfirm={() => handleConfirm(true)}
+              onCancel={closeDialog}
+              isLoading={scheduleLoading}
+            />
           </div>
         </TableOptionsProvider>
       </ActiveTabProvider>
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 68fa0cb1..49fb3355 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -13,6 +13,7 @@ import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
 import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
 import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
+import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter";
 
 interface ScreenModalState {
   isOpen: boolean;
@@ -126,6 +127,24 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 모달이 열린 시간 추적 (저장 성공 이벤트 무시용)
   const modalOpenedAtRef = React.useRef<number>(0);
 
+  // 🆕 채번 필드 수동 입력 값 변경 이벤트 리스너
+  useEffect(() => {
+    const handleNumberingValueChanged = (event: CustomEvent) => {
+      const { columnName, value } = event.detail;
+      if (columnName && modalState.isOpen) {
+        setFormData((prev) => ({
+          ...prev,
+          [columnName]: value,
+        }));
+      }
+    };
+
+    window.addEventListener("numberingValueChanged", handleNumberingValueChanged as EventListener);
+    return () => {
+      window.removeEventListener("numberingValueChanged", handleNumberingValueChanged as EventListener);
+    };
+  }, [modalState.isOpen]);
+
   // 전역 모달 이벤트 리스너
   useEffect(() => {
     const handleOpenModal = (event: CustomEvent) => {
@@ -139,6 +158,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         splitPanelParentData,
         selectedData: eventSelectedData,
         selectedIds,
+        isCreateMode, // 🆕 복사 모드 플래그 (true면 editData가 있어도 originalData 설정 안 함)
       } = event.detail;
 
       // 🆕 모달 열린 시간 기록
@@ -162,7 +182,8 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       }
 
       // 🆕 editData가 있으면 formData와 originalData로 설정 (수정 모드)
-      if (editData) {
+      // 🔧 단, isCreateMode가 true이면 (복사 모드) originalData를 설정하지 않음 → 채번 생성 가능
+      if (editData && !isCreateMode) {
         // 🆕 배열인 경우 두 가지 데이터를 설정:
         // 1. formData: 첫 번째 요소(객체) - 일반 입력 필드용 (TextInput 등)
         // 2. selectedData: 전체 배열 - 다중 항목 컴포넌트용 (SelectedItemsDetailInput 등)
@@ -176,6 +197,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           setSelectedData([editData]); // 🔧 단일 객체도 배열로 변환하여 저장
           setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
         }
+      } else if (editData && isCreateMode) {
+        // 🆕 복사 모드: formData만 설정하고 originalData는 null로 유지 (채번 생성 가능)
+        if (Array.isArray(editData)) {
+          const firstRecord = editData[0] || {};
+          setFormData(firstRecord);
+          setSelectedData(editData);
+        } else {
+          setFormData(editData);
+          setSelectedData([editData]);
+        }
+        setOriginalData(null); // 🔧 복사 모드에서는 originalData를 null로 설정
       } else {
         // 🆕 신규 등록 모드: 분할 패널 부모 데이터가 있으면 미리 설정
         // 🔧 중요: 신규 등록 시에는 연결 필드(equipment_code 등)만 전달해야 함
@@ -322,12 +354,27 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     try {
       setLoading(true);
 
-      // 화면 정보와 레이아웃 데이터 로딩
-      const [screenInfo, layoutData] = await Promise.all([
+      // 화면 정보와 레이아웃 데이터 로딩 (V2 API 사용으로 기본값 병합)
+      const [screenInfo, v2LayoutData] = await Promise.all([
         screenApi.getScreen(screenId),
-        screenApi.getLayout(screenId),
+        screenApi.getLayoutV2(screenId),
       ]);
 
+      // V2 → Legacy 변환 (기본값 병합 포함)
+      let layoutData: any = null;
+      if (v2LayoutData && isValidV2Layout(v2LayoutData)) {
+        layoutData = convertV2ToLegacy(v2LayoutData);
+        if (layoutData) {
+          // screenResolution은 V2 레이아웃에서 직접 가져오기
+          layoutData.screenResolution = v2LayoutData.screenResolution || layoutData.screenResolution;
+        }
+      }
+      
+      // V2 레이아웃이 없으면 기존 API로 fallback
+      if (!layoutData) {
+        layoutData = await screenApi.getLayout(screenId);
+      }
+
       // 🆕 URL 파라미터 확인 (수정 모드)
       if (typeof window !== "undefined") {
         const urlParams = new URLSearchParams(window.location.search);
@@ -337,8 +384,6 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         const groupByColumnsParam = urlParams.get("groupByColumns");
         const primaryKeyColumn = urlParams.get("primaryKeyColumn"); // 🆕 Primary Key 컬럼명
 
-        console.log("📋 URL 파라미터 확인:", { mode, editId, tableName, groupByColumnsParam, primaryKeyColumn });
-
         // 수정 모드이고 editId가 있으면 해당 레코드 조회
         if (mode === "edit" && editId && tableName) {
           try {
@@ -363,14 +408,8 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
             // 🆕 Primary Key 컬럼명 전달 (백엔드 자동 감지 실패 시 사용)
             if (primaryKeyColumn) {
               params.primaryKeyColumn = primaryKeyColumn;
-              console.log("✅ [ScreenModal] primaryKeyColumn을 params에 추가:", primaryKeyColumn);
             }
 
-            console.log("📡 [ScreenModal] 실제 API 요청:", {
-              url: `/data/${tableName}/${editId}`,
-              params,
-            });
-
             const apiResponse = await apiClient.get(`/data/${tableName}/${editId}`, { params });
             const response = apiResponse.data;
 
@@ -483,26 +522,34 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       return {
         className: "w-fit min-w-[400px] max-w-4xl max-h-[90vh] overflow-hidden p-0",
         style: undefined, // undefined로 변경 - defaultWidth/defaultHeight 사용
+        needsScroll: false,
       };
     }
 
     // 화면관리에서 설정한 크기 = 컨텐츠 영역 크기
-    // 실제 모달 크기 = 컨텐츠 + 헤더 + 연속등록 체크박스 + gap + padding
-    const headerHeight = 52; // DialogHeader (타이틀 + border-b + py-3)
-    const footerHeight = 52; // 연속 등록 모드 체크박스 영역
-    const dialogGap = 16; // DialogContent gap-4
-    const extraPadding = 24; // 추가 여백 (안전 마진)
+    // 실제 모달 크기 = 컨텐츠 + 헤더 + 연속등록 체크박스 + gap + 패딩
+    // 🔧 DialogContent의 gap-4 (16px × 2) + 컨텐츠 pt-6 (24px) 포함
+    const headerHeight = 48; // DialogHeader (타이틀 + border-b + py-3)
+    const footerHeight = 44; // 연속 등록 모드 체크박스 영역
+    const dialogGap = 32; // gap-4 × 2 (header-content, content-footer 사이)
+    const contentTopPadding = 24; // pt-6 (컨텐츠 영역 상단 패딩)
+    const horizontalPadding = 16; // 좌우 패딩 최소화
 
-    const totalHeight = screenDimensions.height + headerHeight + footerHeight + dialogGap + extraPadding;
+    const totalHeight = screenDimensions.height + headerHeight + footerHeight + dialogGap + contentTopPadding;
+    const maxAvailableHeight = window.innerHeight * 0.95;
+    
+    // 콘텐츠가 화면 높이를 초과할 때만 스크롤 필요
+    const needsScroll = totalHeight > maxAvailableHeight;
 
     return {
       className: "overflow-hidden p-0",
       style: {
-        width: `${Math.min(screenDimensions.width + 48, window.innerWidth * 0.98)}px`, // 좌우 패딩 추가
-        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`,
+        width: `${Math.min(screenDimensions.width + horizontalPadding, window.innerWidth * 0.98)}px`,
+        // 🔧 height 대신 max-height만 설정 - 콘텐츠가 작으면 자동으로 줄어듦
+        maxHeight: `${maxAvailableHeight}px`,
         maxWidth: "98vw",
-        maxHeight: "95vh",
       },
+      needsScroll,
     };
   };
 
@@ -570,7 +617,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   return (
     <Dialog open={modalState.isOpen} onOpenChange={handleClose}>
       <DialogContent
-        className={`${modalStyle.className} ${className || ""} max-w-none`}
+        className={`${modalStyle.className} ${className || ""} max-w-none flex flex-col`}
         {...(modalStyle.style && { style: modalStyle.style })}
       >
         <DialogHeader className="shrink-0 border-b px-4 py-3">
@@ -585,7 +632,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           </div>
         </DialogHeader>
 
-        <div className="flex-1 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+        <div 
+          className={`flex-1 min-h-0 flex items-start justify-center pt-6 ${modalStyle.needsScroll ? 'overflow-auto' : 'overflow-visible'}`}
+        >
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
@@ -597,30 +646,137 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
             <ActiveTabProvider>
               <TableOptionsProvider>
                 <div
-                  className="relative mx-auto bg-white"
+                  className="relative bg-white"
                   style={{
                     width: `${screenDimensions?.width || 800}px`,
                     height: `${screenDimensions?.height || 600}px`,
-                    transformOrigin: "center center",
+                    // 🆕 라벨이 위로 튀어나갈 수 있도록 overflow visible 설정
+                    overflow: "visible",
                   }}
                 >
-                  {screenData.components.map((component) => {
+                  {(() => {
+                    // 🆕 동적 y 좌표 조정을 위해 먼저 숨겨지는 컴포넌트들 파악
+                    const isComponentHidden = (comp: any) => {
+                      const cc = comp.componentConfig?.conditionalConfig || comp.conditionalConfig;
+                      if (!cc?.enabled || !formData) return false;
+                      
+                      const { field, operator, value, action } = cc;
+                      const fieldValue = formData[field];
+                      
+                      let conditionMet = false;
+                      switch (operator) {
+                        case "=":
+                        case "==":
+                        case "===":
+                          conditionMet = fieldValue === value;
+                          break;
+                        case "!=":
+                        case "!==":
+                          conditionMet = fieldValue !== value;
+                          break;
+                        default:
+                          conditionMet = fieldValue === value;
+                      }
+                      
+                      return (action === "show" && !conditionMet) || (action === "hide" && conditionMet);
+                    };
+                    
+                    // 표시되는 컴포넌트들의 y 범위 수집
+                    const visibleRanges: { y: number; bottom: number }[] = [];
+                    screenData.components.forEach((comp: any) => {
+                      if (!isComponentHidden(comp)) {
+                        const y = parseFloat(comp.position?.y?.toString() || "0");
+                        const height = parseFloat(comp.size?.height?.toString() || "0");
+                        visibleRanges.push({ y, bottom: y + height });
+                      }
+                    });
+                    
+                    // 숨겨지는 컴포넌트의 "실제 빈 공간" 계산 (표시되는 컴포넌트와 겹치지 않는 영역)
+                    const getActualGap = (hiddenY: number, hiddenBottom: number): number => {
+                      // 숨겨지는 영역 중 표시되는 컴포넌트와 겹치는 부분을 제외
+                      let gapStart = hiddenY;
+                      let gapEnd = hiddenBottom;
+                      
+                      for (const visible of visibleRanges) {
+                        // 겹치는 영역 확인
+                        if (visible.y < gapEnd && visible.bottom > gapStart) {
+                          // 겹치는 부분을 제외
+                          if (visible.y <= gapStart && visible.bottom >= gapEnd) {
+                            // 완전히 덮힘 - 빈 공간 없음
+                            return 0;
+                          } else if (visible.y <= gapStart) {
+                            // 위쪽이 덮힘
+                            gapStart = visible.bottom;
+                          } else if (visible.bottom >= gapEnd) {
+                            // 아래쪽이 덮힘
+                            gapEnd = visible.y;
+                          }
+                        }
+                      }
+                      
+                      return Math.max(0, gapEnd - gapStart);
+                    };
+                    
+                    // 숨겨지는 컴포넌트들의 실제 빈 공간 수집
+                    const hiddenGaps: { bottom: number; gap: number }[] = [];
+                    screenData.components.forEach((comp: any) => {
+                      if (isComponentHidden(comp)) {
+                        const y = parseFloat(comp.position?.y?.toString() || "0");
+                        const height = parseFloat(comp.size?.height?.toString() || "0");
+                        const bottom = y + height;
+                        const gap = getActualGap(y, bottom);
+                        if (gap > 0) {
+                          hiddenGaps.push({ bottom, gap });
+                        }
+                      }
+                    });
+                    
+                    // bottom 기준으로 정렬 및 중복 제거 (같은 bottom은 가장 큰 gap만 유지)
+                    const mergedGaps = new Map<number, number>();
+                    hiddenGaps.forEach(({ bottom, gap }) => {
+                      const existing = mergedGaps.get(bottom) || 0;
+                      mergedGaps.set(bottom, Math.max(existing, gap));
+                    });
+                    
+                    const sortedGaps = Array.from(mergedGaps.entries())
+                      .map(([bottom, gap]) => ({ bottom, gap }))
+                      .sort((a, b) => a.bottom - b.bottom);
+                    
+                    // 각 컴포넌트의 y 조정값 계산 함수
+                    const getYOffset = (compY: number, compId?: string) => {
+                      let offset = 0;
+                      for (const { bottom, gap } of sortedGaps) {
+                        // 컴포넌트가 숨겨진 영역 아래에 있으면 그 빈 공간만큼 위로 이동
+                        if (compY > bottom) {
+                          offset += gap;
+                        }
+                      }
+                      return offset;
+                    };
+                    
+                    return screenData.components.map((component: any) => {
+                      // 숨겨지는 컴포넌트는 렌더링 안함
+                      if (isComponentHidden(component)) {
+                        return null;
+                      }
+                    
                     // 화면 관리 해상도를 사용하는 경우 offset 조정 불필요
                     const offsetX = screenDimensions?.offsetX || 0;
                     const offsetY = screenDimensions?.offsetY || 0;
+                    
+                    // 🆕 동적 y 좌표 조정 (숨겨진 컴포넌트 높이만큼 위로 이동)
+                    const compY = parseFloat(component.position?.y?.toString() || "0");
+                    const yAdjustment = getYOffset(compY, component.id);
 
                     // 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,
-                            },
-                          };
+                    const adjustedComponent = {
+                      ...component,
+                      position: {
+                        ...component.position,
+                        x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                        y: compY - offsetY - yAdjustment, // 🆕 동적 조정 적용
+                      },
+                    };
 
                     return (
                       <InteractiveScreenViewerDynamic
@@ -652,7 +808,8 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         companyCode={user?.companyCode}
                       />
                     );
-                  })}
+                  });
+                  })()}
                 </div>
               </TableOptionsProvider>
             </ActiveTabProvider>
diff --git a/frontend/components/numbering-rule/NumberingRuleDesigner.tsx b/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
index 57e4896b..9320f00e 100644
--- a/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
+++ b/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
@@ -108,7 +108,7 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
   // 전체 카테고리 옵션 로드 (모든 테이블의 category 타입 컬럼)
   const loadAllCategoryOptions = async () => {
     try {
-      // category_values_test 테이블에서 고유한 테이블.컬럼 조합 조회
+      // category_values 테이블에서 고유한 테이블.컬럼 조합 조회
       const response = await getAllCategoryKeys();
       if (response.success && response.data) {
         const options: CategoryOption[] = response.data.map((item) => ({
@@ -260,22 +260,24 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
     toast.success(`규칙 ${newPart.order}가 추가되었습니다`);
   }, [currentRule, maxRules]);
 
-  const handleUpdatePart = useCallback((partId: string, updates: Partial<NumberingRulePart>) => {
+  // partOrder 기반으로 파트 업데이트 (id가 null일 수 있으므로 order 사용)
+  const handleUpdatePart = useCallback((partOrder: number, updates: Partial<NumberingRulePart>) => {
     setCurrentRule((prev) => {
       if (!prev) return null;
       return {
         ...prev,
-        parts: prev.parts.map((part) => (part.id === partId ? { ...part, ...updates } : part)),
+        parts: prev.parts.map((part) => (part.order === partOrder ? { ...part, ...updates } : part)),
       };
     });
   }, []);
 
-  const handleDeletePart = useCallback((partId: string) => {
+  // partOrder 기반으로 파트 삭제 (id가 null일 수 있으므로 order 사용)
+  const handleDeletePart = useCallback((partOrder: number) => {
     setCurrentRule((prev) => {
       if (!prev) return null;
       return {
         ...prev,
-        parts: prev.parts.filter((part) => part.id !== partId).map((part, index) => ({ ...part, order: index + 1 })),
+        parts: prev.parts.filter((part) => part.order !== partOrder).map((part, index) => ({ ...part, order: index + 1 })),
       };
     });
 
@@ -295,8 +297,6 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
 
     setLoading(true);
     try {
-      const existing = savedRules.find((r) => r.ruleId === currentRule.ruleId);
-
       // 파트별 기본 autoConfig 정의
       const defaultAutoConfigs: Record<string, any> = {
         sequence: { sequenceLength: 3, startFrom: 1 },
@@ -341,19 +341,34 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
         ruleToSave,
       });
 
-      // 테스트 테이블에 저장 (numbering_rules_test)
+      // 테스트 테이블에 저장 (numbering_rules)
       const response = await saveNumberingRuleToTest(ruleToSave);
 
       if (response.success && response.data) {
+        // 깊은 복사하여 savedRules와 currentRule이 다른 객체를 참조하도록 함
+        const currentData = JSON.parse(JSON.stringify(response.data)) as NumberingRuleConfig;
+        
+        // setSavedRules 내부에서 prev를 사용해서 existing 확인 (클로저 문제 방지)
         setSavedRules((prev) => {
-          if (existing) {
-            return prev.map((r) => (r.ruleId === ruleToSave.ruleId ? response.data! : r));
+          const savedData = JSON.parse(JSON.stringify(response.data)) as NumberingRuleConfig;
+          const existsInPrev = prev.some((r) => r.ruleId === ruleToSave.ruleId);
+          
+          console.log("🔍 [handleSave] setSavedRules:", {
+            ruleId: ruleToSave.ruleId,
+            existsInPrev,
+            prevCount: prev.length,
+          });
+          
+          if (existsInPrev) {
+            // 기존 규칙 업데이트
+            return prev.map((r) => (r.ruleId === ruleToSave.ruleId ? savedData : r));
           } else {
-            return [...prev, response.data!];
+            // 새 규칙 추가
+            return [...prev, savedData];
           }
         });
 
-        setCurrentRule(response.data);
+        setCurrentRule(currentData);
         setSelectedRuleId(response.data.ruleId);
 
         await onSave?.(response.data);
@@ -366,11 +381,27 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
     } finally {
       setLoading(false);
     }
-  }, [currentRule, savedRules, onSave, currentTableName]);
+  }, [currentRule, onSave, currentTableName, menuObjid]);
 
   const handleSelectRule = useCallback((rule: NumberingRuleConfig) => {
+    console.log("🔍 [handleSelectRule] 규칙 선택:", {
+      ruleId: rule.ruleId,
+      ruleName: rule.ruleName,
+      partsCount: rule.parts?.length || 0,
+      parts: rule.parts?.map(p => ({ id: p.id, order: p.order, partType: p.partType })),
+    });
+    
     setSelectedRuleId(rule.ruleId);
-    setCurrentRule(rule);
+    // 깊은 복사하여 객체 참조 분리 (좌측 목록과 편집 영역의 객체가 공유되지 않도록)
+    const ruleCopy = JSON.parse(JSON.stringify(rule)) as NumberingRuleConfig;
+    
+    console.log("🔍 [handleSelectRule] 깊은 복사 후:", {
+      ruleId: ruleCopy.ruleId,
+      partsCount: ruleCopy.parts?.length || 0,
+      parts: ruleCopy.parts?.map(p => ({ id: p.id, order: p.order, partType: p.partType })),
+    });
+    
+    setCurrentRule(ruleCopy);
     toast.info(`"${rule.ruleName}" 규칙을 불러왔습니다`);
   }, []);
 
@@ -595,12 +626,12 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
                 </div>
               ) : (
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-                  {currentRule.parts.map((part) => (
+                  {currentRule.parts.map((part, index) => (
                     <NumberingRuleCard
-                      key={part.id}
+                      key={`part-${part.order}-${index}`}
                       part={part}
-                      onUpdate={(updates) => handleUpdatePart(part.id, updates)}
-                      onDelete={() => handleDeletePart(part.id)}
+                      onUpdate={(updates) => handleUpdatePart(part.order, updates)}
+                      onDelete={() => handleDeletePart(part.order)}
                       isPreview={isPreview}
                     />
                   ))}
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index f1e49f9c..070a0ce6 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -253,6 +253,24 @@ export default function CopyScreenModal({
     }
   }, [useBulkRename, removeText, addPrefix]);
 
+  // 원본 회사가 선택된 경우 다른 회사로 자동 변경
+  useEffect(() => {
+    if (!companies.length || !isOpen) return;
+    
+    const sourceCompanyCode = mode === "group" 
+      ? sourceGroup?.company_code 
+      : sourceScreen?.companyCode;
+    
+    // 원본 회사와 같은 회사가 선택되어 있으면 다른 회사로 변경
+    if (sourceCompanyCode && targetCompanyCode === sourceCompanyCode) {
+      const otherCompany = companies.find(c => c.companyCode !== sourceCompanyCode);
+      if (otherCompany) {
+        console.log("🔄 원본 회사 선택됨 → 다른 회사로 자동 변경:", otherCompany.companyCode);
+        setTargetCompanyCode(otherCompany.companyCode);
+      }
+    }
+  }, [companies, isOpen, mode, sourceGroup, sourceScreen, targetCompanyCode]);
+
   // 대상 회사 변경 시 기존 코드 초기화
   useEffect(() => {
     if (targetCompanyCode) {
@@ -597,7 +615,7 @@ export default function CopyScreenModal({
             screen_id: result.mainScreen.screenId,
             screen_role: "MAIN",
             display_order: 1,
-            target_company_code: finalCompanyCode, // 대상 회사 코드 전달
+            target_company_code: targetCompanyCode || sourceScreen.companyCode, // 대상 회사 코드 전달
           });
           console.log(`✅ 복제된 화면을 그룹(${selectedTargetGroupId})에 추가 완료`);
         } catch (groupError) {
@@ -606,8 +624,68 @@ export default function CopyScreenModal({
         }
       }
 
+      // 추가 복사 옵션 처리 (단일 화면 복제용)
+      const sourceCompanyCode = sourceScreen.companyCode;
+      const copyTargetCompanyCode = targetCompanyCode || sourceCompanyCode;
+      let additionalCopyMessages: string[] = [];
+
+      // 채번규칙 복제
+      if (copyNumberingRules && sourceCompanyCode !== copyTargetCompanyCode) {
+        try {
+          console.log("📋 단일 화면: 채번규칙 복제 시작...");
+          const numberingResult = await apiClient.post("/api/screen-management/copy-numbering-rules", {
+            sourceCompanyCode,
+            targetCompanyCode: copyTargetCompanyCode
+          });
+          if (numberingResult.data.success) {
+            additionalCopyMessages.push(`채번규칙 ${numberingResult.data.copiedCount || 0}개`);
+            console.log("✅ 채번규칙 복제 완료:", numberingResult.data);
+          }
+        } catch (err: any) {
+          console.error("채번규칙 복제 실패:", err);
+        }
+      }
+
+      // 카테고리 값 복제
+      if (copyCategoryValues && sourceCompanyCode !== copyTargetCompanyCode) {
+        try {
+          console.log("📋 단일 화면: 카테고리 값 복제 시작...");
+          const categoryResult = await apiClient.post("/api/screen-management/copy-category-mapping", {
+            sourceCompanyCode,
+            targetCompanyCode: copyTargetCompanyCode
+          });
+          if (categoryResult.data.success) {
+            additionalCopyMessages.push(`카테고리 값 ${categoryResult.data.copiedValues || 0}개`);
+            console.log("✅ 카테고리 값 복제 완료:", categoryResult.data);
+          }
+        } catch (err: any) {
+          console.error("카테고리 값 복제 실패:", err);
+        }
+      }
+
+      // 테이블 타입 컬럼 복제
+      if (copyTableTypeColumns && sourceCompanyCode !== copyTargetCompanyCode) {
+        try {
+          console.log("📋 단일 화면: 테이블 타입 컬럼 복제 시작...");
+          const tableTypeResult = await apiClient.post("/api/screen-management/copy-table-type-columns", {
+            sourceCompanyCode,
+            targetCompanyCode: copyTargetCompanyCode
+          });
+          if (tableTypeResult.data.success) {
+            additionalCopyMessages.push(`테이블 타입 컬럼 ${tableTypeResult.data.copiedCount || 0}개`);
+            console.log("✅ 테이블 타입 컬럼 복제 완료:", tableTypeResult.data);
+          }
+        } catch (err: any) {
+          console.error("테이블 타입 컬럼 복제 실패:", err);
+        }
+      }
+
+      const additionalInfo = additionalCopyMessages.length > 0 
+        ? ` + 추가: ${additionalCopyMessages.join(", ")}`
+        : "";
+      
       toast.success(
-        `화면 복사가 완료되었습니다! (메인 1개 + 모달 ${result.modalScreens.length}개)`
+        `화면 복사가 완료되었습니다! (메인 1개 + 모달 ${result.modalScreens.length}개${additionalInfo})`
       );
       
       // 새로고침 완료 후 모달 닫기
@@ -1122,31 +1200,36 @@ export default function CopyScreenModal({
   // 그룹 복제 모드 렌더링
   if (mode === "group") {
     return (
-      <Dialog open={isOpen} onOpenChange={handleClose}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
-          {/* 로딩 오버레이 */}
-          {isCopying && (
-            <div className="absolute inset-0 z-50 flex flex-col items-center justify-center rounded-lg bg-background/90 backdrop-blur-sm">
-              <Loader2 className="h-10 w-10 animate-spin text-primary" />
-              <p className="mt-4 text-sm font-medium">{copyProgress.message}</p>
+      <>
+        {/* 로딩 오버레이 - Dialog 바깥에서 화면 전체 고정 */}
+        {isCopying && (
+          <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background/95 backdrop-blur-md">
+            <div className="rounded-lg bg-card p-8 shadow-lg border flex flex-col items-center">
+              <Loader2 className="h-12 w-12 animate-spin text-primary" />
+              <p className="mt-4 text-base font-medium">{copyProgress.message}</p>
               {copyProgress.total > 0 && (
                 <>
-                  <div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-secondary">
+                  <div className="mt-4 h-3 w-64 overflow-hidden rounded-full bg-secondary">
                     <div
                       className="h-full bg-primary transition-all duration-300"
                       style={{ width: `${Math.round((copyProgress.current / copyProgress.total) * 100)}%` }}
                     />
                   </div>
-                  <p className="mt-2 text-xs text-muted-foreground">
-                    {copyProgress.current} / {copyProgress.total} 화면
+                  <p className="mt-3 text-sm text-muted-foreground">
+                    {copyProgress.current} / {copyProgress.total} 화면 복제 중...
                   </p>
                 </>
               )}
+              <p className="mt-4 text-xs text-muted-foreground">
+                복제가 완료될 때까지 잠시 기다려주세요
+              </p>
             </div>
-          )}
-          
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+          </div>
+        )}
+        <Dialog open={isOpen} onOpenChange={handleClose}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
               <FolderTree className="h-5 w-5" />
               그룹 복제
             </DialogTitle>
@@ -1426,15 +1509,22 @@ export default function CopyScreenModal({
                   onChange={(e) => setTargetCompanyCode(e.target.value)}
                   className="mt-1 flex h-8 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                 >
-                  {companies.map((company) => (
-                    <option key={company.companyCode} value={company.companyCode}>
-                      {company.companyName} ({company.companyCode})
-                    </option>
-                  ))}
+                  {companies
+                    .filter((company) => company.companyCode !== sourceGroup?.company_code)
+                    .map((company) => (
+                      <option key={company.companyCode} value={company.companyCode}>
+                        {company.companyName} ({company.companyCode})
+                      </option>
+                    ))}
                 </select>
                 <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
                   복제된 그룹과 화면이 이 회사에 생성됩니다
                 </p>
+                {sourceGroup && (
+                  <p className="mt-1 text-[10px] text-amber-600 sm:text-xs">
+                    * 원본 회사({sourceGroup.company_code})로는 복제할 수 없습니다
+                  </p>
+                )}
               </div>
             )}
 
@@ -1530,14 +1620,25 @@ export default function CopyScreenModal({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+      </>
     );
   }
 
   // 화면 복제 모드 렌더링
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
+    <>
+      {/* 로딩 오버레이 - Dialog 바깥에서 화면 전체 고정 */}
+      {isCopying && (
+        <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background/95 backdrop-blur-md">
+          <div className="rounded-lg bg-card p-8 shadow-lg border flex flex-col items-center">
+            <Loader2 className="h-12 w-12 animate-spin text-primary" />
+            <p className="mt-4 text-base font-medium">복제가 완료될 때까지 잠시 기다려주세요</p>
+          </div>
+        </div>
+      )}
+      <Dialog open={isOpen} onOpenChange={handleClose}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
           <DialogTitle className="text-base sm:text-lg">화면 복제</DialogTitle>
           <DialogDescription className="text-xs sm:text-sm">
             "{sourceScreen?.screenName}" 화면을 복제합니다.
@@ -1634,13 +1735,20 @@ export default function CopyScreenModal({
                   <SelectValue placeholder="회사 선택" />
                 </SelectTrigger>
                 <SelectContent>
-                  {companies.map((company) => (
-                    <SelectItem key={company.companyCode} value={company.companyCode}>
-                      {company.companyName}
-                    </SelectItem>
-                  ))}
+                  {companies
+                    .filter((company) => company.companyCode !== sourceScreen?.companyCode)
+                    .map((company) => (
+                      <SelectItem key={company.companyCode} value={company.companyCode}>
+                        {company.companyName}
+                      </SelectItem>
+                    ))}
                 </SelectContent>
               </Select>
+              {sourceScreen && (
+                <p className="mt-1 text-[10px] text-amber-600">
+                  * 원본 회사({sourceScreen.companyCode})로는 복제할 수 없습니다
+                </p>
+              )}
             </div>
           )}
 
@@ -1678,6 +1786,50 @@ export default function CopyScreenModal({
             </div>
           )}
 
+          {/* 추가 복사 옵션 (단일 화면 복제용) */}
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm font-medium">추가 복사 옵션 (선택사항):</Label>
+            
+            {/* 채번규칙 복제 */}
+            <div className="flex items-center space-x-2 p-2 bg-muted/30 rounded-md ml-2">
+              <Checkbox
+                id="copyNumberingRulesScreen"
+                checked={copyNumberingRules}
+                onCheckedChange={(checked) => setCopyNumberingRules(checked === true)}
+              />
+              <Label htmlFor="copyNumberingRulesScreen" className="text-xs sm:text-sm cursor-pointer flex items-center gap-2">
+                <Hash className="h-4 w-4 text-muted-foreground" />
+                채번 규칙 복사
+              </Label>
+            </div>
+
+            {/* 카테고리 값 복사 */}
+            <div className="flex items-center space-x-2 p-2 bg-muted/30 rounded-md ml-2">
+              <Checkbox
+                id="copyCategoryValuesScreen"
+                checked={copyCategoryValues}
+                onCheckedChange={(checked) => setCopyCategoryValues(checked === true)}
+              />
+              <Label htmlFor="copyCategoryValuesScreen" className="text-xs sm:text-sm cursor-pointer flex items-center gap-2">
+                <Table className="h-4 w-4 text-muted-foreground" />
+                카테고리 값 복사
+              </Label>
+            </div>
+
+            {/* 테이블 타입관리 입력타입 설정 복사 */}
+            <div className="flex items-center space-x-2 p-2 bg-muted/30 rounded-md ml-2">
+              <Checkbox
+                id="copyTableTypeColumnsScreen"
+                checked={copyTableTypeColumns}
+                onCheckedChange={(checked) => setCopyTableTypeColumns(checked === true)}
+              />
+              <Label htmlFor="copyTableTypeColumnsScreen" className="text-xs sm:text-sm cursor-pointer flex items-center gap-2">
+                <Settings className="h-4 w-4 text-muted-foreground" />
+                테이블 타입관리 입력타입 설정 복사
+              </Label>
+            </div>
+          </div>
+
           {/* 화면명 일괄 수정 (접히는 옵션) */}
           <details className="text-sm">
             <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
@@ -1736,6 +1888,7 @@ export default function CopyScreenModal({
         </DialogFooter>
       </DialogContent>
     </Dialog>
+    </>
   );
 }
 
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index db722991..b95ee973 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -618,7 +618,36 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
               if (currentValue !== originalValue) {
                 console.log(`🔍 [품목 수정 감지] ${key}: ${originalValue} → ${currentValue}`);
                 // 날짜 필드는 정규화된 값 사용, 나머지는 원본 값 사용
-                changedData[key] = dateFields.includes(key) ? currentValue : currentData[key];
+                let finalValue = dateFields.includes(key) ? currentValue : currentData[key];
+                
+                // 🔧 배열이면 쉼표 구분 문자열로 변환 (리피터 데이터 제외)
+                if (Array.isArray(finalValue)) {
+                  const isRepeaterData = finalValue.length > 0 && 
+                    typeof finalValue[0] === "object" && 
+                    finalValue[0] !== null &&
+                    ("_targetTable" in finalValue[0] || "_isNewItem" in finalValue[0] || "_existingRecord" in finalValue[0]);
+                  
+                  if (!isRepeaterData) {
+                    // 🔧 손상된 값 필터링 헬퍼
+                    const isValidValue = (v: any): boolean => {
+                      if (typeof v === "number" && !isNaN(v)) return true;
+                      if (typeof v !== "string") return false;
+                      if (!v || v.trim() === "") return false;
+                      if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
+                      return true;
+                    };
+                    
+                    const validValues = finalValue
+                      .map((v: any) => typeof v === "number" ? String(v) : v)
+                      .filter(isValidValue);
+                    
+                    const stringValue = validValues.join(",");
+                    console.log(`🔧 [EditModal 그룹UPDATE] 배열→문자열 변환: ${key}`, { original: finalValue.length, valid: validValues.length, converted: stringValue });
+                    finalValue = stringValue;
+                  }
+                }
+                
+                changedData[key] = finalValue;
               }
             });
 
@@ -704,7 +733,12 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
               controlConfig,
             });
             
-            if (controlConfig?.enableDataflowControl && controlConfig?.dataflowTiming === "after") {
+            // 🔧 executionTiming 체크: dataflowTiming 또는 flowConfig.executionTiming 또는 flowControls 확인
+            const flowTiming = controlConfig?.dataflowTiming 
+              || controlConfig?.dataflowConfig?.flowConfig?.executionTiming
+              || (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
+            
+            if (controlConfig?.enableDataflowControl && flowTiming === "after") {
               console.log("🎯 [EditModal] 저장 후 제어로직 발견:", controlConfig.dataflowConfig);
               
               // buttonActions의 executeAfterSaveControl 동적 import
@@ -762,41 +796,51 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           }
         }
 
-        // 채번 규칙이 있는 필드에 대해 allocateCode 호출
+        // 채번 규칙이 있는 필드에 대해 allocateCode 호출 (🚀 병렬 처리로 최적화)
         if (Object.keys(fieldsWithNumbering).length > 0) {
-          console.log("🎯 [EditModal] 채번 규칙 할당 시작");
+          console.log("🎯 [EditModal] 채번 규칙 할당 시작, formData:", {
+            material: formData.material,
+            allKeys: Object.keys(formData),
+          });
           const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
 
-          let hasAllocationFailure = false;
-          const failedFields: string[] = [];
-
-          for (const [fieldName, ruleId] of Object.entries(fieldsWithNumbering)) {
-            try {
+          // 🚀 Promise.all로 병렬 처리 (여러 채번 필드가 있을 경우 성능 향상)
+          const allocationPromises = Object.entries(fieldsWithNumbering).map(
+            async ([fieldName, ruleId]) => {
+              const userInputCode = dataToSave[fieldName] as string;
               console.log(`🔄 [EditModal] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
-              const allocateResult = await allocateNumberingCode(ruleId);
-
-              if (allocateResult.success && allocateResult.data?.generatedCode) {
-                const newCode = allocateResult.data.generatedCode;
-                console.log(`✅ [EditModal] ${fieldName} 새 코드 할당: ${dataToSave[fieldName]} → ${newCode}`);
-                dataToSave[fieldName] = newCode;
-              } else {
-                console.warn(`⚠️ [EditModal] ${fieldName} 코드 할당 실패:`, allocateResult.error);
-                if (!dataToSave[fieldName] || dataToSave[fieldName] === "") {
-                  hasAllocationFailure = true;
-                  failedFields.push(fieldName);
+              
+              try {
+                const allocateResult = await allocateNumberingCode(ruleId, userInputCode, formData);
+                
+                if (allocateResult.success && allocateResult.data?.generatedCode) {
+                  return { fieldName, success: true, code: allocateResult.data.generatedCode };
+                } else {
+                  console.warn(`⚠️ [EditModal] ${fieldName} 코드 할당 실패:`, allocateResult.error);
+                  return { fieldName, success: false, hasExistingValue: !!(dataToSave[fieldName]) };
                 }
+              } catch (allocateError) {
+                console.error(`❌ [EditModal] ${fieldName} 코드 할당 오류:`, allocateError);
+                return { fieldName, success: false, hasExistingValue: !!(dataToSave[fieldName]) };
               }
-            } catch (allocateError) {
-              console.error(`❌ [EditModal] ${fieldName} 코드 할당 오류:`, allocateError);
-              if (!dataToSave[fieldName] || dataToSave[fieldName] === "") {
-                hasAllocationFailure = true;
-                failedFields.push(fieldName);
-              }
+            }
+          );
+
+          const allocationResults = await Promise.all(allocationPromises);
+          
+          // 결과 처리
+          const failedFields: string[] = [];
+          for (const result of allocationResults) {
+            if (result.success && result.code) {
+              console.log(`✅ [EditModal] ${result.fieldName} 새 코드 할당: ${result.code}`);
+              dataToSave[result.fieldName] = result.code;
+            } else if (!result.hasExistingValue) {
+              failedFields.push(result.fieldName);
             }
           }
 
           // 채번 규칙 할당 실패 시 저장 중단
-          if (hasAllocationFailure) {
+          if (failedFields.length > 0) {
             const fieldNames = failedFields.join(", ");
             toast.error(`채번 규칙 할당에 실패했습니다 (${fieldNames}). 화면 설정에서 채번 규칙을 확인해주세요.`);
             console.error(`❌ [EditModal] 채번 규칙 할당 실패로 저장 중단. 실패 필드: ${fieldNames}`);
@@ -812,12 +856,39 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         }
 
         // 🆕 리피터 데이터(배열)를 마스터 저장에서 제외 (V2Repeater가 별도로 저장)
+        // 🔧 단, 다중 선택 배열은 쉼표 구분 문자열로 변환하여 저장
         const masterDataToSave: Record<string, any> = {};
         Object.entries(dataToSave).forEach(([key, value]) => {
           if (!Array.isArray(value)) {
             masterDataToSave[key] = value;
           } else {
-            console.log(`🔄 [EditModal] 리피터 데이터 제외 (별도 저장): ${key}, ${value.length}개 항목`);
+            // 리피터 데이터인지 확인 (객체 배열이고 _targetTable 또는 _isNewItem이 있으면 리피터)
+            const isRepeaterData = value.length > 0 && 
+              typeof value[0] === "object" && 
+              value[0] !== null &&
+              ("_targetTable" in value[0] || "_isNewItem" in value[0] || "_existingRecord" in value[0]);
+            
+            if (isRepeaterData) {
+              console.log(`🔄 [EditModal] 리피터 데이터 제외 (별도 저장): ${key}, ${value.length}개 항목`);
+            } else {
+              // 🔧 손상된 값 필터링 헬퍼 (중괄호, 따옴표, 백슬래시 포함 시 무효)
+              const isValidValue = (v: any): boolean => {
+                if (typeof v === "number" && !isNaN(v)) return true;
+                if (typeof v !== "string") return false;
+                if (!v || v.trim() === "") return false;
+                if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
+                return true;
+              };
+              
+              // 🔧 다중 선택 배열 → 쉼표 구분 문자열로 변환 (손상된 값 필터링)
+              const validValues = value
+                .map((v: any) => typeof v === "number" ? String(v) : v)
+                .filter(isValidValue);
+              
+              const stringValue = validValues.join(",");
+              console.log(`🔧 [EditModal CREATE] 배열→문자열 변환: ${key}`, { original: value.length, valid: validValues.length, converted: stringValue });
+              masterDataToSave[key] = stringValue;
+            }
           }
         });
 
@@ -863,7 +934,12 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
             
             console.log("[EditModal] INSERT 완료 후 제어로직 실행 시도", { controlConfig });
             
-            if (controlConfig?.enableDataflowControl && controlConfig?.dataflowTiming === "after") {
+            // 🔧 executionTiming 체크: dataflowTiming 또는 flowConfig.executionTiming 또는 flowControls 확인
+            const flowTimingInsert = controlConfig?.dataflowTiming 
+              || controlConfig?.dataflowConfig?.flowConfig?.executionTiming
+              || (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
+            
+            if (controlConfig?.enableDataflowControl && flowTimingInsert === "after") {
               console.log("🎯 [EditModal] 저장 후 제어로직 발견:", controlConfig.dataflowConfig);
               
               const { ButtonActionExecutor } = await import("@/lib/utils/buttonActions");
@@ -896,7 +972,47 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         const changedData: Record<string, any> = {};
         Object.keys(formData).forEach((key) => {
           if (formData[key] !== originalData[key]) {
-            changedData[key] = formData[key];
+            let value = formData[key];
+            
+            // 🔧 배열이면 쉼표 구분 문자열로 변환 (리피터 데이터 제외)
+            if (Array.isArray(value)) {
+              // 리피터 데이터인지 확인 (객체 배열이고 _targetTable 또는 _isNewItem이 있으면 리피터)
+              const isRepeaterData = value.length > 0 && 
+                typeof value[0] === "object" && 
+                value[0] !== null &&
+                ("_targetTable" in value[0] || "_isNewItem" in value[0] || "_existingRecord" in value[0]);
+              
+              if (!isRepeaterData) {
+                // 🔧 손상된 값 필터링 헬퍼 (중괄호, 따옴표, 백슬래시 포함 시 무효)
+                const isValidValue = (v: any): boolean => {
+                  if (typeof v === "number" && !isNaN(v)) return true;
+                  if (typeof v !== "string") return false;
+                  if (!v || v.trim() === "") return false;
+                  // 손상된 PostgreSQL 배열 형식 감지
+                  if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
+                  return true;
+                };
+                
+                // 🔧 다중 선택 배열 → 쉼표 구분 문자열로 변환 (손상된 값 필터링)
+                const validValues = value
+                  .map((v: any) => typeof v === "number" ? String(v) : v)
+                  .filter(isValidValue);
+                
+                if (validValues.length !== value.length) {
+                  console.warn(`⚠️ [EditModal UPDATE] 손상된 값 필터링: ${key}`, { 
+                    before: value.length, 
+                    after: validValues.length,
+                    removed: value.filter((v: any) => !isValidValue(v))
+                  });
+                }
+                
+                const stringValue = validValues.join(",");
+                console.log(`🔧 [EditModal UPDATE] 배열→문자열 변환: ${key}`, { original: value.length, valid: validValues.length, converted: stringValue });
+                value = stringValue;
+              }
+            }
+            
+            changedData[key] = value;
           }
         });
 
@@ -936,7 +1052,12 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
             
             console.log("[EditModal] UPDATE 완료 후 제어로직 실행 시도", { controlConfig });
             
-            if (controlConfig?.enableDataflowControl && controlConfig?.dataflowTiming === "after") {
+            // 🔧 executionTiming 체크: dataflowTiming 또는 flowConfig.executionTiming 또는 flowControls 확인
+            const flowTimingUpdate = controlConfig?.dataflowTiming 
+              || controlConfig?.dataflowConfig?.flowConfig?.executionTiming
+              || (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
+            
+            if (controlConfig?.enableDataflowControl && flowTimingUpdate === "after") {
               console.log("🎯 [EditModal] 저장 후 제어로직 발견:", controlConfig.dataflowConfig);
               
               const { ButtonActionExecutor } = await import("@/lib/utils/buttonActions");
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 2c400df5..8efde578 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -43,7 +43,7 @@ import {
 } from "lucide-react";
 import { tableTypeApi } from "@/lib/api/screen";
 import { commonCodeApi } from "@/lib/api/commonCode";
-import { apiClient, getCurrentUser, UserInfo } from "@/lib/api/client";
+import { apiClient, getCurrentUser, UserInfo, getFullImageUrl } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 import { DataTableComponent, DataTableColumn, DataTableFilter } from "@/types/screen-legacy-backup";
 import { cn } from "@/lib/utils";
@@ -2224,6 +2224,38 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     // 파일 타입 컬럼 처리 (가상 파일 컬럼 포함)
     const isFileColumn = actualWebType === "file" || column.columnName === "file_path" || column.isVirtualFileColumn;
 
+    // 🖼️ 이미지 타입 컬럼: 썸네일로 표시
+    const isImageColumn = actualWebType === "image" || actualWebType === "img";
+    if (isImageColumn && value) {
+      // value가 objid (숫자 또는 숫자 문자열)인 경우 파일 API URL 사용
+      // 🔑 download 대신 preview 사용 (공개 접근 허용)
+      const isObjid = /^\d+$/.test(String(value));
+      // 🔑 상대 경로(/api/...) 대신 전체 URL 사용 (Docker 환경에서 Next.js rewrite 의존 방지)
+      const imageUrl = isObjid 
+        ? getFilePreviewUrl(String(value)) 
+        : getFullImageUrl(String(value));
+      
+      return (
+        <div className="flex justify-center">
+          <img
+            src={imageUrl}
+            alt="이미지"
+            className="h-10 w-10 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
+            style={{ maxWidth: "40px", maxHeight: "40px" }}
+            onClick={(e) => {
+              e.stopPropagation();
+              // 이미지 클릭 시 크게 보기 (새 탭에서 열기)
+              window.open(imageUrl, "_blank");
+            }}
+            onError={(e) => {
+              // 이미지 로드 실패 시 기본 아이콘 표시
+              (e.target as HTMLImageElement).style.display = "none";
+            }}
+          />
+        </div>
+      );
+    }
+
     // 파일 타입 컬럼은 파일 아이콘으로 표시 (컬럼별 파일 관리)
     if (isFileColumn && rowData) {
       // 현재 행의 기본키 값 가져오기
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index fbcf8243..6b9a092b 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
@@ -16,7 +16,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { uploadFilesAndCreateData } from "@/lib/api/file";
 import { toast } from "sonner";
 import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
-import { CascadingDropdownConfig } from "@/types/screen-management";
+import { CascadingDropdownConfig, LayerDefinition } from "@/types/screen-management";
 import {
   ComponentData,
   WidgetComponent,
@@ -164,6 +164,8 @@ interface InteractiveScreenViewerProps {
     enableAutoSave?: boolean;
     showToastMessages?: boolean;
   };
+  // 🆕 레이어 시스템 지원
+  layers?: LayerDefinition[];
 }
 
 export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
@@ -178,6 +180,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   tableColumns = [],
   showValidationPanel = false,
   validationOptions = {},
+  layers = [], // 🆕 레이어 목록
 }) => {
   // component가 없으면 빈 div 반환
   if (!component) {
@@ -206,9 +209,81 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 팝업 전용 formData 상태
   const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});
 
+  // 🆕 레이어 상태 관리 (런타임용)
+  const [activeLayerIds, setActiveLayerIds] = useState<string[]>([]);
+
+  // 🆕 초기 레이어 설정 (visible인 레이어들)
+  useEffect(() => {
+    if (layers.length > 0) {
+      const initialActiveLayers = layers.filter((l) => l.isVisible).map((l) => l.id);
+      setActiveLayerIds(initialActiveLayers);
+    }
+  }, [layers]);
+
+  // 🆕 레이어 제어 액션 핸들러
+  const handleLayerAction = useCallback((action: string, layerId: string) => {
+    setActiveLayerIds((prev) => {
+      switch (action) {
+        case "show":
+          return [...new Set([...prev, layerId])];
+        case "hide":
+          return prev.filter((id) => id !== layerId);
+        case "toggle":
+          return prev.includes(layerId)
+            ? prev.filter((id) => id !== layerId)
+            : [...prev, layerId];
+        case "exclusive":
+          // 해당 레이어만 표시 (모달/드로어 같은 특수 레이어 처리에 활용)
+          return [...prev, layerId];
+        default:
+          return prev;
+      }
+    });
+  }, []);
+
   // 통합된 폼 데이터
   const finalFormData = { ...localFormData, ...externalFormData };
 
+  // 🆕 조건부 레이어 로직 (formData 변경 시 자동 평가)
+  useEffect(() => {
+    layers.forEach((layer) => {
+      if (layer.type === "conditional" && layer.condition) {
+        const { targetComponentId, operator, value } = layer.condition;
+        
+        // 1. 컴포넌트 ID로 대상 컴포넌트 찾기
+        const targetComponent = allComponents.find((c) => c.id === targetComponentId);
+        
+        // 2. 컴포넌트의 columnName으로 formData에서 값 조회
+        // columnName이 없으면 컴포넌트 ID로 폴백
+        const fieldKey = 
+          (targetComponent as any)?.columnName || 
+          (targetComponent as any)?.componentConfig?.columnName ||
+          targetComponentId;
+        
+        const targetValue = finalFormData[fieldKey];
+
+        let isMatch = false;
+        switch (operator) {
+          case "eq":
+            isMatch = targetValue == value;
+            break;
+          case "neq":
+            isMatch = targetValue != value;
+            break;
+          case "in":
+            isMatch = Array.isArray(value) && value.includes(targetValue);
+            break;
+        }
+
+        if (isMatch) {
+          handleLayerAction("show", layer.id);
+        } else {
+          handleLayerAction("hide", layer.id);
+        }
+      }
+    });
+  }, [finalFormData, layers, allComponents, handleLayerAction]);
+
   // 개선된 검증 시스템 (선택적 활성화)
   const enhancedValidation = enableEnhancedValidation && screenInfo && tableColumns.length > 0 
     ? useFormValidation(
@@ -1395,7 +1470,6 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           >
             <SelectTrigger 
               className="w-full"
-            style={{ height: "100%" }}
               style={{
                 ...comp.style,
                 width: "100%",
@@ -1413,7 +1487,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 </SelectItem>
               ))}
             </SelectContent>
-          </Select>,
+          </Select>
         );
       }
 
@@ -2124,6 +2198,159 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       }
     : component;
 
+  // 🆕 레이어별 컴포넌트 렌더링 함수
+  const renderLayerComponents = useCallback((layer: LayerDefinition) => {
+    // 활성화되지 않은 레이어는 렌더링하지 않음
+    if (!activeLayerIds.includes(layer.id)) return null;
+
+    // 모달 레이어 처리
+    if (layer.type === "modal") {
+      const modalStyle: React.CSSProperties = {
+        ...(layer.overlayConfig?.backgroundColor && { backgroundColor: layer.overlayConfig.backgroundColor }),
+        ...(layer.overlayConfig?.backdropBlur && { backdropFilter: `blur(${layer.overlayConfig.backdropBlur}px)` }),
+      };
+
+      return (
+        <Dialog key={layer.id} open={true} onOpenChange={() => handleLayerAction("hide", layer.id)}>
+          <DialogContent 
+            className="max-w-4xl max-h-[90vh] overflow-hidden" 
+            style={modalStyle}
+          >
+            <DialogHeader>
+              <DialogTitle>{layer.name}</DialogTitle>
+            </DialogHeader>
+            <div className="relative h-full w-full min-h-[300px]">
+              {layer.components.map((comp) => (
+                <div
+                  key={comp.id}
+                  className="absolute"
+                  style={{
+                    left: `${comp.position.x}px`,
+                    top: `${comp.position.y}px`,
+                    width: comp.style?.width || `${comp.size.width}px`,
+                    height: comp.style?.height || `${comp.size.height}px`,
+                    zIndex: comp.position.z || 1,
+                  }}
+                >
+                  <InteractiveScreenViewer
+                    component={comp}
+                    allComponents={layer.components}
+                    formData={externalFormData}
+                    onFormDataChange={onFormDataChange}
+                    screenInfo={screenInfo}
+                  />
+                </div>
+              ))}
+            </div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    // 드로어 레이어 처리
+    if (layer.type === "drawer") {
+      const drawerPosition = layer.overlayConfig?.position || "right";
+      const drawerWidth = layer.overlayConfig?.width || "400px";
+      const drawerHeight = layer.overlayConfig?.height || "100%";
+
+      const drawerPositionStyles: Record<string, React.CSSProperties> = {
+        right: { right: 0, top: 0, width: drawerWidth, height: "100%" },
+        left: { left: 0, top: 0, width: drawerWidth, height: "100%" },
+        bottom: { bottom: 0, left: 0, width: "100%", height: drawerHeight },
+        top: { top: 0, left: 0, width: "100%", height: drawerHeight },
+      };
+
+      return (
+        <div
+          key={layer.id}
+          className="fixed inset-0 z-50"
+          onClick={() => handleLayerAction("hide", layer.id)}
+        >
+          {/* 백드롭 */}
+          <div 
+            className="absolute inset-0 bg-black/50"
+            style={{
+              ...(layer.overlayConfig?.backdropBlur && { 
+                backdropFilter: `blur(${layer.overlayConfig.backdropBlur}px)` 
+              }),
+            }}
+          />
+          {/* 드로어 패널 */}
+          <div
+            className="absolute bg-background shadow-lg"
+            style={drawerPositionStyles[drawerPosition]}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between border-b p-4">
+              <h3 className="text-lg font-semibold">{layer.name}</h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleLayerAction("hide", layer.id)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="relative h-full overflow-auto p-4">
+              {layer.components.map((comp) => (
+                <div
+                  key={comp.id}
+                  className="absolute"
+                  style={{
+                    left: `${comp.position.x}px`,
+                    top: `${comp.position.y}px`,
+                    width: comp.style?.width || `${comp.size.width}px`,
+                    height: comp.style?.height || `${comp.size.height}px`,
+                    zIndex: comp.position.z || 1,
+                  }}
+                >
+                  <InteractiveScreenViewer
+                    component={comp}
+                    allComponents={layer.components}
+                    formData={externalFormData}
+                    onFormDataChange={onFormDataChange}
+                    screenInfo={screenInfo}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // 일반/조건부 레이어 (base, conditional)
+    return (
+      <div
+        key={layer.id}
+        className="pointer-events-none absolute inset-0"
+        style={{ zIndex: layer.zIndex }}
+      >
+        {layer.components.map((comp) => (
+          <div
+            key={comp.id}
+            className="pointer-events-auto absolute"
+            style={{
+              left: `${comp.position.x}px`,
+              top: `${comp.position.y}px`,
+              width: comp.style?.width || `${comp.size.width}px`,
+              height: comp.style?.height || `${comp.size.height}px`,
+              zIndex: comp.position.z || 1,
+            }}
+          >
+            <InteractiveScreenViewer
+              component={comp}
+              allComponents={layer.components}
+              formData={externalFormData}
+              onFormDataChange={onFormDataChange}
+              screenInfo={screenInfo}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  }, [activeLayerIds, handleLayerAction, externalFormData, onFormDataChange, screenInfo]);
+
   return (
     <SplitPanelProvider>
       <ActiveTabProvider>
@@ -2147,6 +2374,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           </div>
         </div>
 
+        {/* 🆕 레이어 렌더링 */}
+        {layers.length > 0 && layers.map(renderLayerComponents)}
+
         {/* 개선된 검증 패널 (선택적 표시) */}
         {showValidationPanel && enhancedValidation && (
           <div className="absolute bottom-4 right-4 z-50">
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 735fb53c..73e6819d 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -335,13 +335,42 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
   // 동적 대화형 위젯 렌더링
   const renderInteractiveWidget = (comp: ComponentData) => {
-    // 조건부 표시 평가
+    // 조건부 표시 평가 (기존 conditional 시스템)
     const conditionalResult = evaluateConditional(comp.conditional, formData, allComponents);
 
     // 조건에 따라 숨김 처리
     if (!conditionalResult.visible) {
       return null;
     }
+    
+    // 🆕 conditionalConfig 시스템 체크 (V2 레이아웃용)
+    const conditionalConfig = (comp as any).componentConfig?.conditionalConfig;
+    if (conditionalConfig?.enabled && formData) {
+      const { field, operator, value, action } = conditionalConfig;
+      const fieldValue = formData[field];
+      
+      let conditionMet = false;
+      switch (operator) {
+        case "=":
+        case "==":
+        case "===":
+          conditionMet = fieldValue === value;
+          break;
+        case "!=":
+        case "!==":
+          conditionMet = fieldValue !== value;
+          break;
+        default:
+          conditionMet = fieldValue === value;
+      }
+      
+      if (action === "show" && !conditionMet) {
+        return null;
+      }
+      if (action === "hide" && conditionMet) {
+        return null;
+      }
+    }
 
     // 데이터 테이블 컴포넌트 처리
     if (isDataTableComponent(comp)) {
@@ -533,11 +562,31 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
       try {
         // 🆕 리피터 데이터(배열)를 마스터 저장에서 제외 (V2Repeater가 별도로 저장)
+        // 단, 파일 업로드 컴포넌트의 파일 배열(objid 배열)은 포함
         const masterFormData: Record<string, any> = {};
+        
+        // 파일 업로드 컴포넌트의 columnName 목록 수집 (v2-media, file-upload 모두 포함)
+        const mediaColumnNames = new Set(
+          allComponents
+            .filter((c: any) => 
+              c.componentType === "v2-media" || 
+              c.componentType === "file-upload" ||
+              c.url?.includes("v2-media") ||
+              c.url?.includes("file-upload")
+            )
+            .map((c: any) => c.columnName || c.componentConfig?.columnName)
+            .filter(Boolean)
+        );
+        
         Object.entries(formData).forEach(([key, value]) => {
-          // 배열 데이터는 리피터 데이터이므로 제외
           if (!Array.isArray(value)) {
+            // 배열이 아닌 값은 그대로 저장
             masterFormData[key] = value;
+          } else if (mediaColumnNames.has(key)) {
+            // v2-media 컴포넌트의 배열은 첫 번째 값만 저장 (단일 파일 컬럼 대응)
+            // 또는 JSON 문자열로 변환하려면 JSON.stringify(value) 사용
+            masterFormData[key] = value.length > 0 ? value[0] : null;
+            console.log(`📷 미디어 데이터 저장: ${key}, objid: ${masterFormData[key]}`);
           } else {
             console.log(`🔄 리피터 데이터 제외 (별도 저장): ${key}, ${value.length}개 항목`);
           }
@@ -1018,22 +1067,35 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   // TableSearchWidget의 경우 높이를 자동으로 설정
   const isTableSearchWidget = (component as any).componentId === "table-search-widget";
 
+  // 🆕 라벨 표시 여부 확인 (V2 입력 컴포넌트)
+  // labelDisplay가 false가 아니고, labelText 또는 label이 있으면 라벨 표시
+  const isV2InputComponent = type === "v2-input" || type === "v2-select" || type === "v2-date";
+  const hasVisibleLabel = isV2InputComponent && 
+    style?.labelDisplay !== false && 
+    (style?.labelText || (component as any).label);
+  
+  // 라벨이 있는 경우 상단 여백 계산 (라벨 폰트크기 + 여백)
+  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+  const labelOffset = hasVisibleLabel ? (labelFontSize + labelMarginBottom + 2) : 0;
+
   const componentStyle = {
     position: "absolute" as const,
     left: position?.x || 0,
-    top: position?.y || 0,
+    top: position?.y || 0, // 원래 위치 유지 (음수로 가면 overflow-hidden에 잘림)
     zIndex: position?.z || 1,
     ...styleWithoutSize, // width/height 제외한 스타일만 먼저 적용
     width: size?.width || 200, // size의 픽셀 값이 최종 우선순위
     height: isTableSearchWidget ? "auto" : size?.height || 10,
     minHeight: isTableSearchWidget ? "48px" : undefined,
+    // 🆕 라벨이 있으면 overflow visible로 설정하여 라벨이 잘리지 않게 함
+    overflow: labelOffset > 0 ? "visible" : undefined,
   };
 
   return (
     <>
       <div className="absolute" style={componentStyle}>
-        {/* 라벨 숨김 - 모달에서는 라벨을 표시하지 않음 */}
-        {/* 위젯 렌더링 */}
+        {/* 위젯 렌더링 (라벨은 V2Input 내부에서 absolute로 표시됨) */}
         {renderInteractiveWidget(component)}
       </div>
 
diff --git a/frontend/components/screen/LayerConditionPanel.tsx b/frontend/components/screen/LayerConditionPanel.tsx
new file mode 100644
index 00000000..4304aa55
--- /dev/null
+++ b/frontend/components/screen/LayerConditionPanel.tsx
@@ -0,0 +1,371 @@
+import React, { useState, useEffect, useMemo, useCallback } 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 { Badge } from "@/components/ui/badge";
+import { Loader2, AlertCircle, Check, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ComponentData, LayerCondition, LayerDefinition } from "@/types/screen-management";
+import { getCodesByCategory, CodeItem } from "@/lib/api/codeManagement";
+
+interface LayerConditionPanelProps {
+  layer: LayerDefinition;
+  components: ComponentData[]; // 화면의 모든 컴포넌트
+  onUpdateCondition: (condition: LayerCondition | undefined) => void;
+  onClose?: () => void;
+}
+
+// 조건 연산자 옵션
+const OPERATORS = [
+  { value: "eq", label: "같음 (=)" },
+  { value: "neq", label: "같지 않음 (≠)" },
+  { value: "in", label: "포함 (in)" },
+] as const;
+
+type OperatorType = "eq" | "neq" | "in";
+
+export const LayerConditionPanel: React.FC<LayerConditionPanelProps> = ({
+  layer,
+  components,
+  onUpdateCondition,
+  onClose,
+}) => {
+  // 조건 설정 상태
+  const [targetComponentId, setTargetComponentId] = useState<string>(
+    layer.condition?.targetComponentId || ""
+  );
+  const [operator, setOperator] = useState<OperatorType>(
+    (layer.condition?.operator as OperatorType) || "eq"
+  );
+  const [value, setValue] = useState<string>(
+    layer.condition?.value?.toString() || ""
+  );
+  const [multiValues, setMultiValues] = useState<string[]>(
+    Array.isArray(layer.condition?.value) ? layer.condition.value : []
+  );
+
+  // 코드 목록 로딩 상태
+  const [codeOptions, setCodeOptions] = useState<CodeItem[]>([]);
+  const [isLoadingCodes, setIsLoadingCodes] = useState(false);
+  const [codeLoadError, setCodeLoadError] = useState<string | null>(null);
+
+  // 트리거 가능한 컴포넌트 필터링 (셀렉트, 라디오, 코드 타입 등)
+  const triggerableComponents = useMemo(() => {
+    return components.filter((comp) => {
+      const componentType = (comp.componentType || "").toLowerCase();
+      const widgetType = ((comp as any).widgetType || "").toLowerCase();
+      const webType = ((comp as any).webType || "").toLowerCase();
+      const inputType = ((comp as any).componentConfig?.inputType || "").toLowerCase();
+      
+      // 셀렉트, 라디오, 코드 타입 컴포넌트만 허용
+      const triggerTypes = ["select", "radio", "code", "checkbox", "toggle"];
+      const isTriggerType = triggerTypes.some((type) => 
+        componentType.includes(type) ||
+        widgetType.includes(type) ||
+        webType.includes(type) ||
+        inputType.includes(type)
+      );
+      
+      return isTriggerType;
+    });
+  }, [components]);
+
+  // 선택된 컴포넌트 정보
+  const selectedComponent = useMemo(() => {
+    return components.find((c) => c.id === targetComponentId);
+  }, [components, targetComponentId]);
+
+  // 선택된 컴포넌트의 코드 카테고리
+  const codeCategory = useMemo(() => {
+    if (!selectedComponent) return null;
+    
+    // codeCategory 확인 (다양한 위치에 있을 수 있음)
+    const category = 
+      (selectedComponent as any).codeCategory ||
+      (selectedComponent as any).componentConfig?.codeCategory ||
+      (selectedComponent as any).webTypeConfig?.codeCategory;
+    
+    return category || null;
+  }, [selectedComponent]);
+
+  // 컴포넌트 선택 시 코드 목록 로드
+  useEffect(() => {
+    if (!codeCategory) {
+      setCodeOptions([]);
+      return;
+    }
+
+    const loadCodes = async () => {
+      setIsLoadingCodes(true);
+      setCodeLoadError(null);
+      
+      try {
+        const codes = await getCodesByCategory(codeCategory);
+        setCodeOptions(codes);
+      } catch (error: any) {
+        console.error("코드 목록 로드 실패:", error);
+        setCodeLoadError(error.message || "코드 목록을 불러올 수 없습니다.");
+        setCodeOptions([]);
+      } finally {
+        setIsLoadingCodes(false);
+      }
+    };
+
+    loadCodes();
+  }, [codeCategory]);
+
+  // 조건 저장
+  const handleSave = useCallback(() => {
+    if (!targetComponentId) {
+      return;
+    }
+
+    const condition: LayerCondition = {
+      targetComponentId,
+      operator,
+      value: operator === "in" ? multiValues : value,
+    };
+
+    onUpdateCondition(condition);
+    onClose?.();
+  }, [targetComponentId, operator, value, multiValues, onUpdateCondition, onClose]);
+
+  // 조건 삭제
+  const handleClear = useCallback(() => {
+    onUpdateCondition(undefined);
+    setTargetComponentId("");
+    setOperator("eq");
+    setValue("");
+    setMultiValues([]);
+    onClose?.();
+  }, [onUpdateCondition, onClose]);
+
+  // in 연산자용 다중 값 토글
+  const toggleMultiValue = useCallback((val: string) => {
+    setMultiValues((prev) => 
+      prev.includes(val) 
+        ? prev.filter((v) => v !== val) 
+        : [...prev, val]
+    );
+  }, []);
+
+  // 컴포넌트 라벨 가져오기
+  const getComponentLabel = (comp: ComponentData) => {
+    return comp.label || (comp as any).columnName || comp.id;
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold">조건부 표시 설정</h4>
+        {layer.condition && (
+          <Badge variant="secondary" className="text-xs">
+            설정됨
+          </Badge>
+        )}
+      </div>
+
+      {/* 트리거 컴포넌트 선택 */}
+      <div className="space-y-2">
+        <Label className="text-xs">트리거 컴포넌트</Label>
+        <Select value={targetComponentId} onValueChange={setTargetComponentId}>
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue placeholder="컴포넌트 선택..." />
+          </SelectTrigger>
+          <SelectContent>
+            {triggerableComponents.length === 0 ? (
+              <div className="p-2 text-xs text-muted-foreground text-center">
+                조건 설정 가능한 컴포넌트가 없습니다.
+                <br />
+                (셀렉트, 라디오, 코드 타입)
+              </div>
+            ) : (
+              triggerableComponents.map((comp) => (
+                <SelectItem key={comp.id} value={comp.id} className="text-xs">
+                  <div className="flex items-center gap-2">
+                    <span>{getComponentLabel(comp)}</span>
+                    <Badge variant="outline" className="text-[10px]">
+                      {comp.componentType || (comp as any).widgetType}
+                    </Badge>
+                  </div>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+        
+        {/* 코드 카테고리 표시 */}
+        {codeCategory && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span>카테고리:</span>
+            <Badge variant="secondary" className="text-[10px]">
+              {codeCategory}
+            </Badge>
+          </div>
+        )}
+      </div>
+
+      {/* 연산자 선택 */}
+      {targetComponentId && (
+        <div className="space-y-2">
+          <Label className="text-xs">조건</Label>
+          <Select 
+            value={operator} 
+            onValueChange={(val) => setOperator(val as OperatorType)}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {OPERATORS.map((op) => (
+                <SelectItem key={op.value} value={op.value} className="text-xs">
+                  {op.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* 조건 값 선택 */}
+      {targetComponentId && (
+        <div className="space-y-2">
+          <Label className="text-xs">
+            {operator === "in" ? "값 선택 (복수)" : "값"}
+          </Label>
+          
+          {isLoadingCodes ? (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground p-2">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              코드 목록 로딩 중...
+            </div>
+          ) : codeLoadError ? (
+            <div className="flex items-center gap-2 text-xs text-destructive p-2">
+              <AlertCircle className="h-3 w-3" />
+              {codeLoadError}
+            </div>
+          ) : codeOptions.length > 0 ? (
+            // 코드 카테고리가 있는 경우 - 선택 UI
+            operator === "in" ? (
+              // 다중 선택 (in 연산자)
+              <div className="space-y-1 max-h-40 overflow-y-auto border rounded-md p-2">
+                {codeOptions.map((code) => (
+                  <div
+                    key={code.codeValue}
+                    className={cn(
+                      "flex items-center gap-2 p-1.5 rounded cursor-pointer text-xs hover:bg-accent",
+                      multiValues.includes(code.codeValue) && "bg-primary/10"
+                    )}
+                    onClick={() => toggleMultiValue(code.codeValue)}
+                  >
+                    <div className={cn(
+                      "w-4 h-4 rounded border flex items-center justify-center",
+                      multiValues.includes(code.codeValue) 
+                        ? "bg-primary border-primary" 
+                        : "border-input"
+                    )}>
+                      {multiValues.includes(code.codeValue) && (
+                        <Check className="h-3 w-3 text-primary-foreground" />
+                      )}
+                    </div>
+                    <span>{code.codeName}</span>
+                    <span className="text-muted-foreground">({code.codeValue})</span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              // 단일 선택 (eq, neq 연산자)
+              <Select value={value} onValueChange={setValue}>
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="값 선택..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {codeOptions.map((code) => (
+                    <SelectItem 
+                      key={code.codeValue} 
+                      value={code.codeValue} 
+                      className="text-xs"
+                    >
+                      {code.codeName} ({code.codeValue})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )
+          ) : (
+            // 코드 카테고리가 없는 경우 - 직접 입력
+            <Input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder="조건 값 입력..."
+              className="h-8 text-xs"
+            />
+          )}
+          
+          {/* 선택된 값 표시 (in 연산자) */}
+          {operator === "in" && multiValues.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-2">
+              {multiValues.map((val) => {
+                const code = codeOptions.find((c) => c.codeValue === val);
+                return (
+                  <Badge 
+                    key={val} 
+                    variant="secondary" 
+                    className="text-[10px] gap-1"
+                  >
+                    {code?.codeName || val}
+                    <X 
+                      className="h-2.5 w-2.5 cursor-pointer hover:text-destructive"
+                      onClick={() => toggleMultiValue(val)}
+                    />
+                  </Badge>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 현재 조건 요약 */}
+      {targetComponentId && (value || multiValues.length > 0) && (
+        <div className="p-2 bg-muted rounded-md text-xs">
+          <span className="font-medium">요약: </span>
+          <span className="text-muted-foreground">
+            "{getComponentLabel(selectedComponent!)}" 값이{" "}
+            {operator === "eq" && `"${codeOptions.find(c => c.codeValue === value)?.codeName || value}"와 같으면`}
+            {operator === "neq" && `"${codeOptions.find(c => c.codeValue === value)?.codeName || value}"와 다르면`}
+            {operator === "in" && `[${multiValues.map(v => codeOptions.find(c => c.codeValue === v)?.codeName || v).join(", ")}] 중 하나이면`}
+            {" "}이 레이어 표시
+          </span>
+        </div>
+      )}
+
+      {/* 버튼 */}
+      <div className="flex gap-2 pt-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex-1 h-8 text-xs"
+          onClick={handleClear}
+        >
+          조건 삭제
+        </Button>
+        <Button
+          size="sm"
+          className="flex-1 h-8 text-xs"
+          onClick={handleSave}
+          disabled={!targetComponentId || (!value && multiValues.length === 0)}
+        >
+          저장
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/components/screen/LayerManagerPanel.tsx b/frontend/components/screen/LayerManagerPanel.tsx
new file mode 100644
index 00000000..05fb36f3
--- /dev/null
+++ b/frontend/components/screen/LayerManagerPanel.tsx
@@ -0,0 +1,405 @@
+import React, { useState, useMemo, useCallback } from "react";
+import { useLayer } from "@/contexts/LayerContext";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Eye,
+  EyeOff,
+  Lock,
+  Unlock,
+  Plus,
+  Trash2,
+  GripVertical,
+  Layers,
+  SplitSquareVertical,
+  PanelRight,
+  ChevronDown,
+  ChevronRight,
+  Settings2,
+  Zap,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { LayerType, LayerDefinition, ComponentData, LayerCondition } from "@/types/screen-management";
+import { LayerConditionPanel } from "./LayerConditionPanel";
+
+// 레이어 타입별 아이콘
+const getLayerTypeIcon = (type: LayerType) => {
+  switch (type) {
+    case "base":
+      return <Layers className="h-3 w-3" />;
+    case "conditional":
+      return <SplitSquareVertical className="h-3 w-3" />;
+    case "modal":
+      return <Settings2 className="h-3 w-3" />;
+    case "drawer":
+      return <PanelRight className="h-3 w-3" />;
+    default:
+      return <Layers className="h-3 w-3" />;
+  }
+};
+
+// 레이어 타입별 라벨
+function getLayerTypeLabel(type: LayerType): string {
+  switch (type) {
+    case "base":
+      return "기본";
+    case "conditional":
+      return "조건부";
+    case "modal":
+      return "모달";
+    case "drawer":
+      return "드로어";
+    default:
+      return type;
+  }
+}
+
+// 레이어 타입별 색상
+function getLayerTypeColor(type: LayerType): string {
+  switch (type) {
+    case "base":
+      return "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300";
+    case "conditional":
+      return "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300";
+    case "modal":
+      return "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300";
+    case "drawer":
+      return "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300";
+    default:
+      return "bg-gray-100 text-gray-700 dark:bg-gray-900 dark:text-gray-300";
+  }
+}
+
+interface LayerItemProps {
+  layer: LayerDefinition;
+  isActive: boolean;
+  componentCount: number; // 실제 컴포넌트 수 (layout.components 기반)
+  allComponents: ComponentData[]; // 조건 설정에 필요한 전체 컴포넌트
+  onSelect: () => void;
+  onToggleVisibility: () => void;
+  onToggleLock: () => void;
+  onRemove: () => void;
+  onUpdateName: (name: string) => void;
+  onUpdateCondition: (condition: LayerCondition | undefined) => void;
+}
+
+const LayerItem: React.FC<LayerItemProps> = ({
+  layer,
+  isActive,
+  componentCount,
+  allComponents,
+  onSelect,
+  onToggleVisibility,
+  onToggleLock,
+  onRemove,
+  onUpdateName,
+  onUpdateCondition,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isConditionOpen, setIsConditionOpen] = useState(false);
+
+  // 조건부 레이어인지 확인
+  const isConditionalLayer = layer.type === "conditional";
+  // 조건 설정 여부
+  const hasCondition = !!layer.condition;
+
+  return (
+    <div className="space-y-0">
+      {/* 레이어 메인 영역 */}
+      <div
+        className={cn(
+          "flex items-center gap-2 rounded-md border p-2 text-sm transition-all cursor-pointer",
+          isActive 
+            ? "border-primary bg-primary/5 shadow-sm" 
+            : "hover:bg-muted border-transparent",
+          !layer.isVisible && "opacity-50",
+          isConditionOpen && "rounded-b-none border-b-0",
+        )}
+        onClick={onSelect}
+      >
+        {/* 드래그 핸들 */}
+        <GripVertical className="text-muted-foreground h-4 w-4 cursor-grab flex-shrink-0" />
+
+        {/* 레이어 정보 */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            {/* 레이어 타입 아이콘 */}
+            <span className={cn("flex-shrink-0", getLayerTypeColor(layer.type), "p-1 rounded")}>
+              {getLayerTypeIcon(layer.type)}
+            </span>
+            
+            {/* 레이어 이름 */}
+            {isEditing ? (
+              <input
+                type="text"
+                value={layer.name}
+                onChange={(e) => onUpdateName(e.target.value)}
+                onBlur={() => setIsEditing(false)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") setIsEditing(false);
+                }}
+                className="flex-1 bg-transparent outline-none border-b border-primary text-sm"
+                autoFocus
+                onClick={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <span
+                className="flex-1 truncate font-medium"
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  setIsEditing(true);
+                }}
+              >
+                {layer.name}
+              </span>
+            )}
+          </div>
+          
+          {/* 레이어 메타 정보 */}
+          <div className="flex items-center gap-2 mt-0.5">
+            <Badge variant="outline" className="text-[10px] px-1 py-0 h-4">
+              {getLayerTypeLabel(layer.type)}
+            </Badge>
+            <span className="text-muted-foreground text-[10px]">
+              {componentCount}개 컴포넌트
+            </span>
+            {/* 조건 설정됨 표시 */}
+            {hasCondition && (
+              <Badge variant="secondary" className="text-[10px] px-1 py-0 h-4 gap-0.5">
+                <Zap className="h-2.5 w-2.5" />
+                조건
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {/* 액션 버튼들 */}
+        <div className="flex items-center gap-0.5 flex-shrink-0">
+          {/* 조건부 레이어일 때 조건 설정 버튼 */}
+          {isConditionalLayer && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                "h-6 w-6",
+                hasCondition && "text-amber-600"
+              )}
+              title="조건 설정"
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsConditionOpen(!isConditionOpen);
+              }}
+            >
+              {isConditionOpen ? (
+                <ChevronDown className="h-3.5 w-3.5" />
+              ) : (
+                <ChevronRight className="h-3.5 w-3.5" />
+              )}
+            </Button>
+          )}
+          
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title={layer.isVisible ? "레이어 숨기기" : "레이어 표시"}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleVisibility();
+            }}
+          >
+            {layer.isVisible ? (
+              <Eye className="h-3.5 w-3.5" />
+            ) : (
+              <EyeOff className="text-muted-foreground h-3.5 w-3.5" />
+            )}
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            title={layer.isLocked ? "편집 잠금 해제" : "편집 잠금"}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleLock();
+            }}
+          >
+            {layer.isLocked ? (
+              <Lock className="text-destructive h-3.5 w-3.5" />
+            ) : (
+              <Unlock className="text-muted-foreground h-3.5 w-3.5" />
+            )}
+          </Button>
+
+          {layer.type !== "base" && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="hover:text-destructive h-6 w-6"
+              title="레이어 삭제"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+      
+      {/* 조건 설정 패널 (조건부 레이어만) */}
+      {isConditionalLayer && isConditionOpen && (
+        <div className={cn(
+          "border border-t-0 rounded-b-md bg-muted/30",
+          isActive ? "border-primary" : "border-border"
+        )}>
+          <LayerConditionPanel
+            layer={layer}
+            components={allComponents}
+            onUpdateCondition={onUpdateCondition}
+            onClose={() => setIsConditionOpen(false)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface LayerManagerPanelProps {
+  components?: ComponentData[]; // layout.components를 전달받음
+}
+
+export const LayerManagerPanel: React.FC<LayerManagerPanelProps> = ({ components = [] }) => {
+  const {
+    layers,
+    activeLayerId,
+    setActiveLayerId,
+    addLayer,
+    removeLayer,
+    toggleLayerVisibility,
+    toggleLayerLock,
+    updateLayer,
+  } = useLayer();
+
+  // 레이어 조건 업데이트 핸들러
+  const handleUpdateCondition = useCallback((layerId: string, condition: LayerCondition | undefined) => {
+    updateLayer(layerId, { condition });
+  }, [updateLayer]);
+
+  // 🆕 각 레이어별 컴포넌트 수 계산 (layout.components 기반)
+  const componentCountByLayer = useMemo(() => {
+    const counts: Record<string, number> = {};
+    
+    // 모든 레이어를 0으로 초기화
+    layers.forEach(layer => {
+      counts[layer.id] = 0;
+    });
+    
+    // layout.components에서 layerId별로 카운트
+    components.forEach(comp => {
+      const layerId = comp.layerId || "default-layer";
+      if (counts[layerId] !== undefined) {
+        counts[layerId]++;
+      } else {
+        // layerId가 존재하지 않는 레이어인 경우 default-layer로 카운트
+        if (counts["default-layer"] !== undefined) {
+          counts["default-layer"]++;
+        }
+      }
+    });
+    
+    return counts;
+  }, [components, layers]);
+
+  return (
+    <div className="bg-background flex h-full flex-col">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between border-b px-3 py-2">
+        <div className="flex items-center gap-2">
+          <Layers className="h-4 w-4 text-muted-foreground" />
+          <h3 className="text-sm font-semibold">레이어</h3>
+          <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+            {layers.length}
+          </Badge>
+        </div>
+        
+        {/* 레이어 추가 드롭다운 */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-7 px-2 gap-1">
+              <Plus className="h-3.5 w-3.5" />
+              <ChevronDown className="h-3 w-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => addLayer("conditional", "조건부 레이어")}>
+              <SplitSquareVertical className="h-4 w-4 mr-2" />
+              조건부 레이어
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => addLayer("modal", "모달 레이어")}>
+              <Settings2 className="h-4 w-4 mr-2" />
+              모달 레이어
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => addLayer("drawer", "드로어 레이어")}>
+              <PanelRight className="h-4 w-4 mr-2" />
+              드로어 레이어
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* 레이어 목록 */}
+      <ScrollArea className="flex-1">
+        <div className="space-y-1 p-2">
+          {layers.length === 0 ? (
+            <div className="text-center text-muted-foreground text-sm py-8">
+              레이어가 없습니다.
+              <br />
+              <span className="text-xs">위의 + 버튼으로 추가하세요.</span>
+            </div>
+          ) : (
+            layers
+              .slice()
+              .reverse() // 상위 레이어가 위에 표시
+              .map((layer) => (
+                <LayerItem
+                  key={layer.id}
+                  layer={layer}
+                  isActive={activeLayerId === layer.id}
+                  componentCount={componentCountByLayer[layer.id] || 0}
+                  allComponents={components}
+                  onSelect={() => setActiveLayerId(layer.id)}
+                  onToggleVisibility={() => toggleLayerVisibility(layer.id)}
+                  onToggleLock={() => toggleLayerLock(layer.id)}
+                  onRemove={() => removeLayer(layer.id)}
+                  onUpdateName={(name) => updateLayer(layer.id, { name })}
+                  onUpdateCondition={(condition) => handleUpdateCondition(layer.id, condition)}
+                />
+              ))
+          )}
+        </div>
+      </ScrollArea>
+
+      {/* 도움말 */}
+      <div className="border-t px-3 py-2 text-[10px] text-muted-foreground">
+        <p>더블클릭: 이름 편집 | 드래그: 순서 변경</p>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/components/screen/RealtimePreview.tsx b/frontend/components/screen/RealtimePreview.tsx
index b58a6a1f..5a786616 100644
--- a/frontend/components/screen/RealtimePreview.tsx
+++ b/frontend/components/screen/RealtimePreview.tsx
@@ -119,6 +119,9 @@ const WidgetRenderer: React.FC<{
   tableDisplayData?: any[];
   [key: string]: any;
 }> = ({ component, isDesignMode = false, sortBy, sortOrder, tableDisplayData, ...restProps }) => {
+  // 🔧 무조건 로그 (렌더링 확인용)
+  console.log("📦 WidgetRenderer 렌더링:", component.id, "labelDisplay:", component.style?.labelDisplay);
+  
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
   if (!isWidgetComponent(component)) {
     return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
@@ -127,9 +130,6 @@ const WidgetRenderer: React.FC<{
   const widget = component;
   const { widgetType, label, placeholder, required, readonly, columnName, style } = widget;
 
-  // 디버깅: 실제 widgetType 값 확인
-  // console.log("RealtimePreviewDynamic - widgetType:", widgetType, "columnName:", columnName);
-
   // 사용자가 테두리를 설정했는지 확인
   const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);
 
@@ -246,8 +246,17 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   tableDisplayData, // 🆕 화면 표시 데이터
   ...restProps
 }) => {
+  // 🔧 무조건 로그 - 파일 반영 테스트용 (2024-TEST)
+  console.log("🔷🔷🔷 RealtimePreview 2024:", component.id);
+  
   const { user } = useAuth();
   const { type, id, position, size, style = {} } = component;
+  
+  // 🔧 v2 컴포넌트 렌더링 추적
+  if (id?.includes("v2-")) {
+    console.log("🔷 RealtimePreview 렌더:", id, "type:", type, "labelDisplay:", style?.labelDisplay);
+  }
+  
   const [fileUpdateTrigger, setFileUpdateTrigger] = useState(0);
   const [actualHeight, setActualHeight] = useState<number | null>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -741,6 +750,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         {/* 컴포넌트 타입 - 레지스트리 기반 렌더링 (Section Paper, Section Card 등) */}
         {type === "component" &&
           (() => {
+            console.log("📦 DynamicComponentRenderer 렌더링:", component.id, "labelDisplay:", component.style?.labelDisplay);
             const { DynamicComponentRenderer } = require("@/lib/registry/DynamicComponentRenderer");
             return (
               <DynamicComponentRenderer
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 75eec128..45b97b30 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -39,6 +39,8 @@ interface RealtimePreviewProps {
   onUpdateComponent?: (updatedComponent: any) => void; // 🆕 컴포넌트 업데이트 콜백
   onSelectTabComponent?: (tabId: string, compId: string, comp: any) => void; // 🆕 탭 내부 컴포넌트 선택 콜백
   selectedTabComponentId?: string; // 🆕 선택된 탭 컴포넌트 ID
+  onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void; // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+  selectedPanelComponentId?: string; // 🆕 선택된 분할 패널 컴포넌트 ID
   onResize?: (componentId: string, newSize: { width: number; height: number }) => void; // 🆕 리사이즈 콜백
 
   // 버튼 액션을 위한 props
@@ -140,6 +142,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   onUpdateComponent, // 🆕 컴포넌트 업데이트 콜백
   onSelectTabComponent, // 🆕 탭 내부 컴포넌트 선택 콜백
   selectedTabComponentId, // 🆕 선택된 탭 컴포넌트 ID
+  onSelectPanelComponent, // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+  selectedPanelComponentId, // 🆕 선택된 분할 패널 컴포넌트 ID
   onResize, // 🆕 리사이즈 콜백
 }) => {
   // 🆕 화면 다국어 컨텍스트
@@ -594,12 +598,7 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
             (contentRef as any).current = node;
           }
         }}
-        className={`${
-          (component.type === "component" && (component as any).componentType === "flow-widget") ||
-          ((component as any).componentType === "conditional-container" && !isDesignMode)
-            ? "h-auto"
-            : "h-full"
-        } overflow-visible`}
+        className="h-full overflow-visible"
         style={{ width: "100%", maxWidth: "100%" }}
       >
         <DynamicComponentRenderer
@@ -640,12 +639,14 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
           onUpdateComponent={onUpdateComponent}
           onSelectTabComponent={onSelectTabComponent}
           selectedTabComponentId={selectedTabComponentId}
+          onSelectPanelComponent={onSelectPanelComponent}
+          selectedPanelComponentId={selectedPanelComponentId}
         />
       </div>
 
-      {/* 선택된 컴포넌트 정보 표시 */}
+      {/* 선택된 컴포넌트 정보 표시 - 🔧 오른쪽으로 이동 (라벨과 겹치지 않도록) */}
       {isSelected && (
-        <div className="bg-primary text-primary-foreground absolute -top-7 left-0 rounded-md px-2.5 py-1 text-xs font-medium shadow-sm">
+        <div className="bg-primary text-primary-foreground absolute -top-7 right-0 rounded-md px-2.5 py-1 text-xs font-medium shadow-sm">
           {type === "widget" && (
             <div className="flex items-center gap-1.5">
               {getWidgetIcon((component as WidgetComponent).widgetType)}
@@ -684,7 +685,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   );
 };
 
-// React.memo로 래핑하여 불필요한 리렌더링 방지
+// 🔧 arePropsEqual 제거 - 기본 React.memo 사용 (디버깅용)
+// component 객체가 새로 생성되면 자동으로 리렌더링됨
 export const RealtimePreviewDynamic = React.memo(RealtimePreviewDynamicComponent);
 
 // displayName 설정 (디버깅용)
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 743b1cf9..5a96a959 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -17,7 +17,11 @@ import {
   SCREEN_RESOLUTIONS,
 } from "@/types/screen";
 import { generateComponentId } from "@/lib/utils/generateId";
-import { getComponentIdFromWebType, createV2ConfigFromColumn, getV2ConfigFromWebType } from "@/lib/utils/webTypeMapping";
+import {
+  getComponentIdFromWebType,
+  createV2ConfigFromColumn,
+  getV2ConfigFromWebType,
+} from "@/lib/utils/webTypeMapping";
 import {
   createGroupComponent,
   calculateBoundingBox,
@@ -31,6 +35,17 @@ import {
   snapSizeToGrid,
   snapToGrid,
 } from "@/lib/utils/gridUtils";
+import {
+  alignComponents,
+  distributeComponents,
+  matchComponentSize,
+  toggleAllLabels,
+  nudgeComponents,
+  AlignMode,
+  DistributeDirection,
+  MatchSizeMode,
+} from "@/lib/utils/alignmentUtils";
+import { KeyboardShortcutsModal } from "./modals/KeyboardShortcutsModal";
 
 // 10px 단위 스냅 함수
 const snapTo10px = (value: number): number => {
@@ -122,9 +137,12 @@ interface ScreenDesignerProps {
   defaultDevicePreview?: "mobile" | "tablet";
 }
 
-// 패널 설정 (통합 패널 1개)
+import { useLayerOptional, LayerProvider, createDefaultLayer } from "@/contexts/LayerContext";
+import { LayerManagerPanel } from "./LayerManagerPanel";
+import { LayerType, LayerDefinition } from "@/types/screen-management";
+
+// 패널 설정 업데이트
 const panelConfigs: PanelConfig[] = [
-  // 통합 패널 (컴포넌트 + 편집 탭)
   {
     id: "v2",
     title: "패널",
@@ -133,6 +151,14 @@ const panelConfigs: PanelConfig[] = [
     defaultHeight: 700,
     shortcutKey: "p",
   },
+  {
+    id: "layer",
+    title: "레이어",
+    defaultPosition: "right",
+    defaultWidth: 240,
+    defaultHeight: 500,
+    shortcutKey: "l",
+  },
 ];
 
 export default function ScreenDesigner({ 
@@ -144,9 +170,6 @@ export default function ScreenDesigner({
 }: ScreenDesignerProps) {
   // POP 모드 여부에 따른 API 분기
   const USE_POP_API = isPop;
-  // 패널 상태 관리
-  const { panelStates, togglePanel, openPanel, closePanel } = usePanelState(panelConfigs);
-
   const [layout, setLayout] = useState<LayoutData>({
     components: [],
     gridSettings: {
@@ -169,6 +192,9 @@ export default function ScreenDesigner({
   // 메뉴 할당 모달 상태
   const [showMenuAssignmentModal, setShowMenuAssignmentModal] = useState(false);
 
+  // 단축키 도움말 모달 상태
+  const [showShortcutsModal, setShowShortcutsModal] = useState(false);
+
   // 파일첨부 상세 모달 상태
   const [showFileAttachmentModal, setShowFileAttachmentModal] = useState(false);
   const [selectedFileComponent, setSelectedFileComponent] = useState<ComponentData | null>(null);
@@ -178,23 +204,39 @@ export default function ScreenDesigner({
     SCREEN_RESOLUTIONS[0], // 기본값: Full HD
   );
 
+  // 🆕 패널 상태 관리 (usePanelState 훅)
+  const { panelStates, togglePanel, openPanel, closePanel, closeAllPanels, updatePanelPosition, updatePanelSize } =
+    usePanelState(panelConfigs);
+
   const [selectedComponent, setSelectedComponent] = useState<ComponentData | null>(null);
 
-  // 🆕 탭 내부 컴포넌트 선택 상태
+  // 🆕 탭 내부 컴포넌트 선택 상태 (중첩 구조 지원)
   const [selectedTabComponentInfo, setSelectedTabComponentInfo] = useState<{
     tabsComponentId: string; // 탭 컴포넌트 ID
     tabId: string; // 탭 ID
     componentId: string; // 탭 내부 컴포넌트 ID
     component: any; // 탭 내부 컴포넌트 데이터
+    // 🆕 중첩 구조용: 부모 분할 패널 정보
+    parentSplitPanelId?: string | null;
+    parentPanelSide?: "left" | "right" | null;
+  } | null>(null);
+
+  // 🆕 분할 패널 내부 컴포넌트 선택 상태
+  const [selectedPanelComponentInfo, setSelectedPanelComponentInfo] = useState<{
+    splitPanelId: string; // 분할 패널 컴포넌트 ID
+    panelSide: "left" | "right"; // 좌측/우측 패널
+    componentId: string; // 패널 내부 컴포넌트 ID
+    component: any; // 패널 내부 컴포넌트 데이터
   } | null>(null);
 
   // 컴포넌트 선택 시 통합 패널 자동 열기
   const handleComponentSelect = useCallback(
     (component: ComponentData | null) => {
       setSelectedComponent(component);
-      // 일반 컴포넌트 선택 시 탭 내부 컴포넌트 선택 해제
+      // 일반 컴포넌트 선택 시 탭 내부 컴포넌트/분할 패널 내부 컴포넌트 선택 해제
       if (component) {
         setSelectedTabComponentInfo(null);
+        setSelectedPanelComponentInfo(null);
       }
 
       // 컴포넌트가 선택되면 통합 패널 자동 열기
@@ -205,28 +247,102 @@ export default function ScreenDesigner({
     [openPanel],
   );
 
-  // 🆕 탭 내부 컴포넌트 선택 핸들러
+  // 🆕 탭 내부 컴포넌트 선택 핸들러 (중첩 구조 지원)
   const handleSelectTabComponent = useCallback(
-    (tabsComponentId: string, tabId: string, compId: string, comp: any) => {
+    (
+      tabsComponentId: string,
+      tabId: string,
+      compId: string,
+      comp: any,
+      // 🆕 중첩 구조용: 부모 분할 패널 정보 (선택적)
+      parentSplitPanelId?: string | null,
+      parentPanelSide?: "left" | "right" | null,
+    ) => {
       if (!compId) {
         // 탭 영역 빈 공간 클릭 시 선택 해제
         setSelectedTabComponentInfo(null);
         return;
       }
-      
+
       setSelectedTabComponentInfo({
         tabsComponentId,
         tabId,
         componentId: compId,
         component: comp,
+        parentSplitPanelId: parentSplitPanelId || null,
+        parentPanelSide: parentPanelSide || null,
       });
-      // 탭 내부 컴포넌트 선택 시 일반 컴포넌트 선택 해제
+      // 탭 내부 컴포넌트 선택 시 일반 컴포넌트/분할 패널 내부 컴포넌트 선택 해제
       setSelectedComponent(null);
+      setSelectedPanelComponentInfo(null);
       openPanel("v2");
     },
     [openPanel],
   );
 
+  // 🆕 분할 패널 내부 컴포넌트 선택 핸들러
+  const handleSelectPanelComponent = useCallback(
+    (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => {
+      // 🐛 디버깅: 전달받은 comp 확인
+      console.log("🐛 [handleSelectPanelComponent] comp:", {
+        compId,
+        componentType: comp?.componentType,
+        selectedTable: comp?.componentConfig?.selectedTable,
+        fieldMapping: comp?.componentConfig?.fieldMapping,
+        fieldMappingKeys: comp?.componentConfig?.fieldMapping ? Object.keys(comp.componentConfig.fieldMapping) : [],
+      });
+
+      if (!compId) {
+        // 패널 영역 빈 공간 클릭 시 선택 해제
+        setSelectedPanelComponentInfo(null);
+        return;
+      }
+
+      setSelectedPanelComponentInfo({
+        splitPanelId,
+        panelSide,
+        componentId: compId,
+        component: comp,
+      });
+      // 분할 패널 내부 컴포넌트 선택 시 일반 컴포넌트/탭 내부 컴포넌트 선택 해제
+      setSelectedComponent(null);
+      setSelectedTabComponentInfo(null);
+      openPanel("v2");
+    },
+    [openPanel],
+  );
+
+  // 🆕 중첩된 탭 컴포넌트 선택 이벤트 리스너 (분할 패널 안의 탭 안의 컴포넌트)
+  useEffect(() => {
+    const handleNestedTabComponentSelect = (event: CustomEvent) => {
+      const { tabsComponentId, tabId, componentId, component, parentSplitPanelId, parentPanelSide } = event.detail;
+
+      if (!componentId) {
+        setSelectedTabComponentInfo(null);
+        return;
+      }
+
+      console.log("🎯 중첩된 탭 컴포넌트 선택:", event.detail);
+
+      setSelectedTabComponentInfo({
+        tabsComponentId,
+        tabId,
+        componentId,
+        component,
+        parentSplitPanelId,
+        parentPanelSide,
+      });
+      setSelectedComponent(null);
+      setSelectedPanelComponentInfo(null);
+      openPanel("v2");
+    };
+
+    window.addEventListener("nested-tab-component-select", handleNestedTabComponentSelect as EventListener);
+
+    return () => {
+      window.removeEventListener("nested-tab-component-select", handleNestedTabComponentSelect as EventListener);
+    };
+  }, [openPanel]);
 
   // 클립보드 상태
   const [clipboard, setClipboard] = useState<ComponentData[]>([]);
@@ -269,6 +385,7 @@ export default function ScreenDesigner({
   const [zoomLevel, setZoomLevel] = useState(1); // 1 = 100%
   const MIN_ZOOM = 0.1; // 10%
   const MAX_ZOOM = 3; // 300%
+  const zoomRafRef = useRef<number | null>(null); // 줌 RAF throttle용
 
   // 전역 파일 상태 변경 시 강제 리렌더링을 위한 상태
   const [forceRenderTrigger, setForceRenderTrigger] = useState(0);
@@ -359,6 +476,17 @@ export default function ScreenDesigner({
   const [tables, setTables] = useState<TableInfo[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
 
+  // 🆕 검색어로 필터링된 테이블 목록
+  const filteredTables = useMemo(() => {
+    if (!searchTerm.trim()) return tables;
+    const term = searchTerm.toLowerCase();
+    return tables.filter(
+      (table) =>
+        table.tableName.toLowerCase().includes(term) ||
+        table.columns?.some((col) => col.columnName.toLowerCase().includes(term)),
+    );
+  }, [tables, searchTerm]);
+
   // 그룹 생성 다이얼로그
   const [showGroupCreateDialog, setShowGroupCreateDialog] = useState(false);
 
@@ -383,27 +511,43 @@ export default function ScreenDesigner({
     return lines;
   }, [layout.gridSettings?.showGrid, screenResolution.width, screenResolution.height]);
 
-  // 필터된 테이블 목록
-  const filteredTables = useMemo(() => {
-    if (!searchTerm) return tables;
-    return tables.filter(
-      (table) =>
-        table.tableName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        table.columns.some((col) => col.columnName.toLowerCase().includes(searchTerm.toLowerCase())),
-    );
-  }, [tables, searchTerm]);
+  // 🆕 레이어 활성 상태 관리 (LayerProvider 외부에서 관리)
+  const [activeLayerId, setActiveLayerIdLocal] = useState<string | null>("default-layer");
+
+  // 캔버스에 렌더링할 컴포넌트 필터링 (레이어 기반)
+  // 활성 레이어가 있으면 해당 레이어의 컴포넌트만 표시
+  // layerId가 없는 컴포넌트는 기본 레이어("default-layer")에 속한 것으로 처리
+  const visibleComponents = useMemo(() => {
+    // 레이어 시스템이 활성화되지 않았거나 활성 레이어가 없으면 모든 컴포넌트 표시
+    if (!activeLayerId) {
+      return layout.components;
+    }
+
+    // 활성 레이어에 속한 컴포넌트만 필터링
+    return layout.components.filter((comp) => {
+      // layerId가 없는 컴포넌트는 기본 레이어("default-layer")에 속한 것으로 처리
+      const compLayerId = comp.layerId || "default-layer";
+      return compLayerId === activeLayerId;
+    });
+  }, [layout.components, activeLayerId]);
 
   // 이미 배치된 컬럼 목록 계산
   const placedColumns = useMemo(() => {
     const placed = new Set<string>();
+    // 🔧 화면의 메인 테이블명을 fallback으로 사용
+    const screenTableName = selectedScreen?.tableName;
 
     const collectColumns = (components: ComponentData[]) => {
       components.forEach((comp) => {
         const anyComp = comp as any;
 
-        // widget 타입 또는 component 타입 (새로운 시스템)에서 tableName과 columnName 확인
-        if ((comp.type === "widget" || comp.type === "component") && anyComp.tableName && anyComp.columnName) {
-          const key = `${anyComp.tableName}.${anyComp.columnName}`;
+        // 🔧 tableName과 columnName을 여러 위치에서 찾기 (최상위, componentConfig, 또는 화면 테이블명)
+        const tableName = anyComp.tableName || anyComp.componentConfig?.tableName || screenTableName;
+        const columnName = anyComp.columnName || anyComp.componentConfig?.columnName;
+
+        // widget 타입 또는 component 타입에서 columnName 확인 (tableName은 화면 테이블명으로 fallback)
+        if ((comp.type === "widget" || comp.type === "component") && tableName && columnName) {
+          const key = `${tableName}.${columnName}`;
           placed.add(key);
         }
 
@@ -416,7 +560,7 @@ export default function ScreenDesigner({
 
     collectColumns(layout.components);
     return placed;
-  }, [layout.components]);
+  }, [layout.components, selectedScreen?.tableName]);
 
   // 히스토리에 저장
   const saveToHistory = useCallback(
@@ -431,18 +575,16 @@ export default function ScreenDesigner({
     [historyIndex],
   );
 
-  // 🆕 탭 내부 컴포넌트 설정 업데이트 핸들러
+  // 🆕 탭 내부 컴포넌트 설정 업데이트 핸들러 (중첩 구조 지원)
   const handleUpdateTabComponentConfig = useCallback(
     (path: string, value: any) => {
       if (!selectedTabComponentInfo) return;
-      
-      const { tabsComponentId, tabId, componentId } = selectedTabComponentInfo;
-      
-      setLayout((prevLayout) => {
-        const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
-        if (!tabsComponent) return prevLayout;
 
-        const currentConfig = (tabsComponent as any).componentConfig || {};
+      const { tabsComponentId, tabId, componentId, parentSplitPanelId, parentPanelSide } = selectedTabComponentInfo;
+
+      // 탭 컴포넌트 업데이트 함수 (재사용)
+      const updateTabsComponent = (tabsComponent: any) => {
+        const currentConfig = tabsComponent.componentConfig || {};
         const tabs = currentConfig.tabs || [];
 
         const updatedTabs = tabs.map((tab: any) => {
@@ -451,34 +593,18 @@ export default function ScreenDesigner({
               ...tab,
               components: (tab.components || []).map((comp: any) => {
                 if (comp.id === componentId) {
-                  // path에 따라 적절한 속성 업데이트
                   if (path.startsWith("componentConfig.")) {
                     const configPath = path.replace("componentConfig.", "");
                     return {
                       ...comp,
-                      componentConfig: {
-                        ...comp.componentConfig,
-                        [configPath]: value,
-                      },
+                      componentConfig: { ...comp.componentConfig, [configPath]: value },
                     };
                   } else if (path.startsWith("style.")) {
                     const stylePath = path.replace("style.", "");
-                    return {
-                      ...comp,
-                      style: {
-                        ...comp.style,
-                        [stylePath]: value,
-                      },
-                    };
+                    return { ...comp, style: { ...comp.style, [stylePath]: value } };
                   } else if (path.startsWith("size.")) {
                     const sizePath = path.replace("size.", "");
-                    return {
-                      ...comp,
-                      size: {
-                        ...comp.size,
-                        [sizePath]: value,
-                      },
-                    };
+                    return { ...comp, size: { ...comp.size, [sizePath]: value } };
                   } else {
                     return { ...comp, [path]: value };
                   }
@@ -490,29 +616,68 @@ export default function ScreenDesigner({
           return tab;
         });
 
-        const updatedComponent = {
-          ...tabsComponent,
-          componentConfig: {
-            ...currentConfig,
-            tabs: updatedTabs,
-          },
-        };
+        return { ...tabsComponent, componentConfig: { ...currentConfig, tabs: updatedTabs } };
+      };
 
-        const newLayout = {
-          ...prevLayout,
-          components: prevLayout.components.map((c) =>
-            c.id === tabsComponentId ? updatedComponent : c
-          ),
-        };
+      setLayout((prevLayout) => {
+        let newLayout;
+        let updatedTabs;
+
+        if (parentSplitPanelId && parentPanelSide) {
+          // 🆕 중첩 구조: 분할 패널 안의 탭 업데이트
+          newLayout = {
+            ...prevLayout,
+            components: prevLayout.components.map((c) => {
+              if (c.id === parentSplitPanelId) {
+                const splitConfig = (c as any).componentConfig || {};
+                const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                const panelConfig = splitConfig[panelKey] || {};
+                const panelComponents = panelConfig.components || [];
+
+                const tabsComponent = panelComponents.find((pc: any) => pc.id === tabsComponentId);
+                if (!tabsComponent) return c;
+
+                const updatedTabsComponent = updateTabsComponent(tabsComponent);
+                updatedTabs = updatedTabsComponent.componentConfig.tabs;
+
+                return {
+                  ...c,
+                  componentConfig: {
+                    ...splitConfig,
+                    [panelKey]: {
+                      ...panelConfig,
+                      components: panelComponents.map((pc: any) =>
+                        pc.id === tabsComponentId ? updatedTabsComponent : pc,
+                      ),
+                    },
+                  },
+                };
+              }
+              return c;
+            }),
+          };
+        } else {
+          // 일반 구조: 최상위 탭 업데이트
+          const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
+          if (!tabsComponent) return prevLayout;
+
+          const updatedTabsComponent = updateTabsComponent(tabsComponent);
+          updatedTabs = updatedTabsComponent.componentConfig.tabs;
+
+          newLayout = {
+            ...prevLayout,
+            components: prevLayout.components.map((c) => (c.id === tabsComponentId ? updatedTabsComponent : c)),
+          };
+        }
 
         // 선택된 컴포넌트 정보도 업데이트
-        const updatedComp = updatedTabs
-          .find((t: any) => t.id === tabId)
-          ?.components?.find((c: any) => c.id === componentId);
-        if (updatedComp) {
-          setSelectedTabComponentInfo((prev) =>
-            prev ? { ...prev, component: updatedComp } : null
-          );
+        if (updatedTabs) {
+          const updatedComp = updatedTabs
+            .find((t: any) => t.id === tabId)
+            ?.components?.find((c: any) => c.id === componentId);
+          if (updatedComp) {
+            setSelectedTabComponentInfo((prev) => (prev ? { ...prev, component: updatedComp } : null));
+          }
         }
 
         return newLayout;
@@ -669,11 +834,27 @@ export default function ScreenDesigner({
           const finalKey = pathParts[pathParts.length - 1];
           current[finalKey] = value;
 
+          // 🔧 style 관련 업데이트 디버그 로그
+          if (path.includes("style") || path.includes("labelDisplay")) {
+            console.log("🎨 style 업데이트 제대로 렌더링된거다 내가바꿈:", {
+              componentId: comp.id,
+              path,
+              value,
+              updatedStyle: newComp.style,
+              pathIncludesLabelDisplay: path.includes("labelDisplay"),
+            });
+          }
+
+          // 🆕 labelDisplay 변경 시 강제 리렌더링 트리거 (조건문 밖으로 이동)
+          if (path === "style.labelDisplay") {
+            console.log("⏰⏰⏰ labelDisplay 변경 감지! forceRenderTrigger 실행 예정");
+          }
+
           // 🆕 size 변경 시 style도 함께 업데이트 (파란 테두리와 실제 크기 동기화)
           if (path === "size.width" || path === "size.height" || path === "size") {
             // 🔧 style 객체를 새로 복사하여 불변성 유지
             newComp.style = { ...(newComp.style || {}) };
-            
+
             if (path === "size.width") {
               newComp.style.width = `${value}px`;
             } else if (path === "size.height") {
@@ -687,7 +868,7 @@ export default function ScreenDesigner({
                 newComp.style.height = `${value.height}px`;
               }
             }
-            
+
             console.log("🔄 size 변경 → style 동기화:", {
               componentId: newComp.id,
               path,
@@ -992,18 +1173,19 @@ export default function ScreenDesigner({
         // 전체 selectedScreen 객체도 출력
         fullScreen: selectedScreen,
       });
-      
+
       // REST API 데이터 소스인 경우
       // 1. dataSourceType이 "restapi"인 경우
       // 2. tableName이 restapi_ 또는 _restapi_로 시작하는 경우
       // 3. restApiConnectionId가 있는 경우
-      const isRestApi = selectedScreen?.dataSourceType === "restapi" || 
-                        selectedScreen?.tableName?.startsWith("restapi_") ||
-                        selectedScreen?.tableName?.startsWith("_restapi_") ||
-                        !!selectedScreen?.restApiConnectionId;
-      
+      const isRestApi =
+        selectedScreen?.dataSourceType === "restapi" ||
+        selectedScreen?.tableName?.startsWith("restapi_") ||
+        selectedScreen?.tableName?.startsWith("_restapi_") ||
+        !!selectedScreen?.restApiConnectionId;
+
       console.log("🔍 [ScreenDesigner] REST API 여부:", { isRestApi });
-      
+
       if (isRestApi && (selectedScreen?.restApiConnectionId || selectedScreen?.tableName)) {
         try {
           // 연결 ID 추출 (restApiConnectionId가 없으면 tableName에서 추출)
@@ -1012,13 +1194,13 @@ export default function ScreenDesigner({
             const match = selectedScreen.tableName.match(/restapi_(\d+)/);
             connectionId = match ? parseInt(match[1]) : undefined;
           }
-          
+
           if (!connectionId) {
             throw new Error("REST API 연결 ID를 찾을 수 없습니다.");
           }
-          
+
           console.log("🌐 [ScreenDesigner] REST API 데이터 로드:", { connectionId });
-          
+
           const restApiData = await ExternalRestApiConnectionAPI.fetchData(
             connectionId,
             selectedScreen?.restApiEndpoint,
@@ -1043,12 +1225,12 @@ export default function ScreenDesigner({
             tableLabel: restApiData.connectionInfo.connectionName || "REST API 데이터",
             columns,
           };
-          
+
           console.log("✅ [ScreenDesigner] REST API 컬럼 로드 완료:", {
             tableName: tableInfo.tableName,
             tableLabel: tableInfo.tableLabel,
             columnsCount: columns.length,
-            columns: columns.map(c => c.columnName),
+            columns: columns.map((c) => c.columnName),
           });
 
           setTables([tableInfo]);
@@ -1155,95 +1337,107 @@ export default function ScreenDesigner({
     };
 
     loadScreenDataSource();
-  }, [selectedScreen?.tableName, selectedScreen?.screenName, selectedScreen?.dataSourceType, selectedScreen?.restApiConnectionId, selectedScreen?.restApiEndpoint, selectedScreen?.restApiJsonPath]);
+  }, [
+    selectedScreen?.tableName,
+    selectedScreen?.screenName,
+    selectedScreen?.dataSourceType,
+    selectedScreen?.restApiConnectionId,
+    selectedScreen?.restApiEndpoint,
+    selectedScreen?.restApiJsonPath,
+  ]);
 
   // 테이블 선택 핸들러 - 사이드바에서 테이블 선택 시 호출
-  const handleTableSelect = useCallback(async (tableName: string) => {
-    console.log("📊 테이블 선택:", tableName);
-    
-    try {
-      // 테이블 라벨 조회
-      const tableListResponse = await tableManagementApi.getTableList();
-      const currentTable =
-        tableListResponse.success && tableListResponse.data
-          ? tableListResponse.data.find((t: any) => (t.tableName || t.table_name) === tableName)
-          : null;
-      const tableLabel = currentTable?.displayName || currentTable?.table_label || tableName;
+  const handleTableSelect = useCallback(
+    async (tableName: string) => {
+      console.log("📊 테이블 선택:", tableName);
 
-      // 테이블 컬럼 정보 조회
-      const columnsResponse = await tableTypeApi.getColumns(tableName, true);
+      try {
+        // 테이블 라벨 조회
+        const tableListResponse = await tableManagementApi.getTableList();
+        const currentTable =
+          tableListResponse.success && tableListResponse.data
+            ? tableListResponse.data.find((t: any) => (t.tableName || t.table_name) === tableName)
+            : null;
+        const tableLabel = currentTable?.displayName || currentTable?.table_label || tableName;
 
-      const columns: ColumnInfo[] = (columnsResponse || []).map((col: any) => {
-        const inputType = col.inputType || col.input_type;
-        const widgetType = inputType || col.widgetType || col.widget_type || col.webType || col.web_type;
+        // 테이블 컬럼 정보 조회
+        const columnsResponse = await tableTypeApi.getColumns(tableName, true);
 
-        let detailSettings = col.detailSettings || col.detail_settings;
-        if (typeof detailSettings === "string") {
-          try {
-            detailSettings = JSON.parse(detailSettings);
-          } catch (e) {
-            detailSettings = {};
-          }
-        }
+        const columns: ColumnInfo[] = (columnsResponse || []).map((col: any) => {
+          const inputType = col.inputType || col.input_type;
+          const widgetType = inputType || col.widgetType || col.widget_type || col.webType || col.web_type;
 
-        return {
-          tableName: col.tableName || tableName,
-          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,
-          webType: col.webType || col.web_type,
-          input_type: inputType,
-          inputType: inputType,
-          widgetType,
-          isNullable: col.isNullable || col.is_nullable,
-          required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO",
-          columnDefault: col.columnDefault || col.column_default,
-          characterMaximumLength: col.characterMaximumLength || col.character_maximum_length,
-          codeCategory: col.codeCategory || col.code_category,
-          codeValue: col.codeValue || col.code_value,
-          referenceTable: detailSettings?.referenceTable || col.referenceTable || col.reference_table,
-          referenceColumn: detailSettings?.referenceColumn || col.referenceColumn || col.reference_column,
-          displayColumn: detailSettings?.displayColumn || col.displayColumn || col.display_column,
-          detailSettings,
-        };
-      });
-
-      const tableInfo: TableInfo = {
-        tableName,
-        tableLabel,
-        columns,
-      };
-
-      setTables([tableInfo]);
-      toast.success(`테이블 "${tableLabel}" 선택됨`);
-      
-      // 기존 테이블과 다른 테이블 선택 시, 기존 컴포넌트 중 다른 테이블 컬럼은 제거
-      if (tables.length > 0 && tables[0].tableName !== tableName) {
-        setLayout((prev) => {
-          const newComponents = prev.components.filter((comp) => {
-            // 테이블 컬럼 기반 컴포넌트인지 확인
-            if (comp.tableName && comp.tableName !== tableName) {
-              console.log("🗑️ 다른 테이블 컴포넌트 제거:", comp.tableName, comp.columnName);
-              return false;
+          let detailSettings = col.detailSettings || col.detail_settings;
+          if (typeof detailSettings === "string") {
+            try {
+              detailSettings = JSON.parse(detailSettings);
+            } catch (e) {
+              detailSettings = {};
             }
-            return true;
-          });
-
-          if (newComponents.length < prev.components.length) {
-            toast.info(`이전 테이블(${tables[0].tableName})의 컴포넌트가 ${prev.components.length - newComponents.length}개 제거되었습니다.`);
           }
 
           return {
-            ...prev,
-            components: newComponents,
+            tableName: col.tableName || tableName,
+            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,
+            webType: col.webType || col.web_type,
+            input_type: inputType,
+            inputType: inputType,
+            widgetType,
+            isNullable: col.isNullable || col.is_nullable,
+            required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO",
+            columnDefault: col.columnDefault || col.column_default,
+            characterMaximumLength: col.characterMaximumLength || col.character_maximum_length,
+            codeCategory: col.codeCategory || col.code_category,
+            codeValue: col.codeValue || col.code_value,
+            referenceTable: detailSettings?.referenceTable || col.referenceTable || col.reference_table,
+            referenceColumn: detailSettings?.referenceColumn || col.referenceColumn || col.reference_column,
+            displayColumn: detailSettings?.displayColumn || col.displayColumn || col.display_column,
+            detailSettings,
           };
         });
+
+        const tableInfo: TableInfo = {
+          tableName,
+          tableLabel,
+          columns,
+        };
+
+        setTables([tableInfo]);
+        toast.success(`테이블 "${tableLabel}" 선택됨`);
+
+        // 기존 테이블과 다른 테이블 선택 시, 기존 컴포넌트 중 다른 테이블 컬럼은 제거
+        if (tables.length > 0 && tables[0].tableName !== tableName) {
+          setLayout((prev) => {
+            const newComponents = prev.components.filter((comp) => {
+              // 테이블 컬럼 기반 컴포넌트인지 확인
+              if (comp.tableName && comp.tableName !== tableName) {
+                console.log("🗑️ 다른 테이블 컴포넌트 제거:", comp.tableName, comp.columnName);
+                return false;
+              }
+              return true;
+            });
+
+            if (newComponents.length < prev.components.length) {
+              toast.info(
+                `이전 테이블(${tables[0].tableName})의 컴포넌트가 ${prev.components.length - newComponents.length}개 제거되었습니다.`,
+              );
+            }
+
+            return {
+              ...prev,
+              components: newComponents,
+            };
+          });
+        }
+      } catch (error) {
+        console.error("테이블 정보 로드 실패:", error);
+        toast.error("테이블 정보를 불러오는데 실패했습니다.");
       }
-    } catch (error) {
-      console.error("테이블 정보 로드 실패:", error);
-      toast.error("테이블 정보를 불러오는데 실패했습니다.");
-    }
-  }, [tables]);
+    },
+    [tables],
+  );
 
   // 화면 레이아웃 로드
   useEffect(() => {
@@ -1274,12 +1468,27 @@ export default function ScreenDesigner({
           } else if (USE_V2_API) {
             // 데스크톱 V2 모드: screen_layouts_v2 테이블 사용
             const v2Response = await screenApi.getLayoutV2(selectedScreen.screenId);
+
+            // 🐛 디버깅: API 응답에서 fieldMapping.id 확인
+            const splitPanelInV2 = v2Response?.components?.find((c: any) => c.url?.includes("v2-split-panel-layout"));
+            const finishedTimelineInV2 = splitPanelInV2?.overrides?.rightPanel?.components?.find(
+              (c: any) => c.id === "finished_timeline",
+            );
+            console.log("🐛 [API 응답 RAW] finished_timeline:", JSON.stringify(finishedTimelineInV2, null, 2));
+            console.log("🐛 [API 응답] finished_timeline fieldMapping:", {
+              fieldMapping: JSON.stringify(finishedTimelineInV2?.componentConfig?.fieldMapping),
+              fieldMappingKeys: finishedTimelineInV2?.componentConfig?.fieldMapping
+                ? Object.keys(finishedTimelineInV2?.componentConfig?.fieldMapping)
+                : [],
+              hasId: !!finishedTimelineInV2?.componentConfig?.fieldMapping?.id,
+              idValue: finishedTimelineInV2?.componentConfig?.fieldMapping?.id,
+            });
+
             response = v2Response ? convertV2ToLegacy(v2Response) : null;
-            console.log("📦 V2 레이아웃 로드:", v2Response?.components?.length || 0, "개 컴포넌트");
           } else {
             response = await screenApi.getLayout(selectedScreen.screenId);
           }
-          
+
           if (response) {
             // 🔄 마이그레이션 필요 여부 확인 (V2는 스킵)
             let layoutToUse = response;
@@ -1321,15 +1530,18 @@ export default function ScreenDesigner({
             }
 
             // 🔍 디버깅: 로드된 버튼 컴포넌트의 action 확인
-            const buttonComponents = layoutWithDefaultGrid.components.filter(
-              (c: any) => c.componentType?.startsWith("button")
+            const buttonComponents = layoutWithDefaultGrid.components.filter((c: any) =>
+              c.componentType?.startsWith("button"),
+            );
+            console.log(
+              "🔍 [로드] 버튼 컴포넌트 action 확인:",
+              buttonComponents.map((c: any) => ({
+                id: c.id,
+                type: c.componentType,
+                actionType: c.componentConfig?.action?.type,
+                fullAction: c.componentConfig?.action,
+              })),
             );
-            console.log("🔍 [로드] 버튼 컴포넌트 action 확인:", buttonComponents.map((c: any) => ({
-              id: c.id,
-              type: c.componentType,
-              actionType: c.componentConfig?.action?.type,
-              fullAction: c.componentConfig?.action,
-            })));
 
             setLayout(layoutWithDefaultGrid);
             setHistory([layoutWithDefaultGrid]);
@@ -1355,8 +1567,8 @@ export default function ScreenDesigner({
       if (
         activeElement instanceof HTMLInputElement ||
         activeElement instanceof HTMLTextAreaElement ||
-        activeElement?.getAttribute('contenteditable') === 'true' ||
-        activeElement?.getAttribute('role') === 'textbox'
+        activeElement?.getAttribute("contenteditable") === "true" ||
+        activeElement?.getAttribute("role") === "textbox"
       ) {
         return;
       }
@@ -1382,8 +1594,8 @@ export default function ScreenDesigner({
       if (
         activeElement instanceof HTMLInputElement ||
         activeElement instanceof HTMLTextAreaElement ||
-        activeElement?.getAttribute('contenteditable') === 'true' ||
-        activeElement?.getAttribute('role') === 'textbox'
+        activeElement?.getAttribute("contenteditable") === "true" ||
+        activeElement?.getAttribute("role") === "textbox"
       ) {
         return;
       }
@@ -1467,7 +1679,7 @@ export default function ScreenDesigner({
     panState.innerScrollTop,
   ]);
 
-  // 마우스 휠로 줌 제어
+  // 마우스 휠로 줌 제어 (RAF throttle 적용으로 깜빡임 방지)
   useEffect(() => {
     const handleWheel = (e: WheelEvent) => {
       // 캔버스 컨테이너 내에서만 동작
@@ -1480,9 +1692,16 @@ export default function ScreenDesigner({
           const delta = e.deltaY;
           const zoomFactor = 0.001; // 줌 속도 조절
 
-          setZoomLevel((prevZoom) => {
-            const newZoom = prevZoom - delta * zoomFactor;
-            return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom));
+          // RAF throttle: 프레임당 한 번만 상태 업데이트
+          if (zoomRafRef.current !== null) {
+            cancelAnimationFrame(zoomRafRef.current);
+          }
+          zoomRafRef.current = requestAnimationFrame(() => {
+            setZoomLevel((prevZoom) => {
+              const newZoom = prevZoom - delta * zoomFactor;
+              return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom));
+            });
+            zoomRafRef.current = null;
           });
         }
       }
@@ -1494,58 +1713,22 @@ export default function ScreenDesigner({
     const containerRef = canvasContainerRef.current;
     return () => {
       containerRef?.removeEventListener("wheel", handleWheel);
+      if (zoomRafRef.current !== null) {
+        cancelAnimationFrame(zoomRafRef.current);
+      }
     };
   }, [MIN_ZOOM, MAX_ZOOM]);
 
-  // 격자 설정 업데이트 및 컴포넌트 자동 스냅
+  // 격자 설정 업데이트 (컴포넌트 자동 조정 제거됨)
   const updateGridSettings = useCallback(
     (newGridSettings: GridSettings) => {
       const newLayout = { ...layout, gridSettings: newGridSettings };
-
-      // 격자 스냅이 활성화된 경우, 모든 컴포넌트를 새로운 격자에 맞게 조정
-      if (newGridSettings.snapToGrid && screenResolution.width > 0) {
-        // 새로운 격자 설정으로 격자 정보 재계산 (해상도 기준)
-        const newGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, {
-          columns: newGridSettings.columns,
-          gap: newGridSettings.gap,
-          padding: newGridSettings.padding,
-          snapToGrid: newGridSettings.snapToGrid || false,
-        });
-
-        const gridUtilSettings = {
-          columns: newGridSettings.columns,
-          gap: newGridSettings.gap,
-          padding: newGridSettings.padding,
-          snapToGrid: true, // 항상 10px 스냅 활성화
-        };
-
-        const adjustedComponents = layout.components.map((comp) => {
-          const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
-          const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
-
-          // gridColumns가 없거나 범위를 벗어나면 자동 조정
-          let adjustedGridColumns = comp.gridColumns;
-          if (!adjustedGridColumns || adjustedGridColumns < 1 || adjustedGridColumns > newGridSettings.columns) {
-            adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings);
-          }
-
-          return {
-            ...comp,
-            position: snappedPosition,
-            size: snappedSize,
-            gridColumns: adjustedGridColumns, // gridColumns 속성 추가/조정
-          };
-        });
-
-        newLayout.components = adjustedComponents;
-        // console.log("격자 설정 변경으로 컴포넌트 위치 및 크기 자동 조정:", adjustedComponents.length, "개");
-        // console.log("새로운 격자 정보:", newGridInfo);
-      }
-
+      // 🆕 격자 설정 변경 시 컴포넌트 크기/위치 자동 조정 로직 제거됨
+      // 사용자가 명시적으로 "격자 재조정" 버튼을 클릭해야만 조정됨
       setLayout(newLayout);
       saveToHistory(newLayout);
     },
-    [layout, screenResolution, saveToHistory],
+    [layout, saveToHistory],
   );
 
   // 해상도 변경 핸들러 (컴포넌트 크기/위치 유지)
@@ -1573,7 +1756,7 @@ export default function ScreenDesigner({
       setLayout(updatedLayout);
       saveToHistory(updatedLayout);
 
-      toast.success(`해상도가 변경되었습니다.`, {
+      toast.success("해상도가 변경되었습니다.", {
         description: `${oldWidth}×${oldHeight} → ${newWidth}×${newHeight}`,
       });
 
@@ -1644,6 +1827,103 @@ export default function ScreenDesigner({
     toast.success(`${adjustedComponents.length}개 컴포넌트가 격자에 맞게 재정렬되었습니다.`);
   }, [layout, screenResolution, saveToHistory]);
 
+  // === 정렬/배분/동일크기/라벨토글/Nudge 핸들러 ===
+
+  // 컴포넌트 정렬
+  const handleGroupAlign = useCallback(
+    (mode: AlignMode) => {
+      if (groupState.selectedComponents.length < 2) {
+        toast.warning("2개 이상의 컴포넌트를 선택해주세요.");
+        return;
+      }
+      saveToHistory(layout);
+      const newComponents = alignComponents(layout.components, groupState.selectedComponents, mode);
+      setLayout((prev) => ({ ...prev, components: newComponents }));
+
+      const modeNames: Record<AlignMode, string> = {
+        left: "좌측", right: "우측", centerX: "가로 중앙",
+        top: "상단", bottom: "하단", centerY: "세로 중앙",
+      };
+      toast.success(`${modeNames[mode]} 정렬 완료`);
+    },
+    [groupState.selectedComponents, layout, saveToHistory]
+  );
+
+  // 컴포넌트 균등 배분
+  const handleGroupDistribute = useCallback(
+    (direction: DistributeDirection) => {
+      if (groupState.selectedComponents.length < 3) {
+        toast.warning("3개 이상의 컴포넌트를 선택해주세요.");
+        return;
+      }
+      saveToHistory(layout);
+      const newComponents = distributeComponents(layout.components, groupState.selectedComponents, direction);
+      setLayout((prev) => ({ ...prev, components: newComponents }));
+      toast.success(`${direction === "horizontal" ? "가로" : "세로"} 균등 배분 완료`);
+    },
+    [groupState.selectedComponents, layout, saveToHistory]
+  );
+
+  // 동일 크기 맞추기
+  const handleMatchSize = useCallback(
+    (mode: MatchSizeMode) => {
+      if (groupState.selectedComponents.length < 2) {
+        toast.warning("2개 이상의 컴포넌트를 선택해주세요.");
+        return;
+      }
+      saveToHistory(layout);
+      const newComponents = matchComponentSize(
+        layout.components,
+        groupState.selectedComponents,
+        mode,
+        selectedComponent?.id
+      );
+      setLayout((prev) => ({ ...prev, components: newComponents }));
+
+      const modeNames: Record<MatchSizeMode, string> = {
+        width: "너비", height: "높이", both: "크기",
+      };
+      toast.success(`${modeNames[mode]} 맞추기 완료`);
+    },
+    [groupState.selectedComponents, layout, selectedComponent?.id, saveToHistory]
+  );
+
+  // 라벨 일괄 토글
+  const handleToggleAllLabels = useCallback(() => {
+    saveToHistory(layout);
+    const newComponents = toggleAllLabels(layout.components);
+    setLayout((prev) => ({ ...prev, components: newComponents }));
+
+    const hasHidden = layout.components.some(
+      (c) => c.type === "widget" && (c.style as any)?.labelDisplay === false
+    );
+    toast.success(hasHidden ? "모든 라벨 표시" : "모든 라벨 숨기기");
+  }, [layout, saveToHistory]);
+
+  // Nudge (화살표 키 이동)
+  const handleNudge = useCallback(
+    (direction: "up" | "down" | "left" | "right", distance: number) => {
+      const targetIds =
+        groupState.selectedComponents.length > 0
+          ? groupState.selectedComponents
+          : selectedComponent
+            ? [selectedComponent.id]
+            : [];
+
+      if (targetIds.length === 0) return;
+
+      const newComponents = nudgeComponents(layout.components, targetIds, direction, distance);
+      setLayout((prev) => ({ ...prev, components: newComponents }));
+
+      // 선택된 컴포넌트 업데이트
+      if (selectedComponent && targetIds.includes(selectedComponent.id)) {
+        const updated = newComponents.find((c) => c.id === selectedComponent.id);
+        if (updated) setSelectedComponent(updated);
+      }
+    },
+    [groupState.selectedComponents, selectedComponent, layout.components]
+  );
+
   // 저장
   const handleSave = useCallback(async () => {
     if (!selectedScreen?.screenId) {
@@ -1689,10 +1969,21 @@ export default function ScreenDesigner({
       // 해상도 정보를 포함한 레이아웃 데이터 생성
       // 현재 선택된 테이블을 화면의 기본 테이블로 저장
       const currentMainTableName = tables.length > 0 ? tables[0].tableName : null;
-      
+
+      // 🆕 레이어 정보도 함께 저장 (레이어가 있으면 레이어의 컴포넌트로 업데이트)
+      const updatedLayers = layout.layers?.map((layer) => ({
+        ...layer,
+        components: layer.components.map((comp) => {
+          // 분할 패널 업데이트 로직 적용
+          const updatedComp = updatedComponents.find((uc) => uc.id === comp.id);
+          return updatedComp || comp;
+        }),
+      }));
+
       const layoutWithResolution = {
         ...layout,
         components: updatedComponents,
+        layers: updatedLayers, // 🆕 레이어 정보 포함
         screenResolution: screenResolution,
         mainTableName: currentMainTableName, // 화면의 기본 테이블
       };
@@ -1700,36 +1991,24 @@ export default function ScreenDesigner({
       const buttonComponents = layoutWithResolution.components.filter(
         (c: any) => c.componentType?.startsWith("button") || c.type === "button" || c.type === "button-primary",
       );
-      console.log("💾 저장 시작:", {
-        screenId: selectedScreen.screenId,
-        componentsCount: layoutWithResolution.components.length,
-        gridSettings: layoutWithResolution.gridSettings,
-        screenResolution: layoutWithResolution.screenResolution,
-        buttonComponents: buttonComponents.map((c: any) => ({
-          id: c.id,
-          type: c.type,
-          componentType: c.componentType,
-          text: c.componentConfig?.text,
-          actionType: c.componentConfig?.action?.type,
-          fullAction: c.componentConfig?.action,
-        })),
-      });
+      // 💾 저장 로그 (디버그 완료 - 간소화)
+      // console.log("💾 저장 시작:", { screenId: selectedScreen.screenId, componentsCount: layoutWithResolution.components.length });
+      // 분할 패널 디버그 로그 (주석 처리)
 
       // V2/POP API 사용 여부에 따라 분기
       const v2Layout = convertLegacyToV2(layoutWithResolution);
       if (USE_POP_API) {
         // POP 모드: screen_layouts_pop 테이블에 저장
         await screenApi.saveLayoutPop(selectedScreen.screenId, v2Layout);
-        console.log("📱 POP 레이아웃 저장:", v2Layout.components.length, "개 컴포넌트");
       } else if (USE_V2_API) {
         // 데스크톱 V2 모드: screen_layouts_v2 테이블에 저장
         await screenApi.saveLayoutV2(selectedScreen.screenId, v2Layout);
-        console.log("📦 V2 레이아웃 저장:", v2Layout.components.length, "개 컴포넌트");
+        // console.log("📦 V2 레이아웃 저장:", v2Layout.components.length, "개 컴포넌트");
       } else {
         await screenApi.saveLayout(selectedScreen.screenId, layoutWithResolution);
       }
 
-      console.log("✅ 저장 성공! 메뉴 할당 모달 열기");
+      // console.log("✅ 저장 성공!");
       toast.success("화면이 저장되었습니다.");
 
       // 저장 성공 후 부모에게 화면 정보 업데이트 알림 (테이블명 즉시 반영)
@@ -1825,14 +2104,14 @@ export default function ScreenDesigner({
       if (response.success && response.data) {
         // 자동 매핑 적용
         const updatedComponents = applyMultilangMappings(layout.components, response.data);
-        
+
         // 레이아웃 업데이트
         const updatedLayout = {
           ...layout,
           components: updatedComponents,
           screenResolution: screenResolution,
         };
-        
+
         setLayout(updatedLayout);
 
         // 자동 저장 (매핑 정보가 손실되지 않도록)
@@ -2260,23 +2539,29 @@ export default function ScreenDesigner({
         }
       });
 
+      // 🆕 현재 활성 레이어에 컴포넌트 추가
+      const componentsWithLayerId = newComponents.map((comp) => ({
+        ...comp,
+        layerId: activeLayerId || "default-layer",
+      }));
+
       // 레이아웃에 새 컴포넌트들 추가
       const newLayout = {
         ...layout,
-        components: [...layout.components, ...newComponents],
+        components: [...layout.components, ...componentsWithLayerId],
       };
 
       setLayout(newLayout);
       saveToHistory(newLayout);
 
       // 첫 번째 컴포넌트 선택
-      if (newComponents.length > 0) {
-        setSelectedComponent(newComponents[0]);
+      if (componentsWithLayerId.length > 0) {
+        setSelectedComponent(componentsWithLayerId[0]);
       }
 
       toast.success(`${template.name} 템플릿이 추가되었습니다.`);
     },
-    [layout, selectedScreen, saveToHistory],
+    [layout, selectedScreen, saveToHistory, activeLayerId],
   );
 
   // 레이아웃 드래그 처리
@@ -2330,6 +2615,7 @@ export default function ScreenDesigner({
         label: layoutData.label,
         allowedComponentTypes: layoutData.allowedComponentTypes,
         dropZoneConfig: layoutData.dropZoneConfig,
+        layerId: activeLayerId || "default-layer", // 🆕 현재 활성 레이어에 추가
       } as ComponentData;
 
       // 레이아웃에 새 컴포넌트 추가
@@ -2346,7 +2632,7 @@ export default function ScreenDesigner({
 
       toast.success(`${layoutData.label} 레이아웃이 추가되었습니다.`);
     },
-    [layout, screenResolution, saveToHistory, zoomLevel],
+    [layout, screenResolution, saveToHistory, zoomLevel, activeLayerId],
   );
 
   // handleZoneComponentDrop은 handleComponentDrop으로 대체됨
@@ -2438,7 +2724,7 @@ export default function ScreenDesigner({
           if (targetComponent && (compType === "repeat-container" || compType === "v2-repeat-container")) {
             const currentConfig = (targetComponent as any).componentConfig || {};
             const currentChildren = currentConfig.children || [];
-            
+
             // 새 자식 컴포넌트 생성
             const newChild = {
               id: `slot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
@@ -2449,7 +2735,7 @@ export default function ScreenDesigner({
               size: component.defaultSize || { width: 200, height: 32 },
               componentConfig: component.defaultConfig || {},
             };
-            
+
             // 컴포넌트 업데이트
             const updatedComponent = {
               ...targetComponent,
@@ -2458,14 +2744,12 @@ export default function ScreenDesigner({
                 children: [...currentChildren, newChild],
               },
             };
-            
+
             const newLayout = {
               ...layout,
-              components: layout.components.map((c) =>
-                c.id === containerId ? updatedComponent : c
-              ),
+              components: layout.components.map((c) => (c.id === containerId ? updatedComponent : c)),
             };
-            
+
             setLayout(newLayout);
             saveToHistory(newLayout);
             return; // 리피터 컨테이너 처리 완료
@@ -2473,35 +2757,75 @@ export default function ScreenDesigner({
         }
       }
 
-      // 🎯 탭 컨테이너 내부 드롭 처리
+      // 🎯 탭 컨테이너 내부 드롭 처리 (중첩 구조 지원)
       const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
       if (tabsContainer) {
         const containerId = tabsContainer.getAttribute("data-component-id");
         const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
         if (containerId && activeTabId) {
-          const targetComponent = layout.components.find((c) => c.id === containerId);
+          // 1. 먼저 최상위 레이아웃에서 탭 컴포넌트 찾기
+          let targetComponent = layout.components.find((c) => c.id === containerId);
+          let parentSplitPanelId: string | null = null;
+          let parentPanelSide: "left" | "right" | null = null;
+
+          // 2. 최상위에 없으면 분할 패널 안에서 중첩된 탭 찾기
+          if (!targetComponent) {
+            for (const comp of layout.components) {
+              const compType = (comp as any)?.componentType;
+              if (compType === "split-panel-layout" || compType === "v2-split-panel-layout") {
+                const config = (comp as any).componentConfig || {};
+
+                // 좌측 패널에서 찾기
+                const leftComponents = config.leftPanel?.components || [];
+                const foundInLeft = leftComponents.find((c: any) => c.id === containerId);
+                if (foundInLeft) {
+                  targetComponent = foundInLeft;
+                  parentSplitPanelId = comp.id;
+                  parentPanelSide = "left";
+                  break;
+                }
+
+                // 우측 패널에서 찾기
+                const rightComponents = config.rightPanel?.components || [];
+                const foundInRight = rightComponents.find((c: any) => c.id === containerId);
+                if (foundInRight) {
+                  targetComponent = foundInRight;
+                  parentSplitPanelId = comp.id;
+                  parentPanelSide = "right";
+                  break;
+                }
+              }
+            }
+          }
+
           const compType = (targetComponent as any)?.componentType;
           if (targetComponent && (compType === "tabs-widget" || compType === "v2-tabs-widget")) {
             const currentConfig = (targetComponent as any).componentConfig || {};
             const tabs = currentConfig.tabs || [];
-            
+
             // 활성 탭의 드롭 위치 계산
             const tabContentRect = tabsContainer.getBoundingClientRect();
             const dropX = (e.clientX - tabContentRect.left) / zoomLevel;
             const dropY = (e.clientY - tabContentRect.top) / zoomLevel;
-            
-            // 새 컴포넌트 생성 - 드롭된 컴포넌트의 id를 그대로 사용
-            // component.id는 ComponentDefinition의 id (예: "v2-table-list", "v2-button-primary")
+
+            // 새 컴포넌트 생성
             const componentType = component.id || component.componentType || "v2-text-display";
-            
+
             console.log("🎯 탭에 컴포넌트 드롭:", {
               componentId: component.id,
               componentType: componentType,
               componentName: component.name,
-              defaultConfig: component.defaultConfig,
-              defaultSize: component.defaultSize,
+              isNested: !!parentSplitPanelId,
+              parentSplitPanelId,
+              parentPanelSide,
+              // 🆕 위치 디버깅
+              clientX: e.clientX,
+              clientY: e.clientY,
+              tabContentRect: { left: tabContentRect.left, top: tabContentRect.top },
+              zoomLevel,
+              calculatedPosition: { x: dropX, y: dropY },
             });
-            
+
             const newTabComponent = {
               id: `tab_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
               componentType: componentType,
@@ -2510,7 +2834,7 @@ export default function ScreenDesigner({
               size: component.defaultSize || { width: 200, height: 100 },
               componentConfig: component.defaultConfig || {},
             };
-            
+
             // 해당 탭에 컴포넌트 추가
             const updatedTabs = tabs.map((tab: any) => {
               if (tab.id === activeTabId) {
@@ -2521,30 +2845,125 @@ export default function ScreenDesigner({
               }
               return tab;
             });
-            
-            const updatedComponent = {
+
+            const updatedTabsComponent = {
               ...targetComponent,
               componentConfig: {
                 ...currentConfig,
                 tabs: updatedTabs,
               },
             };
-            
-            const newLayout = {
-              ...layout,
-              components: layout.components.map((c) =>
-                c.id === containerId ? updatedComponent : c
-              ),
-            };
-            
+
+            let newLayout;
+
+            if (parentSplitPanelId && parentPanelSide) {
+              // 🆕 중첩 구조: 분할 패널 안의 탭 업데이트
+              newLayout = {
+                ...layout,
+                components: layout.components.map((c) => {
+                  if (c.id === parentSplitPanelId) {
+                    const splitConfig = (c as any).componentConfig || {};
+                    const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                    const panelConfig = splitConfig[panelKey] || {};
+                    const panelComponents = panelConfig.components || [];
+
+                    return {
+                      ...c,
+                      componentConfig: {
+                        ...splitConfig,
+                        [panelKey]: {
+                          ...panelConfig,
+                          components: panelComponents.map((pc: any) =>
+                            pc.id === containerId ? updatedTabsComponent : pc,
+                          ),
+                        },
+                      },
+                    };
+                  }
+                  return c;
+                }),
+              };
+              toast.success("컴포넌트가 중첩된 탭에 추가되었습니다");
+            } else {
+              // 일반 구조: 최상위 탭 업데이트
+              newLayout = {
+                ...layout,
+                components: layout.components.map((c) => (c.id === containerId ? updatedTabsComponent : c)),
+              };
+              toast.success("컴포넌트가 탭에 추가되었습니다");
+            }
+
             setLayout(newLayout);
             saveToHistory(newLayout);
-            toast.success("컴포넌트가 탭에 추가되었습니다");
             return; // 탭 컨테이너 처리 완료
           }
         }
       }
 
+      // 🎯 분할 패널 커스텀 모드 컨테이너 내부 드롭 처리
+      const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
+      if (splitPanelContainer) {
+        const containerId = splitPanelContainer.getAttribute("data-component-id");
+        const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
+        if (containerId && panelSide) {
+          const targetComponent = layout.components.find((c) => c.id === containerId);
+          const compType = (targetComponent as any)?.componentType;
+          if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
+            const currentConfig = (targetComponent as any).componentConfig || {};
+            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+            const panelConfig = currentConfig[panelKey] || {};
+            const currentComponents = panelConfig.components || [];
+
+            // 드롭 위치 계산
+            const panelRect = splitPanelContainer.getBoundingClientRect();
+            const dropX = (e.clientX - panelRect.left) / zoomLevel;
+            const dropY = (e.clientY - panelRect.top) / zoomLevel;
+
+            // 새 컴포넌트 생성
+            const componentType = component.id || component.componentType || "v2-text-display";
+
+            console.log("🎯 분할 패널에 컴포넌트 드롭:", {
+              componentId: component.id,
+              componentType: componentType,
+              panelSide: panelSide,
+              dropPosition: { x: dropX, y: dropY },
+            });
+
+            const newPanelComponent = {
+              id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+              componentType: componentType,
+              label: component.name || component.label || "새 컴포넌트",
+              position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+              size: component.defaultSize || { width: 200, height: 100 },
+              componentConfig: component.defaultConfig || {},
+            };
+
+            const updatedPanelConfig = {
+              ...panelConfig,
+              components: [...currentComponents, newPanelComponent],
+            };
+
+            const updatedComponent = {
+              ...targetComponent,
+              componentConfig: {
+                ...currentConfig,
+                [panelKey]: updatedPanelConfig,
+              },
+            };
+
+            const newLayout = {
+              ...layout,
+              components: layout.components.map((c) => (c.id === containerId ? updatedComponent : c)),
+            };
+
+            setLayout(newLayout);
+            saveToHistory(newLayout);
+            toast.success(`컴포넌트가 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
+            return; // 분할 패널 처리 완료
+          }
+        }
+      }
+
       const rect = canvasRef.current?.getBoundingClientRect();
       if (!rect) return;
 
@@ -2804,6 +3223,7 @@ export default function ScreenDesigner({
         position: snappedPosition,
         size: componentSize,
         gridColumns: gridColumns, // 컴포넌트별 그리드 컬럼 수 적용
+        layerId: activeLayerId || "default-layer", // 🆕 현재 활성 레이어에 추가
         componentConfig: {
           type: component.id, // 새 컴포넌트 시스템의 ID 사용
           webType: component.webType, // 웹타입 정보 추가
@@ -2811,7 +3231,7 @@ export default function ScreenDesigner({
         },
         webTypeConfig: getDefaultWebTypeConfig(component.webType),
         style: {
-          labelDisplay: false, // 모든 컴포넌트의 기본 라벨 표시를 false로 설정
+          labelDisplay: true, // 🆕 라벨 기본 표시 (사용자가 끄고 싶으면 체크 해제)
           labelFontSize: "14px",
           labelColor: "#212121",
           labelFontWeight: "500",
@@ -2837,7 +3257,7 @@ export default function ScreenDesigner({
 
       toast.success(`${component.name} 컴포넌트가 추가되었습니다.`);
     },
-    [layout, selectedScreen, saveToHistory],
+    [layout, selectedScreen, saveToHistory, activeLayerId],
   );
 
   // 드래그 앤 드롭 처리
@@ -2895,7 +3315,7 @@ export default function ScreenDesigner({
             if (targetComponent && (rcType === "repeat-container" || rcType === "v2-repeat-container")) {
               const currentConfig = (targetComponent as any).componentConfig || {};
               const currentChildren = currentConfig.children || [];
-              
+
               // 새 자식 컴포넌트 생성 (컬럼 기반)
               const newChild = {
                 id: `slot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
@@ -2906,7 +3326,7 @@ export default function ScreenDesigner({
                 size: { width: 200, height: 32 },
                 componentConfig: {},
               };
-              
+
               const updatedComponent = {
                 ...targetComponent,
                 componentConfig: {
@@ -2914,14 +3334,12 @@ export default function ScreenDesigner({
                   children: [...currentChildren, newChild],
                 },
               };
-              
+
               const newLayout = {
                 ...layout,
-                components: layout.components.map((c) =>
-                  c.id === containerId ? updatedComponent : c
-                ),
+                components: layout.components.map((c) => (c.id === containerId ? updatedComponent : c)),
               };
-              
+
               setLayout(newLayout);
               saveToHistory(newLayout);
               return;
@@ -2929,23 +3347,57 @@ export default function ScreenDesigner({
           }
         }
 
-        // 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리
+        // 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리 (중첩 구조 지원)
         const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
         if (tabsContainer && type === "column" && column) {
           const containerId = tabsContainer.getAttribute("data-component-id");
           const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
           if (containerId && activeTabId) {
-            const targetComponent = layout.components.find((c) => c.id === containerId);
+            // 1. 먼저 최상위 레이아웃에서 탭 컴포넌트 찾기
+            let targetComponent = layout.components.find((c) => c.id === containerId);
+            let parentSplitPanelId: string | null = null;
+            let parentPanelSide: "left" | "right" | null = null;
+
+            // 2. 최상위에 없으면 분할 패널 안에서 중첩된 탭 찾기
+            if (!targetComponent) {
+              for (const comp of layout.components) {
+                const compType = (comp as any)?.componentType;
+                if (compType === "split-panel-layout" || compType === "v2-split-panel-layout") {
+                  const config = (comp as any).componentConfig || {};
+
+                  // 좌측 패널에서 찾기
+                  const leftComponents = config.leftPanel?.components || [];
+                  const foundInLeft = leftComponents.find((c: any) => c.id === containerId);
+                  if (foundInLeft) {
+                    targetComponent = foundInLeft;
+                    parentSplitPanelId = comp.id;
+                    parentPanelSide = "left";
+                    break;
+                  }
+
+                  // 우측 패널에서 찾기
+                  const rightComponents = config.rightPanel?.components || [];
+                  const foundInRight = rightComponents.find((c: any) => c.id === containerId);
+                  if (foundInRight) {
+                    targetComponent = foundInRight;
+                    parentSplitPanelId = comp.id;
+                    parentPanelSide = "right";
+                    break;
+                  }
+                }
+              }
+            }
+
             const compType = (targetComponent as any)?.componentType;
             if (targetComponent && (compType === "tabs-widget" || compType === "v2-tabs-widget")) {
               const currentConfig = (targetComponent as any).componentConfig || {};
               const tabs = currentConfig.tabs || [];
-              
+
               // 드롭 위치 계산
               const tabContentRect = tabsContainer.getBoundingClientRect();
               const dropX = (e.clientX - tabContentRect.left) / zoomLevel;
               const dropY = (e.clientY - tabContentRect.top) / zoomLevel;
-              
+
               // 🆕 V2 컴포넌트 매핑 사용 (일반 캔버스와 동일)
               const v2Mapping = createV2ConfigFromColumn({
                 widgetType: column.widgetType,
@@ -2959,7 +3411,7 @@ export default function ScreenDesigner({
                 referenceColumn: column.referenceColumn,
                 displayColumn: column.displayColumn,
               });
-              
+
               // 웹타입별 기본 크기 계산
               const getTabComponentSize = (widgetType: string) => {
                 const sizeMap: Record<string, { width: number; height: number }> = {
@@ -2979,25 +3431,25 @@ export default function ScreenDesigner({
                 };
                 return sizeMap[widgetType] || { width: 200, height: 36 };
               };
-              
+
               const componentSize = getTabComponentSize(column.widgetType);
-              
+
               const newTabComponent = {
                 id: `tab_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-                componentType: v2Mapping.componentType, // v2-input, v2-select 등
+                componentType: v2Mapping.componentType,
                 label: column.columnLabel || column.columnName,
                 position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
                 size: componentSize,
-                inputType: column.inputType || column.widgetType, // 🆕 inputType 저장 (설정 패널용)
-                widgetType: column.widgetType, // 🆕 widgetType 저장
+                inputType: column.inputType || column.widgetType,
+                widgetType: column.widgetType,
                 componentConfig: {
-                  ...v2Mapping.componentConfig, // V2 컴포넌트 기본 설정
+                  ...v2Mapping.componentConfig,
                   columnName: column.columnName,
                   tableName: column.tableName,
-                  inputType: column.inputType || column.widgetType, // 🆕 componentConfig에도 저장
+                  inputType: column.inputType || column.widgetType,
                 },
               };
-              
+
               // 해당 탭에 컴포넌트 추가
               const updatedTabs = tabs.map((tab: any) => {
                 if (tab.id === activeTabId) {
@@ -3008,25 +3460,153 @@ export default function ScreenDesigner({
                 }
                 return tab;
               });
-              
-              const updatedComponent = {
+
+              const updatedTabsComponent = {
                 ...targetComponent,
                 componentConfig: {
                   ...currentConfig,
                   tabs: updatedTabs,
                 },
               };
-              
-              const newLayout = {
-                ...layout,
-                components: layout.components.map((c) =>
-                  c.id === containerId ? updatedComponent : c
-                ),
-              };
-              
+
+              let newLayout;
+
+              if (parentSplitPanelId && parentPanelSide) {
+                // 🆕 중첩 구조: 분할 패널 안의 탭 업데이트
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) => {
+                    if (c.id === parentSplitPanelId) {
+                      const splitConfig = (c as any).componentConfig || {};
+                      const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                      const panelConfig = splitConfig[panelKey] || {};
+                      const panelComponents = panelConfig.components || [];
+
+                      return {
+                        ...c,
+                        componentConfig: {
+                          ...splitConfig,
+                          [panelKey]: {
+                            ...panelConfig,
+                            components: panelComponents.map((pc: any) =>
+                              pc.id === containerId ? updatedTabsComponent : pc,
+                            ),
+                          },
+                        },
+                      };
+                    }
+                    return c;
+                  }),
+                };
+                toast.success("컬럼이 중첩된 탭에 추가되었습니다");
+              } else {
+                // 일반 구조: 최상위 탭 업데이트
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) => (c.id === containerId ? updatedTabsComponent : c)),
+                };
+                toast.success("컬럼이 탭에 추가되었습니다");
+              }
+
               setLayout(newLayout);
               saveToHistory(newLayout);
-              toast.success("컬럼이 탭에 추가되었습니다");
+              return;
+            }
+          }
+        }
+
+        // 🎯 분할 패널 커스텀 모드 컨테이너 내부에 컬럼 드롭 시 처리
+        const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
+        if (splitPanelContainer && type === "column" && column) {
+          const containerId = splitPanelContainer.getAttribute("data-component-id");
+          const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
+          if (containerId && panelSide) {
+            const targetComponent = layout.components.find((c) => c.id === containerId);
+            const compType = (targetComponent as any)?.componentType;
+            if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
+              const currentConfig = (targetComponent as any).componentConfig || {};
+              const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+              const panelConfig = currentConfig[panelKey] || {};
+              const currentComponents = panelConfig.components || [];
+
+              // 드롭 위치 계산
+              const panelRect = splitPanelContainer.getBoundingClientRect();
+              const dropX = (e.clientX - panelRect.left) / zoomLevel;
+              const dropY = (e.clientY - panelRect.top) / zoomLevel;
+
+              // V2 컴포넌트 매핑 사용
+              const v2Mapping = createV2ConfigFromColumn({
+                widgetType: column.widgetType,
+                columnName: column.columnName,
+                columnLabel: column.columnLabel,
+                codeCategory: column.codeCategory,
+                inputType: column.inputType,
+                required: column.required,
+                detailSettings: column.detailSettings,
+                referenceTable: column.referenceTable,
+                referenceColumn: column.referenceColumn,
+                displayColumn: column.displayColumn,
+              });
+
+              // 웹타입별 기본 크기 계산
+              const getPanelComponentSize = (widgetType: string) => {
+                const sizeMap: Record<string, { width: number; height: number }> = {
+                  text: { width: 200, height: 36 },
+                  number: { width: 150, height: 36 },
+                  decimal: { width: 150, height: 36 },
+                  date: { width: 180, height: 36 },
+                  datetime: { width: 200, height: 36 },
+                  select: { width: 200, height: 36 },
+                  category: { width: 200, height: 36 },
+                  code: { width: 200, height: 36 },
+                  entity: { width: 220, height: 36 },
+                  boolean: { width: 120, height: 36 },
+                  checkbox: { width: 120, height: 36 },
+                  textarea: { width: 300, height: 100 },
+                  file: { width: 250, height: 80 },
+                };
+                return sizeMap[widgetType] || { width: 200, height: 36 };
+              };
+
+              const componentSize = getPanelComponentSize(column.widgetType);
+
+              const newPanelComponent = {
+                id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+                componentType: v2Mapping.componentType,
+                label: column.columnLabel || column.columnName,
+                position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+                size: componentSize,
+                inputType: column.inputType || column.widgetType,
+                widgetType: column.widgetType,
+                componentConfig: {
+                  ...v2Mapping.componentConfig,
+                  columnName: column.columnName,
+                  tableName: column.tableName,
+                  inputType: column.inputType || column.widgetType,
+                },
+              };
+
+              const updatedPanelConfig = {
+                ...panelConfig,
+                components: [...currentComponents, newPanelComponent],
+              };
+
+              const updatedComponent = {
+                ...targetComponent,
+                componentConfig: {
+                  ...currentConfig,
+                  [panelKey]: updatedPanelConfig,
+                },
+              };
+
+              const newLayout = {
+                ...layout,
+                components: layout.components.map((c) => (c.id === containerId ? updatedComponent : c)),
+              };
+
+              setLayout(newLayout);
+              saveToHistory(newLayout);
+              toast.success(`컬럼이 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
               return;
             }
           }
@@ -3049,6 +3629,7 @@ export default function ScreenDesigner({
             tableName: table.tableName,
             position: { x, y, z: 1 } as Position,
             size: { width: 300, height: 200 },
+            layerId: activeLayerId || "default-layer", // 🆕 현재 활성 레이어에 추가
             style: {
               labelDisplay: true,
               labelFontSize: "14px",
@@ -3299,6 +3880,7 @@ export default function ScreenDesigner({
                 componentType: v2Mapping.componentType, // v2-input, v2-select 등
                 position: { x: relativeX, y: relativeY, z: 1 } as Position,
                 size: { width: componentWidth, height: getDefaultHeight(column.widgetType) },
+                layerId: activeLayerId || "default-layer", // 🆕 현재 활성 레이어에 추가
                 // 코드 타입인 경우 코드 카테고리 정보 추가
                 ...(column.widgetType === "code" &&
                   column.codeCategory && {
@@ -3309,9 +3891,9 @@ export default function ScreenDesigner({
                   isEntityJoin: true,
                   entityJoinTable: column.entityJoinTable,
                   entityJoinColumn: column.entityJoinColumn,
-                  }),
+                }),
                 style: {
-                  labelDisplay: false, // 라벨 숨김
+                  labelDisplay: true, // 🆕 라벨 기본 표시
                   labelFontSize: "12px",
                   labelColor: "#212121",
                   labelFontWeight: "500",
@@ -3365,6 +3947,7 @@ export default function ScreenDesigner({
               componentType: v2Mapping.componentType, // v2-input, v2-select 등
               position: { x, y, z: 1 } as Position,
               size: { width: componentWidth, height: getDefaultHeight(column.widgetType) },
+              layerId: activeLayerId || "default-layer", // 🆕 현재 활성 레이어에 추가
               // 코드 타입인 경우 코드 카테고리 정보 추가
               ...(column.widgetType === "code" &&
                 column.codeCategory && {
@@ -3375,9 +3958,9 @@ export default function ScreenDesigner({
                 isEntityJoin: true,
                 entityJoinTable: column.entityJoinTable,
                 entityJoinColumn: column.entityJoinColumn,
-                }),
+              }),
               style: {
-                labelDisplay: false, // 라벨 숨김
+                labelDisplay: true, // 🆕 라벨 기본 표시
                 labelFontSize: "14px",
                 labelColor: "#000000", // 순수한 검정
                 labelFontWeight: "500",
@@ -3645,252 +4228,325 @@ export default function ScreenDesigner({
   );
 
   // 드래그 종료
-  const endDrag = useCallback((mouseEvent?: MouseEvent) => {
-    if (dragState.isDragging && dragState.draggedComponent) {
-      // 🎯 탭 컨테이너로의 드롭 처리 (기존 컴포넌트 이동)
-      if (mouseEvent) {
-        const dropTarget = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY) as HTMLElement;
-        const tabsContainer = dropTarget?.closest('[data-tabs-container="true"]');
-        
-        if (tabsContainer) {
-          const containerId = tabsContainer.getAttribute("data-component-id");
-          const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
-          
-          if (containerId && activeTabId) {
-            const targetComponent = layout.components.find((c) => c.id === containerId);
-            const compType = (targetComponent as any)?.componentType;
-            
-            // 자기 자신을 자신에게 드롭하는 것 방지
-            if (targetComponent && 
-                (compType === "tabs-widget" || compType === "v2-tabs-widget") &&
-                dragState.draggedComponent !== containerId) {
-              
-              const draggedComponent = layout.components.find((c) => c.id === dragState.draggedComponent);
-              if (draggedComponent) {
-                const currentConfig = (targetComponent as any).componentConfig || {};
-                const tabs = currentConfig.tabs || [];
-                
-                // 탭 컨텐츠 영역 기준 드롭 위치 계산
-                const tabContentRect = tabsContainer.getBoundingClientRect();
-                const dropX = (mouseEvent.clientX - tabContentRect.left) / zoomLevel;
-                const dropY = (mouseEvent.clientY - tabContentRect.top) / zoomLevel;
-                
-                // 기존 컴포넌트를 탭 내부 컴포넌트로 변환
-                const newTabComponent = {
-                  id: `tab_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-                  componentType: (draggedComponent as any).componentType || draggedComponent.type,
-                  label: (draggedComponent as any).label || "컴포넌트",
-                  position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
-                  size: draggedComponent.size || { width: 200, height: 100 },
-                  componentConfig: (draggedComponent as any).componentConfig || {},
-                  style: (draggedComponent as any).style || {},
-                };
-                
-                // 해당 탭에 컴포넌트 추가
-                const updatedTabs = tabs.map((tab: any) => {
-                  if (tab.id === activeTabId) {
-                    return {
-                      ...tab,
-                      components: [...(tab.components || []), newTabComponent],
-                    };
+  const endDrag = useCallback(
+    (mouseEvent?: MouseEvent) => {
+      if (dragState.isDragging && dragState.draggedComponent) {
+        // 🎯 탭 컨테이너로의 드롭 처리 (기존 컴포넌트 이동, 중첩 구조 지원)
+        if (mouseEvent) {
+          const dropTarget = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY) as HTMLElement;
+          const tabsContainer = dropTarget?.closest('[data-tabs-container="true"]');
+
+          if (tabsContainer) {
+            const containerId = tabsContainer.getAttribute("data-component-id");
+            const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
+
+            if (containerId && activeTabId) {
+              // 1. 먼저 최상위 레이아웃에서 탭 컴포넌트 찾기
+              let targetComponent = layout.components.find((c) => c.id === containerId);
+              let parentSplitPanelId: string | null = null;
+              let parentPanelSide: "left" | "right" | null = null;
+
+              // 2. 최상위에 없으면 분할 패널 안에서 중첩된 탭 찾기
+              if (!targetComponent) {
+                for (const comp of layout.components) {
+                  const compType = (comp as any)?.componentType;
+                  if (compType === "split-panel-layout" || compType === "v2-split-panel-layout") {
+                    const config = (comp as any).componentConfig || {};
+
+                    // 좌측 패널에서 찾기
+                    const leftComponents = config.leftPanel?.components || [];
+                    const foundInLeft = leftComponents.find((c: any) => c.id === containerId);
+                    if (foundInLeft) {
+                      targetComponent = foundInLeft;
+                      parentSplitPanelId = comp.id;
+                      parentPanelSide = "left";
+                      break;
+                    }
+
+                    // 우측 패널에서 찾기
+                    const rightComponents = config.rightPanel?.components || [];
+                    const foundInRight = rightComponents.find((c: any) => c.id === containerId);
+                    if (foundInRight) {
+                      targetComponent = foundInRight;
+                      parentSplitPanelId = comp.id;
+                      parentPanelSide = "right";
+                      break;
+                    }
                   }
-                  return tab;
-                });
-                
-                // 탭 컴포넌트 업데이트 + 원래 컴포넌트 캔버스에서 제거
-                const newLayout = {
-                  ...layout,
-                  components: layout.components
-                    .filter((c) => c.id !== dragState.draggedComponent) // 캔버스에서 제거
-                    .map((c) => {
-                      if (c.id === containerId) {
-                        return {
-                          ...c,
-                          componentConfig: {
-                            ...currentConfig,
-                            tabs: updatedTabs,
-                          },
-                        };
-                      }
-                      return c;
-                    }),
-                };
-                
-                setLayout(newLayout);
-                saveToHistory(newLayout);
-                setSelectedComponent(null);
-                toast.success("컴포넌트가 탭으로 이동되었습니다");
-                
-                // 드래그 상태 초기화 후 종료
-                setDragState({
-                  isDragging: false,
-                  draggedComponent: null,
-                  draggedComponents: [],
-                  originalPosition: { x: 0, y: 0, z: 1 },
-                  currentPosition: { x: 0, y: 0, z: 1 },
-                  grabOffset: { x: 0, y: 0 },
-                  justFinishedDrag: true,
-                });
-                
-                setTimeout(() => {
-                  setDragState((prev) => ({ ...prev, justFinishedDrag: false }));
-                }, 100);
-                
-                return; // 탭으로 이동 완료, 일반 드래그 종료 로직 스킵
+                }
+              }
+
+              const compType = (targetComponent as any)?.componentType;
+
+              // 자기 자신을 자신에게 드롭하는 것 방지
+              if (
+                targetComponent &&
+                (compType === "tabs-widget" || compType === "v2-tabs-widget") &&
+                dragState.draggedComponent !== containerId
+              ) {
+                const draggedComponent = layout.components.find((c) => c.id === dragState.draggedComponent);
+                if (draggedComponent) {
+                  const currentConfig = (targetComponent as any).componentConfig || {};
+                  const tabs = currentConfig.tabs || [];
+
+                  // 탭 컨텐츠 영역 기준 드롭 위치 계산
+                  const tabContentRect = tabsContainer.getBoundingClientRect();
+                  const dropX = (mouseEvent.clientX - tabContentRect.left) / zoomLevel;
+                  const dropY = (mouseEvent.clientY - tabContentRect.top) / zoomLevel;
+
+                  // 기존 컴포넌트를 탭 내부 컴포넌트로 변환
+                  const newTabComponent = {
+                    id: `tab_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+                    componentType: (draggedComponent as any).componentType || draggedComponent.type,
+                    label: (draggedComponent as any).label || "컴포넌트",
+                    position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+                    size: draggedComponent.size || { width: 200, height: 100 },
+                    componentConfig: (draggedComponent as any).componentConfig || {},
+                    style: (draggedComponent as any).style || {},
+                  };
+
+                  // 해당 탭에 컴포넌트 추가
+                  const updatedTabs = tabs.map((tab: any) => {
+                    if (tab.id === activeTabId) {
+                      return {
+                        ...tab,
+                        components: [...(tab.components || []), newTabComponent],
+                      };
+                    }
+                    return tab;
+                  });
+
+                  const updatedTabsComponent = {
+                    ...targetComponent,
+                    componentConfig: {
+                      ...currentConfig,
+                      tabs: updatedTabs,
+                    },
+                  };
+
+                  let newLayout;
+
+                  if (parentSplitPanelId && parentPanelSide) {
+                    // 🆕 중첩 구조: 분할 패널 안의 탭 업데이트
+                    newLayout = {
+                      ...layout,
+                      components: layout.components
+                        .filter((c) => c.id !== dragState.draggedComponent)
+                        .map((c) => {
+                          if (c.id === parentSplitPanelId) {
+                            const splitConfig = (c as any).componentConfig || {};
+                            const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                            const panelConfig = splitConfig[panelKey] || {};
+                            const panelComponents = panelConfig.components || [];
+
+                            return {
+                              ...c,
+                              componentConfig: {
+                                ...splitConfig,
+                                [panelKey]: {
+                                  ...panelConfig,
+                                  components: panelComponents.map((pc: any) =>
+                                    pc.id === containerId ? updatedTabsComponent : pc,
+                                  ),
+                                },
+                              },
+                            };
+                          }
+                          return c;
+                        }),
+                    };
+                    toast.success("컴포넌트가 중첩된 탭으로 이동되었습니다");
+                  } else {
+                    // 일반 구조: 최상위 탭 업데이트
+                    newLayout = {
+                      ...layout,
+                      components: layout.components
+                        .filter((c) => c.id !== dragState.draggedComponent)
+                        .map((c) => {
+                          if (c.id === containerId) {
+                            return updatedTabsComponent;
+                          }
+                          return c;
+                        }),
+                    };
+                    toast.success("컴포넌트가 탭으로 이동되었습니다");
+                  }
+
+                  setLayout(newLayout);
+                  saveToHistory(newLayout);
+                  setSelectedComponent(null);
+
+                  // 드래그 상태 초기화 후 종료
+                  setDragState({
+                    isDragging: false,
+                    draggedComponent: null,
+                    draggedComponents: [],
+                    originalPosition: { x: 0, y: 0, z: 1 },
+                    currentPosition: { x: 0, y: 0, z: 1 },
+                    grabOffset: { x: 0, y: 0 },
+                    justFinishedDrag: true,
+                  });
+
+                  setTimeout(() => {
+                    setDragState((prev) => ({ ...prev, justFinishedDrag: false }));
+                  }, 100);
+
+                  return; // 탭으로 이동 완료, 일반 드래그 종료 로직 스킵
+                }
               }
             }
           }
         }
-      }
-      
-      // 주 드래그 컴포넌트의 최종 위치 계산
-      const draggedComponent = layout.components.find((c) => c.id === dragState.draggedComponent);
-      let finalPosition = dragState.currentPosition;
 
-      // 현재 해상도에 맞는 격자 정보 계산
-      const currentGridInfo = layout.gridSettings
-        ? calculateGridInfo(screenResolution.width, screenResolution.height, {
-            columns: layout.gridSettings.columns,
-            gap: layout.gridSettings.gap,
-            padding: layout.gridSettings.padding,
-            snapToGrid: layout.gridSettings.snapToGrid || false,
-          })
-        : null;
+        // 주 드래그 컴포넌트의 최종 위치 계산
+        const draggedComponent = layout.components.find((c) => c.id === dragState.draggedComponent);
+        let finalPosition = dragState.currentPosition;
 
-      // 일반 컴포넌트 및 플로우 버튼 그룹에 격자 스냅 적용 (일반 그룹 제외)
-      if (draggedComponent?.type !== "group" && layout.gridSettings?.snapToGrid && currentGridInfo) {
-        finalPosition = snapPositionTo10px(
-          {
-            x: dragState.currentPosition.x,
-            y: dragState.currentPosition.y,
-            z: dragState.currentPosition.z ?? 1,
-          },
-          currentGridInfo,
-          {
-            columns: layout.gridSettings.columns,
-            gap: layout.gridSettings.gap,
-            padding: layout.gridSettings.padding,
-            snapToGrid: layout.gridSettings.snapToGrid || false,
-          },
-        );
+        // 현재 해상도에 맞는 격자 정보 계산
+        const currentGridInfo = layout.gridSettings
+          ? calculateGridInfo(screenResolution.width, screenResolution.height, {
+              columns: layout.gridSettings.columns,
+              gap: layout.gridSettings.gap,
+              padding: layout.gridSettings.padding,
+              snapToGrid: layout.gridSettings.snapToGrid || false,
+            })
+          : null;
 
-      }
+        // 일반 컴포넌트 및 플로우 버튼 그룹에 격자 스냅 적용 (일반 그룹 제외)
+        if (draggedComponent?.type !== "group" && layout.gridSettings?.snapToGrid && currentGridInfo) {
+          finalPosition = snapPositionTo10px(
+            {
+              x: dragState.currentPosition.x,
+              y: dragState.currentPosition.y,
+              z: dragState.currentPosition.z ?? 1,
+            },
+            currentGridInfo,
+            {
+              columns: layout.gridSettings.columns,
+              gap: layout.gridSettings.gap,
+              padding: layout.gridSettings.padding,
+              snapToGrid: layout.gridSettings.snapToGrid || false,
+            },
+          );
+        }
 
-      // 스냅으로 인한 추가 이동 거리 계산
-      const snapDeltaX = finalPosition.x - dragState.currentPosition.x;
-      const snapDeltaY = finalPosition.y - dragState.currentPosition.y;
+        // 스냅으로 인한 추가 이동 거리 계산
+        const snapDeltaX = finalPosition.x - dragState.currentPosition.x;
+        const snapDeltaY = finalPosition.y - dragState.currentPosition.y;
 
-      // 원래 이동 거리 + 스냅 조정 거리
-      const totalDeltaX = dragState.currentPosition.x - dragState.originalPosition.x + snapDeltaX;
-      const totalDeltaY = dragState.currentPosition.y - dragState.originalPosition.y + snapDeltaY;
+        // 원래 이동 거리 + 스냅 조정 거리
+        const totalDeltaX = dragState.currentPosition.x - dragState.originalPosition.x + snapDeltaX;
+        const totalDeltaY = dragState.currentPosition.y - dragState.originalPosition.y + snapDeltaY;
 
-      // 다중 컴포넌트들의 최종 위치 업데이트
-      const updatedComponents = layout.components.map((comp) => {
-        const isDraggedComponent = dragState.draggedComponents.some((dragComp) => dragComp.id === comp.id);
-        if (isDraggedComponent) {
-          const originalComponent = dragState.draggedComponents.find((dragComp) => dragComp.id === comp.id)!;
-          let newPosition = {
-            x: originalComponent.position.x + totalDeltaX,
-            y: originalComponent.position.y + totalDeltaY,
-            z: originalComponent.position.z || 1,
-          };
-
-          // 캔버스 경계 제한 (컴포넌트가 화면 밖으로 나가지 않도록)
-          const componentWidth = comp.size?.width || 100;
-          const componentHeight = comp.size?.height || 40;
-
-          // 최소 위치: 0, 최대 위치: 캔버스 크기 - 컴포넌트 크기
-          newPosition.x = Math.max(0, Math.min(newPosition.x, screenResolution.width - componentWidth));
-          newPosition.y = Math.max(0, Math.min(newPosition.y, screenResolution.height - componentHeight));
-
-          // 그룹 내부 컴포넌트인 경우 패딩을 고려한 격자 스냅 적용
-          if (comp.parentId && layout.gridSettings?.snapToGrid && gridInfo) {
-            const { columnWidth } = gridInfo;
-            const { gap } = layout.gridSettings;
-
-            // 그룹 내부 패딩 고려한 격자 정렬
-            const padding = 16;
-            const effectiveX = newPosition.x - padding;
-            const columnIndex = Math.round(effectiveX / (columnWidth + (gap || 16)));
-            const snappedX = padding + columnIndex * (columnWidth + (gap || 16));
-
-            // Y 좌표는 20px 단위로 스냅
-            const effectiveY = newPosition.y - padding;
-            const rowIndex = Math.round(effectiveY / 20);
-            const snappedY = padding + rowIndex * 20;
-
-            // 크기도 외부 격자와 동일하게 스냅
-            const fullColumnWidth = columnWidth + (gap || 16); // 외부 격자와 동일한 크기
-            const widthInColumns = Math.max(1, Math.round(comp.size.width / fullColumnWidth));
-            const snappedWidth = widthInColumns * fullColumnWidth - (gap || 16); // gap 제거하여 실제 컴포넌트 크기
-            // 높이는 사용자가 입력한 값 그대로 사용 (스냅 제거)
-            const snappedHeight = Math.max(40, comp.size.height);
-
-            newPosition = {
-              x: Math.max(padding, snappedX), // 패딩만큼 최소 여백 확보
-              y: Math.max(padding, snappedY),
-              z: newPosition.z,
+        // 다중 컴포넌트들의 최종 위치 업데이트
+        const updatedComponents = layout.components.map((comp) => {
+          const isDraggedComponent = dragState.draggedComponents.some((dragComp) => dragComp.id === comp.id);
+          if (isDraggedComponent) {
+            const originalComponent = dragState.draggedComponents.find((dragComp) => dragComp.id === comp.id)!;
+            let newPosition = {
+              x: originalComponent.position.x + totalDeltaX,
+              y: originalComponent.position.y + totalDeltaY,
+              z: originalComponent.position.z || 1,
             };
 
-            // 크기도 업데이트
-            const newSize = {
-              width: snappedWidth,
-              height: snappedHeight,
-            };
+            // 캔버스 경계 제한 (컴포넌트가 화면 밖으로 나가지 않도록)
+            const componentWidth = comp.size?.width || 100;
+            const componentHeight = comp.size?.height || 40;
+
+            // 최소 위치: 0, 최대 위치: 캔버스 크기 - 컴포넌트 크기
+            newPosition.x = Math.max(0, Math.min(newPosition.x, screenResolution.width - componentWidth));
+            newPosition.y = Math.max(0, Math.min(newPosition.y, screenResolution.height - componentHeight));
+
+            // 그룹 내부 컴포넌트인 경우 패딩을 고려한 격자 스냅 적용
+            if (comp.parentId && layout.gridSettings?.snapToGrid && gridInfo) {
+              const { columnWidth } = gridInfo;
+              const { gap } = layout.gridSettings;
+
+              // 그룹 내부 패딩 고려한 격자 정렬
+              const padding = 16;
+              const effectiveX = newPosition.x - padding;
+              const columnIndex = Math.round(effectiveX / (columnWidth + (gap || 16)));
+              const snappedX = padding + columnIndex * (columnWidth + (gap || 16));
+
+              // Y 좌표는 20px 단위로 스냅
+              const effectiveY = newPosition.y - padding;
+              const rowIndex = Math.round(effectiveY / 20);
+              const snappedY = padding + rowIndex * 20;
+
+              // 크기도 외부 격자와 동일하게 스냅
+              const fullColumnWidth = columnWidth + (gap || 16); // 외부 격자와 동일한 크기
+              const widthInColumns = Math.max(1, Math.round(comp.size.width / fullColumnWidth));
+              const snappedWidth = widthInColumns * fullColumnWidth - (gap || 16); // gap 제거하여 실제 컴포넌트 크기
+              // 높이는 사용자가 입력한 값 그대로 사용 (스냅 제거)
+              const snappedHeight = Math.max(40, comp.size.height);
+
+              newPosition = {
+                x: Math.max(padding, snappedX), // 패딩만큼 최소 여백 확보
+                y: Math.max(padding, snappedY),
+                z: newPosition.z,
+              };
+
+              // 크기도 업데이트
+              const newSize = {
+                width: snappedWidth,
+                height: snappedHeight,
+              };
+
+              return {
+                ...comp,
+                position: newPosition as Position,
+                size: newSize,
+              };
+            }
 
             return {
               ...comp,
               position: newPosition as Position,
-              size: newSize,
             };
           }
+          return comp;
+        });
 
-          return {
-            ...comp,
-            position: newPosition as Position,
-          };
+        const newLayout = { ...layout, components: updatedComponents };
+        setLayout(newLayout);
+
+        // 선택된 컴포넌트도 업데이트 (PropertiesPanel 동기화용)
+        if (selectedComponent && dragState.draggedComponents.some((c) => c.id === selectedComponent.id)) {
+          const updatedSelectedComponent = updatedComponents.find((c) => c.id === selectedComponent.id);
+          if (updatedSelectedComponent) {
+            console.log("🔄 ScreenDesigner: 선택된 컴포넌트 위치 업데이트", {
+              componentId: selectedComponent.id,
+              oldPosition: selectedComponent.position,
+              newPosition: updatedSelectedComponent.position,
+            });
+            setSelectedComponent(updatedSelectedComponent);
+          }
         }
-        return comp;
-      });
 
-      const newLayout = { ...layout, components: updatedComponents };
-      setLayout(newLayout);
-
-      // 선택된 컴포넌트도 업데이트 (PropertiesPanel 동기화용)
-      if (selectedComponent && dragState.draggedComponents.some((c) => c.id === selectedComponent.id)) {
-        const updatedSelectedComponent = updatedComponents.find((c) => c.id === selectedComponent.id);
-        if (updatedSelectedComponent) {
-          console.log("🔄 ScreenDesigner: 선택된 컴포넌트 위치 업데이트", {
-            componentId: selectedComponent.id,
-            oldPosition: selectedComponent.position,
-            newPosition: updatedSelectedComponent.position,
-          });
-          setSelectedComponent(updatedSelectedComponent);
-        }
+        // 히스토리에 저장
+        saveToHistory(newLayout);
       }
 
-      // 히스토리에 저장
-      saveToHistory(newLayout);
-    }
+      setDragState({
+        isDragging: false,
+        draggedComponent: null,
+        draggedComponents: [],
+        originalPosition: { x: 0, y: 0, z: 1 },
+        currentPosition: { x: 0, y: 0, z: 1 },
+        grabOffset: { x: 0, y: 0 },
+        justFinishedDrag: true,
+      });
 
-    setDragState({
-      isDragging: false,
-      draggedComponent: null,
-      draggedComponents: [],
-      originalPosition: { x: 0, y: 0, z: 1 },
-      currentPosition: { x: 0, y: 0, z: 1 },
-      grabOffset: { x: 0, y: 0 },
-      justFinishedDrag: true,
-    });
-
-    // 짧은 시간 후 justFinishedDrag 플래그 해제
-    setTimeout(() => {
-      setDragState((prev) => ({
-        ...prev,
-        justFinishedDrag: false,
-      }));
-    }, 100);
-  }, [dragState, layout, saveToHistory]);
+      // 짧은 시간 후 justFinishedDrag 플래그 해제
+      setTimeout(() => {
+        setDragState((prev) => ({
+          ...prev,
+          justFinishedDrag: false,
+        }));
+      }, 100);
+    },
+    [dragState, layout, saveToHistory],
+  );
 
   // 드래그 선택 시작
   const startSelectionDrag = useCallback(
@@ -3943,7 +4599,8 @@ export default function ScreenDesigner({
         bottom: Math.max(selectionDrag.startPoint.y, currentPoint.y),
       };
 
-      const selectedIds = layout.components
+      // 🆕 visibleComponents만 선택 대상으로 (현재 활성 레이어의 컴포넌트만)
+      const selectedIds = visibleComponents
         .filter((comp) => {
           const compRect = {
             left: comp.position.x,
@@ -3966,7 +4623,7 @@ export default function ScreenDesigner({
         selectedComponents: selectedIds,
       }));
     },
-    [selectionDrag.isSelecting, selectionDrag.startPoint, layout.components, zoomLevel],
+    [selectionDrag.isSelecting, selectionDrag.startPoint, visibleComponents, zoomLevel],
   );
 
   // 드래그 선택 종료
@@ -4113,6 +4770,7 @@ export default function ScreenDesigner({
           z: clipComponent.position.z || 1,
         } as Position,
         parentId: undefined, // 붙여넣기 시 부모 관계 해제
+        layerId: activeLayerId || "default-layer", // 🆕 현재 활성 레이어에 붙여넣기
       };
       newComponents.push(newComponent);
     });
@@ -4133,7 +4791,7 @@ export default function ScreenDesigner({
 
     // console.log("컴포넌트 붙여넣기 완료:", newComponents.length, "개");
     toast.success(`${newComponents.length}개 컴포넌트가 붙여넣어졌습니다.`);
-  }, [clipboard, layout, saveToHistory]);
+  }, [clipboard, layout, saveToHistory, activeLayerId]);
 
   // 🆕 플로우 버튼 그룹 생성 (다중 선택된 버튼들을 한 번에 그룹으로)
   // 🆕 플로우 버튼 그룹 다이얼로그 상태
@@ -4859,6 +5517,105 @@ export default function ScreenDesigner({
         }
         return false;
       }
+
+      // === 9. 화살표 키 Nudge (컴포넌트 미세 이동) ===
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+        // 입력 필드에서는 무시
+        const active = document.activeElement;
+        if (
+          active instanceof HTMLInputElement ||
+          active instanceof HTMLTextAreaElement ||
+          active?.getAttribute("contenteditable") === "true"
+        ) {
+          return;
+        }
+
+        if (selectedComponent || groupState.selectedComponents.length > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          const distance = e.shiftKey ? 10 : 1; // Shift 누르면 10px
+          const dirMap: Record<string, "up" | "down" | "left" | "right"> = {
+            ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right",
+          };
+          handleNudge(dirMap[e.key], distance);
+          return false;
+        }
+      }
+
+      // === 10. 정렬 단축키 (Alt + 키) - 다중 선택 시 ===
+      if (e.altKey && !e.ctrlKey && !e.metaKey) {
+        const alignKey = e.key?.toLowerCase();
+        const alignMap: Record<string, AlignMode> = {
+          l: "left", r: "right", c: "centerX",
+          t: "top", b: "bottom", m: "centerY",
+        };
+
+        if (alignMap[alignKey] && groupState.selectedComponents.length >= 2) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          handleGroupAlign(alignMap[alignKey]);
+          return false;
+        }
+
+        // 균등 배분 (Alt+H: 가로, Alt+V: 세로)
+        if (alignKey === "h" && groupState.selectedComponents.length >= 3) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          handleGroupDistribute("horizontal");
+          return false;
+        }
+        if (alignKey === "v" && groupState.selectedComponents.length >= 3) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          handleGroupDistribute("vertical");
+          return false;
+        }
+
+        // 동일 크기 맞추기 (Alt+W: 너비, Alt+E: 높이)
+        if (alignKey === "w" && groupState.selectedComponents.length >= 2) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          handleMatchSize("width");
+          return false;
+        }
+        if (alignKey === "e" && groupState.selectedComponents.length >= 2) {
+          e.preventDefault();
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          handleMatchSize("height");
+          return false;
+        }
+      }
+
+      // === 11. 라벨 일괄 토글 (Alt+Shift+L) ===
+      if (e.altKey && e.shiftKey && e.key?.toLowerCase() === "l") {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        handleToggleAllLabels();
+        return false;
+      }
+
+      // === 12. 단축키 도움말 (? 키) ===
+      if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        // 입력 필드에서는 무시
+        const active = document.activeElement;
+        if (
+          active instanceof HTMLInputElement ||
+          active instanceof HTMLTextAreaElement ||
+          active?.getAttribute("contenteditable") === "true"
+        ) {
+          return;
+        }
+        e.preventDefault();
+        setShowShortcutsModal(true);
+        return false;
+      }
     };
 
     // window 레벨에서 캡처 단계에서 가장 먼저 처리
@@ -4876,6 +5633,11 @@ export default function ScreenDesigner({
     groupState.selectedComponents,
     layout,
     selectedScreen,
+    handleNudge,
+    handleGroupAlign,
+    handleGroupDistribute,
+    handleMatchSize,
+    handleToggleAllLabels,
   ]);
 
   // 플로우 위젯 높이 자동 업데이트 이벤트 리스너
@@ -4931,6 +5693,36 @@ export default function ScreenDesigner({
     };
   }, [layout, selectedComponent]);
 
+  // 🆕 레이어 변경 핸들러 - 레이어 컨텍스트에서 레이어가 변경되면 layout에도 반영
+  // 주의: layout.components는 layerId 속성으로 레이어를 구분하므로, 여기서 덮어쓰지 않음
+  const handleLayersChange = useCallback((newLayers: LayerDefinition[]) => {
+    setLayout((prevLayout) => ({
+      ...prevLayout,
+      layers: newLayers,
+      // components는 그대로 유지 - layerId 속성으로 레이어 구분
+      // components: prevLayout.components (기본값으로 유지됨)
+    }));
+  }, []);
+
+  // 🆕 활성 레이어 변경 핸들러
+  const handleActiveLayerChange = useCallback((newActiveLayerId: string | null) => {
+    setActiveLayerIdLocal(newActiveLayerId);
+  }, []);
+
+  // 🆕 초기 레이어 계산 - layout에서 layers가 있으면 사용, 없으면 기본 레이어 생성
+  // 주의: components는 layout.components에 layerId 속성으로 저장되므로, layer.components는 비워둠
+  const initialLayers = useMemo<LayerDefinition[]>(() => {
+    if (layout.layers && layout.layers.length > 0) {
+      // 기존 레이어 구조 사용 (layer.components는 무시하고 빈 배열로 설정)
+      return layout.layers.map(layer => ({
+        ...layer,
+        components: [], // layout.components + layerId 방식 사용
+      }));
+    }
+    // layers가 없으면 기본 레이어 생성 (components는 빈 배열)
+    return [createDefaultLayer()];
+  }, [layout.layers]);
+
   if (!selectedScreen) {
     return (
       <div className="bg-background flex h-full items-center justify-center">
@@ -4945,9 +5737,17 @@ export default function ScreenDesigner({
     );
   }
 
+  // 🔧 ScreenDesigner 렌더링 확인 (디버그 완료 - 주석 처리)
+  // console.log("🏠 ScreenDesigner 렌더!", Date.now());
+
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
-      <TableOptionsProvider>
+      <LayerProvider 
+        initialLayers={initialLayers} 
+        onLayersChange={handleLayersChange}
+        onActiveLayerChange={handleActiveLayerChange}
+      >
+        <TableOptionsProvider>
         <div className="bg-background flex h-full w-full flex-col">
           {/* 상단 슬림 툴바 */}
           <SlimToolbar
@@ -4966,13 +5766,19 @@ export default function ScreenDesigner({
             onOpenMultilangSettings={() => setShowMultilangSettingsModal(true)}
             isPanelOpen={panelStates.v2?.isOpen || false}
             onTogglePanel={() => togglePanel("v2")}
+            selectedCount={groupState.selectedComponents.length}
+            onAlign={handleGroupAlign}
+            onDistribute={handleGroupDistribute}
+            onMatchSize={handleMatchSize}
+            onToggleLabels={handleToggleAllLabels}
+            onShowShortcuts={() => setShowShortcutsModal(true)}
           />
           {/* 메인 컨테이너 (패널들 + 캔버스) */}
           <div className="flex flex-1 overflow-hidden">
             {/* 통합 패널 - 좌측 사이드바 제거 후 너비 300px로 확장 */}
             {panelStates.v2?.isOpen && (
-              <div className="border-border bg-card flex h-full w-[300px] flex-col border-r shadow-sm overflow-hidden">
-                <div className="border-border flex items-center justify-between border-b px-4 py-3 shrink-0">
+              <div className="border-border bg-card flex h-full w-[300px] flex-col overflow-hidden border-r shadow-sm">
+                <div className="border-border flex shrink-0 items-center justify-between border-b px-4 py-3">
                   <h3 className="text-foreground text-sm font-semibold">패널</h3>
                   <button
                     onClick={() => closePanel("v2")}
@@ -4983,10 +5789,13 @@ export default function ScreenDesigner({
                 </div>
                 <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
                   <Tabs defaultValue="components" className="flex min-h-0 flex-1 flex-col">
-                    <TabsList className="mx-4 mt-2 grid h-8 w-auto grid-cols-2 gap-1">
+                    <TabsList className="mx-4 mt-2 grid h-8 w-auto grid-cols-3 gap-1">
                       <TabsTrigger value="components" className="text-xs">
                         컴포넌트
                       </TabsTrigger>
+                      <TabsTrigger value="layers" className="text-xs">
+                        레이어
+                      </TabsTrigger>
                       <TabsTrigger value="properties" className="text-xs">
                         편집
                       </TabsTrigger>
@@ -5012,12 +5821,17 @@ export default function ScreenDesigner({
                       />
                     </TabsContent>
 
+                    {/* 🆕 레이어 관리 탭 */}
+                    <TabsContent value="layers" className="mt-0 flex-1 overflow-hidden">
+                      <LayerManagerPanel components={layout.components} />
+                    </TabsContent>
+
                     <TabsContent value="properties" className="mt-0 flex-1 overflow-hidden">
                       {/* 탭 내부 컴포넌트 선택 시에도 V2PropertiesPanel 사용 */}
                       {selectedTabComponentInfo ? (
                         (() => {
                           const tabComp = selectedTabComponentInfo.component;
-                          
+
                           // 탭 내부 컴포넌트를 ComponentData 형식으로 변환
                           const tabComponentAsComponentData: ComponentData = {
                             id: tabComp.id,
@@ -5030,15 +5844,40 @@ export default function ScreenDesigner({
                             style: tabComp.style || {},
                           } as ComponentData;
 
-                          // 탭 내부 컴포넌트용 속성 업데이트 핸들러
+                          // 탭 내부 컴포넌트용 속성 업데이트 핸들러 (중첩 구조 지원)
                           const updateTabComponentProperty = (componentId: string, path: string, value: any) => {
-                            const { tabsComponentId, tabId } = selectedTabComponentInfo;
-                            
-                            setLayout((prevLayout) => {
-                              const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
-                              if (!tabsComponent) return prevLayout;
+                            const { tabsComponentId, tabId, parentSplitPanelId, parentPanelSide } =
+                              selectedTabComponentInfo;
 
-                              const currentConfig = (tabsComponent as any).componentConfig || {};
+                            console.log("🔧 updateTabComponentProperty 호출:", {
+                              componentId,
+                              path,
+                              value,
+                              parentSplitPanelId,
+                              parentPanelSide,
+                            });
+
+                            // 🆕 안전한 깊은 경로 업데이트 헬퍼 함수
+                            const setNestedValue = (obj: any, pathStr: string, val: any): any => {
+                              // 깊은 복사로 시작
+                              const result = JSON.parse(JSON.stringify(obj));
+                              const parts = pathStr.split(".");
+                              let current = result;
+
+                              for (let i = 0; i < parts.length - 1; i++) {
+                                const part = parts[i];
+                                if (!current[part] || typeof current[part] !== "object") {
+                                  current[part] = {};
+                                }
+                                current = current[part];
+                              }
+                              current[parts[parts.length - 1]] = val;
+                              return result;
+                            };
+
+                            // 탭 컴포넌트 업데이트 함수
+                            const updateTabsComponent = (tabsComponent: any) => {
+                              const currentConfig = JSON.parse(JSON.stringify(tabsComponent.componentConfig || {}));
                               const tabs = currentConfig.tabs || [];
 
                               const updatedTabs = tabs.map((tab: any) => {
@@ -5047,63 +5886,102 @@ export default function ScreenDesigner({
                                     ...tab,
                                     components: (tab.components || []).map((comp: any) => {
                                       if (comp.id !== componentId) return comp;
-                                      
-                                      // path를 파싱하여 중첩 속성 업데이트
-                                      const pathParts = path.split(".");
-                                      const newComp = { ...comp };
-                                      let current: any = newComp;
-                                      
-                                      for (let i = 0; i < pathParts.length - 1; i++) {
-                                        const part = pathParts[i];
-                                        if (!current[part]) {
-                                          current[part] = {};
-                                        } else {
-                                          current[part] = { ...current[part] };
-                                        }
-                                        current = current[part];
-                                      }
-                                      current[pathParts[pathParts.length - 1]] = value;
-                                      
-                                      return newComp;
+
+                                      // 🆕 안전한 깊은 경로 업데이트 사용
+                                      const updatedComp = setNestedValue(comp, path, value);
+                                      console.log("🔧 컴포넌트 업데이트 결과:", updatedComp);
+                                      return updatedComp;
                                     }),
                                   };
                                 }
                                 return tab;
                               });
 
-                              const updatedComponent = {
+                              return {
                                 ...tabsComponent,
                                 componentConfig: { ...currentConfig, tabs: updatedTabs },
                               };
+                            };
 
-                              // 선택된 컴포넌트 정보 업데이트
-                              const updatedComp = updatedTabs
-                                .find((t: any) => t.id === tabId)
-                                ?.components?.find((c: any) => c.id === componentId);
-                              if (updatedComp) {
-                                setSelectedTabComponentInfo((prev) =>
-                                  prev ? { ...prev, component: updatedComp } : null
-                                );
+                            setLayout((prevLayout) => {
+                              let newLayout;
+                              let updatedTabs;
+
+                              if (parentSplitPanelId && parentPanelSide) {
+                                // 🆕 중첩 구조: 분할 패널 안의 탭 업데이트
+                                newLayout = {
+                                  ...prevLayout,
+                                  components: prevLayout.components.map((c) => {
+                                    if (c.id === parentSplitPanelId) {
+                                      const splitConfig = (c as any).componentConfig || {};
+                                      const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                                      const panelConfig = splitConfig[panelKey] || {};
+                                      const panelComponents = panelConfig.components || [];
+
+                                      const tabsComponent = panelComponents.find(
+                                        (pc: any) => pc.id === tabsComponentId,
+                                      );
+                                      if (!tabsComponent) return c;
+
+                                      const updatedTabsComponent = updateTabsComponent(tabsComponent);
+                                      updatedTabs = updatedTabsComponent.componentConfig.tabs;
+
+                                      return {
+                                        ...c,
+                                        componentConfig: {
+                                          ...splitConfig,
+                                          [panelKey]: {
+                                            ...panelConfig,
+                                            components: panelComponents.map((pc: any) =>
+                                              pc.id === tabsComponentId ? updatedTabsComponent : pc,
+                                            ),
+                                          },
+                                        },
+                                      };
+                                    }
+                                    return c;
+                                  }),
+                                };
+                              } else {
+                                // 일반 구조: 최상위 탭 업데이트
+                                const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
+                                if (!tabsComponent) return prevLayout;
+
+                                const updatedTabsComponent = updateTabsComponent(tabsComponent);
+                                updatedTabs = updatedTabsComponent.componentConfig.tabs;
+
+                                newLayout = {
+                                  ...prevLayout,
+                                  components: prevLayout.components.map((c) =>
+                                    c.id === tabsComponentId ? updatedTabsComponent : c,
+                                  ),
+                                };
                               }
 
-                              return {
-                                ...prevLayout,
-                                components: prevLayout.components.map((c) =>
-                                  c.id === tabsComponentId ? updatedComponent : c
-                                ),
-                              };
+                              // 선택된 컴포넌트 정보 업데이트
+                              if (updatedTabs) {
+                                const updatedComp = updatedTabs
+                                  .find((t: any) => t.id === tabId)
+                                  ?.components?.find((c: any) => c.id === componentId);
+                                if (updatedComp) {
+                                  setSelectedTabComponentInfo((prev) =>
+                                    prev ? { ...prev, component: updatedComp } : null,
+                                  );
+                                }
+                              }
+
+                              return newLayout;
                             });
                           };
 
-                          // 탭 내부 컴포넌트 삭제 핸들러
+                          // 탭 내부 컴포넌트 삭제 핸들러 (중첩 구조 지원)
                           const deleteTabComponent = (componentId: string) => {
-                            const { tabsComponentId, tabId } = selectedTabComponentInfo;
-                            
-                            setLayout((prevLayout) => {
-                              const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
-                              if (!tabsComponent) return prevLayout;
+                            const { tabsComponentId, tabId, parentSplitPanelId, parentPanelSide } =
+                              selectedTabComponentInfo;
 
-                              const currentConfig = (tabsComponent as any).componentConfig || {};
+                            // 탭 컴포넌트에서 특정 컴포넌트 삭제
+                            const updateTabsComponentForDelete = (tabsComponent: any) => {
+                              const currentConfig = tabsComponent.componentConfig || {};
                               const tabs = currentConfig.tabs || [];
 
                               const updatedTabs = tabs.map((tab: any) => {
@@ -5116,28 +5994,75 @@ export default function ScreenDesigner({
                                 return tab;
                               });
 
-                              const updatedComponent = {
+                              return {
                                 ...tabsComponent,
                                 componentConfig: { ...currentConfig, tabs: updatedTabs },
                               };
+                            };
+
+                            setLayout((prevLayout) => {
+                              let newLayout;
+
+                              if (parentSplitPanelId && parentPanelSide) {
+                                // 🆕 중첩 구조: 분할 패널 안의 탭에서 삭제
+                                newLayout = {
+                                  ...prevLayout,
+                                  components: prevLayout.components.map((c) => {
+                                    if (c.id === parentSplitPanelId) {
+                                      const splitConfig = (c as any).componentConfig || {};
+                                      const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                                      const panelConfig = splitConfig[panelKey] || {};
+                                      const panelComponents = panelConfig.components || [];
+
+                                      const tabsComponent = panelComponents.find(
+                                        (pc: any) => pc.id === tabsComponentId,
+                                      );
+                                      if (!tabsComponent) return c;
+
+                                      const updatedTabsComponent = updateTabsComponentForDelete(tabsComponent);
+
+                                      return {
+                                        ...c,
+                                        componentConfig: {
+                                          ...splitConfig,
+                                          [panelKey]: {
+                                            ...panelConfig,
+                                            components: panelComponents.map((pc: any) =>
+                                              pc.id === tabsComponentId ? updatedTabsComponent : pc,
+                                            ),
+                                          },
+                                        },
+                                      };
+                                    }
+                                    return c;
+                                  }),
+                                };
+                              } else {
+                                // 일반 구조: 최상위 탭에서 삭제
+                                const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
+                                if (!tabsComponent) return prevLayout;
+
+                                const updatedTabsComponent = updateTabsComponentForDelete(tabsComponent);
+
+                                newLayout = {
+                                  ...prevLayout,
+                                  components: prevLayout.components.map((c) =>
+                                    c.id === tabsComponentId ? updatedTabsComponent : c,
+                                  ),
+                                };
+                              }
 
                               setSelectedTabComponentInfo(null);
-
-                              return {
-                                ...prevLayout,
-                                components: prevLayout.components.map((c) =>
-                                  c.id === tabsComponentId ? updatedComponent : c
-                                ),
-                              };
+                              return newLayout;
                             });
                           };
 
                           return (
                             <div className="flex h-full flex-col">
                               <div className="flex items-center justify-between border-b px-4 py-2">
-                                <span className="text-xs text-muted-foreground">탭 내부 컴포넌트</span>
+                                <span className="text-muted-foreground text-xs">탭 내부 컴포넌트</span>
                                 <button
-                                  className="text-xs text-muted-foreground hover:text-foreground"
+                                  className="text-muted-foreground hover:text-foreground text-xs"
                                   onClick={() => setSelectedTabComponentInfo(null)}
                                 >
                                   선택 해제
@@ -5162,6 +6087,175 @@ export default function ScreenDesigner({
                             </div>
                           );
                         })()
+                      ) : selectedPanelComponentInfo ? (
+                        // 🆕 분할 패널 내부 컴포넌트 선택 시 V2PropertiesPanel 사용
+                        (() => {
+                          const panelComp = selectedPanelComponentInfo.component;
+
+                          // 분할 패널 내부 컴포넌트를 ComponentData 형식으로 변환
+                          const panelComponentAsComponentData: ComponentData = {
+                            id: panelComp.id,
+                            type: "component",
+                            componentType: panelComp.componentType,
+                            label: panelComp.label,
+                            position: panelComp.position || { x: 0, y: 0 },
+                            size: panelComp.size || { width: 200, height: 100 },
+                            componentConfig: panelComp.componentConfig || {},
+                            style: panelComp.style || {},
+                          } as ComponentData;
+
+                          // 분할 패널 내부 컴포넌트용 속성 업데이트 핸들러
+                          const updatePanelComponentProperty = (componentId: string, path: string, value: any) => {
+                            const { splitPanelId, panelSide } = selectedPanelComponentInfo;
+                            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+
+                            console.log("🔧 updatePanelComponentProperty 호출:", {
+                              componentId,
+                              path,
+                              value,
+                              splitPanelId,
+                              panelSide,
+                            });
+
+                            // 🆕 안전한 깊은 경로 업데이트 헬퍼 함수
+                            const setNestedValue = (obj: any, pathStr: string, val: any): any => {
+                              const result = JSON.parse(JSON.stringify(obj));
+                              const parts = pathStr.split(".");
+                              let current = result;
+
+                              for (let i = 0; i < parts.length - 1; i++) {
+                                const part = parts[i];
+                                if (!current[part] || typeof current[part] !== "object") {
+                                  current[part] = {};
+                                }
+                                current = current[part];
+                              }
+                              current[parts[parts.length - 1]] = val;
+                              return result;
+                            };
+
+                            setLayout((prevLayout) => {
+                              const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
+                              if (!splitPanelComponent) return prevLayout;
+
+                              const currentConfig = (splitPanelComponent as any).componentConfig || {};
+                              const panelConfig = currentConfig[panelKey] || {};
+                              const components = panelConfig.components || [];
+
+                              // 해당 컴포넌트 찾기
+                              const targetCompIndex = components.findIndex((c: any) => c.id === componentId);
+                              if (targetCompIndex === -1) return prevLayout;
+
+                              // 🆕 안전한 깊은 경로 업데이트 사용
+                              const targetComp = components[targetCompIndex];
+                              const updatedComp =
+                                path === "style"
+                                  ? { ...targetComp, style: value }
+                                  : setNestedValue(targetComp, path, value);
+
+                              console.log("🔧 분할 패널 컴포넌트 업데이트 결과:", updatedComp);
+
+                              const updatedComponents = [
+                                ...components.slice(0, targetCompIndex),
+                                updatedComp,
+                                ...components.slice(targetCompIndex + 1),
+                              ];
+
+                              const updatedComponent = {
+                                ...splitPanelComponent,
+                                componentConfig: {
+                                  ...currentConfig,
+                                  [panelKey]: {
+                                    ...panelConfig,
+                                    components: updatedComponents,
+                                  },
+                                },
+                              };
+
+                              // selectedPanelComponentInfo 업데이트
+                              setSelectedPanelComponentInfo((prev) =>
+                                prev ? { ...prev, component: updatedComp } : null,
+                              );
+
+                              return {
+                                ...prevLayout,
+                                components: prevLayout.components.map((c) =>
+                                  c.id === splitPanelId ? updatedComponent : c,
+                                ),
+                              };
+                            });
+                          };
+
+                          // 분할 패널 내부 컴포넌트 삭제 핸들러
+                          const deletePanelComponent = (componentId: string) => {
+                            const { splitPanelId, panelSide } = selectedPanelComponentInfo;
+                            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+
+                            setLayout((prevLayout) => {
+                              const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
+                              if (!splitPanelComponent) return prevLayout;
+
+                              const currentConfig = (splitPanelComponent as any).componentConfig || {};
+                              const panelConfig = currentConfig[panelKey] || {};
+                              const components = panelConfig.components || [];
+
+                              const updatedComponents = components.filter((c: any) => c.id !== componentId);
+
+                              const updatedComponent = {
+                                ...splitPanelComponent,
+                                componentConfig: {
+                                  ...currentConfig,
+                                  [panelKey]: {
+                                    ...panelConfig,
+                                    components: updatedComponents,
+                                  },
+                                },
+                              };
+
+                              setSelectedPanelComponentInfo(null);
+
+                              return {
+                                ...prevLayout,
+                                components: prevLayout.components.map((c) =>
+                                  c.id === splitPanelId ? updatedComponent : c,
+                                ),
+                              };
+                            });
+                          };
+
+                          return (
+                            <div className="flex h-full flex-col">
+                              <div className="flex items-center justify-between border-b px-4 py-2">
+                                <span className="text-muted-foreground text-xs">
+                                  분할 패널 ({selectedPanelComponentInfo.panelSide === "left" ? "좌측" : "우측"})
+                                  컴포넌트
+                                </span>
+                                <button
+                                  className="text-muted-foreground hover:text-foreground text-xs"
+                                  onClick={() => setSelectedPanelComponentInfo(null)}
+                                >
+                                  선택 해제
+                                </button>
+                              </div>
+                              <div className="flex-1 overflow-hidden">
+                                <V2PropertiesPanel
+                                  selectedComponent={panelComponentAsComponentData}
+                                  tables={tables}
+                                  onUpdateProperty={updatePanelComponentProperty}
+                                  onDeleteComponent={deletePanelComponent}
+                                  currentTable={tables.length > 0 ? tables[0] : undefined}
+                                  currentTableName={selectedScreen?.tableName}
+                                  currentScreenCompanyCode={selectedScreen?.companyCode}
+                                  onStyleChange={(style) => {
+                                    updatePanelComponentProperty(panelComp.id, "style", style);
+                                  }}
+                                  allComponents={layout.components}
+                                  menuObjid={menuObjid}
+                                />
+                              </div>
+                            </div>
+                          );
+                        })()
                       ) : (
                         <V2PropertiesPanel
                           selectedComponent={selectedComponent || undefined}
@@ -5188,8 +6282,12 @@ export default function ScreenDesigner({
               </div>
             )}
 
-            {/* 메인 캔버스 영역 (스크롤 가능한 컨테이너) - 좌우 최소화, 위아래 넉넉한 여유 */}
-            <div ref={canvasContainerRef} className="bg-muted relative flex-1 overflow-auto px-16 py-6">
+            {/* 메인 캔버스 영역 (스크롤 가능한 컨테이너) - GPU 가속 스크롤 적용 */}
+            <div
+              ref={canvasContainerRef}
+              className="bg-muted relative flex-1 overflow-auto px-16 py-6"
+              style={{ willChange: "scroll-position" }}
+            >
               {/* Pan 모드 안내 - 제거됨 */}
               {/* 줌 레벨 표시 */}
               <div className="bg-card text-foreground border-border pointer-events-none fixed right-6 bottom-6 z-50 rounded-lg border px-4 py-2 text-sm font-medium shadow-md">
@@ -5298,12 +6396,13 @@ export default function ScreenDesigner({
                   </div>
                 );
               })()}
-              {/* 🔥 줌 적용 시 스크롤 영역 확보를 위한 래퍼 - 중앙 정렬로 변경 */}
+              {/* 줌 적용 시 스크롤 영역 확보를 위한 래퍼 - 중앙 정렬 + contain 최적화 */}
               <div
                 className="flex justify-center"
                 style={{
                   width: "100%",
                   minHeight: screenResolution.height * zoomLevel,
+                  contain: "layout style", // 레이아웃 재계산 범위 제한
                 }}
               >
                 {/* 실제 작업 캔버스 (해상도 크기) - 고정 크기 + 줌 적용 */}
@@ -5316,8 +6415,10 @@ export default function ScreenDesigner({
                     maxWidth: `${screenResolution.width}px`,
                     minHeight: `${screenResolution.height}px`,
                     flexShrink: 0,
-                    transform: `scale(${zoomLevel})`,
+                    transform: `scale3d(${zoomLevel}, ${zoomLevel}, 1)`,
                     transformOrigin: "top center", // 중앙 기준으로 스케일
+                    willChange: "transform", // GPU 가속 레이어 생성
+                    backfaceVisibility: "hidden" as const, // 리페인트 최적화
                   }}
                 >
                   <div
@@ -5363,7 +6464,8 @@ export default function ScreenDesigner({
                     {/* 컴포넌트들 */}
                     {(() => {
                       // 🆕 플로우 버튼 그룹 감지 및 처리
-                      const topLevelComponents = layout.components.filter((component) => !component.parentId);
+                      // visibleComponents를 사용하여 활성 레이어의 컴포넌트만 표시
+                      const topLevelComponents = visibleComponents.filter((component) => !component.parentId);
 
                       // auto-compact 모드의 버튼들을 그룹별로 묶기
                       const buttonGroups: Record<string, ComponentData[]> = {};
@@ -5397,6 +6499,9 @@ export default function ScreenDesigner({
                       // 그룹에 속하지 않은 일반 컴포넌트들
                       const regularComponents = topLevelComponents.filter((c) => !processedButtonIds.has(c.id));
 
+                      // 🔧 렌더링 확인 로그 (디버그 완료 - 주석 처리)
+                      // console.log("🔄 ScreenDesigner 렌더링:", { componentsCount: regularComponents.length, forceRenderTrigger, timestamp: Date.now() });
+
                       return (
                         <>
                           {/* 일반 컴포넌트들 */}
@@ -5462,11 +6567,26 @@ export default function ScreenDesigner({
                             const globalFiles = globalFileState[component.id] || [];
                             const componentFiles = (component as any).uploadedFiles || [];
                             const fileStateKey = `${globalFiles.length}-${JSON.stringify(globalFiles.map((f: any) => f.objid) || [])}-${componentFiles.length}`;
+                            // 🆕 style 변경 시 리렌더링을 위한 key 추가
+                            const styleKey =
+                              component.style?.labelDisplay !== undefined
+                                ? `label-${component.style.labelDisplay}`
+                                : "";
+                            const fullKey = `${component.id}-${fileStateKey}-${styleKey}-${(component as any).lastFileUpdate || 0}-${forceRenderTrigger}`;
+
+                            // 🔧 v2-input 계열 컴포넌트 key 변경 로그 (디버그 완료 - 주석 처리)
+                            // if (component.id.includes("v2-") || component.widgetType?.includes("v2-")) { console.log("🔑 RealtimePreview key:", { id: component.id, styleKey, labelDisplay: component.style?.labelDisplay, forceRenderTrigger, fullKey }); }
+
+                            // 🆕 labelDisplay 변경 시 새 객체로 강제 변경 감지
+                            const componentWithLabel = {
+                              ...displayComponent,
+                              _labelDisplayKey: component.style?.labelDisplay,
+                            };
 
                             return (
                               <RealtimePreview
-                                key={`${component.id}-${fileStateKey}-${(component as any).lastFileUpdate || 0}-${forceRenderTrigger}`}
-                                component={displayComponent}
+                                key={fullKey}
+                                component={componentWithLabel}
                                 isSelected={
                                   selectedComponent?.id === component.id ||
                                   groupState.selectedComponents.includes(component.id)
@@ -5477,6 +6597,7 @@ export default function ScreenDesigner({
                                 onDragStart={(e) => startComponentDrag(component, e)}
                                 onDragEnd={endDrag}
                                 selectedScreen={selectedScreen}
+                                tableName={selectedScreen?.tableName} // 🆕 디자인 모드에서도 옵션 로딩을 위해 전달
                                 menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
                                 // onZoneComponentDrop 제거
                                 onZoneClick={handleZoneClick}
@@ -5514,7 +6635,7 @@ export default function ScreenDesigner({
                                 // 🆕 컴포넌트 전체 업데이트 핸들러 (탭 내부 컴포넌트 위치 조정 등)
                                 onUpdateComponent={(updatedComponent) => {
                                   const updatedComponents = layout.components.map((comp) =>
-                                    comp.id === updatedComponent.id ? updatedComponent : comp
+                                    comp.id === updatedComponent.id ? updatedComponent : comp,
                                   );
 
                                   const newLayout = {
@@ -5529,9 +6650,7 @@ export default function ScreenDesigner({
                                 onResize={(componentId, newSize) => {
                                   setLayout((prevLayout) => {
                                     const updatedComponents = prevLayout.components.map((comp) =>
-                                      comp.id === componentId
-                                        ? { ...comp, size: newSize }
-                                        : comp
+                                      comp.id === componentId ? { ...comp, size: newSize } : comp,
                                     );
 
                                     const newLayout = {
@@ -5545,7 +6664,7 @@ export default function ScreenDesigner({
                                   });
                                 }}
                                 // 🆕 탭 내부 컴포넌트 선택 핸들러
-                                onSelectTabComponent={(tabId, compId, comp) => 
+                                onSelectTabComponent={(tabId, compId, comp) =>
                                   handleSelectTabComponent(component.id, tabId, compId, comp)
                                 }
                                 selectedTabComponentId={
@@ -5553,6 +6672,15 @@ export default function ScreenDesigner({
                                     ? selectedTabComponentInfo.componentId
                                     : undefined
                                 }
+                                // 🆕 분할 패널 내부 컴포넌트 선택 핸들러
+                                onSelectPanelComponent={(panelSide, compId, comp) =>
+                                  handleSelectPanelComponent(component.id, panelSide, compId, comp)
+                                }
+                                selectedPanelComponentId={
+                                  selectedPanelComponentInfo?.splitPanelId === component.id
+                                    ? selectedPanelComponentInfo.componentId
+                                    : undefined
+                                }
                               >
                                 {/* 컨테이너, 그룹, 영역, 컴포넌트의 자식 컴포넌트들 렌더링 (레이아웃은 독립적으로 렌더링) */}
                                 {(component.type === "group" ||
@@ -5636,6 +6764,7 @@ export default function ScreenDesigner({
                                           onDragStart={(e) => startComponentDrag(child, e)}
                                           onDragEnd={endDrag}
                                           selectedScreen={selectedScreen}
+                                          tableName={selectedScreen?.tableName} // 🆕 디자인 모드에서도 옵션 로딩을 위해 전달
                                           // onZoneComponentDrop 제거
                                           onZoneClick={handleZoneClick}
                                           // 설정 변경 핸들러 (자식 컴포넌트용)
@@ -5647,9 +6776,7 @@ export default function ScreenDesigner({
                                           onResize={(componentId, newSize) => {
                                             setLayout((prevLayout) => {
                                               const updatedComponents = prevLayout.components.map((comp) =>
-                                                comp.id === componentId
-                                                  ? { ...comp, size: newSize }
-                                                  : comp
+                                                comp.id === componentId ? { ...comp, size: newSize } : comp,
                                               );
 
                                               const newLayout = {
@@ -5858,6 +6985,7 @@ export default function ScreenDesigner({
                                             component={relativeButton}
                                             isDesignMode={true}
                                             formData={{}}
+                                            tableName={selectedScreen?.tableName}
                                             onDataflowComplete={() => {}}
                                           />
                                         </div>
@@ -5990,8 +7118,14 @@ export default function ScreenDesigner({
               }
             }}
           />
+          {/* 단축키 도움말 모달 */}
+          <KeyboardShortcutsModal
+            isOpen={showShortcutsModal}
+            onClose={() => setShowShortcutsModal(false)}
+          />
         </div>
       </TableOptionsProvider>
+      </LayerProvider>
     </ScreenPreviewProvider>
   );
 }
diff --git a/frontend/components/screen/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx
index ef82467c..1aa47f0d 100644
--- a/frontend/components/screen/ScreenGroupTreeView.tsx
+++ b/frontend/components/screen/ScreenGroupTreeView.tsx
@@ -18,6 +18,7 @@ import {
   Loader2,
   RefreshCw,
   Building2,
+  AlertTriangle,
 } from "lucide-react";
 import { ScreenDefinition } from "@/types/screen";
 import {
@@ -175,7 +176,7 @@ export function ScreenGroupTreeView({
   const [syncProgress, setSyncProgress] = useState<{ message: string; detail?: string } | null>(null);
   
   // 회사 선택 (최고 관리자용)
-  const { user, switchCompany } = useAuth();
+  const { user } = useAuth();
   const [companies, setCompanies] = useState<Company[]>([]);
   const [selectedCompanyCode, setSelectedCompanyCode] = useState<string>("");
   const [isSyncCompanySelectOpen, setIsSyncCompanySelectOpen] = useState(false);
@@ -301,23 +302,18 @@ export function ScreenGroupTreeView({
     }
   };
   
-  // 회사 선택 시 회사 전환 + 상태 조회
+  // 회사 선택 시 상태만 변경 (페이지 새로고침 없이)
   const handleCompanySelect = async (companyCode: string) => {
     setSelectedCompanyCode(companyCode);
     setIsSyncCompanySelectOpen(false);
     setSyncStatus(null);
     
     if (companyCode) {
-      // 🔧 회사 전환 (JWT 토큰 변경) - 모든 API가 선택한 회사로 동작하도록
-      const switchResult = await switchCompany(companyCode);
-      if (!switchResult.success) {
-        toast.error(switchResult.message || "회사 전환 실패");
-        return;
+      // 동기화 상태 조회 (선택한 회사 코드로)
+      const response = await getMenuScreenSyncStatus(companyCode);
+      if (response.success && response.data) {
+        setSyncStatus(response.data);
       }
-      toast.success(`${companyCode} 회사로 전환되었습니다. 페이지를 새로고침합니다.`);
-      
-      // 🔧 페이지 새로고침으로 새 JWT 확실하게 적용
-      window.location.reload();
     }
   };
 
@@ -447,17 +443,24 @@ export function ScreenGroupTreeView({
   };
 
   // 그룹과 모든 하위 그룹의 화면을 재귀적으로 수집
-  const getAllScreensInGroupRecursively = (groupId: number): ScreenDefinition[] => {
+  // 같은 회사의 그룹만 필터링하여 다른 회사 화면이 잘못 수집되는 것을 방지
+  const getAllScreensInGroupRecursively = (groupId: number, targetCompanyCode?: string): ScreenDefinition[] => {
     const result: ScreenDefinition[] = [];
+    // 부모 그룹의 company_code 확인
+    const parentGroup = groups.find(g => g.id === groupId);
+    const companyCode = targetCompanyCode || parentGroup?.company_code;
     
     // 현재 그룹의 화면들
     const currentGroupScreens = getScreensInGroup(groupId);
     result.push(...currentGroupScreens);
     
-    // 하위 그룹들 찾기
-    const childGroups = groups.filter((g) => (g as any).parent_group_id === groupId);
+    // 같은 회사 + 같은 부모를 가진 하위 그룹들 찾기
+    const childGroups = groups.filter((g) => 
+      (g as any).parent_group_id === groupId &&
+      (!companyCode || g.company_code === companyCode)
+    );
     for (const childGroup of childGroups) {
-      const childScreens = getAllScreensInGroupRecursively(childGroup.id);
+      const childScreens = getAllScreensInGroupRecursively(childGroup.id, companyCode);
       result.push(...childScreens);
     }
     
@@ -465,13 +468,22 @@ export function ScreenGroupTreeView({
   };
 
   // 모든 하위 그룹 ID를 재귀적으로 수집 (삭제 순서: 자식 → 부모)
-  const getAllChildGroupIds = (groupId: number): number[] => {
+  // 같은 회사의 그룹만 필터링하여 다른 회사 그룹이 잘못 삭제되는 것을 방지
+  const getAllChildGroupIds = (groupId: number, targetCompanyCode?: string): number[] => {
     const result: number[] = [];
-    const childGroups = groups.filter((g) => (g as any).parent_group_id === groupId);
+    // 부모 그룹의 company_code 확인
+    const parentGroup = groups.find(g => g.id === groupId);
+    const companyCode = targetCompanyCode || parentGroup?.company_code;
+    
+    // 같은 회사 + 같은 부모를 가진 그룹만 필터링
+    const childGroups = groups.filter((g) => 
+      (g as any).parent_group_id === groupId && 
+      (!companyCode || g.company_code === companyCode)
+    );
     
     for (const childGroup of childGroups) {
       // 자식의 자식들을 먼저 수집 (깊은 곳부터)
-      const grandChildIds = getAllChildGroupIds(childGroup.id);
+      const grandChildIds = getAllChildGroupIds(childGroup.id, companyCode);
       result.push(...grandChildIds);
       result.push(childGroup.id);
     }
@@ -483,10 +495,35 @@ export function ScreenGroupTreeView({
   const confirmDeleteGroup = async () => {
     if (!deletingGroup) return;
 
+    // 🔍 디버깅: 삭제 대상 그룹 정보
+    console.log("========== 그룹 삭제 디버깅 ==========");
+    console.log("삭제 대상 그룹:", {
+      id: deletingGroup.id,
+      name: deletingGroup.group_name,
+      company_code: deletingGroup.company_code,
+      parent_group_id: (deletingGroup as any).parent_group_id
+    });
+
+    // 🔍 디버깅: 전체 groups 배열에서 같은 회사 그룹 출력
+    const sameCompanyGroups = groups.filter(g => g.company_code === deletingGroup.company_code);
+    console.log("같은 회사 그룹들:", sameCompanyGroups.map(g => ({
+      id: g.id,
+      name: g.group_name,
+      parent_group_id: (g as any).parent_group_id
+    })));
+
     // 삭제 전 통계 수집 (화면 수는 삭제 전에 계산)
     const totalScreensToDelete = getAllScreensInGroupRecursively(deletingGroup.id).length;
     const childGroupIds = getAllChildGroupIds(deletingGroup.id);
 
+    // 🔍 디버깅: 수집된 하위 그룹 ID들
+    console.log("수집된 하위 그룹 ID들:", childGroupIds);
+    console.log("하위 그룹 상세:", childGroupIds.map(id => {
+      const g = groups.find(grp => grp.id === id);
+      return g ? { id: g.id, name: g.group_name, parent_group_id: (g as any).parent_group_id } : { id, name: "NOT_FOUND" };
+    }));
+    console.log("==========================================");
+
     // 총 작업 수 계산 (화면 + 하위 그룹 + 현재 그룹)
     const totalSteps = totalScreensToDelete + childGroupIds.length + 1;
     let currentStep = 0;
@@ -511,7 +548,7 @@ export function ScreenGroupTreeView({
               total: totalSteps, 
               message: `화면 삭제 중: ${screen.screenName}` 
             });
-            await screenApi.deleteScreen(screen.screenId, "그룹 삭제와 함께 삭제");
+            await screenApi.deleteScreen(screen.screenId, "그룹 삭제와 함께 삭제", true); // force: true로 의존성 무시
           }
           console.log(`✅ 그룹 및 하위 그룹 내 화면 ${allScreens.length}개 삭제 완료`);
         }
@@ -1427,16 +1464,26 @@ export function ScreenGroupTreeView({
 
       {/* 그룹 삭제 확인 다이얼로그 */}
       <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px] border-destructive/50">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">그룹 삭제</AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
-              "{deletingGroup?.group_name}" 그룹을 삭제하시겠습니까?
-              <br />
-              {deleteScreensWithGroup 
-                ? <span className="text-destructive font-medium">그룹에 속한 화면들도 함께 삭제됩니다.</span>
-                : "그룹에 속한 화면들은 미분류로 이동됩니다."
-              }
+            <AlertDialogTitle className="text-base sm:text-lg flex items-center gap-2 text-destructive">
+              <AlertTriangle className="h-5 w-5" />
+              그룹 삭제 경고
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="text-xs sm:text-sm">
+                <div className="mt-2 rounded-md bg-destructive/10 border border-destructive/30 p-3">
+                  <p className="font-semibold text-destructive">
+                    &quot;{deletingGroup?.group_name}&quot; 그룹을 정말 삭제하시겠습니까?
+                  </p>
+                  <p className="mt-2 text-destructive/80">
+                    {deleteScreensWithGroup 
+                      ? "⚠️ 그룹에 속한 모든 화면, 플로우, 관련 데이터가 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다."
+                      : "그룹에 속한 화면들은 미분류로 이동됩니다."
+                    }
+                  </p>
+                </div>
+              </div>
             </AlertDialogDescription>
           </AlertDialogHeader>
           
@@ -1534,11 +1581,21 @@ export function ScreenGroupTreeView({
           )}
           
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">화면 삭제</AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
-              "{deletingScreen?.screenName}" 화면을 삭제하시겠습니까?
-              <br />
-              삭제된 화면은 휴지통으로 이동됩니다.
+            <AlertDialogTitle className="text-base sm:text-lg flex items-center gap-2 text-destructive">
+              <AlertTriangle className="h-5 w-5" />
+              화면 삭제 경고
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="text-xs sm:text-sm">
+                <div className="mt-2 rounded-md bg-destructive/10 border border-destructive/30 p-3">
+                  <p className="font-semibold text-destructive">
+                    &quot;{deletingScreen?.screenName}&quot; 화면을 정말 삭제하시겠습니까?
+                  </p>
+                  <p className="mt-2 text-destructive/80">
+                    ⚠️ 화면과 연결된 플로우, 레이아웃 데이터가 모두 삭제됩니다. 삭제된 화면은 휴지통으로 이동됩니다.
+                  </p>
+                </div>
+              </div>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="gap-2 sm:gap-0">
diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx
index e49bf6d8..bcaaf054 100644
--- a/frontend/components/screen/ScreenNode.tsx
+++ b/frontend/components/screen/ScreenNode.tsx
@@ -58,6 +58,7 @@ export interface TableNodeData {
   label: string;
   subLabel?: string;
   isMain?: boolean;
+  isFilterTable?: boolean;  // 마스터-디테일의 디테일 테이블인지 (보라색 테두리)
   isFocused?: boolean;     // 포커스된 테이블인지
   isFaded?: boolean;       // 흑백 처리할지
   columns?: Array<{
@@ -448,7 +449,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
 
 // ========== 테이블 노드 (하단) - 컬럼 목록 표시 (컴팩트) ==========
 export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
-  const { label, subLabel, isMain, isFocused, isFaded, columns, highlightedColumns, joinColumns, joinColumnRefs, filterColumns, fieldMappings, referencedBy, saveInfos } = data;
+  const { label, subLabel, isMain, isFilterTable, isFocused, isFaded, columns, highlightedColumns, joinColumns, joinColumnRefs, filterColumns, fieldMappings, referencedBy, saveInfos } = data;
   
   // 강조할 컬럼 세트 (영문 컬럼명 기준)
   const highlightSet = new Set(highlightedColumns || []);
@@ -574,16 +575,19 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
   return (
     <div 
       className={`group relative flex w-[260px] flex-col overflow-visible rounded-xl border shadow-md ${
-        // 필터 관련 테이블 (마스터 또는 디테일): 보라색
-        (hasFilterRelation || isFilterSource)
+        // 1. 필터 테이블 (마스터-디테일의 디테일 테이블): 항상 보라색 테두리
+        isFilterTable
+          ? "border-2 border-violet-500 ring-2 ring-violet-500/20 shadow-lg bg-violet-50/50"
+          // 2. 필터 관련 테이블 (마스터 또는 디테일) 포커스 시: 진한 보라색
+          : (hasFilterRelation || isFilterSource)
           ? "border-2 border-violet-500 ring-4 ring-violet-500/30 shadow-xl bg-violet-50"
-          // 순수 포커스 (필터 관계 없음): 초록색
+          // 3. 순수 포커스 (필터 관계 없음): 초록색
           : isFocused
           ? "border-2 border-emerald-500 ring-4 ring-emerald-500/30 shadow-xl bg-card" 
-          // 흐리게 처리
+          // 4. 흐리게 처리
           : isFaded
           ? "border-gray-200 opacity-60 bg-card"
-          // 기본
+          // 5. 기본
           : "border-border hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20 bg-card"
       }`}
       style={{
diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx
index 7171e214..a3609378 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -148,6 +148,19 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
   // 강제 새로고침용 키 (설정 저장 후 시각화 재로딩)
   const [refreshKey, setRefreshKey] = useState(0);
   
+  // 화면 삭제/추가 시 노드 플로워 새로고침 (screen-list-refresh 이벤트 구독)
+  useEffect(() => {
+    const handleScreenListRefresh = () => {
+      // refreshKey 증가로 데이터 재로드 트리거
+      setRefreshKey(prev => prev + 1);
+    };
+    
+    window.addEventListener("screen-list-refresh", handleScreenListRefresh);
+    return () => {
+      window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
+    };
+  }, []);
+  
   // 그룹 또는 화면이 변경될 때 포커스 초기화
   useEffect(() => {
     setFocusedScreenId(null);
@@ -171,6 +184,10 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
   
   // 화면별 사용 컬럼 매핑 (화면 ID -> 테이블명 -> 사용 컬럼들)
   const [screenUsedColumnsMap, setScreenUsedColumnsMap] = useState<Record<number, Record<string, string[]>>>({});
+  
+  // 전역 메인 테이블 목록 (우선순위: 메인 > 서브)
+  // 이 목록에 있는 테이블은 서브 테이블로 분류되지 않음
+  const [globalMainTables, setGlobalMainTables] = useState<Set<string>>(new Set());
 
   // 테이블 컬럼 정보 로드
   const loadTableColumns = useCallback(
@@ -267,24 +284,26 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         const flows = flowsRes.success ? flowsRes.data || [] : [];
         const relations = relationsRes.success ? relationsRes.data || [] : [];
         
-        // 데이터 흐름에서 연결된 화면들 추가
-        flows.forEach((flow: any) => {
-          if (flow.source_screen_id === screen.screenId && flow.target_screen_id) {
-            const exists = screenList.some((s) => s.screenId === flow.target_screen_id);
-            if (!exists) {
-              screenList.push({
-                screenId: flow.target_screen_id,
-                screenName: flow.target_screen_name || `화면 ${flow.target_screen_id}`,
-                screenCode: "",
-                tableName: "",
-                companyCode: screen.companyCode,
-                isActive: "Y",
-                createdDate: new Date(),
-                updatedDate: new Date(),
-              } as ScreenDefinition);
+        // 데이터 흐름에서 연결된 화면들 추가 (개별 화면 모드에서만 - 그룹 모드에서는 그룹 내 화면만 표시)
+        if (!selectedGroup && screen) {
+          flows.forEach((flow: any) => {
+            if (flow.source_screen_id === screen.screenId && flow.target_screen_id) {
+              const exists = screenList.some((s) => s.screenId === flow.target_screen_id);
+              if (!exists) {
+                screenList.push({
+                  screenId: flow.target_screen_id,
+                  screenName: flow.target_screen_name || `화면 ${flow.target_screen_id}`,
+                  screenCode: "",
+                  tableName: "",
+                  companyCode: screen.companyCode,
+                  isActive: "Y",
+                  createdDate: new Date(),
+                  updatedDate: new Date(),
+                } as ScreenDefinition);
+              }
             }
-          }
-        });
+          });
+        }
 
         // 화면 레이아웃 요약 정보 로드
         const screenIds = screenList.map((s) => s.screenId);
@@ -306,6 +325,13 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             subTablesData = subTablesRes.data as Record<number, ScreenSubTablesData>;
             // 서브 테이블 데이터 저장 (조인 컬럼 정보 포함)
             setSubTablesDataMap(subTablesData);
+            
+            // 전역 메인 테이블 목록 저장 (우선순위 적용용)
+            // 이 목록에 있는 테이블은 서브 테이블로 분류되지 않음
+            const globalMainTablesArr = (subTablesRes as any).globalMainTables as string[] | undefined;
+            if (globalMainTablesArr && Array.isArray(globalMainTablesArr)) {
+              setGlobalMainTables(new Set(globalMainTablesArr));
+            }
           }
         } catch (e) {
           console.error("레이아웃 요약/서브 테이블 로드 실패:", e);
@@ -435,9 +461,27 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           if (rel.table_name) mainTableSet.add(rel.table_name);
         });
         
-        // 서브 테이블 수집 (componentConfig에서 추출된 테이블들)
-        // 서브 테이블은 메인 테이블과 다른 테이블들
-        // 화면별 서브 테이블 매핑도 함께 구축
+        // ============================================================
+        // 테이블 분류 (우선순위: 메인 > 서브)
+        // ============================================================
+        // 메인 테이블 조건:
+        // 1. screen_definitions.table_name (컴포넌트 직접 연결) - 이미 mainTableSet에 추가됨
+        // 2. globalMainTables (WHERE 조건 대상, 마스터-디테일의 디테일 테이블)
+        // 
+        // 서브 테이블 조건:
+        // - 조인(JOIN)으로만 연결된 테이블 (autocomplete 등에서 참조)
+        // - 단, mainTableSet에 있으면 제외 (우선순위: 메인 > 서브)
+        
+        // 1. globalMainTables를 mainTableSet에 먼저 추가 (우선순위 적용)
+        const filterTableSet = new Set<string>(); // 마스터-디테일의 디테일 테이블들
+        globalMainTables.forEach((tableName) => {
+          if (!mainTableSet.has(tableName)) {
+            mainTableSet.add(tableName);
+            filterTableSet.add(tableName);  // 필터 테이블로 분류 (보라색 테두리)
+          }
+        });
+        
+        // 2. 서브 테이블 수집 (mainTableSet에 없는 것만)
         const newScreenSubTableMap: Record<number, string[]> = {};
         
         Object.entries(subTablesData).forEach(([screenIdStr, screenSubData]) => {
@@ -445,11 +489,14 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           const subTableNames: string[] = [];
           
           screenSubData.subTables.forEach((subTable) => {
-            // 메인 테이블에 없는 것만 서브 테이블로 추가
-            if (!mainTableSet.has(subTable.tableName)) {
-              subTableSet.add(subTable.tableName);
-              subTableNames.push(subTable.tableName);
+            // mainTableSet에 있으면 서브 테이블에서 제외 (우선순위: 메인 > 서브)
+            if (mainTableSet.has(subTable.tableName)) {
+              return;
             }
+            
+            // 조인으로만 연결된 테이블 → 서브 테이블
+            subTableSet.add(subTable.tableName);
+            subTableNames.push(subTable.tableName);
           });
           
           if (subTableNames.length > 0) {
@@ -540,10 +587,19 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             isForeignKey: !!col.referenceTable || (col.columnName?.includes("_id") && col.columnName !== "id"),
           }));
 
-          // 여러 화면이 같은 테이블 사용하면 "공통 메인 테이블", 아니면 "메인 테이블"
-          const subLabel = linkedScreens.length > 1 
-            ? `메인 테이블 (${linkedScreens.length}개 화면)`
-            : "메인 테이블";
+          // 테이블 분류에 따른 라벨 결정
+          // 1. 필터 테이블 (마스터-디테일의 디테일): "필터 대상 테이블"
+          // 2. 여러 화면이 같은 테이블 사용: "공통 메인 테이블 (N개 화면)"
+          // 3. 일반 메인 테이블: "메인 테이블"
+          const isFilterTable = filterTableSet.has(tableName);
+          let subLabel: string;
+          if (isFilterTable) {
+            subLabel = "필터 대상 테이블 (마스터-디테일)";
+          } else if (linkedScreens.length > 1) {
+            subLabel = `메인 테이블 (${linkedScreens.length}개 화면)`;
+          } else {
+            subLabel = "메인 테이블";
+          }
 
           // 이 테이블을 참조하는 관계들
           tableNodes.push({
@@ -553,7 +609,8 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             data: {
               label: tableName,
               subLabel: subLabel,
-              isMain: true, // mainTableSet의 모든 테이블은 메인
+              isMain: !isFilterTable, // 필터 테이블은 isMain: false로 설정 (보라색 테두리 표시용)
+              isFilterTable: isFilterTable, // 필터 테이블 여부 표시
               columns: formattedColumns,
               // referencedBy, filterColumns, saveInfos는 styledNodes에서 포커스 상태에 따라 동적으로 설정
             },
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
index 54da7776..22c7af89 100644
--- a/frontend/components/screen/ScreenSettingModal.tsx
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -367,7 +367,7 @@ export function ScreenSettingModal({
 
   return (
     <>
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={isOpen && !showDesignerModal} onOpenChange={onClose}>
       <DialogContent className="flex h-[90vh] max-h-[950px] w-[98vw] max-w-[1600px] flex-col">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle className="flex items-center gap-2 text-lg">
@@ -528,34 +528,30 @@ export function ScreenSettingModal({
       </DialogContent>
     </Dialog>
 
-    {/* ScreenDesigner 전체 화면 모달 */}
-    <Dialog open={showDesignerModal} onOpenChange={setShowDesignerModal}>
-      <DialogContent className="max-w-[98vw] h-[95vh] p-0 overflow-hidden">
-        <DialogTitle className="sr-only">화면 디자이너</DialogTitle>
-        <div className="flex flex-col h-full">
-          <ScreenDesigner
-            selectedScreen={{
-              screenId: currentScreenId,
-              screenCode: `screen_${currentScreenId}`,
-              screenName: currentScreenName,
-              tableName: currentMainTable || "",
-              companyCode: companyCode || "*",
-              description: "",
-              isActive: "Y" as const,
-              createdDate: new Date(),
-              updatedDate: new Date(),
-            }}
-            onBackToList={async () => {
-              setShowDesignerModal(false);
-              // 디자이너에서 저장 후 모달 닫으면 데이터 새로고침
-              await loadData();
-              // 데이터 로드 완료 후 iframe 갱신
-              setIframeKey(prev => prev + 1);
-            }}
-          />
-        </div>
-      </DialogContent>
-    </Dialog>
+    {/* ScreenDesigner 전체 화면 - Dialog 중첩 시 오버레이 컴포지팅으로 깜빡임 발생하여 직접 렌더링 */}
+    {/* ScreenDesigner 자체 SlimToolbar에 "목록으로" 닫기 버튼이 있으므로 별도 X 버튼 불필요 */}
+    {showDesignerModal && (
+      <div className="bg-background fixed inset-0 z-[1000] flex flex-col">
+        <ScreenDesigner
+          selectedScreen={{
+            screenId: currentScreenId,
+            screenCode: `screen_${currentScreenId}`,
+            screenName: currentScreenName,
+            tableName: currentMainTable || "",
+            companyCode: companyCode || "*",
+            description: "",
+            isActive: "Y" as const,
+            createdDate: new Date(),
+            updatedDate: new Date(),
+          }}
+          onBackToList={async () => {
+            setShowDesignerModal(false);
+            await loadData();
+            setIframeKey(prev => prev + 1);
+          }}
+        />
+      </div>
+    )}
 
     {/* TableSettingModal */}
     {tableSettingTarget && (
@@ -736,7 +732,12 @@ function TableColumnAccordion({
         if (allTables.length === 0) {
           const tablesResult = await tableManagementApi.getTableList();
           if (tablesResult.success && tablesResult.data) {
-            setAllTables(tablesResult.data);
+            // 중복 테이블 제거 (tableName 기준)
+            const uniqueTables = tablesResult.data.filter(
+              (table, index, self) =>
+                index === self.findIndex((t) => t.tableName === table.tableName)
+            );
+            setAllTables(uniqueTables);
           }
         }
       } catch (error) {
@@ -1351,9 +1352,9 @@ function JoinSettingEditor({
               <CommandList>
                 <CommandEmpty className="text-xs py-2">테이블을 찾을 수 없습니다.</CommandEmpty>
                 <CommandGroup>
-                  {allTables.map(t => (
+                  {allTables.map((t, idx) => (
                     <CommandItem
-                      key={t.tableName}
+                      key={`${t.tableName}-${idx}`}
                       value={t.displayName || t.tableName}
                       onSelect={() => {
                         setEditingJoin({ ...editingJoin, referenceTable: t.tableName, referenceColumn: "", displayColumn: "" });
diff --git a/frontend/components/screen/TableTypeSelector.tsx b/frontend/components/screen/TableTypeSelector.tsx
index 5da49312..c6757d92 100644
--- a/frontend/components/screen/TableTypeSelector.tsx
+++ b/frontend/components/screen/TableTypeSelector.tsx
@@ -174,30 +174,10 @@ export default function TableTypeSelector({
     }
   };
 
-  // 입력 타입 변경
-  const handleInputTypeChange = async (columnName: string, inputType: "direct" | "auto") => {
-    try {
-      // 현재 컬럼 정보 가져오기
-      const currentColumn = columns.find((col) => col.columnName === columnName);
-      if (!currentColumn) return;
-
-      // 웹 타입과 함께 입력 타입 업데이트
-      await tableTypeApi.setColumnWebType(
-        selectedTable,
-        columnName,
-        currentColumn.webType || "text",
-        undefined, // detailSettings
-        inputType,
-      );
-
-      // 로컬 상태 업데이트
-      setColumns((prev) => prev.map((col) => (col.columnName === columnName ? { ...col, inputType } : col)));
-
-      // console.log(`컬럼 ${columnName}의 입력 타입을 ${inputType}로 변경했습니다.`);
-    } catch (error) {
-      // console.error("입력 타입 변경 실패:", error);
-      alert("입력 타입 설정에 실패했습니다. 다시 시도해주세요.");
-    }
+  // 입력 타입 변경 (로컬 상태만 - DB에 저장하지 않음)
+  const handleInputTypeChange = (columnName: string, inputType: "direct" | "auto") => {
+    // 로컬 상태만 업데이트 (DB에는 저장하지 않음 - inputType은 화면 렌더링용)
+    setColumns((prev) => prev.map((col) => (col.columnName === columnName ? { ...col, inputType } : col)));
   };
 
   const filteredTables = tables.filter((table) => table.displayName.toLowerCase().includes(searchTerm.toLowerCase()));
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index bade282b..8d6df989 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -51,13 +51,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 }) => {
   // 🔧 component가 없는 경우 방어 처리
   if (!component) {
-    return (
-      <div className="p-4 text-sm text-muted-foreground">
-        컴포넌트 정보를 불러올 수 없습니다.
-      </div>
-    );
+    return <div className="text-muted-foreground p-4 text-sm">컴포넌트 정보를 불러올 수 없습니다.</div>;
   }
-  
+
   // 🔧 component에서 직접 읽기 (useMemo 제거)
   const config = component.componentConfig || {};
   const currentAction = component.componentConfig?.action || {};
@@ -122,7 +118,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [modalActionTargetTable, setModalActionTargetTable] = useState<string | null>(null);
   const [modalActionSourceColumns, setModalActionSourceColumns] = useState<Array<{ name: string; label: string }>>([]);
   const [modalActionTargetColumns, setModalActionTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [modalActionFieldMappings, setModalActionFieldMappings] = useState<Array<{ sourceField: string; targetField: string }>>([]);
+  const [modalActionFieldMappings, setModalActionFieldMappings] = useState<
+    Array<{ sourceField: string; targetField: string }>
+  >([]);
   const [modalFieldMappingSourceOpen, setModalFieldMappingSourceOpen] = useState<Record<number, boolean>>({});
   const [modalFieldMappingTargetOpen, setModalFieldMappingTargetOpen] = useState<Record<number, boolean>>({});
   const [modalFieldMappingSourceSearch, setModalFieldMappingSourceSearch] = useState<Record<number, string>>({});
@@ -353,7 +351,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   useEffect(() => {
     const actionType = config.action?.type;
     if (actionType !== "modal") return;
-    
+
     const autoDetect = config.action?.autoDetectDataSource;
     if (!autoDetect) {
       // 데이터 전달이 비활성화되면 상태 초기화
@@ -363,19 +361,19 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       setModalActionTargetColumns([]);
       return;
     }
-    
+
     const targetScreenId = config.action?.targetScreenId;
     if (!targetScreenId) return;
-    
+
     const loadModalActionMappingData = async () => {
       // 1. 소스 테이블 감지 (현재 화면)
       let sourceTableName: string | null = currentTableName || null;
-      
+
       // allComponents에서 분할패널/테이블리스트/통합목록 감지
       for (const comp of allComponents) {
         const compType = comp.componentType || (comp as any).componentConfig?.type;
         const compConfig = (comp as any).componentConfig || {};
-        
+
         if (compType === "split-panel-layout" || compType === "screen-split-panel") {
           sourceTableName = compConfig.leftPanel?.tableName || compConfig.tableName || null;
           if (sourceTableName) break;
@@ -389,9 +387,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           if (sourceTableName) break;
         }
       }
-      
+
       setModalActionSourceTable(sourceTableName);
-      
+
       // 2. 대상 화면의 테이블 조회
       let targetTableName: string | null = null;
       try {
@@ -405,9 +403,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       } catch (error) {
         console.error("대상 화면 정보 로드 실패:", error);
       }
-      
+
       setModalActionTargetTable(targetTableName);
-      
+
       // 3. 소스 테이블 컬럼 로드
       if (sourceTableName) {
         try {
@@ -416,7 +414,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             let columnData = response.data.data;
             if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
             if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-            
+
             if (Array.isArray(columnData)) {
               const columns = columnData.map((col: any) => ({
                 name: col.name || col.columnName,
@@ -429,7 +427,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           console.error("소스 테이블 컬럼 로드 실패:", error);
         }
       }
-      
+
       // 4. 대상 테이블 컬럼 로드
       if (targetTableName) {
         try {
@@ -438,7 +436,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             let columnData = response.data.data;
             if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
             if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-            
+
             if (Array.isArray(columnData)) {
               const columns = columnData.map((col: any) => ({
                 name: col.name || col.columnName,
@@ -451,7 +449,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           console.error("대상 테이블 컬럼 로드 실패:", error);
         }
       }
-      
+
       // 5. 기존 필드 매핑 로드 또는 자동 매핑 생성
       const existingMappings = config.action?.fieldMappings || [];
       if (existingMappings.length > 0) {
@@ -461,10 +459,16 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         setModalActionFieldMappings([]); // 빈 배열 = 자동 매핑
       }
     };
-    
+
     loadModalActionMappingData();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.action?.type, config.action?.autoDetectDataSource, config.action?.targetScreenId, currentTableName, allComponents]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    config.action?.type,
+    config.action?.autoDetectDataSource,
+    config.action?.targetScreenId,
+    currentTableName,
+    allComponents,
+  ]);
 
   // 🆕 현재 테이블 컬럼 로드 (그룹화 컬럼 선택용)
   useEffect(() => {
@@ -818,21 +822,26 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <SelectItem value="navigate">페이지 이동</SelectItem>
             <SelectItem value="modal">모달 열기</SelectItem>
             <SelectItem value="transferData">데이터 전달</SelectItem>
-            
+
             {/* 엑셀 관련 */}
             <SelectItem value="excel_download">엑셀 다운로드</SelectItem>
             <SelectItem value="excel_upload">엑셀 업로드</SelectItem>
-            
+
             {/* 고급 기능 */}
             <SelectItem value="quickInsert">즉시 저장</SelectItem>
             <SelectItem value="control">제어 흐름</SelectItem>
-            
+
             {/* 특수 기능 (필요 시 사용) */}
             <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
             <SelectItem value="operation_control">운행알림 및 종료</SelectItem>
-            
-            {/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김
+
+            {/* 이벤트 버스 */}
+            <SelectItem value="event">이벤트 발송</SelectItem>
+
+            {/* 복사 */}
             <SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
+
+            {/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김
             <SelectItem value="openRelatedModal">연관 데이터 버튼 모달 열기</SelectItem>
             <SelectItem value="openModalWithData">(deprecated) 데이터 전달 + 모달 열기</SelectItem>
             <SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
@@ -980,10 +989,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               }}
             />
             <div className="flex flex-col">
-              <Label htmlFor="auto-detect-data-source" className="text-sm cursor-pointer">
+              <Label htmlFor="auto-detect-data-source" className="cursor-pointer text-sm">
                 선택된 데이터 전달
               </Label>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-muted-foreground text-xs">
                 TableList/SplitPanel에서 선택된 데이터를 모달에 자동으로 전달합니다
               </p>
             </div>
@@ -991,11 +1000,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
           {/* 🆕 필드 매핑 UI (데이터 전달 활성화 + 테이블이 다른 경우) */}
           {component.componentConfig?.action?.autoDetectDataSource === true && (
-            <div className="mt-4 space-y-3 rounded-lg border bg-background p-3">
+            <div className="bg-background mt-4 space-y-3 rounded-lg border p-3">
               {/* 테이블 정보 표시 */}
               <div className="flex items-center justify-between text-xs">
                 <div className="flex items-center gap-2">
-                  <Database className="h-3 w-3 text-muted-foreground" />
+                  <Database className="text-muted-foreground h-3 w-3" />
                   <span className="text-muted-foreground">소스:</span>
                   <span className="font-medium">{modalActionSourceTable || "감지 중..."}</span>
                 </div>
@@ -1007,171 +1016,210 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               </div>
 
               {/* 테이블이 같으면 자동 매핑 안내 */}
-              {modalActionSourceTable && modalActionTargetTable && modalActionSourceTable === modalActionTargetTable && (
-                <div className="rounded-md bg-green-50 p-2 text-xs text-green-700 dark:bg-green-950/30 dark:text-green-400">
-                  동일한 테이블입니다. 컬럼명이 같은 필드는 자동으로 매핑됩니다.
-                </div>
-              )}
+              {modalActionSourceTable &&
+                modalActionTargetTable &&
+                modalActionSourceTable === modalActionTargetTable && (
+                  <div className="rounded-md bg-green-50 p-2 text-xs text-green-700 dark:bg-green-950/30 dark:text-green-400">
+                    동일한 테이블입니다. 컬럼명이 같은 필드는 자동으로 매핑됩니다.
+                  </div>
+                )}
 
               {/* 테이블이 다르면 필드 매핑 UI 표시 */}
-              {modalActionSourceTable && modalActionTargetTable && modalActionSourceTable !== modalActionTargetTable && (
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <Label className="text-xs font-medium">필드 매핑</Label>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="h-6 text-xs"
-                      onClick={() => {
-                        const newMappings = [...(component.componentConfig?.action?.fieldMappings || []), { sourceField: "", targetField: "" }];
-                        setModalActionFieldMappings(newMappings);
-                        onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                      }}
-                    >
-                      <Plus className="mr-1 h-3 w-3" />
-                      매핑 추가
-                    </Button>
-                  </div>
-
-                  {(component.componentConfig?.action?.fieldMappings || []).length === 0 && (
-                    <p className="text-xs text-muted-foreground">
-                      컬럼명이 다른 경우 매핑을 추가하세요. 매핑이 없으면 동일 컬럼명만 전달됩니다.
-                    </p>
-                  )}
-
-                  {(component.componentConfig?.action?.fieldMappings || []).map((mapping: any, index: number) => (
-                    <div key={index} className="flex items-center gap-2">
-                      {/* 소스 필드 선택 */}
-                      <Popover
-                        open={modalFieldMappingSourceOpen[index] || false}
-                        onOpenChange={(open) => setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: open }))}
-                      >
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
-                            {mapping.sourceField
-                              ? modalActionSourceColumns.find((c) => c.name === mapping.sourceField)?.label || mapping.sourceField
-                              : "소스 컬럼 선택"}
-                            <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[200px] p-0" align="start">
-                          <Command>
-                            <CommandInput
-                              placeholder="컬럼 검색..."
-                              value={modalFieldMappingSourceSearch[index] || ""}
-                              onValueChange={(val) => setModalFieldMappingSourceSearch((prev) => ({ ...prev, [index]: val }))}
-                            />
-                            <CommandList>
-                              <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
-                              <CommandGroup>
-                                {modalActionSourceColumns
-                                  .filter((col) =>
-                                    col.name.toLowerCase().includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()) ||
-                                    col.label.toLowerCase().includes((modalFieldMappingSourceSearch[index] || "").toLowerCase())
-                                  )
-                                  .map((col) => (
-                                    <CommandItem
-                                      key={col.name}
-                                      value={col.name}
-                                      onSelect={() => {
-                                        const newMappings = [...(component.componentConfig?.action?.fieldMappings || [])];
-                                        newMappings[index] = { ...newMappings[index], sourceField: col.name };
-                                        setModalActionFieldMappings(newMappings);
-                                        onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                                        setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: false }));
-                                      }}
-                                    >
-                                      <Check
-                                        className={cn("mr-2 h-4 w-4", mapping.sourceField === col.name ? "opacity-100" : "opacity-0")}
-                                      />
-                                      <div className="flex flex-col">
-                                        <span className="text-xs font-medium">{col.label}</span>
-                                        <span className="text-[10px] text-muted-foreground">{col.name}</span>
-                                      </div>
-                                    </CommandItem>
-                                  ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-
-                      <span className="text-xs text-muted-foreground">→</span>
-
-                      {/* 대상 필드 선택 */}
-                      <Popover
-                        open={modalFieldMappingTargetOpen[index] || false}
-                        onOpenChange={(open) => setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: open }))}
-                      >
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
-                            {mapping.targetField
-                              ? modalActionTargetColumns.find((c) => c.name === mapping.targetField)?.label || mapping.targetField
-                              : "대상 컬럼 선택"}
-                            <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[200px] p-0" align="start">
-                          <Command>
-                            <CommandInput
-                              placeholder="컬럼 검색..."
-                              value={modalFieldMappingTargetSearch[index] || ""}
-                              onValueChange={(val) => setModalFieldMappingTargetSearch((prev) => ({ ...prev, [index]: val }))}
-                            />
-                            <CommandList>
-                              <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
-                              <CommandGroup>
-                                {modalActionTargetColumns
-                                  .filter((col) =>
-                                    col.name.toLowerCase().includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()) ||
-                                    col.label.toLowerCase().includes((modalFieldMappingTargetSearch[index] || "").toLowerCase())
-                                  )
-                                  .map((col) => (
-                                    <CommandItem
-                                      key={col.name}
-                                      value={col.name}
-                                      onSelect={() => {
-                                        const newMappings = [...(component.componentConfig?.action?.fieldMappings || [])];
-                                        newMappings[index] = { ...newMappings[index], targetField: col.name };
-                                        setModalActionFieldMappings(newMappings);
-                                        onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                                        setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: false }));
-                                      }}
-                                    >
-                                      <Check
-                                        className={cn("mr-2 h-4 w-4", mapping.targetField === col.name ? "opacity-100" : "opacity-0")}
-                                      />
-                                      <div className="flex flex-col">
-                                        <span className="text-xs font-medium">{col.label}</span>
-                                        <span className="text-[10px] text-muted-foreground">{col.name}</span>
-                                      </div>
-                                    </CommandItem>
-                                  ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-
-                      {/* 삭제 버튼 */}
+              {modalActionSourceTable &&
+                modalActionTargetTable &&
+                modalActionSourceTable !== modalActionTargetTable && (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">필드 매핑</Label>
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="outline"
                         size="sm"
-                        className="h-7 w-7 p-0 text-destructive hover:bg-destructive/10"
+                        className="h-6 text-xs"
                         onClick={() => {
-                          const newMappings = (component.componentConfig?.action?.fieldMappings || []).filter((_: any, i: number) => i !== index);
+                          const newMappings = [
+                            ...(component.componentConfig?.action?.fieldMappings || []),
+                            { sourceField: "", targetField: "" },
+                          ];
                           setModalActionFieldMappings(newMappings);
                           onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
                         }}
                       >
-                        <X className="h-3 w-3" />
+                        <Plus className="mr-1 h-3 w-3" />
+                        매핑 추가
                       </Button>
                     </div>
-                  ))}
-                </div>
-              )}
+
+                    {(component.componentConfig?.action?.fieldMappings || []).length === 0 && (
+                      <p className="text-muted-foreground text-xs">
+                        컬럼명이 다른 경우 매핑을 추가하세요. 매핑이 없으면 동일 컬럼명만 전달됩니다.
+                      </p>
+                    )}
+
+                    {(component.componentConfig?.action?.fieldMappings || []).map((mapping: any, index: number) => (
+                      <div key={index} className="flex items-center gap-2">
+                        {/* 소스 필드 선택 */}
+                        <Popover
+                          open={modalFieldMappingSourceOpen[index] || false}
+                          onOpenChange={(open) =>
+                            setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: open }))
+                          }
+                        >
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
+                              {mapping.sourceField
+                                ? modalActionSourceColumns.find((c) => c.name === mapping.sourceField)?.label ||
+                                  mapping.sourceField
+                                : "소스 컬럼 선택"}
+                              <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[200px] p-0" align="start">
+                            <Command>
+                              <CommandInput
+                                placeholder="컬럼 검색..."
+                                value={modalFieldMappingSourceSearch[index] || ""}
+                                onValueChange={(val) =>
+                                  setModalFieldMappingSourceSearch((prev) => ({ ...prev, [index]: val }))
+                                }
+                              />
+                              <CommandList>
+                                <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                <CommandGroup>
+                                  {modalActionSourceColumns
+                                    .filter(
+                                      (col) =>
+                                        col.name
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()) ||
+                                        col.label
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()),
+                                    )
+                                    .map((col) => (
+                                      <CommandItem
+                                        key={col.name}
+                                        value={col.name}
+                                        onSelect={() => {
+                                          const newMappings = [
+                                            ...(component.componentConfig?.action?.fieldMappings || []),
+                                          ];
+                                          newMappings[index] = { ...newMappings[index], sourceField: col.name };
+                                          setModalActionFieldMappings(newMappings);
+                                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                                          setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: false }));
+                                        }}
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            mapping.sourceField === col.name ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="text-xs font-medium">{col.label}</span>
+                                          <span className="text-muted-foreground text-[10px]">{col.name}</span>
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+
+                        <span className="text-muted-foreground text-xs">→</span>
+
+                        {/* 대상 필드 선택 */}
+                        <Popover
+                          open={modalFieldMappingTargetOpen[index] || false}
+                          onOpenChange={(open) =>
+                            setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: open }))
+                          }
+                        >
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
+                              {mapping.targetField
+                                ? modalActionTargetColumns.find((c) => c.name === mapping.targetField)?.label ||
+                                  mapping.targetField
+                                : "대상 컬럼 선택"}
+                              <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[200px] p-0" align="start">
+                            <Command>
+                              <CommandInput
+                                placeholder="컬럼 검색..."
+                                value={modalFieldMappingTargetSearch[index] || ""}
+                                onValueChange={(val) =>
+                                  setModalFieldMappingTargetSearch((prev) => ({ ...prev, [index]: val }))
+                                }
+                              />
+                              <CommandList>
+                                <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                <CommandGroup>
+                                  {modalActionTargetColumns
+                                    .filter(
+                                      (col) =>
+                                        col.name
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()) ||
+                                        col.label
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()),
+                                    )
+                                    .map((col) => (
+                                      <CommandItem
+                                        key={col.name}
+                                        value={col.name}
+                                        onSelect={() => {
+                                          const newMappings = [
+                                            ...(component.componentConfig?.action?.fieldMappings || []),
+                                          ];
+                                          newMappings[index] = { ...newMappings[index], targetField: col.name };
+                                          setModalActionFieldMappings(newMappings);
+                                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                                          setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: false }));
+                                        }}
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            mapping.targetField === col.name ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="text-xs font-medium">{col.label}</span>
+                                          <span className="text-muted-foreground text-[10px]">{col.name}</span>
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+
+                        {/* 삭제 버튼 */}
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="text-destructive hover:bg-destructive/10 h-7 w-7 p-0"
+                          onClick={() => {
+                            const newMappings = (component.componentConfig?.action?.fieldMappings || []).filter(
+                              (_: any, i: number) => i !== index,
+                            );
+                            setModalActionFieldMappings(newMappings);
+                            onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                          }}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
             </div>
           )}
         </div>
@@ -1180,9 +1228,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
       {/* 🆕 데이터 전달 + 모달 열기 액션 설정 (deprecated - 하위 호환성 유지) */}
       {component.componentConfig?.action?.type === "openModalWithData" && (
         <div className="mt-4 space-y-4 rounded-lg border bg-amber-50 p-4 dark:bg-amber-950/20">
-          <h4 className="text-sm font-medium text-foreground">데이터 전달 + 모달 설정</h4>
+          <h4 className="text-foreground text-sm font-medium">데이터 전달 + 모달 설정</h4>
           <p className="text-xs text-amber-600 dark:text-amber-400">
-            이 옵션은 "모달 열기" 액션으로 통합되었습니다. 새 개발에서는 "모달 열기" + "선택된 데이터 전달"을 사용하세요.
+            이 옵션은 "모달 열기" 액션으로 통합되었습니다. 새 개발에서는 "모달 열기" + "선택된 데이터 전달"을
+            사용하세요.
           </p>
 
           {/* 🆕 블록 기반 제목 빌더 */}
@@ -3536,6 +3585,104 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         />
       )}
 
+      {/* 🆕 이벤트 발송 액션 설정 */}
+      {localInputs.actionType === "event" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">이벤트 발송 설정</h4>
+          <p className="text-muted-foreground text-xs">
+            버튼 클릭 시 V2 이벤트 버스를 통해 이벤트를 발송합니다. 다른 컴포넌트나 서비스에서 이 이벤트를 수신하여
+            처리할 수 있습니다.
+          </p>
+
+          <div>
+            <Label htmlFor="event-name">이벤트 이름</Label>
+            <Select
+              value={component.componentConfig?.action?.eventConfig?.eventName || ""}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.eventConfig.eventName", value);
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="이벤트 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SCHEDULE_GENERATE_REQUEST">스케줄 자동 생성 요청</SelectItem>
+                <SelectItem value="TABLE_REFRESH">테이블 새로고침</SelectItem>
+                <SelectItem value="DATA_CHANGED">데이터 변경 알림</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {component.componentConfig?.action?.eventConfig?.eventName === "SCHEDULE_GENERATE_REQUEST" && (
+            <div className="border-primary/20 space-y-3 border-l-2 pl-4">
+              <div>
+                <Label>스케줄 유형</Label>
+                <Select
+                  value={component.componentConfig?.action?.eventConfig?.eventPayload?.scheduleType || "PRODUCTION"}
+                  onValueChange={(value) => {
+                    onUpdateProperty("componentConfig.action.eventConfig.eventPayload.scheduleType", value);
+                  }}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="스케줄 유형 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="PRODUCTION">생산 스케줄</SelectItem>
+                    <SelectItem value="DELIVERY">배송 스케줄</SelectItem>
+                    <SelectItem value="MAINTENANCE">정비 스케줄</SelectItem>
+                    <SelectItem value="CUSTOM">커스텀</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label>리드타임 (일)</Label>
+                <Input
+                  type="number"
+                  className="h-8 text-xs"
+                  placeholder="3"
+                  value={
+                    component.componentConfig?.action?.eventConfig?.eventPayload?.config?.scheduling?.leadTimeDays || 3
+                  }
+                  onChange={(e) => {
+                    onUpdateProperty(
+                      "componentConfig.action.eventConfig.eventPayload.config.scheduling.leadTimeDays",
+                      parseInt(e.target.value) || 3,
+                    );
+                  }}
+                />
+              </div>
+
+              <div>
+                <Label>일일 최대 생산량</Label>
+                <Input
+                  type="number"
+                  className="h-8 text-xs"
+                  placeholder="100"
+                  value={
+                    component.componentConfig?.action?.eventConfig?.eventPayload?.config?.scheduling
+                      ?.maxDailyCapacity || 100
+                  }
+                  onChange={(e) => {
+                    onUpdateProperty(
+                      "componentConfig.action.eventConfig.eventPayload.config.scheduling.maxDailyCapacity",
+                      parseInt(e.target.value) || 100,
+                    );
+                  }}
+                />
+              </div>
+
+              <div className="rounded-md bg-blue-50 p-2 dark:bg-blue-950/20">
+                <p className="text-xs text-blue-800 dark:text-blue-200">
+                  <strong>동작 방식:</strong> 테이블에서 선택된 데이터를 기반으로 스케줄을 자동 생성합니다. 생성 전
+                  미리보기 확인 다이얼로그가 표시됩니다.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
       {/* 🆕 행 선택 시에만 활성화 설정 */}
       <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
         <h4 className="text-foreground text-sm font-medium">행 선택 활성화 조건</h4>
diff --git a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
index 197b9759..1cbad525 100644
--- a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
@@ -173,6 +173,8 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
 
     onUpdateProperty("webTypeConfig.dataflowConfig", {
       ...dataflowConfig,
+      // 🔧 controlMode 설정 (플로우 제어가 있으면 "flow", 없으면 "none")
+      controlMode: firstValidControl ? "flow" : "none",
       // 기존 형식 (하위 호환성)
       selectedDiagramId: firstValidControl?.flowId || null,
       selectedRelationshipId: null,
diff --git a/frontend/components/screen/modals/KeyboardShortcutsModal.tsx b/frontend/components/screen/modals/KeyboardShortcutsModal.tsx
new file mode 100644
index 00000000..0f122c53
--- /dev/null
+++ b/frontend/components/screen/modals/KeyboardShortcutsModal.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+interface ShortcutItem {
+  keys: string[];
+  description: string;
+}
+
+interface ShortcutGroup {
+  title: string;
+  shortcuts: ShortcutItem[];
+}
+
+const shortcutGroups: ShortcutGroup[] = [
+  {
+    title: "기본 조작",
+    shortcuts: [
+      { keys: ["Ctrl", "S"], description: "레이아웃 저장" },
+      { keys: ["Ctrl", "Z"], description: "실행취소" },
+      { keys: ["Ctrl", "Y"], description: "다시실행" },
+      { keys: ["Ctrl", "A"], description: "전체 선택" },
+      { keys: ["Delete"], description: "선택 삭제" },
+      { keys: ["Esc"], description: "선택 해제" },
+    ],
+  },
+  {
+    title: "복사/붙여넣기",
+    shortcuts: [
+      { keys: ["Ctrl", "C"], description: "컴포넌트 복사" },
+      { keys: ["Ctrl", "V"], description: "컴포넌트 붙여넣기" },
+    ],
+  },
+  {
+    title: "그룹 관리",
+    shortcuts: [
+      { keys: ["Ctrl", "G"], description: "그룹 생성" },
+      { keys: ["Ctrl", "Shift", "G"], description: "그룹 해제" },
+    ],
+  },
+  {
+    title: "이동 (Nudge)",
+    shortcuts: [
+      { keys: ["Arrow"], description: "1px 이동" },
+      { keys: ["Shift", "Arrow"], description: "10px 이동" },
+    ],
+  },
+  {
+    title: "정렬 (다중 선택 시)",
+    shortcuts: [
+      { keys: ["Alt", "L"], description: "좌측 정렬" },
+      { keys: ["Alt", "R"], description: "우측 정렬" },
+      { keys: ["Alt", "C"], description: "가로 중앙 정렬" },
+      { keys: ["Alt", "T"], description: "상단 정렬" },
+      { keys: ["Alt", "B"], description: "하단 정렬" },
+      { keys: ["Alt", "M"], description: "세로 중앙 정렬" },
+    ],
+  },
+  {
+    title: "배분/크기 (다중 선택 시)",
+    shortcuts: [
+      { keys: ["Alt", "H"], description: "가로 균등 배분" },
+      { keys: ["Alt", "V"], description: "세로 균등 배분" },
+      { keys: ["Alt", "W"], description: "너비 맞추기" },
+      { keys: ["Alt", "E"], description: "높이 맞추기" },
+    ],
+  },
+  {
+    title: "보기/탐색",
+    shortcuts: [
+      { keys: ["Space", "Drag"], description: "캔버스 팬(이동)" },
+      { keys: ["Wheel"], description: "줌 인/아웃" },
+      { keys: ["P"], description: "패널 열기/닫기" },
+      { keys: ["Alt", "Shift", "L"], description: "라벨 일괄 표시/숨기기" },
+      { keys: ["?"], description: "단축키 도움말" },
+    ],
+  },
+];
+
+interface KeyboardShortcutsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const KeyboardShortcutsModal: React.FC<KeyboardShortcutsModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">
+            키보드 단축키
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            화면 디자이너에서 사용할 수 있는 단축키 목록입니다. Mac에서는 Ctrl 대신 Cmd를 사용합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          {shortcutGroups.map((group) => (
+            <div key={group.title}>
+              <h3 className="text-sm font-semibold text-foreground mb-2">
+                {group.title}
+              </h3>
+              <div className="space-y-1">
+                {group.shortcuts.map((shortcut, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center justify-between rounded-md px-3 py-1.5 hover:bg-muted/50 transition-colors"
+                  >
+                    <span className="text-sm text-muted-foreground">
+                      {shortcut.description}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.map((key, kidx) => (
+                        <React.Fragment key={kidx}>
+                          {kidx > 0 && (
+                            <span className="text-xs text-muted-foreground">+</span>
+                          )}
+                          <kbd className="inline-flex h-6 min-w-[24px] items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-xs text-muted-foreground shadow-sm">
+                            {key}
+                          </kbd>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index 8f055bc3..9464a204 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -80,7 +80,7 @@ export function ComponentsPanel({
       "textarea-basic",
       // V2 컴포넌트로 대체됨
       "image-widget", // → V2Media (image)
-      "file-upload", // → V2Media (file)
+      // "file-upload", // 🆕 레거시 컴포넌트 노출 (안정적인 파일 업로드)
       "entity-search-input", // → V2Select (entity 모드)
       "autocomplete-search-input", // → V2Select (autocomplete 모드)
       // DataFlow 전용 (일반 화면에서 불필요)
diff --git a/frontend/components/screen/panels/TablesPanel.tsx b/frontend/components/screen/panels/TablesPanel.tsx
index 480222a6..12dcc19a 100644
--- a/frontend/components/screen/panels/TablesPanel.tsx
+++ b/frontend/components/screen/panels/TablesPanel.tsx
@@ -431,7 +431,8 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 }
 
                 return (
-                  <div key={joinTable.tableName} className="space-y-1">
+                  // 엔티티 조인 테이블에 고유 접두사 추가 (메인 테이블과 키 중복 방지)
+                  <div key={`entity-join-${joinTable.tableName}`} className="space-y-1">
                     {/* 조인 테이블 헤더 */}
                     <div
                       className="flex cursor-pointer items-center justify-between rounded-md bg-cyan-50 p-2 hover:bg-cyan-100"
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index be0d265b..cb6547c5 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -208,17 +208,14 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
     if (componentId?.startsWith("v2-")) {
       const v2ConfigPanels: Record<string, React.FC<{ config: any; onChange: (config: any) => void }>> = {
         "v2-input": require("@/components/v2/config-panels/V2InputConfigPanel").V2InputConfigPanel,
-        "v2-select": require("@/components/v2/config-panels/V2SelectConfigPanel")
-          .V2SelectConfigPanel,
+        "v2-select": require("@/components/v2/config-panels/V2SelectConfigPanel").V2SelectConfigPanel,
         "v2-date": require("@/components/v2/config-panels/V2DateConfigPanel").V2DateConfigPanel,
         "v2-list": require("@/components/v2/config-panels/V2ListConfigPanel").V2ListConfigPanel,
-        "v2-layout": require("@/components/v2/config-panels/V2LayoutConfigPanel")
-          .V2LayoutConfigPanel,
+        "v2-layout": require("@/components/v2/config-panels/V2LayoutConfigPanel").V2LayoutConfigPanel,
         "v2-group": require("@/components/v2/config-panels/V2GroupConfigPanel").V2GroupConfigPanel,
         "v2-media": require("@/components/v2/config-panels/V2MediaConfigPanel").V2MediaConfigPanel,
         "v2-biz": require("@/components/v2/config-panels/V2BizConfigPanel").V2BizConfigPanel,
-        "v2-hierarchy": require("@/components/v2/config-panels/V2HierarchyConfigPanel")
-          .V2HierarchyConfigPanel,
+        "v2-hierarchy": require("@/components/v2/config-panels/V2HierarchyConfigPanel").V2HierarchyConfigPanel,
       };
 
       const V2ConfigPanel = v2ConfigPanels[componentId];
@@ -263,6 +260,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           definitionName: definition.name,
           hasConfigPanel: !!definition.configPanel,
           currentConfig,
+          defaultSort: currentConfig?.defaultSort, // 🔍 defaultSort 확인
         });
 
         // 🔧 ConfigPanelWrapper를 인라인 함수 대신 직접 JSX 반환 (리마운트 방지)
@@ -822,8 +820,16 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
               <div className="space-y-1">
                 <Label className="text-xs">라벨 텍스트</Label>
                 <Input
-                  value={selectedComponent.style?.labelText || selectedComponent.label || ""}
-                  onChange={(e) => handleUpdate("style.labelText", e.target.value)}
+                  value={
+                    selectedComponent.style?.labelText !== undefined
+                      ? selectedComponent.style.labelText
+                      : selectedComponent.label || selectedComponent.componentConfig?.label || ""
+                  }
+                  onChange={(e) => {
+                    handleUpdate("style.labelText", e.target.value);
+                    handleUpdate("label", e.target.value); // label도 함께 업데이트
+                  }}
+                  placeholder="라벨을 입력하세요 (비우면 라벨 없음)"
                   className="h-6 w-full px-2 py-0 text-xs"
                 />
               </div>
@@ -857,8 +863,20 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                 </div>
                 <div className="flex items-center space-x-2 pt-5">
                   <Checkbox
-                    checked={selectedComponent.style?.labelDisplay !== false}
-                    onCheckedChange={(checked) => handleUpdate("style.labelDisplay", checked)}
+                    checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
+                    onCheckedChange={(checked) => {
+                      const boolValue = checked === true;
+                      // 🔧 "필수"처럼 직접 경로로 업데이트! (style 객체 전체 덮어쓰기 방지)
+                      handleUpdate("style.labelDisplay", boolValue);
+                      handleUpdate("labelDisplay", boolValue);
+                      // labelText도 설정 (처음 켤 때 라벨 텍스트가 없을 수 있음)
+                      if (boolValue && !selectedComponent.style?.labelText) {
+                        const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
+                        if (labelValue) {
+                          handleUpdate("style.labelText", labelValue);
+                        }
+                      }
+                    }}
                     className="h-4 w-4"
                   />
                   <Label className="text-xs">표시</Label>
@@ -868,9 +886,9 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           </Collapsible>
         )}
 
-        {/* 옵션 */}
+        {/* 옵션 - 입력 필드에서는 항상 표시, 기타 컴포넌트는 속성이 정의된 경우만 표시 */}
         <div className="grid grid-cols-2 gap-2">
-          {widget.required !== undefined && (
+          {(isInputField || widget.required !== undefined) && (
             <div className="flex items-center space-x-2">
               <Checkbox
                 checked={widget.required === true || selectedComponent.componentConfig?.required === true}
@@ -883,7 +901,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
               <Label className="text-xs">필수</Label>
             </div>
           )}
-          {widget.readonly !== undefined && (
+          {(isInputField || widget.readonly !== undefined) && (
             <div className="flex items-center space-x-2">
               <Checkbox
                 checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
@@ -896,7 +914,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
               <Label className="text-xs">읽기전용</Label>
             </div>
           )}
-          {/* 숨김 옵션 */}
+          {/* 숨김 옵션 - 모든 컴포넌트에서 표시 */}
           <div className="flex items-center space-x-2">
             <Checkbox
               checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
@@ -943,8 +961,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
     }
 
     // 🆕 3.5. V2 컴포넌트 - 반드시 다른 체크보다 먼저 처리
-    const v2ComponentType =
-      (selectedComponent as any).componentType || selectedComponent.componentConfig?.type || "";
+    const v2ComponentType = (selectedComponent as any).componentType || selectedComponent.componentConfig?.type || "";
     if (v2ComponentType.startsWith("v2-")) {
       const configPanel = renderComponentConfigPanel();
       if (configPanel) {
@@ -1055,8 +1072,15 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
             allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
             currentComponent={selectedComponent} // 🆕 현재 컴포넌트 정보
             onChange={(newConfig) => {
+              console.log("🔧 [V2PropertiesPanel] DynamicConfigPanel onChange:", {
+                componentId: selectedComponent.id,
+                newConfigKeys: Object.keys(newConfig),
+                defaultSort: newConfig.defaultSort,
+                newConfig,
+              });
               // 개별 속성별로 업데이트하여 다른 속성과의 충돌 방지
               Object.entries(newConfig).forEach(([key, value]) => {
+                console.log(`   -> handleUpdate: componentConfig.${key} =`, value);
                 handleUpdate(`componentConfig.${key}`, value);
               });
             }}
diff --git a/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx
index f59171d1..e83c17f6 100644
--- a/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/SelectTypeConfigPanel.tsx
@@ -5,6 +5,7 @@ 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Plus, X } from "lucide-react";
 import { SelectTypeConfig } from "@/types/screen";
 
@@ -22,6 +23,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
     placeholder: "",
     allowClear: false,
     maxSelections: undefined,
+    defaultValue: "",
     ...config,
   };
 
@@ -32,6 +34,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
     placeholder: safeConfig.placeholder,
     allowClear: safeConfig.allowClear,
     maxSelections: safeConfig.maxSelections?.toString() || "",
+    defaultValue: safeConfig.defaultValue || "",
   });
 
   const [newOption, setNewOption] = useState({ label: "", value: "" });
@@ -53,6 +56,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
       placeholder: safeConfig.placeholder,
       allowClear: safeConfig.allowClear,
       maxSelections: safeConfig.maxSelections?.toString() || "",
+      defaultValue: safeConfig.defaultValue || "",
     });
 
     setLocalOptions(
@@ -68,6 +72,7 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
     safeConfig.placeholder,
     safeConfig.allowClear,
     safeConfig.maxSelections,
+    safeConfig.defaultValue,
     JSON.stringify(safeConfig.options), // 옵션 배열의 전체 내용 변화 감지
   ]);
 
@@ -174,6 +179,30 @@ export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ co
           />
         </div>
 
+        {/* 기본값 설정 */}
+        <div>
+          <Label htmlFor="defaultValue" className="text-sm font-medium">
+            기본값
+          </Label>
+          <Select
+            value={localValues.defaultValue || "_none_"}
+            onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
+          >
+            <SelectTrigger className="mt-1 h-8 w-full text-xs">
+              <SelectValue placeholder="기본값 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="_none_">선택 안함</SelectItem>
+              {localOptions.map((option, index) => (
+                <SelectItem key={`default-${option.value}-${index}`} value={option.value}>
+                  {option.label} ({option.value})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-muted-foreground mt-1 text-xs">화면 로드 시 자동으로 선택될 값</p>
+        </div>
+
         {/* 다중 선택 */}
         <div className="flex items-center justify-between">
           <Label htmlFor="multiple" className="text-sm font-medium">
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index ff5396c6..5f775b23 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -22,6 +22,18 @@ import {
   Settings2,
   PanelLeft,
   PanelLeftClose,
+  AlignStartVertical,
+  AlignCenterVertical,
+  AlignEndVertical,
+  AlignStartHorizontal,
+  AlignCenterHorizontal,
+  AlignEndHorizontal,
+  AlignHorizontalSpaceAround,
+  AlignVerticalSpaceAround,
+  RulerIcon,
+  Tag,
+  Keyboard,
+  Equal,
 } from "lucide-react";
 import { ScreenResolution, SCREEN_RESOLUTIONS } from "@/types/screen";
 import {
@@ -50,6 +62,10 @@ interface GridSettings {
   gridOpacity?: number;
 }
 
+type AlignMode = "left" | "centerX" | "right" | "top" | "centerY" | "bottom";
+type DistributeDirection = "horizontal" | "vertical";
+type MatchSizeMode = "width" | "height" | "both";
+
 interface SlimToolbarProps {
   screenName?: string;
   tableName?: string;
@@ -67,6 +83,13 @@ interface SlimToolbarProps {
   // 패널 토글 기능
   isPanelOpen?: boolean;
   onTogglePanel?: () => void;
+  // 정렬/배분/크기 기능
+  selectedCount?: number;
+  onAlign?: (mode: AlignMode) => void;
+  onDistribute?: (direction: DistributeDirection) => void;
+  onMatchSize?: (mode: MatchSizeMode) => void;
+  onToggleLabels?: () => void;
+  onShowShortcuts?: () => void;
 }
 
 export const SlimToolbar: React.FC<SlimToolbarProps> = ({
@@ -85,6 +108,12 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   onOpenMultilangSettings,
   isPanelOpen = false,
   onTogglePanel,
+  selectedCount = 0,
+  onAlign,
+  onDistribute,
+  onMatchSize,
+  onToggleLabels,
+  onShowShortcuts,
 }) => {
   // 사용자 정의 해상도 상태
   const [customWidth, setCustomWidth] = useState("");
@@ -325,8 +354,100 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
         )}
       </div>
 
+      {/* 중앙: 정렬/배분 도구 (다중 선택 시 표시) */}
+      {selectedCount >= 2 && (onAlign || onDistribute || onMatchSize) && (
+        <div className="flex items-center space-x-1 rounded-md bg-blue-50 px-2 py-1">
+          {/* 정렬 */}
+          {onAlign && (
+            <>
+              <span className="mr-1 text-xs font-medium text-blue-700">정렬</span>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("left")} title="좌측 정렬 (Alt+L)">
+                <AlignStartVertical className="h-3.5 w-3.5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerX")} title="가로 중앙 (Alt+C)">
+                <AlignCenterVertical className="h-3.5 w-3.5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("right")} title="우측 정렬 (Alt+R)">
+                <AlignEndVertical className="h-3.5 w-3.5" />
+              </Button>
+              <div className="mx-0.5 h-4 w-px bg-blue-200" />
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("top")} title="상단 정렬 (Alt+T)">
+                <AlignStartHorizontal className="h-3.5 w-3.5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerY")} title="세로 중앙 (Alt+M)">
+                <AlignCenterHorizontal className="h-3.5 w-3.5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("bottom")} title="하단 정렬 (Alt+B)">
+                <AlignEndHorizontal className="h-3.5 w-3.5" />
+              </Button>
+            </>
+          )}
+
+          {/* 배분 (3개 이상 선택 시) */}
+          {onDistribute && selectedCount >= 3 && (
+            <>
+              <div className="mx-1 h-4 w-px bg-blue-200" />
+              <span className="mr-1 text-xs font-medium text-blue-700">배분</span>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("horizontal")} title="가로 균등 배분 (Alt+H)">
+                <AlignHorizontalSpaceAround className="h-3.5 w-3.5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("vertical")} title="세로 균등 배분 (Alt+V)">
+                <AlignVerticalSpaceAround className="h-3.5 w-3.5" />
+              </Button>
+            </>
+          )}
+
+          {/* 크기 맞추기 */}
+          {onMatchSize && (
+            <>
+              <div className="mx-1 h-4 w-px bg-blue-200" />
+              <span className="mr-1 text-xs font-medium text-blue-700">크기</span>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("width")} title="너비 맞추기 (Alt+W)">
+                <RulerIcon className="h-3.5 w-3.5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("height")} title="높이 맞추기 (Alt+E)">
+                <RulerIcon className="h-3.5 w-3.5 rotate-90" />
+              </Button>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("both")} title="크기 모두 맞추기">
+                <Equal className="h-3.5 w-3.5" />
+              </Button>
+            </>
+          )}
+
+          <div className="mx-1 h-4 w-px bg-blue-200" />
+          <span className="text-xs text-blue-600">{selectedCount}개 선택</span>
+        </div>
+      )}
+
       {/* 우측: 버튼들 */}
       <div className="flex items-center space-x-2">
+        {/* 라벨 토글 버튼 */}
+        {onToggleLabels && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onToggleLabels}
+            className="flex items-center space-x-1"
+            title="라벨 일괄 표시/숨기기 (Alt+Shift+L)"
+          >
+            <Tag className="h-4 w-4" />
+            <span>라벨</span>
+          </Button>
+        )}
+
+        {/* 단축키 도움말 */}
+        {onShowShortcuts && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onShowShortcuts}
+            className="h-9 w-9"
+            title="단축키 도움말 (?)"
+          >
+            <Keyboard className="h-4 w-4" />
+          </Button>
+        )}
+
         {onPreview && (
           <Button variant="outline" onClick={onPreview} className="flex items-center space-x-2">
             <Eye className="h-4 w-4" />
diff --git a/frontend/components/screen/widgets/TabsWidget.tsx b/frontend/components/screen/widgets/TabsWidget.tsx
index 14e8c1be..6c770e48 100644
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -65,7 +65,34 @@ export function TabsWidget({
   const [selectedTab, setSelectedTab] = useState<string>(getInitialTab());
   const [visibleTabs, setVisibleTabs] = useState<ExtendedTabItem[]>(tabs as ExtendedTabItem[]);
   const [mountedTabs, setMountedTabs] = useState<Set<string>>(() => new Set([getInitialTab()]));
-  
+
+  // 🆕 화면 진입 시 첫 번째 탭 자동 선택 및 마운트
+  useEffect(() => {
+    // 현재 선택된 탭이 유효하지 않거나 비어있으면 첫 번째 탭 선택
+    const validTabs = (tabs as ExtendedTabItem[]).filter((tab) => !tab.disabled);
+    const firstValidTabId = validTabs[0]?.id;
+
+    if (firstValidTabId) {
+      // 선택된 탭이 없거나 유효하지 않으면 첫 번째 탭으로 설정
+      setSelectedTab((currentSelected) => {
+        if (!currentSelected || !validTabs.some((t) => t.id === currentSelected)) {
+          return firstValidTabId;
+        }
+        return currentSelected;
+      });
+
+      // 첫 번째 탭이 mountedTabs에 없으면 추가
+      setMountedTabs((prev) => {
+        const newSet = new Set(prev);
+        // 첫 번째 탭 추가
+        if (firstValidTabId && !newSet.has(firstValidTabId)) {
+          newSet.add(firstValidTabId);
+        }
+        return newSet;
+      });
+    }
+  }, [tabs]); // tabs가 변경될 때마다 실행
+
   // screenId 기반 화면 로드 상태
   const [screenLayouts, setScreenLayouts] = useState<Record<string, ComponentData[]>>({});
   const [screenLoadingStates, setScreenLoadingStates] = useState<Record<string, boolean>>({});
@@ -82,23 +109,28 @@ export function TabsWidget({
       for (const tab of visibleTabs) {
         const extTab = tab as ExtendedTabItem;
         // screenId가 있고, 아직 로드하지 않았으며, 인라인 컴포넌트가 없는 경우만 로드
-        if (extTab.screenId && !screenLayouts[tab.id] && !screenLoadingStates[tab.id] && (!extTab.components || extTab.components.length === 0)) {
-          setScreenLoadingStates(prev => ({ ...prev, [tab.id]: true }));
+        if (
+          extTab.screenId &&
+          !screenLayouts[tab.id] &&
+          !screenLoadingStates[tab.id] &&
+          (!extTab.components || extTab.components.length === 0)
+        ) {
+          setScreenLoadingStates((prev) => ({ ...prev, [tab.id]: true }));
           try {
             const layoutData = await screenApi.getLayout(extTab.screenId);
             if (layoutData && layoutData.components) {
-              setScreenLayouts(prev => ({ ...prev, [tab.id]: layoutData.components }));
+              setScreenLayouts((prev) => ({ ...prev, [tab.id]: layoutData.components }));
             }
           } catch (error) {
             console.error(`탭 "${tab.label}" 화면 로드 실패:`, error);
-            setScreenErrors(prev => ({ ...prev, [tab.id]: "화면을 불러올 수 없습니다." }));
+            setScreenErrors((prev) => ({ ...prev, [tab.id]: "화면을 불러올 수 없습니다." }));
           } finally {
-            setScreenLoadingStates(prev => ({ ...prev, [tab.id]: false }));
+            setScreenLoadingStates((prev) => ({ ...prev, [tab.id]: false }));
           }
         }
       }
     };
-    
+
     loadScreenLayouts();
   }, [visibleTabs, screenLayouts, screenLoadingStates]);
 
@@ -153,11 +185,7 @@ export function TabsWidget({
   const getTabsListClass = () => {
     const baseClass = orientation === "vertical" ? "flex-col" : "";
     const variantClass =
-      variant === "pills"
-        ? "bg-muted p-1 rounded-lg"
-        : variant === "underline"
-          ? "border-b"
-          : "bg-muted p-1";
+      variant === "pills" ? "bg-muted p-1 rounded-lg" : variant === "underline" ? "border-b" : "bg-muted p-1";
     return `${baseClass} ${variantClass}`;
   };
 
@@ -165,47 +193,47 @@ export function TabsWidget({
   const renderTabContent = (tab: ExtendedTabItem) => {
     const extTab = tab as ExtendedTabItem;
     const inlineComponents = tab.components || [];
-    
+
     // 1. screenId가 있고 인라인 컴포넌트가 없는 경우 -> 화면 로드 방식
     if (extTab.screenId && inlineComponents.length === 0) {
       // 로딩 중
       if (screenLoadingStates[tab.id]) {
         return (
           <div className="flex h-full w-full items-center justify-center">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <span className="ml-2 text-muted-foreground">화면을 불러오는 중...</span>
+            <Loader2 className="text-primary h-8 w-8 animate-spin" />
+            <span className="text-muted-foreground ml-2">화면을 불러오는 중...</span>
           </div>
         );
       }
-      
+
       // 에러 발생
       if (screenErrors[tab.id]) {
         return (
-          <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-destructive/50 bg-destructive/5">
+          <div className="border-destructive/50 bg-destructive/5 flex h-full w-full items-center justify-center rounded border-2 border-dashed">
             <p className="text-destructive text-sm">{screenErrors[tab.id]}</p>
           </div>
         );
       }
-      
+
       // 화면 레이아웃이 로드된 경우
       const loadedComponents = screenLayouts[tab.id];
       if (loadedComponents && loadedComponents.length > 0) {
         return renderScreenComponents(loadedComponents);
       }
-      
+
       // 아직 로드되지 않은 경우
       return (
         <div className="flex h-full w-full items-center justify-center">
-          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <Loader2 className="text-primary h-8 w-8 animate-spin" />
         </div>
       );
     }
-    
+
     // 2. 인라인 컴포넌트가 있는 경우 -> 기존 v2 방식
     if (inlineComponents.length > 0) {
       return renderInlineComponents(tab, inlineComponents);
     }
-    
+
     // 3. 둘 다 없는 경우
     return (
       <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
@@ -219,22 +247,17 @@ export function TabsWidget({
   // screenId로 로드한 화면 컴포넌트 렌더링
   const renderScreenComponents = (components: ComponentData[]) => {
     // InteractiveScreenViewerDynamic 동적 로드
-    const InteractiveScreenViewerDynamic = require("@/components/screen/InteractiveScreenViewerDynamic").InteractiveScreenViewerDynamic;
-    
+    const InteractiveScreenViewerDynamic =
+      require("@/components/screen/InteractiveScreenViewerDynamic").InteractiveScreenViewerDynamic;
+
     // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
-    const maxBottom = Math.max(
-      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
-      300
-    );
-    const maxRight = Math.max(
-      ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
-      400
-    );
-    
+    const maxBottom = Math.max(...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)), 300);
+    const maxRight = Math.max(...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)), 400);
+
     return (
-      <div 
+      <div
         className="relative h-full w-full overflow-auto"
-        style={{ 
+        style={{
           minHeight: maxBottom + 20,
           minWidth: maxRight + 20,
         }}
@@ -268,17 +291,17 @@ export function TabsWidget({
     // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
     const maxBottom = Math.max(
       ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
-      300 // 최소 높이
+      300, // 최소 높이
     );
     const maxRight = Math.max(
       ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
-      400 // 최소 너비
+      400, // 최소 너비
     );
 
     return (
-      <div 
-        className="relative" 
-        style={{ 
+      <div
+        className="relative"
+        style={{
           minHeight: maxBottom + 20,
           minWidth: maxRight + 20,
         }}
@@ -292,7 +315,7 @@ export function TabsWidget({
               className={cn(
                 "absolute",
                 isDesignMode && "cursor-move",
-                isDesignMode && isSelected && "ring-2 ring-primary ring-offset-2"
+                isDesignMode && isSelected && "ring-primary ring-2 ring-offset-2",
               )}
               style={{
                 left: comp.position?.x || 0,
@@ -321,6 +344,7 @@ export function TabsWidget({
                 onFormDataChange={onFormDataChange}
                 menuObjid={menuObjid}
                 isDesignMode={isDesignMode}
+                isInteractive={!isDesignMode}
               />
             </div>
           );
@@ -352,9 +376,7 @@ export function TabsWidget({
                 <TabsTrigger value={tab.id} disabled={tab.disabled} className="relative pr-8">
                   {tab.label}
                   {tab.components && tab.components.length > 0 && (
-                    <span className="ml-1 text-xs text-muted-foreground">
-                      ({tab.components.length})
-                    </span>
+                    <span className="text-muted-foreground ml-1 text-xs">({tab.components.length})</span>
                   )}
                 </TabsTrigger>
                 {allowCloseable && (
@@ -362,7 +384,7 @@ export function TabsWidget({
                     onClick={(e) => handleCloseTab(tab.id, e)}
                     variant="ghost"
                     size="sm"
-                    className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 p-0 hover:bg-destructive/10"
+                    className="hover:bg-destructive/10 absolute top-1/2 right-1 h-5 w-5 -translate-y-1/2 p-0"
                   >
                     <X className="h-3 w-3" />
                   </Button>
diff --git a/frontend/components/screen/widgets/types/ImageWidget.tsx b/frontend/components/screen/widgets/types/ImageWidget.tsx
index 5c81ca9c..a9bd62d3 100644
--- a/frontend/components/screen/widgets/types/ImageWidget.tsx
+++ b/frontend/components/screen/widgets/types/ImageWidget.tsx
@@ -9,15 +9,19 @@ import { WidgetComponent } from "@/types/screen";
 import { toast } from "sonner";
 import { apiClient, getFullImageUrl } from "@/lib/api/client";
 
-export const ImageWidget: React.FC<WebTypeComponentProps> = ({ 
-  component, 
-  value, 
-  onChange, 
+export const ImageWidget: React.FC<
+  WebTypeComponentProps & { size?: { width?: number; height?: number }; style?: React.CSSProperties }
+> = ({
+  component,
+  value,
+  onChange,
   readonly = false,
-  isDesignMode = false // 디자인 모드 여부
+  isDesignMode = false, // 디자인 모드 여부
+  size, // props로 전달된 size
+  style: propStyle, // props로 전달된 style
 }) => {
   const widget = component as WidgetComponent;
-  const { required, style } = widget;
+  const { required, style: widgetStyle } = widget;
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
 
@@ -25,8 +29,16 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
   const rawImageUrl = value || widget.value || "";
   const imageUrl = rawImageUrl ? getFullImageUrl(rawImageUrl) : "";
 
-  // style에서 width, height 제거 (부모 컨테이너 크기 사용)
-  const filteredStyle = style ? { ...style, width: undefined, height: undefined } : {};
+  // 🔧 컴포넌트 크기를 명시적으로 적용 (props.size 우선, 없으면 style에서 가져옴)
+  const effectiveSize = size || (widget as any).size || {};
+  const effectiveStyle = propStyle || widgetStyle || {};
+  const containerStyle: React.CSSProperties = {
+    width: effectiveSize.width ? `${effectiveSize.width}px` : effectiveStyle?.width || "100%",
+    height: effectiveSize.height ? `${effectiveSize.height}px` : effectiveStyle?.height || "100%",
+  };
+
+  // style에서 width, height 제거 (내부 요소용)
+  const filteredStyle = effectiveStyle ? { ...effectiveStyle, width: undefined, height: undefined } : {};
 
   // 파일 선택 처리
   const handleFileSelect = () => {
@@ -120,31 +132,27 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
   };
 
   return (
-    <div className="h-full w-full">
+    <div className="flex h-full w-full flex-col" style={containerStyle}>
       {imageUrl ? (
         // 이미지 표시 모드
         <div
-          className="group relative h-full w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm transition-all hover:shadow-md"
+          className="group relative w-full flex-1 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm transition-all hover:shadow-md"
           style={filteredStyle}
         >
-            <img
-              src={imageUrl}
-              alt="업로드된 이미지"
-              className="h-full w-full object-contain"
-              onError={(e) => {
-                e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23f3f4f6'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239ca3af'%3E이미지 로드 실패%3C/text%3E%3C/svg%3E";
-              }}
-            />
-            
+          <img
+            src={imageUrl}
+            alt="업로드된 이미지"
+            className="h-full w-full object-contain"
+            onError={(e) => {
+              e.currentTarget.src =
+                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%23f3f4f6'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='14' fill='%239ca3af'%3E이미지 로드 실패%3C/text%3E%3C/svg%3E";
+            }}
+          />
+
           {/* 호버 시 제거 버튼 */}
           {!readonly && !isDesignMode && (
             <div className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
-              <Button
-                size="sm"
-                variant="destructive"
-                onClick={handleRemove}
-                className="gap-2"
-              >
+              <Button size="sm" variant="destructive" onClick={handleRemove} className="gap-2">
                 <X className="h-4 w-4" />
                 이미지 제거
               </Button>
@@ -154,9 +162,9 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
       ) : (
         // 업로드 영역
         <div
-          className={`group relative flex h-full w-full flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
-            isDesignMode 
-              ? "cursor-default border-gray-200 bg-gray-50" 
+          className={`group relative flex w-full flex-1 flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
+            isDesignMode
+              ? "cursor-default border-gray-200 bg-gray-50"
               : "cursor-pointer border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50/50 hover:shadow-md"
           }`}
           onClick={handleFileSelect}
@@ -189,9 +197,7 @@ export const ImageWidget: React.FC<WebTypeComponentProps> = ({
       />
 
       {/* 필수 필드 경고 */}
-      {required && !imageUrl && (
-        <div className="text-xs text-red-500">* 이미지를 업로드해야 합니다</div>
-      )}
+      {required && !imageUrl && <div className="text-xs text-red-500">* 이미지를 업로드해야 합니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
index 81e90fd3..64fef9c4 100644
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -22,18 +22,25 @@ function SelectTrigger({
   className,
   size = "xs",
   children,
+  style,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
   size?: "xs" | "sm" | "default";
 }) {
+  // className에 h-full/h-[ 또는 style.height가 있으면 data-size 높이를 무시
+  const hasCustomHeight = className?.includes("h-full") || className?.includes("h-[") || !!style?.height;
+  
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
-      data-size={size}
+      data-size={hasCustomHeight ? undefined : size}
       className={cn(
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=default]:px-3 data-[size=default]:py-2 data-[size=sm]:h-9 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=xs]:h-6 data-[size=xs]:px-2 data-[size=xs]:py-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // 커스텀 높이일 때 기본 패딩 적용
+        hasCustomHeight && "px-2 py-1",
         className,
       )}
+      style={style}
       {...props}
     >
       {children}
diff --git a/frontend/components/unified/UnifiedRepeater.tsx b/frontend/components/unified/UnifiedRepeater.tsx
index c604e465..2f521665 100644
--- a/frontend/components/unified/UnifiedRepeater.tsx
+++ b/frontend/components/unified/UnifiedRepeater.tsx
@@ -8,6 +8,11 @@
  * - modal: 엔티티 선택 (FK 저장) + 추가 입력 컬럼
  *
  * RepeaterTable 및 ItemSelectionModal 재사용
+ *
+ * 데이터 전달 인터페이스:
+ * - DataProvidable: 선택된 데이터 제공
+ * - DataReceivable: 외부에서 데이터 수신
+ * - repeaterDataChange 이벤트 발행
  */
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
@@ -29,6 +34,13 @@ import { RepeaterTable } from "@/lib/registry/components/modal-repeater-table/Re
 import { ItemSelectionModal } from "@/lib/registry/components/modal-repeater-table/ItemSelectionModal";
 import { RepeaterColumnConfig } from "@/lib/registry/components/modal-repeater-table/types";
 
+// 데이터 전달 인터페이스
+import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
+import { useScreenContextOptional } from "@/contexts/ScreenContext";
+
+// V2 이벤트 시스템
+import { V2_EVENTS, dispatchV2Event } from "@/types/component-events";
+
 // 전역 UnifiedRepeater 등록 (buttonActions에서 사용)
 declare global {
   interface Window {
@@ -56,6 +68,9 @@ export const UnifiedRepeater: React.FC<UnifiedRepeaterProps> = ({
     [propConfig],
   );
 
+  // ScreenContext (데이터 전달 인터페이스 등록용)
+  const screenContext = useScreenContextOptional();
+
   // 상태
   const [data, setData] = useState<any[]>(initialData || []);
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
@@ -105,6 +120,133 @@ export const UnifiedRepeater: React.FC<UnifiedRepeaterProps> = ({
     };
   }, [config.useCustomTable, config.mainTableName, config.dataSource?.tableName]);
 
+  // ============================================================
+  // DataProvidable 인터페이스 구현
+  // 다른 컴포넌트에서 이 리피터의 데이터를 가져갈 수 있게 함
+  // ============================================================
+  const dataProvider: DataProvidable = useMemo(
+    () => ({
+      componentId: parentId || config.fieldName || "unified-repeater",
+      componentType: "unified-repeater",
+
+      // 선택된 행 데이터 반환
+      getSelectedData: () => {
+        return Array.from(selectedRows)
+          .map((idx) => data[idx])
+          .filter(Boolean);
+      },
+
+      // 전체 데이터 반환
+      getAllData: () => {
+        return [...data];
+      },
+
+      // 선택 초기화
+      clearSelection: () => {
+        setSelectedRows(new Set());
+      },
+    }),
+    [parentId, config.fieldName, data, selectedRows],
+  );
+
+  // ============================================================
+  // DataReceivable 인터페이스 구현
+  // 외부에서 이 리피터로 데이터를 전달받을 수 있게 함
+  // ============================================================
+  const dataReceiver: DataReceivable = useMemo(
+    () => ({
+      componentId: parentId || config.fieldName || "unified-repeater",
+      componentType: "repeater",
+
+      // 데이터 수신 (append, replace, merge 모드 지원)
+      receiveData: async (incomingData: any[], receiverConfig: DataReceiverConfig) => {
+        if (!incomingData || incomingData.length === 0) return;
+
+        // 매핑 규칙 적용
+        const mappedData = incomingData.map((item, index) => {
+          const newRow: any = { _id: `received_${Date.now()}_${index}` };
+
+          if (receiverConfig.mappingRules && receiverConfig.mappingRules.length > 0) {
+            receiverConfig.mappingRules.forEach((rule) => {
+              const sourceValue = item[rule.sourceField];
+              newRow[rule.targetField] = sourceValue !== undefined ? sourceValue : rule.defaultValue;
+            });
+          } else {
+            // 매핑 규칙 없으면 그대로 복사
+            Object.assign(newRow, item);
+          }
+
+          return newRow;
+        });
+
+        // 모드에 따라 데이터 처리
+        switch (receiverConfig.mode) {
+          case "replace":
+            setData(mappedData);
+            onDataChange?.(mappedData);
+            break;
+          case "merge":
+            // 중복 제거 후 병합 (id 또는 _id 기준)
+            const existingIds = new Set(data.map((row) => row.id || row._id));
+            const newItems = mappedData.filter((row) => !existingIds.has(row.id || row._id));
+            const mergedData = [...data, ...newItems];
+            setData(mergedData);
+            onDataChange?.(mergedData);
+            break;
+          case "append":
+          default:
+            const appendedData = [...data, ...mappedData];
+            setData(appendedData);
+            onDataChange?.(appendedData);
+            break;
+        }
+      },
+
+      // 현재 데이터 반환
+      getData: () => {
+        return [...data];
+      },
+    }),
+    [parentId, config.fieldName, data, onDataChange],
+  );
+
+  // ============================================================
+  // ScreenContext에 DataProvider/DataReceiver 등록
+  // ============================================================
+  useEffect(() => {
+    if (screenContext && (parentId || config.fieldName)) {
+      const componentId = parentId || config.fieldName || "unified-repeater";
+
+      screenContext.registerDataProvider(componentId, dataProvider);
+      screenContext.registerDataReceiver(componentId, dataReceiver);
+
+      return () => {
+        screenContext.unregisterDataProvider(componentId);
+        screenContext.unregisterDataReceiver(componentId);
+      };
+    }
+  }, [screenContext, parentId, config.fieldName, dataProvider, dataReceiver]);
+
+  // ============================================================
+  // repeaterDataChange 이벤트 발행
+  // 데이터 변경 시 다른 컴포넌트(aggregation-widget 등)에 알림
+  // ============================================================
+  const prevDataLengthRef = useRef(data.length);
+  useEffect(() => {
+    // 데이터가 변경되었을 때만 이벤트 발행
+    if (typeof window !== "undefined" && data.length !== prevDataLengthRef.current) {
+      dispatchV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, {
+        componentId: parentId || config.fieldName || "unified-repeater",
+        tableName: config.dataSource?.tableName || "",
+        data: data,
+        selectedData: Array.from(selectedRows)
+          .map((idx) => data[idx])
+          .filter(Boolean),
+      });
+      prevDataLengthRef.current = data.length;
+    }
+  }, [data, selectedRows, parentId, config.fieldName, config.dataSource?.tableName]);
+
   // 저장 이벤트 리스너
   useEffect(() => {
     const handleSaveEvent = async (event: CustomEvent) => {
@@ -568,19 +710,23 @@ export const UnifiedRepeater: React.FC<UnifiedRepeaterProps> = ({
   );
 
   // 🆕 채번 API 호출 (비동기)
-  const generateNumberingCode = useCallback(async (ruleId: string): Promise<string> => {
-    try {
-      const result = await allocateNumberingCode(ruleId);
-      if (result.success && result.data?.generatedCode) {
-        return result.data.generatedCode;
+  // 🆕 수동 입력 부분 지원을 위해 userInputCode 파라미터 추가
+  const generateNumberingCode = useCallback(
+    async (ruleId: string, userInputCode?: string, formData?: Record<string, any>): Promise<string> => {
+      try {
+        const result = await allocateNumberingCode(ruleId, userInputCode, formData);
+        if (result.success && result.data?.generatedCode) {
+          return result.data.generatedCode;
+        }
+        console.error("채번 실패:", result.error);
+        return "";
+      } catch (error) {
+        console.error("채번 API 호출 실패:", error);
+        return "";
       }
-      console.error("채번 실패:", result.error);
-      return "";
-    } catch (error) {
-      console.error("채번 API 호출 실패:", error);
-      return "";
-    }
-  }, []);
+    },
+    [],
+  );
 
   // 🆕 행 추가 (inline 모드 또는 모달 열기) - 비동기로 변경
   const handleAddRow = useCallback(async () => {
@@ -699,7 +845,8 @@ export const UnifiedRepeater: React.FC<UnifiedRepeaterProps> = ({
               if (match) {
                 const ruleId = match[1];
                 try {
-                  const result = await allocateNumberingCode(ruleId);
+                  // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
+                  const result = await allocateNumberingCode(ruleId, undefined, newRow);
                   if (result.success && result.data?.generatedCode) {
                     newRow[key] = result.data.generatedCode;
                   } else {
diff --git a/frontend/components/unified/UnifiedSelect.tsx b/frontend/components/unified/UnifiedSelect.tsx
index 99a82e17..9560fa38 100644
--- a/frontend/components/unified/UnifiedSelect.tsx
+++ b/frontend/components/unified/UnifiedSelect.tsx
@@ -492,7 +492,7 @@ export const UnifiedSelect = forwardRef<HTMLDivElement, UnifiedSelectProps>((pro
   const categoryTable = (config as any).categoryTable;
   const categoryColumn = (config as any).categoryColumn;
 
-  // category 소스 유지 (category_values_test 테이블에서 로드)
+  // category 소스 유지 (category_values 테이블에서 로드)
   const source = rawSource;
   const codeGroup = config.codeGroup;
 
@@ -612,7 +612,7 @@ export const UnifiedSelect = forwardRef<HTMLDivElement, UnifiedSelectProps>((pro
             fetchedOptions = data;
           }
         } else if (source === "category") {
-          // 카테고리에서 로드 (category_values_test 테이블)
+          // 카테고리에서 로드 (category_values 테이블)
           // tableName, columnName은 props에서 가져옴
           const catTable = categoryTable || tableName;
           const catColumn = categoryColumn || columnName;
diff --git a/frontend/components/v2/V2Biz.tsx b/frontend/components/v2/V2Biz.tsx
index 2ce97050..4f4bec36 100644
--- a/frontend/components/v2/V2Biz.tsx
+++ b/frontend/components/v2/V2Biz.tsx
@@ -311,31 +311,39 @@ export const V2Biz = forwardRef<HTMLDivElement, V2BizProps>(
     const componentWidth = size?.width || style?.width;
     const componentHeight = size?.height || style?.height;
 
+    // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
+    const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+    const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+    const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
+
     return (
       <div
         ref={ref}
         id={id}
-        className="flex flex-col"
+        className="relative"
         style={{
           width: componentWidth,
           height: componentHeight,
         }}
       >
+        {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
         {showLabel && (
           <Label
             htmlFor={id}
             style={{
-              fontSize: style?.labelFontSize,
-              color: style?.labelColor,
-              fontWeight: style?.labelFontWeight,
-              marginBottom: style?.labelMarginBottom,
+              position: "absolute",
+              top: `-${estimatedLabelHeight}px`,
+              left: 0,
+              fontSize: style?.labelFontSize || "14px",
+              color: style?.labelColor || "#64748b",
+              fontWeight: style?.labelFontWeight || "500",
             }}
-            className="text-sm font-medium flex-shrink-0"
+            className="text-sm font-medium whitespace-nowrap"
           >
             {label}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
+        <div className="h-full w-full">
           {renderBiz()}
         </div>
       </div>
diff --git a/frontend/components/v2/V2Date.tsx b/frontend/components/v2/V2Date.tsx
index c825b1bf..91a4cf5d 100644
--- a/frontend/components/v2/V2Date.tsx
+++ b/frontend/components/v2/V2Date.tsx
@@ -75,10 +75,11 @@ const SingleDatePicker = forwardRef<
     disabled?: boolean;
     readonly?: boolean;
     className?: string;
+    placeholder?: string;
   }
 >(
   (
-    { value, onChange, dateFormat = "YYYY-MM-DD", showToday = true, minDate, maxDate, disabled, readonly, className },
+    { value, onChange, dateFormat = "YYYY-MM-DD", showToday = true, minDate, maxDate, disabled, readonly, className, placeholder = "날짜 선택" },
     ref,
   ) => {
     const [open, setOpen] = useState(false);
@@ -87,6 +88,16 @@ const SingleDatePicker = forwardRef<
     const minDateObj = useMemo(() => parseDate(minDate, dateFormat), [minDate, dateFormat]);
     const maxDateObj = useMemo(() => parseDate(maxDate, dateFormat), [maxDate, dateFormat]);
 
+    // 표시할 날짜 텍스트 계산 (ISO 형식이면 포맷팅, 아니면 그대로)
+    const displayText = useMemo(() => {
+      if (!value) return "";
+      // Date 객체로 변환 후 포맷팅
+      if (date && isValid(date)) {
+        return formatDate(date, dateFormat);
+      }
+      return value;
+    }, [value, date, dateFormat]);
+
     const handleSelect = useCallback(
       (selectedDate: Date | undefined) => {
         if (selectedDate) {
@@ -115,13 +126,13 @@ const SingleDatePicker = forwardRef<
             variant="outline"
             disabled={disabled || readonly}
             className={cn(
-              "h-10 w-full justify-start text-left font-normal",
-              !value && "text-muted-foreground",
+              "h-full w-full justify-start text-left font-normal",
+              !displayText && "text-muted-foreground",
               className,
             )}
           >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {value || "날짜 선택"}
+            <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
+            {displayText || placeholder}
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
@@ -211,14 +222,14 @@ const RangeDatePicker = forwardRef<
   );
 
   return (
-    <div ref={ref} className={cn("flex items-center gap-2", className)}>
+    <div ref={ref} className={cn("flex items-center gap-2 h-full", className)}>
       {/* 시작 날짜 */}
       <Popover open={openStart} onOpenChange={setOpenStart}>
         <PopoverTrigger asChild>
           <Button
             variant="outline"
             disabled={disabled || readonly}
-            className={cn("h-10 flex-1 justify-start text-left font-normal", !value[0] && "text-muted-foreground")}
+            className={cn("h-full flex-1 justify-start text-left font-normal", !value[0] && "text-muted-foreground")}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {value[0] || "시작일"}
@@ -248,7 +259,7 @@ const RangeDatePicker = forwardRef<
           <Button
             variant="outline"
             disabled={disabled || readonly}
-            className={cn("h-10 flex-1 justify-start text-left font-normal", !value[1] && "text-muted-foreground")}
+            className={cn("h-full flex-1 justify-start text-left font-normal", !value[1] && "text-muted-foreground")}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {value[1] || "종료일"}
@@ -290,7 +301,7 @@ const TimePicker = forwardRef<
   }
 >(({ value, onChange, disabled, readonly, className }, ref) => {
   return (
-    <div className={cn("relative", className)}>
+    <div className={cn("relative h-full", className)}>
       <Clock className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
       <Input
         ref={ref}
@@ -299,7 +310,7 @@ const TimePicker = forwardRef<
         onChange={(e) => onChange?.(e.target.value)}
         disabled={disabled}
         readOnly={readonly}
-        className="h-10 pl-10"
+        className="h-full pl-10"
       />
     </div>
   );
@@ -346,8 +357,8 @@ const DateTimePicker = forwardRef<
   );
 
   return (
-    <div ref={ref} className={cn("flex gap-2", className)}>
-      <div className="flex-1">
+    <div ref={ref} className={cn("flex gap-2 h-full", className)}>
+      <div className="flex-1 h-full">
         <SingleDatePicker
           value={datePart}
           onChange={handleDateChange}
@@ -358,7 +369,7 @@ const DateTimePicker = forwardRef<
           readonly={readonly}
         />
       </div>
-      <div className="w-32">
+      <div className="w-1/3 min-w-[100px] h-full">
         <TimePicker value={timePart} onChange={handleTimeChange} disabled={disabled} readonly={readonly} />
       </div>
     </div>
@@ -409,6 +420,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
             maxDate={config.maxDate}
             disabled={isDisabled}
             readonly={readonly}
+            placeholder={config.placeholder}
           />
         );
 
@@ -444,6 +456,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
             showToday={config.showToday}
             disabled={isDisabled}
             readonly={readonly}
+            placeholder={config.placeholder}
           />
         );
     }
@@ -453,32 +466,42 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
   const componentWidth = size?.width || style?.width;
   const componentHeight = size?.height || style?.height;
 
+  // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
+  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+  const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
+
   return (
     <div
       ref={ref}
       id={id}
-      className="flex flex-col"
+      className="relative"
       style={{
         width: componentWidth,
         height: componentHeight,
       }}
     >
+      {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
       {showLabel && (
         <Label
           htmlFor={id}
           style={{
-            fontSize: style?.labelFontSize,
-            color: style?.labelColor,
-            fontWeight: style?.labelFontWeight,
-            marginBottom: style?.labelMarginBottom,
+            position: "absolute",
+            top: `-${estimatedLabelHeight}px`,
+            left: 0,
+            fontSize: style?.labelFontSize || "14px",
+            color: style?.labelColor || "#64748b",
+            fontWeight: style?.labelFontWeight || "500",
           }}
-          className="flex-shrink-0 text-sm font-medium"
+          className="text-sm font-medium whitespace-nowrap"
         >
           {label}
           {required && <span className="ml-0.5 text-orange-500">*</span>}
         </Label>
       )}
-      <div className="min-h-0 flex-1">{renderDatePicker()}</div>
+      <div className="h-full w-full">
+        {renderDatePicker()}
+      </div>
     </div>
   );
 });
diff --git a/frontend/components/v2/V2FormContext.tsx b/frontend/components/v2/V2FormContext.tsx
index 4f2553ac..9473ef75 100644
--- a/frontend/components/v2/V2FormContext.tsx
+++ b/frontend/components/v2/V2FormContext.tsx
@@ -10,7 +10,7 @@
  */
 
 import React, { createContext, useContext, useState, useCallback, useMemo, useRef } from "react";
-import { ConditionalConfig, CascadingConfig } from "@/types/v2-components";
+import { ConditionalConfig, CascadingConfig, LayerConfig, LayerCondition } from "@/types/v2-components";
 import { ValidationRule } from "@/types/v2-core";
 import type {
   FormStatus,
@@ -89,6 +89,12 @@ export interface V2FormContextValue {
   addRepeaterRow: (fieldName: string, row: Record<string, unknown>) => void;
   updateRepeaterRow: (fieldName: string, index: number, row: Record<string, unknown>) => void;
   deleteRepeaterRow: (fieldName: string, index: number) => void;
+  
+  // 조건부 레이어 시스템
+  layers: LayerConfig[];
+  setLayers: (layers: LayerConfig[]) => void;
+  evaluateLayer: (layer: LayerConfig) => boolean;
+  isComponentVisible: (componentId: string) => boolean;
 }
 
 // ===== Context 생성 =====
diff --git a/frontend/components/v2/V2Hierarchy.tsx b/frontend/components/v2/V2Hierarchy.tsx
index 17a3e141..28f51fee 100644
--- a/frontend/components/v2/V2Hierarchy.tsx
+++ b/frontend/components/v2/V2Hierarchy.tsx
@@ -462,32 +462,40 @@ export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
     const componentWidth = size?.width || style?.width;
     const componentHeight = size?.height || style?.height;
 
+    // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
+    const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+    const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+    const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
+
     return (
       <div
         ref={ref}
         id={id}
-        className="flex flex-col"
+        className="relative"
         style={{
           width: componentWidth,
           height: componentHeight,
         }}
       >
+        {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
         {showLabel && (
           <Label
             htmlFor={id}
             style={{
-              fontSize: style?.labelFontSize,
-              color: style?.labelColor,
-              fontWeight: style?.labelFontWeight,
-              marginBottom: style?.labelMarginBottom,
+              position: "absolute",
+              top: `-${estimatedLabelHeight}px`,
+              left: 0,
+              fontSize: style?.labelFontSize || "14px",
+              color: style?.labelColor || "#64748b",
+              fontWeight: style?.labelFontWeight || "500",
             }}
-            className="text-sm font-medium flex-shrink-0"
+            className="text-sm font-medium whitespace-nowrap"
           >
             {label}
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
+        <div className="h-full w-full">
           {renderHierarchy()}
         </div>
       </div>
diff --git a/frontend/components/v2/V2Input.tsx b/frontend/components/v2/V2Input.tsx
index be4dd83e..a284f26e 100644
--- a/frontend/components/v2/V2Input.tsx
+++ b/frontend/components/v2/V2Input.tsx
@@ -317,7 +317,7 @@ const TextareaInput = forwardRef<
       readOnly={readonly}
       disabled={disabled}
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-full w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
     />
@@ -334,6 +334,8 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   // formData 추출 (채번규칙 날짜 컬럼 기준 생성 시 사용)
   const formData = (props as any).formData || {};
   const columnName = (props as any).columnName;
+  // onFormDataChange 추출 (채번 규칙 ID를 formData에 저장하기 위함)
+  const onFormDataChange = (props as any).onFormDataChange;
 
   // config가 없으면 기본값 사용
   const config = (configProp || { type: "text" }) as V2InputConfig & {
@@ -358,9 +360,22 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   // 채번 타입 자동생성 상태
   const [isGeneratingNumbering, setIsGeneratingNumbering] = useState(false);
   const hasGeneratedNumberingRef = useRef(false);
+  
+  // formData를 ref로 관리하여 closure 문제 해결 (채번 코드 생성 시 최신 값 사용)
+  const formDataRef = useRef(formData);
+  formDataRef.current = formData;
 
-  // tableName 추출 (props에서 전달받거나 config에서)
-  const tableName = (props as any).tableName || (config as any).tableName;
+  // tableName 추출 (여러 소스에서 확인)
+  // 1. props에서 직접 전달받은 값
+  // 2. config에서 설정된 값
+  // 3. 컴포넌트 overrides에서 설정된 값 (V2 레이아웃)
+  // 4. screenInfo에서 화면 테이블명
+  const tableName = 
+    (props as any).tableName || 
+    (config as any).tableName ||
+    (props as any).component?.tableName ||
+    (props as any).component?.overrides?.tableName ||
+    (props as any).screenInfo?.tableName;
 
   // 수정 모드 여부 확인
   const originalData = (props as any).originalData || (props as any)._originalData;
@@ -443,8 +458,10 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
 
   // formData에서 카테고리 관련 값 추출 (채번 파트에서 카테고리 사용 시)
   // 채번 필드 자체의 값은 제외해야 함 (무한 루프 방지)
+  // inputType을 여러 소스에서 확인
+  const propsInputType = (props as any).inputType;
   const categoryValuesForNumbering = useMemo(() => {
-    const inputType = config.inputType || config.type || "text";
+    const inputType = propsInputType || config.inputType || config.type || "text";
     if (inputType !== "numbering") return "";
     // formData에서 category 타입 필드 값들을 추출 (채번 필드 자체는 제외)
     const categoryFields: Record<string, string> = {};
@@ -456,12 +473,13 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       }
     }
     return JSON.stringify(categoryFields);
-  }, [config.inputType, config.type, formData, columnName]);
+  }, [propsInputType, config.inputType, config.type, formData, columnName]);
 
   // 채번 타입 자동생성 로직 (테이블 관리에서 설정된 numberingRuleId 사용)
   useEffect(() => {
     const generateNumberingCode = async () => {
-      const inputType = config.inputType || config.type || "text";
+      // inputType을 여러 소스에서 확인 (props에서 직접 전달받거나 config에서)
+      const inputType = (props as any).inputType || config.inputType || config.type || "text";
 
       // numbering 타입이 아니면 스킵
       if (inputType !== "numbering") {
@@ -522,10 +540,18 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           }
 
           // detailSettings에서 numberingRuleId 추출
-          if (targetColumn.detailSettings && typeof targetColumn.detailSettings === "string") {
+          if (targetColumn.detailSettings) {
             try {
-              const parsed = JSON.parse(targetColumn.detailSettings);
+              // 문자열이면 파싱, 객체면 그대로 사용
+              const parsed = typeof targetColumn.detailSettings === "string" 
+                ? JSON.parse(targetColumn.detailSettings) 
+                : targetColumn.detailSettings;
               numberingRuleIdRef.current = parsed.numberingRuleId || null;
+              
+              // 🆕 채번 규칙 ID를 formData에 저장 (저장 시 allocateCode 호출을 위해)
+              if (parsed.numberingRuleId && onFormDataChange && columnName) {
+                onFormDataChange(`${columnName}_numberingRuleId`, parsed.numberingRuleId);
+              }
             } catch {
               // JSON 파싱 실패
             }
@@ -539,8 +565,9 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           return;
         }
 
-        // 채번 코드 생성 (formData 전달하여 카테고리 값 기반 생성)
-        const previewResponse = await previewNumberingCode(numberingRuleId, formData);
+        // 채번 코드 생성 (formDataRef.current 사용하여 최신 formData 전달)
+        const currentFormData = formDataRef.current;
+        const previewResponse = await previewNumberingCode(numberingRuleId, currentFormData);
 
         if (previewResponse.success && previewResponse.data?.generatedCode) {
           const generatedCode = previewResponse.data.generatedCode;
@@ -599,6 +626,35 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableName, columnName, isEditMode, categoryValuesForNumbering]);
 
+  // 🆕 beforeFormSave 이벤트 리스너 - 저장 직전에 현재 조합된 값을 formData에 주입
+  useEffect(() => {
+    const inputType = propsInputType || config.inputType || config.type || "text";
+    if (inputType !== "numbering" || !columnName) return;
+
+    const handleBeforeFormSave = (event: CustomEvent) => {
+      const template = numberingTemplateRef.current;
+      if (!template || !template.includes("____")) return;
+
+      // 템플릿에서 prefix와 suffix 추출
+      const templateParts = template.split("____");
+      const templatePrefix = templateParts[0] || "";
+      const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
+      
+      // 현재 조합된 값 생성
+      const currentValue = templatePrefix + manualInputValue + templateSuffix;
+      
+      // formData에 직접 주입
+      if (event.detail?.formData && columnName) {
+        event.detail.formData[columnName] = currentValue;
+      }
+    };
+
+    window.addEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
+    return () => {
+      window.removeEventListener("beforeFormSave", handleBeforeFormSave as EventListener);
+    };
+  }, [columnName, manualInputValue, propsInputType, config.inputType, config.type]);
+
   // 실제 표시할 값 (자동생성 값 또는 props value)
   const displayValue = autoGeneratedValue ?? value;
 
@@ -607,7 +663,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
 
   // 타입별 입력 컴포넌트 렌더링
   const renderInput = () => {
-    const inputType = config.inputType || config.type || "text";
+    const inputType = propsInputType || config.inputType || config.type || "text";
     switch (inputType) {
       case "text":
         return (
@@ -743,7 +799,19 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
                 const newValue = templatePrefix + newUserInput + templateSuffix;
                 userEditedNumberingRef.current = true;
                 setAutoGeneratedValue(newValue);
+                
+                // 모든 방법으로 formData 업데이트 시도
                 onChange?.(newValue);
+                if (onFormDataChange && columnName) {
+                  onFormDataChange(columnName, newValue);
+                }
+                
+                // 커스텀 이벤트로도 전달 (최후의 보루)
+                if (typeof window !== "undefined" && columnName) {
+                  window.dispatchEvent(new CustomEvent("numberingValueChanged", {
+                    detail: { columnName, value: newValue }
+                  }));
+                }
               }}
               placeholder="입력"
               className="h-full min-w-[60px] flex-1 bg-transparent px-2 text-sm focus-visible:outline-none"
@@ -776,37 +844,49 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   };
 
   // 라벨이 표시될 때 입력 필드가 차지할 높이 계산
-  const showLabel = label && style?.labelDisplay !== false;
+  // 🔧 label prop이 없어도 style.labelText에서 가져올 수 있도록 수정
+  const actualLabel = label || style?.labelText;
+  const showLabel = actualLabel && style?.labelDisplay === true;
   // size에서 우선 가져오고, 없으면 style에서 가져옴
   const componentWidth = size?.width || style?.width;
   const componentHeight = size?.height || style?.height;
 
+  // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
+  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+  const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2; // 라벨 높이 + 여백
+
   return (
     <div
       ref={ref}
       id={id}
-      className="flex flex-col"
+      className="relative"
       style={{
         width: componentWidth,
         height: componentHeight,
       }}
     >
+      {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 (높이에 포함되지 않음) */}
       {showLabel && (
         <Label
           htmlFor={id}
           style={{
-            fontSize: style?.labelFontSize,
-            color: style?.labelColor,
-            fontWeight: style?.labelFontWeight,
-            marginBottom: style?.labelMarginBottom,
+            position: "absolute",
+            top: `-${estimatedLabelHeight}px`,
+            left: 0,
+            fontSize: style?.labelFontSize || "14px",
+            color: style?.labelColor || "#64748b",
+            fontWeight: style?.labelFontWeight || "500",
           }}
-          className="flex-shrink-0 text-sm font-medium"
+          className="text-sm font-medium whitespace-nowrap"
         >
-          {label}
+          {actualLabel}
           {required && <span className="ml-0.5 text-orange-500">*</span>}
         </Label>
       )}
-      <div className="min-h-0 flex-1">{renderInput()}</div>
+      <div className="h-full w-full">
+        {renderInput()}
+      </div>
     </div>
   );
 });
diff --git a/frontend/components/v2/V2List.tsx b/frontend/components/v2/V2List.tsx
index cd615239..a8733fbc 100644
--- a/frontend/components/v2/V2List.tsx
+++ b/frontend/components/v2/V2List.tsx
@@ -134,7 +134,7 @@ export const V2List = forwardRef<HTMLDivElement, V2ListProps>((props, ref) => {
         className="bg-muted/20 flex items-center justify-center rounded-lg border p-8"
         style={{
           width: size?.width || style?.width || "100%",
-          height: size?.height || style?.height || 400,
+          height: size?.height || style?.height || "100%",
         }}
       >
         <p className="text-muted-foreground text-sm">테이블이 설정되지 않았습니다.</p>
@@ -149,7 +149,7 @@ export const V2List = forwardRef<HTMLDivElement, V2ListProps>((props, ref) => {
       className="flex flex-col overflow-auto"
       style={{
         width: size?.width || style?.width || "100%",
-        height: size?.height || style?.height || 400,
+        height: size?.height || style?.height || "100%",
       }}
     >
       <TableListComponent
diff --git a/frontend/components/v2/V2Media.tsx b/frontend/components/v2/V2Media.tsx
index 71553651..733d6657 100644
--- a/frontend/components/v2/V2Media.tsx
+++ b/frontend/components/v2/V2Media.tsx
@@ -3,458 +3,79 @@
 /**
  * V2Media
  * 
- * 통합 미디어 컴포넌트
+ * 통합 미디어 컴포넌트 (레거시 FileUploadComponent 기능 통합)
  * - file: 파일 업로드
  * - image: 이미지 업로드/표시
  * - video: 비디오
  * - audio: 오디오
+ * 
+ * 핵심 기능:
+ * - FileViewerModal / FileManagerModal (자세히보기)
+ * - 대표 이미지 설정
+ * - 레코드 모드 (테이블/레코드 연결)
+ * - 전역 파일 상태 관리
+ * - 파일 다운로드/삭제
+ * - DB에서 기존 파일 로드
  */
 
-import React, { forwardRef, useCallback, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useRef, useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { V2MediaProps } from "@/types/v2-components";
-import { Upload, X, File, Image as ImageIcon, Video, Music, Eye, Download, Trash2 } from "lucide-react";
+import { 
+  Upload, X, File, Image as ImageIcon, Video, Music, Eye, Download, Trash2, Plus,
+  FileText, Archive, Presentation, FileImage, FileVideo, FileAudio
+} from "lucide-react";
+import { apiClient } from "@/lib/api/client";
+import { toast } from "sonner";
+import { uploadFiles, downloadFile, deleteFile, getComponentFiles } from "@/lib/api/file";
+import { GlobalFileManager } from "@/lib/api/globalFile";
+import { formatFileSize } from "@/lib/utils";
+import { useAuth } from "@/hooks/useAuth";
+
+// 레거시 모달 컴포넌트 import
+import { FileViewerModal } from "@/lib/registry/components/file-upload/FileViewerModal";
+import { FileManagerModal } from "@/lib/registry/components/file-upload/FileManagerModal";
+import type { FileInfo, FileUploadConfig } from "@/lib/registry/components/file-upload/types";
 
 /**
- * 파일 크기 포맷팅
+ * 파일 아이콘 매핑
  */
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-}
+const getFileIcon = (extension: string) => {
+  const ext = extension.toLowerCase().replace(".", "");
 
-/**
- * 파일 타입 아이콘 가져오기
- */
-function getFileIcon(type: string) {
-  if (type.startsWith("image/")) return ImageIcon;
-  if (type.startsWith("video/")) return Video;
-  if (type.startsWith("audio/")) return Music;
-  return File;
-}
-
-/**
- * 파일 업로드 컴포넌트
- */
-const FileUploader = forwardRef<HTMLDivElement, {
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
-  multiple?: boolean;
-  accept?: string;
-  maxSize?: number;
-  disabled?: boolean;
-  uploadEndpoint?: string;
-  className?: string;
-}>(({ 
-  value, 
-  onChange, 
-  multiple = false, 
-  accept = "*", 
-  maxSize = 10485760, // 10MB
-  disabled,
-  uploadEndpoint = "/api/upload",
-  className 
-}, ref) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const files = Array.isArray(value) ? value : value ? [value] : [];
-
-  // 파일 선택 핸들러
-  const handleFileSelect = useCallback(async (selectedFiles: FileList | null) => {
-    if (!selectedFiles || selectedFiles.length === 0) return;
-
-    setError(null);
-    const fileArray = Array.from(selectedFiles);
-
-    // 크기 검증
-    for (const file of fileArray) {
-      if (file.size > maxSize) {
-        setError(`파일 크기가 ${formatFileSize(maxSize)}를 초과합니다: ${file.name}`);
-        return;
-      }
-    }
-
-    setIsUploading(true);
-
-    try {
-      const uploadedUrls: string[] = [];
-
-      for (const file of fileArray) {
-        const formData = new FormData();
-        formData.append("file", file);
-
-        const response = await fetch(uploadEndpoint, {
-          method: "POST",
-          body: formData,
-        });
-
-        if (!response.ok) {
-          throw new Error(`업로드 실패: ${file.name}`);
-        }
-
-        const data = await response.json();
-        if (data.success && data.url) {
-          uploadedUrls.push(data.url);
-        } else if (data.filePath) {
-          uploadedUrls.push(data.filePath);
-        }
-      }
-
-      if (multiple) {
-        onChange?.([...files, ...uploadedUrls]);
-      } else {
-        onChange?.(uploadedUrls[0] || "");
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "업로드 중 오류가 발생했습니다");
-    } finally {
-      setIsUploading(false);
-    }
-  }, [files, multiple, maxSize, uploadEndpoint, onChange]);
-
-  // 드래그 앤 드롭 핸들러
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    handleFileSelect(e.dataTransfer.files);
-  }, [handleFileSelect]);
-
-  // 파일 삭제 핸들러
-  const handleRemove = useCallback((index: number) => {
-    const newFiles = files.filter((_, i) => i !== index);
-    onChange?.(multiple ? newFiles : "");
-  }, [files, multiple, onChange]);
-
-  return (
-    <div ref={ref} className={cn("space-y-3", className)}>
-      {/* 업로드 영역 */}
-      <div
-        className={cn(
-          "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
-          isDragging && "border-primary bg-primary/5",
-          disabled && "opacity-50 cursor-not-allowed",
-          !disabled && "cursor-pointer hover:border-primary/50"
-        )}
-        onClick={() => !disabled && inputRef.current?.click()}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-      >
-        <input
-          ref={inputRef}
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          disabled={disabled}
-          onChange={(e) => handleFileSelect(e.target.files)}
-          className="hidden"
-        />
-        
-        {isUploading ? (
-          <div className="flex flex-col items-center gap-2">
-            <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
-            <span className="text-sm text-muted-foreground">업로드 중...</span>
-          </div>
-        ) : (
-          <div className="flex flex-col items-center gap-2">
-            <Upload className="h-8 w-8 text-muted-foreground" />
-            <div className="text-sm">
-              <span className="font-medium text-primary">클릭</span>
-              <span className="text-muted-foreground"> 또는 파일을 드래그하세요</span>
-            </div>
-            <div className="text-xs text-muted-foreground">
-              최대 {formatFileSize(maxSize)}
-              {accept !== "*" && ` (${accept})`}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* 에러 메시지 */}
-      {error && (
-        <div className="text-sm text-destructive">{error}</div>
-      )}
-
-      {/* 업로드된 파일 목록 */}
-      {files.length > 0 && (
-        <div className="space-y-2">
-          {files.map((file, index) => (
-            <div
-              key={index}
-              className="flex items-center gap-2 p-2 bg-muted/50 rounded-md"
-            >
-              <File className="h-4 w-4 text-muted-foreground" />
-              <span className="flex-1 text-sm truncate">{file.split("/").pop()}</span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={() => handleRemove(index)}
-              >
-                <X className="h-3 w-3" />
-              </Button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-});
-FileUploader.displayName = "FileUploader";
-
-/**
- * 이미지 업로드/표시 컴포넌트
- */
-const ImageUploader = forwardRef<HTMLDivElement, {
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
-  multiple?: boolean;
-  accept?: string;
-  maxSize?: number;
-  preview?: boolean;
-  disabled?: boolean;
-  uploadEndpoint?: string;
-  className?: string;
-}>(({ 
-  value, 
-  onChange, 
-  multiple = false, 
-  accept = "image/*", 
-  maxSize = 10485760,
-  preview = true,
-  disabled,
-  uploadEndpoint = "/api/upload",
-  className 
-}, ref) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-
-  const images = Array.isArray(value) ? value : value ? [value] : [];
-
-  // 파일 선택 핸들러
-  const handleFileSelect = useCallback(async (selectedFiles: FileList | null) => {
-    if (!selectedFiles || selectedFiles.length === 0) return;
-
-    setIsUploading(true);
-
-    try {
-      const fileArray = Array.from(selectedFiles);
-      const uploadedUrls: string[] = [];
-
-      for (const file of fileArray) {
-        // 미리보기 생성
-        if (preview) {
-          const reader = new FileReader();
-          reader.onload = () => setPreviewUrl(reader.result as string);
-          reader.readAsDataURL(file);
-        }
-
-        const formData = new FormData();
-        formData.append("file", file);
-
-        const response = await fetch(uploadEndpoint, {
-          method: "POST",
-          body: formData,
-        });
-
-        if (response.ok) {
-          const data = await response.json();
-          if (data.success && data.url) {
-            uploadedUrls.push(data.url);
-          } else if (data.filePath) {
-            uploadedUrls.push(data.filePath);
-          }
-        }
-      }
-
-      if (multiple) {
-        onChange?.([...images, ...uploadedUrls]);
-      } else {
-        onChange?.(uploadedUrls[0] || "");
-      }
-    } finally {
-      setIsUploading(false);
-      setPreviewUrl(null);
-    }
-  }, [images, multiple, preview, uploadEndpoint, onChange]);
-
-  // 이미지 삭제 핸들러
-  const handleRemove = useCallback((index: number) => {
-    const newImages = images.filter((_, i) => i !== index);
-    onChange?.(multiple ? newImages : "");
-  }, [images, multiple, onChange]);
-
-  return (
-    <div ref={ref} className={cn("space-y-3", className)}>
-      {/* 이미지 미리보기 */}
-      {preview && images.length > 0 && (
-        <div className={cn(
-          "grid gap-2",
-          multiple ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4" : "grid-cols-1"
-        )}>
-          {images.map((src, index) => (
-            <div key={index} className="relative group aspect-square rounded-lg overflow-hidden border">
-              <img
-                src={src}
-                alt={`이미지 ${index + 1}`}
-                className="w-full h-full object-cover"
-              />
-              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                <Button
-                  variant="secondary"
-                  size="icon"
-                  className="h-8 w-8"
-                  onClick={() => window.open(src, "_blank")}
-                >
-                  <Eye className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="destructive"
-                  size="icon"
-                  className="h-8 w-8"
-                  onClick={() => handleRemove(index)}
-                  disabled={disabled}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* 업로드 버튼 */}
-      {(!images.length || multiple) && (
-        <div
-          className={cn(
-            "border-2 border-dashed rounded-lg p-4 text-center transition-colors",
-            isDragging && "border-primary bg-primary/5",
-            disabled && "opacity-50 cursor-not-allowed",
-            !disabled && "cursor-pointer hover:border-primary/50"
-          )}
-          onClick={() => !disabled && inputRef.current?.click()}
-          onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
-          onDragLeave={(e) => { e.preventDefault(); setIsDragging(false); }}
-          onDrop={(e) => { e.preventDefault(); setIsDragging(false); handleFileSelect(e.dataTransfer.files); }}
-        >
-          <input
-            ref={inputRef}
-            type="file"
-            accept={accept}
-            multiple={multiple}
-            disabled={disabled}
-            onChange={(e) => handleFileSelect(e.target.files)}
-            className="hidden"
-          />
-          
-          {isUploading ? (
-            <div className="flex items-center justify-center gap-2">
-              <div className="animate-spin h-5 w-5 border-2 border-primary border-t-transparent rounded-full" />
-              <span className="text-sm text-muted-foreground">업로드 중...</span>
-            </div>
-          ) : (
-            <div className="flex items-center justify-center gap-2">
-              <ImageIcon className="h-5 w-5 text-muted-foreground" />
-              <span className="text-sm text-muted-foreground">
-                이미지 {multiple ? "추가" : "선택"}
-              </span>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-});
-ImageUploader.displayName = "ImageUploader";
-
-/**
- * 비디오 컴포넌트
- */
-const VideoPlayer = forwardRef<HTMLDivElement, {
-  value?: string;
-  className?: string;
-}>(({ value, className }, ref) => {
-  if (!value) {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "aspect-video flex items-center justify-center border rounded-lg bg-muted/50",
-          className
-        )}
-      >
-        <Video className="h-8 w-8 text-muted-foreground" />
-      </div>
-    );
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
+    return <FileImage className="h-6 w-6 text-blue-500" />;
+  }
+  if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
+    return <FileVideo className="h-6 w-6 text-purple-500" />;
+  }
+  if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
+    return <FileAudio className="h-6 w-6 text-green-500" />;
+  }
+  if (["pdf"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-red-500" />;
+  }
+  if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-blue-600" />;
+  }
+  if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-green-600" />;
+  }
+  if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
+    return <Presentation className="h-6 w-6 text-orange-500" />;
+  }
+  if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
+    return <Archive className="h-6 w-6 text-gray-500" />;
   }
 
-  return (
-    <div ref={ref} className={cn("aspect-video rounded-lg overflow-hidden", className)}>
-      <video
-        src={value}
-        controls
-        className="w-full h-full object-cover"
-      />
-    </div>
-  );
-});
-VideoPlayer.displayName = "VideoPlayer";
+  return <File className="h-6 w-6 text-gray-400" />;
+};
 
 /**
- * 오디오 컴포넌트
- */
-const AudioPlayer = forwardRef<HTMLDivElement, {
-  value?: string;
-  className?: string;
-}>(({ value, className }, ref) => {
-  if (!value) {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "h-12 flex items-center justify-center border rounded-lg bg-muted/50",
-          className
-        )}
-      >
-        <Music className="h-5 w-5 text-muted-foreground" />
-      </div>
-    );
-  }
-
-  return (
-    <div ref={ref} className={cn("", className)}>
-      <audio
-        src={value}
-        controls
-        className="w-full"
-      />
-    </div>
-  );
-});
-AudioPlayer.displayName = "AudioPlayer";
-
-/**
- * 메인 V2Media 컴포넌트
+ * V2 미디어 컴포넌트 (레거시 기능 통합)
  */
 export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
   (props, ref) => {
@@ -469,67 +90,676 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
       config: configProp,
       value,
       onChange,
+      formData,
+      columnName,
+      tableName,
+      onFormDataChange,
+      isDesignMode = false,
+      isInteractive = true,
+      onUpdate,
+      ...restProps
     } = props;
 
-    // config가 없으면 기본값 사용
-    const config = configProp || { type: "image" as const };
+    // 인증 정보
+    const { user } = useAuth();
 
-    // 타입별 미디어 컴포넌트 렌더링
-    const renderMedia = () => {
-      const isDisabled = disabled || readonly;
-      const mediaType = config.type || "image";
+    // config 기본값
+    const config = configProp || { type: "file" as const };
+    const mediaType = config.type || "file";
 
-      switch (mediaType) {
-        case "file":
-          return (
-            <FileUploader
-              value={value}
-              onChange={onChange}
-              multiple={config.multiple}
-              accept={config.accept}
-              maxSize={config.maxSize}
-              disabled={isDisabled}
-              uploadEndpoint={config.uploadEndpoint}
-            />
-          );
+    // 파일 상태
+    const [uploadedFiles, setUploadedFiles] = useState<FileInfo[]>([]);
+    const [uploadStatus, setUploadStatus] = useState<"idle" | "uploading" | "success" | "error">("idle");
+    const [dragOver, setDragOver] = useState(false);
+    const [representativeImageUrl, setRepresentativeImageUrl] = useState<string | null>(null);
+    
+    // 모달 상태
+    const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
+    const [isViewerOpen, setIsViewerOpen] = useState(false);
+    const [isFileManagerOpen, setIsFileManagerOpen] = useState(false);
+    
+    const fileInputRef = useRef<HTMLInputElement>(null);
 
-        case "image":
-          return (
-            <ImageUploader
-              value={value}
-              onChange={onChange}
-              multiple={config.multiple}
-              accept={config.accept || "image/*"}
-              maxSize={config.maxSize}
-              preview={config.preview}
-              disabled={isDisabled}
-              uploadEndpoint={config.uploadEndpoint}
-            />
-          );
+    // 레코드 모드 판단
+    const isRecordMode = !!(formData?.id && !String(formData.id).startsWith('temp_'));
+    const recordTableName = formData?.tableName || tableName;
+    const recordId = formData?.id;
+    // 🔑 columnName 우선 사용 (실제 DB 컬럼명), 없으면 id, 최후에 attachments
+    const effectiveColumnName = columnName || id || 'attachments';
 
-        case "video":
-          return (
-            <VideoPlayer
-              value={typeof value === "string" ? value : value?.[0]}
-            />
-          );
-
-        case "audio":
-          return (
-            <AudioPlayer
-              value={typeof value === "string" ? value : value?.[0]}
-            />
-          );
-
-        default:
-          return (
-            <FileUploader
-              value={value}
-              onChange={onChange}
-              disabled={isDisabled}
-            />
-          );
+    // 레코드용 targetObjid 생성
+    const getRecordTargetObjid = useCallback(() => {
+      if (isRecordMode && recordTableName && recordId) {
+        return `${recordTableName}:${recordId}:${effectiveColumnName}`;
       }
+      return null;
+    }, [isRecordMode, recordTableName, recordId, effectiveColumnName]);
+
+    // 레코드별 고유 키 생성
+    const getUniqueKey = useCallback(() => {
+      if (isRecordMode && recordTableName && recordId) {
+        return `v2media_${recordTableName}_${recordId}_${id}`;
+      }
+      return `v2media_${id}`;
+    }, [isRecordMode, recordTableName, recordId, id]);
+
+    // 레코드 ID 변경 시 파일 목록 초기화
+    const prevRecordIdRef = useRef<any>(null);
+    useEffect(() => {
+      if (prevRecordIdRef.current !== recordId) {
+        prevRecordIdRef.current = recordId;
+        if (isRecordMode) {
+          setUploadedFiles([]);
+        }
+      }
+    }, [recordId, isRecordMode]);
+
+    // 컴포넌트 마운트 시 localStorage에서 파일 복원
+    useEffect(() => {
+      if (!id) return;
+
+      try {
+        const backupKey = getUniqueKey();
+        const backupFiles = localStorage.getItem(backupKey);
+        if (backupFiles) {
+          const parsedFiles = JSON.parse(backupFiles);
+          if (parsedFiles.length > 0) {
+            setUploadedFiles(parsedFiles);
+            
+            if (typeof window !== "undefined") {
+              (window as any).globalFileState = {
+                ...(window as any).globalFileState,
+                [backupKey]: parsedFiles,
+              };
+            }
+          }
+        }
+      } catch (e) {
+        console.warn("파일 복원 실패:", e);
+      }
+    }, [id, getUniqueKey, recordId]);
+
+    // DB에서 파일 목록 로드
+    const loadComponentFiles = useCallback(async () => {
+      if (!id) return false;
+
+      try {
+        let screenId = formData?.screenId;
+        
+        if (!screenId && typeof window !== "undefined") {
+          const pathname = window.location.pathname;
+          const screenMatch = pathname.match(/\/screens\/(\d+)/);
+          if (screenMatch) {
+            screenId = parseInt(screenMatch[1]);
+          }
+        }
+
+        if (!screenId && isDesignMode) {
+          screenId = 999999;
+        }
+
+        if (!screenId) {
+          screenId = 0;
+        }
+
+        const params = {
+          screenId,
+          componentId: id,
+          tableName: recordTableName || formData?.tableName || tableName,
+          recordId: recordId || formData?.id,
+          columnName: effectiveColumnName,
+        };
+
+        const response = await getComponentFiles(params);
+
+        if (response.success) {
+          const formattedFiles = response.totalFiles.map((file: any) => ({
+            objid: file.objid || file.id,
+            savedFileName: file.savedFileName || file.saved_file_name,
+            realFileName: file.realFileName || file.real_file_name,
+            fileSize: file.fileSize || file.file_size,
+            fileExt: file.fileExt || file.file_ext,
+            regdate: file.regdate,
+            status: file.status || "ACTIVE",
+            uploadedAt: file.uploadedAt || new Date().toISOString(),
+            targetObjid: file.targetObjid || file.target_objid,
+            filePath: file.filePath || file.file_path,
+            ...file,
+          }));
+
+          // localStorage와 병합
+          let finalFiles = formattedFiles;
+          const uniqueKey = getUniqueKey();
+          try {
+            const backupFiles = localStorage.getItem(uniqueKey);
+            if (backupFiles) {
+              const parsedBackupFiles = JSON.parse(backupFiles);
+              const serverObjIds = new Set(formattedFiles.map((f: any) => f.objid));
+              const additionalFiles = parsedBackupFiles.filter((f: any) => !serverObjIds.has(f.objid));
+              finalFiles = [...formattedFiles, ...additionalFiles];
+            }
+          } catch (e) {
+            console.warn("파일 병합 오류:", e);
+          }
+
+          setUploadedFiles(finalFiles);
+
+          if (typeof window !== "undefined") {
+            (window as any).globalFileState = {
+              ...(window as any).globalFileState,
+              [uniqueKey]: finalFiles,
+            };
+
+            GlobalFileManager.registerFiles(finalFiles, {
+              uploadPage: window.location.pathname,
+              componentId: id,
+              screenId: formData?.screenId,
+              recordId: recordId,
+            });
+
+            try {
+              localStorage.setItem(uniqueKey, JSON.stringify(finalFiles));
+            } catch (e) {
+              console.warn("localStorage 백업 실패:", e);
+            }
+          }
+          return true;
+        }
+      } catch (error) {
+        console.error("파일 조회 오류:", error);
+      }
+      return false;
+    }, [id, tableName, columnName, formData?.screenId, formData?.tableName, formData?.id, getUniqueKey, recordId, isRecordMode, recordTableName, effectiveColumnName, isDesignMode]);
+
+    // 파일 동기화
+    useEffect(() => {
+      loadComponentFiles();
+    }, [loadComponentFiles]);
+
+    // 전역 상태 변경 감지
+    useEffect(() => {
+      const handleGlobalFileStateChange = (event: CustomEvent) => {
+        const { componentId, files, isRestore } = event.detail;
+
+        if (componentId === id) {
+          setUploadedFiles(files);
+
+          try {
+            const backupKey = getUniqueKey();
+            localStorage.setItem(backupKey, JSON.stringify(files));
+          } catch (e) {
+            console.warn("localStorage 백업 실패:", e);
+          }
+        }
+      };
+
+      if (typeof window !== "undefined") {
+        window.addEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+        return () => {
+          window.removeEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+        };
+      }
+    }, [id, getUniqueKey]);
+
+    // 파일 업로드 처리
+    const handleFileUpload = useCallback(
+      async (files: File[]) => {
+        if (!files.length) return;
+
+        // 중복 체크
+        const existingFileNames = uploadedFiles.map((f) => f.realFileName.toLowerCase());
+        const duplicates: string[] = [];
+        const uniqueFiles: File[] = [];
+
+        files.forEach((file) => {
+          const fileName = file.name.toLowerCase();
+          if (existingFileNames.includes(fileName)) {
+            duplicates.push(file.name);
+          } else {
+            uniqueFiles.push(file);
+          }
+        });
+
+        if (duplicates.length > 0) {
+          toast.error(`중복된 파일: ${duplicates.join(", ")}`);
+          if (uniqueFiles.length === 0) return;
+          toast.info(`${uniqueFiles.length}개의 새로운 파일만 업로드합니다.`);
+        }
+
+        const filesToUpload = uniqueFiles.length > 0 ? uniqueFiles : files;
+        setUploadStatus("uploading");
+        toast.loading("파일 업로드 중...", { id: "file-upload" });
+
+        try {
+          const effectiveTableName = recordTableName || formData?.tableName || tableName || "default_table";
+          const effectiveRecordId = recordId || formData?.id;
+          
+          let screenId = formData?.screenId;
+          if (!screenId && typeof window !== "undefined") {
+            const pathname = window.location.pathname;
+            const screenMatch = pathname.match(/\/screens\/(\d+)/);
+            if (screenMatch) {
+              screenId = parseInt(screenMatch[1]);
+            }
+          }
+
+          let targetObjid;
+          const effectiveIsRecordMode = isRecordMode || (effectiveRecordId && !String(effectiveRecordId).startsWith('temp_'));
+          
+          if (effectiveIsRecordMode && effectiveTableName && effectiveRecordId) {
+            targetObjid = `${effectiveTableName}:${effectiveRecordId}:${effectiveColumnName}`;
+          } else if (screenId) {
+            targetObjid = `screen_files:${screenId}:${id}:${effectiveColumnName}`;
+          } else {
+            targetObjid = `temp_${id}`;
+          }
+
+          const userCompanyCode = user?.companyCode || (window as any).__user__?.companyCode;
+          
+          const finalLinkedTable = effectiveIsRecordMode 
+            ? effectiveTableName 
+            : (formData?.linkedTable || effectiveTableName);
+          
+          const uploadData = {
+            autoLink: formData?.autoLink || true,
+            linkedTable: finalLinkedTable,
+            recordId: effectiveRecordId || `temp_${id}`,
+            columnName: effectiveColumnName,
+            isVirtualFileColumn: formData?.isVirtualFileColumn || true,
+            docType: config?.docType || "DOCUMENT",
+            docTypeName: config?.docTypeName || "일반 문서",
+            companyCode: userCompanyCode,
+            tableName: effectiveTableName,
+            fieldName: effectiveColumnName,
+            targetObjid: targetObjid,
+            isRecordMode: effectiveIsRecordMode,
+          };
+          
+          const response = await uploadFiles({
+            files: filesToUpload,
+            ...uploadData,
+          });
+
+          if (response.success) {
+            const fileData = response.files || (response as any).data || [];
+
+            if (fileData.length === 0) {
+              throw new Error("업로드된 파일 데이터를 받지 못했습니다.");
+            }
+
+            const newFiles = fileData.map((file: any) => ({
+              objid: file.objid || file.id,
+              savedFileName: file.saved_file_name || file.savedFileName,
+              realFileName: file.real_file_name || file.realFileName || file.name,
+              fileSize: file.file_size || file.fileSize || file.size,
+              fileExt: file.file_ext || file.fileExt || file.extension,
+              filePath: file.file_path || file.filePath || file.path,
+              docType: file.doc_type || file.docType,
+              docTypeName: file.doc_type_name || file.docTypeName,
+              targetObjid: file.target_objid || file.targetObjid,
+              parentTargetObjid: file.parent_target_objid || file.parentTargetObjid,
+              companyCode: file.company_code || file.companyCode,
+              writer: file.writer,
+              regdate: file.regdate,
+              status: file.status || "ACTIVE",
+              uploadedAt: new Date().toISOString(),
+              ...file,
+            }));
+
+            const updatedFiles = [...uploadedFiles, ...newFiles];
+            setUploadedFiles(updatedFiles);
+            setUploadStatus("success");
+
+            // localStorage 백업
+            try {
+              const backupKey = getUniqueKey();
+              localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
+            } catch (e) {
+              console.warn("localStorage 백업 실패:", e);
+            }
+
+            // 전역 상태 업데이트
+            if (typeof window !== "undefined") {
+              const globalFileState = (window as any).globalFileState || {};
+              const uniqueKey = getUniqueKey();
+              globalFileState[uniqueKey] = updatedFiles;
+              (window as any).globalFileState = globalFileState;
+
+              GlobalFileManager.registerFiles(newFiles, {
+                uploadPage: window.location.pathname,
+                componentId: id,
+                screenId: formData?.screenId,
+                recordId: recordId,
+              });
+
+              const syncEvent = new CustomEvent("globalFileStateChanged", {
+                detail: {
+                  componentId: id,
+                  uniqueKey: uniqueKey,
+                  recordId: recordId,
+                  files: updatedFiles,
+                  fileCount: updatedFiles.length,
+                  timestamp: Date.now(),
+                },
+              });
+              window.dispatchEvent(syncEvent);
+            }
+
+            // 부모 컴포넌트 업데이트
+            if (onUpdate) {
+              onUpdate({
+                uploadedFiles: updatedFiles,
+                lastFileUpdate: Date.now(),
+              });
+            }
+
+            // onChange 콜백 (objid 배열 또는 단일 값)
+            const fileIds = updatedFiles.map((f) => f.objid);
+            const finalValue = config.multiple ? fileIds : fileIds[0] || "";
+            const targetColumn = columnName || effectiveColumnName;
+            
+            console.log("📤 [V2Media] 파일 업로드 완료 - 값 전달:", {
+              columnName: targetColumn,
+              fileIds,
+              finalValue,
+              hasOnChange: !!onChange,
+              hasOnFormDataChange: !!onFormDataChange,
+            });
+
+            if (onChange) {
+              onChange(finalValue);
+            }
+
+            // 폼 데이터 업데이트 - 부모 컴포넌트 시그니처에 맞게 (fieldName, value) 형식
+            if (onFormDataChange && targetColumn) {
+              // 🔑 단일 파일: 첫 번째 objid만 전달 (DB 컬럼에 저장될 값)
+              // 복수 파일: 콤마 구분 문자열로 전달
+              const formValue = config.multiple 
+                ? fileIds.join(',') 
+                : (fileIds[0] || '');
+              
+              console.log("📝 [V2Media] formData 업데이트:", {
+                columnName: targetColumn,
+                fileIds,
+                formValue,
+                isMultiple: config.multiple,
+                isRecordMode: effectiveIsRecordMode,
+              });
+              // (fieldName: string, value: any) 형식으로 호출
+              onFormDataChange(targetColumn, formValue);
+            }
+
+            // 그리드 파일 상태 새로고침 이벤트 발생
+            if (typeof window !== "undefined") {
+              const refreshEvent = new CustomEvent("refreshFileStatus", {
+                detail: {
+                  tableName: effectiveTableName,
+                  recordId: effectiveRecordId,
+                  columnName: targetColumn,
+                  targetObjid: targetObjid,
+                  fileCount: updatedFiles.length,
+                },
+              });
+              window.dispatchEvent(refreshEvent);
+            }
+
+            toast.dismiss("file-upload");
+            toast.success(`${newFiles.length}개 파일 업로드 완료`);
+          } else {
+            throw new Error(response.message || (response as any).error || "파일 업로드 실패");
+          }
+        } catch (error) {
+          console.error("파일 업로드 오류:", error);
+          setUploadStatus("error");
+          toast.dismiss("file-upload");
+          toast.error(`업로드 오류: ${error instanceof Error ? error.message : "알 수 없는 오류"}`);
+        }
+      },
+      [config, uploadedFiles, onChange, id, getUniqueKey, recordId, isRecordMode, recordTableName, effectiveColumnName, tableName, onUpdate, onFormDataChange, user, columnName],
+    );
+
+    // 파일 뷰어 열기/닫기
+    const handleFileView = useCallback((file: FileInfo) => {
+      setViewerFile(file);
+      setIsViewerOpen(true);
+    }, []);
+
+    const handleViewerClose = useCallback(() => {
+      setIsViewerOpen(false);
+      setViewerFile(null);
+    }, []);
+
+    // 파일 다운로드
+    const handleFileDownload = useCallback(async (file: FileInfo) => {
+      try {
+        await downloadFile({
+          fileId: file.objid,
+          serverFilename: file.savedFileName,
+          originalName: file.realFileName,
+        });
+        toast.success(`${file.realFileName} 다운로드 완료`);
+      } catch (error) {
+        console.error("파일 다운로드 오류:", error);
+        toast.error("파일 다운로드 실패");
+      }
+    }, []);
+
+    // 파일 삭제
+    const handleFileDelete = useCallback(
+      async (file: FileInfo | string) => {
+        try {
+          const fileId = typeof file === "string" ? file : file.objid;
+          const fileName = typeof file === "string" ? "파일" : file.realFileName;
+          const serverFilename = typeof file === "string" ? "temp_file" : file.savedFileName;
+
+          await deleteFile(fileId, serverFilename);
+
+          const updatedFiles = uploadedFiles.filter((f) => f.objid !== fileId);
+          setUploadedFiles(updatedFiles);
+
+          // localStorage 백업
+          try {
+            const backupKey = getUniqueKey();
+            localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
+          } catch (e) {
+            console.warn("localStorage 백업 실패:", e);
+          }
+
+          // 전역 상태 업데이트
+          if (typeof window !== "undefined") {
+            const globalFileState = (window as any).globalFileState || {};
+            const uniqueKey = getUniqueKey();
+            globalFileState[uniqueKey] = updatedFiles;
+            (window as any).globalFileState = globalFileState;
+
+            const syncEvent = new CustomEvent("globalFileStateChanged", {
+              detail: {
+                componentId: id,
+                uniqueKey: uniqueKey,
+                recordId: recordId,
+                files: updatedFiles,
+                fileCount: updatedFiles.length,
+                timestamp: Date.now(),
+                action: "delete",
+              },
+            });
+            window.dispatchEvent(syncEvent);
+          }
+
+          if (onUpdate) {
+            onUpdate({
+              uploadedFiles: updatedFiles,
+              lastFileUpdate: Date.now(),
+            });
+          }
+
+          // onChange 콜백
+          const fileIds = updatedFiles.map((f) => f.objid);
+          const finalValue = config.multiple ? fileIds : fileIds[0] || "";
+          const targetColumn = columnName || effectiveColumnName;
+
+          console.log("🗑️ [V2Media] 파일 삭제 완료 - 값 전달:", {
+            columnName: targetColumn,
+            fileIds,
+            finalValue,
+          });
+
+          if (onChange) {
+            onChange(finalValue);
+          }
+
+          // 폼 데이터 업데이트 - 부모 컴포넌트 시그니처에 맞게 (fieldName, value) 형식
+          if (onFormDataChange && targetColumn) {
+            // 🔑 단일 파일: 첫 번째 objid만 전달 (DB 컬럼에 저장될 값)
+            // 복수 파일: 콤마 구분 문자열로 전달
+            const formValue = config.multiple 
+              ? fileIds.join(',') 
+              : (fileIds[0] || '');
+            
+            console.log("🗑️ [V2Media] 삭제 후 formData 업데이트:", {
+              columnName: targetColumn,
+              fileIds,
+              formValue,
+            });
+            // (fieldName: string, value: any) 형식으로 호출
+            onFormDataChange(targetColumn, formValue);
+          }
+
+          toast.success(`${fileName} 삭제 완료`);
+        } catch (error) {
+          console.error("파일 삭제 오류:", error);
+          toast.error("파일 삭제 실패");
+        }
+      },
+      [uploadedFiles, onUpdate, id, isRecordMode, onFormDataChange, recordTableName, recordId, effectiveColumnName, getUniqueKey, onChange, config.multiple, columnName],
+    );
+
+    // 대표 이미지 로드
+    const loadRepresentativeImage = useCallback(
+      async (file: FileInfo) => {
+        try {
+          const isImage = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(
+            file.fileExt.toLowerCase().replace(".", "")
+          );
+
+          if (!isImage) {
+            setRepresentativeImageUrl(null);
+            return;
+          }
+
+          if (!file.objid || file.objid === "0" || file.objid === "") {
+            setRepresentativeImageUrl(null);
+            return;
+          }
+
+          const response = await apiClient.get(`/files/download/${file.objid}`, {
+            params: { serverFilename: file.savedFileName },
+            responseType: "blob",
+          });
+
+          const blob = new Blob([response.data]);
+          const url = window.URL.createObjectURL(blob);
+          
+          if (representativeImageUrl) {
+            window.URL.revokeObjectURL(representativeImageUrl);
+          }
+
+          setRepresentativeImageUrl(url);
+        } catch (error) {
+          console.error("대표 이미지 로드 실패:", error);
+          setRepresentativeImageUrl(null);
+        }
+      },
+      [representativeImageUrl],
+    );
+
+    // 대표 이미지 설정
+    const handleSetRepresentative = useCallback(
+      async (file: FileInfo) => {
+        try {
+          const { setRepresentativeFile } = await import("@/lib/api/file");
+          await setRepresentativeFile(file.objid);
+
+          const updatedFiles = uploadedFiles.map((f) => ({
+            ...f,
+            isRepresentative: f.objid === file.objid,
+          }));
+
+          setUploadedFiles(updatedFiles);
+          loadRepresentativeImage(file);
+        } catch (e) {
+          console.error("대표 파일 설정 실패:", e);
+        }
+      },
+      [uploadedFiles, loadRepresentativeImage]
+    );
+
+    // uploadedFiles 변경 시 대표 이미지 로드
+    useEffect(() => {
+      const representativeFile = uploadedFiles.find(f => f.isRepresentative) || uploadedFiles[0];
+      if (representativeFile) {
+        loadRepresentativeImage(representativeFile);
+      } else {
+        setRepresentativeImageUrl(null);
+      }
+
+      return () => {
+        if (representativeImageUrl) {
+          window.URL.revokeObjectURL(representativeImageUrl);
+        }
+      };
+    }, [uploadedFiles]);
+
+    // 드래그 앤 드롭 핸들러
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!readonly && !disabled) {
+        setDragOver(true);
+      }
+    }, [readonly, disabled]);
+
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+    }, []);
+
+    const handleDrop = useCallback((e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+
+      if (!readonly && !disabled) {
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+          handleFileUpload(files);
+        }
+      }
+    }, [readonly, disabled, handleFileUpload]);
+
+    // 파일 선택
+    const handleFileSelect = useCallback(() => {
+      if (fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    }, []);
+
+    const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files || []);
+      if (files.length > 0) {
+        handleFileUpload(files);
+      }
+      e.target.value = '';
+    }, [handleFileUpload]);
+
+    // 파일 설정
+    const fileConfig: FileUploadConfig = {
+      accept: config.accept || "*/*",
+      multiple: config.multiple || false,
+      maxSize: config.maxSize || 10 * 1024 * 1024,
+      disabled: disabled,
+      readonly: readonly,
     };
 
     const showLabel = label && style?.labelDisplay !== false;
@@ -540,12 +770,10 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
       <div
         ref={ref}
         id={id}
-        className="flex flex-col"
-        style={{
-          width: componentWidth,
-          height: componentHeight,
-        }}
+        className="flex w-full flex-col"
+        style={{ width: componentWidth }}
       >
+        {/* 라벨 */}
         {showLabel && (
           <Label
             htmlFor={id}
@@ -555,15 +783,137 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
               fontWeight: style?.labelFontWeight,
               marginBottom: style?.labelMarginBottom,
             }}
-            className="text-sm font-medium flex-shrink-0"
+            className="text-sm font-medium shrink-0"
           >
             {label}
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
-          {renderMedia()}
+
+        {/* 메인 컨테이너 */}
+        <div 
+          className="min-h-0"
+          style={{ height: componentHeight }}
+        >
+          <div
+            className="border-border bg-card relative flex h-full w-full flex-col rounded-lg border overflow-hidden"
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            {/* 숨겨진 파일 입력 */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple={config.multiple}
+              accept={config.accept}
+              onChange={handleInputChange}
+              className="hidden"
+              disabled={disabled || readonly}
+            />
+
+            {/* 파일이 있는 경우: 대표 이미지/파일 표시 */}
+            {uploadedFiles.length > 0 ? (() => {
+              const representativeFile = uploadedFiles.find(f => f.isRepresentative) || uploadedFiles[0];
+              const isImage = representativeFile && ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(
+                representativeFile.fileExt.toLowerCase().replace(".", "")
+              );
+
+              return (
+                <>
+                  {isImage && representativeImageUrl ? (
+                    <div className="relative h-full w-full flex items-center justify-center bg-muted/10">
+                      <img
+                        src={representativeImageUrl}
+                        alt={representativeFile.realFileName}
+                        className="h-full w-full object-contain"
+                      />
+                    </div>
+                  ) : isImage && !representativeImageUrl ? (
+                    <div className="flex h-full w-full flex-col items-center justify-center">
+                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
+                      <p className="text-sm text-muted-foreground">이미지 로딩 중...</p>
+                    </div>
+                  ) : (
+                    <div className="flex h-full w-full flex-col items-center justify-center">
+                      {getFileIcon(representativeFile.fileExt)}
+                      <p className="mt-3 text-sm font-medium text-center px-4">
+                        {representativeFile.realFileName}
+                      </p>
+                      <Badge variant="secondary" className="mt-2">
+                        대표 파일
+                      </Badge>
+                    </div>
+                  )}
+                  
+                  {/* 우측 하단 자세히보기 버튼 */}
+                  <div className="absolute bottom-3 right-3">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      className="h-8 px-3 text-xs shadow-md"
+                      onClick={() => setIsFileManagerOpen(true)}
+                    >
+                      자세히보기 ({uploadedFiles.length})
+                    </Button>
+                  </div>
+                </>
+              );
+            })() : (
+              // 파일이 없는 경우: 업로드 안내
+              <div 
+                className={cn(
+                  "flex h-full w-full flex-col items-center justify-center text-muted-foreground cursor-pointer",
+                  dragOver && "border-primary bg-primary/5",
+                  (disabled || readonly) && "opacity-50 cursor-not-allowed"
+                )}
+                onClick={() => !disabled && !readonly && handleFileSelect()}
+              >
+                <Upload className="mb-3 h-12 w-12" />
+                <p className="text-sm font-medium">파일을 드래그하거나 클릭하세요</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  최대 {formatFileSize(config.maxSize || 10 * 1024 * 1024)}
+                  {config.accept && config.accept !== "*/*" && ` (${config.accept})`}
+                </p>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-4 h-8 px-3 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsFileManagerOpen(true);
+                  }}
+                  disabled={disabled || readonly}
+                >
+                  파일 관리
+                </Button>
+              </div>
+            )}
+          </div>
         </div>
+
+        {/* 파일 뷰어 모달 */}
+        <FileViewerModal
+          file={viewerFile}
+          isOpen={isViewerOpen}
+          onClose={handleViewerClose}
+          onDownload={handleFileDownload}
+          onDelete={!isDesignMode ? handleFileDelete : undefined}
+        />
+
+        {/* 파일 관리 모달 */}
+        <FileManagerModal
+          isOpen={isFileManagerOpen}
+          onClose={() => setIsFileManagerOpen(false)}
+          uploadedFiles={uploadedFiles}
+          onFileUpload={handleFileUpload}
+          onFileDownload={handleFileDownload}
+          onFileDelete={handleFileDelete}
+          onFileView={handleFileView}
+          onSetRepresentative={handleSetRepresentative}
+          config={fileConfig}
+          isDesignMode={isDesignMode}
+        />
       </div>
     );
   }
@@ -572,4 +922,3 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
 V2Media.displayName = "V2Media";
 
 export default V2Media;
-
diff --git a/frontend/components/v2/V2Repeater.tsx b/frontend/components/v2/V2Repeater.tsx
index ee80d0d7..eda9e5b2 100644
--- a/frontend/components/v2/V2Repeater.tsx
+++ b/frontend/components/v2/V2Repeater.tsx
@@ -6,7 +6,7 @@
  * 렌더링 모드:
  * - inline: 현재 테이블 컬럼 직접 입력
  * - modal: 엔티티 선택 (FK 저장) + 추가 입력 컬럼
- * 
+ *
  * RepeaterTable 및 ItemSelectionModal 재사용
  */
 
@@ -63,7 +63,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
 
   // 🆕 데이터 변경 시 자동으로 컬럼 너비 조정 트리거
   const [autoWidthTrigger, setAutoWidthTrigger] = useState(0);
-  
+
   // 소스 테이블 컬럼 라벨 매핑
   const [sourceColumnLabels, setSourceColumnLabels] = useState<Record<string, string>>({});
 
@@ -72,10 +72,10 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
 
   // 🆕 카테고리 코드 → 라벨 매핑 (RepeaterTable 표시용)
   const [categoryLabelMap, setCategoryLabelMap] = useState<Record<string, string>>({});
-  
+
   // 현재 테이블 컬럼 정보 (inputType 매핑용)
   const [currentTableColumnInfo, setCurrentTableColumnInfo] = useState<Record<string, any>>({});
-  
+
   // 동적 데이터 소스 상태
   const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({});
 
@@ -88,10 +88,9 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   // 전역 리피터 등록
   // 🆕 useCustomTable이 설정된 경우 mainTableName 사용 (실제 저장될 테이블)
   useEffect(() => {
-    const targetTableName = config.useCustomTable && config.mainTableName
-      ? config.mainTableName
-      : config.dataSource?.tableName;
-    
+    const targetTableName =
+      config.useCustomTable && config.mainTableName ? config.mainTableName : config.dataSource?.tableName;
+
     if (targetTableName) {
       if (!window.__v2RepeaterInstances) {
         window.__v2RepeaterInstances = new Set();
@@ -110,22 +109,21 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   useEffect(() => {
     const handleSaveEvent = async (event: CustomEvent) => {
       // 🆕 mainTableName이 설정된 경우 우선 사용, 없으면 dataSource.tableName 사용
-      const tableName = config.useCustomTable && config.mainTableName 
-        ? config.mainTableName 
-        : config.dataSource?.tableName;
+      const tableName =
+        config.useCustomTable && config.mainTableName ? config.mainTableName : config.dataSource?.tableName;
       const eventParentId = event.detail?.parentId;
       const mainFormData = event.detail?.mainFormData;
-      
+
       // 🆕 마스터 테이블에서 생성된 ID (FK 연결용)
       const masterRecordId = event.detail?.masterRecordId || mainFormData?.id;
-      
+
       if (!tableName || data.length === 0) {
         return;
       }
 
       // V2Repeater 저장 시작
-      const saveInfo = { 
-        tableName, 
+      const saveInfo = {
+        tableName,
         useCustomTable: config.useCustomTable,
         mainTableName: config.mainTableName,
         foreignKeyColumn: config.foreignKeyColumn,
@@ -145,10 +143,10 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         } catch {
           console.warn("테이블 컬럼 정보 조회 실패");
         }
-        
+
         for (let i = 0; i < data.length; i++) {
           const row = data[i];
-          
+
           // 내부 필드 제거
           const cleanRow = Object.fromEntries(Object.entries(row).filter(([key]) => !key.startsWith("_")));
 
@@ -157,14 +155,14 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
           if (config.useCustomTable && config.mainTableName) {
             // 커스텀 테이블: 리피터 데이터만 저장
             mergedData = { ...cleanRow };
-            
+
             // 🆕 FK 자동 연결 - foreignKeySourceColumn이 설정된 경우 해당 컬럼 값 사용
             if (config.foreignKeyColumn) {
               // foreignKeySourceColumn이 있으면 mainFormData에서 해당 컬럼 값 사용
               // 없으면 마스터 레코드 ID 사용 (기존 동작)
               const sourceColumn = config.foreignKeySourceColumn;
               let fkValue: any;
-              
+
               if (sourceColumn && mainFormData && mainFormData[sourceColumn] !== undefined) {
                 // mainFormData에서 참조 컬럼 값 가져오기
                 fkValue = mainFormData[sourceColumn];
@@ -172,18 +170,18 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
                 // 기본: 마스터 레코드 ID 사용
                 fkValue = masterRecordId;
               }
-              
+
               if (fkValue !== undefined && fkValue !== null) {
                 mergedData[config.foreignKeyColumn] = fkValue;
               }
             }
           } else {
             // 기존 방식: 메인 폼 데이터 병합
-          const { id: _mainId, ...mainFormDataWithoutId } = mainFormData || {};
+            const { id: _mainId, ...mainFormDataWithoutId } = mainFormData || {};
             mergedData = {
-            ...mainFormDataWithoutId,
-            ...cleanRow,
-          };
+              ...mainFormDataWithoutId,
+              ...cleanRow,
+            };
           }
 
           // 유효하지 않은 컬럼 제거
@@ -193,10 +191,9 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
               filteredData[key] = value;
             }
           }
-          
+
           await apiClient.post(`/table-management/tables/${tableName}/add`, filteredData);
         }
-
       } catch (error) {
         console.error("❌ V2Repeater 저장 실패:", error);
         throw error;
@@ -207,14 +204,13 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
     const unsubscribe = v2EventBus.subscribe(
       V2_EVENTS.REPEATER_SAVE,
       async (payload) => {
-        const tableName = config.useCustomTable && config.mainTableName
-          ? config.mainTableName
-          : config.dataSource?.tableName;
+        const tableName =
+          config.useCustomTable && config.mainTableName ? config.mainTableName : config.dataSource?.tableName;
         if (payload.tableName === tableName) {
           await handleSaveEvent({ detail: payload } as CustomEvent);
         }
       },
-      { componentId: `v2-repeater-${config.dataSource?.tableName}` }
+      { componentId: `v2-repeater-${config.dataSource?.tableName}` },
     );
 
     // 레거시 이벤트도 계속 지원 (점진적 마이그레이션)
@@ -223,7 +219,14 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
       unsubscribe();
       window.removeEventListener("repeaterSave" as any, handleSaveEvent);
     };
-  }, [data, config.dataSource?.tableName, config.useCustomTable, config.mainTableName, config.foreignKeyColumn, parentId]);
+  }, [
+    data,
+    config.dataSource?.tableName,
+    config.useCustomTable,
+    config.mainTableName,
+    config.foreignKeyColumn,
+    parentId,
+  ]);
 
   // 현재 테이블 컬럼 정보 로드
   useEffect(() => {
@@ -234,7 +237,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
       try {
         const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
         const columns = response.data?.data?.columns || response.data?.columns || response.data || [];
-        
+
         const columnMap: Record<string, any> = {};
         columns.forEach((col: any) => {
           const name = col.columnName || col.column_name || col.name;
@@ -320,7 +323,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
       try {
         const response = await apiClient.get(`/table-management/tables/${resolvedSourceTable}/columns`);
         const columns = response.data?.data?.columns || response.data?.columns || response.data || [];
-        
+
         const labels: Record<string, string> = {};
         const categoryCols: string[] = [];
 
@@ -364,13 +367,13 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
             calculated: true,
             width: col.width === "auto" ? undefined : col.width,
           };
-    }
-    
+        }
+
         // 일반 입력 컬럼
         let type: "text" | "number" | "date" | "select" | "category" = "text";
-      if (inputType === "number" || inputType === "decimal") type = "number";
-      else if (inputType === "date" || inputType === "datetime") type = "date";
-      else if (inputType === "code") type = "select";
+        if (inputType === "number" || inputType === "decimal") type = "number";
+        else if (inputType === "date" || inputType === "datetime") type = "date";
+        else if (inputType === "code") type = "select";
         else if (inputType === "category") type = "category"; // 🆕 카테고리 타입
 
         // 🆕 카테고리 참조 ID 가져오기 (tableName.columnName 형식)
@@ -383,19 +386,19 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
             categoryRef = `${tableName}.${col.key}`;
           }
         }
-      
-      return {
-        field: col.key,
-        label: col.title || colInfo?.displayName || col.key,
-        type,
-        editable: col.editable !== false,
-        width: col.width === "auto" ? undefined : col.width,
-        required: false,
+
+        return {
+          field: col.key,
+          label: col.title || colInfo?.displayName || col.key,
+          type,
+          editable: col.editable !== false,
+          width: col.width === "auto" ? undefined : col.width,
+          required: false,
           categoryRef, // 🆕 카테고리 참조 ID 전달
           hidden: col.hidden, // 🆕 히든 처리
           autoFill: col.autoFill, // 🆕 자동 입력 설정
-      };
-    });
+        };
+      });
   }, [config.columns, sourceColumnLabels, currentTableColumnInfo, resolvedSourceTable, config.dataSource?.tableName]);
 
   // 🆕 데이터 변경 시 카테고리 라벨 로드 (RepeaterTable 표시용)
@@ -451,26 +454,25 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   // 데이터 변경 핸들러
   const handleDataChange = useCallback(
     (newData: any[]) => {
-    setData(newData);
-    
-    // 🆕 _targetTable 메타데이터 포함하여 전달 (백엔드에서 테이블 분리용)
-    if (onDataChange) {
-      const targetTable = config.useCustomTable && config.mainTableName 
-        ? config.mainTableName 
-        : config.dataSource?.tableName;
-      
-      if (targetTable) {
-        // 각 행에 _targetTable 추가
-        const dataWithTarget = newData.map(row => ({
-          ...row,
-          _targetTable: targetTable,
-        }));
-        onDataChange(dataWithTarget);
-      } else {
-        onDataChange(newData);
+      setData(newData);
+
+      // 🆕 _targetTable 메타데이터 포함하여 전달 (백엔드에서 테이블 분리용)
+      if (onDataChange) {
+        const targetTable =
+          config.useCustomTable && config.mainTableName ? config.mainTableName : config.dataSource?.tableName;
+
+        if (targetTable) {
+          // 각 행에 _targetTable 추가
+          const dataWithTarget = newData.map((row) => ({
+            ...row,
+            _targetTable: targetTable,
+          }));
+          onDataChange(dataWithTarget);
+        } else {
+          onDataChange(newData);
+        }
       }
-    }
-    
+
       // 🆕 데이터 변경 시 자동으로 컬럼 너비 조정
       setAutoWidthTrigger((prev) => prev + 1);
     },
@@ -480,26 +482,25 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   // 행 변경 핸들러
   const handleRowChange = useCallback(
     (index: number, newRow: any) => {
-    const newData = [...data];
-    newData[index] = newRow;
-    setData(newData);
-    
-    // 🆕 _targetTable 메타데이터 포함
-    if (onDataChange) {
-      const targetTable = config.useCustomTable && config.mainTableName 
-        ? config.mainTableName 
-        : config.dataSource?.tableName;
-      
-      if (targetTable) {
-        const dataWithTarget = newData.map(row => ({
-          ...row,
-          _targetTable: targetTable,
-        }));
-        onDataChange(dataWithTarget);
-      } else {
-        onDataChange(newData);
+      const newData = [...data];
+      newData[index] = newRow;
+      setData(newData);
+
+      // 🆕 _targetTable 메타데이터 포함
+      if (onDataChange) {
+        const targetTable =
+          config.useCustomTable && config.mainTableName ? config.mainTableName : config.dataSource?.tableName;
+
+        if (targetTable) {
+          const dataWithTarget = newData.map((row) => ({
+            ...row,
+            _targetTable: targetTable,
+          }));
+          onDataChange(dataWithTarget);
+        } else {
+          onDataChange(newData);
+        }
       }
-    }
     },
     [data, onDataChange, config.useCustomTable, config.mainTableName, config.dataSource?.tableName],
   );
@@ -507,16 +508,16 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   // 행 삭제 핸들러
   const handleRowDelete = useCallback(
     (index: number) => {
-    const newData = data.filter((_, i) => i !== index);
+      const newData = data.filter((_, i) => i !== index);
       handleDataChange(newData); // 🆕 handleDataChange 사용
-    
-    // 선택 상태 업데이트
-    const newSelected = new Set<number>();
-    selectedRows.forEach((i) => {
-      if (i < index) newSelected.add(i);
-      else if (i > index) newSelected.add(i - 1);
-    });
-    setSelectedRows(newSelected);
+
+      // 선택 상태 업데이트
+      const newSelected = new Set<number>();
+      selectedRows.forEach((i) => {
+        if (i < index) newSelected.add(i);
+        else if (i > index) newSelected.add(i - 1);
+      });
+      setSelectedRows(newSelected);
     },
     [data, selectedRows, handleDataChange],
   );
@@ -535,30 +536,30 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
       if (!col.autoFill || col.autoFill.type === "none") return undefined;
 
       const now = new Date();
-      
+
       switch (col.autoFill.type) {
         case "currentDate":
           return now.toISOString().split("T")[0]; // YYYY-MM-DD
-        
+
         case "currentDateTime":
           return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
-        
+
         case "sequence":
           return rowIndex + 1; // 1부터 시작하는 순번
-        
+
         case "numbering":
           // 채번은 별도 비동기 처리 필요
           return null; // null 반환하여 비동기 처리 필요함을 표시
-        
+
         case "fromMainForm":
           if (col.autoFill.sourceField && mainFormData) {
             return mainFormData[col.autoFill.sourceField];
           }
           return "";
-        
+
         case "fixed":
           return col.autoFill.fixedValue ?? "";
-        
+
         default:
           return undefined;
       }
@@ -567,19 +568,23 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   );
 
   // 🆕 채번 API 호출 (비동기)
-  const generateNumberingCode = useCallback(async (ruleId: string): Promise<string> => {
-    try {
-      const result = await allocateNumberingCode(ruleId);
-      if (result.success && result.data?.generatedCode) {
-        return result.data.generatedCode;
+  // 🆕 수동 입력 부분 지원을 위해 userInputCode 파라미터 추가
+  const generateNumberingCode = useCallback(
+    async (ruleId: string, userInputCode?: string, formData?: Record<string, any>): Promise<string> => {
+      try {
+        const result = await allocateNumberingCode(ruleId, userInputCode, formData);
+        if (result.success && result.data?.generatedCode) {
+          return result.data.generatedCode;
+        }
+        console.error("채번 실패:", result.error);
+        return "";
+      } catch (error) {
+        console.error("채번 API 호출 실패:", error);
+        return "";
       }
-      console.error("채번 실패:", result.error);
-      return "";
-    } catch (error) {
-      console.error("채번 API 호출 실패:", error);
-      return "";
-    }
-  }, []);
+    },
+    [],
+  );
 
   // 🆕 행 추가 (inline 모드 또는 모달 열기) - 비동기로 변경
   const handleAddRow = useCallback(async () => {
@@ -588,7 +593,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
     } else {
       const newRow: any = { _id: `new_${Date.now()}` };
       const currentRowCount = data.length;
-      
+
       // 먼저 동기적 자동 입력 값 적용
       for (const col of config.columns) {
         const autoValue = generateAutoFillValueSync(col, currentRowCount);
@@ -598,10 +603,10 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         } else if (autoValue !== undefined) {
           newRow[col.key] = autoValue;
         } else {
-        newRow[col.key] = "";
+          newRow[col.key] = "";
         }
       }
-      
+
       const newData = [...data, newRow];
       handleDataChange(newData);
     }
@@ -610,23 +615,23 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   // 모달에서 항목 선택 - 비동기로 변경
   const handleSelectItems = useCallback(
     async (items: Record<string, unknown>[]) => {
-    const fkColumn = config.dataSource?.foreignKey;
+      const fkColumn = config.dataSource?.foreignKey;
       const currentRowCount = data.length;
 
       // 채번이 필요한 컬럼 찾기
       const numberingColumns = config.columns.filter(
-        (col) => !col.isSourceDisplay && col.autoFill?.type === "numbering" && col.autoFill.numberingRuleId
+        (col) => !col.isSourceDisplay && col.autoFill?.type === "numbering" && col.autoFill.numberingRuleId,
       );
-    
+
       const newRows = await Promise.all(
         items.map(async (item, index) => {
-      const row: any = { _id: `new_${Date.now()}_${Math.random()}` };
-      
+          const row: any = { _id: `new_${Date.now()}_${Math.random()}` };
+
           // FK 값 저장 (resolvedReferenceKey 사용)
           if (fkColumn && item[resolvedReferenceKey]) {
             row[fkColumn] = item[resolvedReferenceKey];
-      }
-      
+          }
+
           // 모든 컬럼 처리 (순서대로)
           for (const col of config.columns) {
             if (col.isSourceDisplay) {
@@ -642,20 +647,28 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
                 row[col.key] = autoValue;
               } else if (row[col.key] === undefined) {
                 // 입력 컬럼: 빈 값으로 초기화
-          row[col.key] = "";
-        }
+                row[col.key] = "";
+              }
             }
           }
-      
-      return row;
-        })
+
+          return row;
+        }),
       );
-    
-    const newData = [...data, ...newRows];
+
+      const newData = [...data, ...newRows];
       handleDataChange(newData);
-    setModalOpen(false);
+      setModalOpen(false);
     },
-    [config.dataSource?.foreignKey, resolvedReferenceKey, config.columns, data, handleDataChange, generateAutoFillValueSync, generateNumberingCode],
+    [
+      config.dataSource?.foreignKey,
+      resolvedReferenceKey,
+      config.columns,
+      data,
+      handleDataChange,
+      generateAutoFillValueSync,
+      generateNumberingCode,
+    ],
   );
 
   // 소스 컬럼 목록 (모달용) - 🆕 columns 배열에서 isSourceDisplay인 것만 필터링
@@ -669,19 +682,19 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   // 🆕 beforeFormSave 이벤트에서 채번 placeholder를 실제 값으로 변환
   const dataRef = useRef(data);
   dataRef.current = data;
-  
+
   useEffect(() => {
     const handleBeforeFormSave = async (event: Event) => {
       const customEvent = event as CustomEvent;
       const formData = customEvent.detail?.formData;
-      
+
       if (!formData || !dataRef.current.length) return;
 
       // 채번 placeholder가 있는 행들을 찾아서 실제 값으로 변환
       const processedData = await Promise.all(
         dataRef.current.map(async (row) => {
           const newRow = { ...row };
-          
+
           for (const key of Object.keys(newRow)) {
             const value = newRow[key];
             if (typeof value === "string" && value.startsWith("__NUMBERING_RULE__")) {
@@ -690,7 +703,8 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
               if (match) {
                 const ruleId = match[1];
                 try {
-                  const result = await allocateNumberingCode(ruleId);
+                  // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
+                  const result = await allocateNumberingCode(ruleId, undefined, newRow);
                   if (result.success && result.data?.generatedCode) {
                     newRow[key] = result.data.generatedCode;
                   } else {
@@ -704,16 +718,16 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
               }
             }
           }
-          
+
           return newRow;
         }),
       );
-      
+
       // 처리된 데이터를 formData에 추가
       const fieldName = config.fieldName || "repeaterData";
       formData[fieldName] = processedData;
     };
-    
+
     // V2 EventBus 구독
     const unsubscribe = v2EventBus.subscribe(
       V2_EVENTS.FORM_SAVE_COLLECT,
@@ -724,12 +738,12 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         } as CustomEvent;
         await handleBeforeFormSave(fakeEvent);
       },
-      { componentId: `v2-repeater-${config.dataSource?.tableName}` }
+      { componentId: `v2-repeater-${config.dataSource?.tableName}` },
     );
 
     // 레거시 이벤트도 계속 지원 (점진적 마이그레이션)
     window.addEventListener("beforeFormSave", handleBeforeFormSave);
-    
+
     return () => {
       unsubscribe();
       window.removeEventListener("beforeFormSave", handleBeforeFormSave);
@@ -742,20 +756,20 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
     const handleComponentDataTransfer = async (event: Event) => {
       const customEvent = event as CustomEvent;
       const { targetComponentId, data: transferData, mappingRules, mode } = customEvent.detail || {};
-      
+
       // 이 컴포넌트가 대상인지 확인
       if (targetComponentId !== parentId && targetComponentId !== config.fieldName) {
         return;
       }
-      
+
       if (!transferData || transferData.length === 0) {
         return;
       }
-      
+
       // 데이터 매핑 처리
       const mappedData = transferData.map((item: any, index: number) => {
         const newRow: any = { _id: `transfer_${Date.now()}_${index}` };
-        
+
         if (mappingRules && mappingRules.length > 0) {
           // 매핑 규칙이 있으면 적용
           mappingRules.forEach((rule: any) => {
@@ -765,10 +779,10 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
           // 매핑 규칙 없으면 그대로 복사
           Object.assign(newRow, item);
         }
-        
+
         return newRow;
       });
-      
+
       // mode에 따라 데이터 처리
       if (mode === "replace") {
         handleDataChange(mappedData);
@@ -782,20 +796,20 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         handleDataChange([...data, ...mappedData]);
       }
     };
-    
+
     // splitPanelDataTransfer: 분할 패널에서 전역 이벤트로 전달
     const handleSplitPanelDataTransfer = async (event: Event) => {
       const customEvent = event as CustomEvent;
       const { data: transferData, mappingRules, mode, sourcePosition } = customEvent.detail || {};
-      
+
       if (!transferData || transferData.length === 0) {
         return;
       }
-      
+
       // 데이터 매핑 처리
       const mappedData = transferData.map((item: any, index: number) => {
         const newRow: any = { _id: `transfer_${Date.now()}_${index}` };
-        
+
         if (mappingRules && mappingRules.length > 0) {
           mappingRules.forEach((rule: any) => {
             newRow[rule.targetField] = item[rule.sourceField];
@@ -803,10 +817,10 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         } else {
           Object.assign(newRow, item);
         }
-        
+
         return newRow;
       });
-      
+
       // mode에 따라 데이터 처리
       if (mode === "replace") {
         handleDataChange(mappedData);
@@ -814,7 +828,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         handleDataChange([...data, ...mappedData]);
       }
     };
-    
+
     // V2 EventBus 구독
     const unsubscribeComponent = v2EventBus.subscribe(
       V2_EVENTS.COMPONENT_DATA_TRANSFER,
@@ -829,7 +843,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         } as CustomEvent;
         handleComponentDataTransfer(fakeEvent);
       },
-      { componentId: `v2-repeater-${config.dataSource?.tableName}` }
+      { componentId: `v2-repeater-${config.dataSource?.tableName}` },
     );
 
     const unsubscribeSplitPanel = v2EventBus.subscribe(
@@ -844,13 +858,13 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         } as CustomEvent;
         handleSplitPanelDataTransfer(fakeEvent);
       },
-      { componentId: `v2-repeater-${config.dataSource?.tableName}` }
+      { componentId: `v2-repeater-${config.dataSource?.tableName}` },
     );
 
     // 레거시 이벤트도 계속 지원 (점진적 마이그레이션)
     window.addEventListener("componentDataTransfer", handleComponentDataTransfer as EventListener);
     window.addEventListener("splitPanelDataTransfer", handleSplitPanelDataTransfer as EventListener);
-    
+
     return () => {
       unsubscribeComponent();
       unsubscribeSplitPanel();
@@ -926,11 +940,7 @@ V2Repeater.displayName = "V2Repeater";
 // V2ErrorBoundary로 래핑된 안전한 버전 export
 export const SafeV2Repeater: React.FC<V2RepeaterProps> = (props) => {
   return (
-    <V2ErrorBoundary
-      componentId={props.parentId || "v2-repeater"}
-      componentType="V2Repeater"
-      fallbackStyle="compact"
-    >
+    <V2ErrorBoundary componentId={props.parentId || "v2-repeater"} componentType="V2Repeater" fallbackStyle="compact">
       <V2Repeater {...props} />
     </V2ErrorBoundary>
   );
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index 31c5ba2a..832f2ddb 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -42,6 +42,7 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
   allowClear?: boolean;
   disabled?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }>(({ 
   options, 
   value, 
@@ -52,7 +53,8 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
   maxSelect,
   allowClear = true,
   disabled, 
-  className 
+  className,
+  style,
 }, ref) => {
   const [open, setOpen] = useState(false);
 
@@ -64,7 +66,8 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
         onValueChange={(v) => onChange?.(v)}
         disabled={disabled}
       >
-        <SelectTrigger ref={ref} className={cn("h-10", className)}>
+        {/* SelectTrigger에 style로 직접 height 전달 (Radix Select.Root는 DOM 없어서 h-full 체인 끊김) */}
+        <SelectTrigger ref={ref} className={cn("w-full", className)} style={style}>
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>
@@ -112,13 +115,21 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
+        {/* Button에 style로 직접 height 전달 (Popover도 DOM 체인 끊김) */}
         <Button
           ref={ref}
           variant="outline"
           role="combobox"
           aria-expanded={open}
           disabled={disabled}
-          className={cn("h-10 w-full justify-between font-normal", className)}
+          className={cn(
+            "w-full justify-between font-normal",
+            "bg-transparent hover:bg-transparent", // 표준 Select와 동일한 투명 배경
+            "border-input shadow-xs", // 표준 Select와 동일한 테두리
+            "h-6 px-2 py-0 text-sm", // 표준 Select xs와 동일한 높이
+            className,
+          )}
+          style={style}
         >
           <span className="truncate flex-1 text-left">
             {selectedLabels.length > 0
@@ -297,6 +308,127 @@ const TagSelect = forwardRef<HTMLDivElement, {
 });
 TagSelect.displayName = "TagSelect";
 
+/**
+ * 태그박스 선택 컴포넌트 (태그 형태 + 체크박스 드롭다운)
+ * - 선택된 값들이 태그(Badge)로 표시됨
+ * - 클릭하면 체크박스 목록이 드롭다운으로 열림
+ */
+const TagboxSelect = forwardRef<HTMLDivElement, {
+  options: SelectOption[];
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  maxSelect?: number;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}>(({ options, value = [], onChange, placeholder = "선택하세요", maxSelect, disabled, className, style }, ref) => {
+  const [open, setOpen] = useState(false);
+
+  // 선택된 옵션들의 라벨 가져오기
+  const selectedOptions = useMemo(() => 
+    options.filter((o) => value.includes(o.value)),
+    [options, value]
+  );
+
+  // 체크박스 토글 핸들러
+  const handleToggle = useCallback((optionValue: string) => {
+    const isSelected = value.includes(optionValue);
+    if (isSelected) {
+      onChange?.(value.filter((v) => v !== optionValue));
+    } else {
+      if (maxSelect && value.length >= maxSelect) return;
+      onChange?.([...value, optionValue]);
+    }
+  }, [value, maxSelect, onChange]);
+
+  // 태그 제거 핸들러
+  const handleRemove = useCallback((e: React.MouseEvent, optionValue: string) => {
+    e.stopPropagation();
+    onChange?.(value.filter((v) => v !== optionValue));
+  }, [value, onChange]);
+
+  // 🔧 높이 처리: style.height가 있으면 minHeight로 사용 (기본 40px 보장)
+  const triggerStyle: React.CSSProperties = {
+    minHeight: style?.height || 40,
+    height: style?.height || "auto",
+    maxWidth: "100%", // 🔧 부모 컨테이너를 넘지 않도록
+  };
+
+  return (
+    <div ref={ref} className={cn("w-full max-w-full overflow-hidden", className)} style={{ width: style?.width }}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <div
+            className={cn(
+              "flex w-full max-w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer overflow-hidden",
+              "hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+            style={triggerStyle}
+          >
+            {selectedOptions.length > 0 ? (
+              <>
+                {selectedOptions.map((option) => (
+                  <Badge
+                    key={option.value}
+                    variant="secondary"
+                    className="flex items-center gap-1 px-2 py-0.5"
+                  >
+                    {option.label}
+                    <X
+                      className="h-3 w-3 cursor-pointer hover:text-destructive"
+                      onClick={(e) => !disabled && handleRemove(e, option.value)}
+                    />
+                  </Badge>
+                ))}
+              </>
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+            <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent 
+          className="p-0" 
+          style={{ width: "var(--radix-popover-trigger-width)" }} 
+          align="start"
+        >
+          <div className="max-h-[300px] overflow-auto p-2">
+            {options.map((option) => {
+              const isSelected = value.includes(option.value);
+              return (
+                <div
+                  key={option.value}
+                  className={cn(
+                    "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    isSelected && "bg-accent/50"
+                  )}
+                  onClick={() => !disabled && handleToggle(option.value)}
+                >
+                  <Checkbox
+                    checked={isSelected}
+                    disabled={disabled}
+                    className="pointer-events-none"
+                  />
+                  <span>{option.label}</span>
+                </div>
+              );
+            })}
+            {options.length === 0 && (
+              <div className="py-2 text-center text-sm text-muted-foreground">
+                옵션이 없습니다
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});
+TagboxSelect.displayName = "TagboxSelect";
+
 /**
  * 토글 선택 컴포넌트 (Boolean용)
  */
@@ -368,9 +500,9 @@ const SwapSelect = forwardRef<HTMLDivElement, {
   return (
     <div ref={ref} className={cn("flex gap-2 items-stretch", className)}>
       {/* 왼쪽: 선택 가능 */}
-      <div className="flex-1 border rounded-md">
-        <div className="p-2 bg-muted text-xs font-medium border-b">선택 가능</div>
-        <div className="p-2 space-y-1 max-h-40 overflow-y-auto">
+      <div className="flex-1 border rounded-md flex flex-col min-h-0">
+        <div className="p-2 bg-muted text-xs font-medium border-b shrink-0">선택 가능</div>
+        <div className="p-2 space-y-1 flex-1 overflow-y-auto min-h-0">
           {available.map((option) => (
             <div
               key={option.value}
@@ -412,9 +544,9 @@ const SwapSelect = forwardRef<HTMLDivElement, {
       </div>
 
       {/* 오른쪽: 선택됨 */}
-      <div className="flex-1 border rounded-md">
-        <div className="p-2 bg-primary/10 text-xs font-medium border-b">선택됨</div>
-        <div className="p-2 space-y-1 max-h-40 overflow-y-auto">
+      <div className="flex-1 border rounded-md flex flex-col min-h-0">
+        <div className="p-2 bg-primary/10 text-xs font-medium border-b shrink-0">선택됨</div>
+        <div className="p-2 space-y-1 flex-1 overflow-y-auto min-h-0">
           {selected.map((option) => (
             <div
               key={option.value}
@@ -456,6 +588,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
       onChange,
       tableName,
       columnName,
+      isDesignMode, // 🔧 디자인 모드 (클릭 방지)
     } = props;
 
     // config가 없으면 기본값 사용
@@ -470,7 +603,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
     const categoryTable = (config as any).categoryTable;
     const categoryColumn = (config as any).categoryColumn;
     
-    // category 소스 유지 (category_values_test 테이블에서 로드)
+    // category 소스 유지 (category_values 테이블에서 로드)
     const source = rawSource;
     const codeGroup = config.codeGroup;
     
@@ -590,7 +723,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
               fetchedOptions = data;
             }
           } else if (source === "category") {
-            // 카테고리에서 로드 (category_values_test 테이블)
+            // 카테고리에서 로드 (category_values 테이블)
             // tableName, columnName은 props에서 가져옴
             const catTable = categoryTable || tableName;
             const catColumn = categoryColumn || columnName;
@@ -600,13 +733,13 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
               const data = response.data;
               if (data.success && data.data) {
                 // 트리 구조를 평탄화하여 옵션으로 변환
-                // value로 valueId를 사용하여 채번 규칙 매핑과 일치하도록 함
+                // 🔧 value로 valueCode를 사용 (커스텀 테이블 저장/조회 호환)
                 const flattenTree = (items: { valueId: number; valueCode: string; valueLabel: string; children?: any[] }[], depth: number = 0): SelectOption[] => {
                   const result: SelectOption[] = [];
                   for (const item of items) {
                     const prefix = depth > 0 ? "  ".repeat(depth) + "└ " : "";
                     result.push({
-                      value: String(item.valueId), // valueId를 value로 사용 (채번 매핑과 일치)
+                      value: item.valueCode, // 🔧 valueCode를 value로 사용
                       label: prefix + item.valueLabel,
                     });
                     if (item.children && item.children.length > 0) {
@@ -634,7 +767,6 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
               }
             } else if (!isValidColumnName) {
               // columnName이 없거나 유효하지 않으면 빈 옵션
-              console.warn("V2Select: 유효한 columnName이 없어 옵션을 로드하지 않습니다.", { tableName, columnName });
             }
           }
 
@@ -654,24 +786,73 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
     // 모드별 컴포넌트 렌더링
     const renderSelect = () => {
       if (loading) {
-        return <div className="h-10 flex items-center text-sm text-muted-foreground">로딩 중...</div>;
+        return <div className="h-full flex items-center text-sm text-muted-foreground">로딩 중...</div>;
       }
 
       const isDisabled = disabled || readonly;
+      
+      // 명시적 높이가 있을 때만 style 전달, 없으면 undefined (기본 높이 h-6 사용)
+      const heightStyle: React.CSSProperties | undefined = componentHeight 
+        ? { height: componentHeight }
+        : undefined;
+
+      // 🔧 디자인 모드용: 옵션이 없고 dropdown/combobox가 아닌 모드일 때 source 정보 표시
+      const nonDropdownModes = ["radio", "check", "checkbox", "tag", "tagbox", "toggle", "swap"];
+      if (options.length === 0 && nonDropdownModes.includes(config.mode || "dropdown")) {
+        // 데이터 소스 정보 기반 메시지 생성
+        let sourceInfo = "";
+        if (source === "static") {
+          sourceInfo = "정적 옵션 설정 필요";
+        } else if (source === "code") {
+          sourceInfo = codeGroup ? `공통코드: ${codeGroup}` : "공통코드 설정 필요";
+        } else if (source === "entity") {
+          sourceInfo = entityTable ? `엔티티: ${entityTable}` : "엔티티 설정 필요";
+        } else if (source === "category") {
+          const catInfo = categoryTable || tableName || columnName;
+          sourceInfo = catInfo ? `카테고리: ${catInfo}` : "카테고리 설정 필요";
+        } else if (source === "db") {
+          sourceInfo = table ? `테이블: ${table}` : "테이블 설정 필요";
+        } else if (!source || source === "distinct") {
+          // distinct 또는 미설정인 경우 - 컬럼명 기반으로 표시
+          sourceInfo = columnName ? `컬럼: ${columnName}` : "데이터 소스 설정 필요";
+        } else {
+          sourceInfo = `소스: ${source}`;
+        }
+
+        // 모드 이름 한글화
+        const modeNames: Record<string, string> = {
+          radio: "라디오",
+          check: "체크박스", 
+          checkbox: "체크박스",
+          tag: "태그",
+          tagbox: "태그박스",
+          toggle: "토글",
+          swap: "스왑",
+        };
+        const modeName = modeNames[config.mode || ""] || config.mode;
+
+        return (
+          <div className="h-full flex items-center justify-center text-xs text-muted-foreground border border-dashed rounded p-2">
+            <span className="opacity-70">[{modeName}] {sourceInfo}</span>
+          </div>
+        );
+      }
 
       switch (config.mode) {
         case "dropdown":
+        case "combobox": // 🔧 콤보박스는 검색 가능한 드롭다운
           return (
             <DropdownSelect
               options={options}
               value={value}
               onChange={onChange}
               placeholder="선택"
-              searchable={config.searchable}
+              searchable={config.mode === "combobox" ? true : config.searchable}
               multiple={config.multiple}
               maxSelect={config.maxSelect}
               allowClear={config.allowClear}
               disabled={isDisabled}
+              style={heightStyle}
             />
           );
 
@@ -686,6 +867,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
           );
 
         case "check":
+        case "checkbox": // 🔧 기존 저장된 값 호환
           return (
             <CheckSelect
               options={options}
@@ -707,6 +889,19 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
             />
           );
 
+        case "tagbox":
+          return (
+            <TagboxSelect
+              options={options}
+              value={Array.isArray(value) ? value : value ? [value] : []}
+              onChange={onChange}
+              placeholder={config.placeholder || "선택하세요"}
+              maxSelect={config.maxSelect}
+              disabled={isDisabled}
+              style={heightStyle}
+            />
+          );
+
         case "toggle":
           return (
             <ToggleSelect
@@ -735,6 +930,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
               value={value}
               onChange={onChange}
               disabled={isDisabled}
+              style={heightStyle}
             />
           );
       }
@@ -744,32 +940,40 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
     const componentWidth = size?.width || style?.width;
     const componentHeight = size?.height || style?.height;
 
+    // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
+    const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+    const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+    const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
+
     return (
       <div
         ref={ref}
         id={id}
-        className="flex flex-col"
+        className={cn("relative", isDesignMode && "pointer-events-none")}
         style={{
           width: componentWidth,
           height: componentHeight,
         }}
       >
+        {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
         {showLabel && (
           <Label
             htmlFor={id}
             style={{
-              fontSize: style?.labelFontSize,
-              color: style?.labelColor,
-              fontWeight: style?.labelFontWeight,
-              marginBottom: style?.labelMarginBottom,
+              position: "absolute",
+              top: `-${estimatedLabelHeight}px`,
+              left: 0,
+              fontSize: style?.labelFontSize || "14px",
+              color: style?.labelColor || "#64748b",
+              fontWeight: style?.labelFontWeight || "500",
             }}
-            className="text-sm font-medium flex-shrink-0"
+            className="text-sm font-medium whitespace-nowrap"
           >
             {label}
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
+        <div className="h-full w-full">
           {renderSelect()}
         </div>
       </div>
diff --git a/frontend/components/v2/config-panels/V2DateConfigPanel.tsx b/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
index 1308a700..6d7ba5d7 100644
--- a/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
@@ -48,6 +48,20 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
 
       <Separator />
 
+      {/* 플레이스홀더 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">플레이스홀더</Label>
+        <Input
+          value={config.placeholder || ""}
+          onChange={(e) => updateConfig("placeholder", e.target.value)}
+          placeholder="날짜 선택"
+          className="h-8 text-xs"
+        />
+        <p className="text-muted-foreground text-[10px]">날짜가 선택되지 않았을 때 표시할 텍스트</p>
+      </div>
+
+      <Separator />
+
       {/* 표시 형식 */}
       <div className="space-y-2">
         <Label className="text-xs font-medium">표시 형식</Label>
diff --git a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
index 7092d4ab..e67accee 100644
--- a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
@@ -27,11 +27,7 @@ interface V2SelectConfigPanelProps {
   inputType?: string;
 }
 
-export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
-  config,
-  onChange,
-  inputType,
-}) => {
+export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({ config, onChange, inputType }) => {
   // 엔티티 타입인지 확인
   const isEntityType = inputType === "entity";
   // 엔티티 테이블의 컬럼 목록
@@ -55,18 +51,18 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
       const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=500`);
       const data = response.data.data || response.data;
       const columns = data.columns || data || [];
-      
+
       const columnOptions: ColumnOption[] = columns.map((col: any) => {
         const name = col.columnName || col.column_name || col.name;
         // displayName 우선 사용
         const label = col.displayName || col.display_name || col.columnLabel || col.column_label || name;
-        
+
         return {
           columnName: name,
           columnLabel: label,
         };
       });
-      
+
       setEntityColumns(columnOptions);
     } catch (error) {
       console.error("컬럼 목록 조회 실패:", error);
@@ -85,7 +81,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
 
   // 정적 옵션 관리
   const options = config.options || [];
-  
+
   const addOption = () => {
     const newOptions = [...options, { value: "", label: "" }];
     updateConfig("options", newOptions);
@@ -107,18 +103,17 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
       {/* 선택 모드 */}
       <div className="space-y-2">
         <Label className="text-xs font-medium">선택 모드</Label>
-        <Select
-          value={config.mode || "dropdown"}
-          onValueChange={(value) => updateConfig("mode", value)}
-        >
+        <Select value={config.mode || "dropdown"} onValueChange={(value) => updateConfig("mode", value)}>
           <SelectTrigger className="h-8 text-xs">
             <SelectValue placeholder="모드 선택" />
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="dropdown">드롭다운</SelectItem>
+            <SelectItem value="combobox">콤보박스 (검색)</SelectItem>
             <SelectItem value="radio">라디오 버튼</SelectItem>
             <SelectItem value="check">체크박스</SelectItem>
             <SelectItem value="tag">태그 선택</SelectItem>
+            <SelectItem value="tagbox">태그박스 (태그+드롭다운)</SelectItem>
             <SelectItem value="toggle">토글 스위치</SelectItem>
             <SelectItem value="swap">스왑 선택</SelectItem>
           </SelectContent>
@@ -130,10 +125,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
       {/* 데이터 소스 */}
       <div className="space-y-2">
         <Label className="text-xs font-medium">데이터 소스</Label>
-        <Select
-          value={config.source || "static"}
-          onValueChange={(value) => updateConfig("source", value)}
-        >
+        <Select value={config.source || "static"} onValueChange={(value) => updateConfig("source", value)}>
           <SelectTrigger className="h-8 text-xs">
             <SelectValue placeholder="소스 선택" />
           </SelectTrigger>
@@ -151,49 +143,65 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs font-medium">옵션 목록</Label>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={addOption}
-              className="h-6 px-2 text-xs"
-            >
-              <Plus className="h-3 w-3 mr-1" />
+            <Button type="button" variant="ghost" size="sm" onClick={addOption} className="h-6 px-2 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
               추가
             </Button>
           </div>
-          <div className="space-y-2 max-h-40 overflow-y-auto">
+          <div className="max-h-40 space-y-2 overflow-y-auto">
             {options.map((option: any, index: number) => (
               <div key={index} className="flex items-center gap-2">
                 <Input
                   value={option.value || ""}
                   onChange={(e) => updateOption(index, "value", e.target.value)}
                   placeholder="값"
-                  className="h-7 text-xs flex-1"
+                  className="h-7 flex-1 text-xs"
                 />
                 <Input
                   value={option.label || ""}
                   onChange={(e) => updateOption(index, "label", e.target.value)}
                   placeholder="표시 텍스트"
-                  className="h-7 text-xs flex-1"
+                  className="h-7 flex-1 text-xs"
                 />
                 <Button
                   type="button"
                   variant="ghost"
                   size="sm"
                   onClick={() => removeOption(index)}
-                  className="h-7 w-7 p-0 text-destructive"
+                  className="text-destructive h-7 w-7 p-0"
                 >
                   <Trash2 className="h-3 w-3" />
                 </Button>
               </div>
             ))}
             {options.length === 0 && (
-              <p className="text-xs text-muted-foreground text-center py-2">
-                옵션을 추가해주세요
-              </p>
+              <p className="text-muted-foreground py-2 text-center text-xs">옵션을 추가해주세요</p>
             )}
           </div>
+
+          {/* 기본값 설정 */}
+          {options.length > 0 && (
+            <div className="mt-3 border-t pt-2">
+              <Label className="text-xs font-medium">기본값</Label>
+              <Select
+                value={config.defaultValue || "_none_"}
+                onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
+              >
+                <SelectTrigger className="mt-1 h-8 text-xs">
+                  <SelectValue placeholder="기본값 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="_none_">선택 안함</SelectItem>
+                  {options.map((option: any, index: number) => (
+                    <SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
+                      {option.label || option.value || `옵션 ${index + 1}`}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 값</p>
+            </div>
+          )}
         </div>
       )}
 
@@ -202,16 +210,13 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
         <div className="space-y-1">
           <Label className="text-xs font-medium">코드 그룹</Label>
           {config.codeGroup ? (
-            <p className="text-sm font-medium text-foreground">{config.codeGroup}</p>
+            <p className="text-foreground text-sm font-medium">{config.codeGroup}</p>
           ) : (
-            <p className="text-xs text-amber-600">
-              테이블 타입 관리에서 코드 그룹을 설정해주세요
-            </p>
+            <p className="text-xs text-amber-600">테이블 타입 관리에서 코드 그룹을 설정해주세요</p>
           )}
         </div>
       )}
 
-
       {/* 엔티티(참조 테이블) 설정 */}
       {config.source === "entity" && (
         <div className="space-y-3">
@@ -222,16 +227,16 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
               readOnly
               disabled
               placeholder="테이블 타입 관리에서 설정"
-              className="h-8 text-xs bg-muted"
+              className="bg-muted h-8 text-xs"
             />
-            <p className="text-[10px] text-muted-foreground">
+            <p className="text-muted-foreground text-[10px]">
               조인할 테이블명 (테이블 타입 관리에서 설정된 경우 자동 입력됨)
             </p>
           </div>
 
           {/* 컬럼 로딩 중 표시 */}
           {loadingColumns && (
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <div className="text-muted-foreground flex items-center gap-2 text-xs">
               <Loader2 className="h-3 w-3 animate-spin" />
               컬럼 목록 로딩 중...
             </div>
@@ -265,7 +270,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
                   className="h-8 text-xs"
                 />
               )}
-              <p className="text-[10px] text-muted-foreground">저장될 값</p>
+              <p className="text-muted-foreground text-[10px]">저장될 값</p>
             </div>
             <div className="space-y-2">
               <Label className="text-xs font-medium">표시 컬럼</Label>
@@ -293,7 +298,7 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
                   className="h-8 text-xs"
                 />
               )}
-              <p className="text-[10px] text-muted-foreground">화면에 표시될 값</p>
+              <p className="text-muted-foreground text-[10px]">화면에 표시될 값</p>
             </div>
           </div>
 
@@ -311,14 +316,16 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
       {/* 추가 옵션 */}
       <div className="space-y-3">
         <Label className="text-xs font-medium">추가 옵션</Label>
-        
+
         <div className="flex items-center space-x-2">
           <Checkbox
             id="multiple"
             checked={config.multiple || false}
             onCheckedChange={(checked) => updateConfig("multiple", checked)}
           />
-          <label htmlFor="multiple" className="text-xs">다중 선택 허용</label>
+          <label htmlFor="multiple" className="text-xs">
+            다중 선택 허용
+          </label>
         </div>
 
         <div className="flex items-center space-x-2">
@@ -327,7 +334,9 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             checked={config.searchable || false}
             onCheckedChange={(checked) => updateConfig("searchable", checked)}
           />
-          <label htmlFor="searchable" className="text-xs">검색 기능</label>
+          <label htmlFor="searchable" className="text-xs">
+            검색 기능
+          </label>
         </div>
 
         <div className="flex items-center space-x-2">
@@ -336,7 +345,9 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             checked={config.allowClear !== false}
             onCheckedChange={(checked) => updateConfig("allowClear", checked)}
           />
-          <label htmlFor="allowClear" className="text-xs">값 초기화 허용</label>
+          <label htmlFor="allowClear" className="text-xs">
+            값 초기화 허용
+          </label>
         </div>
       </div>
 
diff --git a/frontend/contexts/LayerContext.tsx b/frontend/contexts/LayerContext.tsx
new file mode 100644
index 00000000..6e0f67cd
--- /dev/null
+++ b/frontend/contexts/LayerContext.tsx
@@ -0,0 +1,337 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode, useMemo } from "react";
+import { LayerDefinition, LayerType, ComponentData } from "@/types/screen-management";
+import { v4 as uuidv4 } from "uuid";
+
+interface LayerContextType {
+  // 레이어 상태
+  layers: LayerDefinition[];
+  activeLayerId: string | null;
+  activeLayer: LayerDefinition | null;
+  
+  // 레이어 관리
+  setLayers: (layers: LayerDefinition[]) => void;
+  setActiveLayerId: (id: string | null) => void;
+  addLayer: (type: LayerType, name?: string) => void;
+  removeLayer: (id: string) => void;
+  updateLayer: (id: string, updates: Partial<LayerDefinition>) => void;
+  moveLayer: (dragIndex: number, hoverIndex: number) => void;
+  toggleLayerVisibility: (id: string) => void;
+  toggleLayerLock: (id: string) => void;
+  getLayerById: (id: string) => LayerDefinition | undefined;
+  
+  // 컴포넌트 관리 (레이어별)
+  addComponentToLayer: (layerId: string, component: ComponentData) => void;
+  removeComponentFromLayer: (layerId: string, componentId: string) => void;
+  updateComponentInLayer: (layerId: string, componentId: string, updates: Partial<ComponentData>) => void;
+  moveComponentToLayer: (componentId: string, fromLayerId: string, toLayerId: string) => void;
+  
+  // 컴포넌트 조회
+  getAllComponents: () => ComponentData[];
+  getComponentById: (componentId: string) => { component: ComponentData; layerId: string } | null;
+  getComponentsInActiveLayer: () => ComponentData[];
+  
+  // 레이어 가시성 (런타임용)
+  runtimeVisibleLayers: string[];
+  setRuntimeVisibleLayers: React.Dispatch<React.SetStateAction<string[]>>;
+  showLayer: (layerId: string) => void;
+  hideLayer: (layerId: string) => void;
+  toggleLayerRuntime: (layerId: string) => void;
+}
+
+const LayerContext = createContext<LayerContextType | undefined>(undefined);
+
+export const useLayer = () => {
+  const context = useContext(LayerContext);
+  if (!context) {
+    throw new Error("useLayer must be used within a LayerProvider");
+  }
+  return context;
+};
+
+// LayerProvider가 없을 때 사용할 기본 컨텍스트 (선택적 사용)
+export const useLayerOptional = () => {
+  return useContext(LayerContext);
+};
+
+interface LayerProviderProps {
+  children: ReactNode;
+  initialLayers?: LayerDefinition[];
+  onLayersChange?: (layers: LayerDefinition[]) => void;
+  onActiveLayerChange?: (activeLayerId: string | null) => void; // 🆕 활성 레이어 변경 콜백
+}
+
+// 기본 레이어 생성 헬퍼
+export const createDefaultLayer = (components?: ComponentData[]): LayerDefinition => ({
+  id: "default-layer",
+  name: "기본 레이어",
+  type: "base",
+  zIndex: 0,
+  isVisible: true,
+  isLocked: false,
+  components: components || [],
+});
+
+export const LayerProvider: React.FC<LayerProviderProps> = ({ 
+  children, 
+  initialLayers = [],
+  onLayersChange,
+  onActiveLayerChange,
+}) => {
+  // 초기 레이어가 없으면 기본 레이어 생성
+  const effectiveInitialLayers = initialLayers.length > 0 
+    ? initialLayers 
+    : [createDefaultLayer()];
+    
+  const [layers, setLayersState] = useState<LayerDefinition[]>(effectiveInitialLayers);
+  const [activeLayerIdState, setActiveLayerIdState] = useState<string | null>(
+    effectiveInitialLayers.length > 0 ? effectiveInitialLayers[0].id : null,
+  );
+
+  // 🆕 활성 레이어 변경 시 콜백 호출
+  const setActiveLayerId = useCallback((id: string | null) => {
+    setActiveLayerIdState(id);
+    onActiveLayerChange?.(id);
+  }, [onActiveLayerChange]);
+
+  // 활성 레이어 ID (내부 상태 사용)
+  const activeLayerId = activeLayerIdState;
+  
+  // 런타임 가시성 상태 (편집기에서의 isVisible과 별개)
+  const [runtimeVisibleLayers, setRuntimeVisibleLayers] = useState<string[]>(
+    effectiveInitialLayers.filter(l => l.isVisible).map(l => l.id)
+  );
+
+  // 레이어 변경 시 콜백 호출
+  const setLayers = useCallback((newLayers: LayerDefinition[]) => {
+    setLayersState(newLayers);
+    onLayersChange?.(newLayers);
+  }, [onLayersChange]);
+
+  // 활성 레이어 계산
+  const activeLayer = useMemo(() => {
+    return layers.find(l => l.id === activeLayerId) || null;
+  }, [layers, activeLayerId]);
+
+  const addLayer = useCallback(
+    (type: LayerType, name?: string) => {
+      const newLayer: LayerDefinition = {
+        id: uuidv4(),
+        name: name || `새 레이어 ${layers.length + 1}`,
+        type,
+        zIndex: layers.length,
+        isVisible: true,
+        isLocked: false,
+        components: [],
+        // 모달/드로어 기본 설정
+        ...(type === "modal" || type === "drawer" ? {
+          overlayConfig: {
+            backdrop: true,
+            closeOnBackdropClick: true,
+            width: type === "drawer" ? "320px" : "600px",
+            height: type === "drawer" ? "100%" : "auto",
+          },
+        } : {}),
+      };
+
+      setLayers([...layers, newLayer]);
+      setActiveLayerId(newLayer.id);
+      // 새 레이어는 런타임에서도 기본적으로 표시
+      setRuntimeVisibleLayers(prev => [...prev, newLayer.id]);
+    },
+    [layers, setLayers],
+  );
+
+  const removeLayer = useCallback(
+    (id: string) => {
+      // 기본 레이어는 삭제 불가
+      const layer = layers.find(l => l.id === id);
+      if (layer?.type === "base") {
+        console.warn("기본 레이어는 삭제할 수 없습니다.");
+        return;
+      }
+      
+      const filtered = layers.filter((layer) => layer.id !== id);
+      setLayers(filtered);
+      
+      if (activeLayerId === id) {
+        setActiveLayerId(filtered.length > 0 ? filtered[0].id : null);
+      }
+      
+      setRuntimeVisibleLayers(prev => prev.filter(lid => lid !== id));
+    },
+    [layers, activeLayerId, setLayers],
+  );
+
+  const updateLayer = useCallback((id: string, updates: Partial<LayerDefinition>) => {
+    setLayers(layers.map((layer) => (layer.id === id ? { ...layer, ...updates } : layer)));
+  }, [layers, setLayers]);
+
+  const moveLayer = useCallback((dragIndex: number, hoverIndex: number) => {
+    const newLayers = [...layers];
+    const [removed] = newLayers.splice(dragIndex, 1);
+    newLayers.splice(hoverIndex, 0, removed);
+    // Update zIndex based on new order
+    setLayers(newLayers.map((layer, index) => ({ ...layer, zIndex: index })));
+  }, [layers, setLayers]);
+
+  const toggleLayerVisibility = useCallback((id: string) => {
+    setLayers(layers.map((layer) => (layer.id === id ? { ...layer, isVisible: !layer.isVisible } : layer)));
+  }, [layers, setLayers]);
+
+  const toggleLayerLock = useCallback((id: string) => {
+    setLayers(layers.map((layer) => (layer.id === id ? { ...layer, isLocked: !layer.isLocked } : layer)));
+  }, [layers, setLayers]);
+
+  const getLayerById = useCallback(
+    (id: string) => {
+      return layers.find((layer) => layer.id === id);
+    },
+    [layers],
+  );
+
+  // ===== 컴포넌트 관리 함수 =====
+  
+  const addComponentToLayer = useCallback((layerId: string, component: ComponentData) => {
+    setLayers(layers.map(layer => {
+      if (layer.id === layerId) {
+        return {
+          ...layer,
+          components: [...layer.components, component],
+        };
+      }
+      return layer;
+    }));
+  }, [layers, setLayers]);
+
+  const removeComponentFromLayer = useCallback((layerId: string, componentId: string) => {
+    setLayers(layers.map(layer => {
+      if (layer.id === layerId) {
+        return {
+          ...layer,
+          components: layer.components.filter(c => c.id !== componentId),
+        };
+      }
+      return layer;
+    }));
+  }, [layers, setLayers]);
+
+  const updateComponentInLayer = useCallback((layerId: string, componentId: string, updates: Partial<ComponentData>) => {
+    setLayers(layers.map(layer => {
+      if (layer.id === layerId) {
+        return {
+          ...layer,
+          components: layer.components.map(c => 
+            c.id === componentId ? { ...c, ...updates } as ComponentData : c
+          ),
+        };
+      }
+      return layer;
+    }));
+  }, [layers, setLayers]);
+
+  const moveComponentToLayer = useCallback((componentId: string, fromLayerId: string, toLayerId: string) => {
+    if (fromLayerId === toLayerId) return;
+    
+    const fromLayer = layers.find(l => l.id === fromLayerId);
+    const component = fromLayer?.components.find(c => c.id === componentId);
+    
+    if (!component) return;
+    
+    setLayers(layers.map(layer => {
+      if (layer.id === fromLayerId) {
+        return {
+          ...layer,
+          components: layer.components.filter(c => c.id !== componentId),
+        };
+      }
+      if (layer.id === toLayerId) {
+        return {
+          ...layer,
+          components: [...layer.components, component],
+        };
+      }
+      return layer;
+    }));
+  }, [layers, setLayers]);
+
+  // ===== 컴포넌트 조회 함수 =====
+  
+  const getAllComponents = useCallback((): ComponentData[] => {
+    return layers.flatMap(layer => layer.components);
+  }, [layers]);
+
+  const getComponentById = useCallback((componentId: string): { component: ComponentData; layerId: string } | null => {
+    for (const layer of layers) {
+      const component = layer.components.find(c => c.id === componentId);
+      if (component) {
+        return { component, layerId: layer.id };
+      }
+    }
+    return null;
+  }, [layers]);
+
+  const getComponentsInActiveLayer = useCallback((): ComponentData[] => {
+    const layer = layers.find(l => l.id === activeLayerId);
+    return layer?.components || [];
+  }, [layers, activeLayerId]);
+
+  // ===== 런타임 레이어 가시성 관리 =====
+  
+  const showLayer = useCallback((layerId: string) => {
+    setRuntimeVisibleLayers(prev => [...new Set([...prev, layerId])]);
+  }, []);
+
+  const hideLayer = useCallback((layerId: string) => {
+    setRuntimeVisibleLayers(prev => prev.filter(id => id !== layerId));
+  }, []);
+
+  const toggleLayerRuntime = useCallback((layerId: string) => {
+    setRuntimeVisibleLayers(prev => 
+      prev.includes(layerId)
+        ? prev.filter(id => id !== layerId)
+        : [...prev, layerId]
+    );
+  }, []);
+
+  return (
+    <LayerContext.Provider
+      value={{
+        // 레이어 상태
+        layers,
+        activeLayerId,
+        activeLayer,
+        
+        // 레이어 관리
+        setLayers,
+        setActiveLayerId,
+        addLayer,
+        removeLayer,
+        updateLayer,
+        moveLayer,
+        toggleLayerVisibility,
+        toggleLayerLock,
+        getLayerById,
+        
+        // 컴포넌트 관리
+        addComponentToLayer,
+        removeComponentFromLayer,
+        updateComponentInLayer,
+        moveComponentToLayer,
+        
+        // 컴포넌트 조회
+        getAllComponents,
+        getComponentById,
+        getComponentsInActiveLayer,
+        
+        // 런타임 가시성
+        runtimeVisibleLayers,
+        setRuntimeVisibleLayers,
+        showLayer,
+        hideLayer,
+        toggleLayerRuntime,
+      }}
+    >
+      {children}
+    </LayerContext.Provider>
+  );
+};
diff --git a/frontend/lib/api/categoryTree.ts b/frontend/lib/api/categoryTree.ts
index 720cb99d..ac429607 100644
--- a/frontend/lib/api/categoryTree.ts
+++ b/frontend/lib/api/categoryTree.ts
@@ -41,6 +41,7 @@ export interface CreateCategoryValueInput {
   icon?: string;
   isActive?: boolean;
   isDefault?: boolean;
+  targetCompanyCode?: string; // 저장할 회사 코드 (최고 관리자가 회사 선택 시)
 }
 
 // 카테고리 값 수정 입력
diff --git a/frontend/lib/api/client.ts b/frontend/lib/api/client.ts
index 9b5b7aea..8867f96f 100644
--- a/frontend/lib/api/client.ts
+++ b/frontend/lib/api/client.ts
@@ -62,7 +62,10 @@ export const getFullImageUrl = (imagePath: string): string => {
     }
     
     // SSR 또는 알 수 없는 환경에서는 API_BASE_URL 사용 (fallback)
-    const baseUrl = API_BASE_URL.replace("/api", "");
+    // 주의: 프로덕션 URL이 https://api.vexplor.com/api 이므로
+    // 단순 .replace("/api", "")는 호스트명의 /api까지 제거하는 버그 발생
+    // 반드시 문자열 끝의 /api만 제거해야 함
+    const baseUrl = API_BASE_URL.replace(/\/api$/, "");
     if (baseUrl.startsWith("http://") || baseUrl.startsWith("https://")) {
       return `${baseUrl}${imagePath}`;
     }
diff --git a/frontend/lib/api/file.ts b/frontend/lib/api/file.ts
index e6cab8ae..0eaf5579 100644
--- a/frontend/lib/api/file.ts
+++ b/frontend/lib/api/file.ts
@@ -1,4 +1,4 @@
-import { apiClient } from "./client";
+import { apiClient, API_BASE_URL } from "./client";
 
 export interface FileInfo {
   id: string;
@@ -231,10 +231,10 @@ export const getLinkedFiles = async (
 
 /**
  * 파일 미리보기 URL 생성
+ * 🔑 상대 경로(/api) 대신 API_BASE_URL 사용 (Docker 환경에서 Next.js rewrite 의존 방지)
  */
 export const getFilePreviewUrl = (fileId: string): string => {
-  const baseUrl = process.env.NEXT_PUBLIC_API_URL || "/api";
-  return `${baseUrl}/files/preview/${fileId}`;
+  return `${API_BASE_URL}/files/preview/${fileId}`;
 };
 
 /**
@@ -274,7 +274,9 @@ export const getDirectFileUrl = (filePath: string): string => {
   }
   
   // SSR 또는 알 수 없는 환경에서는 환경변수 사용 (fallback)
-  const baseUrl = process.env.NEXT_PUBLIC_API_URL?.replace("/api", "") || "";
+  // 주의: 프로덕션 URL이 https://api.vexplor.com/api 이므로
+  // 단순 .replace("/api", "")는 호스트명의 /api까지 제거하는 버그 발생
+  const baseUrl = process.env.NEXT_PUBLIC_API_URL?.replace(/\/api$/, "") || "";
   if (baseUrl.startsWith("http://") || baseUrl.startsWith("https://")) {
     return `${baseUrl}${filePath}`;
   }
@@ -298,3 +300,31 @@ export const setRepresentativeFile = async (objid: string): Promise<{
     throw new Error("대표 파일 설정에 실패했습니다.");
   }
 };
+
+/**
+ * 파일 정보 조회 (메타데이터만, objid로 조회)
+ */
+export const getFileInfoByObjid = async (objid: string): Promise<{
+  success: boolean;
+  data?: {
+    objid: string;
+    realFileName: string;
+    fileSize: number;
+    fileExt: string;
+    filePath: string;
+    regdate: string;
+    isRepresentative: boolean;
+  };
+  message?: string;
+}> => {
+  try {
+    const response = await apiClient.get(`/files/info/${objid}`);
+    return response.data;
+  } catch (error) {
+    console.error("파일 정보 조회 오류:", error);
+    return {
+      success: false,
+      message: "파일 정보 조회에 실패했습니다.",
+    };
+  }
+};
diff --git a/frontend/lib/api/numberingRule.ts b/frontend/lib/api/numberingRule.ts
index 8b7f47bd..b0ec38e2 100644
--- a/frontend/lib/api/numberingRule.ts
+++ b/frontend/lib/api/numberingRule.ts
@@ -26,13 +26,9 @@ export async function getNumberingRules(): Promise<ApiResponse<NumberingRuleConf
  * @param menuObjid 현재 메뉴의 objid (선택)
  * @returns 사용 가능한 채번 규칙 목록
  */
-export async function getAvailableNumberingRules(
-  menuObjid?: number
-): Promise<ApiResponse<NumberingRuleConfig[]>> {
+export async function getAvailableNumberingRules(menuObjid?: number): Promise<ApiResponse<NumberingRuleConfig[]>> {
   try {
-    const url = menuObjid
-      ? `/numbering-rules/available/${menuObjid}`
-      : "/numbering-rules/available";
+    const url = menuObjid ? `/numbering-rules/available/${menuObjid}` : "/numbering-rules/available";
     const response = await apiClient.get(url);
     return response.data;
   } catch (error: any) {
@@ -46,7 +42,7 @@ export async function getAvailableNumberingRules(
  * @returns 해당 테이블의 채번 규칙 목록
  */
 export async function getAvailableNumberingRulesForScreen(
-  tableName: string
+  tableName: string,
 ): Promise<ApiResponse<NumberingRuleConfig[]>> {
   try {
     const response = await apiClient.get("/numbering-rules/available-for-screen", {
@@ -70,9 +66,7 @@ export async function getNumberingRuleById(ruleId: string): Promise<ApiResponse<
   }
 }
 
-export async function createNumberingRule(
-  config: NumberingRuleConfig
-): Promise<ApiResponse<NumberingRuleConfig>> {
+export async function createNumberingRule(config: NumberingRuleConfig): Promise<ApiResponse<NumberingRuleConfig>> {
   try {
     const response = await apiClient.post("/numbering-rules", config);
     return response.data;
@@ -83,7 +77,7 @@ export async function createNumberingRule(
 
 export async function updateNumberingRule(
   ruleId: string,
-  config: Partial<NumberingRuleConfig>
+  config: Partial<NumberingRuleConfig>,
 ): Promise<ApiResponse<NumberingRuleConfig>> {
   try {
     const response = await apiClient.put(`/numbering-rules/${ruleId}`, config);
@@ -110,7 +104,7 @@ export async function deleteNumberingRule(ruleId: string): Promise<ApiResponse<v
  */
 export async function previewNumberingCode(
   ruleId: string,
-  formData?: Record<string, unknown>
+  formData?: Record<string, unknown>,
 ): Promise<ApiResponse<{ generatedCode: string }>> {
   // ruleId 유효성 검사
   if (!ruleId || ruleId === "undefined" || ruleId === "null") {
@@ -127,11 +121,8 @@ export async function previewNumberingCode(
     return response.data;
   } catch (error: unknown) {
     const err = error as { response?: { data?: { error?: string; message?: string } }; message?: string };
-    const errorMessage = 
-      err.response?.data?.error || 
-      err.response?.data?.message || 
-      err.message || 
-      "코드 미리보기 실패";
+    const errorMessage =
+      err.response?.data?.error || err.response?.data?.message || err.message || "코드 미리보기 실패";
     return { success: false, error: errorMessage };
   }
 }
@@ -139,12 +130,20 @@ export async function previewNumberingCode(
 /**
  * 코드 할당 (저장 시점에 실제 순번 증가)
  * 실제 저장할 때만 호출
+ * @param ruleId 채번 규칙 ID
+ * @param userInputCode 사용자가 편집한 최종 코드 (수동 입력 부분 추출용)
+ * @param formData 폼 데이터 (카테고리/날짜 기반 채번용)
  */
 export async function allocateNumberingCode(
-  ruleId: string
+  ruleId: string,
+  userInputCode?: string,
+  formData?: Record<string, any>,
 ): Promise<ApiResponse<{ generatedCode: string }>> {
   try {
-    const response = await apiClient.post(`/numbering-rules/${ruleId}/allocate`);
+    const response = await apiClient.post(`/numbering-rules/${ruleId}/allocate`, {
+      userInputCode,
+      formData,
+    });
     return response.data;
   } catch (error: any) {
     return { success: false, error: error.message || "코드 할당 실패" };
@@ -154,9 +153,7 @@ export async function allocateNumberingCode(
 /**
  * @deprecated 기존 generateNumberingCode는 previewNumberingCode를 사용하세요
  */
-export async function generateNumberingCode(
-  ruleId: string
-): Promise<ApiResponse<{ generatedCode: string }>> {
+export async function generateNumberingCode(ruleId: string): Promise<ApiResponse<{ generatedCode: string }>> {
   console.warn("generateNumberingCode는 deprecated. previewNumberingCode 사용 권장");
   return previewNumberingCode(ruleId);
 }
@@ -173,20 +170,16 @@ export async function resetSequence(ruleId: string): Promise<ApiResponse<void>>
   }
 }
 
-// ====== 테스트용 API (numbering_rules_test 테이블 사용) ======
+// ====== 테스트용 API (numbering_rules 테이블 사용) ======
 
 /**
  * [테스트] 테스트 테이블에서 채번규칙 목록 조회
- * numbering_rules_test 테이블 사용
+ * numbering_rules 테이블 사용
  * @param menuObjid 메뉴 OBJID (선택) - 필터링용
  */
-export async function getNumberingRulesFromTest(
-  menuObjid?: number
-): Promise<ApiResponse<NumberingRuleConfig[]>> {
+export async function getNumberingRulesFromTest(menuObjid?: number): Promise<ApiResponse<NumberingRuleConfig[]>> {
   try {
-    const url = menuObjid
-      ? `/numbering-rules/test/list/${menuObjid}`
-      : "/numbering-rules/test/list";
+    const url = menuObjid ? `/numbering-rules/test/list/${menuObjid}` : "/numbering-rules/test/list";
     const response = await apiClient.get(url);
     return response.data;
   } catch (error: any) {
@@ -199,11 +192,11 @@ export async function getNumberingRulesFromTest(
 
 /**
  * [테스트] 테이블+컬럼 기반 채번규칙 조회
- * numbering_rules_test 테이블 사용
+ * numbering_rules 테이블 사용
  */
 export async function getNumberingRuleByColumn(
   tableName: string,
-  columnName: string
+  columnName: string,
 ): Promise<ApiResponse<NumberingRuleConfig>> {
   try {
     const response = await apiClient.get("/numbering-rules/test/by-column", {
@@ -220,11 +213,9 @@ export async function getNumberingRuleByColumn(
 
 /**
  * [테스트] 테스트 테이블에 채번규칙 저장
- * numbering_rules_test 테이블 사용
+ * numbering_rules 테이블 사용
  */
-export async function saveNumberingRuleToTest(
-  config: NumberingRuleConfig
-): Promise<ApiResponse<NumberingRuleConfig>> {
+export async function saveNumberingRuleToTest(config: NumberingRuleConfig): Promise<ApiResponse<NumberingRuleConfig>> {
   try {
     const response = await apiClient.post("/numbering-rules/test/save", config);
     return response.data;
@@ -238,11 +229,9 @@ export async function saveNumberingRuleToTest(
 
 /**
  * [테스트] 테스트 테이블에서 채번규칙 삭제
- * numbering_rules_test 테이블 사용
+ * numbering_rules 테이블 사용
  */
-export async function deleteNumberingRuleFromTest(
-  ruleId: string
-): Promise<ApiResponse<void>> {
+export async function deleteNumberingRuleFromTest(ruleId: string): Promise<ApiResponse<void>> {
   try {
     const response = await apiClient.delete(`/numbering-rules/test/${ruleId}`);
     return response.data;
@@ -262,7 +251,7 @@ export async function getNumberingRuleByColumnWithCategory(
   tableName: string,
   columnName: string,
   categoryColumn?: string,
-  categoryValueId?: number
+  categoryValueId?: number,
 ): Promise<ApiResponse<NumberingRuleConfig>> {
   try {
     const response = await apiClient.get("/numbering-rules/test/by-column-with-category", {
@@ -282,7 +271,7 @@ export async function getNumberingRuleByColumnWithCategory(
  */
 export async function getRulesByTableColumn(
   tableName: string,
-  columnName: string
+  columnName: string,
 ): Promise<ApiResponse<NumberingRuleConfig[]>> {
   try {
     const response = await apiClient.get("/numbering-rules/test/rules-by-table-column", {
@@ -296,4 +285,3 @@ export async function getRulesByTableColumn(
     };
   }
 }
-
diff --git a/frontend/lib/api/screen.ts b/frontend/lib/api/screen.ts
index c610da30..597e9795 100644
--- a/frontend/lib/api/screen.ts
+++ b/frontend/lib/api/screen.ts
@@ -373,12 +373,10 @@ export const tableTypeApi = {
     columnName: string,
     webType: string,
     detailSettings?: Record<string, any>,
-    inputType?: "direct" | "auto",
   ): Promise<void> => {
     await apiClient.put(`/table-management/tables/${tableName}/columns/${columnName}/web-type`, {
       webType,
       detailSettings,
-      inputType,
     });
   },
 
diff --git a/frontend/lib/registry/ComponentRegistry.ts b/frontend/lib/registry/ComponentRegistry.ts
index 00866c68..f6065ff5 100644
--- a/frontend/lib/registry/ComponentRegistry.ts
+++ b/frontend/lib/registry/ComponentRegistry.ts
@@ -31,10 +31,7 @@ export class ComponentRegistry {
       throw new Error(`컴포넌트 등록 실패 (${definition.id}): ${validation.errors.join(", ")}`);
     }
 
-    // 중복 등록 체크
-    if (this.components.has(definition.id)) {
-      console.warn(`⚠️ 컴포넌트 중복 등록: ${definition.id} - 기존 정의를 덮어씁니다.`);
-    }
+    // 중복 등록 체크 (기존 정의를 덮어씀)
 
     // 타임스탬프 추가
     const enhancedDefinition = {
@@ -64,7 +61,6 @@ export class ComponentRegistry {
   static unregisterComponent(id: string): void {
     const definition = this.components.get(id);
     if (!definition) {
-      console.warn(`⚠️ 등록되지 않은 컴포넌트 해제 시도: ${id}`);
       return;
     }
 
@@ -76,8 +72,6 @@ export class ComponentRegistry {
       data: definition,
       timestamp: new Date(),
     });
-
-    console.log(`🗑️ 컴포넌트 해제: ${id}`);
   }
 
   /**
@@ -355,7 +349,6 @@ export class ComponentRegistry {
           },
           force: async () => {
             // hotReload 기능 비활성화 (불필요)
-            console.log("⚠️ 강제 Hot Reload는 더 이상 필요하지 않습니다");
           },
         },
 
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 23b684ac..e6b13067 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -143,6 +143,9 @@ export interface DynamicComponentRendererProps {
   // 🆕 탭 내부 컴포넌트 선택 콜백
   onSelectTabComponent?: (tabId: string, compId: string, comp: any) => void;
   selectedTabComponentId?: string;
+  // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+  onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void;
+  selectedPanelComponentId?: string;
   flowSelectedStepId?: number | null;
   onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
   // 테이블 새로고침 키
@@ -173,7 +176,15 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   ...props
 }) => {
   // 컴포넌트 타입 추출 - 새 시스템에서는 componentType 속성 사용, 레거시는 type 사용
-  const rawComponentType = (component as any).componentType || component.type;
+  // 🆕 V2 레이아웃의 경우 url에서 컴포넌트 타입 추출 (예: "@/lib/registry/components/v2-input" → "v2-input")
+  const extractTypeFromUrl = (url: string | undefined): string | undefined => {
+    if (!url) return undefined;
+    // url의 마지막 세그먼트를 컴포넌트 타입으로 사용
+    const segments = url.split("/");
+    return segments[segments.length - 1];
+  };
+  
+  const rawComponentType = (component as any).componentType || component.type || extractTypeFromUrl((component as any).url);
   
   // 레거시 타입을 v2 컴포넌트로 매핑 (v2 컴포넌트가 없으면 원본 유지)
   const mapToV2ComponentType = (type: string | undefined): string | undefined => {
@@ -196,6 +207,62 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   
   // 컴포넌트 타입 변환 완료
 
+  // 🆕 조건부 렌더링 체크 (conditionalConfig)
+  // componentConfig 또는 overrides에서 conditionalConfig를 가져와서 formData와 비교
+  const conditionalConfig = (component as any).componentConfig?.conditionalConfig || (component as any).overrides?.conditionalConfig;
+  
+  // 조건부 렌더링 처리
+  if (conditionalConfig?.enabled && props.formData) {
+    const { field, operator, value, action } = conditionalConfig;
+    const fieldValue = props.formData[field];
+    
+    // 조건 평가
+    let conditionMet = false;
+    switch (operator) {
+      case "=":
+      case "==":
+      case "===":
+        conditionMet = fieldValue === value;
+        break;
+      case "!=":
+      case "!==":
+        conditionMet = fieldValue !== value;
+        break;
+      case ">":
+        conditionMet = Number(fieldValue) > Number(value);
+        break;
+      case "<":
+        conditionMet = Number(fieldValue) < Number(value);
+        break;
+      case ">=":
+        conditionMet = Number(fieldValue) >= Number(value);
+        break;
+      case "<=":
+        conditionMet = Number(fieldValue) <= Number(value);
+        break;
+      case "contains":
+        conditionMet = String(fieldValue || "").includes(String(value));
+        break;
+      case "empty":
+        conditionMet = !fieldValue || fieldValue === "";
+        break;
+      case "notEmpty":
+        conditionMet = !!fieldValue && fieldValue !== "";
+        break;
+      default:
+        conditionMet = fieldValue === value;
+    }
+    
+    // 액션에 따라 렌더링 결정
+    if (action === "show" && !conditionMet) {
+      return null;
+    }
+    if (action === "hide" && conditionMet) {
+      return null;
+    }
+    // "enable"/"disable" 액션은 conditionalDisabled props로 전달
+  }
+
   // 🆕 모든 v2- 컴포넌트는 ComponentRegistry에서 통합 처리
   // (v2-input, v2-select, v2-repeat-container 등 모두 동일하게 처리)
 
@@ -204,16 +271,66 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   const webType = (component as any).componentConfig?.webType;
   const tableName = (component as any).tableName;
   const columnName = (component as any).columnName;
-
+  
   // 카테고리 셀렉트: webType이 "category"이고 tableName과 columnName이 있는 경우만
-  // ⚠️ 단, componentType이 "select-basic"인 경우는 ComponentRegistry로 처리 (다중선택 등 고급 기능 지원)
+  // ⚠️ 단, 다음 경우는 V2SelectRenderer로 직접 처리 (고급 모드 지원):
+  //    1. componentType이 "select-basic" 또는 "v2-select"인 경우
+  //    2. config.mode가 dropdown이 아닌 경우 (radio, check, tagbox 등)
+  const componentMode = (component as any).componentConfig?.mode || (component as any).config?.mode;
+  const nonDropdownModes = ["radio", "check", "checkbox", "tag", "tagbox", "toggle", "swap", "combobox"];
+  const isNonDropdownMode = componentMode && nonDropdownModes.includes(componentMode);
+  const shouldUseV2Select = componentType === "select-basic" || componentType === "v2-select" || isNonDropdownMode;
+  
   if (
     (inputType === "category" || webType === "category") &&
     tableName &&
     columnName &&
-    componentType === "select-basic"
+    shouldUseV2Select
   ) {
-    // select-basic은 ComponentRegistry에서 처리하도록 아래로 통과
+    // V2SelectRenderer로 직접 렌더링 (카테고리 + 고급 모드)
+    try {
+      const { V2SelectRenderer } = require("@/lib/registry/components/v2-select/V2SelectRenderer");
+      const fieldName = columnName || component.id;
+      const currentValue = props.formData?.[fieldName] || "";
+      
+      const handleChange = (value: any) => {
+        if (props.onFormDataChange) {
+          props.onFormDataChange(fieldName, value);
+        }
+      };
+      
+      // V2SelectRenderer용 컴포넌트 데이터 구성
+      const selectComponent = {
+        ...component,
+        componentConfig: {
+          ...component.componentConfig,
+          mode: componentMode || "dropdown",
+          source: "category",
+          categoryTable: tableName,
+          categoryColumn: columnName,
+        },
+        tableName,
+        columnName,
+        inputType: "category",
+        webType: "category",
+      };
+      
+      const rendererProps = {
+        component: selectComponent,
+        formData: props.formData,
+        onFormDataChange: props.onFormDataChange,
+        isDesignMode: props.isDesignMode,
+        isInteractive: props.isInteractive ?? !props.isDesignMode,
+        tableName,
+        style: (component as any).style,
+        size: (component as any).size,
+      };
+      
+      const rendererInstance = new V2SelectRenderer(rendererProps);
+      return rendererInstance.render();
+    } catch (error) {
+      console.error("❌ V2SelectRenderer 로드 실패:", error);
+    }
   } else if ((inputType === "category" || webType === "category") && tableName && columnName) {
     try {
       const { CategorySelectComponent } = require("@/lib/registry/components/category-select/CategorySelectComponent");
@@ -230,6 +347,12 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
       const isFieldDisabled = props.disabledFields?.includes(columnName) || (component as any).disabled;
       const isFieldReadonly = (component as any).readonly || (component as any).componentConfig?.readonly;
 
+      // 🔧 높이 계산: component.size에서 height 추출
+      const categorySize = (component as any).size;
+      const categoryStyle = (component as any).style;
+      const categoryLabel = (component as any).label;
+      const categoryId = component.id;
+
       return (
         <CategorySelectComponent
           tableName={tableName}
@@ -241,6 +364,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           disabled={isFieldDisabled}
           readonly={isFieldReadonly}
           className="w-full"
+          size={categorySize}
+          style={categoryStyle}
+          label={categoryLabel}
+          id={categoryId}
+          isDesignMode={props.isDesignMode}
         />
       );
     } catch (error) {
@@ -332,7 +460,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         const safeProps = filterDOMProps(restProps);
 
         // 컴포넌트의 columnName에 해당하는 formData 값 추출
-        const fieldName = (component as any).columnName || component.id;
+        const fieldName = (component as any).columnName || (component as any).componentConfig?.columnName || component.id;
 
         // 다중 레코드를 다루는 컴포넌트는 배열 데이터로 초기화
         let currentValue;
@@ -401,10 +529,26 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         };
 
         // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName을 사용해야 함 (화면 테이블이 아닌 검색 대상 테이블)
+        // 🆕 v2-input도 포함 (채번 규칙 조회 시 tableName 필요)
         const useConfigTableName =
           componentType === "entity-search-input" ||
           componentType === "autocomplete-search-input" ||
-          componentType === "modal-repeater-table";
+          componentType === "modal-repeater-table" ||
+          componentType === "v2-input";
+
+        // 🆕 v2-input 등의 라벨 표시 로직 (labelDisplay가 true일 때만 라벨 표시)
+        const labelDisplay = component.style?.labelDisplay ?? (component as any).labelDisplay;
+        const effectiveLabel = labelDisplay === true 
+          ? (component.style?.labelText || (component as any).label || component.componentConfig?.label)
+          : undefined;
+
+        // 🔧 순서 중요! component.style 먼저, CSS 크기 속성은 size 기반으로 덮어씀
+        const mergedStyle = {
+          ...component.style,  // 원본 style (labelDisplay, labelText 등) - 먼저!
+          // CSS 크기 속성은 size에서 계산한 값으로 명시적 덮어쓰기 (우선순위 최고)
+          width: finalStyle.width,
+          height: finalStyle.height,
+        };
 
         const rendererProps = {
           component,
@@ -414,14 +558,29 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onDragEnd,
           size: component.size || newComponent.defaultSize,
           position: component.position,
-          style: finalStyle, // size를 포함한 최종 style
           config: component.componentConfig,
           componentConfig: component.componentConfig,
           // componentConfig의 모든 속성을 props로 spread (tableName, displayField 등)
           ...(component.componentConfig || {}),
+          // 🔧 style은 맨 마지막에! (componentConfig.style이 있어도 mergedStyle이 우선)
+          style: mergedStyle,
+          // 🆕 라벨 표시 (labelDisplay가 true일 때만)
+          label: effectiveLabel,
+          // 🆕 V2 레이아웃에서 overrides에서 복원된 상위 레벨 속성들도 전달
+          inputType: (component as any).inputType || component.componentConfig?.inputType,
+          columnName: (component as any).columnName || component.componentConfig?.columnName,
           value: currentValue, // formData에서 추출한 현재 값 전달
           // 새로운 기능들 전달
-          autoGeneration: component.autoGeneration || component.componentConfig?.autoGeneration,
+          // 🆕 webTypeConfig.numberingRuleId가 있으면 autoGeneration으로 변환
+          autoGeneration: component.autoGeneration || 
+            component.componentConfig?.autoGeneration ||
+            ((component as any).webTypeConfig?.numberingRuleId ? {
+              type: "numbering_rule" as const,
+              enabled: true,
+              options: {
+                numberingRuleId: (component as any).webTypeConfig.numberingRuleId,
+              },
+            } : undefined),
           hidden: hiddenValue,
           // React 전용 props들은 직접 전달 (DOM에 전달되지 않음)
           isInteractive,
@@ -429,7 +588,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onFormDataChange,
           onChange: handleChange, // 개선된 onChange 핸들러 전달
           // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName 유지, 그 외는 화면 테이블명 사용
-          tableName: useConfigTableName ? component.componentConfig?.tableName || tableName : tableName,
+          // 🆕 component.tableName도 확인 (V2 레이아웃에서 overrides.tableName이 복원됨)
+          tableName: useConfigTableName 
+            ? component.componentConfig?.tableName || (component as any).tableName || tableName 
+            : tableName,
           menuId, // 🆕 메뉴 ID
           menuObjid, // 🆕 메뉴 OBJID (메뉴 스코프)
           selectedScreen, // 🆕 화면 정보
@@ -494,6 +656,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 탭 내부 컴포넌트 선택 콜백
           onSelectTabComponent: props.onSelectTabComponent,
           selectedTabComponentId: props.selectedTabComponentId,
+          // 🆕 분할 패널 내부 컴포넌트 선택 콜백
+          onSelectPanelComponent: props.onSelectPanelComponent,
+          selectedPanelComponentId: props.selectedPanelComponentId,
         };
 
         // 렌더러가 클래스인지 함수인지 확인
diff --git a/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx b/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
index 001b68e3..ba5d752d 100644
--- a/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
+++ b/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { TableCategoryValue } from "@/types/tableCategoryValue";
 import { Loader2 } from "lucide-react";
@@ -23,6 +24,20 @@ interface CategorySelectComponentProps {
   readonly?: boolean;
   tableName?: string;
   columnName?: string;
+  // 🔧 높이 조절을 위한 props 추가
+  style?: React.CSSProperties & {
+    labelDisplay?: boolean;
+    labelFontSize?: string | number;
+    labelColor?: string;
+    labelFontWeight?: string | number;
+    labelMarginBottom?: string | number;
+  };
+  size?: { width?: number | string; height?: number | string };
+  // 🔧 라벨 표시를 위한 props 추가
+  label?: string;
+  id?: string;
+  // 🔧 디자인 모드 처리
+  isDesignMode?: boolean;
 }
 
 /**
@@ -43,7 +58,27 @@ export const CategorySelectComponent: React.FC<
   readonly = false,
   tableName: propTableName,
   columnName: propColumnName,
+  style,
+  size,
+  label: propLabel,
+  id: propId,
+  isDesignMode = false,
 }) => {
+  // 🔧 높이 계산: size.height > style.height > 기본값(40px)
+  const componentHeight = size?.height || style?.height;
+  const heightStyle: React.CSSProperties = componentHeight 
+    ? { height: componentHeight } 
+    : {};
+
+  // 🔧 라벨 관련 계산
+  const label = propLabel || component?.label;
+  const id = propId || component?.id;
+  const showLabel = label && style?.labelDisplay !== false;
+  
+  // 라벨 높이 계산 (기본 20px)
+  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+  const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
   const [categoryValues, setCategoryValues] = useState<TableCategoryValue[]>(
     []
   );
@@ -56,11 +91,6 @@ export const CategorySelectComponent: React.FC<
 
   useEffect(() => {
     if (!tableName || !columnName) {
-      console.warn("CategorySelectComponent: tableName 또는 columnName이 없습니다", {
-        tableName,
-        columnName,
-        component,
-      });
       return;
     }
 
@@ -93,16 +123,52 @@ export const CategorySelectComponent: React.FC<
   };
 
   const handleValueChange = (newValue: string) => {
-    console.log("🔄 카테고리 값 변경:", { oldValue: value, newValue });
     onChange?.(newValue);
   };
 
+  // 🔧 공통 라벨 렌더링 함수
+  const renderLabel = () => {
+    if (!showLabel) return null;
+    return (
+      <Label
+        htmlFor={id}
+        style={{
+          position: "absolute",
+          top: `-${estimatedLabelHeight}px`,
+          left: 0,
+          fontSize: style?.labelFontSize || "14px",
+          color: style?.labelColor || "#64748b",
+          fontWeight: style?.labelFontWeight || "500",
+        }}
+        className="text-sm font-medium whitespace-nowrap"
+      >
+        {label}
+        {required && <span className="text-orange-500 ml-0.5">*</span>}
+      </Label>
+    );
+  };
+
+  // 🔧 공통 wrapper 스타일
+  const wrapperStyle: React.CSSProperties = {
+    width: size?.width || style?.width,
+    height: componentHeight,
+  };
+
+  // 🔧 디자인 모드일 때 클릭 방지
+  const designModeClass = isDesignMode ? "pointer-events-none" : "";
+
   // 로딩 중
   if (isLoading) {
     return (
-      <div className="flex h-10 w-full items-center justify-center rounded-md border bg-background px-3 text-sm text-muted-foreground">
-        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-        로딩 중...
+      <div id={id} className={`relative ${designModeClass}`} style={wrapperStyle}>
+        {renderLabel()}
+        <div 
+          className="flex h-full w-full items-center justify-center rounded-md border bg-background px-3 text-sm text-muted-foreground"
+          style={heightStyle}
+        >
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          로딩 중...
+        </div>
       </div>
     );
   }
@@ -110,8 +176,14 @@ export const CategorySelectComponent: React.FC<
   // 에러
   if (error) {
     return (
-      <div className="flex h-10 w-full items-center rounded-md border border-destructive bg-destructive/10 px-3 text-sm text-destructive">
-        ⚠️ {error}
+      <div id={id} className={`relative ${designModeClass}`} style={wrapperStyle}>
+        {renderLabel()}
+        <div 
+          className="flex h-full w-full items-center rounded-md border border-destructive bg-destructive/10 px-3 text-sm text-destructive"
+          style={heightStyle}
+        >
+          ⚠️ {error}
+        </div>
       </div>
     );
   }
@@ -119,33 +191,44 @@ export const CategorySelectComponent: React.FC<
   // 카테고리 값이 없음
   if (categoryValues.length === 0) {
     return (
-      <div className="flex h-10 w-full items-center rounded-md border bg-muted px-3 text-sm text-muted-foreground">
-        설정된 카테고리 값이 없습니다
+      <div id={id} className={`relative ${designModeClass}`} style={wrapperStyle}>
+        {renderLabel()}
+        <div 
+          className="flex h-full w-full items-center rounded-md border bg-muted px-3 text-sm text-muted-foreground"
+          style={heightStyle}
+        >
+          설정된 카테고리 값이 없습니다
+        </div>
       </div>
     );
   }
 
   return (
-    <Select
-      value={value}
-      onValueChange={handleValueChange}
-      disabled={disabled || readonly}
-      required={required}
-    >
-      <SelectTrigger className={`w-full ${className}`}>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        {categoryValues.map((categoryValue) => (
-          <SelectItem
-            key={categoryValue.valueId}
-            value={categoryValue.valueCode}
-          >
-            {categoryValue.valueLabel}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <div id={id} className={`relative ${designModeClass}`} style={wrapperStyle}>
+      {renderLabel()}
+      <div className="h-full w-full">
+        <Select
+          value={value}
+          onValueChange={handleValueChange}
+          disabled={disabled || readonly || isDesignMode}
+          required={required}
+        >
+          <SelectTrigger className={`w-full h-full ${className}`} style={heightStyle}>
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {categoryValues.map((categoryValue) => (
+              <SelectItem
+                key={categoryValue.valueId}
+                value={categoryValue.valueCode}
+              >
+                {categoryValue.valueLabel}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
   );
 };
 
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index dd4f4c6b..f655ebe3 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -177,10 +177,18 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       // 🔑 레코드별 고유 키 사용
       const backupKey = getUniqueKey();
       const backupFiles = localStorage.getItem(backupKey);
+      console.log("🔎 [DEBUG-MOUNT] localStorage 확인:", {
+        backupKey,
+        hasBackup: !!backupFiles,
+        componentId: component.id,
+        recordId: recordId,
+        formDataId: formData?.id,
+        stackTrace: new Error().stack?.split('\n').slice(1, 4).join(' <- '),
+      });
       if (backupFiles) {
         const parsedFiles = JSON.parse(backupFiles);
         if (parsedFiles.length > 0) {
-          console.log("🚀 컴포넌트 마운트 시 파일 즉시 복원:", {
+          console.log("🚀 [DEBUG-MOUNT] 파일 즉시 복원:", {
             uniqueKey: backupKey,
             componentId: component.id,
             recordId: recordId,
@@ -203,6 +211,50 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     }
   }, [component.id, getUniqueKey, recordId]); // 레코드별 고유 키 변경 시 재실행
 
+  // 🆕 모달 닫힘/저장 성공 시 localStorage 파일 캐시 정리 (등록 후 재등록 시 이전 파일 잔존 방지)
+  useEffect(() => {
+    const handleClearFileCache = (event: Event) => {
+      const backupKey = getUniqueKey();
+      const eventType = event.type;
+      console.log("🧹 [DEBUG-CLEAR] 파일 캐시 정리 이벤트 수신:", {
+        eventType,
+        backupKey,
+        componentId: component.id,
+        currentFiles: uploadedFiles.length,
+        hasLocalStorage: !!localStorage.getItem(backupKey),
+      });
+      try {
+        localStorage.removeItem(backupKey);
+        setUploadedFiles([]);
+        setRepresentativeImageUrl(null);
+        if (typeof window !== "undefined") {
+          const globalFileState = (window as any).globalFileState || {};
+          delete globalFileState[backupKey];
+          (window as any).globalFileState = globalFileState;
+        }
+        console.log("🧹 [DEBUG-CLEAR] 정리 완료:", backupKey);
+      } catch (e) {
+        console.warn("파일 캐시 정리 실패:", e);
+      }
+    };
+
+    // EditModal 닫힘, ScreenModal 연속 등록 저장 성공, 일반 저장 성공 모두 처리
+    window.addEventListener("closeEditModal", handleClearFileCache);
+    window.addEventListener("saveSuccess", handleClearFileCache);
+    window.addEventListener("saveSuccessInModal", handleClearFileCache);
+
+    console.log("🔎 [DEBUG-CLEAR] 이벤트 리스너 등록 완료:", {
+      componentId: component.id,
+      backupKey: getUniqueKey(),
+    });
+
+    return () => {
+      window.removeEventListener("closeEditModal", handleClearFileCache);
+      window.removeEventListener("saveSuccess", handleClearFileCache);
+      window.removeEventListener("saveSuccessInModal", handleClearFileCache);
+    };
+  }, [getUniqueKey]);
+
   // 🎯 화면설계 모드에서 실제 화면으로의 실시간 동기화 이벤트 리스너
   useEffect(() => {
     const handleDesignModeFileChange = (event: CustomEvent) => {
@@ -363,6 +415,12 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           console.warn("파일 병합 중 오류:", e);
         }
 
+        console.log("🔎 [DEBUG-LOAD] API 응답 후 파일 설정:", {
+          componentId: component.id,
+          serverFiles: formattedFiles.length,
+          finalFiles: finalFiles.length,
+          files: finalFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName })),
+        });
         setUploadedFiles(finalFiles);
 
         // 전역 상태에도 저장 (레코드별 고유 키 사용)
diff --git a/frontend/lib/registry/components/file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
index 9eb0edeb..36e37044 100644
--- a/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
+++ b/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
@@ -284,7 +284,9 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
             }
           } else {
             // 기타 파일은 다운로드 URL 사용
-            const url = `${API_BASE_URL.replace("/api", "")}/api/files/download/${file.objid}`;
+            // 주의: 프로덕션 URL이 https://api.vexplor.com/api 이므로
+            // 끝의 /api만 제거해야 호스트명이 깨지지 않음
+            const url = `${API_BASE_URL.replace(/\/api$/, "")}/api/files/download/${file.objid}`;
             setPreviewUrl(url);
           }
         } else {
diff --git a/frontend/lib/registry/components/file-upload/index.ts b/frontend/lib/registry/components/file-upload/index.ts
index fcca65cc..3f059ae1 100644
--- a/frontend/lib/registry/components/file-upload/index.ts
+++ b/frontend/lib/registry/components/file-upload/index.ts
@@ -14,22 +14,23 @@ import { FileUploadConfig } from "./types";
  */
 export const FileUploadDefinition = createComponentDefinition({
   id: "file-upload",
-  name: "파일 업로드",
-  nameEng: "FileUpload Component",
-  description: "파일 업로드를 위한 파일 선택 컴포넌트",
+  name: "파일 업로드 (레거시)",
+  nameEng: "FileUpload Component (Legacy)",
+  description: "파일 업로드를 위한 파일 선택 컴포넌트 (레거시)",
   category: ComponentCategory.INPUT,
   webType: "file",
   component: FileUploadComponent,
   defaultConfig: {
     placeholder: "입력하세요",
   },
-  defaultSize: { width: 350, height: 240 }, // 40 * 6 (파일 선택 + 목록 표시)
+  defaultSize: { width: 350, height: 240 },
   configPanel: FileUploadConfigPanel,
   icon: "Edit",
   tags: [],
   version: "1.0.0",
   author: "개발팀",
   documentation: "https://docs.example.com/components/file-upload",
+  hidden: true, // v2-file-upload 사용으로 패널에서 숨김
 });
 
 // 타입 내보내기
diff --git a/frontend/lib/registry/components/image-widget/index.ts b/frontend/lib/registry/components/image-widget/index.ts
index 67abbc80..aee663e8 100644
--- a/frontend/lib/registry/components/image-widget/index.ts
+++ b/frontend/lib/registry/components/image-widget/index.ts
@@ -13,9 +13,9 @@ import { ImageWidgetConfigPanel } from "./ImageWidgetConfigPanel";
  */
 export const ImageWidgetDefinition = createComponentDefinition({
   id: "image-widget",
-  name: "이미지 위젯",
-  nameEng: "Image Widget",
-  description: "이미지 표시 및 업로드",
+  name: "이미지 위젯 (레거시)",
+  nameEng: "Image Widget (Legacy)",
+  description: "이미지 표시 및 업로드 (레거시)",
   category: ComponentCategory.INPUT,
   webType: "image",
   component: ImageWidget,
@@ -32,6 +32,7 @@ export const ImageWidgetDefinition = createComponentDefinition({
   version: "1.0.0",
   author: "개발팀",
   documentation: "https://docs.example.com/components/image-widget",
+  hidden: true, // v2-file-upload 사용으로 패널에서 숨김
 });
 
 // 컴포넌트 내보내기
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 8a2ac932..172f0067 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -105,7 +105,13 @@ import "./v2-location-swap-selector/LocationSwapSelectorRenderer";
 import "./v2-table-search-widget";
 import "./v2-tabs-widget/tabs-component";
 import "./v2-category-manager/V2CategoryManagerRenderer";
-import "./v2-media"; // 통합 미디어 컴포넌트
+import "./v2-media/V2MediaRenderer"; // V2 통합 미디어 컴포넌트
+import "./v2-table-grouped/TableGroupedRenderer"; // 그룹화 테이블
+import "./v2-timeline-scheduler/TimelineSchedulerRenderer"; // 타임라인 스케줄러
+import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
+import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
+import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
+import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
 
 /**
  * 컴포넌트 초기화 함수
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index 4aa4d930..570a82a7 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -220,8 +220,8 @@ export function RepeaterTable({
     columns
       .filter((col) => !col.hidden)
       .forEach((col) => {
-      widths[col.field] = col.width ? parseInt(col.width) : 120;
-    });
+        widths[col.field] = col.width ? parseInt(col.width) : 120;
+      });
     return widths;
   });
 
@@ -404,10 +404,10 @@ export function RepeaterTable({
     // 데이터가 있으면 데이터 기반 자동 맞춤, 없으면 균등 분배
     const timer = setTimeout(() => {
       if (data.length > 0) {
-      applyAutoFitWidths();
-    } else {
-      applyEqualizeWidths();
-    }
+        applyAutoFitWidths();
+      } else {
+        applyEqualizeWidths();
+      }
     }, 50);
 
     return () => clearTimeout(timer);
@@ -654,11 +654,17 @@ export function RepeaterTable({
             <thead className="sticky top-0 z-20 bg-gray-50">
               <tr>
                 {/* 드래그 핸들 헤더 - 좌측 고정 */}
-                <th className="sticky left-0 z-30 w-8 border-r border-b border-gray-200 bg-gray-50 px-1 py-2 text-center font-medium text-gray-700">
+                <th
+                  key="header-drag"
+                  className="sticky left-0 z-30 w-8 border-r border-b border-gray-200 bg-gray-50 px-1 py-2 text-center font-medium text-gray-700"
+                >
                   <span className="sr-only">순서</span>
                 </th>
                 {/* 체크박스 헤더 - 좌측 고정 */}
-                <th className="sticky left-8 z-30 w-10 border-r border-b border-gray-200 bg-gray-50 px-3 py-2 text-center font-medium text-gray-700">
+                <th
+                  key="header-checkbox"
+                  className="sticky left-8 z-30 w-10 border-r border-b border-gray-200 bg-gray-50 px-3 py-2 text-center font-medium text-gray-700"
+                >
                   <Checkbox
                     checked={isAllSelected}
                     // @ts-expect-error - indeterminate는 HTML 속성
@@ -667,7 +673,7 @@ export function RepeaterTable({
                     className={cn("border-gray-400", isIndeterminate && "data-[state=checked]:bg-primary")}
                   />
                 </th>
-                {visibleColumns.map((col) => {
+                {visibleColumns.map((col, colIndex) => {
                   const hasDynamicSource = col.dynamicDataSource?.enabled && col.dynamicDataSource.options.length > 0;
                   const activeOptionId = activeDataSources[col.field] || col.dynamicDataSource?.defaultOptionId;
                   const activeOption = hasDynamicSource
@@ -677,7 +683,7 @@ export function RepeaterTable({
 
                   return (
                     <th
-                      key={col.field}
+                      key={`header-col-${col.field || colIndex}`}
                       className="group relative cursor-pointer border-r border-b border-gray-200 px-3 py-2 text-left font-medium whitespace-nowrap text-gray-700 select-none"
                       style={{ width: `${columnWidths[col.field]}px` }}
                       onDoubleClick={() => handleDoubleClick(col.field)}
@@ -765,8 +771,9 @@ export function RepeaterTable({
             <SortableContext items={sortableItems} strategy={verticalListSortingStrategy}>
               <tbody className="bg-white">
                 {data.length === 0 ? (
-                  <tr>
+                  <tr key="empty-row">
                     <td
+                      key="empty-cell"
                       colSpan={visibleColumns.length + 2}
                       className="border-b border-gray-200 px-4 py-8 text-center text-gray-500"
                     >
@@ -787,8 +794,9 @@ export function RepeaterTable({
                         <>
                           {/* 드래그 핸들 - 좌측 고정 */}
                           <td
+                            key={`drag-${rowIndex}`}
                             className={cn(
-                            "sticky left-0 z-10 border-r border-b border-gray-200 px-1 py-1 text-center",
+                              "sticky left-0 z-10 border-r border-b border-gray-200 px-1 py-1 text-center",
                               selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
                             )}
                           >
@@ -806,8 +814,9 @@ export function RepeaterTable({
                           </td>
                           {/* 체크박스 - 좌측 고정 */}
                           <td
+                            key={`check-${rowIndex}`}
                             className={cn(
-                            "sticky left-8 z-10 border-r border-b border-gray-200 px-3 py-1 text-center",
+                              "sticky left-8 z-10 border-r border-b border-gray-200 px-3 py-1 text-center",
                               selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
                             )}
                           >
@@ -818,9 +827,9 @@ export function RepeaterTable({
                             />
                           </td>
                           {/* 데이터 컬럼들 */}
-                          {visibleColumns.map((col) => (
+                          {visibleColumns.map((col, colIndex) => (
                             <td
-                              key={col.field}
+                              key={`${rowIndex}-${col.field || colIndex}`}
                               className="overflow-hidden border-r border-b border-gray-200 px-1 py-1"
                               style={{
                                 width: `${columnWidths[col.field]}px`,
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
index 16cf7dfc..6765e6c7 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
@@ -74,13 +74,13 @@ export function RepeatScreenModalComponent({
   const showCardTitle = componentConfig?.showCardTitle ?? true;
   const cardTitle = componentConfig?.cardTitle || "카드 {index}";
   const grouping = componentConfig?.grouping;
-  
+
   // 🆕 v3: 자유 레이아웃
   const contentRows = componentConfig?.contentRows || [];
-  
+
   // 🆕 v3.1: Footer 설정
   const footerConfig = componentConfig?.footerConfig;
-  
+
   // (레거시 호환)
   const cardLayout = componentConfig?.cardLayout || [];
   const cardMode = componentConfig?.cardMode || "simple";
@@ -93,7 +93,7 @@ export function RepeatScreenModalComponent({
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
-  
+
   // 🆕 v3.1: 외부 테이블 데이터 (테이블 행별로 관리)
   const [externalTableData, setExternalTableData] = useState<Record<string, any[]>>({});
   // 🆕 v3.1: 삭제 확인 다이얼로그
@@ -108,12 +108,12 @@ export function RepeatScreenModalComponent({
   useEffect(() => {
     const handleTriggerSave = async (event: Event) => {
       if (!(event instanceof CustomEvent)) return;
-      
+
       console.log("[RepeatScreenModal] triggerRepeatScreenModalSave 이벤트 수신");
-      
+
       try {
         setIsSaving(true);
-        
+
         // 기존 데이터 저장
         if (cardMode === "withTable") {
           await saveGroupedData();
@@ -128,24 +128,28 @@ export function RepeatScreenModalComponent({
         await processSyncSaves();
 
         console.log("[RepeatScreenModal] 외부 트리거 저장 완료");
-        
+
         // 저장 완료 이벤트 발생
-        window.dispatchEvent(new CustomEvent("repeatScreenModalSaveComplete", {
-          detail: { success: true }
-        }));
-        
+        window.dispatchEvent(
+          new CustomEvent("repeatScreenModalSaveComplete", {
+            detail: { success: true },
+          }),
+        );
+
         // 성공 콜백 실행
         if (event.detail?.onSuccess) {
           event.detail.onSuccess();
         }
       } catch (error: any) {
         console.error("[RepeatScreenModal] 외부 트리거 저장 실패:", error);
-        
+
         // 저장 실패 이벤트 발생
-        window.dispatchEvent(new CustomEvent("repeatScreenModalSaveComplete", {
-          detail: { success: false, error: error.message }
-        }));
-        
+        window.dispatchEvent(
+          new CustomEvent("repeatScreenModalSaveComplete", {
+            detail: { success: false, error: error.message },
+          }),
+        );
+
         // 실패 콜백 실행
         if (event.detail?.onError) {
           event.detail.onError(error);
@@ -177,7 +181,7 @@ export function RepeatScreenModalComponent({
         // key 형식: cardId-contentRowId
         const keyParts = key.split("-");
         const cardId = keyParts.slice(0, -1).join("-"); // contentRowId를 제외한 나머지가 cardId
-        
+
         // contentRow 찾기
         const contentRow = contentRows.find((r) => key.includes(r.id));
         if (!contentRow?.tableDataSource?.enabled) continue;
@@ -187,24 +191,22 @@ export function RepeatScreenModalComponent({
         const representativeData = card?._representativeData || {};
 
         const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
-        
+
         // dirty 행 또는 새로운 행 필터링 (삭제된 행 제외)
         // 🆕 v3.13: _isNew 행도 포함 (새로 추가된 행은 _isDirty가 없을 수 있음)
         const dirtyRows = rows.filter((row) => (row._isDirty || row._isNew) && !row._isDeleted);
-        
+
         console.log(`[RepeatScreenModal] beforeFormSave - ${targetTable} 행 필터링:`, {
           totalRows: rows.length,
           dirtyRows: dirtyRows.length,
-          rowDetails: rows.map(r => ({ _isDirty: r._isDirty, _isNew: r._isNew, _isDeleted: r._isDeleted }))
+          rowDetails: rows.map((r) => ({ _isDirty: r._isDirty, _isNew: r._isNew, _isDeleted: r._isDeleted })),
         });
-        
+
         if (dirtyRows.length === 0) continue;
 
         // 저장할 필드만 추출
-        const editableFields = (contentRow.tableColumns || [])
-          .filter((col) => col.editable)
-          .map((col) => col.field);
-        
+        const editableFields = (contentRow.tableColumns || []).filter((col) => col.editable).map((col) => col.field);
+
         // 🆕 v3.13: joinConditions에서 sourceKey (저장 대상 테이블의 FK 컬럼) 추출
         const joinConditions = contentRow.tableDataSource.joinConditions || [];
         const joinKeys = joinConditions.map((cond) => cond.sourceKey);
@@ -217,14 +219,14 @@ export function RepeatScreenModalComponent({
 
         for (const row of dirtyRows) {
           const saveData: Record<string, any> = {};
-          
+
           // 허용된 필드만 포함
           for (const field of allowedFields) {
             if (row[field] !== undefined) {
               saveData[field] = row[field];
             }
           }
-          
+
           // 🆕 v3.13: joinConditions를 사용하여 FK 값 자동 채우기
           // 예: sales_order_id (sourceKey) = card의 id (targetKey)
           for (const joinCond of joinConditions) {
@@ -232,14 +234,16 @@ export function RepeatScreenModalComponent({
             // sourceKey가 저장 데이터에 없거나 null인 경우, 카드의 대표 데이터에서 targetKey 값을 가져옴
             if (!saveData[sourceKey] && representativeData[targetKey] !== undefined) {
               saveData[sourceKey] = representativeData[targetKey];
-              console.log(`[RepeatScreenModal] beforeFormSave - FK 자동 채우기: ${sourceKey} = ${representativeData[targetKey]} (from card.${targetKey})`);
+              console.log(
+                `[RepeatScreenModal] beforeFormSave - FK 자동 채우기: ${sourceKey} = ${representativeData[targetKey]} (from card.${targetKey})`,
+              );
             }
           }
-          
+
           // _isNew 플래그 유지
           saveData._isNew = row._isNew;
           saveData._targetTable = targetTable;
-          
+
           // 기존 레코드의 경우 id 포함
           if (!row._isNew && row._originalData?.id) {
             saveData.id = row._originalData.id;
@@ -333,7 +337,7 @@ export function RepeatScreenModalComponent({
 
           // formData에서 선택된 행 ID 가져오기
           let selectedIds: any[] = [];
-          
+
           if (formData) {
             // 1. 명시적으로 설정된 filterField 확인
             if (dataSource.filterField) {
@@ -342,10 +346,10 @@ export function RepeatScreenModalComponent({
                 selectedIds = Array.isArray(filterValue) ? filterValue : [filterValue];
               }
             }
-            
+
             // 2. 일반적인 선택 필드 확인 (fallback)
             if (selectedIds.length === 0) {
-              const commonFields = ['selectedRows', 'selectedIds', 'checkedRows', 'checkedIds', 'ids'];
+              const commonFields = ["selectedRows", "selectedIds", "checkedRows", "checkedIds", "ids"];
               for (const field of commonFields) {
                 if (formData[field]) {
                   const value = formData[field];
@@ -355,7 +359,7 @@ export function RepeatScreenModalComponent({
                 }
               }
             }
-            
+
             // 3. formData에 id가 있으면 단일 행
             if (selectedIds.length === 0 && formData.id) {
               selectedIds = [formData.id];
@@ -412,10 +416,10 @@ export function RepeatScreenModalComponent({
 
         // 🆕 v3: contentRows가 있으면 새로운 방식 사용
         const useNewLayout = contentRows && contentRows.length > 0;
-        
+
         // 그룹핑 모드 확인 (groupByField가 없어도 enabled면 그룹핑 모드로 처리)
         const useGrouping = grouping?.enabled;
-        
+
         if (useGrouping) {
           // 그룹핑 모드
           const grouped = processGroupedData(loadedData, grouping);
@@ -428,7 +432,7 @@ export function RepeatScreenModalComponent({
               _originalData: { ...row },
               _isDirty: false,
               ...(await loadCardData(row)),
-            }))
+            })),
           );
           setCardsData(initialCards);
         }
@@ -448,7 +452,7 @@ export function RepeatScreenModalComponent({
     const loadExternalTableData = async () => {
       // contentRows에서 외부 테이블 데이터 소스가 있는 table 타입 행 찾기
       const tableRowsWithExternalSource = contentRows.filter(
-        (row) => row.type === "table" && row.tableDataSource?.enabled
+        (row) => row.type === "table" && row.tableDataSource?.enabled,
       );
 
       if (tableRowsWithExternalSource.length === 0) return;
@@ -473,7 +477,7 @@ export function RepeatScreenModalComponent({
                 // 숫자형 ID인 경우 숫자로 변환 (문자열 '189' → 숫자 189)
                 // 백엔드에서 entity 타입 컬럼 검색 시 문자열이면 ILIKE 검색을 수행하므로
                 // 정확한 ID 매칭을 위해 숫자로 변환해야 함
-                if (condition.sourceKey.endsWith('_id') || condition.sourceKey === 'id') {
+                if (condition.sourceKey.endsWith("_id") || condition.sourceKey === "id") {
                   const numValue = Number(refValue);
                   if (!isNaN(numValue)) {
                     refValue = numValue;
@@ -497,24 +501,21 @@ export function RepeatScreenModalComponent({
             });
 
             // API 호출 - 메인 테이블 데이터
-            const response = await apiClient.post(
-              `/table-management/tables/${dataSourceConfig.sourceTable}/data`,
-              {
-                search: filters,
-                page: 1,
-                size: dataSourceConfig.limit || 100,
-                sort: dataSourceConfig.orderBy
-                  ? {
-                      column: dataSourceConfig.orderBy.column,
-                      direction: dataSourceConfig.orderBy.direction,
-                    }
-                  : undefined,
-              }
-            );
+            const response = await apiClient.post(`/table-management/tables/${dataSourceConfig.sourceTable}/data`, {
+              search: filters,
+              page: 1,
+              size: dataSourceConfig.limit || 100,
+              sort: dataSourceConfig.orderBy
+                ? {
+                    column: dataSourceConfig.orderBy.column,
+                    direction: dataSourceConfig.orderBy.direction,
+                  }
+                : undefined,
+            });
 
             if (response.data.success && response.data.data?.data) {
               let tableData = response.data.data.data;
-              
+
               console.log(`[RepeatScreenModal] 소스 테이블 데이터 로드 완료:`, {
                 sourceTable: dataSourceConfig.sourceTable,
                 rowCount: tableData.length,
@@ -538,7 +539,7 @@ export function RepeatScreenModalComponent({
               // 🆕 v3.4: 필터 조건 적용
               if (dataSourceConfig.filterConfig?.enabled) {
                 const { filterField, filterType, referenceField, referenceSource } = dataSourceConfig.filterConfig;
-                
+
                 // 비교 값 가져오기
                 let referenceValue: any;
                 if (referenceSource === "formData") {
@@ -558,8 +559,10 @@ export function RepeatScreenModalComponent({
                       return rowValue !== referenceValue;
                     }
                   });
-                  
-                  console.log(`[RepeatScreenModal] 필터 적용: ${filterField} ${filterType} ${referenceValue}, 결과: ${tableData.length}건`);
+
+                  console.log(
+                    `[RepeatScreenModal] 필터 적용: ${filterField} ${filterType} ${referenceValue}, 결과: ${tableData.length}건`,
+                  );
                 }
               }
 
@@ -573,7 +576,7 @@ export function RepeatScreenModalComponent({
                 _isDeleted: false,
                 ...row,
               }));
-              
+
               // 디버그: 저장된 외부 테이블 데이터 확인
               console.log(`[RepeatScreenModal] 외부 테이블 데이터 저장:`, {
                 key,
@@ -595,17 +598,17 @@ export function RepeatScreenModalComponent({
         if (prevKeys === newKeys) {
           // 키가 같으면 데이터 내용 비교
           const isSame = Object.keys(newExternalData).every(
-            (key) => JSON.stringify(prev[key]) === JSON.stringify(newExternalData[key])
+            (key) => JSON.stringify(prev[key]) === JSON.stringify(newExternalData[key]),
           );
           if (isSame) return prev;
         }
-        
+
         // 🆕 v3.2: 외부 테이블 데이터 로드 후 집계 재계산
         // 비동기적으로 처리하여 무한 루프 방지
         setTimeout(() => {
           recalculateAggregationsWithExternalData(newExternalData);
         }, 0);
-        
+
         return newExternalData;
       });
     };
@@ -617,7 +620,7 @@ export function RepeatScreenModalComponent({
   // 🆕 v3.3: 추가 조인 테이블 데이터 로드 및 병합
   const loadAndMergeJoinData = async (
     mainData: any[],
-    additionalJoins: { id: string; joinTable: string; joinType: string; sourceKey: string; targetKey: string }[]
+    additionalJoins: { id: string; joinTable: string; joinType: string; sourceKey: string; targetKey: string }[],
   ): Promise<any[]> => {
     if (mainData.length === 0) return mainData;
 
@@ -627,23 +630,20 @@ export function RepeatScreenModalComponent({
 
       // 메인 데이터에서 조인 키 값들 추출
       const joinKeyValues = [...new Set(mainData.map((row) => row[joinConfig.sourceKey]).filter(Boolean))];
-      
+
       if (joinKeyValues.length === 0) continue;
 
       try {
         // 조인 테이블 데이터 조회
-        const joinResponse = await apiClient.post(
-          `/table-management/tables/${joinConfig.joinTable}/data`,
-          {
-            search: { [joinConfig.targetKey]: joinKeyValues },
-            page: 1,
-            size: 1000, // 충분히 큰 값
-          }
-        );
+        const joinResponse = await apiClient.post(`/table-management/tables/${joinConfig.joinTable}/data`, {
+          search: { [joinConfig.targetKey]: joinKeyValues },
+          page: 1,
+          size: 1000, // 충분히 큰 값
+        });
 
         if (joinResponse.data.success && joinResponse.data.data?.data) {
           const joinData = joinResponse.data.data.data;
-          
+
           // 조인 데이터를 맵으로 변환 (빠른 조회를 위해)
           const joinDataMap = new Map<any, any>();
           for (const joinRow of joinData) {
@@ -654,7 +654,7 @@ export function RepeatScreenModalComponent({
           mainData = mainData.map((row) => {
             const joinKey = row[joinConfig.sourceKey];
             const joinRow = joinDataMap.get(joinKey);
-            
+
             if (joinRow) {
               // 조인 테이블의 컬럼들을 메인 데이터에 추가 (접두사 없이)
               const mergedRow = { ...row };
@@ -700,7 +700,7 @@ export function RepeatScreenModalComponent({
 
     // contentRows에서 외부 테이블 데이터 소스가 있는 모든 table 타입 행 찾기
     const tableRowsWithExternalSource = contentRows.filter(
-      (row) => row.type === "table" && row.tableDataSource?.enabled
+      (row) => row.type === "table" && row.tableDataSource?.enabled,
     );
 
     if (tableRowsWithExternalSource.length === 0) return;
@@ -710,10 +710,10 @@ export function RepeatScreenModalComponent({
       // 🆕 v3.11: 테이블 행 ID별로 외부 데이터를 구분하여 저장
       const externalRowsByTableId: Record<string, any[]> = {};
       const allExternalRows: any[] = [];
-      
+
       for (const tableRow of tableRowsWithExternalSource) {
         const key = `${card._cardId}-${tableRow.id}`;
-      // 🆕 v3.7: 삭제된 행은 집계에서 제외
+        // 🆕 v3.7: 삭제된 행은 집계에서 제외
         const rows = (extData[key] || []).filter((row) => !row._isDeleted);
         externalRowsByTableId[tableRow.id] = rows;
         allExternalRows.push(...rows);
@@ -721,30 +721,31 @@ export function RepeatScreenModalComponent({
 
       // 집계 재계산
       const newAggregations: Record<string, number> = {};
-      
+
       grouping.aggregations!.forEach((agg) => {
         const sourceType = agg.sourceType || "column";
-        
+
         if (sourceType === "column") {
           const sourceTable = agg.sourceTable || dataSource?.sourceTable;
           const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
-          
+
           if (isExternalTable) {
             // 외부 테이블 집계
             newAggregations[agg.resultField] = calculateColumnAggregation(
-              allExternalRows, 
-              agg.sourceField || "", 
-              agg.type || "sum"
+              allExternalRows,
+              agg.sourceField || "",
+              agg.type || "sum",
             );
           } else {
             // 기본 테이블 집계 (기존 값 유지)
-            newAggregations[agg.resultField] = card._aggregations[agg.resultField] || 
+            newAggregations[agg.resultField] =
+              card._aggregations[agg.resultField] ||
               calculateColumnAggregation(card._rows, agg.sourceField || "", agg.type || "sum");
           }
         } else if (sourceType === "formula" && agg.formula) {
           // 🆕 v3.11: externalTableRefs 기반으로 필터링된 외부 데이터 사용
           let filteredExternalRows: any[];
-          
+
           if (agg.externalTableRefs && agg.externalTableRefs.length > 0) {
             // 특정 테이블만 참조
             filteredExternalRows = [];
@@ -757,14 +758,14 @@ export function RepeatScreenModalComponent({
             // 모든 외부 테이블 데이터 사용 (기존 동작)
             filteredExternalRows = allExternalRows;
           }
-          
+
           // 가상 집계 (연산식) - 외부 테이블 데이터 포함하여 재계산
           newAggregations[agg.resultField] = evaluateFormulaWithContext(
             agg.formula,
             card._representativeData,
             card._rows,
             filteredExternalRows,
-            newAggregations // 이전 집계 결과 참조
+            newAggregations, // 이전 집계 결과 참조
           );
         }
       });
@@ -854,14 +855,16 @@ export function RepeatScreenModalComponent({
           targetColumn: rowNumbering.targetColumn,
           numberingRuleId: rowNumbering.numberingRuleId,
         });
-        
+
         // 채번 API 호출 (allocate: 실제 시퀀스 증가)
+        // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
         const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
-        const response = await allocateNumberingCode(rowNumbering.numberingRuleId);
-        
+        const userInputCode = newRowData[rowNumbering.targetColumn] as string;
+        const response = await allocateNumberingCode(rowNumbering.numberingRuleId, userInputCode, newRowData);
+
         if (response.success && response.data) {
           newRowData[rowNumbering.targetColumn] = response.data.generatedCode;
-          
+
           console.log("[RepeatScreenModal] 자동 채번 완료:", {
             column: rowNumbering.targetColumn,
             generatedCode: response.data.generatedCode,
@@ -886,12 +889,12 @@ export function RepeatScreenModalComponent({
         ...prev,
         [key]: [...(prev[key] || []), newRowData],
       };
-      
+
       // 🆕 v3.5: 새 행 추가 시 집계 재계산
       setTimeout(() => {
         recalculateAggregationsWithExternalData(newData);
       }, 0);
-      
+
       return newData;
     });
   };
@@ -900,7 +903,7 @@ export function RepeatScreenModalComponent({
   const saveTableAreaData = async (cardId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
     const key = `${cardId}-${contentRowId}`;
     const rows = externalTableData[key] || [];
-    
+
     console.log("[RepeatScreenModal] saveTableAreaData 시작:", {
       key,
       rowsCount: rows.length,
@@ -908,7 +911,7 @@ export function RepeatScreenModalComponent({
       tableDataSource: contentRow?.tableDataSource,
       tableCrud: contentRow?.tableCrud,
     });
-    
+
     if (!contentRow?.tableDataSource?.enabled) {
       console.warn("[RepeatScreenModal] 외부 테이블 데이터 소스가 설정되지 않음");
       return { success: false, message: "데이터 소스가 설정되지 않았습니다." };
@@ -920,7 +923,7 @@ export function RepeatScreenModalComponent({
     console.log("[RepeatScreenModal] 저장 대상:", {
       targetTable,
       dirtyRowsCount: dirtyRows.length,
-      dirtyRows: dirtyRows.map(r => ({ _isNew: r._isNew, _isDirty: r._isDirty, data: r })),
+      dirtyRows: dirtyRows.map((r) => ({ _isNew: r._isNew, _isDirty: r._isDirty, data: r })),
     });
 
     if (dirtyRows.length === 0) {
@@ -932,7 +935,7 @@ export function RepeatScreenModalComponent({
 
     // 🆕 v3.6: editable한 컬럼 + 조인 키만 추출 (읽기 전용 컬럼은 제외)
     const allowedFields = new Set<string>();
-    
+
     // tableColumns에서 editable: true인 필드만 추가 (읽기 전용 컬럼 제외)
     if (contentRow.tableColumns) {
       contentRow.tableColumns.forEach((col) => {
@@ -943,20 +946,23 @@ export function RepeatScreenModalComponent({
         }
       });
     }
-    
+
     // 조인 조건의 sourceKey 추가 (예: sales_order_id) - 이건 항상 필요
     if (contentRow.tableDataSource?.joinConditions) {
       contentRow.tableDataSource.joinConditions.forEach((cond) => {
         if (cond.sourceKey) allowedFields.add(cond.sourceKey);
       });
     }
-    
+
     console.log("[RepeatScreenModal] 저장 허용 필드 (editable + 조인키):", Array.from(allowedFields));
-    console.log("[RepeatScreenModal] tableColumns 정보:", contentRow.tableColumns?.map(c => ({ 
-      field: c.field, 
-      editable: c.editable, 
-      inputType: c.inputType 
-    })));
+    console.log(
+      "[RepeatScreenModal] tableColumns 정보:",
+      contentRow.tableColumns?.map((c) => ({
+        field: c.field,
+        editable: c.editable,
+        inputType: c.inputType,
+      })),
+    );
 
     // 삭제할 행 (기존 데이터 중 _isDeleted가 true인 것)
     const deletedRows = dirtyRows.filter((row) => row._isDeleted && row._originalData?.id);
@@ -969,25 +975,30 @@ export function RepeatScreenModalComponent({
     // 🆕 v3.7: 삭제 처리 (배열 형태로 body에 전달)
     for (const row of deletedRows) {
       const deleteId = row._originalData.id;
-      console.log(`[RepeatScreenModal] DELETE 요청: /table-management/tables/${targetTable}/delete`, [{ id: deleteId }]);
+      console.log(`[RepeatScreenModal] DELETE 요청: /table-management/tables/${targetTable}/delete`, [
+        { id: deleteId },
+      ]);
       savePromises.push(
-        apiClient.request({
-          method: "DELETE",
-          url: `/table-management/tables/${targetTable}/delete`,
-          data: [{ id: deleteId }],
-        }).then((res) => {
-          console.log("[RepeatScreenModal] DELETE 응답:", res.data);
-          return { type: "delete", id: deleteId };
-        }).catch((err) => {
-          console.error("[RepeatScreenModal] DELETE 실패:", err.response?.data || err.message);
-          throw err;
-        })
+        apiClient
+          .request({
+            method: "DELETE",
+            url: `/table-management/tables/${targetTable}/delete`,
+            data: [{ id: deleteId }],
+          })
+          .then((res) => {
+            console.log("[RepeatScreenModal] DELETE 응답:", res.data);
+            return { type: "delete", id: deleteId };
+          })
+          .catch((err) => {
+            console.error("[RepeatScreenModal] DELETE 실패:", err.response?.data || err.message);
+            throw err;
+          }),
       );
     }
 
     for (const row of rowsToSave) {
       const { _rowId, _originalData, _isDirty, _isNew, _isDeleted, ...allData } = row;
-      
+
       // 허용된 필드만 필터링
       const dataToSave: Record<string, any> = {};
       for (const field of allowedFields) {
@@ -1007,16 +1018,19 @@ export function RepeatScreenModalComponent({
         // INSERT - /add 엔드포인트 사용
         console.log(`[RepeatScreenModal] INSERT 요청: /table-management/tables/${targetTable}/add`, dataToSave);
         savePromises.push(
-          apiClient.post(`/table-management/tables/${targetTable}/add`, dataToSave).then((res) => {
-            console.log("[RepeatScreenModal] INSERT 응답:", res.data);
-            if (res.data?.data?.id) {
-              savedIds.push(res.data.data.id);
-            }
-            return res;
-          }).catch((err) => {
-            console.error("[RepeatScreenModal] INSERT 실패:", err.response?.data || err.message);
-            throw err;
-          })
+          apiClient
+            .post(`/table-management/tables/${targetTable}/add`, dataToSave)
+            .then((res) => {
+              console.log("[RepeatScreenModal] INSERT 응답:", res.data);
+              if (res.data?.data?.id) {
+                savedIds.push(res.data.data.id);
+              }
+              return res;
+            })
+            .catch((err) => {
+              console.error("[RepeatScreenModal] INSERT 실패:", err.response?.data || err.message);
+              throw err;
+            }),
         );
       } else if (_originalData?.id) {
         // UPDATE - /edit 엔드포인트 사용 (originalData와 updatedData 형식)
@@ -1026,14 +1040,17 @@ export function RepeatScreenModalComponent({
         };
         console.log(`[RepeatScreenModal] UPDATE 요청: /table-management/tables/${targetTable}/edit`, updatePayload);
         savePromises.push(
-          apiClient.put(`/table-management/tables/${targetTable}/edit`, updatePayload).then((res) => {
-            console.log("[RepeatScreenModal] UPDATE 응답:", res.data);
-            savedIds.push(_originalData.id);
-            return res;
-          }).catch((err) => {
-            console.error("[RepeatScreenModal] UPDATE 실패:", err.response?.data || err.message);
-            throw err;
-          })
+          apiClient
+            .put(`/table-management/tables/${targetTable}/edit`, updatePayload)
+            .then((res) => {
+              console.log("[RepeatScreenModal] UPDATE 응답:", res.data);
+              savedIds.push(_originalData.id);
+              return res;
+            })
+            .catch((err) => {
+              console.error("[RepeatScreenModal] UPDATE 실패:", err.response?.data || err.message);
+              throw err;
+            }),
         );
       }
     }
@@ -1053,7 +1070,15 @@ export function RepeatScreenModalComponent({
               _isDirty: false,
               _isNew: false,
               _isEditing: false, // 🆕 v3.8: 수정 모드 해제
-              _originalData: { ...row, _rowId: undefined, _originalData: undefined, _isDirty: undefined, _isNew: undefined, _isDeleted: undefined, _isEditing: undefined },
+              _originalData: {
+                ...row,
+                _rowId: undefined,
+                _originalData: undefined,
+                _isDirty: undefined,
+                _isNew: undefined,
+                _isDeleted: undefined,
+                _isEditing: undefined,
+              },
             }));
         }
         return updated;
@@ -1061,9 +1086,8 @@ export function RepeatScreenModalComponent({
 
       const savedCount = rowsToSave.length;
       const deletedCount = deletedRows.length;
-      const message = deletedCount > 0 
-        ? `${savedCount}건 저장, ${deletedCount}건 삭제 완료`
-        : `${savedCount}건 저장 완료`;
+      const message =
+        deletedCount > 0 ? `${savedCount}건 저장, ${deletedCount}건 삭제 완료` : `${savedCount}건 저장 완료`;
 
       return { success: true, message, savedCount, deletedCount, savedIds };
     } catch (error: any) {
@@ -1079,7 +1103,7 @@ export function RepeatScreenModalComponent({
       const result = await saveTableAreaData(cardId, contentRowId, contentRow);
       if (result.success) {
         console.log("[RepeatScreenModal] 테이블 영역 저장 성공:", result);
-        
+
         // 🆕 v3.9: 집계 저장 설정이 있는 경우 연관 테이블 동기화
         const card = groupedCardsData.find((c) => c._cardId === cardId);
         if (card && grouping?.aggregations) {
@@ -1101,16 +1125,16 @@ export function RepeatScreenModalComponent({
 
     for (const agg of grouping.aggregations) {
       const saveConfig = agg.saveConfig;
-      
+
       // 저장 설정이 없거나 비활성화된 경우 스킵
       if (!saveConfig?.enabled) continue;
-      
+
       // 자동 저장이 아닌 경우, 레이아웃에 연결되어 있는지 확인 필요
       // (현재는 자동 저장과 동일하게 처리 - 추후 레이아웃 연결 체크 추가 가능)
-      
+
       // 집계 결과 값 가져오기
       const aggregatedValue = card._aggregations[agg.resultField];
-      
+
       if (aggregatedValue === undefined) {
         console.warn(`[RepeatScreenModal] 집계 결과 없음: ${agg.resultField}`);
         continue;
@@ -1118,7 +1142,7 @@ export function RepeatScreenModalComponent({
 
       // 조인 키로 대상 레코드 식별
       const sourceKeyValue = card._representativeData[saveConfig.joinKey.sourceField];
-      
+
       if (!sourceKeyValue) {
         console.warn(`[RepeatScreenModal] 조인 키 값 없음: ${saveConfig.joinKey.sourceField}`);
         continue;
@@ -1135,22 +1159,25 @@ export function RepeatScreenModalComponent({
       // UPDATE API 호출
       const updatePayload = {
         originalData: { [saveConfig.joinKey.targetField]: sourceKeyValue },
-        updatedData: { 
+        updatedData: {
           [saveConfig.targetColumn]: aggregatedValue,
           [saveConfig.joinKey.targetField]: sourceKeyValue,
         },
       };
 
       savePromises.push(
-        apiClient.put(`/table-management/tables/${saveConfig.targetTable}/edit`, updatePayload)
+        apiClient
+          .put(`/table-management/tables/${saveConfig.targetTable}/edit`, updatePayload)
           .then((res) => {
-            console.log(`[RepeatScreenModal] 집계 저장 성공: ${agg.resultField} -> ${saveConfig.targetTable}.${saveConfig.targetColumn}`);
+            console.log(
+              `[RepeatScreenModal] 집계 저장 성공: ${agg.resultField} -> ${saveConfig.targetTable}.${saveConfig.targetColumn}`,
+            );
             return res;
           })
           .catch((err) => {
             console.error(`[RepeatScreenModal] 집계 저장 실패: ${agg.resultField}`, err.response?.data || err.message);
             throw err;
-          })
+          }),
       );
     }
 
@@ -1165,7 +1192,12 @@ export function RepeatScreenModalComponent({
   };
 
   // 🆕 v3.1: 외부 테이블 행 삭제 요청
-  const handleDeleteExternalRowRequest = (cardId: string, rowId: string, contentRowId: string, contentRow: CardContentRowConfig) => {
+  const handleDeleteExternalRowRequest = (
+    cardId: string,
+    rowId: string,
+    contentRowId: string,
+    contentRow: CardContentRowConfig,
+  ) => {
     if (contentRow.tableCrud?.deleteConfirm?.enabled !== false) {
       // 삭제 확인 팝업 표시
       setPendingDeleteInfo({ cardId, rowId, contentRowId });
@@ -1194,7 +1226,7 @@ export function RepeatScreenModalComponent({
         }
 
         console.log(`[RepeatScreenModal] DELETE API 호출: ${targetTable}, id=${targetRow._originalData.id}`);
-        
+
         // 백엔드는 배열 형태의 데이터를 기대함
         await apiClient.request({
           method: "DELETE",
@@ -1205,19 +1237,19 @@ export function RepeatScreenModalComponent({
         console.log(`[RepeatScreenModal] DELETE 성공: ${targetTable}, id=${targetRow._originalData.id}`);
 
         // 성공 시 UI에서 완전히 제거
-    setExternalTableData((prev) => {
-      const newData = {
-        ...prev,
+        setExternalTableData((prev) => {
+          const newData = {
+            ...prev,
             [key]: prev[key].filter((row) => row._rowId !== rowId),
-      };
-      
+          };
+
           // 행 삭제 시 집계 재계산
-      setTimeout(() => {
-        recalculateAggregationsWithExternalData(newData);
-      }, 0);
-      
-      return newData;
-    });
+          setTimeout(() => {
+            recalculateAggregationsWithExternalData(newData);
+          }, 0);
+
+          return newData;
+        });
       } catch (error: any) {
         console.error(`[RepeatScreenModal] DELETE 실패:`, error.response?.data || error.message);
         // 에러 시에도 다이얼로그 닫기
@@ -1251,16 +1283,14 @@ export function RepeatScreenModalComponent({
       const newData = {
         ...prev,
         [key]: (prev[key] || []).map((row) =>
-          row._rowId === rowId
-            ? { ...row, _isDeleted: false, _isDirty: true }
-            : row
+          row._rowId === rowId ? { ...row, _isDeleted: false, _isDirty: true } : row,
         ),
       };
-      
+
       setTimeout(() => {
         recalculateAggregationsWithExternalData(newData);
       }, 0);
-      
+
       return newData;
     });
   };
@@ -1270,11 +1300,7 @@ export function RepeatScreenModalComponent({
     const key = `${cardId}-${contentRowId}`;
     setExternalTableData((prev) => ({
       ...prev,
-      [key]: (prev[key] || []).map((row) =>
-        row._rowId === rowId
-          ? { ...row, _isEditing: true }
-          : row
-      ),
+      [key]: (prev[key] || []).map((row) => (row._rowId === rowId ? { ...row, _isEditing: true } : row)),
     }));
   };
 
@@ -1285,39 +1311,45 @@ export function RepeatScreenModalComponent({
       ...prev,
       [key]: (prev[key] || []).map((row) =>
         row._rowId === rowId
-          ? { 
-              ...row._originalData, 
-              _rowId: row._rowId, 
+          ? {
+              ...row._originalData,
+              _rowId: row._rowId,
               _originalData: row._originalData,
-              _isEditing: false, 
+              _isEditing: false,
               _isDirty: false,
               _isNew: false,
               _isDeleted: false,
             }
-          : row
+          : row,
       ),
     }));
   };
 
   // 🆕 v3.1: 외부 테이블 행 데이터 변경
-  const handleExternalRowDataChange = (cardId: string, contentRowId: string, rowId: string, field: string, value: any) => {
+  const handleExternalRowDataChange = (
+    cardId: string,
+    contentRowId: string,
+    rowId: string,
+    field: string,
+    value: any,
+  ) => {
     const key = `${cardId}-${contentRowId}`;
-    
+
     // 데이터 업데이트
     setExternalTableData((prev) => {
       const newData = {
         ...prev,
         [key]: (prev[key] || []).map((row) =>
-          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row
+          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row,
         ),
       };
-      
+
       // 🆕 v3.5: 데이터 변경 시 집계 실시간 재계산
       // setTimeout으로 비동기 처리하여 상태 업데이트 후 재계산
       setTimeout(() => {
         recalculateAggregationsWithExternalData(newData);
       }, 0);
-      
+
       return newData;
     });
   };
@@ -1370,18 +1402,18 @@ export function RepeatScreenModalComponent({
       if (groupingConfig.aggregations) {
         groupingConfig.aggregations.forEach((agg) => {
           const sourceType = agg.sourceType || "column";
-          
+
           if (sourceType === "column") {
             // 컬럼 집계 (기본 테이블만 - 외부 테이블은 나중에 처리)
             const sourceTable = agg.sourceTable || dataSource?.sourceTable;
             const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
-            
+
             if (!isExternalTable) {
               // 기본 테이블 집계
               aggregations[agg.resultField] = calculateColumnAggregation(
-                rows, 
-                agg.sourceField || "", 
-                agg.type || "sum"
+                rows,
+                agg.sourceField || "",
+                agg.type || "sum",
               );
             } else {
               // 외부 테이블 집계는 나중에 계산 (placeholder)
@@ -1396,7 +1428,7 @@ export function RepeatScreenModalComponent({
                 representativeData,
                 rows,
                 [], // 외부 테이블 데이터 없음
-                aggregations // 이전 집계 결과 참조
+                aggregations, // 이전 집계 결과 참조
               );
             } else {
               aggregations[agg.resultField] = 0;
@@ -1425,9 +1457,9 @@ export function RepeatScreenModalComponent({
 
   // 집계 계산 (컬럼 집계용)
   const calculateColumnAggregation = (
-    rows: any[], 
-    sourceField: string, 
-    type: "sum" | "count" | "avg" | "min" | "max"
+    rows: any[],
+    sourceField: string,
+    type: "sum" | "count" | "avg" | "min" | "max",
   ): number => {
     const values = rows.map((row) => Number(row[sourceField]) || 0);
 
@@ -1453,7 +1485,7 @@ export function RepeatScreenModalComponent({
     cardRows: any[], // 기본 테이블 행들
     externalRows: any[], // 외부 테이블 행들
     previousAggregations: Record<string, number>, // 이전 집계 결과들
-    representativeData: Record<string, any> // 카드 대표 데이터
+    representativeData: Record<string, any>, // 카드 대표 데이터
   ): number => {
     const sourceType = agg.sourceType || "column";
 
@@ -1461,26 +1493,16 @@ export function RepeatScreenModalComponent({
       // 컬럼 집계
       const sourceTable = agg.sourceTable || dataSource?.sourceTable;
       const isExternalTable = sourceTable && sourceTable !== dataSource?.sourceTable;
-      
+
       // 외부 테이블인 경우 externalRows 사용, 아니면 cardRows 사용
       const targetRows = isExternalTable ? externalRows : cardRows;
-      
-      return calculateColumnAggregation(
-        targetRows, 
-        agg.sourceField || "", 
-        agg.type || "sum"
-      );
+
+      return calculateColumnAggregation(targetRows, agg.sourceField || "", agg.type || "sum");
     } else if (sourceType === "formula") {
       // 가상 집계 (연산식)
       if (!agg.formula) return 0;
-      
-      return evaluateFormulaWithContext(
-        agg.formula,
-        representativeData,
-        cardRows,
-        externalRows,
-        previousAggregations
-      );
+
+      return evaluateFormulaWithContext(agg.formula, representativeData, cardRows, externalRows, previousAggregations);
     }
 
     return 0;
@@ -1489,7 +1511,7 @@ export function RepeatScreenModalComponent({
   // 🆕 v3.1: 집계 표시값 계산 (formula, external 등 지원)
   const calculateAggregationDisplayValue = (
     aggField: AggregationDisplayConfig,
-    card: GroupedCardData
+    card: GroupedCardData,
   ): number | string => {
     const sourceType = aggField.sourceType || "aggregation";
 
@@ -1524,7 +1546,7 @@ export function RepeatScreenModalComponent({
     representativeData: Record<string, any>,
     cardRows: any[], // 기본 테이블 행들
     externalRows: any[], // 외부 테이블 행들
-    previousAggregations: Record<string, number> // 이전 집계 결과들
+    previousAggregations: Record<string, number>, // 이전 집계 결과들
   ): number => {
     try {
       let expression = formula;
@@ -1613,11 +1635,7 @@ export function RepeatScreenModalComponent({
   };
 
   // 레거시 호환: 기존 evaluateFormula 유지
-  const evaluateFormula = (
-    formula: string,
-    representativeData: Record<string, any>,
-    rows?: any[]
-  ): number => {
+  const evaluateFormula = (formula: string, representativeData: Record<string, any>, rows?: any[]): number => {
     return evaluateFormulaWithContext(formula, representativeData, rows || [], [], {});
   };
 
@@ -1645,7 +1663,7 @@ export function RepeatScreenModalComponent({
             }
           }
         }
-        
+
         // 테이블 타입의 컬럼 처리
         if (contentRow.type === "table" && contentRow.tableColumns) {
           for (const col of contentRow.tableColumns) {
@@ -1678,7 +1696,7 @@ export function RepeatScreenModalComponent({
   // Simple 모드: 카드 데이터 변경
   const handleCardDataChange = (cardId: string, field: string, value: any) => {
     setCardsData((prev) =>
-      prev.map((card) => (card._cardId === cardId ? { ...card, [field]: value, _isDirty: true } : card))
+      prev.map((card) => (card._cardId === cardId ? { ...card, [field]: value, _isDirty: true } : card)),
     );
   };
 
@@ -1689,7 +1707,7 @@ export function RepeatScreenModalComponent({
         if (card._cardId !== cardId) return card;
 
         const updatedRows = card._rows.map((row) =>
-          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row
+          row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row,
         );
 
         // 집계값 재계산
@@ -1705,7 +1723,7 @@ export function RepeatScreenModalComponent({
           _rows: updatedRows,
           _aggregations: newAggregations,
         };
-      })
+      }),
     );
   };
 
@@ -1761,7 +1779,7 @@ export function RepeatScreenModalComponent({
       // key 형식: cardId-contentRowId
       const [cardId, contentRowId] = key.split("-").slice(0, 2);
       const contentRow = contentRows.find((r) => r.id === contentRowId || key.includes(r.id));
-      
+
       if (!contentRow?.tableDataSource?.enabled) continue;
 
       const targetTable = contentRow.tableCrud?.targetTable || contentRow.tableDataSource.sourceTable;
@@ -1772,13 +1790,13 @@ export function RepeatScreenModalComponent({
 
         if (_isNew) {
           // INSERT
-          savePromises.push(
-            apiClient.post(`/table-management/tables/${targetTable}/data`, dataToSave).then(() => {})
-          );
+          savePromises.push(apiClient.post(`/table-management/tables/${targetTable}/data`, dataToSave).then(() => {}));
         } else if (_originalData?.id) {
           // UPDATE
           savePromises.push(
-            apiClient.put(`/table-management/tables/${targetTable}/data/${_originalData.id}`, dataToSave).then(() => {})
+            apiClient
+              .put(`/table-management/tables/${targetTable}/data/${_originalData.id}`, dataToSave)
+              .then(() => {}),
           );
         }
       }
@@ -1794,7 +1812,13 @@ export function RepeatScreenModalComponent({
           ...row,
           _isDirty: false,
           _isNew: false,
-          _originalData: { ...row, _rowId: undefined, _originalData: undefined, _isDirty: undefined, _isNew: undefined },
+          _originalData: {
+            ...row,
+            _rowId: undefined,
+            _originalData: undefined,
+            _isDirty: undefined,
+            _isNew: undefined,
+          },
         }));
       }
       return updated;
@@ -1835,9 +1859,7 @@ export function RepeatScreenModalComponent({
           // 각 조인 키별로 집계 계산 및 업데이트
           for (const keyValue of joinKeyValues) {
             // 해당 조인 키에 해당하는 행들만 필터링
-            const filteredRows = rows.filter(
-              (row) => row[syncSave.joinKey.sourceField] === keyValue
-            );
+            const filteredRows = rows.filter((row) => row[syncSave.joinKey.sourceField] === keyValue);
 
             // 집계 계산
             let aggregatedValue: number = 0;
@@ -1864,12 +1886,15 @@ export function RepeatScreenModalComponent({
                 break;
             }
 
-            console.log(`[SyncSave] ${sourceTable}.${syncSave.sourceColumn} → ${syncSave.targetTable}.${syncSave.targetColumn}`, {
-              joinKey: keyValue,
-              aggregationType: syncSave.aggregationType,
-              values,
-              aggregatedValue,
-            });
+            console.log(
+              `[SyncSave] ${sourceTable}.${syncSave.sourceColumn} → ${syncSave.targetTable}.${syncSave.targetColumn}`,
+              {
+                joinKey: keyValue,
+                aggregationType: syncSave.aggregationType,
+                values,
+                aggregatedValue,
+              },
+            );
 
             // 대상 테이블 업데이트
             syncPromises.push(
@@ -1878,12 +1903,14 @@ export function RepeatScreenModalComponent({
                   [syncSave.targetColumn]: aggregatedValue,
                 })
                 .then(() => {
-                  console.log(`[SyncSave] 업데이트 완료: ${syncSave.targetTable}.${syncSave.targetColumn} = ${aggregatedValue} (id=${keyValue})`);
+                  console.log(
+                    `[SyncSave] 업데이트 완료: ${syncSave.targetTable}.${syncSave.targetColumn} = ${aggregatedValue} (id=${keyValue})`,
+                  );
                 })
                 .catch((err) => {
                   console.error(`[SyncSave] 업데이트 실패:`, err);
                   throw err;
-                })
+                }),
             );
           }
         }
@@ -1928,7 +1955,7 @@ export function RepeatScreenModalComponent({
                 config: btn.customAction.config,
                 componentId: component?.id,
               },
-            })
+            }),
           );
         }
         break;
@@ -2029,7 +2056,7 @@ export function RepeatScreenModalComponent({
       prev.map((card) => ({
         ...card,
         _rows: card._rows.map((row) => ({ ...row, _isDirty: false })),
-      }))
+      })),
     );
   };
 
@@ -2046,7 +2073,7 @@ export function RepeatScreenModalComponent({
           } else {
             await apiClient.post(`/table-management/tables/${tableName}/data`, dataToSave);
           }
-        })
+        }),
       );
     });
 
@@ -2064,9 +2091,7 @@ export function RepeatScreenModalComponent({
     }
 
     // 🆕 v3.1: 외부 테이블 데이터 수정 여부
-    const hasExternalDirty = Object.values(externalTableData).some((rows) =>
-      rows.some((row) => row._isDirty)
-    );
+    const hasExternalDirty = Object.values(externalTableData).some((rows) => rows.some((row) => row._isDirty));
 
     return hasBaseDirty || hasExternalDirty;
   }, [cardMode, cardsData, groupedCardsData, externalTableData]);
@@ -2084,25 +2109,25 @@ export function RepeatScreenModalComponent({
     return (
       <div
         className={cn(
-          "w-full h-full min-h-[400px] border-2 border-dashed border-primary/50 rounded-lg p-8 bg-gradient-to-br from-primary/5 to-primary/10",
-          className
+          "border-primary/50 from-primary/5 to-primary/10 h-full min-h-[400px] w-full rounded-lg border-2 border-dashed bg-gradient-to-br p-8",
+          className,
         )}
       >
-        <div className="flex flex-col items-center justify-center h-full space-y-6">
+        <div className="flex h-full flex-col items-center justify-center space-y-6">
           {/* 아이콘 */}
-          <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
-            <Layers className="w-10 h-10 text-primary" />
+          <div className="bg-primary/10 flex h-20 w-20 items-center justify-center rounded-full">
+            <Layers className="text-primary h-10 w-10" />
           </div>
 
           {/* 제목 */}
-          <div className="text-center space-y-2">
-            <div className="text-xl font-bold text-primary">Repeat Screen Modal</div>
-            <div className="text-base font-semibold text-foreground">반복 화면 모달</div>
+          <div className="space-y-2 text-center">
+            <div className="text-primary text-xl font-bold">Repeat Screen Modal</div>
+            <div className="text-foreground text-base font-semibold">반복 화면 모달</div>
             <Badge variant="secondary">v3 자유 레이아웃</Badge>
           </div>
 
           {/* 행 구성 정보 */}
-          <div className="flex flex-wrap gap-2 justify-center">
+          <div className="flex flex-wrap justify-center gap-2">
             {contentRows.length > 0 ? (
               <>
                 {rowTypeCounts.header > 0 && (
@@ -2134,24 +2159,24 @@ export function RepeatScreenModalComponent({
           {/* 통계 정보 */}
           <div className="flex gap-6 text-center">
             <div className="space-y-1">
-              <div className="text-2xl font-bold text-primary">{contentRows.length}</div>
-              <div className="text-xs text-muted-foreground">행 (Rows)</div>
+              <div className="text-primary text-2xl font-bold">{contentRows.length}</div>
+              <div className="text-muted-foreground text-xs">행 (Rows)</div>
             </div>
-            <div className="w-px bg-border" />
+            <div className="bg-border w-px" />
             <div className="space-y-1">
-              <div className="text-2xl font-bold text-primary">{grouping?.aggregations?.length || 0}</div>
-              <div className="text-xs text-muted-foreground">집계 설정</div>
+              <div className="text-primary text-2xl font-bold">{grouping?.aggregations?.length || 0}</div>
+              <div className="text-muted-foreground text-xs">집계 설정</div>
             </div>
-            <div className="w-px bg-border" />
+            <div className="bg-border w-px" />
             <div className="space-y-1">
-              <div className="text-2xl font-bold text-primary">{dataSource?.sourceTable ? 1 : 0}</div>
-              <div className="text-xs text-muted-foreground">데이터 소스</div>
+              <div className="text-primary text-2xl font-bold">{dataSource?.sourceTable ? 1 : 0}</div>
+              <div className="text-muted-foreground text-xs">데이터 소스</div>
             </div>
           </div>
 
           {/* 데이터 소스 정보 */}
           {dataSource?.sourceTable && (
-            <div className="text-xs bg-green-100 dark:bg-green-900 px-3 py-2 rounded-md">
+            <div className="rounded-md bg-green-100 px-3 py-2 text-xs dark:bg-green-900">
               소스 테이블: <strong>{dataSource.sourceTable}</strong>
               {dataSource.filterField && <span className="ml-2">(필터: {dataSource.filterField})</span>}
             </div>
@@ -2159,20 +2184,20 @@ export function RepeatScreenModalComponent({
 
           {/* 그룹핑 정보 */}
           {grouping?.enabled && (
-            <div className="text-xs bg-purple-100 dark:bg-purple-900 px-3 py-2 rounded-md">
+            <div className="rounded-md bg-purple-100 px-3 py-2 text-xs dark:bg-purple-900">
               그룹핑: <strong>{grouping.groupByField}</strong>
             </div>
           )}
 
           {/* 카드 제목 정보 */}
           {showCardTitle && cardTitle && (
-            <div className="text-xs bg-muted px-3 py-2 rounded-md">
+            <div className="bg-muted rounded-md px-3 py-2 text-xs">
               카드 제목: <strong>{cardTitle}</strong>
             </div>
           )}
 
           {/* 설정 안내 */}
-          <div className="text-xs text-muted-foreground bg-muted/50 px-4 py-2 rounded-md border">
+          <div className="text-muted-foreground bg-muted/50 rounded-md border px-4 py-2 text-xs">
             오른쪽 패널에서 행을 추가하고 타입(헤더/집계/테이블/필드)을 선택하세요
           </div>
         </div>
@@ -2184,8 +2209,8 @@ export function RepeatScreenModalComponent({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center p-12">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <span className="ml-3 text-sm text-muted-foreground">데이터를 불러오는 중...</span>
+        <Loader2 className="text-primary h-8 w-8 animate-spin" />
+        <span className="text-muted-foreground ml-3 text-sm">데이터를 불러오는 중...</span>
       </div>
     );
   }
@@ -2193,12 +2218,12 @@ export function RepeatScreenModalComponent({
   // 오류 상태
   if (loadError) {
     return (
-      <div className="p-6 border border-destructive/50 rounded-lg bg-destructive/5">
-        <div className="flex items-center gap-2 text-destructive mb-2">
+      <div className="border-destructive/50 bg-destructive/5 rounded-lg border p-6">
+        <div className="text-destructive mb-2 flex items-center gap-2">
           <X className="h-5 w-5" />
           <span className="font-semibold">데이터 로드 실패</span>
         </div>
-        <p className="text-sm text-muted-foreground">{loadError}</p>
+        <p className="text-muted-foreground text-sm">{loadError}</p>
       </div>
     );
   }
@@ -2211,23 +2236,23 @@ export function RepeatScreenModalComponent({
   if (useGrouping) {
     return (
       <div className={cn("space-y-6 overflow-x-auto", className)}>
-        <div className="space-y-4 min-w-[800px]" style={{ gap: cardSpacing }}>
+        <div className="min-w-[800px] space-y-4" style={{ gap: cardSpacing }}>
           {groupedCardsData.map((card, cardIndex) => (
             <Card
               key={card._cardId}
               className={cn(
                 "transition-shadow",
                 showCardBorder && "border-2",
-                card._rows.some((r) => r._isDirty) && "border-primary shadow-lg"
+                card._rows.some((r) => r._isDirty) && "border-primary shadow-lg",
               )}
             >
               {/* 카드 제목 (선택사항) */}
               {showCardTitle && (
                 <CardHeader className="pb-3">
-                  <CardTitle className="text-lg flex items-center justify-between">
+                  <CardTitle className="flex items-center justify-between text-lg">
                     <span>{getCardTitle(card._representativeData, cardIndex)}</span>
                     {card._rows.some((r) => r._isDirty) && (
-                      <Badge variant="outline" className="text-xs text-primary">
+                      <Badge variant="outline" className="text-primary text-xs">
                         수정됨
                       </Badge>
                     )}
@@ -2241,10 +2266,10 @@ export function RepeatScreenModalComponent({
                     <div key={contentRow.id || `crow-${rowIndex}`}>
                       {contentRow.type === "table" && contentRow.tableDataSource?.enabled ? (
                         // 🆕 v3.1: 외부 테이블 데이터 소스 사용
-                        <div className="border rounded-lg overflow-hidden">
+                        <div className="overflow-hidden rounded-lg border">
                           {/* 테이블 헤더 영역: 제목 + 버튼들 */}
                           {(contentRow.tableTitle || contentRow.tableCrud?.allowCreate) && (
-                            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium flex items-center justify-between">
+                            <div className="bg-muted/30 flex items-center justify-between border-b px-4 py-2 text-sm font-medium">
                               <span>{contentRow.tableTitle || ""}</span>
                               <div className="flex items-center gap-2">
                                 {/* 추가 버튼 */}
@@ -2253,7 +2278,7 @@ export function RepeatScreenModalComponent({
                                     variant="outline"
                                     size="sm"
                                     onClick={() => handleAddExternalRow(card._cardId, contentRow.id, contentRow)}
-                                    className="h-7 text-xs gap-1"
+                                    className="h-7 gap-1 text-xs"
                                   >
                                     <Plus className="h-3 w-3" />
                                     추가
@@ -2267,15 +2292,17 @@ export function RepeatScreenModalComponent({
                               <TableHeader>
                                 <TableRow className="bg-muted/50">
                                   {/* 🆕 v3.13: hidden 컬럼 필터링 */}
-                                  {(contentRow.tableColumns || []).filter(col => !col.hidden).map((col) => (
-                                    <TableHead
-                                      key={col.id}
-                                      style={{ width: col.width }}
-                                      className={cn("text-xs", col.align && `text-${col.align}`)}
-                                    >
-                                      {col.label}
-                                    </TableHead>
-                                  ))}
+                                  {(contentRow.tableColumns || [])
+                                    .filter((col) => !col.hidden)
+                                    .map((col) => (
+                                      <TableHead
+                                        key={col.id}
+                                        style={{ width: col.width }}
+                                        className={cn("text-xs", col.align && `text-${col.align}`)}
+                                      >
+                                        {col.label}
+                                      </TableHead>
+                                    ))}
                                   {(contentRow.tableCrud?.allowUpdate || contentRow.tableCrud?.allowDelete) && (
                                     <TableHead className="w-[80px] text-center text-xs">작업</TableHead>
                                   )}
@@ -2286,8 +2313,11 @@ export function RepeatScreenModalComponent({
                               {(externalTableData[`${card._cardId}-${contentRow.id}`] || []).length === 0 ? (
                                 <TableRow>
                                   <TableCell
-                                    colSpan={(contentRow.tableColumns?.filter(col => !col.hidden)?.length || 0) + (contentRow.tableCrud?.allowDelete ? 1 : 0)}
-                                    className="text-center py-8 text-muted-foreground"
+                                    colSpan={
+                                      (contentRow.tableColumns?.filter((col) => !col.hidden)?.length || 0) +
+                                      (contentRow.tableCrud?.allowDelete ? 1 : 0)
+                                    }
+                                    className="text-muted-foreground py-8 text-center"
                                   >
                                     데이터가 없습니다.
                                   </TableCell>
@@ -2297,64 +2327,82 @@ export function RepeatScreenModalComponent({
                                   <TableRow
                                     key={row._rowId}
                                     className={cn(
-                                      row._isDirty && "bg-primary/5", 
+                                      row._isDirty && "bg-primary/5",
                                       row._isNew && "bg-green-50 dark:bg-green-950",
-                                      row._isDeleted && "bg-destructive/10 opacity-60"
+                                      row._isDeleted && "bg-destructive/10 opacity-60",
                                     )}
                                   >
                                     {/* 🆕 v3.13: hidden 컬럼 필터링 */}
-                                    {(contentRow.tableColumns || []).filter(col => !col.hidden).map((col) => (
-                                      <TableCell
-                                        key={`${row._rowId}-${col.id}`}
-                                        className={cn(
-                                          "text-sm", 
-                                          col.align && `text-${col.align}`,
-                                          row._isDeleted && "line-through text-muted-foreground"
-                                        )}
-                                      >
-                                        {renderTableCell(
-                                          col, 
-                                          row, 
-                                          (value) => handleExternalRowDataChange(card._cardId, contentRow.id, row._rowId, col.field, value),
-                                          row._isNew || row._isEditing // 신규 행이거나 수정 모드일 때만 편집 가능
-                                        )}
-                                      </TableCell>
-                                    ))}
+                                    {(contentRow.tableColumns || [])
+                                      .filter((col) => !col.hidden)
+                                      .map((col) => (
+                                        <TableCell
+                                          key={`${row._rowId}-${col.id}`}
+                                          className={cn(
+                                            "text-sm",
+                                            col.align && `text-${col.align}`,
+                                            row._isDeleted && "text-muted-foreground line-through",
+                                          )}
+                                        >
+                                          {renderTableCell(
+                                            col,
+                                            row,
+                                            (value) =>
+                                              handleExternalRowDataChange(
+                                                card._cardId,
+                                                contentRow.id,
+                                                row._rowId,
+                                                col.field,
+                                                value,
+                                              ),
+                                            row._isNew || row._isEditing, // 신규 행이거나 수정 모드일 때만 편집 가능
+                                          )}
+                                        </TableCell>
+                                      ))}
                                     {(contentRow.tableCrud?.allowUpdate || contentRow.tableCrud?.allowDelete) && (
                                       <TableCell className="text-center">
                                         <div className="flex items-center justify-center gap-1">
                                           {/* 수정 버튼: 저장된 행(isNew가 아닌)이고 편집 모드가 아닐 때만 표시 */}
-                                          {contentRow.tableCrud?.allowUpdate && !row._isNew && !row._isEditing && !row._isDeleted && (
-                                            <Button
-                                              variant="ghost"
-                                              size="sm"
-                                              onClick={() => handleEditExternalRow(card._cardId, row._rowId, contentRow.id)}
-                                              className="h-7 w-7 p-0 text-blue-600 hover:text-blue-700 hover:bg-blue-50"
-                                              title="수정"
-                                            >
-                                              <Pencil className="h-4 w-4" />
-                                            </Button>
-                                          )}
+                                          {contentRow.tableCrud?.allowUpdate &&
+                                            !row._isNew &&
+                                            !row._isEditing &&
+                                            !row._isDeleted && (
+                                              <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() =>
+                                                  handleEditExternalRow(card._cardId, row._rowId, contentRow.id)
+                                                }
+                                                className="h-7 w-7 p-0 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                                                title="수정"
+                                              >
+                                                <Pencil className="h-4 w-4" />
+                                              </Button>
+                                            )}
                                           {/* 수정 취소 버튼: 편집 모드일 때만 표시 */}
                                           {row._isEditing && !row._isNew && (
                                             <Button
                                               variant="ghost"
                                               size="sm"
-                                              onClick={() => handleCancelEditExternalRow(card._cardId, row._rowId, contentRow.id)}
-                                              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground hover:bg-muted"
+                                              onClick={() =>
+                                                handleCancelEditExternalRow(card._cardId, row._rowId, contentRow.id)
+                                              }
+                                              className="text-muted-foreground hover:text-foreground hover:bg-muted h-7 w-7 p-0"
                                               title="수정 취소"
                                             >
                                               <X className="h-4 w-4" />
                                             </Button>
                                           )}
                                           {/* 삭제/복원 버튼 */}
-                                          {contentRow.tableCrud?.allowDelete && (
-                                            row._isDeleted ? (
+                                          {contentRow.tableCrud?.allowDelete &&
+                                            (row._isDeleted ? (
                                               <Button
                                                 variant="ghost"
                                                 size="sm"
-                                                onClick={() => handleRestoreExternalRow(card._cardId, row._rowId, contentRow.id)}
-                                                className="h-7 w-7 p-0 text-primary hover:text-primary hover:bg-primary/10"
+                                                onClick={() =>
+                                                  handleRestoreExternalRow(card._cardId, row._rowId, contentRow.id)
+                                                }
+                                                className="text-primary hover:text-primary hover:bg-primary/10 h-7 w-7 p-0"
                                                 title="삭제 취소"
                                               >
                                                 <RotateCcw className="h-4 w-4" />
@@ -2363,14 +2411,20 @@ export function RepeatScreenModalComponent({
                                               <Button
                                                 variant="ghost"
                                                 size="sm"
-                                                onClick={() => handleDeleteExternalRowRequest(card._cardId, row._rowId, contentRow.id, contentRow)}
-                                                className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                                                onClick={() =>
+                                                  handleDeleteExternalRowRequest(
+                                                    card._cardId,
+                                                    row._rowId,
+                                                    contentRow.id,
+                                                    contentRow,
+                                                  )
+                                                }
+                                                className="text-destructive hover:text-destructive hover:bg-destructive/10 h-7 w-7 p-0"
                                                 title="삭제"
                                               >
                                                 <Trash2 className="h-4 w-4" />
                                               </Button>
-                                            )
-                                          )}
+                                            ))}
                                         </div>
                                       </TableCell>
                                     )}
@@ -2390,16 +2444,16 @@ export function RepeatScreenModalComponent({
                   // 레거시: tableLayout 사용
                   <>
                     {tableLayout?.headerRows && tableLayout.headerRows.length > 0 && (
-                      <div className="space-y-3 p-4 bg-muted/30 rounded-lg">
+                      <div className="bg-muted/30 space-y-3 rounded-lg p-4">
                         {tableLayout.headerRows.map((row, rowIndex) => (
                           <div
                             key={row.id || `hrow-${rowIndex}`}
                             className={cn(
                               "grid gap-4",
-                              row.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
+                              row.layout === "vertical" ? "grid-cols-1" : "auto-cols-fr grid-flow-col",
                               row.backgroundColor && getBackgroundClass(row.backgroundColor),
                               row.rounded && "rounded-lg",
-                              row.padding && `p-${row.padding}`
+                              row.padding && `p-${row.padding}`,
                             )}
                             style={{ gap: row.gap || "16px" }}
                           >
@@ -2414,7 +2468,7 @@ export function RepeatScreenModalComponent({
                     )}
 
                     {tableLayout?.tableColumns && tableLayout.tableColumns.length > 0 && (
-                      <div className="border rounded-lg overflow-hidden">
+                      <div className="overflow-hidden rounded-lg border">
                         <Table>
                           <TableHeader>
                             <TableRow className="bg-muted/50">
@@ -2438,10 +2492,10 @@ export function RepeatScreenModalComponent({
                                     className={cn("text-sm", col.align && `text-${col.align}`)}
                                   >
                                     {renderTableCell(
-                                      col, 
-                                      row, 
+                                      col,
+                                      row,
                                       (value) => handleRowDataChange(card._cardId, row._rowId, col.field, value),
-                                      row._isNew || row._isEditing
+                                      row._isNew || row._isEditing,
                                     )}
                                   </TableCell>
                                 ))}
@@ -2463,11 +2517,11 @@ export function RepeatScreenModalComponent({
           <div
             className={cn(
               "flex gap-2 pt-4",
-              footerConfig.position === "sticky" && "sticky bottom-0 bg-background py-4 border-t",
+              footerConfig.position === "sticky" && "bg-background sticky bottom-0 border-t py-4",
               footerConfig.alignment === "left" && "justify-start",
               footerConfig.alignment === "center" && "justify-center",
               footerConfig.alignment === "right" && "justify-end",
-              !footerConfig.alignment && "justify-end"
+              !footerConfig.alignment && "justify-end",
             )}
           >
             {footerConfig.buttons.map((btn) => (
@@ -2495,7 +2549,7 @@ export function RepeatScreenModalComponent({
 
         {/* 데이터 없음 */}
         {groupedCardsData.length === 0 && !isLoading && (
-          <div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
+          <div className="text-muted-foreground py-12 text-center">표시할 데이터가 없습니다.</div>
         )}
 
         {/* 🆕 v3.1: 삭제 확인 다이얼로그 */}
@@ -2503,9 +2557,7 @@ export function RepeatScreenModalComponent({
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>삭제 확인</AlertDialogTitle>
-              <AlertDialogDescription>
-                이 행을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
-              </AlertDialogDescription>
+              <AlertDialogDescription>이 행을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
               <AlertDialogCancel>취소</AlertDialogCancel>
@@ -2515,7 +2567,7 @@ export function RepeatScreenModalComponent({
                     handleDeleteExternalRow(
                       pendingDeleteInfo.cardId,
                       pendingDeleteInfo.rowId,
-                      pendingDeleteInfo.contentRowId
+                      pendingDeleteInfo.contentRowId,
                     );
                   }
                 }}
@@ -2533,50 +2585,52 @@ export function RepeatScreenModalComponent({
   // 단순 모드 렌더링 (그룹핑 없음)
   return (
     <div className={cn("space-y-6 overflow-x-auto", className)}>
-      <div className="space-y-4 min-w-[600px]" style={{ gap: cardSpacing }}>
+      <div className="min-w-[600px] space-y-4" style={{ gap: cardSpacing }}>
         {cardsData.map((card, cardIndex) => (
           <Card
             key={card._cardId}
-            className={cn("transition-shadow", showCardBorder && "border-2", card._isDirty && "border-primary shadow-lg")}
+            className={cn(
+              "transition-shadow",
+              showCardBorder && "border-2",
+              card._isDirty && "border-primary shadow-lg",
+            )}
           >
             {/* 카드 제목 (선택사항) */}
             {showCardTitle && (
               <CardHeader className="pb-3">
-                <CardTitle className="text-lg flex items-center justify-between">
+                <CardTitle className="flex items-center justify-between text-lg">
                   <span>{getCardTitle(card, cardIndex)}</span>
-                  {card._isDirty && <span className="text-xs text-primary font-normal">(수정됨)</span>}
+                  {card._isDirty && <span className="text-primary text-xs font-normal">(수정됨)</span>}
                 </CardTitle>
               </CardHeader>
             )}
             <CardContent className="space-y-4">
               {/* 🆕 v3: contentRows 기반 렌더링 */}
-              {useNewLayout ? (
-                contentRows.map((contentRow, rowIndex) => (
-                  <div key={contentRow.id || `crow-${rowIndex}`}>
-                    {renderSimpleContentRow(contentRow, card, (value, field) =>
-                      handleCardDataChange(card._cardId, field, value)
-                    )}
-                  </div>
-                ))
-              ) : (
-                // 레거시: cardLayout 사용
-                cardLayout.map((row, rowIndex) => (
-                  <div
-                    key={row.id || `row-${rowIndex}`}
-                    className={cn(
-                      "grid gap-4",
-                      row.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr"
-                    )}
-                    style={{ gap: row.gap || "16px" }}
-                  >
-                    {row.columns.map((col, colIndex) => (
-                      <div key={col.id || `col-${colIndex}`} style={{ width: col.width }}>
-                        {renderColumn(col, card, (value) => handleCardDataChange(card._cardId, col.field, value))}
-                      </div>
-                    ))}
-                  </div>
-                ))
-              )}
+              {useNewLayout
+                ? contentRows.map((contentRow, rowIndex) => (
+                    <div key={contentRow.id || `crow-${rowIndex}`}>
+                      {renderSimpleContentRow(contentRow, card, (value, field) =>
+                        handleCardDataChange(card._cardId, field, value),
+                      )}
+                    </div>
+                  ))
+                : // 레거시: cardLayout 사용
+                  cardLayout.map((row, rowIndex) => (
+                    <div
+                      key={row.id || `row-${rowIndex}`}
+                      className={cn(
+                        "grid gap-4",
+                        row.layout === "vertical" ? "grid-cols-1" : "auto-cols-fr grid-flow-col",
+                      )}
+                      style={{ gap: row.gap || "16px" }}
+                    >
+                      {row.columns.map((col, colIndex) => (
+                        <div key={col.id || `col-${colIndex}`} style={{ width: col.width }}>
+                          {renderColumn(col, card, (value) => handleCardDataChange(card._cardId, col.field, value))}
+                        </div>
+                      ))}
+                    </div>
+                  ))}
             </CardContent>
           </Card>
         ))}
@@ -2587,11 +2641,11 @@ export function RepeatScreenModalComponent({
         <div
           className={cn(
             "flex gap-2 pt-4",
-            footerConfig.position === "sticky" && "sticky bottom-0 bg-background py-4 border-t",
+            footerConfig.position === "sticky" && "bg-background sticky bottom-0 border-t py-4",
             footerConfig.alignment === "left" && "justify-start",
             footerConfig.alignment === "center" && "justify-center",
             footerConfig.alignment === "right" && "justify-end",
-            !footerConfig.alignment && "justify-end"
+            !footerConfig.alignment && "justify-end",
           )}
         >
           {footerConfig.buttons.map((btn) => (
@@ -2619,7 +2673,7 @@ export function RepeatScreenModalComponent({
 
       {/* 데이터 없음 */}
       {cardsData.length === 0 && !isLoading && (
-        <div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
+        <div className="text-muted-foreground py-12 text-center">표시할 데이터가 없습니다.</div>
       )}
     </div>
   );
@@ -2630,30 +2684,30 @@ function renderContentRow(
   contentRow: CardContentRowConfig,
   card: GroupedCardData,
   aggregations: AggregationConfig[],
-  onRowDataChange: (cardId: string, rowId: string, field: string, value: any) => void
+  onRowDataChange: (cardId: string, rowId: string, field: string, value: any) => void,
 ) {
   switch (contentRow.type) {
     case "header":
     case "fields":
       // contentRow에서 직접 columns 가져오기 (v3 구조)
       const headerColumns = contentRow.columns || [];
-      
+
       if (headerColumns.length === 0) {
         return (
-          <div className="p-4 bg-muted/30 rounded-lg text-sm text-muted-foreground">
+          <div className="bg-muted/30 text-muted-foreground rounded-lg p-4 text-sm">
             헤더 컬럼이 설정되지 않았습니다.
           </div>
         );
       }
-      
+
       return (
         <div
           className={cn(
             "grid gap-4",
-            contentRow.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
+            contentRow.layout === "vertical" ? "grid-cols-1" : "auto-cols-fr grid-flow-col",
             contentRow.backgroundColor && getBackgroundClass(contentRow.backgroundColor),
             contentRow.padding && `p-${contentRow.padding}`,
-            "rounded-lg"
+            "rounded-lg",
           )}
           style={{ gap: contentRow.gap || "16px" }}
         >
@@ -2668,22 +2722,18 @@ function renderContentRow(
     case "aggregation":
       // contentRow에서 직접 aggregationFields 가져오기 (v3 구조)
       const aggFields = contentRow.aggregationFields || [];
-      
+
       if (aggFields.length === 0) {
         return (
-          <div className="p-4 bg-orange-50 dark:bg-orange-950 rounded-lg text-sm text-orange-600 dark:text-orange-400">
+          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다. (레이아웃 탭에서 집계 필드를 추가하세요)
           </div>
         );
       }
-      
+
       return (
         <div
-          className={cn(
-            contentRow.aggregationLayout === "vertical"
-              ? "flex flex-col gap-3"
-              : "flex flex-wrap gap-4"
-          )}
+          className={cn(contentRow.aggregationLayout === "vertical" ? "flex flex-col gap-3" : "flex flex-wrap gap-4")}
         >
           {aggFields.map((aggField, fieldIndex) => {
             // 집계 결과에서 값 가져오기 (aggregationResultField 사용)
@@ -2692,16 +2742,16 @@ function renderContentRow(
               <div
                 key={fieldIndex}
                 className={cn(
-                  "p-3 rounded-lg flex-1 min-w-[120px]",
-                  aggField.backgroundColor ? getBackgroundClass(aggField.backgroundColor) : "bg-muted/50"
+                  "min-w-[120px] flex-1 rounded-lg p-3",
+                  aggField.backgroundColor ? getBackgroundClass(aggField.backgroundColor) : "bg-muted/50",
                 )}
               >
-                <div className="text-xs text-muted-foreground">{aggField.label || aggField.aggregationResultField}</div>
+                <div className="text-muted-foreground text-xs">{aggField.label || aggField.aggregationResultField}</div>
                 <div
                   className={cn(
                     "font-bold",
                     aggField.fontSize ? `text-${aggField.fontSize}` : "text-lg",
-                    aggField.textColor && `text-${aggField.textColor}`
+                    aggField.textColor && `text-${aggField.textColor}`,
                   )}
                 >
                   {typeof value === "number" ? value.toLocaleString() : value || "-"}
@@ -2715,21 +2765,19 @@ function renderContentRow(
     case "table":
       // contentRow에서 직접 tableColumns 가져오기 (v3 구조)
       const tableColumns = contentRow.tableColumns || [];
-      
+
       if (tableColumns.length === 0) {
         return (
-          <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg text-sm text-blue-600 dark:text-blue-400">
+          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
             테이블 컬럼이 설정되지 않았습니다. (레이아웃 탭에서 테이블 컬럼을 추가하세요)
           </div>
         );
       }
-      
+
       return (
-        <div className="border rounded-lg overflow-hidden">
+        <div className="overflow-hidden rounded-lg border">
           {contentRow.tableTitle && (
-            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium">
-              {contentRow.tableTitle}
-            </div>
+            <div className="bg-muted/30 border-b px-4 py-2 text-sm font-medium">{contentRow.tableTitle}</div>
           )}
           <Table>
             {contentRow.showTableHeader !== false && (
@@ -2756,10 +2804,10 @@ function renderContentRow(
                       className={cn("text-sm", col.align && `text-${col.align}`)}
                     >
                       {renderTableCell(
-                        col, 
-                        row, 
+                        col,
+                        row,
                         (value) => onRowDataChange(card._cardId, row._rowId, col.field, value),
-                        row._isNew || row._isEditing
+                        row._isNew || row._isEditing,
                       )}
                     </TableCell>
                   ))}
@@ -2779,7 +2827,7 @@ function renderContentRow(
 function renderSimpleContentRow(
   contentRow: CardContentRowConfig,
   card: CardData,
-  onChange: (value: any, field: string) => void
+  onChange: (value: any, field: string) => void,
 ) {
   switch (contentRow.type) {
     case "header":
@@ -2788,10 +2836,10 @@ function renderSimpleContentRow(
         <div
           className={cn(
             "grid gap-4",
-            contentRow.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
+            contentRow.layout === "vertical" ? "grid-cols-1" : "auto-cols-fr grid-flow-col",
             contentRow.backgroundColor && getBackgroundClass(contentRow.backgroundColor),
             contentRow.padding && `p-${contentRow.padding}`,
-            "rounded-lg"
+            "rounded-lg",
           )}
           style={{ gap: contentRow.gap || "16px" }}
         >
@@ -2807,40 +2855,37 @@ function renderSimpleContentRow(
       // 단순 모드에서도 집계 표시 (단일 카드 기준)
       // contentRow에서 직접 aggregationFields 가져오기 (v3 구조)
       const aggFields = contentRow.aggregationFields || [];
-      
+
       if (aggFields.length === 0) {
         return (
-          <div className="p-4 bg-orange-50 dark:bg-orange-950 rounded-lg text-sm text-orange-600 dark:text-orange-400">
+          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다.
           </div>
         );
       }
-      
+
       return (
         <div
-          className={cn(
-            contentRow.aggregationLayout === "vertical"
-              ? "flex flex-col gap-3"
-              : "flex flex-wrap gap-4"
-          )}
+          className={cn(contentRow.aggregationLayout === "vertical" ? "flex flex-col gap-3" : "flex flex-wrap gap-4")}
         >
           {aggFields.map((aggField, fieldIndex) => {
             // 단순 모드에서는 카드 데이터에서 직접 값을 가져옴 (aggregationResultField 사용)
-            const value = card[aggField.aggregationResultField] || card._originalData?.[aggField.aggregationResultField];
+            const value =
+              card[aggField.aggregationResultField] || card._originalData?.[aggField.aggregationResultField];
             return (
               <div
                 key={fieldIndex}
                 className={cn(
-                  "p-3 rounded-lg flex-1 min-w-[120px]",
-                  aggField.backgroundColor ? getBackgroundClass(aggField.backgroundColor) : "bg-muted/50"
+                  "min-w-[120px] flex-1 rounded-lg p-3",
+                  aggField.backgroundColor ? getBackgroundClass(aggField.backgroundColor) : "bg-muted/50",
                 )}
               >
-                <div className="text-xs text-muted-foreground">{aggField.label || aggField.aggregationResultField}</div>
+                <div className="text-muted-foreground text-xs">{aggField.label || aggField.aggregationResultField}</div>
                 <div
                   className={cn(
                     "font-bold",
                     aggField.fontSize ? `text-${aggField.fontSize}` : "text-lg",
-                    aggField.textColor && `text-${aggField.textColor}`
+                    aggField.textColor && `text-${aggField.textColor}`,
                   )}
                 >
                   {typeof value === "number" ? value.toLocaleString() : value || "-"}
@@ -2855,21 +2900,19 @@ function renderSimpleContentRow(
       // 단순 모드에서도 테이블 표시 (단일 행)
       // contentRow에서 직접 tableColumns 가져오기 (v3 구조)
       const tableColumns = contentRow.tableColumns || [];
-      
+
       if (tableColumns.length === 0) {
         return (
-          <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg text-sm text-blue-600 dark:text-blue-400">
+          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
             테이블 컬럼이 설정되지 않았습니다.
           </div>
         );
       }
-      
+
       return (
-        <div className="border rounded-lg overflow-hidden">
+        <div className="overflow-hidden rounded-lg border">
           {contentRow.tableTitle && (
-            <div className="px-4 py-2 bg-muted/30 border-b text-sm font-medium">
-              {contentRow.tableTitle}
-            </div>
+            <div className="bg-muted/30 border-b px-4 py-2 text-sm font-medium">{contentRow.tableTitle}</div>
           )}
           <Table>
             {contentRow.showTableHeader !== false && (
@@ -2910,11 +2953,7 @@ function renderSimpleContentRow(
 }
 
 // 단순 모드 테이블 셀 렌더링
-function renderSimpleTableCell(
-  col: TableColumnConfig,
-  card: CardData,
-  onChange: (value: any) => void
-) {
+function renderSimpleTableCell(col: TableColumnConfig, card: CardData, onChange: (value: any) => void) {
   const value = card[col.field] || card._originalData?.[col.field];
 
   if (!col.editable) {
@@ -2938,12 +2977,7 @@ function renderSimpleTableCell(
       );
     case "date":
       return (
-        <Input
-          type="date"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          className="h-8 text-sm"
-        />
+        <Input type="date" value={value || ""} onChange={(e) => onChange(e.target.value)} className="h-8 text-sm" />
       );
     case "select":
       return (
@@ -2962,12 +2996,7 @@ function renderSimpleTableCell(
       );
     default:
       return (
-        <Input
-          type="text"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          className="h-8 text-sm"
-        />
+        <Input type="text" value={value || ""} onChange={(e) => onChange(e.target.value)} className="h-8 text-sm" />
       );
   }
 }
@@ -2984,11 +3013,7 @@ function getBackgroundClass(color: string): string {
 }
 
 // 헤더 컬럼 렌더링 (집계값 포함)
-function renderHeaderColumn(
-  col: CardColumnConfig,
-  card: GroupedCardData,
-  aggregations: AggregationConfig[]
-) {
+function renderHeaderColumn(col: CardColumnConfig, card: GroupedCardData, aggregations: AggregationConfig[]) {
   let value: any;
 
   // 집계값 타입이면 집계 결과에서 가져옴
@@ -2998,16 +3023,16 @@ function renderHeaderColumn(
 
     return (
       <div className="space-y-1">
-        <Label className="text-xs font-medium text-muted-foreground">{col.label}</Label>
+        <Label className="text-muted-foreground text-xs font-medium">{col.label}</Label>
         <div
           className={cn(
             "text-lg font-bold",
             col.textColor && `text-${col.textColor}`,
-            col.fontSize && `text-${col.fontSize}`
+            col.fontSize && `text-${col.fontSize}`,
           )}
         >
           {typeof value === "number" ? value.toLocaleString() : value || "-"}
-          {aggConfig && <span className="text-xs font-normal text-muted-foreground ml-1">({aggConfig.type})</span>}
+          {aggConfig && <span className="text-muted-foreground ml-1 text-xs font-normal">({aggConfig.type})</span>}
         </div>
       </div>
     );
@@ -3018,13 +3043,9 @@ function renderHeaderColumn(
 
   return (
     <div className="space-y-1">
-      <Label className="text-xs font-medium text-muted-foreground">{col.label}</Label>
+      <Label className="text-muted-foreground text-xs font-medium">{col.label}</Label>
       <div
-        className={cn(
-          "text-sm",
-          col.fontWeight && `font-${col.fontWeight}`,
-          col.fontSize && `text-${col.fontSize}`
-        )}
+        className={cn("text-sm", col.fontWeight && `font-${col.fontWeight}`, col.fontSize && `text-${col.fontSize}`)}
       >
         {value || "-"}
       </div>
@@ -3034,7 +3055,12 @@ function renderHeaderColumn(
 
 // 테이블 셀 렌더링
 // 🆕 v3.8: isRowEditable 파라미터 추가 - 행이 편집 가능한 상태인지 (신규 행이거나 수정 모드)
-function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (value: any) => void, isRowEditable?: boolean) {
+function renderTableCell(
+  col: TableColumnConfig,
+  row: CardRowData,
+  onChange: (value: any) => void,
+  isRowEditable?: boolean,
+) {
   const value = row[col.field];
 
   // Badge 타입
@@ -3045,7 +3071,7 @@ function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (va
 
   // 🆕 v3.8: 행 수준 편집 가능 여부 체크
   // isRowEditable이 false이면 컬럼 설정과 관계없이 읽기 전용
-  const canEdit = col.editable && (isRowEditable !== false);
+  const canEdit = col.editable && isRowEditable !== false;
 
   // 읽기 전용
   if (!canEdit) {
@@ -3054,7 +3080,11 @@ function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (va
     }
     if (col.type === "date") {
       // ISO 8601 형식을 표시용으로 변환
-      const displayDate = value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : "-";
+      const displayDate = value
+        ? typeof value === "string" && value.includes("T")
+          ? value.split("T")[0]
+          : value
+        : "-";
       return <span>{displayDate}</span>;
     }
     return <span>{value || "-"}</span>;
@@ -3063,33 +3093,20 @@ function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (va
   // 편집 가능
   switch (col.type) {
     case "text":
-      return (
-        <Input
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          className="h-8 text-sm"
-        />
-      );
+      return <Input value={value || ""} onChange={(e) => onChange(e.target.value)} className="h-8 text-sm" />;
     case "number":
       return (
         <Input
           type="number"
           value={value || ""}
           onChange={(e) => onChange(Number(e.target.value) || 0)}
-          className="h-8 text-sm text-right"
+          className="h-8 text-right text-sm"
         />
       );
     case "date":
       // ISO 8601 형식('2025-12-02T00:00:00.000Z')을 'YYYY-MM-DD' 형식으로 변환
-      const dateValue = value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : "";
-      return (
-        <Input
-          type="date"
-          value={dateValue}
-          onChange={(e) => onChange(e.target.value)}
-          className="h-8 text-sm"
-        />
-      );
+      const dateValue = value ? (typeof value === "string" && value.includes("T") ? value.split("T")[0] : value) : "";
+      return <Input type="date" value={dateValue} onChange={(e) => onChange(e.target.value)} className="h-8 text-sm" />;
     default:
       return <span>{value || "-"}</span>;
   }
@@ -3108,7 +3125,7 @@ function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: a
       </Label>
 
       {isReadOnly && (
-        <div className="text-sm text-muted-foreground bg-muted px-3 py-2 rounded-md min-h-[40px] flex items-center">
+        <div className="text-muted-foreground bg-muted flex min-h-[40px] items-center rounded-md px-3 py-2 text-sm">
           {value || "-"}
         </div>
       )}
@@ -3137,7 +3154,7 @@ function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: a
           {col.type === "date" && (
             <Input
               type="date"
-              value={value ? (typeof value === 'string' && value.includes('T') ? value.split('T')[0] : value) : ""}
+              value={value ? (typeof value === "string" && value.includes("T") ? value.split("T")[0] : value) : ""}
               onChange={(e) => onChange(e.target.value)}
               className="h-10 text-sm"
             />
@@ -3163,12 +3180,12 @@ function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: a
               value={value || ""}
               onChange={(e) => onChange(e.target.value)}
               placeholder={col.placeholder}
-              className="text-sm min-h-[80px]"
+              className="min-h-[80px] text-sm"
             />
           )}
 
           {col.type === "component" && col.componentType && (
-            <div className="text-xs text-muted-foreground p-2 border rounded">
+            <div className="text-muted-foreground rounded border p-2 text-xs">
               컴포넌트: {col.componentType} (개발 중)
             </div>
           )}
diff --git a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
index 564ba780..e7917dd9 100644
--- a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
@@ -90,7 +90,7 @@ export function SimpleRepeaterTableComponent({
   const newRowDefaults = componentConfig?.newRowDefaults || {};
   const summaryConfig = componentConfig?.summaryConfig;
   const maxHeight = componentConfig?.maxHeight || propMaxHeight || "240px";
-  
+
   // 🆕 컴포넌트 레벨의 저장 테이블 설정
   const componentTargetTable = componentConfig?.targetTable || componentConfig?.saveTable;
   const componentFkColumn = componentConfig?.fkColumn;
@@ -149,14 +149,11 @@ export function SimpleRepeaterTableComponent({
         }
 
         // API 호출
-        const response = await apiClient.post(
-          `/table-management/tables/${initialConfig.sourceTable}/data`,
-          {
-            search: filters,
-            page: 1,
-            size: 1000, // 대량 조회
-          }
-        );
+        const response = await apiClient.post(`/table-management/tables/${initialConfig.sourceTable}/data`, {
+          search: filters,
+          page: 1,
+          size: 1000, // 대량 조회
+        });
 
         if (response.data.success && response.data.data?.data) {
           const loadedData = response.data.data.data;
@@ -182,7 +179,7 @@ export function SimpleRepeaterTableComponent({
 
           // 2. 조인 데이터 처리
           const joinColumns = columns.filter(
-            (col) => col.sourceConfig?.type === "join" && col.sourceConfig.joinTable && col.sourceConfig.joinKey
+            (col) => col.sourceConfig?.type === "join" && col.sourceConfig.joinTable && col.sourceConfig.joinKey,
           );
 
           if (joinColumns.length > 0) {
@@ -208,25 +205,20 @@ export function SimpleRepeaterTableComponent({
                 const [tableName] = groupKey.split(":");
 
                 // 조인 키 값 수집 (중복 제거)
-                const keyValues = Array.from(new Set(
-                  baseMappedData
-                    .map((row: any) => row[key])
-                    .filter((v: any) => v !== undefined && v !== null)
-                ));
+                const keyValues = Array.from(
+                  new Set(baseMappedData.map((row: any) => row[key]).filter((v: any) => v !== undefined && v !== null)),
+                );
 
                 if (keyValues.length === 0) return;
 
                 try {
                   // 조인 테이블 조회
                   // refKey(타겟 테이블 컬럼)로 검색
-                  const response = await apiClient.post(
-                    `/table-management/tables/${tableName}/data`,
-                    {
-                      search: { [refKey]: keyValues }, // { id: [1, 2, 3] }
-                      page: 1,
-                      size: 1000,
-                    }
-                  );
+                  const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
+                    search: { [refKey]: keyValues }, // { id: [1, 2, 3] }
+                    page: 1,
+                    size: 1000,
+                  });
 
                   if (response.data.success && response.data.data?.data) {
                     const joinedRows = response.data.data.data;
@@ -251,7 +243,7 @@ export function SimpleRepeaterTableComponent({
                   console.error(`조인 실패 (${tableName}):`, error);
                   // 실패 시 무시하고 진행 (값은 undefined)
                 }
-              })
+              }),
             );
           }
 
@@ -296,7 +288,7 @@ export function SimpleRepeaterTableComponent({
       // 🆕 컴포넌트 레벨의 targetTable이 설정되어 있으면 우선 사용
       if (componentTargetTable) {
         console.log("✅ [SimpleRepeaterTable] 컴포넌트 레벨 저장 테이블 사용:", componentTargetTable);
-        
+
         // 모든 행을 해당 테이블에 저장
         const dataToSave = value.map((row: any) => {
           // 메타데이터 필드 제외 (_, _rowIndex 등)
@@ -399,9 +391,12 @@ export function SimpleRepeaterTableComponent({
       // 기존 onFormDataChange도 호출 (호환성)
       if (onFormDataChange && columnName) {
         // 테이블별 데이터를 통합하여 전달
-        onFormDataChange(columnName, Object.entries(dataByTable).flatMap(([table, rows]) =>
-          rows.map((row: any) => ({ ...row, _targetTable: table }))
-        ));
+        onFormDataChange(
+          columnName,
+          Object.entries(dataByTable).flatMap(([table, rows]) =>
+            rows.map((row: any) => ({ ...row, _targetTable: table })),
+          ),
+        );
       }
     };
 
@@ -543,24 +538,14 @@ export function SimpleRepeaterTableComponent({
     if (!allowAdd || readOnly || value.length >= maxRows) return null;
 
     return (
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={handleAddRow}
-        className="h-8 text-xs"
-      >
-        <Plus className="h-3.5 w-3.5 mr-1" />
+      <Button type="button" variant="outline" size="sm" onClick={handleAddRow} className="h-8 text-xs">
+        <Plus className="mr-1 h-3.5 w-3.5" />
         {addButtonText}
       </Button>
     );
   };
 
-  const renderCell = (
-    row: any,
-    column: SimpleRepeaterColumnConfig,
-    rowIndex: number
-  ) => {
+  const renderCell = (row: any, column: SimpleRepeaterColumnConfig, rowIndex: number) => {
     const cellValue = row[column.field];
 
     // 계산 필드는 편집 불가
@@ -583,9 +568,7 @@ export function SimpleRepeaterTableComponent({
           <Input
             type="number"
             value={cellValue || ""}
-            onChange={(e) =>
-              handleCellEdit(rowIndex, column.field, parseFloat(e.target.value) || 0)
-            }
+            onChange={(e) => handleCellEdit(rowIndex, column.field, parseFloat(e.target.value) || 0)}
             className="h-7 text-xs"
           />
         );
@@ -604,19 +587,19 @@ export function SimpleRepeaterTableComponent({
         return (
           <Select
             value={cellValue || ""}
-            onValueChange={(newValue) =>
-              handleCellEdit(rowIndex, column.field, newValue)
-            }
+            onValueChange={(newValue) => handleCellEdit(rowIndex, column.field, newValue)}
           >
             <SelectTrigger className="h-7 text-xs">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {column.selectOptions?.filter((option) => option.value && option.value !== "").map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
+              {column.selectOptions
+                ?.filter((option) => option.value && option.value !== "")
+                .map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
             </SelectContent>
           </Select>
         );
@@ -636,11 +619,11 @@ export function SimpleRepeaterTableComponent({
   // 로딩 중일 때
   if (isLoading) {
     return (
-      <div className={cn("border rounded-md overflow-hidden bg-background", className)}>
+      <div className={cn("bg-background overflow-hidden rounded-md border", className)}>
         <div className="flex items-center justify-center py-12" style={{ minHeight: maxHeight }}>
           <div className="text-center">
-            <Loader2 className="h-8 w-8 animate-spin text-primary mx-auto mb-2" />
-            <p className="text-sm text-muted-foreground">데이터를 불러오는 중...</p>
+            <Loader2 className="text-primary mx-auto mb-2 h-8 w-8 animate-spin" />
+            <p className="text-muted-foreground text-sm">데이터를 불러오는 중...</p>
           </div>
         </div>
       </div>
@@ -650,14 +633,14 @@ export function SimpleRepeaterTableComponent({
   // 에러 발생 시
   if (loadError) {
     return (
-      <div className={cn("border rounded-md overflow-hidden bg-background", className)}>
+      <div className={cn("bg-background overflow-hidden rounded-md border", className)}>
         <div className="flex items-center justify-center py-12" style={{ minHeight: maxHeight }}>
           <div className="text-center">
-            <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-2">
-              <X className="h-6 w-6 text-destructive" />
+            <div className="bg-destructive/10 mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full">
+              <X className="text-destructive h-6 w-6" />
             </div>
-            <p className="text-sm font-medium text-destructive mb-1">데이터 로드 실패</p>
-            <p className="text-xs text-muted-foreground">{loadError}</p>
+            <p className="text-destructive mb-1 text-sm font-medium">데이터 로드 실패</p>
+            <p className="text-muted-foreground text-xs">{loadError}</p>
           </div>
         </div>
       </div>
@@ -668,30 +651,27 @@ export function SimpleRepeaterTableComponent({
   const totalColumns = columns.length + (showRowNumber ? 1 : 0) + (allowDelete && !readOnly ? 1 : 0);
 
   return (
-    <div className={cn("border rounded-md overflow-hidden bg-background", className)}>
+    <div className={cn("bg-background overflow-hidden rounded-md border", className)}>
       {/* 상단 행 추가 버튼 */}
       {allowAdd && addButtonPosition !== "bottom" && (
-        <div className="p-2 border-b bg-muted/50">
+        <div className="bg-muted/50 border-b p-2">
           <AddRowButton />
         </div>
       )}
 
-      <div
-        className="overflow-x-auto overflow-y-auto"
-        style={{ maxHeight }}
-      >
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight }}>
         <table className="w-full text-xs sm:text-sm">
           <thead className="bg-muted sticky top-0 z-10">
             <tr>
               {showRowNumber && (
-                <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
+                <th key="header-rownum" className="text-muted-foreground w-12 px-4 py-2 text-left font-medium">
                   #
                 </th>
               )}
               {columns.map((col) => (
                 <th
-                  key={col.field}
-                  className="px-4 py-2 text-left font-medium text-muted-foreground"
+                  key={`header-${col.field}`}
+                  className="text-muted-foreground px-4 py-2 text-left font-medium"
                   style={{ width: col.width }}
                 >
                   {col.label}
@@ -699,7 +679,7 @@ export function SimpleRepeaterTableComponent({
                 </th>
               ))}
               {!readOnly && allowDelete && (
-                <th className="px-4 py-2 text-left font-medium text-muted-foreground w-20">
+                <th key="header-delete" className="text-muted-foreground w-20 px-4 py-2 text-left font-medium">
                   삭제
                 </th>
               )}
@@ -707,11 +687,8 @@ export function SimpleRepeaterTableComponent({
           </thead>
           <tbody className="bg-background">
             {value.length === 0 ? (
-              <tr>
-                <td
-                  colSpan={totalColumns}
-                  className="px-4 py-8 text-center text-muted-foreground"
-                >
+              <tr key="empty-row">
+                <td key="empty-cell" colSpan={totalColumns} className="text-muted-foreground px-4 py-8 text-center">
                   {allowAdd ? (
                     <div className="flex flex-col items-center gap-2">
                       <span>표시할 데이터가 없습니다</span>
@@ -724,25 +701,25 @@ export function SimpleRepeaterTableComponent({
               </tr>
             ) : (
               value.map((row, rowIndex) => (
-                <tr key={rowIndex} className="border-t hover:bg-accent/50">
+                <tr key={`row-${rowIndex}`} className="hover:bg-accent/50 border-t">
                   {showRowNumber && (
-                    <td className="px-4 py-2 text-center text-muted-foreground">
+                    <td key={`rownum-${rowIndex}`} className="text-muted-foreground px-4 py-2 text-center">
                       {rowIndex + 1}
                     </td>
                   )}
                   {columns.map((col) => (
-                    <td key={col.field} className="px-2 py-1">
+                    <td key={`${rowIndex}-${col.field}`} className="px-2 py-1">
                       {renderCell(row, col, rowIndex)}
                     </td>
                   ))}
                   {!readOnly && allowDelete && (
-                    <td className="px-4 py-2 text-center">
+                    <td key={`delete-${rowIndex}`} className="px-4 py-2 text-center">
                       <Button
                         variant="ghost"
                         size="sm"
                         onClick={() => handleRowDelete(rowIndex)}
                         disabled={value.length <= minRows}
-                        className="h-7 w-7 p-0 text-destructive hover:text-destructive disabled:opacity-50"
+                        className="text-destructive hover:text-destructive h-7 w-7 p-0 disabled:opacity-50"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -757,35 +734,29 @@ export function SimpleRepeaterTableComponent({
 
       {/* 합계 표시 */}
       {summaryConfig?.enabled && summaryValues && (
-        <div className={cn(
-          "border-t bg-muted/30 p-3",
-          summaryConfig.position === "bottom-right" && "flex justify-end"
-        )}>
-          <div className={cn(
-            summaryConfig.position === "bottom-right" ? "w-auto min-w-[200px]" : "w-full"
-          )}>
+        <div
+          className={cn("bg-muted/30 border-t p-3", summaryConfig.position === "bottom-right" && "flex justify-end")}
+        >
+          <div className={cn(summaryConfig.position === "bottom-right" ? "w-auto min-w-[200px]" : "w-full")}>
             {summaryConfig.title && (
-              <div className="text-xs font-medium text-muted-foreground mb-2">
-                {summaryConfig.title}
-              </div>
+              <div className="text-muted-foreground mb-2 text-xs font-medium">{summaryConfig.title}</div>
             )}
-            <div className={cn(
-              "grid gap-2",
-              summaryConfig.position === "bottom-right" ? "grid-cols-1" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
-            )}>
+            <div
+              className={cn(
+                "grid gap-2",
+                summaryConfig.position === "bottom-right" ? "grid-cols-1" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4",
+              )}
+            >
               {summaryConfig.fields.map((field) => (
                 <div
                   key={field.field}
                   className={cn(
-                    "flex justify-between items-center px-3 py-1.5 rounded",
-                    field.highlight ? "bg-primary/10 font-semibold" : "bg-background"
+                    "flex items-center justify-between rounded px-3 py-1.5",
+                    field.highlight ? "bg-primary/10 font-semibold" : "bg-background",
                   )}
                 >
-                  <span className="text-xs text-muted-foreground">{field.label}</span>
-                  <span className={cn(
-                    "text-sm font-medium",
-                    field.highlight && "text-primary"
-                  )}>
+                  <span className="text-muted-foreground text-xs">{field.label}</span>
+                  <span className={cn("text-sm font-medium", field.highlight && "text-primary")}>
                     {formatSummaryValue(field, summaryValues[field.field] || 0)}
                   </span>
                 </div>
@@ -797,10 +768,10 @@ export function SimpleRepeaterTableComponent({
 
       {/* 하단 행 추가 버튼 */}
       {allowAdd && addButtonPosition !== "top" && value.length > 0 && (
-        <div className="p-2 border-t bg-muted/50 flex justify-between items-center">
+        <div className="bg-muted/50 flex items-center justify-between border-t p-2">
           <AddRowButton />
           {maxRows !== Infinity && (
-            <span className="text-xs text-muted-foreground">
+            <span className="text-muted-foreground text-xs">
               {value.length} / {maxRows}
             </span>
           )}
@@ -809,4 +780,3 @@ export function SimpleRepeaterTableComponent({
     </div>
   );
 }
-
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
index ca4d57d0..26acaf34 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
@@ -115,14 +115,14 @@ const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
               type="button"
               variant="ghost"
               size="sm"
-              className="absolute right-0 top-0 h-full px-2 hover:bg-transparent"
+              className="absolute top-0 right-0 h-full px-2 hover:bg-transparent"
               onClick={() => !isDisabled && setOpen(!open)}
               disabled={isDisabled}
             >
               {loading ? (
-                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
               ) : (
-                <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+                <ChevronsUpDown className="text-muted-foreground h-4 w-4" />
               )}
             </Button>
           </div>
@@ -149,12 +149,7 @@ const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
                         setOpen(false);
                       }}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4",
-                          value === option.value ? "opacity-100" : "opacity-0"
-                        )}
-                      />
+                      <Check className={cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0")} />
                       {option.label}
                     </CommandItem>
                   ))}
@@ -437,19 +432,19 @@ export function UniversalFormModalComponent({
       }
 
       // 🆕 테이블 섹션 데이터 병합 (품목 리스트 등)
-      // 참고: initializeForm에서 DB 로드 시 __tableSection_ (더블), 
+      // 참고: initializeForm에서 DB 로드 시 __tableSection_ (더블),
       //       handleTableDataChange에서 수정 시 _tableSection_ (싱글) 사용
       for (const [key, value] of Object.entries(formData)) {
         // 싱글/더블 언더스코어 모두 처리
         if ((key.startsWith("_tableSection_") || key.startsWith("__tableSection_")) && Array.isArray(value)) {
           // 저장 시에는 _tableSection_ 키로 통일 (buttonActions.ts에서 이 키를 기대)
-          const normalizedKey = key.startsWith("__tableSection_") 
-            ? key.replace("__tableSection_", "_tableSection_") 
+          const normalizedKey = key.startsWith("__tableSection_")
+            ? key.replace("__tableSection_", "_tableSection_")
             : key;
           event.detail.formData[normalizedKey] = value;
           console.log(`[UniversalFormModal] 테이블 섹션 병합: ${key} → ${normalizedKey}, ${value.length}개 항목`);
         }
-        
+
         // 🆕 원본 테이블 섹션 데이터도 병합 (삭제 추적용)
         if (key.startsWith("_originalTableSectionData_") && Array.isArray(value)) {
           event.detail.formData[key] = value;
@@ -948,13 +943,17 @@ export function UniversalFormModalComponent({
             // 각 테이블 섹션별로 별도의 키에 원본 데이터 저장 (groupedDataInitializedRef와 무관하게 항상 저장)
             const originalTableSectionKey = `_originalTableSectionData_${section.id}`;
             newFormData[originalTableSectionKey] = JSON.parse(JSON.stringify(items));
-            console.log(`[initializeForm] 테이블 섹션 ${section.id}: formData[${originalTableSectionKey}]에 원본 ${items.length}건 저장`);
-            
+            console.log(
+              `[initializeForm] 테이블 섹션 ${section.id}: formData[${originalTableSectionKey}]에 원본 ${items.length}건 저장`,
+            );
+
             // 기존 originalGroupedData에도 추가 (하위 호환성)
             if (!groupedDataInitializedRef.current) {
               setOriginalGroupedData((prev) => {
                 const newOriginal = [...prev, ...JSON.parse(JSON.stringify(items))];
-                console.log(`[initializeForm] 테이블 섹션 ${section.id}: originalGroupedData에 ${items.length}건 추가 (총 ${newOriginal.length}건)`);
+                console.log(
+                  `[initializeForm] 테이블 섹션 ${section.id}: originalGroupedData에 ${items.length}건 추가 (총 ${newOriginal.length}건)`,
+                );
                 return newOriginal;
               });
             }
@@ -1443,8 +1442,9 @@ export function UniversalFormModalComponent({
 
           if (isNewRecord || hasNoValue) {
             try {
-              // allocateNumberingCode로 실제 순번 증가
-              const response = await allocateNumberingCode(field.numberingRule.ruleId);
+              // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
+              const userInputCode = mainData[field.columnName] as string;
+              const response = await allocateNumberingCode(field.numberingRule.ruleId, userInputCode, mainData);
               if (response.success && response.data?.generatedCode) {
                 mainData[field.columnName] = response.data.generatedCode;
               }
@@ -1638,12 +1638,12 @@ export function UniversalFormModalComponent({
               />
             );
           }
-          
+
           // 🆕 연쇄 드롭다운 처리 (selectOptions.type === "cascading" 방식)
           if (field.selectOptions?.type === "cascading" && field.selectOptions?.cascading?.parentField) {
             const cascadingOpts = field.selectOptions.cascading;
             const parentValue = formData[cascadingOpts.parentField];
-            
+
             // selectOptions 기반 cascading config를 CascadingDropdownConfig 형태로 변환
             const cascadingConfig: CascadingDropdownConfig = {
               enabled: true,
@@ -2392,7 +2392,7 @@ function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disa
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState(value || "");
-  
+
   const allowCustomInput = optionConfig?.allowCustomInput || false;
 
   useEffect(() => {
@@ -2432,14 +2432,14 @@ function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disa
               type="button"
               variant="ghost"
               size="sm"
-              className="absolute right-0 top-0 h-full px-2 hover:bg-transparent"
+              className="absolute top-0 right-0 h-full px-2 hover:bg-transparent"
               onClick={() => !disabled && !loading && setOpen(!open)}
               disabled={disabled || loading}
             >
               {loading ? (
-                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
               ) : (
-                <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />
+                <ChevronsUpDown className="text-muted-foreground h-4 w-4" />
               )}
             </Button>
           </div>
@@ -2462,12 +2462,7 @@ function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disa
                         setOpen(false);
                       }}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4",
-                          value === option.value ? "opacity-100" : "opacity-0"
-                        )}
-                      />
+                      <Check className={cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0")} />
                       {option.label}
                     </CommandItem>
                   ))}
diff --git a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
index 1ac3f547..f8b154d6 100644
--- a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
@@ -555,13 +555,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   }
 
   // 스타일 계산
-  // height: 100%로 부모(RealtimePreviewDynamic의 내부 div)의 높이를 따라감
-  // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+  // 🔧 사용자가 설정한 크기가 있으면 그대로 사용
   const componentStyle: React.CSSProperties = {
     ...component.style,
     ...style,
-    width: "100%",
-    height: "100%",
   };
 
   // 디자인 모드 스타일 (border 속성 분리하여 충돌 방지)
@@ -641,19 +638,17 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       }
 
       // 성공한 경우에만 성공 토스트 표시
-      // edit, modal, navigate, excel_upload, barcode_scan 액션은 조용히 처리
-      // (UI 전환만 하거나 모달 내부에서 자체적으로 메시지 표시)
-      const silentSuccessActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan"];
-      if (!silentSuccessActions.includes(actionConfig.type)) {
+      // save, delete, submit 액션에서만 성공 메시지 표시
+      // 그 외 액션은 조용히 처리 (불필요한 "완료되었습니다" 토스트 방지)
+      const successToastActions = ["save", "delete", "submit"];
+      if (successToastActions.includes(actionConfig.type)) {
         // 기본 성공 메시지 결정
         const defaultSuccessMessage =
           actionConfig.type === "save"
             ? "저장되었습니다."
             : actionConfig.type === "delete"
               ? "삭제되었습니다."
-              : actionConfig.type === "submit"
-                ? "제출되었습니다."
-                : "완료되었습니다.";
+              : "제출되었습니다.";
 
         // 커스텀 메시지 사용 조건:
         // 1. 커스텀 메시지가 있고
@@ -1273,19 +1268,21 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     componentConfig.disabled || isOperationButtonDisabled || isRowSelectionDisabled || statusLoading;
 
   // 공통 버튼 스타일
-  // 🔧 component.style에서 background/backgroundColor 충돌 방지
+  // 🔧 component.style에서 background/backgroundColor 충돌 방지 (width/height는 허용)
   const userStyle = component.style
     ? Object.fromEntries(
-        Object.entries(component.style).filter(
-          ([key]) => !["width", "height", "background", "backgroundColor"].includes(key),
-        ),
+        Object.entries(component.style).filter(([key]) => !["background", "backgroundColor"].includes(key)),
       )
     : {};
 
+  // 🔧 사용자가 설정한 크기 우선 사용, 없으면 100%
+  const buttonWidth = component.size?.width ? `${component.size.width}px` : style?.width || "100%";
+  const buttonHeight = component.size?.height ? `${component.size.height}px` : style?.height || "100%";
+
   const buttonElementStyle: React.CSSProperties = {
-    width: "100%",
-    height: "100%",
-    minHeight: "40px",
+    width: buttonWidth,
+    height: buttonHeight,
+    minHeight: "32px", // 🔧 최소 높이를 32px로 줄임
     border: "none",
     borderRadius: "0.5rem",
     backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
@@ -1308,7 +1305,31 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     ...userStyle,
   };
 
-  const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";
+  // 버튼 텍스트 결정 (다양한 소스에서 가져옴)
+  // "기본 버튼"은 컴포넌트 생성 시 기본값이므로 무시
+  const labelValue = component.label === "기본 버튼" ? undefined : component.label;
+
+  // 액션 타입에 따른 기본 텍스트 (modal 액션과 동일하게)
+  const actionType = processedConfig.action?.type || component.componentConfig?.action?.type;
+  const actionDefaultText: Record<string, string> = {
+    save: "저장",
+    delete: "삭제",
+    modal: "등록",
+    edit: "수정",
+    copy: "복사",
+    close: "닫기",
+    cancel: "취소",
+  };
+
+  const buttonContent =
+    processedConfig.text ||
+    component.webTypeConfig?.text ||
+    component.componentConfig?.text ||
+    component.config?.text ||
+    component.style?.labelText ||
+    labelValue ||
+    actionDefaultText[actionType as string] ||
+    "버튼";
 
   return (
     <>
diff --git a/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx b/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
index aee1946d..615ea61d 100644
--- a/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
+++ b/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
@@ -115,31 +115,36 @@ export function V2CategoryManagerComponent({
   }, []);
 
   return (
-    <div ref={containerRef} className="flex h-full min-h-[10px] gap-0" style={{ height: config.height }}>
-      {/* 좌측: 카테고리 컬럼 리스트 */}
+    <div ref={containerRef} className="flex h-full min-h-[10px] gap-0 overflow-hidden" style={{ height: config.height }}>
+      {/* 좌측: 카테고리 컬럼 리스트 - 스크롤 가능 */}
       {config.showColumnList && (
         <>
-          <div style={{ width: `${leftWidth}%` }} className="pr-3">
-            <CategoryColumnList
-              tableName={effectiveTableName}
-              selectedColumn={selectedColumn?.uniqueKey || null}
-              onColumnSelect={handleColumnSelect}
-              menuObjid={effectiveMenuObjid}
-            />
+          <div 
+            style={{ width: `${leftWidth}%` }} 
+            className="flex h-full flex-col overflow-hidden pr-3"
+          >
+            <div className="flex-1 overflow-y-auto">
+              <CategoryColumnList
+                tableName={effectiveTableName}
+                selectedColumn={selectedColumn?.uniqueKey || null}
+                onColumnSelect={handleColumnSelect}
+                menuObjid={effectiveMenuObjid}
+              />
+            </div>
           </div>
 
           {/* 리사이저 */}
           <div
             onMouseDown={handleMouseDown}
-            className="group hover:bg-accent/50 relative flex w-3 cursor-col-resize items-center justify-center border-r transition-colors"
+            className="group hover:bg-accent/50 relative flex h-full w-3 shrink-0 cursor-col-resize items-center justify-center border-r transition-colors"
           >
             <GripVertical className="text-muted-foreground group-hover:text-foreground h-4 w-4 transition-colors" />
           </div>
         </>
       )}
 
-      {/* 우측: 카테고리 값 관리 */}
-      <div style={{ width: config.showColumnList ? `${100 - leftWidth - 1}%` : "100%" }} className="flex flex-col pl-3">
+      {/* 우측: 카테고리 값 관리 - 고정 */}
+      <div style={{ width: config.showColumnList ? `${100 - leftWidth - 1}%` : "100%" }} className="flex h-full flex-col overflow-hidden pl-3">
         {/* 뷰 모드 토글 */}
         {config.showViewModeToggle && (
           <div className="mb-2 flex items-center justify-end gap-1">
@@ -167,8 +172,8 @@ export function V2CategoryManagerComponent({
           </div>
         )}
 
-        {/* 카테고리 값 관리 컴포넌트 */}
-        <div className="min-h-0 flex-1">
+        {/* 카테고리 값 관리 컴포넌트 - 스크롤 가능 */}
+        <div className="min-h-0 flex-1 overflow-y-auto">
           {selectedColumn ? (
             viewMode === "tree" ? (
               <CategoryValueManagerTree
diff --git a/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx b/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx
new file mode 100644
index 00000000..1550bbe3
--- /dev/null
+++ b/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2DateDefinition } from "./index";
+import { V2Date } from "@/components/v2/V2Date";
+
+/**
+ * V2Date 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class V2DateRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2DateDefinition;
+
+  render(): React.ReactElement {
+    const { component, formData, onFormDataChange, isDesignMode, isSelected, isInteractive, ...restProps } = this.props;
+
+    // 컴포넌트 설정 추출
+    const config = component.componentConfig || component.config || {};
+    const columnName = component.columnName;
+
+    // formData에서 현재 값 가져오기
+    const currentValue = formData?.[columnName] ?? component.value ?? "";
+
+    // 값 변경 핸들러
+    const handleChange = (value: any) => {
+      if (isInteractive && onFormDataChange && columnName) {
+        onFormDataChange(columnName, value);
+      }
+    };
+
+    // 라벨: style.labelText 우선, 없으면 component.label 사용
+    // style.labelDisplay가 false면 라벨 숨김
+    const style = component.style || {};
+    const effectiveLabel = style.labelDisplay === false ? undefined : (style.labelText || component.label);
+
+    return (
+      <V2Date
+        id={component.id}
+        label={effectiveLabel}
+        required={component.required}
+        readonly={config.readonly || component.readonly}
+        disabled={config.disabled || component.disabled}
+        value={currentValue}
+        onChange={handleChange}
+        config={{
+          dateType: config.dateType || config.webType || "date",
+          format: config.format || "YYYY-MM-DD",
+          placeholder: config.placeholder || style.placeholder || "날짜 선택",
+          showTime: config.showTime || false,
+          use24Hours: config.use24Hours ?? true,
+          minDate: config.minDate,
+          maxDate: config.maxDate,
+        }}
+        style={component.style}
+        size={component.size}
+        {...restProps}
+      />
+    );
+  }
+}
+
+// 자동 등록 실행
+V2DateRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  V2DateRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
new file mode 100644
index 00000000..f6586866
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
@@ -0,0 +1,519 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { FileInfo, FileUploadConfig } from "./types";
+import { 
+  Upload, 
+  Download, 
+  Trash2, 
+  Eye, 
+  File, 
+  FileText, 
+  Image as ImageIcon,
+  Video,
+  Music,
+  Archive,
+  Presentation,
+  X,
+  Star,
+  ZoomIn,
+  ZoomOut,
+  RotateCcw,
+} from "lucide-react";
+import { formatFileSize } from "@/lib/utils";
+import { FileViewerModal } from "./FileViewerModal";
+
+interface FileManagerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  uploadedFiles: FileInfo[];
+  onFileUpload: (files: File[]) => Promise<void>;
+  onFileDownload: (file: FileInfo) => void;
+  onFileDelete: (file: FileInfo) => void;
+  onFileView: (file: FileInfo) => void;
+  onSetRepresentative?: (file: FileInfo) => void; // 대표 이미지 설정 콜백
+  config: FileUploadConfig;
+  isDesignMode?: boolean;
+}
+
+export const FileManagerModal: React.FC<FileManagerModalProps> = ({
+  isOpen,
+  onClose,
+  uploadedFiles,
+  onFileUpload,
+  onFileDownload,
+  onFileDelete,
+  onFileView,
+  onSetRepresentative,
+  config,
+  isDesignMode = false,
+}) => {
+  const [dragOver, setDragOver] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null); // 선택된 파일 (좌측 미리보기용)
+  const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null); // 이미지 미리보기 URL
+  const [zoomLevel, setZoomLevel] = useState(1); // 🔍 확대/축소 레벨
+  const [imagePosition, setImagePosition] = useState({ x: 0, y: 0 }); // 🖱️ 이미지 위치
+  const [isDragging, setIsDragging] = useState(false); // 🖱️ 드래그 중 여부
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); // 🖱️ 드래그 시작 위치
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const imageContainerRef = useRef<HTMLDivElement>(null);
+
+  // 파일 아이콘 가져오기
+  const getFileIcon = (fileExt: string) => {
+    const ext = fileExt.toLowerCase();
+    
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
+      return <ImageIcon className="w-5 h-5 text-blue-500" />;
+    } else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
+      return <FileText className="w-5 h-5 text-red-500" />;
+    } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
+      return <FileText className="w-5 h-5 text-green-500" />;
+    } else if (['ppt', 'pptx'].includes(ext)) {
+      return <Presentation className="w-5 h-5 text-orange-500" />;
+    } else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
+      return <Video className="w-5 h-5 text-purple-500" />;
+    } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
+      return <Music className="w-5 h-5 text-pink-500" />;
+    } else if (['zip', 'rar', '7z'].includes(ext)) {
+      return <Archive className="w-5 h-5 text-yellow-500" />;
+    } else {
+      return <File className="w-5 h-5 text-gray-500" />;
+    }
+  };
+
+  // 파일 업로드 핸들러
+  const handleFileUpload = async (files: FileList | File[]) => {
+    if (!files || files.length === 0) return;
+    
+    setUploading(true);
+    try {
+      const fileArray = Array.from(files);
+      await onFileUpload(fileArray);
+      console.log('✅ FileManagerModal: 파일 업로드 완료');
+    } catch (error) {
+      console.error('❌ FileManagerModal: 파일 업로드 오류:', error);
+    } finally {
+      setUploading(false);
+      console.log('🔄 FileManagerModal: 업로드 상태 초기화');
+    }
+  };
+
+  // 드래그 앤 드롭 핸들러
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    
+    if (config.disabled || isDesignMode) return;
+    
+    const files = e.dataTransfer.files;
+    handleFileUpload(files);
+  };
+
+  // 파일 선택 핸들러
+  const handleFileSelect = () => {
+    if (config.disabled || isDesignMode) return;
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files) {
+      handleFileUpload(files);
+    }
+    // 입력값 초기화
+    e.target.value = '';
+  };
+
+  // 파일 뷰어 핸들러
+  const handleFileViewInternal = (file: FileInfo) => {
+    setViewerFile(file);
+    setIsViewerOpen(true);
+  };
+
+  const handleViewerClose = () => {
+    setIsViewerOpen(false);
+    setViewerFile(null);
+  };
+
+  // 파일 클릭 시 미리보기 로드
+  const handleFileClick = async (file: FileInfo) => {
+    setSelectedFile(file);
+    setZoomLevel(1); // 🔍 파일 선택 시 확대/축소 레벨 초기화
+    setImagePosition({ x: 0, y: 0 }); // 🖱️ 이미지 위치 초기화
+    
+    // 이미지 파일인 경우 미리보기 로드
+    // 🔑 점(.)을 제거하고 확장자만 비교
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
+    const ext = file.fileExt.toLowerCase().replace('.', '');
+    if (imageExtensions.includes(ext) || file.isImage) {
+      try {
+        // 이전 Blob URL 해제
+        if (previewImageUrl) {
+          URL.revokeObjectURL(previewImageUrl);
+        }
+        
+        // 🔑 항상 apiClient를 통해 Blob 다운로드 (Docker 환경에서 상대 경로 문제 방지)
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/files/preview/${file.objid}`, {
+          responseType: 'blob'
+        });
+        
+        const blob = new Blob([response.data]);
+        const blobUrl = URL.createObjectURL(blob);
+        setPreviewImageUrl(blobUrl);
+      } catch (error) {
+        console.error("이미지 로드 실패:", error);
+        setPreviewImageUrl(null);
+      }
+    } else {
+      setPreviewImageUrl(null);
+    }
+  };
+
+  // 컴포넌트 언마운트 시 Blob URL 해제
+  React.useEffect(() => {
+    return () => {
+      if (previewImageUrl) {
+        URL.revokeObjectURL(previewImageUrl);
+      }
+    };
+  }, [previewImageUrl]);
+
+  // 🔑 모달이 열릴 때 첫 번째 파일을 자동으로 선택하고 확대/축소 레벨 초기화
+  React.useEffect(() => {
+    if (isOpen) {
+      setZoomLevel(1); // 🔍 모달 열릴 때 확대/축소 레벨 초기화
+      setImagePosition({ x: 0, y: 0 }); // 🖱️ 이미지 위치 초기화
+      if (uploadedFiles.length > 0 && !selectedFile) {
+        const firstFile = uploadedFiles[0];
+        handleFileClick(firstFile);
+      }
+    }
+  }, [isOpen, uploadedFiles, selectedFile]);
+
+  // 🖱️ 마우스 드래그 핸들러
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (zoomLevel > 1) {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - imagePosition.x, y: e.clientY - imagePosition.y });
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging && zoomLevel > 1) {
+      setImagePosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // 🔍 확대/축소 레벨이 1로 돌아가면 위치도 초기화
+  React.useEffect(() => {
+    if (zoomLevel <= 1) {
+      setImagePosition({ x: 0, y: 0 });
+    }
+  }, [zoomLevel]);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={() => {}}>
+        <DialogContent className="max-w-[95vw] w-[1400px] max-h-[90vh] overflow-hidden [&>button]:hidden">
+          <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <DialogTitle className="text-lg font-semibold">
+              파일 관리 ({uploadedFiles.length}개)
+            </DialogTitle>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 hover:bg-gray-100"
+              onClick={onClose}
+              title="닫기"
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          </DialogHeader>
+          
+          <div className="flex flex-col space-y-3 h-[75vh]">
+            {/* 파일 업로드 영역 - 높이 축소 */}
+            {!isDesignMode && (
+              <div
+                className={`
+                  border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
+                  ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
+                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+                  ${uploading ? 'opacity-75' : ''}
+                `}
+                onClick={() => {
+                  if (!config.disabled && !isDesignMode) {
+                    fileInputRef.current?.click();
+                  }
+                }}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple={config.multiple}
+                  accept={config.accept}
+                  onChange={handleFileInputChange}
+                  className="hidden"
+                  disabled={config.disabled}
+                />
+                
+                {uploading ? (
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+                    <span className="text-sm text-blue-600 font-medium">업로드 중...</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center gap-3">
+                    <Upload className="h-6 w-6 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-700">
+                      파일을 드래그하거나 클릭하여 업로드하세요
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 좌우 분할 레이아웃 - 좌측 넓게, 우측 고정 너비 */}
+            <div className="flex-1 flex gap-4 min-h-0">
+              {/* 좌측: 이미지 미리보기 (확대/축소 가능) */}
+              <div className="flex-1 border border-gray-200 rounded-lg bg-gray-900 flex flex-col overflow-hidden relative">
+                {/* 확대/축소 컨트롤 */}
+                {selectedFile && previewImageUrl && (
+                  <div className="absolute top-3 left-3 z-10 flex items-center gap-1 bg-black/60 rounded-lg p-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-white hover:bg-white/20"
+                      onClick={() => setZoomLevel(prev => Math.max(0.25, prev - 0.25))}
+                      disabled={zoomLevel <= 0.25}
+                    >
+                      <ZoomOut className="h-4 w-4" />
+                    </Button>
+                    <span className="text-white text-xs min-w-[50px] text-center">
+                      {Math.round(zoomLevel * 100)}%
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-white hover:bg-white/20"
+                      onClick={() => setZoomLevel(prev => Math.min(4, prev + 0.25))}
+                      disabled={zoomLevel >= 4}
+                    >
+                      <ZoomIn className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-white hover:bg-white/20"
+                      onClick={() => setZoomLevel(1)}
+                    >
+                      <RotateCcw className="h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
+                
+                {/* 이미지 미리보기 영역 - 마우스 휠로 확대/축소, 드래그로 이동 */}
+                <div 
+                  ref={imageContainerRef}
+                  className={`flex-1 flex items-center justify-center overflow-hidden p-4 ${
+                    zoomLevel > 1 ? (isDragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in'
+                  }`}
+                  onWheel={(e) => {
+                    if (selectedFile && previewImageUrl) {
+                      e.preventDefault();
+                      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+                      setZoomLevel(prev => Math.min(4, Math.max(0.25, prev + delta)));
+                    }
+                  }}
+                  onMouseDown={handleMouseDown}
+                  onMouseMove={handleMouseMove}
+                  onMouseUp={handleMouseUp}
+                  onMouseLeave={handleMouseUp}
+                >
+                  {selectedFile && previewImageUrl ? (
+                    <img 
+                      src={previewImageUrl} 
+                      alt={selectedFile.realFileName}
+                      className="transition-transform duration-100 select-none"
+                      style={{ 
+                        transform: `translate(${imagePosition.x}px, ${imagePosition.y}px) scale(${zoomLevel})`,
+                        transformOrigin: 'center center',
+                      }}
+                      draggable={false}
+                    />
+                  ) : selectedFile ? (
+                    <div className="flex flex-col items-center text-gray-400">
+                      {getFileIcon(selectedFile.fileExt)}
+                      <p className="mt-2 text-sm">미리보기 불가능</p>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center text-gray-400">
+                      <ImageIcon className="w-16 h-16 mb-2" />
+                      <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
+                    </div>
+                  )}
+                </div>
+                
+                {/* 파일 정보 바 */}
+                {selectedFile && (
+                  <div className="bg-black/60 text-white text-xs px-3 py-2 text-center truncate">
+                    {selectedFile.realFileName}
+                  </div>
+                )}
+              </div>
+
+              {/* 우측: 파일 목록 (고정 너비) */}
+              <div className="w-[400px] shrink-0 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
+                <div className="p-3 border-b border-gray-200 bg-gray-50">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm font-medium text-gray-700">
+                      업로드된 파일
+                    </h3>
+                    {uploadedFiles.length > 0 && (
+                      <Badge variant="secondary" className="text-xs">
+                        총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-3">
+                  {uploadedFiles.length > 0 ? (
+                    <div className="space-y-2">
+                      {uploadedFiles.map((file) => (
+                        <div
+                          key={file.objid}
+                          className={`
+                            flex items-center space-x-3 p-2 rounded-lg transition-colors cursor-pointer
+                            ${selectedFile?.objid === file.objid ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'}
+                          `}
+                          onClick={() => handleFileClick(file)}
+                        >
+                        <div className="flex-shrink-0">
+                          {getFileIcon(file.fileExt)}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-gray-900 truncate">
+                              {file.realFileName}
+                            </span>
+                            {file.isRepresentative && (
+                              <Badge variant="default" className="h-5 px-1.5 text-xs">
+                                대표
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500">
+                            {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
+                          </p>
+                        </div>
+                        <div className="flex items-center space-x-1">
+                          {onSetRepresentative && (
+                            <Button
+                              variant={file.isRepresentative ? "default" : "ghost"}
+                              size="sm"
+                              className="h-7 w-7 p-0"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onSetRepresentative(file);
+                              }}
+                              title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
+                            >
+                              <Star className={`w-3 h-3 ${file.isRepresentative ? "fill-white" : ""}`} />
+                            </Button>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleFileViewInternal(file);
+                            }}
+                            title="미리보기"
+                          >
+                            <Eye className="w-3 h-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onFileDownload(file);
+                            }}
+                            title="다운로드"
+                          >
+                            <Download className="w-3 h-3" />
+                          </Button>
+                          {!isDesignMode && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onFileDelete(file);
+                              }}
+                              title="삭제"
+                            >
+                              <Trash2 className="w-3 h-3" />
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center py-8 text-gray-500">
+                    <File className="w-12 h-12 mb-3 text-gray-300" />
+                    <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 업로드하세요'}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 파일 뷰어 모달 */}
+      <FileViewerModal
+        file={viewerFile}
+        isOpen={isViewerOpen}
+        onClose={handleViewerClose}
+        onDownload={onFileDownload}
+        onDelete={!isDesignMode ? onFileDelete : undefined}
+      />
+    </>
+  );
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
new file mode 100644
index 00000000..9af1a58a
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
@@ -0,0 +1,1128 @@
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import { uploadFiles, downloadFile, deleteFile, getComponentFiles, getFileInfoByObjid, getFilePreviewUrl } from "@/lib/api/file";
+import { GlobalFileManager } from "@/lib/api/globalFile";
+import { formatFileSize } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { FileViewerModal } from "./FileViewerModal";
+import { FileManagerModal } from "./FileManagerModal";
+import { FileUploadConfig, FileInfo, FileUploadStatus, FileUploadResponse } from "./types";
+import { useAuth } from "@/hooks/useAuth";
+import {
+  Upload,
+  File,
+  FileText,
+  Image,
+  Video,
+  Music,
+  Archive,
+  Download,
+  Eye,
+  Trash2,
+  AlertCircle,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  Presentation,
+} from "lucide-react";
+
+// 파일 아이콘 매핑
+const getFileIcon = (extension: string) => {
+  const ext = extension.toLowerCase().replace(".", "");
+
+  if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
+    return <FileImage className="h-6 w-6 text-blue-500" />;
+  }
+  if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
+    return <FileVideo className="h-6 w-6 text-purple-500" />;
+  }
+  if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
+    return <FileAudio className="h-6 w-6 text-green-500" />;
+  }
+  if (["pdf"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-red-500" />;
+  }
+  if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-blue-600" />;
+  }
+  if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
+    return <FileText className="h-6 w-6 text-green-600" />;
+  }
+  if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
+    return <Presentation className="h-6 w-6 text-orange-500" />;
+  }
+  if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
+    return <Archive className="h-6 w-6 text-gray-500" />;
+  }
+
+  return <File className="h-6 w-6 text-gray-400" />;
+};
+
+export interface FileUploadComponentProps {
+  component: any;
+  componentConfig: FileUploadConfig;
+  componentStyle: React.CSSProperties;
+  className: string;
+  isInteractive: boolean;
+  isDesignMode: boolean;
+  formData: any;
+  onFormDataChange: (fieldName: string, value: any) => void;
+  onClick?: () => void;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragEnd?: (e: React.DragEvent) => void;
+  onUpdate?: (updates: Partial<any>) => void;
+  autoGeneration?: any;
+  hidden?: boolean;
+  onConfigChange?: (config: any) => void;
+}
+
+const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
+  component,
+  componentConfig,
+  componentStyle,
+  className,
+  isInteractive,
+  isDesignMode = false, // 기본값 설정
+  formData,
+  onFormDataChange,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  onUpdate,
+}) => {
+  // 🔑 인증 정보 가져오기
+  const { user } = useAuth();
+  
+  const [uploadedFiles, setUploadedFiles] = useState<FileInfo[]>([]);
+  const [uploadStatus, setUploadStatus] = useState<FileUploadStatus>("idle");
+  const [dragOver, setDragOver] = useState(false);
+  const [viewerFile, setViewerFile] = useState<FileInfo | null>(null);
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const [isFileManagerOpen, setIsFileManagerOpen] = useState(false);
+  const [forceUpdate, setForceUpdate] = useState(0);
+  const [representativeImageUrl, setRepresentativeImageUrl] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // 🔑 레코드 모드 판단: formData에 id가 있으면 특정 행에 연결된 파일 관리
+  const isRecordMode = !!(formData?.id && !String(formData.id).startsWith('temp_'));
+  const recordTableName = formData?.tableName || component.tableName;
+  const recordId = formData?.id;
+  // 🔑 컬럼명 결정: component.columnName을 우선 사용 (실제 DB 컬럼명)
+  // image, file 등의 웹타입 컬럼에 URL이 저장되어야 함
+  const columnName = component.columnName || component.id || 'attachments';
+  
+  // 🔑 레코드 모드용 targetObjid 생성
+  const getRecordTargetObjid = useCallback(() => {
+    if (isRecordMode && recordTableName && recordId) {
+      return `${recordTableName}:${recordId}:${columnName}`;
+    }
+    return null;
+  }, [isRecordMode, recordTableName, recordId, columnName]);
+
+  // 🔑 레코드별 고유 키 생성 (localStorage, 전역 상태용)
+  // 🆕 columnName을 포함하여 같은 화면의 여러 파일 업로드 컴포넌트 구분
+  const getUniqueKey = useCallback(() => {
+    if (isRecordMode && recordTableName && recordId) {
+      // 레코드 모드: 테이블명:레코드ID:컴포넌트ID:컬럼명 형태로 고유 키 생성
+      return `fileUpload_${recordTableName}_${recordId}_${component.id}_${columnName}`;
+    }
+    // 기본 모드: 컴포넌트 ID + 컬럼명 사용
+    return `fileUpload_${component.id}_${columnName}`;
+  }, [isRecordMode, recordTableName, recordId, component.id, columnName]);
+
+
+  // 🆕 레코드 ID 변경 시 파일 목록 초기화 및 새로 로드
+  const prevRecordIdRef = useRef<any>(null);
+  const prevIsRecordModeRef = useRef<boolean | null>(null);
+  useEffect(() => {
+    const recordIdChanged = prevRecordIdRef.current !== recordId;
+    const modeChanged = prevIsRecordModeRef.current !== null && prevIsRecordModeRef.current !== isRecordMode;
+    
+    if (recordIdChanged || modeChanged) {
+      prevRecordIdRef.current = recordId;
+      prevIsRecordModeRef.current = isRecordMode;
+      
+      // 레코드 ID가 변경되거나 등록 모드(isRecordMode=false)로 전환되면 파일 목록 초기화
+      // 등록 모드에서는 항상 빈 상태로 시작해야 함
+      if (isRecordMode || !recordId) {
+        setUploadedFiles([]);
+        setRepresentativeImageUrl(null);
+      }
+    } else if (prevIsRecordModeRef.current === null) {
+      // 초기 마운트 시 모드 저장
+      prevIsRecordModeRef.current = isRecordMode;
+    }
+  }, [recordId, isRecordMode]);
+
+  // 컴포넌트 마운트 시 즉시 localStorage에서 파일 복원
+  // 🔑 등록 모드(recordId가 없는 경우)에서는 파일을 복원하지 않음 - 항상 빈 상태로 시작
+  useEffect(() => {
+    if (!component?.id) return;
+    
+    // 등록 모드(새 레코드)인 경우 파일 복원 스킵 - 빈 상태 유지
+    if (!isRecordMode || !recordId) {
+      return;
+    }
+
+    try {
+      // 🔑 레코드별 고유 키 사용 (수정 모드에서만)
+      const backupKey = getUniqueKey();
+      const backupFiles = localStorage.getItem(backupKey);
+      if (backupFiles) {
+        const parsedFiles = JSON.parse(backupFiles);
+        if (parsedFiles.length > 0) {
+          setUploadedFiles(parsedFiles);
+
+          // 전역 상태에도 복원 (레코드별 고유 키 사용)
+          if (typeof window !== "undefined") {
+            (window as any).globalFileState = {
+              ...(window as any).globalFileState,
+              [backupKey]: parsedFiles,
+            };
+          }
+        }
+      }
+    } catch (e) {
+      console.warn("컴포넌트 마운트 시 파일 복원 실패:", e);
+    }
+  }, [component.id, getUniqueKey, recordId, isRecordMode]); // 레코드별 고유 키 변경 시 재실행
+
+  // 🔑 수정 모드: formData[columnName]에 저장된 objid로 이미지 로드
+  // 🆕 formData 전체가 아닌 특정 컬럼 값만 의존하도록 수정 (다른 컴포넌트 영향 방지)
+  const imageObjidFromFormData = formData?.[columnName];
+  
+  useEffect(() => {
+    // 이미지 objid가 있고, 숫자 문자열인 경우에만 처리
+    if (imageObjidFromFormData && /^\d+$/.test(String(imageObjidFromFormData))) {
+      const objidStr = String(imageObjidFromFormData);
+      
+      // 이미 같은 objid의 파일이 로드되어 있으면 스킵
+      const alreadyLoaded = uploadedFiles.some(f => String(f.objid) === objidStr);
+      if (alreadyLoaded) {
+        return;
+      }
+      
+      // 🔑 실제 파일 정보 조회 (previewUrl 제거 - apiClient blob 다운로드 방식으로 통일)
+      (async () => {
+        try {
+          const fileInfoResponse = await getFileInfoByObjid(objidStr);
+          
+          if (fileInfoResponse.success && fileInfoResponse.data) {
+            const { realFileName, fileSize, fileExt, regdate, isRepresentative } = fileInfoResponse.data;
+            
+            const fileInfo = {
+              objid: objidStr,
+              realFileName: realFileName,
+              fileExt: fileExt,
+              fileSize: fileSize,
+              filePath: getFilePreviewUrl(objidStr),
+              regdate: regdate,
+              isImage: true,
+              isRepresentative: isRepresentative,
+            };
+            
+            setUploadedFiles([fileInfo]);
+            // representativeImageUrl은 loadRepresentativeImage에서 blob으로 로드됨
+          } else {
+            // 파일 정보 조회 실패 시 최소 정보로 추가
+            console.warn("🖼️ [FileUploadComponent] 파일 정보 조회 실패, 최소 정보 사용");
+            const minimalFileInfo = {
+              objid: objidStr,
+              realFileName: `image_${objidStr}.jpg`,
+              fileExt: '.jpg',
+              fileSize: 0,
+              filePath: getFilePreviewUrl(objidStr),
+              regdate: new Date().toISOString(),
+              isImage: true,
+            };
+            
+            setUploadedFiles([minimalFileInfo]);
+            // representativeImageUrl은 loadRepresentativeImage에서 blob으로 로드됨
+          }
+        } catch (error) {
+          console.error("🖼️ [FileUploadComponent] 파일 정보 조회 오류:", error);
+        }
+      })();
+    }
+  }, [imageObjidFromFormData, columnName, component.id]); // 🆕 formData 대신 특정 컬럼 값만 의존
+
+  // 🎯 화면설계 모드에서 실제 화면으로의 실시간 동기화 이벤트 리스너
+  // 🆕 columnName도 체크하여 같은 화면의 다른 파일 업로드 컴포넌트와 구분
+  useEffect(() => {
+    const handleDesignModeFileChange = (event: CustomEvent) => {
+      const eventColumnName = event.detail.eventColumnName || event.detail.columnName;
+      
+      // 🆕 고유 키 또는 (컴포넌트ID + 컬럼명) 조합으로 체크
+      const isForThisComponent = 
+        (event.detail.uniqueKey && event.detail.uniqueKey === currentUniqueKey) ||
+        (event.detail.componentId === component.id && eventColumnName === columnName) ||
+        (event.detail.componentId === component.id && !eventColumnName); // 이전 호환성
+
+      // 🆕 현재 컴포넌트와 일치하고 화면설계 모드에서 온 이벤트인 경우
+      if (isForThisComponent && event.detail.source === "designMode") {
+        // 파일 상태 업데이트
+        const newFiles = event.detail.files || [];
+        setUploadedFiles(newFiles);
+
+        // localStorage 백업 업데이트 (레코드별 고유 키 사용)
+        try {
+          const backupKey = currentUniqueKey;
+          localStorage.setItem(backupKey, JSON.stringify(newFiles));
+        } catch (e) {
+          console.warn("localStorage 백업 업데이트 실패:", e);
+        }
+
+        // 전역 상태 업데이트 (🆕 고유 키 사용)
+        if (typeof window !== "undefined") {
+          (window as any).globalFileState = {
+            ...(window as any).globalFileState,
+            [currentUniqueKey]: newFiles,
+          };
+        }
+
+        // onUpdate 콜백 호출 (부모 컴포넌트에 알림)
+        if (onUpdate) {
+          onUpdate({
+            uploadedFiles: newFiles,
+            lastFileUpdate: event.detail.timestamp,
+          });
+        }
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("globalFileStateChanged", handleDesignModeFileChange as EventListener);
+
+      return () => {
+        window.removeEventListener("globalFileStateChanged", handleDesignModeFileChange as EventListener);
+      };
+    }
+  }, [component.id, onUpdate]);
+
+  // 템플릿 파일과 데이터 파일을 조회하는 함수
+  const loadComponentFiles = useCallback(async () => {
+    if (!component?.id) return false;
+
+    // 🔑 등록 모드(새 레코드)인 경우 파일 조회 스킵 - 빈 상태 유지
+    if (!isRecordMode || !recordId) {
+      return false;
+    }
+
+    try {
+      // 1. formData에서 screenId 가져오기
+      let screenId = formData?.screenId;
+      
+      // 2. URL에서 screenId 추출 (/screens/:id 패턴)
+      if (!screenId && typeof window !== "undefined") {
+        const pathname = window.location.pathname;
+        const screenMatch = pathname.match(/\/screens\/(\d+)/);
+        if (screenMatch) {
+          screenId = parseInt(screenMatch[1]);
+        }
+      }
+
+      // 3. 디자인 모드인 경우 임시 화면 ID 사용
+      if (!screenId && isDesignMode) {
+        screenId = 999999; // 디자인 모드 임시 ID
+      }
+
+      // 4. 화면 ID가 없으면 컴포넌트 ID만으로 조회 시도
+      if (!screenId) {
+        console.warn("⚠️ 화면 ID 없음, 컴포넌트 ID만으로 파일 조회:", {
+          componentId: component.id,
+          pathname: window.location.pathname,
+          formData: formData,
+        });
+        // screenId를 0으로 설정하여 컴포넌트 ID로만 조회
+        screenId = 0;
+      }
+
+      const params = {
+        screenId,
+        componentId: component.id,
+        tableName: recordTableName || formData?.tableName || component.tableName,
+        recordId: recordId || formData?.id,
+        columnName: columnName, // 🔑 레코드 모드에서 사용하는 columnName
+      };
+
+      const response = await getComponentFiles(params);
+
+      if (response.success) {
+
+        // 파일 데이터 형식 통일
+        const formattedFiles = response.totalFiles.map((file: any) => ({
+          objid: file.objid || file.id,
+          savedFileName: file.savedFileName || file.saved_file_name,
+          realFileName: file.realFileName || file.real_file_name,
+          fileSize: file.fileSize || file.file_size,
+          fileExt: file.fileExt || file.file_ext,
+          regdate: file.regdate,
+          status: file.status || "ACTIVE",
+          uploadedAt: file.uploadedAt || new Date().toISOString(),
+          ...file,
+        }));
+
+
+        // 🔄 localStorage의 기존 파일과 서버 파일 병합 (레코드별 고유 키 사용)
+        let finalFiles = formattedFiles;
+        const uniqueKey = getUniqueKey();
+        try {
+          const backupFiles = localStorage.getItem(uniqueKey);
+          if (backupFiles) {
+            const parsedBackupFiles = JSON.parse(backupFiles);
+
+            // 서버에 없는 localStorage 파일들을 추가 (objid 기준으로 중복 제거)
+            const serverObjIds = new Set(formattedFiles.map((f: any) => f.objid));
+            const additionalFiles = parsedBackupFiles.filter((f: any) => !serverObjIds.has(f.objid));
+
+            finalFiles = [...formattedFiles, ...additionalFiles];
+          }
+        } catch (e) {
+          console.warn("파일 병합 중 오류:", e);
+        }
+
+        setUploadedFiles(finalFiles);
+
+        // 전역 상태에도 저장 (레코드별 고유 키 사용)
+        if (typeof window !== "undefined") {
+          (window as any).globalFileState = {
+            ...(window as any).globalFileState,
+            [uniqueKey]: finalFiles,
+          };
+
+          // 🌐 전역 파일 저장소에 등록 (페이지 간 공유용)
+          GlobalFileManager.registerFiles(finalFiles, {
+            uploadPage: window.location.pathname,
+            componentId: component.id,
+            screenId: formData?.screenId,
+            recordId: recordId,
+          });
+
+          // localStorage 백업도 병합된 파일로 업데이트 (레코드별 고유 키 사용)
+          try {
+            localStorage.setItem(uniqueKey, JSON.stringify(finalFiles));
+          } catch (e) {
+            console.warn("localStorage 백업 업데이트 실패:", e);
+          }
+        }
+        return true; // 새로운 로직 사용됨
+      }
+    } catch (error) {
+      console.error("파일 조회 오류:", error);
+    }
+    return false; // 기존 로직 사용
+  }, [component.id, component.tableName, component.columnName, formData?.screenId, formData?.tableName, formData?.id, getUniqueKey, recordId, isRecordMode, recordTableName, columnName]);
+
+  // 컴포넌트 파일 동기화 (DB 우선, localStorage는 보조)
+  useEffect(() => {
+    const componentFiles = (component as any)?.uploadedFiles || [];
+    const lastUpdate = (component as any)?.lastFileUpdate;
+
+    // 🔒 항상 DB에서 최신 파일 목록을 조회 (멀티테넌시 격리)
+    loadComponentFiles().then((dbLoadSuccess) => {
+      if (dbLoadSuccess) {
+        return; // DB 로드 성공 시 localStorage 무시
+      }
+
+      // 🆕 등록 모드(새 레코드)인 경우 fallback 로드도 스킵 - 항상 빈 상태 유지
+      if (!isRecordMode || !recordId) {
+        return;
+      }
+
+      // DB 로드 실패 시에만 기존 로직 사용 (하위 호환성)
+
+      // 전역 상태에서 최신 파일 정보 가져오기 (🆕 고유 키 사용)
+      const globalFileState = typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
+      const uniqueKeyForFallback = getUniqueKey();
+      const globalFiles = globalFileState[uniqueKeyForFallback] || globalFileState[component.id] || [];
+
+      // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
+      const currentFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
+
+
+      // 최신 파일과 현재 파일 비교
+      if (JSON.stringify(currentFiles) !== JSON.stringify(uploadedFiles)) {
+        setUploadedFiles(currentFiles);
+        setForceUpdate((prev) => prev + 1);
+      }
+    });
+  }, [loadComponentFiles, component.id, (component as any)?.uploadedFiles, (component as any)?.lastFileUpdate]);
+
+  // 전역 상태 변경 감지 (모든 파일 컴포넌트 동기화 + 화면 복원)
+  // 🆕 columnName을 포함한 고유 키로 구분하여 다른 파일 업로드 컴포넌트에 영향 방지
+  const currentUniqueKey = getUniqueKey();
+  
+  useEffect(() => {
+    const handleGlobalFileStateChange = (event: CustomEvent) => {
+      const { componentId, files, fileCount, timestamp, isRestore, uniqueKey: eventUniqueKey, eventColumnName } = event.detail;
+
+      // 🆕 고유 키 또는 (컴포넌트ID + 컬럼명) 조합으로 체크
+      const isForThisComponent = 
+        (eventUniqueKey && eventUniqueKey === currentUniqueKey) ||
+        (componentId === component.id && eventColumnName === columnName);
+
+      // 🆕 같은 고유 키인 경우에만 업데이트 (componentId + columnName 조합)
+      if (isForThisComponent) {
+
+        setUploadedFiles(files);
+        setForceUpdate((prev) => prev + 1);
+
+        // localStorage 백업도 업데이트 (레코드별 고유 키 사용)
+        try {
+          const backupKey = currentUniqueKey;
+          localStorage.setItem(backupKey, JSON.stringify(files));
+        } catch (e) {
+          console.warn("localStorage 백업 실패:", e);
+        }
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+
+      return () => {
+        window.removeEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+      };
+    }
+  }, [component.id, columnName, currentUniqueKey, uploadedFiles.length]);
+
+  // 파일 업로드 설정 - componentConfig가 undefined일 수 있으므로 안전하게 처리
+  const safeComponentConfig = componentConfig || {};
+  const fileConfig = {
+    accept: safeComponentConfig.accept || "*/*",
+    multiple: safeComponentConfig.multiple || false,
+    maxSize: safeComponentConfig.maxSize || 10 * 1024 * 1024, // 10MB
+    maxFiles: safeComponentConfig.maxFiles || 5,
+    ...safeComponentConfig,
+  } as FileUploadConfig;
+
+  // 파일 선택 핸들러
+  const handleFileSelect = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      handleFileUpload(files);
+    }
+  }, []);
+
+  // 파일 업로드 처리
+  const handleFileUpload = useCallback(
+    async (files: File[]) => {
+      if (!files.length) return;
+
+      // 중복 파일 체크
+      const existingFileNames = uploadedFiles.map((f) => f.realFileName.toLowerCase());
+      const duplicates: string[] = [];
+      const uniqueFiles: File[] = [];
+
+      files.forEach((file) => {
+        const fileName = file.name.toLowerCase();
+        if (existingFileNames.includes(fileName)) {
+          duplicates.push(file.name);
+        } else {
+          uniqueFiles.push(file);
+        }
+      });
+
+      if (duplicates.length > 0) {
+        toast.error(`중복된 파일이 있습니다: ${duplicates.join(", ")}`, {
+          description: "같은 이름의 파일이 이미 업로드되어 있습니다.",
+          duration: 4000,
+        });
+
+        if (uniqueFiles.length === 0) {
+          return; // 모든 파일이 중복이면 업로드 중단
+        }
+
+        // 일부만 중복인 경우 고유한 파일만 업로드
+        toast.info(`${uniqueFiles.length}개의 새로운 파일만 업로드합니다.`);
+      }
+
+      const filesToUpload = uniqueFiles.length > 0 ? uniqueFiles : files;
+      setUploadStatus("uploading");
+      toast.loading("파일을 업로드하는 중...", { id: "file-upload" });
+
+      try {
+        // 🔑 레코드 모드 우선 사용
+        const effectiveTableName = recordTableName || formData?.tableName || component.tableName || "default_table";
+        const effectiveRecordId = recordId || formData?.id;
+        const effectiveColumnName = columnName;
+        
+        // screenId 추출 (우선순위: formData > URL)
+        let screenId = formData?.screenId;
+        if (!screenId && typeof window !== "undefined") {
+          const pathname = window.location.pathname;
+          const screenMatch = pathname.match(/\/screens\/(\d+)/);
+          if (screenMatch) {
+            screenId = parseInt(screenMatch[1]);
+          }
+        }
+
+        let targetObjid;
+        // 🔑 레코드 모드 판단 개선
+        const effectiveIsRecordMode = isRecordMode || (effectiveRecordId && !String(effectiveRecordId).startsWith('temp_'));
+        
+        if (effectiveIsRecordMode && effectiveTableName && effectiveRecordId) {
+          // 🎯 레코드 모드: 특정 행에 파일 연결
+          targetObjid = `${effectiveTableName}:${effectiveRecordId}:${effectiveColumnName}`;
+        } else if (screenId) {
+          // 🔑 템플릿 파일 (백엔드 조회 형식과 동일하게)
+          targetObjid = `screen_files:${screenId}:${component.id}:${effectiveColumnName}`;
+        } else {
+          // 기본값 (화면관리에서 사용)
+          targetObjid = `temp_${component.id}`;
+        }
+
+        // 🔒 현재 사용자의 회사 코드 가져오기 (멀티테넌시 격리)
+        const userCompanyCode = user?.companyCode || (window as any).__user__?.companyCode;
+        
+        // 🔑 레코드 모드일 때는 effectiveTableName을 우선 사용
+        // formData.linkedTable이 'screen_files' 같은 기본값일 수 있으므로 레코드 모드에서는 무시
+        const finalLinkedTable = effectiveIsRecordMode 
+          ? effectiveTableName 
+          : (formData?.linkedTable || effectiveTableName);
+        
+        const uploadData = {
+          // 🎯 formData에서 백엔드 API 설정 가져오기
+          autoLink: formData?.autoLink || true,
+          linkedTable: finalLinkedTable,
+          recordId: effectiveRecordId || `temp_${component.id}`,
+          columnName: effectiveColumnName,
+          isVirtualFileColumn: formData?.isVirtualFileColumn || true,
+          docType: component.fileConfig?.docType || "DOCUMENT",
+          docTypeName: component.fileConfig?.docTypeName || "일반 문서",
+          companyCode: userCompanyCode, // 🔒 멀티테넌시: 회사 코드 명시적 전달
+          // 호환성을 위한 기존 필드들
+          tableName: effectiveTableName,
+          fieldName: effectiveColumnName,
+          targetObjid: targetObjid, // InteractiveDataTable 호환을 위한 targetObjid 추가
+          // 🆕 레코드 모드 플래그
+          isRecordMode: effectiveIsRecordMode,
+        };
+        
+        const response = await uploadFiles({
+          files: filesToUpload,
+          ...uploadData,
+        });
+
+        if (response.success) {
+          // FileUploadResponse 타입에 맞게 files 배열 사용
+          const fileData = response.files || (response as any).data || [];
+
+          if (fileData.length === 0) {
+            throw new Error("업로드된 파일 데이터를 받지 못했습니다.");
+          }
+
+          const newFiles = fileData.map((file: any) => ({
+            objid: file.objid || file.id,
+            savedFileName: file.saved_file_name || file.savedFileName,
+            realFileName: file.real_file_name || file.realFileName || file.name,
+            fileSize: file.file_size || file.fileSize || file.size,
+            fileExt: file.file_ext || file.fileExt || file.extension,
+            filePath: file.file_path || file.filePath || file.path,
+            docType: file.doc_type || file.docType,
+            docTypeName: file.doc_type_name || file.docTypeName,
+            targetObjid: file.target_objid || file.targetObjid,
+            parentTargetObjid: file.parent_target_objid || file.parentTargetObjid,
+            companyCode: file.company_code || file.companyCode,
+            writer: file.writer,
+            regdate: file.regdate,
+            status: file.status || "ACTIVE",
+            uploadedAt: new Date().toISOString(),
+            ...file,
+          }));
+
+
+          const updatedFiles = [...uploadedFiles, ...newFiles];
+
+          setUploadedFiles(updatedFiles);
+          setUploadStatus("success");
+
+          // localStorage 백업 (레코드별 고유 키 사용)
+          try {
+            const backupKey = getUniqueKey();
+            localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
+          } catch (e) {
+            console.warn("localStorage 백업 실패:", e);
+          }
+
+          // 전역 상태 업데이트 (모든 파일 컴포넌트 동기화)
+          if (typeof window !== "undefined") {
+            // 전역 파일 상태 업데이트 (레코드별 고유 키 사용)
+            const globalFileState = (window as any).globalFileState || {};
+            const uniqueKey = getUniqueKey();
+            globalFileState[uniqueKey] = updatedFiles;
+            (window as any).globalFileState = globalFileState;
+
+            // 🌐 전역 파일 저장소에 새 파일 등록 (페이지 간 공유용)
+            GlobalFileManager.registerFiles(newFiles, {
+              uploadPage: window.location.pathname,
+              componentId: component.id,
+              screenId: formData?.screenId,
+              recordId: recordId, // 🆕 레코드 ID 추가
+            });
+
+            // 모든 파일 컴포넌트에 동기화 이벤트 발생
+            // 🆕 columnName 추가하여 같은 화면의 다른 파일 업로드 컴포넌트와 구분
+            const syncEvent = new CustomEvent("globalFileStateChanged", {
+              detail: {
+                componentId: component.id,
+                eventColumnName: columnName, // 🆕 컬럼명 추가
+                uniqueKey: uniqueKey, // 🆕 고유 키 추가
+                recordId: recordId, // 🆕 레코드 ID 추가
+                files: updatedFiles,
+                fileCount: updatedFiles.length,
+                timestamp: Date.now(),
+              },
+            });
+            window.dispatchEvent(syncEvent);
+          }
+
+          // 컴포넌트 업데이트
+          if (onUpdate) {
+            const timestamp = Date.now();
+            onUpdate({
+              uploadedFiles: updatedFiles,
+              lastFileUpdate: timestamp,
+            });
+          } else {
+            console.warn("⚠️ onUpdate 콜백이 없습니다!");
+          }
+
+          // 🆕 이미지/파일 컬럼에 objid 저장 (formData 업데이트)
+          if (onFormDataChange && effectiveColumnName) {
+            // 🎯 이미지/파일 타입 컬럼: 첫 번째 파일의 objid를 저장 (그리드에서 표시용)
+            // 단일 파일인 경우 단일 값, 복수 파일인 경우 콤마 구분 문자열
+            const fileObjids = updatedFiles.map(file => file.objid);
+            const columnValue = fileConfig.multiple 
+              ? fileObjids.join(',')  // 복수 파일: 콤마 구분
+              : (fileObjids[0] || ''); // 단일 파일: 첫 번째 파일 ID
+            
+            // onFormDataChange를 (fieldName, value) 형태로 호출 (SaveModal 호환)
+            onFormDataChange(effectiveColumnName, columnValue);
+          }
+
+          // 그리드 파일 상태 새로고침 이벤트 발생
+          if (typeof window !== "undefined") {
+            const refreshEvent = new CustomEvent("refreshFileStatus", {
+              detail: {
+                tableName: effectiveTableName,
+                recordId: effectiveRecordId,
+                columnName: effectiveColumnName,
+                targetObjid: targetObjid,
+                fileCount: updatedFiles.length,
+              },
+            });
+            window.dispatchEvent(refreshEvent);
+          }
+
+          // 컴포넌트 설정 콜백
+          if (safeComponentConfig.onFileUpload) {
+            safeComponentConfig.onFileUpload(newFiles);
+          }
+
+          // 성공 시 토스트 처리
+          setUploadStatus("idle");
+          toast.dismiss("file-upload");
+          toast.success(`${newFiles.length}개 파일 업로드 완료`);
+        } else {
+          console.error("❌ 파일 업로드 실패:", response);
+          throw new Error(response.message || (response as any).error || "파일 업로드에 실패했습니다.");
+        }
+      } catch (error) {
+        console.error("파일 업로드 오류:", error);
+        setUploadStatus("error");
+        toast.dismiss("file-upload");
+        toast.error(`파일 업로드 오류: ${error instanceof Error ? error.message : "알 수 없는 오류"}`);
+      }
+    },
+    [safeComponentConfig, uploadedFiles, onFormDataChange, component.columnName, component.id, formData],
+  );
+
+  // 파일 뷰어 열기
+  const handleFileView = useCallback((file: FileInfo) => {
+    setViewerFile(file);
+    setIsViewerOpen(true);
+  }, []);
+
+  // 파일 뷰어 닫기
+  const handleViewerClose = useCallback(() => {
+    setIsViewerOpen(false);
+    setViewerFile(null);
+  }, []);
+
+  // 파일 다운로드
+  const handleFileDownload = useCallback(async (file: FileInfo) => {
+    try {
+      await downloadFile({
+        fileId: file.objid,
+        serverFilename: file.savedFileName,
+        originalName: file.realFileName,
+      });
+      toast.success(`${file.realFileName} 다운로드 완료`);
+    } catch (error) {
+      console.error("파일 다운로드 오류:", error);
+      toast.error("파일 다운로드에 실패했습니다.");
+    }
+  }, []);
+
+  // 파일 삭제
+  const handleFileDelete = useCallback(
+    async (file: FileInfo | string) => {
+      try {
+        const fileId = typeof file === "string" ? file : file.objid;
+        const fileName = typeof file === "string" ? "파일" : file.realFileName;
+
+        const serverFilename = typeof file === "string" ? "temp_file" : file.savedFileName;
+        await deleteFile(fileId, serverFilename);
+
+        const updatedFiles = uploadedFiles.filter((f) => f.objid !== fileId);
+        setUploadedFiles(updatedFiles);
+
+        // localStorage 백업 업데이트 (레코드별 고유 키 사용)
+        try {
+          const backupKey = getUniqueKey();
+          localStorage.setItem(backupKey, JSON.stringify(updatedFiles));
+        } catch (e) {
+          console.warn("localStorage 백업 업데이트 실패:", e);
+        }
+
+        // 전역 상태 업데이트 (모든 파일 컴포넌트 동기화)
+        if (typeof window !== "undefined") {
+          // 전역 파일 상태 업데이트 (레코드별 고유 키 사용)
+          const globalFileState = (window as any).globalFileState || {};
+          const uniqueKey = getUniqueKey();
+          globalFileState[uniqueKey] = updatedFiles;
+          (window as any).globalFileState = globalFileState;
+
+          // 모든 파일 컴포넌트에 동기화 이벤트 발생
+          // 🆕 columnName 추가하여 같은 화면의 다른 파일 업로드 컴포넌트와 구분
+          const syncEvent = new CustomEvent("globalFileStateChanged", {
+            detail: {
+              componentId: component.id,
+              eventColumnName: columnName, // 🆕 컬럼명 추가
+              uniqueKey: uniqueKey, // 🆕 고유 키 추가
+              recordId: recordId, // 🆕 레코드 ID 추가
+              files: updatedFiles,
+              fileCount: updatedFiles.length,
+              timestamp: Date.now(),
+              source: "realScreen", // 🎯 실제 화면에서 온 이벤트임을 표시
+              action: "delete",
+            },
+          });
+          window.dispatchEvent(syncEvent);
+        }
+
+        // 컴포넌트 업데이트
+        if (onUpdate) {
+          const timestamp = Date.now();
+          onUpdate({
+            uploadedFiles: updatedFiles,
+            lastFileUpdate: timestamp,
+          });
+        }
+
+        // 🆕 파일 삭제 후 컬럼 데이터 동기화
+        if (onFormDataChange && columnName) {
+          // 🎯 삭제 후 남은 파일들의 objid로 컬럼 값 업데이트
+          const fileObjids = updatedFiles.map(f => f.objid);
+          const columnValue = fileConfig.multiple 
+            ? fileObjids.join(',')
+            : (fileObjids[0] || '');
+          
+          // onFormDataChange를 (fieldName, value) 형태로 호출 (SaveModal 호환)
+          onFormDataChange(columnName, columnValue);
+        }
+
+        toast.success(`${fileName} 삭제 완료`);
+      } catch (error) {
+        console.error("파일 삭제 오류:", error);
+        toast.error("파일 삭제에 실패했습니다.");
+      }
+    },
+    [uploadedFiles, onUpdate, component.id, isRecordMode, onFormDataChange, recordTableName, recordId, columnName, getUniqueKey],
+  );
+
+  // 대표 이미지 Blob URL 로드
+  const loadRepresentativeImage = useCallback(
+    async (file: FileInfo) => {
+      try {
+        const isImage = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(
+          file.fileExt.toLowerCase().replace(".", "")
+        );
+
+        if (!isImage) {
+          setRepresentativeImageUrl(null);
+          return;
+        }
+
+        // objid가 없거나 유효하지 않으면 로드 중단
+        if (!file.objid || file.objid === "0" || file.objid === "") {
+          console.warn("⚠️ 대표 이미지 로드 실패: objid가 없음", file);
+          setRepresentativeImageUrl(null);
+          return;
+        }
+
+        // API 클라이언트를 통해 Blob으로 다운로드 (인증 토큰 포함)
+        // 🔑 previewUrl 상대 경로 대신 apiClient를 사용하여 Docker 환경에서도 정상 동작
+        const response = await apiClient.get(`/files/preview/${file.objid}`, {
+          params: {
+            serverFilename: file.savedFileName,
+          },
+          responseType: "blob",
+        });
+
+        // Blob URL 생성
+        const blob = new Blob([response.data]);
+        const url = window.URL.createObjectURL(blob);
+        
+        // 이전 URL 정리
+        if (representativeImageUrl) {
+          window.URL.revokeObjectURL(representativeImageUrl);
+        }
+
+        setRepresentativeImageUrl(url);
+      } catch (error: any) {
+        console.error("❌ 대표 이미지 로드 실패:", {
+          file: file.realFileName,
+          objid: file.objid,
+          error: error?.response?.status || error?.message,
+        });
+        setRepresentativeImageUrl(null);
+      }
+    },
+    [representativeImageUrl],
+  );
+
+  // 대표 이미지 설정 핸들러
+  const handleSetRepresentative = useCallback(
+    async (file: FileInfo) => {
+      try {
+        // API 호출하여 DB에 대표 파일 설정
+        const { setRepresentativeFile } = await import("@/lib/api/file");
+        await setRepresentativeFile(file.objid);
+
+        // 상태 업데이트
+        const updatedFiles = uploadedFiles.map((f) => ({
+          ...f,
+          isRepresentative: f.objid === file.objid,
+        }));
+
+        setUploadedFiles(updatedFiles);
+
+        // 대표 이미지 로드
+        loadRepresentativeImage(file);
+      } catch (e) {
+        console.error("❌ 대표 파일 설정 실패:", e);
+      }
+    },
+    [uploadedFiles, component.id, loadRepresentativeImage]
+  );
+
+  // uploadedFiles 변경 시 대표 이미지 로드
+  useEffect(() => {
+    const representativeFile = uploadedFiles.find(f => f.isRepresentative) || uploadedFiles[0];
+    if (representativeFile) {
+      loadRepresentativeImage(representativeFile);
+    } else {
+      setRepresentativeImageUrl(null);
+    }
+
+    // 컴포넌트 언마운트 시 Blob URL 정리
+    return () => {
+      if (representativeImageUrl) {
+        window.URL.revokeObjectURL(representativeImageUrl);
+      }
+    };
+  }, [uploadedFiles]);
+
+  // 드래그 앤 드롭 핸들러
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
+        setDragOver(true);
+      }
+    },
+    [safeComponentConfig.readonly, safeComponentConfig.disabled],
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+
+      if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+          handleFileUpload(files);
+        }
+      }
+    },
+    [safeComponentConfig.readonly, safeComponentConfig.disabled, handleFileUpload],
+  );
+
+  // 클릭 핸들러
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!safeComponentConfig.readonly && !safeComponentConfig.disabled) {
+        handleFileSelect();
+      }
+      onClick?.();
+    },
+    [safeComponentConfig.readonly, safeComponentConfig.disabled, handleFileSelect, onClick],
+  );
+
+  return (
+    <div
+      style={{
+        ...componentStyle,
+        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤
+        height: "100%", // 🆕 부모 컨테이너 높이에 맞춤
+        border: "none !important",
+        boxShadow: "none !important",
+        outline: "none !important",
+        backgroundColor: "transparent !important",
+        padding: "0px !important",
+        borderRadius: "0px !important",
+        marginBottom: "8px !important",
+      }}
+      className={`${className} file-upload-container`}
+    >
+      {/* 라벨 렌더링 */}
+      {component.label && component.style?.labelDisplay !== false && (
+        <label
+          style={{
+            position: "absolute",
+            top: "-20px",
+            left: "0px",
+            fontSize: "12px",
+            color: "rgb(107, 114, 128)",
+            fontWeight: "400",
+            background: "transparent !important",
+            border: "none !important",
+            boxShadow: "none !important",
+            outline: "none !important",
+            padding: "0px !important",
+            margin: "0px !important"
+          }}
+        >
+          {component.label}
+          {component.required && (
+            <span style={{ color: "#ef4444" }}>*</span>
+          )}
+        </label>
+      )}
+
+      <div
+        className="border-border bg-card relative flex h-full w-full flex-col rounded-lg border overflow-hidden"
+      >
+        {/* 대표 이미지 전체 화면 표시 */}
+        {uploadedFiles.length > 0 ? (() => {
+          const representativeFile = uploadedFiles.find(f => f.isRepresentative) || uploadedFiles[0];
+          const isImage = representativeFile && ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(
+            representativeFile.fileExt.toLowerCase().replace(".", "")
+          );
+
+          return (
+            <>
+              {isImage && representativeImageUrl ? (
+                <div className="relative h-full w-full flex items-center justify-center bg-muted/10">
+                  <img
+                    src={representativeImageUrl}
+                    alt={representativeFile.realFileName}
+                    className="h-full w-full object-contain"
+                  />
+                </div>
+              ) : isImage && !representativeImageUrl ? (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
+                  <p className="text-sm text-muted-foreground">이미지 로딩 중...</p>
+                </div>
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center">
+                  {getFileIcon(representativeFile.fileExt)}
+                  <p className="mt-3 text-sm font-medium text-center px-4">
+                    {representativeFile.realFileName}
+                  </p>
+                  <Badge variant="secondary" className="mt-2">
+                    대표 파일
+                  </Badge>
+                </div>
+              )}
+              
+              {/* 우측 하단 자세히보기 버튼 */}
+              <div className="absolute bottom-3 right-3">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="h-8 px-3 text-xs shadow-md"
+                  onClick={() => setIsFileManagerOpen(true)}
+                >
+                  자세히보기 ({uploadedFiles.length})
+                </Button>
+              </div>
+            </>
+          );
+        })() : (
+          <div className="flex h-full w-full flex-col items-center justify-center text-muted-foreground">
+            <File className="mb-3 h-12 w-12" />
+            <p className="text-sm font-medium">업로드된 파일이 없습니다</p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-4 h-8 px-3 text-xs"
+              onClick={() => setIsFileManagerOpen(true)}
+            >
+              파일 업로드
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* 파일뷰어 모달 */}
+      <FileViewerModal
+        file={viewerFile}
+        isOpen={isViewerOpen}
+        onClose={handleViewerClose}
+        onDownload={handleFileDownload}
+        onDelete={!isDesignMode ? handleFileDelete : undefined}
+      />
+
+      {/* 파일 관리 모달 */}
+      <FileManagerModal
+        isOpen={isFileManagerOpen}
+        onClose={() => setIsFileManagerOpen(false)}
+        uploadedFiles={uploadedFiles}
+        onFileUpload={handleFileUpload}
+        onFileDownload={handleFileDownload}
+        onFileDelete={handleFileDelete}
+        onFileView={handleFileView}
+        onSetRepresentative={handleSetRepresentative}
+        config={safeComponentConfig}
+        isDesignMode={isDesignMode}
+      />
+    </div>
+  );
+};
+
+export { FileUploadComponent };
+export default FileUploadComponent;
diff --git a/frontend/lib/registry/components/v2-file-upload/FileUploadConfigPanel.tsx b/frontend/lib/registry/components/v2-file-upload/FileUploadConfigPanel.tsx
new file mode 100644
index 00000000..cafe7ac2
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadConfigPanel.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import React, { useMemo, useCallback } 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 { Separator } from "@/components/ui/separator";
+import { FileUploadConfig } from "./types";
+import { V2FileUploadDefaultConfig } from "./config";
+
+export interface FileUploadConfigPanelProps {
+  config: FileUploadConfig;
+  onChange: (config: Partial<FileUploadConfig>) => void;
+  screenTableName?: string;
+}
+
+/**
+ * V2 FileUpload 설정 패널
+ * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
+ */
+export const FileUploadConfigPanel: React.FC<FileUploadConfigPanelProps> = ({
+  config: propConfig,
+  onChange,
+  screenTableName,
+}) => {
+  // config 안전하게 초기화 (useMemo)
+  const config = useMemo(() => ({
+    ...V2FileUploadDefaultConfig,
+    ...propConfig,
+  }), [propConfig]);
+
+  // 핸들러
+  const handleChange = useCallback(<K extends keyof FileUploadConfig>(
+    key: K, 
+    value: FileUploadConfig[K]
+  ) => {
+    onChange({ [key]: value });
+  }, [onChange]);
+
+  // 파일 크기를 MB 단위로 변환
+  const maxSizeMB = useMemo(() => {
+    return (config.maxSize || 10 * 1024 * 1024) / (1024 * 1024);
+  }, [config.maxSize]);
+
+  const handleMaxSizeChange = useCallback((value: string) => {
+    const mb = parseFloat(value) || 10;
+    handleChange("maxSize", mb * 1024 * 1024);
+  }, [handleChange]);
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="text-sm font-medium text-muted-foreground">
+        V2 파일 업로드 설정
+      </div>
+
+      <Separator />
+
+      {/* 기본 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          기본 설정
+        </Label>
+        
+        <div className="space-y-2">
+          <Label htmlFor="placeholder" className="text-xs">플레이스홀더</Label>
+          <Input
+            id="placeholder"
+            value={config.placeholder || ""}
+            onChange={(e) => handleChange("placeholder", e.target.value)}
+            placeholder="파일을 선택하세요"
+            className="h-8 text-xs"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="accept" className="text-xs">허용 파일 형식</Label>
+          <Select
+            value={config.accept || "*/*"}
+            onValueChange={(value) => handleChange("accept", value)}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="파일 형식 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="*/*">모든 파일</SelectItem>
+              <SelectItem value="image/*">이미지만</SelectItem>
+              <SelectItem value=".pdf,.doc,.docx,.xls,.xlsx">문서만</SelectItem>
+              <SelectItem value="image/*,.pdf">이미지 + PDF</SelectItem>
+              <SelectItem value=".zip,.rar,.7z">압축 파일만</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-2">
+            <Label htmlFor="maxSize" className="text-xs">최대 크기 (MB)</Label>
+            <Input
+              id="maxSize"
+              type="number"
+              min={1}
+              max={100}
+              value={maxSizeMB}
+              onChange={(e) => handleMaxSizeChange(e.target.value)}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="maxFiles" className="text-xs">최대 파일 수</Label>
+            <Input
+              id="maxFiles"
+              type="number"
+              min={1}
+              max={50}
+              value={config.maxFiles || 10}
+              onChange={(e) => handleChange("maxFiles", parseInt(e.target.value) || 10)}
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 동작 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          동작 설정
+        </Label>
+        
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="multiple"
+            checked={config.multiple !== false}
+            onCheckedChange={(checked) => handleChange("multiple", checked as boolean)}
+          />
+          <Label htmlFor="multiple" className="text-xs">다중 파일 선택 허용</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="allowDelete"
+            checked={config.allowDelete !== false}
+            onCheckedChange={(checked) => handleChange("allowDelete", checked as boolean)}
+          />
+          <Label htmlFor="allowDelete" className="text-xs">파일 삭제 허용</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="allowDownload"
+            checked={config.allowDownload !== false}
+            onCheckedChange={(checked) => handleChange("allowDownload", checked as boolean)}
+          />
+          <Label htmlFor="allowDownload" className="text-xs">파일 다운로드 허용</Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 표시 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          표시 설정
+        </Label>
+        
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="showPreview"
+            checked={config.showPreview !== false}
+            onCheckedChange={(checked) => handleChange("showPreview", checked as boolean)}
+          />
+          <Label htmlFor="showPreview" className="text-xs">미리보기 표시</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="showFileList"
+            checked={config.showFileList !== false}
+            onCheckedChange={(checked) => handleChange("showFileList", checked as boolean)}
+          />
+          <Label htmlFor="showFileList" className="text-xs">파일 목록 표시</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="showFileSize"
+            checked={config.showFileSize !== false}
+            onCheckedChange={(checked) => handleChange("showFileSize", checked as boolean)}
+          />
+          <Label htmlFor="showFileSize" className="text-xs">파일 크기 표시</Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 상태 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          상태 설정
+        </Label>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="required"
+            checked={config.required || false}
+            onCheckedChange={(checked) => handleChange("required", checked as boolean)}
+          />
+          <Label htmlFor="required" className="text-xs">필수 입력</Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="readonly"
+            checked={config.readonly || false}
+            onCheckedChange={(checked) => handleChange("readonly", checked as boolean)}
+          />
+          <Label htmlFor="readonly" className="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="text-xs">비활성화</Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 스타일 설정 */}
+      <div className="space-y-3">
+        <Label className="text-xs font-semibold uppercase text-muted-foreground">
+          스타일 설정
+        </Label>
+
+        <div className="space-y-2">
+          <Label htmlFor="variant" className="text-xs">스타일 변형</Label>
+          <Select
+            value={config.variant || "default"}
+            onValueChange={(value) => handleChange("variant", value as "default" | "outlined" | "filled")}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="스타일 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default">기본</SelectItem>
+              <SelectItem value="outlined">테두리</SelectItem>
+              <SelectItem value="filled">채움</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="size" className="text-xs">크기</Label>
+          <Select
+            value={config.size || "md"}
+            onValueChange={(value) => handleChange("size", value as "sm" | "md" | "lg")}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue placeholder="크기 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="sm">작게</SelectItem>
+              <SelectItem value="md">보통</SelectItem>
+              <SelectItem value="lg">크게</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* 도움말 */}
+      <div className="space-y-2">
+        <Label htmlFor="helperText" className="text-xs">도움말</Label>
+        <Input
+          id="helperText"
+          value={config.helperText || ""}
+          onChange={(e) => handleChange("helperText", e.target.value)}
+          placeholder="파일 업로드에 대한 안내 문구"
+          className="h-8 text-xs"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
new file mode 100644
index 00000000..36e37044
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
@@ -0,0 +1,545 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { FileInfo } from "./types";
+import { Download, X, AlertTriangle, FileText, Trash2, ExternalLink } from "lucide-react";
+import { formatFileSize } from "@/lib/utils";
+import { API_BASE_URL } from "@/lib/api/client";
+
+// Office 문서 렌더링을 위한 CDN 라이브러리 로드
+const loadOfficeLibrariesFromCDN = async () => {
+  if (typeof window === "undefined") return { XLSX: null, mammoth: null };
+
+  try {
+    // XLSX 라이브러리가 이미 로드되어 있는지 확인
+    if (!(window as any).XLSX) {
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js";
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+
+    // mammoth 라이브러리가 이미 로드되어 있는지 확인
+    if (!(window as any).mammoth) {
+      await new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = "https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js";
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+
+    return {
+      XLSX: (window as any).XLSX,
+      mammoth: (window as any).mammoth,
+    };
+  } catch (error) {
+    console.error("Office 라이브러리 CDN 로드 실패:", error);
+    return { XLSX: null, mammoth: null };
+  }
+};
+
+interface FileViewerModalProps {
+  file: FileInfo | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onDownload?: (file: FileInfo) => void;
+  onDelete?: (file: FileInfo) => void;
+}
+
+/**
+ * 파일 뷰어 모달 컴포넌트
+ */
+export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen, onClose, onDownload, onDelete }) => {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [renderedContent, setRenderedContent] = useState<string | null>(null);
+
+  // Office 문서를 CDN 라이브러리로 렌더링하는 함수
+  const renderOfficeDocument = async (blob: Blob, fileExt: string, fileName: string) => {
+    try {
+      setIsLoading(true);
+
+      // CDN에서 라이브러리 로드
+      const { XLSX, mammoth } = await loadOfficeLibrariesFromCDN();
+
+      if (fileExt === "docx" && mammoth) {
+        // Word 문서 렌더링
+        const arrayBuffer = await blob.arrayBuffer();
+        const result = await mammoth.convertToHtml({ arrayBuffer });
+
+        const htmlContent = `
+          <div>
+            <h4 style="margin: 0 0 15px 0; color: #333; font-size: 16px;">📄 ${fileName}</h4>
+            <div class="word-content" style="max-height: 500px; overflow-y: auto; padding: 20px; background: white; border: 1px solid #ddd; border-radius: 5px; line-height: 1.6; font-family: 'Times New Roman', serif;">
+              ${result.value || "내용을 읽을 수 없습니다."}
+            </div>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      } else if (["xlsx", "xls"].includes(fileExt) && XLSX) {
+        // Excel 문서 렌더링
+        const arrayBuffer = await blob.arrayBuffer();
+        const workbook = XLSX.read(arrayBuffer, { type: "array" });
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+
+        const html = XLSX.utils.sheet_to_html(worksheet, {
+          table: { className: "excel-table" },
+        });
+
+        const htmlContent = `
+          <div>
+            <h4 style="margin: 0 0 10px 0; color: #333; font-size: 16px;">📊 ${fileName}</h4>
+            <p style="margin: 0 0 15px 0; color: #666; font-size: 14px;">시트: ${sheetName}</p>
+            <div style="max-height: 400px; overflow: auto; border: 1px solid #ddd; border-radius: 5px;">
+              <style>
+                .excel-table { border-collapse: collapse; width: 100%; }
+                .excel-table td, .excel-table th { border: 1px solid #ddd; padding: 8px; text-align: left; font-size: 12px; }
+                .excel-table th { background-color: #f5f5f5; font-weight: bold; }
+              </style>
+              ${html}
+            </div>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      } else if (fileExt === "doc") {
+        // .doc 파일은 .docx로 변환 안내
+        const htmlContent = `
+          <div style="text-align: center; padding: 40px;">
+            <h3 style="color: #333; margin-bottom: 15px;">📄 ${fileName}</h3>
+            <p style="color: #666; margin-bottom: 10px;">.doc 파일은 .docx로 변환 후 업로드해주세요.</p>
+            <p style="color: #666; font-size: 14px;">(.docx 파일만 미리보기 지원)</p>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      } else if (["ppt", "pptx"].includes(fileExt)) {
+        // PowerPoint는 미리보기 불가 안내
+        const htmlContent = `
+          <div style="text-align: center; padding: 40px;">
+            <h3 style="color: #333; margin-bottom: 15px;">📑 ${fileName}</h3>
+            <p style="color: #666; margin-bottom: 10px;">PowerPoint 파일은 브라우저에서 미리보기할 수 없습니다.</p>
+            <p style="color: #666; font-size: 14px;">파일을 다운로드하여 확인해주세요.</p>
+          </div>
+        `;
+
+        setRenderedContent(htmlContent);
+        return true;
+      }
+
+      return false; // 지원하지 않는 형식
+    } catch (error) {
+      console.error("Office 문서 렌더링 오류:", error);
+
+      const htmlContent = `
+        <div style="color: red; text-align: center; padding: 20px;">
+          Office 문서를 읽을 수 없습니다.<br>
+          파일이 손상되었거나 지원하지 않는 형식일 수 있습니다.
+        </div>
+      `;
+
+      setRenderedContent(htmlContent);
+      return true; // 오류 메시지라도 표시
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 파일이 변경될 때마다 미리보기 URL 생성
+  useEffect(() => {
+    if (!file || !isOpen) {
+      setPreviewUrl(null);
+      setPreviewError(null);
+      setRenderedContent(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setPreviewError(null);
+
+    // 로컬 파일인 경우
+    if (file._file) {
+      const url = URL.createObjectURL(file._file);
+      setPreviewUrl(url);
+      setIsLoading(false);
+
+      return () => URL.revokeObjectURL(url);
+    }
+
+    let cleanup: (() => void) | undefined;
+
+    // 서버 파일인 경우 - 미리보기 API 호출
+    const generatePreviewUrl = async () => {
+      try {
+        const fileExt = file.fileExt.toLowerCase();
+
+        // 미리보기 지원 파일 타입 정의
+        const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
+        const documentExtensions = [
+          "pdf",
+          "doc",
+          "docx",
+          "xls",
+          "xlsx",
+          "ppt",
+          "pptx",
+          "rtf",
+          "odt",
+          "ods",
+          "odp",
+          "hwp",
+          "hwpx",
+          "hwpml",
+          "hcdt",
+          "hpt",
+          "pages",
+          "numbers",
+          "keynote",
+        ];
+        const textExtensions = ["txt", "md", "json", "xml", "csv"];
+        const mediaExtensions = ["mp4", "webm", "ogg", "mp3", "wav"];
+
+        const supportedExtensions = [...imageExtensions, ...documentExtensions, ...textExtensions, ...mediaExtensions];
+
+        if (supportedExtensions.includes(fileExt)) {
+          // 이미지나 PDF는 인증된 요청으로 Blob 생성
+          if (imageExtensions.includes(fileExt) || fileExt === "pdf") {
+            try {
+              // 인증된 요청으로 파일 데이터 가져오기
+              const response = await fetch(`${API_BASE_URL}/files/preview/${file.objid}`, {
+                headers: {
+                  Authorization: `Bearer ${localStorage.getItem("authToken")}`,
+                },
+              });
+
+              if (response.ok) {
+                const blob = await response.blob();
+                const blobUrl = URL.createObjectURL(blob);
+                setPreviewUrl(blobUrl);
+
+                // 컴포넌트 언마운트 시 URL 정리를 위해 cleanup 함수 저장
+                cleanup = () => URL.revokeObjectURL(blobUrl);
+              } else {
+                throw new Error(`HTTP ${response.status}`);
+              }
+            } catch (error) {
+              console.error("파일 미리보기 로드 실패:", error);
+              setPreviewError("파일을 불러올 수 없습니다. 권한을 확인해주세요.");
+            }
+          } else if (documentExtensions.includes(fileExt)) {
+            // Office 문서는 OnlyOffice 또는 안정적인 뷰어 사용
+            try {
+              const response = await fetch(`${API_BASE_URL}/files/preview/${file.objid}`, {
+                headers: {
+                  Authorization: `Bearer ${localStorage.getItem("authToken")}`,
+                },
+              });
+
+              if (response.ok) {
+                const blob = await response.blob();
+                const blobUrl = URL.createObjectURL(blob);
+
+                // Office 문서를 위한 특별한 처리 - CDN 라이브러리 사용
+                if (["doc", "docx", "xls", "xlsx", "ppt", "pptx"].includes(fileExt)) {
+                  // CDN 라이브러리로 클라이언트 사이드 렌더링 시도
+                  try {
+                    const renderSuccess = await renderOfficeDocument(blob, fileExt, file.realFileName);
+
+                    if (!renderSuccess) {
+                      // 렌더링 실패 시 Blob URL 사용
+                      setPreviewUrl(blobUrl);
+                    }
+                  } catch (error) {
+                    console.error("Office 문서 렌더링 중 오류:", error);
+                    // 오류 발생 시 Blob URL 사용
+                    setPreviewUrl(blobUrl);
+                  }
+                } else {
+                  // 기타 문서는 직접 Blob URL 사용
+                  setPreviewUrl(blobUrl);
+                }
+
+                return () => URL.revokeObjectURL(blobUrl); // Cleanup function
+              } else {
+                throw new Error(`HTTP ${response.status}`);
+              }
+            } catch (error) {
+              console.error("Office 문서 로드 실패:", error);
+              // 오류 발생 시 다운로드 옵션 제공
+              setPreviewError(`${fileExt.toUpperCase()} 문서를 미리보기할 수 없습니다. 다운로드하여 확인해주세요.`);
+            }
+          } else {
+            // 기타 파일은 다운로드 URL 사용
+            // 주의: 프로덕션 URL이 https://api.vexplor.com/api 이므로
+            // 끝의 /api만 제거해야 호스트명이 깨지지 않음
+            const url = `${API_BASE_URL.replace(/\/api$/, "")}/api/files/download/${file.objid}`;
+            setPreviewUrl(url);
+          }
+        } else {
+          // 지원하지 않는 파일 타입
+          setPreviewError(`${file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.`);
+        }
+      } catch (error) {
+        console.error("미리보기 URL 생성 오류:", error);
+        setPreviewError("미리보기를 불러오는데 실패했습니다.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    generatePreviewUrl();
+
+    // cleanup 함수 반환
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [file, isOpen]);
+
+  if (!file) return null;
+
+  // 파일 타입별 미리보기 컴포넌트
+  const renderPreview = () => {
+    if (isLoading) {
+      return (
+        <div className="flex h-96 items-center justify-center">
+          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+        </div>
+      );
+    }
+
+    if (previewError) {
+      return (
+        <div className="flex h-96 flex-col items-center justify-center">
+          <AlertTriangle className="mb-4 h-16 w-16 text-yellow-500" />
+          <p className="mb-2 text-lg font-medium">미리보기 불가</p>
+          <p className="text-center text-sm">{previewError}</p>
+          <Button variant="outline" onClick={() => onDownload?.(file)} className="mt-4">
+            <Download className="mr-2 h-4 w-4" />
+            파일 다운로드
+          </Button>
+        </div>
+      );
+    }
+
+    const fileExt = file.fileExt.toLowerCase();
+
+    // 이미지 파일
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(fileExt)) {
+      return (
+        <div className="flex max-h-96 items-center justify-center overflow-hidden">
+          <img
+            src={previewUrl || ""}
+            alt={file.realFileName}
+            className="max-h-full max-w-full rounded-lg object-contain shadow-lg"
+            onError={(e) => {
+              console.error("이미지 로드 오류:", previewUrl, e);
+              setPreviewError("이미지를 불러올 수 없습니다. 파일이 손상되었거나 서버에서 접근할 수 없습니다.");
+            }}
+            onLoad={() => {
+              console.log("이미지 로드 성공:", previewUrl);
+            }}
+          />
+        </div>
+      );
+    }
+
+    // 텍스트 파일
+    if (["txt", "md", "json", "xml", "csv"].includes(fileExt)) {
+      return (
+        <div className="h-96 overflow-auto">
+          <iframe
+            src={previewUrl || ""}
+            className="h-full w-full rounded-lg border"
+            onError={() => setPreviewError("텍스트 파일을 불러올 수 없습니다.")}
+          />
+        </div>
+      );
+    }
+
+    // PDF 파일 - 브라우저 기본 뷰어 사용
+    if (fileExt === "pdf") {
+      return (
+        <div className="h-[600px] overflow-auto rounded-lg border bg-gray-50">
+          <object
+            data={previewUrl || ""}
+            type="application/pdf"
+            className="h-full w-full rounded-lg"
+            title="PDF Viewer"
+          >
+            <iframe src={previewUrl || ""} className="h-full w-full rounded-lg" title="PDF Viewer Fallback">
+              <div className="flex h-full flex-col items-center justify-center p-8">
+                <FileText className="mb-4 h-16 w-16 text-gray-400" />
+                <p className="mb-2 text-lg font-medium">PDF를 표시할 수 없습니다</p>
+                <p className="mb-4 text-center text-sm text-gray-600">
+                  브라우저가 PDF 표시를 지원하지 않습니다. 다운로드하여 확인해주세요.
+                </p>
+                <Button variant="outline" onClick={() => onDownload?.(file)}>
+                  <Download className="mr-2 h-4 w-4" />
+                  PDF 다운로드
+                </Button>
+              </div>
+            </iframe>
+          </object>
+        </div>
+      );
+    }
+
+    // Office 문서 - 모든 Office 문서는 다운로드 권장
+    if (
+      [
+        "doc",
+        "docx",
+        "xls",
+        "xlsx",
+        "ppt",
+        "pptx",
+        "hwp",
+        "hwpx",
+        "hwpml",
+        "hcdt",
+        "hpt",
+        "pages",
+        "numbers",
+        "keynote",
+      ].includes(fileExt)
+    ) {
+      // Office 문서 안내 메시지 표시
+      return (
+        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
+          <FileText className="mb-6 h-20 w-20 text-blue-500" />
+          <h3 className="mb-2 text-xl font-semibold text-gray-800">Office 문서</h3>
+          <p className="mb-6 max-w-md text-center text-sm text-gray-600">
+            {fileExt === "docx" || fileExt === "doc"
+              ? "Word 문서"
+              : fileExt === "xlsx" || fileExt === "xls"
+                ? "Excel 문서"
+                : fileExt === "pptx" || fileExt === "ppt"
+                  ? "PowerPoint 문서"
+                  : "Office 문서"}
+            는 브라우저에서 미리보기가 지원되지 않습니다.
+            <br />
+            다운로드하여 확인해주세요.
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={() => onDownload?.(file)} size="lg" className="shadow-md">
+              <Download className="mr-2 h-5 w-5" />
+              다운로드하여 열기
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    // 비디오 파일
+    if (["mp4", "webm", "ogg"].includes(fileExt)) {
+      return (
+        <div className="flex items-center justify-center">
+          <video controls className="max-h-96 w-full" onError={() => setPreviewError("비디오를 재생할 수 없습니다.")}>
+            <source src={previewUrl || ""} type={`video/${fileExt}`} />
+          </video>
+        </div>
+      );
+    }
+
+    // 오디오 파일
+    if (["mp3", "wav", "ogg"].includes(fileExt)) {
+      return (
+        <div className="flex h-96 flex-col items-center justify-center">
+          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-gray-100">
+            <svg className="h-16 w-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+          <audio controls className="w-full max-w-md" onError={() => setPreviewError("오디오를 재생할 수 없습니다.")}>
+            <source src={previewUrl || ""} type={`audio/${fileExt}`} />
+          </audio>
+        </div>
+      );
+    }
+
+    // 기타 파일 타입
+    return (
+      <div className="flex h-96 flex-col items-center justify-center">
+        <FileText className="mb-4 h-16 w-16 text-gray-400" />
+        <p className="mb-2 text-lg font-medium">미리보기 불가</p>
+        <p className="mb-4 text-center text-sm">{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.</p>
+        <Button variant="outline" onClick={() => onDownload?.(file)}>
+          <Download className="mr-2 h-4 w-4" />
+          파일 다운로드
+        </Button>
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => {}}>
+      <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden [&>button]:hidden">
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <DialogTitle className="truncate text-lg font-semibold">{file.realFileName}</DialogTitle>
+              <Badge variant="secondary" className="text-xs">
+                {file.fileExt.toUpperCase()}
+              </Badge>
+            </div>
+          </div>
+          <DialogDescription>
+            파일 크기: {formatFileSize(file.fileSize || file.size || 0)} | 파일 형식: {file.fileExt.toUpperCase()}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden">{renderPreview()}</div>
+
+        {/* 파일 정보 및 액션 버튼 */}
+        <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+          <span>크기: {formatFileSize(file.fileSize || file.size || 0)}</span>
+          {(file.uploadedAt || file.regdate) && (
+            <span>업로드: {new Date(file.uploadedAt || file.regdate || "").toLocaleString()}</span>
+          )}
+        </div>
+
+        <div className="flex justify-end space-x-2 border-t pt-4">
+          <Button variant="outline" size="sm" onClick={() => onDownload?.(file)}>
+            <Download className="mr-2 h-4 w-4" />
+            다운로드
+          </Button>
+          {onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              onClick={() => onDelete(file)}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              삭제
+            </Button>
+          )}
+          <Button variant="outline" size="sm" onClick={onClose}>
+            <X className="mr-2 h-4 w-4" />
+            닫기
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/V2FileUploadRenderer.tsx b/frontend/lib/registry/components/v2-file-upload/V2FileUploadRenderer.tsx
new file mode 100644
index 00000000..5ca1df40
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/V2FileUploadRenderer.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2FileUploadDefinition } from "./index";
+import { FileUploadComponent } from "./FileUploadComponent";
+
+/**
+ * V2 FileUpload 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class V2FileUploadRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2FileUploadDefinition;
+
+  render(): React.ReactElement {
+    return <FileUploadComponent {...this.props} renderer={this} />;
+  }
+
+  /**
+   * 컴포넌트별 특화 메서드들
+   */
+  
+  // file 타입 특화 속성 처리
+  protected getFileUploadProps() {
+    const baseProps = this.getWebTypeProps();
+    
+    // file 타입에 특화된 추가 속성들
+    return {
+      ...baseProps,
+      // 여기에 file 타입 특화 속성들 추가
+    };
+  }
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+
+  // 포커스 처리
+  protected handleFocus = () => {
+    // 포커스 로직
+  };
+
+  // 블러 처리
+  protected handleBlur = () => {
+    // 블러 로직
+  };
+}
+
+// 자동 등록 실행
+V2FileUploadRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  V2FileUploadRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/v2-file-upload/config.ts b/frontend/lib/registry/components/v2-file-upload/config.ts
new file mode 100644
index 00000000..4d7c65e6
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/config.ts
@@ -0,0 +1,62 @@
+"use client";
+
+import { FileUploadConfig } from "./types";
+
+/**
+ * V2 FileUpload 컴포넌트 기본 설정
+ */
+export const V2FileUploadDefaultConfig: FileUploadConfig = {
+  placeholder: "파일을 선택하세요",
+  multiple: true,
+  accept: "*/*",
+  maxSize: 10 * 1024 * 1024, // 10MB
+  maxFiles: 10,
+  
+  // 공통 기본값
+  disabled: false,
+  required: false,
+  readonly: false,
+  variant: "default",
+  size: "md",
+  
+  // V2 추가 설정 기본값
+  showPreview: true,
+  showFileList: true,
+  showFileSize: true,
+  allowDelete: true,
+  allowDownload: true,
+};
+
+/**
+ * V2 FileUpload 컴포넌트 설정 스키마
+ * 유효성 검사 및 타입 체크에 사용
+ */
+export const V2FileUploadConfigSchema = {
+  placeholder: { type: "string", default: "파일을 선택하세요" },
+  multiple: { type: "boolean", default: true },
+  accept: { type: "string", default: "*/*" },
+  maxSize: { type: "number", default: 10 * 1024 * 1024 },
+  maxFiles: { type: "number", default: 10 },
+  
+  // 공통 스키마
+  disabled: { type: "boolean", default: false },
+  required: { type: "boolean", default: false },
+  readonly: { type: "boolean", default: false },
+  variant: { 
+    type: "enum", 
+    values: ["default", "outlined", "filled"], 
+    default: "default" 
+  },
+  size: { 
+    type: "enum", 
+    values: ["sm", "md", "lg"], 
+    default: "md" 
+  },
+  
+  // V2 추가 설정 스키마
+  showPreview: { type: "boolean", default: true },
+  showFileList: { type: "boolean", default: true },
+  showFileSize: { type: "boolean", default: true },
+  allowDelete: { type: "boolean", default: true },
+  allowDownload: { type: "boolean", default: true },
+};
diff --git a/frontend/lib/registry/components/v2-file-upload/index.ts b/frontend/lib/registry/components/v2-file-upload/index.ts
new file mode 100644
index 00000000..0bf109bb
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/index.ts
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { FileUploadComponent } from "./FileUploadComponent";
+import { FileUploadConfigPanel } from "./FileUploadConfigPanel";
+import { FileUploadConfig } from "./types";
+
+/**
+ * V2 FileUpload 컴포넌트 정의
+ * 화면관리 전용 V2 파일 업로드 컴포넌트입니다
+ */
+export const V2FileUploadDefinition = createComponentDefinition({
+  id: "v2-file-upload",
+  name: "파일 업로드",
+  nameEng: "V2 FileUpload Component",
+  description: "V2 파일 업로드를 위한 파일 선택 컴포넌트",
+  category: ComponentCategory.INPUT,
+  webType: "file",
+  component: FileUploadComponent,
+  defaultConfig: {
+    placeholder: "파일을 선택하세요",
+    multiple: true,
+    accept: "*/*",
+    maxSize: 10 * 1024 * 1024, // 10MB
+  },
+  defaultSize: { width: 350, height: 240 },
+  configPanel: FileUploadConfigPanel,
+  icon: "Upload",
+  tags: ["file", "upload", "attachment", "v2"],
+  version: "2.0.0",
+  author: "개발팀",
+  documentation: "https://docs.example.com/components/v2-file-upload",
+});
+
+// 타입 내보내기
+export type { FileUploadConfig, FileInfo, FileUploadProps, FileUploadStatus, FileUploadResponse } from "./types";
+
+// 컴포넌트 내보내기
+export { FileUploadComponent } from "./FileUploadComponent";
+export { V2FileUploadRenderer } from "./V2FileUploadRenderer";
+
+// 기본 export
+export default V2FileUploadDefinition;
diff --git a/frontend/lib/registry/components/v2-file-upload/types.ts b/frontend/lib/registry/components/v2-file-upload/types.ts
new file mode 100644
index 00000000..4625f7e0
--- /dev/null
+++ b/frontend/lib/registry/components/v2-file-upload/types.ts
@@ -0,0 +1,114 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+
+/**
+ * 파일 정보 인터페이스 (AttachedFileInfo와 호환)
+ */
+export interface FileInfo {
+  // AttachedFileInfo 기본 속성들
+  objid: string;
+  savedFileName: string;
+  realFileName: string;
+  fileSize: number;
+  fileExt: string;
+  filePath: string;
+  docType?: string;
+  docTypeName?: string;
+  targetObjid: string;
+  parentTargetObjid?: string;
+  companyCode?: string;
+  writer?: string;
+  regdate?: string;
+  status?: string;
+
+  // 추가 호환성 속성들
+  path?: string; // filePath와 동일
+  name?: string; // realFileName과 동일
+  id?: string; // objid와 동일
+  size?: number; // fileSize와 동일
+  type?: string; // docType과 동일
+  uploadedAt?: string; // regdate와 동일
+  _file?: File; // 로컬 파일 객체 (업로드 전)
+
+  // 대표 이미지 설정
+  isRepresentative?: boolean; // 대표 이미지로 설정 여부
+}
+
+/**
+ * V2 FileUpload 컴포넌트 설정 타입
+ */
+export interface FileUploadConfig extends ComponentConfig {
+  // file 관련 설정
+  placeholder?: string;
+  multiple?: boolean;
+  accept?: string;
+  maxSize?: number; // bytes
+  maxFiles?: number; // 최대 파일 수
+
+  // 공통 설정
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  helperText?: string;
+
+  // 스타일 관련
+  variant?: "default" | "outlined" | "filled";
+  size?: "sm" | "md" | "lg";
+
+  // V2 추가 설정
+  showPreview?: boolean; // 미리보기 표시 여부
+  showFileList?: boolean; // 파일 목록 표시 여부
+  showFileSize?: boolean; // 파일 크기 표시 여부
+  allowDelete?: boolean; // 삭제 허용 여부
+  allowDownload?: boolean; // 다운로드 허용 여부
+
+  // 이벤트 관련
+  onChange?: (value: any) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClick?: () => void;
+  onFileUpload?: (files: FileInfo[]) => void;
+  onFileDelete?: (fileId: string) => void;
+  onFileDownload?: (file: FileInfo) => void;
+}
+
+/**
+ * V2 FileUpload 컴포넌트 Props 타입
+ */
+export interface FileUploadProps {
+  id?: string;
+  name?: string;
+  value?: any;
+  config?: FileUploadConfig;
+  className?: string;
+  style?: React.CSSProperties;
+
+  // 파일 관련
+  uploadedFiles?: FileInfo[];
+
+  // 이벤트 핸들러
+  onChange?: (value: any) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClick?: () => void;
+  onFileUpload?: (files: FileInfo[]) => void;
+  onFileDelete?: (fileId: string) => void;
+  onFileDownload?: (file: FileInfo) => void;
+}
+
+/**
+ * 파일 업로드 상태 타입
+ */
+export type FileUploadStatus = "idle" | "uploading" | "success" | "error";
+
+/**
+ * 파일 업로드 응답 타입
+ */
+export interface FileUploadResponse {
+  success: boolean;
+  data?: FileInfo[];
+  files?: FileInfo[];
+  message?: string;
+  error?: string;
+}
diff --git a/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx b/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
new file mode 100644
index 00000000..eba973e4
--- /dev/null
+++ b/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2InputDefinition } from "./index";
+import { V2Input } from "@/components/v2/V2Input";
+
+/**
+ * V2Input 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class V2InputRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2InputDefinition;
+
+  render(): React.ReactElement {
+    const { component, formData, onFormDataChange, isDesignMode, isSelected, isInteractive, ...restProps } = this.props;
+
+    // 컴포넌트 설정 추출
+    const config = component.componentConfig || component.config || {};
+    const columnName = component.columnName;
+    const tableName = component.tableName || this.props.tableName;
+
+    // formData에서 현재 값 가져오기
+    const currentValue = formData?.[columnName] ?? component.value ?? "";
+
+    // 값 변경 핸들러
+    const handleChange = (value: any) => {
+      console.log("🔄 [V2InputRenderer] handleChange 호출:", {
+        columnName,
+        value,
+        isInteractive,
+        hasOnFormDataChange: !!onFormDataChange,
+      });
+      if (isInteractive && onFormDataChange && columnName) {
+        onFormDataChange(columnName, value);
+      } else {
+        console.warn("⚠️ [V2InputRenderer] onFormDataChange 호출 스킵:", {
+          isInteractive,
+          hasOnFormDataChange: !!onFormDataChange,
+          columnName,
+        });
+      }
+    };
+
+    // 라벨: style.labelText 우선, 없으면 component.label 사용
+    // 🔧 style.labelDisplay를 먼저 체크 (속성 패널에서 style 객체로 업데이트하므로)
+    const style = component.style || {};
+    const labelDisplay = style.labelDisplay ?? (component as any).labelDisplay;
+    // labelDisplay: true → 라벨 표시, false → 숨김, undefined → 기존 동작 유지(숨김)
+    const effectiveLabel = labelDisplay === true ? style.labelText || component.label : undefined;
+
+    return (
+      <V2Input
+        id={component.id}
+        label={effectiveLabel}
+        required={component.required}
+        readonly={config.readonly || component.readonly}
+        disabled={config.disabled || component.disabled}
+        value={currentValue}
+        onChange={handleChange}
+        onFormDataChange={onFormDataChange}
+        config={{
+          type: config.inputType || config.webType || "text",
+          inputType: config.inputType || config.webType || "text",
+          placeholder: config.placeholder,
+          format: config.format,
+          min: config.min,
+          max: config.max,
+          step: config.step,
+          rows: config.rows,
+          autoGeneration: config.autoGeneration || component.autoGeneration,
+        }}
+        style={component.style}
+        size={component.size}
+        formData={formData}
+        columnName={columnName}
+        tableName={tableName}
+        autoGeneration={config.autoGeneration || component.autoGeneration}
+        originalData={(this.props as any).originalData}
+        {...restProps}
+      />
+    );
+  }
+}
+
+// 자동 등록 실행
+V2InputRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  V2InputRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx b/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
new file mode 100644
index 00000000..f579ca1e
--- /dev/null
+++ b/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2MediaDefinition } from "./index";
+import FileUploadComponent from "../file-upload/FileUploadComponent";
+
+/**
+ * V2Media 렌더러
+ * 레거시 FileUploadComponent를 사용하여 안정적인 파일 업로드 기능 제공
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class V2MediaRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2MediaDefinition;
+
+  render(): React.ReactElement {
+    const { 
+      component, 
+      formData, 
+      onFormDataChange, 
+      isDesignMode, 
+      isSelected, 
+      isInteractive,
+      onUpdate,
+      ...restProps 
+    } = this.props;
+
+    // 컴포넌트 설정 추출
+    const config = component.componentConfig || component.config || {};
+    const columnName = component.columnName;
+    const tableName = component.tableName || this.props.tableName;
+
+    // 🔍 디버깅: 컴포넌트 정보 로깅
+    console.log("📸 [V2MediaRenderer] 컴포넌트 정보:", {
+      componentId: component.id,
+      columnName: columnName,
+      tableName: tableName,
+      formDataId: formData?.id,
+      formDataTableName: formData?.tableName,
+    });
+
+    // V1 file-upload에서 사용하는 형태로 설정 매핑
+    const mediaType = config.mediaType || config.type || this.getMediaTypeFromWebType(component.webType);
+    
+    // maxSize: MB → bytes 변환
+    const maxSizeBytes = config.maxSize 
+      ? (config.maxSize > 1000 ? config.maxSize : config.maxSize * 1024 * 1024)
+      : 10 * 1024 * 1024; // 기본 10MB
+
+    // 레거시 컴포넌트 설정 형태로 변환
+    const legacyComponentConfig = {
+      maxFileCount: config.multiple ? 10 : 1,
+      maxFileSize: maxSizeBytes,
+      accept: config.accept || this.getDefaultAccept(mediaType),
+      docType: config.docType || "DOCUMENT",
+      docTypeName: config.docTypeName || "일반 문서",
+      showFileList: config.showFileList ?? true,
+      dragDrop: config.dragDrop ?? true,
+    };
+
+    // 레거시 컴포넌트 형태로 변환
+    const legacyComponent = {
+      ...component,
+      id: component.id,
+      columnName: columnName,
+      tableName: tableName,
+      componentConfig: legacyComponentConfig,
+    };
+
+    // onFormDataChange 래퍼: FileUploadComponent는 (fieldName, value) 형태로 호출함
+    const handleFormDataChange = (fieldName: string, value: any) => {
+      if (onFormDataChange) {
+        // 메타 데이터(__로 시작하는 키)는 건너뛰기
+        if (!fieldName.startsWith("__")) {
+          console.log("📸 [V2MediaRenderer] formData 업데이트:", { fieldName, value });
+          onFormDataChange(fieldName, value);
+        }
+      }
+    };
+
+    return (
+      <FileUploadComponent
+        component={legacyComponent}
+        componentConfig={legacyComponentConfig}
+        componentStyle={component.style || {}}
+        className=""
+        isInteractive={isInteractive ?? true}
+        isDesignMode={isDesignMode ?? false}
+        formData={formData || {}}
+        onFormDataChange={handleFormDataChange}
+        onUpdate={onUpdate}
+      />
+    );
+  }
+
+  /**
+   * webType에서 미디어 타입 추출
+   */
+  private getMediaTypeFromWebType(webType?: string): "file" | "image" | "video" | "audio" {
+    switch (webType) {
+      case "image":
+        return "image";
+      case "video":
+        return "video";
+      case "audio":
+        return "audio";
+      case "file":
+      default:
+        return "file";
+    }
+  }
+
+  /**
+   * 미디어 타입에 따른 기본 accept 값
+   */
+  private getDefaultAccept(mediaType: string): string {
+    switch (mediaType) {
+      case "image":
+        return "image/*";
+      case "video":
+        return "video/*";
+      case "audio":
+        return "audio/*";
+      default:
+        return "*/*";
+    }
+  }
+}
+
+// 자동 등록 실행
+V2MediaRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  V2MediaRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
index b129a67c..f4f035cb 100644
--- a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
+++ b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
@@ -8,6 +8,9 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import DynamicComponentRenderer from "@/lib/registry/DynamicComponentRenderer";
 
+// V2 이벤트 시스템
+import { V2_EVENTS, subscribeV2Event, type TableListDataChangeDetail, type RepeaterDataChangeDetail } from "@/types/component-events";
+
 interface RepeatContainerComponentProps extends ComponentRendererProps {
   config?: RepeatContainerConfig;
   // 외부에서 데이터를 직접 전달받을 수 있음
@@ -254,7 +257,10 @@ export function RepeatContainerComponent({
     };
   }, [isDesignMode, component?.id, effectiveTableName, data]);
 
-  // 컴포넌트 데이터 변경 이벤트 리스닝 (componentId 또는 tableName으로 매칭)
+  // ============================================================
+  // 컴포넌트 데이터 변경 이벤트 리스닝 (V2 표준 이벤트)
+  // componentId 또는 tableName으로 매칭
+  // ============================================================
   useEffect(() => {
     if (isDesignMode) return;
 
@@ -265,19 +271,12 @@ export function RepeatContainerComponent({
       effectiveTableName,
     });
 
-    // dataSourceComponentId가 없어도 테이블명으로 매칭 가능
-    const handleDataChange = (event: CustomEvent) => {
-      const { componentId, tableName: eventTableName, data: eventData } = event.detail || {};
-      
-      console.log("📩 리피터 컨테이너 이벤트 수신:", {
-        eventType: event.type,
-        fromComponentId: componentId,
-        fromTableName: eventTableName,
-        dataCount: Array.isArray(eventData) ? eventData.length : 0,
-        myDataSourceComponentId: dataSourceComponentId,
-        myEffectiveTableName: effectiveTableName,
-      });
-
+    // 공통 데이터 처리 함수
+    const processIncomingData = (
+      componentId: string | undefined,
+      eventTableName: string | undefined,
+      eventData: any[]
+    ) => {
       // 1. 명시적으로 dataSourceComponentId가 설정된 경우 해당 컴포넌트만 매칭
       if (dataSourceComponentId) {
         if (componentId === dataSourceComponentId && Array.isArray(eventData)) {
@@ -287,8 +286,6 @@ export function RepeatContainerComponent({
           setSelectedIndices([]);
           // 데이터 변경 시 섹션별 폼 데이터 초기화
           sectionFormDataRef.current.clear();
-        } else {
-          console.log("⚠️ 리피터: 컴포넌트 ID 불일치로 무시", { expected: dataSourceComponentId, received: componentId });
         }
         return;
       }
@@ -301,17 +298,28 @@ export function RepeatContainerComponent({
         setSelectedIndices([]);
         // 데이터 변경 시 섹션별 폼 데이터 초기화
         sectionFormDataRef.current.clear();
-      } else if (effectiveTableName) {
-        console.log("⚠️ 리피터: 테이블명 불일치로 무시", { expected: effectiveTableName, received: eventTableName });
       }
     };
 
-    window.addEventListener("repeaterDataChange" as any, handleDataChange);
-    window.addEventListener("tableListDataChange" as any, handleDataChange);
+    // 테이블 리스트 데이터 변경 이벤트 (V2 표준)
+    const handleTableListDataChange = (event: CustomEvent<TableListDataChangeDetail>) => {
+      const { componentId, tableName: eventTableName, data: eventData } = event.detail || {};
+      processIncomingData(componentId, eventTableName, eventData);
+    };
+
+    // 리피터 데이터 변경 이벤트 (V2 표준)
+    const handleRepeaterDataChange = (event: CustomEvent<RepeaterDataChangeDetail>) => {
+      const { componentId, tableName: eventTableName, data: eventData } = event.detail || {};
+      processIncomingData(componentId, eventTableName, eventData);
+    };
+
+    // V2 표준 이벤트 구독
+    const unsubscribeTableList = subscribeV2Event(V2_EVENTS.TABLE_LIST_DATA_CHANGE, handleTableListDataChange);
+    const unsubscribeRepeater = subscribeV2Event(V2_EVENTS.REPEATER_DATA_CHANGE, handleRepeaterDataChange);
 
     return () => {
-      window.removeEventListener("repeaterDataChange" as any, handleDataChange);
-      window.removeEventListener("tableListDataChange" as any, handleDataChange);
+      unsubscribeTableList();
+      unsubscribeRepeater();
     };
   }, [component?.id, dataSourceType, dataSourceComponentId, effectiveTableName, isDesignMode]);
 
diff --git a/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx b/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
new file mode 100644
index 00000000..be5a6c84
--- /dev/null
+++ b/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2SelectDefinition } from "./index";
+import { V2Select } from "@/components/v2/V2Select";
+
+/**
+ * V2Select 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2SelectDefinition;
+
+  render(): React.ReactElement {
+    const { component, formData, onFormDataChange, isDesignMode, isSelected, isInteractive, ...restProps } = this.props;
+
+    // 컴포넌트 설정 추출
+    const config = component.componentConfig || component.config || {};
+    const columnName = component.columnName;
+    const tableName = component.tableName || this.props.tableName;
+
+    // 🔧 카테고리 타입 감지 (inputType 또는 webType이 category인 경우)
+    const inputType = component.componentConfig?.inputType || component.inputType;
+    const webType = component.componentConfig?.webType || component.webType;
+    const isCategoryType = inputType === "category" || webType === "category";
+
+    // formData에서 현재 값 가져오기 (기본값 지원)
+    const defaultValue = config.defaultValue || "";
+    // 🔧 tagbox, check, tag, swap 모드는 본질적으로 다중 선택
+    const multiSelectModes = ["tagbox", "check", "checkbox", "tag", "swap"];
+    const isMultiple = config.multiple || multiSelectModes.includes(config.mode);
+    let currentValue = formData?.[columnName] ?? component.value ?? "";
+
+    // 🔧 다중 선택 시 값 정규화 (잘못된 형식 필터링)
+    if (isMultiple) {
+      // 헬퍼: 유효한 값인지 체크 (중괄호, 따옴표, 백슬래시 없어야 함)
+      // 숫자도 유효한 값으로 처리
+      const isValidValue = (v: any): boolean => {
+        // 숫자면 유효
+        if (typeof v === "number" && !isNaN(v)) return true;
+        if (typeof v !== "string") return false;
+        if (!v || v.trim() === "") return false;
+        if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
+        return true;
+      };
+
+      if (typeof currentValue === "string" && currentValue) {
+        // 🔧 PostgreSQL 배열 형식 또는 중첩된 잘못된 형식 감지
+        if (currentValue.startsWith("{") || currentValue.includes('{"') || currentValue.includes('\\"')) {
+          currentValue = [];
+        } else if (currentValue.includes(",")) {
+          // 쉼표 구분 문자열 파싱 후 유효한 값만 필터링
+          currentValue = currentValue
+            .split(",")
+            .map((v) => v.trim())
+            .filter(isValidValue);
+        } else if (isValidValue(currentValue)) {
+          currentValue = [currentValue];
+        } else {
+          currentValue = [];
+        }
+      } else if (Array.isArray(currentValue)) {
+        // 🔧 배열일 때도 잘못된 값 필터링 + 숫자→문자열 변환!
+        const filtered = currentValue.map((v) => (typeof v === "number" ? String(v) : v)).filter(isValidValue);
+        currentValue = filtered;
+      } else {
+        currentValue = [];
+      }
+    }
+
+    // 🆕 formData에 값이 없고 기본값이 설정된 경우, 기본값 적용
+    if (
+      (currentValue === "" || currentValue === undefined || currentValue === null) &&
+      defaultValue &&
+      isInteractive &&
+      onFormDataChange &&
+      columnName
+    ) {
+      // 초기 렌더링 시 기본값을 formData에 설정
+      setTimeout(() => {
+        if (!formData?.[columnName]) {
+          onFormDataChange(columnName, defaultValue);
+        }
+      }, 0);
+      currentValue = defaultValue;
+    }
+
+    // 값 변경 핸들러 (배열 → 쉼표 구분 문자열로 변환하여 저장)
+    const handleChange = (value: any) => {
+      if (isInteractive && onFormDataChange && columnName) {
+        // 🔧 배열이면 무조건 쉼표 구분 문자열로 변환 (PostgreSQL 배열 형식 방지)
+        if (Array.isArray(value)) {
+          const stringValue = value.map((v) => (typeof v === "number" ? String(v) : v)).join(",");
+          onFormDataChange(columnName, stringValue);
+        } else {
+          onFormDataChange(columnName, value);
+        }
+      }
+    };
+
+    // 🔧 DynamicComponentRenderer에서 전달한 style/size를 우선 사용 (height 포함)
+    // restProps.style에 mergedStyle(height 변환됨)이 있고, restProps.size에도 size가 있음
+    const effectiveStyle = restProps.style || component.style;
+    const effectiveSize = restProps.size || component.size;
+
+    // 디버깅 필요시 주석 해제
+    // console.log("🔍 [V2SelectRenderer]", { componentId: component.id, effectiveStyle, effectiveSize });
+
+    // 🔧 restProps에서 style, size 제외 (effectiveStyle/effectiveSize가 우선되어야 함)
+    const { style: _style, size: _size, ...restPropsClean } = restProps as any;
+
+    return (
+      <V2Select
+        id={component.id}
+        label={component.label}
+        required={component.required}
+        readonly={config.readonly || component.readonly}
+        disabled={config.disabled || component.disabled}
+        value={currentValue}
+        onChange={handleChange}
+        config={{
+          mode: config.mode || "dropdown",
+          // 🔧 카테고리 타입이면 source를 "category"로 설정
+          source: config.source || (isCategoryType ? "category" : "distinct"),
+          multiple: config.multiple || false,
+          searchable: config.searchable ?? true,
+          placeholder: config.placeholder || "선택하세요",
+          options: config.options || [],
+          codeGroup: config.codeGroup,
+          entityTable: config.entityTable,
+          entityLabelColumn: config.entityLabelColumn,
+          entityValueColumn: config.entityValueColumn,
+          // 🔧 카테고리 소스 지원 (tableName, columnName 폴백)
+          categoryTable: config.categoryTable || (isCategoryType ? tableName : undefined),
+          categoryColumn: config.categoryColumn || (isCategoryType ? columnName : undefined),
+        }}
+        tableName={tableName}
+        columnName={columnName}
+        formData={formData}
+        isDesignMode={isDesignMode}
+        {...restPropsClean}
+        style={effectiveStyle}
+        size={effectiveSize}
+      />
+    );
+  }
+}
+
+// 자동 등록 실행
+V2SelectRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  V2SelectRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/v2-select/index.ts b/frontend/lib/registry/components/v2-select/index.ts
index 3f73b2ac..bf866a15 100644
--- a/frontend/lib/registry/components/v2-select/index.ts
+++ b/frontend/lib/registry/components/v2-select/index.ts
@@ -41,7 +41,11 @@ export const V2SelectDefinition = createComponentDefinition({
         { value: "dropdown", label: "드롭다운" },
         { value: "combobox", label: "콤보박스 (검색)" },
         { value: "radio", label: "라디오 버튼" },
-        { value: "checkbox", label: "체크박스" },
+        { value: "check", label: "체크박스" },
+        { value: "tag", label: "태그" },
+        { value: "tagbox", label: "태그박스 (태그+드롭다운)" },
+        { value: "toggle", label: "토글" },
+        { value: "swap", label: "스왑 (좌우 이동)" },
       ],
     },
     source: {
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 725f6bc0..3d9cd552 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -18,6 +18,8 @@ import {
   ChevronRight,
   Pencil,
   Trash2,
+  Settings,
+  Move,
 } from "lucide-react";
 import { dataApi } from "@/lib/api/data";
 import { entityJoinApi } from "@/lib/api/entityJoin";
@@ -37,9 +39,16 @@ import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { TableFilter, ColumnVisibility, GroupSumConfig } from "@/types/table-options";
 import { useAuth } from "@/hooks/useAuth";
 import { useSplitPanel } from "./SplitPanelContext";
+import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { PanelInlineComponent } from "./types";
+import { cn } from "@/lib/utils";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
   // 추가 props
+  onUpdateComponent?: (component: any) => void;
+  // 🆕 패널 내부 컴포넌트 선택 콜백 (탭 컴포넌트와 동일 구조)
+  onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: PanelInlineComponent) => void;
+  selectedPanelComponentId?: string;
 }
 
 /**
@@ -52,9 +61,26 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   isSelected = false,
   isPreview = false,
   onClick,
+  onUpdateComponent,
+  onSelectPanelComponent,
+  selectedPanelComponentId: externalSelectedPanelComponentId,
   ...props
 }) => {
   const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;
+  
+  // 🐛 디버깅: 로드 시 rightPanel.components 확인
+  const rightComps = componentConfig.rightPanel?.components || [];
+  const finishedTimeline = rightComps.find((c: any) => c.id === "finished_timeline");
+  if (finishedTimeline) {
+    const fm = finishedTimeline.componentConfig?.fieldMapping;
+    console.log("🔍 [SplitPanelLayout] finished_timeline fieldMapping:", {
+      componentId: finishedTimeline.id,
+      fieldMapping: fm ? JSON.stringify(fm) : "undefined",
+      fieldMappingKeys: fm ? Object.keys(fm) : [],
+      fieldMappingId: fm?.id,
+      fullComponentConfig: JSON.stringify(finishedTimeline.componentConfig || {}, null, 2),
+    });
+  }
   // 🆕 프리뷰용 회사 코드 오버라이드 (최고 관리자만 사용 가능)
   const companyCode = (props as any).companyCode as string | undefined;
 
@@ -181,6 +207,234 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightCategoryMappings, setRightCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({}); // 우측 카테고리 매핑
+
+  // 🆕 커스텀 모드: 드래그/리사이즈 상태
+  const [draggingCompId, setDraggingCompId] = useState<string | null>(null);
+  const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null);
+  const [resizingCompId, setResizingCompId] = useState<string | null>(null);
+  const [resizeSize, setResizeSize] = useState<{ width: number; height: number } | null>(null);
+  // 🆕 외부에서 전달받은 선택 상태 사용 (탭 컴포넌트와 동일 구조)
+  const selectedPanelComponentId = externalSelectedPanelComponentId || null;
+  const rafRef = useRef<number | null>(null);
+
+  // 🆕 10px 단위 스냅 함수
+  const snapTo10 = useCallback((value: number) => Math.round(value / 10) * 10, []);
+
+  // 🆕 커스텀 모드: 컴포넌트 삭제 핸들러
+  const handleRemovePanelComponent = useCallback(
+    (panelSide: "left" | "right", compId: string) => {
+      if (!onUpdateComponent) return;
+      
+      const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+      const panelConfig = componentConfig[panelKey] || {};
+      const updatedComponents = (panelConfig.components || []).filter(
+        (c: PanelInlineComponent) => c.id !== compId
+      );
+      
+      onUpdateComponent({
+        ...component,
+        componentConfig: {
+          ...componentConfig,
+          [panelKey]: {
+            ...panelConfig,
+            components: updatedComponents,
+          },
+        },
+      });
+    },
+    [component, componentConfig, onUpdateComponent]
+  );
+
+  // 🆕 중첩된 컴포넌트 업데이트 핸들러 (탭 컴포넌트 내부 위치 변경 등)
+  const handleNestedComponentUpdate = useCallback(
+    (panelSide: "left" | "right", compId: string, updatedNestedComponent: any) => {
+      if (!onUpdateComponent) return;
+      
+      const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+      const panelConfig = componentConfig[panelKey] || {};
+      const panelComponents = panelConfig.components || [];
+      
+      const updatedComponents = panelComponents.map((c: PanelInlineComponent) =>
+        c.id === compId ? { ...c, ...updatedNestedComponent, id: c.id } : c
+      );
+      
+      onUpdateComponent({
+        ...component,
+        componentConfig: {
+          ...componentConfig,
+          [panelKey]: {
+            ...panelConfig,
+            components: updatedComponents,
+          },
+        },
+      });
+    },
+    [component, componentConfig, onUpdateComponent]
+  );
+
+  // 🆕 커스텀 모드: 드래그 시작 핸들러
+  const handlePanelDragStart = useCallback(
+    (e: React.MouseEvent, panelSide: "left" | "right", comp: PanelInlineComponent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      
+      const startMouseX = e.clientX;
+      const startMouseY = e.clientY;
+      const startLeft = comp.position?.x || 0;
+      const startTop = comp.position?.y || 0;
+      
+      setDraggingCompId(comp.id);
+      setDragPosition({ x: startLeft, y: startTop });
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+        }
+        
+        rafRef.current = requestAnimationFrame(() => {
+          const deltaX = moveEvent.clientX - startMouseX;
+          const deltaY = moveEvent.clientY - startMouseY;
+          const newX = Math.max(0, startLeft + deltaX);
+          const newY = Math.max(0, startTop + deltaY);
+          setDragPosition({ x: newX, y: newY });
+        });
+      };
+
+      const handleMouseUp = (upEvent: MouseEvent) => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+        
+        const deltaX = upEvent.clientX - startMouseX;
+        const deltaY = upEvent.clientY - startMouseY;
+        const newX = Math.max(0, startLeft + deltaX);
+        const newY = Math.max(0, startTop + deltaY);
+        
+        setDraggingCompId(null);
+        setDragPosition(null);
+
+        if (onUpdateComponent) {
+          const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+          const panelConfig = componentConfig[panelKey] || {};
+          const updatedComponents = (panelConfig.components || []).map((c: PanelInlineComponent) =>
+            c.id === comp.id
+              ? { ...c, position: { x: Math.round(newX), y: Math.round(newY) } }
+              : c
+          );
+          
+          onUpdateComponent({
+            ...component,
+            componentConfig: {
+              ...componentConfig,
+              [panelKey]: {
+                ...panelConfig,
+                components: updatedComponents,
+              },
+            },
+          });
+        }
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [component, componentConfig, onUpdateComponent]
+  );
+
+  // 🆕 커스텀 모드: 리사이즈 시작 핸들러
+  const handlePanelResizeStart = useCallback(
+    (e: React.MouseEvent, panelSide: "left" | "right", comp: PanelInlineComponent, direction: "e" | "s" | "se") => {
+      e.stopPropagation();
+      e.preventDefault();
+      
+      const startMouseX = e.clientX;
+      const startMouseY = e.clientY;
+      const startWidth = comp.size?.width || 200;
+      const startHeight = comp.size?.height || 100;
+      
+      setResizingCompId(comp.id);
+      setResizeSize({ width: startWidth, height: startHeight });
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+        }
+        
+        rafRef.current = requestAnimationFrame(() => {
+          const deltaX = moveEvent.clientX - startMouseX;
+          const deltaY = moveEvent.clientY - startMouseY;
+          
+          let newWidth = startWidth;
+          let newHeight = startHeight;
+          
+          if (direction === "e" || direction === "se") {
+            newWidth = snapTo10(Math.max(50, startWidth + deltaX));
+          }
+          if (direction === "s" || direction === "se") {
+            newHeight = snapTo10(Math.max(30, startHeight + deltaY));
+          }
+          
+          setResizeSize({ width: newWidth, height: newHeight });
+        });
+      };
+
+      const handleMouseUp = (upEvent: MouseEvent) => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+        
+        const deltaX = upEvent.clientX - startMouseX;
+        const deltaY = upEvent.clientY - startMouseY;
+        
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        
+        if (direction === "e" || direction === "se") {
+          newWidth = snapTo10(Math.max(50, startWidth + deltaX));
+        }
+        if (direction === "s" || direction === "se") {
+          newHeight = snapTo10(Math.max(30, startHeight + deltaY));
+        }
+        
+        setResizingCompId(null);
+        setResizeSize(null);
+
+        if (onUpdateComponent) {
+          const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+          const panelConfig = componentConfig[panelKey] || {};
+          const updatedComponents = (panelConfig.components || []).map((c: PanelInlineComponent) =>
+            c.id === comp.id
+              ? { ...c, size: { width: newWidth, height: newHeight } }
+              : c
+          );
+          
+          onUpdateComponent({
+            ...component,
+            componentConfig: {
+              ...componentConfig,
+              [panelKey]: {
+                ...panelConfig,
+                components: updatedComponents,
+              },
+            },
+          });
+        }
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [component, componentConfig, onUpdateComponent, snapTo10]
+  );
+
   const { toast } = useToast();
 
   // 추가 모달 상태
@@ -1422,7 +1676,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           // 커스텀 모달 화면 열기
           const rightTableName = componentConfig.rightPanel?.tableName || "";
 
-          // Primary Key 찾기 (우선순위: id > ID > 첫 번째 필드)
+          // Primary Key 찾기 (우선순위: id > ID > user_id > {table}_id > 첫 번째 필드)
           let primaryKeyName = "id";
           let primaryKeyValue: any;
 
@@ -1432,11 +1686,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
           } else if (item.ID !== undefined && item.ID !== null) {
             primaryKeyName = "ID";
             primaryKeyValue = item.ID;
+          } else if (item.user_id !== undefined && item.user_id !== null) {
+            // user_info 테이블 등 user_id를 Primary Key로 사용하는 경우
+            primaryKeyName = "user_id";
+            primaryKeyValue = item.user_id;
           } else {
-            // 첫 번째 필드를 Primary Key로 간주
-            const firstKey = Object.keys(item)[0];
-            primaryKeyName = firstKey;
-            primaryKeyValue = item[firstKey];
+            // 테이블명_id 패턴 확인 (예: dept_id, item_id 등)
+            const tableIdKey = rightTableName ? `${rightTableName.replace(/_info$/, "")}_id` : "";
+            if (tableIdKey && item[tableIdKey] !== undefined && item[tableIdKey] !== null) {
+              primaryKeyName = tableIdKey;
+              primaryKeyValue = item[tableIdKey];
+            } else {
+              // 마지막으로 첫 번째 필드를 Primary Key로 간주
+              const firstKey = Object.keys(item)[0];
+              primaryKeyName = firstKey;
+              primaryKeyValue = item[firstKey];
+            }
           }
 
           console.log("✅ 수정 모달 열기:", {
@@ -2079,8 +2344,223 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
           )}
           <CardContent className="flex-1 overflow-auto p-4">
-            {/* 좌측 데이터 목록/테이블 */}
-            {componentConfig.leftPanel?.displayMode === "table" ? (
+            {/* 좌측 데이터 목록/테이블/커스텀 */}
+            {console.log("🔍 [SplitPanel] 왼쪽 패널 displayMode:", componentConfig.leftPanel?.displayMode, "isDesignMode:", isDesignMode)}
+            {componentConfig.leftPanel?.displayMode === "custom" ? (
+              // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치
+              <div 
+                className="relative h-full w-full"
+                data-split-panel-container="true"
+                data-component-id={component.id}
+                data-panel-side="left"
+              >
+                {/* 🆕 커스텀 모드: 디자인/실행 모드 통합 렌더링 */}
+                {componentConfig.leftPanel?.components && componentConfig.leftPanel.components.length > 0 ? (
+                  <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
+                    {componentConfig.leftPanel.components.map((comp: PanelInlineComponent) => {
+                      const isSelectedComp = selectedPanelComponentId === comp.id;
+                      const isDraggingComp = draggingCompId === comp.id;
+                      const isResizingComp = resizingCompId === comp.id;
+                      
+                      // 드래그/리사이즈 중 표시할 크기/위치
+                      const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
+                      const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
+                      const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
+                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
+                      
+                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                      const componentData = {
+                        id: comp.id,
+                        type: "component" as const,
+                        componentType: comp.componentType,
+                        label: comp.label,
+                        position: comp.position || { x: 0, y: 0 },
+                        size: { width: displayWidth, height: displayHeight },
+                        componentConfig: comp.componentConfig || {},
+                        style: comp.style || {},
+                      };
+
+                      if (isDesignMode) {
+                        // 디자인 모드: 탭 컴포넌트와 동일하게 실제 컴포넌트 렌더링
+                        return (
+                          <div
+                            key={comp.id}
+                            data-panel-comp-id={comp.id}
+                            className="absolute"
+                            style={{
+                              left: displayX,
+                              top: displayY,
+                              zIndex: isDraggingComp ? 100 : isSelectedComp ? 10 : 1,
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSelectPanelComponent?.("left", comp.id, comp);
+                            }}
+                          >
+                            {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
+                            <div
+                              className={cn(
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
+                                isSelectedComp ? "border-primary" : "border-gray-200"
+                              )}
+                              style={{ width: displayWidth }}
+                              onMouseDown={(e) => handlePanelDragStart(e, "left", comp)}
+                            >
+                              <div className="flex items-center gap-0.5">
+                                <Move className="h-2.5 w-2.5 text-gray-400" />
+                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                  {comp.label || comp.componentType}
+                                </span>
+                              </div>
+                              <div className="flex items-center">
+                                <button
+                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSelectPanelComponent?.("left", comp.id, comp);
+                                  }}
+                                  title="설정"
+                                >
+                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                </button>
+                                <button
+                                  className="rounded p-0.5 hover:bg-red-100"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleRemovePanelComponent("left", comp.id);
+                                  }}
+                                  title="삭제"
+                                >
+                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                </button>
+                              </div>
+                            </div>
+
+                            {/* 실제 컴포넌트 렌더링 - 핸들 아래에 별도 영역 */}
+                            <div 
+                              className={cn(
+                                "relative overflow-hidden rounded-b border bg-white shadow-sm",
+                                isSelectedComp
+                                  ? "border-primary ring-2 ring-primary/30"
+                                  : "border-gray-200",
+                                (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
+                                !(isDraggingComp || isResizingComp) && "transition-all"
+                              )}
+                              style={{
+                                width: displayWidth,
+                                height: displayHeight,
+                              }}
+                            >
+                              {/* 🆕 컨테이너 컴포넌트(탭, 분할 패널)는 드롭 이벤트를 받을 수 있어야 함 */}
+                              <div className={cn(
+                                "h-full w-full",
+                                // 탭/분할 패널 같은 컨테이너 컴포넌트는 pointer-events 활성화
+                                (comp.componentType === "v2-tabs-widget" || 
+                                 comp.componentType === "tabs-widget" ||
+                                 comp.componentType === "v2-split-panel-layout" ||
+                                 comp.componentType === "split-panel-layout")
+                                  ? "" 
+                                  : "pointer-events-none"
+                              )}>
+                                <DynamicComponentRenderer
+                                  component={componentData as any}
+                                  isDesignMode={true}
+                                  formData={{}}
+                                  // 🆕 중첩된 컴포넌트 업데이트 핸들러 전달
+                                  onUpdateComponent={(updatedComp: any) => {
+                                    handleNestedComponentUpdate("left", comp.id, updatedComp);
+                                  }}
+                                  // 🆕 중첩된 탭 내부 컴포넌트 선택 핸들러 - 부모 분할 패널 정보 포함
+                                  onSelectTabComponent={(tabId: string, compId: string, tabComp: any) => {
+                                    console.log("🔍 [SplitPanel-Left] onSelectTabComponent 호출:", { tabId, compId, tabComp, parentSplitPanelId: component.id });
+                                    // 부모 분할 패널 정보와 함께 전역 이벤트 발생
+                                    const event = new CustomEvent("nested-tab-component-select", {
+                                      detail: {
+                                        tabsComponentId: comp.id,
+                                        tabId,
+                                        componentId: compId,
+                                        component: tabComp,
+                                        parentSplitPanelId: component.id,
+                                        parentPanelSide: "left",
+                                      },
+                                    });
+                                    window.dispatchEvent(event);
+                                  }}
+                                  selectedTabComponentId={undefined}
+                                />
+                              </div>
+                              
+                              {/* 리사이즈 가장자리 영역 - 선택된 컴포넌트에만 표시 */}
+                              {isSelectedComp && (
+                                <>
+                                  {/* 오른쪽 가장자리 (너비 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute right-0 top-0 z-10 h-full w-2 cursor-ew-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "left", comp, "e")}
+                                  />
+                                  {/* 아래 가장자리 (높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 left-0 z-10 h-2 w-full cursor-ns-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "left", comp, "s")}
+                                  />
+                                  {/* 오른쪽 아래 모서리 (너비+높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 right-0 z-20 h-3 w-3 cursor-nwse-resize hover:bg-primary/20"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "left", comp, "se")}
+                                  />
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      } else {
+                        // 실행 모드: DynamicComponentRenderer로 렌더링
+                        const componentData = {
+                          id: comp.id,
+                          type: "component" as const,
+                          componentType: comp.componentType,
+                          label: comp.label,
+                          position: comp.position || { x: 0, y: 0 },
+                          size: comp.size || { width: 400, height: 300 },
+                          componentConfig: comp.componentConfig || {},
+                          style: comp.style || {},
+                        };
+                        
+                        return (
+                          <div
+                            key={comp.id}
+                            className="absolute"
+                            style={{
+                              left: comp.position?.x || 0,
+                              top: comp.position?.y || 0,
+                              width: comp.size?.width || 400,
+                              height: comp.size?.height || 300,
+                            }}
+                          >
+                            <DynamicComponentRenderer
+                              component={componentData as any}
+                              isDesignMode={false}
+                              formData={{}}
+                            />
+                          </div>
+                        );
+                      }
+                    })}
+                  </div>
+                ) : (
+                  // 컴포넌트가 없을 때 드롭 영역 표시
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
+                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-500">
+                      커스텀 모드
+                    </p>
+                    <p className="mt-1 text-xs text-gray-400">
+                      {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
+                    </p>
+                  </div>
+                )}
+              </div>
+            ) : componentConfig.leftPanel?.displayMode === "table" ? (
               // 테이블 모드
               <div className="w-full">
                 {isDesignMode ? (
@@ -2577,8 +3057,211 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
             </div>
           )}
           <CardContent className="flex-1 overflow-auto p-4">
-            {/* 우측 데이터 */}
-            {isLoadingRight ? (
+            {/* 우측 데이터/커스텀 */}
+            {componentConfig.rightPanel?.displayMode === "custom" ? (
+              // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치
+              <div 
+                className="relative h-full w-full"
+                data-split-panel-container="true"
+                data-component-id={component.id}
+                data-panel-side="right"
+              >
+                {/* 🆕 커스텀 모드: 디자인/실행 모드 통합 렌더링 */}
+                {componentConfig.rightPanel?.components && componentConfig.rightPanel.components.length > 0 ? (
+                  <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
+                    {componentConfig.rightPanel.components.map((comp: PanelInlineComponent) => {
+                      const isSelectedComp = selectedPanelComponentId === comp.id;
+                      const isDraggingComp = draggingCompId === comp.id;
+                      const isResizingComp = resizingCompId === comp.id;
+                      
+                      // 드래그/리사이즈 중 표시할 크기/위치
+                      const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
+                      const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
+                      const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
+                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
+                      
+                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                      const componentData = {
+                        id: comp.id,
+                        type: "component" as const,
+                        componentType: comp.componentType,
+                        label: comp.label,
+                        position: comp.position || { x: 0, y: 0 },
+                        size: { width: displayWidth, height: displayHeight },
+                        componentConfig: comp.componentConfig || {},
+                        style: comp.style || {},
+                      };
+
+                      if (isDesignMode) {
+                        // 디자인 모드: 탭 컴포넌트와 동일하게 실제 컴포넌트 렌더링
+                        return (
+                          <div
+                            key={comp.id}
+                            data-panel-comp-id={comp.id}
+                            className="absolute"
+                            style={{
+                              left: displayX,
+                              top: displayY,
+                              zIndex: isDraggingComp ? 100 : isSelectedComp ? 10 : 1,
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSelectPanelComponent?.("right", comp.id, comp);
+                            }}
+                          >
+                            {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
+                            <div
+                              className={cn(
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
+                                isSelectedComp ? "border-primary" : "border-gray-200"
+                              )}
+                              style={{ width: displayWidth }}
+                              onMouseDown={(e) => handlePanelDragStart(e, "right", comp)}
+                            >
+                              <div className="flex items-center gap-0.5">
+                                <Move className="h-2.5 w-2.5 text-gray-400" />
+                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                  {comp.label || comp.componentType}
+                                </span>
+                              </div>
+                              <div className="flex items-center">
+                                <button
+                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSelectPanelComponent?.("right", comp.id, comp);
+                                  }}
+                                  title="설정"
+                                >
+                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                </button>
+                                <button
+                                  className="rounded p-0.5 hover:bg-red-100"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleRemovePanelComponent("right", comp.id);
+                                  }}
+                                  title="삭제"
+                                >
+                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                </button>
+                              </div>
+                            </div>
+
+                            {/* 실제 컴포넌트 렌더링 - 핸들 아래에 별도 영역 */}
+                            <div 
+                              className={cn(
+                                "relative overflow-hidden rounded-b border bg-white shadow-sm",
+                                isSelectedComp
+                                  ? "border-primary ring-2 ring-primary/30"
+                                  : "border-gray-200",
+                                (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
+                                !(isDraggingComp || isResizingComp) && "transition-all"
+                              )}
+                              style={{
+                                width: displayWidth,
+                                height: displayHeight,
+                              }}
+                            >
+                              {/* 🆕 컨테이너 컴포넌트(탭, 분할 패널)는 드롭 이벤트를 받을 수 있어야 함 */}
+                              <div className={cn(
+                                "h-full w-full",
+                                // 탭/분할 패널 같은 컨테이너 컴포넌트는 pointer-events 활성화
+                                (comp.componentType === "v2-tabs-widget" || 
+                                 comp.componentType === "tabs-widget" ||
+                                 comp.componentType === "v2-split-panel-layout" ||
+                                 comp.componentType === "split-panel-layout")
+                                  ? "" 
+                                  : "pointer-events-none"
+                              )}>
+                                <DynamicComponentRenderer
+                                  component={componentData as any}
+                                  isDesignMode={true}
+                                  formData={{}}
+                                  // 🆕 중첩된 컴포넌트 업데이트 핸들러 전달
+                                  onUpdateComponent={(updatedComp: any) => {
+                                    handleNestedComponentUpdate("right", comp.id, updatedComp);
+                                  }}
+                                  // 🆕 중첩된 탭 내부 컴포넌트 선택 핸들러 - 부모 분할 패널 정보 포함
+                                  onSelectTabComponent={(tabId: string, compId: string, tabComp: any) => {
+                                    console.log("🔍 [SplitPanel-Right] onSelectTabComponent 호출:", { tabId, compId, tabComp, parentSplitPanelId: component.id });
+                                    // 부모 분할 패널 정보와 함께 전역 이벤트 발생
+                                    const event = new CustomEvent("nested-tab-component-select", {
+                                      detail: {
+                                        tabsComponentId: comp.id,
+                                        tabId,
+                                        componentId: compId,
+                                        component: tabComp,
+                                        parentSplitPanelId: component.id,
+                                        parentPanelSide: "right",
+                                      },
+                                    });
+                                    window.dispatchEvent(event);
+                                  }}
+                                  selectedTabComponentId={undefined}
+                                />
+                              </div>
+                              
+                              {/* 리사이즈 가장자리 영역 - 선택된 컴포넌트에만 표시 */}
+                              {isSelectedComp && (
+                                <>
+                                  {/* 오른쪽 가장자리 (너비 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute right-0 top-0 z-10 h-full w-2 cursor-ew-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "e")}
+                                  />
+                                  {/* 아래 가장자리 (높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 left-0 z-10 h-2 w-full cursor-ns-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "s")}
+                                  />
+                                  {/* 오른쪽 아래 모서리 (너비+높이 조절) */}
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 right-0 z-20 h-3 w-3 cursor-nwse-resize hover:bg-primary/20"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "se")}
+                                  />
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      } else {
+                        
+                        return (
+                          <div
+                            key={comp.id}
+                            className="absolute"
+                            style={{
+                              left: comp.position?.x || 0,
+                              top: comp.position?.y || 0,
+                              width: comp.size?.width || 400,
+                              height: comp.size?.height || 300,
+                            }}
+                          >
+                            <DynamicComponentRenderer
+                              component={componentData as any}
+                              isDesignMode={false}
+                              formData={{}}
+                            />
+                          </div>
+                        );
+                      }
+                    })}
+                  </div>
+                ) : (
+                  // 컴포넌트가 없을 때 드롭 영역 표시
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
+                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-500">
+                      커스텀 모드
+                    </p>
+                    <p className="mt-1 text-xs text-gray-400">
+                      {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
+                    </p>
+                  </div>
+                )}
+              </div>
+            ) : isLoadingRight ? (
               // 로딩 중
               <div className="flex h-full items-center justify-center">
                 <div className="text-center">
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index d678332e..79813d8f 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -11,7 +11,8 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 // Accordion 제거 - 단순 섹션으로 변경
-import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical } from "lucide-react";
+import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical, Move } from "lucide-react";
+import { PanelInlineComponent } from "./types";
 import { cn } from "@/lib/utils";
 import { SplitPanelLayoutConfig, AdditionalTabConfig } from "./types";
 import { TableInfo, ColumnInfo } from "@/types/screen";
@@ -1547,7 +1548,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <Label>표시 모드</Label>
           <Select
             value={config.leftPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table") => updateLeftPanel({ displayMode: value })}
+            onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
           >
             <SelectTrigger className="bg-white">
               <SelectValue placeholder="표시 모드 선택" />
@@ -1565,11 +1566,75 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col">
+                  <span className="font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
+          {config.leftPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
         </div>
 
-        {/* 좌측 패널 표시 컬럼 설정 - 체크박스 방식 */}
+        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+        {config.leftPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.leftPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">
+                        {comp.label || comp.componentType}
+                      </p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.leftPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          leftPanel: {
+                            ...config.leftPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      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>
+            )}
+          </div>
+        )}
+
+        {/* 좌측 패널 표시 컬럼 설정 - 체크박스 방식 (커스텀 모드가 아닐 때만) */}
+        {config.leftPanel?.displayMode !== "custom" && (
         <div className="space-y-2">
           <Label className="text-xs font-medium">표시할 컬럼 선택</Label>
 
@@ -1731,6 +1796,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             </div>
           )}
         </div>
+        )}
       </div>
 
       {/* 좌측 패널 데이터 필터링 */}
@@ -1851,7 +1917,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <Label>표시 모드</Label>
           <Select
             value={config.rightPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table") => updateRightPanel({ displayMode: value })}
+            onValueChange={(value: "list" | "table" | "custom") => updateRightPanel({ displayMode: value })}
           >
             <SelectTrigger className="bg-white">
               <SelectValue placeholder="표시 모드 선택" />
@@ -1869,11 +1935,74 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                   <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
+              <SelectItem value="custom">
+                <div className="flex flex-col">
+                  <span className="font-medium">커스텀 (CUSTOM)</span>
+                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
+          {config.rightPanel?.displayMode === "custom" && (
+            <p className="text-xs text-amber-600">
+              화면 디자이너에서 우측 패널에 컴포넌트를 드래그하여 배치하세요.
+            </p>
+          )}
         </div>
 
-        {/* 요약 표시 설정 (LIST 모드에서만) */}
+        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+        {config.rightPanel?.displayMode === "custom" && (
+          <div className="space-y-2">
+            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+            {!config.rightPanel?.components || config.rightPanel.components.length === 0 ? (
+              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                <p className="text-muted-foreground text-xs">
+                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {config.rightPanel.components.map((comp: PanelInlineComponent) => (
+                  <div
+                    key={comp.id}
+                    className="flex items-center justify-between rounded-md border bg-background p-2"
+                  >
+                    <div className="flex-1">
+                      <p className="text-xs font-medium">
+                        {comp.label || comp.componentType}
+                      </p>
+                      <p className="text-muted-foreground text-[10px]">
+                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
+                      </p>
+                    </div>
+                    <Button
+                      onClick={() => {
+                        const updatedComponents = (config.rightPanel?.components || []).filter(
+                          (c: PanelInlineComponent) => c.id !== comp.id
+                        );
+                        onChange({
+                          ...config,
+                          rightPanel: {
+                            ...config.rightPanel,
+                            components: updatedComponents,
+                          },
+                        });
+                      }}
+                      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>
+            )}
+          </div>
+        )}
+
+        {/* 요약 표시 설정 (LIST 모드에서만, 커스텀 모드가 아닐 때) */}
         {(config.rightPanel?.displayMode || "list") === "list" && (
           <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/types.ts b/frontend/lib/registry/components/v2-split-panel-layout/types.ts
index 123dc13a..7ab0dbcb 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/types.ts
+++ b/frontend/lib/registry/components/v2-split-panel-layout/types.ts
@@ -2,7 +2,13 @@
  * SplitPanelLayout 컴포넌트 타입 정의
  */
 
-import { DataFilterConfig } from "@/types/screen-management";
+import { DataFilterConfig, TabInlineComponent } from "@/types/screen-management";
+
+/**
+ * 패널 내 인라인 컴포넌트 (커스텀 모드용)
+ * TabInlineComponent와 동일한 구조 사용
+ */
+export type PanelInlineComponent = TabInlineComponent;
 
 /**
  * 추가 탭 설정 (우측 패널과 동일한 구조 + tabId, label)
@@ -118,7 +124,9 @@ export interface SplitPanelLayoutConfig {
     useCustomTable?: boolean; // 화면 기본 테이블이 아닌 다른 테이블 사용 여부
     customTableName?: string; // 사용자 지정 테이블명 (useCustomTable이 true일 때)
     dataSource?: string; // API 엔드포인트
-    displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
+    displayMode?: "list" | "table" | "custom"; // 표시 모드: 목록, 테이블, 또는 커스텀
+    // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치 (탭 컴포넌트와 동일 구조)
+    components?: PanelInlineComponent[];
     showSearch?: boolean;
     showAdd?: boolean;
     showEdit?: boolean; // 수정 버튼
@@ -185,7 +193,9 @@ export interface SplitPanelLayoutConfig {
     useCustomTable?: boolean; // 화면 기본 테이블이 아닌 다른 테이블 사용 여부
     customTableName?: string; // 사용자 지정 테이블명 (useCustomTable이 true일 때)
     dataSource?: string;
-    displayMode?: "list" | "table"; // 표시 모드: 목록 또는 테이블
+    displayMode?: "list" | "table" | "custom"; // 표시 모드: 목록, 테이블, 또는 커스텀
+    // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치 (탭 컴포넌트와 동일 구조)
+    components?: PanelInlineComponent[];
     showSearch?: boolean;
     showAdd?: boolean;
     showEdit?: boolean; // 수정 버튼
diff --git a/frontend/lib/registry/components/v2-table-grouped/README.md b/frontend/lib/registry/components/v2-table-grouped/README.md
new file mode 100644
index 00000000..fc39733e
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/README.md
@@ -0,0 +1,162 @@
+# v2-table-grouped (그룹화 테이블)
+
+## 개요
+
+데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공하는 테이블 컴포넌트입니다.
+
+## 주요 기능
+
+- **그룹화**: 지정된 컬럼 기준으로 데이터를 그룹핑
+- **접기/펼치기**: 그룹 헤더 클릭으로 하위 항목 토글
+- **그룹 요약**: 그룹별 개수, 합계, 평균, 최대/최소값 표시
+- **체크박스 선택**: 그룹 단위 또는 개별 항목 선택
+- **전체 펼치기/접기**: 모든 그룹 일괄 토글 버튼
+
+## 사용 예시
+
+```tsx
+import { TableGroupedComponent } from "./TableGroupedComponent";
+
+<TableGroupedComponent
+  config={{
+    selectedTable: "production_plan_mng",
+    groupConfig: {
+      groupByColumn: "item_code",
+      groupLabelFormat: "{item_name} ({item_code})",
+      defaultExpanded: true,
+      summary: {
+        showCount: true,
+        sumColumns: ["quantity"],
+      },
+    },
+    columns: [
+      { columnName: "plan_no", displayName: "계획번호", visible: true },
+      { columnName: "plan_date", displayName: "계획일", visible: true },
+      { columnName: "quantity", displayName: "수량", visible: true, format: "number" },
+    ],
+    showCheckbox: true,
+    checkboxMode: "multi",
+    showExpandAllButton: true,
+  }}
+  onSelectionChange={(event) => console.log("선택:", event.selectedItems)}
+  onRowClick={(event) => console.log("행 클릭:", event.row)}
+/>
+```
+
+## 설정 옵션
+
+### 기본 설정
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `selectedTable` | string | - | 데이터 테이블명 |
+| `useCustomTable` | boolean | false | 커스텀 테이블 사용 여부 |
+| `customTableName` | string | - | 커스텀 테이블명 |
+| `columns` | ColumnConfig[] | [] | 표시할 컬럼 설정 |
+
+### 그룹화 설정 (groupConfig)
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `groupByColumn` | string | - | 그룹화 기준 컬럼 (필수) |
+| `groupLabelFormat` | string | "{value}" | 그룹 라벨 형식 |
+| `defaultExpanded` | boolean | true | 초기 펼침 상태 |
+| `sortDirection` | "asc" \| "desc" | "asc" | 그룹 정렬 방향 |
+| `summary.showCount` | boolean | true | 개수 표시 여부 |
+| `summary.sumColumns` | string[] | [] | 합계 컬럼 목록 |
+| `summary.avgColumns` | string[] | [] | 평균 컬럼 목록 |
+
+### 표시 설정
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `showCheckbox` | boolean | false | 체크박스 표시 |
+| `checkboxMode` | "single" \| "multi" | "multi" | 선택 모드 |
+| `showExpandAllButton` | boolean | true | 전체 펼치기/접기 버튼 |
+| `groupHeaderStyle` | "default" \| "compact" \| "card" | "default" | 그룹 헤더 스타일 |
+| `rowClickable` | boolean | true | 행 클릭 가능 여부 |
+| `maxHeight` | number | 600 | 최대 높이 (px) |
+| `emptyMessage` | string | "데이터가 없습니다." | 빈 데이터 메시지 |
+
+## 이벤트
+
+### onSelectionChange
+
+선택 상태가 변경될 때 호출됩니다.
+
+```typescript
+interface SelectionChangeEvent {
+  selectedGroups: string[];  // 선택된 그룹 키 목록
+  selectedItems: any[];      // 선택된 아이템 전체
+  isAllSelected: boolean;    // 전체 선택 여부
+}
+```
+
+### onGroupToggle
+
+그룹 펼치기/접기 시 호출됩니다.
+
+```typescript
+interface GroupToggleEvent {
+  groupKey: string;   // 그룹 키
+  expanded: boolean;  // 펼침 상태
+}
+```
+
+### onRowClick
+
+행 클릭 시 호출됩니다.
+
+```typescript
+interface RowClickEvent {
+  row: any;           // 클릭된 행 데이터
+  groupKey: string;   // 그룹 키
+  indexInGroup: number; // 그룹 내 인덱스
+}
+```
+
+## 그룹 라벨 형식
+
+`groupLabelFormat`에서 사용 가능한 플레이스홀더:
+
+- `{value}`: 그룹화 컬럼의 값
+- `{컬럼명}`: 해당 컬럼의 값
+
+**예시:**
+```
+groupLabelFormat: "{item_name} ({item_code}) - {category}"
+// 결과: "제품A (P001) - 완제품"
+```
+
+## 파일 구조
+
+```
+v2-table-grouped/
+├── index.ts                    # Definition
+├── types.ts                    # 타입 정의
+├── config.ts                   # 기본 설정값
+├── TableGroupedComponent.tsx   # 메인 컴포넌트
+├── TableGroupedConfigPanel.tsx # 설정 패널
+├── TableGroupedRenderer.tsx    # 레지스트리 등록
+├── components/
+│   └── GroupHeader.tsx         # 그룹 헤더
+├── hooks/
+│   └── useGroupedData.ts       # 그룹화 로직 훅
+└── README.md
+```
+
+## v2-table-list와의 차이점
+
+| 항목 | v2-table-list | v2-table-grouped |
+|------|---------------|------------------|
+| 데이터 구조 | 플랫 리스트 | 계층 구조 (그룹 > 아이템) |
+| 렌더링 | 행 단위 | 그룹 헤더 + 상세 행 |
+| 선택 | 개별 행 | 그룹 단위 / 개별 단위 |
+| 요약 | 전체 합계 (선택) | 그룹별 요약 |
+| 용도 | 일반 데이터 목록 | 카테고리별 분류 데이터 |
+
+## 관련 컴포넌트
+
+- `v2-table-list`: 기본 테이블 (그룹화 없음)
+- `v2-pivot-grid`: 피벗 테이블 (다차원 집계)
+- `v2-split-panel-layout`: 마스터-디테일 레이아웃
diff --git a/frontend/lib/registry/components/v2-table-grouped/TableGroupedComponent.tsx b/frontend/lib/registry/components/v2-table-grouped/TableGroupedComponent.tsx
new file mode 100644
index 00000000..ddfbdc18
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/TableGroupedComponent.tsx
@@ -0,0 +1,545 @@
+"use client";
+
+import React, { useCallback, useEffect, useState, useMemo } from "react";
+import { Loader2, FoldVertical, UnfoldVertical } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { TableGroupedComponentProps } from "./types";
+import { useGroupedData } from "./hooks/useGroupedData";
+import { GroupHeader } from "./components/GroupHeader";
+import { useScreenContextOptional } from "@/contexts/ScreenContext";
+import { useTableOptions } from "@/contexts/TableOptionsContext";
+import type { DataProvidable, DataReceivable, DataReceiverConfig } from "@/types/data-transfer";
+import { v2EventBus, V2_EVENTS } from "@/lib/v2-core/events";
+
+/**
+ * v2-table-grouped 메인 컴포넌트
+ *
+ * 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공합니다.
+ */
+export function TableGroupedComponent({
+  config,
+  isDesignMode = false,
+  formData,
+  onSelectionChange,
+  onGroupToggle,
+  onRowClick,
+  externalData,
+  isLoading: externalLoading,
+  error: externalError,
+  componentId,
+}: TableGroupedComponentProps) {
+  // 화면 컨텍스트 (데이터 제공자로 등록)
+  const screenContext = useScreenContextOptional();
+
+  // TableOptions Context (검색필터 연동)
+  const { registerTable, unregisterTable, updateTableDataCount } = useTableOptions();
+
+  // 연결된 필터 상태 (다른 컴포넌트 값으로 필터링)
+  const [linkedFilterValues, setLinkedFilterValues] = useState<Record<string, any>>({});
+
+  // 필터 및 그룹 설정 상태 (검색필터 연동용)
+  const [filters, setFilters] = useState<any[]>([]);
+  const [grouping, setGrouping] = useState<string[]>([]);
+  const [columnVisibility, setColumnVisibility] = useState<any[]>([]);
+
+  // 그룹화 데이터 훅 (검색 필터 전달)
+  const {
+    groups,
+    isLoading: hookLoading,
+    error: hookError,
+    toggleGroup,
+    expandAll,
+    collapseAll,
+    toggleItemSelection,
+    toggleGroupSelection,
+    toggleAllSelection,
+    selectedItems,
+    isAllSelected,
+    isIndeterminate,
+    refresh,
+    rawData,
+    totalCount,
+    groupCount,
+  } = useGroupedData(config, externalData, linkedFilterValues);
+
+  const isLoading = externalLoading ?? hookLoading;
+  const error = externalError ?? hookError;
+
+  // 필터링된 데이터 (훅에서 이미 필터 적용됨)
+  const filteredData = rawData;
+
+  // 연결된 필터 감시
+  useEffect(() => {
+    const linkedFilters = config.linkedFilters;
+
+    if (!linkedFilters || linkedFilters.length === 0 || !screenContext) {
+      return;
+    }
+
+    // 연결된 소스 컴포넌트들의 값을 주기적으로 확인
+    const checkLinkedFilters = () => {
+      const newFilterValues: Record<string, any> = {};
+      let hasChanges = false;
+
+      linkedFilters.forEach((filter) => {
+        if (filter.enabled === false) return;
+
+        const sourceProvider = screenContext.getDataProvider(filter.sourceComponentId);
+        if (sourceProvider) {
+          const selectedData = sourceProvider.getSelectedData();
+          if (selectedData && selectedData.length > 0) {
+            const sourceField = filter.sourceField || "value";
+            const value = selectedData[0][sourceField];
+
+            if (value !== linkedFilterValues[filter.targetColumn]) {
+              newFilterValues[filter.targetColumn] = value;
+              hasChanges = true;
+            } else {
+              newFilterValues[filter.targetColumn] = linkedFilterValues[filter.targetColumn];
+            }
+          }
+        }
+      });
+
+      if (hasChanges) {
+        setLinkedFilterValues(newFilterValues);
+      }
+    };
+
+    // 초기 확인
+    checkLinkedFilters();
+
+    // 주기적 확인 (100ms 간격)
+    const intervalId = setInterval(checkLinkedFilters, 100);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [screenContext, config.linkedFilters, linkedFilterValues]);
+
+  // DataProvidable 인터페이스 구현
+  const dataProvider: DataProvidable = useMemo(
+    () => ({
+      componentId: componentId || "",
+      componentType: "table-grouped",
+
+      getSelectedData: () => {
+        return selectedItems;
+      },
+
+      getAllData: () => {
+        return filteredData;
+      },
+
+      clearSelection: () => {
+        toggleAllSelection();
+      },
+    }),
+    [componentId, selectedItems, filteredData, toggleAllSelection]
+  );
+
+  // DataReceivable 인터페이스 구현
+  const dataReceiver: DataReceivable = useMemo(
+    () => ({
+      componentId: componentId || "",
+      componentType: "table-grouped",
+
+      receiveData: async (_receivedData: any[], _config: DataReceiverConfig) => {
+        // 현재는 외부 데이터 수신 시 새로고침만 수행
+        refresh();
+      },
+
+      clearData: async () => {
+        // 데이터 클리어 시 새로고침
+        refresh();
+      },
+
+      getConfig: () => {
+        return {
+          targetComponentId: componentId || "",
+          mode: "replace" as const,
+        };
+      },
+    }),
+    [componentId, refresh]
+  );
+
+  // 화면 컨텍스트에 데이터 제공자/수신자로 등록
+  useEffect(() => {
+    if (screenContext && componentId) {
+      screenContext.registerDataProvider(componentId, dataProvider);
+      screenContext.registerDataReceiver(componentId, dataReceiver);
+
+      return () => {
+        screenContext.unregisterDataProvider(componentId);
+        screenContext.unregisterDataReceiver(componentId);
+      };
+    }
+  }, [screenContext, componentId, dataProvider, dataReceiver]);
+
+  // 테이블 ID (검색필터 연동용)
+  const tableId = componentId || `table-grouped-${config.selectedTable || "default"}`;
+
+  // TableOptionsContext에 테이블 등록 (검색필터가 테이블을 찾을 수 있도록)
+  useEffect(() => {
+    if (isDesignMode || !config.selectedTable) return;
+
+    const columnsToRegister = config.columns || [];
+
+    // 고유 값 조회 함수
+    const getColumnUniqueValues = async (columnName: string) => {
+      const uniqueValues = new Set<string>();
+      rawData.forEach((row) => {
+        const value = row[columnName];
+        if (value !== null && value !== undefined && value !== "") {
+          uniqueValues.add(String(value));
+        }
+      });
+      return Array.from(uniqueValues)
+        .map((value) => ({ value, label: value }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+    };
+
+    const registration = {
+      tableId,
+      label: config.selectedTable,
+      tableName: config.selectedTable,
+      dataCount: totalCount,
+      columns: columnsToRegister.map((col) => ({
+        columnName: col.columnName,
+        columnLabel: col.displayName || col.columnName,
+        inputType: "text",
+        visible: col.visible !== false,
+        width: col.width || 150,
+        sortable: true,
+        filterable: true,
+      })),
+      onFilterChange: setFilters,
+      onGroupChange: setGrouping,
+      onColumnVisibilityChange: setColumnVisibility,
+      getColumnUniqueValues,
+    };
+
+    registerTable(registration);
+
+    return () => {
+      unregisterTable(tableId);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableId, config.selectedTable, config.columns, totalCount, rawData, registerTable, isDesignMode]);
+
+  // 데이터 건수 변경 시 업데이트
+  useEffect(() => {
+    if (!isDesignMode && config.selectedTable) {
+      updateTableDataCount(tableId, totalCount);
+    }
+  }, [tableId, totalCount, updateTableDataCount, config.selectedTable, isDesignMode]);
+
+  // 필터 변경 시 검색 조건 적용
+  useEffect(() => {
+    if (filters.length > 0) {
+      const newFilterValues: Record<string, any> = {};
+      filters.forEach((filter: any) => {
+        if (filter.value) {
+          newFilterValues[filter.columnName] = filter.value;
+        }
+      });
+      setLinkedFilterValues((prev) => ({ ...prev, ...newFilterValues }));
+    }
+  }, [filters]);
+
+  // 컬럼 설정
+  const columns = config.columns || [];
+  const visibleColumns = columns.filter((col) => col.visible !== false);
+
+  // 체크박스 컬럼 포함 시 총 컬럼 수
+  const totalColumnCount = visibleColumns.length + (config.showCheckbox ? 1 : 0);
+
+  // 아이템 ID 추출 함수
+  const getItemId = useCallback(
+    (item: any): string => {
+      if (item.id !== undefined) return String(item.id);
+      const firstCol = columns[0]?.columnName;
+      if (firstCol && item[firstCol] !== undefined) return String(item[firstCol]);
+      return JSON.stringify(item);
+    },
+    [columns]
+  );
+
+  // 선택 변경 시 콜백 및 이벤트 발송
+  useEffect(() => {
+    // 기존 콜백 호출
+    if (onSelectionChange && selectedItems.length >= 0) {
+      onSelectionChange({
+        selectedGroups: groups
+          .filter((g) => g.selected)
+          .map((g) => g.groupKey),
+        selectedItems,
+        isAllSelected,
+      });
+    }
+
+    // TABLE_SELECTION_CHANGE 이벤트 발송 (선택 데이터 변경 시 다른 컴포넌트에 알림)
+    v2EventBus.emit(V2_EVENTS.TABLE_SELECTION_CHANGE, {
+      componentId: componentId || tableId,
+      tableName: config.selectedTable || "",
+      selectedRows: selectedItems,
+      selectedCount: selectedItems.length,
+    });
+
+    console.log("[TableGroupedComponent] 선택 변경 이벤트 발송:", {
+      componentId: componentId || tableId,
+      tableName: config.selectedTable,
+      selectedCount: selectedItems.length,
+    });
+  }, [selectedItems, groups, isAllSelected, onSelectionChange, componentId, tableId, config.selectedTable]);
+
+  // 그룹 토글 핸들러
+  const handleGroupToggle = useCallback(
+    (groupKey: string) => {
+      toggleGroup(groupKey);
+      if (onGroupToggle) {
+        const group = groups.find((g) => g.groupKey === groupKey);
+        onGroupToggle({
+          groupKey,
+          expanded: !group?.expanded,
+        });
+      }
+    },
+    [toggleGroup, onGroupToggle, groups]
+  );
+
+  // 행 클릭 핸들러
+  const handleRowClick = useCallback(
+    (row: any, groupKey: string, indexInGroup: number) => {
+      if (!config.rowClickable) return;
+      if (onRowClick) {
+        onRowClick({ row, groupKey, indexInGroup });
+      }
+    },
+    [config.rowClickable, onRowClick]
+  );
+
+  // refreshTable 이벤트 구독
+  useEffect(() => {
+    const handleRefresh = () => {
+      refresh();
+    };
+
+    window.addEventListener("refreshTable", handleRefresh);
+    return () => {
+      window.removeEventListener("refreshTable", handleRefresh);
+    };
+  }, [refresh]);
+
+  // 디자인 모드 렌더링
+  if (isDesignMode) {
+    return (
+      <div className="rounded-md border bg-muted/20 p-4">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <FoldVertical className="h-4 w-4" />
+          <span>그룹화 테이블</span>
+          {config.groupConfig?.groupByColumn && (
+            <span className="text-xs">
+              (그룹: {config.groupConfig.groupByColumn})
+            </span>
+          )}
+        </div>
+        <div className="mt-2 text-xs text-muted-foreground">
+          테이블: {config.useCustomTable ? config.customTableName : config.selectedTable || "(미설정)"}
+        </div>
+      </div>
+    );
+  }
+
+  // 로딩 상태
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
+      </div>
+    );
+  }
+
+  // 에러 상태
+  if (error) {
+    return (
+      <div className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
+        {error}
+      </div>
+    );
+  }
+
+  // 데이터 없음
+  if (groups.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+        {config.emptyMessage || "데이터가 없습니다."}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="v2-table-grouped flex flex-col"
+      style={{
+        height: config.height,
+        maxHeight: config.maxHeight,
+      }}
+    >
+      {/* 툴바 */}
+      {config.showExpandAllButton && (
+        <div className="flex items-center justify-between border-b bg-muted/30 px-3 py-2">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={expandAll}
+              className="h-7 text-xs"
+            >
+              <UnfoldVertical className="mr-1 h-3 w-3" />
+              전체 펼치기
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={collapseAll}
+              className="h-7 text-xs"
+            >
+              <FoldVertical className="mr-1 h-3 w-3" />
+              전체 접기
+            </Button>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            {groupCount}개 그룹 | 총 {totalCount}건
+          </div>
+        </div>
+      )}
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto">
+        <table className="w-full border-collapse text-sm">
+          {/* 테이블 헤더 */}
+          <thead className="sticky top-0 z-10 bg-muted">
+            <tr>
+              {/* 전체 선택 체크박스 */}
+              {config.showCheckbox && (
+                <th className="w-10 whitespace-nowrap border-b px-3 py-2 text-left">
+                  <Checkbox
+                    checked={isAllSelected}
+                    onCheckedChange={toggleAllSelection}
+                    className={cn(isIndeterminate && "data-[state=checked]:bg-muted")}
+                  />
+                </th>
+              )}
+              {/* 컬럼 헤더 */}
+              {visibleColumns.map((col) => (
+                <th
+                  key={col.columnName}
+                  className={cn(
+                    "whitespace-nowrap border-b px-3 py-2 font-medium text-muted-foreground",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right"
+                  )}
+                  style={{ width: col.width ? `${col.width}px` : "auto" }}
+                >
+                  {col.displayName || col.columnName}
+                </th>
+              ))}
+            </tr>
+          </thead>
+
+          {/* 테이블 바디 */}
+          <tbody>
+            {groups.map((group) => (
+              <React.Fragment key={group.groupKey}>
+                {/* 그룹 헤더 */}
+                <GroupHeader
+                  group={group}
+                  config={config}
+                  onToggle={() => handleGroupToggle(group.groupKey)}
+                  onSelectToggle={
+                    config.showCheckbox
+                      ? () => toggleGroupSelection(group.groupKey)
+                      : undefined
+                  }
+                  style={config.groupHeaderStyle}
+                  columnCount={totalColumnCount}
+                />
+
+                {/* 그룹 아이템 (펼쳐진 경우만) */}
+                {group.expanded &&
+                  group.items.map((item, idx) => {
+                    const itemId = getItemId(item);
+                    const isSelected = group.selectedItemIds?.includes(itemId);
+
+                    return (
+                      <tr
+                        key={itemId}
+                        className={cn(
+                          "border-b transition-colors",
+                          config.rowClickable && "cursor-pointer hover:bg-muted/50",
+                          isSelected && "bg-primary/10"
+                        )}
+                        onClick={() => handleRowClick(item, group.groupKey, idx)}
+                      >
+                        {/* 체크박스 */}
+                        {config.showCheckbox && (
+                          <td
+                            className="px-3 py-2"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <Checkbox
+                              checked={isSelected}
+                              onCheckedChange={() =>
+                                toggleItemSelection(group.groupKey, itemId)
+                              }
+                            />
+                          </td>
+                        )}
+
+                        {/* 데이터 컬럼 */}
+                        {visibleColumns.map((col) => {
+                          const value = item[col.columnName];
+                          let displayValue: React.ReactNode = value;
+
+                          // 포맷 적용
+                          if (col.format === "number" && typeof value === "number") {
+                            displayValue = value.toLocaleString();
+                          } else if (col.format === "currency" && typeof value === "number") {
+                            displayValue = `₩${value.toLocaleString()}`;
+                          } else if (col.format === "date" && value) {
+                            displayValue = new Date(value).toLocaleDateString("ko-KR");
+                          } else if (col.format === "boolean") {
+                            displayValue = value ? "예" : "아니오";
+                          }
+
+                          return (
+                            <td
+                              key={col.columnName}
+                              className={cn(
+                                "px-3 py-2",
+                                col.align === "center" && "text-center",
+                                col.align === "right" && "text-right"
+                              )}
+                            >
+                              {displayValue ?? "-"}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default TableGroupedComponent;
diff --git a/frontend/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel.tsx b/frontend/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel.tsx
new file mode 100644
index 00000000..beb0f5b6
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel.tsx
@@ -0,0 +1,717 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { TableGroupedConfig, ColumnConfig, LinkedFilterConfig } from "./types";
+import {
+  groupHeaderStyleOptions,
+  checkboxModeOptions,
+  sortDirectionOptions,
+} from "./config";
+import { Trash2, Plus } from "lucide-react";
+
+interface TableGroupedConfigPanelProps {
+  config: TableGroupedConfig;
+  onChange: (newConfig: Partial<TableGroupedConfig>) => void;
+}
+
+/**
+ * v2-table-grouped 설정 패널
+ */
+// 테이블 정보 타입
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+export function TableGroupedConfigPanel({
+  config,
+  onChange,
+}: TableGroupedConfigPanelProps) {
+  // 테이블 목록 (라벨명 포함)
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [tableColumns, setTableColumns] = useState<ColumnConfig[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [tableSelectOpen, setTableSelectOpen] = useState(false);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        if (tableList && Array.isArray(tableList)) {
+          setTables(
+            tableList.map((t: any) => ({
+              tableName: t.tableName || t.table_name,
+              displayName: t.displayName || t.display_name || t.tableName || t.table_name,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("테이블 목록 로드 실패:", err);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 선택된 테이블의 컬럼 로드
+  useEffect(() => {
+    const tableName = config.useCustomTable
+      ? config.customTableName
+      : config.selectedTable;
+
+    if (!tableName) {
+      setTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const columns = await tableTypeApi.getColumns(tableName);
+        if (columns && Array.isArray(columns)) {
+          const cols: ColumnConfig[] = columns.map(
+            (col: any, idx: number) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+              visible: true,
+              sortable: true,
+              searchable: false,
+              align: "left" as const,
+              order: idx,
+            })
+          );
+          setTableColumns(cols);
+
+          // 컬럼 설정이 없으면 자동 설정
+          if (!config.columns || config.columns.length === 0) {
+            onChange({ ...config, columns: cols });
+          }
+        }
+      } catch (err) {
+        console.error("컬럼 로드 실패:", err);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [config.selectedTable, config.customTableName, config.useCustomTable]);
+
+  // 설정 업데이트 헬퍼
+  const updateConfig = (updates: Partial<TableGroupedConfig>) => {
+    onChange({ ...config, ...updates });
+  };
+
+  // 그룹 설정 업데이트 헬퍼
+  const updateGroupConfig = (
+    updates: Partial<TableGroupedConfig["groupConfig"]>
+  ) => {
+    onChange({
+      ...config,
+      groupConfig: { ...config.groupConfig, ...updates },
+    });
+  };
+
+  // 컬럼 가시성 토글
+  const toggleColumnVisibility = (columnName: string) => {
+    const updatedColumns = (config.columns || []).map((col) =>
+      col.columnName === columnName ? { ...col, visible: !col.visible } : col
+    );
+    updateConfig({ columns: updatedColumns });
+  };
+
+  // 합계 컬럼 토글
+  const toggleSumColumn = (columnName: string) => {
+    const currentSumCols = config.groupConfig?.summary?.sumColumns || [];
+    const newSumCols = currentSumCols.includes(columnName)
+      ? currentSumCols.filter((c) => c !== columnName)
+      : [...currentSumCols, columnName];
+
+    updateGroupConfig({
+      summary: {
+        ...config.groupConfig?.summary,
+        sumColumns: newSumCols,
+      },
+    });
+  };
+
+  // 연결 필터 추가
+  const addLinkedFilter = () => {
+    const newFilter: LinkedFilterConfig = {
+      sourceComponentId: "",
+      sourceField: "value",
+      targetColumn: "",
+      enabled: true,
+    };
+    updateConfig({
+      linkedFilters: [...(config.linkedFilters || []), newFilter],
+    });
+  };
+
+  // 연결 필터 제거
+  const removeLinkedFilter = (index: number) => {
+    const filters = [...(config.linkedFilters || [])];
+    filters.splice(index, 1);
+    updateConfig({ linkedFilters: filters });
+  };
+
+  // 연결 필터 업데이트
+  const updateLinkedFilter = (
+    index: number,
+    updates: Partial<LinkedFilterConfig>
+  ) => {
+    const filters = [...(config.linkedFilters || [])];
+    filters[index] = { ...filters[index], ...updates };
+    updateConfig({ linkedFilters: filters });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <Accordion type="multiple" defaultValue={["table", "group", "display"]}>
+        {/* 테이블 설정 */}
+        <AccordionItem value="table">
+          <AccordionTrigger className="text-sm font-medium">
+            테이블 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 커스텀 테이블 사용 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">커스텀 테이블 사용</Label>
+              <Switch
+                checked={config.useCustomTable}
+                onCheckedChange={(checked) =>
+                  updateConfig({ useCustomTable: checked })
+                }
+              />
+            </div>
+
+            {/* 테이블 선택 */}
+            {config.useCustomTable ? (
+              <div className="space-y-1">
+                <Label className="text-xs">커스텀 테이블명</Label>
+                <Input
+                  value={config.customTableName || ""}
+                  onChange={(e) =>
+                    updateConfig({ customTableName: e.target.value })
+                  }
+                  placeholder="테이블명 입력"
+                  className="h-8 text-xs"
+                />
+              </div>
+            ) : (
+              <div className="space-y-1">
+                <Label className="text-xs">테이블 선택</Label>
+                <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={tableSelectOpen}
+                      className="h-8 w-full justify-between text-xs"
+                      disabled={loadingTables}
+                    >
+                      {loadingTables ? (
+                        <>
+                          <Loader2 className="mr-2 h-3 w-3 animate-spin" />
+                          로딩 중...
+                        </>
+                      ) : config.selectedTable ? (
+                        <span className="truncate">
+                          {tables.find((t) => t.tableName === config.selectedTable)
+                            ?.displayName || config.selectedTable}
+                          <span className="ml-1 text-muted-foreground">
+                            ({config.selectedTable})
+                          </span>
+                        </span>
+                      ) : (
+                        "테이블 검색..."
+                      )}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command
+                      filter={(value, search) => {
+                        // 테이블명 또는 라벨명에 검색어가 포함되면 1, 아니면 0
+                        const lowerSearch = search.toLowerCase();
+                        if (value.toLowerCase().includes(lowerSearch)) {
+                          return 1;
+                        }
+                        return 0;
+                      }}
+                    >
+                      <CommandInput
+                        placeholder="테이블명 또는 라벨 검색..."
+                        className="text-xs"
+                      />
+                      <CommandList>
+                        <CommandEmpty className="py-2 text-center text-xs">
+                          테이블을 찾을 수 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {tables.map((table) => (
+                            <CommandItem
+                              key={table.tableName}
+                              value={`${table.displayName} ${table.tableName}`}
+                              onSelect={() => {
+                                updateConfig({ selectedTable: table.tableName });
+                                setTableSelectOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-3 w-3",
+                                  config.selectedTable === table.tableName
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span>{table.displayName}</span>
+                                <span className="text-[10px] text-muted-foreground">
+                                  {table.tableName}
+                                </span>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 그룹화 설정 */}
+        <AccordionItem value="group">
+          <AccordionTrigger className="text-sm font-medium">
+            그룹화 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 그룹화 기준 컬럼 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹화 기준 컬럼 *</Label>
+              <Select
+                value={config.groupConfig?.groupByColumn || ""}
+                onValueChange={(value) =>
+                  updateGroupConfig({ groupByColumn: value })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="컬럼 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 그룹 라벨 형식 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹 라벨 형식</Label>
+              <Input
+                value={config.groupConfig?.groupLabelFormat || "{value}"}
+                onChange={(e) =>
+                  updateGroupConfig({ groupLabelFormat: e.target.value })
+                }
+                placeholder="{value} ({컬럼명})"
+                className="h-8 text-xs"
+              />
+              <p className="text-[10px] text-muted-foreground">
+                {"{value}"} = 그룹값, {"{컬럼명}"} = 해당 컬럼 값
+              </p>
+            </div>
+
+            {/* 기본 펼침 상태 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">기본 펼침 상태</Label>
+              <Switch
+                checked={config.groupConfig?.defaultExpanded ?? true}
+                onCheckedChange={(checked) =>
+                  updateGroupConfig({ defaultExpanded: checked })
+                }
+              />
+            </div>
+
+            {/* 그룹 정렬 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹 정렬</Label>
+              <Select
+                value={config.groupConfig?.sortDirection || "asc"}
+                onValueChange={(value: "asc" | "desc") =>
+                  updateGroupConfig({ sortDirection: value })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {sortDirectionOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 개수 표시 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">개수 표시</Label>
+              <Switch
+                checked={config.groupConfig?.summary?.showCount ?? true}
+                onCheckedChange={(checked) =>
+                  updateGroupConfig({
+                    summary: {
+                      ...config.groupConfig?.summary,
+                      showCount: checked,
+                    },
+                  })
+                }
+              />
+            </div>
+
+            {/* 합계 컬럼 */}
+            <div className="space-y-1">
+              <Label className="text-xs">합계 표시 컬럼</Label>
+              <div className="max-h-32 space-y-1 overflow-y-auto rounded border p-2">
+                {tableColumns.map((col) => (
+                  <div
+                    key={col.columnName}
+                    className="flex items-center gap-2 text-xs"
+                  >
+                    <Checkbox
+                      id={`sum-${col.columnName}`}
+                      checked={
+                        config.groupConfig?.summary?.sumColumns?.includes(
+                          col.columnName
+                        ) ?? false
+                      }
+                      onCheckedChange={() => toggleSumColumn(col.columnName)}
+                    />
+                    <label
+                      htmlFor={`sum-${col.columnName}`}
+                      className="cursor-pointer"
+                    >
+                      {col.displayName || col.columnName}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 표시 설정 */}
+        <AccordionItem value="display">
+          <AccordionTrigger className="text-sm font-medium">
+            표시 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 체크박스 표시 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">체크박스 표시</Label>
+              <Switch
+                checked={config.showCheckbox}
+                onCheckedChange={(checked) =>
+                  updateConfig({ showCheckbox: checked })
+                }
+              />
+            </div>
+
+            {/* 체크박스 모드 */}
+            {config.showCheckbox && (
+              <div className="space-y-1">
+                <Label className="text-xs">선택 모드</Label>
+                <Select
+                  value={config.checkboxMode || "multi"}
+                  onValueChange={(value: "single" | "multi") =>
+                    updateConfig({ checkboxMode: value })
+                  }
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {checkboxModeOptions.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* 그룹 헤더 스타일 */}
+            <div className="space-y-1">
+              <Label className="text-xs">그룹 헤더 스타일</Label>
+              <Select
+                value={config.groupHeaderStyle || "default"}
+                onValueChange={(value: "default" | "compact" | "card") =>
+                  updateConfig({ groupHeaderStyle: value })
+                }
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {groupHeaderStyleOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 전체 펼치기/접기 버튼 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">펼치기/접기 버튼 표시</Label>
+              <Switch
+                checked={config.showExpandAllButton ?? true}
+                onCheckedChange={(checked) =>
+                  updateConfig({ showExpandAllButton: checked })
+                }
+              />
+            </div>
+
+            {/* 행 클릭 가능 */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">행 클릭 가능</Label>
+              <Switch
+                checked={config.rowClickable ?? true}
+                onCheckedChange={(checked) =>
+                  updateConfig({ rowClickable: checked })
+                }
+              />
+            </div>
+
+            {/* 최대 높이 */}
+            <div className="space-y-1">
+              <Label className="text-xs">최대 높이 (px)</Label>
+              <Input
+                type="number"
+                value={config.maxHeight || 600}
+                onChange={(e) =>
+                  updateConfig({ maxHeight: parseInt(e.target.value) || 600 })
+                }
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 빈 데이터 메시지 */}
+            <div className="space-y-1">
+              <Label className="text-xs">빈 데이터 메시지</Label>
+              <Input
+                value={config.emptyMessage || ""}
+                onChange={(e) =>
+                  updateConfig({ emptyMessage: e.target.value })
+                }
+                placeholder="데이터가 없습니다."
+                className="h-8 text-xs"
+              />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 컬럼 설정 */}
+        <AccordionItem value="columns">
+          <AccordionTrigger className="text-sm font-medium">
+            컬럼 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-2 pt-2">
+            <div className="max-h-48 space-y-1 overflow-y-auto rounded border p-2">
+              {(config.columns || tableColumns).map((col) => (
+                <div
+                  key={col.columnName}
+                  className="flex items-center gap-2 text-xs"
+                >
+                  <Checkbox
+                    id={`col-${col.columnName}`}
+                    checked={col.visible !== false}
+                    onCheckedChange={() =>
+                      toggleColumnVisibility(col.columnName)
+                    }
+                  />
+                  <label
+                    htmlFor={`col-${col.columnName}`}
+                    className="cursor-pointer"
+                  >
+                    {col.displayName || col.columnName}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 연동 설정 */}
+        <AccordionItem value="linked">
+          <AccordionTrigger className="text-sm font-medium">
+            연동 설정
+          </AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">연결 필터</Label>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={addLinkedFilter}
+                  className="h-6 text-xs"
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  추가
+                </Button>
+              </div>
+
+              {(config.linkedFilters || []).length === 0 ? (
+                <p className="text-xs text-muted-foreground">
+                  연결된 필터가 없습니다.
+                </p>
+              ) : (
+                <div className="space-y-2">
+                  {(config.linkedFilters || []).map((filter, idx) => (
+                    <div
+                      key={idx}
+                      className="space-y-2 rounded border p-2"
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs font-medium">
+                          필터 #{idx + 1}
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <Switch
+                            checked={filter.enabled !== false}
+                            onCheckedChange={(checked) =>
+                              updateLinkedFilter(idx, { enabled: checked })
+                            }
+                          />
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeLinkedFilter(idx)}
+                            className="h-6 w-6 p-0 text-destructive"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">소스 컴포넌트 ID</Label>
+                        <Input
+                          value={filter.sourceComponentId}
+                          onChange={(e) =>
+                            updateLinkedFilter(idx, {
+                              sourceComponentId: e.target.value,
+                            })
+                          }
+                          placeholder="예: search-filter-1"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">소스 필드</Label>
+                        <Input
+                          value={filter.sourceField || "value"}
+                          onChange={(e) =>
+                            updateLinkedFilter(idx, {
+                              sourceField: e.target.value,
+                            })
+                          }
+                          placeholder="value"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">대상 컬럼</Label>
+                        <Select
+                          value={filter.targetColumn}
+                          onValueChange={(value) =>
+                            updateLinkedFilter(idx, { targetColumn: value })
+                          }
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue placeholder="컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {tableColumns.map((col) => (
+                              <SelectItem
+                                key={col.columnName}
+                                value={col.columnName}
+                              >
+                                {col.displayName || col.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              <p className="text-[10px] text-muted-foreground">
+                다른 컴포넌트(검색필터 등)의 선택 값으로 이 테이블을 필터링합니다.
+              </p>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+export default TableGroupedConfigPanel;
diff --git a/frontend/lib/registry/components/v2-table-grouped/TableGroupedRenderer.tsx b/frontend/lib/registry/components/v2-table-grouped/TableGroupedRenderer.tsx
new file mode 100644
index 00000000..245d8ee6
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/TableGroupedRenderer.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2TableGroupedDefinition } from "./index";
+import { TableGroupedComponent } from "./TableGroupedComponent";
+
+/**
+ * TableGrouped 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class TableGroupedRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2TableGroupedDefinition;
+
+  render(): React.ReactElement {
+    return (
+      <TableGroupedComponent
+        {...this.props}
+        config={this.props.component?.componentConfig || {}}
+        isDesignMode={this.props.isDesignMode}
+        formData={this.props.formData}
+        componentId={this.props.component?.id}
+      />
+    );
+  }
+
+  // 설정 변경 핸들러
+  protected handleConfigChange = (config: any) => {
+    console.log("📥 TableGroupedRenderer에서 설정 변경 받음:", config);
+
+    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
+    if (this.props.onConfigChange) {
+      this.props.onConfigChange(config);
+    }
+
+    this.updateComponent({ config });
+  };
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+TableGroupedRenderer.registerSelf();
+
+// 강제 등록 (디버깅용)
+if (typeof window !== "undefined") {
+  setTimeout(() => {
+    try {
+      TableGroupedRenderer.registerSelf();
+    } catch (error) {
+      console.error("❌ TableGrouped 강제 등록 실패:", error);
+    }
+  }, 1000);
+}
diff --git a/frontend/lib/registry/components/v2-table-grouped/components/GroupHeader.tsx b/frontend/lib/registry/components/v2-table-grouped/components/GroupHeader.tsx
new file mode 100644
index 00000000..f7119f4e
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/components/GroupHeader.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { ChevronDown, ChevronRight, Minus } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+import { GroupState, TableGroupedConfig } from "../types";
+
+interface GroupHeaderProps {
+  /** 그룹 상태 */
+  group: GroupState;
+  /** 설정 */
+  config: TableGroupedConfig;
+  /** 그룹 토글 핸들러 */
+  onToggle: () => void;
+  /** 그룹 선택 토글 핸들러 */
+  onSelectToggle?: () => void;
+  /** 그룹 헤더 스타일 */
+  style?: "default" | "compact" | "card";
+  /** 컬럼 개수 (colspan용) */
+  columnCount?: number;
+}
+
+/**
+ * 그룹 헤더 컴포넌트
+ * 그룹 펼치기/접기, 체크박스, 요약 정보 표시
+ */
+export function GroupHeader({
+  group,
+  config,
+  onToggle,
+  onSelectToggle,
+  style = "default",
+  columnCount = 1,
+}: GroupHeaderProps) {
+  const { showCheckbox } = config;
+  const { summary } = group;
+
+  // 일부 선택 여부
+  const isIndeterminate =
+    group.selectedItemIds &&
+    group.selectedItemIds.length > 0 &&
+    group.selectedItemIds.length < group.items.length;
+
+  // 요약 텍스트 생성
+  const summaryText = React.useMemo(() => {
+    const parts: string[] = [];
+
+    // 개수
+    if (config.groupConfig?.summary?.showCount !== false) {
+      parts.push(`${summary.count}건`);
+    }
+
+    // 합계
+    if (summary.sum) {
+      for (const [col, value] of Object.entries(summary.sum)) {
+        const displayName =
+          config.columns?.find((c) => c.columnName === col)?.displayName || col;
+        parts.push(`${displayName}: ${value.toLocaleString()}`);
+      }
+    }
+
+    return parts.join(" | ");
+  }, [summary, config]);
+
+  // 스타일별 클래스
+  const headerClasses = cn(
+    "flex items-center gap-2 cursor-pointer select-none transition-colors",
+    {
+      // default 스타일
+      "px-3 py-2 bg-muted/50 hover:bg-muted border-b": style === "default",
+      // compact 스타일
+      "px-2 py-1 bg-muted/30 hover:bg-muted/50 border-b text-sm":
+        style === "compact",
+      // card 스타일
+      "px-4 py-3 bg-card border rounded-t-lg shadow-sm hover:shadow":
+        style === "card",
+    }
+  );
+
+  return (
+    <tr className="group-header-row">
+      <td
+        colSpan={columnCount}
+        className="p-0"
+        onClick={(e) => {
+          // 체크박스 클릭 시 토글 방지
+          if ((e.target as HTMLElement).closest('[data-checkbox="true"]')) {
+            return;
+          }
+          onToggle();
+        }}
+      >
+        <div className={headerClasses}>
+          {/* 펼치기/접기 아이콘 */}
+          <span className="flex-shrink-0 text-muted-foreground">
+            {group.expanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </span>
+
+          {/* 체크박스 */}
+          {showCheckbox && onSelectToggle && (
+            <span
+              data-checkbox="true"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelectToggle();
+              }}
+            >
+              <Checkbox
+                checked={group.selected}
+                className={cn(
+                  "data-[state=checked]:bg-primary",
+                  isIndeterminate && "data-[state=checked]:bg-muted"
+                )}
+              />
+              {isIndeterminate && (
+                <Minus className="absolute h-3 w-3 text-muted-foreground" />
+              )}
+            </span>
+          )}
+
+          {/* 그룹 라벨 */}
+          <span className="font-medium text-foreground">{group.groupLabel}</span>
+
+          {/* 요약 정보 */}
+          {summaryText && (
+            <span className="ml-auto text-sm text-muted-foreground">
+              {summaryText}
+            </span>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export default GroupHeader;
diff --git a/frontend/lib/registry/components/v2-table-grouped/config.ts b/frontend/lib/registry/components/v2-table-grouped/config.ts
new file mode 100644
index 00000000..fb38744c
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/config.ts
@@ -0,0 +1,64 @@
+import { TableGroupedConfig } from "./types";
+
+/**
+ * v2-table-grouped 기본 설정값
+ */
+export const defaultTableGroupedConfig: Partial<TableGroupedConfig> = {
+  // 그룹화 기본 설정
+  groupConfig: {
+    groupByColumn: "",
+    groupLabelFormat: "{value}",
+    defaultExpanded: true,
+    sortDirection: "asc",
+    summary: {
+      showCount: true,
+      sumColumns: [],
+    },
+  },
+
+  // 체크박스 기본 설정
+  showCheckbox: false,
+  checkboxMode: "multi",
+
+  // 페이지네이션 기본 설정
+  pagination: {
+    enabled: false,
+    pageSize: 10,
+  },
+
+  // UI 기본 설정
+  isReadOnly: false,
+  rowClickable: true,
+  showExpandAllButton: true,
+  groupHeaderStyle: "default",
+  emptyMessage: "데이터가 없습니다.",
+
+  // 높이 기본 설정
+  height: "auto",
+  maxHeight: 600,
+};
+
+/**
+ * 그룹 헤더 스타일 옵션
+ */
+export const groupHeaderStyleOptions = [
+  { value: "default", label: "기본" },
+  { value: "compact", label: "컴팩트" },
+  { value: "card", label: "카드" },
+];
+
+/**
+ * 체크박스 모드 옵션
+ */
+export const checkboxModeOptions = [
+  { value: "single", label: "단일 선택" },
+  { value: "multi", label: "다중 선택" },
+];
+
+/**
+ * 정렬 방향 옵션
+ */
+export const sortDirectionOptions = [
+  { value: "asc", label: "오름차순" },
+  { value: "desc", label: "내림차순" },
+];
diff --git a/frontend/lib/registry/components/v2-table-grouped/hooks/useGroupedData.ts b/frontend/lib/registry/components/v2-table-grouped/hooks/useGroupedData.ts
new file mode 100644
index 00000000..d9f40aca
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/hooks/useGroupedData.ts
@@ -0,0 +1,389 @@
+"use client";
+
+import { useState, useCallback, useMemo, useEffect } from "react";
+import {
+  TableGroupedConfig,
+  GroupState,
+  GroupSummary,
+  UseGroupedDataResult,
+} from "../types";
+import { apiClient } from "@/lib/api/client";
+
+/**
+ * 그룹 요약 데이터 계산
+ */
+function calculateSummary(
+  items: any[],
+  config: TableGroupedConfig
+): GroupSummary {
+  const summary: GroupSummary = {
+    count: items.length,
+  };
+
+  const summaryConfig = config.groupConfig?.summary;
+  if (!summaryConfig) return summary;
+
+  // 합계 계산
+  if (summaryConfig.sumColumns && summaryConfig.sumColumns.length > 0) {
+    summary.sum = {};
+    for (const col of summaryConfig.sumColumns) {
+      summary.sum[col] = items.reduce((acc, item) => {
+        const val = parseFloat(item[col]);
+        return acc + (isNaN(val) ? 0 : val);
+      }, 0);
+    }
+  }
+
+  // 평균 계산
+  if (summaryConfig.avgColumns && summaryConfig.avgColumns.length > 0) {
+    summary.avg = {};
+    for (const col of summaryConfig.avgColumns) {
+      const validItems = items.filter(
+        (item) => item[col] !== null && item[col] !== undefined
+      );
+      const sum = validItems.reduce((acc, item) => {
+        const val = parseFloat(item[col]);
+        return acc + (isNaN(val) ? 0 : val);
+      }, 0);
+      summary.avg[col] = validItems.length > 0 ? sum / validItems.length : 0;
+    }
+  }
+
+  // 최대값 계산
+  if (summaryConfig.maxColumns && summaryConfig.maxColumns.length > 0) {
+    summary.max = {};
+    for (const col of summaryConfig.maxColumns) {
+      const values = items
+        .map((item) => parseFloat(item[col]))
+        .filter((v) => !isNaN(v));
+      summary.max[col] = values.length > 0 ? Math.max(...values) : 0;
+    }
+  }
+
+  // 최소값 계산
+  if (summaryConfig.minColumns && summaryConfig.minColumns.length > 0) {
+    summary.min = {};
+    for (const col of summaryConfig.minColumns) {
+      const values = items
+        .map((item) => parseFloat(item[col]))
+        .filter((v) => !isNaN(v));
+      summary.min[col] = values.length > 0 ? Math.min(...values) : 0;
+    }
+  }
+
+  return summary;
+}
+
+/**
+ * 그룹 라벨 포맷팅
+ */
+function formatGroupLabel(
+  groupValue: any,
+  item: any,
+  format?: string
+): string {
+  if (!format) {
+    return String(groupValue ?? "(빈 값)");
+  }
+
+  // {value}를 그룹 값으로 치환
+  let label = format.replace("{value}", String(groupValue ?? "(빈 값)"));
+
+  // {컬럼명} 패턴을 해당 컬럼 값으로 치환
+  const columnPattern = /\{([^}]+)\}/g;
+  label = label.replace(columnPattern, (match, columnName) => {
+    if (columnName === "value") return String(groupValue ?? "");
+    return String(item?.[columnName] ?? "");
+  });
+
+  return label;
+}
+
+/**
+ * 데이터를 그룹화하는 훅
+ */
+export function useGroupedData(
+  config: TableGroupedConfig,
+  externalData?: any[],
+  searchFilters?: Record<string, any>
+): UseGroupedDataResult {
+  // 원본 데이터
+  const [rawData, setRawData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 그룹 펼침 상태 관리
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  // 사용자가 수동으로 펼침/접기를 조작했는지 여부
+  const [isManuallyControlled, setIsManuallyControlled] = useState(false);
+
+  // 선택 상태 관리
+  const [selectedItemIds, setSelectedItemIds] = useState<Set<string>>(
+    new Set()
+  );
+
+  // 테이블명 결정
+  const tableName = config.useCustomTable
+    ? config.customTableName
+    : config.selectedTable;
+
+  // 데이터 로드
+  const fetchData = useCallback(async () => {
+    if (externalData) {
+      setRawData(externalData);
+      return;
+    }
+
+    if (!tableName) {
+      setRawData([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await apiClient.post(
+        `/table-management/tables/${tableName}/data`,
+        {
+          page: 1,
+          size: 10000, // 그룹화를 위해 전체 데이터 로드
+          autoFilter: true,
+          search: searchFilters || {},
+        }
+      );
+
+      const responseData = response.data?.data?.data || response.data?.data || [];
+      setRawData(Array.isArray(responseData) ? responseData : []);
+    } catch (err: any) {
+      setError(err.message || "데이터 로드 중 오류 발생");
+      setRawData([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [tableName, externalData, searchFilters]);
+
+  // 초기 데이터 로드
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // 외부 데이터 변경 시 동기화
+  useEffect(() => {
+    if (externalData) {
+      setRawData(externalData);
+    }
+  }, [externalData]);
+
+  // 그룹화된 데이터 계산
+  const groups = useMemo((): GroupState[] => {
+    const groupByColumn = config.groupConfig?.groupByColumn;
+    if (!groupByColumn || rawData.length === 0) {
+      return [];
+    }
+
+    // 데이터를 그룹별로 분류
+    const groupMap = new Map<string, any[]>();
+
+    for (const item of rawData) {
+      const groupValue = item[groupByColumn];
+      const groupKey = String(groupValue ?? "__null__");
+
+      if (!groupMap.has(groupKey)) {
+        groupMap.set(groupKey, []);
+      }
+      groupMap.get(groupKey)!.push(item);
+    }
+
+    // 그룹 배열 생성
+    const groupArray: GroupState[] = [];
+    const defaultExpanded = config.groupConfig?.defaultExpanded ?? true;
+
+    for (const [groupKey, items] of groupMap.entries()) {
+      const firstItem = items[0];
+      const groupValue =
+        groupKey === "__null__" ? null : firstItem[groupByColumn];
+
+      // 펼침 상태 결정: 수동 조작 전에는 defaultExpanded, 수동 조작 후에는 expandedGroups 참조
+      const isExpanded = isManuallyControlled
+        ? expandedGroups.has(groupKey)
+        : defaultExpanded;
+
+      groupArray.push({
+        groupKey,
+        groupLabel: formatGroupLabel(
+          groupValue,
+          firstItem,
+          config.groupConfig?.groupLabelFormat
+        ),
+        expanded: isExpanded,
+        items,
+        summary: calculateSummary(items, config),
+        selected: items.every((item) =>
+          selectedItemIds.has(getItemId(item, config))
+        ),
+        selectedItemIds: items
+          .filter((item) => selectedItemIds.has(getItemId(item, config)))
+          .map((item) => getItemId(item, config)),
+      });
+    }
+
+    // 정렬
+    const sortDirection = config.groupConfig?.sortDirection ?? "asc";
+    groupArray.sort((a, b) => {
+      const comparison = a.groupLabel.localeCompare(b.groupLabel, "ko");
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+
+    return groupArray;
+  }, [rawData, config, expandedGroups, selectedItemIds, isManuallyControlled]);
+
+  // 아이템 ID 추출
+  function getItemId(item: any, cfg: TableGroupedConfig): string {
+    // id 또는 첫 번째 컬럼을 ID로 사용
+    if (item.id !== undefined) return String(item.id);
+    const firstCol = cfg.columns?.[0]?.columnName;
+    if (firstCol && item[firstCol] !== undefined) return String(item[firstCol]);
+    return JSON.stringify(item);
+  }
+
+  // 그룹 토글
+  const toggleGroup = useCallback((groupKey: string) => {
+    setIsManuallyControlled(true);
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupKey)) {
+        next.delete(groupKey);
+      } else {
+        next.add(groupKey);
+      }
+      return next;
+    });
+  }, []);
+
+  // 전체 펼치기
+  const expandAll = useCallback(() => {
+    setIsManuallyControlled(true);
+    setExpandedGroups(new Set(groups.map((g) => g.groupKey)));
+  }, [groups]);
+
+  // 전체 접기
+  const collapseAll = useCallback(() => {
+    setIsManuallyControlled(true);
+    setExpandedGroups(new Set());
+  }, []);
+
+  // 아이템 선택 토글
+  const toggleItemSelection = useCallback(
+    (groupKey: string, itemId: string) => {
+      setSelectedItemIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(itemId)) {
+          next.delete(itemId);
+        } else {
+          // 단일 선택 모드
+          if (config.checkboxMode === "single") {
+            next.clear();
+          }
+          next.add(itemId);
+        }
+        return next;
+      });
+    },
+    [config.checkboxMode]
+  );
+
+  // 그룹 전체 선택 토글
+  const toggleGroupSelection = useCallback(
+    (groupKey: string) => {
+      const group = groups.find((g) => g.groupKey === groupKey);
+      if (!group) return;
+
+      setSelectedItemIds((prev) => {
+        const next = new Set(prev);
+        const groupItemIds = group.items.map((item) => getItemId(item, config));
+        const allSelected = groupItemIds.every((id) => next.has(id));
+
+        if (allSelected) {
+          // 전체 해제
+          for (const id of groupItemIds) {
+            next.delete(id);
+          }
+        } else {
+          // 전체 선택
+          if (config.checkboxMode === "single") {
+            next.clear();
+            next.add(groupItemIds[0]);
+          } else {
+            for (const id of groupItemIds) {
+              next.add(id);
+            }
+          }
+        }
+        return next;
+      });
+    },
+    [groups, config]
+  );
+
+  // 전체 선택 토글
+  const toggleAllSelection = useCallback(() => {
+    const allItemIds = rawData.map((item) => getItemId(item, config));
+    const allSelected = allItemIds.every((id) => selectedItemIds.has(id));
+
+    if (allSelected) {
+      setSelectedItemIds(new Set());
+    } else {
+      if (config.checkboxMode === "single" && allItemIds.length > 0) {
+        setSelectedItemIds(new Set([allItemIds[0]]));
+      } else {
+        setSelectedItemIds(new Set(allItemIds));
+      }
+    }
+  }, [rawData, config, selectedItemIds]);
+
+  // 선택된 아이템 목록
+  const selectedItems = useMemo(() => {
+    return rawData.filter((item) =>
+      selectedItemIds.has(getItemId(item, config))
+    );
+  }, [rawData, selectedItemIds, config]);
+
+  // 모두 선택 여부
+  const isAllSelected = useMemo(() => {
+    if (rawData.length === 0) return false;
+    return rawData.every((item) =>
+      selectedItemIds.has(getItemId(item, config))
+    );
+  }, [rawData, selectedItemIds, config]);
+
+  // 일부 선택 여부
+  const isIndeterminate = useMemo(() => {
+    if (rawData.length === 0) return false;
+    const selectedCount = rawData.filter((item) =>
+      selectedItemIds.has(getItemId(item, config))
+    ).length;
+    return selectedCount > 0 && selectedCount < rawData.length;
+  }, [rawData, selectedItemIds, config]);
+
+  return {
+    groups,
+    isLoading,
+    error,
+    toggleGroup,
+    expandAll,
+    collapseAll,
+    toggleItemSelection,
+    toggleGroupSelection,
+    toggleAllSelection,
+    selectedItems,
+    isAllSelected,
+    isIndeterminate,
+    refresh: fetchData,
+    rawData,
+    totalCount: rawData.length,
+    groupCount: groups.length,
+  };
+}
+
+export default useGroupedData;
diff --git a/frontend/lib/registry/components/v2-table-grouped/index.ts b/frontend/lib/registry/components/v2-table-grouped/index.ts
new file mode 100644
index 00000000..7e984490
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/index.ts
@@ -0,0 +1,75 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import type { WebType } from "@/types/screen";
+import { TableGroupedComponent } from "./TableGroupedComponent";
+import { TableGroupedConfigPanel } from "./TableGroupedConfigPanel";
+import { TableGroupedConfig } from "./types";
+
+/**
+ * V2 그룹화 테이블 컴포넌트 Definition
+ *
+ * 데이터를 특정 컬럼 기준으로 그룹화하여 접기/펼치기 기능을 제공합니다.
+ * v2-table-list를 기반으로 확장된 컴포넌트입니다.
+ */
+export const V2TableGroupedDefinition = createComponentDefinition({
+  id: "v2-table-grouped",
+  name: "그룹화 테이블",
+  nameEng: "Grouped Table Component",
+  description: "데이터를 그룹화하여 접기/펼치기 기능을 제공하는 테이블",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: TableGroupedComponent,
+  defaultConfig: {
+    // 테이블 설정
+    selectedTable: "",
+    useCustomTable: false,
+    customTableName: "",
+
+    // 그룹화 설정
+    groupConfig: {
+      groupByColumn: "",
+      groupLabelFormat: "{value}",
+      defaultExpanded: true,
+      sortDirection: "asc",
+      summary: {
+        showCount: true,
+        sumColumns: [],
+      },
+    },
+
+    // 컬럼 설정
+    columns: [],
+
+    // 체크박스 설정
+    showCheckbox: false,
+    checkboxMode: "multi",
+
+    // 페이지네이션 설정
+    pagination: {
+      enabled: false,
+      pageSize: 10,
+    },
+
+    // UI 설정
+    isReadOnly: false,
+    rowClickable: true,
+    showExpandAllButton: true,
+    groupHeaderStyle: "default",
+    emptyMessage: "데이터가 없습니다.",
+    height: "auto",
+    maxHeight: 600,
+  },
+  defaultSize: { width: 800, height: 500 },
+  configPanel: TableGroupedConfigPanel,
+  icon: "Layers",
+  tags: ["테이블", "그룹화", "접기", "펼치기", "목록"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+// 타입 내보내기
+export type { TableGroupedConfig } from "./types";
diff --git a/frontend/lib/registry/components/v2-table-grouped/types.ts b/frontend/lib/registry/components/v2-table-grouped/types.ts
new file mode 100644
index 00000000..20bfc77b
--- /dev/null
+++ b/frontend/lib/registry/components/v2-table-grouped/types.ts
@@ -0,0 +1,299 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+import { ColumnConfig, EntityJoinInfo } from "../v2-table-list/types";
+
+/**
+ * 그룹 요약 설정
+ */
+export interface GroupSummaryConfig {
+  /** 합계를 계산할 컬럼 목록 */
+  sumColumns?: string[];
+  /** 개수 표시 여부 */
+  showCount?: boolean;
+  /** 평균 컬럼 목록 */
+  avgColumns?: string[];
+  /** 최대값 컬럼 목록 */
+  maxColumns?: string[];
+  /** 최소값 컬럼 목록 */
+  minColumns?: string[];
+}
+
+/**
+ * 그룹화 설정
+ */
+export interface GroupConfig {
+  /** 그룹화 기준 컬럼 */
+  groupByColumn: string;
+
+  /** 그룹 표시 형식 (예: "{item_name} ({item_code})") */
+  groupLabelFormat?: string;
+
+  /** 그룹 요약 설정 */
+  summary?: GroupSummaryConfig;
+
+  /** 초기 펼침 상태 (기본값: true) */
+  defaultExpanded?: boolean;
+
+  /** 중첩 그룹 (다중 그룹화) - 향후 확장 */
+  nestedGroup?: GroupConfig;
+
+  /** 그룹 정렬 방식 */
+  sortDirection?: "asc" | "desc";
+
+  /** 그룹 정렬 컬럼 (기본: groupByColumn) */
+  sortColumn?: string;
+}
+
+/**
+ * 그룹화 테이블 설정 (ComponentConfig 기반)
+ */
+export interface TableGroupedConfig extends ComponentConfig {
+  /** 테이블명 */
+  selectedTable?: string;
+
+  /** 커스텀 테이블 사용 여부 */
+  useCustomTable?: boolean;
+
+  /** 커스텀 테이블명 */
+  customTableName?: string;
+
+  /** 그룹화 설정 */
+  groupConfig: GroupConfig;
+
+  /** 컬럼 설정 */
+  columns?: ColumnConfig[];
+
+  /** 체크박스 표시 여부 */
+  showCheckbox?: boolean;
+
+  /** 체크박스 모드 */
+  checkboxMode?: "single" | "multi";
+
+  /** 페이지네이션 (그룹 단위) */
+  pagination?: {
+    enabled: boolean;
+    pageSize: number;
+  };
+
+  /** 기본 정렬 설정 */
+  defaultSort?: {
+    column: string;
+    direction: "asc" | "desc";
+  };
+
+  /** 읽기 전용 */
+  isReadOnly?: boolean;
+
+  /** 행 클릭 가능 여부 */
+  rowClickable?: boolean;
+
+  /** 높이 설정 */
+  height?: number | string;
+
+  /** 최대 높이 */
+  maxHeight?: number | string;
+
+  /** 전체 펼치기/접기 버튼 표시 */
+  showExpandAllButton?: boolean;
+
+  /** 그룹 헤더 스타일 */
+  groupHeaderStyle?: "default" | "compact" | "card";
+
+  /** 빈 데이터 메시지 */
+  emptyMessage?: string;
+
+  /** Entity 조인 컬럼 정보 */
+  entityJoinColumns?: Array<{
+    columnName: string;
+    entityJoinInfo: EntityJoinInfo;
+  }>;
+
+  /** 데이터 필터 */
+  dataFilter?: {
+    column: string;
+    operator: "eq" | "ne" | "gt" | "lt" | "gte" | "lte" | "like" | "in";
+    value: any;
+  }[];
+
+  /** 연결된 필터 설정 (다른 컴포넌트와 연동) */
+  linkedFilters?: LinkedFilterConfig[];
+}
+
+/**
+ * 연결된 필터 설정
+ */
+export interface LinkedFilterConfig {
+  /** 소스 컴포넌트 ID */
+  sourceComponentId: string;
+  /** 소스 필드 */
+  sourceField?: string;
+  /** 대상 컬럼 */
+  targetColumn: string;
+  /** 활성화 여부 */
+  enabled?: boolean;
+}
+
+/**
+ * 그룹 요약 데이터
+ */
+export interface GroupSummary {
+  /** 개수 */
+  count: number;
+  /** 합계 (컬럼별) */
+  sum?: Record<string, number>;
+  /** 평균 (컬럼별) */
+  avg?: Record<string, number>;
+  /** 최대값 (컬럼별) */
+  max?: Record<string, number>;
+  /** 최소값 (컬럼별) */
+  min?: Record<string, number>;
+}
+
+/**
+ * 그룹 상태
+ */
+export interface GroupState {
+  /** 그룹 키 (groupByColumn 값) */
+  groupKey: string;
+
+  /** 그룹 표시 라벨 */
+  groupLabel: string;
+
+  /** 펼침 여부 */
+  expanded: boolean;
+
+  /** 그룹 내 데이터 */
+  items: any[];
+
+  /** 그룹 요약 데이터 */
+  summary: GroupSummary;
+
+  /** 그룹 선택 여부 */
+  selected?: boolean;
+
+  /** 그룹 내 선택된 아이템 ID 목록 */
+  selectedItemIds?: string[];
+}
+
+/**
+ * 선택 이벤트 데이터
+ */
+export interface SelectionChangeEvent {
+  /** 선택된 그룹 키 목록 */
+  selectedGroups: string[];
+  /** 선택된 아이템 (전체) */
+  selectedItems: any[];
+  /** 모두 선택 여부 */
+  isAllSelected: boolean;
+}
+
+/**
+ * 그룹 토글 이벤트
+ */
+export interface GroupToggleEvent {
+  /** 그룹 키 */
+  groupKey: string;
+  /** 펼침 상태 */
+  expanded: boolean;
+}
+
+/**
+ * 행 클릭 이벤트
+ */
+export interface RowClickEvent {
+  /** 클릭된 행 데이터 */
+  row: any;
+  /** 그룹 키 */
+  groupKey: string;
+  /** 그룹 내 인덱스 */
+  indexInGroup: number;
+}
+
+/**
+ * TableGroupedComponent Props
+ */
+export interface TableGroupedComponentProps {
+  /** 컴포넌트 설정 */
+  config: TableGroupedConfig;
+
+  /** 디자인 모드 여부 */
+  isDesignMode?: boolean;
+
+  /** 폼 데이터 (formData 전달용) */
+  formData?: Record<string, any>;
+
+  /** 선택 변경 이벤트 */
+  onSelectionChange?: (event: SelectionChangeEvent) => void;
+
+  /** 그룹 토글 이벤트 */
+  onGroupToggle?: (event: GroupToggleEvent) => void;
+
+  /** 행 클릭 이벤트 */
+  onRowClick?: (event: RowClickEvent) => void;
+
+  /** 외부에서 주입된 데이터 (선택) */
+  externalData?: any[];
+
+  /** 로딩 상태 (외부 제어) */
+  isLoading?: boolean;
+
+  /** 에러 상태 (외부 제어) */
+  error?: string;
+
+  /** 컴포넌트 ID */
+  componentId?: string;
+}
+
+/**
+ * useGroupedData 훅 반환 타입
+ */
+export interface UseGroupedDataResult {
+  /** 그룹화된 데이터 */
+  groups: GroupState[];
+
+  /** 로딩 상태 */
+  isLoading: boolean;
+
+  /** 에러 */
+  error: string | null;
+
+  /** 그룹 펼치기/접기 토글 */
+  toggleGroup: (groupKey: string) => void;
+
+  /** 전체 펼치기 */
+  expandAll: () => void;
+
+  /** 전체 접기 */
+  collapseAll: () => void;
+
+  /** 아이템 선택 토글 */
+  toggleItemSelection: (groupKey: string, itemId: string) => void;
+
+  /** 그룹 전체 선택 토글 */
+  toggleGroupSelection: (groupKey: string) => void;
+
+  /** 전체 선택 토글 */
+  toggleAllSelection: () => void;
+
+  /** 선택된 아이템 목록 */
+  selectedItems: any[];
+
+  /** 모두 선택 여부 */
+  isAllSelected: boolean;
+
+  /** 일부 선택 여부 */
+  isIndeterminate: boolean;
+
+  /** 데이터 새로고침 */
+  refresh: () => void;
+
+  /** 원본 데이터 */
+  rawData: any[];
+
+  /** 전체 데이터 개수 */
+  totalCount: number;
+
+  /** 그룹 개수 */
+  groupCount: number;
+}
diff --git a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
index c99f9876..6e529ab9 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@@ -8,6 +8,7 @@ import { entityJoinApi } from "@/lib/api/entityJoin";
 import { codeCache } from "@/lib/caching/codeCache";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { getFullImageUrl } from "@/lib/api/client";
+import { getFilePreviewUrl } from "@/lib/api/file";
 import { Button } from "@/components/ui/button";
 import { v2EventBus, V2_EVENTS, V2ErrorBoundary } from "@/lib/v2-core";
 
@@ -85,7 +86,7 @@ interface GroupedData {
 // 캐시 및 유틸리티
 // ========================================
 
-const tableColumnCache = new Map<string, { columns: any[]; timestamp: number }>();
+const tableColumnCache = new Map<string, { columns: any[]; inputTypes?: any[]; timestamp: number }>();
 const tableInfoCache = new Map<string, { tables: any[]; timestamp: number }>();
 const TABLE_CACHE_TTL = 5 * 60 * 1000; // 5분
 
@@ -459,6 +460,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 🆕 Filter Builder (고급 필터) 관련 상태 - filteredData보다 먼저 정의해야 함
   const [filterGroups, setFilterGroups] = useState<FilterGroup[]>([]);
+  
+  // 🆕 joinColumnMapping - filteredData에서 사용하므로 먼저 정의해야 함
+  const [joinColumnMapping, setJoinColumnMapping] = useState<Record<string, string>>({});
 
   // 🆕 분할 패널에서 우측에 이미 추가된 항목 필터링 (좌측 테이블에만 적용) + 헤더 필터
   const filteredData = useMemo(() => {
@@ -473,14 +477,17 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
-    // 2. 헤더 필터 적용 (joinColumnMapping 사용 안 함 - 직접 컬럼명 사용)
+    // 2. 헤더 필터 적용 (joinColumnMapping 사용 - 조인된 컬럼과 일치해야 함)
     if (Object.keys(headerFilters).length > 0) {
       result = result.filter((row) => {
         return Object.entries(headerFilters).every(([columnName, values]) => {
           if (values.size === 0) return true;
 
-          // 여러 가능한 컬럼명 시도
-          const cellValue = row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
+          // joinColumnMapping을 사용하여 조인된 컬럼명 확인
+          const mappedColumnName = joinColumnMapping[columnName] || columnName;
+          
+          // 여러 가능한 컬럼명 시도 (mappedColumnName 우선)
+          const cellValue = row[mappedColumnName] ?? row[columnName] ?? row[columnName.toLowerCase()] ?? row[columnName.toUpperCase()];
           const cellStr = cellValue !== null && cellValue !== undefined ? String(cellValue) : "";
 
           return values.has(cellStr);
@@ -541,7 +548,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     }
 
     return result;
-  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups]);
+  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds, headerFilters, filterGroups, joinColumnMapping]);
 
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -554,7 +561,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [tableLabel, setTableLabel] = useState<string>("");
   const [localPageSize, setLocalPageSize] = useState<number>(tableConfig.pagination?.pageSize || 20);
   const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
-  const [joinColumnMapping, setJoinColumnMapping] = useState<Record<string, string>>({});
   const [columnMeta, setColumnMeta] = useState<
     Record<string, { webType?: string; codeCategory?: string; inputType?: string }>
   >({});
@@ -1005,7 +1011,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     // unregisterTable 함수는 의존성이 없어 안정적임
   ]);
 
-  // 🎯 초기 로드 시 localStorage에서 정렬 상태 불러오기
+  // 🎯 초기 로드 시 localStorage에서 정렬 상태 불러오기 (없으면 defaultSort 적용)
   useEffect(() => {
     if (!tableConfig.selectedTable || !userId || hasInitializedSort.current) return;
 
@@ -1019,12 +1025,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           setSortColumn(column);
           setSortDirection(direction);
           hasInitializedSort.current = true;
+          return;
         }
       } catch (error) {
         // 정렬 상태 복원 실패
       }
     }
-  }, [tableConfig.selectedTable, userId]);
+
+    // localStorage에 저장된 정렬이 없으면 defaultSort 설정 적용
+    if (tableConfig.defaultSort?.columnName) {
+      setSortColumn(tableConfig.defaultSort.columnName);
+      setSortDirection(tableConfig.defaultSort.direction || "asc");
+      hasInitializedSort.current = true;
+    }
+  }, [tableConfig.selectedTable, tableConfig.defaultSort, userId]);
 
   // 🆕 초기 로드 시 localStorage에서 컬럼 순서 불러오기
   useEffect(() => {
@@ -1465,8 +1479,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     try {
       const page = tableConfig.pagination?.currentPage || currentPage;
       const pageSize = localPageSize;
-      const sortBy = sortColumn || undefined;
-      const sortOrder = sortDirection;
+      // 🆕 sortColumn이 없으면 defaultSort 설정을 fallback으로 사용
+      const sortBy = sortColumn || tableConfig.defaultSort?.columnName || undefined;
+      const sortOrder = sortColumn ? sortDirection : (tableConfig.defaultSort?.direction || sortDirection);
       const search = searchTerm || undefined;
 
       // 🆕 연결 필터 값 가져오기 (분할 패널 내부일 때)
@@ -4047,18 +4062,33 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       const inputType = meta?.inputType || column.inputType;
 
       // 🖼️ 이미지 타입: 작은 썸네일 표시
-      if (inputType === "image" && value && typeof value === "string") {
-        const imageUrl = getFullImageUrl(value);
+      if (inputType === "image" && value) {
+        // value가 objid (숫자 또는 숫자 문자열)인 경우 파일 API URL 사용
+        // 🔑 download 대신 preview 사용 (공개 접근 허용)
+        const strValue = String(value);
+        const isObjid = /^\d+$/.test(strValue);
+        // 🔑 상대 경로(/api/...) 대신 전체 URL 사용 (Docker 환경에서 Next.js rewrite 의존 방지)
+        const imageUrl = isObjid
+          ? getFilePreviewUrl(strValue)
+          : getFullImageUrl(strValue);
         return (
-          <img
-            src={imageUrl}
-            alt="이미지"
-            className="h-10 w-10 rounded object-cover"
-            onError={(e) => {
-              e.currentTarget.src =
-                "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23f3f4f6'/%3E%3C/svg%3E";
-            }}
-          />
+          <div className="flex justify-center">
+            <img
+              src={imageUrl}
+              alt="이미지"
+              className="h-10 w-10 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
+              style={{ maxWidth: "40px", maxHeight: "40px" }}
+              onClick={(e) => {
+                e.stopPropagation();
+                // 이미지 클릭 시 새 탭에서 크게 보기
+                window.open(imageUrl, "_blank");
+              }}
+              onError={(e) => {
+                // 이미지 로드 실패 시 기본 아이콘 표시
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          </div>
         );
       }
 
diff --git a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
index ff76960e..8f14a250 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
@@ -10,7 +10,19 @@ import { TableListConfig, ColumnConfig } from "./types";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { tableTypeApi } from "@/lib/api/screen";
 import { tableManagementApi } from "@/lib/api/tableManagement";
-import { Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Check, Lock, Unlock, Database, Table2, Link2 } from "lucide-react";
+import {
+  Plus,
+  Trash2,
+  ArrowUp,
+  ArrowDown,
+  ChevronsUpDown,
+  Check,
+  Lock,
+  Unlock,
+  Database,
+  Table2,
+  Link2,
+} from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { cn } from "@/lib/utils";
@@ -35,7 +47,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 }) => {
   // config가 undefined인 경우 빈 객체로 초기화
   const config = configProp || {};
-  
+
   // console.log("🔍 TableListConfigPanel props:", {
   //   config,
   //   configType: typeof config,
@@ -202,12 +214,12 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
         try {
           const result = await tableManagementApi.getColumnList(targetTableName);
           console.log("🔧 tableManagementApi 응답:", result);
-          
-            if (result.success && result.data) {
+
+          if (result.success && result.data) {
             // API 응답 구조: { columns: [...], total, page, ... }
             const columns = Array.isArray(result.data) ? result.data : result.data.columns;
             console.log("🔧 컬럼 배열:", columns);
-            
+
             if (columns && Array.isArray(columns)) {
               setAvailableColumns(
                 columns.map((col: any) => ({
@@ -319,7 +331,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
   const handleChange = (key: keyof TableListConfig, value: any) => {
     // 기존 config와 병합하여 전달 (다른 속성 손실 방지)
-    onChange({ ...config, [key]: value });
+    const newConfig = { ...config, [key]: value };
+    console.log("📊 TableListConfigPanel handleChange:", { key, value, newConfig });
+    onChange(newConfig);
   };
 
   const handleNestedChange = (parentKey: keyof TableListConfig, childKey: string, value: any) => {
@@ -777,7 +791,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showEditMode ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showEditMode", checked)}
               />
-              <Label htmlFor="showEditMode" className="text-xs">즉시 저장</Label>
+              <Label htmlFor="showEditMode" className="text-xs">
+                즉시 저장
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -785,7 +801,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showExcel ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showExcel", checked)}
               />
-              <Label htmlFor="showExcel" className="text-xs">Excel</Label>
+              <Label htmlFor="showExcel" className="text-xs">
+                Excel
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -793,7 +811,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showPdf ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showPdf", checked)}
               />
-              <Label htmlFor="showPdf" className="text-xs">PDF</Label>
+              <Label htmlFor="showPdf" className="text-xs">
+                PDF
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -801,7 +821,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showCopy ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showCopy", checked)}
               />
-              <Label htmlFor="showCopy" className="text-xs">복사</Label>
+              <Label htmlFor="showCopy" className="text-xs">
+                복사
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -809,7 +831,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showSearch ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showSearch", checked)}
               />
-              <Label htmlFor="showSearch" className="text-xs">검색</Label>
+              <Label htmlFor="showSearch" className="text-xs">
+                검색
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -817,7 +841,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showFilter ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showFilter", checked)}
               />
-              <Label htmlFor="showFilter" className="text-xs">필터</Label>
+              <Label htmlFor="showFilter" className="text-xs">
+                필터
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -825,7 +851,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showRefresh ?? false}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showRefresh", checked)}
               />
-              <Label htmlFor="showRefresh" className="text-xs">새로고침 (상단)</Label>
+              <Label htmlFor="showRefresh" className="text-xs">
+                새로고침 (상단)
+              </Label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -833,7 +861,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 checked={config.toolbar?.showPaginationRefresh ?? true}
                 onCheckedChange={(checked) => handleNestedChange("toolbar", "showPaginationRefresh", checked)}
               />
-              <Label htmlFor="showPaginationRefresh" className="text-xs">새로고침 (하단)</Label>
+              <Label htmlFor="showPaginationRefresh" className="text-xs">
+                새로고침 (하단)
+              </Label>
             </div>
           </div>
         </div>
@@ -884,6 +914,67 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
           </div>
         </div>
 
+        {/* 기본 정렬 설정 */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">기본 정렬 설정</h3>
+            <p className="text-muted-foreground text-[10px]">테이블 로드 시 기본 정렬 순서를 지정합니다</p>
+          </div>
+          <hr className="border-border" />
+          <div className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="defaultSortColumn" className="text-xs">
+                정렬 컬럼
+              </Label>
+              <select
+                id="defaultSortColumn"
+                value={config.defaultSort?.columnName || ""}
+                onChange={(e) => {
+                  if (e.target.value) {
+                    handleChange("defaultSort", {
+                      columnName: e.target.value,
+                      direction: config.defaultSort?.direction || "asc",
+                    });
+                  } else {
+                    handleChange("defaultSort", undefined);
+                  }
+                }}
+                className="h-8 w-full rounded-md border px-2 text-xs"
+              >
+                <option value="">정렬 없음</option>
+                {availableColumns.map((col) => (
+                  <option key={col.columnName} value={col.columnName}>
+                    {col.label || col.columnName}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {config.defaultSort?.columnName && (
+              <div className="space-y-1">
+                <Label htmlFor="defaultSortDirection" className="text-xs">
+                  정렬 방향
+                </Label>
+                <select
+                  id="defaultSortDirection"
+                  value={config.defaultSort?.direction || "asc"}
+                  onChange={(e) =>
+                    handleChange("defaultSort", {
+                      ...config.defaultSort,
+                      columnName: config.defaultSort?.columnName || "",
+                      direction: e.target.value as "asc" | "desc",
+                    })
+                  }
+                  className="h-8 w-full rounded-md border px-2 text-xs"
+                >
+                  <option value="asc">오름차순 (A→Z, 1→9)</option>
+                  <option value="desc">내림차순 (Z→A, 9→1)</option>
+                </select>
+              </div>
+            )}
+          </div>
+        </div>
+
         {/* 가로 스크롤 및 컬럼 고정 */}
         <div className="space-y-3">
           <div>
@@ -1096,7 +1187,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
             <div className="space-y-2">
               <div>
                 <h3 className="text-sm font-semibold">컬럼 선택</h3>
-                <p className="text-[10px] text-muted-foreground">표시할 컬럼을 선택하세요</p>
+                <p className="text-muted-foreground text-[10px]">표시할 컬럼을 선택하세요</p>
               </div>
               <hr className="border-border" />
               {availableColumns.length > 0 ? (
@@ -1113,7 +1204,10 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         onClick={() => {
                           if (isAdded) {
                             // 컬럼 제거
-                            handleChange("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
+                            handleChange(
+                              "columns",
+                              config.columns?.filter((c) => c.columnName !== column.columnName) || [],
+                            );
                           } else {
                             // 컬럼 추가
                             addColumn(column.columnName);
@@ -1124,7 +1218,10 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                           checked={isAdded}
                           onCheckedChange={() => {
                             if (isAdded) {
-                              handleChange("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
+                              handleChange(
+                                "columns",
+                                config.columns?.filter((c) => c.columnName !== column.columnName) || [],
+                              );
                             } else {
                               addColumn(column.columnName);
                             }
@@ -1133,7 +1230,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         />
                         <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.label || column.columnName}</span>
-                        <span className="text-[10px] text-gray-400 ml-auto">{column.input_type || column.dataType}</span>
+                        <span className="ml-auto text-[10px] text-gray-400">
+                          {column.input_type || column.dataType}
+                        </span>
                       </div>
                     );
                   })}
@@ -1148,13 +1247,13 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
               <div className="space-y-2">
                 <div>
                   <h3 className="text-sm font-semibold">Entity 조인 컬럼</h3>
-                  <p className="text-[10px] text-muted-foreground">연관 테이블의 컬럼을 선택하세요</p>
+                  <p className="text-muted-foreground text-[10px]">연관 테이블의 컬럼을 선택하세요</p>
                 </div>
                 <hr className="border-border" />
                 <div className="space-y-3">
                   {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="flex items-center gap-2 text-[10px] font-medium text-blue-600 mb-1">
+                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <Badge variant="outline" className="text-[10px]">
@@ -1162,56 +1261,65 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         </Badge>
                       </div>
                       <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
-                      {joinTable.availableColumns.map((column, colIndex) => {
-                        const matchingJoinColumn = entityJoinColumns.availableColumns.find(
-                          (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                        );
+                        {joinTable.availableColumns.map((column, colIndex) => {
+                          const matchingJoinColumn = entityJoinColumns.availableColumns.find(
+                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                          );
 
-                        const isAlreadyAdded = config.columns?.some(
-                          (col) => col.columnName === matchingJoinColumn?.joinAlias,
-                        );
+                          const isAlreadyAdded = config.columns?.some(
+                            (col) => col.columnName === matchingJoinColumn?.joinAlias,
+                          );
 
                           if (!matchingJoinColumn) return null;
 
-                return (
-                  <div
+                          return (
+                            <div
                               key={colIndex}
                               className={cn(
-                                "hover:bg-blue-100/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
                                 isAlreadyAdded && "bg-blue-100",
                               )}
-                        onClick={() => {
+                              onClick={() => {
                                 if (isAlreadyAdded) {
                                   // 컬럼 제거
-                                  handleChange("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
+                                  handleChange(
+                                    "columns",
+                                    config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || [],
+                                  );
                                 } else {
                                   // 컬럼 추가
                                   addEntityColumn(matchingJoinColumn);
                                 }
                               }}
                             >
-                      <Checkbox
+                              <Checkbox
                                 checked={isAlreadyAdded}
                                 onCheckedChange={() => {
                                   if (isAlreadyAdded) {
-                                    handleChange("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
-                          } else {
+                                    handleChange(
+                                      "columns",
+                                      config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) ||
+                                        [],
+                                    );
+                                  } else {
                                     addEntityColumn(matchingJoinColumn);
-                          }
-                        }}
+                                  }
+                                }}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" />
+                              <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="text-[10px] text-blue-400 ml-auto">{column.inputType || column.dataType}</span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
+                              <span className="ml-auto text-[10px] text-blue-400">
+                                {column.inputType || column.dataType}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
                   ))}
-            </div>
-          </div>
+                </div>
+              </div>
             )}
           </>
         )}
@@ -1238,7 +1346,6 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
             onConfigChange={(dataFilter) => handleChange("dataFilter", dataFilter)}
           />
         </div>
-
       </div>
     </div>
   );
diff --git a/frontend/lib/registry/components/v2-table-list/types.ts b/frontend/lib/registry/components/v2-table-list/types.ts
index a43ccdfa..1cc04375 100644
--- a/frontend/lib/registry/components/v2-table-list/types.ts
+++ b/frontend/lib/registry/components/v2-table-list/types.ts
@@ -278,6 +278,12 @@ export interface TableListConfig extends ComponentConfig {
   autoLoad: boolean;
   refreshInterval?: number; // 초 단위
 
+  // 🆕 기본 정렬 설정
+  defaultSort?: {
+    columnName: string; // 정렬할 컬럼명
+    direction: "asc" | "desc"; // 정렬 방향
+  };
+
   // 🆕 툴바 버튼 표시 설정
   toolbar?: ToolbarConfig;
 
diff --git a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
index a3bde9a4..94d0c742 100644
--- a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
+++ b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
@@ -475,9 +475,21 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
           filterValue = filterValue.join("|");
         }
 
+        // 🔧 filterType에 따라 operator 설정
+        // - "select" 유형: 정확히 일치 (equals)
+        // - "text" 유형: 부분 일치 (contains)
+        // - "date", "number": 각각 적절한 처리
+        let operator = "contains"; // 기본값
+        if (filter.filterType === "select") {
+          operator = "equals"; // 선택 필터는 정확히 일치
+        } else if (filter.filterType === "number") {
+          operator = "equals"; // 숫자도 정확히 일치
+        }
+
         return {
           ...filter,
           value: filterValue || "",
+          operator, // operator 추가
         };
       })
       .filter((f) => {
diff --git a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
index 91965aa8..8645fed9 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
@@ -365,6 +365,7 @@ const TabsDesignEditor: React.FC<{
                       }}
                       onClick={(e) => {
                         e.stopPropagation();
+                        console.log("🔍 [탭 컴포넌트] 클릭:", { activeTabId, compId: comp.id, hasOnSelectTabComponent: !!onSelectTabComponent });
                         onSelectTabComponent?.(activeTabId, comp.id, comp);
                       }}
                     >
diff --git a/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx
index 07ce3f34..78157d3e 100644
--- a/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx
@@ -84,23 +84,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
 
   return (
     <div style={componentStyle} className={className} {...domProps}>
-      {/* 라벨 렌더링 */}
-      {component.label && (component.style?.labelDisplay ?? true) && (
-        <label
-          style={{
-            position: "absolute",
-            top: "-25px",
-            left: "0px",
-            fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
-            fontWeight: "500",
-          }}
-        >
-          {component.label}
-          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
-        </label>
-      )}
-
+      {/* v2-text-display는 텍스트 표시 전용이므로 별도 라벨 불필요 */}
       <div style={textStyle} onClick={handleClick} onDragStart={onDragStart} onDragEnd={onDragEnd}>
         {componentConfig.text || "텍스트를 입력하세요"}
       </div>
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/README.md b/frontend/lib/registry/components/v2-timeline-scheduler/README.md
new file mode 100644
index 00000000..2e8d7262
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/README.md
@@ -0,0 +1,159 @@
+# v2-timeline-scheduler
+
+간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
+
+## 개요
+
+`v2-timeline-scheduler`는 생산계획, 일정관리 등에서 사용할 수 있는 타임라인 기반의 스케줄러 컴포넌트입니다. 리소스(설비, 작업자 등)별로 스케줄을 시각화하고, 드래그/리사이즈로 일정을 조정할 수 있습니다.
+
+## 핵심 기능
+
+| 기능 | 설명 |
+|------|------|
+| 타임라인 그리드 | 일/주/월 단위 그리드 표시 |
+| 스케줄 바 | 시작~종료 기간 바 렌더링 |
+| 리소스 행 | 설비/작업자별 행 구분 |
+| 드래그 이동 | 스케줄 바 드래그로 날짜 변경 |
+| 리사이즈 | 바 양쪽 핸들로 기간 조정 |
+| 줌 레벨 | 일/주/월 단위 전환 |
+| 진행률 표시 | 바 내부 진행률 표시 |
+| 오늘 표시선 | 현재 날짜 표시선 |
+
+## 사용법
+
+### 기본 사용
+
+```tsx
+import { TimelineSchedulerComponent } from "@/lib/registry/components/v2-timeline-scheduler";
+
+<TimelineSchedulerComponent
+  config={{
+    selectedTable: "production_schedule",
+    resourceTable: "equipment",
+    fieldMapping: {
+      id: "id",
+      resourceId: "equipment_id",
+      title: "plan_name",
+      startDate: "start_date",
+      endDate: "end_date",
+      status: "status",
+      progress: "progress",
+    },
+    resourceFieldMapping: {
+      id: "id",
+      name: "equipment_name",
+    },
+    defaultZoomLevel: "day",
+    editable: true,
+  }}
+  onScheduleClick={(event) => {
+    console.log("클릭된 스케줄:", event.schedule);
+  }}
+  onDragEnd={(event) => {
+    console.log("드래그 완료:", event);
+  }}
+/>
+```
+
+### 설정 옵션
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `selectedTable` | string | - | 스케줄 데이터 테이블명 |
+| `resourceTable` | string | - | 리소스 테이블명 |
+| `fieldMapping` | object | - | 스케줄 필드 매핑 |
+| `resourceFieldMapping` | object | - | 리소스 필드 매핑 |
+| `defaultZoomLevel` | "day" \| "week" \| "month" | "day" | 기본 줌 레벨 |
+| `editable` | boolean | true | 편집 가능 여부 |
+| `draggable` | boolean | true | 드래그 이동 가능 |
+| `resizable` | boolean | true | 리사이즈 가능 |
+| `rowHeight` | number | 50 | 행 높이 (px) |
+| `headerHeight` | number | 60 | 헤더 높이 (px) |
+| `resourceColumnWidth` | number | 150 | 리소스 컬럼 너비 (px) |
+| `showTodayLine` | boolean | true | 오늘 표시선 |
+| `showProgress` | boolean | true | 진행률 표시 |
+| `showToolbar` | boolean | true | 툴바 표시 |
+| `height` | number \| string | 500 | 컴포넌트 높이 |
+
+### 필드 매핑
+
+스케줄 테이블의 컬럼을 매핑합니다:
+
+```typescript
+fieldMapping: {
+  id: "id",                    // 필수: 고유 ID
+  resourceId: "equipment_id",  // 필수: 리소스 ID (FK)
+  title: "plan_name",          // 필수: 표시 제목
+  startDate: "start_date",     // 필수: 시작일
+  endDate: "end_date",         // 필수: 종료일
+  status: "status",            // 선택: 상태
+  progress: "progress",        // 선택: 진행률 (0-100)
+  color: "color",              // 선택: 바 색상
+}
+```
+
+### 이벤트
+
+| 이벤트 | 파라미터 | 설명 |
+|--------|----------|------|
+| `onScheduleClick` | `{ schedule, resource }` | 스케줄 클릭 |
+| `onCellClick` | `{ resourceId, date }` | 빈 셀 클릭 |
+| `onDragEnd` | `{ scheduleId, newStartDate, newEndDate }` | 드래그 완료 |
+| `onResizeEnd` | `{ scheduleId, newStartDate, newEndDate, direction }` | 리사이즈 완료 |
+| `onAddSchedule` | `(resourceId, date)` | 추가 버튼 클릭 |
+
+### 상태별 색상
+
+기본 상태별 색상:
+
+| 상태 | 색상 | 의미 |
+|------|------|------|
+| `planned` | 파랑 (#3b82f6) | 계획됨 |
+| `in_progress` | 주황 (#f59e0b) | 진행중 |
+| `completed` | 초록 (#10b981) | 완료 |
+| `delayed` | 빨강 (#ef4444) | 지연 |
+| `cancelled` | 회색 (#6b7280) | 취소 |
+
+## 파일 구조
+
+```
+v2-timeline-scheduler/
+├── index.ts                          # Definition
+├── types.ts                          # 타입 정의
+├── config.ts                         # 기본 설정값
+├── TimelineSchedulerComponent.tsx    # 메인 컴포넌트
+├── TimelineSchedulerConfigPanel.tsx  # 설정 패널
+├── TimelineSchedulerRenderer.tsx     # 레지스트리 등록
+├── README.md                         # 문서
+├── components/
+│   ├── index.ts
+│   ├── TimelineHeader.tsx            # 날짜 헤더
+│   ├── ScheduleBar.tsx               # 스케줄 바
+│   └── ResourceRow.tsx               # 리소스 행
+└── hooks/
+    └── useTimelineData.ts            # 데이터 관리 훅
+```
+
+## v2-table-list와의 차이점
+
+| 특성 | v2-table-list | v2-timeline-scheduler |
+|------|---------------|----------------------|
+| 표현 방식 | 행 기반 테이블 | 시간축 기반 간트차트 |
+| 데이터 구조 | 단순 목록 | 리소스 + 스케줄 (2개 테이블) |
+| 편집 방식 | 폼 입력 | 드래그/리사이즈 |
+| 시간 표현 | 텍스트 | 시각적 바 |
+| 용도 | 일반 데이터 | 일정/계획 관리 |
+
+## 향후 개선 사항
+
+- [ ] 충돌 감지 및 표시
+- [ ] 가상 스크롤 (대량 데이터)
+- [ ] 마일스톤 표시
+- [ ] 의존성 연결선
+- [ ] 드래그로 새 스케줄 생성
+- [ ] 컨텍스트 메뉴
+
+---
+
+**버전**: 2.0.0  
+**최종 수정**: 2026-01-30
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
new file mode 100644
index 00000000..f6fbaea2
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
@@ -0,0 +1,436 @@
+"use client";
+
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Calendar,
+  Plus,
+  Loader2,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  TimelineSchedulerComponentProps,
+  ScheduleItem,
+  ZoomLevel,
+  DragEvent,
+  ResizeEvent,
+} from "./types";
+import { useTimelineData } from "./hooks/useTimelineData";
+import { TimelineHeader, ResourceRow } from "./components";
+import { zoomLevelOptions, defaultTimelineSchedulerConfig } from "./config";
+
+/**
+ * v2-timeline-scheduler 메인 컴포넌트
+ *
+ * 간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
+ */
+export function TimelineSchedulerComponent({
+  config,
+  isDesignMode = false,
+  formData,
+  externalSchedules,
+  externalResources,
+  isLoading: externalLoading,
+  error: externalError,
+  componentId,
+  onDragEnd,
+  onResizeEnd,
+  onScheduleClick,
+  onCellClick,
+  onAddSchedule,
+}: TimelineSchedulerComponentProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 드래그/리사이즈 상태
+  const [dragState, setDragState] = useState<{
+    schedule: ScheduleItem;
+    startX: number;
+    startY: number;
+  } | null>(null);
+
+  const [resizeState, setResizeState] = useState<{
+    schedule: ScheduleItem;
+    direction: "start" | "end";
+    startX: number;
+  } | null>(null);
+
+  // 타임라인 데이터 훅
+  const {
+    schedules,
+    resources,
+    isLoading: hookLoading,
+    error: hookError,
+    zoomLevel,
+    setZoomLevel,
+    viewStartDate,
+    viewEndDate,
+    goToPrevious,
+    goToNext,
+    goToToday,
+    updateSchedule,
+  } = useTimelineData(config, externalSchedules, externalResources);
+
+  const isLoading = externalLoading ?? hookLoading;
+  const error = externalError ?? hookError;
+
+  // 설정값
+  const rowHeight = config.rowHeight || defaultTimelineSchedulerConfig.rowHeight!;
+  const headerHeight = config.headerHeight || defaultTimelineSchedulerConfig.headerHeight!;
+  const resourceColumnWidth =
+    config.resourceColumnWidth || defaultTimelineSchedulerConfig.resourceColumnWidth!;
+  const cellWidthConfig = config.cellWidth || defaultTimelineSchedulerConfig.cellWidth!;
+  const cellWidth = cellWidthConfig[zoomLevel] || 60;
+
+  // 리소스가 없으면 스케줄의 resourceId로 자동 생성
+  const effectiveResources = useMemo(() => {
+    if (resources.length > 0) {
+      return resources;
+    }
+
+    // 스케줄에서 고유한 resourceId 추출하여 자동 리소스 생성
+    const uniqueResourceIds = new Set<string>();
+    schedules.forEach((schedule) => {
+      if (schedule.resourceId) {
+        uniqueResourceIds.add(schedule.resourceId);
+      }
+    });
+
+    return Array.from(uniqueResourceIds).map((id) => ({
+      id,
+      name: id, // resourceId를 이름으로 사용
+    }));
+  }, [resources, schedules]);
+
+  // 리소스별 스케줄 그룹화
+  const schedulesByResource = useMemo(() => {
+    const grouped = new Map<string, ScheduleItem[]>();
+
+    effectiveResources.forEach((resource) => {
+      grouped.set(resource.id, []);
+    });
+
+    schedules.forEach((schedule) => {
+      const list = grouped.get(schedule.resourceId);
+      if (list) {
+        list.push(schedule);
+      } else {
+        // 리소스가 없는 스케줄은 첫 번째 리소스에 할당
+        const firstResource = effectiveResources[0];
+        if (firstResource) {
+          const firstList = grouped.get(firstResource.id);
+          if (firstList) {
+            firstList.push(schedule);
+          }
+        }
+      }
+    });
+
+    return grouped;
+  }, [schedules, effectiveResources]);
+
+  // 줌 레벨 변경
+  const handleZoomIn = useCallback(() => {
+    const levels: ZoomLevel[] = ["month", "week", "day"];
+    const currentIdx = levels.indexOf(zoomLevel);
+    if (currentIdx < levels.length - 1) {
+      setZoomLevel(levels[currentIdx + 1]);
+    }
+  }, [zoomLevel, setZoomLevel]);
+
+  const handleZoomOut = useCallback(() => {
+    const levels: ZoomLevel[] = ["month", "week", "day"];
+    const currentIdx = levels.indexOf(zoomLevel);
+    if (currentIdx > 0) {
+      setZoomLevel(levels[currentIdx - 1]);
+    }
+  }, [zoomLevel, setZoomLevel]);
+
+  // 스케줄 클릭 핸들러
+  const handleScheduleClick = useCallback(
+    (schedule: ScheduleItem) => {
+      const resource = effectiveResources.find((r) => r.id === schedule.resourceId);
+      if (resource && onScheduleClick) {
+        onScheduleClick({ schedule, resource });
+      }
+    },
+    [effectiveResources, onScheduleClick]
+  );
+
+  // 빈 셀 클릭 핸들러
+  const handleCellClick = useCallback(
+    (resourceId: string, date: Date) => {
+      if (onCellClick) {
+        onCellClick({
+          resourceId,
+          date: date.toISOString().split("T")[0],
+        });
+      }
+    },
+    [onCellClick]
+  );
+
+  // 드래그 시작
+  const handleDragStart = useCallback(
+    (schedule: ScheduleItem, e: React.MouseEvent) => {
+      setDragState({
+        schedule,
+        startX: e.clientX,
+        startY: e.clientY,
+      });
+    },
+    []
+  );
+
+  // 드래그 종료
+  const handleDragEnd = useCallback(() => {
+    if (dragState) {
+      // TODO: 드래그 결과 계산 및 업데이트
+      setDragState(null);
+    }
+  }, [dragState]);
+
+  // 리사이즈 시작
+  const handleResizeStart = useCallback(
+    (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => {
+      setResizeState({
+        schedule,
+        direction,
+        startX: e.clientX,
+      });
+    },
+    []
+  );
+
+  // 리사이즈 종료
+  const handleResizeEnd = useCallback(() => {
+    if (resizeState) {
+      // TODO: 리사이즈 결과 계산 및 업데이트
+      setResizeState(null);
+    }
+  }, [resizeState]);
+
+  // 추가 버튼 클릭
+  const handleAddClick = useCallback(() => {
+    if (onAddSchedule && effectiveResources.length > 0) {
+      onAddSchedule(
+        effectiveResources[0].id,
+        new Date().toISOString().split("T")[0]
+      );
+    }
+  }, [onAddSchedule, effectiveResources]);
+
+  // 디자인 모드 플레이스홀더
+  if (isDesignMode) {
+    return (
+      <div className="w-full h-full min-h-[200px] border-2 border-dashed border-muted-foreground/30 rounded-lg flex items-center justify-center bg-muted/10">
+        <div className="text-center text-muted-foreground">
+          <Calendar className="h-8 w-8 mx-auto mb-2" />
+          <p className="text-sm font-medium">타임라인 스케줄러</p>
+          <p className="text-xs mt-1">
+            {config.selectedTable
+              ? `테이블: ${config.selectedTable}`
+              : "테이블을 선택하세요"}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // 로딩 상태
+  if (isLoading) {
+    return (
+      <div
+        className="w-full flex items-center justify-center bg-muted/10 rounded-lg"
+        style={{ height: config.height || 500 }}
+      >
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <span className="text-sm">로딩 중...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // 에러 상태
+  if (error) {
+    return (
+      <div
+        className="w-full flex items-center justify-center bg-destructive/10 rounded-lg"
+        style={{ height: config.height || 500 }}
+      >
+        <div className="text-center text-destructive">
+          <p className="text-sm font-medium">오류 발생</p>
+          <p className="text-xs mt-1">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // 스케줄 데이터 없음
+  if (schedules.length === 0) {
+    return (
+      <div
+        className="w-full flex items-center justify-center bg-muted/10 rounded-lg border"
+        style={{ height: config.height || 500 }}
+      >
+        <div className="text-center text-muted-foreground">
+          <Calendar className="h-10 w-10 mx-auto mb-3 opacity-50" />
+          <p className="text-sm font-medium">스케줄 데이터가 없습니다</p>
+          <p className="text-xs mt-2 max-w-[200px]">
+            좌측 테이블에서 품목을 선택하거나,<br />
+            스케줄 생성 버튼을 눌러 스케줄을 생성하세요
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full border rounded-lg overflow-hidden bg-background"
+      style={{
+        height: config.height || 500,
+        maxHeight: config.maxHeight,
+      }}
+    >
+      {/* 툴바 */}
+      {config.showToolbar !== false && (
+        <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
+          {/* 네비게이션 */}
+          <div className="flex items-center gap-1">
+            {config.showNavigation !== false && (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToPrevious}
+                  className="h-7 px-2"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToToday}
+                  className="h-7 px-2"
+                >
+                  오늘
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={goToNext}
+                  className="h-7 px-2"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </>
+            )}
+
+            {/* 현재 날짜 범위 표시 */}
+            <span className="ml-2 text-sm text-muted-foreground">
+              {viewStartDate.getFullYear()}년 {viewStartDate.getMonth() + 1}월{" "}
+              {viewStartDate.getDate()}일 ~{" "}
+              {viewEndDate.getMonth() + 1}월 {viewEndDate.getDate()}일
+            </span>
+          </div>
+
+          {/* 오른쪽 컨트롤 */}
+          <div className="flex items-center gap-2">
+            {/* 줌 컨트롤 */}
+            {config.showZoomControls !== false && (
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleZoomOut}
+                  disabled={zoomLevel === "month"}
+                  className="h-7 px-2"
+                >
+                  <ZoomOut className="h-4 w-4" />
+                </Button>
+                <span className="text-xs text-muted-foreground min-w-[24px] text-center">
+                  {zoomLevelOptions.find((o) => o.value === zoomLevel)?.label}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleZoomIn}
+                  disabled={zoomLevel === "day"}
+                  className="h-7 px-2"
+                >
+                  <ZoomIn className="h-4 w-4" />
+                </Button>
+              </div>
+            )}
+
+            {/* 추가 버튼 */}
+            {config.showAddButton !== false && config.editable && (
+              <Button
+                variant="default"
+                size="sm"
+                onClick={handleAddClick}
+                className="h-7"
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                추가
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 타임라인 본문 */}
+      <div
+        className="overflow-auto"
+        style={{
+          height: config.showToolbar !== false
+            ? `calc(100% - 48px)`
+            : "100%",
+        }}
+      >
+        <div className="min-w-max">
+          {/* 헤더 */}
+          <TimelineHeader
+            startDate={viewStartDate}
+            endDate={viewEndDate}
+            zoomLevel={zoomLevel}
+            cellWidth={cellWidth}
+            headerHeight={headerHeight}
+            resourceColumnWidth={resourceColumnWidth}
+            showTodayLine={config.showTodayLine}
+          />
+
+          {/* 리소스 행들 */}
+          <div>
+            {effectiveResources.map((resource) => (
+              <ResourceRow
+                key={resource.id}
+                resource={resource}
+                schedules={schedulesByResource.get(resource.id) || []}
+                startDate={viewStartDate}
+                endDate={viewEndDate}
+                zoomLevel={zoomLevel}
+                rowHeight={rowHeight}
+                cellWidth={cellWidth}
+                resourceColumnWidth={resourceColumnWidth}
+                config={config}
+                onScheduleClick={handleScheduleClick}
+                onCellClick={handleCellClick}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+                onResizeStart={handleResizeStart}
+                onResizeEnd={handleResizeEnd}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
new file mode 100644
index 00000000..a715e408
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
@@ -0,0 +1,536 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { TimelineSchedulerConfig, ScheduleType, SourceDataConfig } from "./types";
+import { zoomLevelOptions, scheduleTypeOptions } from "./config";
+
+interface TimelineSchedulerConfigPanelProps {
+  config: TimelineSchedulerConfig;
+  onChange: (config: Partial<TimelineSchedulerConfig>) => void;
+}
+
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  displayName: string;
+}
+
+export function TimelineSchedulerConfigPanel({ config, onChange }: TimelineSchedulerConfigPanelProps) {
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [sourceColumns, setSourceColumns] = useState<ColumnInfo[]>([]);
+  const [resourceColumns, setResourceColumns] = useState<ColumnInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [sourceTableSelectOpen, setSourceTableSelectOpen] = useState(false);
+  const [resourceTableSelectOpen, setResourceTableSelectOpen] = useState(false);
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoading(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        if (Array.isArray(tableList)) {
+          setTables(
+            tableList.map((t: any) => ({
+              tableName: t.table_name || t.tableName,
+              displayName: t.display_name || t.displayName || t.table_name || t.tableName,
+            })),
+          );
+        }
+      } catch (err) {
+        console.error("테이블 목록 로드 오류:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // 소스 테이블 컬럼 로드
+  useEffect(() => {
+    const loadSourceColumns = async () => {
+      if (!config.sourceConfig?.tableName) {
+        setSourceColumns([]);
+        return;
+      }
+      try {
+        const columns = await tableTypeApi.getColumns(config.sourceConfig.tableName);
+        if (Array.isArray(columns)) {
+          setSourceColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            })),
+          );
+        }
+      } catch (err) {
+        console.error("소스 컬럼 로드 오류:", err);
+        setSourceColumns([]);
+      }
+    };
+    loadSourceColumns();
+  }, [config.sourceConfig?.tableName]);
+
+  // 리소스 테이블 컬럼 로드
+  useEffect(() => {
+    const loadResourceColumns = async () => {
+      if (!config.resourceTable) {
+        setResourceColumns([]);
+        return;
+      }
+      try {
+        const columns = await tableTypeApi.getColumns(config.resourceTable);
+        if (Array.isArray(columns)) {
+          setResourceColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            })),
+          );
+        }
+      } catch (err) {
+        console.error("리소스 컬럼 로드 오류:", err);
+        setResourceColumns([]);
+      }
+    };
+    loadResourceColumns();
+  }, [config.resourceTable]);
+
+  // 설정 업데이트 헬퍼
+  const updateConfig = (updates: Partial<TimelineSchedulerConfig>) => {
+    onChange({ ...config, ...updates });
+  };
+
+  // 소스 데이터 설정 업데이트
+  const updateSourceConfig = (updates: Partial<SourceDataConfig>) => {
+    updateConfig({
+      sourceConfig: {
+        ...config.sourceConfig,
+        ...updates,
+      },
+    });
+  };
+
+  // 리소스 필드 매핑 업데이트
+  const updateResourceFieldMapping = (field: string, value: string) => {
+    updateConfig({
+      resourceFieldMapping: {
+        ...config.resourceFieldMapping,
+        id: config.resourceFieldMapping?.id || "id",
+        name: config.resourceFieldMapping?.name || "name",
+        [field]: value,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <Accordion type="multiple" defaultValue={["source", "resource", "display"]}>
+        {/* 소스 데이터 설정 (스케줄 생성 기준) */}
+        <AccordionItem value="source">
+          <AccordionTrigger className="text-sm font-medium">스케줄 생성 설정</AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            <p className="text-muted-foreground mb-2 text-[10px]">
+              스케줄 자동 생성 시 참조할 원본 데이터 설정 (저장: schedule_mng)
+            </p>
+
+            {/* 스케줄 타입 */}
+            <div className="space-y-1">
+              <Label className="text-xs">스케줄 타입</Label>
+              <Select
+                value={config.scheduleType || "PRODUCTION"}
+                onValueChange={(v) => updateConfig({ scheduleType: v as ScheduleType })}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {scheduleTypeOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 소스 테이블 선택 */}
+            <div className="space-y-1">
+              <Label className="text-xs">소스 테이블 (수주/작업요청 등)</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"
+                    disabled={loading}
+                  >
+                    {config.sourceConfig?.tableName
+                      ? tables.find((t) => t.tableName === config.sourceConfig?.tableName)?.displayName ||
+                        config.sourceConfig.tableName
+                      : "소스 테이블 선택..."}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command
+                    filter={(value, search) => {
+                      const lowerSearch = search.toLowerCase();
+                      if (value.toLowerCase().includes(lowerSearch)) {
+                        return 1;
+                      }
+                      return 0;
+                    }}
+                  >
+                    <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {tables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.displayName} ${table.tableName}`}
+                            onSelect={() => {
+                              updateSourceConfig({ tableName: table.tableName });
+                              setSourceTableSelectOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.sourceConfig?.tableName === table.tableName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span>{table.displayName}</span>
+                              <span className="text-muted-foreground text-[10px]">{table.tableName}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* 소스 필드 매핑 */}
+            {config.sourceConfig?.tableName && (
+              <div className="mt-2 space-y-2">
+                <Label className="text-xs font-medium">필드 매핑</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {/* 기준일 필드 */}
+                  <div className="col-span-2 space-y-1">
+                    <Label className="text-[10px]">기준일 (마감일/납기일) *</Label>
+                    <Select
+                      value={config.sourceConfig?.dueDateField || ""}
+                      onValueChange={(v) => updateSourceConfig({ dueDateField: v })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="필수 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-[10px]">스케줄 종료일로 사용됩니다</p>
+                  </div>
+
+                  {/* 수량 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">수량 필드</Label>
+                    <Select
+                      value={config.sourceConfig?.quantityField || ""}
+                      onValueChange={(v) => updateSourceConfig({ quantityField: v })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 그룹화 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">그룹 필드 (품목코드)</Label>
+                    <Select
+                      value={config.sourceConfig?.groupByField || ""}
+                      onValueChange={(v) => updateSourceConfig({ groupByField: v })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 그룹명 필드 */}
+                  <div className="col-span-2 space-y-1">
+                    <Label className="text-[10px]">그룹명 필드 (품목명)</Label>
+                    <Select
+                      value={config.sourceConfig?.groupNameField || ""}
+                      onValueChange={(v) => updateSourceConfig({ groupNameField: v })}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 리소스 설정 */}
+        <AccordionItem value="resource">
+          <AccordionTrigger className="text-sm font-medium">리소스 설정 (설비/작업자)</AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            <p className="text-muted-foreground mb-2 text-[10px]">타임라인 Y축에 표시할 리소스 (설비, 작업자 등)</p>
+
+            {/* 리소스 테이블 선택 */}
+            <div className="space-y-1">
+              <Label className="text-xs">리소스 테이블</Label>
+              <Popover open={resourceTableSelectOpen} onOpenChange={setResourceTableSelectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={resourceTableSelectOpen}
+                    className="h-8 w-full justify-between text-xs"
+                    disabled={loading}
+                  >
+                    {config.resourceTable
+                      ? tables.find((t) => t.tableName === config.resourceTable)?.displayName || config.resourceTable
+                      : "리소스 테이블 선택..."}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command
+                    filter={(value, search) => {
+                      const lowerSearch = search.toLowerCase();
+                      if (value.toLowerCase().includes(lowerSearch)) {
+                        return 1;
+                      }
+                      return 0;
+                    }}
+                  >
+                    <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {tables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.displayName} ${table.tableName}`}
+                            onSelect={() => {
+                              updateConfig({ resourceTable: table.tableName });
+                              setResourceTableSelectOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.resourceTable === table.tableName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span>{table.displayName}</span>
+                              <span className="text-muted-foreground text-[10px]">{table.tableName}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* 리소스 필드 매핑 */}
+            {config.resourceTable && (
+              <div className="mt-2 space-y-2">
+                <Label className="text-xs font-medium">리소스 필드</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {/* ID 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">ID 필드</Label>
+                    <Select
+                      value={config.resourceFieldMapping?.id || ""}
+                      onValueChange={(v) => updateResourceFieldMapping("id", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {resourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 이름 필드 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">이름 필드</Label>
+                    <Select
+                      value={config.resourceFieldMapping?.name || ""}
+                      onValueChange={(v) => updateResourceFieldMapping("name", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue placeholder="선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {resourceColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* 표시 설정 */}
+        <AccordionItem value="display">
+          <AccordionTrigger className="text-sm font-medium">표시 설정</AccordionTrigger>
+          <AccordionContent className="space-y-3 pt-2">
+            {/* 기본 줌 레벨 */}
+            <div className="space-y-1">
+              <Label className="text-xs">기본 줌 레벨</Label>
+              <Select
+                value={config.defaultZoomLevel || "day"}
+                onValueChange={(v) => updateConfig({ defaultZoomLevel: v as any })}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {zoomLevelOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 높이 */}
+            <div className="space-y-1">
+              <Label className="text-xs">높이 (px)</Label>
+              <Input
+                type="number"
+                value={config.height || 500}
+                onChange={(e) => updateConfig({ height: parseInt(e.target.value) || 500 })}
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 행 높이 */}
+            <div className="space-y-1">
+              <Label className="text-xs">행 높이 (px)</Label>
+              <Input
+                type="number"
+                value={config.rowHeight || 50}
+                onChange={(e) => updateConfig({ rowHeight: parseInt(e.target.value) || 50 })}
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 토글 스위치들 */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">편집 가능</Label>
+                <Switch checked={config.editable ?? true} onCheckedChange={(v) => updateConfig({ editable: v })} />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">드래그 이동</Label>
+                <Switch checked={config.draggable ?? true} onCheckedChange={(v) => updateConfig({ draggable: v })} />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">리사이즈</Label>
+                <Switch checked={config.resizable ?? true} onCheckedChange={(v) => updateConfig({ resizable: v })} />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">오늘 표시선</Label>
+                <Switch
+                  checked={config.showTodayLine ?? true}
+                  onCheckedChange={(v) => updateConfig({ showTodayLine: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">진행률 표시</Label>
+                <Switch
+                  checked={config.showProgress ?? true}
+                  onCheckedChange={(v) => updateConfig({ showProgress: v })}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">툴바 표시</Label>
+                <Switch
+                  checked={config.showToolbar ?? true}
+                  onCheckedChange={(v) => updateConfig({ showToolbar: v })}
+                />
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
+export default TimelineSchedulerConfigPanel;
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
new file mode 100644
index 00000000..48e8a21f
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2TimelineSchedulerDefinition } from "./index";
+import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
+
+/**
+ * TimelineScheduler 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class TimelineSchedulerRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2TimelineSchedulerDefinition;
+
+  render(): React.ReactElement {
+    return (
+      <TimelineSchedulerComponent
+        {...this.props}
+        config={this.props.component?.componentConfig || {}}
+        isDesignMode={this.props.isDesignMode}
+        formData={this.props.formData}
+        componentId={this.props.component?.id}
+      />
+    );
+  }
+
+  // 설정 변경 핸들러
+  protected handleConfigChange = (config: any) => {
+    console.log("📥 TimelineSchedulerRenderer에서 설정 변경 받음:", config);
+
+    // 상위 컴포넌트의 onConfigChange 호출 (화면 설계자에게 알림)
+    if (this.props.onConfigChange) {
+      this.props.onConfigChange(config);
+    }
+
+    this.updateComponent({ config });
+  };
+
+  // 값 변경 처리
+  protected handleValueChange = (value: any) => {
+    this.updateComponent({ value });
+  };
+}
+
+// 자동 등록 실행
+TimelineSchedulerRenderer.registerSelf();
+
+// 강제 등록 (디버깅용)
+if (typeof window !== "undefined") {
+  setTimeout(() => {
+    try {
+      TimelineSchedulerRenderer.registerSelf();
+    } catch (error) {
+      console.error("❌ TimelineScheduler 강제 등록 실패:", error);
+    }
+  }, 1000);
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx
new file mode 100644
index 00000000..407bdd14
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { Resource, ScheduleItem, ZoomLevel, TimelineSchedulerConfig } from "../types";
+import { ScheduleBar } from "./ScheduleBar";
+
+interface ResourceRowProps {
+  /** 리소스 */
+  resource: Resource;
+  /** 해당 리소스의 스케줄 목록 */
+  schedules: ScheduleItem[];
+  /** 시작 날짜 */
+  startDate: Date;
+  /** 종료 날짜 */
+  endDate: Date;
+  /** 줌 레벨 */
+  zoomLevel: ZoomLevel;
+  /** 행 높이 */
+  rowHeight: number;
+  /** 셀 너비 */
+  cellWidth: number;
+  /** 리소스 컬럼 너비 */
+  resourceColumnWidth: number;
+  /** 설정 */
+  config: TimelineSchedulerConfig;
+  /** 스케줄 클릭 */
+  onScheduleClick?: (schedule: ScheduleItem) => void;
+  /** 빈 셀 클릭 */
+  onCellClick?: (resourceId: string, date: Date) => void;
+  /** 드래그 시작 */
+  onDragStart?: (schedule: ScheduleItem, e: React.MouseEvent) => void;
+  /** 드래그 종료 */
+  onDragEnd?: () => void;
+  /** 리사이즈 시작 */
+  onResizeStart?: (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => void;
+  /** 리사이즈 종료 */
+  onResizeEnd?: () => void;
+}
+
+/**
+ * 날짜 차이 계산 (일수)
+ */
+const getDaysDiff = (start: Date, end: Date): number => {
+  const startTime = new Date(start).setHours(0, 0, 0, 0);
+  const endTime = new Date(end).setHours(0, 0, 0, 0);
+  return Math.round((endTime - startTime) / (1000 * 60 * 60 * 24));
+};
+
+/**
+ * 날짜 범위 내의 셀 개수 계산
+ */
+const getCellCount = (startDate: Date, endDate: Date): number => {
+  return getDaysDiff(startDate, endDate) + 1;
+};
+
+export function ResourceRow({
+  resource,
+  schedules,
+  startDate,
+  endDate,
+  zoomLevel,
+  rowHeight,
+  cellWidth,
+  resourceColumnWidth,
+  config,
+  onScheduleClick,
+  onCellClick,
+  onDragStart,
+  onDragEnd,
+  onResizeStart,
+  onResizeEnd,
+}: ResourceRowProps) {
+  // 총 셀 개수
+  const totalCells = useMemo(() => getCellCount(startDate, endDate), [startDate, endDate]);
+
+  // 총 그리드 너비
+  const gridWidth = totalCells * cellWidth;
+
+  // 오늘 날짜
+  const today = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  // 스케줄 바 위치 계산
+  const schedulePositions = useMemo(() => {
+    return schedules.map((schedule) => {
+      const scheduleStart = new Date(schedule.startDate);
+      const scheduleEnd = new Date(schedule.endDate);
+      scheduleStart.setHours(0, 0, 0, 0);
+      scheduleEnd.setHours(0, 0, 0, 0);
+
+      // 시작 위치 계산
+      const startOffset = getDaysDiff(startDate, scheduleStart);
+      const left = Math.max(0, startOffset * cellWidth);
+
+      // 너비 계산
+      const durationDays = getDaysDiff(scheduleStart, scheduleEnd) + 1;
+      const visibleStartOffset = Math.max(0, startOffset);
+      const visibleEndOffset = Math.min(
+        totalCells,
+        startOffset + durationDays
+      );
+      const width = Math.max(cellWidth, (visibleEndOffset - visibleStartOffset) * cellWidth);
+
+      return {
+        schedule,
+        position: {
+          left: resourceColumnWidth + left,
+          top: 0,
+          width,
+          height: rowHeight,
+        },
+      };
+    });
+  }, [schedules, startDate, cellWidth, resourceColumnWidth, rowHeight, totalCells]);
+
+  // 그리드 셀 클릭 핸들러
+  const handleGridClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!onCellClick) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const cellIndex = Math.floor(x / cellWidth);
+
+    const clickedDate = new Date(startDate);
+    clickedDate.setDate(clickedDate.getDate() + cellIndex);
+
+    onCellClick(resource.id, clickedDate);
+  };
+
+  return (
+    <div
+      className="flex border-b hover:bg-muted/20"
+      style={{ height: rowHeight }}
+    >
+      {/* 리소스 컬럼 */}
+      <div
+        className="flex-shrink-0 border-r bg-muted/30 flex items-center px-3 sticky left-0 z-10"
+        style={{ width: resourceColumnWidth }}
+      >
+        <div className="truncate">
+          <div className="font-medium text-sm truncate">{resource.name}</div>
+          {resource.group && (
+            <div className="text-xs text-muted-foreground truncate">
+              {resource.group}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 타임라인 그리드 */}
+      <div
+        className="relative flex-1"
+        style={{ width: gridWidth }}
+        onClick={handleGridClick}
+      >
+        {/* 배경 그리드 */}
+        <div className="absolute inset-0 flex">
+          {Array.from({ length: totalCells }).map((_, idx) => {
+            const cellDate = new Date(startDate);
+            cellDate.setDate(cellDate.getDate() + idx);
+            const isWeekend = cellDate.getDay() === 0 || cellDate.getDay() === 6;
+            const isToday = cellDate.getTime() === today.getTime();
+            const isMonthStart = cellDate.getDate() === 1;
+
+            return (
+              <div
+                key={idx}
+                className={cn(
+                  "border-r h-full",
+                  isWeekend && "bg-muted/20",
+                  isToday && "bg-primary/5",
+                  isMonthStart && "border-l-2 border-l-primary/20"
+                )}
+                style={{ width: cellWidth }}
+              />
+            );
+          })}
+        </div>
+
+        {/* 스케줄 바들 */}
+        {schedulePositions.map(({ schedule, position }) => (
+          <ScheduleBar
+            key={schedule.id}
+            schedule={schedule}
+            position={{
+              ...position,
+              left: position.left - resourceColumnWidth, // 상대 위치
+            }}
+            config={config}
+            draggable={config.draggable}
+            resizable={config.resizable}
+            onClick={() => onScheduleClick?.(schedule)}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            onResizeStart={onResizeStart}
+            onResizeEnd={onResizeEnd}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx
new file mode 100644
index 00000000..a85c457c
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState, useCallback, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { ScheduleItem, ScheduleBarPosition, TimelineSchedulerConfig } from "../types";
+import { statusOptions } from "../config";
+
+interface ScheduleBarProps {
+  /** 스케줄 항목 */
+  schedule: ScheduleItem;
+  /** 위치 정보 */
+  position: ScheduleBarPosition;
+  /** 설정 */
+  config: TimelineSchedulerConfig;
+  /** 드래그 가능 여부 */
+  draggable?: boolean;
+  /** 리사이즈 가능 여부 */
+  resizable?: boolean;
+  /** 클릭 이벤트 */
+  onClick?: (schedule: ScheduleItem) => void;
+  /** 드래그 시작 */
+  onDragStart?: (schedule: ScheduleItem, e: React.MouseEvent) => void;
+  /** 드래그 중 */
+  onDrag?: (deltaX: number, deltaY: number) => void;
+  /** 드래그 종료 */
+  onDragEnd?: () => void;
+  /** 리사이즈 시작 */
+  onResizeStart?: (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => void;
+  /** 리사이즈 중 */
+  onResize?: (deltaX: number, direction: "start" | "end") => void;
+  /** 리사이즈 종료 */
+  onResizeEnd?: () => void;
+}
+
+export function ScheduleBar({
+  schedule,
+  position,
+  config,
+  draggable = true,
+  resizable = true,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  onResizeStart,
+  onResizeEnd,
+}: ScheduleBarProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const barRef = useRef<HTMLDivElement>(null);
+
+  // 상태에 따른 색상
+  const statusColor = schedule.color || 
+    config.statusColors?.[schedule.status] ||
+    statusOptions.find((s) => s.value === schedule.status)?.color ||
+    "#3b82f6";
+
+  // 진행률 바 너비
+  const progressWidth = config.showProgress && schedule.progress !== undefined
+    ? `${schedule.progress}%`
+    : "0%";
+
+  // 드래그 시작 핸들러
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!draggable || isResizing) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      onDragStart?.(schedule, e);
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // 드래그 중 로직은 부모에서 처리
+      };
+
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        onDragEnd?.();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [draggable, isResizing, schedule, onDragStart, onDragEnd]
+  );
+
+  // 리사이즈 시작 핸들러
+  const handleResizeStart = useCallback(
+    (direction: "start" | "end", e: React.MouseEvent) => {
+      if (!resizable) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsResizing(true);
+      onResizeStart?.(schedule, direction, e);
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        // 리사이즈 중 로직은 부모에서 처리
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        onResizeEnd?.();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [resizable, schedule, onResizeStart, onResizeEnd]
+  );
+
+  // 클릭 핸들러
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDragging || isResizing) return;
+      e.stopPropagation();
+      onClick?.(schedule);
+    },
+    [isDragging, isResizing, onClick, schedule]
+  );
+
+  return (
+    <div
+      ref={barRef}
+      className={cn(
+        "absolute rounded-md shadow-sm cursor-pointer transition-shadow",
+        "hover:shadow-md hover:z-10",
+        isDragging && "opacity-70 shadow-lg z-20",
+        isResizing && "z-20",
+        draggable && "cursor-grab",
+        isDragging && "cursor-grabbing"
+      )}
+      style={{
+        left: position.left,
+        top: position.top + 4,
+        width: position.width,
+        height: position.height - 8,
+        backgroundColor: statusColor,
+      }}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+    >
+      {/* 진행률 바 */}
+      {config.showProgress && schedule.progress !== undefined && (
+        <div
+          className="absolute inset-y-0 left-0 rounded-l-md opacity-30 bg-white"
+          style={{ width: progressWidth }}
+        />
+      )}
+
+      {/* 제목 */}
+      <div className="relative z-10 px-2 py-1 text-xs text-white truncate font-medium">
+        {schedule.title}
+      </div>
+
+      {/* 진행률 텍스트 */}
+      {config.showProgress && schedule.progress !== undefined && (
+        <div className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-white/80 font-medium">
+          {schedule.progress}%
+        </div>
+      )}
+
+      {/* 리사이즈 핸들 - 왼쪽 */}
+      {resizable && (
+        <div
+          className="absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize hover:bg-white/20 rounded-l-md"
+          onMouseDown={(e) => handleResizeStart("start", e)}
+        />
+      )}
+
+      {/* 리사이즈 핸들 - 오른쪽 */}
+      {resizable && (
+        <div
+          className="absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize hover:bg-white/20 rounded-r-md"
+          onMouseDown={(e) => handleResizeStart("end", e)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx b/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx
new file mode 100644
index 00000000..52afc2e2
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { DateCell, ZoomLevel } from "../types";
+import { dayLabels, monthLabels } from "../config";
+
+interface TimelineHeaderProps {
+  /** 시작 날짜 */
+  startDate: Date;
+  /** 종료 날짜 */
+  endDate: Date;
+  /** 줌 레벨 */
+  zoomLevel: ZoomLevel;
+  /** 셀 너비 */
+  cellWidth: number;
+  /** 헤더 높이 */
+  headerHeight: number;
+  /** 리소스 컬럼 너비 */
+  resourceColumnWidth: number;
+  /** 오늘 표시선 */
+  showTodayLine?: boolean;
+}
+
+/**
+ * 날짜 범위 내의 모든 날짜 셀 생성
+ */
+const generateDateCells = (
+  startDate: Date,
+  endDate: Date,
+  zoomLevel: ZoomLevel
+): DateCell[] => {
+  const cells: DateCell[] = [];
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const current = new Date(startDate);
+  current.setHours(0, 0, 0, 0);
+
+  while (current <= endDate) {
+    const date = new Date(current);
+    const dayOfWeek = date.getDay();
+    const isToday = date.getTime() === today.getTime();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+    const isMonthStart = date.getDate() === 1;
+
+    let label = "";
+    if (zoomLevel === "day") {
+      label = `${date.getDate()}(${dayLabels[dayOfWeek]})`;
+    } else if (zoomLevel === "week") {
+      // 주간: 월요일 기준 주 시작
+      if (dayOfWeek === 1 || cells.length === 0) {
+        label = `${date.getMonth() + 1}/${date.getDate()}`;
+      }
+    } else if (zoomLevel === "month") {
+      // 월간: 월 시작일만 표시
+      if (isMonthStart || cells.length === 0) {
+        label = monthLabels[date.getMonth()];
+      }
+    }
+
+    cells.push({
+      date,
+      label,
+      isToday,
+      isWeekend,
+      isMonthStart,
+    });
+
+    current.setDate(current.getDate() + 1);
+  }
+
+  return cells;
+};
+
+/**
+ * 월 헤더 그룹 생성 (상단 행)
+ */
+const generateMonthGroups = (
+  cells: DateCell[]
+): { month: string; year: number; count: number }[] => {
+  const groups: { month: string; year: number; count: number }[] = [];
+
+  cells.forEach((cell) => {
+    const month = monthLabels[cell.date.getMonth()];
+    const year = cell.date.getFullYear();
+
+    if (
+      groups.length === 0 ||
+      groups[groups.length - 1].month !== month ||
+      groups[groups.length - 1].year !== year
+    ) {
+      groups.push({ month, year, count: 1 });
+    } else {
+      groups[groups.length - 1].count++;
+    }
+  });
+
+  return groups;
+};
+
+export function TimelineHeader({
+  startDate,
+  endDate,
+  zoomLevel,
+  cellWidth,
+  headerHeight,
+  resourceColumnWidth,
+  showTodayLine = true,
+}: TimelineHeaderProps) {
+  // 날짜 셀 생성
+  const dateCells = useMemo(
+    () => generateDateCells(startDate, endDate, zoomLevel),
+    [startDate, endDate, zoomLevel]
+  );
+
+  // 월 그룹 생성
+  const monthGroups = useMemo(() => generateMonthGroups(dateCells), [dateCells]);
+
+  // 오늘 위치 계산
+  const todayPosition = useMemo(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const todayIndex = dateCells.findIndex(
+      (cell) => cell.date.getTime() === today.getTime()
+    );
+
+    if (todayIndex === -1) return null;
+
+    return resourceColumnWidth + todayIndex * cellWidth + cellWidth / 2;
+  }, [dateCells, cellWidth, resourceColumnWidth]);
+
+  return (
+    <div
+      className="sticky top-0 z-20 border-b bg-background"
+      style={{ height: headerHeight }}
+    >
+      {/* 상단 행: 월/년도 */}
+      <div className="flex" style={{ height: headerHeight / 2 }}>
+        {/* 리소스 컬럼 헤더 */}
+        <div
+          className="flex-shrink-0 border-r bg-muted/50 flex items-center justify-center font-medium text-sm"
+          style={{ width: resourceColumnWidth }}
+        >
+          리소스
+        </div>
+
+        {/* 월 그룹 */}
+        {monthGroups.map((group, idx) => (
+          <div
+            key={`${group.year}-${group.month}-${idx}`}
+            className="border-r flex items-center justify-center text-xs font-medium text-muted-foreground"
+            style={{ width: group.count * cellWidth }}
+          >
+            {group.year}년 {group.month}
+          </div>
+        ))}
+      </div>
+
+      {/* 하단 행: 일자 */}
+      <div className="flex" style={{ height: headerHeight / 2 }}>
+        {/* 리소스 컬럼 (빈칸) */}
+        <div
+          className="flex-shrink-0 border-r bg-muted/50"
+          style={{ width: resourceColumnWidth }}
+        />
+
+        {/* 날짜 셀 */}
+        {dateCells.map((cell, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "border-r flex items-center justify-center text-xs",
+              cell.isToday && "bg-primary/10 font-bold text-primary",
+              cell.isWeekend && !cell.isToday && "bg-muted/30 text-muted-foreground",
+              cell.isMonthStart && "border-l-2 border-l-primary/30"
+            )}
+            style={{ width: cellWidth }}
+          >
+            {cell.label}
+          </div>
+        ))}
+      </div>
+
+      {/* 오늘 표시선 */}
+      {showTodayLine && todayPosition !== null && (
+        <div
+          className="absolute top-0 bottom-0 w-0.5 bg-primary z-30 pointer-events-none"
+          style={{ left: todayPosition }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts b/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts
new file mode 100644
index 00000000..4da03f17
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts
@@ -0,0 +1,3 @@
+export { TimelineHeader } from "./TimelineHeader";
+export { ScheduleBar } from "./ScheduleBar";
+export { ResourceRow } from "./ResourceRow";
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/config.ts b/frontend/lib/registry/components/v2-timeline-scheduler/config.ts
new file mode 100644
index 00000000..17c31991
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/config.ts
@@ -0,0 +1,127 @@
+"use client";
+
+import { TimelineSchedulerConfig, ZoomLevel, ScheduleType } from "./types";
+
+/**
+ * 기본 타임라인 스케줄러 설정
+ * - 기본적으로 schedule_mng 테이블 사용 (공통 스케줄 테이블)
+ * - 필드 매핑은 schedule_mng 컬럼에 맞춤
+ */
+export const defaultTimelineSchedulerConfig: Partial<TimelineSchedulerConfig> = {
+  // schedule_mng 테이블 기본 사용
+  useCustomTable: false,
+  scheduleType: "PRODUCTION", // 기본: 생산계획
+
+  // 표시 설정
+  defaultZoomLevel: "day",
+  editable: true,
+  draggable: true,
+  resizable: true,
+  rowHeight: 50,
+  headerHeight: 60,
+  resourceColumnWidth: 150,
+  cellWidth: {
+    day: 60,
+    week: 120,
+    month: 40,
+  },
+  showConflicts: true,
+  showProgress: true,
+  showTodayLine: true,
+  showToolbar: true,
+  showZoomControls: true,
+  showNavigation: true,
+  showAddButton: true,
+  height: 500,
+
+  // 상태별 색상
+  statusColors: {
+    planned: "#3b82f6", // blue-500
+    in_progress: "#f59e0b", // amber-500
+    completed: "#10b981", // emerald-500
+    delayed: "#ef4444", // red-500
+    cancelled: "#6b7280", // gray-500
+  },
+
+  // schedule_mng 테이블 필드 매핑
+  fieldMapping: {
+    id: "schedule_id",
+    resourceId: "resource_id",
+    title: "schedule_name",
+    startDate: "start_date",
+    endDate: "end_date",
+    status: "status",
+  },
+
+  // 리소스 필드 매핑 (equipment_mng 기준)
+  resourceFieldMapping: {
+    id: "equipment_code",
+    name: "equipment_name",
+    group: "equipment_type",
+  },
+
+  // 기본 리소스 테이블
+  resourceTable: "equipment_mng",
+};
+
+/**
+ * 줌 레벨 옵션
+ */
+export const zoomLevelOptions: { value: ZoomLevel; label: string }[] = [
+  { value: "day", label: "일" },
+  { value: "week", label: "주" },
+  { value: "month", label: "월" },
+];
+
+/**
+ * 상태 옵션
+ */
+export const statusOptions = [
+  { value: "planned", label: "계획됨", color: "#3b82f6" },
+  { value: "in_progress", label: "진행중", color: "#f59e0b" },
+  { value: "completed", label: "완료", color: "#10b981" },
+  { value: "delayed", label: "지연", color: "#ef4444" },
+  { value: "cancelled", label: "취소", color: "#6b7280" },
+];
+
+/**
+ * 스케줄 타입 옵션
+ */
+export const scheduleTypeOptions: { value: ScheduleType; label: string }[] = [
+  { value: "PRODUCTION", label: "생산계획" },
+  { value: "MAINTENANCE", label: "정비계획" },
+  { value: "SHIPPING", label: "배차계획" },
+  { value: "WORK_ASSIGN", label: "작업배정" },
+];
+
+/**
+ * 줌 레벨별 표시 일수
+ */
+export const zoomLevelDays: Record<ZoomLevel, number> = {
+  day: 14, // 2주
+  week: 56, // 8주
+  month: 90, // 3개월
+};
+
+/**
+ * 요일 라벨 (한글)
+ */
+export const dayLabels = ["일", "월", "화", "수", "목", "금", "토"];
+
+/**
+ * 월 라벨 (한글)
+ */
+export const monthLabels = [
+  "1월",
+  "2월",
+  "3월",
+  "4월",
+  "5월",
+  "6월",
+  "7월",
+  "8월",
+  "9월",
+  "10월",
+  "11월",
+  "12월",
+];
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts b/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts
new file mode 100644
index 00000000..94c001d4
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts
@@ -0,0 +1,450 @@
+"use client";
+
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { apiClient } from "@/lib/api/client";
+import { v2EventBus, V2_EVENTS } from "@/lib/v2-core";
+import { TimelineSchedulerConfig, ScheduleItem, Resource, ZoomLevel, UseTimelineDataResult } from "../types";
+import { zoomLevelDays, defaultTimelineSchedulerConfig } from "../config";
+
+// schedule_mng 테이블 고정 (공통 스케줄 테이블)
+const SCHEDULE_TABLE = "schedule_mng";
+
+/**
+ * 날짜를 ISO 문자열로 변환 (시간 제외)
+ */
+const toDateString = (date: Date): string => {
+  return date.toISOString().split("T")[0];
+};
+
+/**
+ * 날짜 더하기
+ */
+const addDays = (date: Date, days: number): Date => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+/**
+ * 타임라인 데이터를 관리하는 훅
+ */
+export function useTimelineData(
+  config: TimelineSchedulerConfig,
+  externalSchedules?: ScheduleItem[],
+  externalResources?: Resource[],
+): UseTimelineDataResult {
+  // 상태
+  const [schedules, setSchedules] = useState<ScheduleItem[]>([]);
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>(config.defaultZoomLevel || "day");
+  const [viewStartDate, setViewStartDate] = useState<Date>(() => {
+    if (config.initialDate) {
+      return new Date(config.initialDate);
+    }
+    // 오늘 기준 1주일 전부터 시작
+    const today = new Date();
+    today.setDate(today.getDate() - 7);
+    today.setHours(0, 0, 0, 0);
+    return today;
+  });
+
+  // 선택된 품목 코드 (좌측 테이블에서 선택된 데이터 기준)
+  const [selectedSourceKeys, setSelectedSourceKeys] = useState<string[]>([]);
+  const selectedSourceKeysRef = useRef<string[]>([]);
+
+  // 표시 종료일 계산
+  const viewEndDate = useMemo(() => {
+    const days = zoomLevelDays[zoomLevel];
+    return addDays(viewStartDate, days);
+  }, [viewStartDate, zoomLevel]);
+
+  // 테이블명: 기본적으로 schedule_mng 사용, 커스텀 테이블 설정 시 해당 테이블 사용
+  const tableName = config.useCustomTable && config.customTableName ? config.customTableName : SCHEDULE_TABLE;
+
+  const resourceTableName = config.resourceTable;
+
+  // 필드 매핑을 JSON 문자열로 안정화 (객체 참조 변경 방지)
+  const fieldMappingKey = useMemo(() => {
+    return JSON.stringify(config.fieldMapping || {});
+  }, [config.fieldMapping]);
+
+  const resourceFieldMappingKey = useMemo(() => {
+    return JSON.stringify(config.resourceFieldMapping || {});
+  }, [config.resourceFieldMapping]);
+
+  // 🆕 필드 매핑 정규화 (이전 형식 → 새 형식 변환) - useMemo로 메모이제이션
+  const fieldMapping = useMemo(() => {
+    const mapping = config.fieldMapping;
+    if (!mapping) return defaultTimelineSchedulerConfig.fieldMapping!;
+
+    return {
+      id: mapping.id || mapping.idField || "id",
+      resourceId: mapping.resourceId || mapping.resourceIdField || "resource_id",
+      title: mapping.title || mapping.titleField || "title",
+      startDate: mapping.startDate || mapping.startDateField || "start_date",
+      endDate: mapping.endDate || mapping.endDateField || "end_date",
+      status: mapping.status || mapping.statusField || undefined,
+      progress: mapping.progress || mapping.progressField || undefined,
+      color: mapping.color || mapping.colorField || undefined,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fieldMappingKey]);
+
+  // 리소스 필드 매핑 - useMemo로 메모이제이션
+  const resourceFieldMapping = useMemo(() => {
+    return config.resourceFieldMapping || defaultTimelineSchedulerConfig.resourceFieldMapping!;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resourceFieldMappingKey]);
+
+  // 스케줄 데이터 로드
+  const fetchSchedules = useCallback(async () => {
+    if (externalSchedules) {
+      setSchedules(externalSchedules);
+      return;
+    }
+
+    if (!tableName) {
+      setSchedules([]);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // schedule_mng 테이블 사용 시 필터 조건 구성
+      const isScheduleMng = tableName === SCHEDULE_TABLE;
+      const currentSourceKeys = selectedSourceKeysRef.current;
+
+      console.log("[useTimelineData] 스케줄 조회:", {
+        tableName,
+        scheduleType: config.scheduleType,
+        sourceKeys: currentSourceKeys,
+      });
+
+      const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
+        page: 1,
+        size: 10000,
+        autoFilter: true,
+      });
+
+      const responseData = response.data?.data?.data || response.data?.data || [];
+      let rawData = Array.isArray(responseData) ? responseData : [];
+
+      // 클라이언트 측 필터링 적용 (schedule_mng 테이블인 경우)
+      if (isScheduleMng) {
+        // 스케줄 타입 필터
+        if (config.scheduleType) {
+          rawData = rawData.filter((row: any) => row.schedule_type === config.scheduleType);
+        }
+
+        // 선택된 품목 필터 (source_group_key 기준)
+        if (currentSourceKeys.length > 0) {
+          rawData = rawData.filter((row: any) => currentSourceKeys.includes(row.source_group_key));
+        }
+
+        console.log("[useTimelineData] 필터링 후 스케줄:", rawData.length, "건");
+      }
+
+      // schedule_mng 테이블용 필드 매핑 (고정)
+      const scheduleMngFieldMapping = {
+        id: "schedule_id",
+        resourceId: "resource_id",
+        title: "schedule_name",
+        startDate: "start_date",
+        endDate: "end_date",
+        status: "status",
+        progress: undefined, // actual_qty / plan_qty로 계산 가능
+      };
+
+      // 사용할 필드 매핑 결정
+      const effectiveMapping = isScheduleMng ? scheduleMngFieldMapping : fieldMapping;
+
+      // 데이터를 ScheduleItem 형태로 변환
+      const mappedSchedules: ScheduleItem[] = rawData.map((row: any) => {
+        // 진행률 계산 (schedule_mng일 경우)
+        let progress: number | undefined;
+        if (isScheduleMng && row.plan_qty && row.plan_qty > 0) {
+          progress = Math.round(((row.actual_qty || 0) / row.plan_qty) * 100);
+        } else if (effectiveMapping.progress) {
+          progress = Number(row[effectiveMapping.progress]) || 0;
+        }
+
+        return {
+          id: String(row[effectiveMapping.id] || ""),
+          resourceId: String(row[effectiveMapping.resourceId] || ""),
+          title: String(row[effectiveMapping.title] || ""),
+          startDate: row[effectiveMapping.startDate] || "",
+          endDate: row[effectiveMapping.endDate] || "",
+          status: effectiveMapping.status ? row[effectiveMapping.status] || "planned" : "planned",
+          progress,
+          color: fieldMapping.color ? row[fieldMapping.color] : undefined,
+          data: row,
+        };
+      });
+
+      console.log("[useTimelineData] 스케줄 로드 완료:", mappedSchedules.length, "건");
+      setSchedules(mappedSchedules);
+    } catch (err: any) {
+      console.error("[useTimelineData] 스케줄 로드 오류:", err);
+      setError(err.message || "스케줄 데이터 로드 중 오류 발생");
+      setSchedules([]);
+    } finally {
+      setIsLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableName, externalSchedules, fieldMappingKey, config.scheduleType]);
+
+  // 리소스 데이터 로드
+  const fetchResources = useCallback(async () => {
+    if (externalResources) {
+      setResources(externalResources);
+      return;
+    }
+
+    if (!resourceTableName) {
+      setResources([]);
+      return;
+    }
+
+    try {
+      const response = await apiClient.post(`/table-management/tables/${resourceTableName}/data`, {
+        page: 1,
+        size: 1000,
+        autoFilter: true,
+      });
+
+      const responseData = response.data?.data?.data || response.data?.data || [];
+      const rawData = Array.isArray(responseData) ? responseData : [];
+
+      // 데이터를 Resource 형태로 변환
+      const mappedResources: Resource[] = rawData.map((row: any) => ({
+        id: String(row[resourceFieldMapping.id] || ""),
+        name: String(row[resourceFieldMapping.name] || ""),
+        group: resourceFieldMapping.group ? row[resourceFieldMapping.group] : undefined,
+      }));
+
+      setResources(mappedResources);
+    } catch (err: any) {
+      console.error("리소스 로드 오류:", err);
+      setResources([]);
+    }
+    // resourceFieldMappingKey를 의존성으로 사용하여 객체 참조 변경 방지
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resourceTableName, externalResources, resourceFieldMappingKey]);
+
+  // 초기 로드
+  useEffect(() => {
+    fetchSchedules();
+  }, [fetchSchedules]);
+
+  useEffect(() => {
+    fetchResources();
+  }, [fetchResources]);
+
+  // 이벤트 버스 리스너 - 테이블 선택 변경 (품목 선택 시 해당 스케줄만 표시)
+  useEffect(() => {
+    const unsubscribeSelection = v2EventBus.subscribe(V2_EVENTS.TABLE_SELECTION_CHANGE, (payload) => {
+      console.log("[useTimelineData] TABLE_SELECTION_CHANGE 수신:", {
+        tableName: payload.tableName,
+        selectedCount: payload.selectedCount,
+      });
+
+      // 설정된 그룹 필드명 사용 (없으면 기본값들 fallback)
+      const groupByField = config.sourceConfig?.groupByField;
+
+      // 선택된 데이터에서 source_group_key 추출
+      const sourceKeys: string[] = [];
+      for (const row of payload.selectedRows || []) {
+        // 설정된 필드명 우선, 없으면 일반적인 필드명 fallback
+        let key: string | undefined;
+        if (groupByField && row[groupByField]) {
+          key = row[groupByField];
+        } else {
+          // fallback: 일반적으로 사용되는 필드명들
+          key = row.part_code || row.source_group_key || row.item_code;
+        }
+
+        if (key && !sourceKeys.includes(key)) {
+          sourceKeys.push(key);
+        }
+      }
+
+      console.log("[useTimelineData] 선택된 그룹 키:", {
+        groupByField,
+        keys: sourceKeys,
+      });
+
+      // 상태 업데이트 및 ref 동기화
+      selectedSourceKeysRef.current = sourceKeys;
+      setSelectedSourceKeys(sourceKeys);
+    });
+
+    return () => {
+      unsubscribeSelection();
+    };
+  }, [config.sourceConfig?.groupByField]);
+
+  // 선택된 품목이 변경되면 스케줄 다시 로드
+  useEffect(() => {
+    if (tableName === SCHEDULE_TABLE) {
+      console.log("[useTimelineData] 선택 품목 변경으로 스케줄 새로고침:", selectedSourceKeys);
+      fetchSchedules();
+    }
+  }, [selectedSourceKeys, tableName, fetchSchedules]);
+
+  // 이벤트 버스 리스너 - 스케줄 생성 완료 및 테이블 새로고침
+  useEffect(() => {
+    // TABLE_REFRESH 이벤트 수신 - 스케줄 새로고침
+    const unsubscribeRefresh = v2EventBus.subscribe(V2_EVENTS.TABLE_REFRESH, (payload) => {
+      // schedule_mng 또는 해당 테이블에 대한 새로고침
+      if (payload.tableName === tableName || payload.tableName === SCHEDULE_TABLE) {
+        console.log("[useTimelineData] TABLE_REFRESH 수신, 스케줄 새로고침:", payload);
+        fetchSchedules();
+      }
+    });
+
+    // SCHEDULE_GENERATE_COMPLETE 이벤트 수신 - 스케줄 자동 생성 완료 시 새로고침
+    const unsubscribeComplete = v2EventBus.subscribe(V2_EVENTS.SCHEDULE_GENERATE_COMPLETE, (payload) => {
+      if (payload.success) {
+        console.log("[useTimelineData] SCHEDULE_GENERATE_COMPLETE 수신, 스케줄 새로고침:", payload);
+        fetchSchedules();
+      }
+    });
+
+    return () => {
+      unsubscribeRefresh();
+      unsubscribeComplete();
+    };
+  }, [tableName, fetchSchedules]);
+
+  // 네비게이션 함수들
+  const goToPrevious = useCallback(() => {
+    const days = zoomLevelDays[zoomLevel];
+    setViewStartDate((prev) => addDays(prev, -days));
+  }, [zoomLevel]);
+
+  const goToNext = useCallback(() => {
+    const days = zoomLevelDays[zoomLevel];
+    setViewStartDate((prev) => addDays(prev, days));
+  }, [zoomLevel]);
+
+  const goToToday = useCallback(() => {
+    const today = new Date();
+    today.setDate(today.getDate() - 7);
+    today.setHours(0, 0, 0, 0);
+    setViewStartDate(today);
+  }, []);
+
+  const goToDate = useCallback((date: Date) => {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() - 7);
+    newDate.setHours(0, 0, 0, 0);
+    setViewStartDate(newDate);
+  }, []);
+
+  // 스케줄 업데이트
+  const updateSchedule = useCallback(
+    async (id: string, updates: Partial<ScheduleItem>) => {
+      if (!tableName || !config.editable) return;
+
+      try {
+        // 필드 매핑 역변환
+        const updateData: Record<string, any> = {};
+        if (updates.startDate) updateData[fieldMapping.startDate] = updates.startDate;
+        if (updates.endDate) updateData[fieldMapping.endDate] = updates.endDate;
+        if (updates.resourceId) updateData[fieldMapping.resourceId] = updates.resourceId;
+        if (updates.title) updateData[fieldMapping.title] = updates.title;
+        if (updates.status && fieldMapping.status) updateData[fieldMapping.status] = updates.status;
+        if (updates.progress !== undefined && fieldMapping.progress)
+          updateData[fieldMapping.progress] = updates.progress;
+
+        await apiClient.put(`/table-management/tables/${tableName}/data/${id}`, updateData);
+
+        // 로컬 상태 업데이트
+        setSchedules((prev) => prev.map((s) => (s.id === id ? { ...s, ...updates } : s)));
+      } catch (err: any) {
+        console.error("스케줄 업데이트 오류:", err);
+        throw err;
+      }
+    },
+    [tableName, fieldMapping, config.editable],
+  );
+
+  // 스케줄 추가
+  const addSchedule = useCallback(
+    async (schedule: Omit<ScheduleItem, "id">) => {
+      if (!tableName || !config.editable) return;
+
+      try {
+        // 필드 매핑 역변환
+        const insertData: Record<string, any> = {
+          [fieldMapping.resourceId]: schedule.resourceId,
+          [fieldMapping.title]: schedule.title,
+          [fieldMapping.startDate]: schedule.startDate,
+          [fieldMapping.endDate]: schedule.endDate,
+        };
+
+        if (fieldMapping.status) insertData[fieldMapping.status] = schedule.status;
+        if (fieldMapping.progress && schedule.progress !== undefined)
+          insertData[fieldMapping.progress] = schedule.progress;
+
+        const response = await apiClient.post(`/table-management/tables/${tableName}/data`, insertData);
+
+        const newId = response.data?.data?.id || Date.now().toString();
+
+        // 로컬 상태 업데이트
+        setSchedules((prev) => [...prev, { ...schedule, id: newId }]);
+      } catch (err: any) {
+        console.error("스케줄 추가 오류:", err);
+        throw err;
+      }
+    },
+    [tableName, fieldMapping, config.editable],
+  );
+
+  // 스케줄 삭제
+  const deleteSchedule = useCallback(
+    async (id: string) => {
+      if (!tableName || !config.editable) return;
+
+      try {
+        await apiClient.delete(`/table-management/tables/${tableName}/data/${id}`);
+
+        // 로컬 상태 업데이트
+        setSchedules((prev) => prev.filter((s) => s.id !== id));
+      } catch (err: any) {
+        console.error("스케줄 삭제 오류:", err);
+        throw err;
+      }
+    },
+    [tableName, config.editable],
+  );
+
+  // 새로고침
+  const refresh = useCallback(() => {
+    fetchSchedules();
+    fetchResources();
+  }, [fetchSchedules, fetchResources]);
+
+  return {
+    schedules,
+    resources,
+    isLoading,
+    error,
+    zoomLevel,
+    setZoomLevel,
+    viewStartDate,
+    viewEndDate,
+    goToPrevious,
+    goToNext,
+    goToToday,
+    goToDate,
+    updateSchedule,
+    addSchedule,
+    deleteSchedule,
+    refresh,
+  };
+}
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/index.ts b/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
new file mode 100644
index 00000000..33c483a0
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
@@ -0,0 +1,38 @@
+"use client";
+
+import { ComponentCategory } from "@/types/component";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
+import { TimelineSchedulerConfigPanel } from "./TimelineSchedulerConfigPanel";
+import { defaultTimelineSchedulerConfig } from "./config";
+import { TimelineSchedulerConfig } from "./types";
+
+/**
+ * v2-timeline-scheduler 컴포넌트 정의
+ * 간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
+ */
+export const V2TimelineSchedulerDefinition = createComponentDefinition({
+  id: "v2-timeline-scheduler",
+  name: "타임라인 스케줄러",
+  nameEng: "Timeline Scheduler Component",
+  description: "간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트",
+  category: ComponentCategory.DISPLAY,
+  webType: "text",
+  component: TimelineSchedulerComponent,
+  configPanel: TimelineSchedulerConfigPanel,
+  defaultConfig: defaultTimelineSchedulerConfig as TimelineSchedulerConfig,
+  defaultSize: {
+    width: 1000,
+    height: 500,
+  },
+  icon: "Calendar",
+  tags: ["타임라인", "스케줄", "간트차트", "일정", "계획"],
+  version: "2.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+export { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
+export { TimelineSchedulerConfigPanel } from "./TimelineSchedulerConfigPanel";
+export * from "./types";
+export * from "./config";
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/types.ts b/frontend/lib/registry/components/v2-timeline-scheduler/types.ts
new file mode 100644
index 00000000..baf59741
--- /dev/null
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/types.ts
@@ -0,0 +1,400 @@
+"use client";
+
+import { ComponentConfig } from "@/types/component";
+
+/**
+ * 줌 레벨 (시간 단위)
+ */
+export type ZoomLevel = "day" | "week" | "month";
+
+/**
+ * 스케줄 상태
+ */
+export type ScheduleStatus = "planned" | "in_progress" | "completed" | "delayed" | "cancelled";
+
+/**
+ * 스케줄 항목 (간트 바)
+ */
+export interface ScheduleItem {
+  /** 고유 ID */
+  id: string;
+
+  /** 리소스 ID (설비/작업자) */
+  resourceId: string;
+
+  /** 표시 제목 */
+  title: string;
+
+  /** 시작 일시 (ISO 8601) */
+  startDate: string;
+
+  /** 종료 일시 (ISO 8601) */
+  endDate: string;
+
+  /** 상태 */
+  status: ScheduleStatus;
+
+  /** 진행률 (0-100) */
+  progress?: number;
+
+  /** 색상 (CSS color) */
+  color?: string;
+
+  /** 추가 데이터 */
+  data?: Record<string, any>;
+}
+
+/**
+ * 리소스 (행 - 설비/작업자)
+ */
+export interface Resource {
+  /** 리소스 ID */
+  id: string;
+
+  /** 표시명 */
+  name: string;
+
+  /** 그룹 (선택) */
+  group?: string;
+
+  /** 아이콘 (선택) */
+  icon?: string;
+
+  /** 용량 (선택, 충돌 계산용) */
+  capacity?: number;
+}
+
+/**
+ * 필드 매핑 설정
+ */
+export interface FieldMapping {
+  /** ID 필드 */
+  id: string;
+  /** 리소스 ID 필드 */
+  resourceId: string;
+  /** 제목 필드 */
+  title: string;
+  /** 시작일 필드 */
+  startDate: string;
+  /** 종료일 필드 */
+  endDate: string;
+  /** 상태 필드 (선택) */
+  status?: string;
+  /** 진행률 필드 (선택) */
+  progress?: string;
+  /** 색상 필드 (선택) */
+  color?: string;
+}
+
+/**
+ * 리소스 필드 매핑 설정
+ */
+export interface ResourceFieldMapping {
+  /** ID 필드 */
+  id: string;
+  /** 이름 필드 */
+  name: string;
+  /** 그룹 필드 (선택) */
+  group?: string;
+}
+
+/**
+ * 스케줄 타입 (schedule_mng.schedule_type)
+ */
+export type ScheduleType =
+  | "PRODUCTION" // 생산계획
+  | "MAINTENANCE" // 정비계획
+  | "SHIPPING" // 배차계획
+  | "WORK_ASSIGN"; // 작업배정
+
+/**
+ * 소스 데이터 설정 (스케줄 생성 기준이 되는 원본 데이터)
+ * 예: 수주 데이터, 작업 요청 등
+ */
+export interface SourceDataConfig {
+  /** 소스 테이블명 (예: sales_order_mng) */
+  tableName?: string;
+
+  /** 기준일 필드 - 스케줄 종료일로 사용 (예: due_date, delivery_date) */
+  dueDateField?: string;
+
+  /** 수량 필드 (예: balance_qty, order_qty) */
+  quantityField?: string;
+
+  /** 그룹화 필드 - 품목/작업 단위 (예: part_code, item_code) */
+  groupByField?: string;
+
+  /** 그룹명 표시 필드 (예: part_name, item_name) */
+  groupNameField?: string;
+}
+
+/**
+ * 타임라인 스케줄러 설정
+ */
+export interface TimelineSchedulerConfig extends ComponentConfig {
+  /** 스케줄 타입 (필터링 기준) - schedule_mng.schedule_type */
+  scheduleType?: ScheduleType;
+
+  /** 스케줄 데이터 테이블명 (기본: schedule_mng, 커스텀 테이블 사용 시) */
+  selectedTable?: string;
+
+  /** 커스텀 테이블 사용 여부 (false면 schedule_mng 사용) */
+  useCustomTable?: boolean;
+
+  /** 커스텀 테이블명 */
+  customTableName?: string;
+
+  /** 리소스 테이블명 (설비/작업자) */
+  resourceTable?: string;
+
+  /** 소스 데이터 설정 (스케줄 자동 생성 시 참조) */
+  sourceConfig?: SourceDataConfig;
+
+  /** 스케줄 필드 매핑 */
+  fieldMapping: FieldMapping;
+
+  /** 리소스 필드 매핑 */
+  resourceFieldMapping?: ResourceFieldMapping;
+
+  /** 초기 줌 레벨 */
+  defaultZoomLevel?: ZoomLevel;
+
+  /** 초기 표시 날짜 (ISO 8601) */
+  initialDate?: string;
+
+  /** 편집 가능 여부 */
+  editable?: boolean;
+
+  /** 드래그 이동 가능 */
+  draggable?: boolean;
+
+  /** 리사이즈 가능 */
+  resizable?: boolean;
+
+  /** 행 높이 (px) */
+  rowHeight?: number;
+
+  /** 헤더 높이 (px) */
+  headerHeight?: number;
+
+  /** 리소스 컬럼 너비 (px) */
+  resourceColumnWidth?: number;
+
+  /** 셀 너비 (px, 줌 레벨별) */
+  cellWidth?: {
+    day?: number;
+    week?: number;
+    month?: number;
+  };
+
+  /** 충돌 표시 여부 */
+  showConflicts?: boolean;
+
+  /** 진행률 바 표시 여부 */
+  showProgress?: boolean;
+
+  /** 오늘 표시선 */
+  showTodayLine?: boolean;
+
+  /** 상태별 색상 */
+  statusColors?: {
+    planned?: string;
+    in_progress?: string;
+    completed?: string;
+    delayed?: string;
+    cancelled?: string;
+  };
+
+  /** 툴바 표시 여부 */
+  showToolbar?: boolean;
+
+  /** 줌 레벨 변경 버튼 표시 */
+  showZoomControls?: boolean;
+
+  /** 네비게이션 버튼 표시 */
+  showNavigation?: boolean;
+
+  /** 추가 버튼 표시 */
+  showAddButton?: boolean;
+
+  /** 높이 (px 또는 auto) */
+  height?: number | string;
+
+  /** 최대 높이 */
+  maxHeight?: number | string;
+}
+
+/**
+ * 드래그 이벤트
+ */
+export interface DragEvent {
+  /** 스케줄 ID */
+  scheduleId: string;
+  /** 새로운 시작일 */
+  newStartDate: string;
+  /** 새로운 종료일 */
+  newEndDate: string;
+  /** 새로운 리소스 ID (리소스 간 이동 시) */
+  newResourceId?: string;
+}
+
+/**
+ * 리사이즈 이벤트
+ */
+export interface ResizeEvent {
+  /** 스케줄 ID */
+  scheduleId: string;
+  /** 새로운 시작일 */
+  newStartDate: string;
+  /** 새로운 종료일 */
+  newEndDate: string;
+  /** 리사이즈 방향 */
+  direction: "start" | "end";
+}
+
+/**
+ * 클릭 이벤트
+ */
+export interface ScheduleClickEvent {
+  /** 스케줄 항목 */
+  schedule: ScheduleItem;
+  /** 리소스 */
+  resource: Resource;
+}
+
+/**
+ * 빈 셀 클릭 이벤트
+ */
+export interface CellClickEvent {
+  /** 리소스 ID */
+  resourceId: string;
+  /** 날짜 */
+  date: string;
+}
+
+/**
+ * TimelineSchedulerComponent Props
+ */
+export interface TimelineSchedulerComponentProps {
+  /** 컴포넌트 설정 */
+  config: TimelineSchedulerConfig;
+
+  /** 디자인 모드 여부 */
+  isDesignMode?: boolean;
+
+  /** 폼 데이터 */
+  formData?: Record<string, any>;
+
+  /** 외부 스케줄 데이터 */
+  externalSchedules?: ScheduleItem[];
+
+  /** 외부 리소스 데이터 */
+  externalResources?: Resource[];
+
+  /** 로딩 상태 */
+  isLoading?: boolean;
+
+  /** 에러 */
+  error?: string;
+
+  /** 컴포넌트 ID */
+  componentId?: string;
+
+  /** 드래그 완료 이벤트 */
+  onDragEnd?: (event: DragEvent) => void;
+
+  /** 리사이즈 완료 이벤트 */
+  onResizeEnd?: (event: ResizeEvent) => void;
+
+  /** 스케줄 클릭 이벤트 */
+  onScheduleClick?: (event: ScheduleClickEvent) => void;
+
+  /** 빈 셀 클릭 이벤트 */
+  onCellClick?: (event: CellClickEvent) => void;
+
+  /** 스케줄 추가 이벤트 */
+  onAddSchedule?: (resourceId: string, date: string) => void;
+}
+
+/**
+ * useTimelineData 훅 반환 타입
+ */
+export interface UseTimelineDataResult {
+  /** 스케줄 목록 */
+  schedules: ScheduleItem[];
+
+  /** 리소스 목록 */
+  resources: Resource[];
+
+  /** 로딩 상태 */
+  isLoading: boolean;
+
+  /** 에러 */
+  error: string | null;
+
+  /** 현재 줌 레벨 */
+  zoomLevel: ZoomLevel;
+
+  /** 줌 레벨 변경 */
+  setZoomLevel: (level: ZoomLevel) => void;
+
+  /** 현재 표시 시작일 */
+  viewStartDate: Date;
+
+  /** 현재 표시 종료일 */
+  viewEndDate: Date;
+
+  /** 이전으로 이동 */
+  goToPrevious: () => void;
+
+  /** 다음으로 이동 */
+  goToNext: () => void;
+
+  /** 오늘로 이동 */
+  goToToday: () => void;
+
+  /** 특정 날짜로 이동 */
+  goToDate: (date: Date) => void;
+
+  /** 스케줄 업데이트 */
+  updateSchedule: (id: string, updates: Partial<ScheduleItem>) => Promise<void>;
+
+  /** 스케줄 추가 */
+  addSchedule: (schedule: Omit<ScheduleItem, "id">) => Promise<void>;
+
+  /** 스케줄 삭제 */
+  deleteSchedule: (id: string) => Promise<void>;
+
+  /** 데이터 새로고침 */
+  refresh: () => void;
+}
+
+/**
+ * 날짜 셀 정보
+ */
+export interface DateCell {
+  /** 날짜 */
+  date: Date;
+  /** 표시 라벨 */
+  label: string;
+  /** 오늘 여부 */
+  isToday: boolean;
+  /** 주말 여부 */
+  isWeekend: boolean;
+  /** 월 첫째날 여부 */
+  isMonthStart: boolean;
+}
+
+/**
+ * 스케줄 바 위치 정보
+ */
+export interface ScheduleBarPosition {
+  /** 왼쪽 오프셋 (px) */
+  left: number;
+  /** 너비 (px) */
+  width: number;
+  /** 상단 오프셋 (px) */
+  top: number;
+  /** 높이 (px) */
+  height: number;
+}
diff --git a/frontend/lib/schemas/componentConfig.ts b/frontend/lib/schemas/componentConfig.ts
index 8353ac05..82037cd0 100644
--- a/frontend/lib/schemas/componentConfig.ts
+++ b/frontend/lib/schemas/componentConfig.ts
@@ -148,9 +148,53 @@ export const componentV2Schema = z.object({
   overrides: z.record(z.string(), z.any()).default({}),
 });
 
-export const layoutV2Schema = z.object({
-  version: z.string().default("2.0"),
+// ============================================
+// 레이어 스키마 정의
+// ============================================
+export const layerTypeSchema = z.enum(["base", "conditional", "modal", "drawer"]);
+
+export const layerSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  type: layerTypeSchema,
+  zIndex: z.number().default(0),
+  isVisible: z.boolean().default(true), // 초기 표시 여부
+  isLocked: z.boolean().default(false), // 편집 잠금 여부
+
+  // 조건부 표시 로직
+  condition: z
+    .object({
+      targetComponentId: z.string(),
+      operator: z.enum(["eq", "neq", "in"]),
+      value: z.any(),
+    })
+    .optional(),
+
+  // 모달/드로어 전용 설정
+  overlayConfig: z
+    .object({
+      backdrop: z.boolean().default(true),
+      closeOnBackdropClick: z.boolean().default(true),
+      width: z.union([z.string(), z.number()]).optional(),
+      height: z.union([z.string(), z.number()]).optional(),
+      // 모달/드로어 스타일링
+      backgroundColor: z.string().optional(),
+      backdropBlur: z.number().optional(),
+      // 드로어 전용
+      position: z.enum(["left", "right", "top", "bottom"]).optional(),
+    })
+    .optional(),
+
+  // 해당 레이어에 속한 컴포넌트들
   components: z.array(componentV2Schema).default([]),
+});
+
+export type Layer = z.infer<typeof layerSchema>;
+
+export const layoutV2Schema = z.object({
+  version: z.string().default("2.1"),
+  layers: z.array(layerSchema).default([]), // 신규 필드
+  components: z.array(componentV2Schema).default([]), // 하위 호환성 유지
   updatedAt: z.string().optional(),
   screenResolution: z
     .object({
@@ -952,23 +996,78 @@ export function saveComponentV2(component: ComponentV2 & { config?: Record<strin
 // ============================================
 // V2 레이아웃 로드 (전체 컴포넌트 기본값 병합)
 // ============================================
-export function loadLayoutV2(
-  layoutData: any,
-): LayoutV2 & { components: Array<ComponentV2 & { config: Record<string, any> }> } {
-  const parsed = layoutV2Schema.parse(layoutData || { version: "2.0", components: [] });
+export function loadLayoutV2(layoutData: any): LayoutV2 & {
+  components: Array<ComponentV2 & { config: Record<string, any> }>;
+  layers: Array<Layer & { components: Array<ComponentV2 & { config: Record<string, any> }> }>;
+} {
+  const parsed = layoutV2Schema.parse(layoutData || { version: "2.1", components: [], layers: [] });
+
+  // 마이그레이션: components만 있고 layers가 없는 경우 Default Layer 생성
+  if ((!parsed.layers || parsed.layers.length === 0) && parsed.components && parsed.components.length > 0) {
+    const defaultLayer: Layer = {
+      id: "default-layer",
+      name: "기본 레이어",
+      type: "base",
+      zIndex: 0,
+      isVisible: true,
+      isLocked: false,
+      components: parsed.components,
+    };
+    parsed.layers = [defaultLayer];
+  }
+
+  // 모든 레이어의 컴포넌트 로드
+  const loadedLayers = parsed.layers.map((layer) => ({
+    ...layer,
+    components: layer.components.map(loadComponentV2),
+  }));
+
+  // 하위 호환성을 위한 components 배열 (모든 레이어의 컴포넌트 합침)
+  const allComponents = loadedLayers.flatMap((layer) => layer.components);
 
   return {
     ...parsed,
-    components: parsed.components.map(loadComponentV2),
+    layers: loadedLayers,
+    components: allComponents,
   };
 }
 
 // ============================================
 // V2 레이아웃 저장 (전체 컴포넌트 차이값 추출)
 // ============================================
-export function saveLayoutV2(components: Array<ComponentV2 & { config?: Record<string, any> }>): LayoutV2 {
+export function saveLayoutV2(
+  components: Array<ComponentV2 & { config?: Record<string, any> }>,
+  layers?: Array<Layer & { components: Array<ComponentV2 & { config?: Record<string, any> }> }>,
+): LayoutV2 {
+  // 레이어가 있는 경우 레이어 구조 저장
+  if (layers && layers.length > 0) {
+    const savedLayers = layers.map((layer) => ({
+      ...layer,
+      components: layer.components.map(saveComponentV2),
+    }));
+
+    return {
+      version: "2.1",
+      layers: savedLayers,
+      components: savedLayers.flatMap((l) => l.components), // 하위 호환성
+    };
+  }
+
+  // 레이어가 없는 경우 (기존 방식) - Default Layer로 감싸서 저장
+  const savedComponents = components.map(saveComponentV2);
+  const defaultLayer: Layer = {
+    id: "default-layer",
+    name: "기본 레이어",
+    type: "base",
+    zIndex: 0,
+    isVisible: true,
+    isLocked: false,
+    components: savedComponents,
+  };
+
   return {
-    version: "2.0",
-    components: components.map(saveComponentV2),
+    version: "2.1",
+    layers: [defaultLayer],
+    components: savedComponents,
   };
 }
diff --git a/frontend/lib/utils/alignmentUtils.ts b/frontend/lib/utils/alignmentUtils.ts
new file mode 100644
index 00000000..e2af866e
--- /dev/null
+++ b/frontend/lib/utils/alignmentUtils.ts
@@ -0,0 +1,265 @@
+/**
+ * 화면 디자이너 정렬/배분/동일크기 유틸리티
+ *
+ * 다중 선택된 컴포넌트에 대해 정렬, 균등 배분, 동일 크기 맞추기 기능을 제공합니다.
+ */
+
+import { ComponentData } from "@/types/screen";
+
+// 정렬 모드 타입
+export type AlignMode = "left" | "centerX" | "right" | "top" | "centerY" | "bottom";
+
+// 배분 방향 타입
+export type DistributeDirection = "horizontal" | "vertical";
+
+// 크기 맞추기 모드 타입
+export type MatchSizeMode = "width" | "height" | "both";
+
+/**
+ * 컴포넌트 정렬
+ * 선택된 컴포넌트들을 지정된 방향으로 정렬합니다.
+ */
+export function alignComponents(
+  components: ComponentData[],
+  selectedIds: string[],
+  mode: AlignMode
+): ComponentData[] {
+  const selected = components.filter((c) => selectedIds.includes(c.id));
+  if (selected.length < 2) return components;
+
+  let targetValue: number;
+
+  switch (mode) {
+    case "left":
+      // 가장 왼쪽 x값으로 정렬
+      targetValue = Math.min(...selected.map((c) => c.position.x));
+      return components.map((c) => {
+        if (!selectedIds.includes(c.id)) return c;
+        return { ...c, position: { ...c.position, x: targetValue } };
+      });
+
+    case "right":
+      // 가장 오른쪽 (x + width)로 정렬
+      targetValue = Math.max(...selected.map((c) => c.position.x + (c.size?.width || 100)));
+      return components.map((c) => {
+        if (!selectedIds.includes(c.id)) return c;
+        const width = c.size?.width || 100;
+        return { ...c, position: { ...c.position, x: targetValue - width } };
+      });
+
+    case "centerX":
+      // 가로 중앙 정렬 (전체 범위의 중앙)
+      {
+        const minX = Math.min(...selected.map((c) => c.position.x));
+        const maxX = Math.max(...selected.map((c) => c.position.x + (c.size?.width || 100)));
+        const centerX = (minX + maxX) / 2;
+        return components.map((c) => {
+          if (!selectedIds.includes(c.id)) return c;
+          const width = c.size?.width || 100;
+          return { ...c, position: { ...c.position, x: Math.round(centerX - width / 2) } };
+        });
+      }
+
+    case "top":
+      // 가장 위쪽 y값으로 정렬
+      targetValue = Math.min(...selected.map((c) => c.position.y));
+      return components.map((c) => {
+        if (!selectedIds.includes(c.id)) return c;
+        return { ...c, position: { ...c.position, y: targetValue } };
+      });
+
+    case "bottom":
+      // 가장 아래쪽 (y + height)로 정렬
+      targetValue = Math.max(...selected.map((c) => c.position.y + (c.size?.height || 40)));
+      return components.map((c) => {
+        if (!selectedIds.includes(c.id)) return c;
+        const height = c.size?.height || 40;
+        return { ...c, position: { ...c.position, y: targetValue - height } };
+      });
+
+    case "centerY":
+      // 세로 중앙 정렬 (전체 범위의 중앙)
+      {
+        const minY = Math.min(...selected.map((c) => c.position.y));
+        const maxY = Math.max(...selected.map((c) => c.position.y + (c.size?.height || 40)));
+        const centerY = (minY + maxY) / 2;
+        return components.map((c) => {
+          if (!selectedIds.includes(c.id)) return c;
+          const height = c.size?.height || 40;
+          return { ...c, position: { ...c.position, y: Math.round(centerY - height / 2) } };
+        });
+      }
+
+    default:
+      return components;
+  }
+}
+
+/**
+ * 컴포넌트 균등 배분
+ * 선택된 컴포넌트들 간의 간격을 균등하게 분배합니다.
+ * 최소 3개 이상의 컴포넌트가 필요합니다.
+ */
+export function distributeComponents(
+  components: ComponentData[],
+  selectedIds: string[],
+  direction: DistributeDirection
+): ComponentData[] {
+  const selected = components.filter((c) => selectedIds.includes(c.id));
+  if (selected.length < 3) return components;
+
+  if (direction === "horizontal") {
+    // x 기준 정렬
+    const sorted = [...selected].sort((a, b) => a.position.x - b.position.x);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+
+    // 첫 번째 ~ 마지막 컴포넌트 사이의 총 공간
+    const totalSpace = last.position.x + (last.size?.width || 100) - first.position.x;
+    // 컴포넌트들이 차지하는 총 너비
+    const totalComponentWidth = sorted.reduce((sum, c) => sum + (c.size?.width || 100), 0);
+    // 균등 간격
+    const gap = (totalSpace - totalComponentWidth) / (sorted.length - 1);
+
+    // ID -> 새 x 좌표 매핑
+    const newPositions = new Map<string, number>();
+    let currentX = first.position.x;
+    for (const comp of sorted) {
+      newPositions.set(comp.id, Math.round(currentX));
+      currentX += (comp.size?.width || 100) + gap;
+    }
+
+    return components.map((c) => {
+      if (!selectedIds.includes(c.id)) return c;
+      const newX = newPositions.get(c.id);
+      if (newX === undefined) return c;
+      return { ...c, position: { ...c.position, x: newX } };
+    });
+  } else {
+    // y 기준 정렬
+    const sorted = [...selected].sort((a, b) => a.position.y - b.position.y);
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+
+    const totalSpace = last.position.y + (last.size?.height || 40) - first.position.y;
+    const totalComponentHeight = sorted.reduce((sum, c) => sum + (c.size?.height || 40), 0);
+    const gap = (totalSpace - totalComponentHeight) / (sorted.length - 1);
+
+    const newPositions = new Map<string, number>();
+    let currentY = first.position.y;
+    for (const comp of sorted) {
+      newPositions.set(comp.id, Math.round(currentY));
+      currentY += (comp.size?.height || 40) + gap;
+    }
+
+    return components.map((c) => {
+      if (!selectedIds.includes(c.id)) return c;
+      const newY = newPositions.get(c.id);
+      if (newY === undefined) return c;
+      return { ...c, position: { ...c.position, y: newY } };
+    });
+  }
+}
+
+/**
+ * 컴포넌트 동일 크기 맞추기
+ * 선택된 컴포넌트들의 크기를 첫 번째 선택된 컴포넌트 기준으로 맞춥니다.
+ */
+export function matchComponentSize(
+  components: ComponentData[],
+  selectedIds: string[],
+  mode: MatchSizeMode,
+  referenceId?: string
+): ComponentData[] {
+  const selected = components.filter((c) => selectedIds.includes(c.id));
+  if (selected.length < 2) return components;
+
+  // 기준 컴포넌트 (지정하지 않으면 첫 번째 선택된 컴포넌트)
+  const reference = referenceId
+    ? selected.find((c) => c.id === referenceId) || selected[0]
+    : selected[0];
+
+  const refWidth = reference.size?.width || 100;
+  const refHeight = reference.size?.height || 40;
+
+  return components.map((c) => {
+    if (!selectedIds.includes(c.id)) return c;
+
+    const currentWidth = c.size?.width || 100;
+    const currentHeight = c.size?.height || 40;
+
+    let newWidth = currentWidth;
+    let newHeight = currentHeight;
+
+    if (mode === "width" || mode === "both") {
+      newWidth = refWidth;
+    }
+    if (mode === "height" || mode === "both") {
+      newHeight = refHeight;
+    }
+
+    return {
+      ...c,
+      size: {
+        ...c.size,
+        width: newWidth,
+        height: newHeight,
+      },
+    };
+  });
+}
+
+/**
+ * 컴포넌트 라벨 일괄 토글
+ * 모든 컴포넌트의 라벨 표시/숨기기를 토글합니다.
+ * 숨겨진 라벨이 하나라도 있으면 모두 표시, 모두 표시되어 있으면 모두 숨기기
+ */
+export function toggleAllLabels(components: ComponentData[], forceShow?: boolean): ComponentData[] {
+  // 현재 라벨이 숨겨진(labelDisplay === false) 컴포넌트가 있는지 확인
+  const hasHiddenLabel = components.some(
+    (c) => c.type === "widget" && (c.style as any)?.labelDisplay === false
+  );
+
+  // forceShow가 지정되면 그 값 사용, 아니면 자동 판단
+  // 숨겨진 라벨이 있으면 모두 표시, 아니면 모두 숨기기
+  const shouldShow = forceShow !== undefined ? forceShow : hasHiddenLabel;
+
+  return components.map((c) => {
+    // 위젯 타입만 라벨 토글 대상
+    if (c.type !== "widget") return c;
+
+    return {
+      ...c,
+      style: {
+        ...(c.style || {}),
+        labelDisplay: shouldShow,
+      } as any,
+    };
+  });
+}
+
+/**
+ * 컴포넌트 nudge (화살표 키 이동)
+ * 선택된 컴포넌트를 지정 방향으로 이동합니다.
+ */
+export function nudgeComponents(
+  components: ComponentData[],
+  selectedIds: string[],
+  direction: "up" | "down" | "left" | "right",
+  distance: number = 1 // 기본 1px, Shift 누르면 10px
+): ComponentData[] {
+  const dx = direction === "left" ? -distance : direction === "right" ? distance : 0;
+  const dy = direction === "up" ? -distance : direction === "down" ? distance : 0;
+
+  return components.map((c) => {
+    if (!selectedIds.includes(c.id)) return c;
+    return {
+      ...c,
+      position: {
+        ...c.position,
+        x: Math.max(0, c.position.x + dx),
+        y: Math.max(0, c.position.y + dy),
+      },
+    };
+  });
+}
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 07ce0691..71a23472 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -8,6 +8,30 @@ import { ImprovedButtonActionExecutor } from "@/lib/utils/improvedButtonActionEx
 import { apiClient } from "@/lib/api/client";
 import type { ExtendedControlContext } from "@/types/control-management";
 
+/**
+ * 🔧 formData 내 배열 값을 쉼표 구분 문자열로 변환
+ * PostgreSQL 배열 형식 저장 방지
+ */
+function normalizeFormDataArrays(formData: Record<string, any>): Record<string, any> {
+  if (!formData || typeof formData !== "object") return formData;
+  
+  const normalized: Record<string, any> = {};
+  for (const [key, value] of Object.entries(formData)) {
+    if (Array.isArray(value)) {
+      // 배열 내 숫자를 문자열로 변환 후 쉼표 구분
+      const stringValue = value
+        .map(v => typeof v === "number" ? String(v) : v)
+        .filter(v => v !== null && v !== undefined && v !== "")
+        .join(",");
+      console.log(`🔧 [normalizeFormDataArrays] 배열→문자열: ${key}`, { original: value, converted: stringValue });
+      normalized[key] = stringValue;
+    } else {
+      normalized[key] = value;
+    }
+  }
+  return normalized;
+}
+
 /**
  * 버튼 액션 타입 정의
  */
@@ -30,7 +54,8 @@ export type ButtonActionType =
   | "operation_control" // 운행알림 및 종료 (위치 수집 + 상태 변경 + 연속 추적)
   | "swap_fields" // 필드 값 교환 (출발지 ↔ 목적지)
   | "transferData" // 데이터 전달 (컴포넌트 간 or 화면 간)
-  | "quickInsert"; // 즉시 저장 (선택한 데이터를 특정 테이블에 즉시 INSERT)
+  | "quickInsert" // 즉시 저장 (선택한 데이터를 특정 테이블에 즉시 INSERT)
+  | "event"; // 이벤트 버스로 이벤트 발송 (스케줄 생성 등)
 
 /**
  * 버튼 액션 설정
@@ -251,6 +276,12 @@ export interface ButtonActionConfig {
       successMessage?: string; // 성공 메시지
     };
   };
+
+  // 이벤트 버스 발송 관련 (event 액션용)
+  eventConfig?: {
+    eventName: string; // 발송할 이벤트 이름 (V2_EVENTS 키)
+    eventPayload?: Record<string, any>; // 이벤트 페이로드 (requestId는 자동 생성)
+  };
 }
 
 /**
@@ -416,6 +447,9 @@ export class ButtonActionExecutor {
         case "quickInsert":
           return await this.handleQuickInsert(config, context);
 
+        case "event":
+          return await this.handleEvent(config, context);
+
         default:
           console.warn(`지원되지 않는 액션 타입: ${config.type}`);
           return false;
@@ -474,6 +508,15 @@ export class ButtonActionExecutor {
     this.saveCallCount++;
     const callId = this.saveCallCount;
 
+    // 🔧 디버그: context.formData 확인 (handleSave 진입 시점)
+    console.log("🔍 [handleSave] 진입 시 context.formData:", {
+      keys: Object.keys(context.formData || {}),
+      hasCompanyImage: "company_image" in (context.formData || {}),
+      hasCompanyLogo: "company_logo" in (context.formData || {}),
+      companyImageValue: context.formData?.company_image,
+      companyLogoValue: context.formData?.company_logo,
+    });
+
     const { formData, originalData, tableName, screenId, onSave } = context;
 
     // 🆕 중복 호출 방지: 같은 screenId + tableName + formData 조합으로 2초 내 재호출 시 무시
@@ -514,6 +557,14 @@ export class ButtonActionExecutor {
     // 🆕 저장 전 이벤트 발생 (SelectedItemsDetailInput 등에서 최신 데이터 수집)
     // context.formData를 이벤트 detail에 포함하여 직접 수정 가능하게 함
     // skipDefaultSave 플래그를 통해 기본 저장 로직을 건너뛸 수 있음
+
+    // 🔧 디버그: beforeFormSave 이벤트 전 formData 확인
+    console.log("🔍 [handleSave] beforeFormSave 이벤트 전:", {
+      keys: Object.keys(context.formData || {}),
+      hasCompanyImage: "company_image" in (context.formData || {}),
+      companyImageValue: context.formData?.company_image,
+    });
+
     const beforeSaveEventDetail = {
       formData: context.formData,
       skipDefaultSave: false,
@@ -529,6 +580,13 @@ export class ButtonActionExecutor {
     // 약간의 대기 시간을 주어 이벤트 핸들러가 formData를 업데이트할 수 있도록 함
     await new Promise((resolve) => setTimeout(resolve, 100));
 
+    // 🔧 디버그: beforeFormSave 이벤트 후 formData 확인
+    console.log("🔍 [handleSave] beforeFormSave 이벤트 후:", {
+      keys: Object.keys(context.formData || {}),
+      hasCompanyImage: "company_image" in (context.formData || {}),
+      companyImageValue: context.formData?.company_image,
+    });
+
     // 검증 실패 시 저장 중단
     if (beforeSaveEventDetail.validationFailed) {
       console.log("❌ [handleSave] 검증 실패로 저장 중단:", beforeSaveEventDetail.validationErrors);
@@ -658,6 +716,10 @@ export class ButtonActionExecutor {
       return await this.handleBatchSave(config, context, selectedItemsKeys);
     } else {
       console.log("⚠️ [handleSave] SelectedItemsDetailInput 데이터 감지 실패 - 일반 저장 진행");
+      // 🔧 디버그: formData 상세 확인
+      console.log("🔍 [handleSave] formData 키 목록:", Object.keys(context.formData || {}));
+      console.log("🔍 [handleSave] formData.company_image:", context.formData?.company_image);
+      console.log("🔍 [handleSave] formData.company_logo:", context.formData?.company_logo);
       console.log("⚠️ [handleSave] formData 전체 내용:", context.formData);
     }
 
@@ -699,7 +761,9 @@ export class ButtonActionExecutor {
 
         for (const [fieldName, ruleId] of Object.entries(fieldsWithNumberingRepeater)) {
           try {
-            const allocateResult = await allocateNumberingCode(ruleId);
+            // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
+            const userInputCode = context.formData[fieldName] as string;
+            const allocateResult = await allocateNumberingCode(ruleId, userInputCode, context.formData);
 
             if (allocateResult.success && allocateResult.data?.generatedCode) {
               const newCode = allocateResult.data.generatedCode;
@@ -938,6 +1002,28 @@ export class ButtonActionExecutor {
         if (isUpdate) {
           // UPDATE 처리 - 부분 업데이트 사용 (원본 데이터가 있는 경우)
 
+          // 🔧 UPDATE 전 formData 배열 → 쉼표 구분 문자열 변환 (리피터 데이터 제외)
+          for (const key of Object.keys(formData)) {
+            const value = formData[key];
+            if (Array.isArray(value)) {
+              // 리피터 데이터인지 확인 (객체 배열이고 _targetTable 또는 _isNewItem이 있으면 리피터)
+              const isRepeaterData = value.length > 0 && 
+                typeof value[0] === "object" && 
+                value[0] !== null &&
+                ("_targetTable" in value[0] || "_isNewItem" in value[0] || "_existingRecord" in value[0]);
+              
+              if (!isRepeaterData) {
+                // 🔧 다중 선택 배열 → 쉼표 구분 문자열로 변환
+                const stringValue = value
+                  .map(v => typeof v === "number" ? String(v) : v)
+                  .filter(v => v !== null && v !== undefined && v !== "")
+                  .join(",");
+                console.log(`🔧 [handleSave UPDATE] 배열→문자열 변환: ${key}`, { original: value, converted: stringValue });
+                formData[key] = stringValue;
+              }
+            }
+          }
+
           if (hasRealOriginalData) {
             // 부분 업데이트: 변경된 필드만 업데이트
 
@@ -992,7 +1078,9 @@ export class ButtonActionExecutor {
 
             for (const [fieldName, ruleId] of Object.entries(fieldsWithNumbering)) {
               try {
-                const allocateResult = await allocateNumberingCode(ruleId);
+                // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
+                const userInputCode = formData[fieldName] as string;
+                const allocateResult = await allocateNumberingCode(ruleId, userInputCode, formData);
 
                 if (allocateResult.success && allocateResult.data?.generatedCode) {
                   const newCode = allocateResult.data.generatedCode;
@@ -1089,11 +1177,30 @@ export class ButtonActionExecutor {
             }
           }
 
-          // 🆕 배열 데이터(리피터 데이터) 제거 - 마스터 테이블에는 배열 데이터를 저장하지 않음
+          // 🆕 배열 데이터 처리 - 마스터 테이블에는 배열 데이터를 저장하지 않음
           // 리피터 데이터는 별도의 RepeaterFieldGroup/V2Repeater 저장 로직에서 처리됨
+          // 🔧 단순 배열(다중 선택)은 쉼표 구분 문자열로 변환, 리피터 데이터 배열은 제거
           for (const key of Object.keys(dataWithUserInfo)) {
-            if (Array.isArray(dataWithUserInfo[key])) {
-              delete dataWithUserInfo[key];
+            const value = dataWithUserInfo[key];
+            if (Array.isArray(value)) {
+              // 리피터 데이터인지 확인 (객체 배열이고 _targetTable 또는 _isNewItem이 있으면 리피터)
+              const isRepeaterData = value.length > 0 && 
+                typeof value[0] === "object" && 
+                value[0] !== null &&
+                ("_targetTable" in value[0] || "_isNewItem" in value[0] || "_existingRecord" in value[0]);
+              
+              if (isRepeaterData) {
+                // 리피터 데이터는 제거 (별도 저장 로직에서 처리)
+                delete dataWithUserInfo[key];
+              } else {
+                // 🔧 다중 선택 배열 → 쉼표 구분 문자열로 변환
+                const stringValue = value
+                  .map(v => typeof v === "number" ? String(v) : v)
+                  .filter(v => v !== null && v !== undefined && v !== "")
+                  .join(",");
+                console.log(`🔧 [handleSave] 배열→문자열 변환: ${key}`, { original: value, converted: stringValue });
+                dataWithUserInfo[key] = stringValue;
+              }
             }
           }
 
@@ -1578,7 +1685,18 @@ export class ButtonActionExecutor {
         if (config.enableDataflowControl && config.dataflowConfig) {
           // 테이블 섹션 데이터 파싱 (comp_로 시작하는 필드에 JSON 배열이 있는 경우)
           // 입고 화면 등에서 품목 목록이 comp_xxx 필드에 JSON 문자열로 저장됨
-          const formData: Record<string, any> = (saveResult.data || context.formData || {}) as Record<string, any>;
+          // 🔧 수정: saveResult.data가 3단계로 중첩된 경우 실제 폼 데이터 추출
+          // saveResult.data = API 응답 { success, data, message }
+          // saveResult.data.data = 저장된 레코드 { id, screenId, tableName, data, createdAt... }
+          // saveResult.data.data.data = 실제 폼 데이터 { sabun, user_name... }
+          const savedRecord = saveResult?.data?.data || saveResult?.data || {};
+          const actualFormData = savedRecord?.data || savedRecord;
+          const formData: Record<string, any> = (
+            Object.keys(actualFormData).length > 0 ? actualFormData : context.formData || {}
+          ) as Record<string, any>;
+          console.log("📦 [executeAfterSaveControl] savedRecord 구조:", Object.keys(savedRecord));
+          console.log("📦 [executeAfterSaveControl] actualFormData 추출:", Object.keys(formData));
+          console.log("📦 [executeAfterSaveControl] formData.sabun:", formData.sabun);
           let parsedSectionData: any[] = [];
 
           // comp_로 시작하는 필드에서 테이블 섹션 데이터 찾기
@@ -2016,7 +2134,9 @@ export class ButtonActionExecutor {
 
       for (const [fieldName, ruleId] of Object.entries(fieldsWithNumbering)) {
         try {
-          const allocateResult = await allocateNumberingCode(ruleId);
+          // 🆕 사용자가 편집한 값을 전달 (수동 입력 부분 추출용)
+          const userInputCode = commonFieldsData[fieldName] as string;
+          const allocateResult = await allocateNumberingCode(ruleId, userInputCode, formData);
 
           if (allocateResult.success && allocateResult.data?.generatedCode) {
             const newCode = allocateResult.data.generatedCode;
@@ -2871,8 +2991,7 @@ export class ButtonActionExecutor {
 
             if (v2ListComponent) {
               dataSourceId =
-                v2ListComponent.componentConfig.dataSource?.table ||
-                v2ListComponent.componentConfig.tableName;
+                v2ListComponent.componentConfig.dataSource?.table || v2ListComponent.componentConfig.tableName;
               console.log("✨ V2List 자동 감지:", {
                 componentId: v2ListComponent.id,
                 tableName: dataSourceId,
@@ -3005,9 +3124,13 @@ export class ButtonActionExecutor {
     }
 
     // 4. 모달 열기 이벤트 발생
-    // passSelectedData가 true이면 editData로 전달 (수정 모드처럼 모든 필드 표시)
+    // 🔧 수정: openModalWithData는 "신규 등록 + 연결 데이터 전달"용이므로
+    // editData가 아닌 splitPanelParentData로 전달해야 채번 등이 정상 작동함
     const isPassDataMode = passSelectedData && selectedData.length > 0;
 
+    // 🔧 isEditMode 옵션이 명시적으로 true인 경우에만 수정 모드로 처리
+    const useAsEditData = config.isEditMode === true;
+
     const modalEvent = new CustomEvent("openScreenModal", {
       detail: {
         screenId: config.targetScreenId,
@@ -3016,19 +3139,18 @@ export class ButtonActionExecutor {
         size: config.modalSize || "md",
         selectedData: selectedData,
         selectedIds: selectedData.map((row: any) => row.id).filter(Boolean),
-        // 🆕 데이터 전달 모드일 때는 editData로 전달하여 모든 필드가 표시되도록 함
-        editData: isPassDataMode ? parentData : undefined,
-        splitPanelParentData: isPassDataMode ? undefined : parentData,
+        // 🔧 수정: isEditMode가 명시적으로 true인 경우에만 editData로 전달
+        // 기본적으로는 splitPanelParentData로 전달하여 신규 등록 + 연결 데이터 모드
+        editData: useAsEditData && isPassDataMode ? parentData : undefined,
+        splitPanelParentData: isPassDataMode ? parentData : undefined,
         urlParams: dataSourceId ? { dataSourceId } : undefined,
       },
     });
 
     window.dispatchEvent(modalEvent);
 
-    // 성공 메시지 (autoDetectDataSource 모드에서만)
-    if (autoDetectDataSource && config.successMessage) {
-      toast.success(config.successMessage);
-    }
+    // 모달 열기는 UI 전환이므로 성공 토스트를 표시하지 않음
+    // (저장 등 실제 액션 완료 시에만 토스트 표시)
 
     return true;
   }
@@ -3217,8 +3339,7 @@ export class ButtonActionExecutor {
 
       window.dispatchEvent(modalEvent);
 
-      // 성공 메시지 (간단하게)
-      toast.success(config.successMessage || "다음 단계로 진행합니다.");
+      // 모달 열기는 UI 전환이므로 성공 토스트를 표시하지 않음
 
       return true;
     } else {
@@ -3445,10 +3566,13 @@ export class ButtonActionExecutor {
       const screenModalEvent = new CustomEvent("openScreenModal", {
         detail: {
           screenId: config.targetScreenId,
-          title: config.editModalTitle || "데이터 수정",
+          title: isCreateMode ? config.editModalTitle || "데이터 복사" : config.editModalTitle || "데이터 수정",
           description: description,
           size: config.modalSize || "lg",
-          editData: rowData, // 🆕 수정 데이터 전달
+          // 🔧 복사 모드에서는 editData 대신 splitPanelParentData로 전달하여 채번이 생성되도록 함
+          editData: isCreateMode ? undefined : rowData,
+          splitPanelParentData: isCreateMode ? rowData : undefined,
+          isCreateMode: isCreateMode, // 🆕 복사 모드 플래그 전달
         },
       });
       window.dispatchEvent(screenModalEvent);
@@ -3805,7 +3929,8 @@ export class ButtonActionExecutor {
 
             case "form":
               if (context.formData && Object.keys(context.formData).length > 0) {
-                sourceData = [context.formData];
+                // 🔧 배열 값을 쉼표 구분 문자열로 변환
+                sourceData = [normalizeFormDataArrays(context.formData)];
               } else {
                 console.warn("⚠️ form 모드이지만 폼 데이터가 없습니다.");
               }
@@ -3850,7 +3975,8 @@ export class ButtonActionExecutor {
                   dataSourceType = "table-selection";
                 }
               } else if (context.formData && Object.keys(context.formData).length > 0) {
-                sourceData = [context.formData];
+                // 🔧 배열 값을 쉼표 구분 문자열로 변환
+                sourceData = [normalizeFormDataArrays(context.formData)];
                 dataSourceType = "form";
               }
               break;
@@ -3976,16 +4102,27 @@ export class ButtonActionExecutor {
       const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
 
       // 데이터 소스 준비: context-data 모드는 배열을 기대함
-      // 우선순위: selectedRowsData > savedData > formData
-      // - selectedRowsData: 테이블 섹션에서 저장된 하위 항목들 (item_code, inbound_qty 등 포함)
-      // - savedData: 저장 API 응답 데이터
-      // - formData: 폼에 입력된 데이터
+      // 🔧 저장 후 제어: savedData > formData > selectedRowsData
+      // - 저장 후 제어에서는 방금 저장된 데이터(savedData)가 가장 중요!
+      // - selectedRowsData는 왼쪽 패널 선택 데이터일 수 있으므로 마지막 순위
       let sourceData: any[];
-      if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+      if (context.savedData) {
+        // 저장된 데이터가 있으면 우선 사용 (저장 API 응답)
+        sourceData = Array.isArray(context.savedData) ? context.savedData : [context.savedData];
+        console.log("📦 [executeAfterSaveControl] savedData 사용:", sourceData);
+        console.log("📦 [executeAfterSaveControl] savedData 필드:", Object.keys(context.savedData));
+        console.log("📦 [executeAfterSaveControl] savedData.sabun:", context.savedData.sabun);
+      } else if (context.formData && Object.keys(context.formData).length > 0) {
+        // 폼 데이터 사용 (🔧 배열 값을 쉼표 구분 문자열로 변환)
+        sourceData = [normalizeFormDataArrays(context.formData)];
+        console.log("📦 [executeAfterSaveControl] formData 사용:", sourceData);
+      } else if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+        // 테이블 섹션 데이터 (마지막 순위)
         sourceData = context.selectedRowsData;
+        console.log("📦 [executeAfterSaveControl] selectedRowsData 사용:", sourceData);
       } else {
-        const savedData = context.savedData || context.formData || {};
-        sourceData = Array.isArray(savedData) ? savedData : [savedData];
+        sourceData = [];
+        console.warn("⚠️ [executeAfterSaveControl] 데이터 소스 없음!");
       }
 
       let allSuccess = true;
@@ -4085,16 +4222,25 @@ export class ButtonActionExecutor {
         const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
 
         // 데이터 소스 준비: context-data 모드는 배열을 기대함
-        // 우선순위: selectedRowsData > savedData > formData
-        // - selectedRowsData: 테이블 섹션에서 저장된 하위 항목들 (item_code, inbound_qty 등 포함)
-        // - savedData: 저장 API 응답 데이터
-        // - formData: 폼에 입력된 데이터
+        // 🔧 저장 후 제어: savedData > formData > selectedRowsData
+        // - 저장 후 제어에서는 방금 저장된 데이터(savedData)가 가장 중요!
+        // - selectedRowsData는 왼쪽 패널 선택 데이터일 수 있으므로 마지막 순위
         let sourceData: any[];
-        if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+        if (context.savedData) {
+          // 저장된 데이터가 있으면 우선 사용 (저장 API 응답)
+          sourceData = Array.isArray(context.savedData) ? context.savedData : [context.savedData];
+          console.log("📦 [executeSingleFlowControl] savedData 사용:", sourceData);
+        } else if (context.formData && Object.keys(context.formData).length > 0) {
+          // 폼 데이터 사용 (🔧 배열 값을 쉼표 구분 문자열로 변환)
+          sourceData = [normalizeFormDataArrays(context.formData)];
+          console.log("📦 [executeSingleFlowControl] formData 사용:", sourceData);
+        } else if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+          // 테이블 섹션 데이터 (마지막 순위)
           sourceData = context.selectedRowsData;
+          console.log("📦 [executeSingleFlowControl] selectedRowsData 사용:", sourceData);
         } else {
-          const savedData = context.savedData || context.formData || {};
-          sourceData = Array.isArray(savedData) ? savedData : [savedData];
+          sourceData = [];
+          console.warn("⚠️ [executeSingleFlowControl] 데이터 소스 없음!");
         }
 
         // repeat-screen-modal 데이터가 있으면 병합
@@ -7010,6 +7156,52 @@ export class ButtonActionExecutor {
       errors,
     };
   }
+
+  /**
+   * 이벤트 버스로 이벤트 발송 (스케줄 생성 등)
+   */
+  private static async handleEvent(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
+    try {
+      const { eventConfig } = config;
+
+      if (!eventConfig?.eventName) {
+        toast.error("이벤트 설정이 올바르지 않습니다.");
+        console.error("[handleEvent] eventName이 설정되지 않음", { config });
+        return false;
+      }
+
+      // V2_EVENTS에서 이벤트 이름 가져오기
+      const { v2EventBus, V2_EVENTS } = await import("@/lib/v2-core");
+
+      // 이벤트 이름 검증
+      const eventName = eventConfig.eventName as keyof typeof V2_EVENTS;
+      if (!V2_EVENTS[eventName]) {
+        toast.error(`알 수 없는 이벤트: ${eventConfig.eventName}`);
+        console.error("[handleEvent] 알 수 없는 이벤트", { eventName, V2_EVENTS });
+        return false;
+      }
+
+      // 페이로드 구성
+      const eventPayload = {
+        requestId: crypto.randomUUID(),
+        ...eventConfig.eventPayload,
+      };
+
+      console.log("[handleEvent] 이벤트 발송:", {
+        eventName: V2_EVENTS[eventName],
+        payload: eventPayload,
+      });
+
+      // 이벤트 발송
+      v2EventBus.emit(V2_EVENTS[eventName], eventPayload);
+
+      return true;
+    } catch (error) {
+      console.error("[handleEvent] 이벤트 발송 오류:", error);
+      toast.error("이벤트 발송 중 오류가 발생했습니다.");
+      return false;
+    }
+  }
 }
 
 /**
@@ -7038,7 +7230,7 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
     modalSize: "md",
     passSelectedData: true,
     autoDetectDataSource: true,
-    successMessage: "다음 단계로 진행합니다.",
+    // 모달 열기는 UI 전환이므로 successMessage 제거
   },
   modal: {
     type: "modal",
@@ -7131,4 +7323,7 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
     successMessage: "저장되었습니다.",
     errorMessage: "저장 중 오류가 발생했습니다.",
   },
+  event: {
+    type: "event",
+  },
 };
diff --git a/frontend/lib/utils/improvedButtonActionExecutor.ts b/frontend/lib/utils/improvedButtonActionExecutor.ts
index 7672fe55..5bd20866 100644
--- a/frontend/lib/utils/improvedButtonActionExecutor.ts
+++ b/frontend/lib/utils/improvedButtonActionExecutor.ts
@@ -43,13 +43,20 @@ export interface ButtonExecutionResult {
 }
 
 interface ControlConfig {
-  type: "relationship";
-  relationshipConfig: {
+  type: "relationship" | "flow";
+  relationshipConfig?: {
     relationshipId: string;
     relationshipName: string;
     executionTiming: "before" | "after" | "replace";
     contextData?: Record<string, any>;
   };
+  // 🆕 플로우 기반 제어 설정
+  flowConfig?: {
+    flowId: number;
+    flowName: string;
+    executionTiming: "before" | "after" | "replace";
+    contextData?: Record<string, any>;
+  };
 }
 
 interface ExecutionPlan {
@@ -163,15 +170,22 @@ export class ImprovedButtonActionExecutor {
       return plan;
     }
 
-    // enableDataflowControl 체크를 제거하고 dataflowConfig만 있으면 실행
+    // 🔧 controlMode가 없으면 flowConfig/relationshipConfig 존재 여부로 자동 판단
+    const effectiveControlMode = dataflowConfig.controlMode 
+      || (dataflowConfig.flowConfig ? "flow" : null)
+      || (dataflowConfig.relationshipConfig ? "relationship" : null)
+      || "none";
+
     console.log("📋 실행 계획 생성:", {
       controlMode: dataflowConfig.controlMode,
+      effectiveControlMode,
+      hasFlowConfig: !!dataflowConfig.flowConfig,
       hasRelationshipConfig: !!dataflowConfig.relationshipConfig,
       enableDataflowControl: buttonConfig.enableDataflowControl,
     });
 
-    // 관계 기반 제어만 지원
-    if (dataflowConfig.controlMode === "relationship" && dataflowConfig.relationshipConfig) {
+    // 관계 기반 제어
+    if (effectiveControlMode === "relationship" && dataflowConfig.relationshipConfig) {
       const control: ControlConfig = {
         type: "relationship",
         relationshipConfig: dataflowConfig.relationshipConfig,
@@ -191,11 +205,34 @@ export class ImprovedButtonActionExecutor {
       }
     }
 
+    // 🆕 플로우 기반 제어
+    if (effectiveControlMode === "flow" && dataflowConfig.flowConfig) {
+      const control: ControlConfig = {
+        type: "flow",
+        flowConfig: dataflowConfig.flowConfig,
+      };
+
+      console.log("📋 플로우 제어 설정:", dataflowConfig.flowConfig);
+
+      switch (dataflowConfig.flowConfig.executionTiming) {
+        case "before":
+          plan.beforeControls.push(control);
+          break;
+        case "after":
+          plan.afterControls.push(control);
+          break;
+        case "replace":
+          plan.afterControls.push(control);
+          plan.hasReplaceControl = true;
+          break;
+      }
+    }
+
     return plan;
   }
 
   /**
-   * 🔥 제어 실행 (관계 또는 외부호출)
+   * 🔥 제어 실행 (관계 또는 플로우)
    */
   private static async executeControls(
     controls: ControlConfig[],
@@ -206,8 +243,16 @@ export class ImprovedButtonActionExecutor {
 
     for (const control of controls) {
       try {
-        // 관계 실행만 지원
-        const result = await this.executeRelationship(control.relationshipConfig, formData, context);
+        let result: ExecutionResult;
+
+        // 🆕 제어 타입에 따라 분기 처리
+        if (control.type === "flow" && control.flowConfig) {
+          result = await this.executeFlow(control.flowConfig, formData, context);
+        } else if (control.type === "relationship" && control.relationshipConfig) {
+          result = await this.executeRelationship(control.relationshipConfig, formData, context);
+        } else {
+          throw new Error(`지원하지 않는 제어 타입: ${control.type}`);
+        }
 
         results.push(result);
 
@@ -215,7 +260,7 @@ export class ImprovedButtonActionExecutor {
         if (!result.success) {
           throw new Error(result.message);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error(`제어 실행 실패 (${control.type}):`, error);
         results.push({
           success: false,
@@ -230,6 +275,61 @@ export class ImprovedButtonActionExecutor {
     return results;
   }
 
+  /**
+   * 🆕 플로우 실행
+   */
+  private static async executeFlow(
+    config: {
+      flowId: number;
+      flowName: string;
+      executionTiming: "before" | "after" | "replace";
+      contextData?: Record<string, any>;
+    },
+    formData: Record<string, any>,
+    context: ButtonExecutionContext,
+  ): Promise<ExecutionResult> {
+    const startTime = Date.now();
+
+    try {
+      console.log(`🔄 플로우 실행 시작: ${config.flowName} (ID: ${config.flowId})`);
+
+      // 플로우 실행 API 호출
+      const response = await apiClient.post(`/api/dataflow/node-flows/${config.flowId}/execute`, {
+        formData,
+        contextData: config.contextData || {},
+        selectedRows: context.selectedRows || [],
+        flowSelectedData: context.flowSelectedData || [],
+        screenId: context.screenId,
+        companyCode: context.companyCode,
+        userId: context.userId,
+      });
+
+      const executionTime = Date.now() - startTime;
+
+      if (response.data?.success) {
+        console.log(`✅ 플로우 실행 성공: ${config.flowName}`, response.data);
+        return {
+          success: true,
+          message: `플로우 "${config.flowName}" 실행 완료`,
+          executionTime,
+          data: response.data,
+        };
+      } else {
+        throw new Error(response.data?.message || "플로우 실행 실패");
+      }
+    } catch (error: any) {
+      const executionTime = Date.now() - startTime;
+      console.error(`❌ 플로우 실행 실패: ${config.flowName}`, error);
+
+      return {
+        success: false,
+        message: `플로우 "${config.flowName}" 실행 실패: ${error.message}`,
+        executionTime,
+        error: error.message,
+      };
+    }
+  }
+
   /**
    * 🔥 관계 실행
    */
diff --git a/frontend/lib/utils/layoutV2Converter.ts b/frontend/lib/utils/layoutV2Converter.ts
index d1d7487d..fff56bf9 100644
--- a/frontend/lib/utils/layoutV2Converter.ts
+++ b/frontend/lib/utils/layoutV2Converter.ts
@@ -33,6 +33,109 @@ interface LegacyLayoutData {
   metadata?: any;
 }
 
+// ============================================
+// 중첩 컴포넌트 기본값 적용 헬퍼 함수 (재귀적)
+// ============================================
+function applyDefaultsToNestedComponents(components: any[]): any[] {
+  if (!Array.isArray(components)) return components;
+
+  return components.map((nestedComp: any) => {
+    if (!nestedComp) return nestedComp;
+
+    // 중첩 컴포넌트의 타입 확인 (componentType 또는 url에서 추출)
+    let nestedComponentType = nestedComp.componentType;
+    if (!nestedComponentType && nestedComp.url) {
+      nestedComponentType = getComponentTypeFromUrl(nestedComp.url);
+    }
+
+    // 결과 객체 초기화 (원본 복사)
+    const result = { ...nestedComp };
+
+    // 🆕 탭 위젯인 경우 재귀적으로 탭 내부 컴포넌트도 처리
+    if (nestedComponentType === "v2-tabs-widget") {
+      const config = result.componentConfig || {};
+      if (config.tabs && Array.isArray(config.tabs)) {
+        result.componentConfig = {
+          ...config,
+          tabs: config.tabs.map((tab: any) => {
+            if (tab?.components && Array.isArray(tab.components)) {
+              return {
+                ...tab,
+                components: applyDefaultsToNestedComponents(tab.components),
+              };
+            }
+            return tab;
+          }),
+        };
+      }
+    }
+
+    // 🆕 분할 패널인 경우 재귀적으로 내부 컴포넌트도 처리
+    if (nestedComponentType === "v2-split-panel-layout") {
+      const config = result.componentConfig || {};
+      result.componentConfig = {
+        ...config,
+        leftPanel: config.leftPanel
+          ? {
+              ...config.leftPanel,
+              components: applyDefaultsToNestedComponents(config.leftPanel.components || []),
+            }
+          : config.leftPanel,
+        rightPanel: config.rightPanel
+          ? {
+              ...config.rightPanel,
+              components: applyDefaultsToNestedComponents(config.rightPanel.components || []),
+            }
+          : config.rightPanel,
+      };
+    }
+
+    // 컴포넌트 타입이 없으면 그대로 반환
+    if (!nestedComponentType) {
+      return result;
+    }
+
+    // 중첩 컴포넌트의 기본값 가져오기
+    const nestedDefaults = getDefaultsByUrl(`registry://${nestedComponentType}`);
+
+    // componentConfig가 있으면 기본값과 병합
+    if (result.componentConfig && Object.keys(nestedDefaults).length > 0) {
+      const mergedNestedConfig = mergeComponentConfig(nestedDefaults, result.componentConfig);
+      return {
+        ...result,
+        componentConfig: mergedNestedConfig,
+      };
+    }
+
+    return result;
+  });
+}
+
+// ============================================
+// 분할 패널 내부 컴포넌트 기본값 적용
+// ============================================
+function applyDefaultsToSplitPanelComponents(mergedConfig: Record<string, any>): Record<string, any> {
+  const result = { ...mergedConfig };
+
+  // leftPanel.components 처리
+  if (result.leftPanel?.components) {
+    result.leftPanel = {
+      ...result.leftPanel,
+      components: applyDefaultsToNestedComponents(result.leftPanel.components),
+    };
+  }
+
+  // rightPanel.components 처리
+  if (result.rightPanel?.components) {
+    result.rightPanel = {
+      ...result.rightPanel,
+      components: applyDefaultsToNestedComponents(result.rightPanel.components),
+    };
+  }
+
+  return result;
+}
+
 // ============================================
 // V2 → Legacy 변환 (로드 시)
 // ============================================
@@ -44,7 +147,28 @@ export function convertV2ToLegacy(v2Layout: LayoutV2 | null): LegacyLayoutData |
   const components: LegacyComponentData[] = v2Layout.components.map((comp) => {
     const componentType = getComponentTypeFromUrl(comp.url);
     const defaults = getDefaultsByUrl(comp.url);
-    const mergedConfig = mergeComponentConfig(defaults, comp.overrides);
+    let mergedConfig = mergeComponentConfig(defaults, comp.overrides);
+
+    // 🆕 분할 패널인 경우 내부 컴포넌트에도 기본값 적용
+    if (componentType === "v2-split-panel-layout") {
+      mergedConfig = applyDefaultsToSplitPanelComponents(mergedConfig);
+    }
+
+    // 🆕 탭 위젯인 경우 탭 내부 컴포넌트에도 기본값 적용
+    if (componentType === "v2-tabs-widget" && mergedConfig.tabs) {
+      mergedConfig = {
+        ...mergedConfig,
+        tabs: mergedConfig.tabs.map((tab: any) => {
+          if (tab?.components) {
+            return {
+              ...tab,
+              components: applyDefaultsToNestedComponents(tab.components),
+            };
+          }
+          return tab;
+        }),
+      };
+    }
 
     // 🆕 overrides에서 상위 레벨 속성들 추출
     const overrides = comp.overrides || {};
@@ -63,11 +187,17 @@ export function convertV2ToLegacy(v2Layout: LayoutV2 | null): LegacyLayoutData |
       label: overrides.label || mergedConfig.label || "", // 라벨이 없으면 빈 문자열
       required: overrides.required,
       readonly: overrides.readonly,
+      hidden: overrides.hidden, // 🆕 숨김 설정 복원
       codeCategory: overrides.codeCategory,
       inputType: overrides.inputType,
       webType: overrides.webType,
+      // 🆕 autoFill 설정 복원 (자동 입력 기능)
+      autoFill: overrides.autoFill,
+      // 🆕 style 설정 복원 (라벨 텍스트, 라벨 스타일 등)
+      style: overrides.style || {},
+      // 🔧 webTypeConfig 복원 (버튼 제어기능, 플로우 가시성 등)
+      webTypeConfig: overrides.webTypeConfig || {},
       // 기존 구조 호환을 위한 추가 필드
-      style: {},
       parentId: null,
       gridColumns: 12,
       gridRowIndex: 0,
@@ -109,19 +239,59 @@ export function convertLegacyToV2(legacyLayout: LegacyLayoutData): LayoutV2 {
     const topLevelProps: Record<string, any> = {};
     if (comp.tableName) topLevelProps.tableName = comp.tableName;
     if (comp.columnName) topLevelProps.columnName = comp.columnName;
-    if (comp.label) topLevelProps.label = comp.label;
+    // 🔧 label은 빈 문자열도 저장 (라벨 삭제 지원)
+    if (comp.label !== undefined) topLevelProps.label = comp.label;
     if (comp.required !== undefined) topLevelProps.required = comp.required;
     if (comp.readonly !== undefined) topLevelProps.readonly = comp.readonly;
+    if (comp.hidden !== undefined) topLevelProps.hidden = comp.hidden; // 🆕 숨김 설정 저장
     if (comp.codeCategory) topLevelProps.codeCategory = comp.codeCategory;
     if (comp.inputType) topLevelProps.inputType = comp.inputType;
     if (comp.webType) topLevelProps.webType = comp.webType;
+    // 🆕 autoFill 설정 저장 (자동 입력 기능)
+    if (comp.autoFill) topLevelProps.autoFill = comp.autoFill;
+    // 🆕 style 설정 저장 (라벨 텍스트, 라벨 스타일 등)
+    if (comp.style && Object.keys(comp.style).length > 0) topLevelProps.style = comp.style;
+    // 🔧 webTypeConfig 저장 (버튼 제어기능, 플로우 가시성 등)
+    if (comp.webTypeConfig && Object.keys(comp.webTypeConfig).length > 0) {
+      topLevelProps.webTypeConfig = comp.webTypeConfig;
+      // 🔍 디버그: webTypeConfig 저장 확인
+      if (comp.webTypeConfig.dataflowConfig || comp.webTypeConfig.enableDataflowControl) {
+        console.log("💾 webTypeConfig 저장:", {
+          componentId: comp.id,
+          enableDataflowControl: comp.webTypeConfig.enableDataflowControl,
+          dataflowConfig: comp.webTypeConfig.dataflowConfig,
+        });
+      }
+    }
 
     // 현재 설정에서 차이값만 추출
     const fullConfig = comp.componentConfig || {};
     const configOverrides = extractCustomConfig(fullConfig, defaults);
 
+    // 🔧 디버그: style 저장 확인 (주석 처리)
+    // if (comp.style?.labelDisplay !== undefined || configOverrides.style?.labelDisplay !== undefined) { console.log("💾 저장 시 style 변환:", { componentId: comp.id, "comp.style": comp.style, "configOverrides.style": configOverrides.style, "topLevelProps.style": topLevelProps.style }); }
+
     // 상위 레벨 속성과 componentConfig 병합
-    const overrides = { ...topLevelProps, ...configOverrides };
+    // 🔧 style은 양쪽을 병합하되 comp.style(topLevelProps.style)을 우선시
+    const mergedStyle = {
+      ...(configOverrides.style || {}),
+      ...(topLevelProps.style || {}),
+    };
+
+    // 🔧 webTypeConfig도 병합 (topLevelProps가 우선, dataflowConfig 등 보존)
+    const mergedWebTypeConfig = {
+      ...(configOverrides.webTypeConfig || {}),
+      ...(topLevelProps.webTypeConfig || {}),
+    };
+
+    const overrides = {
+      ...topLevelProps,
+      ...configOverrides,
+      // 🆕 병합된 style 사용 (comp.style 값이 최종 우선)
+      ...(Object.keys(mergedStyle).length > 0 ? { style: mergedStyle } : {}),
+      // 🆕 병합된 webTypeConfig 사용 (comp.webTypeConfig가 최종 우선)
+      ...(Object.keys(mergedWebTypeConfig).length > 0 ? { webTypeConfig: mergedWebTypeConfig } : {}),
+    };
 
     return {
       id: comp.id,
@@ -136,6 +306,10 @@ export function convertLegacyToV2(legacyLayout: LegacyLayoutData): LayoutV2 {
   return {
     version: "2.0",
     components,
+    // 레이아웃 메타데이터 포함
+    gridSettings: legacyLayout.gridSettings,
+    screenResolution: legacyLayout.screenResolution,
+    metadata: legacyLayout.metadata,
   };
 }
 
diff --git a/frontend/lib/utils/webTypeMapping.ts b/frontend/lib/utils/webTypeMapping.ts
index ed4acba2..5a521e26 100644
--- a/frontend/lib/utils/webTypeMapping.ts
+++ b/frontend/lib/utils/webTypeMapping.ts
@@ -107,18 +107,18 @@ export const WEB_TYPE_V2_MAPPING: Record<string, V2ComponentMapping> = {
     config: { mode: "dropdown", source: "category" },
   },
 
-  // 파일/이미지 → V2Media
+  // 파일/이미지 → V2 파일 업로드
   file: {
-    componentType: "v2-media",
-    config: { type: "file", multiple: false },
+    componentType: "v2-file-upload",
+    config: { multiple: true, accept: "*/*", maxFiles: 10 },
   },
   image: {
-    componentType: "v2-media",
-    config: { type: "image", showPreview: true },
+    componentType: "v2-file-upload",
+    config: { multiple: false, accept: "image/*", maxFiles: 1, showPreview: true },
   },
   img: {
-    componentType: "v2-media",
-    config: { type: "image", showPreview: true },
+    componentType: "v2-file-upload",
+    config: { multiple: false, accept: "image/*", maxFiles: 1, showPreview: true },
   },
 
   // 버튼은 V2 컴포넌트에서 제외 (기존 버튼 시스템 사용)
@@ -157,9 +157,9 @@ export const WEB_TYPE_COMPONENT_MAPPING: Record<string, string> = {
   code: "v2-select",
   entity: "v2-select",
   category: "v2-select",
-  file: "v2-media",
-  image: "v2-media",
-  img: "v2-media",
+  file: "v2-file-upload",
+  image: "v2-file-upload",
+  img: "v2-file-upload",
   button: "button-primary",
   label: "v2-input",
 };
diff --git a/frontend/lib/v2-core/events/types.ts b/frontend/lib/v2-core/events/types.ts
index 8d0075c5..a33e7684 100644
--- a/frontend/lib/v2-core/events/types.ts
+++ b/frontend/lib/v2-core/events/types.ts
@@ -53,6 +53,13 @@ export const V2_EVENTS = {
   RELATED_BUTTON_REGISTER: "v2:related-button:register",
   RELATED_BUTTON_UNREGISTER: "v2:related-button:unregister",
   RELATED_BUTTON_SELECT: "v2:related-button:select",
+
+  // 스케줄 자동 생성
+  SCHEDULE_GENERATE_REQUEST: "v2:schedule:generate:request",
+  SCHEDULE_GENERATE_PREVIEW: "v2:schedule:generate:preview",
+  SCHEDULE_GENERATE_APPLY: "v2:schedule:generate:apply",
+  SCHEDULE_GENERATE_COMPLETE: "v2:schedule:generate:complete",
+  SCHEDULE_GENERATE_ERROR: "v2:schedule:generate:error",
 } as const;
 
 export type V2EventName = (typeof V2_EVENTS)[keyof typeof V2_EVENTS];
@@ -230,6 +237,64 @@ export interface V2RelatedButtonSelectEvent {
   selectedData: any[];
 }
 
+// ============================================================================
+// 스케줄 자동 생성 이벤트
+// ============================================================================
+
+/** 스케줄 타입 */
+export type ScheduleType = "PRODUCTION" | "MAINTENANCE" | "SHIPPING" | "WORK_ASSIGN";
+
+/** 스케줄 생성 요청 이벤트 */
+export interface V2ScheduleGenerateRequestEvent {
+  requestId: string;
+  scheduleType: ScheduleType;
+  sourceData?: any[];        // 선택 데이터 (없으면 TABLE_SELECTION_CHANGE로 받은 데이터 사용)
+  period?: { start: string; end: string };
+}
+
+/** 스케줄 미리보기 결과 이벤트 */
+export interface V2ScheduleGeneratePreviewEvent {
+  requestId: string;
+  scheduleType: ScheduleType;
+  preview: {
+    toCreate: any[];
+    toDelete: any[];
+    toUpdate: any[];
+    summary: {
+      createCount: number;
+      deleteCount: number;
+      updateCount: number;
+      totalQty: number;
+    };
+  };
+}
+
+/** 스케줄 적용 이벤트 */
+export interface V2ScheduleGenerateApplyEvent {
+  requestId: string;
+  confirmed: boolean;
+}
+
+/** 스케줄 생성 완료 이벤트 */
+export interface V2ScheduleGenerateCompleteEvent {
+  requestId: string;
+  success: boolean;
+  applied: {
+    created: number;
+    deleted: number;
+    updated: number;
+  };
+  scheduleType: ScheduleType;
+  targetTableName: string;
+}
+
+/** 스케줄 생성 에러 이벤트 */
+export interface V2ScheduleGenerateErrorEvent {
+  requestId: string;
+  error: string;
+  scheduleType?: ScheduleType;
+}
+
 // ============================================================================
 // 이벤트 타입 맵핑 (타입 안전성을 위한)
 // ============================================================================
@@ -268,6 +333,12 @@ export interface V2EventPayloadMap {
   [V2_EVENTS.RELATED_BUTTON_REGISTER]: V2RelatedButtonRegisterEvent;
   [V2_EVENTS.RELATED_BUTTON_UNREGISTER]: V2RelatedButtonUnregisterEvent;
   [V2_EVENTS.RELATED_BUTTON_SELECT]: V2RelatedButtonSelectEvent;
+
+  [V2_EVENTS.SCHEDULE_GENERATE_REQUEST]: V2ScheduleGenerateRequestEvent;
+  [V2_EVENTS.SCHEDULE_GENERATE_PREVIEW]: V2ScheduleGeneratePreviewEvent;
+  [V2_EVENTS.SCHEDULE_GENERATE_APPLY]: V2ScheduleGenerateApplyEvent;
+  [V2_EVENTS.SCHEDULE_GENERATE_COMPLETE]: V2ScheduleGenerateCompleteEvent;
+  [V2_EVENTS.SCHEDULE_GENERATE_ERROR]: V2ScheduleGenerateErrorEvent;
 }
 
 // ============================================================================
diff --git a/frontend/lib/v2-core/index.ts b/frontend/lib/v2-core/index.ts
index 2721b509..9016defb 100644
--- a/frontend/lib/v2-core/index.ts
+++ b/frontend/lib/v2-core/index.ts
@@ -32,6 +32,9 @@ export * from "./components";
 // 어댑터
 export * from "./adapters";
 
+// 서비스
+export * from "./services";
+
 // 초기화
 export { initV2Core, cleanupV2Core } from "./init";
 
diff --git a/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx b/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
new file mode 100644
index 00000000..75da02a5
--- /dev/null
+++ b/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
@@ -0,0 +1,208 @@
+/**
+ * 스케줄 생성 확인 다이얼로그
+ *
+ * 스케줄 자동 생성 시 미리보기 결과를 표시하고 확인을 받는 다이얼로그입니다.
+ */
+
+"use client";
+
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Calendar, Plus, Trash2, RefreshCw } from "lucide-react";
+import type { SchedulePreviewResult } from "./ScheduleGeneratorService";
+
+interface ScheduleConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  preview: SchedulePreviewResult | null;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isLoading?: boolean;
+}
+
+export function ScheduleConfirmDialog({
+  open,
+  onOpenChange,
+  preview,
+  onConfirm,
+  onCancel,
+  isLoading = false,
+}: ScheduleConfirmDialogProps) {
+  if (!preview) return null;
+
+  const { summary, toCreate, toDelete, toUpdate } = preview;
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-base sm:text-lg">
+            <Calendar className="h-5 w-5" />
+            스케줄 생성 확인
+          </AlertDialogTitle>
+          <AlertDialogDescription className="text-xs sm:text-sm">
+            다음과 같이 스케줄이 변경됩니다. 계속하시겠습니까?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {/* 요약 정보 */}
+        <div className="grid grid-cols-3 gap-3 py-4">
+          <div className="flex flex-col items-center rounded-lg border bg-green-50 p-3 dark:bg-green-900/20">
+            <Plus className="mb-1 h-5 w-5 text-green-600" />
+            <span className="text-2xl font-bold text-green-600">
+              {summary.createCount}
+            </span>
+            <span className="text-xs text-muted-foreground">생성</span>
+          </div>
+          <div className="flex flex-col items-center rounded-lg border bg-red-50 p-3 dark:bg-red-900/20">
+            <Trash2 className="mb-1 h-5 w-5 text-red-600" />
+            <span className="text-2xl font-bold text-red-600">
+              {summary.deleteCount}
+            </span>
+            <span className="text-xs text-muted-foreground">삭제</span>
+          </div>
+          <div className="flex flex-col items-center rounded-lg border bg-blue-50 p-3 dark:bg-blue-900/20">
+            <RefreshCw className="mb-1 h-5 w-5 text-blue-600" />
+            <span className="text-2xl font-bold text-blue-600">
+              {summary.updateCount}
+            </span>
+            <span className="text-xs text-muted-foreground">수정</span>
+          </div>
+        </div>
+
+        {/* 상세 정보 */}
+        <ScrollArea className="max-h-[300px]">
+          <div className="space-y-4">
+            {/* 생성될 스케줄 */}
+            {toCreate.length > 0 && (
+              <div>
+                <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
+                  <Badge variant="default" className="bg-green-600">
+                    생성
+                  </Badge>
+                  {toCreate.length}건
+                </h4>
+                <div className="space-y-1 rounded-md border p-2">
+                  {toCreate.slice(0, 5).map((item, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between text-xs"
+                    >
+                      <span className="font-medium">
+                        {item.resource_name || item.resource_id}
+                      </span>
+                      <span className="text-muted-foreground">
+                        {item.start_date} ~ {item.end_date} / {item.plan_qty}개
+                      </span>
+                    </div>
+                  ))}
+                  {toCreate.length > 5 && (
+                    <div className="text-center text-xs text-muted-foreground">
+                      ... 외 {toCreate.length - 5}건
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* 삭제될 스케줄 */}
+            {toDelete.length > 0 && (
+              <div>
+                <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
+                  <Badge variant="destructive">삭제</Badge>
+                  {toDelete.length}건
+                </h4>
+                <div className="space-y-1 rounded-md border border-red-200 bg-red-50/50 p-2 dark:border-red-800 dark:bg-red-900/10">
+                  {toDelete.slice(0, 5).map((item, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between text-xs"
+                    >
+                      <span className="font-medium">
+                        {item.resource_name || item.resource_id}
+                      </span>
+                      <span className="text-muted-foreground">
+                        {item.start_date} ~ {item.end_date}
+                      </span>
+                    </div>
+                  ))}
+                  {toDelete.length > 5 && (
+                    <div className="text-center text-xs text-muted-foreground">
+                      ... 외 {toDelete.length - 5}건
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* 수정될 스케줄 */}
+            {toUpdate.length > 0 && (
+              <div>
+                <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
+                  <Badge variant="secondary">수정</Badge>
+                  {toUpdate.length}건
+                </h4>
+                <div className="space-y-1 rounded-md border border-blue-200 bg-blue-50/50 p-2 dark:border-blue-800 dark:bg-blue-900/10">
+                  {toUpdate.slice(0, 5).map((item, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between text-xs"
+                    >
+                      <span className="font-medium">
+                        {item.resource_name || item.resource_id}
+                      </span>
+                      <span className="text-muted-foreground">
+                        {item.start_date} ~ {item.end_date}
+                      </span>
+                    </div>
+                  ))}
+                  {toUpdate.length > 5 && (
+                    <div className="text-center text-xs text-muted-foreground">
+                      ... 외 {toUpdate.length - 5}건
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+
+        {/* 총 수량 */}
+        <div className="flex items-center justify-between rounded-md bg-muted p-3">
+          <span className="text-sm font-medium">총 계획 수량</span>
+          <span className="text-lg font-bold">
+            {summary.totalQty.toLocaleString()}개
+          </span>
+        </div>
+
+        <AlertDialogFooter className="gap-2 sm:gap-0">
+          <AlertDialogCancel
+            onClick={onCancel}
+            disabled={isLoading}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            {isLoading ? "처리 중..." : "확인 및 적용"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/frontend/lib/v2-core/services/ScheduleGeneratorService.ts b/frontend/lib/v2-core/services/ScheduleGeneratorService.ts
new file mode 100644
index 00000000..5d693005
--- /dev/null
+++ b/frontend/lib/v2-core/services/ScheduleGeneratorService.ts
@@ -0,0 +1,334 @@
+/**
+ * 스케줄 자동 생성 서비스
+ *
+ * 이벤트 버스 기반으로 스케줄 자동 생성을 처리합니다.
+ * - TABLE_SELECTION_CHANGE 이벤트로 선택 데이터 추적
+ * - SCHEDULE_GENERATE_REQUEST 이벤트로 생성 요청 처리
+ * - SCHEDULE_GENERATE_APPLY 이벤트로 적용 처리
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { v2EventBus } from "../events/EventBus";
+import { V2_EVENTS } from "../events/types";
+import type { ScheduleType, V2ScheduleGenerateRequestEvent, V2ScheduleGenerateApplyEvent } from "../events/types";
+import { apiClient } from "@/lib/api/client";
+import { toast } from "sonner";
+
+// ============================================================================
+// 타입 정의
+// ============================================================================
+
+/** 스케줄 생성 설정 */
+export interface ScheduleGenerationConfig {
+  // 스케줄 타입
+  scheduleType: ScheduleType;
+
+  // 소스 설정
+  source: {
+    tableName: string; // 소스 테이블명
+    groupByField: string; // 그룹화 기준 필드 (part_code)
+    quantityField: string; // 수량 필드 (order_qty, balance_qty)
+    dueDateField?: string; // 납기일 필드 (선택)
+  };
+
+  // 리소스 매핑 (타임라인 Y축)
+  resource: {
+    type: string; // 'ITEM', 'MACHINE', 'WORKER' 등
+    idField: string; // part_code, machine_code 등
+    nameField: string; // part_name, machine_name 등
+  };
+
+  // 생성 규칙
+  rules: {
+    leadTimeDays?: number; // 리드타임 (일)
+    dailyCapacity?: number; // 일일 생산능력
+    workingDays?: number[]; // 작업일 [1,2,3,4,5] = 월~금
+    considerStock?: boolean; // 재고 고려 여부
+    stockTableName?: string; // 재고 테이블명
+    stockQtyField?: string; // 재고 수량 필드
+    safetyStockField?: string; // 안전재고 필드
+  };
+
+  // 타겟 설정
+  target: {
+    tableName: string; // 스케줄 테이블명 (schedule_mng 또는 전용 테이블)
+  };
+}
+
+/** 미리보기 결과 */
+export interface SchedulePreviewResult {
+  toCreate: any[];
+  toDelete: any[];
+  toUpdate: any[];
+  summary: {
+    createCount: number;
+    deleteCount: number;
+    updateCount: number;
+    totalQty: number;
+  };
+}
+
+/** 훅 반환 타입 */
+export interface UseScheduleGeneratorReturn {
+  // 상태
+  isLoading: boolean;
+  showConfirmDialog: boolean;
+  previewResult: SchedulePreviewResult | null;
+
+  // 핸들러
+  handleConfirm: (confirmed: boolean) => void;
+  closeDialog: () => void;
+}
+
+// ============================================================================
+// 유틸리티 함수
+// ============================================================================
+
+/** 기본 기간 계산 (현재 월) */
+function getDefaultPeriod(): { start: string; end: string } {
+  const now = new Date();
+  const start = new Date(now.getFullYear(), now.getMonth(), 1);
+  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+  return {
+    start: start.toISOString().split("T")[0],
+    end: end.toISOString().split("T")[0],
+  };
+}
+
+// ============================================================================
+// 스케줄 생성 서비스 훅
+// ============================================================================
+
+/**
+ * 스케줄 자동 생성 훅
+ *
+ * @param scheduleConfig 스케줄 생성 설정
+ * @returns 상태 및 핸들러
+ *
+ * @example
+ * ```tsx
+ * const config: ScheduleGenerationConfig = {
+ *   scheduleType: "PRODUCTION",
+ *   source: { tableName: "sales_order_mng", groupByField: "part_code", quantityField: "balance_qty" },
+ *   resource: { type: "ITEM", idField: "part_code", nameField: "part_name" },
+ *   rules: { leadTimeDays: 3, dailyCapacity: 100 },
+ *   target: { tableName: "schedule_mng" },
+ * };
+ *
+ * const { showConfirmDialog, previewResult, handleConfirm } = useScheduleGenerator(config);
+ * ```
+ */
+export function useScheduleGenerator(scheduleConfig?: ScheduleGenerationConfig | null): UseScheduleGeneratorReturn {
+  // 상태
+  const [selectedData, setSelectedData] = useState<any[]>([]);
+  const [previewResult, setPreviewResult] = useState<SchedulePreviewResult | null>(null);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const currentRequestIdRef = useRef<string>("");
+  const currentConfigRef = useRef<ScheduleGenerationConfig | null>(null);
+
+  // 1. 테이블 선택 데이터 추적 (TABLE_SELECTION_CHANGE 이벤트 수신)
+  useEffect(() => {
+    const unsubscribe = v2EventBus.subscribe(V2_EVENTS.TABLE_SELECTION_CHANGE, (payload) => {
+      // scheduleConfig가 있으면 해당 테이블만, 없으면 모든 테이블의 선택 데이터 저장
+      if (scheduleConfig?.source?.tableName) {
+        if (payload.tableName === scheduleConfig.source.tableName) {
+          setSelectedData(payload.selectedRows);
+          console.log("[useScheduleGenerator] 선택 데이터 업데이트 (특정 테이블):", payload.selectedCount, "건");
+        }
+      } else {
+        // scheduleConfig가 없으면 모든 테이블의 선택 데이터를 저장
+        setSelectedData(payload.selectedRows);
+        console.log("[useScheduleGenerator] 선택 데이터 업데이트 (모든 테이블):", payload.selectedCount, "건");
+      }
+    });
+    return unsubscribe;
+  }, [scheduleConfig?.source?.tableName]);
+
+  // 2. 스케줄 생성 요청 처리 (SCHEDULE_GENERATE_REQUEST 수신)
+  useEffect(() => {
+    const unsubscribe = v2EventBus.subscribe(
+      V2_EVENTS.SCHEDULE_GENERATE_REQUEST,
+      async (payload: V2ScheduleGenerateRequestEvent) => {
+        console.log("[useScheduleGenerator] SCHEDULE_GENERATE_REQUEST 수신:", payload);
+
+        // 이벤트에서 config가 오면 사용, 없으면 기존 scheduleConfig 또는 기본 config 사용
+        const configToUse = (payload as any).config ||
+          scheduleConfig || {
+            // 기본 설정 (생산계획 화면용)
+            scheduleType: payload.scheduleType || "PRODUCTION",
+            source: {
+              tableName: "sales_order_mng",
+              groupByField: "part_code",
+              quantityField: "balance_qty",
+              dueDateField: "delivery_date", // 기준일 필드 (납기일)
+            },
+            resource: {
+              type: "ITEM",
+              idField: "part_code",
+              nameField: "part_name",
+            },
+            rules: {
+              leadTimeDays: 3,
+              dailyCapacity: 100,
+            },
+            target: {
+              tableName: "schedule_mng",
+            },
+          };
+
+        console.log("[useScheduleGenerator] 사용할 config:", configToUse);
+
+        // scheduleType이 지정되어 있고 config도 있는 경우, 타입 일치 확인
+        if (scheduleConfig && payload.scheduleType && payload.scheduleType !== scheduleConfig.scheduleType) {
+          console.log("[useScheduleGenerator] scheduleType 불일치, 무시");
+          return;
+        }
+
+        // sourceData: 이벤트 페이로드 > 상태 저장된 선택 데이터 > 빈 배열
+        const dataToUse = payload.sourceData || selectedData;
+        const periodToUse = payload.period || getDefaultPeriod();
+
+        console.log("[useScheduleGenerator] 사용할 sourceData:", dataToUse.length, "건");
+        console.log("[useScheduleGenerator] 사용할 period:", periodToUse);
+
+        currentRequestIdRef.current = payload.requestId;
+        currentConfigRef.current = configToUse;
+        setIsLoading(true);
+        toast.loading("스케줄 생성 중...", { id: "schedule-generate" });
+
+        try {
+          // 미리보기 API 호출
+          const response = await apiClient.post("/schedule/preview", {
+            config: configToUse,
+            scheduleType: payload.scheduleType,
+            sourceData: dataToUse,
+            period: periodToUse,
+          });
+
+          console.log("[useScheduleGenerator] 미리보기 응답:", response.data);
+
+          if (!response.data.success) {
+            toast.error(response.data.message || "미리보기 생성 실패", { id: "schedule-generate" });
+            v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_ERROR, {
+              requestId: payload.requestId,
+              error: response.data.message || "미리보기 생성 실패",
+              scheduleType: payload.scheduleType,
+            });
+            return;
+          }
+
+          setPreviewResult(response.data.preview);
+          setShowConfirmDialog(true);
+          toast.success("스케줄 미리보기가 생성되었습니다.", { id: "schedule-generate" });
+
+          // 미리보기 결과 이벤트 발송 (다른 컴포넌트가 필요할 수 있음)
+          v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_PREVIEW, {
+            requestId: payload.requestId,
+            scheduleType: payload.scheduleType,
+            preview: response.data.preview,
+          });
+        } catch (error: any) {
+          console.error("[ScheduleGeneratorService] 미리보기 오류:", error);
+          toast.error("스케줄 생성 중 오류가 발생했습니다.", { id: "schedule-generate" });
+          v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_ERROR, {
+            requestId: payload.requestId,
+            error: error.message,
+            scheduleType: payload.scheduleType,
+          });
+        } finally {
+          setIsLoading(false);
+        }
+      },
+    );
+    return unsubscribe;
+  }, [selectedData, scheduleConfig]);
+
+  // 3. 스케줄 적용 처리 (SCHEDULE_GENERATE_APPLY 수신)
+  useEffect(() => {
+    const unsubscribe = v2EventBus.subscribe(
+      V2_EVENTS.SCHEDULE_GENERATE_APPLY,
+      async (payload: V2ScheduleGenerateApplyEvent) => {
+        if (payload.requestId !== currentRequestIdRef.current) return;
+
+        if (!payload.confirmed) {
+          setShowConfirmDialog(false);
+          return;
+        }
+
+        // 저장된 config 또는 기존 scheduleConfig 사용
+        const configToUse = currentConfigRef.current || scheduleConfig;
+
+        setIsLoading(true);
+        toast.loading("스케줄 적용 중...", { id: "schedule-apply" });
+
+        try {
+          const response = await apiClient.post("/schedule/apply", {
+            config: configToUse,
+            preview: previewResult,
+            options: { deleteExisting: true, updateMode: "replace" },
+          });
+
+          if (!response.data.success) {
+            toast.error(response.data.message || "스케줄 적용 실패", { id: "schedule-apply" });
+            return;
+          }
+
+          // 완료 이벤트 발송
+          v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_COMPLETE, {
+            requestId: payload.requestId,
+            success: true,
+            applied: response.data.applied,
+            scheduleType: configToUse?.scheduleType || "PRODUCTION",
+            targetTableName: configToUse?.target?.tableName || "schedule_mng",
+          });
+
+          // 테이블 새로고침 이벤트 발송
+          v2EventBus.emit(V2_EVENTS.TABLE_REFRESH, {
+            tableName: configToUse?.target?.tableName || "schedule_mng",
+          });
+
+          toast.success(`${response.data.applied?.created || 0}건의 스케줄이 생성되었습니다.`, {
+            id: "schedule-apply",
+          });
+          setShowConfirmDialog(false);
+          setPreviewResult(null);
+        } catch (error: any) {
+          console.error("[ScheduleGeneratorService] 적용 오류:", error);
+          toast.error("스케줄 적용 중 오류가 발생했습니다.", { id: "schedule-apply" });
+        } finally {
+          setIsLoading(false);
+        }
+      },
+    );
+    return unsubscribe;
+  }, [previewResult, scheduleConfig]);
+
+  // 확인 다이얼로그 핸들러
+  const handleConfirm = useCallback((confirmed: boolean) => {
+    v2EventBus.emit(V2_EVENTS.SCHEDULE_GENERATE_APPLY, {
+      requestId: currentRequestIdRef.current,
+      confirmed,
+    });
+  }, []);
+
+  // 다이얼로그 닫기
+  const closeDialog = useCallback(() => {
+    setShowConfirmDialog(false);
+    setPreviewResult(null);
+  }, []);
+
+  return {
+    isLoading,
+    showConfirmDialog,
+    previewResult,
+    handleConfirm,
+    closeDialog,
+  };
+}
+
+// ============================================================================
+// 스케줄 확인 다이얼로그 컴포넌트
+// ============================================================================
+
+export { ScheduleConfirmDialog } from "./ScheduleConfirmDialog";
diff --git a/frontend/lib/v2-core/services/index.ts b/frontend/lib/v2-core/services/index.ts
new file mode 100644
index 00000000..02be2a2f
--- /dev/null
+++ b/frontend/lib/v2-core/services/index.ts
@@ -0,0 +1,14 @@
+/**
+ * V2 서비스 모듈
+ *
+ * 이벤트 버스 기반 서비스들을 export합니다.
+ */
+
+export {
+  useScheduleGenerator,
+  type ScheduleGenerationConfig,
+  type SchedulePreviewResult,
+  type UseScheduleGeneratorReturn,
+} from "./ScheduleGeneratorService";
+
+export { ScheduleConfirmDialog } from "./ScheduleConfirmDialog";
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index ca804adc..262c4deb 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -15,15 +15,19 @@ const nextConfig = {
 
   // 실험적 기능 활성화
   experimental: {
-    outputFileTracingRoot: undefined,
+    // 메모리 사용량 최적화 (Next.js 15+)
+    webpackMemoryOptimizations: true,
   },
 
   // API 프록시 설정 - 백엔드로 요청 전달
+  // Docker 환경: SERVER_API_URL=http://backend:3001 사용
+  // 로컬 개발: http://localhost:8080 사용
   async rewrites() {
+    const backendUrl = process.env.SERVER_API_URL || "http://localhost:8080";
     return [
       {
         source: "/api/:path*",
-        destination: "http://localhost:8080/api/:path*",
+        destination: `${backendUrl}/api/:path*`,
       },
     ];
   },
diff --git a/frontend/types/component-events.ts b/frontend/types/component-events.ts
new file mode 100644
index 00000000..3cfc959b
--- /dev/null
+++ b/frontend/types/component-events.ts
@@ -0,0 +1,241 @@
+/**
+ * V2 컴포넌트 간 통신 이벤트 타입 정의
+ * 
+ * 모든 V2 컴포넌트는 이 파일에 정의된 이벤트 타입을 사용해야 합니다.
+ * 이벤트 발행/구독 시 타입 안전성을 보장합니다.
+ */
+
+// ============================================================
+// 이벤트 상세 데이터 타입 (event.detail)
+// ============================================================
+
+/**
+ * 테이블 리스트 데이터 변경 이벤트
+ * 발행: v2-table-list
+ * 구독: v2-aggregation-widget, v2-repeat-container
+ */
+export interface TableListDataChangeDetail {
+  componentId: string;
+  tableName: string;
+  data: any[];
+  selectedRows: string[] | number[];
+}
+
+/**
+ * 리피터 데이터 변경 이벤트
+ * 발행: v2-unified-repeater
+ * 구독: v2-aggregation-widget, v2-repeat-container
+ */
+export interface RepeaterDataChangeDetail {
+  componentId: string;
+  tableName: string;
+  data: any[];
+  selectedData?: any[];
+}
+
+/**
+ * 폼 저장 전 이벤트
+ * 발행: buttonActions, UnifiedFormContext
+ * 구독: v2-unified-repeater, simple-repeater-table, modal-repeater-table 등
+ */
+export interface BeforeFormSaveDetail {
+  formData: Record<string, any>;
+  skipDefaultSave?: boolean;
+}
+
+/**
+ * 폼 저장 후 이벤트
+ * 발행: UnifiedFormContext
+ * 구독: 저장 결과 처리 컴포넌트들
+ */
+export interface AfterFormSaveDetail {
+  success: boolean;
+  data?: any;
+  error?: string;
+}
+
+/**
+ * 리피터 저장 이벤트 (마스터-디테일 FK 연결용)
+ * 발행: InteractiveScreenViewerDynamic
+ * 구독: v2-unified-repeater
+ */
+export interface RepeaterSaveDetail {
+  parentId?: string | number;
+  masterRecordId: string | number;
+  mainFormData: Record<string, any>;
+  tableName: string;
+}
+
+/**
+ * 테이블 새로고침 이벤트
+ * 발행: v2-button-primary, buttonActions
+ * 구독: v2-table-list, v2-split-panel-layout
+ */
+export interface RefreshTableDetail {
+  tableName?: string;
+  componentId?: string;
+}
+
+/**
+ * 카드 디스플레이 새로고침 이벤트
+ * 발행: buttonActions, InteractiveScreenViewerDynamic
+ * 구독: v2-card-display
+ */
+export interface RefreshCardDisplayDetail {
+  componentId?: string;
+}
+
+/**
+ * 컴포넌트 간 데이터 전달 이벤트
+ * 발행: buttonActions
+ * 구독: v2-unified-repeater
+ */
+export interface ComponentDataTransferDetail {
+  sourceComponentId: string;
+  targetComponentId: string;
+  data: any[];
+  mode: "append" | "replace" | "merge";
+  mappingRules?: Array<{
+    sourceField: string;
+    targetField: string;
+    defaultValue?: any;
+  }>;
+}
+
+/**
+ * 분할 패널 간 데이터 전달 이벤트
+ * 발행: buttonActions
+ * 구독: v2-unified-repeater, repeater-field-group
+ */
+export interface SplitPanelDataTransferDetail {
+  sourcePosition: "left" | "right";
+  targetPosition: "left" | "right";
+  data: any[];
+  mode: "append" | "replace" | "merge";
+  mappingRules?: Array<{
+    sourceField: string;
+    targetField: string;
+    defaultValue?: any;
+  }>;
+}
+
+/**
+ * 연관 데이터 버튼 선택 이벤트
+ * 발행: related-data-buttons
+ * 구독: v2-table-list
+ */
+export interface RelatedButtonSelectDetail {
+  targetTable: string;
+  filterColumn: string;
+  filterValue: any;
+  selectedData?: any;
+}
+
+/**
+ * 모달 제어 이벤트
+ */
+export interface EditModalDetail {
+  screenId?: number;
+  recordId?: string | number;
+  data?: any;
+}
+
+// ============================================================
+// 이벤트 이름 상수
+// ============================================================
+
+export const V2_EVENTS = {
+  // 데이터 변경 이벤트
+  TABLE_LIST_DATA_CHANGE: "tableListDataChange",
+  REPEATER_DATA_CHANGE: "repeaterDataChange",
+  
+  // 폼 저장 이벤트
+  BEFORE_FORM_SAVE: "beforeFormSave",
+  AFTER_FORM_SAVE: "afterFormSave",
+  REPEATER_SAVE: "repeaterSave",
+  
+  // UI 갱신 이벤트
+  REFRESH_TABLE: "refreshTable",
+  REFRESH_CARD_DISPLAY: "refreshCardDisplay",
+  
+  // 데이터 전달 이벤트
+  COMPONENT_DATA_TRANSFER: "componentDataTransfer",
+  SPLIT_PANEL_DATA_TRANSFER: "splitPanelDataTransfer",
+  
+  // 모달 제어 이벤트
+  OPEN_EDIT_MODAL: "openEditModal",
+  CLOSE_EDIT_MODAL: "closeEditModal",
+  SAVE_SUCCESS_IN_MODAL: "saveSuccessInModal",
+  
+  // 연관 데이터 버튼 이벤트
+  RELATED_BUTTON_SELECT: "related-button-select",
+  RELATED_BUTTON_REGISTER: "related-button-register",
+  RELATED_BUTTON_UNREGISTER: "related-button-unregister",
+} as const;
+
+// ============================================================
+// Window EventMap 확장 (타입 안전한 이벤트 리스너)
+// ============================================================
+
+declare global {
+  interface WindowEventMap {
+    // 데이터 변경 이벤트
+    [V2_EVENTS.TABLE_LIST_DATA_CHANGE]: CustomEvent<TableListDataChangeDetail>;
+    [V2_EVENTS.REPEATER_DATA_CHANGE]: CustomEvent<RepeaterDataChangeDetail>;
+    
+    // 폼 저장 이벤트
+    [V2_EVENTS.BEFORE_FORM_SAVE]: CustomEvent<BeforeFormSaveDetail>;
+    [V2_EVENTS.AFTER_FORM_SAVE]: CustomEvent<AfterFormSaveDetail>;
+    [V2_EVENTS.REPEATER_SAVE]: CustomEvent<RepeaterSaveDetail>;
+    
+    // UI 갱신 이벤트
+    [V2_EVENTS.REFRESH_TABLE]: CustomEvent<RefreshTableDetail>;
+    [V2_EVENTS.REFRESH_CARD_DISPLAY]: CustomEvent<RefreshCardDisplayDetail>;
+    
+    // 데이터 전달 이벤트
+    [V2_EVENTS.COMPONENT_DATA_TRANSFER]: CustomEvent<ComponentDataTransferDetail>;
+    [V2_EVENTS.SPLIT_PANEL_DATA_TRANSFER]: CustomEvent<SplitPanelDataTransferDetail>;
+    
+    // 연관 데이터 버튼 이벤트
+    [V2_EVENTS.RELATED_BUTTON_SELECT]: CustomEvent<RelatedButtonSelectDetail>;
+  }
+}
+
+// ============================================================
+// 유틸리티 함수
+// ============================================================
+
+/**
+ * 타입 안전한 이벤트 발행 함수
+ */
+export function dispatchV2Event<K extends keyof WindowEventMap>(
+  eventName: K,
+  detail: WindowEventMap[K] extends CustomEvent<infer D> ? D : never
+): void {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent(eventName, { detail }));
+  }
+}
+
+/**
+ * 타입 안전한 이벤트 구독 함수
+ */
+export function subscribeV2Event<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void
+): () => void {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+  
+  window.addEventListener(eventName, handler as EventListener);
+  return () => {
+    window.removeEventListener(eventName, handler as EventListener);
+  };
+}
+
+// ============================================================
+// 내보내기
+// ============================================================
+
+export type V2EventName = typeof V2_EVENTS[keyof typeof V2_EVENTS];
diff --git a/frontend/types/numbering-rule.ts b/frontend/types/numbering-rule.ts
index b788814c..7f21fa44 100644
--- a/frontend/types/numbering-rule.ts
+++ b/frontend/types/numbering-rule.ts
@@ -109,7 +109,7 @@ export interface NumberingRuleConfig {
 
   // 카테고리 조건 (특정 카테고리 값일 때만 이 규칙 적용)
   categoryColumn?: string;        // 카테고리 조건 컬럼명 (예: 'type', 'material')
-  categoryValueId?: number;       // 카테고리 값 ID (category_values_test.value_id)
+  categoryValueId?: number;       // 카테고리 값 ID (category_values.value_id)
   categoryValueLabel?: string;    // 카테고리 값 라벨 (조회 시 조인)
 
   // 메타 정보
diff --git a/frontend/types/screen-management.ts b/frontend/types/screen-management.ts
index 67e8a934..4fa22259 100644
--- a/frontend/types/screen-management.ts
+++ b/frontend/types/screen-management.ts
@@ -38,6 +38,9 @@ export interface BaseComponent {
   gridColumnStart?: number; // 시작 컬럼 (1-12)
   gridRowIndex?: number; // 행 인덱스
 
+  // 🆕 레이어 시스템
+  layerId?: string; // 컴포넌트가 속한 레이어 ID
+
   parentId?: string;
   label?: string;
   required?: boolean;
@@ -102,13 +105,13 @@ export interface WidgetComponent extends BaseComponent {
   entityConfig?: EntityTypeConfig;
   buttonConfig?: ButtonTypeConfig;
   arrayConfig?: ArrayTypeConfig;
-  
+
   // 🆕 자동 입력 설정 (테이블 조회 기반)
   autoFill?: {
     enabled: boolean; // 자동 입력 활성화
     sourceTable: string; // 조회할 테이블 (예: company_mng)
     filterColumn: string; // 필터링할 컬럼 (예: company_code)
-    userField: 'companyCode' | 'userId' | 'deptCode'; // 사용자 정보 필드
+    userField: "companyCode" | "userId" | "deptCode"; // 사용자 정보 필드
     displayColumn: string; // 표시할 컬럼 (예: company_name)
   };
 }
@@ -148,12 +151,12 @@ export interface DataTableComponent extends BaseComponent {
   searchable?: boolean;
   sortable?: boolean;
   filters?: DataTableFilter[];
-  
+
   // 🆕 현재 사용자 정보로 자동 필터링
   autoFilter?: {
     enabled: boolean; // 자동 필터 활성화 여부
     filterColumn: string; // 필터링할 테이블 컬럼 (예: company_code, dept_code)
-    userField: 'companyCode' | 'userId' | 'deptCode'; // 사용자 정보에서 가져올 필드
+    userField: "companyCode" | "userId" | "deptCode"; // 사용자 정보에서 가져올 필드
   };
 
   // 🆕 컬럼 값 기반 데이터 필터링
@@ -307,13 +310,13 @@ export interface SelectTypeConfig {
   required?: boolean;
   readonly?: boolean;
   emptyMessage?: string;
-  
+
   /** 🆕 연쇄 드롭다운 관계 코드 (관계 관리에서 정의한 코드) */
   cascadingRelationCode?: string;
-  
+
   /** 🆕 연쇄 드롭다운 부모 필드명 (화면 내 다른 필드의 columnName) */
   cascadingParentField?: string;
-  
+
   /** @deprecated 직접 설정 방식 - cascadingRelationCode 사용 권장 */
   cascading?: CascadingDropdownConfig;
 }
@@ -402,10 +405,10 @@ export interface EntityTypeConfig {
 
 /**
  * 🆕 연쇄 드롭다운(Cascading Dropdown) 설정
- * 
+ *
  * 부모 필드의 값에 따라 자식 드롭다운의 옵션이 동적으로 변경됩니다.
  * 예: 창고 선택 → 해당 창고의 위치만 표시
- * 
+ *
  * @example
  * // 창고 → 위치 연쇄 드롭다운
  * {
@@ -420,34 +423,34 @@ export interface EntityTypeConfig {
 export interface CascadingDropdownConfig {
   /** 연쇄 드롭다운 활성화 여부 */
   enabled: boolean;
-  
+
   /** 부모 필드명 (이 필드의 값에 따라 옵션이 필터링됨) */
   parentField: string;
-  
+
   /** 옵션을 조회할 테이블명 */
   sourceTable: string;
-  
+
   /** 부모 값과 매칭할 컬럼명 (sourceTable의 컬럼) */
   parentKeyColumn: string;
-  
+
   /** 드롭다운 value로 사용할 컬럼명 */
   valueColumn: string;
-  
+
   /** 드롭다운 label로 표시할 컬럼명 */
   labelColumn: string;
-  
+
   /** 추가 필터 조건 (선택사항) */
   additionalFilters?: Record<string, unknown>;
-  
+
   /** 부모 값이 없을 때 표시할 메시지 */
   emptyParentMessage?: string;
-  
+
   /** 옵션이 없을 때 표시할 메시지 */
   noOptionsMessage?: string;
-  
+
   /** 로딩 중 표시할 메시지 */
   loadingMessage?: string;
-  
+
   /** 부모 값 변경 시 자동으로 값 초기화 */
   clearOnParentChange?: boolean;
 }
@@ -472,23 +475,23 @@ export interface ButtonTypeConfig {
 export interface QuickInsertColumnMapping {
   /** 저장할 테이블의 대상 컬럼명 */
   targetColumn: string;
-  
+
   /** 값 소스 타입 */
   sourceType: "component" | "leftPanel" | "fixed" | "currentUser";
-  
+
   // sourceType별 추가 설정
   /** component: 값을 가져올 컴포넌트 ID */
   sourceComponentId?: string;
-  
+
   /** component: 컴포넌트의 columnName (formData 접근용) */
   sourceColumnName?: string;
-  
+
   /** leftPanel: 좌측 선택 데이터의 컬럼명 */
   sourceColumn?: string;
-  
+
   /** fixed: 고정값 */
   fixedValue?: any;
-  
+
   /** currentUser: 사용자 정보 필드 */
   userField?: "userId" | "userName" | "companyCode" | "deptCode";
 }
@@ -499,13 +502,13 @@ export interface QuickInsertColumnMapping {
 export interface QuickInsertAfterAction {
   /** 데이터 새로고침 (테이블리스트, 카드 디스플레이 컴포넌트) */
   refreshData?: boolean;
-  
+
   /** 초기화할 컴포넌트 ID 목록 */
   clearComponents?: string[];
-  
+
   /** 성공 메시지 표시 여부 */
   showSuccessMessage?: boolean;
-  
+
   /** 커스텀 성공 메시지 */
   successMessage?: string;
 }
@@ -516,20 +519,20 @@ export interface QuickInsertAfterAction {
 export interface QuickInsertDuplicateCheck {
   /** 중복 체크 활성화 */
   enabled: boolean;
-  
+
   /** 중복 체크할 컬럼들 */
   columns: string[];
-  
+
   /** 중복 시 에러 메시지 */
   errorMessage?: string;
 }
 
 /**
  * 즉시 저장(quickInsert) 버튼 액션 설정
- * 
+ *
  * 화면에서 entity 타입 선택박스로 데이터를 선택한 후,
  * 버튼 클릭 시 특정 테이블에 즉시 INSERT하는 기능
- * 
+ *
  * @example
  * ```typescript
  * const config: QuickInsertConfig = {
@@ -557,13 +560,13 @@ export interface QuickInsertDuplicateCheck {
 export interface QuickInsertConfig {
   /** 저장할 대상 테이블명 */
   targetTable: string;
-  
+
   /** 컬럼 매핑 설정 */
   columnMappings: QuickInsertColumnMapping[];
-  
+
   /** 저장 후 동작 설정 */
   afterInsert?: QuickInsertAfterAction;
-  
+
   /** 중복 체크 설정 (선택사항) */
   duplicateCheck?: QuickInsertDuplicateCheck;
 }
@@ -678,15 +681,15 @@ export interface DataTableFilter {
 export interface ColumnFilter {
   id: string;
   columnName: string; // 필터링할 컬럼명
-  operator: 
-    | "equals" 
-    | "not_equals" 
-    | "in" 
-    | "not_in" 
-    | "contains" 
-    | "starts_with" 
-    | "ends_with" 
-    | "is_null" 
+  operator:
+    | "equals"
+    | "not_equals"
+    | "in"
+    | "not_in"
+    | "contains"
+    | "starts_with"
+    | "ends_with"
+    | "is_null"
     | "is_not_null"
     | "greater_than"
     | "less_than"
@@ -836,12 +839,71 @@ export interface GroupState {
   groupTitle?: string;
 }
 
+// ============================================
+// 레이어 시스템 타입 정의
+// ============================================
+
+/**
+ * 레이어 타입
+ * - base: 기본 레이어 (항상 표시)
+ * - conditional: 조건부 레이어 (특정 조건 만족 시 표시)
+ * - modal: 모달 레이어 (팝업 형태)
+ * - drawer: 드로어 레이어 (사이드 패널 형태)
+ */
+export type LayerType = "base" | "conditional" | "modal" | "drawer";
+
+/**
+ * 레이어 조건부 표시 설정
+ */
+export interface LayerCondition {
+  targetComponentId: string; // 트리거가 되는 컴포넌트 ID
+  operator: "eq" | "neq" | "in"; // 비교 연산자
+  value: any; // 비교할 값
+}
+
+/**
+ * 레이어 오버레이 설정 (모달/드로어용)
+ */
+export interface LayerOverlayConfig {
+  backdrop: boolean; // 배경 어둡게 처리 여부
+  closeOnBackdropClick: boolean; // 배경 클릭 시 닫기 여부
+  width?: string | number; // 너비
+  height?: string | number; // 높이
+  // 모달/드로어 스타일링
+  backgroundColor?: string; // 컨텐츠 배경색
+  backdropBlur?: number; // 배경 블러 (px)
+  // 드로어 전용
+  position?: "left" | "right" | "top" | "bottom"; // 드로어 위치
+}
+
+/**
+ * 레이어 정의
+ */
+export interface LayerDefinition {
+  id: string;
+  name: string;
+  type: LayerType;
+  zIndex: number;
+  isVisible: boolean; // 초기 표시 여부
+  isLocked: boolean; // 편집 잠금 여부
+
+  // 조건부 표시 로직
+  condition?: LayerCondition;
+
+  // 모달/드로어 전용 설정
+  overlayConfig?: LayerOverlayConfig;
+
+  // 해당 레이어에 속한 컴포넌트들
+  components: ComponentData[];
+}
+
 /**
  * 레이아웃 데이터
  */
 export interface LayoutData {
   screenId: number;
-  components: ComponentData[];
+  components: ComponentData[]; // @deprecated - use layers instead (kept for backward compatibility)
+  layers?: LayerDefinition[]; // 🆕 레이어 목록
   gridSettings?: GridSettings;
   metadata?: LayoutMetadata;
   screenResolution?: ScreenResolution;
diff --git a/frontend/types/v2-components.ts b/frontend/types/v2-components.ts
index d985699d..a7543b24 100644
--- a/frontend/types/v2-components.ts
+++ b/frontend/types/v2-components.ts
@@ -95,6 +95,8 @@ export interface V2BaseProps {
   autoFill?: AutoFillConfig;
   // 유효성 검사
   validation?: ValidationRule[];
+  // 디자인 모드 (클릭 방지)
+  isDesignMode?: boolean;
 }
 
 // ===== V2Input =====
@@ -129,7 +131,7 @@ export interface V2InputProps extends V2BaseProps {
 
 // ===== V2Select =====
 
-export type V2SelectMode = "dropdown" | "radio" | "check" | "tag" | "toggle" | "swap";
+export type V2SelectMode = "dropdown" | "combobox" | "radio" | "check" | "tag" | "tagbox" | "toggle" | "swap";
 export type V2SelectSource = "static" | "code" | "db" | "api" | "entity" | "category";
 
 export interface SelectOption {
@@ -232,13 +234,27 @@ export interface V2MediaConfig {
   maxSize?: number;
   preview?: boolean;
   uploadEndpoint?: string;
+  // 레거시 FileUpload 호환 설정
+  docType?: string;
+  docTypeName?: string;
+  showFileList?: boolean;
+  dragDrop?: boolean;
 }
 
 export interface V2MediaProps extends V2BaseProps {
-  v2Type: "V2Media";
-  config: V2MediaConfig;
+  v2Type?: "V2Media";
+  config?: V2MediaConfig;
   value?: string | string[]; // 파일 URL 또는 배열
   onChange?: (value: string | string[]) => void;
+  // 레거시 FileUpload 호환 props
+  formData?: Record<string, any>;
+  columnName?: string;
+  tableName?: string;
+  // 부모 컴포넌트 시그니처: (fieldName, value) 형식
+  onFormDataChange?: (fieldName: string, value: any) => void;
+  isDesignMode?: boolean;
+  isInteractive?: boolean;
+  onUpdate?: (updates: Partial<any>) => void;
 }
 
 // ===== V2List =====
@@ -530,3 +546,28 @@ export const LEGACY_TO_V2_MAP: Record<string, V2ComponentType> = {
   // Button (Input의 버튼 모드)
   "button-primary": "V2Input",
 };
+
+// ===== 조건부 레이어 시스템 =====
+
+/**
+ * 레이어 조건 설정
+ * 특정 필드값에 따라 레이어 활성화 여부를 결정
+ */
+export interface LayerCondition {
+  field: string; // 트리거 필드 (columnName 또는 탭ID)
+  operator: "=" | "!=" | "in" | "notIn" | "isEmpty" | "isNotEmpty";
+  value: string | string[]; // 비교값
+}
+
+/**
+ * 레이어 설정
+ * 특정 조건이 충족될 때 표시되는 컴포넌트들의 그룹
+ */
+export interface LayerConfig {
+  layerId: string; // 고유 ID
+  layerName: string; // 표시명 (설정용)
+  conditions: LayerCondition[]; // 조건 목록
+  conditionLogic?: "AND" | "OR"; // 조건 조합 방식 (기본: AND)
+  targetComponents: string[]; // 표시할 컴포넌트 ID 목록
+  alwaysVisible?: boolean; // 항상 표시 (조건 무시)
+}
diff --git a/mcp-agent-orchestrator/README.md b/mcp-agent-orchestrator/README.md
new file mode 100644
index 00000000..ce9aac42
--- /dev/null
+++ b/mcp-agent-orchestrator/README.md
@@ -0,0 +1,189 @@
+# Multi-Agent Orchestrator MCP Server v2.0
+
+Cursor Agent CLI를 활용한 멀티에이전트 시스템입니다.
+**Cursor Team Plan만으로 동작** - 외부 API 키 불필요!
+
+## 아키텍처
+
+```
+┌─────────────────────────────────────────┐
+│         Cursor IDE (PM Agent)           │
+│            Claude Opus 4.5              │
+└────────────────────┬────────────────────┘
+                     │ MCP Tools
+    ┌────────────────┼────────────────┐
+    ▼                ▼                ▼
+┌────────┐     ┌────────┐      ┌────────┐
+│Backend │     │   DB   │      │Frontend│
+│ Agent  │     │ Agent  │      │ Agent  │
+│ via CLI│     │ via CLI│      │ via CLI│
+│Sonnet  │     │Sonnet  │      │Sonnet  │
+└────────┘     └────────┘      └────────┘
+      ↑              ↑               ↑
+      └──────────────┴───────────────┘
+              Cursor Agent CLI
+           (Team Plan 크레딧 사용)
+```
+
+## 특징
+
+- **API 키 불필요**: Cursor Team Plan 크레딧만 사용
+- **크로스 플랫폼**: Windows, Mac, Linux 지원
+- **진짜 병렬 실행**: `parallel_ask`로 동시 작업
+- **모델 티어링**: PM=Opus, Sub-agents=Sonnet
+
+## 사전 요구사항
+
+1. **Cursor Team/Pro Plan** 구독
+2. **Cursor Agent CLI** 설치 및 로그인
+   ```bash
+   # 설치 후 로그인 확인
+   agent status
+   ```
+
+## 설치
+
+```bash
+cd mcp-agent-orchestrator
+npm install
+npm run build
+```
+
+## Cursor 설정
+
+### Windows
+
+`.cursor/mcp.json`:
+```json
+{
+  "mcpServers": {
+    "agent-orchestrator": {
+      "command": "node",
+      "args": ["C:/Users/YOUR_USERNAME/ERP-node/mcp-agent-orchestrator/build/index.js"]
+    }
+  }
+}
+```
+
+### Mac
+
+`.cursor/mcp.json`:
+```json
+{
+  "mcpServers": {
+    "agent-orchestrator": {
+      "command": "node",
+      "args": ["/Users/YOUR_USERNAME/ERP-node/mcp-agent-orchestrator/build/index.js"]
+    }
+  }
+}
+```
+
+**주의**: Mac에서 agent CLI가 PATH에 있어야 합니다.
+```bash
+# agent CLI 위치 확인
+which agent
+# 보통: ~/.cursor-agent/bin/agent 또는 /usr/local/bin/agent
+
+# PATH에 없으면 추가 (.zshrc 또는 .bashrc)
+export PATH="$HOME/.cursor-agent/bin:$PATH"
+```
+
+## 사용 가능한 도구
+
+### ask_backend_agent
+백엔드 전문가에게 질문/작업 요청
+- API 설계, 서비스 로직, 라우팅
+- 담당 폴더: `backend-node/src/`
+
+### ask_db_agent
+DB 전문가에게 질문/작업 요청
+- 스키마, 쿼리, MyBatis 매퍼
+- 담당 폴더: `src/com/pms/mapper/`, `db/`
+
+### ask_frontend_agent
+프론트엔드 전문가에게 질문/작업 요청
+- React 컴포넌트, 페이지, 스타일
+- 담당 폴더: `frontend/`
+
+### parallel_ask
+여러 전문가에게 동시에 질문 (진짜 병렬 실행!)
+- 정보 수집 단계에서 유용
+
+### get_agent_info
+에이전트 시스템 정보 확인
+
+## 워크플로우 예시
+
+### 1단계: 정보 수집 (병렬)
+```
+parallel_ask([
+  { agent: "backend", task: "현재 order 관련 API 구조 분석" },
+  { agent: "db", task: "orders 테이블 스키마 분석" },
+  { agent: "frontend", task: "주문 관련 컴포넌트 현황 분석" }
+])
+```
+
+### 2단계: 개별 작업 (순차)
+```
+ask_db_agent("cursor 기반 페이징 쿼리 작성")
+ask_backend_agent("GET /api/orders에 pagination 추가")
+ask_frontend_agent("Pagination 컴포넌트 적용")
+```
+
+## 모델 설정
+
+| Agent | Model | 역할 |
+|-------|-------|------|
+| PM (Cursor IDE) | Opus 4.5 | 전체 조율, 사용자 대화 |
+| Backend | Sonnet 4.5 | API, 서비스 로직 |
+| DB | Sonnet 4.5 | 스키마, 쿼리 |
+| Frontend | Sonnet 4.5 | 컴포넌트, UI |
+
+**비용 최적화**: PM만 Opus, 나머지는 Sonnet 사용
+
+## 환경 변수
+
+- `LOG_LEVEL`: 로그 레벨 (debug, info, warn, error)
+
+## 트러블슈팅
+
+### Windows: agent 명령어가 안 됨
+```powershell
+# PowerShell 실행 정책 확인
+Get-ExecutionPolicy -List
+
+# 필요시 변경
+Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+```
+
+### Mac: agent 명령어를 찾을 수 없음
+```bash
+# agent CLI 위치 확인
+ls -la ~/.cursor-agent/bin/
+
+# PATH 추가
+echo 'export PATH="$HOME/.cursor-agent/bin:$PATH"' >> ~/.zshrc
+source ~/.zshrc
+```
+
+### 응답이 오래 걸림
+- 정상입니다! 각 에이전트 호출에 15-30초 소요
+- `parallel_ask`로 병렬 처리하면 시간 절약
+
+## 개발
+
+```bash
+# 개발 모드 (watch)
+npm run dev
+
+# 빌드
+npm run build
+
+# 테스트 실행
+npm start
+```
+
+## 라이선스
+
+MIT
diff --git a/mcp-agent-orchestrator/package-lock.json b/mcp-agent-orchestrator/package-lock.json
new file mode 100644
index 00000000..af26ebd8
--- /dev/null
+++ b/mcp-agent-orchestrator/package-lock.json
@@ -0,0 +1,1179 @@
+{
+  "name": "mcp-agent-orchestrator",
+  "version": "2.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "mcp-agent-orchestrator",
+      "version": "2.0.0",
+      "dependencies": {
+        "@modelcontextprotocol/sdk": "^1.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20.0.0",
+        "typescript": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@hono/node-server": {
+      "version": "1.19.9",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
+      "integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz",
+      "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==",
+      "license": "MIT",
+      "dependencies": {
+        "@hono/node-server": "^1.19.9",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "content-type": "^1.0.5",
+        "cors": "^2.8.5",
+        "cross-spawn": "^7.0.5",
+        "eventsource": "^3.0.2",
+        "eventsource-parser": "^3.0.0",
+        "express": "^5.2.1",
+        "express-rate-limit": "^8.2.1",
+        "hono": "^4.11.4",
+        "jose": "^6.1.3",
+        "json-schema-typed": "^8.0.2",
+        "pkce-challenge": "^5.0.0",
+        "raw-body": "^3.0.0",
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.31",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.31.tgz",
+      "integrity": "sha512-5jsi0wpncvTD33Sh1UCgacK37FFwDn+EG7wCmEvs62fCvBL+n8/76cAYDok21NF6+jaVWIqKwCZyX7Vbu8eB3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventsource": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+      "license": "MIT",
+      "dependencies": {
+        "eventsource-parser": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+      "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hono": {
+      "version": "4.11.7",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.7.tgz",
+      "integrity": "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jose": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-typed": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+      "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.1.tgz",
+      "integrity": "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.25 || ^4"
+      }
+    }
+  }
+}
diff --git a/mcp-agent-orchestrator/package.json b/mcp-agent-orchestrator/package.json
new file mode 100644
index 00000000..bc8b5b7c
--- /dev/null
+++ b/mcp-agent-orchestrator/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "mcp-agent-orchestrator",
+  "version": "2.0.0",
+  "description": "Multi-Agent Orchestrator MCP Server using Cursor Agent CLI (Team Plan)",
+  "type": "module",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "tsc",
+    "start": "node build/index.js",
+    "dev": "tsc --watch"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "cursor",
+    "mcp",
+    "multi-agent",
+    "ai",
+    "orchestrator"
+  ]
+}
diff --git a/mcp-agent-orchestrator/src/agents/index.ts b/mcp-agent-orchestrator/src/agents/index.ts
new file mode 100644
index 00000000..7aebaa5c
--- /dev/null
+++ b/mcp-agent-orchestrator/src/agents/index.ts
@@ -0,0 +1,6 @@
+/**
+ * 에이전트 모듈 내보내기
+ */
+
+export * from "./types.js";
+export * from "./prompts.js";
diff --git a/mcp-agent-orchestrator/src/agents/prompts.ts b/mcp-agent-orchestrator/src/agents/prompts.ts
new file mode 100644
index 00000000..f248e29d
--- /dev/null
+++ b/mcp-agent-orchestrator/src/agents/prompts.ts
@@ -0,0 +1,258 @@
+/**
+ * Agent System Prompts v2.1
+ * All prompts in English for better token efficiency and model performance.
+ * Agents will respond in Korean based on user preferences.
+ */
+
+export const PM_PROMPT = `# Role
+You are a PM (Project Manager) agent for ERP-node project.
+Analyze user requests, distribute tasks to specialist agents (Backend, DB, Frontend),
+and integrate results to create the final deliverable.
+
+# Available Tools
+- ask_backend_agent: Backend expert (API, services, routing)
+- ask_db_agent: DB expert (schema, queries, migrations)
+- ask_frontend_agent: Frontend expert (components, pages, styles)
+- parallel_ask: Multiple experts simultaneously
+
+# Work Process
+1. Analyze request -> identify scope
+2. If cross-domain (FE+BE+DB): use parallel_ask
+3. If single domain: use specific agent
+4. Integrate results -> report to user
+
+# Task Distribution
+- Backend Agent: backend-node/src/ (controllers, services, routes)
+- DB Agent: db/, mapper/ (schema, migrations, queries)
+- Frontend Agent: frontend/ (components, pages, lib)
+
+# Response: Always concise! Summarize key findings only.`;
+
+export const BACKEND_PROMPT = `# Role
+You are a Backend specialist for ERP-node project.
+Stack: Node.js + Express + TypeScript + PostgreSQL Raw Query.
+
+# CRITICAL PROJECT RULES
+
+## 1. Multi-tenancy (ABSOLUTE MUST!)
+- ALL queries MUST include company_code filter
+- Use req.user!.companyCode from auth middleware
+- NEVER trust client-sent company_code
+- Super Admin (company_code = "*") sees all data
+- Regular users CANNOT see company_code = "*" data
+
+## 2. Super Admin Visibility
+- If req.user.companyCode !== "*", add: WHERE company_code != '*'
+- Super admin users must be hidden from regular company users
+
+## 3. Required Code Pattern
+\`\`\`typescript
+const companyCode = req.user!.companyCode;
+if (companyCode === "*") {
+  query = "SELECT * FROM table ORDER BY company_code";
+} else {
+  query = "SELECT * FROM table WHERE company_code = $1 AND company_code != '*'";
+  params = [companyCode];
+}
+\`\`\`
+
+# Your Domain (ONLY these!)
+- backend-node/src/controllers/
+- backend-node/src/services/
+- backend-node/src/routes/
+- backend-node/src/middleware/
+- backend-node/src/utils/
+
+# NOT Your Domain
+- frontend/ -> Frontend Agent
+- db/migrations/ -> DB Agent
+- Direct SQL schema design -> DB Agent
+
+# Code Rules
+1. TypeScript strict mode
+2. Error handling with try/catch
+3. Comments in Korean
+4. Follow existing code patterns
+5. Use logger for important operations
+
+# Response Format (JSON) - BE CONCISE!
+{
+  "status": "success | partial | failed",
+  "confidence": "high | medium | low",
+  "result": {
+    "summary": "one line summary",
+    "details": "brief explanation",
+    "files_affected": ["paths"],
+    "code_changes": [{"file": "path", "action": "create|modify", "content": "code"}]
+  },
+  "needs_from_others": [],
+  "questions": []
+}
+
+# IMPORTANT: Keep responses SHORT. No unnecessary explanations.`;
+
+export const DB_PROMPT = `# Role
+You are a Database specialist for ERP-node project.
+Stack: PostgreSQL + Raw Query (no ORM). Migrations in db/migrations/.
+
+# CRITICAL PROJECT RULES
+
+## 1. Multi-tenancy (ABSOLUTE MUST!)
+- ALL tables MUST have company_code VARCHAR(20) NOT NULL
+- ALL queries MUST filter by company_code
+- JOINs MUST include company_code matching condition
+- Subqueries MUST include company_code filter
+- Aggregates (COUNT, SUM) MUST filter by company_code
+- CREATE INDEX on company_code for every table
+
+## 2. company_code = "*" Meaning
+- NOT shared/common data!
+- Super admin ONLY data
+- Regular companies CANNOT see it: WHERE company_code != '*'
+
+## 3. Required SQL Patterns
+\`\`\`sql
+-- Standard query pattern
+SELECT * FROM table_name
+WHERE company_code = $1
+  AND company_code != '*'
+ORDER BY created_date DESC;
+
+-- JOIN pattern (company_code matching required!)
+SELECT a.*, b.name
+FROM table_a a
+LEFT JOIN table_b b ON a.ref_id = b.id
+  AND a.company_code = b.company_code
+WHERE a.company_code = $1;
+\`\`\`
+
+## 4. Migration Rules
+- File naming: NNN_description.sql (e.g., 034_add_new_table.sql)
+- Always include company_code column
+- Always create index on company_code
+- Add foreign key to company_info(company_code) when possible
+
+# Your Domain (ONLY these!)
+- db/migrations/
+- SQL schema design
+- Query optimization
+- Index strategy
+
+# NOT Your Domain
+- API logic -> Backend Agent
+- Frontend -> Frontend Agent
+- Business logic decisions -> PM Agent
+
+# Code Rules
+1. PostgreSQL syntax only
+2. Parameter binding ($1, $2) - prevent SQL injection
+3. Consider indexes for frequently queried columns
+4. Use COALESCE for NULL handling
+5. Use TIMESTAMPTZ for dates
+
+# Response Format (JSON) - BE CONCISE!
+{
+  "status": "success | partial | failed",
+  "confidence": "high | medium | low",
+  "result": {
+    "summary": "one line summary",
+    "details": "brief explanation",
+    "schema_info": {"tables": [], "columns": [], "indexes": []},
+    "code_changes": [{"file": "path", "action": "create|modify", "content": "sql"}]
+  },
+  "performance_notes": [],
+  "questions": []
+}
+
+# IMPORTANT: Keep responses SHORT. Focus on schema and queries only.`;
+
+export const FRONTEND_PROMPT = `# Role
+You are a Frontend specialist for ERP-node project.
+Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui.
+
+# CRITICAL PROJECT RULES
+
+## 1. API Client (ABSOLUTE RULE!)
+- NEVER use fetch() directly!
+- ALWAYS use lib/api/ clients (Axios-based)
+\`\`\`typescript
+// FORBIDDEN
+const res = await fetch('/api/flow/definitions');
+
+// MUST USE
+import { getFlowDefinitions } from '@/lib/api/flow';
+const res = await getFlowDefinitions();
+\`\`\`
+
+## 2. shadcn/ui Style Rules
+- Use CSS variables: bg-primary, text-muted-foreground (NOT bg-blue-500)
+- No nested boxes: Card inside Card is FORBIDDEN
+- Button variants: default, secondary, outline, ghost, destructive
+- Responsive: mobile-first approach (sm:, md:, lg:)
+- Modal standard: max-w-[95vw] sm:max-w-[500px]
+
+## 3. Component Rules
+- Functional components only
+- Korean comments for code documentation
+- Custom hooks for reusable logic
+- TypeScript strict typing required
+
+# Your Domain (ONLY these!)
+- frontend/components/
+- frontend/app/ or frontend/pages/
+- frontend/lib/
+- frontend/hooks/
+- frontend/styles/
+
+# NOT Your Domain
+- backend-node/ -> Backend Agent
+- DB schema -> DB Agent
+- API endpoint decisions -> PM/Backend Agent
+
+# Code Rules
+1. TypeScript strict mode
+2. React functional components with hooks
+3. Prefer shadcn/ui components
+4. Use cn() utility for conditional classes
+5. Comments in Korean
+
+# Response Format (JSON) - BE CONCISE!
+{
+  "status": "success | partial | failed",
+  "confidence": "high | medium | low",
+  "result": {
+    "summary": "one line summary",
+    "details": "brief explanation",
+    "components_affected": ["list"],
+    "code_changes": [{"file": "path", "action": "create|modify", "content": "code"}]
+  },
+  "needs_from_others": [],
+  "ui_notes": [],
+  "questions": []
+}
+
+# IMPORTANT: Keep responses SHORT. No lengthy analysis unless explicitly asked.`;
+
+// Agent configuration map
+export const AGENT_CONFIGS = {
+  pm: {
+    model: 'claude-opus-4-5-20250214',
+    systemPrompt: PM_PROMPT,
+    maxTokens: 4096,
+  },
+  backend: {
+    model: 'claude-sonnet-4-20250514',
+    systemPrompt: BACKEND_PROMPT,
+    maxTokens: 4096,
+  },
+  db: {
+    model: 'claude-sonnet-4-20250514',
+    systemPrompt: DB_PROMPT,
+    maxTokens: 4096,
+  },
+  frontend: {
+    model: 'claude-sonnet-4-20250514',
+    systemPrompt: FRONTEND_PROMPT,
+    maxTokens: 4096,
+  },
+} as const;
diff --git a/mcp-agent-orchestrator/src/agents/types.ts b/mcp-agent-orchestrator/src/agents/types.ts
new file mode 100644
index 00000000..ad045ba6
--- /dev/null
+++ b/mcp-agent-orchestrator/src/agents/types.ts
@@ -0,0 +1,63 @@
+/**
+ * Multi-Agent System 타입 정의
+ */
+
+// 에이전트 타입
+export type AgentType = 'pm' | 'backend' | 'db' | 'frontend';
+
+// 에이전트 설정
+export interface AgentConfig {
+  model: string;
+  systemPrompt: string;
+  maxTokens: number;
+}
+
+// 작업 요청
+export interface TaskRequest {
+  agent: AgentType;
+  task: string;
+  context?: string;
+}
+
+// 작업 응답 상태
+export type ResponseStatus = 'success' | 'partial' | 'failed' | 'need_clarification';
+
+// 확신도
+export type ConfidenceLevel = 'high' | 'medium' | 'low';
+
+// 코드 변경
+export interface CodeChange {
+  file: string;
+  action: 'create' | 'modify' | 'delete';
+  content?: string;
+  lineStart?: number;
+  lineEnd?: number;
+}
+
+// 에이전트 응답
+export interface AgentResponse {
+  status: ResponseStatus;
+  confidence: ConfidenceLevel;
+  result?: {
+    summary: string;
+    details: string;
+    filesAffected?: string[];
+    codeChanges?: CodeChange[];
+  };
+  scopeViolations?: string[];
+  dependencies?: string[];
+  sideEffects?: string[];
+  alternatives?: string[];
+  questions?: string[];
+  needsFromOthers?: {
+    agent: AgentType;
+    request: string;
+  }[];
+}
+
+// 병렬 요청 결과
+export interface ParallelResult {
+  agent: AgentType;
+  result: string;
+  error?: string;
+}
diff --git a/mcp-agent-orchestrator/src/index.ts b/mcp-agent-orchestrator/src/index.ts
new file mode 100644
index 00000000..3634cf70
--- /dev/null
+++ b/mcp-agent-orchestrator/src/index.ts
@@ -0,0 +1,407 @@
+#!/usr/bin/env node
+/**
+b * Multi-Agent Orchestrator MCP Server v2.0
+ * 
+ * Cursor Agent CLI를 활용한 멀티에이전트 시스템
+ * - PM (Cursor IDE): 전체 조율
+ * - Sub-agents (agent CLI): 전문가별 작업 수행
+ * 
+ * 모든 AI 호출이 Cursor Team Plan으로 처리됨!
+ * API 키 불필요!
+ */
+
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+import { exec } from "child_process";
+import { promisify } from "util";
+import { platform } from "os";
+import { AGENT_CONFIGS } from "./agents/prompts.js";
+import { AgentType, ParallelResult } from "./agents/types.js";
+import { logger } from "./utils/logger.js";
+
+const execAsync = promisify(exec);
+
+// OS 감지
+const isWindows = platform() === "win32";
+logger.info(`Platform detected: ${platform()} (isWindows: ${isWindows})`);
+
+// MCP 서버 생성
+const server = new Server(
+  {
+    name: "agent-orchestrator",
+    version: "2.0.0",
+  },
+  {
+    capabilities: {
+      tools: {},
+    },
+  }
+);
+
+/**
+ * Cursor Agent CLI를 통해 에이전트 호출
+ * Cursor Team Plan 사용 - API 키 불필요!
+ * 
+ * 크로스 플랫폼 지원:
+ * - Windows: cmd /c "echo. | agent ..." (stdin 닫기 위해)
+ * - Mac/Linux: ~/.local/bin/agent 사용
+ */
+async function callAgentCLI(
+  agentType: AgentType,
+  task: string,
+  context?: string
+): Promise<string> {
+  const config = AGENT_CONFIGS[agentType];
+  
+  // 모델 선택: PM은 opus, 나머지는 sonnet
+  const model = agentType === 'pm' ? 'opus-4.5' : 'sonnet-4.5';
+  
+  logger.info(`Calling ${agentType} agent via CLI`, { model, task: task.substring(0, 100) });
+
+  try {
+    const userMessage = context 
+      ? `${task}\n\n배경 정보:\n${context}` 
+      : task;
+    
+    // 프롬프트를 임시 파일에 저장하여 쉘 이스케이프 문제 회피
+    const fullPrompt = `${config.systemPrompt}\n\n---\n\n${userMessage}`;
+    
+    // Base64 인코딩으로 특수문자 문제 해결
+    const encodedPrompt = Buffer.from(fullPrompt).toString('base64');
+    
+    let cmd: string;
+    let shell: string;
+    const agentPath = isWindows ? 'agent' : `${process.env.HOME}/.local/bin/agent`;
+    
+    if (isWindows) {
+      // Windows: PowerShell을 통해 Base64 디코딩 후 실행
+      cmd = `powershell -Command "$prompt = [System.Text.Encoding]::UTF8.GetString([System.Convert]::FromBase64String('${encodedPrompt}')); echo $prompt | ${agentPath} --model ${model} --print"`;
+      shell = 'powershell.exe';
+    } else {
+      // Mac/Linux: echo로 base64 디코딩 후 파이프
+      cmd = `echo "${encodedPrompt}" | base64 -d | ${agentPath} --model ${model} --print`;
+      shell = '/bin/bash';
+    }
+    
+    logger.debug(`Executing: ${agentPath} --model ${model} --print`);
+    
+    const { stdout, stderr } = await execAsync(cmd, {
+      cwd: process.cwd(),
+      maxBuffer: 10 * 1024 * 1024, // 10MB buffer
+      timeout: 300000, // 5분 타임아웃
+      shell,
+      env: {
+        ...process.env,
+        PATH: `${process.env.HOME}/.local/bin:${process.env.PATH}`,
+      },
+    });
+
+    if (stderr && !stderr.includes('warning') && !stderr.includes('info')) {
+      logger.warn(`${agentType} agent stderr`, { stderr: stderr.substring(0, 500) });
+    }
+
+    logger.info(`${agentType} agent completed via CLI`);
+    return stdout.trim();
+  } catch (error) {
+    logger.error(`${agentType} agent CLI error`, error);
+    throw error;
+  }
+}
+
+/**
+ * 도구 목록 핸들러
+ */
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: "ask_backend_agent",
+        description: 
+          "백엔드 전문가에게 질문하거나 작업을 요청합니다. " +
+          "API 설계, 서비스 로직, 라우팅, 미들웨어 관련 작업에 사용하세요. " +
+          "담당 폴더: backend-node/src/ (Cursor Agent CLI, sonnet-4.5 모델)" +
+          "주의: 단순 파일 읽기/수정은 PM이 직접 처리하세요. 깊은 분석이 필요할 때만 호출!",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            task: {
+              type: "string",
+              description: "백엔드 에이전트에게 요청할 작업 내용",
+            },
+            context: {
+              type: "string",
+              description: "작업에 필요한 배경 정보 (선택사항)",
+            },
+          },
+          required: ["task"],
+        },
+      },
+      {
+        name: "ask_db_agent",
+        description: 
+          "DB 전문가에게 질문하거나 작업을 요청합니다. " +
+          "스키마 설계, SQL 쿼리, MyBatis 매퍼, 마이그레이션 관련 작업에 사용하세요. " +
+          "담당 폴더: src/com/pms/mapper/, db/ (Cursor Agent CLI, sonnet-4.5 모델)" +
+          "주의: 단순 스키마 확인은 PM이 직접 처리하세요. 복잡한 쿼리 설계/최적화 시에만 호출!",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            task: {
+              type: "string",
+              description: "DB 에이전트에게 요청할 작업 내용",
+            },
+            context: {
+              type: "string",
+              description: "작업에 필요한 배경 정보 (선택사항)",
+            },
+          },
+          required: ["task"],
+        },
+      },
+      {
+        name: "ask_frontend_agent",
+        description: 
+          "프론트엔드 전문가에게 질문하거나 작업을 요청합니다. " +
+          "React 컴포넌트, 페이지, 스타일링, 상태관리 관련 작업에 사용하세요. " +
+          "담당 폴더: frontend/ (Cursor Agent CLI, sonnet-4.5 모델)" +
+          "주의: 단순 컴포넌트 읽기/수정은 PM이 직접 처리하세요. 구조 분석이 필요할 때만 호출!",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            task: {
+              type: "string",
+              description: "프론트엔드 에이전트에게 요청할 작업 내용",
+            },
+            context: {
+              type: "string",
+              description: "작업에 필요한 배경 정보 (선택사항)",
+            },
+          },
+          required: ["task"],
+        },
+      },
+      {
+        name: "parallel_ask",
+        description: 
+          "여러 전문가에게 동시에 질문합니다 (진짜 병렬 실행!). " +
+          "3개 영역(FE+BE+DB) 크로스도메인 분석이 필요할 때만 사용하세요. " +
+          "주의: 호출 시간이 오래 걸림! 단순 작업은 PM이 직접 처리하는 게 훨씬 빠릅니다. " +
+          "적합한 경우: 전체 아키텍처 파악, 대규모 리팩토링 계획, 크로스도메인 영향 분석",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            requests: {
+              type: "array",
+              description: "각 에이전트에게 보낼 요청 목록",
+              items: {
+                type: "object",
+                properties: {
+                  agent: {
+                    type: "string",
+                    enum: ["backend", "db", "frontend"],
+                    description: "요청할 에이전트 타입",
+                  },
+                  task: {
+                    type: "string",
+                    description: "해당 에이전트에게 요청할 작업",
+                  },
+                  context: {
+                    type: "string",
+                    description: "배경 정보 (선택사항)",
+                  },
+                },
+                required: ["agent", "task"],
+              },
+            },
+          },
+          required: ["requests"],
+        },
+      },
+      {
+        name: "get_agent_info",
+        description: 
+          "에이전트 시스템의 현재 상태와 사용 가능한 에이전트 정보를 확인합니다.",
+        inputSchema: {
+          type: "object" as const,
+          properties: {},
+        },
+      },
+    ],
+  };
+});
+
+/**
+ * 도구 호출 핸들러
+ */
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+
+  logger.info(`Tool called: ${name}`);
+
+  try {
+    switch (name) {
+      case "ask_backend_agent": {
+        const { task, context } = args as { task: string; context?: string };
+        const result = await callAgentCLI("backend", task, context);
+        return {
+          content: [{ type: "text" as const, text: result }],
+        };
+      }
+
+      case "ask_db_agent": {
+        const { task, context } = args as { task: string; context?: string };
+        const result = await callAgentCLI("db", task, context);
+        return {
+          content: [{ type: "text" as const, text: result }],
+        };
+      }
+
+      case "ask_frontend_agent": {
+        const { task, context } = args as { task: string; context?: string };
+        const result = await callAgentCLI("frontend", task, context);
+        return {
+          content: [{ type: "text" as const, text: result }],
+        };
+      }
+
+      case "parallel_ask": {
+        const { requests } = args as {
+          requests: Array<{
+            agent: "backend" | "db" | "frontend";
+            task: string;
+            context?: string;
+          }>;
+        };
+
+        logger.info(`Parallel ask to ${requests.length} agents (TRUE PARALLEL!)`);
+
+        // 진짜 병렬 실행! 모든 에이전트가 동시에 작업
+        const results: ParallelResult[] = await Promise.all(
+          requests.map(async (req) => {
+            try {
+              const result = await callAgentCLI(req.agent, req.task, req.context);
+              return { agent: req.agent, result };
+            } catch (error) {
+              return {
+                agent: req.agent,
+                result: "",
+                error: error instanceof Error ? error.message : "Unknown error",
+              };
+            }
+          })
+        );
+
+        // 결과를 보기 좋게 포맷팅
+        const formattedResults = results.map((r) => {
+          const header = `\n${"=".repeat(60)}\n## ${r.agent.toUpperCase()} Agent 응답\n${"=".repeat(60)}\n`;
+          if (r.error) {
+            return `${header}❌ 에러: ${r.error}`;
+          }
+          return `${header}${r.result}`;
+        });
+
+        return {
+          content: [
+            {
+              type: "text" as const,
+              text: formattedResults.join("\n"),
+            },
+          ],
+        };
+      }
+
+      case "get_agent_info": {
+        const info = {
+          system: "Multi-Agent Orchestrator v2.0",
+          version: "2.0.0",
+          backend: "Cursor Agent CLI (Team Plan)",
+          cliPath: `${process.env.HOME}/.local/bin/agent`,
+          apiKey: "NOT REQUIRED! Using Cursor Team Plan credits",
+          agents: {
+            pm: {
+              role: "Project Manager",
+              model: "opus-4.5 (Cursor IDE에서 직접)",
+              description: "전체 조율, 사용자 의도 파악, 작업 분배",
+            },
+            backend: {
+              role: "Backend Specialist",
+              model: "sonnet-4.5 (via Agent CLI)",
+              description: "API, 서비스 로직, 라우팅 담당",
+              folder: "backend-node/src/",
+            },
+            db: {
+              role: "Database Specialist",
+              model: "sonnet-4.5 (via Agent CLI)",
+              description: "스키마, 쿼리, 마이그레이션 담당",
+              folder: "src/com/pms/mapper/, db/",
+            },
+            frontend: {
+              role: "Frontend Specialist",
+              model: "sonnet-4.5 (via Agent CLI)",
+              description: "컴포넌트, 페이지, 스타일링 담당",
+              folder: "frontend/",
+            },
+          },
+          features: {
+            parallel_execution: true,
+            cursor_team_plan: true,
+            cursor_agent_cli: true,
+            separate_api_key: false,
+            cross_platform: true,
+          },
+          usage: {
+            single_agent: "ask_backend_agent, ask_db_agent, ask_frontend_agent",
+            parallel: "parallel_ask로 여러 에이전트 동시 호출",
+            workflow: "1. parallel_ask로 정보 수집 → 2. 개별 에이전트로 작업 분배",
+          },
+        };
+
+        return {
+          content: [
+            {
+              type: "text" as const,
+              text: JSON.stringify(info, null, 2),
+            },
+          ],
+        };
+      }
+
+      default:
+        throw new Error(`Unknown tool: ${name}`);
+    }
+  } catch (error) {
+    logger.error(`Tool error: ${name}`, error);
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `❌ 에러 발생: ${error instanceof Error ? error.message : "Unknown error"}`,
+        },
+      ],
+      isError: true,
+    };
+  }
+});
+
+/**
+ * 서버 시작
+ */
+async function main() {
+  logger.info("Starting Multi-Agent Orchestrator MCP Server v2.0...");
+  logger.info(`Backend: Cursor Agent CLI (${process.env.HOME}/.local/bin/agent)`);
+  logger.info("Credits: Cursor Team Plan - No API Key Required!");
+
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+
+  logger.info("MCP Server connected and ready!");
+}
+
+main().catch((error) => {
+  logger.error("Server failed to start", error);
+  process.exit(1);
+});
diff --git a/mcp-agent-orchestrator/src/utils/logger.ts b/mcp-agent-orchestrator/src/utils/logger.ts
new file mode 100644
index 00000000..9e74d552
--- /dev/null
+++ b/mcp-agent-orchestrator/src/utils/logger.ts
@@ -0,0 +1,55 @@
+/**
+ * 간단한 로깅 유틸리티
+ */
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+const LOG_LEVELS: Record<LogLevel, number> = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3,
+};
+
+// 환경변수로 로그 레벨 설정 (기본: info)
+const currentLevel = (process.env.LOG_LEVEL as LogLevel) || 'info';
+
+function shouldLog(level: LogLevel): boolean {
+  return LOG_LEVELS[level] >= LOG_LEVELS[currentLevel];
+}
+
+function formatMessage(level: LogLevel, message: string, data?: unknown): string {
+  const timestamp = new Date().toISOString();
+  const prefix = `[${timestamp}] [${level.toUpperCase()}]`;
+  
+  if (data) {
+    return `${prefix} ${message} ${JSON.stringify(data, null, 2)}`;
+  }
+  return `${prefix} ${message}`;
+}
+
+export const logger = {
+  debug(message: string, data?: unknown): void {
+    if (shouldLog('debug')) {
+      console.error(formatMessage('debug', message, data));
+    }
+  },
+
+  info(message: string, data?: unknown): void {
+    if (shouldLog('info')) {
+      console.error(formatMessage('info', message, data));
+    }
+  },
+
+  warn(message: string, data?: unknown): void {
+    if (shouldLog('warn')) {
+      console.error(formatMessage('warn', message, data));
+    }
+  },
+
+  error(message: string, data?: unknown): void {
+    if (shouldLog('error')) {
+      console.error(formatMessage('error', message, data));
+    }
+  },
+};
diff --git a/mcp-agent-orchestrator/tsconfig.json b/mcp-agent-orchestrator/tsconfig.json
new file mode 100644
index 00000000..c974e14e
--- /dev/null
+++ b/mcp-agent-orchestrator/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./build",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build"]
+}
diff --git a/my_layout.json b/my_layout.json
new file mode 100644
index 00000000..39d27b25
Binary files /dev/null and b/my_layout.json differ
diff --git a/scripts/dev/start-all-parallel.bat b/scripts/dev/start-all-parallel.bat
new file mode 100644
index 00000000..08049b48
--- /dev/null
+++ b/scripts/dev/start-all-parallel.bat
@@ -0,0 +1,118 @@
+@echo off
+chcp 65001 >nul
+setlocal EnableDelayedExpansion
+
+REM 스크립트가 있는 디렉토리에서 루트로 이동
+cd /d "%~dp0\..\.."
+
+REM 시작 시간 기록
+set START_TIME=%DATE% %TIME%
+
+echo ============================================
+echo WACE 솔루션 - 전체 서비스 시작 (병렬 최적화)
+echo ============================================
+echo [시작 시간] %START_TIME%
+echo.
+
+REM Docker Desktop 실행 확인
+echo [1/5] Docker Desktop 상태 확인 중...
+docker --version >nul 2>&1
+if %errorlevel% neq 0 (
+    echo [ERROR] Docker Desktop이 실행되지 않았습니다!
+    echo         Docker Desktop을 먼저 실행해주세요.
+    pause
+    exit /b 1
+)
+echo [OK] Docker Desktop이 실행 중입니다.
+echo.
+
+REM 기존 컨테이너 및 이미지 정리
+echo [2/5] 기존 컨테이너 및 이미지 정리 중...
+docker rm -f pms-backend-win pms-frontend-win 2>nul
+docker rmi -f erp-node-backend erp-node-frontend 2>nul
+docker network rm pms-network 2>nul
+docker network create pms-network 2>nul
+docker system prune -f >nul 2>&1
+echo [OK] 컨테이너 및 이미지 정리 완료
+echo.
+
+REM 병렬 빌드 (docker-compose 자체가 병렬 처리)
+echo [3/5] 이미지 빌드 중... (백엔드 + 프론트엔드 병렬)
+echo       이 작업은 시간이 걸릴 수 있습니다...
+echo.
+
+REM 백엔드 빌드 (캐시 없이 완전 재빌드)
+docker-compose -f docker-compose.backend.win.yml build --no-cache
+if %errorlevel% neq 0 (
+    echo [ERROR] 백엔드 빌드 실패!
+    pause
+    exit /b 1
+)
+echo [OK] 백엔드 빌드 완료
+echo.
+
+REM 프론트엔드 빌드 (캐시 없이 완전 재빌드)
+docker-compose -f docker-compose.frontend.win.yml build --no-cache
+if %errorlevel% neq 0 (
+    echo [ERROR] 프론트엔드 빌드 실패!
+    pause
+    exit /b 1
+)
+echo [OK] 프론트엔드 빌드 완료
+echo.
+
+REM 기존 컨테이너 정리 후 서비스 시작
+echo [4/5] 서비스 시작 중...
+docker-compose -f docker-compose.backend.win.yml down -v 2>nul
+docker-compose -f docker-compose.frontend.win.yml down -v 2>nul
+
+REM 백엔드 시작
+echo       백엔드 서비스 시작...
+docker-compose -f docker-compose.backend.win.yml up -d
+if %errorlevel% neq 0 (
+    echo [ERROR] 백엔드 시작 실패!
+    pause
+    exit /b 1
+)
+
+REM 프론트엔드 시작
+echo       프론트엔드 서비스 시작...
+docker-compose -f docker-compose.frontend.win.yml up -d
+if %errorlevel% neq 0 (
+    echo [ERROR] 프론트엔드 시작 실패!
+    pause
+    exit /b 1
+)
+echo [OK] 서비스 시작 완료
+echo.
+
+REM 안정화 대기
+echo [5/5] 서비스 안정화 대기 중... (10초)
+timeout /t 10 /nobreak >nul
+echo.
+
+echo ============================================
+echo [완료] 모든 서비스가 시작되었습니다!
+echo ============================================
+echo.
+echo [DATABASE] PostgreSQL: http://39.117.244.52:11132
+echo [BACKEND]  Node.js API: http://localhost:8080/api
+echo [FRONTEND] Next.js:     http://localhost:9771
+echo.
+echo [서비스 상태 확인]
+echo   docker-compose -f docker-compose.backend.win.yml ps
+echo   docker-compose -f docker-compose.frontend.win.yml ps
+echo.
+echo [로그 확인]
+echo   백엔드:   docker-compose -f docker-compose.backend.win.yml logs -f
+echo   프론트엔드: docker-compose -f docker-compose.frontend.win.yml logs -f
+echo.
+echo [서비스 중지]
+echo   scripts\dev\stop-all.bat
+echo.
+
+set END_TIME=%DATE% %TIME%
+echo [종료 시간] %END_TIME%
+echo ============================================
+
+pause
diff --git a/scripts/dev/start-all-parallel.ps1 b/scripts/dev/start-all-parallel.ps1
new file mode 100644
index 00000000..732106c6
--- /dev/null
+++ b/scripts/dev/start-all-parallel.ps1
@@ -0,0 +1,183 @@
+# WACE 솔루션 - 전체 서비스 시작 (병렬 최적화) - PowerShell 버전
+# 실행 방법: powershell -ExecutionPolicy Bypass -File .\scripts\dev\start-all-parallel.ps1
+
+# UTF-8 출력 설정
+[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
+$OutputEncoding = [System.Text.Encoding]::UTF8
+
+# 스크립트 위치에서 루트 디렉토리로 이동
+$scriptPath = Split-Path -Parent $MyInvocation.MyCommand.Definition
+Set-Location (Join-Path $scriptPath "..\..") 
+
+# 시작 시간 기록
+$startTime = Get-Date
+$startTimeFormatted = $startTime.ToString("yyyy-MM-dd HH:mm:ss")
+
+Write-Host ""
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "WACE 솔루션 - 전체 서비스 시작 (병렬 최적화)" -ForegroundColor Cyan
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "[시작 시간] $startTimeFormatted" -ForegroundColor Yellow
+Write-Host ""
+
+# Docker Desktop 실행 확인
+Write-Host "[1/5] Docker Desktop 상태 확인 중..." -ForegroundColor White
+$dockerCheck = docker --version 2>&1
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[ERROR] Docker Desktop이 실행되지 않았습니다!" -ForegroundColor Red
+    Write-Host "        Docker Desktop을 먼저 실행해주세요." -ForegroundColor Red
+    Read-Host "계속하려면 Enter를 누르세요"
+    exit 1
+}
+Write-Host "[OK] Docker Desktop이 실행 중입니다." -ForegroundColor Green
+Write-Host ""
+
+# 기존 컨테이너 정리
+Write-Host "[2/5] 기존 컨테이너 정리 중..." -ForegroundColor White
+docker rm -f pms-backend-win pms-frontend-win 2>$null | Out-Null
+docker network rm pms-network 2>$null | Out-Null
+docker network create pms-network 2>$null | Out-Null
+Write-Host "[OK] 컨테이너 정리 완료" -ForegroundColor Green
+Write-Host ""
+
+# 병렬 빌드 시작
+$parallelStart = Get-Date
+Write-Host "[3/5] 이미지 빌드 중... (백엔드 + 프론트엔드 병렬)" -ForegroundColor White
+Write-Host "      이 작업은 시간이 걸릴 수 있습니다..." -ForegroundColor Gray
+Write-Host ""
+
+# 병렬 빌드 실행
+$backendBuildJob = Start-Job -ScriptBlock {
+    param($workDir)
+    Set-Location $workDir
+    $output = docker-compose -f docker-compose.backend.win.yml build 2>&1
+    return @{
+        Success = $LASTEXITCODE -eq 0
+        Output = $output
+    }
+} -ArgumentList $PWD.Path
+
+$frontendBuildJob = Start-Job -ScriptBlock {
+    param($workDir)
+    Set-Location $workDir
+    $output = docker-compose -f docker-compose.frontend.win.yml build 2>&1
+    return @{
+        Success = $LASTEXITCODE -eq 0
+        Output = $output
+    }
+} -ArgumentList $PWD.Path
+
+Write-Host "      백엔드 빌드 진행 중..." -ForegroundColor Gray
+Write-Host "      프론트엔드 빌드 진행 중..." -ForegroundColor Gray
+Write-Host ""
+
+# 빌드 완료 대기
+$null = Wait-Job -Job $backendBuildJob, $frontendBuildJob
+
+$backendResult = Receive-Job -Job $backendBuildJob
+$frontendResult = Receive-Job -Job $frontendBuildJob
+
+Remove-Job -Job $backendBuildJob, $frontendBuildJob -Force
+
+# 빌드 결과 확인
+$buildFailed = $false
+
+if ($backendResult.Success) {
+    Write-Host "[OK] 백엔드 빌드 완료" -ForegroundColor Green
+} else {
+    Write-Host "[ERROR] 백엔드 빌드 실패!" -ForegroundColor Red
+    Write-Host $backendResult.Output -ForegroundColor Red
+    $buildFailed = $true
+}
+
+if ($frontendResult.Success) {
+    Write-Host "[OK] 프론트엔드 빌드 완료" -ForegroundColor Green
+} else {
+    Write-Host "[ERROR] 프론트엔드 빌드 실패!" -ForegroundColor Red
+    Write-Host $frontendResult.Output -ForegroundColor Red
+    $buildFailed = $true
+}
+
+if ($buildFailed) {
+    Read-Host "빌드 실패. Enter를 누르면 종료됩니다"
+    exit 1
+}
+
+$parallelEnd = Get-Date
+$parallelDuration = ($parallelEnd - $parallelStart).TotalSeconds
+Write-Host "[INFO] 빌드 소요 시간: $([math]::Round($parallelDuration))초" -ForegroundColor Yellow
+Write-Host ""
+
+# 서비스 시작
+$serviceStart = Get-Date
+Write-Host "[4/5] 서비스 시작 중..." -ForegroundColor White
+
+# 기존 컨테이너 정리
+docker-compose -f docker-compose.backend.win.yml down -v 2>$null | Out-Null
+docker-compose -f docker-compose.frontend.win.yml down -v 2>$null | Out-Null
+
+# 백엔드 시작
+Write-Host "      백엔드 서비스 시작..." -ForegroundColor Gray
+docker-compose -f docker-compose.backend.win.yml up -d 2>&1 | Out-Null
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[ERROR] 백엔드 시작 실패!" -ForegroundColor Red
+    Read-Host "계속하려면 Enter를 누르세요"
+    exit 1
+}
+
+# 프론트엔드 시작
+Write-Host "      프론트엔드 서비스 시작..." -ForegroundColor Gray
+docker-compose -f docker-compose.frontend.win.yml up -d 2>&1 | Out-Null
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "[ERROR] 프론트엔드 시작 실패!" -ForegroundColor Red
+    Read-Host "계속하려면 Enter를 누르세요"
+    exit 1
+}
+
+Write-Host "[OK] 서비스 시작 완료" -ForegroundColor Green
+
+$serviceEnd = Get-Date
+$serviceDuration = ($serviceEnd - $serviceStart).TotalSeconds
+Write-Host "[INFO] 서비스 시작 소요 시간: $([math]::Round($serviceDuration))초" -ForegroundColor Yellow
+Write-Host ""
+
+# 안정화 대기
+Write-Host "[5/5] 서비스 안정화 대기 중... (10초)" -ForegroundColor White
+Start-Sleep -Seconds 10
+Write-Host ""
+
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "[완료] 모든 서비스가 시작되었습니다!" -ForegroundColor Green
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host ""
+Write-Host "[DATABASE] PostgreSQL: http://39.117.244.52:11132" -ForegroundColor White
+Write-Host "[BACKEND]  Node.js API: http://localhost:8080/api" -ForegroundColor White
+Write-Host "[FRONTEND] Next.js:     http://localhost:9771" -ForegroundColor White
+Write-Host ""
+Write-Host "[서비스 상태 확인]" -ForegroundColor Yellow
+Write-Host "  docker-compose -f docker-compose.backend.win.yml ps" -ForegroundColor Gray
+Write-Host "  docker-compose -f docker-compose.frontend.win.yml ps" -ForegroundColor Gray
+Write-Host ""
+Write-Host "[로그 확인]" -ForegroundColor Yellow
+Write-Host "  백엔드:   docker-compose -f docker-compose.backend.win.yml logs -f" -ForegroundColor Gray
+Write-Host "  프론트엔드: docker-compose -f docker-compose.frontend.win.yml logs -f" -ForegroundColor Gray
+Write-Host ""
+Write-Host "[서비스 중지]" -ForegroundColor Yellow
+Write-Host "  .\scripts\dev\stop-all.ps1" -ForegroundColor Gray
+Write-Host ""
+
+# 종료 시간 계산
+$endTime = Get-Date
+$endTimeFormatted = $endTime.ToString("yyyy-MM-dd HH:mm:ss")
+$totalDuration = ($endTime - $startTime).TotalSeconds
+$minutes = [math]::Floor($totalDuration / 60)
+$seconds = [math]::Round($totalDuration % 60)
+
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "[종료 시간] $endTimeFormatted" -ForegroundColor Yellow
+Write-Host "[총 소요 시간] ${minutes}분 ${seconds}초" -ForegroundColor Yellow
+Write-Host "  - 빌드: $([math]::Round($parallelDuration))초" -ForegroundColor Gray
+Write-Host "  - 서비스 시작: $([math]::Round($serviceDuration))초" -ForegroundColor Gray
+Write-Host "============================================" -ForegroundColor Cyan
+
+Read-Host "계속하려면 Enter를 누르세요"
diff --git a/scripts/dev/stop-all.bat b/scripts/dev/stop-all.bat
new file mode 100644
index 00000000..fa378988
--- /dev/null
+++ b/scripts/dev/stop-all.bat
@@ -0,0 +1,30 @@
+@echo off
+chcp 65001 >nul
+
+REM 스크립트가 있는 디렉토리에서 루트로 이동
+cd /d "%~dp0\..\.."
+
+echo ============================================
+echo WACE 솔루션 - 전체 서비스 중지
+echo ============================================
+echo.
+
+echo 🛑 백엔드 서비스 중지 중...
+docker-compose -f docker-compose.backend.win.yml down -v 2>nul
+echo ✅ 백엔드 서비스 중지 완료
+echo.
+
+echo 🛑 프론트엔드 서비스 중지 중...
+docker-compose -f docker-compose.frontend.win.yml down -v 2>nul
+echo ✅ 프론트엔드 서비스 중지 완료
+echo.
+
+echo 🧹 네트워크 정리 중...
+docker network rm pms-network 2>nul
+echo.
+
+echo ============================================
+echo 🎉 모든 서비스가 중지되었습니다!
+echo ============================================
+
+pause
diff --git a/scripts/dev/stop-all.ps1 b/scripts/dev/stop-all.ps1
new file mode 100644
index 00000000..5f2dc2c4
--- /dev/null
+++ b/scripts/dev/stop-all.ps1
@@ -0,0 +1,33 @@
+# WACE 솔루션 - 전체 서비스 중지 - PowerShell 버전
+# 실행 방법: powershell -ExecutionPolicy Bypass -File .\scripts\dev\stop-all.ps1
+
+[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
+
+# 스크립트 위치에서 루트 디렉토리로 이동
+$scriptPath = Split-Path -Parent $MyInvocation.MyCommand.Definition
+Set-Location (Join-Path $scriptPath "..\..") 
+
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "WACE 솔루션 - 전체 서비스 중지" -ForegroundColor Cyan
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host ""
+
+Write-Host "🛑 백엔드 서비스 중지 중..." -ForegroundColor Yellow
+docker-compose -f docker-compose.backend.win.yml down -v 2>$null
+Write-Host "✅ 백엔드 서비스 중지 완료" -ForegroundColor Green
+Write-Host ""
+
+Write-Host "🛑 프론트엔드 서비스 중지 중..." -ForegroundColor Yellow
+docker-compose -f docker-compose.frontend.win.yml down -v 2>$null
+Write-Host "✅ 프론트엔드 서비스 중지 완료" -ForegroundColor Green
+Write-Host ""
+
+Write-Host "🧹 네트워크 정리 중..." -ForegroundColor Yellow
+docker network rm pms-network 2>$null
+Write-Host ""
+
+Write-Host "============================================" -ForegroundColor Cyan
+Write-Host "🎉 모든 서비스가 중지되었습니다!" -ForegroundColor Green
+Write-Host "============================================" -ForegroundColor Cyan
+
+Read-Host "계속하려면 Enter를 누르세요"
diff --git a/working_layout.json b/working_layout.json
new file mode 100644
index 00000000..d2e241a2
Binary files /dev/null and b/working_layout.json differ