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

40 lines
1.2 KiB
TypeScript
Raw Normal View History

feat: BLOCK DETAIL Phase 3 - pop-work-detail 컴포넌트 + 모달 캔버스 시스템 세부진행화면(4502)의 프론트엔드 구현: pop-work-detail 컴포넌트 신규 생성과 디자이너 모달 캔버스 편집을 통해, 카드 클릭 시 공정별 체크리스트/검사/실적 상세 작업 화면을 내부 모달로 표시할 수 있게 한다. [신규] pop-work-detail 컴포넌트 (4파일) - PopWorkDetailComponent: parentRow → 현재 공정 추출 → process_work_result 조회, 좌측 사이드바(PRE/IN/POST 3단계 작업항목 그룹) + 우측 체크리스트(5종: check/inspect/ input/procedure/material) + 타이머 제어(start/pause/resume) + 수량 등록 + 공정 완료 - PopWorkDetailConfig: showTimer/showQuantityInput/phaseLabels 설정 패널 - PopWorkDetailPreview: 디자이너 프리뷰 - index.tsx: PopComponentRegistry 등록 (category: display, touchOptimized) [모달 캔버스 시스템] PopDesigner.tsx 대규모 리팩토링 - handleMoveComponent/handleResizeComponent/handleRequestResize: layout 직접 참조 → setLayout(prev => ...) 함수형 업데이트로 전환 + activeCanvasId 분기: main이면 기존 로직, modal-*이면 modals 배열 내 해당 모달 수정 - PopCardListV2Config: 모달 캔버스 생성/열기 버튼 (usePopDesignerContext 연동) - PopCardListV2Component: modal-* screenId → setSharedData + __pop_modal_open__ 이벤트 - PopViewerWithModals: parentRow prop + fullscreen 모달 지원 + flex 레이아웃 [기타] - ComponentPalette: pop-work-detail 팔레트 항목 + ClipboardCheck 아이콘 - pop-layout.ts: PopComponentType에 pop-work-detail 추가, 기본 크기 38x26 - PopRenderer: COMPONENT_TYPE_LABELS에 pop-work-detail 추가 - types.ts: PopWorkDetailConfig 인터페이스 - PopCanvas.tsx: activeLayout.components 참조 수정 (모달 캔버스 호환) DB 변경 0건. 백엔드 변경 0건.
2026-03-16 10:32:58 +09:00
"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"],
});