backend-node/src/app.ts

@@ -123,6 +123,7 @@ import cascadingMutualExclusionRoutes from "./routes/cascadingMutualExclusionRou
 import cascadingHierarchyRoutes from "./routes/cascadingHierarchyRoutes"; // 다단계 계층 관리
 import categoryValueCascadingRoutes from "./routes/categoryValueCascadingRoutes"; // 카테고리 값 연쇄관계
 import categoryTreeRoutes from "./routes/categoryTreeRoutes"; // 카테고리 트리 (테스트)
+import processWorkStandardRoutes from "./routes/processWorkStandardRoutes"; // 공정 작업기준
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@@ -304,6 +305,7 @@ app.use("/api/cascading-exclusions", cascadingMutualExclusionRoutes); // 상호
 app.use("/api/cascading-hierarchy", cascadingHierarchyRoutes); // 다단계 계층 관리
 app.use("/api/category-value-cascading", categoryValueCascadingRoutes); // 카테고리 값 연쇄관계
 app.use("/api/category-tree", categoryTreeRoutes); // 카테고리 트리 (테스트)
+app.use("/api/process-work-standard", processWorkStandardRoutes); // 공정 작업기준
 app.use("/api", screenEmbeddingRoutes); // 화면 임베딩 및 데이터 전달
 app.use("/api/vehicle", vehicleTripRoutes); // 차량 운행 이력 관리
 // app.use("/api/collections", collectionRoutes); // 임시 주석

backend-node/src/controllers/processWorkStandardController.ts

@@ -0,0 +1,573 @@
+/**
+ * 공정 작업기준 컨트롤러
+ * 품목별 라우팅/공정에 대한 작업 항목 및 상세 관리
+ */
+
+import { Request, Response } from "express";
+import { getPool } from "../database/db";
+import { logger } from "../utils/logger";
+
+// ============================================================
+// 품목/라우팅/공정 조회 (좌측 트리 데이터)
+// ============================================================
+
+/**
+ * 라우팅이 있는 품목 목록 조회
+ * 요청 쿼리: tableName(품목테이블), nameColumn, codeColumn
+ */
+export async function getItemsWithRouting(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const {
+      tableName = "item_info",
+      nameColumn = "item_name",
+      codeColumn = "item_number",
+      routingTable = "item_routing_version",
+      routingFkColumn = "item_code",
+      search = "",
+    } = req.query as Record<string, string>;
+
+    const searchCondition = search
+      ? `AND (i.${nameColumn} ILIKE $2 OR i.${codeColumn} ILIKE $2)`
+      : "";
+    const params: any[] = [companyCode];
+    if (search) params.push(`%${search}%`);
+
+    const query = `
+      SELECT DISTINCT
+        i.id,
+        i.${nameColumn} AS item_name,
+        i.${codeColumn} AS item_code
+      FROM ${tableName} i
+      INNER JOIN ${routingTable} rv ON rv.${routingFkColumn} = i.${codeColumn}
+        AND rv.company_code = i.company_code
+      WHERE i.company_code = $1
+        ${searchCondition}
+      ORDER BY i.${codeColumn}
+    `;
+
+    const result = await getPool().query(query, params);
+
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("품목 목록 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 품목별 라우팅 버전 + 공정 목록 조회 (트리 하위 데이터)
+ */
+export async function getRoutingsWithProcesses(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { itemCode } = req.params;
+    const {
+      routingVersionTable = "item_routing_version",
+      routingDetailTable = "item_routing_detail",
+      routingFkColumn = "item_code",
+      processTable = "process_mng",
+      processNameColumn = "process_name",
+      processCodeColumn = "process_code",
+    } = req.query as Record<string, string>;
+
+    // 라우팅 버전 목록
+    const versionsQuery = `
+      SELECT id, version_name, description, created_date
+      FROM ${routingVersionTable}
+      WHERE ${routingFkColumn} = $1 AND company_code = $2
+      ORDER BY created_date DESC
+    `;
+    const versionsResult = await getPool().query(versionsQuery, [
+      itemCode,
+      companyCode,
+    ]);
+
+    // 각 버전별 공정 목록
+    const routings = [];
+    for (const version of versionsResult.rows) {
+      const detailsQuery = `
+        SELECT
+          rd.id AS routing_detail_id,
+          rd.seq_no,
+          rd.process_code,
+          rd.is_required,
+          rd.work_type,
+          p.${processNameColumn} AS process_name
+        FROM ${routingDetailTable} rd
+        LEFT JOIN ${processTable} p ON p.${processCodeColumn} = rd.process_code
+          AND p.company_code = rd.company_code
+        WHERE rd.routing_version_id = $1 AND rd.company_code = $2
+        ORDER BY rd.seq_no::integer
+      `;
+      const detailsResult = await getPool().query(detailsQuery, [
+        version.id,
+        companyCode,
+      ]);
+
+      routings.push({
+        ...version,
+        processes: detailsResult.rows,
+      });
+    }
+
+    return res.json({ success: true, data: routings });
+  } catch (error: any) {
+    logger.error("라우팅/공정 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+// ============================================================
+// 작업 항목 CRUD
+// ============================================================
+
+/**
+ * 공정별 작업 항목 목록 조회 (phase별 그룹)
+ */
+export async function getWorkItems(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { routingDetailId } = req.params;
+
+    const query = `
+      SELECT
+        wi.id,
+        wi.routing_detail_id,
+        wi.work_phase,
+        wi.title,
+        wi.is_required,
+        wi.sort_order,
+        wi.description,
+        wi.created_date,
+        (SELECT COUNT(*) FROM process_work_item_detail d
+         WHERE d.work_item_id = wi.id AND d.company_code = wi.company_code
+        )::integer AS detail_count
+      FROM process_work_item wi
+      WHERE wi.routing_detail_id = $1 AND wi.company_code = $2
+      ORDER BY wi.work_phase, wi.sort_order, wi.created_date
+    `;
+
+    const result = await getPool().query(query, [routingDetailId, companyCode]);
+
+    // phase별 그룹핑
+    const grouped: Record<string, any[]> = {};
+    for (const row of result.rows) {
+      const phase = row.work_phase;
+      if (!grouped[phase]) grouped[phase] = [];
+      grouped[phase].push(row);
+    }
+
+    return res.json({ success: true, data: grouped, items: result.rows });
+  } catch (error: any) {
+    logger.error("작업 항목 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 작업 항목 추가
+ */
+export async function createWorkItem(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    const writer = req.user?.userId;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { routing_detail_id, work_phase, title, is_required, sort_order, description } = req.body;
+
+    if (!routing_detail_id || !work_phase || !title) {
+      return res.status(400).json({
+        success: false,
+        message: "routing_detail_id, work_phase, title은 필수입니다",
+      });
+    }
+
+    const query = `
+      INSERT INTO process_work_item
+        (company_code, routing_detail_id, work_phase, title, is_required, sort_order, description, writer)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+      RETURNING *
+    `;
+
+    const result = await getPool().query(query, [
+      companyCode,
+      routing_detail_id,
+      work_phase,
+      title,
+      is_required || "N",
+      sort_order || 0,
+      description || null,
+      writer,
+    ]);
+
+    logger.info("작업 항목 생성", { companyCode, id: result.rows[0].id });
+    return res.json({ success: true, data: result.rows[0] });
+  } catch (error: any) {
+    logger.error("작업 항목 생성 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 작업 항목 수정
+ */
+export async function updateWorkItem(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { id } = req.params;
+    const { title, is_required, sort_order, description } = req.body;
+
+    const query = `
+      UPDATE process_work_item
+      SET title = COALESCE($1, title),
+          is_required = COALESCE($2, is_required),
+          sort_order = COALESCE($3, sort_order),
+          description = COALESCE($4, description),
+          updated_date = NOW()
+      WHERE id = $5 AND company_code = $6
+      RETURNING *
+    `;
+
+    const result = await getPool().query(query, [
+      title,
+      is_required,
+      sort_order,
+      description,
+      id,
+      companyCode,
+    ]);
+
+    if (result.rowCount === 0) {
+      return res.status(404).json({ success: false, message: "항목을 찾을 수 없습니다" });
+    }
+
+    logger.info("작업 항목 수정", { companyCode, id });
+    return res.json({ success: true, data: result.rows[0] });
+  } catch (error: any) {
+    logger.error("작업 항목 수정 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 작업 항목 삭제 (상세도 함께 삭제)
+ */
+export async function deleteWorkItem(req: Request, res: Response) {
+  const client = await getPool().connect();
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { id } = req.params;
+
+    await client.query("BEGIN");
+
+    // 상세 먼저 삭제
+    await client.query(
+      "DELETE FROM process_work_item_detail WHERE work_item_id = $1 AND company_code = $2",
+      [id, companyCode]
+    );
+
+    // 항목 삭제
+    const result = await client.query(
+      "DELETE FROM process_work_item WHERE id = $1 AND company_code = $2 RETURNING id",
+      [id, companyCode]
+    );
+
+    if (result.rowCount === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({ success: false, message: "항목을 찾을 수 없습니다" });
+    }
+
+    await client.query("COMMIT");
+    logger.info("작업 항목 삭제", { companyCode, id });
+    return res.json({ success: true });
+  } catch (error: any) {
+    await client.query("ROLLBACK");
+    logger.error("작업 항목 삭제 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  } finally {
+    client.release();
+  }
+}
+
+// ============================================================
+// 작업 항목 상세 CRUD
+// ============================================================
+
+/**
+ * 작업 항목 상세 목록 조회
+ */
+export async function getWorkItemDetails(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { workItemId } = req.params;
+
+    const query = `
+      SELECT id, work_item_id, detail_type, content, is_required, sort_order, remark, created_date
+      FROM process_work_item_detail
+      WHERE work_item_id = $1 AND company_code = $2
+      ORDER BY sort_order, created_date
+    `;
+
+    const result = await getPool().query(query, [workItemId, companyCode]);
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("작업 항목 상세 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 작업 항목 상세 추가
+ */
+export async function createWorkItemDetail(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    const writer = req.user?.userId;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { work_item_id, detail_type, content, is_required, sort_order, remark } = req.body;
+
+    if (!work_item_id || !content) {
+      return res.status(400).json({
+        success: false,
+        message: "work_item_id, content는 필수입니다",
+      });
+    }
+
+    // work_item이 같은 company_code인지 검증
+    const ownerCheck = await getPool().query(
+      "SELECT id FROM process_work_item WHERE id = $1 AND company_code = $2",
+      [work_item_id, companyCode]
+    );
+    if (ownerCheck.rowCount === 0) {
+      return res.status(403).json({ success: false, message: "권한이 없습니다" });
+    }
+
+    const query = `
+      INSERT INTO process_work_item_detail
+        (company_code, work_item_id, detail_type, content, is_required, sort_order, remark, writer)
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+      RETURNING *
+    `;
+
+    const result = await getPool().query(query, [
+      companyCode,
+      work_item_id,
+      detail_type || null,
+      content,
+      is_required || "N",
+      sort_order || 0,
+      remark || null,
+      writer,
+    ]);
+
+    logger.info("작업 항목 상세 생성", { companyCode, id: result.rows[0].id });
+    return res.json({ success: true, data: result.rows[0] });
+  } catch (error: any) {
+    logger.error("작업 항목 상세 생성 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 작업 항목 상세 수정
+ */
+export async function updateWorkItemDetail(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { id } = req.params;
+    const { detail_type, content, is_required, sort_order, remark } = req.body;
+
+    const query = `
+      UPDATE process_work_item_detail
+      SET detail_type = COALESCE($1, detail_type),
+          content = COALESCE($2, content),
+          is_required = COALESCE($3, is_required),
+          sort_order = COALESCE($4, sort_order),
+          remark = COALESCE($5, remark),
+          updated_date = NOW()
+      WHERE id = $6 AND company_code = $7
+      RETURNING *
+    `;
+
+    const result = await getPool().query(query, [
+      detail_type,
+      content,
+      is_required,
+      sort_order,
+      remark,
+      id,
+      companyCode,
+    ]);
+
+    if (result.rowCount === 0) {
+      return res.status(404).json({ success: false, message: "상세를 찾을 수 없습니다" });
+    }
+
+    logger.info("작업 항목 상세 수정", { companyCode, id });
+    return res.json({ success: true, data: result.rows[0] });
+  } catch (error: any) {
+    logger.error("작업 항목 상세 수정 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 작업 항목 상세 삭제
+ */
+export async function deleteWorkItemDetail(req: Request, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { id } = req.params;
+
+    const result = await getPool().query(
+      "DELETE FROM process_work_item_detail WHERE id = $1 AND company_code = $2 RETURNING id",
+      [id, companyCode]
+    );
+
+    if (result.rowCount === 0) {
+      return res.status(404).json({ success: false, message: "상세를 찾을 수 없습니다" });
+    }
+
+    logger.info("작업 항목 상세 삭제", { companyCode, id });
+    return res.json({ success: true });
+  } catch (error: any) {
+    logger.error("작업 항목 상세 삭제 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+// ============================================================
+// 전체 저장 (일괄)
+// ============================================================
+
+/**
+ * 전체 저장: 작업 항목 + 상세를 일괄 저장
+ * 기존 데이터를 삭제하고 새로 삽입하는 replace 방식
+ */
+export async function saveAll(req: Request, res: Response) {
+  const client = await getPool().connect();
+  try {
+    const companyCode = req.user?.companyCode;
+    const writer = req.user?.userId;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { routing_detail_id, items } = req.body;
+
+    if (!routing_detail_id || !Array.isArray(items)) {
+      return res.status(400).json({
+        success: false,
+        message: "routing_detail_id와 items 배열이 필요합니다",
+      });
+    }
+
+    await client.query("BEGIN");
+
+    // 기존 상세 삭제
+    await client.query(
+      `DELETE FROM process_work_item_detail
+       WHERE work_item_id IN (
+         SELECT id FROM process_work_item
+         WHERE routing_detail_id = $1 AND company_code = $2
+       )`,
+      [routing_detail_id, companyCode]
+    );
+
+    // 기존 항목 삭제
+    await client.query(
+      "DELETE FROM process_work_item WHERE routing_detail_id = $1 AND company_code = $2",
+      [routing_detail_id, companyCode]
+    );
+
+    // 새 항목 + 상세 삽입
+    for (const item of items) {
+      const itemResult = await client.query(
+        `INSERT INTO process_work_item
+          (company_code, routing_detail_id, work_phase, title, is_required, sort_order, description, writer)
+         VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+         RETURNING id`,
+        [
+          companyCode,
+          routing_detail_id,
+          item.work_phase,
+          item.title,
+          item.is_required || "N",
+          item.sort_order || 0,
+          item.description || null,
+          writer,
+        ]
+      );
+
+      const workItemId = itemResult.rows[0].id;
+
+      if (Array.isArray(item.details)) {
+        for (const detail of item.details) {
+          await client.query(
+            `INSERT INTO process_work_item_detail
+              (company_code, work_item_id, detail_type, content, is_required, sort_order, remark, writer)
+             VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
+            [
+              companyCode,
+              workItemId,
+              detail.detail_type || null,
+              detail.content,
+              detail.is_required || "N",
+              detail.sort_order || 0,
+              detail.remark || null,
+              writer,
+            ]
+          );
+        }
+      }
+    }
+
+    await client.query("COMMIT");
+    logger.info("작업기준 전체 저장", { companyCode, routing_detail_id, itemCount: items.length });
+    return res.json({ success: true, message: "저장 완료" });
+  } catch (error: any) {
+    await client.query("ROLLBACK");
+    logger.error("작업기준 전체 저장 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  } finally {
+    client.release();
+  }
+}

backend-node/src/routes/processWorkStandardRoutes.ts

@@ -0,0 +1,29 @@
+/**
+ * 공정 작업기준 라우트
+ */
+
+import express from "express";
+import * as ctrl from "../controllers/processWorkStandardController";
+
+const router = express.Router();
+
+// 품목/라우팅/공정 조회 (좌측 트리)
+router.get("/items", ctrl.getItemsWithRouting);
+router.get("/items/:itemCode/routings", ctrl.getRoutingsWithProcesses);
+
+// 작업 항목 CRUD
+router.get("/routing-detail/:routingDetailId/work-items", ctrl.getWorkItems);
+router.post("/work-items", ctrl.createWorkItem);
+router.put("/work-items/:id", ctrl.updateWorkItem);
+router.delete("/work-items/:id", ctrl.deleteWorkItem);
+
+// 작업 항목 상세 CRUD
+router.get("/work-items/:workItemId/details", ctrl.getWorkItemDetails);
+router.post("/work-item-details", ctrl.createWorkItemDetail);
+router.put("/work-item-details/:id", ctrl.updateWorkItemDetail);
+router.delete("/work-item-details/:id", ctrl.deleteWorkItemDetail);
+
+// 전체 저장 (일괄)
+router.put("/save-all", ctrl.saveAll);
+
+export default router;

db/migrate_company13_export.sh

@@ -0,0 +1,149 @@
+#!/bin/bash
+# ============================================================
+# 엘에스티라유텍(주) - 동부지사 (COMPANY_13) 전체 데이터 Export
+#
+# 사용법:
+#   1. SOURCE_* / TARGET_* 변수를 수정
+#   2. chmod +x migrate_company13_export.sh
+#   3. ./migrate_company13_export.sh export    → SQL 파일 생성
+#   4. ./migrate_company13_export.sh import    → 대상 DB에 적재
+# ============================================================
+
+SOURCE_HOST="localhost"
+SOURCE_PORT="5432"
+SOURCE_DB="vexplor"
+SOURCE_USER="postgres"
+
+TARGET_HOST="대상_호스트"
+TARGET_PORT="5432"
+TARGET_DB="대상_DB명"
+TARGET_USER="postgres"
+
+OUTPUT_FILE="company13_migration_$(date '+%Y%m%d_%H%M%S').sql"
+
+# 데이터가 있는 테이블 (의존성 순서)
+TABLES=(
+  "company_mng"
+  "user_info"
+  "authority_master"
+  "menu_info"
+  "external_db_connections"
+  "external_rest_api_connections"
+  "screen_definitions"
+  "screen_groups"
+  "screen_layouts_v1"
+  "screen_layouts_v2"
+  "screen_layouts_v3"
+  "screen_menu_assignments"
+  "dashboards"
+  "dashboard_elements"
+  "flow_definition"
+  "node_flows"
+  "table_column_category_values"
+  "attach_file_info"
+  "tax_invoice"
+  "auth_tokens"
+  "batch_configs"
+  "batch_execution_logs"
+  "batch_mappings"
+  "digital_twin_layout"
+  "digital_twin_layout_template"
+  "dtg_management"
+  "transport_statistics"
+  "vehicles"
+  "vehicle_location_history"
+)
+
+do_export() {
+  echo "=========================================="
+  echo " COMPANY_13 데이터 Export 시작"
+  echo "=========================================="
+  
+  cat > "$OUTPUT_FILE" <<'HEADER'
+-- ============================================================
+-- 엘에스티라유텍(주) - 동부지사 (COMPANY_13) 전체 데이터 마이그레이션
+-- 
+-- 총 29개 테이블, 약 11,500건 데이터
+-- 
+-- 실행 방법:
+--   psql -h HOST -U USER -d DATABASE -f 이_파일명.sql
+-- ============================================================
+
+SET client_encoding TO 'UTF8';
+SET standard_conforming_strings = on;
+
+BEGIN;
+
+HEADER
+
+  for TABLE in "${TABLES[@]}"; do
+    COUNT=$(psql -h "$SOURCE_HOST" -p "$SOURCE_PORT" -U "$SOURCE_USER" -d "$SOURCE_DB" \
+      -t -A -c "SELECT COUNT(*) FROM $TABLE WHERE company_code = 'COMPANY_13'")
+    COUNT=$(echo "$COUNT" | tr -d '[:space:]')
+    
+    if [ "$COUNT" -gt 0 ]; then
+      echo "  $TABLE: ${COUNT}건 추출 중..."
+      
+      echo "-- ----------------------------------------" >> "$OUTPUT_FILE"
+      echo "-- $TABLE (${COUNT}건)" >> "$OUTPUT_FILE"
+      echo "-- ----------------------------------------" >> "$OUTPUT_FILE"
+      echo "COPY $TABLE FROM stdin;" >> "$OUTPUT_FILE"
+      
+      psql -h "$SOURCE_HOST" -p "$SOURCE_PORT" -U "$SOURCE_USER" -d "$SOURCE_DB" \
+        -t -A -c "COPY (SELECT * FROM $TABLE WHERE company_code = 'COMPANY_13') TO STDOUT" >> "$OUTPUT_FILE"
+      
+      echo "\\." >> "$OUTPUT_FILE"
+      echo "" >> "$OUTPUT_FILE"
+    else
+      echo "  $TABLE: 데이터 없음 (건너뜀)"
+    fi
+  done
+
+  echo "" >> "$OUTPUT_FILE"
+  echo "COMMIT;" >> "$OUTPUT_FILE"
+  echo "" >> "$OUTPUT_FILE"
+  echo "-- 마이그레이션 완료" >> "$OUTPUT_FILE"
+
+  echo ""
+  echo "=========================================="
+  echo " Export 완료: $OUTPUT_FILE"
+  echo "=========================================="
+  echo ""
+  echo "대상 DB에서 실행:"
+  echo "  psql -h $TARGET_HOST -p $TARGET_PORT -U $TARGET_USER -d $TARGET_DB -f $OUTPUT_FILE"
+}
+
+do_import() {
+  SQL_FILE=$(ls -t company13_migration_*.sql 2>/dev/null | head -1)
+  
+  if [ -z "$SQL_FILE" ]; then
+    echo "마이그레이션 SQL 파일을 찾을 수 없습니다. 먼저 export를 실행하세요."
+    exit 1
+  fi
+  
+  echo "=========================================="
+  echo " COMPANY_13 데이터 Import 시작"
+  echo " 파일: $SQL_FILE"
+  echo " 대상: $TARGET_HOST:$TARGET_PORT/$TARGET_DB"
+  echo "=========================================="
+  
+  psql -h "$TARGET_HOST" -p "$TARGET_PORT" -U "$TARGET_USER" -d "$TARGET_DB" -f "$SQL_FILE"
+  
+  echo ""
+  echo "=========================================="
+  echo " Import 완료"
+  echo "=========================================="
+}
+
+case "${1:-export}" in
+  export)
+    do_export
+    ;;
+  import)
+    do_import
+    ;;
+  *)
+    echo "사용법: $0 {export|import}"
+    exit 1
+    ;;
+esac

docker/deploy/docker-compose.yml

@@ -12,7 +12,7 @@ services:
       NODE_ENV: production
       PORT: "3001"
       HOST: 0.0.0.0
-      DATABASE_URL: postgresql://postgres:vexplor0909!!@211.115.91.141:11134/plm
+      DATABASE_URL: postgresql://postgres:vexplor0909!!@211.115.91.141:11134/vexplor
       JWT_SECRET: ilshin-plm-super-secret-jwt-key-2024
       JWT_EXPIRES_IN: 24h
       CORS_ORIGIN: https://v1.vexplor.com,https://api.vexplor.com

docs/formdata-console-log-test-guide.md

@@ -0,0 +1,78 @@
+# formData 콘솔 로그 수동 테스트 가이드
+
+## 테스트 시나리오
+
+1. http://localhost:9771/screens/1599?menuObjid=1762422235300 접속
+2. 로그인 필요 시: `topseal_admin` / `1234`
+3. 5초 대기 (페이지 로드)
+4. 첫 번째 탭 "공정 마스터" 확인
+5. 좌측 패널에서 **P003** 행 클릭
+6. 우측 패널에서 **추가** 버튼 클릭
+7. 모달에서 설비(equipment) 드롭다운에서 항목 선택
+8. **저장** 버튼 클릭 **전** 콘솔 스냅샷 확인
+9. **저장** 버튼 클릭 **후** 콘솔 로그 확인
+
+## 확인할 콘솔 로그
+
+### 1. ADD 모드 formData 설정 (ScreenModal)
+
+```
+🔵 [ScreenModal] ADD모드 formData 설정: {...}
+```
+
+- **위치**: `frontend/components/common/ScreenModal.tsx` 358행
+- **의미**: 모달이 ADD 모드로 열릴 때 부모 데이터(splitPanelParentData)로 설정된 초기 formData
+- **확인**: `process_code`가 P003으로 포함되어 있는지
+
+### 2. formData 변경 시 (ScreenModal)
+
+```
+🟡 [ScreenModal] onFormDataChange: equipment_code → E001 | formData keys: [...] | process_code: P003
+```
+
+- **위치**: `frontend/components/common/ScreenModal.tsx` 1184행
+- **의미**: 사용자가 설비를 선택할 때마다 발생
+- **확인**: `process_code`가 유지되는지, `equipment_code`가 추가되는지
+
+### 3. 저장 시 formData 디버그 (ButtonPrimary)
+
+```
+🔴 [ButtonPrimary] 저장 시 formData 디버그: {
+  propsFormDataKeys: [...],
+  screenContextFormDataKeys: [...],
+  effectiveFormDataKeys: [...],
+  process_code: "P003",
+  equipment_code: "E001",
+  fullData: "{...}"
+}
+```
+
+- **위치**: `frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx` 1110행
+- **의미**: 저장 버튼 클릭 시 실제로 API에 전달되는 formData
+- **확인**: `process_code`, `equipment_code`가 모두 포함되어 있는지
+
+## 추가로 확인할 로그
+
+- `process_code` 포함 로그
+- `splitPanelParentData` 포함 로그
+- `🆕 [추가모달] screenId 기반 모달 열기:` (SplitPanelLayoutComponent 1639행)
+
+## 에러 확인
+
+콘솔에 빨간색으로 표시되는 에러 메시지가 있는지 확인하세요.
+
+## 사전 조건
+
+- **process_mng** 테이블에 P003 데이터가 있어야 함 (company_code = 로그인 사용자 회사)
+- **equipment_mng** 테이블에 설비 데이터가 있어야 함
+- 로그인 사용자가 해당 회사(COMPANY_7 등) 권한이 있어야 함
+
+## 자동 테스트 스크립트
+
+데이터가 준비된 환경에서:
+
+```bash
+cd frontend && npx tsx scripts/test-formdata-logs.ts
+```
+
+데이터가 없으면 "좌측 테이블에 데이터가 없습니다" 오류가 발생합니다.

docs/plans/process-work-standard-plan.md

@@ -0,0 +1,427 @@
+# 공정 작업기준 컴포넌트 (v2-process-work-standard) 구현 계획
+
+> **작성일**: 2026-02-24
+> **컴포넌트 ID**: `v2-process-work-standard`
+> **성격**: 도메인 특화 컴포넌트 (v2-rack-structure와 동일 패턴)
+
+---
+
+## 1. 현황 분석
+
+### 1.1 기존 DB 테이블 (참조용, 이미 존재)
+
+| 테이블 | 역할 | 핵심 컬럼 |
+|--------|------|----------|
+| `item_info` | 품목 마스터 | id, item_name, item_number, company_code |
+| `item_routing_version` | 라우팅 버전 | id, item_code, version_name, company_code |
+| `item_routing_detail` | 라우팅 상세 (공정 배정) | id, routing_version_id, seq_no, process_code, company_code |
+| `process_mng` | 공정 마스터 | id, process_code, process_name, company_code |
+
+### 1.2 신규 생성 필요 테이블
+
+**`process_work_item`** - 작업 항목 (검사 장비 준비, 외관 검사 등)
+
+| 컬럼 | 타입 | 설명 |
+|------|------|------|
+| id | VARCHAR PK | UUID |
+| company_code | VARCHAR NOT NULL | 멀티테넌시 |
+| routing_detail_id | VARCHAR NOT NULL | item_routing_detail.id FK |
+| work_phase | VARCHAR NOT NULL | Config의 phases[].key 값 (예: 'PRE', 'IN', 'POST' 또는 사용자 정의) |
+| title | VARCHAR NOT NULL | 항목 제목 (예: 검사 장비 준비) |
+| is_required | VARCHAR | 'Y' / 'N' |
+| sort_order | INTEGER | 표시 순서 |
+| description | TEXT | 비고/설명 |
+| created_date | TIMESTAMP | 생성일 |
+| updated_date | TIMESTAMP | 수정일 |
+| writer | VARCHAR | 작성자 |
+
+**`process_work_item_detail`** - 작업 항목 상세 (버니어 캘리퍼스 상태 소정 등)
+
+| 컬럼 | 타입 | 설명 |
+|------|------|------|
+| id | VARCHAR PK | UUID |
+| company_code | VARCHAR NOT NULL | 멀티테넌시 |
+| work_item_id | VARCHAR NOT NULL | process_work_item.id FK |
+| detail_type | VARCHAR | 'CHECK' / 'INSPECTION' / 'MEASUREMENT' 등 |
+| content | VARCHAR NOT NULL | 상세 내용 |
+| is_required | VARCHAR | 'Y' / 'N' |
+| sort_order | INTEGER | 표시 순서 |
+| remark | TEXT | 비고 |
+| created_date | TIMESTAMP | 생성일 |
+| updated_date | TIMESTAMP | 수정일 |
+| writer | VARCHAR | 작성자 |
+
+### 1.3 데이터 흐름 (5단계 연쇄)
+
+```
+item_info (품목)
+  └─→ item_routing_version (라우팅 버전)
+        └─→ item_routing_detail (공정 배정)  ← JOIN → process_mng (공정명)
+              └─→ process_work_item (작업 항목, phase별)
+                    └─→ process_work_item_detail (상세)
+```
+
+---
+
+## 2. 파일 구조 계획
+
+### 2.1 프론트엔드 (컴포넌트 등록)
+
+```
+frontend/lib/registry/components/v2-process-work-standard/
+├── index.ts                              # createComponentDefinition
+├── types.ts                              # 타입 정의
+├── config.ts                             # 기본 설정
+├── ProcessWorkStandardRenderer.tsx       # AutoRegisteringComponentRenderer
+├── ProcessWorkStandardConfigPanel.tsx    # 설정 패널
+├── ProcessWorkStandardComponent.tsx      # 메인 UI (좌우 분할)
+├── components/
+│   ├── ItemProcessSelector.tsx           # 좌측: 품목/라우팅/공정 아코디언 트리
+│   ├── WorkStandardEditor.tsx            # 우측: 작업기준 편집 영역 전체
+│   ├── WorkPhaseSection.tsx              # Pre/In/Post 섹션 (3회 재사용)
+│   ├── WorkItemCard.tsx                  # 작업 항목 카드
+│   ├── WorkItemDetailList.tsx            # 상세 리스트
+│   └── WorkItemAddModal.tsx              # 작업 항목 추가/수정 모달
+├── hooks/
+│   ├── useProcessWorkStandard.ts         # 전체 데이터 관리 훅
+│   ├── useItemProcessTree.ts            # 좌측 트리 데이터 훅
+│   └── useWorkItems.ts                   # 작업 항목 CRUD 훅
+└── README.md
+```
+
+### 2.2 백엔드 (API)
+
+```
+backend-node/src/
+├── routes/processWorkStandardRoutes.ts   # 라우트 정의
+└── controllers/processWorkStandardController.ts  # 컨트롤러
+```
+
+### 2.3 DB 마이그레이션
+
+```
+db/migrations/XXX_create_process_work_standard_tables.sql
+```
+
+---
+
+## 3. API 설계
+
+| Method | Endpoint | 설명 |
+|--------|----------|------|
+| GET | `/api/process-work-standard/items` | 품목 목록 (라우팅 있는 품목만) |
+| GET | `/api/process-work-standard/items/:itemCode/routings` | 품목별 라우팅 버전 + 공정 목록 |
+| GET | `/api/process-work-standard/routing-detail/:routingDetailId/work-items` | 공정별 작업 항목 목록 (phase별 그룹) |
+| POST | `/api/process-work-standard/work-items` | 작업 항목 추가 |
+| PUT | `/api/process-work-standard/work-items/:id` | 작업 항목 수정 |
+| DELETE | `/api/process-work-standard/work-items/:id` | 작업 항목 삭제 |
+| GET | `/api/process-work-standard/work-items/:workItemId/details` | 작업 항목 상세 목록 |
+| POST | `/api/process-work-standard/work-item-details` | 상세 추가 |
+| PUT | `/api/process-work-standard/work-item-details/:id` | 상세 수정 |
+| DELETE | `/api/process-work-standard/work-item-details/:id` | 상세 삭제 |
+| PUT | `/api/process-work-standard/save-all` | 전체 저장 (작업 항목 + 상세 일괄) |
+
+---
+
+## 4. 구현 단계 (TDD 기반)
+
+### Phase 1: DB + API 기반
+
+- [ ] 1-1. 마이그레이션 SQL 작성 (process_work_item, process_work_item_detail)
+- [ ] 1-2. 마이그레이션 실행 및 테이블 생성 확인
+- [ ] 1-3. 백엔드 라우트/컨트롤러 작성 (CRUD API)
+- [ ] 1-4. API 테스트 (품목 목록, 라우팅 조회, 작업항목 CRUD)
+
+### Phase 2: 컴포넌트 기본 구조
+
+- [ ] 2-1. types.ts, config.ts, index.ts 작성 (컴포넌트 정의)
+- [ ] 2-2. Renderer, ConfigPanel 작성 (V2 시스템 등록)
+- [ ] 2-3. components/index.ts에 import 추가
+- [ ] 2-4. getComponentConfigPanel.tsx에 매핑 추가
+- [ ] 2-5. 화면 디자이너에서 컴포넌트 배치 가능 확인
+
+### Phase 3: 좌측 패널 (품목/공정 선택)
+
+- [ ] 3-1. useItemProcessTree 훅 구현 (품목 목록 + 라우팅 조회)
+- [ ] 3-2. ItemProcessSelector 컴포넌트 (아코디언 + 공정 리스트)
+- [ ] 3-3. 검색 기능 (품목명/공정명 검색)
+- [ ] 3-4. 선택 상태 관리 + 우측 패널 연동
+
+### Phase 4: 우측 패널 (작업기준 편집)
+
+- [ ] 4-1. WorkStandardEditor 기본 레이아웃 (Pre/In/Post 3단 섹션)
+- [ ] 4-2. useWorkItems 훅 (작업 항목 + 상세 CRUD)
+- [ ] 4-3. WorkPhaseSection 컴포넌트 (섹션 헤더 + 카드 영역 + 상세 영역)
+- [ ] 4-4. WorkItemCard 컴포넌트 (카드 UI + 카운트 배지)
+- [ ] 4-5. WorkItemDetailList 컴포넌트 (상세 목록 + 인라인 편집)
+- [ ] 4-6. WorkItemAddModal (작업 항목 추가/수정 모달 + 상세 추가)
+
+### Phase 5: 통합 + 전체 저장
+
+- [ ] 5-1. 전체 저장 기능 (변경사항 일괄 저장 API 연동)
+- [ ] 5-2. 공정 선택 시 데이터 로딩/전환 처리
+- [ ] 5-3. Empty State 처리 (데이터 없을 때 안내 UI)
+- [ ] 5-4. 로딩/에러 상태 처리
+
+### Phase 6: 마무리
+
+- [ ] 6-1. 멀티테넌시 검증 (company_code 필터링)
+- [ ] 6-2. 반응형 디자인 점검
+- [ ] 6-3. README.md 작성
+
+---
+
+## 5. 핵심 UI 설계
+
+### 5.1 전체 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│ v2-process-work-standard                                           │
+├────────────────────┬────────────────────────────────────────────────┤
+│ 품목 및 공정 선택    │ [품목명] - [공정명]              [전체 저장]   │
+│                    │                                               │
+│ [검색 입력]         │ ── 작업 전 (Pre-Work)  N개 항목 ── [+항목추가] │
+│                    │ ┌────────┐ ┌─────────────────────────────┐    │
+│ ▼ 볼트 M8x20       │ │카드    │ │ 상세 리스트 (선택 시 표시)    │    │
+│   ★ 기본 라우팅     │ │       │ │                             │    │
+│   ◉ 재단           │ └────────┘ └─────────────────────────────┘    │
+│   ◉ 검사 ← 선택    │                                               │
+│   ★ 버전2          │ ── 작업 중 (In-Work)  N개 항목 ── [+항목추가]  │
+│                    │ ┌────────┐ ┌────────┐                        │
+│ ▶ 기어 50T         │ │카드1   │ │카드2   │  (상세: 우측 표시)      │
+│ ▶ 샤프트 D30       │ └────────┘ └────────┘                        │
+│                    │                                               │
+│                    │ ── 작업 후 (Post-Work)  N개 항목 ── [+항목추가] │
+│                    │ (동일 구조)                                    │
+├────────────────────┴────────────────────────────────────────────────┤
+│ 30%               │                 70%                            │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5.2 WorkPhaseSection 내부 구조
+
+```
+── 작업 전 (Pre-Work)  4개 항목  ────────────────── [+ 작업항목 추가]
+┌──────────────────────────────┬──────────────────────────────────────┐
+│ 작업 항목 카드 목록            │ 선택된 항목 상세                       │
+│                              │                                      │
+│ ┌──────────────────────┐    │ [항목 제목]                 [+ 상세추가]│
+│ │ ≡ 검사 장비 준비   ✏️ 🗑 │    │ ───────────────────────────────────  │
+│ │   4개  필수          │    │ 순서│유형  │내용              │필수│관리│
+│ └──────────────────────┘    │  1 │체크  │버니어 캘리퍼스... │필수│✏️🗑│
+│                              │  2 │체크  │마이크로미터...   │선택│✏️🗑│
+│ ┌──────────────────────┐    │  3 │체크  │검사대 청소       │선택│✏️🗑│
+│ │ ≡ 측정 도구 확인   ✏️ 🗑 │    │  4 │체크  │검사 기록지 준비  │필수│✏️🗑│
+│ │   2개  선택          │    │                                      │
+│ └──────────────────────┘    │                                      │
+└──────────────────────────────┴──────────────────────────────────────┘
+```
+
+### 5.3 작업 항목 추가 모달
+
+```
+┌─────────────────────────────────────────────┐
+│ 작업 항목 추가                          ✕    │
+├─────────────────────────────────────────────┤
+│ 기본 정보                                    │
+│                                             │
+│ 항목 제목 *           필수 여부               │
+│ [                 ]   [필수      ▼]          │
+│                                             │
+│ 비고                                        │
+│ [                                         ] │
+│                                             │
+│ 상세 항목                       [+ 상세 추가] │
+│ ┌───┬──────┬──────────────┬────┬────┐      │
+│ │순서│유형  │내용           │필수│관리│      │
+│ ├───┼──────┼──────────────┼────┼────┤      │
+│ │ 1 │체크  │              │필수│ 🗑 │      │
+│ └───┴──────┴──────────────┴────┴────┘      │
+│                                             │
+│              [취소]  [저장]                   │
+└─────────────────────────────────────────────┘
+```
+
+---
+
+## 6. 컴포넌트 Config 설계
+
+### 6.1 설정 패널 UI 구조
+
+```
+┌─────────────────────────────────────────────────┐
+│ 공정 작업기준 설정                                 │
+├─────────────────────────────────────────────────┤
+│                                                 │
+│ ── 데이터 소스 설정 ──────────────────────────    │
+│                                                 │
+│ 품목 테이블                                      │
+│ [item_info                              ▼]     │
+│ 품목명 컬럼            품목코드 컬럼               │
+│ [item_name         ▼]  [item_number    ▼]      │
+│                                                 │
+│ 라우팅 버전 테이블                                │
+│ [item_routing_version                   ▼]     │
+│ 품목 연결 컬럼 (FK)                               │
+│ [item_code                              ▼]     │
+│                                                 │
+│ 라우팅 상세 테이블                                │
+│ [item_routing_detail                    ▼]     │
+│                                                 │
+│ 공정 마스터 테이블                                │
+│ [process_mng                            ▼]     │
+│                                                 │
+│ ── 작업 단계 설정 ──────────────────────────     │
+│                                                 │
+│ ┌────┬────────────────────┬─────────────┬───┐  │
+│ │순서│ 단계 키(DB저장용)    │ 표시 이름    │관리│  │
+│ ├────┼────────────────────┼─────────────┼───┤  │
+│ │ 1  │ PRE                │ 작업 전      │ 🗑 │  │
+│ │ 2  │ IN                 │ 작업 중      │ 🗑 │  │
+│ │ 3  │ POST               │ 작업 후      │ 🗑 │  │
+│ └────┴────────────────────┴─────────────┴───┘  │
+│                         [+ 단계 추가]            │
+│                                                 │
+│ ── 상세 유형 옵션 ──────────────────────────     │
+│                                                 │
+│ ┌────────────────────┬─────────────┬───┐       │
+│ │ 유형 값(DB저장용)    │ 표시 이름    │관리│       │
+│ ├────────────────────┼─────────────┼───┤       │
+│ │ CHECK              │ 체크        │ 🗑 │       │
+│ │ INSPECTION         │ 검사        │ 🗑 │       │
+│ │ MEASUREMENT        │ 측정        │ 🗑 │       │
+│ └────────────────────┴─────────────┴───┘       │
+│                        [+ 유형 추가]             │
+│                                                 │
+│ ── UI 설정 ──────────────────────────           │
+│                                                 │
+│ 좌우 분할 비율                                   │
+│ [30        ] %                                  │
+│                                                 │
+│ 좌측 패널 제목                                   │
+│ [품목 및 공정 선택                        ]      │
+│                                                 │
+│ 읽기 전용 모드                                   │
+│ [ ] 활성화                                      │
+│                                                 │
+└─────────────────────────────────────────────────┘
+```
+
+### 6.2 Config 타입 정의
+
+```typescript
+// 작업 단계 정의 (사용자가 추가/삭제/이름변경 가능)
+interface WorkPhaseDefinition {
+  key: string;       // DB 저장용 키 (예: "PRE", "IN", "POST", "QC")
+  label: string;     // 화면 표시명 (예: "작업 전 (Pre-Work)")
+  sortOrder: number; // 표시 순서
+}
+
+// 상세 유형 정의 (사용자가 추가/삭제 가능)
+interface DetailTypeDefinition {
+  value: string;     // DB 저장용 값 (예: "CHECK")
+  label: string;     // 화면 표시명 (예: "체크")
+}
+
+// 데이터 소스 설정 (사용자가 테이블 지정 가능)
+interface DataSourceConfig {
+  // 품목 테이블
+  itemTable: string;             // 기본: "item_info"
+  itemNameColumn: string;        // 기본: "item_name"
+  itemCodeColumn: string;        // 기본: "item_number"
+
+  // 라우팅 버전 테이블
+  routingVersionTable: string;   // 기본: "item_routing_version"
+  routingItemFkColumn: string;   // 기본: "item_code" (품목과 연결하는 FK)
+  routingVersionNameColumn: string; // 기본: "version_name"
+
+  // 라우팅 상세 테이블
+  routingDetailTable: string;    // 기본: "item_routing_detail"
+
+  // 공정 마스터 테이블
+  processTable: string;          // 기본: "process_mng"
+  processNameColumn: string;     // 기본: "process_name"
+  processCodeColumn: string;     // 기본: "process_code"
+}
+
+// 전체 Config
+interface ProcessWorkStandardConfig {
+  // 데이터 소스 설정
+  dataSource: DataSourceConfig;
+
+  // 작업 단계 정의 (기본 3개, 사용자가 추가/삭제/수정 가능)
+  phases: WorkPhaseDefinition[];
+  // 기본값: [
+  //   { key: "PRE",  label: "작업 전 (Pre-Work)",  sortOrder: 1 },
+  //   { key: "IN",   label: "작업 중 (In-Work)",   sortOrder: 2 },
+  //   { key: "POST", label: "작업 후 (Post-Work)",  sortOrder: 3 },
+  // ]
+
+  // 상세 유형 옵션 (사용자가 추가/삭제 가능)
+  detailTypes: DetailTypeDefinition[];
+  // 기본값: [
+  //   { value: "CHECK",       label: "체크" },
+  //   { value: "INSPECTION",  label: "검사" },
+  //   { value: "MEASUREMENT", label: "측정" },
+  // ]
+
+  // UI 설정
+  splitRatio?: number;           // 좌우 분할 비율, 기본: 30
+  leftPanelTitle?: string;       // 좌측 패널 제목, 기본: "품목 및 공정 선택"
+  readonly?: boolean;            // 읽기 전용 모드, 기본: false
+}
+```
+
+### 6.3 커스터마이징 시나리오 예시
+
+**시나리오 A: 제조업 (기본)**
+```
+단계: 작업 전 → 작업 중 → 작업 후
+유형: 체크, 검사, 측정
+```
+
+**시나리오 B: 품질검사 강화 회사**
+```
+단계: 준비 → 검사 → 판정 → 기록 → 보관
+유형: 육안검사, 치수검사, 강도검사, 내구검사, 기능검사
+```
+
+**시나리오 C: 단순 2단계 회사**
+```
+단계: 사전점검 → 사후점검
+유형: 확인, 기록
+```
+
+**시나리오 D: 다른 테이블 사용 회사**
+```
+품목 테이블: product_master (item_info 대신)
+공정 테이블: operation_mng (process_mng 대신)
+```
+
+### 6.4 DB 설계 반영 사항
+
+`work_phase` 컬럼은 고정 ENUM이 아니라 **사용자 정의 키(VARCHAR)** 로 저장합니다.
+- Config에서 `phases[].key` 로 정의한 값이 DB에 저장됨
+- 예: "PRE", "IN", "POST" 또는 "PREPARE", "INSPECT", "JUDGE", "RECORD", "STORE"
+- 회사별 Config에 따라 다른 값이 저장되므로, 조회 시 Config의 phases 정의를 기준으로 섹션을 렌더링
+
+---
+
+## 7. 등록 체크리스트
+
+| 항목 | 파일 | 작업 |
+|------|------|------|
+| 컴포넌트 정의 | `v2-process-work-standard/index.ts` | createComponentDefinition |
+| 렌더러 등록 | `v2-process-work-standard/...Renderer.tsx` | registerSelf() |
+| 컴포넌트 로드 | `components/index.ts` | import 추가 |
+| 설정 패널 매핑 | `getComponentConfigPanel.tsx` | CONFIG_PANEL_MAP 추가 |
+| 라우트 등록 | `backend-node/src/app.ts` | router.use() 추가 |
+
+---
+
+## 8. 의존성
+
+- 외부 라이브러리 추가: 없음 (기존 shadcn/ui + Lucide 아이콘만 사용)
+- 기존 API 재사용: dataRoutes의 범용 CRUD는 사용하지 않고 전용 API 개발
+  - 이유: 5단계 JOIN + phase별 그룹핑 등 범용 API로는 처리 불가

docs/screen-implementation-guide/00_analysis/v2-component-usage-guide.md

@@ -2,8 +2,8 @@
 
 > **목적**: 다양한 회사에서 V2 컴포넌트를 활용하여 화면을 개발할 때 참고하는 범용 가이드
 > **대상**: 화면 설계자, 개발자
-> **버전**: 1.0.0
+> **버전**: 1.1.0
-> **작성일**: 2026-01-30
+> **작성일**: 2026-02-23 (최종 업데이트)
 
 ---
 
@@ -19,60 +19,63 @@
 | 카드 뷰 | 이미지+정보 카드 형태 | 설비정보, 대시보드 |
 | 피벗 분석 | 다차원 집계 | 매출분석, 재고현황 |
 | 반복 컨테이너 | 데이터 수만큼 UI 반복 | 주문 상세, 항목 리스트 |
+| 그룹화 테이블 | 그룹핑 기능 포함 테이블 | 카테고리별 집계, 부서별 현황 |
+| 타임라인/스케줄 | 시간축 기반 일정 관리 | 생산일정, 작업스케줄 |
 
 ### 1.2 불가능한 화면 유형 (별도 개발 필요)
 
 | 화면 유형 | 이유 | 해결 방안 |
 |-----------|------|----------|
-| 간트 차트 / 타임라인 | 시간축 기반 UI 없음 | 별도 컴포넌트 개발 or 외부 라이브러리 |
 | 트리 뷰 (계층 구조) | 트리 컴포넌트 미존재 | `v2-tree-view` 개발 필요 |
-| 그룹화 테이블 | 그룹핑 기능 미지원 | `v2-grouped-table` 개발 필요 |
 | 드래그앤드롭 보드 | 칸반 스타일 UI 없음 | 별도 개발 |
 | 모바일 앱 스타일 | 네이티브 앱 UI | 별도 개발 |
 | 복잡한 차트 | 기본 집계 외 시각화 | 차트 라이브러리 연동 |
 
+> **참고**: 그룹화 테이블(`v2-table-grouped`)과 타임라인 스케줄러(`v2-timeline-scheduler`)는 v1.1에서 추가되어 이제 지원됩니다.
+
 ---
 
-## 2. V2 컴포넌트 전체 목록 (23개)
+## 2. V2 컴포넌트 전체 목록 (25개)
 
-### 2.1 입력 컴포넌트 (3개)
+### 2.1 입력 컴포넌트 (4개)
 
 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-input` | 입력 | 텍스트, 숫자, 비밀번호, 이메일, 전화번호, URL, 여러 줄 | inputType, required, readonly, maxLength |
+| `v2-input` | 입력 | 텍스트, 숫자, 비밀번호, 슬라이더, 컬러 | inputType(text/number/password/slider/color/button), format(email/tel/url/currency/biz_no), required, readonly, maxLength, min, max, step |
-| `v2-select` | 선택 | 드롭다운, 콤보박스, 라디오, 체크박스 | mode, source(distinct/static/code/entity), multiple |
+| `v2-select` | 선택 | 드롭다운, 콤보박스, 라디오, 체크, 태그, 토글, 스왑 | mode(dropdown/combobox/radio/check/tag/tagbox/toggle/swap), source(static/code/db/api/entity/category/distinct/select), searchable, multiple, cascading |
-| `v2-date` | 날짜 | 날짜, 시간, 날짜시간, 날짜범위, 월, 연도 | dateType, format, showTime |
+| `v2-date` | 날짜 | 날짜, 시간, 날짜시간 | dateType(date/time/datetime), format, range, minDate, maxDate, showToday |
+| `v2-file-upload` | 파일 업로드 | 파일/이미지 업로드 | - |
 
 ### 2.2 표시 컴포넌트 (3개)
 
 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
 | `v2-text-display` | 텍스트 표시 | 라벨, 제목, 설명 텍스트 | fontSize, fontWeight, color, textAlign |
-| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 | cardsPerRow, showImage, columnMapping |
+| `v2-card-display` | 카드 디스플레이 | 테이블 데이터를 카드 형태로 표시 | cardsPerRow, cardSpacing, columnMapping(titleColumn/subtitleColumn/descriptionColumn/imageColumn), cardStyle(imagePosition/imageSize), dataSource(table/static/api) |
 | `v2-aggregation-widget` | 집계 위젯 | 합계, 평균, 개수, 최대, 최소 | items, filters, layout |
 
-### 2.3 테이블/데이터 컴포넌트 (3개)
+### 2.3 테이블/데이터 컴포넌트 (4개)
 
 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-table-list` | 테이블 리스트 | 데이터 조회/편집 테이블 | selectedTable, columns, pagination, filter |
+| `v2-table-list` | 테이블 리스트 | 데이터 조회/편집 테이블 | selectedTable, columns, pagination, filter, displayMode(table/card), checkbox, horizontalScroll, linkedFilters, excludeFilter, toolbar, tableStyle, autoLoad |
-| `v2-table-search-widget` | 검색 필터 | 테이블 검색/필터/그룹 | autoSelectFirstTable, showTableSelector |
+| `v2-table-search-widget` | 검색 필터 | 테이블 검색/필터/그룹 | autoSelectFirstTable, showTableSelector, title |
-| `v2-pivot-grid` | 피벗 그리드 | 다차원 분석 (행/열/데이터 영역) | fields, totals, aggregation |
+| `v2-pivot-grid` | 피벗 그리드 | 다차원 분석 (행/열/데이터 영역) | fields(area: row/column/data/filter, summaryType: sum/avg/count/min/max/countDistinct, groupInterval: year/quarter/month/week/day), dataSource(type: table/api/static, joinConfigs, filterConditions) |
+| `v2-table-grouped` | 그룹화 테이블 | 그룹핑 기능이 포함된 테이블 | - |
 
-### 2.4 레이아웃 컴포넌트 (8개)
+### 2.4 레이아웃 컴포넌트 (7개)
 
 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
-| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, relation, **displayMode: custom** |
+| `v2-split-panel-layout` | 분할 패널 | 마스터-디테일 좌우 분할 | splitRatio, resizable, minLeftWidth, minRightWidth, syncSelection, panel별: displayMode(list/table/custom), relation(type/foreignKey), editButton, addButton, deleteButton, additionalTabs |
-| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 | tabs, activeTabId |
+| `v2-tabs-widget` | 탭 위젯 | 탭 전환, 탭 내 컴포넌트 | tabs(id/label/order/disabled/components), defaultTab, orientation(horizontal/vertical), allowCloseable, persistSelection |
 | `v2-section-card` | 섹션 카드 | 제목+테두리 그룹화 | title, collapsible, padding |
 | `v2-section-paper` | 섹션 페이퍼 | 배경색 그룹화 | backgroundColor, padding, shadow |
 | `v2-divider-line` | 구분선 | 영역 구분 | orientation, thickness |
 | `v2-repeat-container` | 리피터 컨테이너 | 데이터 수만큼 반복 렌더링 | dataSourceType, layout, gridColumns |
-| `v2-repeater` | 리피터 | 반복 컨트롤 | - |
+| `v2-repeater` | 리피터 | 반복 컨트롤 (inline/modal) | - |
-| `v2-repeat-screen-modal` | 반복 화면 모달 | 모달 반복 | - |
 
-### 2.5 액션/특수 컴포넌트 (6개)
+### 2.5 액션/특수 컴포넌트 (7개)
 
 | ID | 이름 | 용도 | 주요 옵션 |
 |----|------|------|----------|
@@ -82,6 +85,7 @@
 | `v2-location-swap-selector` | 위치 교환 | 위치 선택/교환 | - |
 | `v2-rack-structure` | 랙 구조 | 창고 랙 시각화 | - |
 | `v2-media` | 미디어 | 이미지/동영상 표시 | - |
+| `v2-timeline-scheduler` | 타임라인 스케줄러 | 시간축 기반 일정/작업 관리 | - |
 
 ---
 
@@ -261,8 +265,26 @@
   ],
   pagination: {
     enabled: true,
-    pageSize: 20
+    pageSize: 20,
-  }
+    showSizeSelector: true,
+    showPageInfo: true
+  },
+  displayMode: "table",       // "table" | "card"
+  checkbox: {
+    enabled: true,
+    multiple: true,
+    position: "left",
+    selectAll: true
+  },
+  horizontalScroll: {         // 가로 스크롤 설정
+    enabled: true,
+    maxVisibleColumns: 8
+  },
+  linkedFilters: [],          // 연결 필터 (다른 컴포넌트와 연동)
+  excludeFilter: {},          // 제외 필터
+  autoLoad: true,             // 자동 데이터 로드
+  stickyHeader: false,        // 헤더 고정
+  autoWidth: true             // 자동 너비 조정
 }
 ```
 
@@ -271,16 +293,44 @@
 ```typescript
 {
   leftPanel: {
-    tableName: "마스터_테이블명"
+    displayMode: "table",         // "list" | "table" | "custom"
+    tableName: "마스터_테이블명",
+    columns: [],                  // 컬럼 설정
+    editButton: {                 // 수정 버튼 설정
+      enabled: true,
+      mode: "auto",              // "auto" | "modal"
+      modalScreenId: ""          // 모달 모드 시 화면 ID
+    },
+    addButton: {                  // 추가 버튼 설정
+      enabled: true,
+      mode: "auto",
+      modalScreenId: ""
+    },
+    deleteButton: {               // 삭제 버튼 설정
+      enabled: true,
+      buttonLabel: "삭제",
+      confirmMessage: "삭제하시겠습니까?"
+    },
+    addModalColumns: [],          // 추가 모달 전용 컬럼
+    additionalTabs: []            // 추가 탭 설정
   },
   rightPanel: {
+    displayMode: "table",
     tableName: "디테일_테이블명",
     relation: {
-      type: "detail",          // join | detail | custom
+      type: "detail",            // "join" | "detail" | "custom"
-      foreignKey: "master_id"  // 연결 키
+      foreignKey: "master_id",   // 연결 키
+      leftColumn: "",            // 좌측 연결 컬럼
+      rightColumn: "",           // 우측 연결 컬럼
+      keys: []                   // 복합 키
     }
   },
-  splitRatio: 30  // 좌측 비율
+  splitRatio: 30,                 // 좌측 비율 (0-100)
+  resizable: true,                // 리사이즈 가능
+  minLeftWidth: 200,              // 좌측 최소 너비
+  minRightWidth: 300,             // 우측 최소 너비
+  syncSelection: true,            // 선택 동기화
+  autoLoad: true                  // 자동 로드
 }
 ```
 
@@ -347,12 +397,12 @@
 | 기능 | 상태 | 대안 |
 |------|------|------|
 | 트리 뷰 (BOM, 조직도) | ❌ 미지원 | 테이블로 대체 or 별도 개발 |
-| 그룹화 테이블 | ❌ 미지원 | 일반 테이블로 대체 or 별도 개발 |
-| 간트 차트 | ❌ 미지원 | 별도 개발 필요 |
 | 드래그앤드롭 정렬 | ❌ 미지원 | 순서 컬럼으로 대체 |
 | 인라인 편집 | ⚠️ 제한적 | 모달 편집으로 대체 |
 | 복잡한 차트 | ❌ 미지원 | 외부 라이브러리 연동 |
 
+> **v1.1 업데이트**: 그룹화 테이블(`v2-table-grouped`)과 타임라인 스케줄러(`v2-timeline-scheduler`)가 추가되어 해당 기능은 이제 지원됩니다.
+
 ### 5.2 권장하지 않는 조합
 
 | 조합 | 이유 |
@@ -555,9 +605,10 @@
 | 탭 화면 | ✅ 완전 | v2-tabs-widget |
 | 카드 뷰 | ✅ 완전 | v2-card-display |
 | 피벗 분석 | ✅ 완전 | v2-pivot-grid |
-| 그룹화 테이블 | ❌ 미지원 | 개발 필요 |
+| 그룹화 테이블 | ✅ 지원 | v2-table-grouped |
+| 타임라인/스케줄 | ✅ 지원 | v2-timeline-scheduler |
+| 파일 업로드 | ✅ 지원 | v2-file-upload |
 | 트리 뷰 | ❌ 미지원 | 개발 필요 |
-| 간트 차트 | ❌ 미지원 | 개발 필요 |
 
 ### 개발 시 핵심 원칙
 

frontend/components/common/ScreenModal.tsx

@@ -178,10 +178,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         splitPanelParentData,
         selectedData: eventSelectedData,
         selectedIds,
-        isCreateMode, // 🆕 복사 모드 플래그 (true면 editData가 있어도 originalData 설정 안 함)
+        isCreateMode,
-        fieldMappings, // 🆕 필드 매핑 정보 (명시적 매핑이 있으면 모든 매핑된 필드 전달)
+        fieldMappings,
       } = event.detail;
 
+      console.log("🟣 [ScreenModal] openScreenModal 이벤트 수신:", {
+        screenId,
+        splitPanelParentData: JSON.stringify(splitPanelParentData),
+        editData: !!editData,
+        isCreateMode,
+      });
+
       // 🆕 모달 열린 시간 기록
       modalOpenedAtRef.current = Date.now();
 
@@ -355,8 +362,10 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         }
 
         if (Object.keys(parentData).length > 0) {
+          console.log("🔵 [ScreenModal] ADD모드 formData 설정:", JSON.stringify(parentData));
           setFormData(parentData);
         } else {
+          console.log("🔵 [ScreenModal] ADD모드 formData 비어있음");
           setFormData({});
         }
         setOriginalData(null); // 신규 등록 모드
@@ -1173,13 +1182,13 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         formData={formData}
                         originalData={originalData} // 🆕 원본 데이터 전달 (UPDATE 판단용)
                         onFormDataChange={(fieldName, value) => {
-                          // 사용자가 실제로 데이터를 변경한 것으로 표시
                           formDataChangedRef.current = true;
                           setFormData((prev) => {
                             const newFormData = {
                               ...prev,
                               [fieldName]: value,
                             };
+                            console.log("🟡 [ScreenModal] onFormDataChange:", fieldName, "→", value, "| formData keys:", Object.keys(newFormData), "| process_code:", newFormData.process_code);
                             return newFormData;
                           });
                         }}

frontend/components/v2/V2Repeater.tsx

@@ -44,7 +44,10 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   onRowClick,
   className,
   formData: parentFormData,
+  ...restProps
 }) => {
+  // ScreenModal에서 전달된 groupedData (모달 간 데이터 전달용)
+  const groupedData = (restProps as any).groupedData || (restProps as any)._groupedData;
   // 설정 병합
   const config: V2RepeaterConfig = useMemo(
     () => ({
@@ -681,6 +684,15 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         case "fixed":
           return col.autoFill.fixedValue ?? "";
 
+        case "parentSequence": {
+          const parentField = col.autoFill.parentField;
+          const separator = col.autoFill.separator ?? "-";
+          const seqLength = col.autoFill.sequenceLength ?? 2;
+          const parentValue = parentField && mainFormData ? String(mainFormData[parentField] ?? "") : "";
+          const seqNum = String(rowIndex + 1).padStart(seqLength, "0");
+          return parentValue ? `${parentValue}${separator}${seqNum}` : seqNum;
+        }
+
         default:
           return undefined;
       }
@@ -707,7 +719,74 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
     [],
   );
 
-  // 🆕 행 추가 (inline 모드 또는 모달 열기) - 비동기로 변경
+  // 모달에서 전달된 groupedData를 초기 행 데이터로 변환 (컬럼 매핑 포함)
+  const groupedDataProcessedRef = useRef(false);
+  useEffect(() => {
+    if (!groupedData || !Array.isArray(groupedData) || groupedData.length === 0) return;
+    if (groupedDataProcessedRef.current) return;
+
+    groupedDataProcessedRef.current = true;
+
+    const newRows = groupedData.map((item: any, index: number) => {
+      const row: any = { _id: `grouped_${Date.now()}_${index}` };
+
+      for (const col of config.columns) {
+        const sourceValue = item[(col as any).sourceKey || col.key];
+
+        if (col.isSourceDisplay) {
+          row[col.key] = sourceValue ?? "";
+          row[`_display_${col.key}`] = sourceValue ?? "";
+        } else if (col.autoFill && col.autoFill.type !== "none") {
+          const autoValue = generateAutoFillValueSync(col, index, parentFormData);
+          if (autoValue !== undefined) {
+            row[col.key] = autoValue;
+          } else {
+            row[col.key] = "";
+          }
+        } else if (sourceValue !== undefined) {
+          row[col.key] = sourceValue;
+        } else {
+          row[col.key] = "";
+        }
+      }
+      return row;
+    });
+
+    setData(newRows);
+    onDataChange?.(newRows);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupedData, config.columns, generateAutoFillValueSync]);
+
+  // parentSequence 컬럼의 부모 필드 값이 변경되면 행 데이터 갱신
+  useEffect(() => {
+    if (data.length === 0) return;
+
+    const parentSeqColumns = config.columns.filter(
+      (col) => col.autoFill?.type === "parentSequence" && col.autoFill.parentField,
+    );
+    if (parentSeqColumns.length === 0) return;
+
+    let needsUpdate = false;
+    const updatedData = data.map((row, index) => {
+      const updatedRow = { ...row };
+      for (const col of parentSeqColumns) {
+        const newValue = generateAutoFillValueSync(col, index, parentFormData);
+        if (newValue !== undefined && newValue !== row[col.key]) {
+          updatedRow[col.key] = newValue;
+          needsUpdate = true;
+        }
+      }
+      return updatedRow;
+    });
+
+    if (needsUpdate) {
+      setData(updatedData);
+      onDataChange?.(updatedData);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parentFormData, config.columns, generateAutoFillValueSync]);
+
+  // 행 추가 (inline 모드 또는 모달 열기) - 비동기로 변경
   const handleAddRow = useCallback(async () => {
     if (isModalMode) {
       setModalOpen(true);
@@ -717,7 +796,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
 
       // 먼저 동기적 자동 입력 값 적용
       for (const col of config.columns) {
-        const autoValue = generateAutoFillValueSync(col, currentRowCount);
+        const autoValue = generateAutoFillValueSync(col, currentRowCount, parentFormData);
         if (autoValue === null && col.autoFill?.type === "numbering" && col.autoFill.numberingRuleId) {
           // 채번 규칙: 즉시 API 호출
           newRow[col.key] = await generateNumberingCode(col.autoFill.numberingRuleId);
@@ -731,7 +810,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
       const newData = [...data, newRow];
       handleDataChange(newData);
     }
-  }, [isModalMode, config.columns, data, handleDataChange, generateAutoFillValueSync, generateNumberingCode]);
+  }, [isModalMode, config.columns, data, handleDataChange, generateAutoFillValueSync, generateNumberingCode, parentFormData]);
 
   // 모달에서 항목 선택 - 비동기로 변경
   const handleSelectItems = useCallback(
@@ -760,7 +839,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
               row[`_display_${col.key}`] = item[col.key] || "";
             } else {
               // 자동 입력 값 적용
-              const autoValue = generateAutoFillValueSync(col, currentRowCount + index);
+              const autoValue = generateAutoFillValueSync(col, currentRowCount + index, parentFormData);
               if (autoValue === null && col.autoFill?.type === "numbering" && col.autoFill.numberingRuleId) {
                 // 채번 규칙: 즉시 API 호출
                 row[col.key] = await generateNumberingCode(col.autoFill.numberingRuleId);
@@ -789,6 +868,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
       handleDataChange,
       generateAutoFillValueSync,
       generateNumberingCode,
+      parentFormData,
     ],
   );
 

frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx

@@ -177,6 +177,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
     { value: "numbering", label: "채번 규칙" },
     { value: "fromMainForm", label: "메인 폼에서 복사" },
     { value: "fixed", label: "고정값" },
+    { value: "parentSequence", label: "부모채번+순번 (예: WO-001-01)" },
   ];
   
   // 🆕 대상 메뉴 목록 로드 (사용자 메뉴의 레벨 2)
@@ -1393,6 +1394,56 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                               />
                             </div>
                           )}
+                          
+                          {/* 부모채번+순번 설정 */}
+                          {col.autoFill?.type === "parentSequence" && (
+                            <div className="space-y-2">
+                              <div className="space-y-1">
+                                <Label className="text-[10px] text-gray-600">부모 번호 필드명</Label>
+                                <Input
+                                  value={col.autoFill?.parentField || ""}
+                                  onChange={(e) => updateColumnProp(col.key, "autoFill", {
+                                    ...col.autoFill,
+                                    parentField: e.target.value,
+                                  })}
+                                  placeholder="work_order_no"
+                                  className="h-6 text-xs"
+                                />
+                                <p className="text-[10px] text-gray-400">메인 폼에서 가져올 부모 채번 필드</p>
+                              </div>
+                              <div className="flex gap-2">
+                                <div className="flex-1 space-y-1">
+                                  <Label className="text-[10px] text-gray-600">구분자</Label>
+                                  <Input
+                                    value={col.autoFill?.separator ?? "-"}
+                                    onChange={(e) => updateColumnProp(col.key, "autoFill", {
+                                      ...col.autoFill,
+                                      separator: e.target.value,
+                                    })}
+                                    placeholder="-"
+                                    className="h-6 text-xs"
+                                  />
+                                </div>
+                                <div className="flex-1 space-y-1">
+                                  <Label className="text-[10px] text-gray-600">순번 자릿수</Label>
+                                  <Input
+                                    type="number"
+                                    min={1}
+                                    max={5}
+                                    value={col.autoFill?.sequenceLength ?? 2}
+                                    onChange={(e) => updateColumnProp(col.key, "autoFill", {
+                                      ...col.autoFill,
+                                      sequenceLength: parseInt(e.target.value) || 2,
+                                    })}
+                                    className="h-6 text-xs"
+                                  />
+                                </div>
+                              </div>
+                              <p className="text-[10px] text-green-600">
+                                예시: WO-20260223-005{col.autoFill?.separator ?? "-"}{String(1).padStart(col.autoFill?.sequenceLength ?? 2, "0")}
+                              </p>
+                            </div>
+                          )}
                         </div>
                       )}
                     </div>

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -466,7 +466,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         let currentValue;
         if (componentType === "modal-repeater-table" || 
             componentType === "repeat-screen-modal" ||
-            componentType === "selected-items-detail-input") {
+            componentType === "selected-items-detail-input" ||
+            componentType === "v2-repeater") {
           // EditModal/ScreenModal에서 전달된 groupedData가 있으면 우선 사용
           currentValue = props.groupedData || formData?.[fieldName] || [];
         } else {

frontend/lib/registry/components/index.ts

@@ -112,6 +112,7 @@ import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
 import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
 import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
 import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
+import "./v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
 
 /**
  * 컴포넌트 초기화 함수

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -1603,6 +1603,57 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const handleAddClick = useCallback(
     (panel: "left" | "right") => {
       console.log("🆕 [추가모달] handleAddClick 호출:", { panel, activeTabIndex });
+
+      // screenId 기반 모달 확인
+      const panelConfig = panel === "left" ? componentConfig.leftPanel : componentConfig.rightPanel;
+      const addModalConfig = panelConfig?.addModal;
+
+      if (addModalConfig?.screenId) {
+        if (panel === "right" && !selectedLeftItem) {
+          toast({
+            title: "항목을 선택해주세요",
+            description: "좌측 패널에서 항목을 먼저 선택한 후 추가해주세요.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        const tableName = panelConfig?.tableName || "";
+        const urlParams: Record<string, any> = {
+          mode: "add",
+          tableName,
+        };
+
+        const parentData: Record<string, any> = {};
+        if (panel === "right" && selectedLeftItem) {
+          const relation = componentConfig.rightPanel?.relation;
+          console.log("🟢 [추가모달] selectedLeftItem:", JSON.stringify(selectedLeftItem));
+          console.log("🟢 [추가모달] relation:", JSON.stringify(relation));
+          if (relation?.keys && Array.isArray(relation.keys)) {
+            for (const key of relation.keys) {
+              console.log("🟢 [추가모달] key:", key, "leftValue:", selectedLeftItem[key.leftColumn]);
+              if (key.leftColumn && key.rightColumn && selectedLeftItem[key.leftColumn] != null) {
+                parentData[key.rightColumn] = selectedLeftItem[key.leftColumn];
+              }
+            }
+          }
+        }
+
+        console.log("🆕 [추가모달] screenId 기반 모달 열기:", { screenId: addModalConfig.screenId, tableName, parentData, parentDataStr: JSON.stringify(parentData) });
+
+        window.dispatchEvent(
+          new CustomEvent("openScreenModal", {
+            detail: {
+              screenId: addModalConfig.screenId,
+              urlParams,
+              splitPanelParentData: parentData,
+            },
+          }),
+        );
+        return;
+      }
+
+      // 기존 인라인 모달 방식
       setAddModalPanel(panel);
 
       // 우측 패널 추가 시, 좌측에서 선택된 항목의 조인 컬럼 값을 자동으로 채움

frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx

@@ -1107,6 +1107,15 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         effectiveFormData = { ...splitPanelParentData };
       }
 
+      console.log("🔴 [ButtonPrimary] 저장 시 formData 디버그:", {
+        propsFormDataKeys: Object.keys(propsFormData),
+        screenContextFormDataKeys: Object.keys(screenContextFormData),
+        effectiveFormDataKeys: Object.keys(effectiveFormData),
+        process_code: effectiveFormData.process_code,
+        equipment_code: effectiveFormData.equipment_code,
+        fullData: JSON.stringify(effectiveFormData),
+      });
+
       const context: ButtonActionContext = {
         formData: effectiveFormData,
         originalData: originalData, // 🔧 빈 객체 대신 undefined 유지 (UPDATE 판단에 사용)

frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardComponent.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import React, { useState, useMemo, useCallback } from "react";
+import { Save, Loader2, ClipboardCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { ProcessWorkStandardConfig, WorkItem } from "./types";
+import { defaultConfig } from "./config";
+import { useProcessWorkStandard } from "./hooks/useProcessWorkStandard";
+import { ItemProcessSelector } from "./components/ItemProcessSelector";
+import { WorkPhaseSection } from "./components/WorkPhaseSection";
+import { WorkItemAddModal } from "./components/WorkItemAddModal";
+
+interface ProcessWorkStandardComponentProps {
+  config?: Partial<ProcessWorkStandardConfig>;
+  formData?: Record<string, any>;
+  isPreview?: boolean;
+  tableName?: string;
+}
+
+export function ProcessWorkStandardComponent({
+  config: configProp,
+  isPreview,
+}: ProcessWorkStandardComponentProps) {
+  const config: ProcessWorkStandardConfig = useMemo(
+    () => ({
+      ...defaultConfig,
+      ...configProp,
+      dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
+      phases: configProp?.phases?.length
+        ? configProp.phases
+        : defaultConfig.phases,
+      detailTypes: configProp?.detailTypes?.length
+        ? configProp.detailTypes
+        : defaultConfig.detailTypes,
+    }),
+    [configProp]
+  );
+
+  const {
+    items,
+    routings,
+    workItems,
+    selectedWorkItemDetails,
+    selectedWorkItemId,
+    selection,
+    loading,
+    fetchItems,
+    selectItem,
+    selectProcess,
+    fetchWorkItemDetails,
+    createWorkItem,
+    updateWorkItem,
+    deleteWorkItem,
+    createDetail,
+    updateDetail,
+    deleteDetail,
+  } = useProcessWorkStandard(config);
+
+  // 모달 상태
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalPhaseKey, setModalPhaseKey] = useState("");
+  const [editingItem, setEditingItem] = useState<WorkItem | null>(null);
+
+  // phase별 작업 항목 그룹핑
+  const workItemsByPhase = useMemo(() => {
+    const map: Record<string, WorkItem[]> = {};
+    for (const phase of config.phases) {
+      map[phase.key] = workItems.filter((wi) => wi.work_phase === phase.key);
+    }
+    return map;
+  }, [workItems, config.phases]);
+
+  const sortedPhases = useMemo(
+    () => [...config.phases].sort((a, b) => a.sortOrder - b.sortOrder),
+    [config.phases]
+  );
+
+  const handleAddWorkItem = useCallback((phaseKey: string) => {
+    setModalPhaseKey(phaseKey);
+    setEditingItem(null);
+    setModalOpen(true);
+  }, []);
+
+  const handleEditWorkItem = useCallback((item: WorkItem) => {
+    setModalPhaseKey(item.work_phase);
+    setEditingItem(item);
+    setModalOpen(true);
+  }, []);
+
+  const handleModalSave = useCallback(
+    async (data: Parameters<typeof createWorkItem>[0]) => {
+      if (editingItem) {
+        await updateWorkItem(editingItem.id, {
+          title: data.title,
+          is_required: data.is_required,
+          description: data.description,
+        } as any);
+      } else {
+        await createWorkItem(data);
+      }
+    },
+    [editingItem, createWorkItem, updateWorkItem]
+  );
+
+  const handleSelectWorkItem = useCallback(
+    (workItemId: string) => {
+      fetchWorkItemDetails(workItemId);
+    },
+    [fetchWorkItemDetails]
+  );
+
+  const handleInit = useCallback(() => {
+    fetchItems();
+  }, [fetchItems]);
+
+  const splitRatio = config.splitRatio || 30;
+
+  if (isPreview) {
+    return (
+      <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/10 p-4">
+        <div className="text-center">
+          <ClipboardCheck className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
+          <p className="text-sm font-medium text-muted-foreground">
+            공정 작업기준
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground/70">
+            {sortedPhases.map((p) => p.label).join(" / ")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-background">
+      {/* 메인 콘텐츠 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 좌측 패널 */}
+        <div style={{ width: `${splitRatio}%` }} className="shrink-0 overflow-hidden">
+          <ItemProcessSelector
+            title={config.leftPanelTitle || "품목 및 공정 선택"}
+            items={items}
+            routings={routings}
+            selection={selection}
+            onSearch={(keyword) => fetchItems(keyword)}
+            onSelectItem={selectItem}
+            onSelectProcess={selectProcess}
+            onInit={handleInit}
+          />
+        </div>
+
+        {/* 우측 패널 */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {/* 우측 헤더 */}
+          {selection.routingDetailId ? (
+            <>
+              <div className="flex items-center justify-between border-b px-4 py-2.5">
+                <div>
+                  <h2 className="text-base font-bold">
+                    {selection.itemName} - {selection.processName}
+                  </h2>
+                  <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+                    <span>품목: {selection.itemCode}</span>
+                    <span>공정: {selection.processName}</span>
+                    <span>버전: {selection.routingVersionName}</span>
+                  </div>
+                </div>
+                {!config.readonly && (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="gap-1.5"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Save className="h-3.5 w-3.5" />
+                    )}
+                    전체 저장
+                  </Button>
+                )}
+              </div>
+
+              {/* 작업 단계별 섹션 */}
+              <div className="flex-1 space-y-4 overflow-y-auto p-4">
+                {sortedPhases.map((phase) => (
+                  <WorkPhaseSection
+                    key={phase.key}
+                    phase={phase}
+                    items={workItemsByPhase[phase.key] || []}
+                    selectedWorkItemId={selectedWorkItemId}
+                    selectedWorkItemDetails={selectedWorkItemDetails}
+                    detailTypes={config.detailTypes}
+                    readonly={config.readonly}
+                    onSelectWorkItem={handleSelectWorkItem}
+                    onAddWorkItem={handleAddWorkItem}
+                    onEditWorkItem={handleEditWorkItem}
+                    onDeleteWorkItem={deleteWorkItem}
+                    onCreateDetail={createDetail}
+                    onUpdateDetail={updateDetail}
+                    onDeleteDetail={deleteDetail}
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-1 flex-col items-center justify-center text-center">
+              <ClipboardCheck className="mb-3 h-12 w-12 text-muted-foreground/30" />
+              <p className="text-sm font-medium text-muted-foreground">
+                좌측에서 품목과 공정을 선택하세요
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground/70">
+                품목을 펼쳐 라우팅별 공정을 선택하면 작업기준을 관리할 수
+                있습니다
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 작업 항목 추가/수정 모달 */}
+      <WorkItemAddModal
+        open={modalOpen}
+        onClose={() => {
+          setModalOpen(false);
+          setEditingItem(null);
+        }}
+        onSave={handleModalSave}
+        phaseKey={modalPhaseKey}
+        phaseLabel={
+          config.phases.find((p) => p.key === modalPhaseKey)?.label || ""
+        }
+        detailTypes={config.detailTypes}
+        editItem={editingItem}
+      />
+    </div>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import React from "react";
+import { Plus, Trash2, GripVertical } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { ProcessWorkStandardConfig, WorkPhaseDefinition, DetailTypeDefinition } from "./types";
+import { defaultConfig } from "./config";
+
+interface ConfigPanelProps {
+  config: Partial<ProcessWorkStandardConfig>;
+  onChange: (config: Partial<ProcessWorkStandardConfig>) => void;
+}
+
+export function ProcessWorkStandardConfigPanel({
+  config: configProp,
+  onChange,
+}: ConfigPanelProps) {
+  const config: ProcessWorkStandardConfig = {
+    ...defaultConfig,
+    ...configProp,
+    dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
+    phases: configProp?.phases?.length ? configProp.phases : defaultConfig.phases,
+    detailTypes: configProp?.detailTypes?.length ? configProp.detailTypes : defaultConfig.detailTypes,
+  };
+
+  const update = (partial: Partial<ProcessWorkStandardConfig>) => {
+    onChange({ ...configProp, ...partial });
+  };
+
+  const updateDataSource = (field: string, value: string) => {
+    update({
+      dataSource: { ...config.dataSource, [field]: value },
+    });
+  };
+
+  // 작업 단계 관리
+  const addPhase = () => {
+    const nextOrder = config.phases.length + 1;
+    update({
+      phases: [
+        ...config.phases,
+        { key: `PHASE_${nextOrder}`, label: `단계 ${nextOrder}`, sortOrder: nextOrder },
+      ],
+    });
+  };
+
+  const removePhase = (idx: number) => {
+    update({ phases: config.phases.filter((_, i) => i !== idx) });
+  };
+
+  const updatePhase = (idx: number, field: keyof WorkPhaseDefinition, value: string | number) => {
+    const next = [...config.phases];
+    next[idx] = { ...next[idx], [field]: value };
+    update({ phases: next });
+  };
+
+  // 상세 유형 관리
+  const addDetailType = () => {
+    update({
+      detailTypes: [
+        ...config.detailTypes,
+        { value: `TYPE_${config.detailTypes.length + 1}`, label: "신규 유형" },
+      ],
+    });
+  };
+
+  const removeDetailType = (idx: number) => {
+    update({ detailTypes: config.detailTypes.filter((_, i) => i !== idx) });
+  };
+
+  const updateDetailType = (idx: number, field: keyof DetailTypeDefinition, value: string) => {
+    const next = [...config.detailTypes];
+    next[idx] = { ...next[idx], [field]: value };
+    update({ detailTypes: next });
+  };
+
+  return (
+    <div className="space-y-5 p-4">
+      <h3 className="text-sm font-semibold">공정 작업기준 설정</h3>
+
+      {/* 데이터 소스 설정 */}
+      <section className="space-y-3">
+        <p className="text-xs font-medium text-muted-foreground">데이터 소스 설정</p>
+
+        <div>
+          <Label className="text-xs">품목 테이블</Label>
+          <Input
+            value={config.dataSource.itemTable}
+            onChange={(e) => updateDataSource("itemTable", e.target.value)}
+            className="mt-1 h-8 text-xs"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <Label className="text-xs">품목명 컬럼</Label>
+            <Input
+              value={config.dataSource.itemNameColumn}
+              onChange={(e) => updateDataSource("itemNameColumn", e.target.value)}
+              className="mt-1 h-8 text-xs"
+            />
+          </div>
+          <div>
+            <Label className="text-xs">품목코드 컬럼</Label>
+            <Input
+              value={config.dataSource.itemCodeColumn}
+              onChange={(e) => updateDataSource("itemCodeColumn", e.target.value)}
+              className="mt-1 h-8 text-xs"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Label className="text-xs">라우팅 버전 테이블</Label>
+          <Input
+            value={config.dataSource.routingVersionTable}
+            onChange={(e) => updateDataSource("routingVersionTable", e.target.value)}
+            className="mt-1 h-8 text-xs"
+          />
+        </div>
+        <div>
+          <Label className="text-xs">품목 연결 FK 컬럼</Label>
+          <Input
+            value={config.dataSource.routingFkColumn}
+            onChange={(e) => updateDataSource("routingFkColumn", e.target.value)}
+            className="mt-1 h-8 text-xs"
+          />
+        </div>
+
+        <div>
+          <Label className="text-xs">공정 마스터 테이블</Label>
+          <Input
+            value={config.dataSource.processTable}
+            onChange={(e) => updateDataSource("processTable", e.target.value)}
+            className="mt-1 h-8 text-xs"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <Label className="text-xs">공정명 컬럼</Label>
+            <Input
+              value={config.dataSource.processNameColumn}
+              onChange={(e) => updateDataSource("processNameColumn", e.target.value)}
+              className="mt-1 h-8 text-xs"
+            />
+          </div>
+          <div>
+            <Label className="text-xs">공정코드 컬럼</Label>
+            <Input
+              value={config.dataSource.processCodeColumn}
+              onChange={(e) => updateDataSource("processCodeColumn", e.target.value)}
+              className="mt-1 h-8 text-xs"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* 작업 단계 설정 */}
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <p className="text-xs font-medium text-muted-foreground">작업 단계 설정</p>
+          <Button variant="outline" size="sm" className="h-6 gap-1 text-[10px]" onClick={addPhase}>
+            <Plus className="h-3 w-3" />
+            단계 추가
+          </Button>
+        </div>
+
+        <div className="space-y-1.5">
+          {config.phases.map((phase, idx) => (
+            <div
+              key={idx}
+              className="flex items-center gap-1.5 rounded border bg-muted/30 p-1.5"
+            >
+              <GripVertical className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+              <Input
+                value={phase.key}
+                onChange={(e) => updatePhase(idx, "key", e.target.value)}
+                className="h-7 w-20 text-[10px]"
+                placeholder="키"
+              />
+              <Input
+                value={phase.label}
+                onChange={(e) => updatePhase(idx, "label", e.target.value)}
+                className="h-7 flex-1 text-[10px]"
+                placeholder="표시명"
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
+                onClick={() => removePhase(idx)}
+                disabled={config.phases.length <= 1}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 상세 유형 옵션 */}
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <p className="text-xs font-medium text-muted-foreground">상세 유형 옵션</p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-6 gap-1 text-[10px]"
+            onClick={addDetailType}
+          >
+            <Plus className="h-3 w-3" />
+            유형 추가
+          </Button>
+        </div>
+
+        <div className="space-y-1.5">
+          {config.detailTypes.map((dt, idx) => (
+            <div key={idx} className="flex items-center gap-1.5 rounded border bg-muted/30 p-1.5">
+              <Input
+                value={dt.value}
+                onChange={(e) => updateDetailType(idx, "value", e.target.value)}
+                className="h-7 w-24 text-[10px]"
+                placeholder="값"
+              />
+              <Input
+                value={dt.label}
+                onChange={(e) => updateDetailType(idx, "label", e.target.value)}
+                className="h-7 flex-1 text-[10px]"
+                placeholder="표시명"
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
+                onClick={() => removeDetailType(idx)}
+                disabled={config.detailTypes.length <= 1}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* UI 설정 */}
+      <section className="space-y-3">
+        <p className="text-xs font-medium text-muted-foreground">UI 설정</p>
+
+        <div>
+          <Label className="text-xs">좌우 분할 비율 (%)</Label>
+          <Input
+            type="number"
+            value={config.splitRatio || 30}
+            onChange={(e) => update({ splitRatio: Number(e.target.value) })}
+            min={15}
+            max={50}
+            className="mt-1 h-8 w-20 text-xs"
+          />
+        </div>
+
+        <div>
+          <Label className="text-xs">좌측 패널 제목</Label>
+          <Input
+            value={config.leftPanelTitle || ""}
+            onChange={(e) => update({ leftPanelTitle: e.target.value })}
+            className="mt-1 h-8 text-xs"
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={config.readonly || false}
+            onCheckedChange={(v) => update({ readonly: v })}
+          />
+          <Label className="text-xs">읽기 전용 모드</Label>
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { V2ProcessWorkStandardDefinition } from "./index";
+import { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
+
+export class ProcessWorkStandardRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = V2ProcessWorkStandardDefinition;
+
+  render(): React.ReactElement {
+    const { formData, isPreview, config, tableName } = this.props as Record<
+      string,
+      unknown
+    >;
+
+    return (
+      <ProcessWorkStandardComponent
+        config={(config as object) || {}}
+        formData={formData as Record<string, unknown>}
+        tableName={tableName as string}
+        isPreview={isPreview as boolean}
+      />
+    );
+  }
+}
+
+ProcessWorkStandardRenderer.registerSelf();
+
+if (process.env.NODE_ENV === "development") {
+  ProcessWorkStandardRenderer.enableHotReload();
+}

frontend/lib/registry/components/v2-process-work-standard/components/ItemProcessSelector.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Search, ChevronDown, ChevronRight, Package, GitBranch, Settings2, Star } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { ItemData, RoutingVersion, SelectionState } from "../types";
+
+interface ItemProcessSelectorProps {
+  title: string;
+  items: ItemData[];
+  routings: RoutingVersion[];
+  selection: SelectionState;
+  onSearch: (keyword: string) => void;
+  onSelectItem: (itemCode: string, itemName: string) => void;
+  onSelectProcess: (
+    routingDetailId: string,
+    processName: string,
+    routingVersionId: string,
+    routingVersionName: string
+  ) => void;
+  onInit: () => void;
+}
+
+export function ItemProcessSelector({
+  title,
+  items,
+  routings,
+  selection,
+  onSearch,
+  onSelectItem,
+  onSelectProcess,
+  onInit,
+}: ItemProcessSelectorProps) {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    onInit();
+  }, [onInit]);
+
+  const handleSearch = (value: string) => {
+    setSearchKeyword(value);
+    onSearch(value);
+  };
+
+  const toggleItem = (itemCode: string, itemName: string) => {
+    const next = new Set(expandedItems);
+    if (next.has(itemCode)) {
+      next.delete(itemCode);
+    } else {
+      next.add(itemCode);
+      onSelectItem(itemCode, itemName);
+    }
+    setExpandedItems(next);
+  };
+
+  const isItemExpanded = (itemCode: string) => expandedItems.has(itemCode);
+
+  return (
+    <div className="flex h-full flex-col border-r bg-background">
+      {/* 헤더 */}
+      <div className="border-b p-3">
+        <div className="mb-2 flex items-center gap-2">
+          <Package className="h-4 w-4 text-primary" />
+          <span className="text-sm font-semibold">{title}</span>
+        </div>
+        <div className="relative">
+          <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            placeholder="품목 또는 공정 검색"
+            value={searchKeyword}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="h-8 pl-8 text-xs"
+          />
+        </div>
+      </div>
+
+      {/* 트리 목록 */}
+      <div className="flex-1 overflow-y-auto p-2">
+        {items.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <Package className="mb-2 h-8 w-8 text-muted-foreground/50" />
+            <p className="text-xs text-muted-foreground">
+              라우팅이 등록된 품목이 없습니다
+            </p>
+          </div>
+        ) : (
+          items.map((item) => (
+            <div key={item.item_code} className="mb-1">
+              {/* 품목 헤더 */}
+              <button
+                onClick={() => toggleItem(item.item_code, item.item_name)}
+                className={cn(
+                  "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+                  "hover:bg-accent",
+                  selection.itemCode === item.item_code && "bg-accent"
+                )}
+              >
+                {isItemExpanded(item.item_code) ? (
+                  <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                )}
+                <Package className="h-3.5 w-3.5 shrink-0 text-primary" />
+                <span className="truncate font-medium">
+                  {item.item_name} ({item.item_code})
+                </span>
+              </button>
+
+              {/* 라우팅 + 공정 */}
+              {isItemExpanded(item.item_code) &&
+                selection.itemCode === item.item_code && (
+                  <div className="ml-4 mt-0.5 border-l pl-2">
+                    {routings.length === 0 ? (
+                      <p className="py-2 text-[10px] text-muted-foreground">
+                        등록된 공정이 없습니다
+                      </p>
+                    ) : (
+                      routings.map((routing) => (
+                        <div key={routing.id} className="mb-1">
+                          {/* 라우팅 버전 */}
+                          <div className="flex items-center gap-1.5 px-1 py-1">
+                            <Star className="h-3 w-3 text-amber-500" />
+                            <span className="text-[11px] font-medium text-muted-foreground">
+                              {routing.version_name || "기본 라우팅"}
+                            </span>
+                          </div>
+
+                          {/* 공정 목록 */}
+                          {routing.processes.map((proc) => (
+                            <button
+                              key={proc.routing_detail_id}
+                              onClick={() =>
+                                onSelectProcess(
+                                  proc.routing_detail_id,
+                                  proc.process_name,
+                                  routing.id,
+                                  routing.version_name || "기본 라우팅"
+                                )
+                              }
+                              className={cn(
+                                "ml-3 flex w-[calc(100%-12px)] items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+                                "hover:bg-primary/10",
+                                selection.routingDetailId ===
+                                  proc.routing_detail_id &&
+                                  "bg-primary/15 font-semibold text-primary"
+                              )}
+                            >
+                              <Settings2 className="h-3 w-3 shrink-0" />
+                              <span className="truncate">
+                                {proc.process_name || proc.process_code}
+                              </span>
+                            </button>
+                          ))}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/components/WorkItemAddModal.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import React, { useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { DetailTypeDefinition, WorkItem } from "../types";
+
+interface ModalDetail {
+  id: string;
+  detail_type: string;
+  content: string;
+  is_required: string;
+  sort_order: number;
+}
+
+interface WorkItemAddModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (data: {
+    work_phase: string;
+    title: string;
+    is_required: string;
+    description?: string;
+    details?: Array<{
+      detail_type?: string;
+      content: string;
+      is_required: string;
+      sort_order: number;
+    }>;
+  }) => void;
+  phaseKey: string;
+  phaseLabel: string;
+  detailTypes: DetailTypeDefinition[];
+  editItem?: WorkItem | null;
+}
+
+export function WorkItemAddModal({
+  open,
+  onClose,
+  onSave,
+  phaseKey,
+  phaseLabel,
+  detailTypes,
+  editItem,
+}: WorkItemAddModalProps) {
+  const [title, setTitle] = useState(editItem?.title || "");
+  const [isRequired, setIsRequired] = useState(editItem?.is_required || "Y");
+  const [description, setDescription] = useState(editItem?.description || "");
+  const [details, setDetails] = useState<ModalDetail[]>([]);
+
+  const resetForm = () => {
+    setTitle("");
+    setIsRequired("Y");
+    setDescription("");
+    setDetails([]);
+  };
+
+  const handleSave = () => {
+    if (!title.trim()) return;
+    onSave({
+      work_phase: phaseKey,
+      title: title.trim(),
+      is_required: isRequired,
+      description: description.trim() || undefined,
+      details: details
+        .filter((d) => d.content.trim())
+        .map((d, idx) => ({
+          detail_type: d.detail_type || undefined,
+          content: d.content.trim(),
+          is_required: d.is_required,
+          sort_order: idx + 1,
+        })),
+    });
+    resetForm();
+    onClose();
+  };
+
+  const addDetail = () => {
+    setDetails((prev) => [
+      ...prev,
+      {
+        id: crypto.randomUUID(),
+        detail_type: detailTypes[0]?.value || "",
+        content: "",
+        is_required: "N",
+        sort_order: prev.length + 1,
+      },
+    ]);
+  };
+
+  const removeDetail = (id: string) => {
+    setDetails((prev) => prev.filter((d) => d.id !== id));
+  };
+
+  const updateDetailField = (
+    id: string,
+    field: keyof ModalDetail,
+    value: string | number
+  ) => {
+    setDetails((prev) =>
+      prev.map((d) => (d.id === id ? { ...d, [field]: value } : d))
+    );
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) {
+          resetForm();
+          onClose();
+        }
+      }}
+    >
+      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">
+            작업 항목 {editItem ? "수정" : "추가"}
+          </DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            {phaseLabel} 단계에 {editItem ? "항목을 수정" : "새 항목을 추가"}합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 기본 정보 */}
+          <div className="space-y-3 rounded-lg border p-3">
+            <p className="text-xs font-medium text-muted-foreground">
+              기본 정보
+            </p>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-xs">
+                  항목 제목 <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  placeholder="예: 장비 점검, 품질 검사"
+                  className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+              <div>
+                <Label className="text-xs">필수 여부</Label>
+                <Select value={isRequired} onValueChange={setIsRequired}>
+                  <SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Y" className="text-xs sm:text-sm">
+                      필수
+                    </SelectItem>
+                    <SelectItem value="N" className="text-xs sm:text-sm">
+                      선택
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="text-xs">비고</Label>
+              <Textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="추가 설명이나 주의사항"
+                className="mt-1 min-h-[60px] text-xs sm:text-sm"
+                rows={2}
+              />
+            </div>
+          </div>
+
+          {/* 상세 항목 (신규 추가 시에만) */}
+          {!editItem && (
+            <div className="space-y-2 rounded-lg border p-3">
+              <div className="flex items-center justify-between">
+                <p className="text-xs font-medium text-muted-foreground">
+                  상세 항목
+                </p>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-6 gap-1 text-[10px]"
+                  onClick={addDetail}
+                >
+                  <Plus className="h-3 w-3" />
+                  상세 추가
+                </Button>
+              </div>
+
+              {details.length > 0 ? (
+                <table className="w-full text-xs">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="w-10 py-1.5 text-center font-medium text-muted-foreground">
+                        순서
+                      </th>
+                      <th className="w-20 px-1 py-1.5 text-left font-medium text-muted-foreground">
+                        유형
+                      </th>
+                      <th className="px-1 py-1.5 text-left font-medium text-muted-foreground">
+                        내용
+                      </th>
+                      <th className="w-16 px-1 py-1.5 text-center font-medium text-muted-foreground">
+                        필수
+                      </th>
+                      <th className="w-10 py-1.5 text-center font-medium text-muted-foreground">
+                        관리
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {details.map((detail, idx) => (
+                      <tr key={detail.id} className="border-b">
+                        <td className="py-1 text-center text-muted-foreground">
+                          {idx + 1}
+                        </td>
+                        <td className="px-1 py-1">
+                          <Select
+                            value={detail.detail_type}
+                            onValueChange={(v) =>
+                              updateDetailField(detail.id, "detail_type", v)
+                            }
+                          >
+                            <SelectTrigger className="h-7 text-[10px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {detailTypes.map((t) => (
+                                <SelectItem
+                                  key={t.value}
+                                  value={t.value}
+                                  className="text-xs"
+                                >
+                                  {t.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </td>
+                        <td className="px-1 py-1">
+                          <Input
+                            value={detail.content}
+                            onChange={(e) =>
+                              updateDetailField(
+                                detail.id,
+                                "content",
+                                e.target.value
+                              )
+                            }
+                            placeholder="상세 내용"
+                            className="h-7 text-[10px]"
+                          />
+                        </td>
+                        <td className="px-1 py-1">
+                          <Select
+                            value={detail.is_required}
+                            onValueChange={(v) =>
+                              updateDetailField(detail.id, "is_required", v)
+                            }
+                          >
+                            <SelectTrigger className="h-7 text-[10px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="Y" className="text-xs">
+                                필수
+                              </SelectItem>
+                              <SelectItem value="N" className="text-xs">
+                                선택
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </td>
+                        <td className="py-1 text-center">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 text-destructive hover:text-destructive"
+                            onClick={() => removeDetail(detail.id)}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <p className="py-3 text-center text-[10px] text-muted-foreground">
+                  상세 항목이 없습니다. &quot;상세 추가&quot; 버튼을 클릭하여 추가하세요.
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => {
+              resetForm();
+              onClose();
+            }}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={!title.trim()}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/components/WorkItemCard.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React from "react";
+import { GripVertical, Pencil, Trash2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { WorkItem } from "../types";
+
+interface WorkItemCardProps {
+  item: WorkItem;
+  isSelected: boolean;
+  readonly?: boolean;
+  onClick: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function WorkItemCard({
+  item,
+  isSelected,
+  readonly,
+  onClick,
+  onEdit,
+  onDelete,
+}: WorkItemCardProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
+        "hover:border-primary/30 hover:shadow-sm",
+        isSelected
+          ? "border-primary bg-primary/5 shadow-sm"
+          : "border-border bg-card"
+      )}
+    >
+      <GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-sm font-medium">{item.title}</span>
+        </div>
+        <div className="mt-1 flex items-center gap-2">
+          <Badge
+            variant="secondary"
+            className="h-5 px-1.5 text-[10px] font-normal"
+          >
+            {item.detail_count}개
+          </Badge>
+          <Badge
+            variant={item.is_required === "Y" ? "default" : "outline"}
+            className="h-5 px-1.5 text-[10px] font-normal"
+          >
+            {item.is_required === "Y" ? "필수" : "선택"}
+          </Badge>
+        </div>
+      </div>
+
+      {!readonly && (
+        <div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit();
+            }}
+          >
+            <Pencil className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 text-destructive hover:text-destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/components/WorkItemDetailList.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import React, { useState } from "react";
+import { Plus, Pencil, Trash2, Check, X, HandMetal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { WorkItem, WorkItemDetail, DetailTypeDefinition } from "../types";
+
+interface WorkItemDetailListProps {
+  workItem: WorkItem | null;
+  details: WorkItemDetail[];
+  detailTypes: DetailTypeDefinition[];
+  readonly?: boolean;
+  onCreateDetail: (data: Partial<WorkItemDetail>) => void;
+  onUpdateDetail: (id: string, data: Partial<WorkItemDetail>) => void;
+  onDeleteDetail: (id: string) => void;
+}
+
+export function WorkItemDetailList({
+  workItem,
+  details,
+  detailTypes,
+  readonly,
+  onCreateDetail,
+  onUpdateDetail,
+  onDeleteDetail,
+}: WorkItemDetailListProps) {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editData, setEditData] = useState<Partial<WorkItemDetail>>({});
+  const [isAdding, setIsAdding] = useState(false);
+  const [newData, setNewData] = useState<Partial<WorkItemDetail>>({
+    detail_type: detailTypes[0]?.value || "",
+    content: "",
+    is_required: "N",
+    sort_order: 0,
+  });
+
+  if (!workItem) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center text-center">
+        <HandMetal className="mb-2 h-10 w-10 text-amber-400" />
+        <p className="text-sm text-muted-foreground">
+          왼쪽에서 항목을 선택하세요
+        </p>
+      </div>
+    );
+  }
+
+  const getTypeLabel = (value?: string) =>
+    detailTypes.find((t) => t.value === value)?.label || value || "-";
+
+  const handleAdd = () => {
+    if (!newData.content?.trim()) return;
+    onCreateDetail({
+      ...newData,
+      sort_order: details.length + 1,
+    });
+    setNewData({
+      detail_type: detailTypes[0]?.value || "",
+      content: "",
+      is_required: "N",
+      sort_order: 0,
+    });
+    setIsAdding(false);
+  };
+
+  const handleSaveEdit = (id: string) => {
+    onUpdateDetail(id, editData);
+    setEditingId(null);
+    setEditData({});
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between border-b px-4 py-2">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">{workItem.title}</span>
+          <Badge variant="secondary" className="text-[10px]">
+            {details.length}개
+          </Badge>
+        </div>
+        {!readonly && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 gap-1 text-xs"
+            onClick={() => setIsAdding(true)}
+          >
+            <Plus className="h-3 w-3" />
+            상세 추가
+          </Button>
+        )}
+      </div>
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-y-auto">
+        <table className="w-full text-xs">
+          <thead className="sticky top-0 bg-muted/50">
+            <tr className="border-b">
+              <th className="w-12 px-2 py-2 text-center font-medium text-muted-foreground">
+                순서
+              </th>
+              <th className="w-20 px-2 py-2 text-left font-medium text-muted-foreground">
+                유형
+              </th>
+              <th className="px-2 py-2 text-left font-medium text-muted-foreground">
+                내용
+              </th>
+              <th className="w-14 px-2 py-2 text-center font-medium text-muted-foreground">
+                필수
+              </th>
+              {!readonly && (
+                <th className="w-16 px-2 py-2 text-center font-medium text-muted-foreground">
+                  관리
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {details.map((detail, idx) => (
+              <tr
+                key={detail.id}
+                className="border-b transition-colors hover:bg-muted/30"
+              >
+                {editingId === detail.id ? (
+                  <>
+                    <td className="px-2 py-1.5 text-center">{idx + 1}</td>
+                    <td className="px-2 py-1.5">
+                      <Select
+                        value={editData.detail_type || detail.detail_type || ""}
+                        onValueChange={(v) =>
+                          setEditData((prev) => ({
+                            ...prev,
+                            detail_type: v,
+                          }))
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {detailTypes.map((t) => (
+                            <SelectItem
+                              key={t.value}
+                              value={t.value}
+                              className="text-xs"
+                            >
+                              {t.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </td>
+                    <td className="px-2 py-1.5">
+                      <Input
+                        value={editData.content ?? detail.content}
+                        onChange={(e) =>
+                          setEditData((prev) => ({
+                            ...prev,
+                            content: e.target.value,
+                          }))
+                        }
+                        className="h-7 text-xs"
+                      />
+                    </td>
+                    <td className="px-2 py-1.5 text-center">
+                      <Select
+                        value={editData.is_required ?? detail.is_required}
+                        onValueChange={(v) =>
+                          setEditData((prev) => ({
+                            ...prev,
+                            is_required: v,
+                          }))
+                        }
+                      >
+                        <SelectTrigger className="h-7 w-14 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y" className="text-xs">
+                            필수
+                          </SelectItem>
+                          <SelectItem value="N" className="text-xs">
+                            선택
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </td>
+                    <td className="px-2 py-1.5 text-center">
+                      <div className="flex justify-center gap-0.5">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 text-green-600"
+                          onClick={() => handleSaveEdit(detail.id)}
+                        >
+                          <Check className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6"
+                          onClick={() => {
+                            setEditingId(null);
+                            setEditData({});
+                          }}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </td>
+                  </>
+                ) : (
+                  <>
+                    <td className="px-2 py-1.5 text-center text-muted-foreground">
+                      {idx + 1}
+                    </td>
+                    <td className="px-2 py-1.5">
+                      <Badge
+                        variant="outline"
+                        className="text-[10px] font-normal"
+                      >
+                        {getTypeLabel(detail.detail_type)}
+                      </Badge>
+                    </td>
+                    <td className="px-2 py-1.5">{detail.content}</td>
+                    <td className="px-2 py-1.5 text-center">
+                      <Badge
+                        variant={
+                          detail.is_required === "Y" ? "default" : "secondary"
+                        }
+                        className="text-[10px] font-normal"
+                      >
+                        {detail.is_required === "Y" ? "필수" : "선택"}
+                      </Badge>
+                    </td>
+                    {!readonly && (
+                      <td className="px-2 py-1.5 text-center">
+                        <div className="flex justify-center gap-0.5">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={() => {
+                              setEditingId(detail.id);
+                              setEditData({
+                                detail_type: detail.detail_type,
+                                content: detail.content,
+                                is_required: detail.is_required,
+                              });
+                            }}
+                          >
+                            <Pencil className="h-3 w-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 text-destructive hover:text-destructive"
+                            onClick={() => onDeleteDetail(detail.id)}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      </td>
+                    )}
+                  </>
+                )}
+              </tr>
+            ))}
+
+            {/* 추가 행 */}
+            {isAdding && (
+              <tr className="border-b bg-primary/5">
+                <td className="px-2 py-1.5 text-center text-muted-foreground">
+                  {details.length + 1}
+                </td>
+                <td className="px-2 py-1.5">
+                  <Select
+                    value={newData.detail_type || ""}
+                    onValueChange={(v) =>
+                      setNewData((prev) => ({ ...prev, detail_type: v }))
+                    }
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {detailTypes.map((t) => (
+                        <SelectItem
+                          key={t.value}
+                          value={t.value}
+                          className="text-xs"
+                        >
+                          {t.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </td>
+                <td className="px-2 py-1.5">
+                  <Input
+                    autoFocus
+                    placeholder="상세 내용 입력"
+                    value={newData.content || ""}
+                    onChange={(e) =>
+                      setNewData((prev) => ({
+                        ...prev,
+                        content: e.target.value,
+                      }))
+                    }
+                    onKeyDown={(e) => e.key === "Enter" && handleAdd()}
+                    className="h-7 text-xs"
+                  />
+                </td>
+                <td className="px-2 py-1.5 text-center">
+                  <Select
+                    value={newData.is_required || "N"}
+                    onValueChange={(v) =>
+                      setNewData((prev) => ({ ...prev, is_required: v }))
+                    }
+                  >
+                    <SelectTrigger className="h-7 w-14 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Y" className="text-xs">
+                        필수
+                      </SelectItem>
+                      <SelectItem value="N" className="text-xs">
+                        선택
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </td>
+                <td className="px-2 py-1.5 text-center">
+                  <div className="flex justify-center gap-0.5">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 text-green-600"
+                      onClick={handleAdd}
+                    >
+                      <Check className="h-3 w-3" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={() => setIsAdding(false)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+
+        {details.length === 0 && !isAdding && (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <p className="text-xs text-muted-foreground">
+              상세 항목이 없습니다. &quot;상세 추가&quot; 버튼을 클릭하여 추가하세요.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/components/WorkPhaseSection.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+import { Plus, ClipboardList } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { WorkItemCard } from "./WorkItemCard";
+import { WorkItemDetailList } from "./WorkItemDetailList";
+import {
+  WorkItem,
+  WorkItemDetail,
+  WorkPhaseDefinition,
+  DetailTypeDefinition,
+} from "../types";
+
+interface WorkPhaseSectionProps {
+  phase: WorkPhaseDefinition;
+  items: WorkItem[];
+  selectedWorkItemId: string | null;
+  selectedWorkItemDetails: WorkItemDetail[];
+  detailTypes: DetailTypeDefinition[];
+  readonly?: boolean;
+  onSelectWorkItem: (workItemId: string) => void;
+  onAddWorkItem: (phase: string) => void;
+  onEditWorkItem: (item: WorkItem) => void;
+  onDeleteWorkItem: (id: string) => void;
+  onCreateDetail: (workItemId: string, data: Partial<WorkItemDetail>) => void;
+  onUpdateDetail: (id: string, data: Partial<WorkItemDetail>) => void;
+  onDeleteDetail: (id: string) => void;
+}
+
+export function WorkPhaseSection({
+  phase,
+  items,
+  selectedWorkItemId,
+  selectedWorkItemDetails,
+  detailTypes,
+  readonly,
+  onSelectWorkItem,
+  onAddWorkItem,
+  onEditWorkItem,
+  onDeleteWorkItem,
+  onCreateDetail,
+  onUpdateDetail,
+  onDeleteDetail,
+}: WorkPhaseSectionProps) {
+  const selectedItem = items.find((i) => i.id === selectedWorkItemId) || null;
+  const isThisSectionSelected = items.some(
+    (i) => i.id === selectedWorkItemId
+  );
+
+  return (
+    <div className="rounded-lg border bg-card">
+      {/* 섹션 헤더 */}
+      <div className="flex items-center justify-between border-b px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold">{phase.label}</h3>
+          <Badge
+            variant="secondary"
+            className="h-5 rounded-full px-2 text-[10px]"
+          >
+            {items.length}개 항목
+          </Badge>
+        </div>
+        {!readonly && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 gap-1 text-xs"
+            onClick={() => onAddWorkItem(phase.key)}
+          >
+            <Plus className="h-3 w-3" />
+            작업항목 추가
+          </Button>
+        )}
+      </div>
+
+      {/* 콘텐츠 영역 */}
+      <div className="flex min-h-[140px]">
+        {/* 좌측: 작업 항목 카드 목록 */}
+        <div className="w-[240px] shrink-0 border-r p-2">
+          {items.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-6 text-center">
+              <ClipboardList className="mb-1 h-6 w-6 text-muted-foreground/40" />
+              <p className="text-[11px] text-muted-foreground">
+                등록된 항목이 없습니다
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-1.5">
+              {items.map((item) => (
+                <WorkItemCard
+                  key={item.id}
+                  item={item}
+                  isSelected={selectedWorkItemId === item.id}
+                  readonly={readonly}
+                  onClick={() => onSelectWorkItem(item.id)}
+                  onEdit={() => onEditWorkItem(item)}
+                  onDelete={() => onDeleteWorkItem(item.id)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 우측: 상세 리스트 */}
+        <div className="flex-1">
+          <WorkItemDetailList
+            workItem={isThisSectionSelected ? selectedItem : null}
+            details={isThisSectionSelected ? selectedWorkItemDetails : []}
+            detailTypes={detailTypes}
+            readonly={readonly}
+            onCreateDetail={(data) =>
+              selectedWorkItemId && onCreateDetail(selectedWorkItemId, data)
+            }
+            onUpdateDetail={onUpdateDetail}
+            onDeleteDetail={onDeleteDetail}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/lib/registry/components/v2-process-work-standard/config.ts

@@ -0,0 +1,33 @@
+/**
+ * 공정 작업기준 기본 설정
+ */
+
+import { ProcessWorkStandardConfig } from "./types";
+
+export const defaultConfig: ProcessWorkStandardConfig = {
+  dataSource: {
+    itemTable: "item_info",
+    itemNameColumn: "item_name",
+    itemCodeColumn: "item_number",
+    routingVersionTable: "item_routing_version",
+    routingFkColumn: "item_code",
+    routingVersionNameColumn: "version_name",
+    routingDetailTable: "item_routing_detail",
+    processTable: "process_mng",
+    processNameColumn: "process_name",
+    processCodeColumn: "process_code",
+  },
+  phases: [
+    { key: "PRE", label: "작업 전 (Pre-Work)", sortOrder: 1 },
+    { key: "IN", label: "작업 중 (In-Work)", sortOrder: 2 },
+    { key: "POST", label: "작업 후 (Post-Work)", sortOrder: 3 },
+  ],
+  detailTypes: [
+    { value: "CHECK", label: "체크" },
+    { value: "INSPECTION", label: "검사" },
+    { value: "MEASUREMENT", label: "측정" },
+  ],
+  splitRatio: 30,
+  leftPanelTitle: "품목 및 공정 선택",
+  readonly: false,
+};

frontend/lib/registry/components/v2-process-work-standard/hooks/useProcessWorkStandard.ts

@@ -0,0 +1,336 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { apiClient } from "@/lib/api/client";
+import {
+  ProcessWorkStandardConfig,
+  ItemData,
+  RoutingVersion,
+  WorkItem,
+  WorkItemDetail,
+  SelectionState,
+} from "../types";
+
+const API_BASE = "/api/process-work-standard";
+
+export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
+  const [items, setItems] = useState<ItemData[]>([]);
+  const [routings, setRoutings] = useState<RoutingVersion[]>([]);
+  const [workItems, setWorkItems] = useState<WorkItem[]>([]);
+  const [selectedWorkItemDetails, setSelectedWorkItemDetails] = useState<WorkItemDetail[]>([]);
+  const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const [selection, setSelection] = useState<SelectionState>({
+    itemCode: null,
+    itemName: null,
+    routingVersionId: null,
+    routingVersionName: null,
+    routingDetailId: null,
+    processName: null,
+  });
+
+  // 품목 목록 조회
+  const fetchItems = useCallback(
+    async (search?: string) => {
+      try {
+        setLoading(true);
+        const ds = config.dataSource;
+        const params = new URLSearchParams({
+          tableName: ds.itemTable,
+          nameColumn: ds.itemNameColumn,
+          codeColumn: ds.itemCodeColumn,
+          routingTable: ds.routingVersionTable,
+          routingFkColumn: ds.routingFkColumn,
+          ...(search ? { search } : {}),
+        });
+        const res = await apiClient.get(`${API_BASE}/items?${params}`);
+        if (res.data?.success) {
+          setItems(res.data.data);
+        }
+      } catch (err) {
+        console.error("품목 조회 실패", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [config.dataSource]
+  );
+
+  // 라우팅 + 공정 조회
+  const fetchRoutings = useCallback(
+    async (itemCode: string) => {
+      try {
+        const ds = config.dataSource;
+        const params = new URLSearchParams({
+          routingVersionTable: ds.routingVersionTable,
+          routingDetailTable: ds.routingDetailTable,
+          routingFkColumn: ds.routingFkColumn,
+          processTable: ds.processTable,
+          processNameColumn: ds.processNameColumn,
+          processCodeColumn: ds.processCodeColumn,
+        });
+        const res = await apiClient.get(
+          `${API_BASE}/items/${encodeURIComponent(itemCode)}/routings?${params}`
+        );
+        if (res.data?.success) {
+          setRoutings(res.data.data);
+        }
+      } catch (err) {
+        console.error("라우팅 조회 실패", err);
+      }
+    },
+    [config.dataSource]
+  );
+
+  // 작업 항목 조회
+  const fetchWorkItems = useCallback(async (routingDetailId: string) => {
+    try {
+      setLoading(true);
+      const res = await apiClient.get(
+        `${API_BASE}/routing-detail/${routingDetailId}/work-items`
+      );
+      if (res.data?.success) {
+        setWorkItems(res.data.items || []);
+      }
+    } catch (err) {
+      console.error("작업 항목 조회 실패", err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 작업 항목 상세 조회
+  const fetchWorkItemDetails = useCallback(async (workItemId: string) => {
+    try {
+      const res = await apiClient.get(
+        `${API_BASE}/work-items/${workItemId}/details`
+      );
+      if (res.data?.success) {
+        setSelectedWorkItemDetails(res.data.data);
+        setSelectedWorkItemId(workItemId);
+      }
+    } catch (err) {
+      console.error("상세 조회 실패", err);
+    }
+  }, []);
+
+  // 품목 선택
+  const selectItem = useCallback(
+    async (itemCode: string, itemName: string) => {
+      setSelection((prev) => ({
+        ...prev,
+        itemCode,
+        itemName,
+        routingVersionId: null,
+        routingVersionName: null,
+        routingDetailId: null,
+        processName: null,
+      }));
+      setWorkItems([]);
+      setSelectedWorkItemDetails([]);
+      setSelectedWorkItemId(null);
+      await fetchRoutings(itemCode);
+    },
+    [fetchRoutings]
+  );
+
+  // 공정 선택
+  const selectProcess = useCallback(
+    async (
+      routingDetailId: string,
+      processName: string,
+      routingVersionId: string,
+      routingVersionName: string
+    ) => {
+      setSelection((prev) => ({
+        ...prev,
+        routingVersionId,
+        routingVersionName,
+        routingDetailId,
+        processName,
+      }));
+      setSelectedWorkItemDetails([]);
+      setSelectedWorkItemId(null);
+      await fetchWorkItems(routingDetailId);
+    },
+    [fetchWorkItems]
+  );
+
+  // 작업 항목 추가
+  const createWorkItem = useCallback(
+    async (data: {
+      work_phase: string;
+      title: string;
+      is_required: string;
+      description?: string;
+      details?: Array<{
+        detail_type?: string;
+        content: string;
+        is_required: string;
+        sort_order: number;
+      }>;
+    }) => {
+      if (!selection.routingDetailId) return null;
+
+      try {
+        const nextOrder =
+          workItems.filter((wi) => wi.work_phase === data.work_phase).length + 1;
+
+        const res = await apiClient.post(`${API_BASE}/work-items`, {
+          routing_detail_id: selection.routingDetailId,
+          work_phase: data.work_phase,
+          title: data.title,
+          is_required: data.is_required,
+          sort_order: nextOrder,
+          description: data.description,
+        });
+
+        if (res.data?.success && res.data.data) {
+          const newItem = res.data.data;
+
+          // 상세 항목도 함께 생성
+          if (data.details && data.details.length > 0) {
+            for (const detail of data.details) {
+              await apiClient.post(`${API_BASE}/work-item-details`, {
+                work_item_id: newItem.id,
+                ...detail,
+              });
+            }
+          }
+
+          await fetchWorkItems(selection.routingDetailId);
+          return newItem;
+        }
+      } catch (err) {
+        console.error("작업 항목 생성 실패", err);
+      }
+      return null;
+    },
+    [selection.routingDetailId, workItems, fetchWorkItems]
+  );
+
+  // 작업 항목 수정
+  const updateWorkItem = useCallback(
+    async (id: string, data: Partial<WorkItem>) => {
+      try {
+        const res = await apiClient.put(`${API_BASE}/work-items/${id}`, data);
+        if (res.data?.success && selection.routingDetailId) {
+          await fetchWorkItems(selection.routingDetailId);
+        }
+      } catch (err) {
+        console.error("작업 항목 수정 실패", err);
+      }
+    },
+    [selection.routingDetailId, fetchWorkItems]
+  );
+
+  // 작업 항목 삭제
+  const deleteWorkItem = useCallback(
+    async (id: string) => {
+      try {
+        const res = await apiClient.delete(`${API_BASE}/work-items/${id}`);
+        if (res.data?.success && selection.routingDetailId) {
+          await fetchWorkItems(selection.routingDetailId);
+          if (selectedWorkItemId === id) {
+            setSelectedWorkItemDetails([]);
+            setSelectedWorkItemId(null);
+          }
+        }
+      } catch (err) {
+        console.error("작업 항목 삭제 실패", err);
+      }
+    },
+    [selection.routingDetailId, selectedWorkItemId, fetchWorkItems]
+  );
+
+  // 상세 추가
+  const createDetail = useCallback(
+    async (workItemId: string, data: Partial<WorkItemDetail>) => {
+      try {
+        const res = await apiClient.post(`${API_BASE}/work-item-details`, {
+          work_item_id: workItemId,
+          ...data,
+        });
+        if (res.data?.success) {
+          await fetchWorkItemDetails(workItemId);
+          if (selection.routingDetailId) {
+            await fetchWorkItems(selection.routingDetailId);
+          }
+        }
+      } catch (err) {
+        console.error("상세 생성 실패", err);
+      }
+    },
+    [fetchWorkItemDetails, fetchWorkItems, selection.routingDetailId]
+  );
+
+  // 상세 수정
+  const updateDetail = useCallback(
+    async (id: string, data: Partial<WorkItemDetail>) => {
+      try {
+        const res = await apiClient.put(
+          `${API_BASE}/work-item-details/${id}`,
+          data
+        );
+        if (res.data?.success && selectedWorkItemId) {
+          await fetchWorkItemDetails(selectedWorkItemId);
+        }
+      } catch (err) {
+        console.error("상세 수정 실패", err);
+      }
+    },
+    [selectedWorkItemId, fetchWorkItemDetails]
+  );
+
+  // 상세 삭제
+  const deleteDetail = useCallback(
+    async (id: string) => {
+      try {
+        const res = await apiClient.delete(
+          `${API_BASE}/work-item-details/${id}`
+        );
+        if (res.data?.success) {
+          if (selectedWorkItemId) {
+            await fetchWorkItemDetails(selectedWorkItemId);
+          }
+          if (selection.routingDetailId) {
+            await fetchWorkItems(selection.routingDetailId);
+          }
+        }
+      } catch (err) {
+        console.error("상세 삭제 실패", err);
+      }
+    },
+    [
+      selectedWorkItemId,
+      selection.routingDetailId,
+      fetchWorkItemDetails,
+      fetchWorkItems,
+    ]
+  );
+
+  return {
+    items,
+    routings,
+    workItems,
+    selectedWorkItemDetails,
+    selectedWorkItemId,
+    selection,
+    loading,
+    saving,
+    fetchItems,
+    selectItem,
+    selectProcess,
+    fetchWorkItems,
+    fetchWorkItemDetails,
+    setSelectedWorkItemId,
+    createWorkItem,
+    updateWorkItem,
+    deleteWorkItem,
+    createDetail,
+    updateDetail,
+    deleteDetail,
+  };
+}

frontend/lib/registry/components/v2-process-work-standard/index.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
+import { ProcessWorkStandardConfigPanel } from "./ProcessWorkStandardConfigPanel";
+import { defaultConfig } from "./config";
+
+export const V2ProcessWorkStandardDefinition = createComponentDefinition({
+  id: "v2-process-work-standard",
+  name: "공정 작업기준",
+  nameEng: "Process Work Standard",
+  description: "품목별 라우팅/공정에 대한 작업 전·중·후 기준 항목을 관리하는 컴포넌트",
+  category: ComponentCategory.INPUT,
+  webType: "component",
+  component: ProcessWorkStandardComponent,
+  defaultConfig: defaultConfig,
+  defaultSize: {
+    width: 1400,
+    height: 800,
+    gridColumnSpan: "12",
+  },
+  configPanel: ProcessWorkStandardConfigPanel,
+  icon: "ClipboardCheck",
+  tags: ["공정", "작업기준", "품질", "검사", "체크리스트", "라우팅", "제조"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: `
+공정별 작업기준(Pre-Work / In-Work / Post-Work)을 관리하는 컴포넌트입니다.
+
+## 주요 기능
+- 좌측: 품목 → 라우팅 버전 → 공정 아코디언 트리 선택
+- 우측: 작업 단계별 작업 항목 및 상세 관리
+- 작업 항목 추가/수정/삭제 (모달)
+- 항목별 상세 체크리스트 관리
+- 전체 저장 기능
+
+## 커스터마이징
+- 작업 단계(Phase) 추가/삭제/이름변경 가능
+- 상세 유형 옵션 커스텀 가능
+- 데이터 소스 테이블 변경 가능
+  `,
+});
+
+export type {
+  ProcessWorkStandardConfig,
+  ProcessWorkStandardComponentProps,
+  WorkPhaseDefinition,
+  DetailTypeDefinition,
+  DataSourceConfig,
+  WorkItem,
+  WorkItemDetail,
+  SelectionState,
+} from "./types";
+
+export { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
+export { ProcessWorkStandardRenderer } from "./ProcessWorkStandardRenderer";
+export { ProcessWorkStandardConfigPanel } from "./ProcessWorkStandardConfigPanel";

frontend/lib/registry/components/v2-process-work-standard/types.ts

@@ -0,0 +1,111 @@
+/**
+ * 공정 작업기준 컴포넌트 타입 정의
+ */
+
+// 작업 단계 정의 (사용자가 추가/삭제/이름변경 가능)
+export interface WorkPhaseDefinition {
+  key: string;
+  label: string;
+  sortOrder: number;
+}
+
+// 상세 유형 정의 (사용자가 추가/삭제 가능)
+export interface DetailTypeDefinition {
+  value: string;
+  label: string;
+}
+
+// 데이터 소스 설정
+export interface DataSourceConfig {
+  itemTable: string;
+  itemNameColumn: string;
+  itemCodeColumn: string;
+  routingVersionTable: string;
+  routingFkColumn: string;
+  routingVersionNameColumn: string;
+  routingDetailTable: string;
+  processTable: string;
+  processNameColumn: string;
+  processCodeColumn: string;
+}
+
+// 전체 Config
+export interface ProcessWorkStandardConfig {
+  dataSource: DataSourceConfig;
+  phases: WorkPhaseDefinition[];
+  detailTypes: DetailTypeDefinition[];
+  splitRatio?: number;
+  leftPanelTitle?: string;
+  readonly?: boolean;
+}
+
+// ============================================================
+// 데이터 모델
+// ============================================================
+
+export interface ItemData {
+  id: string;
+  item_name: string;
+  item_code: string;
+}
+
+export interface RoutingVersion {
+  id: string;
+  version_name: string;
+  description?: string;
+  created_date?: string;
+  processes: RoutingProcess[];
+}
+
+export interface RoutingProcess {
+  routing_detail_id: string;
+  seq_no: string;
+  process_code: string;
+  process_name: string;
+  is_required?: string;
+  work_type?: string;
+}
+
+export interface WorkItem {
+  id: string;
+  routing_detail_id: string;
+  work_phase: string;
+  title: string;
+  is_required: string;
+  sort_order: number;
+  description?: string;
+  detail_count: number;
+  created_date?: string;
+}
+
+export interface WorkItemDetail {
+  id: string;
+  work_item_id: string;
+  detail_type?: string;
+  content: string;
+  is_required: string;
+  sort_order: number;
+  remark?: string;
+  created_date?: string;
+}
+
+// ============================================================
+// 컴포넌트 Props
+// ============================================================
+
+export interface ProcessWorkStandardComponentProps {
+  config: ProcessWorkStandardConfig;
+  formData?: Record<string, any>;
+  isPreview?: boolean;
+  tableName?: string;
+}
+
+// 선택 상태
+export interface SelectionState {
+  itemCode: string | null;
+  itemName: string | null;
+  routingVersionId: string | null;
+  routingVersionName: string | null;
+  routingDetailId: string | null;
+  processName: string | null;
+}

frontend/lib/utils/getComponentConfigPanel.tsx

@@ -102,6 +102,7 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "v2-numbering-rule": () => import("@/lib/registry/components/v2-numbering-rule/NumberingRuleConfigPanel"),
   "category-manager": () => import("@/lib/registry/components/category-manager/CategoryManagerConfigPanel"),
   "universal-form-modal": () => import("@/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel"),
+  "v2-process-work-standard": () => import("@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel"),
 };
 
 // ConfigPanel 컴포넌트 캐시

frontend/package-lock.json

@@ -109,6 +109,7 @@
         "eslint-config-next": "15.4.4",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-prettier": "^5.5.4",
+        "playwright": "^1.58.2",
         "prettier": "^3.6.2",
         "prettier-plugin-tailwindcss": "^0.6.14",
         "prisma": "^6.14.0",
@@ -10001,6 +10002,21 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "license": "ISC"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/fstream": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
@@ -12497,6 +12513,38 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",

frontend/package.json

@@ -118,6 +118,7 @@
     "eslint-config-next": "15.4.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
+    "playwright": "^1.58.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "prisma": "^6.14.0",

frontend/scripts/test-formdata-logs.ts

@@ -0,0 +1,135 @@
+/**
+ * formData 로그 테스트 스크립트
+ * - http://localhost:9771/screens/1599 접속
+ * - P003 행 선택 → 추가 버튼 클릭 → 장비 선택 → 저장 전/후 콘솔 로그 수집
+ *
+ * 실행: npx tsx scripts/test-formdata-logs.ts
+ * (Playwright 필요: npx playwright install chromium)
+ */
+
+import { chromium } from "playwright";
+
+const TARGET_URL = "http://localhost:9771/screens/1599?menuObjid=1762422235300";
+const LOGIN = { userId: "topseal_admin", password: "1234" };
+
+const TARGET_LOGS = ["🔵", "🟡", "🔴", "process_code", "splitPanelParentData"];
+
+async function main() {
+  const browser = await chromium.launch({ headless: false });
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  const consoleLogs: string[] = [];
+  const errors: string[] = [];
+
+  page.on("console", (msg) => {
+    const text = msg.text();
+    const type = msg.type();
+    if (type === "error") {
+      errors.push(`[CONSOLE ERROR] ${text}`);
+    }
+    const hasTarget = TARGET_LOGS.some((t) => text.includes(t));
+    if (hasTarget || type === "error") {
+      consoleLogs.push(`[${type}] ${text}`);
+    }
+  });
+
+  console.log("1. 페이지 이동:", TARGET_URL);
+  await page.goto(TARGET_URL, { waitUntil: "domcontentloaded", timeout: 20000 });
+
+  // 로그인 필요 여부 확인
+  const userIdInput = page.locator('input[name="userId"]').first();
+  if (await userIdInput.isVisible().catch(() => false)) {
+    console.log("2. 로그인 페이지 감지 - 로그인 진행");
+    await page.fill('input[name="userId"]', LOGIN.userId);
+    await page.fill('input[name="password"]', LOGIN.password);
+    await page.click('button[type="submit"]').catch(() => page.click('button:has-text("로그인")'));
+    await page.waitForTimeout(4000);
+  }
+
+  console.log("3. 5초 대기 (페이지 로드)");
+  await page.waitForTimeout(5000);
+
+  // 탭 확인 - 공정 마스터 (첫 번째 탭)
+  const firstTab = page.getByRole("tab", { name: /공정 마스터/i }).or(page.locator('button:has-text("공정 마스터")')).first();
+  if (await firstTab.isVisible().catch(() => false)) {
+    console.log("4. '공정 마스터' 탭 클릭");
+    await firstTab.click();
+    await page.waitForTimeout(1500);
+  }
+
+  // 좌측 패널 테이블 데이터 로드 대기
+  console.log("5. 좌측 패널 데이터 로드 대기");
+  await page.locator("table tbody tr").first().waitFor({ state: "visible", timeout: 25000 }).catch(() => {
+    throw new Error("좌측 테이블에 데이터가 없습니다. process_mng에 P003 등 데이터가 있는지 확인하세요.");
+  });
+
+  // P003 행 또는 첫 번째 행 클릭
+  let rowToClick = page.locator('table tbody tr:has(td:has-text("P003"))').first();
+  const hasP003 = await rowToClick.isVisible().catch(() => false);
+  if (!hasP003) {
+    console.log("   P003 미발견 - 첫 번째 행 클릭");
+    rowToClick = page.locator("table tbody tr").first();
+  }
+  await rowToClick.click();
+  await page.waitForTimeout(800);
+
+  // 우측 패널에서 '추가' 버튼 클릭 (모달 열기)
+  console.log("6. '추가' 버튼 클릭");
+  const addBtn = page.locator('button:has-text("추가")').first();
+  await addBtn.click();
+  await page.waitForTimeout(2000);
+
+  // 모달이 열렸는지 확인
+  const modal = page.locator('[role="dialog"], [data-state="open"]').first();
+  await modal.waitFor({ state: "visible", timeout: 5000 }).catch(() => {});
+
+  // 모달 내 설비 드롭다운/콤보박스 선택 (v2-select, entity-search-input 등)
+  console.log("7. 모달 내 설비 선택");
+  const trigger = page.locator('[role="combobox"], button:has-text("선택"), button:has-text("설비")').first();
+  if (await trigger.isVisible().catch(() => false)) {
+    await trigger.click();
+    await page.waitForTimeout(500);
+    const option = page.locator('[role="option"], li[role="option"]').first();
+    if (await option.isVisible().catch(() => false)) {
+      await option.click();
+    }
+  } else {
+    // select 태그인 경우
+    const selectEl = page.locator('select').first();
+    if (await selectEl.isVisible().catch(() => false)) {
+      await selectEl.selectOption({ index: 1 });
+    }
+  }
+  await page.waitForTimeout(800);
+
+  // 저장 전 콘솔 스냅샷
+  console.log("\n=== 저장 전 콘솔 로그 (formData 관련) ===");
+  consoleLogs.forEach((l) => console.log(l));
+  if (errors.length) {
+    console.log("\n=== 에러 ===");
+    errors.forEach((e) => console.log(e));
+  }
+
+  // 저장 버튼 클릭 (모달 내부의 저장 버튼)
+  console.log("\n8. '저장' 버튼 클릭");
+  const saveBtn = page.locator('[role="dialog"] button:has-text("저장"), [data-state="open"] button:has-text("저장")').first();
+  await saveBtn.click();
+  await page.waitForTimeout(3000);
+
+  // 저장 후 로그 수집
+  console.log("\n=== 저장 후 콘솔 로그 (formData 관련) ===");
+  consoleLogs.forEach((l) => console.log(l));
+  if (errors.length) {
+    console.log("\n=== 에러 ===");
+    errors.forEach((e) => console.log(e));
+  }
+
+  await page.waitForTimeout(2000);
+  await browser.close();
+}
+
+main().catch((e) => {
+  console.error("테스트 실패:", e);
+  process.exit(1);
+});

frontend/types/v2-repeater.ts

@@ -24,7 +24,8 @@ export type AutoFillType =
   | "sequence" // 순번 (1, 2, 3...)
   | "numbering" // 채번 규칙 (관리자가 등록한 규칙 선택)
   | "fromMainForm" // 메인 폼에서 값 복사
-  | "fixed"; // 고정값
+  | "fixed" // 고정값
+  | "parentSequence"; // 부모 채번 + 순번 (예: WO-20260223-005-01)
 
 // 자동 입력 설정
 export interface AutoFillConfig {
@@ -36,6 +37,10 @@ export interface AutoFillConfig {
   // numbering 타입용 - 기존 채번 규칙 ID를 참조
   numberingRuleId?: string; // 채번 규칙 ID (numbering_rules 테이블)
   selectedMenuObjid?: number; // 🆕 채번 규칙 선택을 위한 대상 메뉴 OBJID
+  // parentSequence 타입용
+  parentField?: string; // 메인 폼에서 부모 번호를 가져올 필드명
+  separator?: string; // 부모 번호와 순번 사이 구분자 (기본: "-")
+  sequenceLength?: number; // 순번 자릿수 (기본: 2 → 01, 02, 03)
 }
 
 // 컬럼 설정