diff --git a/backend-node/src/controllers/fileController.ts b/backend-node/src/controllers/fileController.ts
index d4e8d0cf..a648a4f9 100644
--- a/backend-node/src/controllers/fileController.ts
+++ b/backend-node/src/controllers/fileController.ts
@@ -793,8 +793,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,
diff --git a/backend-node/src/controllers/screenGroupController.ts b/backend-node/src/controllers/screenGroupController.ts
index df0c4f4d..32ce60c3 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
@@ -1737,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,
@@ -1750,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]);
@@ -2118,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/routes/fileRoutes.ts b/backend-node/src/routes/fileRoutes.ts
index 64f02d14..4514e37f 100644
--- a/backend-node/src/routes/fileRoutes.ts
+++ b/backend-node/src/routes/fileRoutes.ts
@@ -24,6 +24,13 @@ const router = Router();
  */
 router.get("/public/:token", getFileByToken);
 
+/**
+ * @route GET /api/files/preview/:objid
+ * @desc 파일 미리보기 (이미지 등) - 공개 접근 허용
+ * @access Public
+ */
+router.get("/preview/:objid", previewFile);
+
 // 모든 파일 API는 인증 필요
 router.use(authenticateToken);
 
@@ -64,12 +71,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/services/screenManagementService.ts b/backend-node/src/services/screenManagementService.ts
index 572f2443..37a21a0a 100644
--- a/backend-node/src/services/screenManagementService.ts
+++ b/backend-node/src/services/screenManagementService.ts
@@ -731,6 +731,14 @@ export class ScreenManagementService {
          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 });
     });
   }
 
@@ -5110,18 +5118,6 @@ export class ScreenManagementService {
     console.log(
       `V2 레이아웃 로드 완료: ${layout.layout_data?.components?.length || 0}개 컴포넌트`,
     );
-    
-    // 🐛 디버깅: finished_timeline의 fieldMapping 확인
-    const splitPanel = layout.layout_data?.components?.find((c: any) => 
-      c.url?.includes("v2-split-panel-layout")
-    );
-    const finishedTimeline = splitPanel?.overrides?.rightPanel?.components?.find(
-      (c: any) => c.id === "finished_timeline"
-    );
-    if (finishedTimeline) {
-      console.log("🐛 [Backend] finished_timeline fieldMapping:", JSON.stringify(finishedTimeline.componentConfig?.fieldMapping));
-    }
-    
     return layout.layout_data;
   }
 
@@ -5161,20 +5157,16 @@ export class ScreenManagementService {
       ...layoutData
     };
 
-    // SUPER_ADMIN인 경우 화면 정의의 company_code로 저장 (로드와 일관성 유지)
-    const saveCompanyCode = companyCode === "*" ? existingScreen.company_code : companyCode;
-    console.log(`저장할 company_code: ${saveCompanyCode} (원본: ${companyCode}, 화면 정의: ${existingScreen.company_code})`);
-
     // UPSERT (있으면 업데이트, 없으면 삽입)
     await 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()`,
-      [screenId, saveCompanyCode, JSON.stringify(dataToSave)],
+      [screenId, companyCode, JSON.stringify(dataToSave)],
     );
 
-    console.log(`V2 레이아웃 저장 완료 (company_code: ${saveCompanyCode})`);
+    console.log(`V2 레이아웃 저장 완료`);
   }
 }
 
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/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
index 42cd872b..411fdd1f 100644
--- a/docs/DDD1542/RESPONSIVE_GRID_SYSTEM_ARCHITECTURE.md
+++ b/docs/DDD1542/RESPONSIVE_GRID_SYSTEM_ARCHITECTURE.md
@@ -103,6 +103,162 @@
 - 분할 패널 반응형 처리
 ```
 
+### 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. 기술 결정
@@ -649,6 +805,10 @@ ALTER TABLE screen_layouts_v2_backup_20260130 RENAME TO screen_layouts_v2;
 - [ ] 태블릿 (768px, 1024px) 테스트
 - [ ] 모바일 (375px, 414px) 테스트
 - [ ] 분할 패널 화면 테스트
+- [ ] GridLayout 컴포넌트 포함 화면 테스트
+- [ ] FlexboxLayout 컴포넌트 포함 화면 테스트
+- [ ] TabsLayout 컴포넌트 포함 화면 테스트
+- [ ] 중첩 레이아웃 (GridLayout 안에 컴포넌트) 테스트
 
 ---
 
@@ -659,6 +819,8 @@ ALTER TABLE screen_layouts_v2_backup_20260130 RENAME TO screen_layouts_v2;
 | 마이그레이션 실패 | 높음 | 백업 테이블에서 즉시 롤백 |
 | 기존 화면 깨짐 | 중간 | `layoutMode` 없으면 기존 방식 사용 (폴백) |
 | 디자인 모드 혼란 | 낮음 | position/size 필드 유지 |
+| GridLayout 내부 깨짐 | 낮음 | 내부는 기존 방식 유지, 외부 배치만 변경 |
+| 중첩 레이아웃 문제 | 낮음 | 각 레이아웃 컴포넌트는 독립적으로 동작 |
 
 ---
 
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
index 7e1afcba..c60f1dfb 100644
--- a/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
+++ b/docs/SCREEN_COPY_V2_MIGRATION_PLAN.md
@@ -467,9 +467,9 @@ V2 전환 롤백 (필요시):
 - [x] copyScreens() - Legacy 제거, V2로 교체 ✅ 2026-01-28
 - [x] hasLayoutChangesV2() 함수 추가 ✅ 2026-01-28
 - [x] updateTabScreenReferences() V2 지원 추가 ✅ 2026-01-28
-- [ ] 단위 테스트 통과
-- [ ] 통합 테스트 통과
-- [ ] V2 전용 복제 동작 확인
+- [x] 단위 테스트 통과 ✅ 2026-01-30
+- [x] 통합 테스트 통과 ✅ 2026-01-30
+- [x] V2 전용 복제 동작 확인 ✅ 2026-01-30
 
 ### 9.3 Phase 2 완료 조건
 
@@ -522,3 +522,4 @@ V2 전환 롤백 (필요시):
 | 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-sales-order-modal-layout.json b/docs/v2-sales-order-modal-layout.json
new file mode 100644
index 00000000..6c8287e0
--- /dev/null
+++ b/docs/v2-sales-order-modal-layout.json
@@ -0,0 +1,557 @@
+{
+  "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)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 828d1aca..0ce2bae5 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -238,7 +238,8 @@ function ScreenViewPage() {
                            compType?.includes("select") || 
                            compType?.includes("textarea") ||
                            compType?.includes("v2-input") ||
-                           compType?.includes("v2-select");
+                           compType?.includes("v2-select") ||
+                           compType?.includes("v2-media"); // 🆕 미디어 컴포넌트 추가
         const hasColumnName = !!(comp as any).columnName;
         return isInputType && hasColumnName;
       });
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 68fa0cb1..dbb1e923 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;
@@ -322,12 +323,28 @@ 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) {
+        console.log("📦 V2 레이아웃 없음, 기존 API로 fallback");
+        layoutData = await screenApi.getLayout(screenId);
+      }
+
       // 🆕 URL 파라미터 확인 (수정 모드)
       if (typeof window !== "undefined") {
         const urlParams = new URLSearchParams(window.location.search);
@@ -604,23 +621,135 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                     transformOrigin: "center center",
                   }}
                 >
-                  {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);
+                    
+                    console.log('🔍 [Y조정] visibleRanges:', visibleRanges.filter(r => r.bottom - r.y > 50).map(r => `${r.y}~${r.bottom}`));
+                    console.log('🔍 [Y조정] hiddenGaps:', sortedGaps);
+                    
+                    // 각 컴포넌트의 y 조정값 계산 함수
+                    const getYOffset = (compY: number, compId?: string) => {
+                      let offset = 0;
+                      for (const { bottom, gap } of sortedGaps) {
+                        // 컴포넌트가 숨겨진 영역 아래에 있으면 그 빈 공간만큼 위로 이동
+                        if (compY > bottom) {
+                          offset += gap;
+                        }
+                      }
+                      if (offset > 0 && compId) {
+                        console.log(`🔍 [Y조정] ${compId}: y=${compY} → ${compY - offset} (offset=${offset})`);
+                      }
+                      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 +781,8 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         companyCode={user?.companyCode}
                       />
                     );
-                  })}
+                  });
+                  })()}
                 </div>
               </TableOptionsProvider>
             </ActiveTabProvider>
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 735fb53c..8dc5da89 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,26 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
       try {
         // 🆕 리피터 데이터(배열)를 마스터 저장에서 제외 (V2Repeater가 별도로 저장)
+        // 단, v2-media 컴포넌트의 파일 배열(objid 배열)은 포함
         const masterFormData: Record<string, any> = {};
+        
+        // v2-media 컴포넌트의 columnName 목록 수집
+        const mediaColumnNames = new Set(
+          allComponents
+            .filter((c: any) => c.componentType === "v2-media" || c.url?.includes("v2-media"))
+            .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}개 항목`);
           }
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index c73e6598..192bd16c 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -1623,55 +1623,16 @@ export default function ScreenDesigner({ selectedScreen, onBackToList, onScreenU
     };
   }, [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],
   );
 
   // 해상도 변경 핸들러 (컴포넌트 크기/위치 유지)
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 d7f814d3..c6204af6 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -147,6 +147,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);
@@ -170,6 +183,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(
@@ -266,24 +283,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);
@@ -305,6 +324,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);
@@ -434,9 +460,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]) => {
@@ -444,11 +488,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) {
@@ -539,10 +586,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({
@@ -552,7 +608,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/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index be0d265b..a843d710 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -822,8 +822,12 @@ 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 || "")}
+                  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>
@@ -868,9 +872,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 +887,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 +900,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}
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/widgets/TabsWidget.tsx b/frontend/components/screen/widgets/TabsWidget.tsx
index baf047ec..8b48c461 100644
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -66,6 +66,33 @@ export function TabsWidget({
   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>>({});
diff --git a/frontend/components/v2/V2Biz.tsx b/frontend/components/v2/V2Biz.tsx
index 2ce97050..d720669e 100644
--- a/frontend/components/v2/V2Biz.tsx
+++ b/frontend/components/v2/V2Biz.tsx
@@ -318,7 +318,7 @@ export const V2Biz = forwardRef<HTMLDivElement, V2BizProps>(
         className="flex flex-col"
         style={{
           width: componentWidth,
-          height: componentHeight,
+          // 🔧 높이는 컨테이너가 아닌 입력 필드에만 적용 (라벨 높이는 별도)
         }}
       >
         {showLabel && (
@@ -335,7 +335,12 @@ export const V2Biz = forwardRef<HTMLDivElement, V2BizProps>(
             {label}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
+        <div 
+          className="min-h-0"
+          style={{
+            height: componentHeight,
+          }}
+        >
           {renderBiz()}
         </div>
       </div>
diff --git a/frontend/components/v2/V2Date.tsx b/frontend/components/v2/V2Date.tsx
index c825b1bf..f3102d5a 100644
--- a/frontend/components/v2/V2Date.tsx
+++ b/frontend/components/v2/V2Date.tsx
@@ -460,7 +460,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
       className="flex flex-col"
       style={{
         width: componentWidth,
-        height: componentHeight,
+        // 🔧 높이는 컨테이너가 아닌 입력 필드에만 적용 (라벨 높이는 별도)
       }}
     >
       {showLabel && (
@@ -478,7 +478,14 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
           {required && <span className="ml-0.5 text-orange-500">*</span>}
         </Label>
       )}
-      <div className="min-h-0 flex-1">{renderDatePicker()}</div>
+      <div 
+        className="min-h-0"
+        style={{
+          height: componentHeight,
+        }}
+      >
+        {renderDatePicker()}
+      </div>
     </div>
   );
 });
diff --git a/frontend/components/v2/V2Hierarchy.tsx b/frontend/components/v2/V2Hierarchy.tsx
index 17a3e141..23e4fd85 100644
--- a/frontend/components/v2/V2Hierarchy.tsx
+++ b/frontend/components/v2/V2Hierarchy.tsx
@@ -469,7 +469,7 @@ export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
         className="flex flex-col"
         style={{
           width: componentWidth,
-          height: componentHeight,
+          // 🔧 높이는 컨테이너가 아닌 입력 필드에만 적용 (라벨 높이는 별도)
         }}
       >
         {showLabel && (
@@ -487,7 +487,12 @@ export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
+        <div 
+          className="min-h-0"
+          style={{
+            height: componentHeight,
+          }}
+        >
           {renderHierarchy()}
         </div>
       </div>
diff --git a/frontend/components/v2/V2Input.tsx b/frontend/components/v2/V2Input.tsx
index edaefffb..c19b3820 100644
--- a/frontend/components/v2/V2Input.tsx
+++ b/frontend/components/v2/V2Input.tsx
@@ -361,8 +361,17 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   const [isGeneratingNumbering, setIsGeneratingNumbering] = useState(false);
   const hasGeneratedNumberingRef = useRef(false);
 
-  // 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;
@@ -445,8 +454,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> = {};
@@ -458,12 +469,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") {
@@ -524,9 +536,12 @@ 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 호출을 위해)
@@ -618,7 +633,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 (
@@ -799,7 +814,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       className="flex flex-col"
       style={{
         width: componentWidth,
-        height: componentHeight,
+        // 🔧 높이는 컨테이너가 아닌 입력 필드에만 적용 (라벨 높이는 별도)
       }}
     >
       {showLabel && (
@@ -817,7 +832,14 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           {required && <span className="ml-0.5 text-orange-500">*</span>}
         </Label>
       )}
-      <div className="min-h-0 flex-1">{renderInput()}</div>
+      <div 
+        className="min-h-0"
+        style={{
+          height: componentHeight,
+        }}
+      >
+        {renderInput()}
+      </div>
     </div>
   );
 });
diff --git a/frontend/components/v2/V2Media.tsx b/frontend/components/v2/V2Media.tsx
index f7359962..6a154863 100644
--- a/frontend/components/v2/V2Media.tsx
+++ b/frontend/components/v2/V2Media.tsx
@@ -10,12 +10,13 @@
  * - audio: 오디오
  */
 
-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 { 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 } from "lucide-react";
+import { apiClient } from "@/lib/api/client";
 
 /**
  * 파일 크기 포맷팅
@@ -57,15 +58,42 @@ const FileUploader = forwardRef<HTMLDivElement, {
   accept = "*", 
   maxSize = 10485760, // 10MB
   disabled,
-  uploadEndpoint = "/api/upload",
+  uploadEndpoint = "/files/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 [localPreviewUrls, setLocalPreviewUrls] = useState<string[]>([]);
 
-  const files = Array.isArray(value) ? value : value ? [value] : [];
+  // objid를 미리보기 URL로 변환
+  const toPreviewUrl = (val: any): string => {
+    if (!val) return "";
+    const strVal = String(val);
+    if (strVal.startsWith("/") || strVal.startsWith("http")) return strVal;
+    if (/^\d+$/.test(strVal)) return `/api/files/preview/${strVal}`;
+    return strVal;
+  };
+
+  // value를 URL 형태의 files 배열로 변환
+  const rawFiles = Array.isArray(value) ? value : value ? [value] : [];
+  const filesFromValue = rawFiles.map(toPreviewUrl).filter(Boolean);
+  
+  console.log("[FileUploader] value:", value, "rawFiles:", rawFiles, "filesFromValue:", filesFromValue, "localPreviewUrls:", localPreviewUrls);
+  
+  // value가 변경되면 로컬 상태 초기화
+  useEffect(() => {
+    if (filesFromValue.length > 0) {
+      setLocalPreviewUrls([]);
+    }
+  }, [filesFromValue.length]);
+  
+  // 최종 files: value에서 온 파일 + 로컬 미리보기 (중복 제거)
+  const files = filesFromValue.length > 0 ? filesFromValue : localPreviewUrls;
+  
+  console.log("[FileUploader] final files:", files);
 
   // 파일 선택 핸들러
   const handleFileSelect = useCallback(async (selectedFiles: FileList | null) => {
@@ -89,36 +117,53 @@ const FileUploader = forwardRef<HTMLDivElement, {
 
       for (const file of fileArray) {
         const formData = new FormData();
-        formData.append("file", file);
+        formData.append("files", file);
 
-        const response = await fetch(uploadEndpoint, {
-          method: "POST",
-          body: formData,
+        const response = await apiClient.post(uploadEndpoint, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
         });
 
-        if (!response.ok) {
-          throw new Error(`업로드 실패: ${file.name}`);
-        }
-
-        const data = await response.json();
-        if (data.success && data.url) {
+        const data = response.data;
+        console.log("[FileUploader] 업로드 응답:", data);
+        // 백엔드 응답: { success: true, files: [{ filePath, objid, ... }] }
+        if (data.success && data.files && data.files.length > 0) {
+          const uploadedFile = data.files[0];
+          const objid = String(uploadedFile.objid);
+          uploadedUrls.push(objid);
+          // 즉시 미리보기를 위해 로컬 상태에 URL 저장
+          const previewUrl = `/api/files/preview/${objid}`;
+          setLocalPreviewUrls(prev => multiple ? [...prev, previewUrl] : [previewUrl]);
+        } else if (data.objid) {
+          const objid = String(data.objid);
+          uploadedUrls.push(objid);
+          const previewUrl = `/api/files/preview/${objid}`;
+          setLocalPreviewUrls(prev => multiple ? [...prev, previewUrl] : [previewUrl]);
+        } else if (data.url) {
           uploadedUrls.push(data.url);
+          setLocalPreviewUrls(prev => multiple ? [...prev, data.url] : [data.url]);
         } else if (data.filePath) {
           uploadedUrls.push(data.filePath);
+          setLocalPreviewUrls(prev => multiple ? [...prev, data.filePath] : [data.filePath]);
         }
       }
 
       if (multiple) {
-        onChange?.([...files, ...uploadedUrls]);
+        const newValue = [...filesFromValue, ...uploadedUrls];
+        console.log("[FileUploader] onChange called with:", newValue);
+        onChange?.(newValue);
       } else {
-        onChange?.(uploadedUrls[0] || "");
+        const newValue = uploadedUrls[0] || "";
+        console.log("[FileUploader] onChange called with:", newValue);
+        onChange?.(newValue);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "업로드 중 오류가 발생했습니다");
     } finally {
       setIsUploading(false);
     }
-  }, [files, multiple, maxSize, uploadEndpoint, onChange]);
+  }, [filesFromValue, multiple, maxSize, uploadEndpoint, onChange]);
 
   // 드래그 앤 드롭 핸들러
   const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -139,21 +184,33 @@ const FileUploader = forwardRef<HTMLDivElement, {
 
   // 파일 삭제 핸들러
   const handleRemove = useCallback((index: number) => {
-    const newFiles = files.filter((_, i) => i !== index);
+    // 로컬 미리보기도 삭제
+    setLocalPreviewUrls(prev => prev.filter((_, i) => i !== index));
+    // value에서 온 파일 삭제
+    const newFiles = filesFromValue.filter((_, i) => i !== index);
     onChange?.(multiple ? newFiles : "");
-  }, [files, multiple, onChange]);
+  }, [filesFromValue, multiple, onChange]);
+
+  // 첫 번째 파일이 이미지인지 확인
+  const firstFile = files[0];
+  const isFirstFileImage = firstFile && (
+    /\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i.test(firstFile) || 
+    firstFile.includes("/preview/") || 
+    firstFile.includes("/api/files/preview/")
+  );
 
   return (
-    <div ref={ref} className={cn("space-y-3", className)}>
-      {/* 업로드 영역 */}
+    <div ref={ref} className={cn("flex flex-col h-full w-full gap-2", className)}>
+      {/* 메인 업로드 박스 - 이미지가 있으면 박스 안에 표시 */}
       <div
         className={cn(
-          "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+          "relative flex flex-1 flex-col items-center justify-center border-2 border-dashed rounded-lg text-center transition-colors overflow-hidden min-h-[120px]",
           isDragging && "border-primary bg-primary/5",
           disabled && "opacity-50 cursor-not-allowed",
-          !disabled && "cursor-pointer hover:border-primary/50"
+          !disabled && !firstFile && "cursor-pointer hover:border-primary/50",
+          firstFile && "border-solid border-muted"
         )}
-        onClick={() => !disabled && inputRef.current?.click()}
+        onClick={() => !disabled && !firstFile && inputRef.current?.click()}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
@@ -168,13 +225,64 @@ const FileUploader = forwardRef<HTMLDivElement, {
           className="hidden"
         />
         
-        {isUploading ? (
-          <div className="flex flex-col items-center gap-2">
+        {firstFile ? (
+          // 파일이 있으면 박스 안에 표시
+          <div className="relative w-full h-full group flex items-center justify-center">
+            {isFirstFileImage ? (
+              // 이미지 미리보기
+              <img
+                src={firstFile}
+                alt="업로드된 이미지"
+                className="max-w-full max-h-full object-contain"
+              />
+            ) : (
+              // 일반 파일
+              <div className="flex flex-col items-center gap-2 p-4">
+                <File className="h-12 w-12 text-muted-foreground" />
+                <span className="text-sm text-muted-foreground truncate max-w-[200px]">
+                  {firstFile.split("/").pop()}
+                </span>
+              </div>
+            )}
+            {/* 호버 시 액션 버튼 */}
+            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+              {isFirstFileImage && (
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => { e.stopPropagation(); window.open(firstFile, "_blank"); }}
+                >
+                  <Eye className="h-4 w-4" />
+                </Button>
+              )}
+              <Button
+                variant="secondary"
+                size="icon"
+                className="h-8 w-8"
+                onClick={(e) => { e.stopPropagation(); inputRef.current?.click(); }}
+                disabled={disabled}
+              >
+                <Upload className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="destructive"
+                size="icon"
+                className="h-8 w-8"
+                onClick={(e) => { e.stopPropagation(); handleRemove(0); }}
+                disabled={disabled}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        ) : isUploading ? (
+          <div className="flex flex-col items-center gap-2 p-4">
             <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">
+          <div className="flex flex-col items-center gap-2 p-4">
             <Upload className="h-8 w-8 text-muted-foreground" />
             <div className="text-sm">
               <span className="font-medium text-primary">클릭</span>
@@ -193,26 +301,45 @@ const FileUploader = forwardRef<HTMLDivElement, {
         <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>
-          ))}
+      {/* 추가 파일 목록 (multiple일 때 2번째 파일부터) */}
+      {multiple && files.length > 1 && (
+        <div className="grid grid-cols-4 gap-2">
+          {files.slice(1).map((file, index) => {
+            const isImage = /\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i.test(file) || 
+                           file.includes("/preview/") || 
+                           file.includes("/api/files/preview/");
+            
+            return (
+              <div key={index} className="relative group rounded-lg overflow-hidden border aspect-square flex items-center justify-center bg-muted/50">
+                {isImage ? (
+                  <img src={file} alt={`파일 ${index + 2}`} className="w-full h-full object-cover" />
+                ) : (
+                  <File className="h-6 w-6 text-muted-foreground" />
+                )}
+                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <Button
+                    variant="destructive"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={() => handleRemove(index + 1)}
+                    disabled={disabled}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+          {/* 추가 버튼 */}
+          <div
+            className={cn(
+              "flex items-center justify-center border-2 border-dashed rounded-lg aspect-square cursor-pointer hover:border-primary/50",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+            onClick={() => !disabled && inputRef.current?.click()}
+          >
+            <Plus className="h-6 w-6 text-muted-foreground" />
+          </div>
         </div>
       )}
     </div>
@@ -241,7 +368,7 @@ const ImageUploader = forwardRef<HTMLDivElement, {
   maxSize = 10485760,
   preview = true,
   disabled,
-  uploadEndpoint = "/api/upload",
+  uploadEndpoint = "/files/upload",
   className 
 }, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -249,7 +376,18 @@ const ImageUploader = forwardRef<HTMLDivElement, {
   const [isUploading, setIsUploading] = useState(false);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
-  const images = Array.isArray(value) ? value : value ? [value] : [];
+  // objid를 미리보기 URL로 변환
+  const toPreviewUrl = (val: any): string => {
+    if (!val) return "";
+    const strVal = String(val);
+    if (strVal.startsWith("/") || strVal.startsWith("http")) return strVal;
+    if (/^\d+$/.test(strVal)) return `/api/files/preview/${strVal}`;
+    return strVal;
+  };
+
+  // value를 URL 형태의 images 배열로 변환
+  const rawImages = Array.isArray(value) ? value : value ? [value] : [];
+  const images = rawImages.map(toPreviewUrl).filter(Boolean);
 
   // 파일 선택 핸들러
   const handleFileSelect = useCallback(async (selectedFiles: FileList | null) => {
@@ -270,20 +408,30 @@ const ImageUploader = forwardRef<HTMLDivElement, {
         }
 
         const formData = new FormData();
-        formData.append("file", file);
+        formData.append("files", file);
 
-        const response = await fetch(uploadEndpoint, {
-          method: "POST",
-          body: formData,
-        });
+        try {
+          const response = await apiClient.post(uploadEndpoint, formData, {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          });
 
-        if (response.ok) {
-          const data = await response.json();
-          if (data.success && data.url) {
+          const data = response.data;
+          // 백엔드 응답: { success: true, files: [{ filePath, objid, ... }] }
+          if (data.success && data.files && data.files.length > 0) {
+            const uploadedFile = data.files[0];
+            // objid만 저장 (DB 저장용) - 표시는 V2MediaRenderer에서 URL로 변환
+            uploadedUrls.push(String(uploadedFile.objid));
+          } else if (data.objid) {
+            uploadedUrls.push(String(data.objid));
+          } else if (data.url) {
             uploadedUrls.push(data.url);
           } else if (data.filePath) {
             uploadedUrls.push(data.filePath);
           }
+        } catch (err) {
+          console.error("이미지 업로드 실패:", err);
         }
       }
 
@@ -304,82 +452,126 @@ const ImageUploader = forwardRef<HTMLDivElement, {
     onChange?.(multiple ? newImages : "");
   }, [images, multiple, onChange]);
 
+  // 첫 번째 이미지 (메인 박스에 표시)
+  const mainImage = images[0];
+  // 추가 이미지들 (multiple일 때만)
+  const additionalImages = multiple ? images.slice(1) : [];
+
   return (
-    <div ref={ref} className={cn("flex h-full w-full flex-col", className)}>
-      {/* 이미지 미리보기 */}
-      {preview && images.length > 0 && (
-        <div className={cn(
-          "grid gap-2 flex-1",
-          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 rounded-lg overflow-hidden border h-full">
+    <div ref={ref} className={cn("flex h-full w-full flex-col gap-2", className)}>
+      {/* 메인 업로드 박스 - 첫 번째 이미지가 있으면 박스 안에 표시 */}
+      <div
+        className={cn(
+          "relative flex flex-1 flex-col items-center justify-center border-2 border-dashed rounded-lg text-center transition-colors overflow-hidden",
+          isDragging && "border-primary bg-primary/5",
+          disabled && "opacity-50 cursor-not-allowed",
+          !disabled && !mainImage && "cursor-pointer hover:border-primary/50",
+          mainImage && "border-solid border-muted"
+        )}
+        onClick={() => !disabled && !mainImage && 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"
+        />
+        
+        {mainImage ? (
+          // 이미지가 있으면 박스 안에 표시
+          <div className="relative w-full h-full group">
+            <img
+              src={mainImage}
+              alt="업로드된 이미지"
+              className="w-full h-full object-contain"
+            />
+            {/* 호버 시 액션 버튼 */}
+            <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={(e) => { e.stopPropagation(); window.open(mainImage, "_blank"); }}
+              >
+                <Eye className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="secondary"
+                size="icon"
+                className="h-8 w-8"
+                onClick={(e) => { e.stopPropagation(); inputRef.current?.click(); }}
+                disabled={disabled}
+              >
+                <Upload className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="destructive"
+                size="icon"
+                className="h-8 w-8"
+                onClick={(e) => { e.stopPropagation(); handleRemove(0); }}
+                disabled={disabled}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        ) : isUploading ? (
+          <div className="flex items-center justify-center gap-2 p-4">
+            <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 flex-col items-center justify-center gap-2 p-4">
+            <Upload className="h-8 w-8 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              클릭 또는 파일을 드래그하세요
+            </span>
+            <span className="text-xs text-muted-foreground">
+              최대 {Math.round(maxSize / 1024 / 1024)} MB (*/*)
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* 추가 이미지 목록 (multiple일 때만) */}
+      {multiple && additionalImages.length > 0 && (
+        <div className="grid grid-cols-4 gap-2">
+          {additionalImages.map((src, index) => (
+            <div key={index} className="relative group rounded-lg overflow-hidden border aspect-square">
               <img
                 src={src}
-                alt={`이미지 ${index + 1}`}
-                className="w-full h-full object-contain"
+                alt={`이미지 ${index + 2}`}
+                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>
+              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                 <Button
                   variant="destructive"
                   size="icon"
-                  className="h-8 w-8"
-                  onClick={() => handleRemove(index)}
+                  className="h-6 w-6"
+                  onClick={() => handleRemove(index + 1)}
                   disabled={disabled}
                 >
-                  <Trash2 className="h-4 w-4" />
+                  <X className="h-3 w-3" />
                 </Button>
               </div>
             </div>
           ))}
-        </div>
-      )}
-
-      {/* 업로드 버튼 */}
-      {(!images.length || multiple) && (
-        <div
-          className={cn(
-            "flex flex-1 flex-col items-center justify-center 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
+            className={cn(
+              "flex items-center justify-center border-2 border-dashed rounded-lg aspect-square cursor-pointer hover:border-primary/50",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+            onClick={() => !disabled && inputRef.current?.click()}
+          >
+            <Plus className="h-6 w-6 text-muted-foreground" />
+          </div>
         </div>
       )}
     </div>
@@ -473,6 +665,22 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
 
     // config가 없으면 기본값 사용
     const config = configProp || { type: "image" as const };
+    
+    // objid를 미리보기 URL로 변환하는 함수
+    const toPreviewUrl = (val: any): string => {
+      if (!val) return "";
+      const strVal = String(val);
+      if (strVal.startsWith("/") || strVal.startsWith("http")) return strVal;
+      if (/^\d+$/.test(strVal)) return `/api/files/preview/${strVal}`;
+      return strVal;
+    };
+    
+    // value를 URL로 변환 (배열 또는 단일 값)
+    const convertedValue = Array.isArray(value)
+      ? value.map(toPreviewUrl)
+      : value ? toPreviewUrl(value) : value;
+    
+    console.log("[V2Media] original value:", value, "-> converted:", convertedValue, "onChange:", typeof onChange);
 
     // 타입별 미디어 컴포넌트 렌더링
     const renderMedia = () => {
@@ -483,7 +691,7 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
         case "file":
           return (
             <FileUploader
-              value={value}
+              value={convertedValue}
               onChange={onChange}
               multiple={config.multiple}
               accept={config.accept}
@@ -496,7 +704,7 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
         case "image":
           return (
             <ImageUploader
-              value={value}
+              value={convertedValue}
               onChange={onChange}
               multiple={config.multiple}
               accept={config.accept || "image/*"}
@@ -540,10 +748,10 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
       <div
         ref={ref}
         id={id}
-        className="flex h-full w-full flex-col"
+        className="flex w-full flex-col"
         style={{
           width: componentWidth,
-          height: componentHeight,
+          // 🔧 높이는 컨테이너가 아닌 컨텐츠 영역에만 적용 (라벨 높이는 별도)
         }}
       >
         {showLabel && (
@@ -561,7 +769,12 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>(
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="flex-1 min-h-0 h-full">
+        <div 
+          className="min-h-0"
+          style={{
+            height: componentHeight,
+          }}
+        >
           {renderMedia()}
         </div>
       </div>
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index 872945f9..1aeac80d 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -751,7 +751,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
         className="flex flex-col"
         style={{
           width: componentWidth,
-          height: componentHeight,
+          // 🔧 높이는 컨테이너가 아닌 입력 필드에만 적용 (라벨 높이는 별도)
         }}
       >
         {showLabel && (
@@ -769,7 +769,12 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="flex-1 min-h-0">
+        <div 
+          className="min-h-0"
+          style={{
+            height: componentHeight,
+          }}
+        >
           {renderSelect()}
         </div>
       </div>
diff --git a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
index 7092d4ab..056facac 100644
--- a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
@@ -194,6 +194,32 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
               </p>
             )}
           </div>
+          
+          {/* 기본값 설정 */}
+          {options.length > 0 && (
+            <div className="mt-3 pt-2 border-t">
+              <Label className="text-xs font-medium">기본값</Label>
+              <Select
+                value={config.defaultValue || "_none_"}
+                onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
+              >
+                <SelectTrigger className="h-8 text-xs mt-1">
+                  <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-[10px] text-muted-foreground mt-1">
+                화면 로드 시 자동 선택될 값
+              </p>
+            </div>
+          )}
         </div>
       )}
 
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 088b0644..9571abef 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -207,6 +207,88 @@ 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) {
+    console.log(`🔍 [조건부 렌더링] ${component.id}:`, {
+      conditionalConfig,
+      formData: props.formData,
+      hasFormData: !!props.formData
+    });
+  }
+  
+  if (conditionalConfig?.enabled && props.formData) {
+    const { field, operator, value, action } = conditionalConfig;
+    const fieldValue = props.formData[field];
+    
+    console.log(`🔍 [조건부 렌더링 평가] ${component.id}:`, {
+      field,
+      fieldValue,
+      operator,
+      expectedValue: value,
+      action
+    });
+    
+    // 조건 평가
+    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;
+    }
+    
+    // 액션에 따라 렌더링 결정
+    console.log(`🔍 [조건부 렌더링 결과] ${component.id}:`, {
+      conditionMet,
+      action,
+      shouldRender: action === "show" ? conditionMet : !conditionMet
+    });
+    
+    if (action === "show" && !conditionMet) {
+      // "show" 액션: 조건이 충족되지 않으면 렌더링하지 않음
+      console.log(`❌ [조건부 렌더링] ${component.id} 숨김 처리 (show 조건 불충족)`);
+      return null;
+    }
+    if (action === "hide" && conditionMet) {
+      // "hide" 액션: 조건이 충족되면 렌더링하지 않음
+      console.log(`❌ [조건부 렌더링] ${component.id} 숨김 처리 (hide 조건 충족)`);
+      return null;
+    }
+    // "enable"/"disable" 액션은 conditionalDisabled props로 전달
+  }
+
   // 🆕 모든 v2- 컴포넌트는 ComponentRegistry에서 통합 처리
   // (v2-input, v2-select, v2-repeat-container 등 모두 동일하게 처리)
 
@@ -343,7 +425,19 @@ 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;
+        
+        // 🔍 V2Media 디버깅
+        if (componentType === "v2-media") {
+          console.log("[DynamicComponentRenderer] v2-media:", {
+            componentId: component.id,
+            columnName: (component as any).columnName,
+            configColumnName: (component as any).componentConfig?.columnName,
+            fieldName,
+            formDataValue: props.formData?.[fieldName],
+            formDataKeys: props.formData ? Object.keys(props.formData) : []
+          });
+        }
 
         // 다중 레코드를 다루는 컴포넌트는 배열 데이터로 초기화
         let currentValue;
@@ -412,10 +506,12 @@ 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";
 
         const rendererProps = {
           component,
@@ -430,9 +526,21 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           componentConfig: component.componentConfig,
           // componentConfig의 모든 속성을 props로 spread (tableName, displayField 등)
           ...(component.componentConfig || {}),
+          // 🆕 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,
@@ -440,7 +548,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, // 🆕 화면 정보
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index 4aa4d930..7c6470fa 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -654,11 +654,11 @@ 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 +667,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 +677,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 +765,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,6 +788,7 @@ 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",
                               selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
@@ -806,6 +808,7 @@ 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",
                               selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
@@ -818,9 +821,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/simple-repeater-table/SimpleRepeaterTableComponent.tsx b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
index 564ba780..78e58bfe 100644
--- a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
@@ -684,13 +684,13 @@ export function SimpleRepeaterTableComponent({
           <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="px-4 py-2 text-left font-medium text-muted-foreground w-12">
                   #
                 </th>
               )}
               {columns.map((col) => (
                 <th
-                  key={col.field}
+                  key={`header-${col.field}`}
                   className="px-4 py-2 text-left font-medium text-muted-foreground"
                   style={{ width: col.width }}
                 >
@@ -699,7 +699,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="px-4 py-2 text-left font-medium text-muted-foreground w-20">
                   삭제
                 </th>
               )}
@@ -707,8 +707,9 @@ export function SimpleRepeaterTableComponent({
           </thead>
           <tbody className="bg-background">
             {value.length === 0 ? (
-              <tr>
+              <tr key="empty-row">
                 <td
+                  key="empty-cell"
                   colSpan={totalColumns}
                   className="px-4 py-8 text-center text-muted-foreground"
                 >
@@ -724,19 +725,19 @@ export function SimpleRepeaterTableComponent({
               </tr>
             ) : (
               value.map((row, rowIndex) => (
-                <tr key={rowIndex} className="border-t hover:bg-accent/50">
+                <tr key={`row-${rowIndex}`} className="border-t hover:bg-accent/50">
                   {showRowNumber && (
-                    <td className="px-4 py-2 text-center text-muted-foreground">
+                    <td key={`rownum-${rowIndex}`} className="px-4 py-2 text-center text-muted-foreground">
                       {rowIndex + 1}
                     </td>
                   )}
                   {columns.map((col) => (
-                    <td key={col.field} className="px-2 py-1">
+                    <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"
diff --git a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
index 1ac3f547..83a7771d 100644
--- a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
@@ -641,19 +641,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. 커스텀 메시지가 있고
@@ -1103,10 +1101,28 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       const screenContextFormData = screenContext?.formData || {};
       const propsFormData = formData || {};
 
+      // 🔧 디버그: formData 소스 확인
+      console.log("🔍 [v2-button-primary] formData 소스 확인:", {
+        propsFormDataKeys: Object.keys(propsFormData),
+        screenContextFormDataKeys: Object.keys(screenContextFormData),
+        propsHasCompanyImage: "company_image" in propsFormData,
+        propsHasCompanyLogo: "company_logo" in propsFormData,
+        screenHasCompanyImage: "company_image" in screenContextFormData,
+        screenHasCompanyLogo: "company_logo" in screenContextFormData,
+      });
+
       // 병합: splitPanelParentData를 기본으로, props.formData, screenContext.formData 순으로 오버라이드
       // (일반 폼 필드는 props.formData, RepeaterFieldGroup은 screenContext.formData에 있음)
       let effectiveFormData = { ...propsFormData, ...screenContextFormData };
 
+      console.log("🔍 [v2-button-primary] effectiveFormData 병합 결과:", {
+        keys: Object.keys(effectiveFormData),
+        hasCompanyImage: "company_image" in effectiveFormData,
+        hasCompanyLogo: "company_logo" in effectiveFormData,
+        companyImageValue: effectiveFormData.company_image,
+        companyLogoValue: effectiveFormData.company_logo,
+      });
+
       // 분할 패널 우측이고 formData가 비어있으면 splitPanelParentData 사용
       if (splitPanelPosition === "right" && Object.keys(effectiveFormData).length === 0 && splitPanelParentData) {
         effectiveFormData = { ...splitPanelParentData };
diff --git a/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx b/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
index 99bbc5e6..0cfd5393 100644
--- a/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
+++ b/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx
@@ -22,7 +22,32 @@ export class V2MediaRenderer extends AutoRegisteringComponentRenderer {
     const tableName = component.tableName || this.props.tableName;
 
     // formData에서 현재 값 가져오기
-    const currentValue = formData?.[columnName] ?? component.value ?? "";
+    const rawValue = formData?.[columnName] ?? component.value ?? "";
+    
+    // objid를 미리보기 URL로 변환하는 함수 (number/string 모두 처리)
+    const convertToPreviewUrl = (val: any): string => {
+      if (val === null || val === undefined || val === "") return "";
+      
+      // number면 string으로 변환
+      const strVal = String(val);
+      
+      // 이미 URL 형태면 그대로 반환
+      if (strVal.startsWith("/") || strVal.startsWith("http")) return strVal;
+      
+      // 숫자로만 이루어진 문자열이면 objid로 간주하고 미리보기 URL 생성
+      if (/^\d+$/.test(strVal)) {
+        return `/api/files/preview/${strVal}`;
+      }
+      
+      return strVal;
+    };
+    
+    // 배열 또는 단일 값 처리
+    const currentValue = Array.isArray(rawValue)
+      ? rawValue.map(convertToPreviewUrl)
+      : convertToPreviewUrl(rawValue);
+    
+    console.log("[V2Media] rawValue:", rawValue, "-> currentValue:", currentValue);
 
     // 값 변경 핸들러
     const handleChange = (value: any) => {
@@ -54,7 +79,7 @@ export class V2MediaRenderer extends AutoRegisteringComponentRenderer {
           preview: config.preview ?? true,
           maxSize: maxSizeBytes,
           accept: config.accept || this.getDefaultAccept(mediaType),
-          uploadEndpoint: config.uploadEndpoint || "/api/upload",
+          uploadEndpoint: config.uploadEndpoint || "/files/upload",
         }}
         style={component.style}
         size={component.size}
diff --git a/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx b/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
index 5fbdfcf7..16469e85 100644
--- a/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
+++ b/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
@@ -20,8 +20,20 @@ export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
     const columnName = component.columnName;
     const tableName = component.tableName || this.props.tableName;
 
-    // formData에서 현재 값 가져오기
-    const currentValue = formData?.[columnName] ?? component.value ?? "";
+    // formData에서 현재 값 가져오기 (기본값 지원)
+    const defaultValue = config.defaultValue || "";
+    let currentValue = formData?.[columnName] ?? component.value ?? "";
+    
+    // 🆕 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) => {
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 ae77e105..3d9cd552 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -1676,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;
 
@@ -1686,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("✅ 수정 모달 열기:", {
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 0798b00e..b1d66eea 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -484,6 +484,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초 내 재호출 시 무시
@@ -524,6 +533,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,
@@ -538,6 +555,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) {
@@ -668,6 +692,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);
     }
 
@@ -3015,8 +3043,12 @@ 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: {
@@ -3026,19 +3058,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;
   }
@@ -3227,8 +3258,7 @@ export class ButtonActionExecutor {
 
       window.dispatchEvent(modalEvent);
 
-      // 성공 메시지 (간단하게)
-      toast.success(config.successMessage || "다음 단계로 진행합니다.");
+      // 모달 열기는 UI 전환이므로 성공 토스트를 표시하지 않음
 
       return true;
     } else {
@@ -7094,7 +7124,7 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
     modalSize: "md",
     passSelectedData: true,
     autoDetectDataSource: true,
-    successMessage: "다음 단계로 진행합니다.",
+    // 모달 열기는 UI 전환이므로 successMessage 제거
   },
   modal: {
     type: "modal",
diff --git a/frontend/lib/utils/layoutV2Converter.ts b/frontend/lib/utils/layoutV2Converter.ts
index fa7606b6..32360a73 100644
--- a/frontend/lib/utils/layoutV2Converter.ts
+++ b/frontend/lib/utils/layoutV2Converter.ts
@@ -183,13 +183,15 @@ 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 || {},
       // 기존 구조 호환을 위한 추가 필드
-      style: {},
       parentId: null,
       gridColumns: 12,
       gridRowIndex: 0,
@@ -231,14 +233,18 @@ 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;
 
     // 현재 설정에서 차이값만 추출
     const fullConfig = comp.componentConfig || {};