# OMS·WMS·ERP Commercialization WBS (Work Breakdown Structure) # Enterprise-grade 4-Layer Input Components + 11 CRUD Templates # Version: 1.0 (2026-07-26) # Authority: 30yr+ Senior Architect/PM/PL/Dev/UX/QA/User perspective --- project: name: "OMS·WMS·ERP 통합 플랫폼 상용화" vision: "엔터프라이즈급 재무/물류/판매 관리 시스템 구축 (Vue 3 + TypeScript)" duration: "8 phases × 2-4 weeks (Phase 0~11)" strategic_principles: - SOLID: 단일 책임, 개방/폐쇄 원칙, 리스코프 치환, 인터페이스 분리, 의존성 역전 - data_consistency: PostgreSQL SSOT (Single Source of Truth), 감사 추적 - parsimony: 과유불급 (필요한 것만, 가설 없이) - normalization: 3NF 이상, 역정규화는 성능 증명 후 - process_simplification: 프로세스 단순화 우선, 자동화는 검증 후 - patterns: 팩토리, 빌더, 스트래티지, 옵저버 (Vue 반응성) - standardization: 코딩 컨벤션, API 스펙, 컴포넌트 인터페이스 통일 - structuring: 계층화, 모듈화, 마이크로프론트엔드 고려 - vibes_coding: 인지 부하 최소화, 명확한 네이밍, 일관된 패턴 - hallucination_prevention: 테스트 주도, 계약 검증, 스키마 강제 - ground_truth: 재현성 100% (결정론적 입력), 현장 감각 유지 - traceability: 모든 결정의 이력, 감시 로그, 변경 관리 - reliability: 장애 격리, 우아한 한계치, 자동 복구 메커니즘 - technical_debt: 0 신규 부채, 기존 부채 반기 감소 목표 - componentization: 재사용 가능한 "smart + dumb" 컴포넌트 분리 --- ## PHASE 0: 요구사항 정의 & 기준선 수립 (Week 1-2) ### 목표: Enterprise 스펙 확정, 팀 정렬, 리스크 식별 phase_0: name: "Foundation & Baseline Establishment" duration_weeks: 2 gating_criteria: - "아키텍처 리뷰: 마이크로프론트엔드 vs 모놀리식 선택 확정" - "4-layer 입력 컴포넌트 계층 정의 (Primitive/Composite/Smart/Template)" - "11 CRUD 템플릿 목록 및 공통 패턴 확정" - "UI/UX 피그마 와이어프레임 80% 완성" - "API 계약 (OpenAPI 3.0) 30개 엔드포인트 스펙 작성" tasks: T0.1: name: "Stakeholder Requirements Gathering" owner: "PM + 사용자 대표" effort_days: 3 deliverables: - "요구사항 명세 (FRD: Functional Requirements Document)" - "비기능 요구사항 (NFR: 성능, 보안, 확장성, 감시)" - "사용자 페르소나 5개 (관리자, 운영사, 분석가, 시스템 관리자, 감시자)" - "사용 사례 맵 (16개 주요 흐름)" acceptance_criteria: - "모든 스테이크홀더가 FRD에 서명" - "NFR 목표 수량화: 응답 시간 <200ms, 가용성 99.9%, 동시 사용자 1000명" - "위험 등록부: Critical 3개, High 7개, Medium 12개" qa_checkpoints: - "FRD 리뷰: 아키텍트, PM, 개발 리더" - "NFR 검증: 성능 & 보안 전문가" T0.2: name: "Architecture Decision: Micro-Frontend vs Monolithic" owner: "솔루션 아키텍트" effort_days: 4 context: | 핵심 선택: 각 도메인(OMS/WMS/ERP)을 독립 앱으로 배포할지, 통합 모놀리식으로 갈지 결정. 기준: 팀 규모(8명), 배포 주기(1주), 확장성, 코드 변동률 options: - option_1: name: "모놀리식 (Single Vue 3 SPA + Vite)" pros: "간단한 배포, 공유 상태 관리 (Pinia), 하나의 린트/테스트 설정" cons: "번들 크기 증가 (초기 로딩 >2MB), 배포 결합도" risk_level: "LOW (즉시 실행 가능)" estimated_tco: "낮음 (infrastructure 단순)" - option_2: name: "마이크로프론트엔드 (Module Federation, Webpack 5)" pros: "팀별 독립 배포, 기술 스택 혼용 가능, 번들 최적화" cons: "복잡한 상태 관리, 버전 호환성, 학습 곡선" risk_level: "MEDIUM (초기 오버헤드 2-3주)" estimated_tco: "높음 (infrastructure, 조율 비용)" decision_framework: - "현재: 8명 팀 → 모놀리식 추천 (마이크로프론트엔드는 15명+ 규모)" - "1년 후: 팀 확대/부하 증가 시 점진적 마이크로프론트엔드 전환 경로 예약" deliverables: - "아키텍처 결정 기록 (ADR-001: Monolithic SPA with modular structure)" - "통합 레이어 설계 (Pinia store 구조, 도메인별 모듈)" - "초기 로딩 성능 목표: 번들 1.5MB (gzip), First Contentful Paint <1s" qa_checkpoints: - "기술 리더 리뷰 & 승인" - "팀 capability 검증 (Webpack, Module Federation 지식)" T0.3: name: "4-Layer Input Components Architecture Design" owner: "컴포넌트 아키텍트 + UX" effort_days: 5 description: | 4계층 모델 정의: - Layer 1 (Primitives): button, input, select, checkbox, radio, text-area - Layer 2 (Composites): form-group, form-row, address-input, phone-input - Layer 3 (Smart/Domain): order-form, inventory-picker, supplier-selector (API 연결) - Layer 4 (Template): full-page forms (주문 입력, 재고 이동, 청구) design_guidelines: - "Accessibility (WCAG 2.1 AA): 키보드 네비게이션, 스크린리더 지원" - "Responsive: 모바일 (320px), 태블릿, 데스크톱 (1920px)" - "Dark mode 지원 (CSS 변수 기반)" - "에러 상태 & 로딩 상태 명확한 UX" - "국제화 (i18n): 한국어, 영어, 일본어" deliverables: - "컴포넌트 계층도 (Figma + Mermaid diagram)" - "각 계층별 인터페이스 정의 (Props, Events, Slots)" - "Layer 1-2 Storybook 가이드 (20개 기본 컴포넌트)" - "접근성 체크리스트 (WCAG 2.1)" qa_checkpoints: - "UX 리뷰: 사용자 테스트 5명 (각 페르소나별)" - "컴포넌트 API 검증: Props 충돌 없음, 확장성 검증" T0.4: name: "11 Standard CRUD Templates Inventory" owner: "PM + 도메인 전문가 (OMS/WMS/ERP)" effort_days: 4 crud_templates: - T1: "Order Create/Read/Update" (OMS) - T2: "Order Line Items Edit" (OMS) - T3: "Shipment Schedule & Tracking" (OMS) - T4: "Warehouse Inventory CRUD" (WMS) - T5: "Stock Transfer Request" (WMS) - T6: "Receiving & Put-away" (WMS) - T7: "Product Master CRUD" (ERP) - T8: "Supplier Master CRUD" (ERP) - T9: "Customer Master CRUD" (ERP) - T10: "GL Account CRUD" (ERP) - T11: "Budget Template & Allocation" (ERP) common_patterns: - "List View with Pagination, Search, Filter, Bulk Actions" - "Detail View with Tabs (Info, History, Attachments, Audit Log)" - "Edit Form with Validation, Auto-save Draft, Undo/Redo" - "Delete with Soft-delete & Cascade Policy" - "Audit Trail: Created By/Date, Modified By/Date, Deleted By/Date" deliverables: - "CRUD 템플릿 매트릭스 (API 엔드포인트 vs 화면 매핑)" - "공통 패턴 재사용 규칙 문서" - "각 템플릿별 와이어프레임 (Figma 링크)" qa_checkpoints: - "도메인 전문가 검증: 각 템플릿이 실제 업무 시나리오 커버" T0.5: name: "API Contract Definition (OpenAPI 3.0)" owner: "백엔드 리더 + API 아키텍트" effort_days: 5 api_strategy: - "30개 엔드포인트: CRUD 기본 (11 × 3) + 통합 (7개)" - "REST 원칙 준수: GET/POST/PUT/DELETE, 적절한 상태 코드" - "인증: JWT Bearer (액세스 토큰 + 새로고침)" - "권한: Role-Based Access Control (RBAC) - 5개 역할" - "응답 형식: JSON with error schema (code, message, details)" deliverables: - "OpenAPI 3.0 spec file (spec/60_oms_wms_erp_api.yaml)" - "인증/인가 정책 문서" - "에러 코드 카탈로그 (50개 에러 정의)" - "API 버전 관리 전략" qa_checkpoints: - "백엔드/프론트엔드 개발자 리뷰 & 합의" - "API 모킹 서버 (Prism/Mockoon) 검증" T0.6: name: "UI/UX Wireframe & Design System" owner: "UX 디자이너 + 시니어 개발자" effort_days: 5 design_system: - "컬러 팔레트: Primary (brand), Secondary, Neutral, Semantic (success/warning/error)" - "타이포그래피: 3-level hierarchy (H1/H2/H3, Body, Caption)" - "스페이싱: 8px 기반 그리드 (8, 16, 24, 32, 40px)" - "그림자/보더: 3-level elevation (subtle, medium, prominent)" - "컴포넌트 라이브러리: 80개 (Button, Input, Card, Modal, Table, Chart)" deliverables: - "Figma 디자인 시스템 (shared library, 컴포넌트 80개)" - "11 CRUD 템플릿 와이어프레임 + 고충실도 목업" - "다크 모드 변형" - "모바일 반응형 변형" - "인터랙션 정의 (hover, focus, active, disabled, loading)" qa_checkpoints: - "UX 리뷰: 사용성 테스트 5명" - "디자인 체계 일관성: 컬러 대비, 타이포그래피, 스페이싱" T0.7: name: "Risk Register & Mitigation Planning" owner: "PM + 리더십 팀" effort_days: 2 key_risks: - risk_1: category: "Technical" description: "Vue 3 + TypeScript 학습 곡선 (초급 개발자 2명)" probability: "HIGH (70%)" impact: "MEDIUM (2주 지연)" mitigation: "스프린트 0에서 TypeScript 집중 교육 2일, 페어프로그래밍" owner: "기술 리더" - risk_2: category: "Integration" description: ".NET API와 Vue 프론트 개발 병렬 진행 시 API 변경" probability: "MEDIUM (60%)" impact: "MEDIUM (3일 재작업)" mitigation: "OpenAPI mock server 사용, 계약 테스트 (Pact.js)" owner: "백엔드 리더" - risk_3: category: "Performance" description: "번들 크기 >2MB → 초기 로딩 >3s (모바일 3G)" probability: "MEDIUM (50%)" impact: "HIGH (사용자 이탈)" mitigation: "Route-based 코드 분할, 이미지 최적화, CDN 캐싱" owner: "프론트엔드 리더" - risk_4: category: "Business" description: "요구사항 크리프 (미지정 CRUD 템플릿 추가 요청)" probability: "HIGH (80%)" impact: "HIGH (일정 연장)" mitigation: "Phase 별 고정 범위 (11개만), 이후 요청은 Phase 12+" owner: "PM" deliverables: - "리스크 레지스터 (15개 항목, 색상 코드: R/Y/G)" - "대응 계획 (담당자, 완료 날짜)" qa_checkpoints: - "리스크 리뷰: 주간 스탠드업에서 상태 갱신" --- ## PHASE 1: 프로젝트 환경 구성 & 개발 기반 (Week 3-4) ### 목표: 로컬 개발 환경, CI/CD 파이프라인, 팀 온보딩 완료 phase_1: name: "Development Environment & Tooling Setup" duration_weeks: 2 gating_criteria: - "모든 개발자가 로컬에서 'npm run dev' 실행 가능 (0 에러)" - "CI/CD 파이프라인: PR 자동 검사 (linting, testing, build)" - "Storybook 로컬 실행 가능, 20개 기본 컴포넌트 문서화" - "데이터베이스 마이그레이션: dev/staging/prod 세 환경 구성" - "팀 온보딩 완료 (모든 인력이 프로젝트 설정 이해)" tasks: T1.1: name: "Frontend Project Scaffolding (Vite + Vue 3 + TypeScript)" owner: "프론트엔드 리더" effort_days: 2 tech_stack: - "Build Tool: Vite 5 (esbuild, Lightning Fast HMR)" - "Framework: Vue 3 (Composition API +