Merge branch 'ksh-partial-quantity-flow' into ksh-v2-work

BLOCK DETAIL Phase 2~3 + 낙관적 잠금 기능을 ksh-v2-work에 통합한다.
주요 병합 내용:
- BLOCK DETAIL Phase 2: 생산 공정 관리 백엔드 API (create-work-processes, timer)
- BLOCK DETAIL Phase 3: pop-work-detail 컴포넌트 + 모달 캔버스 시스템
- 낙관적 잠금 + 소유자 기반 액션 제어 + 디자이너 설정 UI
- LOCK-OWNER 카드 비활성화 UI 누락분 반영
충돌 해결: 0건 (자동 병합 완료)

backend-node/src/app.ts

@@ -124,6 +124,7 @@ import entitySearchRoutes, {
 import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면 임베딩 및 데이터 전달
 import screenGroupRoutes from "./routes/screenGroupRoutes"; // 화면 그룹 관리
 import popActionRoutes from "./routes/popActionRoutes"; // POP 액션 실행
+import popProductionRoutes from "./routes/popProductionRoutes"; // POP 생산 관리 (공정 생성/타이머)
 import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
 import approvalRoutes from "./routes/approvalRoutes"; // 결재 시스템
 import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
@@ -259,6 +260,7 @@ app.use("/api/table-management", entityJoinRoutes); // 🎯 Entity 조인 기능
 app.use("/api/screen-management", screenManagementRoutes);
 app.use("/api/screen-groups", screenGroupRoutes); // 화면 그룹 관리
 app.use("/api/pop", popActionRoutes); // POP 액션 실행
+app.use("/api/pop/production", popProductionRoutes); // POP 생산 관리
 app.use("/api/common-codes", commonCodeRoutes);
 app.use("/api/dynamic-form", dynamicFormRoutes);
 app.use("/api/files", fileRoutes);

backend-node/src/controllers/popProductionController.ts

@@ -0,0 +1,291 @@
+import { Response } from "express";
+import { getPool } from "../database/db";
+import logger from "../utils/logger";
+import { AuthenticatedRequest } from "../middleware/authMiddleware";
+
+/**
+ * D-BE1: 작업지시 공정 일괄 생성
+ * PC에서 작업지시 생성 후 호출. 1 트랜잭션으로 work_order_process + process_work_result 일괄 생성.
+ */
+export const createWorkProcesses = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+  const client = await pool.connect();
+
+  try {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+
+    const { work_instruction_id, item_code, routing_version_id, plan_qty } =
+      req.body;
+
+    if (!work_instruction_id || !routing_version_id) {
+      return res.status(400).json({
+        success: false,
+        message:
+          "work_instruction_id와 routing_version_id는 필수입니다.",
+      });
+    }
+
+    logger.info("[pop/production] create-work-processes 요청", {
+      companyCode,
+      userId,
+      work_instruction_id,
+      item_code,
+      routing_version_id,
+      plan_qty,
+    });
+
+    await client.query("BEGIN");
+
+    // 중복 호출 방지: 이미 생성된 공정이 있는지 확인
+    const existCheck = await client.query(
+      `SELECT COUNT(*) as cnt FROM work_order_process
+       WHERE wo_id = $1 AND company_code = $2`,
+      [work_instruction_id, companyCode]
+    );
+    if (parseInt(existCheck.rows[0].cnt, 10) > 0) {
+      await client.query("ROLLBACK");
+      return res.status(409).json({
+        success: false,
+        message: "이미 공정이 생성된 작업지시입니다.",
+      });
+    }
+
+    // 1. item_routing_detail + process_mng JOIN (공정 목록 + 공정명)
+    const routingDetails = await client.query(
+      `SELECT rd.id, rd.seq_no, rd.process_code,
+              COALESCE(pm.process_name, rd.process_code) as process_name,
+              rd.is_required, rd.is_fixed_order, rd.standard_time
+       FROM item_routing_detail rd
+       LEFT JOIN process_mng pm ON pm.process_code = rd.process_code
+         AND pm.company_code = rd.company_code
+       WHERE rd.routing_version_id = $1 AND rd.company_code = $2
+       ORDER BY CAST(rd.seq_no AS int) NULLS LAST`,
+      [routing_version_id, companyCode]
+    );
+
+    if (routingDetails.rows.length === 0) {
+      await client.query("ROLLBACK");
+      return res.status(404).json({
+        success: false,
+        message: "라우팅 버전에 등록된 공정이 없습니다.",
+      });
+    }
+
+    const processes: Array<{
+      id: string;
+      seq_no: string;
+      process_name: string;
+      checklist_count: number;
+    }> = [];
+    let totalChecklists = 0;
+
+    for (const rd of routingDetails.rows) {
+      // 2. work_order_process INSERT
+      const wopResult = await client.query(
+        `INSERT INTO work_order_process (
+          company_code, wo_id, seq_no, process_code, process_name,
+          is_required, is_fixed_order, standard_time, plan_qty,
+          status, routing_detail_id, writer
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
+        RETURNING id`,
+        [
+          companyCode,
+          work_instruction_id,
+          rd.seq_no,
+          rd.process_code,
+          rd.process_name,
+          rd.is_required,
+          rd.is_fixed_order,
+          rd.standard_time,
+          plan_qty || null,
+          "waiting",
+          rd.id,
+          userId,
+        ]
+      );
+      const wopId = wopResult.rows[0].id;
+
+      // 3. process_work_result INSERT (스냅샷 복사)
+      // process_work_item + process_work_item_detail에서 해당 routing_detail의 항목 조회 후 복사
+      const snapshotResult = await client.query(
+        `INSERT INTO process_work_result (
+          company_code, work_order_process_id,
+          source_work_item_id, source_detail_id,
+          work_phase, item_title, item_sort_order,
+          detail_content, detail_type, detail_sort_order, is_required,
+          inspection_code, inspection_method, unit, lower_limit, upper_limit,
+          input_type, lookup_target, display_fields, duration_minutes,
+          status, writer
+        )
+        SELECT
+          pwi.company_code, $1,
+          pwi.id, pwd.id,
+          pwi.work_phase, pwi.title, pwi.sort_order::text,
+          pwd.content, pwd.detail_type, pwd.sort_order::text, pwd.is_required,
+          pwd.inspection_code, pwd.inspection_method, pwd.unit, pwd.lower_limit, pwd.upper_limit,
+          pwd.input_type, pwd.lookup_target, pwd.display_fields, pwd.duration_minutes::text,
+          'pending', $2
+        FROM process_work_item pwi
+        JOIN process_work_item_detail pwd ON pwd.work_item_id = pwi.id
+          AND pwd.company_code = pwi.company_code
+        WHERE pwi.routing_detail_id = $3
+          AND pwi.company_code = $4
+        ORDER BY pwi.sort_order, pwd.sort_order`,
+        [wopId, userId, rd.id, companyCode]
+      );
+
+      const checklistCount = snapshotResult.rowCount ?? 0;
+      totalChecklists += checklistCount;
+
+      processes.push({
+        id: wopId,
+        seq_no: rd.seq_no,
+        process_name: rd.process_name,
+        checklist_count: checklistCount,
+      });
+
+      logger.info("[pop/production] 공정 생성 완료", {
+        wopId,
+        processName: rd.process_name,
+        checklistCount,
+      });
+    }
+
+    await client.query("COMMIT");
+
+    logger.info("[pop/production] create-work-processes 완료", {
+      companyCode,
+      work_instruction_id,
+      total_processes: processes.length,
+      total_checklists: totalChecklists,
+    });
+
+    return res.json({
+      success: true,
+      data: {
+        processes,
+        total_processes: processes.length,
+        total_checklists: totalChecklists,
+      },
+    });
+  } catch (error: any) {
+    await client.query("ROLLBACK");
+    logger.error("[pop/production] create-work-processes 오류:", error);
+    return res.status(500).json({
+      success: false,
+      message: error.message || "공정 생성 중 오류가 발생했습니다.",
+    });
+  } finally {
+    client.release();
+  }
+};
+
+/**
+ * D-BE2: 타이머 API (시작/일시정지/재시작)
+ */
+export const controlTimer = async (
+  req: AuthenticatedRequest,
+  res: Response
+) => {
+  const pool = getPool();
+
+  try {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+
+    const { work_order_process_id, action } = req.body;
+
+    if (!work_order_process_id || !action) {
+      return res.status(400).json({
+        success: false,
+        message: "work_order_process_id와 action은 필수입니다.",
+      });
+    }
+
+    if (!["start", "pause", "resume"].includes(action)) {
+      return res.status(400).json({
+        success: false,
+        message: "action은 start, pause, resume 중 하나여야 합니다.",
+      });
+    }
+
+    logger.info("[pop/production] timer 요청", {
+      companyCode,
+      userId,
+      work_order_process_id,
+      action,
+    });
+
+    let result;
+
+    switch (action) {
+      case "start":
+        // 최초 1회만 설정, 이미 있으면 무시
+        result = await pool.query(
+          `UPDATE work_order_process
+           SET started_at = CASE WHEN started_at IS NULL THEN NOW()::text ELSE started_at END,
+               status = CASE WHEN status = 'waiting' THEN 'in_progress' ELSE status END,
+               updated_date = NOW()
+           WHERE id = $1 AND company_code = $2
+           RETURNING id, started_at, status`,
+          [work_order_process_id, companyCode]
+        );
+        break;
+
+      case "pause":
+        result = await pool.query(
+          `UPDATE work_order_process
+           SET paused_at = NOW()::text,
+               updated_date = NOW()
+           WHERE id = $1 AND company_code = $2 AND paused_at IS NULL
+           RETURNING id, paused_at`,
+          [work_order_process_id, companyCode]
+        );
+        break;
+
+      case "resume":
+        // 일시정지 시간 누적 후 paused_at 초기화
+        result = await pool.query(
+          `UPDATE work_order_process
+           SET total_paused_time = (
+             COALESCE(total_paused_time::int, 0)
+             + EXTRACT(EPOCH FROM NOW() - paused_at::timestamp)::int
+           )::text,
+           paused_at = NULL,
+           updated_date = NOW()
+           WHERE id = $1 AND company_code = $2 AND paused_at IS NOT NULL
+           RETURNING id, total_paused_time`,
+          [work_order_process_id, companyCode]
+        );
+        break;
+    }
+
+    if (!result || result.rowCount === 0) {
+      return res.status(404).json({
+        success: false,
+        message: "대상 공정을 찾을 수 없거나 현재 상태에서 수행할 수 없습니다.",
+      });
+    }
+
+    logger.info("[pop/production] timer 완료", {
+      action,
+      work_order_process_id,
+      result: result.rows[0],
+    });
+
+    return res.json({
+      success: true,
+      data: result.rows[0],
+    });
+  } catch (error: any) {
+    logger.error("[pop/production] timer 오류:", error);
+    return res.status(500).json({
+      success: false,
+      message: error.message || "타이머 처리 중 오류가 발생했습니다.",
+    });
+  }
+};

backend-node/src/routes/popActionRoutes.ts

@@ -104,6 +104,11 @@ interface TaskBody {
   manualItemField?: string;
   manualPkColumn?: string;
   cartScreenId?: string;
+  preCondition?: {
+    column: string;
+    expectedValue: string;
+    failMessage?: string;
+  };
 }
 
 function resolveStatusValue(
@@ -334,14 +339,30 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
                 const item = items[i] ?? {};
                 const resolved = resolveStatusValue("conditional", task.fixedValue ?? "", task.conditionalValue, item);
                 const autoUpdated = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
-                await client.query(
+                let condWhere = `WHERE company_code = $2 AND "${pkColumn}" = $3`;
-                  `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1${autoUpdated} WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                const condParams: unknown[] = [resolved, companyCode, lookupValues[i]];
-                  [resolved, companyCode, lookupValues[i]],
+                if (task.preCondition?.column && task.preCondition?.expectedValue) {
+                  if (!isSafeIdentifier(task.preCondition.column)) throw new Error(`유효하지 않은 preCondition 컬럼명: ${task.preCondition.column}`);
+                  condWhere += ` AND "${task.preCondition.column}" = $4`;
+                  condParams.push(task.preCondition.expectedValue);
+                }
+                const condResult = await client.query(
+                  `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1${autoUpdated} ${condWhere}`,
+                  condParams,
                 );
+                if (task.preCondition && condResult.rowCount === 0) {
+                  const err = new Error(task.preCondition.failMessage || "조건이 일치하지 않아 처리할 수 없습니다.");
+                  (err as any).isPreConditionFail = true;
+                  throw err;
+                }
                 processedCount++;
               }
             } else if (opType === "db-conditional") {
-              // DB 컬럼 간 비교 후 값 판정 (CASE WHEN col_a >= col_b THEN '완료' ELSE '진행중')
+              if (task.preCondition) {
+                logger.warn("[pop/execute-action] db-conditional에는 preCondition 미지원, 무시됨", {
+                  taskId: task.id, preCondition: task.preCondition,
+                });
+              }
               if (!task.compareColumn || !task.compareOperator || !task.compareWith) break;
               if (!isSafeIdentifier(task.compareColumn) || !isSafeIdentifier(task.compareWith)) break;
 
@@ -392,10 +413,24 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
                 }
 
                 const autoUpdatedDate = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
-                await client.query(
+                let whereSql = `WHERE company_code = $2 AND "${pkColumn}" = $3`;
-                  `UPDATE "${task.targetTable}" SET ${setSql}${autoUpdatedDate} WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                const queryParams: unknown[] = [value, companyCode, lookupValues[i]];
-                  [value, companyCode, lookupValues[i]],
+                if (task.preCondition?.column && task.preCondition?.expectedValue) {
+                  if (!isSafeIdentifier(task.preCondition.column)) {
+                    throw new Error(`유효하지 않은 preCondition 컬럼명: ${task.preCondition.column}`);
+                  }
+                  whereSql += ` AND "${task.preCondition.column}" = $4`;
+                  queryParams.push(task.preCondition.expectedValue);
+                }
+                const updateResult = await client.query(
+                  `UPDATE "${task.targetTable}" SET ${setSql}${autoUpdatedDate} ${whereSql}`,
+                  queryParams,
                 );
+                if (task.preCondition && updateResult.rowCount === 0) {
+                  const err = new Error(task.preCondition.failMessage || "조건이 일치하지 않아 처리할 수 없습니다.");
+                  (err as any).isPreConditionFail = true;
+                  throw err;
+                }
                 processedCount++;
               }
             }
@@ -746,6 +781,16 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
     });
   } catch (error: any) {
     await client.query("ROLLBACK");
+
+    if (error.isPreConditionFail) {
+      logger.warn("[pop/execute-action] preCondition 실패", { message: error.message });
+      return res.status(409).json({
+        success: false,
+        message: error.message,
+        errorCode: "PRE_CONDITION_FAIL",
+      });
+    }
+
     logger.error("[pop/execute-action] 오류:", error);
     return res.status(500).json({
       success: false,

backend-node/src/routes/popProductionRoutes.ts

@@ -0,0 +1,15 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+import {
+  createWorkProcesses,
+  controlTimer,
+} from "../controllers/popProductionController";
+
+const router = Router();
+
+router.use(authenticateToken);
+
+router.post("/create-work-processes", createWorkProcesses);
+router.post("/timer", controlTimer);
+
+export default router;

frontend/components/pop/designer/PopCanvas.tsx

@@ -403,7 +403,7 @@ export default function PopCanvas({
           // 이동 중인 컴포넌트의 현재 유효 위치에서 colSpan/rowSpan 가져오기
           // 숨김 컴포넌트는 effectivePositions에 없으므로 원본 사용
           const currentEffectivePos = effectivePositions.get(dragItem.componentId);
-          const componentData = layout.components[dragItem.componentId];
+          const componentData = activeLayout.components[dragItem.componentId];
           
           if (!currentEffectivePos && !componentData) return;
           

frontend/components/pop/designer/PopDesigner.tsx

@@ -389,97 +389,156 @@ export default function PopDesigner({
 
   const handleMoveComponent = useCallback(
     (componentId: string, newPosition: PopGridPosition) => {
-      const component = layout.components[componentId];
+      setLayout((prev) => {
-      if (!component) return;
+        if (activeCanvasId === "main") {
+          const component = prev.components[componentId];
+          if (!component) return prev;
 
-      // 기본 모드(tablet_landscape, 12칸)인 경우: 원본 position 직접 수정
           if (currentMode === "tablet_landscape") {
             const newLayout = {
-          ...layout,
+              ...prev,
               components: {
-            ...layout.components,
+                ...prev.components,
-            [componentId]: {
+                [componentId]: { ...component, position: newPosition },
-              ...component,
-              position: newPosition,
-            },
               },
             };
-        setLayout(newLayout);
             saveToHistory(newLayout);
-        setHasChanges(true);
+            return newLayout;
           } else {
-        // 다른 모드인 경우: 오버라이드에 저장
+            const currentHidden = prev.overrides?.[currentMode]?.hidden || [];
-        // 숨김 상태였던 컴포넌트를 이동하면 숨김 해제도 함께 처리
+            const newHidden = currentHidden.filter(id => id !== componentId);
-        const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
-        const isHidden = currentHidden.includes(componentId);
-        const newHidden = isHidden 
-          ? currentHidden.filter(id => id !== componentId)
-          : currentHidden;
-        
             const newLayout = {
-          ...layout,
+              ...prev,
               overrides: {
-            ...layout.overrides,
+                ...prev.overrides,
                 [currentMode]: {
-              ...layout.overrides?.[currentMode],
+                  ...prev.overrides?.[currentMode],
                   positions: {
-                ...layout.overrides?.[currentMode]?.positions,
+                    ...prev.overrides?.[currentMode]?.positions,
                     [componentId]: newPosition,
                   },
-              // 숨김 배열 업데이트 (빈 배열이면 undefined로)
                   hidden: newHidden.length > 0 ? newHidden : undefined,
                 },
               },
             };
-        setLayout(newLayout);
             saveToHistory(newLayout);
-        setHasChanges(true);
+            return newLayout;
           }
+        } else {
+          // 모달 캔버스
+          const newLayout = {
+            ...prev,
+            modals: (prev.modals || []).map(m => {
+              if (m.id !== activeCanvasId) return m;
+              const component = m.components[componentId];
+              if (!component) return m;
+
+              if (currentMode === "tablet_landscape") {
+                return {
+                  ...m,
+                  components: {
+                    ...m.components,
+                    [componentId]: { ...component, position: newPosition },
                   },
-    [layout, saveToHistory, currentMode]
+                };
+              } else {
+                const currentHidden = m.overrides?.[currentMode]?.hidden || [];
+                const newHidden = currentHidden.filter(id => id !== componentId);
+                return {
+                  ...m,
+                  overrides: {
+                    ...m.overrides,
+                    [currentMode]: {
+                      ...m.overrides?.[currentMode],
+                      positions: {
+                        ...m.overrides?.[currentMode]?.positions,
+                        [componentId]: newPosition,
+                      },
+                      hidden: newHidden.length > 0 ? newHidden : undefined,
+                    },
+                  },
+                };
+              }
+            }),
+          };
+          saveToHistory(newLayout);
+          return newLayout;
+        }
+      });
+      setHasChanges(true);
+    },
+    [saveToHistory, currentMode, activeCanvasId]
   );
 
   const handleResizeComponent = useCallback(
     (componentId: string, newPosition: PopGridPosition) => {
-      const component = layout.components[componentId];
+      setLayout((prev) => {
-      if (!component) return;
+        if (activeCanvasId === "main") {
+          const component = prev.components[componentId];
+          if (!component) return prev;
 
-      // 기본 모드(tablet_landscape, 12칸)인 경우: 원본 position 직접 수정
           if (currentMode === "tablet_landscape") {
-        const newLayout = {
+            return {
-          ...layout,
+              ...prev,
               components: {
-            ...layout.components,
+                ...prev.components,
-            [componentId]: {
+                [componentId]: { ...component, position: newPosition },
-              ...component,
-              position: newPosition,
-            },
               },
             };
-        setLayout(newLayout);
-        // 리사이즈는 드래그 중 계속 호출되므로 히스토리는 마우스업 시에만 저장
-        // 현재는 간단히 매번 저장 (최적화 가능)
-        setHasChanges(true);
           } else {
-        // 다른 모드인 경우: 오버라이드에 저장
+            return {
-        const newLayout = {
+              ...prev,
-          ...layout,
               overrides: {
-            ...layout.overrides,
+                ...prev.overrides,
                 [currentMode]: {
-              ...layout.overrides?.[currentMode],
+                  ...prev.overrides?.[currentMode],
                   positions: {
-                ...layout.overrides?.[currentMode]?.positions,
+                    ...prev.overrides?.[currentMode]?.positions,
                     [componentId]: newPosition,
                   },
                 },
               },
             };
-        setLayout(newLayout);
-        setHasChanges(true);
           }
+        } else {
+          // 모달 캔버스
+          return {
+            ...prev,
+            modals: (prev.modals || []).map(m => {
+              if (m.id !== activeCanvasId) return m;
+              const component = m.components[componentId];
+              if (!component) return m;
+
+              if (currentMode === "tablet_landscape") {
+                return {
+                  ...m,
+                  components: {
+                    ...m.components,
+                    [componentId]: { ...component, position: newPosition },
                   },
-    [layout, currentMode]
+                };
+              } else {
+                return {
+                  ...m,
+                  overrides: {
+                    ...m.overrides,
+                    [currentMode]: {
+                      ...m.overrides?.[currentMode],
+                      positions: {
+                        ...m.overrides?.[currentMode]?.positions,
+                        [componentId]: newPosition,
+                      },
+                    },
+                  },
+                };
+              }
+            }),
+          };
+        }
+      });
+      setHasChanges(true);
+    },
+    [currentMode, activeCanvasId]
   );
 
   const handleResizeEnd = useCallback(
@@ -493,51 +552,87 @@ export default function PopDesigner({
   // 컴포넌트가 자신의 rowSpan/colSpan을 동적으로 변경 요청 (CardList 확장 등)
   const handleRequestResize = useCallback(
     (componentId: string, newRowSpan: number, newColSpan?: number) => {
-      const component = layout.components[componentId];
+      setLayout((prev) => {
-      if (!component) return;
+        const buildPosition = (comp: PopComponentDefinition) => ({
-
+          ...comp.position,
-      const newPosition = {
-        ...component.position,
           rowSpan: newRowSpan,
           ...(newColSpan !== undefined ? { colSpan: newColSpan } : {}),
-      };
+        });
+
+        if (activeCanvasId === "main") {
+          const component = prev.components[componentId];
+          if (!component) return prev;
+          const newPosition = buildPosition(component);
 
-      // 기본 모드(tablet_landscape)인 경우: 원본 position 직접 수정
           if (currentMode === "tablet_landscape") {
             const newLayout = {
-          ...layout,
+              ...prev,
               components: {
-            ...layout.components,
+                ...prev.components,
-            [componentId]: {
+                [componentId]: { ...component, position: newPosition },
-              ...component,
-              position: newPosition,
-            },
               },
             };
-        setLayout(newLayout);
             saveToHistory(newLayout);
-        setHasChanges(true);
+            return newLayout;
           } else {
-        // 다른 모드인 경우: 오버라이드에 저장
             const newLayout = {
-          ...layout,
+              ...prev,
               overrides: {
-            ...layout.overrides,
+                ...prev.overrides,
                 [currentMode]: {
-              ...layout.overrides?.[currentMode],
+                  ...prev.overrides?.[currentMode],
                   positions: {
-                ...layout.overrides?.[currentMode]?.positions,
+                    ...prev.overrides?.[currentMode]?.positions,
                     [componentId]: newPosition,
                   },
                 },
               },
             };
-        setLayout(newLayout);
             saveToHistory(newLayout);
-        setHasChanges(true);
+            return newLayout;
           }
+        } else {
+          // 모달 캔버스
+          const newLayout = {
+            ...prev,
+            modals: (prev.modals || []).map(m => {
+              if (m.id !== activeCanvasId) return m;
+              const component = m.components[componentId];
+              if (!component) return m;
+              const newPosition = buildPosition(component);
+
+              if (currentMode === "tablet_landscape") {
+                return {
+                  ...m,
+                  components: {
+                    ...m.components,
+                    [componentId]: { ...component, position: newPosition },
                   },
-    [layout, currentMode, saveToHistory]
+                };
+              } else {
+                return {
+                  ...m,
+                  overrides: {
+                    ...m.overrides,
+                    [currentMode]: {
+                      ...m.overrides?.[currentMode],
+                      positions: {
+                        ...m.overrides?.[currentMode]?.positions,
+                        [componentId]: newPosition,
+                      },
+                    },
+                  },
+                };
+              }
+            }),
+          };
+          saveToHistory(newLayout);
+          return newLayout;
+        }
+      });
+      setHasChanges(true);
+    },
+    [currentMode, saveToHistory, activeCanvasId]
   );
 
   // ========================================

frontend/components/pop/designer/panels/ComponentPalette.tsx

@@ -3,7 +3,7 @@
 import { useDrag } from "react-dnd";
 import { cn } from "@/lib/utils";
 import { PopComponentType } from "../types/pop-layout";
-import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine, UserCircle, BarChart2 } from "lucide-react";
+import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine, UserCircle, BarChart2, ClipboardCheck } from "lucide-react";
 import { DND_ITEM_TYPES } from "../constants";
 
 // 컴포넌트 정의
@@ -93,6 +93,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
     icon: UserCircle,
     description: "사용자 프로필 / PC 전환 / 로그아웃",
   },
+  {
+    type: "pop-work-detail",
+    label: "작업 상세",
+    icon: ClipboardCheck,
+    description: "공정별 체크리스트/검사/실적 상세 작업 화면",
+  },
 ];
 
 // 드래그 가능한 컴포넌트 아이템

frontend/components/pop/designer/renderers/PopRenderer.tsx

@@ -84,6 +84,7 @@ const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
   "pop-field": "입력",
   "pop-scanner": "스캐너",
   "pop-profile": "프로필",
+  "pop-work-detail": "작업 상세",
 };
 
 // ========================================

frontend/components/pop/designer/types/pop-layout.ts

@@ -7,7 +7,7 @@
 /**
  * POP 컴포넌트 타입
  */
-export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile";
+export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile" | "pop-work-detail";
 
 /**
  * 데이터 흐름 정의
@@ -377,6 +377,7 @@ export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: nu
   "pop-field": { colSpan: 19, rowSpan: 6 },
   "pop-scanner": { colSpan: 2, rowSpan: 2 },
   "pop-profile": { colSpan: 2, rowSpan: 2 },
+  "pop-work-detail": { colSpan: 38, rowSpan: 26 },
 };
 
 /**

frontend/components/pop/viewer/PopViewerWithModals.tsx

@@ -42,12 +42,15 @@ interface PopViewerWithModalsProps {
   overrideGap?: number;
   /** Padding 오버라이드 */
   overridePadding?: number;
+  /** 부모 화면에서 선택된 행 데이터 (모달 내부 컴포넌트가 sharedData로 조회) */
+  parentRow?: Record<string, unknown>;
 }
 
 /** 열린 모달 상태 */
 interface OpenModal {
   definition: PopModalDefinition;
   returnTo?: string;
+  fullscreen?: boolean;
 }
 
 // ========================================
@@ -61,10 +64,17 @@ export default function PopViewerWithModals({
   currentMode,
   overrideGap,
   overridePadding,
+  parentRow,
 }: PopViewerWithModalsProps) {
   const router = useRouter();
   const [modalStack, setModalStack] = useState<OpenModal[]>([]);
-  const { subscribe, publish } = usePopEvent(screenId);
+  const { subscribe, publish, setSharedData } = usePopEvent(screenId);
+
+  useEffect(() => {
+    if (parentRow) {
+      setSharedData("parentRow", parentRow);
+    }
+  }, [parentRow, setSharedData]);
 
   // 연결 해석기: layout에 정의된 connections를 이벤트 라우팅으로 변환
   const stableConnections = useMemo(
@@ -96,6 +106,7 @@ export default function PopViewerWithModals({
         title?: string;
         mode?: string;
         returnTo?: string;
+        fullscreen?: boolean;
       };
 
       if (data?.modalId) {
@@ -104,6 +115,7 @@ export default function PopViewerWithModals({
           setModalStack(prev => [...prev, {
             definition: modalDef,
             returnTo: data.returnTo,
+            fullscreen: data.fullscreen,
           }]);
         }
       }
@@ -173,7 +185,7 @@ export default function PopViewerWithModals({
 
       {/* 모달 스택 렌더링 */}
       {modalStack.map((modal, index) => {
-        const { definition } = modal;
+        const { definition, fullscreen } = modal;
         const isTopModal = index === modalStack.length - 1;
         const closeOnOverlay = definition.frameConfig?.closeOnOverlay !== false;
         const closeOnEsc = definition.frameConfig?.closeOnEsc !== false;
@@ -185,10 +197,15 @@ export default function PopViewerWithModals({
           overrides: definition.overrides,
         };
 
+        const isFull = fullscreen || (() => {
           const detectedMode = currentMode || detectGridMode(viewportWidth);
           const modalWidth = resolveModalWidth(definition.sizeConfig, detectedMode, viewportWidth);
-        const isFull = modalWidth >= viewportWidth;
+          return modalWidth >= viewportWidth;
-        const rendererWidth = isFull ? viewportWidth : modalWidth - 32;
+        })();
+        const rendererWidth = isFull
+          ? viewportWidth
+          : resolveModalWidth(definition.sizeConfig, currentMode || detectGridMode(viewportWidth), viewportWidth) - 32;
+        const modalWidth = isFull ? viewportWidth : resolveModalWidth(definition.sizeConfig, currentMode || detectGridMode(viewportWidth), viewportWidth);
 
         return (
           <Dialog
@@ -200,7 +217,7 @@ export default function PopViewerWithModals({
           >
             <DialogContent
               className={isFull
-                ? "h-dvh max-h-dvh w-screen max-w-[100vw] overflow-auto rounded-none border-none p-0"
+                ? "flex h-dvh max-h-dvh w-screen max-w-[100vw] flex-col gap-0 overflow-hidden rounded-none border-none p-0"
                 : "max-h-[90vh] overflow-auto p-0"
               }
               style={isFull ? undefined : {
@@ -208,14 +225,13 @@ export default function PopViewerWithModals({
                 width: `${modalWidth}px`,
               }}
               onInteractOutside={(e) => {
-                // 최상위 모달이 아니면 overlay 클릭 무시 (하위 모달이 먼저 닫히는 것 방지)
                 if (!isTopModal || !closeOnOverlay) e.preventDefault();
               }}
               onEscapeKeyDown={(e) => {
                 if (!isTopModal || !closeOnEsc) e.preventDefault();
               }}
             >
-              <DialogHeader className={isFull ? "px-4 pt-3 pb-2" : "px-4 pt-4 pb-2"}>
+              <DialogHeader className={isFull ? "shrink-0 border-b px-4 py-2" : "px-4 pt-4 pb-2"}>
                 <DialogTitle className="text-base">
                   {definition.title}
                 </DialogTitle>

frontend/lib/registry/pop-components/index.ts

@@ -26,3 +26,4 @@ import "./pop-status-bar";
 import "./pop-field";
 import "./pop-scanner";
 import "./pop-profile";
+import "./pop-work-detail";

frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx

@@ -34,6 +34,7 @@ import type {
   TimelineDataSource,
   ActionButtonUpdate,
   ActionButtonClickAction,
+  QuantityInputConfig,
   StatusValueMapping,
   SelectModeConfig,
   SelectModeButtonConfig,
@@ -47,6 +48,7 @@ import { screenApi } from "@/lib/api/screen";
 import { apiClient } from "@/lib/api/client";
 import { usePopEvent } from "@/hooks/pop/usePopEvent";
 import { useCartSync } from "@/hooks/pop/useCartSync";
+import { useAuth } from "@/hooks/useAuth";
 import { NumberInputModal } from "../pop-card-list/NumberInputModal";
 import { renderCellV2 } from "./cell-renderers";
 import type { PopLayoutData } from "@/components/pop/designer/types/pop-layout";
@@ -56,6 +58,32 @@ const PopViewerWithModals = dynamic(() => import("@/components/pop/viewer/PopVie
 
 type RowData = Record<string, unknown>;
 
+function calculateMaxQty(
+  row: RowData,
+  processId: string | number | undefined,
+  cfg?: QuantityInputConfig,
+): number {
+  if (!cfg) return 999999;
+  const maxVal = cfg.maxColumn ? Number(row[cfg.maxColumn]) || 999999 : 999999;
+  if (!cfg.currentColumn) return maxVal;
+
+  const processFlow = row.__processFlow__ as Array<{
+    isCurrent: boolean;
+    processId?: string | number;
+    rawData?: Record<string, unknown>;
+  }> | undefined;
+
+  const currentProcess = processId
+    ? processFlow?.find((p) => String(p.processId) === String(processId))
+    : processFlow?.find((p) => p.isCurrent);
+
+  if (currentProcess?.rawData) {
+    const currentVal = Number(currentProcess.rawData[cfg.currentColumn]) || 0;
+    return Math.max(0, maxVal - currentVal);
+  }
+  return maxVal;
+}
+
 // cart_items 행 파싱 (pop-card-list에서 그대로 차용)
 function parseCartRow(dbRow: Record<string, unknown>): Record<string, unknown> {
   let rowData: Record<string, unknown> = {};
@@ -111,8 +139,9 @@ export function PopCardListV2Component({
   currentColSpan,
   onRequestResize,
 }: PopCardListV2ComponentProps) {
-  const { subscribe, publish } = usePopEvent(screenId || "default");
+  const { subscribe, publish, setSharedData } = usePopEvent(screenId || "default");
   const router = useRouter();
+  const { userId: currentUserId } = useAuth();
 
   const isCartListMode = config?.cartListMode?.enabled === true;
   const [inheritedConfig, setInheritedConfig] = useState<Partial<PopCardListV2Config> | null>(null);
@@ -221,6 +250,13 @@ export function PopCardListV2Component({
   const [popModalRow, setPopModalRow] = useState<RowData | null>(null);
 
   const openPopModal = useCallback(async (screenIdStr: string, row: RowData) => {
+    // 내부 모달 캔버스 (디자이너에서 생성한 modal-*)인 경우 이벤트 발행
+    if (screenIdStr.startsWith("modal-")) {
+      setSharedData("parentRow", row);
+      publish("__pop_modal_open__", { modalId: screenIdStr, fullscreen: true });
+      return;
+    }
+    // 외부 POP 화면 ID인 경우 기존 fetch 방식
     try {
       const sid = parseInt(screenIdStr, 10);
       if (isNaN(sid)) {
@@ -239,7 +275,7 @@ export function PopCardListV2Component({
     } catch {
       toast.error("POP 화면을 불러오는데 실패했습니다.");
     }
-  }, []);
+  }, [publish, setSharedData]);
 
   const handleCardSelect = useCallback((row: RowData) => {
 
@@ -469,7 +505,7 @@ export function PopCardListV2Component({
             type: "data-update" as const,
             targetTable: btnConfig.targetTable!,
             targetColumn: u.column,
-            operationType: "assign" as const,
+            operationType: (u.operationType || "assign") as "assign" | "add" | "subtract",
             valueSource: "fixed" as const,
             fixedValue: u.valueType === "static" ? (u.value ?? "") :
                         u.valueType === "currentUser" ? "__CURRENT_USER__" :
@@ -619,11 +655,28 @@ export function PopCardListV2Component({
 
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
+  const ownerSortColumn = config?.ownerSortColumn;
+
   const displayCards = useMemo(() => {
-    if (!isExpanded) return filteredRows.slice(0, visibleCardCount);
+    let source = filteredRows;
+
+    if (ownerSortColumn && currentUserId) {
+      const mine: RowData[] = [];
+      const others: RowData[] = [];
+      for (const row of source) {
+        if (String(row[ownerSortColumn] ?? "") === currentUserId) {
+          mine.push(row);
+        } else {
+          others.push(row);
+        }
+      }
+      source = [...mine, ...others];
+    }
+
+    if (!isExpanded) return source.slice(0, visibleCardCount);
     const start = (currentPage - 1) * expandedCardsPerPage;
-    return filteredRows.slice(start, start + expandedCardsPerPage);
+    return source.slice(start, start + expandedCardsPerPage);
-  }, [filteredRows, isExpanded, visibleCardCount, currentPage, expandedCardsPerPage]);
+  }, [filteredRows, isExpanded, visibleCardCount, currentPage, expandedCardsPerPage, ownerSortColumn, currentUserId]);
 
   const totalPages = isExpanded ? Math.ceil(filteredRows.length / expandedCardsPerPage) : 1;
   const needsPagination = isExpanded && totalPages > 1;
@@ -756,10 +809,17 @@ export function PopCardListV2Component({
       if (firstPending) { firstPending.isCurrent = true; }
     }
 
-    return fetchedRows.map((row) => ({
+    return fetchedRows.map((row) => {
-      ...row,
+      const steps = processMap.get(String(row.id)) || [];
-      __processFlow__: processMap.get(String(row.id)) || [],
+      const current = steps.find((s) => s.isCurrent);
-    }));
+      const processFields: Record<string, unknown> = {};
+      if (current?.rawData) {
+        for (const [key, val] of Object.entries(current.rawData)) {
+          processFields[`__process_${key}`] = val;
+        }
+      }
+      return { ...row, __processFlow__: steps, ...processFields };
+    });
   }, []);
 
   const fetchData = useCallback(async () => {
@@ -1014,7 +1074,11 @@ export function PopCardListV2Component({
             className={`min-h-0 flex-1 grid ${scrollClassName}`}
             style={{ ...cardAreaStyle, alignContent: "start", justifyContent: isHorizontalMode ? "start" : "center" }}
           >
-            {displayCards.map((row, index) => (
+            {displayCards.map((row, index) => {
+              const locked = !!ownerSortColumn
+                && !!String(row[ownerSortColumn] ?? "")
+                && String(row[ownerSortColumn] ?? "") !== (currentUserId ?? "");
+              return (
                 <CardV2
                   key={`card-${index}`}
                   row={row}
@@ -1041,8 +1105,11 @@ export function PopCardListV2Component({
                   onToggleRowSelect={() => toggleRowSelection(row)}
                   onEnterSelectMode={enterSelectMode}
                   onOpenPopModal={openPopModal}
+                  currentUserId={currentUserId}
+                  isLockedByOther={locked}
                 />
-            ))}
+              );
+            })}
           </div>
 
           {/* 선택 모드 하단 액션 바 */}
@@ -1116,6 +1183,7 @@ export function PopCardListV2Component({
                 viewportWidth={typeof window !== "undefined" ? window.innerWidth : 1024}
                 screenId={popModalScreenId}
                 currentMode={detectGridMode(typeof window !== "undefined" ? window.innerWidth : 1024)}
+                parentRow={popModalRow ?? undefined}
               />
             )}
           </div>
@@ -1148,6 +1216,8 @@ interface CardV2Props {
   onToggleRowSelect?: () => void;
   onEnterSelectMode?: (whenStatus: string, buttonConfig: Record<string, unknown>) => void;
   onOpenPopModal?: (screenId: string, row: RowData) => void;
+  currentUserId?: string;
+  isLockedByOther?: boolean;
 }
 
 function CardV2({
@@ -1155,7 +1225,7 @@ function CardV2({
   parentComponentId, isCartListMode, isSelected, onToggleSelect,
   onDeleteItem, onUpdateQuantity, onRefresh,
   selectMode, isSelectModeSelected, isSelectable, onToggleRowSelect, onEnterSelectMode,
-  onOpenPopModal,
+  onOpenPopModal, currentUserId, isLockedByOther,
 }: CardV2Props) {
   const inputField = config?.inputField;
   const cartAction = config?.cartAction;
@@ -1167,6 +1237,72 @@ function CardV2({
   const [packageEntries, setPackageEntries] = useState<PackageEntry[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const [qtyModalState, setQtyModalState] = useState<{
+    open: boolean;
+    row: RowData;
+    processId?: string | number;
+    action: ActionButtonClickAction;
+  } | null>(null);
+
+  const handleQtyConfirm = useCallback(async (value: number) => {
+    if (!qtyModalState) return;
+    const { row: actionRow, processId: qtyProcessId, action } = qtyModalState;
+    setQtyModalState(null);
+    if (!action.targetTable || !action.updates) return;
+
+    const rowId = qtyProcessId ?? actionRow.id ?? actionRow.pk;
+    if (!rowId) { toast.error("대상 레코드 ID를 찾을 수 없습니다."); return; }
+
+    const lookupValue = action.joinConfig
+      ? String(actionRow[action.joinConfig.sourceColumn] ?? rowId)
+      : rowId;
+    const lookupColumn = action.joinConfig?.targetColumn || "id";
+
+    const tasks = action.updates.map((u, idx) => ({
+      id: `qty-update-${idx}`,
+      type: "data-update" as const,
+      targetTable: action.targetTable!,
+      targetColumn: u.column,
+      operationType: (u.operationType || "assign") as "assign" | "add" | "subtract",
+      valueSource: "fixed" as const,
+      fixedValue: u.valueType === "userInput" ? String(value) :
+                  u.valueType === "static" ? (u.value ?? "") :
+                  u.valueType === "currentUser" ? "__CURRENT_USER__" :
+                  u.valueType === "currentTime" ? "__CURRENT_TIME__" :
+                  u.valueType === "columnRef" ? String(actionRow[u.value ?? ""] ?? "") :
+                  (u.value ?? ""),
+      lookupMode: "manual" as const,
+      manualItemField: lookupColumn,
+      manualPkColumn: lookupColumn,
+      ...(idx === 0 && action.preCondition ? { preCondition: action.preCondition } : {}),
+    }));
+
+    const targetRow = action.joinConfig
+      ? { ...actionRow, [lookupColumn]: lookupValue }
+      : qtyProcessId ? { ...actionRow, id: qtyProcessId } : actionRow;
+
+    try {
+      const result = await apiClient.post("/pop/execute-action", {
+        tasks,
+        data: { items: [targetRow], fieldValues: {} },
+        mappings: {},
+      });
+      if (result.data?.success) {
+        toast.success(result.data.message || "처리 완료");
+        onRefresh?.();
+      } else {
+        toast.error(result.data?.message || "처리 실패");
+      }
+    } catch (err: unknown) {
+      if ((err as any)?.response?.status === 409) {
+        toast.error((err as any).response?.data?.message || "이미 다른 사용자가 처리한 작업입니다.");
+        onRefresh?.();
+      } else {
+        toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
+      }
+    }
+  }, [qtyModalState, onRefresh]);
+
   const rowKey = keyColumnName && row[keyColumnName] ? String(row[keyColumnName]) : "";
   const isCarted = cart.isItemInCart(rowKey);
   const existingCartItem = cart.getCartItem(rowKey);
@@ -1272,16 +1408,24 @@ function CardV2({
 
   return (
     <div
-      className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
+      className={cn(
+        "relative flex flex-col rounded-lg border bg-card shadow-sm transition-all duration-150",
+        isLockedByOther
+          ? "cursor-not-allowed opacity-50"
+          : "cursor-pointer hover:shadow-md",
+        borderClass,
+      )}
       style={{ minHeight: `${spec.height}px` }}
       onClick={() => {
+        if (isLockedByOther) return;
         if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
         if (!selectMode) onSelect?.(row);
       }}
       role="button"
-      tabIndex={0}
+      tabIndex={isLockedByOther ? -1 : 0}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
+          if (isLockedByOther) return;
           if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
           if (!selectMode) onSelect?.(row);
         }
@@ -1365,7 +1509,11 @@ function CardV2({
                 }
 
                 for (const action of actionsToRun) {
-                  if (action.type === "immediate" && action.updates && action.updates.length > 0 && action.targetTable) {
+                  if (action.type === "quantity-input" && action.targetTable && action.updates) {
+                    if (action.confirmMessage && !window.confirm(action.confirmMessage)) return;
+                    setQtyModalState({ open: true, row: actionRow, processId, action });
+                    return;
+                  } else if (action.type === "immediate" && action.updates && action.updates.length > 0 && action.targetTable) {
                     if (action.confirmMessage) {
                       if (!window.confirm(action.confirmMessage)) return;
                     }
@@ -1381,7 +1529,7 @@ function CardV2({
                         type: "data-update" as const,
                         targetTable: action.targetTable!,
                         targetColumn: u.column,
-                        operationType: "assign" as const,
+                        operationType: (u.operationType || "assign") as "assign" | "add" | "subtract",
                         valueSource: "fixed" as const,
                         fixedValue: u.valueType === "static" ? (u.value ?? "") :
                                     u.valueType === "currentUser" ? "__CURRENT_USER__" :
@@ -1391,6 +1539,7 @@ function CardV2({
                         lookupMode: "manual" as const,
                         manualItemField: lookupColumn,
                         manualPkColumn: lookupColumn,
+                        ...(idx === 0 && action.preCondition ? { preCondition: action.preCondition } : {}),
                       }));
                       const targetRow = action.joinConfig
                         ? { ...actionRow, [lookupColumn]: lookupValue }
@@ -1408,7 +1557,12 @@ function CardV2({
                         return;
                       }
                     } catch (err: unknown) {
+                      if ((err as any)?.response?.status === 409) {
+                        toast.error((err as any).response?.data?.message || "이미 다른 사용자가 처리한 작업입니다.");
+                        onRefresh?.();
+                      } else {
                         toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
+                      }
                       return;
                     }
                   } else if (action.type === "modal-open" && action.modalScreenId) {
@@ -1418,6 +1572,7 @@ function CardV2({
               },
               packageEntries,
               inputUnit: inputField?.unit,
+              currentUserId,
             })}
           </div>
         ))}
@@ -1437,6 +1592,17 @@ function CardV2({
         />
       )}
 
+      {qtyModalState?.open && (
+        <NumberInputModal
+          open={true}
+          onOpenChange={(open) => { if (!open) setQtyModalState(null); }}
+          unit={qtyModalState.action.quantityInput?.unit || "EA"}
+          maxValue={calculateMaxQty(qtyModalState.row, qtyModalState.processId, qtyModalState.action.quantityInput)}
+          showPackageUnit={qtyModalState.action.quantityInput?.enablePackage ?? false}
+          onConfirm={(value) => handleQtyConfirm(value)}
+        />
+      )}
+
     </div>
   );
 }

frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Config.tsx

@@ -12,6 +12,7 @@ import { useState, useEffect, useRef, useCallback, useMemo, Fragment } from "rea
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { usePopDesignerContext } from "@/components/pop/designer/PopDesignerContext";
 import { Switch } from "@/components/ui/switch";
 import {
   Select,
@@ -65,6 +66,33 @@ import {
   type ColumnInfo,
 } from "../pop-dashboard/utils/dataFetcher";
 
+// ===== 컬럼 옵션 그룹 =====
+
+interface ColumnOptionGroup {
+  groupLabel: string;
+  options: { value: string; label: string }[];
+}
+
+function renderColumnOptionGroups(groups: ColumnOptionGroup[]) {
+  if (groups.length <= 1) {
+    return groups.flatMap((g) =>
+      g.options.map((o) => (
+        <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+      ))
+    );
+  }
+  return groups
+    .filter((g) => g.options.length > 0)
+    .map((g) => (
+      <SelectGroup key={g.groupLabel}>
+        <SelectLabel className="text-[9px] font-semibold text-muted-foreground px-2 py-1">{g.groupLabel}</SelectLabel>
+        {g.options.map((o) => (
+          <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+        ))}
+      </SelectGroup>
+    ));
+}
+
 // ===== Props =====
 
 interface ConfigPanelProps {
@@ -271,6 +299,7 @@ export function PopCardListV2ConfigPanel({ config, onUpdate }: ConfigPanelProps)
         <TabActions
           cfg={cfg}
           onUpdate={update}
+          columns={columns}
         />
       )}
     </div>
@@ -759,10 +788,36 @@ function TabCardDesign({
       sourceTable: j.targetTable,
     }))
   );
-  const allColumnOptions = [
+
-    ...availableColumns.map((c) => ({ value: c.name, label: c.name })),
+  const [processColumns, setProcessColumns] = useState<ColumnInfo[]>([]);
-    ...joinedColumns.map((c) => ({ value: c.name, label: `${c.displayName} (${c.sourceTable})` })),
+  const timelineCell = cfg.cardGrid.cells.find((c) => c.type === "timeline" && c.timelineSource?.processTable);
+  const processTableName = timelineCell?.timelineSource?.processTable || "";
+  useEffect(() => {
+    if (!processTableName) { setProcessColumns([]); return; }
+    fetchTableColumns(processTableName)
+      .then(setProcessColumns)
+      .catch(() => setProcessColumns([]));
+  }, [processTableName]);
+
+  const columnOptionGroups: ColumnOptionGroup[] = [
+    {
+      groupLabel: `메인 (${cfg.dataSource.tableName || "테이블"})`,
+      options: availableColumns.map((c) => ({ value: c.name, label: c.name })),
+    },
+    ...(joinedColumns.length > 0
+      ? [{
+          groupLabel: "조인",
+          options: joinedColumns.map((c) => ({ value: c.name, label: `${c.displayName} (${c.sourceTable})` })),
+        }]
+      : []),
+    ...(processColumns.length > 0
+      ? [{
+          groupLabel: `공정 (${processTableName})`,
+          options: processColumns.map((c) => ({ value: `__process_${c.name}`, label: c.name })),
+        }]
+      : []),
   ];
+  const allColumnOptions = columnOptionGroups.flatMap((g) => g.options);
 
   const [selectedCellId, setSelectedCellId] = useState<string | null>(null);
   const [mergeMode, setMergeMode] = useState(false);
@@ -1273,6 +1328,7 @@ function TabCardDesign({
           cell={selectedCell}
           allCells={grid.cells}
           allColumnOptions={allColumnOptions}
+          columnOptionGroups={columnOptionGroups}
           columns={columns}
           selectedColumns={selectedColumns}
           tables={tables}
@@ -1291,6 +1347,7 @@ function CellDetailEditor({
   cell,
   allCells,
   allColumnOptions,
+  columnOptionGroups,
   columns,
   selectedColumns,
   tables,
@@ -1301,6 +1358,7 @@ function CellDetailEditor({
   cell: CardCellDefinitionV2;
   allCells: CardCellDefinitionV2[];
   allColumnOptions: { value: string; label: string }[];
+  columnOptionGroups: ColumnOptionGroup[];
   columns: ColumnInfo[];
   selectedColumns: string[];
   tables: TableInfo[];
@@ -1348,9 +1406,7 @@ function CellDetailEditor({
             <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
             <SelectContent>
               <SelectItem value="none" className="text-[10px]">미지정</SelectItem>
-              {allColumnOptions.map((o) => (
+              {renderColumnOptionGroups(columnOptionGroups)}
-                <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
-              ))}
             </SelectContent>
           </Select>
         )}
@@ -1417,9 +1473,9 @@ function CellDetailEditor({
       {/* 타입별 상세 설정 */}
       {cell.type === "status-badge" && <StatusMappingEditor cell={cell} allCells={allCells} onUpdate={onUpdate} />}
       {cell.type === "timeline" && <TimelineConfigEditor cell={cell} allColumnOptions={allColumnOptions} tables={tables} onUpdate={onUpdate} />}
-      {cell.type === "action-buttons" && <ActionButtonsEditor cell={cell} allCells={allCells} allColumnOptions={allColumnOptions} availableTableOptions={availableTableOptions} onUpdate={onUpdate} />}
+      {cell.type === "action-buttons" && <ActionButtonsEditor cell={cell} allCells={allCells} allColumnOptions={allColumnOptions} columnOptionGroups={columnOptionGroups} availableTableOptions={availableTableOptions} onUpdate={onUpdate} />}
-      {cell.type === "footer-status" && <FooterStatusEditor cell={cell} allColumnOptions={allColumnOptions} onUpdate={onUpdate} />}
+      {cell.type === "footer-status" && <FooterStatusEditor cell={cell} allColumnOptions={allColumnOptions} columnOptionGroups={columnOptionGroups} onUpdate={onUpdate} />}
-      {cell.type === "field" && <FieldConfigEditor cell={cell} allColumnOptions={allColumnOptions} onUpdate={onUpdate} />}
+      {cell.type === "field" && <FieldConfigEditor cell={cell} allColumnOptions={allColumnOptions} columnOptionGroups={columnOptionGroups} onUpdate={onUpdate} />}
       {cell.type === "number-input" && (
         <div className="space-y-1">
           <span className="text-[9px] font-medium text-muted-foreground">숫자 입력 설정</span>
@@ -1429,7 +1485,7 @@ function CellDetailEditor({
               <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="제한 컬럼" /></SelectTrigger>
               <SelectContent>
                 <SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
-                {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+                {renderColumnOptionGroups(columnOptionGroups)}
               </SelectContent>
             </Select>
           </div>
@@ -1809,12 +1865,14 @@ function ActionButtonsEditor({
   cell,
   allCells,
   allColumnOptions,
+  columnOptionGroups,
   availableTableOptions,
   onUpdate,
 }: {
   cell: CardCellDefinitionV2;
   allCells: CardCellDefinitionV2[];
   allColumnOptions: { value: string; label: string }[];
+  columnOptionGroups: ColumnOptionGroup[];
   availableTableOptions: { value: string; label: string }[];
   onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
 }) {
@@ -1975,7 +2033,7 @@ function ActionButtonsEditor({
 
   const isSectionOpen = (key: string) => expandedSections[key] !== false;
 
-  const ACTION_TYPE_LABELS: Record<string, string> = { immediate: "즉시 실행", "select-mode": "선택 후 실행", "modal-open": "모달 열기" };
+  const ACTION_TYPE_LABELS: Record<string, string> = { immediate: "즉시 실행", "select-mode": "선택 후 실행", "modal-open": "모달 열기", "quantity-input": "수량 입력" };
 
   const getCondSummary = (btn: ActionButtonDef) => {
     const c = btn.showCondition;
@@ -1985,6 +2043,7 @@ function ActionButtonsEditor({
       return opt ? opt.label : (c.value || "미설정");
     }
     if (c.type === "column-value") return `${c.column || "?"} = ${c.value || "?"}`;
+    if (c.type === "owner-match") return `소유자(${c.column || "?"})`;
     return "항상";
   };
 
@@ -2081,8 +2140,21 @@ function ActionButtonsEditor({
                           <SelectItem value="always" className="text-[10px]">항상</SelectItem>
                           <SelectItem value="timeline-status" className="text-[10px]">타임라인</SelectItem>
                           <SelectItem value="column-value" className="text-[10px]">카드 컬럼</SelectItem>
+                          <SelectItem value="owner-match" className="text-[10px]">소유자 일치</SelectItem>
                         </SelectContent>
                       </Select>
+                      {condType === "owner-match" && (
+                        <Select
+                          value={btn.showCondition?.column || "__none__"}
+                          onValueChange={(v) => updateCondition(bi, { column: v === "__none__" ? "" : v })}
+                        >
+                          <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+                            {renderColumnOptionGroups(columnOptionGroups)}
+                          </SelectContent>
+                        </Select>
+                      )}
                       {condType === "timeline-status" && (
                         <Select
                           value={btn.showCondition?.value || "__none__"}
@@ -2106,9 +2178,7 @@ function ActionButtonsEditor({
                             <SelectTrigger className="h-6 w-24 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
                             <SelectContent>
                               <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
-                              {allColumnOptions.map((o) => (
+                              {renderColumnOptionGroups(columnOptionGroups)}
-                                <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
-                              ))}
                             </SelectContent>
                           </Select>
                           <Input
@@ -2168,6 +2238,7 @@ function ActionButtonsEditor({
                               <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
                               <SelectContent>
                                 <SelectItem value="immediate" className="text-[10px]">즉시 실행</SelectItem>
+                                <SelectItem value="quantity-input" className="text-[10px]">수량 입력</SelectItem>
                                 <SelectItem value="select-mode" className="text-[10px]">선택 후 실행</SelectItem>
                                 <SelectItem value="modal-open" className="text-[10px]">모달 열기</SelectItem>
                               </SelectContent>
@@ -2191,6 +2262,50 @@ function ActionButtonsEditor({
                             />
                           )}
 
+                          {aType === "quantity-input" && (
+                            <div className="space-y-1.5">
+                              <ImmediateActionEditor
+                                action={action}
+                                allColumnOptions={allColumnOptions}
+                                availableTableOptions={availableTableOptions}
+                                onAddUpdate={() => addActionUpdate(bi, ai)}
+                                onUpdateUpdate={(ui, p) => updateActionUpdate(bi, ai, ui, p)}
+                                onRemoveUpdate={(ui) => removeActionUpdate(bi, ai, ui)}
+                                onUpdateAction={(p) => updateAction(bi, ai, p)}
+                              />
+                              <div className="rounded border bg-background/50 p-1.5 space-y-1">
+                                <span className="text-[8px] font-medium text-muted-foreground">수량 모달 설정</span>
+                                <div className="flex items-center gap-1">
+                                  <span className="w-14 shrink-0 text-[8px] text-muted-foreground">최대값 컬럼</span>
+                                  <Input
+                                    value={action.quantityInput?.maxColumn || ""}
+                                    onChange={(e) => updateAction(bi, ai, { quantityInput: { ...action.quantityInput, maxColumn: e.target.value } })}
+                                    placeholder="예: qty"
+                                    className="h-6 flex-1 text-[10px]"
+                                  />
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <span className="w-14 shrink-0 text-[8px] text-muted-foreground">현재값 컬럼</span>
+                                  <Input
+                                    value={action.quantityInput?.currentColumn || ""}
+                                    onChange={(e) => updateAction(bi, ai, { quantityInput: { ...action.quantityInput, currentColumn: e.target.value } })}
+                                    placeholder="예: input_qty"
+                                    className="h-6 flex-1 text-[10px]"
+                                  />
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <span className="w-14 shrink-0 text-[8px] text-muted-foreground">단위</span>
+                                  <Input
+                                    value={action.quantityInput?.unit || ""}
+                                    onChange={(e) => updateAction(bi, ai, { quantityInput: { ...action.quantityInput, unit: e.target.value } })}
+                                    placeholder="예: EA"
+                                    className="h-6 w-20 text-[10px]"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
                           {aType === "select-mode" && (
                             <div className="space-y-1.5">
                               <div className="flex items-center justify-between">
@@ -2455,6 +2570,70 @@ function ImmediateActionEditor({
           className="h-6 flex-1 text-[10px]"
         />
       </div>
+
+      {/* 사전 조건 (중복 방지) */}
+      <div className="rounded border bg-background/50 p-1.5 space-y-1">
+        <div className="flex items-center justify-between">
+          <span className="text-[8px] font-medium text-muted-foreground">사전 조건 (중복 방지)</span>
+          <Switch
+            checked={!!action.preCondition}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                onUpdateAction({ preCondition: { column: "", expectedValue: "", failMessage: "" } });
+              } else {
+                onUpdateAction({ preCondition: undefined });
+              }
+            }}
+            className="h-3.5 w-7 [&>span]:h-2.5 [&>span]:w-2.5"
+          />
+        </div>
+        {action.preCondition && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-1">
+              <span className="w-14 shrink-0 text-[8px] text-muted-foreground">검증 컬럼</span>
+              <Select
+                value={action.preCondition.column || "__none__"}
+                onValueChange={(v) => onUpdateAction({ preCondition: { ...action.preCondition!, column: v === "__none__" ? "" : v } })}
+              >
+                <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+                  {businessCols.length > 0 && (
+                    <SelectGroup>
+                      <SelectLabel className="text-[8px] text-muted-foreground">{tableName}</SelectLabel>
+                      {businessCols.map((o) => (
+                        <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+                      ))}
+                    </SelectGroup>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="w-14 shrink-0 text-[8px] text-muted-foreground">기대값</span>
+              <Input
+                value={action.preCondition.expectedValue || ""}
+                onChange={(e) => onUpdateAction({ preCondition: { ...action.preCondition!, expectedValue: e.target.value } })}
+                placeholder="예: waiting"
+                className="h-6 flex-1 text-[10px]"
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="w-14 shrink-0 text-[8px] text-muted-foreground">실패 메시지</span>
+              <Input
+                value={action.preCondition.failMessage || ""}
+                onChange={(e) => onUpdateAction({ preCondition: { ...action.preCondition!, failMessage: e.target.value } })}
+                placeholder="이미 다른 사용자가 처리했습니다"
+                className="h-6 flex-1 text-[10px]"
+              />
+            </div>
+            <p className="text-[7px] text-muted-foreground/70 pl-0.5">
+              실행 시 해당 컬럼의 현재 DB 값이 기대값과 일치할 때만 처리됩니다
+            </p>
+          </div>
+        )}
+      </div>
+
       <div className="flex items-center justify-between">
         <span className="text-[8px] font-medium text-muted-foreground">
           변경할 컬럼{tableName ? ` (${tableName})` : ""}
@@ -2491,11 +2670,22 @@ function ImmediateActionEditor({
             <SelectTrigger className="h-6 w-20 text-[10px]"><SelectValue /></SelectTrigger>
             <SelectContent>
               <SelectItem value="static" className="text-[10px]">직접입력</SelectItem>
+              <SelectItem value="userInput" className="text-[10px]">사용자 입력</SelectItem>
               <SelectItem value="currentUser" className="text-[10px]">현재 사용자</SelectItem>
               <SelectItem value="currentTime" className="text-[10px]">현재 시간</SelectItem>
               <SelectItem value="columnRef" className="text-[10px]">컬럼 참조</SelectItem>
             </SelectContent>
           </Select>
+          {u.valueType === "userInput" && (
+            <Select value={u.operationType || "assign"} onValueChange={(v) => onUpdateUpdate(ui, { operationType: v as ActionButtonUpdate["operationType"] })}>
+              <SelectTrigger className="h-6 w-16 text-[10px]"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="assign" className="text-[10px]">대입</SelectItem>
+                <SelectItem value="add" className="text-[10px]">합산</SelectItem>
+                <SelectItem value="subtract" className="text-[10px]">차감</SelectItem>
+              </SelectContent>
+            </Select>
+          )}
           {(u.valueType === "static" || u.valueType === "columnRef") && (
             <Input
               value={u.value || ""}
@@ -2608,10 +2798,12 @@ function DbTableCombobox({
 function FooterStatusEditor({
   cell,
   allColumnOptions,
+  columnOptionGroups,
   onUpdate,
 }: {
   cell: CardCellDefinitionV2;
   allColumnOptions: { value: string; label: string }[];
+  columnOptionGroups: ColumnOptionGroup[];
   onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
 }) {
   const footerStatusMap = cell.footerStatusMap || [];
@@ -2644,7 +2836,7 @@ function FooterStatusEditor({
           <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="상태 컬럼" /></SelectTrigger>
           <SelectContent>
             <SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
-            {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+            {renderColumnOptionGroups(columnOptionGroups)}
           </SelectContent>
         </Select>
       </div>
@@ -2680,10 +2872,12 @@ function FooterStatusEditor({
 function FieldConfigEditor({
   cell,
   allColumnOptions,
+  columnOptionGroups,
   onUpdate,
 }: {
   cell: CardCellDefinitionV2;
   allColumnOptions: { value: string; label: string }[];
+  columnOptionGroups: ColumnOptionGroup[];
   onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
 }) {
   const valueType = cell.valueType || "column";
@@ -2706,7 +2900,7 @@ function FieldConfigEditor({
           <Select value={cell.formulaLeft || ""} onValueChange={(v) => onUpdate({ formulaLeft: v })}>
             <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="좌항" /></SelectTrigger>
             <SelectContent>
-              {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+              {renderColumnOptionGroups(columnOptionGroups)}
             </SelectContent>
           </Select>
           <Select value={cell.formulaOperator || "+"} onValueChange={(v) => onUpdate({ formulaOperator: v as "+" | "-" | "*" | "/" })}>
@@ -2726,7 +2920,7 @@ function FieldConfigEditor({
             <Select value={cell.formulaRight || ""} onValueChange={(v) => onUpdate({ formulaRight: v })}>
               <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="우항" /></SelectTrigger>
               <SelectContent>
-                {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+                {renderColumnOptionGroups(columnOptionGroups)}
               </SelectContent>
             </Select>
           )}
@@ -2741,16 +2935,62 @@ function FieldConfigEditor({
 function TabActions({
   cfg,
   onUpdate,
+  columns,
 }: {
   cfg: PopCardListV2Config;
   onUpdate: (partial: Partial<PopCardListV2Config>) => void;
+  columns: ColumnInfo[];
 }) {
+  const designerCtx = usePopDesignerContext();
   const overflow = cfg.overflow || { mode: "loadMore" as const, visibleCount: 6 };
   const clickAction = cfg.cardClickAction || "none";
   const modalConfig = cfg.cardClickModalConfig || { screenId: "" };
 
+  const [processColumns, setProcessColumns] = useState<ColumnInfo[]>([]);
+  const timelineCell = cfg.cardGrid?.cells?.find((c) => c.type === "timeline" && c.timelineSource?.processTable);
+  const processTableName = timelineCell?.timelineSource?.processTable || "";
+  useEffect(() => {
+    if (!processTableName) { setProcessColumns([]); return; }
+    fetchTableColumns(processTableName)
+      .then(setProcessColumns)
+      .catch(() => setProcessColumns([]));
+  }, [processTableName]);
+
+  const ownerColumnGroups: ColumnOptionGroup[] = useMemo(() => [
+    {
+      groupLabel: `메인 (${cfg.dataSource?.tableName || "테이블"})`,
+      options: columns.map((c) => ({ value: c.name, label: c.name })),
+    },
+    ...(processColumns.length > 0
+      ? [{
+          groupLabel: `공정 (${processTableName})`,
+          options: processColumns.map((c) => ({ value: `__process_${c.name}`, label: c.name })),
+        }]
+      : []),
+  ], [columns, processColumns, processTableName, cfg.dataSource?.tableName]);
+
   return (
     <div className="space-y-3">
+      {/* 소유자 우선 정렬 */}
+      <div>
+        <Label className="text-xs">소유자 우선 정렬</Label>
+        <div className="mt-1 flex items-center gap-1">
+          <Select
+            value={cfg.ownerSortColumn || "__none__"}
+            onValueChange={(v) => onUpdate({ ownerSortColumn: v === "__none__" ? undefined : v })}
+          >
+            <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="사용 안 함" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__" className="text-[10px]">사용 안 함</SelectItem>
+              {renderColumnOptionGroups(ownerColumnGroups)}
+            </SelectContent>
+          </Select>
+        </div>
+        <p className="mt-0.5 text-[9px] text-muted-foreground">
+          선택한 컬럼 값이 현재 로그인 사용자와 일치하는 카드가 맨 위에 표시됩니다
+        </p>
+      </div>
+
       {/* 카드 선택 시 */}
       <div>
         <Label className="text-xs">카드 선택 시 동작</Label>
@@ -2775,15 +3015,52 @@ function TabActions({
         </div>
         {clickAction === "modal-open" && (
           <div className="mt-2 space-y-1.5 rounded border bg-muted/20 p-2">
+            {/* 모달 캔버스 (디자이너 모드) */}
+            {designerCtx && (
+              <div>
+                {modalConfig.screenId?.startsWith("modal-") ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 w-full text-[10px]"
+                    onClick={() => designerCtx.navigateToCanvas(modalConfig.screenId)}
+                  >
+                    모달 캔버스 열기
+                  </Button>
+                ) : (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 w-full text-[10px]"
+                    onClick={() => {
+                      const selectedId = designerCtx.selectedComponentId;
+                      if (!selectedId) return;
+                      const modalId = designerCtx.createModalCanvas(
+                        selectedId,
+                        modalConfig.modalTitle || "카드 상세"
+                      );
+                      onUpdate({
+                        cardClickModalConfig: { ...modalConfig, screenId: modalId },
+                      });
+                    }}
+                  >
+                    모달 캔버스 생성
+                  </Button>
+                )}
+              </div>
+            )}
+            {/* 뷰어 모드 또는 직접 입력 폴백 */}
+            {!designerCtx && (
               <div className="flex items-center gap-1">
-              <span className="w-16 shrink-0 text-[9px] text-muted-foreground">POP 화면 ID</span>
+                <span className="w-16 shrink-0 text-[9px] text-muted-foreground">모달 ID</span>
                 <Input
                   value={modalConfig.screenId || ""}
                   onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, screenId: e.target.value } })}
-                placeholder="화면 ID (예: 4481)"
+                  placeholder="모달 ID"
                   className="h-7 flex-1 text-[10px]"
                 />
               </div>
+            )}
             <div className="flex items-center gap-1">
               <span className="w-16 shrink-0 text-[9px] text-muted-foreground">모달 제목</span>
               <Input

frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx

@@ -70,6 +70,7 @@ export interface CellRendererProps {
   onEnterSelectMode?: (whenStatus: string, buttonConfig: Record<string, unknown>) => void;
   packageEntries?: PackageEntry[];
   inputUnit?: string;
+  currentUserId?: string;
 }
 
 // ===== 메인 디스패치 =====
@@ -592,7 +593,7 @@ function TimelineCell({ cell, row }: CellRendererProps) {
 
 // ===== 11. action-buttons =====
 
-function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" | "disabled" | "hidden" {
+function evaluateShowCondition(btn: ActionButtonDef, row: RowData, currentUserId?: string): "visible" | "disabled" | "hidden" {
   const cond = btn.showCondition;
   if (!cond || cond.type === "always") return "visible";
 
@@ -603,6 +604,9 @@ function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" |
     matched = subStatus !== undefined && String(subStatus) === cond.value;
   } else if (cond.type === "column-value" && cond.column) {
     matched = String(row[cond.column] ?? "") === (cond.value ?? "");
+  } else if (cond.type === "owner-match" && cond.column) {
+    const ownerValue = String(row[cond.column] ?? "");
+    matched = !!currentUserId && ownerValue === currentUserId;
   } else {
     return "visible";
   }
@@ -611,7 +615,7 @@ function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" |
   return cond.unmatchBehavior === "disabled" ? "disabled" : "hidden";
 }
 
-function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode }: CellRendererProps) {
+function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode, currentUserId }: CellRendererProps) {
   const processFlow = row.__processFlow__ as { isCurrent: boolean; processId?: string | number }[] | undefined;
   const currentProcess = processFlow?.find((s) => s.isCurrent);
   const currentProcessId = currentProcess?.processId;
@@ -619,7 +623,7 @@ function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode }
   if (cell.actionButtons && cell.actionButtons.length > 0) {
     const evaluated = cell.actionButtons.map((btn) => ({
       btn,
-      state: evaluateShowCondition(btn, row),
+      state: evaluateShowCondition(btn, row, currentUserId),
     }));
 
     const activeBtn = evaluated.find((e) => e.state === "visible");

frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailComponent.tsx

@@ -0,0 +1,832 @@
+"use client";
+
+import React, { useEffect, useState, useMemo, useCallback } from "react";
+import {
+  Loader2, Play, Pause, CheckCircle2, AlertCircle, Timer, Package,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { dataApi } from "@/lib/api/data";
+import { apiClient } from "@/lib/api/client";
+import { usePopEvent } from "@/hooks/pop/usePopEvent";
+import { useAuth } from "@/hooks/useAuth";
+import type { PopWorkDetailConfig } from "../types";
+import type { TimelineProcessStep } from "../types";
+
+// ========================================
+// 타입
+// ========================================
+
+type RowData = Record<string, unknown>;
+
+interface WorkResultRow {
+  id: string;
+  work_order_process_id: string;
+  source_work_item_id: string;
+  source_detail_id: string;
+  work_phase: string;
+  item_title: string;
+  item_sort_order: string;
+  detail_type: string;
+  detail_label: string;
+  detail_sort_order: string;
+  spec_value: string | null;
+  lower_limit: string | null;
+  upper_limit: string | null;
+  input_type: string | null;
+  result_value: string | null;
+  status: string;
+  is_passed: string | null;
+  recorded_by: string | null;
+  recorded_at: string | null;
+}
+
+interface WorkGroup {
+  phase: string;
+  title: string;
+  itemId: string;
+  sortOrder: number;
+  total: number;
+  completed: number;
+}
+
+type WorkPhase = "PRE" | "IN" | "POST";
+const PHASE_ORDER: Record<string, number> = { PRE: 1, IN: 2, POST: 3 };
+
+interface ProcessTimerData {
+  started_at: string | null;
+  paused_at: string | null;
+  total_paused_time: string | null;
+  status: string;
+  good_qty: string | null;
+  defect_qty: string | null;
+}
+
+// ========================================
+// Props
+// ========================================
+
+interface PopWorkDetailComponentProps {
+  config?: PopWorkDetailConfig;
+  screenId?: string;
+  componentId?: string;
+  currentRowSpan?: number;
+  currentColSpan?: number;
+}
+
+// ========================================
+// 메인 컴포넌트
+// ========================================
+
+export function PopWorkDetailComponent({
+  config,
+  screenId,
+  componentId,
+}: PopWorkDetailComponentProps) {
+  const { getSharedData } = usePopEvent(screenId || "default");
+  const { user } = useAuth();
+
+  const cfg: PopWorkDetailConfig = {
+    showTimer: config?.showTimer ?? true,
+    showQuantityInput: config?.showQuantityInput ?? true,
+    phaseLabels: config?.phaseLabels ?? { PRE: "작업 전", IN: "작업 중", POST: "작업 후" },
+  };
+
+  // parentRow에서 현재 공정 정보 추출
+  const parentRow = getSharedData<RowData>("parentRow");
+  const processFlow = parentRow?.__processFlow__ as TimelineProcessStep[] | undefined;
+  const currentProcess = processFlow?.find((p) => p.isCurrent);
+  const workOrderProcessId = currentProcess?.processId
+    ? String(currentProcess.processId)
+    : undefined;
+  const processName = currentProcess?.processName ?? "공정 상세";
+
+  // ========================================
+  // 상태
+  // ========================================
+
+  const [allResults, setAllResults] = useState<WorkResultRow[]>([]);
+  const [processData, setProcessData] = useState<ProcessTimerData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [tick, setTick] = useState(Date.now());
+  const [savingIds, setSavingIds] = useState<Set<string>>(new Set());
+
+  // 수량 입력 로컬 상태
+  const [goodQty, setGoodQty] = useState("");
+  const [defectQty, setDefectQty] = useState("");
+
+  // ========================================
+  // D-FE1: 데이터 로드
+  // ========================================
+
+  const fetchData = useCallback(async () => {
+    if (!workOrderProcessId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      const [resultRes, processRes] = await Promise.all([
+        dataApi.getTableData("process_work_result", {
+          size: 500,
+          filters: { work_order_process_id: workOrderProcessId },
+        }),
+        dataApi.getTableData("work_order_process", {
+          size: 1,
+          filters: { id: workOrderProcessId },
+        }),
+      ]);
+
+      setAllResults((resultRes.data ?? []) as unknown as WorkResultRow[]);
+
+      const proc = (processRes.data?.[0] ?? null) as ProcessTimerData | null;
+      setProcessData(proc);
+      if (proc) {
+        setGoodQty(proc.good_qty ?? "");
+        setDefectQty(proc.defect_qty ?? "");
+      }
+    } catch {
+      toast.error("데이터를 불러오는데 실패했습니다.");
+    } finally {
+      setLoading(false);
+    }
+  }, [workOrderProcessId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ========================================
+  // D-FE2: 좌측 사이드바 - 작업항목 그룹핑
+  // ========================================
+
+  const groups = useMemo<WorkGroup[]>(() => {
+    const map = new Map<string, WorkGroup>();
+    for (const row of allResults) {
+      const key = row.source_work_item_id;
+      if (!map.has(key)) {
+        map.set(key, {
+          phase: row.work_phase,
+          title: row.item_title,
+          itemId: key,
+          sortOrder: parseInt(row.item_sort_order || "0", 10),
+          total: 0,
+          completed: 0,
+        });
+      }
+      const g = map.get(key)!;
+      g.total++;
+      if (row.status === "completed") g.completed++;
+    }
+    return Array.from(map.values()).sort(
+      (a, b) =>
+        (PHASE_ORDER[a.phase] ?? 9) - (PHASE_ORDER[b.phase] ?? 9) ||
+        a.sortOrder - b.sortOrder
+    );
+  }, [allResults]);
+
+  // phase별로 그룹핑
+  const groupsByPhase = useMemo(() => {
+    const result: Record<string, WorkGroup[]> = {};
+    for (const g of groups) {
+      if (!result[g.phase]) result[g.phase] = [];
+      result[g.phase].push(g);
+    }
+    return result;
+  }, [groups]);
+
+  // 첫 그룹 자동 선택
+  useEffect(() => {
+    if (groups.length > 0 && !selectedGroupId) {
+      setSelectedGroupId(groups[0].itemId);
+    }
+  }, [groups, selectedGroupId]);
+
+  // ========================================
+  // D-FE3: 우측 체크리스트
+  // ========================================
+
+  const currentItems = useMemo(
+    () =>
+      allResults
+        .filter((r) => r.source_work_item_id === selectedGroupId)
+        .sort((a, b) => parseInt(a.detail_sort_order || "0", 10) - parseInt(b.detail_sort_order || "0", 10)),
+    [allResults, selectedGroupId]
+  );
+
+  const saveResultValue = useCallback(
+    async (
+      rowId: string,
+      resultValue: string,
+      isPassed: string | null,
+      newStatus: string
+    ) => {
+      setSavingIds((prev) => new Set(prev).add(rowId));
+      try {
+        await apiClient.post("/pop/execute-action", {
+          tasks: [
+            { type: "data-update", targetTable: "process_work_result", targetColumn: "result_value", value: resultValue, items: [{ id: rowId }] },
+            { type: "data-update", targetTable: "process_work_result", targetColumn: "status", value: newStatus, items: [{ id: rowId }] },
+            ...(isPassed !== null
+              ? [{ type: "data-update", targetTable: "process_work_result", targetColumn: "is_passed", value: isPassed, items: [{ id: rowId }] }]
+              : []),
+            { type: "data-update", targetTable: "process_work_result", targetColumn: "recorded_by", value: user?.userId ?? "", items: [{ id: rowId }] },
+            { type: "data-update", targetTable: "process_work_result", targetColumn: "recorded_at", value: new Date().toISOString(), items: [{ id: rowId }] },
+          ],
+          data: { items: [{ id: rowId }], fieldValues: {} },
+        });
+
+        setAllResults((prev) =>
+          prev.map((r) =>
+            r.id === rowId
+              ? {
+                  ...r,
+                  result_value: resultValue,
+                  status: newStatus,
+                  is_passed: isPassed,
+                  recorded_by: user?.userId ?? null,
+                  recorded_at: new Date().toISOString(),
+                }
+              : r
+          )
+        );
+      } catch {
+        toast.error("저장에 실패했습니다.");
+      } finally {
+        setSavingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(rowId);
+          return next;
+        });
+      }
+    },
+    [user?.userId]
+  );
+
+  // ========================================
+  // D-FE4: 타이머
+  // ========================================
+
+  useEffect(() => {
+    if (!cfg.showTimer || !processData?.started_at) return;
+    const id = setInterval(() => setTick(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [cfg.showTimer, processData?.started_at]);
+
+  const elapsedMs = useMemo(() => {
+    if (!processData?.started_at) return 0;
+    const now = tick;
+    const totalMs = now - new Date(processData.started_at).getTime();
+    const pausedSec = parseInt(processData.total_paused_time || "0", 10);
+    const currentPauseMs = processData.paused_at
+      ? now - new Date(processData.paused_at).getTime()
+      : 0;
+    return Math.max(0, totalMs - pausedSec * 1000 - currentPauseMs);
+  }, [processData?.started_at, processData?.paused_at, processData?.total_paused_time, tick]);
+
+  const formattedTime = useMemo(() => {
+    const totalSec = Math.floor(elapsedMs / 1000);
+    const h = String(Math.floor(totalSec / 3600)).padStart(2, "0");
+    const m = String(Math.floor((totalSec % 3600) / 60)).padStart(2, "0");
+    const s = String(totalSec % 60).padStart(2, "0");
+    return `${h}:${m}:${s}`;
+  }, [elapsedMs]);
+
+  const isPaused = !!processData?.paused_at;
+  const isStarted = !!processData?.started_at;
+
+  const handleTimerAction = useCallback(
+    async (action: "start" | "pause" | "resume") => {
+      if (!workOrderProcessId) return;
+      try {
+        await apiClient.post("/api/pop/production/timer", {
+          workOrderProcessId,
+          action,
+        });
+        // 타이머 상태 새로고침
+        const res = await dataApi.getTableData("work_order_process", {
+          size: 1,
+          filters: { id: workOrderProcessId },
+        });
+        const proc = (res.data?.[0] ?? null) as ProcessTimerData | null;
+        if (proc) setProcessData(proc);
+      } catch {
+        toast.error("타이머 제어에 실패했습니다.");
+      }
+    },
+    [workOrderProcessId]
+  );
+
+  // ========================================
+  // D-FE5: 수량 등록 + 완료
+  // ========================================
+
+  const handleQuantityRegister = useCallback(async () => {
+    if (!workOrderProcessId) return;
+    try {
+      await apiClient.post("/pop/execute-action", {
+        tasks: [
+          { type: "data-update", targetTable: "work_order_process", targetColumn: "good_qty", value: goodQty || "0", items: [{ id: workOrderProcessId }] },
+          { type: "data-update", targetTable: "work_order_process", targetColumn: "defect_qty", value: defectQty || "0", items: [{ id: workOrderProcessId }] },
+        ],
+        data: { items: [{ id: workOrderProcessId }], fieldValues: {} },
+      });
+      toast.success("수량이 등록되었습니다.");
+    } catch {
+      toast.error("수량 등록에 실패했습니다.");
+    }
+  }, [workOrderProcessId, goodQty, defectQty]);
+
+  const handleProcessComplete = useCallback(async () => {
+    if (!workOrderProcessId) return;
+    try {
+      await apiClient.post("/pop/execute-action", {
+        tasks: [
+          { type: "data-update", targetTable: "work_order_process", targetColumn: "status", value: "completed", items: [{ id: workOrderProcessId }] },
+          { type: "data-update", targetTable: "work_order_process", targetColumn: "completed_at", value: new Date().toISOString(), items: [{ id: workOrderProcessId }] },
+        ],
+        data: { items: [{ id: workOrderProcessId }], fieldValues: {} },
+      });
+      toast.success("공정이 완료되었습니다.");
+      setProcessData((prev) =>
+        prev ? { ...prev, status: "completed" } : prev
+      );
+    } catch {
+      toast.error("공정 완료 처리에 실패했습니다.");
+    }
+  }, [workOrderProcessId]);
+
+  // ========================================
+  // 안전 장치
+  // ========================================
+
+  if (!parentRow) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        <AlertCircle className="mr-2 h-4 w-4" />
+        카드를 선택해주세요
+      </div>
+    );
+  }
+
+  if (!workOrderProcessId) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        <AlertCircle className="mr-2 h-4 w-4" />
+        공정 정보를 찾을 수 없습니다
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (allResults.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        <AlertCircle className="mr-2 h-4 w-4" />
+        작업기준이 등록되지 않았습니다
+      </div>
+    );
+  }
+
+  const isProcessCompleted = processData?.status === "completed";
+
+  // ========================================
+  // 렌더링
+  // ========================================
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between border-b px-3 py-2">
+        <h3 className="text-sm font-semibold">{processName}</h3>
+        {cfg.showTimer && (
+          <div className="flex items-center gap-2">
+            <Timer className="h-4 w-4 text-muted-foreground" />
+            <span className="font-mono text-sm font-medium tabular-nums">
+              {formattedTime}
+            </span>
+            {!isProcessCompleted && (
+              <>
+                {!isStarted && (
+                  <Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("start")}>
+                    <Play className="mr-1 h-3 w-3" />
+                    시작
+                  </Button>
+                )}
+                {isStarted && !isPaused && (
+                  <Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("pause")}>
+                    <Pause className="mr-1 h-3 w-3" />
+                    정지
+                  </Button>
+                )}
+                {isStarted && isPaused && (
+                  <Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("resume")}>
+                    <Play className="mr-1 h-3 w-3" />
+                    재개
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 본문: 좌측 사이드바 + 우측 체크리스트 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 좌측 사이드바 */}
+        <div className="w-40 shrink-0 overflow-y-auto border-r bg-muted/30">
+          {(["PRE", "IN", "POST"] as WorkPhase[]).map((phase) => {
+            const phaseGroups = groupsByPhase[phase];
+            if (!phaseGroups || phaseGroups.length === 0) return null;
+            return (
+              <div key={phase}>
+                <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase text-muted-foreground">
+                  {cfg.phaseLabels[phase] ?? phase}
+                </div>
+                {phaseGroups.map((g) => (
+                  <button
+                    key={g.itemId}
+                    className={cn(
+                      "flex w-full flex-col px-3 py-1.5 text-left transition-colors",
+                      selectedGroupId === g.itemId
+                        ? "bg-primary/10 text-primary"
+                        : "hover:bg-muted/60"
+                    )}
+                    onClick={() => setSelectedGroupId(g.itemId)}
+                  >
+                    <span className="text-xs font-medium leading-tight">
+                      {g.title}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {g.completed}/{g.total} 완료
+                    </span>
+                  </button>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* 우측 체크리스트 */}
+        <div className="flex-1 overflow-y-auto p-3">
+          {selectedGroupId && (
+            <div className="space-y-2">
+              {currentItems.map((item) => (
+                <ChecklistItem
+                  key={item.id}
+                  item={item}
+                  saving={savingIds.has(item.id)}
+                  disabled={isProcessCompleted}
+                  onSave={saveResultValue}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 하단: 수량 입력 + 완료 */}
+      {cfg.showQuantityInput && (
+        <div className="flex items-center gap-2 border-t px-3 py-2">
+          <Package className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-muted-foreground">양품</span>
+            <Input
+              type="number"
+              className="h-7 w-20 text-xs"
+              value={goodQty}
+              onChange={(e) => setGoodQty(e.target.value)}
+              disabled={isProcessCompleted}
+            />
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-muted-foreground">불량</span>
+            <Input
+              type="number"
+              className="h-7 w-20 text-xs"
+              value={defectQty}
+              onChange={(e) => setDefectQty(e.target.value)}
+              disabled={isProcessCompleted}
+            />
+          </div>
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-7 text-xs"
+            onClick={handleQuantityRegister}
+            disabled={isProcessCompleted}
+          >
+            수량 등록
+          </Button>
+          <div className="flex-1" />
+          {!isProcessCompleted && (
+            <Button
+              size="sm"
+              variant="default"
+              className="h-7 text-xs"
+              onClick={handleProcessComplete}
+            >
+              <CheckCircle2 className="mr-1 h-3 w-3" />
+              공정 완료
+            </Button>
+          )}
+          {isProcessCompleted && (
+            <Badge variant="outline" className="text-xs text-green-600">
+              완료됨
+            </Badge>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ========================================
+// 체크리스트 개별 항목
+// ========================================
+
+interface ChecklistItemProps {
+  item: WorkResultRow;
+  saving: boolean;
+  disabled: boolean;
+  onSave: (
+    rowId: string,
+    resultValue: string,
+    isPassed: string | null,
+    newStatus: string
+  ) => void;
+}
+
+function ChecklistItem({ item, saving, disabled, onSave }: ChecklistItemProps) {
+  const isSaving = saving;
+  const isDisabled = disabled || isSaving;
+
+  switch (item.detail_type) {
+    case "check":
+      return <CheckItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
+    case "inspect":
+      return <InspectItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
+    case "input":
+      return <InputItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
+    case "procedure":
+      return <ProcedureItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
+    case "material":
+      return <MaterialItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
+    default:
+      return (
+        <div className="rounded border p-2 text-xs text-muted-foreground">
+          알 수 없는 유형: {item.detail_type}
+        </div>
+      );
+  }
+}
+
+// ===== check: 체크박스 =====
+
+function CheckItem({
+  item,
+  disabled,
+  saving,
+  onSave,
+}: {
+  item: WorkResultRow;
+  disabled: boolean;
+  saving: boolean;
+  onSave: ChecklistItemProps["onSave"];
+}) {
+  const checked = item.result_value === "Y";
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 rounded border px-3 py-2",
+        item.status === "completed" && "bg-green-50 border-green-200"
+      )}
+    >
+      <Checkbox
+        checked={checked}
+        disabled={disabled}
+        onCheckedChange={(v) => {
+          const val = v ? "Y" : "N";
+          onSave(item.id, val, v ? "Y" : "N", v ? "completed" : "pending");
+        }}
+      />
+      <span className="flex-1 text-xs">{item.detail_label}</span>
+      {saving && <Loader2 className="h-3 w-3 animate-spin" />}
+      {item.status === "completed" && !saving && (
+        <Badge variant="outline" className="text-[10px] text-green-600">
+          완료
+        </Badge>
+      )}
+    </div>
+  );
+}
+
+// ===== inspect: 측정값 입력 (범위 판정) =====
+
+function InspectItem({
+  item,
+  disabled,
+  saving,
+  onSave,
+}: {
+  item: WorkResultRow;
+  disabled: boolean;
+  saving: boolean;
+  onSave: ChecklistItemProps["onSave"];
+}) {
+  const [inputVal, setInputVal] = useState(item.result_value ?? "");
+  const lower = parseFloat(item.lower_limit ?? "");
+  const upper = parseFloat(item.upper_limit ?? "");
+  const hasRange = !isNaN(lower) && !isNaN(upper);
+
+  const handleBlur = () => {
+    if (!inputVal || disabled) return;
+    const numVal = parseFloat(inputVal);
+    let passed: string | null = null;
+    if (hasRange) {
+      passed = numVal >= lower && numVal <= upper ? "Y" : "N";
+    }
+    onSave(item.id, inputVal, passed, "completed");
+  };
+
+  const isPassed = item.is_passed;
+
+  return (
+    <div
+      className={cn(
+        "rounded border px-3 py-2",
+        isPassed === "Y" && "bg-green-50 border-green-200",
+        isPassed === "N" && "bg-red-50 border-red-200"
+      )}
+    >
+      <div className="mb-1 flex items-center justify-between">
+        <span className="text-xs font-medium">{item.detail_label}</span>
+        {hasRange && (
+          <span className="text-[10px] text-muted-foreground">
+            기준: {item.lower_limit} ~ {item.upper_limit}
+            {item.spec_value ? ` (표준: ${item.spec_value})` : ""}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <Input
+          type="number"
+          className="h-7 w-28 text-xs"
+          value={inputVal}
+          onChange={(e) => setInputVal(e.target.value)}
+          onBlur={handleBlur}
+          disabled={disabled}
+          placeholder="측정값 입력"
+        />
+        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
+        {isPassed === "Y" && !saving && (
+          <Badge variant="outline" className="text-[10px] text-green-600">합격</Badge>
+        )}
+        {isPassed === "N" && !saving && (
+          <Badge variant="outline" className="text-[10px] text-red-600">불합격</Badge>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ===== input: 자유 입력 =====
+
+function InputItem({
+  item,
+  disabled,
+  saving,
+  onSave,
+}: {
+  item: WorkResultRow;
+  disabled: boolean;
+  saving: boolean;
+  onSave: ChecklistItemProps["onSave"];
+}) {
+  const [inputVal, setInputVal] = useState(item.result_value ?? "");
+  const inputType = item.input_type === "number" ? "number" : "text";
+
+  const handleBlur = () => {
+    if (!inputVal || disabled) return;
+    onSave(item.id, inputVal, null, "completed");
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded border px-3 py-2",
+        item.status === "completed" && "bg-green-50 border-green-200"
+      )}
+    >
+      <div className="mb-1 text-xs font-medium">{item.detail_label}</div>
+      <div className="flex items-center gap-2">
+        <Input
+          type={inputType}
+          className="h-7 flex-1 text-xs"
+          value={inputVal}
+          onChange={(e) => setInputVal(e.target.value)}
+          onBlur={handleBlur}
+          disabled={disabled}
+          placeholder="값 입력"
+        />
+        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
+      </div>
+    </div>
+  );
+}
+
+// ===== procedure: 절차 확인 (읽기 전용 + 체크) =====
+
+function ProcedureItem({
+  item,
+  disabled,
+  saving,
+  onSave,
+}: {
+  item: WorkResultRow;
+  disabled: boolean;
+  saving: boolean;
+  onSave: ChecklistItemProps["onSave"];
+}) {
+  const checked = item.result_value === "Y";
+  return (
+    <div
+      className={cn(
+        "rounded border px-3 py-2",
+        item.status === "completed" && "bg-green-50 border-green-200"
+      )}
+    >
+      <div className="mb-1 text-xs text-muted-foreground">
+        {item.spec_value || item.detail_label}
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox
+          checked={checked}
+          disabled={disabled}
+          onCheckedChange={(v) => {
+            onSave(item.id, v ? "Y" : "N", null, v ? "completed" : "pending");
+          }}
+        />
+        <span className="text-xs">확인</span>
+        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
+      </div>
+    </div>
+  );
+}
+
+// ===== material: 자재/LOT 입력 =====
+
+function MaterialItem({
+  item,
+  disabled,
+  saving,
+  onSave,
+}: {
+  item: WorkResultRow;
+  disabled: boolean;
+  saving: boolean;
+  onSave: ChecklistItemProps["onSave"];
+}) {
+  const [inputVal, setInputVal] = useState(item.result_value ?? "");
+
+  const handleBlur = () => {
+    if (!inputVal || disabled) return;
+    onSave(item.id, inputVal, null, "completed");
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded border px-3 py-2",
+        item.status === "completed" && "bg-green-50 border-green-200"
+      )}
+    >
+      <div className="mb-1 text-xs font-medium">{item.detail_label}</div>
+      <div className="flex items-center gap-2">
+        <Input
+          className="h-7 flex-1 text-xs"
+          value={inputVal}
+          onChange={(e) => setInputVal(e.target.value)}
+          onBlur={handleBlur}
+          disabled={disabled}
+          placeholder="LOT 번호 입력"
+        />
+        {saving && <Loader2 className="h-3 w-3 animate-spin" />}
+      </div>
+    </div>
+  );
+}

frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailConfig.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
+import type { PopWorkDetailConfig } from "../types";
+
+interface PopWorkDetailConfigPanelProps {
+  config?: PopWorkDetailConfig;
+  onChange?: (config: PopWorkDetailConfig) => void;
+}
+
+const DEFAULT_PHASE_LABELS: Record<string, string> = {
+  PRE: "작업 전",
+  IN: "작업 중",
+  POST: "작업 후",
+};
+
+export function PopWorkDetailConfigPanel({
+  config,
+  onChange,
+}: PopWorkDetailConfigPanelProps) {
+  const cfg: PopWorkDetailConfig = {
+    showTimer: config?.showTimer ?? true,
+    showQuantityInput: config?.showQuantityInput ?? true,
+    phaseLabels: config?.phaseLabels ?? { ...DEFAULT_PHASE_LABELS },
+  };
+
+  const update = (partial: Partial<PopWorkDetailConfig>) => {
+    onChange?.({ ...cfg, ...partial });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Label className="text-xs sm:text-sm">타이머 표시</Label>
+        <Switch
+          checked={cfg.showTimer}
+          onCheckedChange={(v) => update({ showTimer: v })}
+        />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Label className="text-xs sm:text-sm">수량 입력 표시</Label>
+        <Switch
+          checked={cfg.showQuantityInput}
+          onCheckedChange={(v) => update({ showQuantityInput: v })}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs sm:text-sm">단계 라벨</Label>
+        {(["PRE", "IN", "POST"] as const).map((phase) => (
+          <div key={phase} className="flex items-center gap-2">
+            <span className="w-12 text-xs font-medium text-muted-foreground">
+              {phase}
+            </span>
+            <Input
+              className="h-8 text-xs"
+              value={cfg.phaseLabels[phase] ?? DEFAULT_PHASE_LABELS[phase]}
+              onChange={(e) =>
+                update({
+                  phaseLabels: { ...cfg.phaseLabels, [phase]: e.target.value },
+                })
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/lib/registry/pop-components/pop-work-detail/PopWorkDetailPreview.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ClipboardCheck } from "lucide-react";
+import type { PopWorkDetailConfig } from "../types";
+
+interface PopWorkDetailPreviewProps {
+  config?: PopWorkDetailConfig;
+}
+
+export function PopWorkDetailPreviewComponent({ config }: PopWorkDetailPreviewProps) {
+  const labels = config?.phaseLabels ?? { PRE: "작업 전", IN: "작업 중", POST: "작업 후" };
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
+      <ClipboardCheck className="h-6 w-6 text-muted-foreground" />
+      <span className="text-[10px] font-medium text-muted-foreground">
+        작업 상세
+      </span>
+      <div className="flex gap-1">
+        {Object.values(labels).map((l) => (
+          <span
+            key={l}
+            className="rounded bg-muted/60 px-1.5 py-0.5 text-[8px] text-muted-foreground"
+          >
+            {l}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/lib/registry/pop-components/pop-work-detail/index.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { PopComponentRegistry } from "../../PopComponentRegistry";
+import { PopWorkDetailComponent } from "./PopWorkDetailComponent";
+import { PopWorkDetailConfigPanel } from "./PopWorkDetailConfig";
+import { PopWorkDetailPreviewComponent } from "./PopWorkDetailPreview";
+import type { PopWorkDetailConfig } from "../types";
+
+const defaultConfig: PopWorkDetailConfig = {
+  showTimer: true,
+  showQuantityInput: true,
+  phaseLabels: { PRE: "작업 전", IN: "작업 중", POST: "작업 후" },
+};
+
+PopComponentRegistry.registerComponent({
+  id: "pop-work-detail",
+  name: "작업 상세",
+  description: "공정별 체크리스트/검사/실적 상세 작업 화면",
+  category: "display",
+  icon: "ClipboardCheck",
+  component: PopWorkDetailComponent,
+  configPanel: PopWorkDetailConfigPanel,
+  preview: PopWorkDetailPreviewComponent,
+  defaultProps: defaultConfig,
+  connectionMeta: {
+    sendable: [
+      {
+        key: "process_completed",
+        label: "공정 완료",
+        type: "event",
+        category: "event",
+        description: "공정 작업 전체 완료 이벤트",
+      },
+    ],
+    receivable: [],
+  },
+  touchOptimized: true,
+  supportedDevices: ["mobile", "tablet"],
+});

frontend/lib/registry/pop-components/types.ts

@@ -851,7 +851,8 @@ export interface CardCellDefinitionV2 {
 export interface ActionButtonUpdate {
   column: string;
   value?: string;
-  valueType: "static" | "currentUser" | "currentTime" | "columnRef";
+  valueType: "static" | "currentUser" | "currentTime" | "columnRef" | "userInput";
+  operationType?: "assign" | "add" | "subtract";
 }
 
 // 액션 버튼 클릭 시 동작 모드
@@ -881,34 +882,49 @@ export interface SelectModeConfig {
 export interface SelectModeButtonConfig {
   label: string;
   variant: ButtonVariant;
-  clickMode: "status-change" | "modal-open" | "cancel-select";
+  clickMode: "status-change" | "modal-open" | "cancel-select" | "quantity-input";
   targetTable?: string;
   updates?: ActionButtonUpdate[];
   confirmMessage?: string;
   modalScreenId?: string;
+  quantityInput?: QuantityInputConfig;
 }
 
 // ===== 버튼 중심 구조 (신규) =====
 
 export interface ActionButtonShowCondition {
-  type: "timeline-status" | "column-value" | "always";
+  type: "timeline-status" | "column-value" | "always" | "owner-match";
   value?: string;
   column?: string;
   unmatchBehavior?: "hidden" | "disabled";
 }
 
 export interface ActionButtonClickAction {
-  type: "immediate" | "select-mode" | "modal-open";
+  type: "immediate" | "select-mode" | "modal-open" | "quantity-input";
   targetTable?: string;
   updates?: ActionButtonUpdate[];
   confirmMessage?: string;
   selectModeButtons?: SelectModeButtonConfig[];
   modalScreenId?: string;
-  // 외부 테이블 조인 설정 (DB 직접 선택 시)
   joinConfig?: {
-    sourceColumn: string;   // 메인 테이블의 FK 컬럼
+    sourceColumn: string;
-    targetColumn: string;   // 외부 테이블의 매칭 컬럼
+    targetColumn: string;
   };
+  quantityInput?: QuantityInputConfig;
+  preCondition?: ActionPreCondition;
+}
+
+export interface QuantityInputConfig {
+  maxColumn?: string;
+  currentColumn?: string;
+  unit?: string;
+  enablePackage?: boolean;
+}
+
+export interface ActionPreCondition {
+  column: string;
+  expectedValue: string;
+  failMessage?: string;
 }
 
 export interface ActionButtonDef {
@@ -976,6 +992,7 @@ export interface PopCardListV2Config {
   cartAction?: CardCartActionConfig;
   cartListMode?: CartListModeConfig;
   saveMapping?: CardListSaveMapping;
+  ownerSortColumn?: string;
 }
 
 /** 카드 컴포넌트가 하위 필터 적용 시 주입하는 가상 컬럼 키 */
@@ -983,3 +1000,14 @@ export const VIRTUAL_SUB_STATUS = "__subStatus__" as const;
 export const VIRTUAL_SUB_SEMANTIC = "__subSemantic__" as const;
 export const VIRTUAL_SUB_PROCESS = "__subProcessName__" as const;
 export const VIRTUAL_SUB_SEQ = "__subSeqNo__" as const;
+
+
+// =============================================
+// pop-work-detail 전용 타입
+// =============================================
+
+export interface PopWorkDetailConfig {
+  showTimer: boolean;
+  showQuantityInput: boolean;
+  phaseLabels: Record<string, string>;
+}