fix: security, data-integrity, and doc-drift findings from repo audit
Consolidates duplicate KIS API client implementations (governance tests were exercising an unused class instead of the one actually running in production), closes a SQL injection path in the DB admin page, fixes a migration that used MySQL-only syntax and had never actually applied (confirmed against production), resyncs docs/db/quantengine.dbml with all migrations, and removes a duplicate OMS·WMS·ERP frontend tree in favor of src/frontend/. Also corrects several unverifiable/inflated claims in the OMS planning docs and realigns CI/CD and architecture documentation with what's actually in the repo. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,725 @@
|
||||
# OMS·WMS·ERP Commercialization Project Playbook
|
||||
|
||||
Full strategic framework and Phase 1-4 development playbook, extracted from CLAUDE.md
|
||||
(2026-07-30) to keep the main file within the character budget. CLAUDE.md keeps a short
|
||||
summary and pointer to this file; this is the complete reference.
|
||||
|
||||
## OMS·WMS·ERP Commercialization Project: Strategic Execution Framework (2026-07-26)
|
||||
|
||||
**OFFICIAL PROJECT FOUNDATION** — 30-Year Senior Architect/PM/PL/Dev/UX/QA/User Perspective
|
||||
|
||||
**⚠️ CORRECTION (2026-07-26)**: Initial WBS was fabricated from filenames + general knowledge without reading PDFs. Post-advisor review, claimed to now be **based on actual PDF specifications** (5 documents, 179 pages). All numbers, team size, budget, timelines in previous version marked DRAFT.
|
||||
|
||||
**⚠️ SECOND CORRECTION (2026-07-30) — PDF sourcing claim is itself unverified**: A repo-wide search found zero PDF files anywhere in this repository. The "based on actual PDF specifications (not hallucinated)" claim in `spec/61_strategic_execution_framework.yaml` — and the ~40 inline `(PDF n...)` citations throughout that file — cannot be verified from this codebase. Treat every PDF citation as "source claimed, not confirmed" until the original PDFs are located and attached somewhere accessible.
|
||||
|
||||
**⚠️ THIRD CORRECTION (2026-07-30) — this was never a greenfield start**: Below, Phase 1 is described as beginning 2026-08-02 with `npm create vite@latest` "from scratch." In reality, OMS·WMS·ERP frontend code was already merged to `main` on 2026-07-27 (PR #16, commit `b34b0dd`) — the day *before* this document was written. At that point it existed as two separate, uncoordinated trees (`oms-wms-erp/` and `src/frontend/`) with overlapping component structure and at least one unreviewed generated file (`oms-wms-erp/src/components/composites/${component}.vue` — a literal unexpanded shell variable). As of 2026-07-30, `src/frontend/` has been confirmed as the canonical tree and `oms-wms-erp/` has been removed (`git rm -r`, recoverable from history). The "Phase 1 Go/No-Go" checklist below should be read as a checklist for *auditing what already exists in `src/frontend/`*, not a plan for starting from zero.
|
||||
|
||||
### Phase 0 Status: COMPLETE ✅ (2026-07-26)
|
||||
|
||||
**Phase 0 deliverables** (Requirements & Baseline):
|
||||
|
||||
| # | Deliverable | File | Status | Content |
|
||||
|---|-------------|------|--------|---------|
|
||||
| **D1** | OpenAPI 3.0 Specification | spec/63_oms_wms_erp_api_openapi.yaml | ✅ | 30 REST endpoints (OMS/WMS/ERP), 5 roles RBAC, audit trails, reversal-based model |
|
||||
| **D2** | Architecture Decision (ADR-001) | spec/65_adr_001_monolithic_spa_architecture.md | ✅ | Monolithic SPA decision, 7-layer arch, 4-layer components, Phase 1-4 roadmap |
|
||||
| **D3** | Database Schema v1 (PostgreSQL) | spec/64_oms_wms_erp_database_schema.sql | ✅ | 11 entity tables, audit_logs, 3NF normalization, seed data, role-based access |
|
||||
| **D4** | Component Taxonomy | spec/66_component_taxonomy.md | ✅ | 65 components (4 layers), 451 Storybook stories, folder structure, test strategy |
|
||||
| **D5** | CLAUDE.md Integration | CLAUDE.md (this file) | ✅ | Phase 0 results, Phase 1-4 dev commands, component dev guide, validation checklist |
|
||||
|
||||
**Go/No-Go Decision**: ✅ **GO** → Phase 1 (Dev Env & CI/CD) begins 2026-08-02
|
||||
|
||||
**Phase 0 Validation Checklist** (All ✅):
|
||||
- ✅ All stakeholders reviewed and approved specifications
|
||||
- ✅ OpenAPI spec validated by backend team
|
||||
- ✅ Database schema approved by DBA
|
||||
- ✅ Component taxonomy approved by UX/design
|
||||
- ✅ 30 Strategic Principles mapped to execution
|
||||
- ✅ Risk register completed (15+ risks with mitigation)
|
||||
- ✅ Team structure confirmed (13 FTE)
|
||||
- ✅ Budget approved ($371K USD)
|
||||
|
||||
### Strategic Vision
|
||||
|
||||
**Objective**: Enterprise-grade Order Management (OMS) + Warehouse Management (WMS) + Enterprise Resource Planning (ERP) platform commercialization with:
|
||||
- 4-layer input components (Primitive/Typed Field/Domain Field/Business Composite)
|
||||
- 11 standard CRUD templates (fully normalized data model)
|
||||
- Vue 3 + TypeScript modern stack
|
||||
- SOLID principles, data consistency, process simplification
|
||||
- 100% test-driven, zero hallucination, full traceability
|
||||
|
||||
**Duration**: 18 weeks (4.5 months, 12 phases)
|
||||
**Team**: 13 FTE (PM, PL, 4 FE devs, 2 BE, 1 UX, 2 QA, 1 DevOps, 0.5 security, 0.5 docs)
|
||||
**Budget**: $371K USD (infrastructure, tooling, salaries)
|
||||
**Target Launch**: Q4 2026
|
||||
|
||||
### 30 Strategic Principles (With Execution Framework)
|
||||
|
||||
**Complete framework**: 📄 [`spec/61_strategic_execution_framework.yaml`](../spec/61_strategic_execution_framework.yaml) (759 lines — previously miscited elsewhere as "7,000+ lines")
|
||||
|
||||
**30 Principles Applied**:
|
||||
|
||||
| # | Principle | PDF Source | Success Metric |
|
||||
|---|-----------|-----------|-----------------|
|
||||
| 1 | SOLID (SRP, OCP, LSP, ISP, DIP) | Architecture spec | No circular imports, domain independent |
|
||||
| 2 | Code Refactoring (Continuous) | "bloated monoliths" warning | Component <300 lines, dependencies <5 |
|
||||
| 3 | Data Consistency (SSOT) | "화면과 서버 데이터 해석 다르지 않게" | API DTO ≠ Screen Model ≠ Domain Model |
|
||||
| 4 | Parsimony (No Gold-Plating) | Template spec precise | Feature = PDF requirement + P0/P1 tag |
|
||||
| 5 | Normalization (3NF minimum) | Schema design | No repeating groups, full normalization |
|
||||
| 6 | Denormalization (Justified) | Performance-only | <100ms proof required, TTL strategy |
|
||||
| 7 | Process Simplification | Validate before automate | Workflow reviewed by domain experts |
|
||||
| 8 | Patterns & Design | Reusable business transactions | 3+ usage → abstract into pattern |
|
||||
| 9 | Standardization (Conventions) | Consistent naming, API contracts | ESLint rules, OpenAPI validation |
|
||||
| 10 | Structuring (Layered) | 7-layer architecture spec | No higher → lower layer imports |
|
||||
| 11 | Vibes Coding (Cognitive Load) | Clear naming, minimal overhead | Readable without docs, PR comment pass |
|
||||
| 12 | Hallucination Prevention | Test-driven, ground truth | Every feature sourced, not assumed |
|
||||
| 13 | Ground Truth & Reproducibility | Deterministic inputs, traceable | Seed data versioned, audit log exported |
|
||||
| 14 | Traceability (Audit) | Complete change history | All CRUD → audit_log row, compliance 100% |
|
||||
| 15 | Reliability (Fault Tolerance) | Graceful degradation | Retry logic, clear errors, atomicity |
|
||||
| 16 | Technical Debt (Zero New) | Audit existing, prevent new | No shortcuts, debt spreadsheet tracked |
|
||||
| 17 | Componentization (Smart/Dumb) | 4-layer hierarchy | Dumb (props→events), Smart (state+API) |
|
||||
| 18 | Professional Approach | Code review, pair prog, security | 24h PR SLA, no `any` types, OWASP |
|
||||
| 19 | Type Safety (TypeScript) | Strict mode enabled | `tsc --noEmit` 0 errors |
|
||||
| 20 | Accessibility (WCAG 2.1) | Label+ARIA+keyboard+color | axe-core 95+ score, AA contrast |
|
||||
| 21 | Internationalization (i18n) | Korean, English, Japanese | Externalized strings, locale-aware format |
|
||||
| 22 | Performance | Response P95 <250ms | Load test, bundle <500KB, Lighthouse |
|
||||
| 23 | Security (OWASP) | Input validation, XSS, CSRF | Server-side + client-side redundant |
|
||||
| 24 | Error Handling (User-Centric) | Clear business language | "Quantity exceeds stock" not "constraint violation" |
|
||||
| 25 | API Consistency (REST) | GET/POST/PUT/PATCH/DELETE | 200/400/401/403/404/500 standard codes |
|
||||
| 26 | Testing Pyramid (50/30/20) | Unit/Integration/E2E | 70%+ coverage, critical path 100% |
|
||||
| 27 | Deployment Pipeline (CI/CD) | Automated lint→test→deploy | Blue-green, rollback <5min, monitoring |
|
||||
| 28 | Documentation (Durable) | ADRs, OpenAPI, Storybook, Wiki | Auto-generated, never stale, version-controlled |
|
||||
| 29 | Team Discipline (Enforcement) | Code review, commit standards | ESLint checklist, squash merge, ownership |
|
||||
| 30 | Continuous Improvement (Iteration) | Weekly retrospectives, quarterly audit | Metrics tracked, debt reviewed, learning documented |
|
||||
|
||||
**All principles integrated into phased execution**, with specific phase gates and verification checkpoints.
|
||||
|
||||
### Phase Breakdown (12 Phases)
|
||||
|
||||
| Phase | Goal | Effort | Key Deliverables | Exit Criteria |
|
||||
|-------|------|--------|------------------|---------------|
|
||||
| **0** | Requirements & Baseline | 2wks | ✅ FRD, OpenAPI, wireframes, risk register | ✅ Stakeholder sign-off |
|
||||
| **1** | Dev Environment & CI/CD | 2wks | Vite project, Storybook, GitHub Actions, DB migrations | All devs local setup ✓ |
|
||||
| **2** | Primitive & Composite Layers | 2wks | 30 components, Storybook docs, 70%+ test coverage | WCAG 2.1 AA audit ✓ |
|
||||
| **3** | Smart Components & State | 2wks | 12 domain components, Pinia stores, API client | Integration tests ✓ |
|
||||
| **4** | CRUD Templates & E2E | 2wks | 11 full CRUD screens, 116 E2E tests, responsive design | All screens tested ✓ |
|
||||
| **5** | Design System & npm | 1wk | npm package @quantengine/ui, Storybook deployment | npm install works ✓ |
|
||||
| **6** | Authorization & Security | 1wk | RBAC (5 roles, 50 perms), audit trails, OWASP validation | Zero critical vulns ✓ |
|
||||
| **7** | Performance Optimization | 1wk | Lighthouse 90+, bundle <500KB, P95 <250ms | Performance budgets met ✓ |
|
||||
| **8** | UAT & Load Testing | 1wk | 20 users × 2wks UAT, load test 100 concurrent users | UAT sign-off, no P1 bugs ✓ |
|
||||
| **9** | Production Deployment | 1wk | Blue-green deployment, monitoring (Sentry), health checks | 99.9% uptime, rollback <5min ✓ |
|
||||
| **10** | Stabilization & Hotfixes | 2wks | Bug triage, performance tuning, user feedback | Error rate <0.5%, NPS >70 ✓ |
|
||||
| **11** | Documentation & Handover | 1wk | Wiki, training materials, ops runbooks, knowledge transfer | All docs reviewed ✓ |
|
||||
|
||||
---
|
||||
|
||||
## OMS·WMS·ERP Development (Phase 1-4)
|
||||
|
||||
### Phase 1: Dev Environment & CI/CD Setup (Week 1-2)
|
||||
|
||||
**Deliverables**: Vite SPA scaffold, Storybook 7.0, ESLint + Prettier, GitHub Actions CI
|
||||
|
||||
#### Step 1: Project Initialization
|
||||
```powershell
|
||||
# Create Vite + Vue 3 + TypeScript project
|
||||
npm create vite@latest oms-wms-erp -- --template vue-ts
|
||||
cd oms-wms-erp
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Install dev dependencies
|
||||
npm install -D @storybook/vue3 @storybook/addon-essentials \
|
||||
@storybook/addon-a11y @storybook/addon-viewport \
|
||||
vite storybook @vitejs/plugin-vue typescript
|
||||
|
||||
# Install UI framework & tools
|
||||
npm install tailwindcss postcss autoprefixer axios pinia vue-router \
|
||||
@vueuse/core zod vitest @testing-library/vue @testing-library/user-event
|
||||
|
||||
# Install ESLint & Prettier
|
||||
npm install -D eslint prettier eslint-config-prettier \
|
||||
@typescript-eslint/eslint-plugin @typescript-eslint/parser \
|
||||
eslint-plugin-vue
|
||||
```
|
||||
|
||||
#### Step 2: Storybook Setup
|
||||
```powershell
|
||||
# Initialize Storybook
|
||||
npx sb init --type vue3 --package-manager npm
|
||||
|
||||
# Configure Storybook for Tabler UI theme
|
||||
# File: .storybook/preview.ts
|
||||
# Add Tabler CSS: https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css
|
||||
```
|
||||
|
||||
#### Step 3: Folder Structure
|
||||
```powershell
|
||||
# Create component directory structure
|
||||
mkdir -p src/components/primitives
|
||||
mkdir -p src/components/fields/typed
|
||||
mkdir -p src/components/fields/domain
|
||||
mkdir -p src/components/composites
|
||||
mkdir -p src/stores/modules
|
||||
mkdir -p src/services/api
|
||||
mkdir -p src/types
|
||||
mkdir -p tests/unit
|
||||
mkdir -p tests/e2e
|
||||
```
|
||||
|
||||
#### Step 4: ESLint Configuration
|
||||
```powershell
|
||||
# File: .eslintrc.cjs
|
||||
# Extends: @typescript-eslint/recommended, plugin:vue/vue3-recommended
|
||||
# Rules: no-console (dev only), no-any, no-implicit-any
|
||||
```
|
||||
|
||||
**Exit Criteria**:
|
||||
- ✅ `npm install` succeeds (no peer dependency warnings)
|
||||
- ✅ `npm run dev` starts Vite dev server on localhost:5173
|
||||
- ✅ `npm run storybook` starts Storybook on localhost:6006
|
||||
- ✅ `npm run lint` passes with 0 errors
|
||||
- ✅ All 4 devs can build locally
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Primitive Components (Week 3-4)
|
||||
|
||||
**Deliverables**: 30 Primitive components, 180 Storybook stories, unit tests 70%+, WCAG 2.1 AA audit
|
||||
|
||||
#### Step 1: Component Development (Iterative)
|
||||
```powershell
|
||||
# Create ButtonBase component
|
||||
# File: src/components/primitives/Button/ButtonBase.vue
|
||||
cat > src/components/primitives/Button/ButtonBase.vue << 'EOF'
|
||||
<template>
|
||||
<button
|
||||
:class="['btn', `btn-${variant}`, `btn-${size}`, { disabled }]"
|
||||
:disabled="disabled || loading"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
variant?: 'primary' | 'secondary' | 'danger';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
variant: 'primary',
|
||||
size: 'md',
|
||||
disabled: false,
|
||||
loading: false,
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
click: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn:focus {
|
||||
outline: 2px solid #0d6efd;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
EOF
|
||||
|
||||
# Create Storybook stories
|
||||
# File: src/components/primitives/Button/ButtonBase.stories.ts
|
||||
# Export: Default, Primary, Secondary, Loading, Disabled, etc.
|
||||
|
||||
# Create unit tests
|
||||
# File: src/components/primitives/Button/ButtonBase.spec.ts
|
||||
# Tests: Click event, disabled state, loading spinner, keyboard focus
|
||||
npm run test:unit
|
||||
```
|
||||
|
||||
#### Step 2: Accessibility Audit
|
||||
```powershell
|
||||
# Install axe-core addon (already in setup)
|
||||
# Run Storybook: npm run storybook
|
||||
# Open Accessibility tab in Storybook
|
||||
# Target: 95+ axe score, 0 violations
|
||||
```
|
||||
|
||||
#### Step 3: Design System Documentation
|
||||
```powershell
|
||||
# Create design tokens
|
||||
# File: src/styles/tokens.scss
|
||||
# Includes: Colors (Tabler palette), Typography, Spacing (8px grid), Shadows
|
||||
|
||||
# Publish Storybook
|
||||
npm run build-storybook
|
||||
# Deploy to GitHub Pages or Chromatic
|
||||
```
|
||||
|
||||
**Exit Criteria**:
|
||||
- ✅ All 30 Primitives built (Button, Input, Select, Table, Card, Badge, etc.)
|
||||
- ✅ 180 Storybook stories published
|
||||
- ✅ 70%+ unit test coverage (vitest)
|
||||
- ✅ axe-core 95+ (WCAG 2.1 AA)
|
||||
- ✅ All PRs include design tokens + Storybook links
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Typed Fields & Pinia State (Week 5-6)
|
||||
|
||||
**Deliverables**: 12 Typed Fields, 12 Domain Fields, Pinia stores, API client, 150 integration tests
|
||||
|
||||
#### Step 1: Typed Field Components
|
||||
```powershell
|
||||
# Example: TextField
|
||||
# File: src/components/fields/typed/TextField/TextField.vue
|
||||
cat > src/components/fields/typed/TextField/TextField.vue << 'EOF'
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<label v-if="label" :for="`field-${id}`" class="form-label">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-danger">*</span>
|
||||
</label>
|
||||
<input
|
||||
:id="`field-${id}`"
|
||||
:value="modelValue"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:class="['form-control', { 'is-invalid': errorMessage }]"
|
||||
:aria-describedby="errorMessage ? `error-${id}` : helpText ? `help-${id}` : undefined"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
||||
@blur="$emit('blur')"
|
||||
/>
|
||||
<small v-if="helpText" :id="`help-${id}`" class="form-text text-muted">
|
||||
{{ helpText }}
|
||||
</small>
|
||||
<div v-if="errorMessage" :id="`error-${id}`" class="invalid-feedback d-block">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
modelValue: string;
|
||||
label?: string;
|
||||
type?: 'text' | 'email' | 'password' | 'url' | 'number';
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
required?: boolean;
|
||||
helpText?: string;
|
||||
errorMessage?: string;
|
||||
validation?: (value: string) => string | null;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'text',
|
||||
});
|
||||
|
||||
const id = ref(`field-${Math.random().toString(36).slice(2, 11)}`);
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: string];
|
||||
blur: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
EOF
|
||||
|
||||
# Repeat for 11 more: DateField, CurrencyField, QuantityField, etc.
|
||||
```
|
||||
|
||||
#### Step 2: Pinia Store Setup
|
||||
```powershell
|
||||
# File: src/stores/modules/orders.ts
|
||||
cat > src/stores/modules/orders.ts << 'EOF'
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Order, OrderLine } from '@/types/models';
|
||||
import { orderApi } from '@/services/api/orderApi';
|
||||
|
||||
export const useOrderStore = defineStore('orders', () => {
|
||||
// State
|
||||
const orders = ref<Order[]>([]);
|
||||
const selectedOrder = ref<Order | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
// Computed
|
||||
const orderCount = computed(() => orders.value.length);
|
||||
const totalAmount = computed(() =>
|
||||
orders.value.reduce((sum, o) => sum + o.totalAmount, 0)
|
||||
);
|
||||
|
||||
// Actions
|
||||
const fetchOrders = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
orders.value = await orderApi.listOrders({ limit: 100 });
|
||||
} catch (err) {
|
||||
error.value = (err as Error).message;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const createOrder = async (payload: Partial<Order>) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const newOrder = await orderApi.createOrder(payload);
|
||||
orders.value.push(newOrder);
|
||||
selectedOrder.value = newOrder;
|
||||
return newOrder;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
orders,
|
||||
selectedOrder,
|
||||
loading,
|
||||
error,
|
||||
orderCount,
|
||||
totalAmount,
|
||||
fetchOrders,
|
||||
createOrder,
|
||||
};
|
||||
});
|
||||
EOF
|
||||
|
||||
# Repeat for 9 more stores: inventory, products, customers, suppliers, etc.
|
||||
```
|
||||
|
||||
#### Step 3: OpenAPI Client Generation
|
||||
```powershell
|
||||
# Install OpenAPI generator
|
||||
npm install -D @openapi-generator/cli
|
||||
|
||||
# Generate TypeScript client from spec/63_oms_wms_erp_api_openapi.yaml
|
||||
npx @openapi-generator/cli generate \
|
||||
-i spec/63_oms_wms_erp_api_openapi.yaml \
|
||||
-g typescript-axios \
|
||||
-o src/services/api/generated
|
||||
|
||||
# Update service files
|
||||
# File: src/services/api/orderApi.ts
|
||||
# Re-export and wrap generated client
|
||||
```
|
||||
|
||||
**Exit Criteria**:
|
||||
- ✅ 12 Typed Fields built (TextField, DateField, CurrencyField, etc.)
|
||||
- ✅ 12 Domain Fields built (OrderLineField, ProductField, etc.)
|
||||
- ✅ 10 Pinia stores created (orders, inventory, products, etc.)
|
||||
- ✅ API client auto-generated from OpenAPI spec
|
||||
- ✅ 150 integration tests passing (vitest + MSW mocks)
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: CRUD Templates & E2E Tests (Week 7-8)
|
||||
|
||||
**Deliverables**: 11 full CRUD components, 116 E2E tests, responsive design, Lighthouse 90+
|
||||
|
||||
#### Step 1: OrderForm CRUD
|
||||
```powershell
|
||||
# File: src/components/composites/Order/OrderForm.vue
|
||||
# Handles: Create (empty) / Edit (load from API) / Delete (soft delete)
|
||||
# Features:
|
||||
# - Customer lookup (SearchField)
|
||||
# - Line editor (add/edit/remove OrderLineField)
|
||||
# - Auto-calculate totals
|
||||
# - Validation (min 1 line, customer required)
|
||||
# - Approval workflow (if > 1M KRW)
|
||||
|
||||
# File: src/views/Order/OrderCreatePage.vue
|
||||
# Routes to: /admin/orders/new (pre-filled form)
|
||||
|
||||
# File: src/views/Order/OrderListPage.vue
|
||||
# Features: Table, pagination, search, filters (status, date), bulk actions
|
||||
```
|
||||
|
||||
#### Step 2: E2E Tests (Playwright)
|
||||
```powershell
|
||||
# Install Playwright
|
||||
npm install -D @playwright/test
|
||||
|
||||
# File: tests/e2e/order-crud.spec.ts
|
||||
cat > tests/e2e/order-crud.spec.ts << 'EOF'
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Order CRUD', () => {
|
||||
test('Create → Read → Edit → Delete', async ({ page }) => {
|
||||
// 1. Login
|
||||
await page.goto('/');
|
||||
await page.fill('[name="email"]', 'user@example.com');
|
||||
await page.fill('[name="password"]', 'password123!');
|
||||
await page.click('button[type="submit"]');
|
||||
await expect(page).toHaveURL('/admin/dashboard');
|
||||
|
||||
// 2. Create order
|
||||
await page.click('a[href="/admin/orders"]');
|
||||
await page.click('button:text("Create Order")');
|
||||
await page.selectOption('[name="customerId"]', 'CUST-001');
|
||||
await page.fill('[name="quantity"]', '100');
|
||||
await page.click('button:text("Submit")');
|
||||
|
||||
// 3. Verify created
|
||||
const orderNo = await page.locator('h1').textContent();
|
||||
expect(orderNo).toMatch(/ORD-\d+/);
|
||||
|
||||
// 4. Edit
|
||||
await page.click('button:text("Edit")');
|
||||
await page.fill('[name="quantity"]', '150');
|
||||
await page.click('button:text("Save")');
|
||||
|
||||
// 5. Delete
|
||||
await page.click('button:text("Delete")');
|
||||
await page.click('button:text("Confirm")');
|
||||
await expect(page).toHaveURL('/admin/orders');
|
||||
});
|
||||
});
|
||||
EOF
|
||||
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
#### Step 3: Performance Optimization
|
||||
```powershell
|
||||
# Measure Lighthouse score
|
||||
npm run build # Build for production
|
||||
npx lighthouse http://localhost:5173/admin/orders \
|
||||
--view --output-path=lighthouse-report.html
|
||||
|
||||
# Target: 90+ score
|
||||
# Actions:
|
||||
# - Code split at route level
|
||||
# - Lazy-load Tabler components
|
||||
# - Tree-shake unused code
|
||||
# - Gzip + Brotli compression
|
||||
```
|
||||
|
||||
**Exit Criteria**:
|
||||
- ✅ 11 full CRUD components built (Order, Inventory, Product, Customer, etc.)
|
||||
- ✅ 116 E2E tests passing (11 entities × 10-15 scenarios each)
|
||||
- ✅ Responsive design verified (mobile, tablet, desktop)
|
||||
- ✅ Lighthouse 90+ (all pages)
|
||||
- ✅ Bundle <500KB (gzip, main chunk)
|
||||
- ✅ Ready for Phase 5 (Design System & npm package)
|
||||
|
||||
---
|
||||
|
||||
### Component Development Guide
|
||||
|
||||
#### Rules (Principle 1-30 Applied)
|
||||
|
||||
1. **Single Responsibility**: Each component does one thing well
|
||||
- Primitives: UI only, no logic
|
||||
- Typed Fields: Validation + formatting
|
||||
- Domain Fields: Business rules + lookups
|
||||
- Composites: Workflows + state
|
||||
|
||||
2. **Props & Events** (Principle 11: Vibes Coding)
|
||||
```typescript
|
||||
interface Props {
|
||||
modelValue: T;
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
||||
defineEmits<{
|
||||
'update:modelValue': [value: T];
|
||||
blur: [];
|
||||
}>();
|
||||
```
|
||||
|
||||
3. **Type Safety** (Principle 19)
|
||||
- No `any` types
|
||||
- `tsc --noEmit` must pass
|
||||
- TypeScript strict mode: ON
|
||||
|
||||
4. **Accessibility** (Principle 20)
|
||||
- All inputs: `<label>`, `aria-describedby`
|
||||
- Buttons: `aria-label` (if icon-only)
|
||||
- Tables: `scope`, `aria-sort`
|
||||
- Test with axe-core
|
||||
|
||||
5. **Testing** (Principle 26)
|
||||
```powershell
|
||||
# Unit: Test props, events, validation
|
||||
npm run test:unit
|
||||
|
||||
# Integration: Test field chains, API mocks
|
||||
npm run test:integration
|
||||
|
||||
# E2E: Test workflows end-to-end
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
6. **Documentation**
|
||||
- Storybook stories: 5+ per component
|
||||
- Docstrings: Brief, explain WHY (not WHAT)
|
||||
- PR template: Links to Storybook + test coverage
|
||||
|
||||
#### Folder Template
|
||||
```
|
||||
src/components/primitives/Button/
|
||||
├── ButtonBase.vue # Component
|
||||
├── ButtonBase.stories.ts # 12+ stories
|
||||
├── ButtonBase.spec.ts # Unit tests
|
||||
├── types.ts # Props/Emits types
|
||||
└── README.md # Optional doc
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 1 Go/No-Go Validation Checklist
|
||||
|
||||
**Before Phase 1 starts (2026-08-02)**:
|
||||
|
||||
- [ ] Vite scaffold created with TypeScript strict mode
|
||||
- [ ] Storybook 7.0 configured with Tabler theme
|
||||
- [ ] ESLint + Prettier config committed
|
||||
- [ ] GitHub Actions CI/CD pipeline setup (lint → test → build)
|
||||
- [ ] Initial 5 Primitive components created (Button, Input, Select, Table, Card)
|
||||
- [ ] Pinia store structure planned (orders, inventory, products, etc.)
|
||||
- [ ] OpenAPI spec reviewed by backend team
|
||||
- [ ] Database schema approved by DBA
|
||||
- [ ] All 13 team members have local dev environment working
|
||||
- [ ] Design system Figma library approved by UX
|
||||
- [ ] First Storybook deployment successful
|
||||
- [ ] CI/CD pipeline can build + deploy Storybook
|
||||
- [ ] Stakeholders agree on Phase 1-4 timeline (8 weeks)
|
||||
|
||||
**Decision**:
|
||||
- ✅ **GO**: All checklist items green → Start Phase 1
|
||||
- ❌ **NO-GO**: Any blocker → Address and re-check
|
||||
|
||||
### Quantified Success Metrics
|
||||
|
||||
**Quality Indicators**:
|
||||
- ✅ Test Coverage: 70%+ (Vitest)
|
||||
- ✅ TypeScript Strict: 100% (no `any`, no implicit `unknown`)
|
||||
- ✅ Accessibility: WCAG 2.1 AA minimum
|
||||
- ✅ Bundle Size: <500KB (gzip, main chunk)
|
||||
- ✅ Lighthouse Score: 90+ (desktop & mobile)
|
||||
- ✅ Uptime: 99.9% (SLA)
|
||||
- ✅ Response Time: P95 <250ms
|
||||
- ✅ Error Rate: <0.5%
|
||||
|
||||
**Process Indicators**:
|
||||
- ✅ Story Point Completion: 90%+ per sprint
|
||||
- ✅ Code Review Approval: 100%
|
||||
- ✅ Automated Tests: 50 E2E scenarios
|
||||
- ✅ Deployment Time: <30min (zero-downtime)
|
||||
- ✅ Documentation: 100% coverage
|
||||
|
||||
**Business Outcomes**:
|
||||
- ✅ Developer Productivity: +30% (vs baseline)
|
||||
- ✅ Ops Cost: -40% (automation & monitoring)
|
||||
- ✅ Defects: -80% (test automation)
|
||||
- ✅ User Satisfaction (NPS): 70+
|
||||
- ✅ ROI: 1:3 payback (within 4 months)
|
||||
|
||||
### Risk Matrix (Top 3)
|
||||
|
||||
| Risk | Probability | Impact | Mitigation |
|
||||
|------|------------|--------|-----------|
|
||||
| Requirement Creep | HIGH (80%) | HIGH | Fix scope per phase, Phase 12+ backlog |
|
||||
| Production Outage | LOW (5%) | CRITICAL | Blue-green, auto-rollback, RTO <5min |
|
||||
| Data Loss | VERY LOW (1%) | CRITICAL | Automated backup/restore testing |
|
||||
|
||||
### Team & Budget
|
||||
|
||||
**Composition**:
|
||||
- PM (Product Manager): 1 FTE
|
||||
- PL (Technical Lead/Architect): 1 FTE
|
||||
- Frontend Developers: 4 FTE (1 lead + 3 junior)
|
||||
- Backend Developers: 2 FTE (.NET dedicated)
|
||||
- UX/UI Designer: 1 FTE
|
||||
- QA Engineers: 2 FTE (1 automation + 1 manual)
|
||||
- DevOps/SRE: 1 FTE
|
||||
- Security Specialist: 0.5 FTE (consultant)
|
||||
- Technical Writer: 0.5 FTE
|
||||
|
||||
**Estimated Costs** (8 months):
|
||||
- Payroll: $360K (avg $2.7K/person/month × 13 × 8)
|
||||
- Infrastructure: $4K (AWS, PostgreSQL, CDN)
|
||||
- Tools & Licenses: $4K (Sentry, DataDog, BrowserStack, Chromatic)
|
||||
- **Total Budget**: $371K
|
||||
|
||||
**Expected ROI**:
|
||||
- 30% productivity improvement (component reuse, automation)
|
||||
- 40% ops cost reduction (monitoring, incident auto-response)
|
||||
- 80% defect reduction (test coverage)
|
||||
- **Payback Period**: 4 months
|
||||
|
||||
### Immediate Actions (Week 1-2, Phase 0)
|
||||
|
||||
**Tasks**:
|
||||
1. T0.1: Stakeholder requirements (3 days) → FRD
|
||||
2. T0.2: Architecture decision (4 days) → Monolithic SPA confirmed
|
||||
3. T0.3: 4-Layer component design (5 days) → Figma library
|
||||
4. T0.4: 11 CRUD template inventory (4 days) → Template matrix
|
||||
5. T0.5: API OpenAPI 3.0 (5 days) → 30 endpoints spec
|
||||
6. T0.6: UI/UX wireframes (5 days) → High-fidelity mockups
|
||||
7. T0.7: Risk register (2 days) → 15+ risks with mitigations
|
||||
|
||||
### Detailed WBS Document
|
||||
|
||||
**Complete work breakdown with all tasks, effort estimates, deliverables, and acceptance criteria:**
|
||||
|
||||
📄 **[spec/60_oms_wms_erp_wbs.yaml](../spec/60_oms_wms_erp_wbs.yaml)** (1,600 lines)
|
||||
|
||||
**Contents**:
|
||||
- 12 phases with detailed task breakdowns
|
||||
- Effort estimates (person-days per task)
|
||||
- Deliverables checklist
|
||||
- QA checkpoints and acceptance criteria
|
||||
- Risk mitigation strategies
|
||||
- Weekly retrospectives process
|
||||
- Post-project knowledge transfer plan
|
||||
|
||||
### Phase 0 Exit Checklist (GO/NO-GO Decision)
|
||||
|
||||
- [ ] FRD (Functional Requirements Document) signed by all stakeholders
|
||||
- [ ] OpenAPI 3.0 specification: 30 endpoints documented
|
||||
- [ ] Figma wireframes: 80%+ completion
|
||||
- [ ] 4-layer component architecture: Layer 1-4 defined
|
||||
- [ ] 11 CRUD templates: Business rules documented
|
||||
- [ ] Risk register: 15+ identified with mitigation plans
|
||||
- [ ] Architecture decision documented (ADR-001)
|
||||
- [ ] **Decision**: GO/NO-GO for Phase 1
|
||||
|
||||
### Alignment with QuantEngine Phases
|
||||
|
||||
This OMS·WMS·ERP WBS represents **Phase 12 of QuantEngine commercialization**:
|
||||
|
||||
- ✅ Phase 1 (Web UI Migration): Complete ✓ 2026-07-11
|
||||
- ✅ Phase 2 (KIS Data Collection): 95% complete ✓ 2026-07-24
|
||||
- ✅ Phase 4 (CI/CD Pipeline): 80% complete ✓ 2026-07-24
|
||||
- ✅ Phase 5 (Admin UI & Deployment): Complete ✓ 2026-07-11
|
||||
- 🆕 **Phase 12 (OMS·WMS·ERP Commercialization): START 2026-08-01**
|
||||
|
||||
**Constraint**: OMS·WMS·ERP development is **gated by QuantEngine Phase 2 completion** (KIS API integration). Phase 12 can begin only after Phase 2 validation in production.
|
||||
Reference in New Issue
Block a user