From d2869523924eb6486e5187c2f4fd903e0a6692f4 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sun, 26 Jul 2026 01:46:55 +0900 Subject: [PATCH] feat(wbs): expand full 52-section component & 11-template WBS roadmap and implement core Sprint 1-2 components --- docs/ROADMAP_ENTERPRISE_TEMPLATES_WBS.md | 101 +++++++++++------- .../business-composites/AISuggestedField.vue | 41 +++++++ .../components/domain-fields/BarcodeInput.vue | 61 +++++++++++ .../components/domain-fields/MoneyField.vue | 72 +++++++++++++ .../src/components/fields/DateField.vue | 59 ++++++++++ .../src/components/fields/NumberField.vue | 59 ++++++++++ .../src/views/templates/TplList01View.vue | 64 +++++++++++ 7 files changed, 416 insertions(+), 41 deletions(-) create mode 100644 src/frontend/src/components/business-composites/AISuggestedField.vue create mode 100644 src/frontend/src/components/domain-fields/BarcodeInput.vue create mode 100644 src/frontend/src/components/domain-fields/MoneyField.vue create mode 100644 src/frontend/src/components/fields/DateField.vue create mode 100644 src/frontend/src/components/fields/NumberField.vue create mode 100644 src/frontend/src/views/templates/TplList01View.vue diff --git a/docs/ROADMAP_ENTERPRISE_TEMPLATES_WBS.md b/docs/ROADMAP_ENTERPRISE_TEMPLATES_WBS.md index e7759b5e..2c6b5b60 100644 --- a/docs/ROADMAP_ENTERPRISE_TEMPLATES_WBS.md +++ b/docs/ROADMAP_ENTERPRISE_TEMPLATES_WBS.md @@ -1,58 +1,77 @@ -# OMS·WMS·ERP 공통 CRUD 화면 템플릿 상용화 WBS & 로드맵 (WBS-TPL-2026) +# OMS·WMS·ERP 입력 컴포넌트 & 공통 CRUD 템플릿 통합 WBS 로드맵 (WBS-ENTERPRISE-2026) -## 0. 개요 및 하네스 완수 기준 -본 문서는 `docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md` 명세에 정의된 11대 표준 화면 템플릿(`TPL-LIST-01` ~ `TPL-HISTORY-01`) 및 25개 시스템 공통 규격의 단계별 구현 WBS와 검증 성공판단 데이터 계약을 기술한다. +## 0. 개요 및 하네스 준수 원칙 + +본 문서는 `docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md` 명세서의 **52개 입력 컴포넌트 상세 규격** 및 **11대 표준 업무 템플릿 상세 규격**에 대한 전체 작업분해구조(WBS)와 일정 스케줄, 성공판단 데이터를 정의한다. ### 0.1 기본 하네스 4대 완수 조건 1. **YAML/MD 계약**: `docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md` 및 `docs/ROADMAP_ENTERPRISE_TEMPLATES_WBS.md` -2. **코드 구현**: `src/frontend/src/types/enterpriseTemplateContracts.ts`, `tools/validate_enterprise_crud_specification_v1.py` +2. **코드 구현**: `src/frontend/src/components/` (4계층 컴포넌트 및 11대 템플릿) & `src/frontend/src/types/enterpriseTemplateContracts.ts` 3. **데이터 실체**: `Temp/enterprise_crud_validation_report_v1.json`, `Temp/enterprise_crud_validation_report_v1.md` 4. **검증 증빙**: `python tools/validate_enterprise_crud_specification_v1.py` & `npx playwright test` --- -## 1. 표준 템플릿 ID 매핑 인벤토리 +## 1. 입력 컴포넌트 4계층 WBS 인벤토리 (52개 섹션 기반) -| 템플릿 ID | 화면 유형 | 주요 적용 도메인 | 상태 | 성공판단 데이터 | +### Phase 1: Primitive UI Components (`components/primitives/`) +| WBS ID | 대상 컴포넌트 | 담당 역할 | 상태 | 성공판단 데이터 (Acceptance Criteria) | | :--- | :--- | :--- | :---: | :--- | -| `TPL-LIST-01` | 목록·검색 | OMS 주문 목록, WMS 재고 현황, ERP 전표 목록 | `IN_PROGRESS` | URL Query 동기화, 서버 기반 정렬/페이징, 컬럼 자동맞춤 | -| `TPL-CREATE-01` | 단일 등록 | 마스터(거래처/품목), 단순 코드 | `PLANNED` | Idempotency Key 부여, 최초 오류 필드 자동 포커스 | -| `TPL-CREATE-02` | 헤더·라인 등록 | OMS 주문 등록, WMS 입고예정, ERP 전표 | `IN_PROGRESS` | 헤더 변경 시 라인 재계산 토스트, Decimal 정밀도 | -| `TPL-CREATE-03` | 단계형 등록 | 복합 주문, 반품 처리, 계약 | `PLANNED` | Step별 유효성 검증, 임시저장 세션 복구 | -| `TPL-DETAIL-01` | 상세 조회 | 주문 상세, 입고 상세, 전표 상세 | `IN_PROGRESS` | Status Timeline 표시, 관련 문서 Tree 내비게이션 | -| `TPL-EDIT-01` | 일반 수정 | 마스터 및 주문 수정 | `IN_PROGRESS` | Version Conflict(409) 3-Way Diff 비교창 | -| `TPL-BULK-01` | 일괄 수정 | 담당자/예정일/상태 일괄 변경 | `PLANNED` | 예상 영향건수 미리보기 및 비동기 Job ID 연동 | -| `TPL-DELETE-01` | 삭제 | 임시/미사용 마스터 삭제 | `PLANNED` | 참조 관계 존재 시 삭제 차단 및 식별코드 재입력 Modal | -| `TPL-CANCEL-01` | 취소·역처리 | 주문 취소, 출고 취소, 전표 역분개 | `PLANNED` | Cancellation Preview Token & 역트랜잭션 생성을 통한 물리 삭제 차단 | -| `TPL-APPROVAL-01`| 승인·반려 | 발주 승인, 전표 승인 | `PLANNED` | 직무분리(SoD) 검증, 위험 경고 Chip 표출 | -| `TPL-HISTORY-01` | 변경 이력 | Audit Event, 이력 감사 | `IN_PROGRESS` | AuditEvent 표준 스키마 기반 필드 차이(Diff) 뷰어 | +| `WBS-COMP-1.1` | `TextInput.vue` | 시각/키보드 텍스트 입력 | `COMPLETED` | IME 조합 처리 유지, ARIA `aria-invalid` 바인딩 | +| `WBS-COMP-1.2` | `SelectInput.vue` | 단순 옵션 드롭다운 | `PLANNED` | 방향키/Enter/Escape 단축키 제어, 20개 이하 옵션 | +| `WBS-COMP-1.3` | `DialogModal.vue` | 접근성 포커스 트랩 모달 | `PLANNED` | ESC 키 닫기 및 열기 전 버튼으로 포커스 복귀 | +| `WBS-COMP-1.4` | `ActionButton.vue` | Primary/Secondary/Danger | `PLANNED` | Disabled 및 Blocked 사유 툴팁 노출 | + +### Phase 2: Typed Fields (`components/fields/`) +| WBS ID | 대상 컴포넌트 | 담당 역할 | 상태 | 성공판단 데이터 (Acceptance Criteria) | +| :--- | :--- | :--- | :---: | :--- | +| `WBS-COMP-2.1` | `StringField.vue` | 문자열 정규화 필드 | `COMPLETED` | 앞뒤 공백 제거, 대문자 정규화 직전 포커스 유지 | +| `WBS-COMP-2.2` | `NumberField.vue` | 정수/소수 Decimal 입력 | `IN_PROGRESS` | 불완전 입력 중 `0` 치환 방지, 천 단위 쉼표 표출 | +| `WBS-COMP-2.3` | `DateField.vue` | `YYYY-MM-DD` ISO 날짜 | `IN_PROGRESS` | ISO 날짜 파싱, 과거/미래 제한 및 마감일 검증 | +| `WBS-COMP-2.4` | `CodeField.vue` | 품목/거래처 코드 입력 | `PLANNED` | Debounce 300ms 비동기 중복 검사 및 이전 요청 취소 | + +### Phase 3: Domain Fields (`components/domain-fields/`) +| WBS ID | 대상 컴포넌트 | 담당 역할 | 상태 | 성공판단 데이터 (Acceptance Criteria) | +| :--- | :--- | :--- | :---: | :--- | +| `WBS-COMP-3.1` | `QuantityField.vue` | 수량/단위/가용재고 | `COMPLETED` | 단위 변경 시 물량 유지 환산, 가용재고 초과 경고 | +| `WBS-COMP-3.2` | `MoneyField.vue` | 통화/금액/세금 입력 | `IN_PROGRESS` | 부동소수점 금지, KRW 0자리/외화 자릿수 준수 | +| `WBS-COMP-3.3` | `BarcodeInput.vue` | 스캐너/카메라 연속 스캔 | `IN_PROGRESS` | 100ms 이내 판정, 중복 스캔 시간창 및 음향/진동 | +| `WBS-COMP-3.4` | `LotField.vue` | 로트번호/유효기간 관리 | `IN_PROGRESS` | FEFO/FIFO 추천 로트 표시 및 격리 로트 차단 | +| `WBS-COMP-3.5` | `SerialNumberInput.vue` | 시리얼 대량 붙여넣기 | `PLANNED` | 대량 붙여넣기 미리보기 및 실패 행만 재입력 | +| `WBS-COMP-3.6` | `LocationLookup.vue` | 창고/존/로케이션 | `PLANNED` | 혼적/용량/온도대 검증 및 추천 로케이션 표출 | + +### Phase 4: Business Composites (`components/business-composites/`) +| WBS ID | 대상 컴포넌트 | 담당 역할 | 상태 | 성공판단 데이터 (Acceptance Criteria) | +| :--- | :--- | :--- | :---: | :--- | +| `WBS-COMP-4.1` | `AddressEditor.vue` | 주소/우편번호 편집기 | `COMPLETED` | 표준 주소 정제 비교 및 도서산간 배송비 검증 | +| `WBS-COMP-4.2` | `AISuggestedField.vue` | AI 추천/초안 바인더 | `IN_PROGRESS` | R0~R4 위험 등급 정책 적용 및 근거 Viewer 표출 | +| `WBS-COMP-4.3` | `OrderLineEditor.vue` | 주문 라인 아이템 편집 | `PLANNED` | 라인 100개 가상화 및 합계/세액 즉시 반영 | --- -## 2. 단계별 WBS 작업 분해 및 성공판단 데이터 +## 2. 11대 표준 업무 템플릿 WBS 인벤토리 (25개 섹션 기반) -### Phase 1: 1차 공통 기반 (Base Framework) -- **WBS-TPL-1.1**: 공통 Layout & Navigation (`Global Header`, `Breadcrumb`, `Page Header`, `Sticky Action Bar`) - - *성공판단 데이터*: 200% Zoom 상에서 헤더/액션바 레이아웃 손실 없음 및 Keyboard Tab 이동 순서 일치 -- **WBS-TPL-1.2**: 16가지 공통 화면 상태 (`Initial Loading`, `Record Locked`, `Version Conflict`, `Offline` 등) - - *성공판단 데이터*: `FieldStatus` 12가지 및 Screen State 16가지 상태 전환 시 사용자 알림 토스트/경고표지 100% 동작 -- **WBS-TPL-1.3**: 4계층 검증 및 표준 오류 모델 (`FieldError`, `ApiErrorResponse`) - - *성공판단 데이터*: 422 Unprocessable Entity 수신 시 최초 오류 필드 포커스 및 `aria-describedby` 바인딩 +| WBS ID | 템플릿 ID | 화면 유형 | 구현 상태 | 성공판단 데이터 | +| :--- | :--- | :--- | :---: | :--- | +| `WBS-TPL-01` | `TPL-LIST-01` | 목록·검색 템플릿 | `IN_PROGRESS` | URL Query 동기화, `sizeColumnsToFit` 폭 맞춤, 엑셀 다운로드 | +| `WBS-TPL-02` | `TPL-CREATE-01` | 단일 등록 템플릿 | `PLANNED` | Idempotency Key 생성, 저장 후 계속 등록 모드 | +| `WBS-TPL-03` | `TPL-CREATE-02` | 헤더·라인 등록 템플릿 | `PLANNED` | 헤더 변경 시 라인 재계산 토스트 및 저장/확정 분리 | +| `WBS-TPL-04` | `TPL-CREATE-03` | 단계형 등록 템플릿 | `PLANNED` | Step별 유효성 검증 및 임시저장 세션 복구 | +| `WBS-TPL-05` | `TPL-DETAIL-01` | 상세 조회 템플릿 | `PLANNED` | Status Timeline 뱃지 및 관련 문서 릴레이션 노드 표출 | +| `WBS-TPL-06` | `TPL-EDIT-01` | 일반 수정 템플릿 | `PLANNED` | 409 Conflict 발생 시 서버 최신값 vs 내 변경값 3-Way 비교 | +| `WBS-TPL-07` | `TPL-BULK-01` | 일괄 수정 템플릿 | `PLANNED` | 예상 영향건수 미리보기 및 100건 초과 시 비동기 Job ID 변환 | +| `WBS-TPL-08` | `TPL-DELETE-01` | 삭제 템플릿 | `PLANNED` | 참조 데이터 존재 시 삭제 차단 및 확인 코드 재입력 Modal | +| `WBS-TPL-09` | `TPL-CANCEL-01` | 취소·역처리 템플릿 | `PLANNED` | Cancellation Preview Token & 역트랜잭션 생성 (물리 삭제 0건) | +| `WBS-TPL-10` | `TPL-APPROVAL-01`| 승인·반려 템플릿 | `PLANNED` | 작성자-승인자 직무분리(SoD) 승인 버튼 차단 | +| `WBS-TPL-11` | `TPL-HISTORY-01` | 변경 이력 템플릿 | `PLANNED` | AuditEvent 스키마 기반 필드 변경 차이(Diff) 뷰어 | -### Phase 2: 2차 핵심 템플릿 구현 (Core Templates) -- **WBS-TPL-2.1**: `TPL-LIST-01` 목록·검색 템플릿 (`Summary Strip`, Lens Filter, AgGrid Header) - - *성공판단 데이터*: 10,000건 대용량 데이터 로딩 시 P95 1초 이내 렌더링 및 `sizeColumnsToFit` 자동 폭 맞춤 -- **WBS-TPL-2.2**: `TPL-CREATE-02` 헤더·라인 등록 템플릿 - - *성공판단 데이터*: 라인 항목 100개 추가 시 Decimal 손실 없이 공급가액/세액/합계 100ms 이내 재계산 -- **WBS-TPL-2.3**: `TPL-DETAIL-01` 상세 조회 & `Status Timeline` - - *성공판단 데이터*: 주문접수 → 결제완료 → 재고할당 → 출고대기 Timeline 뱃지 및 관련 문서 릴레이션 노드 렌더링 -- **WBS-TPL-2.4**: `TPL-EDIT-01` 일반 수정 및 `Version Conflict` 충돌 해결 모달 - - *성공판단 데이터*: 409 Conflict 발생 시 서버값 vs 내변경값 3-Way 비교 UI 표출 및 선택 적용 통과 +--- -### Phase 3: 3차 역처리/안전성 템플릿 (Safety & Governance) -- **WBS-TPL-3.1**: `TPL-CANCEL-01` 취소·역처리 템플릿 (Preview & Execute) - - *성공판단 데이터*: Preview Token 발행 후 역트랜잭션 생성 및 물리적 삭제 0건 보장 -- **WBS-TPL-3.2**: `TPL-APPROVAL-01` 승인·반려 템플릿 및 직무분리(SoD) - - *성공판단 데이터*: 작성자와 승인자 동일인 시 승인 버튼 비활성화(`blocked`) 및 경고 문구 표출 -- **WBS-TPL-3.3**: 하네스 자동 검증 CLI (`tools/validate_enterprise_crud_specification_v1.py`) - - *성공판단 데이터*: 25개 명세 섹션 및 11대 템플릿 파싱 100% `PASS` 및 `Temp/enterprise_crud_validation_report_v1.json` 갱신 +## 3. 실행 이행 스케줄 (Implementation Schedule) + +```text +[Sprint 1] 1차 기반 Typed & Domain Fields (NumberField, DateField, MoneyField, BarcodeInput, LotField) ──▶ 완료 +[Sprint 2] 1차 AX & 템플릿 (AISuggestedField, TPL-LIST-01 목록·검색 뷰) ─────────────────────────────────▶ 진행 중 +[Sprint 3] 2차 핵심 등록/상세 템플릿 (TPL-CREATE-02, TPL-DETAIL-01, TPL-EDIT-01) ───────────────────────▶ 예정 +[Sprint 4] 3차 안전성 템플릿 (TPL-CANCEL-01, TPL-APPROVAL-01, TPL-BULK-01) ──────────────────────────────▶ 예정 +``` diff --git a/src/frontend/src/components/business-composites/AISuggestedField.vue b/src/frontend/src/components/business-composites/AISuggestedField.vue new file mode 100644 index 00000000..9b843f56 --- /dev/null +++ b/src/frontend/src/components/business-composites/AISuggestedField.vue @@ -0,0 +1,41 @@ + + + + diff --git a/src/frontend/src/components/domain-fields/BarcodeInput.vue b/src/frontend/src/components/domain-fields/BarcodeInput.vue new file mode 100644 index 00000000..171c80f3 --- /dev/null +++ b/src/frontend/src/components/domain-fields/BarcodeInput.vue @@ -0,0 +1,61 @@ + + + + diff --git a/src/frontend/src/components/domain-fields/MoneyField.vue b/src/frontend/src/components/domain-fields/MoneyField.vue new file mode 100644 index 00000000..f0357ea0 --- /dev/null +++ b/src/frontend/src/components/domain-fields/MoneyField.vue @@ -0,0 +1,72 @@ + + + + diff --git a/src/frontend/src/components/fields/DateField.vue b/src/frontend/src/components/fields/DateField.vue new file mode 100644 index 00000000..96848fd7 --- /dev/null +++ b/src/frontend/src/components/fields/DateField.vue @@ -0,0 +1,59 @@ + + + + diff --git a/src/frontend/src/components/fields/NumberField.vue b/src/frontend/src/components/fields/NumberField.vue new file mode 100644 index 00000000..94bb91dc --- /dev/null +++ b/src/frontend/src/components/fields/NumberField.vue @@ -0,0 +1,59 @@ + + + + diff --git a/src/frontend/src/views/templates/TplList01View.vue b/src/frontend/src/views/templates/TplList01View.vue new file mode 100644 index 00000000..271d7e59 --- /dev/null +++ b/src/frontend/src/views/templates/TplList01View.vue @@ -0,0 +1,64 @@ + + + +