kjh2064
7cef465ba3
Validators (Pushes and Pull Requests) / UI & Storage Validation (push) Failing after 11s
Validators (Pushes and Pull Requests) / Core Validators & Database Setup (push) Failing after 26s
Validators (Pushes and Pull Requests) / Database & Schema Validation (push) Successful in 13s
Validators (Pushes and Pull Requests) / WBS & Audit Validations (push) Has been skipped
Validators (Pushes and Pull Requests) / .NET Contracts (push) Has been skipped
Validators (Pushes and Pull Requests) / Calibration & Performance (push) Has been skipped
Validators (Pushes and Pull Requests) / Operational Report & Decision Packet (push) Has been skipped
Validators (Pushes and Pull Requests) / Security & Secrets (push) Successful in 11s
Validators (Pushes and Pull Requests) / CI Workflow Lint (push) Failing after 11s
Validators (Pushes and Pull Requests) / Notify PR Results (push) Has been skipped
Frontend CI Pipeline / ci-frontend-8-steps (push) Failing after 2m1s
- Complete 1,600-line WBS (spec/60_oms_wms_erp_wbs.yaml) with 12 phases - 18-week timeline, 13-person team, $371K budget - Strategic principles: SOLID, data consistency, parsimony, zero hallucination - Quantified success metrics (70%+ test coverage, Lighthouse 90+, 99.9% uptime) - Phase breakdown: Requirements → Development → Testing → Deployment → Stabilization - Phase 0 (Week 1-2): Baseline establishment, FRD, OpenAPI spec, wireframes - Phase 1-11: Progressive build-out of 4-layer components + 11 CRUD templates - Gated by QuantEngine Phase 2 completion (KIS API production validation) - 30-year senior architect perspective: architecture, PM, PL, dev, UX, QA, ops Alignment with QuantEngine roadmap: Phase 12 (OMS·WMS·ERP) follows Phase 5 (Admin UI). Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1720 lines
70 KiB
YAML
1720 lines
70 KiB
YAML
# 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 + <script setup>)"
|
||
- "Language: TypeScript 5 (strict mode)"
|
||
- "State Management: Pinia (Vue 3 official state management)"
|
||
- "HTTP Client: axios + interceptors (auth, error handling)"
|
||
- "Router: Vue Router 4 (lazy loading routes)"
|
||
- "UI Component Library: Headless UI + custom components"
|
||
- "Styling: Tailwind CSS 3 + PostCSS"
|
||
- "Linting: ESLint 9 + Prettier"
|
||
- "Testing: Vitest + Vue Test Utils + Playwright"
|
||
- "Documentation: Storybook 7 (TypeScript stories)"
|
||
project_structure:
|
||
- "src/"
|
||
- "components/" (4-layer structure)
|
||
- "primitives/" (button, input, select, ... 20개)
|
||
- "composites/" (form-group, form-row, ...)
|
||
- "smart/" (order-form, inventory-picker, ...)
|
||
- "templates/" (full-page forms)
|
||
- "pages/" (route 컴포넌트, 11개 CRUD 화면)
|
||
- "stores/" (Pinia modules: orders, inventory, products, ...)
|
||
- "services/" (API 클라이언트, utility functions)
|
||
- "types/" (TypeScript interfaces, 도메인 모델)
|
||
- "utils/" (formatters, validators, helpers)
|
||
- "styles/" (global CSS, 디자인 시스템)
|
||
- "App.vue"
|
||
- "main.ts"
|
||
- "public/" (static assets)
|
||
- "tests/" (unit + integration + e2e)
|
||
- "stories/" (Storybook)
|
||
- "vite.config.ts"
|
||
- "tsconfig.json"
|
||
- "package.json"
|
||
deliverables:
|
||
- "프로젝트 스켈레톤 (git repo 초기화)"
|
||
- "package.json + lock file (npm/pnpm)"
|
||
- "vite.config.ts with optimizations"
|
||
- "tsconfig.json (strict: true, 기본 설정)"
|
||
- "README.md (로컬 셋업 가이드)"
|
||
qa_checkpoints:
|
||
- "'npm install' + 'npm run dev' 성공"
|
||
- "http://localhost:5173 접근 가능 (Vite dev server)"
|
||
- "HMR 작동 확인 (파일 저장 시 자동 새로고침)"
|
||
|
||
T1.2:
|
||
name: "Component Library Bootstrap (Primitives Layer)"
|
||
owner: "프론트엔드 리더 + 주니어 개발자"
|
||
effort_days: 4
|
||
primitives_to_implement:
|
||
- "Button (variant: primary/secondary/danger, size: sm/md/lg, state: loading)"
|
||
- "Input (text, email, password, number, tel, search)"
|
||
- "Select (single + multi, searchable, virtualized 500+ 항목)"
|
||
- "Checkbox + CheckboxGroup"
|
||
- "Radio + RadioGroup"
|
||
- "TextArea (auto-resize, char-count)"
|
||
- "FormGroup (label + input + error + hint)"
|
||
- "FormRow (inline layout, responsive)"
|
||
- "Card (header, body, footer, shadow variant)"
|
||
- "Badge (status color: success/warning/error)"
|
||
- "Tag (removable, clickable)"
|
||
- "Tooltip (hover/focus activation)"
|
||
- "Modal (header, body, footer, size: sm/md/lg)"
|
||
- "Drawer (left/right, overlay, dismissible)"
|
||
- "Alert (inline + toast variants)"
|
||
- "Spinner (inline + fullscreen)"
|
||
- "Skeleton (placeholder during loading)"
|
||
- "Pagination (page-based + cursor-based)"
|
||
- "Breadcrumb (navigation history)"
|
||
- "Tabs (controlled, animated)"
|
||
component_api_pattern:
|
||
- "Props with TypeScript types (strict)"
|
||
- "Events emitted (custom events follow 'on[Event]' pattern)"
|
||
- "Slots (default, named, scoped)"
|
||
- "CSS Classes (Tailwind, no scoped style collision)"
|
||
- "Accessibility (role, aria-*, keyboard support)"
|
||
- "Dark mode support (via CSS variables)"
|
||
deliverables:
|
||
- "20개 primitive 컴포넌트 구현 (Vue 3 <script setup>)"
|
||
- "각 컴포넌트별 TypeScript types (Props, Emits, Slots)"
|
||
- "Storybook stories (5+ 시나리오 per 컴포넌트)"
|
||
- "단위 테스트 (Vitest, 60%+ 커버리지)"
|
||
- "Accessibility checklist (각 컴포넌트 WCAG 2.1 준수)"
|
||
qa_checkpoints:
|
||
- "Storybook 실행: npm run storybook"
|
||
- "모든 컴포넌트 visual regression test 통과"
|
||
- "TypeScript 엄격 모드 에러 없음"
|
||
|
||
T1.3:
|
||
name: "Tailwind CSS Design System Integration"
|
||
owner: "UX 디자이너 + 프론트엔드"
|
||
effort_days: 2
|
||
tailwind_customization:
|
||
- "colors: Brand palette (primary/secondary/neutral/semantic)"
|
||
- "spacing: 8px grid (8, 16, 24, 32, 40, 48, 56, 64px)"
|
||
- "typography: 3 levels (h1/h2/h3, body, caption)"
|
||
- "shadows: 3 levels (subtle, medium, prominent)"
|
||
- "border-radius: 3 levels (sm, md, lg)"
|
||
- "transitions: duration + easing (ease-in/out/cubic)"
|
||
- "dark mode: media query + class strategy"
|
||
deliverables:
|
||
- "tailwind.config.js (완전한 맞춤화)"
|
||
- "globals.css (design token 정의, CSS 변수)"
|
||
- "theme.ts (TypeScript 기반 테마 객체, runtime 전환용)"
|
||
- "색상 대비 검증 (WCAG AA 통과)"
|
||
qa_checkpoints:
|
||
- "컴포넌트 라이브러리 다크 모드 전환 확인"
|
||
- "색상 대비 accessibility audit (axe-core)"
|
||
|
||
T1.4:
|
||
name: "CI/CD Pipeline (GitHub Actions / Gitea Actions)"
|
||
owner: "DevOps 리더"
|
||
effort_days: 3
|
||
pipeline_stages:
|
||
- "Stage 1 - PR Check (on: pull_request)"
|
||
- "Linting (ESLint + Prettier)"
|
||
- "Type checking (tsc --noEmit)"
|
||
- "Unit tests (Vitest, 60%+ coverage)"
|
||
- "Build check (Vite build --mode development)"
|
||
- "Security scan (npm audit, SNYK)"
|
||
- "Stage 2 - Integration (on: push to develop)"
|
||
- "All PR checks"
|
||
- "Integration tests (Vitest + Vue Test Utils)"
|
||
- "E2E smoke tests (Playwright, 5개 주요 흐름)"
|
||
- "Bundle analysis (size budget check)"
|
||
- "Stage 3 - Staging Deploy (manual trigger)"
|
||
- "Build production (Vite build)"
|
||
- "Deploy to staging (SSH/Docker)"
|
||
- "E2E full test suite (Playwright, 50개 시나리오)"
|
||
- "Performance audit (Lighthouse, budget)"
|
||
- "Stage 4 - Production Deploy (manual trigger, approval required)"
|
||
- "All staging tests"
|
||
- "Blue-green deployment"
|
||
- "Health check (HTTP 200, 응답 시간 <200ms)"
|
||
- "Rollback trigger (자동 복구)"
|
||
deliverables:
|
||
- ".github/workflows/*.yml (4개 workflow 파일)" (또는 .gitea/workflows)
|
||
- "Dockerfile (멀티 스테이지, production-optimized)"
|
||
- "docker-compose.yml (dev 환경)"
|
||
- "Budget file (.size-budget.json, 번들 크기 제한)"
|
||
qa_checkpoints:
|
||
- "PR 생성 시 CI 자동 실행 확인"
|
||
- "실패 case: 빌드 실패/테스트 실패 시 merge 차단"
|
||
|
||
T1.5:
|
||
name: "Database Schema & Migration (PostgreSQL)"
|
||
owner: "데이터베이스 아키텍트 + 백엔드 리더"
|
||
effort_days: 3
|
||
schema_design:
|
||
- "Core tables (11 도메인별 master tables)"
|
||
- "orders (id, order_no, customer_id, created_at, ...)"
|
||
- "order_lines (id, order_id, product_id, qty, ...)"
|
||
- "shipments (id, order_id, shipment_date, ...)"
|
||
- "inventory (id, warehouse_id, product_id, qty_on_hand, ...)"
|
||
- "stock_transfers (id, from_warehouse_id, to_warehouse_id, ...)"
|
||
- "products (id, sku, name, category_id, ...)"
|
||
- "suppliers (id, name, email, phone, ...)"
|
||
- "customers (id, name, email, address, ...)"
|
||
- "gl_accounts (id, code, name, type, ...)"
|
||
- "budgets (id, period, amount, ...)"
|
||
- "users (id, email, name, role_id, ...)"
|
||
- "Audit tables (자동 생성)"
|
||
- "audit_log (id, table_name, operation, old_value, new_value, changed_by, changed_at)"
|
||
- "Indexes (성능 최적화)"
|
||
- "Primary keys + unique constraints"
|
||
- "Foreign keys with cascade policy"
|
||
- "Search indexes (email, phone, name)"
|
||
- "Range indexes (created_at, updated_at)"
|
||
migration_tool: "TypeORM / Knex.js migrations"
|
||
deliverables:
|
||
- "schema.sql (전체 DDL)"
|
||
- "V001.sql ~ V010.sql (마이그레이션 파일, 재현 가능)"
|
||
- "seed.sql (초기 테스트 데이터, 100개 레코드)"
|
||
- "ER Diagram (DBML 형식, docs/db/oms_wms_erp.dbml)"
|
||
qa_checkpoints:
|
||
- "로컬 PostgreSQL 초기화 + 마이그레이션 성공"
|
||
- "외래 키 제약 조건 검증"
|
||
- "감시 로그 자동 생성 확인"
|
||
|
||
T1.6:
|
||
name: "Local Development Environment (Docker Compose)"
|
||
owner: "DevOps 리더"
|
||
effort_days: 1
|
||
services:
|
||
- "PostgreSQL 15 (port 5432, volume 마운트)"
|
||
- "Redis 7 (optional, 캐싱용, port 6379)"
|
||
- "Vite dev server (port 5173)"
|
||
- "Node.js API mock server (port 3000, Prism/json-server)"
|
||
deliverables:
|
||
- "docker-compose.yml"
|
||
- ".env.example"
|
||
- "Local setup guide (README.md, 5분 안에 실행)"
|
||
qa_checkpoints:
|
||
- "'docker-compose up' 후 모든 서비스 up (health check)"
|
||
- "localhost:5173, localhost:3000 접근 가능"
|
||
|
||
T1.7:
|
||
name: "Team Onboarding & Documentation"
|
||
owner: "PM + 기술 리더"
|
||
effort_days: 2
|
||
deliverables:
|
||
- "Developer onboarding guide (설정 5단계, 10분)"
|
||
- "Architecture overview (Mermaid diagrams, 5개)"
|
||
- "Coding standards (TypeScript, Vue 3, Naming conventions)"
|
||
- "Git workflow (branch strategy: main/develop/feature/*, PR process)"
|
||
- "Code review checklist (15개 항목)"
|
||
- "FAQ & troubleshooting guide"
|
||
- "Weekly standup template (디자이너, 개발자, QA)"
|
||
qa_checkpoints:
|
||
- "모든 팀원이 로컬 셋업 완료 (실제 테스트)"
|
||
- "코딩 표준 이해 확인 (quiz 또는 리뷰)"
|
||
|
||
---
|
||
## PHASE 2: Primitive & Composite Components (Week 5-6)
|
||
### 목표: Layer 1 & 2 완성, Storybook 문서화, 아토믹 컴포넌트 검증
|
||
|
||
phase_2:
|
||
name: "Primitive & Composite Layer Implementation"
|
||
duration_weeks: 2
|
||
gating_criteria:
|
||
- "20개 Primitive 컴포넌트 + 10개 Composite 컴포넌트 완성"
|
||
- "Storybook 30개 컴포넌트 전체 문서화 (각 5+ 시나리오)"
|
||
- "단위 테스트 커버리지 70%+, 모든 테스트 통과"
|
||
- "TypeScript strict 모드 에러 0개"
|
||
- "색상 대비 & 접근성 audit 통과 (WCAG 2.1 AA)"
|
||
|
||
tasks:
|
||
T2.1:
|
||
name: "Primitive Components Implementation (Continued)"
|
||
owner: "프론트엔드 팀 (2명)"
|
||
effort_days: 5
|
||
implementation_details:
|
||
- "각 컴포넌트: <script setup> + ref/computed/watch 패턴"
|
||
- "Props: typed, documented, default values"
|
||
- "Emits: custom events (update:modelValue, change, etc.)"
|
||
- "Slots: default + named slots"
|
||
- "Accessibility: aria-*, role, keyboard handlers"
|
||
- "Styling: Tailwind classes + CSS variables (dark mode)"
|
||
- "Error handling: prop validation, graceful degradation"
|
||
components_sprint_2:
|
||
- "DatePicker (Headless UI + custom date input)"
|
||
- "TimePicker (HH:MM:SS)"
|
||
- "DateRangePicker (start + end dates)"
|
||
- "FileUpload (drag-drop, multiple, validation)"
|
||
- "Slider (range input, numeric)"
|
||
- "ToggleSwitch (boolean state)"
|
||
- "Combobox (autocomplete + multi-select)"
|
||
- "Avatar (image + fallback initial)"
|
||
- "ProgressBar (linear + circular)"
|
||
- "Rating (star rating, interactive)"
|
||
deliverables:
|
||
- "10개 추가 Primitive 컴포넌트 (총 30개)"
|
||
- "Storybook stories (10+ 시나리오 per 컴포넌트)"
|
||
- "타입 정의 (.d.ts 파일)"
|
||
- "단위 테스트 (Vitest, 70%+ 커버리지)"
|
||
qa_checkpoints:
|
||
- "Storybook visual regression test"
|
||
- "TypeScript strict mode validation"
|
||
- "Accessibility audit (axe-core, Lighthouse)"
|
||
|
||
T2.2:
|
||
name: "Composite Components (Combinations of Primitives)"
|
||
owner: "프론트엔드 리더 + 주니어 개발자"
|
||
effort_days: 4
|
||
composites:
|
||
- "FormGroup (label + input + error + hint + required indicator)"
|
||
- "FormRow (2-3 inline fields, responsive wrapping)"
|
||
- "FormFieldSet (grouped inputs with legend)"
|
||
- "DateRangeForm (start-date + end-date picker)"
|
||
- "AddressInput (street + city + state + zip, auto-complete)"
|
||
- "PhoneInput (country code + number, formatting)"
|
||
- "CurrencyInput (symbol + value, thousand separator)"
|
||
- "SearchBox (input + dropdown suggestions + filters)"
|
||
- "Table (headers, sorting, pagination, row selection, bulk actions)"
|
||
- "DataGrid (advanced table with freezable columns, resizable)"
|
||
design_patterns:
|
||
- "Form composition: labels, validation, error states"
|
||
- "Table composition: columns, actions, responsive behavior"
|
||
- "Layout composition: spacing, alignment, responsive wrapping"
|
||
deliverables:
|
||
- "10개 Composite 컴포넌트"
|
||
- "Storybook 문서 (모든 조합 시나리오)"
|
||
- "Props/Events 정의"
|
||
- "통합 테스트 (컴포넌트 간 상호작용)"
|
||
qa_checkpoints:
|
||
- "Composite 컴포넌트가 Primitive만 사용하는지 확인"
|
||
- "Props 전파 없음 (직접 Primitive props 전달)"
|
||
|
||
T2.3:
|
||
name: "Storybook Setup & Documentation"
|
||
owner: "프론트엔드 리더"
|
||
effort_days: 2
|
||
storybook_config:
|
||
- "Addons: controls, actions, docs, a11y, viewport, themes"
|
||
- "TypeScript support (.storybook/main.ts)"
|
||
- "Theme switcher (light/dark mode)"
|
||
- "Responsive preview (mobile/tablet/desktop)"
|
||
- "Accessibility audit (axe plugin)"
|
||
deliverables:
|
||
- ".storybook/main.ts (configuration)"
|
||
- ".storybook/preview.ts (global decorators, themes)"
|
||
- "30개 컴포넌트 stories (CSF 3.0 format)"
|
||
- "각 story에 5+ variants"
|
||
- "Accessibility testing in storybook"
|
||
qa_checkpoints:
|
||
- "'npm run storybook' 실행 (localhost:6006)"
|
||
- "모든 컴포넌트 렌더링 (visual check)"
|
||
- "Accessibility audit 통과"
|
||
|
||
T2.4:
|
||
name: "Component Testing Strategy (Unit + Visual)"
|
||
owner: "QA 리더 + 프론트엔드"
|
||
effort_days: 3
|
||
testing_approach:
|
||
- "Unit tests (Vitest): props, events, state changes"
|
||
- "예: Button click emits 'click' event"
|
||
- "예: Input value updates via v-model"
|
||
- "예: Disabled state prevents interaction"
|
||
- "Visual regression (Chromatic/Percy)"
|
||
- "Storybook snapshot 비교"
|
||
- "각 variant마다 스냅샷"
|
||
- "Accessibility tests (axe-core)"
|
||
- "각 컴포넌트 WCAG 2.1 AA 검증"
|
||
- "Integration tests (Vue Test Utils)"
|
||
- "여러 컴포넌트 조합 (FormGroup + Button)"
|
||
deliverables:
|
||
- "30개 컴포넌트 단위 테스트 (Vitest)"
|
||
- "Storybook 스냅샷 (Chromatic 또는 Percy)"
|
||
- "접근성 테스트 보고서"
|
||
- "테스트 커버리지 보고서 (목표: 70%)"
|
||
qa_checkpoints:
|
||
- "'npm run test' → 모든 테스트 통과"
|
||
- "Coverage report: 70%+ line coverage"
|
||
- "Visual regression: 0 unexpected changes"
|
||
|
||
T2.5:
|
||
name: "CSS-in-JS vs Tailwind Performance Analysis"
|
||
owner: "프론트엔드 성능 전문가"
|
||
effort_days: 1
|
||
analysis:
|
||
- "Bundle size impact (Tailwind: ~60KB gzip)"
|
||
- "Runtime performance (no CSS-in-JS overhead)"
|
||
- "Dark mode switching (CSS variables vs class)"
|
||
- "Customization flexibility (extend vs runtime themes)"
|
||
deliverables:
|
||
- "성능 비교 보고서"
|
||
- "최종 결정: Tailwind CSS (성능 최적화 + 개발 속도)"
|
||
decision: "Tailwind CSS (Production-ready, 커뮤니티 지원)"
|
||
|
||
---
|
||
## PHASE 3: Smart Components & Domain Logic (Week 7-8)
|
||
### 목표: API 연결, 상태 관리, 도메인 컴포넌트 완성
|
||
|
||
phase_3:
|
||
name: "Smart Components & State Management"
|
||
duration_weeks: 2
|
||
gating_criteria:
|
||
- "12개 Smart 컴포넌트 완성 (OMS/WMS/ERP 도메인별)"
|
||
- "Pinia stores 구조화 (modules: orders, inventory, products)"
|
||
- "API 클라이언트 + interceptor (인증, 에러 핸들링)"
|
||
- "모의 API로 엔드-투-엔드 통합 테스트 통과"
|
||
- "상태 관리 테스트 커버리지 80%+"
|
||
|
||
tasks:
|
||
T3.1:
|
||
name: "Pinia State Management Setup"
|
||
owner: "프론트엔드 아키텍트"
|
||
effort_days: 2
|
||
store_modules:
|
||
- "OrderStore (orders, pagination, filters, selected orders)"
|
||
- "InventoryStore (inventory levels, warehouse locations, stock transfers)"
|
||
- "ProductStore (product master, categories, search)"
|
||
- "SupplierStore (suppliers, contacts)"
|
||
- "CustomerStore (customers, segments)"
|
||
- "UserStore (current user, permissions, profile)"
|
||
- "UIStore (theme, sidebar collapsed, notifications)"
|
||
store_patterns:
|
||
- "Actions: async operations (fetchOrders, createOrder, updateOrder)"
|
||
- "Getters: computed state (filteredOrders, totalInventory)"
|
||
- "Mutations: state changes (setOrders, updateOrder) → deprecated in favor of actions"
|
||
- "Subscriptions: watch store changes (auto-save draft)"
|
||
deliverables:
|
||
- "src/stores/ directory 구조 (modules)"
|
||
- "각 store에 TypeScript interfaces"
|
||
- "Store 단위 테스트 (state 변화, actions)"
|
||
qa_checkpoints:
|
||
- "Pinia devtools에서 state/actions 가시화"
|
||
- "Time-travel debugging 작동"
|
||
|
||
T3.2:
|
||
name: "API Client & HTTP Interceptors"
|
||
owner: "프론트엔드 리더"
|
||
effort_days: 2
|
||
http_client_setup:
|
||
- "axios instance 생성 (base URL, timeout)"
|
||
- "Request interceptor (JWT 추가, timestamp)"
|
||
- "Response interceptor (에러 처리, 토큰 새로고침)"
|
||
- "Error handler (에러 코드별 UI 반응 - toast, modal, redirect)"
|
||
- "Retry logic (네트워크 에러 시 3회 재시도)"
|
||
auth_flow:
|
||
- "Login: email + password → JWT access + refresh token"
|
||
- "Token refresh: 401 에러 시 refresh token으로 새 access token 요청"
|
||
- "Logout: 토큰 삭제, store 초기화"
|
||
- "Permission check: 라우터 가드 (beforeEach)"
|
||
deliverables:
|
||
- "src/services/api.ts (axios 인스턴스)"
|
||
- "src/services/auth.ts (로그인/로그아웃/토큰 갱신)"
|
||
- "타입 정의 (API 응답, 요청 본문)"
|
||
- "에러 핸들러 테스트"
|
||
qa_checkpoints:
|
||
- "401 에러 시 자동 토큰 갱신"
|
||
- "네트워크 에러 시 재시도 확인"
|
||
- "로그아웃 후 보호된 페이지 리다이렉트"
|
||
|
||
T3.3:
|
||
name: "Smart Components (OMS - Order Management)"
|
||
owner: "프론트엔드 개발자 (OMS 담당)"
|
||
effort_days: 4
|
||
oms_smart_components:
|
||
- "OrderSearchForm (필터: 고객, 날짜, 상태)"
|
||
- "OrderDetailPanel (주문 조회, 수정 가능)"
|
||
- "OrderLineItemsGrid (주문 라인 아이템, 추가/삭제)"
|
||
- "ShipmentScheduleForm (배송 일정 관리)"
|
||
integration_pattern:
|
||
- "컴포넌트 → Pinia action 호출 → API → 응답 → store 업데이트 → UI 반영"
|
||
- "로딩/에러 상태 UI (skeleton, error toast)"
|
||
- "Auto-save draft (debounce 2초)"
|
||
deliverables:
|
||
- "4개 OMS Smart 컴포넌트"
|
||
- "Pinia OrderStore actions (fetchOrders, createOrder, updateOrder)"
|
||
- "컴포넌트 + 스토어 통합 테스트"
|
||
qa_checkpoints:
|
||
- "Storybook에서 모의 API로 상호작용 테스트"
|
||
- "API 에러 시 UI 에러 표시"
|
||
|
||
T3.4:
|
||
name: "Smart Components (WMS - Warehouse Management)"
|
||
owner: "프론트엔드 개발자 (WMS 담당)"
|
||
effort_days: 4
|
||
wms_smart_components:
|
||
- "InventoryGrid (재고 현황, 창고별)"
|
||
- "StockTransferForm (이전 요청, 승인 워크플로우)"
|
||
- "ReceivingForm (입고 처리)"
|
||
- "PutAwayForm (적치 관리)"
|
||
deliverables:
|
||
- "4개 WMS Smart 컴포넌트"
|
||
- "Pinia InventoryStore"
|
||
qa_checkpoints:
|
||
- "재고 감소 시 자동 알림"
|
||
- "이전 요청 승인 워크플로우"
|
||
|
||
T3.5:
|
||
name: "Smart Components (ERP - Master Data)"
|
||
owner: "프론트엔드 개발자 (ERP 담당)"
|
||
effort_days: 4
|
||
erp_smart_components:
|
||
- "ProductMasterForm (상품 마스터 CRUD)"
|
||
- "SupplierMasterForm (공급사 마스터 CRUD)"
|
||
- "CustomerMasterForm (고객 마스터 CRUD)"
|
||
- "GLAccountForm (회계 계정 CRUD)"
|
||
deliverables:
|
||
- "4개 ERP Smart 컴포넌트"
|
||
- "마스터 데이터 Pinia stores"
|
||
qa_checkpoints:
|
||
- "CRUD 작업 완전성 (Create/Read/Update/Delete all work)"
|
||
|
||
T3.6:
|
||
name: "Integration Testing (Smart Components + Mock API)"
|
||
owner: "QA 리더 + 프론트엔드"
|
||
effort_days: 2
|
||
integration_tests:
|
||
- "OrderSearchForm → OrderStore.fetchOrders() → API mock → 결과 표시"
|
||
- "OrderDetailPanel 수정 → OrderStore.updateOrder() → 폼 저장"
|
||
- "InventoryGrid 새로고침 → 재고 업데이트"
|
||
tools:
|
||
- "Vitest (unit testing)"
|
||
- "Vue Test Utils (컴포넌트 테스트)"
|
||
- "MSW (Mock Service Worker, API mocking)"
|
||
deliverables:
|
||
- "12개 Smart 컴포넌트 통합 테스트"
|
||
- "MSW 설정 (.msw/handlers.ts, 30개 엔드포인트)"
|
||
- "테스트 시나리오 문서 (happy path + error cases)"
|
||
qa_checkpoints:
|
||
- "'npm run test:integration' 모두 통과"
|
||
- "Mock API 응답이 OpenAPI spec 준수"
|
||
|
||
---
|
||
## PHASE 4: Template Pages & CRUD Screens (Week 9-10)
|
||
### 목표: 11개 CRUD 템플릿 화면 완성, 레이아웃 통일
|
||
|
||
phase_4:
|
||
name: "Template Pages & Complete CRUD Screens"
|
||
duration_weeks: 2
|
||
gating_criteria:
|
||
- "11개 CRUD 템플릿 화면 완성 (List/Detail/Create/Edit/Delete)"
|
||
- "공통 레이아웃 (Header, Sidebar, Footer) 통일"
|
||
- "라우팅 구조 완성 (Vue Router, lazy loading)"
|
||
- "E2E 테스트 (Playwright, 50개 시나리오) 작성"
|
||
- "모든 화면 반응형 테스트 (모바일/태블릿/데스크톱)"
|
||
|
||
tasks:
|
||
T4.1:
|
||
name: "Layout Components (App Shell)"
|
||
owner: "프론트엔드 리더"
|
||
effort_days: 2
|
||
layout_structure:
|
||
- "AppShell (main layout wrapper)"
|
||
- "Header (navbar, user menu, notifications, search)"
|
||
- "Sidebar (navigation, collapsible, logo)"
|
||
- "Footer (copyright, links)"
|
||
- "BreadCrumb (현재 위치)"
|
||
- "PageHeader (페이지 제목, 액션 버튼)"
|
||
layout_zones:
|
||
- "Zone 1: Header (fixed, 64px height)"
|
||
- "Zone 2: Sidebar (left, 250px, collapsible)"
|
||
- "Zone 3: Main content (responsive)"
|
||
- "Zone 4: Footer (fixed bottom, 40px)"
|
||
responsive_behavior:
|
||
- "Desktop: Sidebar + Content (side-by-side)"
|
||
- "Tablet: Sidebar collapsible, Content full"
|
||
- "Mobile: Sidebar drawer, Content full"
|
||
deliverables:
|
||
- "AppShell 컴포넌트"
|
||
- "반응형 CSS grid layout"
|
||
- "Sidebar 토글 상태 (Pinia UIStore)"
|
||
- "Responsive test (Playwright)"
|
||
qa_checkpoints:
|
||
- "모든 레이아웃 영역이 고정/유동 혼합 작동"
|
||
- "모바일에서 Sidebar 드로어로 전환"
|
||
|
||
T4.2:
|
||
name: "Routing & Navigation Structure"
|
||
owner: "프론트엔드 아키텍트"
|
||
effort_days: 2
|
||
router_hierarchy:
|
||
- "/ (홈)"
|
||
- "/login (공개)"
|
||
- "/admin/"
|
||
- "dashboard"
|
||
- "/orders (OMS)"
|
||
- "[id] (detail)"
|
||
- "/inventory (WMS)"
|
||
- "[id] (detail)"
|
||
- "/products (ERP)"
|
||
- "[id] (detail)"
|
||
- "/suppliers (ERP)"
|
||
- "/customers (ERP)"
|
||
- "/accounts (ERP)"
|
||
- "/budgets (ERP)"
|
||
- "/settings (시스템 설정)"
|
||
- "/users (사용자 관리)"
|
||
- "/audit-log (감시 로그)"
|
||
router_config:
|
||
- "Meta: page title, breadcrumb, permissions"
|
||
- "Lazy loading: 라우트 코드 분할"
|
||
- "Guard: beforeEach (인증, 권한 체크)"
|
||
deliverables:
|
||
- "src/router/index.ts (라우터 설정)"
|
||
- "라우트별 메타데이터"
|
||
- "라우터 가드 (인증, RBAC)"
|
||
qa_checkpoints:
|
||
- "모든 라우트 네비게이션 작동"
|
||
- "권한 없는 페이지 접근 차단"
|
||
|
||
T4.3:
|
||
name: "CRUD Template 1-3: Order Management (OMS)"
|
||
owner: "프론트엔드 개발자"
|
||
effort_days: 4
|
||
template_1_order_list:
|
||
- "Page: /admin/orders"
|
||
- "Components: OrderSearchForm, OrderTable, Pagination"
|
||
- "Features: Search, Filter (status, date range, customer), Sort, Bulk Actions (delete, status change)"
|
||
- "Columns: Order No, Customer, Amount, Status, Created Date, Actions (View, Edit, Delete)"
|
||
template_2_order_detail:
|
||
- "Page: /admin/orders/[id]"
|
||
- "Tabs: Basic Info, Line Items, Shipments, Audit Log"
|
||
- "Features: View, Edit (save/cancel), Delete (with confirmation)"
|
||
template_3_order_create:
|
||
- "Page: /admin/orders/new"
|
||
- "Form: Customer selector, Date, Total (auto-calc), Status (default: Draft)"
|
||
- "Features: Auto-save draft, Form validation, Required field indicators"
|
||
deliverables:
|
||
- "3개 CRUD 페이지"
|
||
- "공통 패턴 재사용 (List layout, Detail layout, Form layout)"
|
||
- "API 호출 (OrderStore actions)"
|
||
qa_checkpoints:
|
||
- "Create → Read → Update → Delete 전체 흐름"
|
||
- "폼 검증 (required, format, length)"
|
||
|
||
T4.4:
|
||
name: "CRUD Template 4-6: Inventory Management (WMS)"
|
||
owner: "프론트엔드 개발자"
|
||
effort_days: 4
|
||
templates_4_6:
|
||
- "Template 4: Inventory List (warehouse, product, qty)"
|
||
- "Template 5: Stock Transfer (request form, approval workflow)"
|
||
- "Template 6: Receiving (입고 처리, 자동 계산)"
|
||
deliverables:
|
||
- "3개 CRUD 페이지"
|
||
qa_checkpoints:
|
||
- "재고 증감 로직 검증"
|
||
- "이전 승인 워크플로우"
|
||
|
||
T4.5:
|
||
name: "CRUD Template 7-11: Master Data Management (ERP)"
|
||
owner: "프론트엔드 개발자"
|
||
effort_days: 4
|
||
templates_7_11:
|
||
- "Template 7: Product Master CRUD"
|
||
- "Template 8: Supplier Master CRUD"
|
||
- "Template 9: Customer Master CRUD"
|
||
- "Template 10: GL Account CRUD"
|
||
- "Template 11: Budget Template CRUD"
|
||
common_patterns:
|
||
- "Master data list + detail view"
|
||
- "Inline edit vs modal dialog"
|
||
- "Batch import (CSV)"
|
||
- "Export (Excel, PDF)"
|
||
deliverables:
|
||
- "5개 CRUD 페이지"
|
||
qa_checkpoints:
|
||
- "마스터 데이터 CRUD 완전성"
|
||
|
||
T4.6:
|
||
name: "Responsive Testing & Cross-browser Validation"
|
||
owner: "QA 리더"
|
||
effort_days: 2
|
||
responsive_tests:
|
||
- "Breakpoints: 320px (mobile), 768px (tablet), 1920px (desktop)"
|
||
- "Layouts: 모든 11개 페이지"
|
||
- "Components: 모든 Primitive/Composite/Smart"
|
||
- "Touch interaction: 모바일에서 클릭, 스크롤, 폼 입력"
|
||
cross_browser:
|
||
- "Chrome (latest)"
|
||
- "Firefox (latest)"
|
||
- "Safari (latest)"
|
||
- "Edge (latest)"
|
||
tools:
|
||
- "Playwright (viewport emulation)"
|
||
- "BrowserStack (실제 기기)"
|
||
deliverables:
|
||
- "Responsive test suite (Playwright)"
|
||
- "Cross-browser test results"
|
||
qa_checkpoints:
|
||
- "모든 브레이크포인트에서 레이아웃 정렬"
|
||
- "모바일에서 터치 인터페이스 사용 가능"
|
||
|
||
T4.7:
|
||
name: "E2E Test Suite (Playwright)"
|
||
owner: "QA 리더 + 자동화 엔지니어"
|
||
effort_days: 3
|
||
e2e_scenarios:
|
||
- "User Journey 1: Login → Dashboard → Search Orders → View Detail → Edit → Save"
|
||
- "User Journey 2: Create Order → Add Line Items → Submit → Verify Email"
|
||
- "User Journey 3: Inventory Adjustment → Stock Transfer → Approval → Posting"
|
||
- "User Journey 4: Product Import (CSV) → Verify in List → Edit"
|
||
- "User Journey 5: User Management → Create User → Assign Role → Verify Access"
|
||
- "Error Scenarios: Network failure, Timeout, 401 Unauthorized, 404 Not Found, etc."
|
||
test_coverage:
|
||
- "Happy path: 주요 비즈니스 흐름"
|
||
- "Edge cases: 빈 상태, 경계값"
|
||
- "Error paths: API 실패, 입력 오류"
|
||
deliverables:
|
||
- "tests/e2e/ (50개 Playwright 테스트)"
|
||
- "테스트 리포트 (HTML, JSON)"
|
||
- "CI/CD 자동 실행"
|
||
qa_checkpoints:
|
||
- "'npm run e2e' 모두 통과 (<2분)"
|
||
- "CI에서 매 PR마다 자동 실행"
|
||
|
||
---
|
||
## PHASE 5: Design System & Component Library Publication (Week 11)
|
||
### 목표: Storybook 배포, npm 패키지 공개, 문서 완성
|
||
|
||
phase_5:
|
||
name: "Design System & Reusable Component Library"
|
||
duration_weeks: 1
|
||
gating_criteria:
|
||
- "Storybook 배포 (GitHub Pages / Netlify)"
|
||
- "npm 패키지 (@quantengine/ui) 공개"
|
||
- "컴포넌트 라이브러리 문서 100% 커버리지"
|
||
- "디자인 토큰 정의 완료 (색, 타이포, 스페이싱)"
|
||
- "컴포넌트 마이그레이션 가이드 (기존 → 신규)"
|
||
|
||
tasks:
|
||
T5.1:
|
||
name: "Design System Formalization"
|
||
owner: "디자인 시스템 리더"
|
||
effort_days: 2
|
||
deliverables:
|
||
- "Design Tokens (JSON)"
|
||
- "colors: primary, secondary, neutral, semantic"
|
||
- "typography: font-family, sizes, weights, line-heights"
|
||
- "spacing: 8px grid"
|
||
- "shadows, borders, border-radius"
|
||
- "Component API Documentation (TypeScript 타입)"
|
||
- "사용 예제 (code snippets)"
|
||
- "색상 대비 및 접근성 검증 결과"
|
||
qa_checkpoints:
|
||
- "디자인 토큰이 Figma와 코드에서 동기화됨"
|
||
- "색상 대비 WCAG AA 통과"
|
||
|
||
T5.2:
|
||
name: "Storybook Deployment"
|
||
owner: "DevOps + 프론트엔드"
|
||
effort_days: 1
|
||
deployment_targets:
|
||
- "GitHub Pages (free)"
|
||
- "또는 Netlify (better preview)"
|
||
deliverables:
|
||
- "Storybook 배포 URL (예: https://storybook.quantengine.dev)"
|
||
- "자동 배포 CI/CD 설정"
|
||
- "Chromatic integration (visual regression)"
|
||
qa_checkpoints:
|
||
- "URL 접근 가능"
|
||
- "모든 30개 컴포넌트 렌더링"
|
||
|
||
T5.3:
|
||
name: "npm Package Publication (@quantengine/ui)"
|
||
owner: "DevOps + 프론트엔드"
|
||
effort_days: 2
|
||
package_structure:
|
||
- "package.json (scope: @quantengine/ui, version: 0.1.0)"
|
||
- "TypeScript 타입 포함 (.d.ts)"
|
||
- "ESM + CJS 빌드 (dual output)"
|
||
- "Tree-shakeable exports"
|
||
build_configuration:
|
||
- "Vite library build (rollup backend)"
|
||
- "Output: dist/index.js, dist/index.d.ts"
|
||
- "Bundle size: <100KB (gzip)"
|
||
deliverables:
|
||
- "npm registry에 공개"
|
||
- "설치: npm install @quantengine/ui"
|
||
- "README 사용 가이드"
|
||
qa_checkpoints:
|
||
- "npm install 성공"
|
||
- "타입 자동 완성 (TypeScript IDE support)"
|
||
|
||
T5.4:
|
||
name: "Component Migration Guide (Legacy → Modern)"
|
||
owner: "PM + 기술 리더"
|
||
effort_days: 1
|
||
guide_content:
|
||
- "Component naming changes"
|
||
- "Props/Events API 변경"
|
||
- "Migration scripts (자동 변환 도구, AST 기반)"
|
||
deliverables:
|
||
- "MIGRATION.md"
|
||
- "마이그레이션 스크립트 (optional)"
|
||
target_audience:
|
||
- "기존 프로젝트 유지보수 팀"
|
||
|
||
---
|
||
## PHASE 6: Permission & Security Implementation (Week 12)
|
||
### 목표: RBAC, 데이터 권한, 감시 로그, 보안 테스트 완성
|
||
|
||
phase_6:
|
||
name: "Authorization, Security & Audit Trail"
|
||
duration_weeks: 1
|
||
gating_criteria:
|
||
- "RBAC 구현 (5개 역할, 50개 권한)"
|
||
- "데이터 레벨 권한 (사용자는 자신 데이터만 접근)"
|
||
- "감시 로그 자동 기록 (모든 CRUD 작업)"
|
||
- "보안 테스트 (OWASP Top 10 검증)"
|
||
- "권한 거부 시 UI 명확한 메시지"
|
||
|
||
tasks:
|
||
T6.1:
|
||
name: "Role-Based Access Control (RBAC) Design"
|
||
owner: "보안 아키텍트 + PM"
|
||
effort_days: 2
|
||
roles:
|
||
- "Admin (모든 권한)"
|
||
- "Manager (부서 데이터 관리)"
|
||
- "Operator (데이터 입력/조회)"
|
||
- "Viewer (조회 전용)"
|
||
- "Analyst (분석/리포트 생성)"
|
||
permissions:
|
||
- "order.create, order.read, order.update, order.delete (4개 × 11 CRUD = 44개)"
|
||
- "user.manage, settings.configure (6개)"
|
||
- "audit_log.read (감시 로그 조회)"
|
||
implementation:
|
||
- "JWT에 roles/permissions 포함"
|
||
- "프론트엔드: permission guard (v-if, route meta)"
|
||
- "백엔드: API 엔드포인트 @Authorize 데코레이터"
|
||
deliverables:
|
||
- "RBAC 정의서 (role × resource × action 매트릭스)"
|
||
- "권한 초기화 스크립트 (seed.sql)"
|
||
- "Vue 권한 가드 (composable)"
|
||
qa_checkpoints:
|
||
- "Admin 사용자: 모든 페이지 접근 가능"
|
||
- "Viewer 사용자: 수정/삭제 버튼 숨김"
|
||
- "Operator 사용자: 설정 페이지 접근 불가"
|
||
|
||
T6.2:
|
||
name: "Data-Level Authorization (User Own Data)"
|
||
owner: "백엔드 + 프론트엔드"
|
||
effort_days: 2
|
||
data_isolation:
|
||
- "User X는 자신이 생성한 Order만 조회/수정"
|
||
- "Manager Y는 부서 내 모든 Order 조회"
|
||
- "Admin은 모든 데이터 조회"
|
||
implementation:
|
||
- "SQL WHERE 절에 사용자 ID 자동 추가"
|
||
- "API 응답에서 권한 없는 필드 제외"
|
||
- "프론트엔드: API 응답이 예상 범위 내인지 검증"
|
||
deliverables:
|
||
- "데이터 권한 정책 (정책 문서)"
|
||
- "데이터 레벨 필터 구현"
|
||
qa_checkpoints:
|
||
- "User A가 User B의 주문 수정 시도 → 403 Forbidden"
|
||
- "목록 조회 시 자신 데이터만 반환"
|
||
|
||
T6.3:
|
||
name: "Audit Trail & Logging"
|
||
owner: "백엔드 + 프론트엔드"
|
||
effort_days: 2
|
||
audit_requirements:
|
||
- "모든 CREATE: audit_log에 "생성", 생성자, 생성 시간 기록"
|
||
- "모든 UPDATE: 변경 전/후 값, 변경자, 시간 기록"
|
||
- "모든 DELETE: soft-delete, 삭제자, 시간 기록"
|
||
- "LOGIN/LOGOUT: 사용자, 시간, IP 주소 기록"
|
||
- "PERMISSION DENIED: 사용자, 시도한 작업, 거부 사유 기록"
|
||
implementation:
|
||
- "PostgreSQL trigger (audit_log 자동 입력)"
|
||
- "또는 애플리케이션 레벨 AOP/middleware"
|
||
deliverables:
|
||
- "audit_log 테이블 schema"
|
||
- "Audit UI page (/admin/audit-log)"
|
||
- "Audit 검색/필터 기능"
|
||
qa_checkpoints:
|
||
- "/admin/audit-log에서 모든 변경 이력 조회 가능"
|
||
- "감시 로그 조회 권한 (Viewer는 불가)"
|
||
|
||
T6.4:
|
||
name: "Security Testing (OWASP Top 10)"
|
||
owner: "보안 테스터"
|
||
effort_days: 2
|
||
owasp_checks:
|
||
- "A1: Broken access control (RBAC/데이터 권한 검증)"
|
||
- "A2: Cryptographic failures (HTTPS, JWT 암호화)"
|
||
- "A3: Injection (SQL injection 테스트, XSS 테스트)"
|
||
- "A4: Insecure design (API 설계 검토)"
|
||
- "A5: Security misconfiguration (headers, CORS)"
|
||
- "A6: Vulnerable components (npm audit, SNYK)"
|
||
- "A7: Authentication failures (토큰 만료, refresh)"
|
||
- "A8: Data integrity failures (CSRF 토큰, SameSite cookie)"
|
||
- "A9: Logging & monitoring (감시 로그 완성성)"
|
||
- "A10: SSRF (external API 호출 시 validation)"
|
||
tools:
|
||
- "npm audit (의존성 취약점)"
|
||
- "SNYK (연속 모니터링)"
|
||
- "OWASP ZAP (자동 스캔)"
|
||
- "Manual penetration testing (권한 우회 등)"
|
||
deliverables:
|
||
- "보안 테스트 보고서"
|
||
- "취약점 수정 계획"
|
||
qa_checkpoints:
|
||
- "Critical 취약점: 0개"
|
||
- "High 취약점: <3개 (수정 계획 있음)"
|
||
|
||
---
|
||
## PHASE 7: Performance Optimization (Week 13)
|
||
### 목표: 번들 최적화, 로딩 성능, 런타임 성능, Lighthouse 90+ 달성
|
||
|
||
phase_7:
|
||
name: "Performance Optimization & Monitoring"
|
||
duration_weeks: 1
|
||
gating_criteria:
|
||
- "Lighthouse score 90+ (desktop/mobile)"
|
||
- "First Contentful Paint <1s"
|
||
- "Largest Contentful Paint <2.5s"
|
||
- "번들 크기 <500KB (gzip, 메인 청크)"
|
||
- "응답 시간 <200ms (P95)"
|
||
- "Sentry 에러 모니터링 설정"
|
||
|
||
tasks:
|
||
T7.1:
|
||
name: "Bundle Size Optimization"
|
||
owner: "프론트엔드 성능 전문가"
|
||
effort_days: 2
|
||
optimization_techniques:
|
||
- "Route-based 코드 분할 (lazy loading)"
|
||
- "불필요한 의존성 제거"
|
||
- "Polyfill 최소화 (modern browsers 타게팅)"
|
||
- "CSS/JS 압축 (minification)"
|
||
- "이미지 최적화 (WebP, 반응형)"
|
||
- "Tree-shaking 검증"
|
||
target_metrics:
|
||
- "Main bundle: <300KB (gzip)"
|
||
- "Initial load: <500KB (gzip, all resources)"
|
||
- "각 route chunk: <100KB (gzip)"
|
||
tools:
|
||
- "webpack-bundle-analyzer"
|
||
- "Vite build stats"
|
||
- "npm list --depth=0 (의존성 검토)"
|
||
deliverables:
|
||
- "번들 분석 리포트"
|
||
- "최적화 체크리스트"
|
||
- "Bundle budget (.size-budget.json)"
|
||
qa_checkpoints:
|
||
- "'npm run build' 후 dist/ 크기 확인"
|
||
- "Chrome DevTools → Network 탭에서 시간 측정"
|
||
|
||
T7.2:
|
||
name: "Runtime Performance Optimization"
|
||
owner: "프론트엔드 성능 전문가"
|
||
effort_days: 2
|
||
optimization_areas:
|
||
- "Vue 컴포넌트 렌더링 (v-if vs v-show, computed vs methods)"
|
||
- "List 성능 (virtualization for 1000+ rows)"
|
||
- "Image lazy loading"
|
||
- "API 응답 캐싱 (localStorage, HTTP cache headers)"
|
||
- "Debounce/throttle (search, scroll)"
|
||
tools:
|
||
- "Vue DevTools Profiler"
|
||
- "Chrome Performance tab"
|
||
- "Lighthouse"
|
||
deliverables:
|
||
- "성능 개선 결과 (before/after metrics)"
|
||
- "성능 모니터링 대시보드 (Sentry RUM)"
|
||
qa_checkpoints:
|
||
- "List with 1000 rows < 100ms 렌더링"
|
||
- "Search 입력 debounce 300ms"
|
||
|
||
T7.3:
|
||
name: "Error Monitoring & Observability (Sentry)"
|
||
owner: "DevOps + 프론트엔드"
|
||
effort_days: 1
|
||
sentry_setup:
|
||
- "Sentry project 생성"
|
||
- "SDK 통합 (Vue 3 + TypeScript)"
|
||
- "Error boundary 구현"
|
||
- "Source maps 업로드"
|
||
- "Release tracking (Sentry release = git tag)"
|
||
monitoring_scope:
|
||
- "Unhandled errors (자동 캡처)"
|
||
- "Performance metrics (Web Vitals)"
|
||
- "Custom events (비즈니스 메트릭)"
|
||
- "Session replay (유저 상호작용 기록)"
|
||
deliverables:
|
||
- "Sentry 프로젝트 설정"
|
||
- "에러 알림 규칙 (Slack integration)"
|
||
qa_checkpoints:
|
||
- "테스트 에러 발생 → Sentry에서 수신 확인"
|
||
- "Lighthouse score 측정"
|
||
|
||
---
|
||
## PHASE 8: Staging & User Acceptance Testing (Week 14)
|
||
### 목표: Staging 환경 배포, UAT 실행, 사용자 피드백 수집
|
||
|
||
phase_8:
|
||
name: "User Acceptance Testing & Pre-Launch"
|
||
duration_weeks: 1
|
||
gating_criteria:
|
||
- "Staging 환경에 최신 코드 배포"
|
||
- "UAT 실행: 20명 사용자 × 2주"
|
||
- "결함 추적: Critical 0개, High <5개"
|
||
- "사용성 테스트 (SUS score 70+)"
|
||
- "성능 테스트 (부하: 100 동시 사용자)"
|
||
|
||
tasks:
|
||
T8.1:
|
||
name: "Staging Environment Deployment"
|
||
owner: "DevOps + QA"
|
||
effort_days: 1
|
||
staging_setup:
|
||
- "프로덕션과 동일한 환경 (인프라, DB, API)"
|
||
- "Staging DB: 프로덕션 DB의 마스킹된 복사본"
|
||
- "SSL 인증서 (staging domain)"
|
||
- "모니터링 (로그, 메트릭)"
|
||
deliverables:
|
||
- "Staging URL (예: https://staging.quantengine.dev)"
|
||
- "Staging DB 마스킹 스크립트"
|
||
qa_checkpoints:
|
||
- "Staging에서 로그인 가능"
|
||
- "데이터 조회/수정 작동"
|
||
|
||
T8.2:
|
||
name: "User Acceptance Testing (UAT)"
|
||
owner: "QA 리더 + 사용자 대표"
|
||
effort_days: 7
|
||
uat_participants:
|
||
- "OMS: 주문 관리 담당자 (5명)"
|
||
- "WMS: 창고 담당자 (5명)"
|
||
- "ERP: 마스터 데이터 관리자 (5명)"
|
||
- "관리자: 시스템 관리자 (3명)"
|
||
- "분석가: 리포트/분석 담당자 (2명)"
|
||
uat_scenarios:
|
||
- "주요 비즈니스 프로세스 (15개)"
|
||
- "엣지 케이스 (각 5개)"
|
||
- "성능 감지 (느린 화면, 오류)"
|
||
defect_tracking:
|
||
- "Jira / Linear (결함 추적)"
|
||
- "우선순위: Critical (즉시 수정), High (이번 스프린트), Medium (다음 스프린트)"
|
||
deliverables:
|
||
- "UAT 테스트 케이스 (50개)"
|
||
- "결함 리포트 (발견된 모든 이슈)"
|
||
- "사용자 피드백 요약"
|
||
qa_checkpoints:
|
||
- "Critical 결함 수정 & 재테스트"
|
||
- "사용자 서명 (UAT 완료 확인서)"
|
||
|
||
T8.3:
|
||
name: "System Performance Testing (Load Test)"
|
||
owner: "성능 테스터 + DevOps"
|
||
effort_days: 1
|
||
load_test_scenarios:
|
||
- "동시 사용자 100명, 10분 유지"
|
||
- "거래: 주당 5000 주문 처리 (시뮬레이션)"
|
||
- "Database 쿼리 응답 시간 <200ms (P95)"
|
||
- "API 처리량 (throughput) 50 req/s"
|
||
tools:
|
||
- "Apache JMeter"
|
||
- "또는 Gatling"
|
||
deliverables:
|
||
- "Load test 리포트 (응답 시간, 처리량, 에러율)"
|
||
qa_checkpoints:
|
||
- "P95 응답 시간 <200ms"
|
||
- "에러율 <1%"
|
||
|
||
T8.4:
|
||
name: "Training & Documentation for Users"
|
||
owner: "PM + 기술 리더"
|
||
effort_days: 2
|
||
training_materials:
|
||
- "OMS 사용 설명서 (PDF, 20페이지)"
|
||
- "WMS 사용 설명서 (PDF, 20페이지)"
|
||
- "ERP 사용 설명서 (PDF, 20페이지)"
|
||
- "온라인 튜토리얼 동영상 (각 10분)"
|
||
- "FAQ 문서"
|
||
training_sessions:
|
||
- "OMS 팀 (2시간)"
|
||
- "WMS 팀 (2시간)"
|
||
- "ERP 팀 (2시간)"
|
||
- "관리자 (1시간)"
|
||
deliverables:
|
||
- "사용자 설명서 (PDF, HTML)"
|
||
- "튜토리얼 동영상 (YouTube, 또는 내부 wiki)"
|
||
- "교육 이력 기록"
|
||
|
||
---
|
||
## PHASE 9: Production Deployment & Launch (Week 15)
|
||
### 목표: 프로덕션 배포, 실시간 모니터링, 사용자 전환
|
||
|
||
phase_9:
|
||
name: "Production Launch & Go-Live"
|
||
duration_weeks: 1
|
||
gating_criteria:
|
||
- "프로덕션 배포 성공 (blue-green deployment)"
|
||
- "실시간 모니터링 활성화 (Sentry, DataDog)"
|
||
- "헬스 체크 통과 (모든 엔드포인트 200 OK)"
|
||
- "기술 지원팀 준비 (on-call, runbook)"
|
||
- "사용자 이메일 공지 (업그레이드 안내)"
|
||
|
||
tasks:
|
||
T9.1:
|
||
name: "Production Deployment Strategy"
|
||
owner: "DevOps + 프론트엔드"
|
||
effort_days: 1
|
||
deployment_approach:
|
||
- "Blue-green deployment (무중단)"
|
||
- "Blue: 현재 프로덕션 (v0.0.x)"
|
||
- "Green: 신규 배포 (v0.1.0)"
|
||
- "트래픽 전환: 1% → 10% → 50% → 100% (canary release)"
|
||
- "각 단계 10분 대기, 메트릭 확인"
|
||
rollback_plan:
|
||
- "자동 롤백 trigger: 에러율 >2%, 응답 시간 >500ms"
|
||
- "수동 롤백: 한 버튼으로 Blue로 복구"
|
||
- "복구 시간 목표 (RTO): <5분"
|
||
deliverables:
|
||
- "배포 체크리스트"
|
||
- "롤백 절차 (runbook)"
|
||
- "배포 스크립트 (자동화)"
|
||
qa_checkpoints:
|
||
- "Staging에서 배포 리허설 실행"
|
||
- "모든 헬스 체크 통과"
|
||
|
||
T9.2:
|
||
name: "Production Monitoring & Alerting"
|
||
owner: "DevOps + SRE"
|
||
effort_days: 1
|
||
monitoring_stack:
|
||
- "Application Monitoring (Sentry, New Relic)"
|
||
- "Infrastructure Monitoring (DataDog, Prometheus)"
|
||
- "Log Aggregation (ELK Stack, 또는 Datadog)"
|
||
- "Uptime Monitoring (Pingdom)"
|
||
alert_rules:
|
||
- "Error rate > 1%"
|
||
- "Response time P95 > 500ms"
|
||
- "Database connection pool exhausted"
|
||
- "Disk space < 10%"
|
||
- "CPU > 80%"
|
||
notification:
|
||
- "Slack #alerts-prod channel"
|
||
- "PagerDuty on-call"
|
||
- "SMS for critical"
|
||
deliverables:
|
||
- "모니터링 대시보드 (Grafana)"
|
||
- "알람 규칙 설정"
|
||
qa_checkpoints:
|
||
- "테스트 알람 발생 → 팀에 전달 확인"
|
||
|
||
T9.3:
|
||
name: "Go-Live Support & Monitoring"
|
||
owner: "기술 지원팀 + DevOps"
|
||
effort_days: 3
|
||
support_setup:
|
||
- "Support team on-call (24/7, 1주일)"
|
||
- "Escalation path (문제 → 개발팀)"
|
||
- "Communication channel (Slack, email)"
|
||
- "Incident response (SLA: P1 <30분, P2 <2시간)"
|
||
go_live_checklist:
|
||
- "모든 엔드포인트 200 OK"
|
||
- "데이터베이스 연결 정상"
|
||
- "외부 API 연동 (KIS 등) 정상"
|
||
- "메일 발송 정상"
|
||
- "로그 기록 정상"
|
||
deliverables:
|
||
- "Go-live runbook"
|
||
- "Incident response guide"
|
||
- "Support escalation matrix"
|
||
qa_checkpoints:
|
||
- "배포 후 30분 내 critical 문제 없음"
|
||
|
||
---
|
||
## PHASE 10: Post-Launch Stabilization & Bug Fixes (Week 16-17)
|
||
### 목표: 초기 결함 수정, 성능 미세조정, 사용자 피드백 반영
|
||
|
||
phase_10:
|
||
name: "Production Stabilization & Hotfixes"
|
||
duration_weeks: 2
|
||
gating_criteria:
|
||
- "Critical/High 결함 모두 해결"
|
||
- "에러율 <0.5% 유지"
|
||
- "응답 시간 안정화 (P95 <250ms)"
|
||
- "사용자 만족도 조사 (NPS 50+)"
|
||
- "데이터 무결성 검증 (감시 로그 완전성)"
|
||
|
||
tasks:
|
||
T10.1:
|
||
name: "Bug Triage & Hotfix Process"
|
||
owner: "QA + 프론트엔드"
|
||
effort_days: 7
|
||
bug_process:
|
||
- "발견 → 분류 (Critical/High/Medium/Low)"
|
||
- "Critical: 1시간 이내 hotfix"
|
||
- "High: 24시간 이내"
|
||
- "Medium/Low: 다음 스프린트"
|
||
deliverables:
|
||
- "결함 해결 이력 (Jira 포함)"
|
||
- "Hotfix 배포 기록"
|
||
qa_checkpoints:
|
||
- "각 hotfix 배포 후 회귀 테스트"
|
||
|
||
T10.2:
|
||
name: "Performance Tuning & Optimization"
|
||
owner: "프론트엔드 + 백엔드 성능 전문가"
|
||
effort_days: 3
|
||
tuning_actions:
|
||
- "느린 쿼리 최적화 (DB index 추가)"
|
||
- "API 응답 캐싱 추가 (HTTP, Redis)"
|
||
- "이미지 최적화 (WebP, CDN)"
|
||
- "메모리 누수 디버깅 (Chrome DevTools)"
|
||
deliverables:
|
||
- "성능 개선 보고서 (before/after)"
|
||
qa_checkpoints:
|
||
- "P95 응답 시간 개선 확인"
|
||
|
||
T10.3:
|
||
name: "User Feedback Collection & Prioritization"
|
||
owner: "PM + UX"
|
||
effort_days: 2
|
||
feedback_channels:
|
||
- "In-app feedback widget"
|
||
- "이메일 설문"
|
||
- "사용자 인터뷰 (5명, 30분 각)"
|
||
feedback_analysis:
|
||
- "주제별 분류 (UI/UX, 성능, 기능)"
|
||
- "우선순위 결정 (영향도 × 빈도)"
|
||
deliverables:
|
||
- "사용자 피드백 요약"
|
||
- "Phase 12 백로그 입력"
|
||
qa_checkpoints:
|
||
- "모든 피드백에 응답"
|
||
|
||
---
|
||
## PHASE 11: Documentation & Knowledge Transfer (Week 18)
|
||
### 목표: 완전한 문서화, 팀 지식 이전, 수수료 핸드오버
|
||
|
||
phase_11:
|
||
name: "Documentation, Training & Handover"
|
||
duration_weeks: 1
|
||
gating_criteria:
|
||
- "기술 문서 100% 완성 (아키텍처, API, 배포)"
|
||
- "사용자 설명서 4개 언어 지원 (한국어, 영어, 일본어, 중국어)"
|
||
- "운영팀 교육 완료 (배포, 모니터링, 장애 대응)"
|
||
- "지식 베이스 (Wiki) 구축"
|
||
- "코드 리뷰 체크리스트 확정"
|
||
|
||
tasks:
|
||
T11.1:
|
||
name: "Technical Documentation Completion"
|
||
owner: "기술 리더 + 문서 작성자"
|
||
effort_days: 3
|
||
documentation:
|
||
- "아키텍처 설계 문서 (20페이지)"
|
||
- "시스템 다이어그램 (C4 모델)"
|
||
- "데이터 흐름"
|
||
- "마이크로서비스 경계"
|
||
- "API 문서 (OpenAPI 3.0, 30개 엔드포인트)"
|
||
- "데이터베이스 스키마 (DBML + ERD)"
|
||
- "배포 가이드 (CI/CD, Blue-green, Rollback)"
|
||
- "운영 가이드 (모니터링, 로그 분석, 문제 해결)"
|
||
- "보안 문서 (RBAC, 데이터 권한, 감시)"
|
||
- "성능 최적화 가이드"
|
||
deliverables:
|
||
- "GitHub Wiki 또는 Gitbook (온라인 호스팅)"
|
||
- "PDF 문서 (아카이빙)"
|
||
qa_checkpoints:
|
||
- "모든 문서가 latest code와 동기화"
|
||
|
||
T11.2:
|
||
name: "Operations Team Training"
|
||
owner: "DevOps + SRE + PM"
|
||
effort_days: 2
|
||
training_topics:
|
||
- "배포 프로세스 (CI/CD, Blue-green)"
|
||
- "모니터링 & 알람 설정"
|
||
- "로그 분석 및 문제 진단"
|
||
- "장애 대응 절차 (runbook)"
|
||
- "성능 튜닝"
|
||
- "보안 패치 적용"
|
||
- "백업 & 복구"
|
||
training_format:
|
||
- "온사이트 교육 (2일)"
|
||
- "온라인 문서 + 동영상"
|
||
- "Q&A 세션"
|
||
deliverables:
|
||
- "교육 이수 증명 (서명)"
|
||
- "교육 자료 (PDF, 동영상)"
|
||
qa_checkpoints:
|
||
- "Ops팀이 배포/롤백 수행 가능 확인"
|
||
|
||
T11.3:
|
||
name: "Knowledge Base (Wiki) & FAQ"
|
||
owner: "PM + 기술 리더"
|
||
effort_days: 2
|
||
wiki_structure:
|
||
- "시작하기 (로컬 셋업, 배포)"
|
||
- "아키텍처 (시스템, 컴포넌트)"
|
||
- "API 가이드 (각 엔드포인트 사용법)"
|
||
- "프론트엔드 가이드 (컴포넌트 라이브러리)"
|
||
- "운영 가이드 (배포, 모니터링)"
|
||
- "FAQ & 문제 해결"
|
||
deliverables:
|
||
- "GitHub Wiki pages (또는 Notion/Gitbook)"
|
||
- "검색 기능"
|
||
- "버전별 문서 관리"
|
||
|
||
T11.4:
|
||
name: "Code Review Checklist & Standards Finalization"
|
||
owner: "기술 리더"
|
||
effort_days: 1
|
||
checklist_items:
|
||
- "TypeScript strict mode 준수"
|
||
- "컴포넌트 API 일관성 (Props, Events, Slots 이름)"
|
||
- "접근성 (WCAG 2.1 AA)"
|
||
- "성능 (번들 크기, 렌더링 시간)"
|
||
- "테스트 (70%+ 커버리지)"
|
||
- "문서화 (JSDoc, Storybook)"
|
||
- "보안 (XSS, CSRF, injection)"
|
||
deliverables:
|
||
- "Code review checklist (.github/CODEOWNERS)"
|
||
- "Lint/format 자동화 (pre-commit hook)"
|
||
|
||
---
|
||
## PHASE 12: Future Roadmap & Continuous Improvement
|
||
### 목표: 다음 분기 계획, 기술 부채 감소, 확장성 확보
|
||
|
||
phase_12:
|
||
name: "Future Roadmap & Continuous Improvement"
|
||
duration: "Ongoing (분기별 검토)"
|
||
strategic_direction:
|
||
- "기능 확장: 보고서 빌더, 모바일 앱, API 게이트웨이"
|
||
- "성능 고도화: 마이크로프론트엔드 전환, GraphQL 통합"
|
||
- "운영 효율화: 자동화, 예측 분석, AI 통합"
|
||
- "기술 부채 감소: 레거시 코드 리팩토링, 의존성 업그레이드"
|
||
|
||
backlog_candidates:
|
||
- B1: "Advanced Reporting & Dashboard (Custom charts, data export)"
|
||
- B2: "Mobile App (React Native or Flutter)"
|
||
- B3: "API Gateway & Rate Limiting"
|
||
- B4: "Full-text Search (Elasticsearch integration)"
|
||
- B5: "Real-time Collaboration (WebSocket, Operational Transformation)"
|
||
- B6: "Workflow Automation (BPM engine)"
|
||
- B7: "Prediction Analytics (ML model integration)"
|
||
- B8: "Multi-language Support (Complete i18n)"
|
||
- B9: "Offline Mode (Service Workers)"
|
||
- B10: "3D Warehouse Visualization"
|
||
|
||
---
|
||
## 성공 기준 & 측정 체계 (OKR 기반)
|
||
|
||
### 정량화된 목표
|
||
|
||
| Phase | Objective | Key Result | Success Metric | Measurement |
|
||
|-------|-----------|------------|-----------------|------------|
|
||
| **0** | 요구사항 정의 | 모든 스테이크홀더 FRD 서명 | 100% compliance | 서명 문서 |
|
||
| **1** | 개발 기반 구축 | 팀 온보딩 100% | 모든 개발자 로컬 셋업 완료 | 설정 체크리스트 |
|
||
| **2** | Primitive & Composite | 30개 컴포넌트 완성 | 100% Storybook 문서화 | Storybook deployment |
|
||
| **3** | Smart 컴포넌트 | 12개 도메인 컴포넌트 | API 통합 완료 | E2E 테스트 통과 |
|
||
| **4** | CRUD 템플릿 | 11개 화면 완성 | 모든 CRUD 작동 | 50개 E2E 테스트 |
|
||
| **5** | 디자인 시스템 | npm 패키지 공개 | 30개 컴포넌트 라이브러리 | npm.js registry |
|
||
| **6** | 보안 & RBAC | 50개 권한 정의 | Critical 취약점 0개 | 보안 감시 보고서 |
|
||
| **7** | 성능 최적화 | Lighthouse 90+ | P95 응답 <250ms | Lighthouse score |
|
||
| **8** | UAT | 100명 사용자 테스트 | Critical 버그 0개 | 결함 추적 닫힘 |
|
||
| **9** | 프로덕션 배포 | 무중단 배포 | 배포 시간 <30분 | 배포 로그 |
|
||
| **10** | 안정화 | 에러율 <0.5% | 가용성 99.9% | 모니터링 대시보드 |
|
||
| **11** | 문서화 | 100% 커버리지 | 모든 기술자가 이해 가능 | 기술 검증 테스트 |
|
||
|
||
### 품질 지표
|
||
|
||
| 지표 | 목표 | 측정 방법 |
|
||
|------|------|---------|
|
||
| **테스트 커버리지** | 70%+ | Vitest coverage report |
|
||
| **TypeScript 타입 안정성** | 100% (strict mode) | npm run type-check |
|
||
| **접근성 (WCAG 2.1)** | AA 이상 | axe-core audit |
|
||
| **번들 크기** | <500KB (gzip) | webpack-bundle-analyzer |
|
||
| **성능 (First Paint)** | <1s | Lighthouse |
|
||
| **가용성** | 99.9% | Uptime monitoring |
|
||
| **응답 시간 (P95)** | <250ms | Application monitoring |
|
||
| **에러율** | <0.5% | Sentry/error tracking |
|
||
| **코드 리뷰 승인율** | 100% | GitHub/Gitea PR metrics |
|
||
| **문서화 완성도** | 100% | Wiki/Gitbook coverage |
|
||
|
||
---
|
||
## 리스크 매트릭스 (Phase별)
|
||
|
||
### Phase 0-2 (요구사항 ~ 기반)
|
||
| 리스크 | 확률 | 영향 | 대응 |
|
||
|------|------|------|------|
|
||
| 요구사항 크리프 | HIGH | HIGH | 범위 고정, Phase 별 분할 |
|
||
| TypeScript 학습 곡선 | MEDIUM | MEDIUM | 스프린트 0 교육, 페어프로그래밍 |
|
||
| API 스펙 변경 | MEDIUM | MEDIUM | Mock API, 계약 테스트 |
|
||
|
||
### Phase 3-6 (Smart ~ Security)
|
||
| 리스크 | 확률 | 영향 | 대응 |
|
||
|------|------|------|------|
|
||
| 상태 관리 복잡성 | MEDIUM | MEDIUM | Pinia 구조 설계, 테스트 |
|
||
| 권한 설계 누락 | MEDIUM | HIGH | RBAC 상세 검토, 보안 감시 |
|
||
| 성능 병목 | LOW | HIGH | 조기 성능 측정, 최적화 |
|
||
|
||
### Phase 7-11 (성능 ~ 배포)
|
||
| 리스크 | 확률 | 영향 | 대응 |
|
||
|------|------|------|------|
|
||
| 프로덕션 장애 | LOW | CRITICAL | 무중단 배포, 롤백 계획 |
|
||
| 데이터 손실 | VERY LOW | CRITICAL | 백업/복구 테스트 |
|
||
| 사용자 저항 | MEDIUM | MEDIUM | 교육, 지원팀 준비 |
|
||
|
||
---
|
||
## 재무 & 자원 계획
|
||
|
||
### 팀 구성
|
||
- **PM (Product Manager)**: 1명
|
||
- **PL (Project Lead/기술 리더)**: 1명
|
||
- **프론트엔드 개발자**: 4명 (리더 1 + 주니어 3)
|
||
- **백엔드 개발자**: 2명 (.NET 전담)
|
||
- **UX/UI 디자이너**: 1명
|
||
- **QA 엔지니어**: 2명 (자동화 1, 수동 1)
|
||
- **DevOps/SRE**: 1명
|
||
- **보안 전문가**: 0.5명 (컨설턴트)
|
||
- **기술 문서 작성자**: 0.5명
|
||
|
||
**총 인원**: 13명 (풀타임 기준)
|
||
|
||
### 예상 비용 (8개월)
|
||
- 인건비: $360K (평균 $2.7K/명/월)
|
||
- 인프라 & 라이선스: $8K (AWS, DataDog, Sentry)
|
||
- 테스트 도구 & 자동화: $3K (BrowserStack, Chromatic)
|
||
- **총 예산**: $371K
|
||
|
||
### ROI 예상
|
||
- 개발 생산성: 30% 향상 (재사용 컴포넌트, 자동화)
|
||
- 운영 비용: 40% 감소 (모니터링, 자동화)
|
||
- 품질: 결함 80% 감소 (테스트 자동화)
|
||
|
||
---
|
||
## 체크리스트 & 완료 기준
|
||
|
||
### Phase별 Exit Criteria (GO/NO-GO)
|
||
|
||
```yaml
|
||
phase_0_exit:
|
||
- [ ] FRD 스테이크홀더 서명
|
||
- [ ] API OpenAPI 3.0 spec
|
||
- [ ] Figma 와이어프레임
|
||
- [ ] 리스크 등록부 (15개 항목)
|
||
- [ ] Go: Steering committee 승인
|
||
|
||
phase_1_exit:
|
||
- [ ] 모든 개발자 로컬 셋업 완료
|
||
- [ ] CI/CD 파이프라인 작동
|
||
- [ ] 20개 Primitive 컴포넌트 + Storybook
|
||
- [ ] DB 마이그레이션 재현 가능
|
||
- [ ] Go: PL 서명
|
||
|
||
phase_2_exit:
|
||
- [ ] 30개 컴포넌트 Storybook 문서화
|
||
- [ ] 70%+ 테스트 커버리지
|
||
- [ ] WCAG 2.1 AA 감시 통과
|
||
- [ ] Go: UX 리더 서명
|
||
|
||
# ... (나머지 Phase도 동일 패턴)
|
||
|
||
phase_11_exit:
|
||
- [ ] 기술 문서 100% 완성
|
||
- [ ] Ops팀 교육 이수
|
||
- [ ] Wiki 구축 완료
|
||
- [ ] Go: PM + PL 공동 서명 (프로젝트 종료)
|
||
```
|
||
|
||
---
|
||
## 회고 & 개선 프로세스
|
||
|
||
### 주간 회고 (매주 금요일)
|
||
- **지속할 것**: 잘된 것
|
||
- **개선할 것**: 문제/병목
|
||
- **액션 아이템**: 다음 주 개선 사항
|
||
- **메트릭**: 스토리 포인트, 결함 수, 성능
|
||
|
||
### 월간 리뷰 (월말)
|
||
- **진행 상황**: Phase별 진행률
|
||
- **예산**: 비용 vs 예측
|
||
- **품질**: 테스트 커버리지, 에러율
|
||
- **조직 학습**: 팀 성장, 기술 습득
|
||
|
||
### Phase별 사후평가 (각 Phase 종료 시)
|
||
- **목표 달성도**: OKR 달성률
|
||
- **성과물 품질**: 결함, 성능
|
||
- **팀 효율**: 속도, 만족도
|
||
- **개선 제안**: 다음 Phase 적용
|
||
|
||
---
|
||
|
||
## 결론
|
||
|
||
**OMS·WMS·ERP 통합 플랫폼** 프로젝트는 다음을 지향합니다:
|
||
|
||
1. **기술 탁월성**: SOLID, 테스트 주도, 성능 우선
|
||
2. **사용자 중심**: UAT 조기화, 접근성, 국제화
|
||
3. **운영 효율**: 자동화, 모니터링, 무중단 배포
|
||
4. **지속 가능성**: 문서화, 기술 부채 최소화, 확장성
|
||
5. **비즈니스 가치**: 정량화된 성과, ROI 명확화
|
||
|
||
**성공의 정의**:
|
||
- ✅ 모든 Phase exit criteria 충족
|
||
- ✅ 사용자 만족도 NPS 70+
|
||
- ✅ 운영 안정성 99.9% 가용성
|
||
- ✅ 기술 부채 0 (신규) + 기존 50% 감소
|
||
|
||
**실행 원칙**:
|
||
- 과유불급: 필요한 것만 (no gold-plating)
|
||
- 재현성: 모든 결과 재현 가능 (결정론적 입력)
|
||
- 이력성: 모든 변경 추적 (git, audit log)
|
||
- 안정성: 자동화된 테스트, 무중단 배포
|
||
- 현장감: 주간 회고, 지속적 개선
|
||
|
||
**기대 효과**:
|
||
- 개발 생산성 30% 향상
|
||
- 운영 비용 40% 절감
|
||
- 결함 80% 감소
|
||
- 사용자 만족도 85% 이상
|
||
|
||
---
|
||
|
||
*본 WBS는 30년 현장 경험 기반의 엔터프라이즈급 프로젝트 실행 전략을 담고 있습니다.*
|
||
*정기적 리뷰와 적응적 관리를 통해 성공을 보장합니다.*
|