52 changed files with 2874 additions and 5732 deletions
--- a/.gitignore
+++ b/.gitignore
@ -191,7 +191,3 @@ mcp-task-queue/
 .cursor/rules/multi-agent-tester.mdc
 .cursor/rules/multi-agent-reviewer.mdc
 .cursor/rules/multi-agent-knowledge.mdc
 # 파이프라인 회고록 (자동 생성)
 docs/retrospectives/
 mes-architecture-guide.md
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@ -143,7 +143,6 @@ import processWorkStandardRoutes from "./routes/processWorkStandardRoutes"; //
 import aiAssistantProxy from "./routes/aiAssistantProxy"; // AI 어시스턴트 API 프록시 (같은 포트로 서비스)
 import auditLogRoutes from "./routes/auditLogRoutes"; // 통합 변경 이력
 import moldRoutes from "./routes/moldRoutes"; // 금형 관리
 import shippingPlanRoutes from "./routes/shippingPlanRoutes"; // 출하계획 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@ -336,7 +335,6 @@ app.use("/api/category-tree", categoryTreeRoutes); // 카테고리 트리 (테
 app.use("/api/process-work-standard", processWorkStandardRoutes); // 공정 작업기준
 app.use("/api/audit-log", auditLogRoutes); // 통합 변경 이력
 app.use("/api/mold", moldRoutes); // 금형 관리
 app.use("/api/shipping-plan", shippingPlanRoutes); // 출하계획 관리
 app.use("/api", screenEmbeddingRoutes); // 화면 임베딩 및 데이터 전달
 app.use("/api/ai/v1", aiAssistantProxy); // AI 어시스턴트 (동일 서비스 내 프록시 → AI 서비스 포트)
 app.use("/api/vehicle", vehicleTripRoutes); // 차량 운행 이력 관리
--- a/backend-node/src/controllers/shippingPlanController.ts
+++ b/backend-node/src/controllers/shippingPlanController.ts
@ -1,459 +0,0 @@
 /**
 * 출하계획 컨트롤러
 *
 * 수주 마스터(sales_order_mng, INTEGER id) 또는
 * 수주 디테일(sales_order_detail, UUID id) 양쪽에서 호출 가능.
 *
 * ID 포맷으로 소스 테이블 자동 감지 → JOIN으로 완전한 정보 조합
 */
 import { Response } from "express";
 import { AuthenticatedRequest } from "../types/auth";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
 // UUID 포맷 감지 (하이픈 포함 36자)
 const isUUID = (val: string) =>
  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
    val
  );
 type SourceTable = "master" | "detail";
 interface NormalizedOrder {
  sourceId: string; // 원본 ID (master: 정수, detail: UUID)
  masterId: number | null;
  detailId: string | null;
  orderNo: string;
  partCode: string;
  partName: string;
  partnerCode: string;
  partnerName: string;
  dueDate: string;
  orderQty: number;
  shipQty: number;
  balanceQty: number;
 }
 // ─── 소스 테이블 감지 ───
 function detectSource(ids: string[]): SourceTable {
  if (ids.length === 0) return "detail";
  return ids.every((id) => isUUID(id)) ? "detail" : "master";
 }
 // ─── 수주 정보 정규화 (마스터/디테일 양쪽 JOIN) ───
 async function getNormalizedOrders(
  companyCode: string,
  ids: string[],
  source: SourceTable
 ): Promise<NormalizedOrder[]> {
  const pool = getPool();
  if (source === "detail") {
    // 디테일 기준 → 마스터 JOIN (order_no), 거래처 JOIN (customer_mng)
    // item_info는 LATERAL로 1건만 매칭 (item_number 중복 대비)
    const res = await pool.query(
      `SELECT
        d.id AS detail_id,
        m.id AS master_id,
        d.order_no,
        d.part_code,
        COALESCE(d.part_name, i.item_name, d.part_code) AS part_name,
        COALESCE(d.delivery_partner_code, m.partner_id, '') AS partner_code,
        COALESCE(c.customer_name, d.delivery_partner_code, m.partner_id, '') AS partner_name,
        COALESCE(d.due_date, m.due_date::text, '') AS due_date,
        COALESCE(NULLIF(d.qty,'')::numeric, m.order_qty, 0) AS order_qty,
        COALESCE(NULLIF(d.ship_qty,'')::numeric, m.ship_qty, 0) AS ship_qty,
        COALESCE(NULLIF(d.balance_qty,'')::numeric, m.balance_qty, 0) AS balance_qty
       FROM sales_order_detail d
       LEFT JOIN sales_order_mng m
         ON d.order_no = m.order_no AND d.company_code = m.company_code
       LEFT JOIN LATERAL (
         SELECT item_name FROM item_info
         WHERE item_number = d.part_code AND company_code = d.company_code
         LIMIT 1
       ) i ON true
       LEFT JOIN customer_mng c
         ON COALESCE(d.delivery_partner_code, m.partner_id) = c.customer_code
         AND d.company_code = c.company_code
       WHERE d.company_code = $1
         AND d.id = ANY($2::text[])`,
      [companyCode, ids]
    );
    return res.rows.map((r) => ({
      sourceId: r.detail_id,
      masterId: r.master_id,
      detailId: r.detail_id,
      orderNo: r.order_no || "",
      partCode: r.part_code || "",
      partName: r.part_name || "",
      partnerCode: r.partner_code || "",
      partnerName: r.partner_name || "",
      dueDate: r.due_date || "",
      orderQty: Number(r.order_qty || 0),
      shipQty: Number(r.ship_qty || 0),
      balanceQty: Number(r.balance_qty || 0),
    }));
  } else {
    // 마스터 기준 → 거래처 JOIN
    const numericIds = ids.map(Number).filter((n) => !isNaN(n));
    // item_info는 LATERAL로 1건만 매칭 (item_number 중복 대비)
    const res = await pool.query(
      `SELECT
        m.id AS master_id,
        NULL AS detail_id,
        m.order_no,
        m.part_code,
        COALESCE(m.part_name, i.item_name, m.part_code, '') AS part_name,
        COALESCE(m.partner_id, '') AS partner_code,
        COALESCE(c.customer_name, m.partner_id, '') AS partner_name,
        COALESCE(m.due_date::text, '') AS due_date,
        COALESCE(m.order_qty, 0) AS order_qty,
        COALESCE(m.ship_qty, 0) AS ship_qty,
        COALESCE(m.balance_qty, 0) AS balance_qty
       FROM sales_order_mng m
       LEFT JOIN LATERAL (
         SELECT item_name FROM item_info
         WHERE item_number = m.part_code AND company_code = m.company_code
         LIMIT 1
       ) i ON true
       LEFT JOIN customer_mng c
         ON m.partner_id = c.customer_code AND m.company_code = c.company_code
       WHERE m.company_code = $1
         AND m.id = ANY($2::int[])`,
      [companyCode, numericIds]
    );
    return res.rows.map((r) => ({
      sourceId: String(r.master_id),
      masterId: r.master_id,
      detailId: null,
      orderNo: r.order_no || "",
      partCode: r.part_code || "",
      partName: r.part_name || "",
      partnerCode: r.partner_code || "",
      partnerName: r.partner_name || "",
      dueDate: r.due_date || "",
      orderQty: Number(r.order_qty || 0),
      shipQty: Number(r.ship_qty || 0),
      balanceQty: Number(r.balance_qty || 0),
    }));
  }
 }
 // ─── 품목별 집계 + 기존 출하계획 조회 ───
 export async function getAggregate(req: AuthenticatedRequest, res: Response) {
  try {
    const companyCode = req.user!.companyCode;
    const { ids } = req.query;
    if (!ids) {
      return res
        .status(400)
        .json({ success: false, message: "ids 파라미터가 필요합니다" });
    }
    const idList = (ids as string).split(",").filter(Boolean);
    if (idList.length === 0) {
      return res
        .status(400)
        .json({ success: false, message: "유효한 ID가 필요합니다" });
    }
    const source = detectSource(idList);
    logger.info("출하계획 집계 조회", {
      companyCode,
      source,
      idCount: idList.length,
    });
    // 1) 정규화된 수주 정보 조회 (JOIN 포함)
    const orders = await getNormalizedOrders(companyCode, idList, source);
    if (orders.length === 0) {
      return res
        .status(404)
        .json({ success: false, message: "해당 수주를 찾을 수 없습니다" });
    }
    // 2) 품목별 그룹핑
    const partCodeMap = new Map<string, NormalizedOrder[]>();
    for (const order of orders) {
      const key = order.partCode || "UNKNOWN";
      if (!partCodeMap.has(key)) partCodeMap.set(key, []);
      partCodeMap.get(key)!.push(order);
    }
    const pool = getPool();
    const result: Record<string, any> = {};
    for (const [partCode, partOrders] of partCodeMap) {
      // 총수주잔량: 선택된 수주들의 balance_qty 합
      const totalBalance = partOrders.reduce(
        (s, o) => s + (o.balanceQty > 0 ? o.balanceQty : o.orderQty - o.shipQty),
        0
      );
      // 기존 출하계획 조회 (detail_id 또는 sales_order_id 기준)
      let existingPlans: any[] = [];
      if (source === "detail") {
        const planDetailIds = partOrders
          .map((o) => o.detailId)
          .filter(Boolean);
        if (planDetailIds.length > 0) {
          const planRes = await pool.query(
            `SELECT id, detail_id, sales_order_id, plan_qty, plan_date,
                    shipment_plan_no, status
             FROM shipment_plan
             WHERE company_code = $1 AND detail_id = ANY($2::text[])
             ORDER BY created_date DESC`,
            [companyCode, planDetailIds]
          );
          existingPlans = planRes.rows.map((r) => ({
            id: r.id,
            sourceId: r.detail_id,
            planQty: Number(r.plan_qty || 0),
            planDate: r.plan_date,
            shipmentPlanNo: r.shipment_plan_no,
            status: r.status,
          }));
        }
      } else {
        const planMasterIds = partOrders
          .map((o) => o.masterId)
          .filter((id): id is number => id != null);
        if (planMasterIds.length > 0) {
          const planRes = await pool.query(
            `SELECT id, sales_order_id, detail_id, plan_qty, plan_date,
                    shipment_plan_no, status
             FROM shipment_plan
             WHERE company_code = $1 AND sales_order_id = ANY($2::int[])
             ORDER BY created_date DESC`,
            [companyCode, planMasterIds]
          );
          existingPlans = planRes.rows.map((r) => ({
            id: r.id,
            sourceId: String(r.sales_order_id),
            planQty: Number(r.plan_qty || 0),
            planDate: r.plan_date,
            shipmentPlanNo: r.shipment_plan_no,
            status: r.status,
          }));
        }
      }
      const totalPlanQty = existingPlans.reduce((s, p) => s + p.planQty, 0);
      // 현재고
      const stockRes = await pool.query(
        `SELECT COALESCE(SUM(current_qty::numeric), 0) AS current_stock
         FROM inventory_stock
         WHERE company_code = $1 AND item_code = $2`,
        [companyCode, partCode]
      );
      const currentStock = Number(stockRes.rows[0]?.current_stock || 0);
      // 생산중수량
      const prodRes = await pool.query(
        `SELECT COALESCE(SUM(plan_qty - COALESCE(completed_qty, 0)), 0) AS in_production
         FROM production_plan_mng
         WHERE company_code = $1
           AND item_code = $2
           AND status IN ('in_progress', 'planned')`,
        [companyCode, partCode]
      );
      const inProductionQty = Number(prodRes.rows[0]?.in_production || 0);
      result[partCode] = {
        totalBalance,
        totalPlanQty,
        currentStock,
        availableStock: currentStock - totalPlanQty,
        inProductionQty,
        existingPlans,
        orders: partOrders.map((o) => ({
          sourceId: o.sourceId,
          orderNo: o.orderNo,
          partCode: o.partCode,
          partName: o.partName,
          partnerName: o.partnerName,
          dueDate: o.dueDate,
          orderQty: o.orderQty,
          shipQty: o.shipQty,
          balanceQty: o.balanceQty,
        })),
      };
    }
    logger.info("출하계획 집계 조회 완료", {
      companyCode,
      source,
      partCodes: Array.from(partCodeMap.keys()),
      orderCount: orders.length,
    });
    return res.json({ success: true, data: result, source });
  } catch (error: any) {
    logger.error("출하계획 집계 조회 실패", {
      error: error.message,
      stack: error.stack,
    });
    return res.status(500).json({ success: false, message: error.message });
  }
 }
 // ─── 출하계획 일괄 저장 ───
 export async function batchSave(req: AuthenticatedRequest, res: Response) {
  try {
    const companyCode = req.user!.companyCode;
    const userId = req.user!.userId;
    const { plans, source } = req.body;
    if (!Array.isArray(plans) || plans.length === 0) {
      return res.status(400).json({
        success: false,
        message: "저장할 출하계획 데이터가 필요합니다",
      });
    }
    // source 자동 감지 (프론트에서 전달, 또는 ID 포맷으로 추론)
    const detectedSource: SourceTable =
      source || detectSource(plans.map((p: any) => String(p.sourceId)));
    const pool = getPool();
    const client = await pool.connect();
    try {
      await client.query("BEGIN");
      const savedPlans = [];
      for (const plan of plans) {
        const { sourceId, planQty, planDate } = plan;
        if (!sourceId || !planQty || planQty <= 0) continue;
        const planDateValue = planDate || null;
        if (detectedSource === "detail") {
          // 디테일 소스: detail_id로 저장
          const detailCheck = await client.query(
            `SELECT d.id, d.order_no, d.part_code, d.qty, d.ship_qty, d.balance_qty,
                    m.id AS master_id
             FROM sales_order_detail d
             LEFT JOIN sales_order_mng m
               ON d.order_no = m.order_no AND d.company_code = m.company_code
             WHERE d.id = $1 AND d.company_code = $2`,
            [sourceId, companyCode]
          );
          if (detailCheck.rowCount === 0) {
            throw new Error(`수주상세 ${sourceId}을 찾을 수 없습니다`);
          }
          const detail = detailCheck.rows[0];
          const qty = Number(detail.qty || 0);
          const shipQty = Number(detail.ship_qty || 0);
          const balanceQty = detail.balance_qty
            ? Number(detail.balance_qty)
            : qty - shipQty;
          if (balanceQty > 0 && planQty > balanceQty) {
            throw new Error(
              `수주번호 ${detail.order_no}: 출하계획량(${planQty})이 미출하량(${balanceQty})을 초과합니다`
            );
          }
          const insertRes = await client.query(
            `INSERT INTO shipment_plan
              (company_code, detail_id, sales_order_id, plan_qty, plan_date, status, created_by)
             VALUES ($1, $2, $3, $4, COALESCE($5::date, CURRENT_DATE), 'READY', $6)
             RETURNING *`,
            [companyCode, sourceId, detail.master_id, planQty, planDateValue, userId]
          );
          savedPlans.push(insertRes.rows[0]);
          // detail ship_qty 업데이트
          await client.query(
            `UPDATE sales_order_detail
             SET ship_qty = (COALESCE(NULLIF(ship_qty,'')::numeric, 0) + $1)::text,
                 balance_qty = (COALESCE(NULLIF(qty,'')::numeric, 0)
                   - COALESCE(NULLIF(ship_qty,'')::numeric, 0) - $1)::text,
                 updated_date = NOW()
             WHERE id = $2 AND company_code = $3`,
            [planQty, sourceId, companyCode]
          );
        } else {
          // 마스터 소스: sales_order_id로 저장
          const masterId = Number(sourceId);
          const masterCheck = await client.query(
            `SELECT id, order_no, order_qty, ship_qty, balance_qty
             FROM sales_order_mng
             WHERE id = $1 AND company_code = $2`,
            [masterId, companyCode]
          );
          if (masterCheck.rowCount === 0) {
            throw new Error(`수주 ID ${masterId}을 찾을 수 없습니다`);
          }
          const master = masterCheck.rows[0];
          const balanceQty = Number(master.balance_qty || 0);
          if (balanceQty > 0 && planQty > balanceQty) {
            throw new Error(
              `수주번호 ${master.order_no}: 출하계획량(${planQty})이 미출하량(${balanceQty})을 초과합니다`
            );
          }
          const insertRes = await client.query(
            `INSERT INTO shipment_plan
              (company_code, sales_order_id, plan_qty, plan_date, status, created_by)
             VALUES ($1, $2, $3, COALESCE($4::date, CURRENT_DATE), 'READY', $5)
             RETURNING *`,
            [companyCode, masterId, planQty, planDateValue, userId]
          );
          savedPlans.push(insertRes.rows[0]);
          // 마스터 ship_qty 업데이트
          await client.query(
            `UPDATE sales_order_mng
             SET ship_qty = COALESCE(ship_qty, 0) + $1,
                 balance_qty = COALESCE(order_qty, 0) - COALESCE(ship_qty, 0) - $1,
                 updated_date = NOW()
             WHERE id = $2 AND company_code = $3`,
            [planQty, masterId, companyCode]
          );
        }
      }
      await client.query("COMMIT");
      logger.info("출하계획 일괄 저장 완료", {
        companyCode,
        source: detectedSource,
        savedCount: savedPlans.length,
        userId,
      });
      return res.json({
        success: true,
        message: `${savedPlans.length}건 저장 완료`,
        data: savedPlans,
      });
    } catch (txError) {
      await client.query("ROLLBACK");
      throw txError;
    } finally {
      client.release();
    }
  } catch (error: any) {
    logger.error("출하계획 일괄 저장 실패", {
      error: error.message,
      stack: error.stack,
    });
    return res.status(500).json({ success: false, message: error.message });
  }
 }
--- a/backend-node/src/routes/shippingPlanRoutes.ts
+++ b/backend-node/src/routes/shippingPlanRoutes.ts
@ -1,19 +0,0 @@
 /**
 * 출하계획 라우트
 */
 import { Router } from "express";
 import { authenticateToken } from "../middleware/authMiddleware";
 import * as shippingPlanController from "../controllers/shippingPlanController";
 const router = Router();
 router.use(authenticateToken);
 // 품목별 집계 + 기존 출하계획 조회
 router.get("/aggregate", shippingPlanController.getAggregate);
 // 출하계획 일괄 저장
 router.post("/batch", shippingPlanController.batchSave);
 export default router;
--- a/backend-node/src/services/nodeFlowExecutionService.ts
+++ b/backend-node/src/services/nodeFlowExecutionService.ts
@ -952,20 +952,13 @@ export class NodeFlowExecutionService {
      }
      const schemaPrefix = schema ? `${schema}.` : "";
      // WHERE 조건에서 field 값 조회를 위해 컨텍스트 데이터 전달
      // sourceData(저장된 폼 데이터) + buttonContext(인증 정보) 병합
      const contextForWhere = {
        ...(context.buttonContext || {}),
        ...(context.sourceData?.[0] || {}),
      };
      const whereResult = whereConditions
-        ? this.buildWhereClause(whereConditions, contextForWhere)
+        ? this.buildWhereClause(whereConditions)
        : { clause: "", values: [] };
      const sql = `SELECT * FROM ${schemaPrefix}${tableName} ${whereResult.clause}`;
-      logger.info(`📊 테이블 전체 데이터 조회 SQL: ${sql}`, { values: whereResult.values });
+      logger.info(`📊 테이블 전체 데이터 조회 SQL: ${sql}`);
      const result = await query(sql, whereResult.values);
--- a/docs/shipping-plan-editor-plan.md
+++ b/docs/shipping-plan-editor-plan.md
@ -1,176 +0,0 @@
 # 출하계획 동시 등록 컴포넌트 (v2-shipping-plan-editor) 설계서
 ## 개요
 수주 목록에서 다건 선택 후 "출하계획" 버튼 클릭 시 모달로 열리는 출하계획 일괄 등록 화면.
 기존 ScreenModal + modalScreenId 매커니즘을 활용하여, DB 기반 화면(screen_definitions)으로 구현한다.
 ## 핵심 기능
 1. 선택된 수주를 **품목(part_code) 기준으로 그룹핑**
 2. 그룹별 **5칸 집계 카드**: 총수주잔량, 총 출하계획량, 현재고, 가용재고, 생산중수량
 3. 그룹별 상세 테이블: 기존 계획(기존) + 신규 입력(신규) 구분 표시
 4. 출하계획량만 입력 → 확인 시 shipment_plan에 일괄 INSERT
 ## 테이블 관계
 ```
 sales_order_mng (수주)
  ├─ id (PK)
  ├─ part_code (품목코드) ← 그룹핑 기준
  ├─ part_name (품명)
  ├─ order_qty (수주수량)
  ├─ ship_qty (출하수량)
  ├─ balance_qty (잔량) = order_qty - ship_qty
  ├─ partner_id (거래처)
  └─ due_date (납기일)
 shipment_plan (출하계획)
  ├─ sales_order_id (FK → sales_order_mng.id)
  ├─ plan_qty (출하계획수량)
  ├─ plan_date (출하예정일)
  ├─ shipment_plan_no (자동 채번)
  └─ status (READY)
 inventory_stock (재고)
  ├─ item_code (품목코드)
  └─ current_qty (현재고)
 production_plan_mng (생산계획)
  ├─ item_code (품목코드)
  ├─ plan_qty (계획수량)
  ├─ completed_qty (완료수량)
  └─ status (진행중 = in_progress / planned)
 ```
 ## 집계 카드 데이터 소스
 | 카드 | 계산 방법 |
 |------|----------|
 | 총수주잔량 | SUM(sales_order_mng.balance_qty) WHERE part_code = ? |
 | 총 출하계획량 | SUM(shipment_plan.plan_qty) WHERE sales_order_id IN (해당 품목 수주들) |
 | 현재고 | SUM(inventory_stock.current_qty) WHERE item_code = part_code |
 | 가용재고 | 현재고 - 총 출하계획량 (기존 계획분) |
 | 생산중수량 | SUM(production_plan_mng.plan_qty - completed_qty) WHERE item_code = part_code AND status IN ('in_progress', 'planned') |
 ## 상세 테이블 컬럼
 | 컬럼 | 소스 | 편집 |
 |------|------|------|
 | 구분 | "기존" or "신규" | 읽기 전용 (배지) |
 | 수주번호 | sales_order_mng.order_no | 읽기 전용 |
 | 거래처 | sales_order_mng.partner_id (엔티티 조인) | 읽기 전용 |
 | 납기일 | sales_order_mng.due_date | 읽기 전용 |
 | 미출하 | sales_order_mng.balance_qty | 읽기 전용 |
 | 출하계획량 | 입력값 / shipment_plan.plan_qty | **입력 가능** |
 ## 데이터 흐름
 ```
 1. 수주 목록에서 체크박스 선택 → "출하계획" 버튼 클릭
 2. openScreenModal 이벤트 발생 (selectedData = 선택된 수주 배열)
 3. ScreenModal이 모달 화면 로드 (v2-shipping-plan-editor 컴포넌트)
 4. 컴포넌트가 groupedData (= selectedData) 수신
 5. part_code 기준 그룹핑
 6. 백엔드 API 호출: GET /api/shipping-plan/aggregate
   → 품목별 재고, 생산중수량, 기존 출하계획 조회
 7. UI 렌더링 (집계 카드 + 상세 테이블)
 8. 사용자가 출하계획량 입력
 9. 확인 버튼 → POST /api/shipping-plan/batch
   → shipment_plan INSERT + sales_order_mng.plan_ship_qty UPDATE
 ```
 ## 파일 구조
 ```
 frontend/lib/registry/components/v2-shipping-plan-editor/
  ├── index.ts                              # createComponentDefinition
  ├── ShippingPlanEditorRenderer.tsx         # AutoRegisteringComponentRenderer
  ├── ShippingPlanEditorComponent.tsx        # 메인 UI 컴포넌트
  └── types.ts                              # 타입 정의
 frontend/lib/api/
  └── shipping.ts                           # API 클라이언트 함수
 backend-node/src/
  ├── controllers/shippingPlanController.ts  # API 핸들러
  └── routes/shippingPlanRoutes.ts          # 라우터
 ```
 ## 백엔드 API
 ### GET /api/shipping-plan/aggregate
 품목별 집계 + 기존 출하계획 조회
 Request: `?partCodes=ITEM001,SEAL-100&orderIds=172,175,178`
 Response:
 ```json
 {
  "success": true,
  "data": {
    "ITEM001": {
      "totalBalance": 1700,
      "totalPlanQty": 500,
      "currentStock": 1000,
      "availableStock": 500,
      "inProductionQty": 300,
      "existingPlans": [
        { "id": 76, "salesOrderId": 172, "planQty": 500, "planDate": "2025-12-10", "shipmentPlanNo": "SPL-..." }
      ]
    }
  }
 }
 ```
 ### POST /api/shipping-plan/batch
 출하계획 일괄 저장
 Request:
 ```json
 {
  "plans": [
    { "salesOrderId": 172, "planQty": 1000 },
    { "salesOrderId": 175, "planQty": 500 }
  ]
 }
 ```
 ## 구현 상태
 ### 완료
 - [x] types.ts (타입 정의)
 - [x] index.ts (컴포넌트 정의)
 - [x] ShippingPlanEditorRenderer.tsx (레지스트리 등록)
 - [x] ShippingPlanEditorComponent.tsx (메인 UI)
 - [x] frontend/lib/api/shipping.ts (API 클라이언트)
 - [x] backend-node/src/controllers/shippingPlanController.ts (집계 + 일괄 저장)
 - [x] backend-node/src/routes/shippingPlanRoutes.ts (라우터)
 - [x] screen_definitions (screen_id: 4573, screen_code: *_SHIP_PLAN_EDITOR)
 - [x] screen_layouts_v2 (layout_id: 11562)
 ### 연동 정보
 | 항목 | 마스터(*) | 탑씰(COMPANY_7) |
 |------|-----------|-----------------|
 | screen_id | 4573 | 4574 |
 | screen_code | *_SHIP_PLAN_EDITOR | TOPSEAL_SHIP_PLAN_EDITOR |
 | layout_id | 11562 | 11563 |
 탑씰 수주관리 화면(screen_id: 156)의 "출하계획" 버튼(comp_33659)이
 targetScreenId: 4574로 연결되어, 체크박스 선택 → 버튼 클릭 → 모달 오픈.
 선택된 수주 데이터는 `groupedData` prop으로 전달됨.
 ## 테스트 계획
 ### 1단계: 기본 기능
 - [ ] 수주 선택 → 모달 열기 → groupedData 수신 확인
 - [ ] part_code 기준 그룹핑 확인
 - [ ] 집계 카드 데이터 표시 확인
 ### 2단계: CRUD
 - [ ] 출하계획량 입력 → 집계 자동 재계산
 - [ ] 확인 버튼 → shipment_plan INSERT 확인
 - [ ] 기존 계획 "기존" 배지 표시 확인
 ### 3단계: 검증
 - [ ] 출하계획량 > 미출하 시 에러 처리
 - [ ] 멀티테넌시 (company_code) 필터링 확인
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@ -217,16 +217,10 @@ export default function TableManagementPage() {
  // 메모이제이션된 입력타입 옵션
  const memoizedInputTypeOptions = useMemo(() => inputTypeOptions, []);
-  // 참조 테이블 옵션 (한글라벨 (영어명) 동시 표시)
+  // 참조 테이블 옵션 (실제 테이블 목록에서 가져옴)
  const referenceTableOptions = [
    { value: "none", label: getTextFromUI(TABLE_MANAGEMENT_KEYS.LABEL_NONE, "선택 안함") },
-    ...tables.map((table) => ({
+    ...tables.map((table) => ({ value: table.tableName, label: table.displayName || table.tableName })),
      value: table.tableName,
      label:
        table.displayName && table.displayName !== table.tableName
          ? `${table.displayName} (${table.tableName})`
          : table.tableName,
    })),
  ];
  // 공통 코드 카테고리 목록 상태
@ -1592,20 +1586,6 @@ export default function TableManagementPage() {
                    selectedColumn={selectedColumn}
                    onSelectColumn={setSelectedColumn}
                    onColumnChange={(columnName, field, value) => {
                      if (field === "isUnique") {
                        const currentColumn = columns.find((c) => c.columnName === columnName);
                        if (currentColumn) {
                          handleUniqueToggle(columnName, currentColumn.isUnique || "NO");
                        }
                        return;
                      }
                      if (field === "isNullable") {
                        const currentColumn = columns.find((c) => c.columnName === columnName);
                        if (currentColumn) {
                          handleNullableToggle(columnName, currentColumn.isNullable || "YES");
                        }
                        return;
                      }
                      const idx = columns.findIndex((c) => c.columnName === columnName);
                      if (idx >= 0) handleColumnChange(idx, field, value);
                    }}
@ -1616,8 +1596,6 @@ export default function TableManagementPage() {
                    onIndexToggle={(columnName, checked) =>
                      handleIndexToggle(columnName, "index", checked)
                    }
                    tables={tables}
                    referenceTableColumns={referenceTableColumns}
                  />
                </>
              )}
@ -1817,16 +1795,11 @@ export default function TableManagementPage() {
                <p className="text-sm font-medium">변경될 PK 컬럼:</p>
                {pendingPkColumns.length > 0 ? (
                  <div className="mt-2 flex flex-wrap gap-2">
-                    {pendingPkColumns.map((col) => {
+                    {pendingPkColumns.map((col) => (
-                      const colInfo = columns.find((c) => c.columnName === col);
+                      <Badge key={col} variant="secondary" className="font-mono text-xs">
-                      return (
+                        {col}
-                        <Badge key={col} variant="secondary" className="text-xs">
+                      </Badge>
-                          {colInfo?.displayName && colInfo.displayName !== col
+                    ))}
                            ? `${colInfo.displayName} (${col})`
                            : col}
                        </Badge>
                      );
                    })}
                  </div>
                ) : (
                  <p className="text-destructive mt-2 text-sm">PK가 모두 제거됩니다</p>
--- a/frontend/components/admin/CompanySwitcher.tsx
+++ b/frontend/components/admin/CompanySwitcher.tsx
@ -174,8 +174,6 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
                  ? "bg-accent/50 font-semibold"
                  : ""
              }`}
              role="button"
              aria-label={`${company.company_name} ${company.company_code}`}
              onClick={() => handleCompanySwitch(company.company_code)}
            >
              <div className="flex flex-col">
--- a/frontend/components/admin/table-type/ColumnDetailPanel.tsx
+++ b/frontend/components/admin/table-type/ColumnDetailPanel.tsx
@ -76,34 +76,9 @@ export function ColumnDetailPanel({
  if (!column) return null;
-  const refTableOpts = useMemo(() => {
+  const refTableOpts = referenceTableOptions.length
-    const hasKorean = (s: string) => /[가-힣]/.test(s);
+    ? referenceTableOptions
-    const raw = referenceTableOptions.length
+    : [{ value: "none", label: "선택 안함" }, ...tables.map((t) => ({ value: t.tableName, label: t.displayName || t.tableName }))];
      ? [...referenceTableOptions]
      : [
          { value: "none", label: "없음" },
          ...tables.map((t) => ({
            value: t.tableName,
            label:
              t.displayName && t.displayName !== t.tableName
                ? `${t.displayName} (${t.tableName})`
                : t.tableName,
          })),
        ];
    const noneOpt = raw.find((o) => o.value === "none");
    const rest = raw.filter((o) => o.value !== "none");
    rest.sort((a, b) => {
      const aK = hasKorean(a.label);
      const bK = hasKorean(b.label);
      if (aK && !bK) return -1;
      if (!aK && bK) return 1;
      return a.label.localeCompare(b.label, "ko");
    });
    return noneOpt ? [noneOpt, ...rest] : rest;
  }, [referenceTableOptions, tables]);
  return (
    <div className="flex h-full w-full flex-col border-l bg-card">
@ -115,11 +90,7 @@ export function ColumnDetailPanel({
              {typeConf.label}
            </span>
          )}
-          <span className="truncate text-sm font-medium">
+          <span className="truncate font-mono text-sm font-medium">{column.columnName}</span>
            {column.displayName && column.displayName !== column.columnName
              ? `${column.displayName} (${column.columnName})`
              : column.columnName}
          </span>
        </div>
        <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onClose} aria-label="닫기">
          <X className="h-4 w-4" />
@ -199,33 +170,23 @@ export function ColumnDetailPanel({
                    <CommandList className="max-h-[200px]">
                      <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
                      <CommandGroup>
-                        {refTableOpts.map((opt) => {
+                        {refTableOpts.map((opt) => (
-                          const hasKorean = opt.value !== "none" && opt.label !== opt.value && !opt.label.startsWith(opt.value);
+                          <CommandItem
-                          return (
+                            key={opt.value}
-                            <CommandItem
+                            value={`${opt.label} ${opt.value}`}
-                              key={opt.value}
+                            onSelect={() => {
-                              value={`${opt.label} ${opt.value}`}
+                              onColumnChange("referenceTable", opt.value === "none" ? undefined : opt.value);
-                              onSelect={() => {
+                              if (opt.value !== "none") onLoadReferenceColumns?.(opt.value);
-                                onColumnChange("referenceTable", opt.value === "none" ? undefined : opt.value);
+                              setEntityTableOpen(false);
-                                if (opt.value !== "none") onLoadReferenceColumns?.(opt.value);
+                            }}
-                                setEntityTableOpen(false);
+                            className="text-xs"
-                              }}
+                          >
-                              className="text-xs"
+                            <Check
-                            >
+                              className={cn("mr-2 h-3 w-3", column.referenceTable === opt.value ? "opacity-100" : "opacity-0")}
-                              <Check
+                            />
-                                className={cn("mr-2 h-3 w-3", column.referenceTable === opt.value ? "opacity-100" : "opacity-0")}
+                            {opt.label}
-                              />
+                          </CommandItem>
-                              {hasKorean ? (
+                        ))}
                                <div className="flex flex-col">
                                  <span className="font-medium">{opt.label.replace(` (${opt.value})`, "")}</span>
                                  <span className="text-[10px] text-muted-foreground">{opt.value}</span>
                                </div>
                              ) : (
                                opt.label
                              )}
                            </CommandItem>
                          );
                        })}
                      </CommandGroup>
                    </CommandList>
                  </Command>
@ -246,12 +207,7 @@ export function ColumnDetailPanel({
                      className="h-9 w-full justify-between text-xs"
                    >
                      {column.referenceColumn && column.referenceColumn !== "none"
-                        ? (() => {
+                        ? column.referenceColumn
                            const matched = refColumns.find((c) => c.columnName === column.referenceColumn);
                            return matched?.displayName && matched.displayName !== column.referenceColumn
                              ? `${matched.displayName} (${column.referenceColumn})`
                              : column.referenceColumn;
                          })()
                        : "컬럼 선택..."}
                      <ChevronsUpDown className="ml-2 h-3 w-3 opacity-50" />
                    </Button>
@ -289,14 +245,7 @@ export function ColumnDetailPanel({
                                  column.referenceColumn === refCol.columnName ? "opacity-100" : "opacity-0",
                                )}
                              />
-                              {refCol.displayName && refCol.displayName !== refCol.columnName ? (
+                              {refCol.columnName}
                                <div className="flex flex-col">
                                  <span className="font-medium">{refCol.displayName}</span>
                                  <span className="text-[10px] text-muted-foreground">{refCol.columnName}</span>
                                </div>
                              ) : (
                                <span>{refCol.columnName}</span>
                              )}
                            </CommandItem>
                          ))}
                        </CommandGroup>
@ -310,20 +259,12 @@ export function ColumnDetailPanel({
            {/* 참조 요약 미니맵 */}
            {column.referenceTable && column.referenceTable !== "none" && column.referenceColumn && (
              <div className="flex items-center gap-2 rounded-md bg-violet-50 px-3 py-2">
-                <span className="text-[11px] font-semibold text-violet-600">
+                <span className="font-mono text-[11px] font-semibold text-violet-600">
-                  {(() => {
+                  {column.referenceTable}
                    const tbl = refTableOpts.find((o) => o.value === column.referenceTable);
                    return tbl?.label ?? column.referenceTable;
                  })()}
                </span>
                <span className="text-muted-foreground text-[10px]">→</span>
-                <span className="text-[11px] font-semibold text-violet-600">
+                <span className="font-mono text-[11px] font-semibold text-violet-600">
-                  {(() => {
+                  {column.referenceColumn}
                    const col = refColumns.find((c) => c.columnName === column.referenceColumn);
                    return col?.displayName && col.displayName !== column.referenceColumn
                      ? `${col.displayName} (${column.referenceColumn})`
                      : column.referenceColumn;
                  })()}
                </span>
              </div>
            )}
--- a/frontend/components/admin/table-type/ColumnGrid.tsx
+++ b/frontend/components/admin/table-type/ColumnGrid.tsx
@ -5,9 +5,8 @@ import { MoreHorizontal, Database, Layers, FileStack } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-import type { ColumnTypeInfo, TableInfo } from "./types";
+import type { ColumnTypeInfo } from "./types";
 import { INPUT_TYPE_COLORS, getColumnGroup } from "./types";
 import type { ReferenceTableColumn } from "@/lib/api/entityJoin";
 export interface ColumnGridConstraints {
  primaryKey: { columns: string[] };
@ -24,9 +23,6 @@ export interface ColumnGridProps {
  getColumnIndexState?: (columnName: string) => { isPk: boolean; hasIndex: boolean };
  onPkToggle?: (columnName: string, checked: boolean) => void;
  onIndexToggle?: (columnName: string, checked: boolean) => void;
  /** 호버 시 한글 라벨 표시용 (Badge title) */
  tables?: TableInfo[];
  referenceTableColumns?: Record<string, ReferenceTableColumn[]>;
 }
 function getIndexState(
@ -57,8 +53,6 @@ export function ColumnGrid({
  getColumnIndexState: externalGetIndexState,
  onPkToggle,
  onIndexToggle,
  tables,
  referenceTableColumns,
 }: ColumnGridProps) {
  const getIdxState = useMemo(
    () => externalGetIndexState ?? ((name: string) => getIndexState(name, constraints)),
@ -142,12 +136,13 @@ export function ColumnGrid({
                      {/* 4px 색상바 (타입별 진한 색) */}
                      <div className={cn("h-full min-h-8 w-1 rounded-full", typeConf.barColor)} />
-                      {/* 라벨 + 컬럼명 (한글라벨 (영어명) 동시 표시) */}
+                      {/* 라벨 + 컬럼명 */}
                      <div className="min-w-0">
                        <div className="truncate text-sm font-medium">
-                          {column.displayName && column.displayName !== column.columnName
+                          {column.displayName || column.columnName}
-                            ? `${column.displayName} (${column.columnName})`
+                        </div>
-                            : column.columnName}
+                        <div className="truncate font-mono text-xs text-muted-foreground">
                          {column.columnName}
                        </div>
                      </div>
@ -155,38 +150,11 @@ export function ColumnGrid({
                      <div className="flex min-w-0 flex-wrap gap-1">
                        {column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" && (
                          <>
-                            <Badge
+                            <Badge variant="outline" className="text-xs font-normal">
                              variant="outline"
                              className="text-xs font-normal"
                              title={
                                tables
                                  ? (() => {
                                      const t = tables.find((tb) => tb.tableName === column.referenceTable);
                                      return t?.displayName && t.displayName !== t.tableName
                                        ? `${t.displayName} (${column.referenceTable})`
                                        : column.referenceTable;
                                    })()
                                  : column.referenceTable
                              }
                            >
                              {column.referenceTable}
                            </Badge>
                            <span className="text-muted-foreground text-xs">→</span>
-                            <Badge
+                            <Badge variant="outline" className="text-xs font-normal">
                              variant="outline"
                              className="text-xs font-normal"
                              title={
                                referenceTableColumns?.[column.referenceTable]
                                  ? (() => {
                                      const refCols = referenceTableColumns[column.referenceTable];
                                      const c = refCols.find((rc) => rc.columnName === (column.referenceColumn ?? ""));
                                      return c?.displayName && c.displayName !== c.columnName
                                        ? `${c.displayName} (${column.referenceColumn})`
                                        : column.referenceColumn ?? "—";
                                    })()
                                  : column.referenceColumn ?? "—"
                              }
                            >
                              {column.referenceColumn || "—"}
                            </Badge>
                          </>
--- a/frontend/components/common/ExcelUploadModal.tsx
+++ b/frontend/components/common/ExcelUploadModal.tsx
@ -29,11 +29,7 @@ import {
  Zap,
  Copy,
  Loader2,
  Check,
  ChevronsUpDown,
 } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Checkbox } from "@/components/ui/checkbox";
 import { importFromExcel, getExcelSheetNames } from "@/lib/utils/excelExport";
 import { DynamicFormApi } from "@/lib/api/dynamicForm";
@ -101,37 +97,10 @@ export interface ExcelUploadModalProps {
 interface ColumnMapping {
  excelColumn: string;
  systemColumn: string | null;
  // 중복 체크 설정 (해당 컬럼을 중복 체크 키로 사용할지)
  checkDuplicate?: boolean;
 }
 interface FlatCategoryValue {
  valueCode: string;
  valueLabel: string;
  depth: number;
  ancestors: string[];
 }
 function flattenCategoryValues(
  values: Array<{ valueCode: string; valueLabel: string; children?: any[] }>
 ): FlatCategoryValue[] {
  const result: FlatCategoryValue[] = [];
  const traverse = (items: any[], depth: number, ancestors: string[]) => {
    for (const item of items) {
      result.push({
        valueCode: item.valueCode,
        valueLabel: item.valueLabel,
        depth,
        ancestors,
      });
      if (item.children?.length > 0) {
        traverse(item.children, depth + 1, [...ancestors, item.valueLabel]);
      }
    }
  };
  traverse(values, 0, []);
  return result;
 }
 export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
  open,
  onOpenChange,
@ -168,9 +137,6 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
  // 중복 처리 방법 (전역 설정)
  const [duplicateAction, setDuplicateAction] = useState<"overwrite" | "skip">("skip");
  // 검증 화면에서 DB 중복 처리 방법 (null이면 미선택 = 업로드 차단)
  const [dbDuplicateAction, setDbDuplicateAction] = useState<"overwrite" | "skip" | null>(null);
  // 엑셀 데이터 사전 검증 결과
  const [isDataValidating, setIsDataValidating] = useState(false);
  const [validationResult, setValidationResult] = useState<import("@/lib/api/tableManagement").ExcelValidationResult | null>(null);
@ -183,7 +149,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
    Record<string, Array<{
      invalidValue: string;
      replacement: string | null;
-      validOptions: Array<{ code: string; label: string; depth: number; ancestors: string[] }>;
+      validOptions: Array<{ code: string; label: string }>;
      rowIndices: number[];
    }>>
  >({});
@ -715,8 +681,12 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
        const valuesResponse = await getCategoryValues(targetTableName, catCol.systemCol);
        if (!valuesResponse.success || !valuesResponse.data) continue;
-        const validValues = flattenCategoryValues(valuesResponse.data as any[]);
+        const validValues = valuesResponse.data as Array<{
          valueCode: string;
          valueLabel: string;
        }>;
        // 유효한 코드와 라벨 Set 생성
        const validCodes = new Set(validValues.map((v) => v.valueCode));
        const validLabels = new Set(validValues.map((v) => v.valueLabel));
        const validLabelsLower = new Set(validValues.map((v) => v.valueLabel.toLowerCase()));
@ -744,8 +714,6 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
          const options = validValues.map((v) => ({
            code: v.valueCode,
            label: v.valueLabel,
            depth: v.depth,
            ancestors: v.ancestors,
          }));
          mismatches[`${catCol.systemCol}|||${catCol.displayName}`] = Array.from(invalidMap.entries()).map(
@ -818,7 +786,8 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
    setDisplayData(newData);
    setShowCategoryValidation(false);
    setCategoryMismatches({});
-    toast.success("카테고리 값이 대체되었습니다. '다음'을 눌러 진행해주세요.");
+    toast.success("카테고리 값이 대체되었습니다.");
    setCurrentStep(3);
    return true;
  };
@ -912,7 +881,6 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
      }
      // 데이터 사전 검증 (NOT NULL 값 누락, UNIQUE 중복)
      setDbDuplicateAction(null);
      setIsDataValidating(true);
      try {
        const { validateExcelData: validateExcel } = await import("@/lib/api/tableManagement");
@ -1128,33 +1096,9 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
        const hasNumbering = !!numberingInfo;
        // 중복 체크 설정 확인
-        let duplicateCheckMappings = columnMappings.filter(
+        const duplicateCheckMappings = columnMappings.filter(
          (m) => m.checkDuplicate && m.systemColumn
        );
        let effectiveDuplicateAction = duplicateAction;
        // 검증 화면에서 DB 중복 처리 방법을 선택한 경우, 유니크 컬럼을 자동으로 중복 체크에 추가
        if (dbDuplicateAction && validationResult?.uniqueInDbErrors && validationResult.uniqueInDbErrors.length > 0) {
          effectiveDuplicateAction = dbDuplicateAction;
          const uniqueColumns = new Set(validationResult.uniqueInDbErrors.map((e) => e.column));
          for (const colName of uniqueColumns) {
            const alreadyAdded = duplicateCheckMappings.some((m) => {
              const mapped = m.systemColumn?.includes(".") ? m.systemColumn.split(".")[1] : m.systemColumn;
              return mapped === colName;
            });
            if (!alreadyAdded) {
              const mapping = columnMappings.find((m) => {
                const mapped = m.systemColumn?.includes(".") ? m.systemColumn.split(".")[1] : m.systemColumn;
                return mapped === colName;
              });
              if (mapping) {
                duplicateCheckMappings = [...duplicateCheckMappings, { ...mapping, checkDuplicate: true }];
              }
            }
          }
          console.log(`📊 검증 화면 DB 중복 처리: ${dbDuplicateAction}, 체크 컬럼: ${[...uniqueColumns].join(", ")}`);
        }
        const hasDuplicateCheck = duplicateCheckMappings.length > 0;
        // 중복 체크를 위한 기존 데이터 조회 (중복 체크가 설정된 경우에만)
@ -1217,7 +1161,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
              if (existingDataMap.has(key)) {
                existingRow = existingDataMap.get(key);
-                if (effectiveDuplicateAction === "skip") {
+                if (duplicateAction === "skip") {
                  shouldSkip = true;
                  skipCount++;
                  console.log(`⏭️ [행 ${rowIdx + 1}] 중복으로 건너뛰기: ${key}`);
@ -1399,7 +1343,6 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
      setSystemColumns([]);
      setColumnMappings([]);
      setDuplicateAction("skip");
      setDbDuplicateAction(null);
      // 검증 상태 초기화
      setValidationResult(null);
      setIsDataValidating(false);
@ -1414,7 +1357,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
  return (
    <>
-    <Dialog open={open} onOpenChange={(v) => { if (!showCategoryValidation) onOpenChange(v); }}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-h-[95vh] max-w-[95vw] sm:max-w-[1200px]"
        style={{
@ -2022,50 +1965,12 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                  {/* DB 기존 데이터 중복 */}
                  {validationResult.uniqueInDbErrors.length > 0 && (
-                    <div className={cn(
+                    <div className="rounded-md border border-destructive bg-destructive/10 p-4">
-                      "rounded-md border p-4",
+                      <h3 className="flex items-center gap-2 text-sm font-medium text-destructive sm:text-base">
-                      dbDuplicateAction
+                        <XCircle className="h-4 w-4" />
-                        ? "border-primary/30 bg-primary/5"
+                        DB 기존 데이터와 중복 ({validationResult.uniqueInDbErrors.length}건)
-                        : "border-destructive bg-destructive/10"
+                      </h3>
-                    )}>
+                      <div className="mt-2 max-h-[150px] space-y-0.5 overflow-y-auto text-[10px] text-destructive sm:text-xs">
                      <div className="flex items-start justify-between gap-3">
                        <h3 className={cn(
                          "flex items-center gap-2 text-sm font-medium sm:text-base",
                          dbDuplicateAction ? "text-primary" : "text-destructive"
                        )}>
                          {dbDuplicateAction ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                          DB 기존 데이터와 중복 ({validationResult.uniqueInDbErrors.length}건)
                        </h3>
                        <div className="flex items-center gap-2 shrink-0">
                          <span className={cn(
                            "text-[10px] sm:text-xs",
                            dbDuplicateAction ? "text-primary" : "text-destructive"
                          )}>
                            중복 시:
                          </span>
                          <Select
                            value={dbDuplicateAction || ""}
                            onValueChange={(value) => setDbDuplicateAction(value as "overwrite" | "skip")}
                          >
                            <SelectTrigger className={cn(
                              "h-7 w-[100px] text-[10px] sm:text-xs",
                              dbDuplicateAction
                                ? "border-primary/40 bg-white"
                                : "border-destructive/40 bg-white animate-pulse"
                            )}>
                              <SelectValue placeholder="선택" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="skip" className="text-xs">건너뛰기</SelectItem>
                              <SelectItem value="overwrite" className="text-xs">덮어쓰기</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className={cn(
                        "mt-2 max-h-[150px] space-y-0.5 overflow-y-auto text-[10px] sm:text-xs",
                        dbDuplicateAction ? "text-primary/80" : "text-destructive"
                      )}>
                        {(() => {
                          const grouped = new Map<string, { value: string; rows: number[] }[]>();
                          for (const err of validationResult.uniqueInDbErrors) {
@ -2079,7 +1984,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                            <div key={label}>
                              {items.slice(0, 5).map((item, i) => (
                                <p key={i}>
-                                  <span className="font-medium">{label}</span> &quot;{item.value}&quot;: 행 {item.rows.join(", ")}
+                                  <span className="font-medium">{label}</span> "{item.value}": 행 {item.rows.join(", ")}
                                </p>
                              ))}
                              {items.length > 5 && <p className="font-medium">...외 {items.length - 5}건</p>}
@ -2087,13 +1992,6 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                          ));
                        })()}
                      </div>
                      {dbDuplicateAction && (
                        <p className="mt-2 text-[10px] text-primary sm:text-xs font-medium">
                          {dbDuplicateAction === "skip"
                            ? "중복 데이터는 건너뛰고 신규 데이터만 업로드합니다."
                            : "중복 데이터는 새 값으로 덮어씁니다."}
                        </p>
                      )}
                    </div>
                  )}
                </div>
@ -2207,24 +2105,11 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
              disabled={
                isUploading ||
                columnMappings.filter((m) => m.systemColumn).length === 0 ||
-                (validationResult !== null && !validationResult.isValid && !(
+                (validationResult !== null && !validationResult.isValid)
                  validationResult.notNullErrors.length === 0 &&
                  validationResult.uniqueInExcelErrors.length === 0 &&
                  validationResult.uniqueInDbErrors.length > 0 &&
                  dbDuplicateAction !== null
                ))
              }
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
-              {isUploading ? "업로드 중..." :
+              {isUploading ? "업로드 중..." : validationResult && !validationResult.isValid ? "검증 실패 - 이전으로 돌아가 수정" : "업로드"}
                validationResult && !validationResult.isValid && !(
                  validationResult.notNullErrors.length === 0 &&
                  validationResult.uniqueInExcelErrors.length === 0 &&
                  validationResult.uniqueInDbErrors.length > 0 &&
                  dbDuplicateAction !== null
                ) ? "검증 실패 - 이전으로 돌아가 수정" :
                dbDuplicateAction === "skip" ? "업로드 (중복 건너뛰기)" :
                dbDuplicateAction === "overwrite" ? "업로드 (중복 덮어쓰기)" : "업로드"}
            </Button>
          )}
        </DialogFooter>
@ -2271,63 +2156,33 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                      </span>
                    </div>
                    <ArrowRight className="h-4 w-4 text-muted-foreground" />
-                    <Popover>
+                    <Select
-                      <PopoverTrigger asChild>
+                      value={item.replacement || ""}
-                        <Button
+                      onValueChange={(val) => {
-                          variant="outline"
+                        setCategoryMismatches((prev) => {
-                          role="combobox"
+                          const updated = { ...prev };
-                          className="h-8 w-full justify-between text-xs sm:h-9 sm:text-sm"
+                          updated[key] = updated[key].map((it, i) =>
-                        >
+                            i === idx ? { ...it, replacement: val } : it
-                          <span className="truncate">
+                          );
-                            {item.replacement
+                          return updated;
-                              ? item.validOptions.find((o) => o.code === item.replacement)?.label || item.replacement
+                        });
-                              : "대체 값 선택"}
+                      }}
-                          </span>
+                    >
-                          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                      <SelectTrigger className="h-8 text-xs sm:h-9 sm:text-sm">
-                        </Button>
+                        <SelectValue placeholder="대체 값 선택" />
-                      </PopoverTrigger>
+                      </SelectTrigger>
-                      <PopoverContent className="w-[260px] p-0" align="start">
+                      <SelectContent>
-                        <Command
+                        {item.validOptions.map((opt) => (
-                          filter={(value, search) => {
+                          <SelectItem
-                            const opt = item.validOptions.find((o) => o.code === value);
+                            key={opt.code}
-                            if (!opt) return 0;
+                            value={opt.code}
-                            const s = search.toLowerCase();
+                            className="text-xs sm:text-sm"
-                            if (opt.label.toLowerCase().includes(s)) return 1;
+                          >
-                            if (opt.ancestors.some((a) => a.toLowerCase().includes(s))) return 1;
+                            {opt.label}
-                            return 0;
+                          </SelectItem>
-                          }}
+                        ))}
-                        >
+                      </SelectContent>
-                          <CommandInput placeholder="카테고리 검색..." className="text-xs" />
+                    </Select>
                          <CommandList className="max-h-52">
                            <CommandEmpty className="py-3 text-xs">찾을 수 없습니다</CommandEmpty>
                            <CommandGroup>
                              {item.validOptions.map((opt) => (
                                <CommandItem
                                  key={opt.code}
                                  value={opt.code}
                                  onSelect={(val) => {
                                    setCategoryMismatches((prev) => {
                                      const updated = { ...prev };
                                      updated[key] = updated[key].map((it, i) =>
                                        i === idx ? { ...it, replacement: val } : it
                                      );
                                      return updated;
                                    });
                                  }}
                                  className="text-xs sm:text-sm"
                                >
                                  <Check className={cn("mr-2 h-3 w-3", item.replacement === opt.code ? "opacity-100" : "opacity-0")} />
                                  <span style={{ paddingLeft: `${opt.depth * 12}px` }}>
                                    {opt.depth > 0 && <span className="mr-1 text-muted-foreground">ㄴ</span>}
                                    {opt.label}
                                  </span>
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                ))}
              </div>
@ -2346,6 +2201,17 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
          >
            취소
          </Button>
          <Button
            variant="outline"
            onClick={() => {
              setShowCategoryValidation(false);
              setCategoryMismatches({});
              setCurrentStep(3);
            }}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            무시하고 진행
          </Button>
          <Button
            onClick={applyCategoryReplacements}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
--- a/frontend/components/common/MultiTableExcelUploadModal.tsx
+++ b/frontend/components/common/MultiTableExcelUploadModal.tsx
@ -28,11 +28,7 @@ import {
  Zap,
  Download,
  Loader2,
  Check,
  ChevronsUpDown,
 } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { importFromExcel, getExcelSheetNames, exportToExcel } from "@/lib/utils/excelExport";
 import { cn } from "@/lib/utils";
 import { EditableSpreadsheet } from "./EditableSpreadsheet";
@ -55,34 +51,6 @@ interface ColumnMapping {
  targetColumn: string | null;
 }
 interface FlatCategoryValue {
  valueCode: string;
  valueLabel: string;
  depth: number;
  ancestors: string[];
 }
 function flattenCategoryValues(
  values: Array<{ valueCode: string; valueLabel: string; children?: any[] }>
 ): FlatCategoryValue[] {
  const result: FlatCategoryValue[] = [];
  const traverse = (items: any[], depth: number, ancestors: string[]) => {
    for (const item of items) {
      result.push({
        valueCode: item.valueCode,
        valueLabel: item.valueLabel,
        depth,
        ancestors,
      });
      if (item.children?.length > 0) {
        traverse(item.children, depth + 1, [...ancestors, item.valueLabel]);
      }
    }
  };
  traverse(values, 0, []);
  return result;
 }
 export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProps> = ({
  open,
  onOpenChange,
@ -120,7 +88,7 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
    Record<string, Array<{
      invalidValue: string;
      replacement: string | null;
-      validOptions: Array<{ code: string; label: string; depth: number; ancestors: string[] }>;
+      validOptions: Array<{ code: string; label: string }>;
      rowIndices: number[];
    }>>
  >({});
@ -388,7 +356,10 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
          const valuesResponse = await getCategoryValues(level.tableName, catColName);
          if (!valuesResponse.success || !valuesResponse.data) continue;
-          const validValues = flattenCategoryValues(valuesResponse.data as any[]);
+          const validValues = valuesResponse.data as Array<{
            valueCode: string;
            valueLabel: string;
          }>;
          const validCodes = new Set(validValues.map((v) => v.valueCode));
          const validLabels = new Set(validValues.map((v) => v.valueLabel));
@ -416,8 +387,6 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
            const options = validValues.map((v) => ({
              code: v.valueCode,
              label: v.valueLabel,
              depth: v.depth,
              ancestors: v.ancestors,
            }));
            const key = `${catColName}|||[${level.label}] ${catDisplayName}`;
@ -495,7 +464,8 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
    setDisplayData(newData);
    setShowCategoryValidation(false);
    setCategoryMismatches({});
-    toast.success("카테고리 값이 대체되었습니다. '다음'을 눌러 진행해주세요.");
+    toast.success("카테고리 값이 대체되었습니다.");
    setCurrentStep(3);
    return true;
  };
@ -562,7 +532,7 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
  return (
    <>
-    <Dialog open={open} onOpenChange={(v) => { if (!showCategoryValidation) onOpenChange(v); }}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-h-[95vh] max-w-[95vw] sm:max-w-[1200px]"
        style={{ width: "1000px", height: "700px", minWidth: "700px", minHeight: "500px", maxWidth: "1400px", maxHeight: "900px" }}
@ -1039,63 +1009,33 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
                      </span>
                    </div>
                    <ArrowRight className="h-4 w-4 text-muted-foreground" />
-                    <Popover>
+                    <Select
-                      <PopoverTrigger asChild>
+                      value={item.replacement || ""}
-                        <Button
+                      onValueChange={(val) => {
-                          variant="outline"
+                        setCategoryMismatches((prev) => {
-                          role="combobox"
+                          const updated = { ...prev };
-                          className="h-8 w-full justify-between text-xs sm:h-9 sm:text-sm"
+                          updated[key] = updated[key].map((it, i) =>
-                        >
+                            i === idx ? { ...it, replacement: val } : it
-                          <span className="truncate">
+                          );
-                            {item.replacement
+                          return updated;
-                              ? item.validOptions.find((o) => o.code === item.replacement)?.label || item.replacement
+                        });
-                              : "대체 값 선택"}
+                      }}
-                          </span>
+                    >
-                          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                      <SelectTrigger className="h-8 text-xs sm:h-9 sm:text-sm">
-                        </Button>
+                        <SelectValue placeholder="대체 값 선택" />
-                      </PopoverTrigger>
+                      </SelectTrigger>
-                      <PopoverContent className="w-[260px] p-0" align="start">
+                      <SelectContent>
-                        <Command
+                        {item.validOptions.map((opt) => (
-                          filter={(value, search) => {
+                          <SelectItem
-                            const opt = item.validOptions.find((o) => o.code === value);
+                            key={opt.code}
-                            if (!opt) return 0;
+                            value={opt.code}
-                            const s = search.toLowerCase();
+                            className="text-xs sm:text-sm"
-                            if (opt.label.toLowerCase().includes(s)) return 1;
+                          >
-                            if (opt.ancestors.some((a) => a.toLowerCase().includes(s))) return 1;
+                            {opt.label}
-                            return 0;
+                          </SelectItem>
-                          }}
+                        ))}
-                        >
+                      </SelectContent>
-                          <CommandInput placeholder="카테고리 검색..." className="text-xs" />
+                    </Select>
                          <CommandList className="max-h-52">
                            <CommandEmpty className="py-3 text-xs">찾을 수 없습니다</CommandEmpty>
                            <CommandGroup>
                              {item.validOptions.map((opt) => (
                                <CommandItem
                                  key={opt.code}
                                  value={opt.code}
                                  onSelect={(val) => {
                                    setCategoryMismatches((prev) => {
                                      const updated = { ...prev };
                                      updated[key] = updated[key].map((it, i) =>
                                        i === idx ? { ...it, replacement: val } : it
                                      );
                                      return updated;
                                    });
                                  }}
                                  className="text-xs sm:text-sm"
                                >
                                  <Check className={cn("mr-2 h-3 w-3", item.replacement === opt.code ? "opacity-100" : "opacity-0")} />
                                  <span style={{ paddingLeft: `${opt.depth * 12}px` }}>
                                    {opt.depth > 0 && <span className="mr-1 text-muted-foreground">ㄴ</span>}
                                    {opt.label}
                                  </span>
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                ))}
              </div>
@ -1114,6 +1054,17 @@ export const MultiTableExcelUploadModal: React.FC<MultiTableExcelUploadModalProp
          >
            취소
          </Button>
          <Button
            variant="outline"
            onClick={() => {
              setShowCategoryValidation(false);
              setCategoryMismatches({});
              setCurrentStep(3);
            }}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            무시하고 진행
          </Button>
          <Button
            onClick={applyCategoryReplacements}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@ -1,6 +1,6 @@
 "use client";
-import { useState, Suspense, useEffect, useCallback } from "react";
+import { useState, Suspense, useEffect } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
@ -341,10 +341,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
  const currentMenus = isAdminMode ? adminMenus : userMenus;
  const currentTabs = useTabStore((s) => s[s.mode].tabs);
  const currentActiveTabId = useTabStore((s) => s[s.mode].activeTabId);
  const activeTab = currentTabs.find((t) => t.id === currentActiveTabId);
  const toggleMenu = (menuId: string) => {
    const newExpanded = new Set(expandedMenus);
    if (newExpanded.has(menuId)) {
@ -482,26 +478,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
    }
  };
  // pathname + 활성 탭 기반 활성 메뉴 판별 (탭 네비게이션에서도 사이드바 활성 표시)
  const isMenuActive = useCallback(
    (menu: any): boolean => {
      if (pathname === menu.url) return true;
      if (!activeTab) return false;
      const menuObjid = parseInt((menu.objid || menu.id)?.toString() || "0");
      if (activeTab.type === "admin" && activeTab.adminUrl) {
        return menu.url === activeTab.adminUrl;
      }
      if (activeTab.type === "screen") {
        if (activeTab.menuObjid != null && menuObjid === activeTab.menuObjid) return true;
        if (activeTab.screenId != null && menu.screenId === activeTab.screenId) return true;
      }
      return false;
    },
    [pathname, activeTab],
  );
  // 메뉴 트리 렌더링 (기존 MainLayout 스타일 적용)
  const renderMenu = (menu: any, level: number = 0) => {
    const isExpanded = expandedMenus.has(menu.id);
@ -513,8 +489,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
          draggable={isLeaf}
          onDragStart={(e) => handleMenuDragStart(e, menu)}
          className={`group flex min-h-[44px] cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 ease-in-out sm:min-h-[40px] ${
-            isMenuActive(menu)
+            pathname === menu.url
-              ? "border-l-[3px] border-l-primary bg-primary/10 dark:bg-primary/15 text-primary font-semibold"
+              ? "border-primary bg-primary/8 text-primary border-l-3 font-semibold"
              : isExpanded
                ? "bg-accent/60 text-foreground"
                : "text-muted-foreground hover:bg-accent hover:text-foreground"
@ -542,8 +518,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                draggable={!child.hasChildren}
                onDragStart={(e) => handleMenuDragStart(e, child)}
                className={`flex min-h-[44px] cursor-pointer items-center rounded-md px-3 py-2 text-sm transition-colors duration-150 hover:cursor-pointer sm:min-h-[40px] ${
-                  isMenuActive(child)
+                  pathname === child.url
-                    ? "border-l-[3px] border-l-primary bg-primary/10 dark:bg-primary/15 text-primary font-semibold"
+                    ? "border-primary bg-primary/8 text-primary border-l-3 font-semibold"
                    : "text-muted-foreground hover:bg-accent hover:text-foreground"
                }`}
                onClick={() => handleMenuClick(child)}
@ -568,30 +544,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
    );
  }
  const uiMenus = user ? convertMenuToUI(currentMenus, user as ExtendedUserInfo) : [];
  // 활성 탭에 해당하는 메뉴가 속한 부모 메뉴 자동 확장
  useEffect(() => {
    if (!activeTab || uiMenus.length === 0) return;
    const toExpand: string[] = [];
    for (const menu of uiMenus) {
      if (menu.hasChildren && menu.children) {
        const hasActiveChild = menu.children.some((child: any) => isMenuActive(child));
        if (hasActiveChild && !expandedMenus.has(menu.id)) {
          toExpand.push(menu.id);
        }
      }
    }
    if (toExpand.length > 0) {
      setExpandedMenus((prev) => {
        const next = new Set(prev);
        toExpand.forEach((id) => next.add(id));
        return next;
      });
    }
  }, [activeTab, uiMenus, isMenuActive, expandedMenus]);
  if (!user) {
    return (
      <div className="flex h-screen items-center justify-center">
@ -603,6 +555,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
    );
  }
  const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
  return (
    <div className="bg-background flex h-screen flex-col">
      {/* 모바일 헤더 */}
--- a/frontend/components/layout/TabBar.tsx
+++ b/frontend/components/layout/TabBar.tsx
@ -493,8 +493,8 @@ export function TabBar() {
        className={cn(
          "group relative flex h-7 shrink-0 cursor-pointer items-center gap-0.5 rounded-t-md border border-b-0 px-3 select-none",
          isActive
-            ? "text-primary z-10 -mb-px h-[30px] bg-primary/15 dark:bg-primary/20 border-primary/40 border-t-[3px] border-t-primary font-semibold"
+            ? "text-foreground z-10 -mb-px h-[30px] bg-white"
-            : "bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground border-transparent",
+            : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-transparent",
        )}
        style={{
          width: TAB_WIDTH,
--- a/frontend/components/numbering-rule/AutoConfigPanel.tsx
+++ b/frontend/components/numbering-rule/AutoConfigPanel.tsx
@ -478,7 +478,7 @@ const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
              </PopoverContent>
            </Popover>
            {sourceTableName && columns.length === 0 && !loadingColumns && (
-              <p className="mt-1 text-[10px] text-warning sm:text-xs">
+              <p className="mt-1 text-[10px] text-amber-600 sm:text-xs">
                이 테이블에 날짜 타입 컬럼이 없습니다
              </p>
            )}
--- a/frontend/components/numbering-rule/NumberingRuleCard.tsx
+++ b/frontend/components/numbering-rule/NumberingRuleCard.tsx
@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@ -26,24 +27,25 @@ export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
  tableName,
 }) => {
  return (
-    <div className="config-field flex-1 rounded-[8px] border border-border bg-muted/50 px-3 py-3 sm:px-4 sm:py-4">
+    <Card className="border-border bg-card flex-1">
-      <div className="mb-3 flex items-center justify-between sm:mb-4">
+      <CardHeader className="pb-3">
-        <Badge variant="outline" className="text-xs sm:text-sm">
+        <div className="flex items-center justify-between">
-          규칙 {part.order}
+          <Badge variant="outline" className="text-xs sm:text-sm">
-        </Badge>
+            규칙 {part.order}
-        <Button
+          </Badge>
-          variant="destructive"
+          <Button
-          size="icon"
+            variant="ghost"
-          onClick={onDelete}
+            size="icon"
-          className="h-7 w-7 sm:h-8 sm:w-8"
+            onClick={onDelete}
-          disabled={isPreview}
+            className="text-destructive h-7 w-7 sm:h-8 sm:w-8"
-          aria-label="규칙 삭제"
+            disabled={isPreview}
-        >
+          >
-          <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
+            <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
-        </Button>
+          </Button>
-      </div>
+        </div>
      </CardHeader>
-      <div className="space-y-3 sm:space-y-4">
+      <CardContent className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">구분 유형</Label>
          <Select
@ -115,7 +117,7 @@ export const NumberingRuleCard: React.FC<NumberingRuleCardProps> = ({
            isPreview={isPreview}
          />
        )}
-      </div>
+      </CardContent>
-    </div>
+    </Card>
  );
 };
--- a/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
+++ b/frontend/components/numbering-rule/NumberingRuleDesigner.tsx
@ -5,16 +5,28 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Plus, Save, ListOrdered } from "lucide-react";
+import { Plus, Save, Edit2, FolderTree } from "lucide-react";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import { NumberingRuleConfig, NumberingRulePart, SEPARATOR_OPTIONS, SeparatorType } from "@/types/numbering-rule";
 import { CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
 import { NumberingRuleCard } from "./NumberingRuleCard";
-import { NumberingRulePreview, computePartDisplayItems, getPartTypeColorClass } from "./NumberingRulePreview";
+import { NumberingRulePreview } from "./NumberingRulePreview";
-import { getNumberingRules, saveNumberingRuleToTest } from "@/lib/api/numberingRule";
+import { saveNumberingRuleToTest } from "@/lib/api/numberingRule";
 import { apiClient } from "@/lib/api/client";
 import { cn } from "@/lib/utils";
 interface NumberingColumn {
  tableName: string;
  tableLabel: string;
  columnName: string;
  columnLabel: string;
 }
 interface GroupedColumns {
  tableLabel: string;
  columns: NumberingColumn[];
 }
 interface NumberingRuleDesignerProps {
  initialConfig?: NumberingRuleConfig;
  onSave?: (config: NumberingRuleConfig) => void;
@ -22,8 +34,8 @@ interface NumberingRuleDesignerProps {
  maxRules?: number;
  isPreview?: boolean;
  className?: string;
-  currentTableName?: string;
+  currentTableName?: string; // 현재 화면의 테이블명 (자동 감지용)
-  menuObjid?: number;
+  menuObjid?: number; // 현재 메뉴 OBJID (메뉴 스코프)
 }
 export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
@ -36,84 +48,124 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
  currentTableName,
  menuObjid,
 }) => {
-  const [rulesList, setRulesList] = useState<NumberingRuleConfig[]>([]);
+  const [numberingColumns, setNumberingColumns] = useState<NumberingColumn[]>([]);
-  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
+  const [selectedColumn, setSelectedColumn] = useState<{ tableName: string; columnName: string } | null>(null);
  const [currentRule, setCurrentRule] = useState<NumberingRuleConfig | null>(null);
  const [selectedPartOrder, setSelectedPartOrder] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [columnSearch, setColumnSearch] = useState("");
  const [rightTitle, setRightTitle] = useState("규칙 편집");
  const [editingRightTitle, setEditingRightTitle] = useState(false);
  // 구분자 관련 상태 (개별 파트 사이 구분자)
  const [separatorTypes, setSeparatorTypes] = useState<Record<number, SeparatorType>>({});
  const [customSeparators, setCustomSeparators] = useState<Record<number, string>>({});
-  const selectedRule = rulesList.find((r) => r.ruleId === selectedRuleId) ?? currentRule;
+  // 좌측: 채번 타입 컬럼 목록 로드
  // 좌측: 규칙 목록 로드
  useEffect(() => {
-    loadRules();
+    loadNumberingColumns();
  }, []);
-  const loadRules = async () => {
+  const loadNumberingColumns = async () => {
    setLoading(true);
    try {
-      const response = await getNumberingRules();
+      const response = await apiClient.get("/table-management/numbering-columns");
-      if (response.success && response.data) {
+      if (response.data.success && response.data.data) {
-        setRulesList(response.data);
+        setNumberingColumns(response.data.data);
        if (response.data.length > 0 && !selectedRuleId) {
          const first = response.data[0];
          setSelectedRuleId(first.ruleId);
          setCurrentRule(JSON.parse(JSON.stringify(first)));
        }
      }
-    } catch (e) {
+    } catch (error: any) {
-      console.error("채번 규칙 목록 로드 실패:", e);
+      console.error("채번 컬럼 목록 로드 실패:", error);
    } finally {
      setLoading(false);
    }
  };
-  const handleSelectRule = (rule: NumberingRuleConfig) => {
+  // 컬럼 선택 시 해당 컬럼의 채번 규칙 로드
-    setSelectedRuleId(rule.ruleId);
+  const handleSelectColumn = async (tableName: string, columnName: string) => {
-    setCurrentRule(JSON.parse(JSON.stringify(rule)));
+    setSelectedColumn({ tableName, columnName });
-    setSelectedPartOrder(null);
+    setLoading(true);
    try {
      const response = await apiClient.get(`/numbering-rules/by-column/${tableName}/${columnName}`);
      if (response.data.success && response.data.data) {
        const rule = response.data.data as NumberingRuleConfig;
        setCurrentRule(JSON.parse(JSON.stringify(rule)));
      } else {
        // 규칙 없으면 신규 생성 모드
        const newRule: NumberingRuleConfig = {
          ruleId: `rule-${Date.now()}`,
          ruleName: `${columnName} 채번`,
          parts: [],
          separator: "-",
          resetPeriod: "none",
          currentSequence: 1,
          scopeType: "table",
          tableName,
          columnName,
        };
        setCurrentRule(newRule);
      }
    } catch {
      const newRule: NumberingRuleConfig = {
        ruleId: `rule-${Date.now()}`,
        ruleName: `${columnName} 채번`,
        parts: [],
        separator: "-",
        resetPeriod: "none",
        currentSequence: 1,
        scopeType: "table",
        tableName,
        columnName,
      };
      setCurrentRule(newRule);
    } finally {
      setLoading(false);
    }
  };
-  const handleAddNewRule = () => {
+  // 테이블별로 그룹화
-    const newRule: NumberingRuleConfig = {
+  const groupedColumns = numberingColumns.reduce<Record<string, GroupedColumns>>((acc, col) => {
-      ruleId: `rule-${Date.now()}`,
+    if (!acc[col.tableName]) {
-      ruleName: "새 규칙",
+      acc[col.tableName] = { tableLabel: col.tableLabel, columns: [] };
-      parts: [],
+    }
-      separator: "-",
+    acc[col.tableName].columns.push(col);
-      resetPeriod: "none",
+    return acc;
-      currentSequence: 1,
+  }, {});
-      scopeType: "global",
+
-      tableName: currentTableName ?? "",
+  // 검색 필터 적용
-      columnName: "",
+  const filteredGroups = Object.entries(groupedColumns).filter(([tableName, group]) => {
-    };
+    if (!columnSearch) return true;
-    setRulesList((prev) => [...prev, newRule]);
+    const search = columnSearch.toLowerCase();
-    setSelectedRuleId(newRule.ruleId);
+    return (
-    setCurrentRule(JSON.parse(JSON.stringify(newRule)));
+      tableName.toLowerCase().includes(search) ||
-    setSelectedPartOrder(null);
+      group.tableLabel.toLowerCase().includes(search) ||
-    toast.success("새 규칙이 추가되었습니다");
+      group.columns.some(
-  };
+        (c) => c.columnName.toLowerCase().includes(search) || c.columnLabel.toLowerCase().includes(search)
      )
    );
  });
  useEffect(() => {
-    if (currentRule) onChange?.(currentRule);
+    if (currentRule) {
      onChange?.(currentRule);
    }
  }, [currentRule, onChange]);
  // currentRule이 변경될 때 파트별 구분자 상태 동기화
  useEffect(() => {
    if (currentRule && currentRule.parts.length > 0) {
      const newSepTypes: Record<number, SeparatorType> = {};
      const newCustomSeps: Record<number, string> = {};
      currentRule.parts.forEach((part) => {
        const sep = part.separatorAfter ?? currentRule.separator ?? "-";
        if (sep === "") {
          newSepTypes[part.order] = "none";
          newCustomSeps[part.order] = "";
        } else {
-          const opt = SEPARATOR_OPTIONS.find(
+          const predefinedOption = SEPARATOR_OPTIONS.find(
-            (o) => o.value !== "custom" && o.value !== "none" && o.displayValue === sep
+            opt => opt.value !== "custom" && opt.value !== "none" && opt.displayValue === sep
          );
-          if (opt) {
+          if (predefinedOption) {
-            newSepTypes[part.order] = opt.value;
+            newSepTypes[part.order] = predefinedOption.value;
            newCustomSeps[part.order] = "";
          } else {
            newSepTypes[part.order] = "custom";
@ -121,45 +173,54 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
          }
        }
      });
      setSeparatorTypes(newSepTypes);
      setCustomSeparators(newCustomSeps);
    }
  }, [currentRule?.ruleId]);
  // 개별 파트 구분자 변경 핸들러
  const handlePartSeparatorChange = useCallback((partOrder: number, type: SeparatorType) => {
-    setSeparatorTypes((prev) => ({ ...prev, [partOrder]: type }));
+    setSeparatorTypes(prev => ({ ...prev, [partOrder]: type }));
    if (type !== "custom") {
-      const option = SEPARATOR_OPTIONS.find((opt) => opt.value === type);
+      const option = SEPARATOR_OPTIONS.find(opt => opt.value === type);
      const newSeparator = option?.displayValue ?? "";
-      setCustomSeparators((prev) => ({ ...prev, [partOrder]: "" }));
+      setCustomSeparators(prev => ({ ...prev, [partOrder]: "" }));
      setCurrentRule((prev) => {
        if (!prev) return null;
        return {
          ...prev,
-          parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, separatorAfter: newSeparator } : p)),
+          parts: prev.parts.map((part) =>
            part.order === partOrder ? { ...part, separatorAfter: newSeparator } : part
          ),
        };
      });
    }
  }, []);
  // 개별 파트 직접 입력 구분자 변경 핸들러
  const handlePartCustomSeparatorChange = useCallback((partOrder: number, value: string) => {
    const trimmedValue = value.slice(0, 2);
-    setCustomSeparators((prev) => ({ ...prev, [partOrder]: trimmedValue }));
+    setCustomSeparators(prev => ({ ...prev, [partOrder]: trimmedValue }));
    setCurrentRule((prev) => {
      if (!prev) return null;
      return {
        ...prev,
-        parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, separatorAfter: trimmedValue } : p)),
+        parts: prev.parts.map((part) =>
          part.order === partOrder ? { ...part, separatorAfter: trimmedValue } : part
        ),
      };
    });
  }, []);
  const handleAddPart = useCallback(() => {
    if (!currentRule) return;
    if (currentRule.parts.length >= maxRules) {
      toast.error(`최대 ${maxRules}개까지 추가할 수 있습니다`);
      return;
    }
    const newPart: NumberingRulePart = {
      id: `part-${Date.now()}`,
      order: currentRule.parts.length + 1,
@ -168,33 +229,40 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
      autoConfig: { textValue: "CODE" },
      separatorAfter: "-",
    };
-    setCurrentRule((prev) => (prev ? { ...prev, parts: [...prev.parts, newPart] } : null));
+
-    setSeparatorTypes((prev) => ({ ...prev, [newPart.order]: "-" }));
+    setCurrentRule((prev) => {
-    setCustomSeparators((prev) => ({ ...prev, [newPart.order]: "" }));
+      if (!prev) return null;
      return { ...prev, parts: [...prev.parts, newPart] };
    });
    // 새 파트의 구분자 상태 초기화
    setSeparatorTypes(prev => ({ ...prev, [newPart.order]: "-" }));
    setCustomSeparators(prev => ({ ...prev, [newPart.order]: "" }));
    toast.success(`규칙 ${newPart.order}가 추가되었습니다`);
  }, [currentRule, maxRules]);
  // partOrder 기반으로 파트 업데이트 (id가 null일 수 있으므로 order 사용)
  const handleUpdatePart = useCallback((partOrder: number, updates: Partial<NumberingRulePart>) => {
    setCurrentRule((prev) => {
      if (!prev) return null;
      return {
        ...prev,
-        parts: prev.parts.map((p) => (p.order === partOrder ? { ...p, ...updates } : p)),
+        parts: prev.parts.map((part) => (part.order === partOrder ? { ...part, ...updates } : part)),
      };
    });
  }, []);
  // partOrder 기반으로 파트 삭제 (id가 null일 수 있으므로 order 사용)
  const handleDeletePart = useCallback((partOrder: number) => {
    setCurrentRule((prev) => {
      if (!prev) return null;
      return {
        ...prev,
-        parts: prev.parts
+        parts: prev.parts.filter((part) => part.order !== partOrder).map((part, index) => ({ ...part, order: index + 1 })),
          .filter((p) => p.order !== partOrder)
          .map((p, i) => ({ ...p, order: i + 1 })),
      };
    });
-    setSelectedPartOrder(null);
+
    toast.success("규칙이 삭제되었습니다");
  }, []);
@ -203,283 +271,246 @@ export const NumberingRuleDesigner: React.FC<NumberingRuleDesignerProps> = ({
      toast.error("저장할 규칙이 없습니다");
      return;
    }
    if (currentRule.parts.length === 0) {
      toast.error("최소 1개 이상의 규칙을 추가해주세요");
      return;
    }
    setLoading(true);
    try {
      // 파트별 기본 autoConfig 정의
      const defaultAutoConfigs: Record<string, any> = {
        sequence: { sequenceLength: 3, startFrom: 1 },
        number: { numberLength: 4, numberValue: 1 },
        date: { dateFormat: "YYYYMMDD" },
        text: { textValue: "" },
      };
      // 저장 전에 각 파트의 autoConfig에 기본값 채우기
      const partsWithDefaults = currentRule.parts.map((part) => {
        if (part.generationMethod === "auto") {
          const defaults = defaultAutoConfigs[part.partType] || {};
-          return { ...part, autoConfig: { ...defaults, ...part.autoConfig } };
+          return {
            ...part,
            autoConfig: { ...defaults, ...part.autoConfig },
          };
        }
        return part;
      });
      const ruleToSave = {
        ...currentRule,
        parts: partsWithDefaults,
-        scopeType: "global" as const,
+        scopeType: "table" as const,
-        tableName: currentRule.tableName || currentTableName || "",
+        tableName: selectedColumn?.tableName || currentRule.tableName || "",
-        columnName: currentRule.columnName || "",
+        columnName: selectedColumn?.columnName || currentRule.columnName || "",
      };
      // 테스트 테이블에 저장 (numbering_rules)
      const response = await saveNumberingRuleToTest(ruleToSave);
      if (response.success && response.data) {
-        const saved: NumberingRuleConfig = JSON.parse(JSON.stringify(response.data));
+        const currentData = JSON.parse(JSON.stringify(response.data)) as NumberingRuleConfig;
-        setCurrentRule(saved);
+        setCurrentRule(currentData);
        setRulesList((prev) => {
          const idx = prev.findIndex((r) => r.ruleId === currentRule.ruleId);
          if (idx >= 0) {
            const next = [...prev];
            next[idx] = saved;
            return next;
          }
          return [...prev, saved];
        });
        setSelectedRuleId(saved.ruleId);
        await onSave?.(response.data);
        toast.success("채번 규칙이 저장되었습니다");
      } else {
-        showErrorToast("채번 규칙 저장에 실패했습니다", response.error, {
+        showErrorToast("채번 규칙 저장에 실패했습니다", response.error, { guidance: "설정을 확인하고 다시 시도해 주세요." });
          guidance: "설정을 확인하고 다시 시도해 주세요.",
        });
      }
-    } catch (error: unknown) {
+    } catch (error: any) {
-      showErrorToast("채번 규칙 저장에 실패했습니다", error, {
+      showErrorToast("채번 규칙 저장에 실패했습니다", error, { guidance: "설정을 확인하고 다시 시도해 주세요." });
        guidance: "설정을 확인하고 다시 시도해 주세요.",
      });
    } finally {
      setLoading(false);
    }
-  }, [currentRule, onSave, currentTableName]);
+  }, [currentRule, onSave, selectedColumn]);
  const selectedPart = currentRule?.parts.find((p) => p.order === selectedPartOrder) ?? null;
  const globalSep = currentRule?.separator ?? "-";
  const partItems = currentRule ? computePartDisplayItems(currentRule) : [];
  return (
-    <div className={cn("flex h-full", className)}>
+    <div className={`flex h-full gap-4 ${className}`}>
-      {/* 좌측: 규칙 리스트 (code-nav, 220px) */}
+      {/* 좌측: 채번 컬럼 목록 (카테고리 패턴) */}
-      <div className="code-nav flex w-[220px] flex-shrink-0 flex-col border-r border-border">
+      <div className="flex w-72 flex-shrink-0 flex-col gap-3">
-        <div className="code-nav-head flex items-center justify-between gap-2 border-b border-border px-3 py-2.5">
+        <h2 className="text-sm font-semibold sm:text-base">채번 컬럼</h2>
-          <div className="flex min-w-0 flex-1 items-center gap-2">
+
-            <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <Input
-            <span className="truncate text-xs font-bold">채번 규칙 ({rulesList.length})</span>
+          value={columnSearch}
-          </div>
+          onChange={(e) => setColumnSearch(e.target.value)}
-          <Button
+          placeholder="검색..."
-            size="sm"
+          className="h-8 text-xs"
-            variant="default"
+        />
-            className="h-8 shrink-0 gap-1 text-xs font-medium"
+
-            onClick={handleAddNewRule}
+        <div className="flex-1 space-y-1 overflow-y-auto">
-            disabled={isPreview || loading}
+          {loading && numberingColumns.length === 0 ? (
-          >
+            <div className="flex h-32 items-center justify-center">
-            <Plus className="h-3.5 w-3.5" />
+              <p className="text-muted-foreground text-xs">로딩 중...</p>
            추가
          </Button>
        </div>
        <div className="code-nav-list flex-1 overflow-y-auto">
          {loading && rulesList.length === 0 ? (
            <div className="flex h-24 items-center justify-center text-xs text-muted-foreground">
              로딩 중...
            </div>
-          ) : rulesList.length === 0 ? (
+          ) : filteredGroups.length === 0 ? (
-            <div className="flex h-24 items-center justify-center rounded-lg border border-dashed border-border bg-muted/50 text-xs text-muted-foreground">
+            <div className="border-border bg-muted/50 flex h-32 items-center justify-center rounded-lg border border-dashed">
-              규칙이 없습니다
+              <p className="text-muted-foreground text-xs">
                {numberingColumns.length === 0
                  ? "채번 타입 컬럼이 없습니다"
                  : "검색 결과가 없습니다"}
              </p>
            </div>
          ) : (
-            rulesList.map((rule) => {
+            filteredGroups.map(([tableName, group]) => (
-              const isSelected = selectedRuleId === rule.ruleId;
+              <div key={tableName} className="mb-2">
-              return (
+                <div className="text-muted-foreground mb-1 flex items-center gap-1 px-1 text-[11px] font-medium">
-                <button
+                  <FolderTree className="h-3 w-3" />
-                  key={rule.ruleId}
+                  <span>{group.tableLabel}</span>
-                  type="button"
+                  <span className="text-muted-foreground/60">({group.columns.length})</span>
-                  className={cn(
+                </div>
-                    "code-nav-item flex w-full items-center gap-2 border-b border-border/50 px-3 py-2 text-left transition-colors",
+                {group.columns.map((col) => {
-                    isSelected
+                  const isSelected =
-                      ? "border-l-[3px] border-primary bg-primary/5 pl-2.5 font-bold"
+                    selectedColumn?.tableName === col.tableName &&
-                      : "hover:bg-accent"
+                    selectedColumn?.columnName === col.columnName;
-                  )}
+                  return (
-                  onClick={() => handleSelectRule(rule)}
+                    <div
-                >
+                      key={`${col.tableName}.${col.columnName}`}
-                  <span className="rule-name min-w-0 flex-1 truncate text-xs font-semibold">
+                      className={cn(
-                    {rule.ruleName}
+                        "cursor-pointer rounded-md px-3 py-1.5 text-xs transition-colors",
-                  </span>
+                        isSelected
-                  <span className="rule-table max-w-[70px] shrink-0 truncate text-[9px] text-muted-foreground">
+                          ? "bg-primary/10 text-primary border-primary border font-medium"
-                    {rule.tableName || "-"}
+                          : "hover:bg-accent"
-                  </span>
+                      )}
-                  <span className="rule-parts shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[8px] font-bold text-muted-foreground">
+                      onClick={() => handleSelectColumn(col.tableName, col.columnName)}
-                    {rule.parts?.length ?? 0}
+                    >
-                  </span>
+                      {col.columnLabel}
-                </button>
+                    </div>
-              );
+                  );
-            })
+                })}
              </div>
            ))
          )}
        </div>
      </div>
-      {/* 우측: 미리보기 + 파이프라인 + 설정 + 저장 바 (code-main) */}
+      {/* 구분선 */}
-      <div className="code-main flex min-w-0 flex-1 flex-col overflow-hidden">
+      <div className="bg-border h-full w-px"></div>
      {/* 우측: 편집 영역 */}
      <div className="flex flex-1 flex-col gap-4">
        {!currentRule ? (
-          <div className="flex flex-1 flex-col items-center justify-center text-center">
+          <div className="flex h-full flex-col items-center justify-center">
-            <ListOrdered className="mb-3 h-10 w-10 text-muted-foreground" />
+            <div className="text-center">
-            <p className="mb-2 text-lg font-medium text-muted-foreground">규칙을 선택하세요</p>
+              <FolderTree className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-            <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground mb-2 text-lg font-medium">컬럼을 선택해주세요</p>
-              좌측에서 채번 규칙을 선택하거나 &quot;추가&quot;로 새 규칙을 만드세요
+              <p className="text-muted-foreground text-sm">좌측에서 채번 컬럼을 선택하면 규칙을 편집할 수 있습니다</p>
-            </p>
+            </div>
          </div>
        ) : (
          <>
-            <div className="flex flex-col gap-2 px-6 pt-4">
+            <div className="flex items-center justify-between">
-              <Label className="text-xs font-medium">규칙명</Label>
+              {editingRightTitle ? (
-              <Input
+                <Input
-                value={currentRule.ruleName}
+                  value={rightTitle}
-                onChange={(e) => setCurrentRule((prev) => (prev ? { ...prev, ruleName: e.target.value } : null))}
+                  onChange={(e) => setRightTitle(e.target.value)}
-                placeholder="예: 프로젝트 코드"
+                  onBlur={() => setEditingRightTitle(false)}
-                className="h-9 text-sm"
+                  onKeyDown={(e) => e.key === "Enter" && setEditingRightTitle(false)}
-              />
+                  className="h-8 text-sm font-semibold"
                  autoFocus
                />
              ) : (
                <h2 className="text-sm font-semibold sm:text-base">{rightTitle}</h2>
              )}
              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setEditingRightTitle(true)}>
                <Edit2 className="h-3 w-3" />
              </Button>
            </div>
-            {/* 큰 미리보기 스트립 (code-preview-strip) */}
+            <div className="space-y-3">
-            <div className="code-preview-strip flex-shrink-0 border-b border-border px-6 py-5">
+              {/* 첫 번째 줄: 규칙명 + 미리보기 */}
-              <NumberingRulePreview config={currentRule} variant="strip" />
+              <div className="flex items-center gap-3">
                <div className="flex-1 space-y-2">
                  <Label className="text-sm font-medium">규칙명</Label>
                  <Input
                    value={currentRule.ruleName}
                    onChange={(e) => setCurrentRule((prev) => ({ ...prev!, ruleName: e.target.value }))}
                    className="h-9"
                    placeholder="예: 프로젝트 코드"
                  />
                </div>
                <div className="flex-1 space-y-2">
                  <Label className="text-sm font-medium">미리보기</Label>
                  <NumberingRulePreview config={currentRule} />
                </div>
              </div>
            </div>
-            {/* 파이프라인 영역 (code-pipeline-area) */}
+            <div className="flex-1 overflow-y-auto">
-            <div className="code-pipeline-area flex flex-col gap-3 border-b border-border px-6 py-5">
+              <div className="mb-3 flex items-center justify-between">
-              <div className="area-label flex items-center gap-1.5">
+                <h3 className="text-sm font-semibold">코드 구성</h3>
-                <span className="text-xs font-bold">코드 구성</span>
+                <span className="text-muted-foreground text-xs">
                <span className="cnt text-xs font-medium text-muted-foreground">
                  {currentRule.parts.length}/{maxRules}
                </span>
              </div>
-              <div className="code-pipeline flex flex-1 flex-wrap items-center gap-0 overflow-x-auto overflow-y-hidden pb-2">
+
-                {currentRule.parts.length === 0 ? (
+              {currentRule.parts.length === 0 ? (
-                  <div className="flex h-24 min-w-[200px] items-center justify-center rounded-xl border-2 border-dashed border-border bg-muted/30 text-xs text-muted-foreground">
+                <div className="border-border bg-muted/50 flex h-32 items-center justify-center rounded-lg border border-dashed">
-                    규칙을 추가하여 코드를 구성하세요
+                  <p className="text-muted-foreground text-xs sm:text-sm">규칙을 추가하여 코드를 구성하세요</p>
-                  </div>
+                </div>
-                ) : (
+              ) : (
-                  <>
+                <div className="flex flex-wrap items-stretch gap-3">
-                    {currentRule.parts.map((part, index) => {
+                  {currentRule.parts.map((part, index) => (
-                      const item = partItems.find((i) => i.order === part.order);
+                    <React.Fragment key={`part-${part.order}-${index}`}>
-                      const sep = part.separatorAfter ?? globalSep;
+                      <div className="flex w-[200px] flex-col">
-                      const isSelected = selectedPartOrder === part.order;
+                        <NumberingRuleCard
-                      const typeLabel = CODE_PART_TYPE_OPTIONS.find((o) => o.value === part.partType)?.label ?? part.partType;
+                          part={part}
-                      return (
+                          onUpdate={(updates) => handleUpdatePart(part.order, updates)}
-                        <React.Fragment key={`part-${part.order}-${index}`}>
+                          onDelete={() => handleDeletePart(part.order)}
-                          <button
+                          isPreview={isPreview}
-                            type="button"
+                          tableName={selectedColumn?.tableName}
-                            className={cn(
+                        />
-                              "pipe-segment min-w-[120px] flex-shrink-0 rounded-[10px] border-2 px-4 py-3 text-center transition-all",
+                        {/* 카드 하단에 구분자 설정 (마지막 파트 제외) */}
-                              part.partType === "date" && "border-warning",
+                        {index < currentRule.parts.length - 1 && (
-                              part.partType === "text" && "border-primary",
+                          <div className="mt-2 flex items-center gap-1">
-                              part.partType === "sequence" && "border-primary",
+                            <span className="text-muted-foreground text-[10px] whitespace-nowrap">뒤 구분자</span>
-                              (part.partType === "number" || part.partType === "category" || part.partType === "reference") && "border-border",
+                            <Select
-                              isSelected && "border-primary bg-primary/5 shadow-md ring-2 ring-primary/30"
+                              value={separatorTypes[part.order] || "-"}
                              onValueChange={(value) => handlePartSeparatorChange(part.order, value as SeparatorType)}
                            >
                              <SelectTrigger className="h-6 flex-1 text-[10px]">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                {SEPARATOR_OPTIONS.map((option) => (
                                  <SelectItem key={option.value} value={option.value} className="text-xs">
                                    {option.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            {separatorTypes[part.order] === "custom" && (
                              <Input
                                value={customSeparators[part.order] || ""}
                                onChange={(e) => handlePartCustomSeparatorChange(part.order, e.target.value)}
                                className="h-6 w-14 text-center text-[10px]"
                                placeholder="2자"
                                maxLength={2}
                              />
                            )}
-                            onClick={() => setSelectedPartOrder(part.order)}
+                          </div>
-                          >
+                        )}
-                            <div className="seg-type text-[8px] font-bold uppercase tracking-wide text-muted-foreground">
+                      </div>
-                              {typeLabel}
+                    </React.Fragment>
-                            </div>
+                  ))}
-                            <div className={cn("seg-value mt-1 truncate font-mono text-base font-extrabold leading-none", getPartTypeColorClass(part.partType))}>
+                </div>
-                              {item?.displayValue ?? "-"}
+              )}
                            </div>
                          </button>
                          {index < currentRule.parts.length - 1 && (
                            <div className="pipe-connector flex w-8 flex-shrink-0 flex-col items-center justify-center gap-0.5">
                              <span className="conn-line text-xs font-bold text-muted-foreground">→</span>
                              <span className="conn-sep rounded border border-border bg-muted px-1 py-0.5 text-[8px] font-semibold text-muted-foreground">
                                {sep || "-"}
                              </span>
                            </div>
                          )}
                        </React.Fragment>
                      );
                    })}
                    <button
                      type="button"
                      className="pipe-add flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-dashed border-border text-muted-foreground transition-colors hover:border-primary hover:bg-primary/5 hover:text-primary"
                      onClick={handleAddPart}
                      disabled={currentRule.parts.length >= maxRules || isPreview || loading}
                      aria-label="규칙 추가"
                    >
                      <Plus className="h-5 w-5" />
                    </button>
                  </>
                )}
              </div>
            </div>
-            {/* 설정 패널 (선택된 세그먼트 상세, code-config-panel) */}
+            <div className="flex gap-2">
            {selectedPart && (
              <div className="code-config-panel min-h-0 flex-1 overflow-y-auto px-6 py-5">
                <div className="code-config-grid grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3">
                  <NumberingRuleCard
                    part={selectedPart}
                    onUpdate={(updates) => handleUpdatePart(selectedPart.order, updates)}
                    onDelete={() => handleDeletePart(selectedPart.order)}
                    isPreview={isPreview}
                    tableName={currentRule.tableName ?? currentTableName}
                  />
                </div>
                {currentRule.parts.some((p) => p.order === selectedPart.order) && (
                  <div className="mt-3 flex items-center gap-2">
                    <span className="text-[10px] text-muted-foreground">뒤 구분자</span>
                    <Select
                      value={separatorTypes[selectedPart.order] ?? "-"}
                      onValueChange={(v) => handlePartSeparatorChange(selectedPart.order, v as SeparatorType)}
                    >
                      <SelectTrigger className="h-7 w-24 text-xs">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {SEPARATOR_OPTIONS.map((opt) => (
                          <SelectItem key={opt.value} value={opt.value} className="text-xs">
                            {opt.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {separatorTypes[selectedPart.order] === "custom" && (
                      <Input
                        value={customSeparators[selectedPart.order] ?? ""}
                        onChange={(e) => handlePartCustomSeparatorChange(selectedPart.order, e.target.value)}
                        className="h-7 w-14 text-center text-[10px]"
                        placeholder="2자"
                        maxLength={2}
                      />
                    )}
                  </div>
                )}
              </div>
            )}
            {/* 저장 바 (code-save-bar) */}
            <div className="code-save-bar flex flex-shrink-0 items-center justify-between gap-4 border-t border-border bg-muted/30 px-6 py-4">
              <div className="min-w-0 flex-1 text-xs text-muted-foreground">
                {currentRule.tableName && (
                  <span>테이블: {currentRule.tableName}</span>
                )}
                {currentRule.columnName && (
                  <span className="ml-2">컬럼: {currentRule.columnName}</span>
                )}
                <span className="ml-2">구분자: {globalSep || "-"}</span>
                {currentRule.resetPeriod && currentRule.resetPeriod !== "none" && (
                  <span className="ml-2">리셋: {currentRule.resetPeriod}</span>
                )}
              </div>
              <Button
-                onClick={handleSave}
+                onClick={handleAddPart}
-                disabled={isPreview || loading}
+                disabled={currentRule.parts.length >= maxRules || isPreview || loading}
-                className="h-9 gap-2 text-sm font-medium"
+                variant="outline"
                className="h-9 flex-1 text-sm"
              >
-                <Save className="h-4 w-4" />
+                <Plus className="mr-2 h-4 w-4" />
                규칙 추가
              </Button>
              <Button onClick={handleSave} disabled={isPreview || loading} className="h-9 flex-1 text-sm">
                <Save className="mr-2 h-4 w-4" />
                {loading ? "저장 중..." : "저장"}
              </Button>
            </div>
--- a/frontend/components/numbering-rule/NumberingRulePreview.tsx
+++ b/frontend/components/numbering-rule/NumberingRulePreview.tsx
@ -1,163 +1,88 @@
 "use client";
 import React, { useMemo } from "react";
-import { cn } from "@/lib/utils";
+import { NumberingRuleConfig } from "@/types/numbering-rule";
 import { NumberingRuleConfig, NumberingRulePart, CodePartType } from "@/types/numbering-rule";
 import { CODE_PART_TYPE_OPTIONS } from "@/types/numbering-rule";
 /** 파트별 표시값 + 타입 (미리보기 스트립/세그먼트용) */
 export interface PartDisplayItem {
  partType: CodePartType;
  displayValue: string;
  order: number;
 }
 /** config에서 파트별 표시값 배열 계산 (정렬된 parts 기준) */
 export function computePartDisplayItems(config: NumberingRuleConfig): PartDisplayItem[] {
  if (!config.parts || config.parts.length === 0) return [];
  const sorted = [...config.parts].sort((a, b) => a.order - b.order);
  const globalSep = config.separator ?? "-";
  return sorted.map((part) => ({
    order: part.order,
    partType: part.partType,
    displayValue: getPartDisplayValue(part),
  }));
 }
 function getPartDisplayValue(part: NumberingRulePart): string {
  if (part.generationMethod === "manual") {
    return part.manualConfig?.value || "XXX";
  }
  const c = part.autoConfig || {};
  switch (part.partType) {
    case "sequence":
      return String(c.startFrom ?? 1).padStart(c.sequenceLength ?? 3, "0");
    case "number":
      return String(c.numberValue ?? 0).padStart(c.numberLength ?? 4, "0");
    case "date": {
      const format = c.dateFormat || "YYYYMMDD";
      if (c.useColumnValue && c.sourceColumnName) {
        return format === "YYYY" ? "[YYYY]" : format === "YY" ? "[YY]" : format === "YYYYMM" ? "[YYYYMM]" : format === "YYMM" ? "[YYMM]" : format === "YYMMDD" ? "[YYMMDD]" : "[DATE]";
      }
      const now = new Date();
      const y = now.getFullYear();
      const m = String(now.getMonth() + 1).padStart(2, "0");
      const d = String(now.getDate()).padStart(2, "0");
      if (format === "YYYY") return String(y);
      if (format === "YY") return String(y).slice(-2);
      if (format === "YYYYMM") return `${y}${m}`;
      if (format === "YYMM") return `${String(y).slice(-2)}${m}`;
      if (format === "YYYYMMDD") return `${y}${m}${d}`;
      if (format === "YYMMDD") return `${String(y).slice(-2)}${m}${d}`;
      return `${y}${m}${d}`;
    }
    case "text":
      return c.textValue || "TEXT";
    default:
      return "XXX";
  }
 }
 /** 파트 타입별 미리보기용 텍스트 색상 클래스 (CSS 변수 기반) */
 export function getPartTypeColorClass(partType: CodePartType): string {
  switch (partType) {
    case "date":
      return "text-warning";
    case "text":
      return "text-primary";
    case "sequence":
      return "text-primary";
    case "number":
      return "text-muted-foreground";
    case "category":
    case "reference":
      return "text-muted-foreground";
    default:
      return "text-foreground";
  }
 }
 /** 파트 타입별 점(dot) 배경 색상 (범례용) */
 export function getPartTypeDotClass(partType: CodePartType): string {
  switch (partType) {
    case "date":
      return "bg-warning";
    case "text":
    case "sequence":
      return "bg-primary";
    case "number":
    case "category":
    case "reference":
      return "bg-muted-foreground";
    default:
      return "bg-foreground";
  }
 }
 interface NumberingRulePreviewProps {
  config: NumberingRuleConfig;
  compact?: boolean;
  /** 큰 미리보기 스트립: 28px, 파트별 색상, 하단 범례 */
  variant?: "default" | "strip";
 }
 export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({ 
  config, 
-  compact = false,
+  compact = false 
  variant = "default",
 }) => {
  const partItems = useMemo(() => computePartDisplayItems(config), [config]);
  const sortedParts = useMemo(
    () => (config.parts ? [...config.parts].sort((a, b) => a.order - b.order) : []),
    [config.parts]
  );
  const generatedCode = useMemo(() => {
-    if (partItems.length === 0) return "규칙을 추가해주세요";
+    if (!config.parts || config.parts.length === 0) {
      return "규칙을 추가해주세요";
    }
    const sortedParts = config.parts.sort((a, b) => a.order - b.order);
    const partValues = sortedParts.map((part) => {
      if (part.generationMethod === "manual") {
        return part.manualConfig?.value || "XXX";
      }
      const autoConfig = part.autoConfig || {};
      switch (part.partType) {
        case "sequence": {
          const length = autoConfig.sequenceLength || 3;
          const startFrom = autoConfig.startFrom || 1;
          return String(startFrom).padStart(length, "0");
        }
        case "number": {
          const length = autoConfig.numberLength || 4;
          const value = autoConfig.numberValue || 0;
          return String(value).padStart(length, "0");
        }
        case "date": {
          const format = autoConfig.dateFormat || "YYYYMMDD";
          if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
            switch (format) {
              case "YYYY": return "[YYYY]";
              case "YY": return "[YY]";
              case "YYYYMM": return "[YYYYMM]";
              case "YYMM": return "[YYMM]";
              case "YYYYMMDD": return "[YYYYMMDD]";
              case "YYMMDD": return "[YYMMDD]";
              default: return "[DATE]";
            }
          }
          const now = new Date();
          const year = now.getFullYear();
          const month = String(now.getMonth() + 1).padStart(2, "0");
          const day = String(now.getDate()).padStart(2, "0");
          switch (format) {
            case "YYYY": return String(year);
            case "YY": return String(year).slice(-2);
            case "YYYYMM": return `${year}${month}`;
            case "YYMM": return `${String(year).slice(-2)}${month}`;
            case "YYYYMMDD": return `${year}${month}${day}`;
            case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
            default: return `${year}${month}${day}`;
          }
        }
        case "text":
          return autoConfig.textValue || "TEXT";
        default:
          return "XXX";
      }
    });
    // 파트별 개별 구분자로 결합
    const globalSep = config.separator ?? "-";
    let result = "";
-    partItems.forEach((item, idx) => {
+    partValues.forEach((val, idx) => {
-      result += item.displayValue;
+      result += val;
-      if (idx < partItems.length - 1) {
+      if (idx < partValues.length - 1) {
-        const part = sortedParts.find((p) => p.order === item.order);
+        const sep = sortedParts[idx].separatorAfter ?? globalSep;
-        result += part?.separatorAfter ?? globalSep;
+        result += sep;
      }
    });
    return result;
-  }, [config.separator, partItems, sortedParts]);
+  }, [config]);
  if (variant === "strip") {
    const globalSep = config.separator ?? "-";
    return (
      <div className="rounded-lg border border-border bg-gradient-to-b from-muted to-card px-4 py-4 sm:px-6 sm:py-5">
        <div className="font-mono text-[22px] font-extrabold tracking-tight sm:text-[28px]">
          {partItems.length === 0 ? (
            <span className="text-muted-foreground">규칙을 추가해주세요</span>
          ) : (
            partItems.map((item, idx) => (
              <React.Fragment key={item.order}>
                <span className={getPartTypeColorClass(item.partType)}>{item.displayValue}</span>
                {idx < partItems.length - 1 && (
                  <span className="text-muted-foreground">
                    {sortedParts.find((p) => p.order === item.order)?.separatorAfter ?? globalSep}
                  </span>
                )}
              </React.Fragment>
            ))
          )}
        </div>
        {partItems.length > 0 && (
          <div className="preview-desc mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
            {CODE_PART_TYPE_OPTIONS.filter((opt) => partItems.some((p) => p.partType === opt.value)).map((opt) => (
              <span key={opt.value} className="flex items-center gap-1.5">
                <span className={cn("h-[6px] w-[6px] shrink-0 rounded-full", getPartTypeDotClass(opt.value))} />
                {opt.label}
              </span>
            ))}
          </div>
        )}
      </div>
    );
  }
  if (compact) {
    return (
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@ -362,15 +362,15 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
    // 런타임 모드에서 컴포넌트 타입별 높이 처리
    if (!isDesignMode) {
      const compType = (component as any).componentType || component.componentConfig?.type || "";
-      // 레이아웃 계열: 부모 래퍼를 꽉 채움 (ResponsiveGridRenderer가 % 높이 관리)
+      // 테이블: 부모 flex 컨테이너가 높이 관리 (flex: 1)
-      const fillParentTypes = [
+      const flexGrowTypes = [
        "table-list", "v2-table-list",
        "split-panel-layout", "split-panel-layout2",
        "v2-split-panel-layout", "screen-split-panel",
        "v2-tab-container", "tab-container",
        "tabs-widget", "v2-tabs-widget",
      ];
-      if (fillParentTypes.some(t => compType === t)) {
+      if (flexGrowTypes.some(t => compType === t)) {
        return "100%";
      }
      const autoHeightTypes = [
--- a/frontend/components/screen/ResponsiveGridRenderer.tsx
+++ b/frontend/components/screen/ResponsiveGridRenderer.tsx
@ -23,9 +23,8 @@ function getComponentTypeId(component: ComponentData): string {
 }
 /**
- * 디자이너 절대좌표를 캔버스 대비 비율(%)로 변환하여 렌더링.
+ * 디자이너 절대좌표를 캔버스 대비 비율로 변환하여 렌더링.
- * 가로: 컨테이너 너비 대비 % → 반응형 스케일
+ * 화면이 줄어들면 비율에 맞게 축소, 늘어나면 확대.
 * 세로: 컨테이너 높이 대비 % → 뷰포트에 맞게 자동 조절
 */
 function ProportionalRenderer({
  components,
@ -48,12 +47,19 @@ function ProportionalRenderer({
  }, []);
  const topLevel = components.filter((c) => !c.parentId);
  const ratio = containerW > 0 ? containerW / canvasWidth : 1;
  const maxBottom = topLevel.reduce((max, c) => {
    const bottom = c.position.y + (c.size?.height || 40);
    return Math.max(max, bottom);
  }, 0);
  return (
    <div
      ref={containerRef}
      data-screen-runtime="true"
-      className="bg-background relative h-full w-full overflow-hidden"
+      className="bg-background relative w-full overflow-x-hidden"
      style={{ minHeight: containerW > 0 ? `${maxBottom * ratio}px` : "200px" }}
    >
      {containerW > 0 &&
        topLevel.map((component) => {
@ -66,9 +72,9 @@ function ProportionalRenderer({
              style={{
                position: "absolute",
                left: `${(component.position.x / canvasWidth) * 100}%`,
-                top: `${(component.position.y / canvasHeight) * 100}%`,
+                top: `${component.position.y * ratio}px`,
                width: `${((component.size?.width || 100) / canvasWidth) * 100}%`,
-                height: `${((component.size?.height || 40) / canvasHeight) * 100}%`,
+                height: `${(component.size?.height || 40) * ratio}px`,
                zIndex: component.position.z || 1,
              }}
            >
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@ -17,6 +17,7 @@ import {
  GroupComponent,
  DataTableComponent,
  TableInfo,
  LayoutComponent,
  FileComponent,
  AreaComponent,
 } from "@/types/screen";
@ -46,7 +47,7 @@ import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent
 // ComponentRegistry import (동적 ConfigPanel 가져오기용)
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
-import { columnMetaCache, loadColumnMeta } from "@/lib/registry/DynamicComponentRenderer";
+import { columnMetaCache } from "@/lib/registry/DynamicComponentRenderer";
 import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
 import StyleEditor from "../StyleEditor";
 import { Slider } from "@/components/ui/slider";
@ -97,24 +98,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
  // 🆕 전체 테이블 목록 (selected-items-detail-input 등에서 사용)
  const [allTables, setAllTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
  // 🆕 선택된 컴포넌트의 테이블에 대한 columnMeta 캐시가 비어 있으면 로드 후 재렌더
  const [columnMetaVersion, setColumnMetaVersion] = useState(0);
  useEffect(() => {
    if (!selectedComponent) return;
    const tblName =
      (selectedComponent as any).tableName ||
      currentTable?.tableName ||
      tables?.[0]?.tableName;
    if (!tblName) return;
    if (columnMetaCache[tblName]) return;
    loadColumnMeta(tblName).then(() => setColumnMetaVersion((v) => v + 1));
  }, [
    selectedComponent?.id,
    (selectedComponent as any)?.tableName,
    currentTable?.tableName,
    tables?.[0]?.tableName,
  ]);
  // 🆕 전체 테이블 목록 로드
  useEffect(() => {
    const loadAllTables = async () => {
@ -228,20 +211,20 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
        // 현재 화면의 테이블명 가져오기
        const currentTableName = tables?.[0]?.tableName;
-        // DB input_type만 조회 (saved config와 분리하여 전달)
+        // DB input_type 가져오기 (columnMetaCache에서 최신값 조회)
-        const colName = (selectedComponent as any).columnName || currentConfig.fieldKey || currentConfig.columnName;
+        const colName = selectedComponent.columnName || currentConfig.fieldKey || currentConfig.columnName;
-        const tblName = (selectedComponent as any).tableName || currentTable?.tableName || currentTableName;
+        const tblName = selectedComponent.tableName || currentTable?.tableName || currentTableName;
        const dbMeta = colName && tblName && !colName.includes(".") ? columnMetaCache[tblName]?.[colName] : undefined;
        const dbInputType = dbMeta ? (() => { const raw = dbMeta.input_type || dbMeta.inputType; return raw === "direct" || raw === "auto" ? undefined : raw; })() : undefined;
        const inputType = dbInputType || currentConfig.inputType || currentConfig.webType || (selectedComponent as any).inputType;
        // 컴포넌트별 추가 props
        const extraProps: Record<string, any> = {};
-        const resolvedTableName = (selectedComponent as any).tableName || currentTable?.tableName || currentTableName;
+        const resolvedTableName = selectedComponent.tableName || currentTable?.tableName || currentTableName;
-        const resolvedColumnName = (selectedComponent as any).columnName || currentConfig.fieldKey || currentConfig.columnName;
+        const resolvedColumnName = selectedComponent.columnName || currentConfig.fieldKey || currentConfig.columnName;
        if (componentId === "v2-input" || componentId === "v2-select") {
-          extraProps.componentType = componentId;
+          extraProps.inputType = inputType;
          extraProps.inputType = dbInputType;
          extraProps.tableName = resolvedTableName;
          extraProps.columnName = resolvedColumnName;
          extraProps.screenTableName = resolvedTableName;
@ -273,7 +256,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
        const currentConfig = selectedComponent.componentConfig || {};
        // 🔧 ConfigPanelWrapper를 인라인 함수 대신 직접 JSX 반환 (리마운트 방지)
-        const config = currentConfig || (definition as any).defaultProps?.componentConfig || {};
+        const config = currentConfig || definition.defaultProps?.componentConfig || {};
        const handlePanelConfigChange = (newConfig: any) => {
          // 🔧 Partial 업데이트: 기존 componentConfig를 유지하면서 새 설정만 병합
@ -299,14 +282,14 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                onConfigChange={handlePanelConfigChange}
                tables={tables}
                allTables={allTables}
-                screenTableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+                screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
-                tableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+                tableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
                columnName={
                  (selectedComponent as any).columnName || currentConfig?.columnName || currentConfig?.fieldName
                }
                inputType={(selectedComponent as any).inputType || currentConfig?.inputType}
                componentType={componentType}
-                tableColumns={(currentTable as any)?.columns || []}
+                tableColumns={currentTable?.columns || []}
                allComponents={allComponents}
                currentComponent={selectedComponent}
                menuObjid={menuObjid}
@ -340,8 +323,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
          componentType={componentType}
          config={selectedComponent.componentConfig || {}}
          onChange={handleDynamicConfigChange}
-          screenTableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+          screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
-          tableColumns={(currentTable as any)?.columns || []}
+          tableColumns={currentTable?.columns || []}
          tables={tables}
          menuObjid={menuObjid}
          allComponents={allComponents}
@ -508,7 +491,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
              <span className="text-muted-foreground text-xs">제목</span>
              <div className="w-[160px]">
                <Input
-                  value={(group as any).title || (area as any).title || ""}
+                  value={group.title || area.title || ""}
                  onChange={(e) => handleUpdate("title", e.target.value)}
                  placeholder="제목"
                  className="h-7 text-xs"
@ -520,7 +503,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                <span className="text-muted-foreground text-xs">설명</span>
                <div className="w-[160px]">
                  <Input
-                    value={(area as any).description || ""}
+                    value={area.description || ""}
                    onChange={(e) => handleUpdate("description", e.target.value)}
                    placeholder="설명"
                    className="h-7 text-xs"
@ -536,9 +519,9 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
          <h4 className="text-muted-foreground py-2 text-[10px] font-semibold tracking-wider uppercase">OPTIONS</h4>
          {(isInputField || widget.required !== undefined) &&
            (() => {
-              const colName = widget.columnName || (selectedComponent as any)?.columnName;
+              const colName = widget.columnName || selectedComponent?.columnName;
              const colMeta = colName
-                ? (currentTable as any)?.columns?.find(
+                ? currentTable?.columns?.find(
                    (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase(),
                  )
                : null;
@ -585,7 +568,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
          <div className="flex items-center justify-between py-1.5">
            <span className="text-muted-foreground text-xs">숨김</span>
            <Checkbox
-              checked={(selectedComponent as any).hidden === true || selectedComponent.componentConfig?.hidden === true}
+              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
              onCheckedChange={(checked) => {
                handleUpdate("hidden", checked);
                handleUpdate("componentConfig.hidden", checked);
@ -706,7 +689,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
              <div className="flex items-center justify-between py-1.5">
                <span className="text-muted-foreground text-xs">표시</span>
                <Checkbox
-                  checked={selectedComponent.style?.labelDisplay === true || (selectedComponent as any).labelDisplay === true}
+                  checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
                  onCheckedChange={(checked) => {
                    const boolValue = checked === true;
                    handleUpdate("style.labelDisplay", boolValue);
@ -802,7 +785,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
      const webType = selectedComponent.componentConfig?.webType;
      // 테이블 패널에서 드래그한 컴포넌트인지 확인
-      const isFromTablePanel = !!((selectedComponent as any).tableName && (selectedComponent as any).columnName);
+      const isFromTablePanel = !!(selectedComponent.tableName && selectedComponent.columnName);
      if (!componentId) {
        return (
@ -862,8 +845,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
          <DynamicComponentConfigPanel
            componentId={componentId}
            config={selectedComponent.componentConfig || {}}
-            screenTableName={(selectedComponent as any).tableName || currentTable?.tableName || currentTableName}
+            screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
-            tableColumns={(currentTable as any)?.columns || []}
+            tableColumns={currentTable?.columns || []}
            tables={tables}
            menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
            allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
@ -1023,8 +1006,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
          <DynamicComponentConfigPanel
            componentId={widget.widgetType}
            config={widget.componentConfig || {}}
-            screenTableName={(widget as any).tableName || currentTable?.tableName || currentTableName}
+            screenTableName={widget.tableName || currentTable?.tableName || currentTableName}
-            tableColumns={(currentTable as any)?.columns || []}
+            tableColumns={currentTable?.columns || []}
            tables={tables}
            menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
            allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
@ -1040,17 +1023,17 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
      return (
        <div className="space-y-4">
          {/* WebType 선택 (있는 경우만) */}
-          {(widget as any).webType && (
+          {widget.webType && (
            <div>
              <Label>입력 타입</Label>
-              <Select value={(widget as any).webType} onValueChange={(value) => handleUpdate("webType", value)}>
+              <Select value={widget.webType} onValueChange={(value) => handleUpdate("webType", value)}>
                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {webTypes.map((wt) => (
                    <SelectItem key={wt.web_type} value={wt.web_type}>
-                      {(wt as any).web_type_name_kor || wt.web_type}
+                      {wt.web_type_name_kor || wt.web_type}
                    </SelectItem>
                  ))}
                </SelectContent>
--- a/frontend/components/table-category/CategoryColumnList.tsx
+++ b/frontend/components/table-category/CategoryColumnList.tsx
@ -5,11 +5,10 @@ import { apiClient } from "@/lib/api/client";
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { ChevronRight, FolderTree, Loader2, Search, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
-export interface CategoryColumn {
+interface CategoryColumn {
  tableName: string;
-  tableLabel?: string;
+  tableLabel?: string; // 테이블 라벨 추가
  columnName: string;
  columnLabel: string;
  inputType: string;
@ -17,30 +16,17 @@ export interface CategoryColumn {
 }
 interface CategoryColumnListProps {
-  tableName: string;
+  tableName: string; // 현재 화면의 테이블 (사용하지 않음 - 형제 메뉴 전체 표시)
  selectedColumn: string | null;
-  onColumnSelect: (uniqueKeyOrColumnName: string, columnLabel: string, tableName: string) => void;
+  onColumnSelect: (columnName: string, columnLabel: string, tableName: string) => void;
-  menuObjid?: number;
+  menuObjid?: number; // 현재 메뉴 OBJID (필수)
  /** 대시보드 모드: 테이블 단위 네비만 표시, 선택 시 onTableSelect 호출 */
  selectedTable?: string | null;
  onTableSelect?: (tableName: string) => void;
  /** 컬럼 로드 완료 시 부모에 전달 (Stat Strip 등 계산용) */
  onColumnsLoaded?: (columns: CategoryColumn[]) => void;
 }
 /**
 * 카테고리 컬럼 목록 (좌측 패널)
 * - 형제 메뉴들의 모든 카테고리 타입 컬럼을 표시 (메뉴 스코프)
 */
-export function CategoryColumnList({
+export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect, menuObjid }: CategoryColumnListProps) {
  tableName,
  selectedColumn,
  onColumnSelect,
  menuObjid,
  selectedTable = null,
  onTableSelect,
  onColumnsLoaded,
 }: CategoryColumnListProps) {
  const [columns, setColumns] = useState<CategoryColumn[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
@ -165,8 +151,8 @@ export function CategoryColumnList({
      );
      setColumns(columnsWithCount);
      onColumnsLoaded?.(columnsWithCount);
      // 첫 번째 컬럼 자동 선택
      if (columnsWithCount.length > 0 && !selectedColumn) {
        const firstCol = columnsWithCount[0];
        onColumnSelect(`${firstCol.tableName}.${firstCol.columnName}`, firstCol.columnLabel, firstCol.tableName);
@ -174,7 +160,6 @@ export function CategoryColumnList({
    } catch (error) {
      console.error("❌ 테이블 기반 카테고리 컬럼 조회 실패:", error);
      setColumns([]);
      onColumnsLoaded?.([]);
    } finally {
      setIsLoading(false);
    }
@ -263,20 +248,21 @@ export function CategoryColumnList({
      }
      setColumns(columnsWithCount);
      onColumnsLoaded?.(columnsWithCount);
      // 첫 번째 컬럼 자동 선택
      if (columnsWithCount.length > 0 && !selectedColumn) {
        const firstCol = columnsWithCount[0];
        onColumnSelect(`${firstCol.tableName}.${firstCol.columnName}`, firstCol.columnLabel, firstCol.tableName);
      }
    } catch (error) {
      console.error("❌ 카테고리 컬럼 조회 실패:", error);
      // 에러 시에도 tableName 기반으로 fallback
      if (tableName) {
        console.log("⚠️ menuObjid API 에러, tableName 기반으로 fallback:", tableName);
        await loadCategoryColumnsByTable();
        return;
      } else {
        setColumns([]);
        onColumnsLoaded?.([]);
      }
    }
    setIsLoading(false);
@ -305,72 +291,6 @@ export function CategoryColumnList({
    );
  }
  // 대시보드 모드: 테이블 단위 네비만 표시
  if (onTableSelect != null) {
    return (
      <div className="flex h-full flex-col">
        <div className="border-b p-2.5">
          <div className="relative">
            <Search className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
            <Input
              type="text"
              placeholder="테이블 검색..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="h-8 border-0 bg-transparent pl-8 pr-8 text-xs shadow-none focus-visible:ring-0"
            />
            {searchQuery && (
              <button
                type="button"
                onClick={() => setSearchQuery("")}
                className="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
              >
                <X className="h-4 w-4" />
              </button>
            )}
          </div>
        </div>
        <div className="flex-1 space-y-0 overflow-y-auto">
          {filteredColumns.length === 0 && searchQuery ? (
            <div className="text-muted-foreground py-4 text-center text-xs">
              &apos;{searchQuery}&apos;에 대한 검색 결과가 없습니다
            </div>
          ) : null}
          {groupedColumns.map((group) => {
            const totalValues = group.columns.reduce((sum, c) => sum + (c.valueCount ?? 0), 0);
            const isActive = selectedTable === group.tableName;
            return (
              <button
                key={group.tableName}
                type="button"
                onClick={() => onTableSelect(group.tableName)}
                className={cn(
                  "flex w-full items-center gap-2 px-3 py-2.5 text-left transition-colors",
                  isActive
                    ? "border-l-[3px] border-primary bg-primary/5 font-bold text-primary"
                    : "hover:bg-muted/50",
                )}
              >
                <div
                  className="flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-[5px] bg-primary/20 text-primary"
                  aria-hidden
                >
                  <FolderTree className="h-3.5 w-3.5" />
                </div>
                <span className="min-w-0 flex-1 truncate text-xs font-medium">
                  {group.tableLabel || group.tableName}
                </span>
                <span className="bg-muted text-muted-foreground shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-bold">
                  {group.columns.length}
                </span>
              </button>
            );
          })}
        </div>
      </div>
    );
  }
  return (
    <div className="space-y-3">
      <div className="space-y-1">
@ -378,6 +298,7 @@ export function CategoryColumnList({
        <p className="text-muted-foreground text-xs">관리할 카테고리 컬럼을 선택하세요</p>
      </div>
      {/* 검색 입력 필드 */}
      <div className="relative">
        <Search className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
        <Input
@ -389,7 +310,6 @@ export function CategoryColumnList({
        />
        {searchQuery && (
          <button
            type="button"
            onClick={() => setSearchQuery("")}
            className="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
          >
--- a/frontend/components/table-category/CategoryValueAddDialog.tsx
+++ b/frontend/components/table-category/CategoryValueAddDialog.tsx
@ -120,7 +120,7 @@ export const CategoryValueAddDialog: React.FC<
        <div className="space-y-3 sm:space-y-4">
          <div>
            <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
-              이름 <span className="text-destructive">*</span>
+              이름
            </Label>
            <Input
              id="valueLabel"
--- a/frontend/components/table-category/CategoryValueEditDialog.tsx
+++ b/frontend/components/table-category/CategoryValueEditDialog.tsx
@ -86,7 +86,7 @@ export const CategoryValueEditDialog: React.FC<
        <div className="space-y-3 sm:space-y-4">
          <div>
            <Label htmlFor="valueLabel" className="text-xs sm:text-sm">
-              이름 <span className="text-destructive">*</span>
+              이름
            </Label>
            <Input
              id="valueLabel"
--- a/frontend/components/table-category/CategoryValueManager.tsx
+++ b/frontend/components/table-category/CategoryValueManager.tsx
@ -30,8 +30,6 @@ interface CategoryValueManagerProps {
  columnLabel: string;
  onValueCountChange?: (count: number) => void;
  menuObjid?: number; // 현재 메뉴 OBJID (메뉴 스코프)
  /** 편집기 헤더 오른쪽에 표시할 내용 (예: 트리/목록 세그먼트) */
  headerRight?: React.ReactNode;
 }
 export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
@ -40,7 +38,6 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
  columnLabel,
  onValueCountChange,
  menuObjid,
  headerRight,
 }) => {
  const { toast } = useToast();
  const [values, setValues] = useState<TableCategoryValue[]>([]);
@ -287,7 +284,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
  return (
    <div className="flex h-full flex-col">
-      {/* 편집기 헤더: 컬럼명 + 값 수 + 비활성 토글 + 새 값 추가 + headerRight(트리·목록 세그먼트 등) */}
+      {/* 헤더 */}
      <div className="border-b p-4">
        <div className="mb-4 flex items-center justify-between">
          <div>
@ -311,11 +308,11 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
                비활성 항목 표시
              </label>
            </div>
            <Button onClick={() => setIsAddDialogOpen(true)} size="sm">
              <Plus className="mr-2 h-4 w-4" />
              새 값 추가
            </Button>
            {headerRight != null ? <div className="flex items-center">{headerRight}</div> : null}
          </div>
        </div>
@ -408,6 +405,7 @@ export const CategoryValueManager: React.FC<CategoryValueManagerProps> = ({
                          value.isActive !== false
                        )
                      }
                      className="data-[state=checked]:bg-emerald-500"
                    />
                    <Button
--- a/frontend/components/table-category/CategoryValueManagerTree.tsx
+++ b/frontend/components/table-category/CategoryValueManagerTree.tsx
@ -19,7 +19,6 @@ import {
  Search,
  RefreshCw,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
@ -60,8 +59,6 @@ interface CategoryValueManagerTreeProps {
  columnName: string;
  columnLabel: string;
  onValueCountChange?: (count: number) => void;
  /** 편집기 헤더 오른쪽에 표시할 내용 (예: 트리/목록 세그먼트) */
  headerRight?: React.ReactNode;
 }
 // 트리 노드 컴포넌트
@ -117,13 +114,13 @@ const TreeNode: React.FC<TreeNodeProps> = ({
    return null;
  }
-  // 깊이별 아이콘 (대/중분류 = Folder, 소분류 = Tag)
+  // 깊이별 아이콘
  const getIcon = () => {
    if (hasChildren) {
      return isExpanded ? (
-        <FolderOpen className="text-muted-foreground h-4 w-4" />
+        <FolderOpen className="h-4 w-4 text-amber-500" />
      ) : (
-        <Folder className="text-muted-foreground h-4 w-4" />
+        <Folder className="h-4 w-4 text-amber-500" />
      );
    }
    return <Tag className="h-4 w-4 text-primary" />;
@ -144,28 +141,31 @@ const TreeNode: React.FC<TreeNodeProps> = ({
  };
  return (
-    <div className="mb-px">
+    <div>
      <div
        className={cn(
-          "group flex cursor-pointer items-center gap-[5px] rounded-[6px] px-[8px] py-[5px] transition-colors",
+          "group flex items-center gap-1 rounded-md px-2 py-2 transition-colors",
-          isSelected ? "border-primary border-l-2 bg-primary/10" : "hover:bg-muted/50",
+          isSelected ? "border-primary bg-primary/10 border-l-2" : "hover:bg-muted/50",
          isChecked && "bg-primary/5",
          "cursor-pointer",
        )}
        style={{ paddingLeft: `${level * 20 + 8}px` }}
        onClick={() => onSelect(node)}
      >
        {/* 체크박스 */}
        <Checkbox
          checked={isChecked}
          onCheckedChange={(checked) => {
            onCheck(node.valueId, checked as boolean);
          }}
          onClick={(e) => e.stopPropagation()}
-          className="mr-1 shrink-0"
+          className="mr-1"
        />
        {/* 확장 토글 */}
        <button
          type="button"
-          className="flex h-6 w-6 shrink-0 items-center justify-center rounded hover:bg-muted"
+          className="hover:bg-muted flex h-6 w-6 items-center justify-center rounded"
          onClick={(e) => {
            e.stopPropagation();
            if (hasChildren) {
@ -184,24 +184,22 @@ const TreeNode: React.FC<TreeNodeProps> = ({
          )}
        </button>
        {/* 아이콘 */}
        {getIcon()}
-        <div className="flex min-w-0 flex-1 items-center gap-[5px]">
+        {/* 라벨 */}
-          <span className={cn("truncate text-sm", node.depth === 1 && "font-medium")}>
+        <div className="flex flex-1 items-center gap-2">
-            {node.valueLabel}
+          <span className={cn("text-sm", node.depth === 1 && "font-medium")}>{node.valueLabel}</span>
-          </span>
+          <span className="bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px]">{getDepthLabel()}</span>
          <span className="bg-muted text-muted-foreground shrink-0 rounded-[4px] px-1.5 py-0.5 text-[8px] font-bold">
            {getDepthLabel()}
          </span>
        </div>
        {/* 비활성 표시 */}
        {!node.isActive && (
-          <span className="bg-destructive/5 text-destructive shrink-0 rounded-[4px] px-1.5 py-0.5 text-[8px] font-bold">
+          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-[10px]">비활성</span>
            비활성
          </span>
        )}
-        <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+        {/* 액션 버튼 */}
        <div className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
          {canAddChild && (
            <Button
              variant="ghost"
@ -274,7 +272,6 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
  columnName,
  columnLabel,
  onValueCountChange,
  headerRight,
 }) => {
  // 상태
  const [tree, setTree] = useState<CategoryValue[]>([]);
@ -637,13 +634,10 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
  return (
    <div className="flex h-full flex-col">
-      {/* 편집기 헤더: 컬럼명 + 값 수 Badge + 비활성/전체펼침/대분류추가 + headerRight(트리·목록 세그먼트 등) */}
+      {/* 헤더 */}
      <div className="mb-3 flex items-center justify-between border-b pb-3">
        <div className="flex items-center gap-2">
          <h3 className="text-base font-semibold">{columnLabel} 카테고리</h3>
          <Badge variant="secondary" className="rounded-full px-2 py-0.5 text-xs font-bold">
            {countAllValues(tree)}개
          </Badge>
          {checkedIds.size > 0 && (
            <span className="bg-primary/10 text-primary rounded-full px-2 py-0.5 text-xs">
              {checkedIds.size}개 선택
@ -671,7 +665,6 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
            <Plus className="h-3.5 w-3.5" />
            대분류 추가
          </Button>
          {headerRight != null ? <div className="flex items-center">{headerRight}</div> : null}
        </div>
      </div>
@ -727,7 +720,7 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
            <p className="text-muted-foreground mt-1 text-xs">상단의 대분류 추가 버튼을 클릭하여 시작하세요</p>
          </div>
        ) : (
-          <div className="py-1">
+          <div className="p-2">
            {tree.map((node) => (
              <TreeNode
                key={node.valueId}
--- a/frontend/components/ui/tabs.tsx
+++ b/frontend/components/ui/tabs.tsx
@ -26,7 +26,7 @@ function TabsList({
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
-        "bg-muted/50 text-muted-foreground inline-flex h-10 w-fit items-center justify-center rounded-lg border border-border/50 p-1",
+        "bg-muted/30 text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      )}
      {...props}
@ -42,7 +42,7 @@ function TabsTrigger({
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
-        "data-[state=active]:bg-background data-[state=active]:font-semibold dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-foreground/70 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
--- a/frontend/components/v2/V2Repeater.tsx
+++ b/frontend/components/v2/V2Repeater.tsx
@ -347,6 +347,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
      if (!tableName || currentData.length === 0) {
        console.warn("🔴 [V2Repeater] 저장 스킵:", { tableName, dataLength: currentData.length });
        toast.warning(`[디버그] V2Repeater 저장 스킵: data=${currentData.length}, table=${tableName}`);
        window.dispatchEvent(new CustomEvent("repeaterSaveComplete"));
        return;
      }
@ -355,6 +356,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
        const hasFkSource = sourceCol && mainFormData && mainFormData[sourceCol] !== undefined;
        if (!hasFkSource && !masterRecordId) {
          console.warn("🔴 [V2Repeater] FK 소스 값/masterRecordId 모두 없어 저장 스킵");
          window.dispatchEvent(new CustomEvent("repeaterSaveComplete"));
          return;
        }
      }
--- a/frontend/components/v2/config-panels/V2ButtonConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2ButtonConfigPanel.tsx
@ -433,9 +433,9 @@ export const V2ButtonConfigPanel: React.FC<V2ButtonConfigPanelProps> = ({
    loadAll();
  }, [actionType, config.action?.dataTransfer?.multiTableMappings, config.action?.dataTransfer?.targetTable, availableTables, loadTableColumns]);
-  // 화면 목록 로드 (모달/편집/네비게이트 액션용)
+  // 화면 목록 로드 (모달 액션용)
  useEffect(() => {
-    if (actionType !== "modal" && actionType !== "navigate" && actionType !== "edit") return;
+    if (actionType !== "modal" && actionType !== "navigate") return;
    if (screens.length > 0) return;
    const loadScreens = async () => {
@ -870,6 +870,7 @@ const ActionDetailSection: React.FC<{
  switch (actionType) {
    case "save":
    case "delete":
    case "edit":
    case "quickInsert":
      return (
        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
@ -878,6 +879,7 @@ const ActionDetailSection: React.FC<{
            <span className="text-sm font-medium">
              {actionType === "save" && "저장 설정"}
              {actionType === "delete" && "삭제 설정"}
              {actionType === "edit" && "편집 설정"}
              {actionType === "quickInsert" && "즉시 저장 설정"}
            </span>
          </div>
@ -898,147 +900,6 @@ const ActionDetailSection: React.FC<{
        </div>
      );
    case "edit":
      return (
        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
          <div className="flex items-center gap-2">
            <Pencil className="h-4 w-4 text-primary" />
            <span className="text-sm font-medium">편집 설정</span>
          </div>
          {/* 대상 화면 선택 */}
          <div>
            <Label className="text-xs">수정 폼 화면</Label>
            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
                  className="h-8 w-full justify-between text-xs"
                  disabled={screensLoading}
                >
                  {screensLoading
                    ? "로딩 중..."
                    : action.targetScreenId
                      ? screens.find((s) => s.id === action.targetScreenId)?.name || `화면 #${action.targetScreenId}`
                      : "화면 선택"}
                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                <Command shouldFilter={false}>
                  <CommandInput
                    placeholder="화면 검색..."
                    value={modalSearchTerm}
                    onValueChange={setModalSearchTerm}
                    className="text-xs"
                  />
                  <CommandList className="max-h-48">
                    <CommandEmpty className="py-3 text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
                    <CommandGroup>
                      {screens
                        .filter((s) =>
                          !modalSearchTerm ||
                          s.name.toLowerCase().includes(modalSearchTerm.toLowerCase()) ||
                          s.description?.toLowerCase().includes(modalSearchTerm.toLowerCase()) ||
                          String(s.id).includes(modalSearchTerm)
                        )
                        .map((screen) => (
                          <CommandItem
                            key={screen.id}
                            value={String(screen.id)}
                            onSelect={() => {
                              updateActionConfig("targetScreenId", screen.id);
                              setModalScreenOpen(false);
                              setModalSearchTerm("");
                            }}
                            className="text-xs"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-3 w-3",
                                action.targetScreenId === screen.id ? "opacity-100" : "opacity-0"
                              )}
                            />
                            <div className="flex flex-col">
                              <span className="font-medium">{screen.name}</span>
                              {screen.description && (
                                <span className="text-[10px] text-muted-foreground">{screen.description}</span>
                              )}
                            </div>
                          </CommandItem>
                        ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
          {/* 편집 모드 선택 */}
          <div>
            <Label className="text-xs">편집 모드</Label>
            <Select
              value={action.editMode || "modal"}
              onValueChange={(value) => updateActionConfig("editMode", value)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="modal" className="text-xs">모달로 열기</SelectItem>
                <SelectItem value="navigate" className="text-xs">페이지 이동</SelectItem>
              </SelectContent>
            </Select>
          </div>
          {/* 모달 모드일 때 추가 설정 */}
          {(action.editMode || "modal") === "modal" && (
            <>
              <div>
                <Label className="text-xs">모달 제목</Label>
                <Input
                  value={action.editModalTitle || ""}
                  onChange={(e) => updateActionConfig("editModalTitle", e.target.value)}
                  placeholder="데이터 수정"
                  className="h-7 text-xs"
                />
              </div>
              <div>
                <Label className="text-xs">모달 설명</Label>
                <Input
                  value={action.editModalDescription || ""}
                  onChange={(e) => updateActionConfig("editModalDescription", e.target.value)}
                  placeholder="모달 설명"
                  className="h-7 text-xs"
                />
              </div>
              <div>
                <Label className="text-xs">모달 크기</Label>
                <Select
                  value={action.modalSize || "lg"}
                  onValueChange={(value) => updateActionConfig("modalSize", value)}
                >
                  <SelectTrigger className="h-8 text-xs">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sm" className="text-xs">작게 (sm)</SelectItem>
                    <SelectItem value="md" className="text-xs">보통 (md)</SelectItem>
                    <SelectItem value="lg" className="text-xs">크게 (lg)</SelectItem>
                    <SelectItem value="xl" className="text-xs">아주 크게 (xl)</SelectItem>
                    <SelectItem value="full" className="text-xs">전체 (full)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </>
          )}
          {commonMessageSection}
        </div>
      );
    case "modal":
      return (
        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
--- a/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
@ -77,9 +77,9 @@ interface CategoryValueOption {
  valueLabel: string;
 }
-// ─── 하위 호환: 기존 config에서 fieldType 추론 (우선순위: DB값 > 사용자 fieldType > 컴포넌트구조 > saved config > 기본값) ───
+// ─── 하위 호환: 기존 config에서 fieldType 추론 ───
 function resolveFieldType(config: Record<string, any>, componentType?: string, metaInputType?: string): FieldType {
-  // (a) metaInputType: DB 전용 (undefined면 스킵, V2PropertiesPanel에서 dbInputType만 전달)
+  // DB input_type이 전달된 경우 (데이터타입관리에서 변경 시) 우선 적용
  if (metaInputType && metaInputType !== "direct" && metaInputType !== "auto") {
    const dbType = metaInputType as FieldType;
    if (["text", "number", "textarea", "numbering", "select", "category", "entity"].includes(dbType)) {
@ -87,10 +87,9 @@ function resolveFieldType(config: Record<string, any>, componentType?: string, m
    }
  }
  // (b) 사용자가 설정 패널에서 직접 선택한 fieldType
  if (config.fieldType) return config.fieldType as FieldType;
-  // (c) v2-select 계열: componentType 또는 config.source 기반
+  // v2-select 계열
  if (componentType === "v2-select" || config.source) {
    const source = config.source === "code" ? "category" : config.source;
    if (source === "entity") return "entity";
@ -98,13 +97,11 @@ function resolveFieldType(config: Record<string, any>, componentType?: string, m
    return "select";
  }
-  // (d) saved config fallback (config.inputType / config.type)
+  // v2-input 계열
  const it = config.inputType || config.type;
  if (it === "number") return "number";
  if (it === "textarea") return "textarea";
  if (it === "numbering") return "numbering";
  // (e) 최종 기본값
  return "text";
 }
--- a/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx
--- a/frontend/hooks/useLogin.ts
+++ b/frontend/hooks/useLogin.ts
@ -2,13 +2,12 @@
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { LoginFormData } from "@/types/auth";
+import { LoginFormData, LoginResponse } from "@/types/auth";
 import { AUTH_CONFIG, FORM_VALIDATION } from "@/constants/auth";
-import { apiCall } from "@/lib/api/client";
+import { API_BASE_URL } from "@/lib/api/client";
 /**
 * 로그인 관련 비즈니스 로직을 관리하는 커스텀 훅
 * API 호출은 lib/api/client의 apiCall(Axios) 사용 (fetch 직접 사용 금지)
 */
 export const useLogin = () => {
  const router = useRouter();
@ -74,34 +73,67 @@ export const useLogin = () => {
  }, [formData]);
  /**
-   * 기존 인증 상태 확인 (apiCall 사용)
+   * API 호출 공통 함수
   */
  const apiCall = useCallback(async (endpoint: string, options: RequestInit = {}): Promise<LoginResponse> => {
    // 로컬 스토리지에서 토큰 가져오기
    const token = localStorage.getItem("authToken");
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        ...(token && { Authorization: `Bearer ${token}` }),
        ...options.headers,
      },
      ...options,
    });
    const result = await response.json();
    return result;
  }, []);
  /**
   * 기존 인증 상태 확인
   */
  const checkExistingAuth = useCallback(async () => {
    try {
      // 로컬 스토리지에서 토큰 확인
      const token = localStorage.getItem("authToken");
-      if (!token) return;
+      if (!token) {
        // 토큰이 없으면 로그인 페이지 유지
        return;
      }
-      const result = await apiCall<{ isAuthenticated?: boolean }>("GET", AUTH_CONFIG.ENDPOINTS.STATUS);
+      // 토큰이 있으면 API 호출로 유효성 확인
      const result = await apiCall(AUTH_CONFIG.ENDPOINTS.STATUS);
      // 백엔드가 isAuthenticated 필드를 반환함
      if (result.success && result.data?.isAuthenticated) {
        // 이미 로그인된 경우 메인으로 리다이렉트
        router.push(AUTH_CONFIG.ROUTES.MAIN);
      } else {
        // 토큰이 유효하지 않으면 제거
        localStorage.removeItem("authToken");
        document.cookie = "authToken=; path=/; max-age=0; SameSite=Lax";
      }
-    } catch {
+    } catch (error) {
      // 에러가 발생하면 토큰 제거
      localStorage.removeItem("authToken");
      document.cookie = "authToken=; path=/; max-age=0; SameSite=Lax";
      console.debug("기존 인증 체크 중 오류 (정상):", error);
    }
-  }, [router]);
+  }, [apiCall, router]);
  /**
-   * 로그인 처리 (apiCall 사용 - Axios 기반, fetch 미사용)
+   * 로그인 처리
   */
  const handleLogin = useCallback(
    async (e: React.FormEvent) => {
      e.preventDefault();
      // 입력값 검증
      const validationError = validateForm();
      if (validationError) {
        setError(validationError);
@ -112,13 +144,9 @@ export const useLogin = () => {
      setError("");
      try {
-        const result = await apiCall<{
+        const result = await apiCall(AUTH_CONFIG.ENDPOINTS.LOGIN, {
-          token?: string;
+          method: "POST",
-          firstMenuPath?: string;
+          body: JSON.stringify(formData),
          popLandingPath?: string;
        }>("POST", AUTH_CONFIG.ENDPOINTS.LOGIN, {
          userId: formData.userId,
          password: formData.password,
        });
        if (result.success && result.data?.token) {
@ -157,7 +185,7 @@ export const useLogin = () => {
        setIsLoading(false);
      }
    },
-    [formData, validateForm, router, isPopMode],
+    [formData, validateForm, apiCall, router, isPopMode],
  );
  // 컴포넌트 마운트 시 기존 인증 상태 확인
--- a/frontend/lib/api/shipping.ts
+++ b/frontend/lib/api/shipping.ts
@ -1,60 +0,0 @@
 import { apiClient } from "./client";
 export interface EnrichedOrder {
  sourceId: string;
  orderNo: string;
  partCode: string;
  partName: string;
  partnerName: string;
  dueDate: string;
  orderQty: number;
  shipQty: number;
  balanceQty: number;
 }
 export interface ExistingPlan {
  id: number;
  sourceId: string;
  planQty: number;
  planDate: string;
  shipmentPlanNo: string;
  status: string;
 }
 export interface AggregateResponse {
  [partCode: string]: {
    totalBalance: number;
    totalPlanQty: number;
    currentStock: number;
    availableStock: number;
    inProductionQty: number;
    existingPlans: ExistingPlan[];
    orders: EnrichedOrder[];
  };
 }
 export interface BatchSavePlan {
  sourceId: string;
  planQty: number;
  planDate?: string;
 }
 // ID만 전달 → 백엔드에서 소스 테이블 자동 감지 + JOIN
 export async function getShippingPlanAggregate(ids: string[]) {
  const res = await apiClient.get("/shipping-plan/aggregate", {
    params: { ids: ids.join(",") },
  });
  return res.data as {
    success: boolean;
    data: AggregateResponse;
    source: "master" | "detail";
  };
 }
 export async function batchSaveShippingPlans(
  plans: BatchSavePlan[],
  source?: string
 ) {
  const res = await apiClient.post("/shipping-plan/batch", { plans, source });
  return res.data as { success: boolean; message?: string; data?: any };
 }
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@ -30,20 +30,18 @@ export function invalidateColumnMetaCache(tableName?: string): void {
  }
 }
-export async function loadColumnMeta(tableName: string, forceReload = false): Promise<void> {
+async function loadColumnMeta(tableName: string, forceReload = false): Promise<void> {
  const now = Date.now();
-  const cachedAt = columnMetaTimestamp[tableName];
+  const isStale = columnMetaTimestamp[tableName] && (now - columnMetaTimestamp[tableName] > CACHE_TTL_MS);
  const isStale =
    typeof cachedAt === "number" && now - cachedAt > CACHE_TTL_MS;
-  if (!forceReload && !isStale && tableName in columnMetaCache && columnMetaCache[tableName]) return;
+  if (!forceReload && !isStale && columnMetaCache[tableName]) return;
  if (forceReload || isStale) {
    delete columnMetaCache[tableName];
    delete columnMetaLoading[tableName];
  }
-  if (tableName in columnMetaLoading) {
+  if (columnMetaLoading[tableName]) {
    await columnMetaLoading[tableName];
    return;
  }
@ -665,8 +663,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
  }
  // 1. 새 컴포넌트 시스템에서 먼저 조회
-  const newComponent =
+  const newComponent = ComponentRegistry.getComponent(componentType);
    componentType != null ? ComponentRegistry.getComponent(componentType) : null;
  if (newComponent) {
    // 새 컴포넌트 시스템으로 렌더링
@ -778,7 +775,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
        // 렌더러 props 구성
        // 숨김 값 추출
-        const hiddenValue = (component as any).hidden || component.componentConfig?.hidden;
+        const hiddenValue = component.hidden || component.componentConfig?.hidden;
        // 숨김 처리: 인터랙티브 모드(실제 뷰)에서만 숨김, 디자인 모드에서는 표시
        if (hiddenValue && isInteractive) {
@ -895,7 +892,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
          // 새로운 기능들 전달
          // 🆕 webTypeConfig.numberingRuleId가 있으면 autoGeneration으로 변환
          autoGeneration:
-            (component as any).autoGeneration ||
+            component.autoGeneration ||
            component.componentConfig?.autoGeneration ||
            ((component as any).webTypeConfig?.numberingRuleId
              ? {
@ -995,15 +992,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
        let renderedElement: React.ReactElement;
        if (isClass) {
-          const RendererClass = NewComponentRenderer as new (props: any) => { render: () => React.ReactElement };
+          const rendererInstance = new NewComponentRenderer(rendererProps);
          const rendererInstance = new RendererClass(rendererProps);
          renderedElement = rendererInstance.render();
        } else {
-          const needsKeyRefresh =
+          renderedElement = <NewComponentRenderer key={refreshKey} {...rendererProps} />;
            componentType === "v2-table-list" ||
            componentType === "table-list" ||
            componentType === "v2-repeater";
          renderedElement = <NewComponentRenderer key={needsKeyRefresh ? refreshKey : component.id} {...rendererProps} />;
        }
        // 수평 라벨 → 라벨을 컴포넌트 영역 바깥에 absolute 배치, 입력은 100% 채움
@ -1012,9 +1004,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
          const labelFontSize = component.style?.labelFontSize || "14px";
          const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
          const labelFontWeight = component.style?.labelFontWeight || "500";
-          const isRequired =
+          const isRequired = effectiveComponent.required || isColumnRequiredByMeta(screenTableName, baseColumnName);
            effectiveComponent.required ||
            isColumnRequiredByMeta(screenTableName ?? "", baseColumnName ?? "");
          const isLeft = labelPosition === "left";
          return (
@ -1048,8 +1038,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
  }
  // 2. 레거시 시스템에서 조회
-  const renderer =
+  const renderer = legacyComponentRegistry.get(componentType);
    componentType != null ? legacyComponentRegistry.get(componentType) : undefined;
  if (!renderer) {
    console.error(`⚠️ 등록되지 않은 컴포넌트 타입: ${componentType}`, {
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@ -106,7 +106,6 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
  const [forceUpdate, setForceUpdate] = useState(0);
  const [representativeImageUrl, setRepresentativeImageUrl] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  // 🔑 레코드 모드 판단: formData에 id가 있으면 특정 행에 연결된 파일 관리
  const isRecordMode = !!(formData?.id && !String(formData.id).startsWith('temp_'));
@ -218,17 +217,18 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
    }
  }, [component.id, getUniqueKey, recordId, isRecordMode]);
-  // 모달 닫힘/저장 성공 시 localStorage 파일 캐시 정리 (등록 후 재등록 시 이전 파일 잔존 방지)
+  // 🆕 모달 닫힘/저장 성공 시 localStorage 파일 캐시 정리 (등록 후 재등록 시 이전 파일 잔존 방지)
  // 모달(Dialog) 내부의 컴포넌트만 초기화 대상 - 일반 화면의 파일 업로드는 초기화하지 않음
  useEffect(() => {
    const handleClearFileCache = (event: Event) => {
      // 모달 내부 컴포넌트만 초기화 (일반 화면에서는 스킵)
      const isInModal = containerRef.current ? !!containerRef.current.closest('[role="dialog"]') : false;
      if (!isInModal) {
        return;
      }
      const backupKey = getUniqueKey();
      const eventType = event.type;
      console.log("🧹 [DEBUG-CLEAR] 파일 캐시 정리 이벤트 수신:", {
        eventType,
        backupKey,
        componentId: component.id,
        currentFiles: uploadedFiles.length,
        hasLocalStorage: !!localStorage.getItem(backupKey),
      });
      try {
        localStorage.removeItem(backupKey);
        setUploadedFiles([]);
@ -238,15 +238,22 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
          delete globalFileState[backupKey];
          (window as any).globalFileState = globalFileState;
        }
        console.log("🧹 [DEBUG-CLEAR] 정리 완료:", backupKey);
      } catch (e) {
        console.warn("파일 캐시 정리 실패:", e);
      }
    };
    // EditModal 닫힘, ScreenModal 연속 등록 저장 성공, 일반 저장 성공 모두 처리
    window.addEventListener("closeEditModal", handleClearFileCache);
    window.addEventListener("saveSuccess", handleClearFileCache);
    window.addEventListener("saveSuccessInModal", handleClearFileCache);
    console.log("🔎 [DEBUG-CLEAR] 이벤트 리스너 등록 완료:", {
      componentId: component.id,
      backupKey: getUniqueKey(),
    });
    return () => {
      window.removeEventListener("closeEditModal", handleClearFileCache);
      window.removeEventListener("saveSuccess", handleClearFileCache);
@ -1183,11 +1190,10 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
  return (
    <div
      ref={containerRef}
      style={{
        ...componentStyle,
-        width: "100%",
+        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤
-        height: "100%",
+        height: "100%", // 🆕 부모 컨테이너 높이에 맞춤
        border: "none !important",
        boxShadow: "none !important",
        outline: "none !important",
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@ -119,7 +119,6 @@ import "./v2-approval-step/ApprovalStepRenderer"; // 결재 단계 시각화
 import "./v2-status-count/StatusCountRenderer"; // 상태별 카운트 카드
 import "./v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
 import "./v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
 import "./v2-shipping-plan-editor/ShippingPlanEditorRenderer"; // 출하계획 동시등록
 /**
 * 컴포넌트 초기화 함수
--- a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
@ -604,7 +604,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
      toast.dismiss();
      // UI 전환 액션 및 모달 액션은 로딩 토스트 표시하지 않음
-      const silentActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "approval", "event"];
+      const silentActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "approval"];
      if (!silentActions.includes(actionConfig.type)) {
        currentLoadingToastRef.current = toast.loading(
          actionConfig.type === "save"
@ -631,7 +631,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
      // 실패한 경우 오류 처리
      if (!success) {
        // UI 전환 액션 및 모달 액션은 에러도 조용히 처리 (모달 내부에서 자체 에러 표시)
-        const silentErrorActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "save", "delete", "quickInsert", "event"];
+        const silentErrorActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "save", "delete", "quickInsert"];
        if (silentErrorActions.includes(actionConfig.type)) {
          return;
        }
@ -691,27 +691,25 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
          target: "all",
        });
-        // 2. 모달 닫기 (약간의 딜레이, 모달 내부에서만)
+        // 2. 모달 닫기 (약간의 딜레이)
-        const isInEditModal = (props as any).isInModal;
+        setTimeout(() => {
-        const isInScreenModal = !!(props as any).isScreenModal || !!context.onClose;
+          // EditModal 내부인지 확인 (isInModal prop 사용)
          const isInEditModal = (props as any).isInModal;
-        if (isInEditModal || isInScreenModal) {
+          if (isInEditModal) {
-          setTimeout(() => {
+            v2EventBus.emitSync(V2_EVENTS.MODAL_CLOSE, {
-            if (isInEditModal) {
+              modalId: "edit-modal",
-              v2EventBus.emitSync(V2_EVENTS.MODAL_CLOSE, {
+              reason: "save",
                modalId: "edit-modal",
                reason: "save",
              });
            }
            // ScreenModal 연속 등록 모드 지원
            v2EventBus.emitSync(V2_EVENTS.MODAL_SAVE_SUCCESS, {
              modalId: "screen-modal",
              savedData: context.formData || {},
              tableName: context.tableName || "",
            });
-          }, 100);
+          }
-        }
+
          // ScreenModal은 연속 등록 모드를 지원하므로 saveSuccessInModal 이벤트 발생
          v2EventBus.emitSync(V2_EVENTS.MODAL_SAVE_SUCCESS, {
            modalId: "screen-modal",
            savedData: context.formData || {},
            tableName: context.tableName || "",
          });
        }, 100);
      }
    } catch (error) {
      // 로딩 토스트 제거
@ -940,28 +938,11 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
        effectiveMappingRules = multiTableMappings[0]?.mappingRules || [];
      }
      // 소스 DataProvider에서 엔티티 조인 메타데이터 가져오기
      const entityJoinColumns = sourceProvider?.getEntityJoinColumns?.() || [];
      if (entityJoinColumns.length > 0) {
        console.log(`🔗 [ButtonPrimary] 엔티티 조인 메타데이터 ${entityJoinColumns.length}개 감지`, entityJoinColumns);
      }
      const mappedData = sourceData.map((row) => {
-        const mappedRow = applyMappingRules(row, effectiveMappingRules, entityJoinColumns);
+        const mappedRow = applyMappingRules(row, effectiveMappingRules);
        // 소스 출처 추적: source_table과 source_id를 자동 주입
        // 타겟 테이블에 해당 컬럼이 있으면 저장되고, 없으면 자동 무시됨
        const sourceTracking: Record<string, any> = {};
        if (sourceTableName) {
          sourceTracking.source_table = sourceTableName;
        }
        if (row.id) {
          sourceTracking.source_id = row.id;
        }
        return {
          ...mappedRow,
          ...sourceTracking,
          ...additionalData,
        };
      });
--- a/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
+++ b/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
@ -2,19 +2,18 @@
 /**
 * V2 카테고리 관리 컴포넌트
- * - 대시보드 레이아웃: Stat Strip + 좌측 테이블 nav + 칩 바 + 트리/목록 편집기
+ * - 트리 구조 기반 카테고리 값 관리
 * - 3단계 계층 구조 지원 (대분류/중분류/소분류)
 */
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
 import type { CategoryColumn } from "@/components/table-category/CategoryColumnList";
 import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
 import { CategoryValueManagerTree } from "@/components/table-category/CategoryValueManagerTree";
 import { LayoutList, TreeDeciduous } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
 import { V2CategoryManagerConfig, defaultV2CategoryManagerConfig, ViewMode } from "./types";
 interface V2CategoryManagerComponentProps {
@ -34,87 +33,80 @@ export function V2CategoryManagerComponent({
  componentConfig,
  ...props
 }: V2CategoryManagerComponentProps) {
  // 설정 병합 (componentConfig도 포함)
  const config: V2CategoryManagerConfig = {
    ...defaultV2CategoryManagerConfig,
    ...externalConfig,
    ...componentConfig,
  };
-  const effectiveTableName =
+  // tableName 우선순위: props > selectedScreen > componentConfig
-    tableName || selectedScreen?.tableName || (componentConfig as any)?.tableName || "";
+  const effectiveTableName = tableName || selectedScreen?.tableName || (componentConfig as any)?.tableName || "";
  // menuObjid 우선순위: props > selectedScreen
  const propsMenuObjid = typeof props.menuObjid === "number" ? props.menuObjid : undefined;
  const effectiveMenuObjid = menuObjid || propsMenuObjid || selectedScreen?.menuObjid;
-  const [columns, setColumns] = useState<CategoryColumn[]>([]);
+  // 디버그 로그
-  const [selectedTable, setSelectedTable] = useState<string | null>(null);
+  useEffect(() => {
    console.log("🔍 V2CategoryManagerComponent props:", {
      tableName,
      menuObjid,
      selectedScreen,
      effectiveTableName,
      effectiveMenuObjid,
      config,
    });
  }, [tableName, menuObjid, selectedScreen, effectiveTableName, effectiveMenuObjid, config]);
  // 선택된 컬럼 상태
  const [selectedColumn, setSelectedColumn] = useState<{
    uniqueKey: string;
    columnName: string;
    columnLabel: string;
    tableName: string;
  } | null>(null);
  // 뷰 모드 상태
  const [viewMode, setViewMode] = useState<ViewMode>(config.viewMode);
-  const handleColumnsLoaded = useCallback((loaded: CategoryColumn[]) => {
+  // 컬럼 선택 핸들러
-    setColumns(loaded);
+  const handleColumnSelect = useCallback((uniqueKey: string, columnLabel: string, tableName: string) => {
-    if (loaded.length > 0) {
+    const columnName = uniqueKey.split(".")[1];
-      setSelectedTable((prev) => prev ?? loaded[0].tableName);
+    setSelectedColumn({ uniqueKey, columnName, columnLabel, tableName });
    }
  }, []);
-  const handleTableSelect = useCallback((tableName: string) => {
+  // 우측 패널 콘텐츠
    setSelectedTable(tableName);
    setSelectedColumn(null);
  }, []);
  const handleColumnSelect = useCallback(
    (uniqueKey: string, columnLabel: string, colTableName: string) => {
      const columnName = uniqueKey.includes(".") ? uniqueKey.split(".")[1] : uniqueKey;
      setSelectedColumn({ uniqueKey: uniqueKey.includes(".") ? uniqueKey : `${colTableName}.${uniqueKey}`, columnName, columnLabel, tableName: colTableName });
    },
    [],
  );
  const stats = useMemo(() => {
    const columnCount = columns.length;
    const totalValues = columns.reduce((sum, c) => sum + (c.valueCount ?? 0), 0);
    const tableCount = new Set(columns.map((c) => c.tableName)).size;
    const inactiveCount = 0;
    return { columnCount, totalValues, tableCount, inactiveCount };
  }, [columns]);
  const columnsForSelectedTable = useMemo(
    () => (selectedTable ? columns.filter((c) => c.tableName === selectedTable) : []),
    [columns, selectedTable],
  );
  /** 편집기 헤더에 표시할 트리/목록 세그먼트 (보기 방식 토글) */
  const viewModeSegment =
    config.showViewModeToggle ? (
      <div className="flex rounded-md border p-0.5">
        <Button
          variant="ghost"
          size="sm"
          className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "tree" && "bg-accent")}
          onClick={() => setViewMode("tree")}
        >
          <TreeDeciduous className="h-3.5 w-3.5" />
          트리
        </Button>
        <Button
          variant="ghost"
          size="sm"
          className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "list" && "bg-accent")}
          onClick={() => setViewMode("list")}
        >
          <LayoutList className="h-3.5 w-3.5" />
          목록
        </Button>
      </div>
    ) : null;
  const rightContent = (
    <>
      {/* 뷰 모드 토글 */}
      {config.showViewModeToggle && (
        <div className="mb-2 flex items-center justify-end gap-1">
          <span className="text-muted-foreground mr-2 text-xs">보기 방식:</span>
          <div className="flex rounded-md border p-0.5">
            <Button
              variant="ghost"
              size="sm"
              className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "tree" && "bg-accent")}
              onClick={() => setViewMode("tree")}
            >
              <TreeDeciduous className="h-3.5 w-3.5" />
              트리
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "list" && "bg-accent")}
              onClick={() => setViewMode("list")}
            >
              <LayoutList className="h-3.5 w-3.5" />
              목록
            </Button>
          </div>
        </div>
      )}
      {/* 카테고리 값 관리 */}
      <div className="min-h-0 flex-1 overflow-y-auto">
        {selectedColumn ? (
          viewMode === "tree" ? (
@ -123,7 +115,6 @@ export function V2CategoryManagerComponent({
              tableName={selectedColumn.tableName}
              columnName={selectedColumn.columnName}
              columnLabel={selectedColumn.columnLabel}
              headerRight={viewModeSegment}
            />
          ) : (
            <CategoryValueManager
@ -132,7 +123,6 @@ export function V2CategoryManagerComponent({
              columnName={selectedColumn.columnName}
              columnLabel={selectedColumn.columnLabel}
              menuObjid={effectiveMenuObjid}
              headerRight={viewModeSegment}
            />
          )
        ) : (
@ -140,9 +130,7 @@ export function V2CategoryManagerComponent({
            <div className="flex flex-col items-center gap-2 text-center">
              <TreeDeciduous className="text-muted-foreground/30 h-10 w-10" />
              <p className="text-muted-foreground text-sm">
-                {config.showColumnList
+                {config.showColumnList ? "좌측에서 관리할 카테고리 컬럼을 선택하세요" : "카테고리 컬럼이 설정되지 않았습니다"}
                  ? "칩에서 카테고리 컬럼을 선택하세요"
                  : "카테고리 컬럼이 설정되지 않았습니다"}
              </p>
            </div>
          </div>
@ -160,107 +148,24 @@ export function V2CategoryManagerComponent({
  }
  return (
-    <div
+    <ResponsiveSplitPanel
-      className="flex h-full flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm"
+      left={
-      style={{ height: config.height }}
+        <CategoryColumnList
-    >
+          tableName={effectiveTableName}
-      {/* Stat Strip: 카테고리 컬럼(primary) | 전체 값(success) | 테이블(primary) | 비활성(warning) */}
+          selectedColumn={selectedColumn?.uniqueKey || null}
-      <div className="grid grid-cols-4 border-b bg-background">
+          onColumnSelect={handleColumnSelect}
-        <div className="border-r py-3.5 text-center last:border-r-0">
+          menuObjid={effectiveMenuObjid}
-          <div className="text-[22px] font-extrabold leading-none tracking-tight text-primary">
+        />
-            {stats.columnCount}
+      }
-          </div>
+      right={rightContent}
-          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
+      leftTitle="카테고리 컬럼"
-            카테고리 컬럼
+      leftWidth={config.leftPanelWidth}
-          </div>
+      minLeftWidth={10}
-        </div>
+      maxLeftWidth={40}
-        <div className="border-r py-3.5 text-center last:border-r-0">
+      height={config.height}
-          <div className="text-[22px] font-extrabold leading-none tracking-tight text-success">
+    />
            {stats.totalValues}
          </div>
          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
            전체 값
          </div>
        </div>
        <div className="border-r py-3.5 text-center last:border-r-0">
          <div className="text-[22px] font-extrabold leading-none tracking-tight text-primary">
            {stats.tableCount}
          </div>
          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
            테이블
          </div>
        </div>
        <div className="py-3.5 text-center">
          <div className="text-[22px] font-extrabold leading-none tracking-tight text-warning">
            {stats.inactiveCount}
          </div>
          <div className="mt-1 text-[9px] font-semibold uppercase tracking-widest text-muted-foreground">
            비활성
          </div>
        </div>
      </div>
      <div className="flex min-h-0 flex-1">
        {/* 좌측 테이블 nav: 240px */}
        <div className="flex w-[240px] shrink-0 flex-col border-r">
          <CategoryColumnList
            tableName={effectiveTableName}
            selectedColumn={selectedColumn?.uniqueKey ?? null}
            onColumnSelect={handleColumnSelect}
            menuObjid={effectiveMenuObjid}
            selectedTable={selectedTable}
            onTableSelect={setSelectedTable}
            onColumnsLoaded={handleColumnsLoaded}
          />
        </div>
        {/* 우측: 칩 바 + 편집기 */}
        <div className="flex min-w-0 flex-1 flex-col">
          {/* 칩 바 */}
          <div className="flex flex-wrap gap-1.5 border-b bg-background px-4 py-3">
            {columnsForSelectedTable.map((col) => {
              const uniqueKey = `${col.tableName}.${col.columnName}`;
              const isActive = selectedColumn?.uniqueKey === uniqueKey;
              return (
                <button
                  key={uniqueKey}
                  type="button"
                  onClick={() =>
                    handleColumnSelect(uniqueKey, col.columnLabel || col.columnName, col.tableName)
                  }
                  className={cn(
                    "inline-flex items-center gap-1.5 rounded-full border px-[10px] py-[5px] text-[11px] font-semibold transition-colors",
                    isActive
                      ? "border-primary bg-primary/5 text-primary"
                      : "border-border bg-muted/50 hover:border-primary hover:bg-primary/5 hover:text-primary",
                  )}
                >
                  <span>{col.columnLabel || col.columnName}</span>
                  <Badge
                    variant="secondary"
                    className={cn(
                      "h-4 rounded-full px-1.5 text-[9px] font-bold",
                      isActive ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground",
                    )}
                  >
                    {col.valueCount ?? 0}
                  </Badge>
                </button>
              );
            })}
            {selectedTable && columnsForSelectedTable.length === 0 && (
              <span className="text-muted-foreground text-xs">이 테이블에 카테고리 컬럼이 없습니다</span>
            )}
          </div>
          {/* 편집기 영역 */}
          <div className="flex min-h-0 flex-1 flex-col overflow-hidden p-3">
            {rightContent}
          </div>
        </div>
      </div>
    </div>
  );
 }
 export default V2CategoryManagerComponent;
--- a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
@ -105,7 +105,6 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
  const [forceUpdate, setForceUpdate] = useState(0);
  const [representativeImageUrl, setRepresentativeImageUrl] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  // objid 기반으로 파일이 로드되었는지 추적 (다른 이펙트가 덮어쓰지 않도록 방지)
  const filesLoadedFromObjidRef = useRef(false);
@ -198,9 +197,7 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
  useEffect(() => {
    if (!imageObjidFromFormData) {
      // formData에서 값이 사라지면 파일 목록도 초기화 (새 등록 시)
-      // 단, 모달 내부의 컴포넌트만 초기화 - 일반 화면에서는 저장 후 리셋으로 인한 초기화 방지
+      if (uploadedFiles.length > 0 && !isRecordMode) {
      const isInModal = containerRef.current ? !!containerRef.current.closest('[role="dialog"]') : false;
      if (uploadedFiles.length > 0 && !isRecordMode && isInModal) {
        setUploadedFiles([]);
        filesLoadedFromObjidRef.current = false;
      }
@ -1061,11 +1058,11 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
  return (
    <div
      ref={containerRef}
      style={{
        ...componentStyle,
        width: "100%",
        height: "100%",
        // 🔧 !important 제거 - 커스텀 스타일이 없을 때만 기본값 적용
        border: hasCustomBorder ? undefined : "none",
        boxShadow: "none",
        outline: "none",
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx
+++ b/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx
@ -1,797 +0,0 @@
 "use client";
 import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import { ComponentRendererProps } from "@/types/component";
 import {
  Loader2,
  Package,
  TrendingUp,
  Warehouse,
  CheckCircle,
  Factory,
  Truck,
  Plus,
  X,
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
 import {
  ShippingPlanEditorConfig,
  ItemGroup,
  PlanDetailRow,
  ItemAggregation,
 } from "./types";
 import { getShippingPlanAggregate, batchSaveShippingPlans } from "@/lib/api/shipping";
 export interface ShippingPlanEditorComponentProps
  extends ComponentRendererProps {}
 export const ShippingPlanEditorComponent: React.FC<
  ShippingPlanEditorComponentProps
 > = ({ component, isDesignMode = false, groupedData, formData, onFormDataChange, onClose, ...props }) => {
  const config = (component?.componentConfig ||
    {}) as ShippingPlanEditorConfig;
  const [itemGroups, setItemGroups] = useState<ItemGroup[]>([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [source, setSource] = useState<"master" | "detail">("detail");
  const itemGroupsRef = useRef<ItemGroup[]>([]);
  const sourceRef = useRef<"master" | "detail">("detail");
  // groupedData에서 선택된 행 추출 (마스터든 디테일이든 그대로)
  const selectedRows = useMemo(() => {
    if (!groupedData) return [];
    if (Array.isArray(groupedData)) return groupedData;
    if (groupedData.selectedRows) return groupedData.selectedRows;
    if (groupedData.data) return groupedData.data;
    return [];
  }, [groupedData]);
  // 선택된 행의 ID 목록 추출 (문자열)
  const selectedIds = useMemo(() => {
    return selectedRows
      .map((row: any) => String(row.id))
      .filter((id: string) => id && id !== "undefined" && id !== "null");
  }, [selectedRows]);
  const loadData = useCallback(async () => {
    if (selectedIds.length === 0 || isDesignMode) return;
    setLoading(true);
    try {
      // ID만 보내면 백엔드에서 소스 감지 + JOIN + 정규화
      const res = await getShippingPlanAggregate(selectedIds);
      if (!res.success) {
        toast.error("집계 데이터 조회 실패");
        return;
      }
      setSource(res.source);
      const aggregateData = res.data || {};
      const groups: ItemGroup[] = Object.entries(aggregateData).map(
        ([partCode, data]) => {
          const details: PlanDetailRow[] = [];
          // 수주별로 기존 계획 합산량 계산
          const existingPlansBySource = new Map<string, number>();
          for (const plan of data.existingPlans || []) {
            const prev = existingPlansBySource.get(plan.sourceId) || 0;
            existingPlansBySource.set(plan.sourceId, prev + plan.planQty);
          }
          // 신규 행 먼저: 모든 수주에 대해 항상 추가 (분할출하 대응)
          for (const order of data.orders || []) {
            const alreadyPlanned = existingPlansBySource.get(order.sourceId) || 0;
            const remainingBalance = Math.max(0, order.balanceQty - alreadyPlanned);
            details.push({
              type: "new",
              sourceId: order.sourceId,
              orderNo: order.orderNo,
              partnerName: order.partnerName,
              dueDate: order.dueDate,
              balanceQty: remainingBalance,
              planQty: 0,
              planDate: new Date().toISOString().split("T")[0],
              splitKey: `${order.sourceId}_0`,
            });
          }
          // 기존 출하계획 아래에 표시
          for (const plan of data.existingPlans || []) {
            const matchOrder = data.orders?.find(
              (o) => o.sourceId === plan.sourceId
            );
            details.push({
              type: "existing",
              sourceId: plan.sourceId,
              orderNo: matchOrder?.orderNo || "-",
              partnerName: matchOrder?.partnerName || "-",
              dueDate: matchOrder?.dueDate || "-",
              balanceQty: matchOrder?.balanceQty || 0,
              planQty: plan.planQty,
              existingPlanId: plan.id,
            });
          }
          // partName: orders에서 가져오기
          const partName =
            data.orders?.[0]?.partName || partCode;
          return {
            partCode,
            partName,
            aggregation: {
              totalBalance: data.totalBalance,
              totalPlanQty: data.totalPlanQty,
              currentStock: data.currentStock,
              availableStock: data.availableStock,
              inProductionQty: data.inProductionQty,
            },
            details,
          };
        }
      );
      setItemGroups(groups);
    } catch (err) {
      console.error("[v2-shipping-plan-editor] 데이터 로드 실패:", err);
      toast.error("데이터를 불러오는데 실패했습니다");
    } finally {
      setLoading(false);
    }
  }, [selectedIds, isDesignMode]);
  useEffect(() => {
    loadData();
  }, [loadData]);
  // ref 동기화 (이벤트 핸들러에서 최신 state 접근용)
  useEffect(() => {
    itemGroupsRef.current = itemGroups;
  }, [itemGroups]);
  useEffect(() => {
    sourceRef.current = source;
  }, [source]);
  // 저장 로직 (ref 기반으로 최신 state 접근, 재구독 방지)
  const savingRef = useRef(false);
  const onCloseRef = useRef(onClose);
  onCloseRef.current = onClose;
  const configRef = useRef(config);
  configRef.current = config;
  const handleSave = useCallback(async () => {
    if (savingRef.current) return;
    const currentGroups = itemGroupsRef.current;
    const currentSource = sourceRef.current;
    const currentConfig = configRef.current;
    const plans = currentGroups.flatMap((g) =>
      g.details
        .filter((d) => d.type === "new" && d.planQty > 0)
        .map((d) => ({
          sourceId: d.sourceId,
          planQty: d.planQty,
          planDate: d.planDate || new Date().toISOString().split("T")[0],
          balanceQty: d.balanceQty,
        }))
    );
    if (plans.length === 0) {
      toast.warning("저장할 출하계획이 없습니다. 수량을 입력해주세요.");
      return;
    }
    // 같은 sourceId별 합산 → 미출하량 초과 검증
    if (!currentConfig.allowOverPlan) {
      const sumBySource = new Map<string, { total: number; balance: number }>();
      for (const p of plans) {
        const prev = sumBySource.get(p.sourceId) || { total: 0, balance: p.balanceQty };
        sumBySource.set(p.sourceId, {
          total: prev.total + p.planQty,
          balance: prev.balance,
        });
      }
      for (const [, val] of sumBySource) {
        if (val.balance > 0 && val.total > val.balance) {
          toast.error("분할 출하계획의 합산이 미출하량을 초과합니다.");
          return;
        }
      }
    }
    // 저장 전 확인 (confirmBeforeSave = true일 때)
    if (currentConfig.confirmBeforeSave) {
      const msg = currentConfig.confirmMessage || "출하계획을 저장하시겠습니까?";
      if (!window.confirm(msg)) return;
    }
    savingRef.current = true;
    setSaving(true);
    try {
      const savePlans = plans.map((p) => ({ sourceId: p.sourceId, planQty: p.planQty, planDate: p.planDate }));
      const res = await batchSaveShippingPlans(savePlans, currentSource);
      if (res.success) {
        toast.success(`${plans.length}건의 출하계획이 저장되었습니다.`);
        if (currentConfig.autoCloseOnSave !== false && onCloseRef.current) {
          onCloseRef.current();
        }
      } else {
        toast.error(res.error || "출하계획 저장에 실패했습니다.");
      }
    } catch (err) {
      console.error("[v2-shipping-plan-editor] 저장 실패:", err);
      toast.error("출하계획 저장 중 오류가 발생했습니다.");
    } finally {
      savingRef.current = false;
      setSaving(false);
    }
  }, []);
  // V2 이벤트 버스 구독 (마운트 1회만, ref로 최신 핸들러 참조)
  const handleSaveRef = useRef(handleSave);
  handleSaveRef.current = handleSave;
  useEffect(() => {
    let unsubscribe: (() => void) | null = null;
    let mounted = true;
    (async () => {
      const { v2EventBus, V2_EVENTS } = await import("@/lib/v2-core");
      if (!mounted) return;
      unsubscribe = v2EventBus.subscribe(V2_EVENTS.SHIPPING_PLAN_SAVE, () => {
        handleSaveRef.current();
      });
    })();
    return () => {
      mounted = false;
      if (unsubscribe) unsubscribe();
    };
  }, []);
  // 집계 재계산 헬퍼
  const recalcAggregation = (group: ItemGroup): ItemGroup => {
    const newPlanTotal = group.details
      .filter((d) => d.type === "new")
      .reduce((sum, d) => sum + d.planQty, 0);
    const existingPlanTotal = group.details
      .filter((d) => d.type === "existing")
      .reduce((sum, d) => sum + d.planQty, 0);
    return {
      ...group,
      aggregation: {
        ...group.aggregation,
        totalPlanQty: existingPlanTotal + newPlanTotal,
        availableStock:
          group.aggregation.currentStock - (existingPlanTotal + newPlanTotal),
      },
    };
  };
  const handlePlanQtyChange = useCallback(
    (groupIdx: number, detailIdx: number, value: string) => {
      setItemGroups((prev) => {
        const next = [...prev];
        const group = { ...next[groupIdx] };
        const details = [...group.details];
        const target = details[detailIdx];
        let qty = Number(value) || 0;
        // 같은 sourceId의 다른 신규 행 합산
        const otherSum = details
          .filter((d, i) => d.type === "new" && d.sourceId === target.sourceId && i !== detailIdx)
          .reduce((sum, d) => sum + d.planQty, 0);
        // 잔여 가능량 = 미출하량 - 다른 분할 행 합산
        const maxAllowed = Math.max(0, target.balanceQty - otherSum);
        qty = Math.min(qty, maxAllowed);
        qty = Math.max(0, qty);
        details[detailIdx] = { ...details[detailIdx], planQty: qty };
        group.details = details;
        next[groupIdx] = recalcAggregation(group);
        return next;
      });
    },
    []
  );
  // 출하계획일 변경
  const handlePlanDateChange = useCallback(
    (groupIdx: number, detailIdx: number, value: string) => {
      setItemGroups((prev) => {
        const next = [...prev];
        const group = { ...next[groupIdx] };
        const details = [...group.details];
        details[detailIdx] = { ...details[detailIdx], planDate: value };
        group.details = details;
        next[groupIdx] = group;
        return next;
      });
    },
    []
  );
  // 분할 행 추가 (같은 수주에 새 행)
  const handleAddSplitRow = useCallback(
    (groupIdx: number, sourceId: string) => {
      setItemGroups((prev) => {
        const next = [...prev];
        const group = { ...next[groupIdx] };
        const details = [...group.details];
        // 같은 sourceId의 신규 행 중 마지막 찾기
        const existingNewRows = details.filter(
          (d) => d.type === "new" && d.sourceId === sourceId
        );
        const baseRow = existingNewRows[0];
        if (!baseRow) return prev;
        const splitCount = existingNewRows.length;
        const newRow: PlanDetailRow = {
          type: "new",
          sourceId,
          orderNo: baseRow.orderNo,
          partnerName: baseRow.partnerName,
          dueDate: baseRow.dueDate,
          balanceQty: baseRow.balanceQty,
          planQty: 0,
          planDate: new Date().toISOString().split("T")[0],
          splitKey: `${sourceId}_${splitCount}`,
        };
        // 같은 sourceId 신규 행 바로 뒤에 삽입
        const lastNewIdx = details.reduce(
          (last, d, i) =>
            d.type === "new" && d.sourceId === sourceId ? i : last,
          -1
        );
        details.splice(lastNewIdx + 1, 0, newRow);
        group.details = details;
        next[groupIdx] = group;
        return next;
      });
    },
    []
  );
  // 분할 행 삭제
  const handleRemoveSplitRow = useCallback(
    (groupIdx: number, detailIdx: number) => {
      setItemGroups((prev) => {
        const next = [...prev];
        const group = { ...next[groupIdx] };
        const details = [...group.details];
        const target = details[detailIdx];
        // 같은 sourceId의 신규 행이 1개뿐이면 삭제 안 함 (최소 1행 유지)
        const sameSourceNewCount = details.filter(
          (d) => d.type === "new" && d.sourceId === target.sourceId
        ).length;
        if (sameSourceNewCount <= 1) {
          toast.warning("최소 1개의 출하계획 행이 필요합니다.");
          return prev;
        }
        details.splice(detailIdx, 1);
        group.details = details;
        next[groupIdx] = recalcAggregation(group);
        return next;
      });
    },
    []
  );
  if (isDesignMode) {
    return (
      <div className="flex h-full w-full flex-col gap-3 rounded-lg border border-dashed border-gray-300 p-4">
        <div className="flex items-center gap-2">
          <Truck className="h-5 w-5 text-muted-foreground" />
          <span className="text-sm font-medium text-muted-foreground">
            {config.title || "출하계획 등록"}
          </span>
        </div>
        <div className="flex gap-2">
          {[
            "총수주잔량",
            "총출하계획량",
            "현재고",
            "가용재고",
            "생산중수량",
          ].map((label) => (
            <div
              key={label}
              className="flex flex-1 flex-col items-center rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
            >
              <span className="text-lg font-bold text-gray-400">0</span>
              <span className="text-[10px] text-gray-400">{label}</span>
            </div>
          ))}
        </div>
        <div className="flex-1 rounded-lg border border-gray-200 bg-gray-50 p-3">
          <span className="text-xs text-gray-400">상세 테이블 영역</span>
        </div>
      </div>
    );
  }
  if (loading || saving) {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <span className="text-sm text-muted-foreground">
            {saving ? "출하계획 저장 중..." : "데이터 로딩 중..."}
          </span>
        </div>
      </div>
    );
  }
  if (selectedIds.length === 0) {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <span className="text-sm text-muted-foreground">
          선택된 수주가 없습니다
        </span>
      </div>
    );
  }
  const showSummary = config.showSummaryCards !== false;
  const showExisting = config.showExistingPlans !== false;
  return (
    <div className="flex h-full w-full flex-col gap-4 overflow-auto p-4">
      {itemGroups.map((group, groupIdx) => (
        <div key={group.partCode} className="flex flex-col gap-3">
          <div className="flex items-center gap-2">
            <Package className="h-4 w-4 text-primary" />
            <span className="text-sm font-semibold">
              {group.partName} ({group.partCode})
            </span>
          </div>
          {showSummary && (
            <SummaryCards
              aggregation={group.aggregation}
              visibleCards={config.visibleSummaryCards}
            />
          )}
          <DetailTable
            details={group.details}
            groupIdx={groupIdx}
            onPlanQtyChange={handlePlanQtyChange}
            onPlanDateChange={handlePlanDateChange}
            onAddSplit={handleAddSplitRow}
            onRemoveSplit={handleRemoveSplitRow}
            showExisting={showExisting}
          />
        </div>
      ))}
    </div>
  );
 };
 interface VisibleCards {
  totalBalance?: boolean;
  totalPlanQty?: boolean;
  currentStock?: boolean;
  availableStock?: boolean;
  inProductionQty?: boolean;
 }
 const SummaryCards: React.FC<{
  aggregation: ItemAggregation;
  visibleCards?: VisibleCards;
 }> = ({ aggregation, visibleCards }) => {
  const allCards = [
    {
      key: "totalBalance" as const,
      label: "총수주잔량",
      value: aggregation.totalBalance,
      icon: TrendingUp,
      color: {
        bg: "bg-blue-50",
        text: "text-blue-600",
        border: "border-blue-200",
      },
    },
    {
      key: "totalPlanQty" as const,
      label: "총출하계획량",
      value: aggregation.totalPlanQty,
      icon: Truck,
      color: {
        bg: "bg-indigo-50",
        text: "text-indigo-600",
        border: "border-indigo-200",
      },
    },
    {
      key: "currentStock" as const,
      label: "현재고",
      value: aggregation.currentStock,
      icon: Warehouse,
      color: {
        bg: "bg-emerald-50",
        text: "text-emerald-600",
        border: "border-emerald-200",
      },
    },
    {
      key: "availableStock" as const,
      label: "가용재고",
      value: aggregation.availableStock,
      icon: CheckCircle,
      color: {
        bg: aggregation.availableStock < 0 ? "bg-red-50" : "bg-amber-50",
        text:
          aggregation.availableStock < 0
            ? "text-red-600"
            : "text-amber-600",
        border:
          aggregation.availableStock < 0
            ? "border-red-200"
            : "border-amber-200",
      },
    },
    {
      key: "inProductionQty" as const,
      label: "생산중수량",
      value: aggregation.inProductionQty,
      icon: Factory,
      color: {
        bg: "bg-purple-50",
        text: "text-purple-600",
        border: "border-purple-200",
      },
    },
  ];
  const cards = allCards.filter(
    (c) => !visibleCards || visibleCards[c.key] !== false
  );
  return (
    <div className="flex gap-2">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <div
            key={card.label}
            className={`flex flex-1 flex-col items-center rounded-lg border ${card.color.border} ${card.color.bg} px-3 py-2 transition-shadow hover:shadow-sm`}
          >
            <div className="flex items-center gap-1">
              <Icon className={`h-3.5 w-3.5 ${card.color.text}`} />
              <span className={`text-xl font-bold ${card.color.text}`}>
                {card.value.toLocaleString()}
              </span>
            </div>
            <span className={`mt-0.5 text-[10px] ${card.color.text}`}>
              {card.label}
            </span>
          </div>
        );
      })}
    </div>
  );
 };
 // sourceId별 그룹 (셀병합용)
 interface SourceGroup {
  sourceId: string;
  orderNo: string;
  partnerName: string;
  dueDate: string;
  balanceQty: number;
  rows: (PlanDetailRow & { _origIdx: number })[];
 }
 const DetailTable: React.FC<{
  details: PlanDetailRow[];
  groupIdx: number;
  onPlanQtyChange: (groupIdx: number, detailIdx: number, value: string) => void;
  onPlanDateChange: (groupIdx: number, detailIdx: number, value: string) => void;
  onAddSplit: (groupIdx: number, sourceId: string) => void;
  onRemoveSplit: (groupIdx: number, detailIdx: number) => void;
  showExisting?: boolean;
 }> = ({ details, groupIdx, onPlanQtyChange, onPlanDateChange, onAddSplit, onRemoveSplit, showExisting = true }) => {
  const visibleDetails = details
    .map((d, idx) => ({ ...d, _origIdx: idx }))
    .filter((d) => showExisting || d.type === "new");
  // sourceId별 그룹핑 (순서 유지)
  const sourceGroups = useMemo(() => {
    const map = new Map<string, SourceGroup>();
    const order: string[] = [];
    for (const d of visibleDetails) {
      if (!map.has(d.sourceId)) {
        map.set(d.sourceId, {
          sourceId: d.sourceId,
          orderNo: d.orderNo,
          partnerName: d.partnerName,
          dueDate: d.dueDate,
          balanceQty: d.balanceQty,
          rows: [],
        });
        order.push(d.sourceId);
      }
      map.get(d.sourceId)!.rows.push(d);
    }
    return order.map((id) => map.get(id)!);
  }, [visibleDetails]);
  // 같은 sourceId 신규 행들의 planQty 합산 (잔여량 계산용)
  const getRemaining = (sourceId: string, excludeOrigIdx: number) => {
    const group = sourceGroups.find((g) => g.sourceId === sourceId);
    if (!group) return 0;
    const otherSum = group.rows
      .filter((r) => r.type === "new" && r._origIdx !== excludeOrigIdx)
      .reduce((sum, r) => sum + r.planQty, 0);
    return Math.max(0, group.balanceQty - otherSum);
  };
  return (
    <div className="overflow-hidden rounded-lg border">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b bg-muted/50">
            <th className="w-14 px-3 py-2 text-left text-xs font-medium text-muted-foreground">
              구분
            </th>
            <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground">
              수주번호
            </th>
            <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground">
              거래처
            </th>
            <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground">
              납기일
            </th>
            <th className="px-3 py-2 text-right text-xs font-medium text-muted-foreground">
              미출하
            </th>
            <th className="px-3 py-2 text-center text-xs font-medium text-muted-foreground">
              출하계획량
            </th>
            <th className="px-3 py-2 text-center text-xs font-medium text-muted-foreground">
              출하계획일
            </th>
            <th className="w-16 px-2 py-2 text-center text-xs font-medium text-muted-foreground">
              분할
            </th>
          </tr>
        </thead>
        <tbody>
          {sourceGroups.map((sg) => {
            const totalRows = sg.rows.length;
            const newCount = sg.rows.filter((r) => r.type === "new").length;
            return sg.rows.map((row, rowIdx) => {
              const isFirst = rowIdx === 0;
              const remaining = row.type === "new" ? getRemaining(row.sourceId, row._origIdx) : 0;
              const isDisabled = row.type === "new" && sg.balanceQty <= 0;
              return (
                <tr
                  key={row.splitKey || `${row.type}-${row.sourceId}-${row.existingPlanId || row._origIdx}`}
                  className={`hover:bg-muted/30 ${rowIdx < totalRows - 1 ? "" : "border-b"}`}
                >
                  {/* 구분 - 매 행마다 표시 */}
                  <td className={`px-3 py-2 ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
                    {row.type === "existing" ? (
                      <Badge variant="secondary" className="text-[10px]">기존</Badge>
                    ) : (
                      <Badge className="bg-primary text-[10px] text-primary-foreground">신규</Badge>
                    )}
                  </td>
                  {/* 수주번호, 거래처, 납기일, 미출하 - 첫 행만 rowSpan */}
                  {isFirst && (
                    <>
                      <td className="border-t px-3 py-2 text-xs align-middle" rowSpan={totalRows}>
                        {sg.orderNo}
                      </td>
                      <td className="border-t px-3 py-2 text-xs align-middle" rowSpan={totalRows}>
                        {sg.partnerName}
                      </td>
                      <td className="border-t px-3 py-2 text-xs align-middle" rowSpan={totalRows}>
                        {sg.dueDate || "-"}
                      </td>
                      <td className="border-t px-3 py-2 text-right text-xs font-bold align-middle" rowSpan={totalRows}>
                        {sg.balanceQty.toLocaleString()}
                      </td>
                    </>
                  )}
                  {/* 출하계획량 */}
                  <td className={`px-3 py-2 text-center ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
                    {row.type === "existing" ? (
                      <span className="text-xs text-muted-foreground">
                        {row.planQty.toLocaleString()}
                      </span>
                    ) : (
                      <Input
                        type="number"
                        min={0}
                        max={remaining}
                        value={row.planQty || ""}
                        onChange={(e) => onPlanQtyChange(groupIdx, row._origIdx, e.target.value)}
                        disabled={isDisabled}
                        className="mx-auto h-7 w-24 text-center text-xs disabled:opacity-40"
                        placeholder="0"
                      />
                    )}
                  </td>
                  {/* 출하계획일 */}
                  <td className={`px-3 py-2 text-center ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
                    {row.type === "existing" ? (
                      <span className="text-xs text-muted-foreground">-</span>
                    ) : (
                      <Input
                        type="date"
                        value={row.planDate || ""}
                        onChange={(e) => onPlanDateChange(groupIdx, row._origIdx, e.target.value)}
                        disabled={isDisabled}
                        className="mx-auto h-7 w-32 text-xs disabled:opacity-40"
                      />
                    )}
                  </td>
                  {/* 분할 버튼 */}
                  <td className={`px-2 py-2 text-center ${!isFirst ? "border-t border-dashed border-muted" : "border-t"}`}>
                    {row.type === "new" && isFirst && (
                      <button
                        type="button"
                        onClick={() => onAddSplit(groupIdx, row.sourceId)}
                        disabled={sg.balanceQty <= 0}
                        className="flex h-6 w-6 items-center justify-center rounded-md text-primary hover:bg-primary/10 disabled:opacity-30 disabled:cursor-not-allowed mx-auto"
                        title="분할 행 추가"
                      >
                        <Plus className="h-3.5 w-3.5" />
                      </button>
                    )}
                    {row.type === "new" && !isFirst && newCount > 1 && (
                      <button
                        type="button"
                        onClick={() => onRemoveSplit(groupIdx, row._origIdx)}
                        className="flex h-6 w-6 items-center justify-center rounded-md text-destructive hover:bg-destructive/10 mx-auto"
                        title="분할 행 삭제"
                      >
                        <X className="h-3.5 w-3.5" />
                      </button>
                    )}
                  </td>
                </tr>
              );
            });
          })}
          {sourceGroups.length === 0 && (
            <tr>
              <td colSpan={8} className="px-3 py-6 text-center text-xs text-muted-foreground">
                데이터가 없습니다
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
 };
 export const ShippingPlanEditorWrapper: React.FC<
  ShippingPlanEditorComponentProps
 > = (props) => {
  return <ShippingPlanEditorComponent {...props} />;
 };
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx
@ -1,166 +0,0 @@
 "use client";
 import React from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 interface ShippingPlanEditorConfigPanelProps {
  config: any;
  onChange: (config: any) => void;
 }
 export const ShippingPlanEditorConfigPanel: React.FC<
  ShippingPlanEditorConfigPanelProps
 > = ({ config, onChange }) => {
  const handleChange = (key: string, value: any) => {
    onChange({ ...config, [key]: value });
  };
  const handleSummaryCardToggle = (cardKey: string, checked: boolean) => {
    onChange({
      ...config,
      visibleSummaryCards: {
        ...(config.visibleSummaryCards || defaultSummaryCards),
        [cardKey]: checked,
      },
    });
  };
  const defaultSummaryCards = {
    totalBalance: true,
    totalPlanQty: true,
    currentStock: true,
    availableStock: true,
    inProductionQty: true,
  };
  const summaryCards = config.visibleSummaryCards || defaultSummaryCards;
  const summaryCardLabels: Record<string, string> = {
    totalBalance: "총수주잔량",
    totalPlanQty: "총출하계획량",
    currentStock: "현재고",
    availableStock: "가용재고",
    inProductionQty: "생산중수량",
  };
  return (
    <div className="space-y-4 p-4">
      {/* 기본 설정 */}
      <div className="text-sm font-semibold text-muted-foreground">
        기본 설정
      </div>
      <div className="space-y-2">
        <Label className="text-xs">제목</Label>
        <Input
          value={config.title || "출하계획 등록"}
          onChange={(e) => handleChange("title", e.target.value)}
          placeholder="출하계획 등록"
          className="h-8 text-xs"
        />
      </div>
      <Separator />
      {/* 표시 설정 */}
      <div className="text-sm font-semibold text-muted-foreground">
        표시 설정
      </div>
      <div className="flex items-center justify-between">
        <Label className="text-xs">집계 카드 표시</Label>
        <Switch
          checked={config.showSummaryCards !== false}
          onCheckedChange={(checked) =>
            handleChange("showSummaryCards", checked)
          }
        />
      </div>
      <div className="flex items-center justify-between">
        <Label className="text-xs">기존 계획 표시</Label>
        <Switch
          checked={config.showExistingPlans !== false}
          onCheckedChange={(checked) =>
            handleChange("showExistingPlans", checked)
          }
        />
      </div>
      {config.showSummaryCards !== false && (
        <>
          <Separator />
          <div className="text-sm font-semibold text-muted-foreground">
            집계 카드 항목
          </div>
          <div className="space-y-2">
            {Object.entries(summaryCardLabels).map(([key, label]) => (
              <div key={key} className="flex items-center justify-between">
                <Label className="text-xs">{label}</Label>
                <Switch
                  checked={summaryCards[key] !== false}
                  onCheckedChange={(checked) =>
                    handleSummaryCardToggle(key, checked)
                  }
                />
              </div>
            ))}
          </div>
        </>
      )}
      <Separator />
      {/* 저장 설정 */}
      <div className="text-sm font-semibold text-muted-foreground">
        저장 설정
      </div>
      <div className="flex items-center justify-between">
        <Label className="text-xs">잔량 초과 허용</Label>
        <Switch
          checked={config.allowOverPlan === true}
          onCheckedChange={(checked) =>
            handleChange("allowOverPlan", checked)
          }
        />
      </div>
      <div className="flex items-center justify-between">
        <Label className="text-xs">저장 후 자동 닫기</Label>
        <Switch
          checked={config.autoCloseOnSave !== false}
          onCheckedChange={(checked) =>
            handleChange("autoCloseOnSave", checked)
          }
        />
      </div>
      <div className="flex items-center justify-between">
        <Label className="text-xs">저장 전 확인</Label>
        <Switch
          checked={config.confirmBeforeSave === true}
          onCheckedChange={(checked) =>
            handleChange("confirmBeforeSave", checked)
          }
        />
      </div>
      {config.confirmBeforeSave && (
        <div className="space-y-2">
          <Label className="text-xs">확인 메시지</Label>
          <Textarea
            value={config.confirmMessage || "출하계획을 저장하시겠습니까?"}
            onChange={(e) => handleChange("confirmMessage", e.target.value)}
            placeholder="출하계획을 저장하시겠습니까?"
            className="min-h-[60px] text-xs"
          />
        </div>
      )}
    </div>
  );
 };
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
+++ b/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
@ -1,16 +0,0 @@
 "use client";
 import React from "react";
 import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
 import { V2ShippingPlanEditorDefinition } from "./index";
 import { ShippingPlanEditorComponent } from "./ShippingPlanEditorComponent";
 export class ShippingPlanEditorRenderer extends AutoRegisteringComponentRenderer {
  static componentDefinition = V2ShippingPlanEditorDefinition;
  render(): React.ReactElement {
    return <ShippingPlanEditorComponent {...this.props} />;
  }
 }
 ShippingPlanEditorRenderer.registerSelf();
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/index.ts
+++ b/frontend/lib/registry/components/v2-shipping-plan-editor/index.ts
@ -1,27 +0,0 @@
 "use client";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { ShippingPlanEditorWrapper } from "./ShippingPlanEditorComponent";
 import { ShippingPlanEditorConfigPanel } from "./ShippingPlanEditorConfigPanel";
 export const V2ShippingPlanEditorDefinition = createComponentDefinition({
  id: "v2-shipping-plan-editor",
  name: "출하계획 동시등록",
  nameEng: "Shipping Plan Editor",
  description: "수주 선택 후 품목별 그룹핑하여 출하계획을 일괄 등록하는 컴포넌트",
  category: ComponentCategory.DISPLAY,
  webType: "text",
  component: ShippingPlanEditorWrapper,
  configPanel: ShippingPlanEditorConfigPanel,
  defaultConfig: {
    title: "출하계획 등록",
  },
  defaultSize: { width: 900, height: 600 },
  icon: "Truck",
  tags: ["출하", "계획", "수주", "일괄등록", "v2"],
  version: "1.0.0",
  author: "개발팀",
 });
 export type { ShippingPlanEditorConfig, ItemGroup, PlanDetailRow } from "./types";
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/types.ts
+++ b/frontend/lib/registry/components/v2-shipping-plan-editor/types.ts
@ -1,69 +0,0 @@
 import { ComponentConfig } from "@/types/component";
 export interface ShippingPlanEditorConfig extends ComponentConfig {
  title?: string;
  showSummaryCards?: boolean;
  showExistingPlans?: boolean;
  allowOverPlan?: boolean;
  autoCloseOnSave?: boolean;
  confirmBeforeSave?: boolean;
  confirmMessage?: string;
  visibleSummaryCards?: {
    totalBalance?: boolean;
    totalPlanQty?: boolean;
    currentStock?: boolean;
    availableStock?: boolean;
    inProductionQty?: boolean;
  };
 }
 // 백엔드에서 정규화해서 내려주는 수주 정보
 export interface EnrichedOrder {
  sourceId: string;
  orderNo: string;
  partCode: string;
  partName: string;
  partnerName: string;
  dueDate: string;
  orderQty: number;
  shipQty: number;
  balanceQty: number;
 }
 export interface ItemAggregation {
  totalBalance: number;
  totalPlanQty: number;
  currentStock: number;
  availableStock: number;
  inProductionQty: number;
 }
 export interface ExistingPlan {
  id: number;
  sourceId: string;
  planQty: number;
  planDate: string;
  shipmentPlanNo: string;
  status: string;
 }
 // 상세 테이블 행 (기존 출하계획 + 신규 입력)
 export interface PlanDetailRow {
  type: "existing" | "new";
  sourceId: string;
  orderNo: string;
  partnerName: string;
  dueDate: string;
  balanceQty: number;
  planQty: number;
  planDate?: string;
  existingPlanId?: number;
  splitKey?: string;
 }
 export interface ItemGroup {
  partCode: string;
  partName: string;
  aggregation: ItemAggregation;
  details: PlanDetailRow[];
 }
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
--- a/frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx
@ -35,11 +35,7 @@ interface SingleTableWithStickyProps {
  editingValue?: string;
  onEditingValueChange?: (value: string) => void;
  onEditKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onEditSave?: () => void;
+  editInputRef?: React.RefObject<HTMLInputElement>;
  editInputRef?: React.RefObject<HTMLInputElement | HTMLSelectElement>;
  // 인라인 편집 타입별 옵션 (select/category/code, number, date 지원)
  columnMeta?: Record<string, { inputType?: string }>;
  categoryMappings?: Record<string, Record<string, { label: string }>>;
  // 검색 하이라이트 관련 props
  searchHighlights?: Set<string>;
  currentSearchIndex?: number;
@ -73,10 +69,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
  editingValue,
  onEditingValueChange,
  onEditKeyDown,
  onEditSave,
  editInputRef,
  columnMeta,
  categoryMappings,
  // 검색 하이라이트 관련 props
  searchHighlights,
  currentSearchIndex = 0,
@ -109,10 +102,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
          }}
        >
          <TableHeader
-            className={cn("border-b border-border/60", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
+            className={cn("bg-background border-b", tableConfig?.stickyHeader && "sticky top-0 z-30 shadow-sm")}
            style={{ backgroundColor: "hsl(var(--muted) / 0.4)" }}
          >
-            <TableRow className="border-b border-border/60">
+            <TableRow className="border-b">
              {actualColumns.map((column, colIndex) => {
                // 왼쪽 고정 컬럼들의 누적 너비 계산
                const leftFixedWidth = actualColumns
@ -133,10 +125,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                    key={column.columnName}
                    className={cn(
                      column.columnName === "__checkbox__"
-                        ? "h-9 border-0 px-3 py-1.5 text-center align-middle sm:px-4 sm:py-2"
+                        ? "bg-background h-9 border-0 px-3 py-1.5 text-center align-middle sm:px-4 sm:py-2"
-                        : "text-muted-foreground hover:text-foreground h-9 cursor-pointer border-0 px-3 py-1.5 text-left align-middle text-[10px] font-bold uppercase tracking-[0.04em] whitespace-nowrap transition-all duration-200 select-none sm:px-4 sm:py-2 sm:text-xs",
+                        : "text-foreground hover:text-foreground bg-background h-9 cursor-pointer border-0 px-3 py-1.5 text-left align-middle text-xs font-semibold whitespace-nowrap transition-all duration-200 select-none sm:px-4 sm:py-2 sm:text-sm",
                      `text-${column.align}`,
-                      column.sortable && "hover:bg-muted/50",
+                      column.sortable && "hover:bg-primary/10",
                      // 고정 컬럼 스타일
                      column.fixed === "left" && "border-border bg-background sticky z-40 border-r shadow-sm",
                      column.fixed === "right" && "border-border bg-background sticky z-40 border-l shadow-sm",
@ -144,33 +136,28 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                      isDesignMode && column.hidden && "bg-muted/50 opacity-40",
                    )}
                    style={{
-                      width: column.columnName === "__checkbox__" ? 48 : getColumnWidth(column),
+                      width: getColumnWidth(column),
-                      minWidth: column.columnName === "__checkbox__" ? "48px" : "100px",
+                      minWidth: "100px", // 최소 너비 보장
-                      maxWidth: column.columnName === "__checkbox__" ? "48px" : "300px",
+                      maxWidth: "300px", // 최대 너비 제한
                      boxSizing: "border-box",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
+                      whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
-                      backgroundColor: "hsl(var(--muted) / 0.4)",
+                      backgroundColor: "hsl(var(--background))",
                      // sticky 위치 설정
                      ...(column.fixed === "left" && { left: leftFixedWidth }),
                      ...(column.fixed === "right" && { right: rightFixedWidth }),
                    }}
                    onClick={() => column.sortable && sortHandler(column.columnName)}
                  >
-                    <div className={cn("flex items-center", column.columnName === "__checkbox__" ? "justify-center" : "gap-2")}>
+                    <div className="flex items-center gap-2">
                      {column.columnName === "__checkbox__" ? (
                        checkboxConfig.selectAll && (
                          <Checkbox
                            checked={isAllSelected}
                            onCheckedChange={handleSelectAll}
                            aria-label="전체 선택"
-                            style={{
+                            style={{ zIndex: 1 }}
                              width: 16,
                              height: 16,
                              borderWidth: 1.5,
                              borderColor: isAllSelected ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.5)",
                              zIndex: 1,
                            }}
                          />
                        )
                      ) : (
@ -234,9 +221,8 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                <TableRow
                  key={`row-${index}`}
                  className={cn(
-                    "cursor-pointer border-b border-border/50 transition-[background] duration-75",
+                    "bg-background h-10 cursor-pointer border-b transition-colors",
-                    index % 2 === 0 ? "bg-background" : "bg-muted/20",
+                    tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
                    tableConfig.tableStyle?.hoverEffect !== false && "hover:bg-accent",
                  )}
                  onClick={(e) => handleRowClick?.(row, index, e)}
                >
@ -280,10 +266,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                      highlightArray[currentSearchIndex] === cellKey;
                    // formatCellValue 결과 (이미지 등 JSX 반환 가능)
-                    const formattedValue = formatCellValue(row[column.columnName], column.format, column.columnName, row);
+                    const rawCellValue =
-                    const rawCellValue = (formattedValue === null || formattedValue === undefined || formattedValue === "")
+                      formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0";
-                      ? <span className="text-muted-foreground/50">-</span>
+                    // 이미지 등 JSX 반환 여부 확인
                      : formattedValue;
                    const isReactElement = typeof rawCellValue === "object" && React.isValidElement(rawCellValue);
                    // 셀 값에서 검색어 하이라이트 렌더링
@ -332,22 +317,26 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                        key={`cell-${column.columnName}`}
                        id={isCurrentSearchResult ? "current-search-result" : undefined}
                        className={cn(
-                          "text-foreground h-10 align-middle text-[11px] transition-colors",
+                          "text-foreground h-10 px-3 py-1.5 align-middle text-xs transition-colors sm:px-4 sm:py-2 sm:text-sm",
-                          column.columnName === "__checkbox__" ? "px-0 py-[7px] text-center" : "px-3 py-[7px]",
+                          // 이미지 셀은 overflow/ellipsis 제외 (이미지 잘림 방지)
                          !isReactElement && "whitespace-nowrap",
-                          column.columnName !== "__checkbox__" && `text-${column.align}`,
+                          `text-${column.align}`,
                          // 고정 컬럼 스타일
                          column.fixed === "left" &&
                            "border-border bg-background/90 sticky z-10 border-r backdrop-blur-sm",
                          column.fixed === "right" &&
                            "border-border bg-background/90 sticky z-10 border-l backdrop-blur-sm",
                          // 편집 가능 셀 스타일
                          onCellDoubleClick && column.columnName !== "__checkbox__" && "cursor-text",
                        )}
                        style={{
-                          width: column.columnName === "__checkbox__" ? 48 : getColumnWidth(column),
+                          width: getColumnWidth(column),
-                          minWidth: column.columnName === "__checkbox__" ? "48px" : "100px",
+                          minWidth: "100px", // 최소 너비 보장
-                          maxWidth: column.columnName === "__checkbox__" ? "48px" : "300px",
+                          maxWidth: "300px", // 최대 너비 제한
                          boxSizing: "border-box",
                          // 이미지 셀은 overflow 허용
                          ...(isReactElement ? {} : { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }),
                          // sticky 위치 설정
                          ...(column.fixed === "left" && { left: leftFixedWidth }),
                          ...(column.fixed === "right" && { right: rightFixedWidth }),
                        }}
@ -361,20 +350,15 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                        {column.columnName === "__checkbox__" ? (
                          renderCheckboxCell?.(row, index)
                        ) : isEditing ? (
-                          // 인라인 편집: inputType에 따라 select(category/code), number, date, text
+                          // 인라인 편집 입력 필드
-                          (() => {
+                          <input
-                            const meta = columnMeta?.[column.columnName];
+                            ref={editInputRef}
-                            const inputType = meta?.inputType ?? (column as { inputType?: string }).inputType;
+                            type="text"
-                            const isNumeric = inputType === "number" || inputType === "decimal";
+                            value={editingValue ?? ""}
-                            const isCategoryType = inputType === "category" || inputType === "code";
+                            onChange={(e) => onEditingValueChange?.(e.target.value)}
-                            const categoryOptions = categoryMappings?.[column.columnName];
+                            onKeyDown={onEditKeyDown}
-                            const hasCategoryOptions =
+                            onBlur={() => {
-                              isCategoryType && categoryOptions && Object.keys(categoryOptions).length > 0;
+                              // blur 시 저장 (Enter와 동일)
                            // 인라인 편집: 행 높이 유지를 위해 select/input 모두 h-8(32px) 고정
                            const commonInputClass =
                              "border-primary bg-background focus:ring-primary h-8 w-full shrink-0 rounded border px-2 text-xs focus:ring-2 focus:outline-none sm:text-sm";
                            const handleBlurSave = () => {
                              if (onEditKeyDown) {
                                const fakeEvent = {
                                  key: "Enter",
@ -382,79 +366,10 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                                } as React.KeyboardEvent<HTMLInputElement>;
                                onEditKeyDown(fakeEvent);
                              }
-                              onEditSave?.();
+                            }}
-                            };
+                            className="border-primary bg-background focus:ring-primary h-8 w-full rounded border px-2 text-xs focus:ring-2 focus:outline-none sm:text-sm"
-
+                            onClick={(e) => e.stopPropagation()}
-                            // category/code 타입: select는 반드시 h-8(32px)로 행 높이 유지
+                          />
                            if (hasCategoryOptions) {
                              const selectOptions = Object.entries(categoryOptions).map(([value, info]) => ({
                                value,
                                label: info.label,
                              }));
                              return (
                                <select
                                  ref={editInputRef as React.RefObject<HTMLSelectElement>}
                                  value={editingValue ?? ""}
                                  onChange={(e) => onEditingValueChange?.(e.target.value)}
                                  onKeyDown={onEditKeyDown}
                                  onBlur={handleBlurSave}
                                  className={cn(commonInputClass, "h-8")}
                                  onClick={(e) => e.stopPropagation()}
                                >
                                  <option value="">선택하세요</option>
                                  {selectOptions.map((opt) => (
                                    <option key={opt.value} value={opt.value}>
                                      {opt.label}
                                    </option>
                                  ))}
                                </select>
                              );
                            }
                            if (inputType === "date" || inputType === "datetime") {
                              try {
                                const { InlineCellDatePicker } = require("@/components/screen/filters/InlineCellDatePicker");
                                return (
                                  <InlineCellDatePicker
                                    value={editingValue ?? ""}
                                    onChange={(v) => onEditingValueChange?.(v)}
                                    onSave={() => {
                                      handleBlurSave();
                                    }}
                                    onKeyDown={onEditKeyDown}
                                    inputRef={editInputRef as React.RefObject<HTMLInputElement>}
                                  />
                                );
                              } catch {
                                return (
                                  <input
                                    ref={editInputRef as React.RefObject<HTMLInputElement>}
                                    type="text"
                                    value={editingValue ?? ""}
                                    onChange={(e) => onEditingValueChange?.(e.target.value)}
                                    onKeyDown={onEditKeyDown}
                                    onBlur={handleBlurSave}
                                    className={commonInputClass}
                                    onClick={(e) => e.stopPropagation()}
                                  />
                                );
                              }
                            }
                            return (
                              <input
                                ref={editInputRef as React.RefObject<HTMLInputElement>}
                                type={isNumeric ? "number" : "text"}
                                value={editingValue ?? ""}
                                onChange={(e) => onEditingValueChange?.(e.target.value)}
                                onKeyDown={onEditKeyDown}
                                onBlur={handleBlurSave}
                                className={commonInputClass}
                                style={isNumeric ? { textAlign: "right" } : undefined}
                                onClick={(e) => e.stopPropagation()}
                              />
                            );
                          })()
                        ) : (
                          renderCellContent()
                        )}
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@ -368,7 +368,6 @@ import {
  CheckSquare,
  Trash2,
  Lock,
  GripVertical,
 } from "lucide-react";
 import * as XLSX from "xlsx";
 import { FileText, ChevronRightIcon } from "lucide-react";
@ -1068,7 +1067,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
  const [isTableOptionsOpen, setIsTableOptionsOpen] = useState(false);
  const [showGridLines, setShowGridLines] = useState(true);
  const [viewMode, setViewMode] = useState<"table" | "card" | "grouped-card">("table");
-  const [frozenColumns, setFrozenColumns] = useState<string[]>([]);
+  // 체크박스 컬럼은 항상 기본 틀고정
  const [frozenColumns, setFrozenColumns] = useState<string[]>(
    (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [],
  );
  const [frozenColumnCount, setFrozenColumnCount] = useState<number>(0);
  // 🆕 Search Panel (통합 검색) 관련 상태
@ -1162,17 +1164,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
      setSelectedRows(new Set());
      setIsAllSelected(false);
    },
    getEntityJoinColumns: () => {
      return (tableConfig.columns || [])
        .filter((col) => col.additionalJoinInfo)
        .map((col) => ({
          sourceTable: col.additionalJoinInfo!.sourceTable || tableConfig.selectedTable,
          sourceColumn: col.additionalJoinInfo!.sourceColumn,
          joinAlias: col.additionalJoinInfo!.joinAlias,
          referenceTable: col.additionalJoinInfo!.referenceTable,
        }));
    },
  };
  // DataReceivable 인터페이스 구현
@ -1371,10 +1362,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
      frozenColumnCount, // 현재 틀고정 컬럼 수
      onFrozenColumnCountChange: (count: number) => {
        setFrozenColumnCount(count);
        // 체크박스 컬럼은 항상 틀고정에 포함
        const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? ["__checkbox__"] : [];
        // 표시 가능한 컬럼 중 처음 N개를 틀고정 컬럼으로 설정
        const visibleCols = columnsToRegister
          .filter((col) => col.visible !== false)
          .map((col) => col.columnName || col.field);
-        setFrozenColumns(visibleCols.slice(0, count));
+        const newFrozenColumns = [...checkboxColumn, ...visibleCols.slice(0, count)];
        setFrozenColumns(newFrozenColumns);
      },
      // 탭 관련 정보 (탭 내부의 테이블인 경우)
      parentTabId,
@ -3274,8 +3269,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
      if (state.sortDirection) setSortDirection(state.sortDirection);
      if (state.groupByColumns) setGroupByColumns(state.groupByColumns);
      if (state.frozenColumns) {
-        // 체크박스 컬럼은 frozen 대상에서 제외 (배경색 이중 적용 방지)
+        // 체크박스 컬럼이 항상 포함되도록 보장
-        const restoredFrozenColumns = (state.frozenColumns || []).filter((col: string) => col !== "__checkbox__");
+        const checkboxColumn = (tableConfig.checkbox?.enabled ?? true) ? "__checkbox__" : null;
        const restoredFrozenColumns =
          checkboxColumn && !state.frozenColumns.includes(checkboxColumn)
            ? [checkboxColumn, ...state.frozenColumns]
            : state.frozenColumns;
        setFrozenColumns(restoredFrozenColumns);
      }
      if (state.frozenColumnCount !== undefined) setFrozenColumnCount(state.frozenColumnCount); // 틀고정 컬럼 수 복원
@ -4424,19 +4423,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
    if (!tableConfig.checkbox?.selectAll) return null;
    if (tableConfig.checkbox?.multiple === false) return null;
-    return (
+    return <Checkbox checked={isAllSelected} onCheckedChange={handleSelectAll} aria-label="전체 선택" />;
      <Checkbox
        checked={isAllSelected}
        onCheckedChange={handleSelectAll}
        aria-label="전체 선택"
        style={{
          width: 16,
          height: 16,
          borderWidth: 1.5,
          borderColor: isAllSelected ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.5)",
        }}
      />
    );
  };
  const renderCheckboxCell = (row: any, index: number) => {
@ -4448,12 +4435,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
        checked={isChecked}
        onCheckedChange={(checked) => handleRowSelection(rowKey, checked as boolean)}
        aria-label={`행 ${index + 1} 선택`}
        style={{
          width: 16,
          height: 16,
          borderWidth: 1.5,
          borderColor: isChecked ? "hsl(var(--primary))" : "hsl(var(--muted-foreground) / 0.5)",
        }}
      />
    );
  };
@ -5642,15 +5623,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
            }}
            getColumnWidth={getColumnWidth}
            containerWidth={calculatedWidth}
            onCellDoubleClick={handleCellDoubleClick}
            editingCell={editingCell}
            editingValue={editingValue}
            onEditingValueChange={setEditingValue}
            onEditKeyDown={handleEditKeyDown}
            onEditSave={saveEditing}
            editInputRef={editInputRef}
            columnMeta={columnMeta}
            categoryMappings={categoryMappings}
          />
        </div>
@ -5855,41 +5827,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
          )}
        </div>
-        {/* 필터 칩 바 */}
+        {/* 🆕 배치 편집 툴바 */}
        {filterGroups.length > 0 && filterGroups.some(g => g.conditions.some(c => c.column && c.value)) && (
          <div className="border-border bg-muted/30 flex items-center gap-2 border-b px-4 py-1.5">
            {filterGroups.flatMap(group =>
              group.conditions
                .filter(c => c.column && c.value)
                .map(condition => {
                  const label = columnLabels[condition.column] || condition.column;
                  const opLabel = condition.operator === "equals" ? "=" : condition.operator === "contains" ? "⊃" : condition.operator === "notEquals" ? "≠" : condition.operator === "startsWith" ? "^" : condition.operator === "endsWith" ? "$" : condition.operator === "greaterThan" ? ">" : condition.operator === "lessThan" ? "<" : condition.operator;
                  return (
                    <span
                      key={condition.id}
                      className="border-border bg-background text-muted-foreground inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[10px] font-semibold"
                    >
                      {label} {opLabel} {condition.value}
                      <button
                        onClick={() => removeFilterCondition(group.id, condition.id)}
                        className="hover:text-destructive ml-0.5 leading-none transition-colors"
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </span>
                  );
                })
            )}
            <button
              onClick={clearFilterBuilder}
              className="text-muted-foreground hover:text-foreground ml-auto text-[9px] font-semibold transition-colors"
            >
              전체 초기화
            </button>
          </div>
        )}
        {/* 배치 편집 툴바 */}
        {(editMode === "batch" || pendingChanges.size > 0) && (
          <div className="border-border flex items-center justify-between border-b bg-amber-50 px-4 py-2 sm:px-6 dark:bg-amber-950/30">
            <div className="flex items-center gap-3 text-xs sm:text-sm">
@ -5997,8 +5935,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                {/* 🆕 Multi-Level Headers (Column Bands) */}
                {columnBandsInfo?.hasBands && (
                  <tr
-                    className="border-border/60 bg-muted/40 h-8 border-b sm:h-10"
+                    className="border-primary/10 bg-muted/70 h-8 border-b sm:h-10"
-                    style={{ backgroundColor: "hsl(var(--muted) / 0.4)" }}
+                    style={{ backgroundColor: "hsl(var(--muted) / 0.7)" }}
                  >
                    {visibleColumns.map((column, colIdx) => {
                      // 이 컬럼이 속한 band 찾기
@ -6039,9 +5977,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                  </tr>
                )}
                <tr
-                  className="bg-muted/80 h-10 border-b border-border/60 sm:h-12"
+                  className="border-primary/20 bg-muted h-10 border-b-2 sm:h-12"
                  style={{
-                    backgroundColor: "hsl(var(--muted) / 0.4)",
+                    backgroundColor: "hsl(var(--muted))",
                  }}
                >
                  {visibleColumns.map((column, columnIndex) => {
@ -6069,12 +6007,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                        key={column.columnName}
                        ref={(el) => (columnRefs.current[column.columnName] = el)}
                        className={cn(
-                          "group text-muted-foreground relative h-8 overflow-hidden text-[10px] font-bold uppercase tracking-[0.04em] text-ellipsis whitespace-nowrap select-none sm:h-10 sm:text-xs",
+                          "text-foreground/90 relative h-8 overflow-hidden text-xs font-bold text-ellipsis whitespace-nowrap select-none sm:h-10 sm:text-sm",
-                          column.columnName === "__checkbox__" ? "px-0 py-1" : "px-3 py-2",
+                          column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-2",
                          column.sortable !== false &&
                            column.columnName !== "__checkbox__" &&
-                            "hover:text-foreground hover:bg-muted/50 cursor-pointer transition-colors",
+                            "hover:bg-muted/70 cursor-pointer transition-colors",
                          sortColumn === column.columnName && "!text-primary",
                          isFrozen && "sticky z-40 shadow-[2px_0_4px_rgba(0,0,0,0.1)]",
                          // 🆕 Column Reordering 스타일
                          isColumnDragEnabled &&
@ -6094,7 +6031,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                          minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                          maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                          userSelect: "none",
-                          backgroundColor: "hsl(var(--muted) / 0.4)",
+                          backgroundColor: "hsl(var(--muted))",
                          ...(isFrozen && { left: `${leftPosition}px` }),
                        }}
                        // 🆕 Column Reordering 이벤트
@ -6114,12 +6051,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                          renderCheckboxHeader()
                        ) : (
                          <div style={{ display: "flex", alignItems: "center", gap: "4px", justifyContent: "center" }}>
                            {isColumnDragEnabled && (
                              <GripVertical className="absolute left-0.5 top-1/2 h-3 w-3 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-40" />
                            )}
                            <span>{columnLabels[column.columnName] || column.displayName}</span>
                            {column.sortable !== false && sortColumn === column.columnName && (
-                              <span className="text-primary">{sortDirection === "asc" ? "↑" : "↓"}</span>
+                              <span>{sortDirection === "asc" ? "↑" : "↓"}</span>
                            )}
                            {/* 🆕 헤더 필터 버튼 */}
                            {tableConfig.headerFilter !== false &&
@ -6344,8 +6278,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                            <tr
                              key={index}
                              className={cn(
-                                "hover:bg-accent cursor-pointer border-b border-border/50 transition-[background] duration-75",
+                                "bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors",
                                index % 2 === 0 ? "bg-background" : "bg-muted/20",
                              )}
                              onClick={(e) => handleRowClick(row, index, e)}
                            >
@ -6376,14 +6309,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                  <td
                                    key={column.columnName}
                                    className={cn(
-                                      "text-foreground text-[11px] font-normal",
+                                      "text-foreground text-xs font-normal sm:text-sm",
-                                      inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap max-w-[170px]",
+                                      // 이미지 컬럼은 overflow/ellipsis 제외 (이미지 잘림 방지)
                                      inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap",
                                      column.columnName === "__checkbox__"
-                                        ? "px-0 py-[7px] text-center"
+                                        ? "px-0 py-1"
-                                        : "px-3 py-[7px]",
+                                        : "px-2 py-1 sm:px-4 sm:py-1.5",
                                      isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
                                      (inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium",
                                      isNumeric && "tabular-nums",
                                    )}
                                    style={{
                                      textAlign:
@ -6398,18 +6330,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                          : `${100 / visibleColumns.length}%`,
                                      minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                      maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                  ...(isFrozen && {
+                                      ...(isFrozen && {
-                                    left: `${leftPosition}px`,
+                                        left: `${leftPosition}px`,
-                                    backgroundColor: index % 2 === 0
+                                        backgroundColor: "hsl(var(--background))",
-                                      ? "hsl(var(--background))"
+                                      }),
-                                      : "hsl(var(--muted) / 0.2)",
+                                    }}
-                                  }),
+                                  >
                                }}
                              >
                                    {column.columnName === "__checkbox__"
                                      ? renderCheckboxCell(row, index)
                                      : formatCellValue(cellValue, column, row)}
-                              </td>
+                                  </td>
                                );
                              })}
                            </tr>
@ -6485,10 +6415,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                        <tr
                          key={index}
                          className={cn(
-                            "hover:bg-accent cursor-pointer border-b border-border/50 transition-[background] duration-75",
+                            "bg-background hover:bg-muted/50 cursor-pointer border-b transition-colors",
-                            index % 2 === 0 ? "bg-background" : "bg-muted/20",
+                            isRowSelected && "bg-primary/10 hover:bg-primary/15",
                            isRowSelected && "!bg-primary/10 hover:!bg-primary/15",
                            isRowFocused && "ring-primary/50 ring-1 ring-inset",
                            // 🆕 Drag & Drop 스타일
                            isDragEnabled && "cursor-grab active:cursor-grabbing",
                            isDragging && "bg-muted opacity-50",
                            isDropTarget && "border-t-primary border-t-2",
@ -6548,20 +6478,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                data-row={index}
                                data-col={colIndex}
                                className={cn(
-                                  "text-foreground text-[11px] font-normal",
+                                  "text-foreground text-xs font-normal sm:text-sm",
-                                  inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap max-w-[170px]",
+                                  // 이미지 컬럼은 overflow/ellipsis 제외 (이미지 잘림 방지)
-                                  column.columnName === "__checkbox__" ? "px-0 py-[7px] text-center" : "px-3 py-[7px]",
+                                  inputType !== "image" && "overflow-hidden text-ellipsis whitespace-nowrap",
                                  column.columnName === "__checkbox__" ? "px-0 py-1" : "px-2 py-1 sm:px-4 sm:py-1.5",
                                  isFrozen && "sticky z-20 shadow-[2px_0_4px_rgba(0,0,0,0.08)]",
                                  // 🆕 포커스된 셀 스타일
                                  isCellFocused && !editingCell && "ring-primary bg-primary/5 ring-2 ring-inset",
                                  // 🆕 편집 중인 셀 스타일
                                  editingCell?.rowIndex === index && editingCell?.colIndex === colIndex && "p-0",
                                  // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
                                  isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
                                  // 🆕 유효성 에러: 빨간 테두리 및 배경
                                  cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
                                  // 🆕 검색 하이라이트 스타일 (노란 배경)
                                  isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
-                                  column.editable === false && "bg-muted/10 dark:bg-muted/10",
+                                  // 🆕 편집 불가 컬럼 스타일 (연한 회색 배경)
-                                  // 코드 컬럼: mono 폰트 + primary 색상
+                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
                                  (inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium",
                                  // 숫자 컬럼: tabular-nums 오른쪽 정렬
                                  isNumeric && "tabular-nums",
                                )}
                                // 🆕 유효성 에러 툴팁
                                title={cellValidationError || undefined}
@ -6578,9 +6511,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                  maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                  ...(isFrozen && {
                                    left: `${leftPosition}px`,
-                                    backgroundColor: index % 2 === 0
+                                    backgroundColor: "hsl(var(--background))",
                                      ? "hsl(var(--background))"
                                      : "hsl(var(--muted) / 0.2)",
                                  }),
                                }}
                                onClick={(e) => handleCellClick(index, colIndex, e)}
@ -6639,7 +6570,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                            onChange={(e) => setEditingValue(e.target.value)}
                                            onKeyDown={handleEditKeyDown}
                                            onBlur={saveEditing}
-                                            className="border-primary bg-background h-8 w-full shrink-0 border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
+                                            className="border-primary bg-background h-full w-full border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
                                            autoFocus
                                          >
                                            <option value="">선택하세요</option>
@ -6667,7 +6598,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                        );
                                      }
-                                      // 일반 입력 필드 (행 높이 유지: h-8 고정)
+                                      // 일반 입력 필드
                                      return (
                                        <input
                                          ref={editInputRef}
@ -6676,7 +6607,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                          onChange={(e) => setEditingValue(e.target.value)}
                                          onKeyDown={handleEditKeyDown}
                                          onBlur={saveEditing}
-                                          className="border-primary bg-background h-8 w-full shrink-0 border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
+                                          className="border-primary bg-background h-full w-full border-2 px-2 py-1 text-xs focus:outline-none sm:px-4 sm:py-1.5 sm:text-sm"
                                          style={{
                                            textAlign: isNumeric ? "right" : column.align || "left",
                                          }}
@ -6685,9 +6616,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                    })()
                                  : column.columnName === "__checkbox__"
                                    ? renderCheckboxCell(row, index)
-                                    : (cellValue === null || cellValue === undefined || cellValue === "")
+                                    : formatCellValue(cellValue, column, row)}
                                      ? <span className="text-muted-foreground/50">-</span>
                                      : formatCellValue(cellValue, column, row)}
                              </td>
                            );
                          })}
@ -6747,7 +6676,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                  : undefined,
                            ...(isFrozen && {
                              left: `${leftPosition}px`,
-                              backgroundColor: "hsl(var(--muted) / 0.4)",
+                              backgroundColor: "hsl(var(--muted) / 0.8)",
                            }),
                          }}
                        >
--- a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
@ -48,7 +48,7 @@ const TabsDesignEditor: React.FC<{
    return cn(
      "px-4 py-2 text-sm font-medium cursor-pointer transition-colors",
      isActive
-        ? "bg-primary/20 dark:bg-primary/25 border-b-2 border-primary text-primary font-semibold"
+        ? "bg-background border-b-2 border-primary text-primary"
        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
    );
  };
@ -283,7 +283,7 @@ const TabsDesignEditor: React.FC<{
  return (
    <div className="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-background">
      {/* 탭 헤더 */}
-      <div className="flex items-center border-b bg-muted/50">
+      <div className="flex items-center border-b bg-muted/30">
        {tabs.length > 0 ? (
          tabs.map((tab) => (
            <div
@ -649,8 +649,8 @@ ComponentRegistry.registerComponent({
      return cn(
        "px-4 py-2 text-sm font-medium cursor-pointer transition-colors",
        isActive
-          ? "bg-primary/10 border-b-2 border-primary text-primary font-semibold"
+          ? "bg-background border-b-2 border-primary text-primary"
-          : "text-foreground/70 hover:text-foreground hover:bg-muted/50"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
      );
    };
@ -662,7 +662,7 @@ ComponentRegistry.registerComponent({
        onDragEnd={onDragEnd}
      >
        {/* 탭 헤더 */}
-        <div className="flex items-center border-b bg-muted/50">
+        <div className="flex items-center border-b bg-muted/30">
          {tabs.length > 0 ? (
            tabs.map((tab) => (
              <div
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@ -542,6 +542,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초 내 재호출 시 무시
@ -612,18 +621,6 @@ export class ButtonActionExecutor {
    if (onSave) {
      try {
        await onSave();
        // 모달 저장 후에도 제어관리 실행 (onSave 경로에서도 dataflow 지원)
        if (config.enableDataflowControl && config.dataflowConfig) {
          console.log("📦 [handleSave] onSave 콜백 후 제어관리 실행 시작");
          const contextWithSavedData = {
            ...context,
            savedData: context.formData,
            selectedRowsData: context.selectedRowsData || [],
          };
          await this.executeAfterSaveControl(config, contextWithSavedData);
        }
        return true;
      } catch (error: any) {
        console.error("❌ [handleSave] onSave 콜백 실행 오류:", error);
@ -639,6 +636,13 @@ export class ButtonActionExecutor {
    console.log("⚠️ [handleSave] onSave 콜백 없음 - 기본 저장 로직 실행");
    // 🔧 디버그: beforeFormSave 이벤트 후 formData 확인
    console.log("🔍 [handleSave] beforeFormSave 이벤트 후:", {
      keys: Object.keys(context.formData || {}),
      hasCompanyImage: "company_image" in (context.formData || {}),
      companyImageValue: context.formData?.company_image,
    });
    // skipDefaultSave 플래그 확인
    if (beforeSaveEventDetail.skipDefaultSave) {
      return true;
@ -745,6 +749,11 @@ 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);
    }
    // 🆕 RepeaterFieldGroup JSON 문자열 파싱 및 저장 처리
@ -1002,9 +1011,6 @@ export class ButtonActionExecutor {
      // saveResult를 상위 스코프에서 정의 (repeaterSave 이벤트에서 사용)
      let saveResult: { success: boolean; data?: any; message?: string } | undefined;
      // 제어 실행 데이터를 상위 스코프에서 정의 (리피터 저장 완료 후 실행 위해)
      let pendingDataflowControl: { config: ButtonActionConfig; context: ButtonActionContext } | null = null;
      if (tableName && screenId) {
        // DB에서 실제 기본키 조회하여 INSERT/UPDATE 자동 판단
        const primaryKeyResult = await DynamicFormApi.getTablePrimaryKeys(tableName);
@ -1752,20 +1758,25 @@ export class ButtonActionExecutor {
          return false;
        }
-        // 제어 실행 준비 (실제 실행은 리피터 저장 완료 후로 지연)
+        // 🔥 저장 성공 후 연결된 제어 실행 (dataflowTiming이 'after'인 경우)
        console.log("🔍 [handleSave] 제어관리 설정 체크:", {
          enableDataflowControl: config.enableDataflowControl,
          hasDataflowConfig: !!config.dataflowConfig,
          flowControls: config.dataflowConfig?.flowControls?.length || 0,
        });
        if (config.enableDataflowControl && config.dataflowConfig) {
          // 테이블 섹션 데이터 파싱 (comp_로 시작하는 필드에 JSON 배열이 있는 경우)
          // 입고 화면 등에서 품목 목록이 comp_xxx 필드에 JSON 문자열로 저장됨
          // 🔧 수정: saveResult.data가 3단계로 중첩된 경우 실제 폼 데이터 추출
          // saveResult.data = API 응답 { success, data, message }
          // saveResult.data.data = 저장된 레코드 { id, screenId, tableName, data, createdAt... }
          // saveResult.data.data.data = 실제 폼 데이터 { sabun, user_name... }
          const savedRecord = saveResult?.data?.data || saveResult?.data || {};
          const actualFormData = savedRecord?.data || savedRecord;
          const formData: Record<string, any> = (
            Object.keys(actualFormData).length > 0 ? actualFormData : context.formData || {}
          ) as Record<string, any>;
          console.log("📦 [executeAfterSaveControl] savedRecord 구조:", Object.keys(savedRecord));
          console.log("📦 [executeAfterSaveControl] actualFormData 추출:", Object.keys(formData));
          console.log("📦 [executeAfterSaveControl] formData.sabun:", formData.sabun);
          let parsedSectionData: any[] = [];
          // comp_로 시작하는 필드에서 테이블 섹션 데이터 찾기
          const compFieldKey = Object.keys(formData).find(
            (key) => key.startsWith("comp_") && typeof formData[key] === "string",
          );
@ -1774,8 +1785,11 @@ export class ButtonActionExecutor {
            try {
              const sectionData = JSON.parse(formData[compFieldKey]);
              if (Array.isArray(sectionData) && sectionData.length > 0) {
                // 공통 필드와 섹션 데이터 병합
                parsedSectionData = sectionData.map((item: any) => {
                  // 섹션 데이터에서 불필요한 내부 필드 제거
                  const { _isNewItem, _targetTable, _existingRecord, ...cleanItem } = item;
                  // 공통 필드(comp_ 필드 제외) + 섹션 아이템 병합
                  const commonFields: Record<string, any> = {};
                  Object.keys(formData).forEach((key) => {
                    if (!key.startsWith("comp_") && !key.endsWith("_numberingRuleId")) {
@ -1790,14 +1804,14 @@ export class ButtonActionExecutor {
            }
          }
-          pendingDataflowControl = {
+          // 저장된 데이터를 context에 추가하여 플로우에 전달
-            config,
+          const contextWithSavedData = {
-            context: {
+            ...context,
-              ...context,
+            savedData: formData,
-              savedData: formData,
+            // 파싱된 섹션 데이터가 있으면 selectedRowsData로 전달
-              selectedRowsData: parsedSectionData.length > 0 ? parsedSectionData : context.selectedRowsData,
+            selectedRowsData: parsedSectionData.length > 0 ? parsedSectionData : context.selectedRowsData,
            },
          };
          await this.executeAfterSaveControl(config, contextWithSavedData);
        }
      } else {
        throw new Error("저장에 필요한 정보가 부족합니다. (테이블명 또는 화면ID 누락)");
@ -1921,26 +1935,13 @@ export class ButtonActionExecutor {
        await repeaterSavePromise;
      }
      // 리피터 저장 완료 후 제어관리 실행 (디테일 레코드가 DB에 있는 상태에서 실행)
      console.log("🔍 [handleSave] 리피터 저장 완료, pendingDataflowControl:", !!pendingDataflowControl);
      if (pendingDataflowControl) {
        console.log("📦 [handleSave] 리피터 저장 완료 후 제어관리 실행 시작");
        await this.executeAfterSaveControl(
          pendingDataflowControl.config,
          pendingDataflowControl.context,
        );
      }
      // 테이블과 플로우 새로고침 (모달 닫기 전에 실행)
      context.onRefresh?.();
      context.onFlowRefresh?.();
-      // 저장 성공 후 모달 닫기 이벤트 발생 (모달 내부에서만)
+      // 저장 성공 후 모달 닫기 이벤트 발생
-      // 비모달 화면에서 이 이벤트를 발행하면 ScreenModal이 반응하여 컴포넌트 트리 재마운트 발생
+      window.dispatchEvent(new CustomEvent("closeEditModal"));
-      if (context.onClose) {
+      window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
        window.dispatchEvent(new CustomEvent("closeEditModal"));
        window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
      }
      return true;
    } catch (error: any) {
--- a/frontend/lib/utils/dataMapping.ts
+++ b/frontend/lib/utils/dataMapping.ts
@ -8,27 +8,21 @@ import type {
  Condition,
  TransformFunction,
 } from "@/types/screen-embedding";
 import type { EntityJoinColumnMeta } from "@/types/data-transfer";
 import { logger } from "./logger";
 /**
 * 매핑 규칙 적용
 * @param data 배열 또는 단일 객체
 * @param rules 매핑 규칙 배열
 * @param entityJoinColumns 엔티티 조인 메타데이터 (선택적) - sourceField 값이 비었을 때 조인 alias에서 해결
 * @returns 매핑된 배열
 */
-export function applyMappingRules(
+export function applyMappingRules(data: any[] | any, rules: MappingRule[]): any[] {
  data: any[] | any,
  rules: MappingRule[],
  entityJoinColumns?: EntityJoinColumnMeta[],
 ): any[] {
  // 빈 데이터 처리
  if (!data) {
    return [];
  }
-  // 배열이 아닌 경우 배열로 변환
+  // 🆕 배열이 아닌 경우 배열로 변환
  const dataArray = Array.isArray(data) ? data : [data];
  if (dataArray.length === 0) {
@ -48,34 +42,22 @@ export function applyMappingRules(
    return [applyTransformRules(dataArray, rules)];
  }
  // 엔티티 조인 alias 역방향 맵 구성: { referenceColumn → joinAlias }
  // ex) joinAlias "part_code_item_name" → sourceColumn "part_code", referenceColumn "item_name"
  const joinAliasMap = buildJoinAliasMap(entityJoinColumns);
  // 일반 매핑 (각 행에 대해 매핑)
-  // 원본 데이터를 복사한 후 매핑 규칙 적용 (매핑되지 않은 필드도 유지)
+  // 🆕 원본 데이터를 복사한 후 매핑 규칙 적용 (매핑되지 않은 필드도 유지)
  return dataArray.map((row) => {
    // 원본 데이터 복사
    const mappedRow: any = { ...row };
    for (const rule of rules) {
      // sourceField와 targetField가 모두 있어야 매핑 적용
      if (!rule.sourceField || !rule.targetField) {
        continue;
      }
-      let sourceValue = getNestedValue(row, rule.sourceField);
+      const sourceValue = getNestedValue(row, rule.sourceField);
      // sourceField 값이 비어있으면 엔티티 조인 alias에서 해결 시도
      if (isEmptyValue(sourceValue) && joinAliasMap.size > 0) {
        sourceValue = resolveFromEntityJoin(row, rule.targetField, joinAliasMap);
        if (sourceValue !== undefined) {
          logger.info(
            `[dataMapping] 엔티티 조인 해결: ${rule.sourceField}(비어있음) → targetField "${rule.targetField}" → alias에서 값 획득`,
          );
        }
      }
      const targetValue = sourceValue ?? rule.defaultValue;
      // 소스 필드와 타겟 필드가 다르면 소스 필드 제거 후 타겟 필드에 설정
      if (rule.sourceField !== rule.targetField) {
        delete mappedRow[rule.sourceField];
      }
@ -87,50 +69,6 @@ export function applyMappingRules(
  });
 }
 /**
 * 엔티티 조인 alias에서 역방향 참조 맵 구성
 * joinAlias 네이밍 규칙: {sourceColumn}_{referenceColumn}
 * 예: "part_code_item_name" → sourceColumn="part_code", referenceColumn="item_name"
 *
 * 반환 Map: referenceColumn → joinAlias
 * 예: "item_name" → "part_code_item_name"
 */
 function buildJoinAliasMap(
  entityJoinColumns?: EntityJoinColumnMeta[],
 ): Map<string, string> {
  const map = new Map<string, string>();
  if (!entityJoinColumns || entityJoinColumns.length === 0) return map;
  for (const meta of entityJoinColumns) {
    const prefix = `${meta.sourceColumn}_`;
    if (meta.joinAlias.startsWith(prefix)) {
      const referenceColumn = meta.joinAlias.slice(prefix.length);
      map.set(referenceColumn, meta.joinAlias);
    }
  }
  return map;
 }
 /**
 * 엔티티 조인 alias에서 targetField에 해당하는 값 해결
 * targetField 이름으로 조인 alias를 찾아 row에서 값을 가져옴
 */
 function resolveFromEntityJoin(
  row: any,
  targetField: string,
  joinAliasMap: Map<string, string>,
 ): any {
  const joinAlias = joinAliasMap.get(targetField);
  if (!joinAlias) return undefined;
  const value = row[joinAlias];
  return isEmptyValue(value) ? undefined : value;
 }
 function isEmptyValue(value: any): boolean {
  return value === null || value === undefined || value === "";
 }
 /**
 * 변환 함수 적용
 */
--- a/frontend/lib/v2-core/events/types.ts
+++ b/frontend/lib/v2-core/events/types.ts
@ -54,9 +54,6 @@ export const V2_EVENTS = {
  RELATED_BUTTON_UNREGISTER: "v2:related-button:unregister",
  RELATED_BUTTON_SELECT: "v2:related-button:select",
  // 출하계획 저장
  SHIPPING_PLAN_SAVE: "v2:shipping-plan:save",
  // 스케줄 자동 생성
  SCHEDULE_GENERATE_REQUEST: "v2:schedule:generate:request",
  SCHEDULE_GENERATE_PREVIEW: "v2:schedule:generate:preview",
@ -240,15 +237,6 @@ export interface V2RelatedButtonSelectEvent {
  selectedData: any[];
 }
 // ============================================================================
 // 출하계획 저장 이벤트
 // ============================================================================
 /** 출하계획 저장 요청 이벤트 */
 export interface V2ShippingPlanSaveEvent {
  requestId: string;
 }
 // ============================================================================
 // 스케줄 자동 생성 이벤트
 // ============================================================================
@ -346,8 +334,6 @@ export interface V2EventPayloadMap {
  [V2_EVENTS.RELATED_BUTTON_UNREGISTER]: V2RelatedButtonUnregisterEvent;
  [V2_EVENTS.RELATED_BUTTON_SELECT]: V2RelatedButtonSelectEvent;
  [V2_EVENTS.SHIPPING_PLAN_SAVE]: V2ShippingPlanSaveEvent;
  [V2_EVENTS.SCHEDULE_GENERATE_REQUEST]: V2ScheduleGenerateRequestEvent;
  [V2_EVENTS.SCHEDULE_GENERATE_PREVIEW]: V2ScheduleGeneratePreviewEvent;
  [V2_EVENTS.SCHEDULE_GENERATE_APPLY]: V2ScheduleGenerateApplyEvent;
--- a/frontend/types/data-transfer.ts
+++ b/frontend/types/data-transfer.ts
@ -157,17 +157,6 @@ export interface DataReceivable {
  getData(): any;
 }
 /**
 * 엔티티 조인 컬럼 메타데이터
 * 소스 테이블의 FK가 참조 테이블과 어떻게 조인되었는지 정보
 */
 export interface EntityJoinColumnMeta {
  sourceColumn: string;
  joinAlias: string;
  referenceTable: string;
  sourceTable?: string;
 }
 /**
 * 데이터 제공 가능한 컴포넌트 인터페이스
 * 데이터를 제공할 수 있는 컴포넌트가 구현해야 하는 인터페이스
@ -191,11 +180,5 @@ export interface DataProvidable {
   * 선택 초기화 메서드
   */
  clearSelection(): void;
  /**
   * 엔티티 조인 컬럼 메타데이터 반환 (선택적)
   * 전달 매핑 시 조인 alias 해결에 사용
   */
  getEntityJoinColumns?(): EntityJoinColumnMeta[];
 }