829 lines
23 KiB
Markdown
829 lines
23 KiB
Markdown
|
|
---
|
||
|
|
source: Phase 0 베이스라인 분석 최종 보고서
|
||
|
|
section: 종합 분석 및 실행 계획
|
||
|
|
created: 2025-11-12
|
||
|
|
bp_mes_phase: Phase 0 완료
|
||
|
|
related:
|
||
|
|
- document_cross_reference_map.md
|
||
|
|
- api_code_analysis_summary.md
|
||
|
|
- react_code_analysis_summary.md
|
||
|
|
- api_gap_validation_report.md
|
||
|
|
- MES_PROJECT_ROADMAP.md
|
||
|
|
tags: [final-report, roadmap, implementation-plan, critical-path]
|
||
|
|
---
|
||
|
|
|
||
|
|
# BP-MES Phase 0 최종 보고서
|
||
|
|
|
||
|
|
**작성일:** 2025-11-12
|
||
|
|
**Phase:** 0 (베이스라인 분석) 완료
|
||
|
|
**진행률:** 100%
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Executive Summary
|
||
|
|
|
||
|
|
### 🎯 Phase 0 목표 및 달성도
|
||
|
|
|
||
|
|
**목표:** 기존 시스템 분석 및 개발 범위 정의
|
||
|
|
|
||
|
|
| 목표 | 달성도 | 결과 |
|
||
|
|
|------|--------|------|
|
||
|
|
| 문서 분석 | ✅ 100% | 6개 핵심 문서 (7,065줄) 분석 완료 |
|
||
|
|
| API 코드 분석 | ✅ 100% | 11개 파일 (Controllers, Services, Models) |
|
||
|
|
| React 코드 분석 | ✅ 100% | ItemManagement.tsx 6,521줄 전체 분석 |
|
||
|
|
| Gap 분석 | ✅ 100% | 17개 Gap 발견 및 검증 |
|
||
|
|
| 개발 로드맵 | ✅ 100% | Phase 1-12 실행 계획 수립 |
|
||
|
|
|
||
|
|
**종합 달성도:** ✅ **100% 완료**
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 📊 핵심 발견 요약
|
||
|
|
|
||
|
|
#### ✅ 긍정적 발견 (예상보다 많이 구현됨!)
|
||
|
|
|
||
|
|
1. **통합 품목 조회 API 이미 구현됨** (Gap #1 ✅)
|
||
|
|
- ItemsController 발견
|
||
|
|
- materials + products 통합 조회
|
||
|
|
- 프론트엔드 연동만 필요
|
||
|
|
|
||
|
|
2. **가격 시스템 완전 구현됨** (Gap #7 ✅)
|
||
|
|
- price_histories 테이블 (14컬럼)
|
||
|
|
- 시계열 + 고객별 가격 지원
|
||
|
|
- PricingService 완전 통합
|
||
|
|
- 문서 분석과 100% 일치
|
||
|
|
|
||
|
|
3. **BOM 계산 API 설계 단계 구현됨** (Gap #3 ⚠️)
|
||
|
|
- BomCalculationController 존재
|
||
|
|
- 설계 BOM 기반 계산 지원
|
||
|
|
- 주문 기반 계산으로 확장 필요
|
||
|
|
|
||
|
|
4. **주요 화면 구현 완료** (Gap #13 🟢)
|
||
|
|
- ItemManagement.tsx (6,521 lines)
|
||
|
|
- QuoteManagement3List/Write.tsx
|
||
|
|
- 리팩토링으로 품질 개선 필요
|
||
|
|
|
||
|
|
5. **Atomic Design 부분 적용** (Gap #10, #11 ✅)
|
||
|
|
- shadcn/ui 47개 Atoms
|
||
|
|
- 6개 Molecules
|
||
|
|
- 8개 Organisms (DataTable 매우 우수)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### 🔴 심각한 Gap (긴급 해결 필요)
|
||
|
|
|
||
|
|
1. **치수 연결 매핑 시스템 부재** (Gap #2 ❌)
|
||
|
|
- **비즈니스 핵심 기능!**
|
||
|
|
- dimension_mappings 테이블 없음
|
||
|
|
- 세트.W=3500 → 가이드레일.G=3500 자동 전달 불가
|
||
|
|
- **예상 작업량:** 1-2주
|
||
|
|
- **우선순위:** 🔴 P0 (최우선)
|
||
|
|
|
||
|
|
2. **ItemManagement.tsx 6,521 lines God Component** (Gap #14 ❌)
|
||
|
|
- **유지보수 불가능**
|
||
|
|
- 40개 useState (성능 저하)
|
||
|
|
- 362줄 handleSaveItem (God Method)
|
||
|
|
- 1,911줄 List View (10회 중복)
|
||
|
|
- **예상 작업량:** 4-7주
|
||
|
|
- **우선순위:** 🔴 P0 (최우선)
|
||
|
|
|
||
|
|
3. **BOM formula/condition 필드 부재** (Gap #4, #5 ❌)
|
||
|
|
- product_components에 계산식/조건식 필드 없음
|
||
|
|
- 계산식: `G/1000*1.02` 지원 불가
|
||
|
|
- 조건식: `MOTOR='Y'` 지원 불가
|
||
|
|
- **예상 작업량:** 1-2주
|
||
|
|
- **우선순위:** 🔴 P0 (최우선)
|
||
|
|
|
||
|
|
4. **주문 기반 견적 계산 API 부재** (Gap #3 ⚠️)
|
||
|
|
- 설계 BOM만 지원 (주문 기반 불가)
|
||
|
|
- 프론트엔드에서 BOM 계산 중복 구현
|
||
|
|
- **예상 작업량:** 1-2주
|
||
|
|
- **우선순위:** 🔴 P0 (최우선)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 📈 Gap 검증 최종 결과 (17개)
|
||
|
|
|
||
|
|
| 상태 | 개수 | Gap 번호 | 설명 |
|
||
|
|
|------|------|----------|------|
|
||
|
|
| ✅ **해결** | 2개 | #1, #7 | 통합 품목 API, 가격 통합 조회 |
|
||
|
|
| ⚠️ **부분** | 3개 | #3, #6, #16 | BOM 계산 (설계만), options (Material만), Material search |
|
||
|
|
| ❌ **미해결** | 9개 | #2, #4, #5, #8, #9, #12, #14, #15, #17 | 치수 연결, BOM fields, 컴포넌트 통합 |
|
||
|
|
| 🟢 **프론트 완료** | 3개 | #10, #11, #13 | Molecules, Organisms, 주요 화면 |
|
||
|
|
|
||
|
|
**미해결 Gap 중 Critical:** 4개 (#2, #4, #5, #14)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📂 생성된 산출물 (10개 문서)
|
||
|
|
|
||
|
|
### Phase A: 문서 분석 (7개)
|
||
|
|
|
||
|
|
1. `api_item_analysis_summary.md` - API 문서 분석 (1,262줄 원본)
|
||
|
|
2. `react_atomic_design_summary.md` - Atomic Design 패턴 (1,548줄 원본)
|
||
|
|
3. `react_dev_guidelines_summary.md` - React 개발 가이드 (1,120줄 원본)
|
||
|
|
4. `react_screen_spec_summary.md` - 화면 명세 (2,014줄 원본)
|
||
|
|
5. `business_quotation_guide_summary.md` - 견적 가이드 (498줄 원본)
|
||
|
|
6. `business_user_story_summary.md` - 유저 스토리 (623줄 원본)
|
||
|
|
7. `document_cross_reference_map.md` - 교차 참조 맵
|
||
|
|
|
||
|
|
**총 원본:** 7,065줄 → **요약본:** 7개 문서
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Phase B: 코드 분석 (3개)
|
||
|
|
|
||
|
|
8. `api_code_analysis_summary.md` - Laravel API 코드 분석 (11 files)
|
||
|
|
9. `react_code_analysis_summary.md` - React 코드 분석 (ItemManagement 6,521줄 전체 분석)
|
||
|
|
10. `api_gap_validation_report.md` - Gap 검증 보고서 (17개 Gap)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚨 Critical Path 정의
|
||
|
|
|
||
|
|
### Phase 간 종속성 분석
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TD
|
||
|
|
A[Phase 1: 백엔드 핵심 개발] --> B[Phase 2: 프론트엔드 리팩토링]
|
||
|
|
B --> C[Phase 3: 백-프 연동]
|
||
|
|
C --> D[Phase 4: 컴포넌트 확장]
|
||
|
|
|
||
|
|
A1[치수 연결 매핑] --> A2[BOM formula/condition]
|
||
|
|
A2 --> A3[견적 계산 API]
|
||
|
|
|
||
|
|
B1[ItemManagement 분해] --> B2[useState → useReducer]
|
||
|
|
B2 --> B3[Organisms 분리]
|
||
|
|
|
||
|
|
A3 --> C1[BOM 계산 API 연동]
|
||
|
|
B3 --> C2[통합 품목 API 연동]
|
||
|
|
```
|
||
|
|
|
||
|
|
**Critical Path (병목 구간):**
|
||
|
|
1. 🔴 **치수 연결 매핑** (1-2주) - 모든 BOM 계산의 전제 조건
|
||
|
|
2. 🔴 **ItemManagement 분해** (4-7주) - 프론트엔드 병목
|
||
|
|
3. 🔴 **BOM formula/condition** (1-2주) - 견적 계산의 전제 조건
|
||
|
|
4. 🔴 **견적 계산 API** (1-2주) - 비즈니스 핵심 기능
|
||
|
|
|
||
|
|
**총 Critical Path:** 7-13주 (2-3개월)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Phase 1: 백엔드 핵심 개발 (3-4주) 🔴 P0
|
||
|
|
|
||
|
|
**목표:** 비즈니스 핵심 기능 백엔드 구현
|
||
|
|
|
||
|
|
#### Week 1-2: 데이터 모델 확장
|
||
|
|
|
||
|
|
**작업 1: 치수 연결 매핑 시스템 (Gap #2)**
|
||
|
|
- dimension_mappings 테이블 설계 및 생성
|
||
|
|
```sql
|
||
|
|
CREATE TABLE dimension_mappings (
|
||
|
|
id BIGINT PRIMARY KEY,
|
||
|
|
tenant_id BIGINT NOT NULL,
|
||
|
|
parent_item_id BIGINT NOT NULL,
|
||
|
|
parent_dimension VARCHAR(50) NOT NULL, -- 예: 'W', 'H', 'G'
|
||
|
|
child_item_id BIGINT NOT NULL,
|
||
|
|
child_dimension VARCHAR(50) NOT NULL,
|
||
|
|
mapping_rule VARCHAR(100), -- 예: '=', '*2', '/1000'
|
||
|
|
created_at TIMESTAMP,
|
||
|
|
updated_at TIMESTAMP,
|
||
|
|
FOREIGN KEY (parent_item_id) REFERENCES items(id),
|
||
|
|
FOREIGN KEY (child_item_id) REFERENCES items(id)
|
||
|
|
);
|
||
|
|
```
|
||
|
|
- DimensionMappingController 개발
|
||
|
|
- DimensionMappingService 개발
|
||
|
|
- API: `POST /api/v1/boms/{id}/dimension-mappings`
|
||
|
|
|
||
|
|
**작업 2: BOM 계산식/조건식 필드 (Gap #4, #5)**
|
||
|
|
- product_components 테이블 수정
|
||
|
|
```sql
|
||
|
|
ALTER TABLE product_components
|
||
|
|
ADD COLUMN formula VARCHAR(255), -- 예: 'G/1000*1.02'
|
||
|
|
ADD COLUMN condition VARCHAR(255); -- 예: 'MOTOR="Y"'
|
||
|
|
```
|
||
|
|
- ProductComponentController 업데이트
|
||
|
|
- BomCalculationService에 계산식/조건식 처리 로직 추가
|
||
|
|
|
||
|
|
**작업 3: dimensions/options 필드 추가 (Gap #6)**
|
||
|
|
- products 테이블 수정
|
||
|
|
```sql
|
||
|
|
ALTER TABLE products
|
||
|
|
ADD COLUMN options JSON,
|
||
|
|
ADD COLUMN dimensions JSON;
|
||
|
|
```
|
||
|
|
- materials 테이블 dimensions 추가 (options는 이미 존재)
|
||
|
|
```sql
|
||
|
|
ALTER TABLE materials
|
||
|
|
ADD COLUMN dimensions JSON;
|
||
|
|
```
|
||
|
|
|
||
|
|
**산출물:**
|
||
|
|
- Migration 파일 3개
|
||
|
|
- Controller 2개
|
||
|
|
- Service 2개
|
||
|
|
- Swagger 문서 업데이트
|
||
|
|
- PHPUnit 테스트 10개 이상
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### Week 3-4: BOM 계산 API 확장
|
||
|
|
|
||
|
|
**작업 4: 주문 기반 견적 계산 API (Gap #3)**
|
||
|
|
- QuoteCalculationController 개발
|
||
|
|
- API: `POST /api/v1/quotes/calculate`
|
||
|
|
```json
|
||
|
|
// Request
|
||
|
|
{
|
||
|
|
"product_id": 123,
|
||
|
|
"dimensions": {
|
||
|
|
"W": 3500,
|
||
|
|
"H": 2000
|
||
|
|
},
|
||
|
|
"options": {
|
||
|
|
"MOTOR": "Y",
|
||
|
|
"REMOTE": "N"
|
||
|
|
},
|
||
|
|
"quantity": 1,
|
||
|
|
"client_id": 456
|
||
|
|
}
|
||
|
|
|
||
|
|
// Response
|
||
|
|
{
|
||
|
|
"bom_tree": [
|
||
|
|
{
|
||
|
|
"item_code": "GR-001",
|
||
|
|
"item_name": "가이드레일",
|
||
|
|
"formula": "W*2",
|
||
|
|
"calculated_quantity": 7.0,
|
||
|
|
"unit_price": 50000,
|
||
|
|
"total_price": 350000,
|
||
|
|
"children": [...]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"cost_summary": {
|
||
|
|
"material_cost": 1500000,
|
||
|
|
"labor_cost": 300000,
|
||
|
|
"install_cost": 200000,
|
||
|
|
"subtotal": 2000000,
|
||
|
|
"total_amount": 2000000
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
- BomCalculationService 확장
|
||
|
|
- 치수 연결 매핑 적용
|
||
|
|
- formula 계산 (W, H 변수 치환)
|
||
|
|
- condition 평가 (조건부 BOM)
|
||
|
|
- 재귀적 BOM 전개 (다단계 구조)
|
||
|
|
- 가격 조회 (PricingService 연동)
|
||
|
|
|
||
|
|
**작업 5: material_type 필드 추가 (Gap #8)**
|
||
|
|
- materials 테이블 수정
|
||
|
|
```sql
|
||
|
|
ALTER TABLE materials
|
||
|
|
ADD COLUMN material_type ENUM('RM', 'SM', 'CS') DEFAULT 'RM';
|
||
|
|
```
|
||
|
|
- MaterialController 업데이트
|
||
|
|
- ItemsController 필터링 추가
|
||
|
|
|
||
|
|
**산출물:**
|
||
|
|
- QuoteCalculationController
|
||
|
|
- QuoteCalculationService
|
||
|
|
- Migration 파일 1개
|
||
|
|
- Swagger 문서 업데이트
|
||
|
|
- PHPUnit 테스트 15개 이상
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Phase 2: 프론트엔드 리팩토링 (4-7주) 🔴 P0
|
||
|
|
|
||
|
|
**목표:** ItemManagement.tsx 분해 및 성능 개선
|
||
|
|
|
||
|
|
#### Week 1-2: 상태 관리 리팩토링
|
||
|
|
|
||
|
|
**작업 1: useState 40개 → useReducer + Custom Hooks**
|
||
|
|
- hooks/useItemForm.ts (200-300 lines)
|
||
|
|
```typescript
|
||
|
|
// 40개 useState를 단일 reducer로 통합
|
||
|
|
interface ItemFormState {
|
||
|
|
view: 'list' | 'create' | 'edit' | 'view';
|
||
|
|
selectedItem: ItemMaster | null;
|
||
|
|
formData: Partial<ItemMaster>;
|
||
|
|
validationErrors: ValidationErrors;
|
||
|
|
// ... 나머지 상태
|
||
|
|
}
|
||
|
|
|
||
|
|
type ItemFormAction =
|
||
|
|
| { type: 'SET_VIEW'; view: string }
|
||
|
|
| { type: 'SET_FORM_DATA'; data: Partial<ItemMaster> }
|
||
|
|
| { type: 'SET_ERRORS'; errors: ValidationErrors }
|
||
|
|
// ... 나머지 액션
|
||
|
|
|
||
|
|
export function useItemForm(initialState?: Partial<ItemFormState>) {
|
||
|
|
const [state, dispatch] = useReducer(itemFormReducer, defaultState);
|
||
|
|
|
||
|
|
// Action creators
|
||
|
|
const setView = (view: string) => dispatch({ type: 'SET_VIEW', view });
|
||
|
|
const setFormData = (data: Partial<ItemMaster>) => dispatch({ type: 'SET_FORM_DATA', data });
|
||
|
|
|
||
|
|
return { state, setView, setFormData, ... };
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**작업 2: Validation 로직 분리**
|
||
|
|
- hooks/useItemValidation.ts (150-200 lines)
|
||
|
|
- validators/itemValidators.ts (100-150 lines)
|
||
|
|
```typescript
|
||
|
|
export const validateFG = (data: Partial<ItemMaster>): ValidationErrors => { ... };
|
||
|
|
export const validatePT = (data: Partial<ItemMaster>): ValidationErrors => { ... };
|
||
|
|
export const validateRM = (data: Partial<ItemMaster>): ValidationErrors => { ... };
|
||
|
|
```
|
||
|
|
|
||
|
|
**작업 3: 품목코드 생성 로직 분리**
|
||
|
|
- hooks/useItemCodeGenerator.ts (100-150 lines)
|
||
|
|
- utils/itemCodeGenerators.ts (100-150 lines)
|
||
|
|
```typescript
|
||
|
|
export const itemCodeGenerators = {
|
||
|
|
FG: (data) => `${data.itemName}-${data.specification}`,
|
||
|
|
PT_ASSEMBLY_GUIDE_RAIL: (data) => { ... },
|
||
|
|
PT_BENDING: (data) => { ... },
|
||
|
|
// ... 12개 생성기
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
**예상 효과:**
|
||
|
|
- ✅ 성능 개선: 부분 리렌더링 (40개 useState → 1개 reducer)
|
||
|
|
- ✅ 재사용성: 다른 화면에서도 활용 가능
|
||
|
|
- ✅ 테스트 가능: 각 훅 단위 테스트
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### Week 3-4: List View 리팩토링
|
||
|
|
|
||
|
|
**작업 4: DataTable organism 활용**
|
||
|
|
- 1,911줄 List View → 약 200줄로 감소
|
||
|
|
- organisms/ItemListView.tsx (200-300 lines)
|
||
|
|
```typescript
|
||
|
|
export function ItemListView({ items, onView, onEdit, onDelete }: ItemListViewProps) {
|
||
|
|
const columns: Column<ItemMaster>[] = [
|
||
|
|
{ key: 'itemType', label: '품목유형', type: 'badge' },
|
||
|
|
{ key: 'itemCode', label: '품목코드', type: 'text' },
|
||
|
|
{ key: 'itemName', label: '품목명', type: 'text' },
|
||
|
|
// ... 10개 컬럼
|
||
|
|
{ key: 'actions', label: '작업', type: 'actions',
|
||
|
|
actionsConfig: [
|
||
|
|
{ label: '보기', onClick: onView, icon: Eye },
|
||
|
|
{ label: '수정', onClick: onEdit, icon: Edit },
|
||
|
|
{ label: '삭제', onClick: onDelete, icon: Trash2 }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DataTable
|
||
|
|
columns={columns}
|
||
|
|
data={items}
|
||
|
|
keyField="id"
|
||
|
|
pagination={pagination}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**작업 5: 탭 기반 필터링 단순화**
|
||
|
|
- 7개 탭 반복 → 1개 DataTable + filter prop
|
||
|
|
- molecules/ItemTypeFilter.tsx (50-100 lines)
|
||
|
|
|
||
|
|
**예상 효과:**
|
||
|
|
- ✅ 코드 감소: 1,911줄 → 200줄 (약 89% 감소)
|
||
|
|
- ✅ 중복 제거: Pagination 로직 7회 반복 → 1회
|
||
|
|
- ✅ 일관성: DataTable organism 재사용
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### Week 5-7: Organisms 분리
|
||
|
|
|
||
|
|
**작업 6: BOM Editor 분리**
|
||
|
|
- organisms/BOMEditor.tsx (300-400 lines)
|
||
|
|
- molecules/BOMItemSearchPopover.tsx (100-150 lines)
|
||
|
|
- hooks/useBOMCalculation.ts (150-200 lines)
|
||
|
|
|
||
|
|
**작업 7: Bending Diagram Editor 분리**
|
||
|
|
- organisms/BendingDiagramEditor.tsx (200-300 lines)
|
||
|
|
- molecules/BendingDataTable.tsx (100-150 lines)
|
||
|
|
- hooks/useBendingCalculation.ts (100-150 lines)
|
||
|
|
```typescript
|
||
|
|
export function useBendingCalculation(bendingDetails: BendingDetail[]) {
|
||
|
|
const calculated = useMemo(() => {
|
||
|
|
return bendingDetails.map((detail, idx) => ({
|
||
|
|
...detail,
|
||
|
|
calculated: detail.input + detail.elongation,
|
||
|
|
sum: bendingDetails.slice(0, idx + 1).reduce((acc, d) => acc + d.input + d.elongation, 0),
|
||
|
|
}));
|
||
|
|
}, [bendingDetails]);
|
||
|
|
|
||
|
|
return calculated;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**작업 8: Form 분리**
|
||
|
|
- organisms/ItemFormDialog.tsx (300-400 lines)
|
||
|
|
- molecules/ItemTypeSelector.tsx (50-100 lines)
|
||
|
|
- molecules/CategorySelector.tsx (100-150 lines)
|
||
|
|
- molecules/PartTypeForm.tsx (150-200 lines)
|
||
|
|
|
||
|
|
**작업 9: 최종 통합**
|
||
|
|
- pages/ItemManagementPage.tsx (100-150 lines)
|
||
|
|
```typescript
|
||
|
|
export function ItemManagementPage() {
|
||
|
|
const { state, setView, ... } = useItemForm();
|
||
|
|
|
||
|
|
if (state.view === 'list') {
|
||
|
|
return <ItemListView items={state.items} onView={...} onEdit={...} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (state.view === 'view') {
|
||
|
|
return <ItemDetailView item={state.selectedItem} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
return <ItemFormDialog formData={state.formData} onSave={...} onCancel={...} />;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**예상 효과:**
|
||
|
|
- ✅ 파일당 100-400줄 (관리 가능한 크기)
|
||
|
|
- ✅ 재사용 가능: BOMEditor, BendingDiagramEditor 등
|
||
|
|
- ✅ 테스트 가능: 각 컴포넌트 단위 테스트
|
||
|
|
|
||
|
|
**산출물:**
|
||
|
|
- 15+ 파일 (pages 1, organisms 7, molecules 5, hooks 5, utils 2)
|
||
|
|
- Storybook 문서 10개
|
||
|
|
- Vitest 테스트 20개 이상
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Phase 3: 백엔드-프론트엔드 연동 (2-3주) 🟡 P1
|
||
|
|
|
||
|
|
**목표:** API 연동 및 중복 로직 제거
|
||
|
|
|
||
|
|
#### Week 1: 통합 API 연동
|
||
|
|
|
||
|
|
**작업 1: 통합 품목 조회 API 연동 (Gap #1)**
|
||
|
|
- ItemsController 활용
|
||
|
|
- 기존: `GET /products` + `GET /materials` (2회 호출)
|
||
|
|
- 변경: `GET /items?type=PRODUCT,MATERIAL` (1회 호출)
|
||
|
|
|
||
|
|
**작업 2: 가격 통합 조회 API 연동 (Gap #7)**
|
||
|
|
- `GET /items/{id}?include_price=true&client_id=1&price_date=2025-01-10`
|
||
|
|
- PriceHistoryManager organism 개발 (150-200 lines)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### Week 2-3: BOM 계산 API 연동
|
||
|
|
|
||
|
|
**작업 3: 견적 계산 API 연동**
|
||
|
|
- QuoteManagement3Write.tsx 수정
|
||
|
|
- 기존: 프론트에서 BOM 계산 (calculateQuantity 함수)
|
||
|
|
- 변경: 백엔드 API 호출 (`POST /quotes/calculate`)
|
||
|
|
- 중복 로직 제거 (약 200줄 감소)
|
||
|
|
|
||
|
|
**작업 4: BOM Editor 백엔드 연동**
|
||
|
|
- formula/condition 필드 저장/조회
|
||
|
|
- dimension_mappings API 연동
|
||
|
|
|
||
|
|
**산출물:**
|
||
|
|
- API 연동 코드
|
||
|
|
- 중복 로직 제거
|
||
|
|
- E2E 테스트 10개 이상
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Phase 4: 컴포넌트 확장 (4-6주) 🟢 P2
|
||
|
|
|
||
|
|
**목표:** Templates 및 나머지 화면 업데이트
|
||
|
|
|
||
|
|
#### Week 1-2: Templates 레이어 구축
|
||
|
|
|
||
|
|
**작업 1: Templates 개발 (Gap #12)**
|
||
|
|
- templates/ListPageTemplate.tsx (100-150 lines)
|
||
|
|
- templates/FormPageTemplate.tsx (100-150 lines)
|
||
|
|
- templates/DetailPageTemplate.tsx (100-150 lines)
|
||
|
|
- templates/DashboardTemplate.tsx (100-150 lines)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### Week 3-6: 나머지 화면 업데이트 (Gap #13)
|
||
|
|
|
||
|
|
**작업 2: 40+개 화면 업데이트**
|
||
|
|
- Templates 활용
|
||
|
|
- Organisms 재사용
|
||
|
|
- 주당 10개 화면 업데이트 목표
|
||
|
|
|
||
|
|
**산출물:**
|
||
|
|
- Templates 4개
|
||
|
|
- 40+개 화면 업데이트
|
||
|
|
- Storybook 문서 40개
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📅 전체 일정 및 리소스 계획
|
||
|
|
|
||
|
|
### 타임라인 (14-22주 / 3.5-5.5개월)
|
||
|
|
|
||
|
|
| Phase | 기간 | 작업량 | 우선순위 | 리소스 |
|
||
|
|
|-------|------|--------|----------|--------|
|
||
|
|
| **Phase 1: 백엔드 핵심** | 3-4주 | Gap #2, #3, #4, #5, #6, #8 | 🔴 P0 | Backend 1명 |
|
||
|
|
| **Phase 2: 프론트 리팩토링** | 4-7주 | Gap #14 (ItemManagement) | 🔴 P0 | Frontend 1-2명 |
|
||
|
|
| **Phase 3: 백-프 연동** | 2-3주 | API 연동, 중복 제거 | 🟡 P1 | Full-stack 1명 |
|
||
|
|
| **Phase 4: 컴포넌트 확장** | 4-6주 | Gap #11, #12, #13 | 🟢 P2 | Frontend 1-2명 |
|
||
|
|
| **Phase 5: 마무리** | 1-2주 | Gap #15, #17, E2E 테스트 | 🟢 P3 | QA 1명 |
|
||
|
|
|
||
|
|
**총 예상 기간:** 14-22주 (3.5-5.5개월)
|
||
|
|
|
||
|
|
**최소 인력:** 2명 (Backend 1명, Frontend 1명)
|
||
|
|
**권장 인력:** 3명 (Backend 1명, Frontend 2명)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 병렬 작업 전략
|
||
|
|
|
||
|
|
**Phase 1 + Phase 2 병렬 진행 (Week 1-7):**
|
||
|
|
- Backend: 치수 연결 매핑, BOM fields (Week 1-2)
|
||
|
|
- Frontend: ItemManagement 리팩토링 (Week 1-7)
|
||
|
|
- **예상 단축:** 3-4주 절감
|
||
|
|
|
||
|
|
**Phase 3 병렬 작업 (Week 8-10):**
|
||
|
|
- 통합 API 연동 (Week 8)
|
||
|
|
- BOM 계산 API 연동 (Week 9-10)
|
||
|
|
|
||
|
|
**Phase 4 병렬 작업 (Week 11-16):**
|
||
|
|
- Templates 개발 (Week 11-12)
|
||
|
|
- 나머지 화면 업데이트 (Week 13-16, 주당 10개)
|
||
|
|
|
||
|
|
**최적화 일정:** 14주 (3.5개월) - 병렬 진행 시
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 💰 예상 비용 (참고)
|
||
|
|
|
||
|
|
**가정:**
|
||
|
|
- Backend 개발자: 500만원/월
|
||
|
|
- Frontend 개발자: 500만원/월
|
||
|
|
- QA: 400만원/월
|
||
|
|
|
||
|
|
| Phase | 기간 | 인력 | 예상 비용 |
|
||
|
|
|-------|------|------|----------|
|
||
|
|
| Phase 1 | 4주 (1개월) | Backend 1명 | 500만원 |
|
||
|
|
| Phase 2 | 7주 (1.75개월) | Frontend 2명 | 1,750만원 |
|
||
|
|
| Phase 3 | 3주 (0.75개월) | Full-stack 1명 | 375만원 |
|
||
|
|
| Phase 4 | 6주 (1.5개월) | Frontend 2명 | 1,500만원 |
|
||
|
|
| Phase 5 | 2주 (0.5개월) | QA 1명 | 200만원 |
|
||
|
|
|
||
|
|
**총 예상 비용:** 약 4,325만원 (병렬 진행 시)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 성공 지표 (KPI)
|
||
|
|
|
||
|
|
### 품질 지표
|
||
|
|
|
||
|
|
| 지표 | 현재 | 목표 | 측정 방법 |
|
||
|
|
|------|------|------|----------|
|
||
|
|
| **코드 품질** | - | - | - |
|
||
|
|
| ItemManagement.tsx 크기 | 6,521 lines | < 150 lines | Lines of Code |
|
||
|
|
| 평균 파일 크기 | - | < 300 lines | Lines of Code |
|
||
|
|
| Cyclomatic Complexity | 25+ | < 10 | SonarQube |
|
||
|
|
| Code Duplication | 높음 | < 3% | SonarQube |
|
||
|
|
| **성능** | - | - | - |
|
||
|
|
| ItemManagement 렌더링 | 느림 | < 100ms | React DevTools |
|
||
|
|
| BOM 계산 응답 | - | < 500ms | API Benchmark |
|
||
|
|
| 견적 계산 응답 | - | < 1s | API Benchmark |
|
||
|
|
| **테스트** | - | - | - |
|
||
|
|
| 단위 테스트 커버리지 | 0% | > 80% | Vitest + PHPUnit |
|
||
|
|
| E2E 테스트 커버리지 | 0% | 100% (S1-S17) | Playwright |
|
||
|
|
| **컴포넌트 재사용** | - | - | - |
|
||
|
|
| Molecules | 6개 | 15개 | Count |
|
||
|
|
| Organisms | 8개 | 15개 | Count |
|
||
|
|
| Templates | 0개 | 4개 | Count |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 비즈니스 지표
|
||
|
|
|
||
|
|
| 지표 | 현재 | 목표 |
|
||
|
|
|------|------|------|
|
||
|
|
| 견적 산출 시간 | 수동 (30분) | 자동 (< 1분) |
|
||
|
|
| 견적 정확도 | 낮음 (수동 오류) | 높음 (자동 계산) |
|
||
|
|
| 품목 등록 시간 | - | < 5분 |
|
||
|
|
| BOM 설정 시간 | - | < 10분 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚀 Quick Start Guide
|
||
|
|
|
||
|
|
### 즉시 시작 가능한 작업
|
||
|
|
|
||
|
|
#### Backend 팀 (Week 1)
|
||
|
|
|
||
|
|
**Day 1-2: dimension_mappings 테이블 설계**
|
||
|
|
```bash
|
||
|
|
# 1. Migration 파일 생성
|
||
|
|
php artisan make:migration create_dimension_mappings_table
|
||
|
|
|
||
|
|
# 2. 테이블 설계
|
||
|
|
# - parent_item_id, parent_dimension
|
||
|
|
# - child_item_id, child_dimension
|
||
|
|
# - mapping_rule
|
||
|
|
|
||
|
|
# 3. Migration 실행
|
||
|
|
php artisan migrate
|
||
|
|
```
|
||
|
|
|
||
|
|
**Day 3-5: DimensionMappingController 개발**
|
||
|
|
```bash
|
||
|
|
php artisan make:controller Api/V1/DimensionMappingController
|
||
|
|
php artisan make:service DimensionMappingService
|
||
|
|
php artisan make:request DimensionMappingStoreRequest
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
#### Frontend 팀 (Week 1)
|
||
|
|
|
||
|
|
**Day 1-2: useItemForm hook 설계**
|
||
|
|
```bash
|
||
|
|
# 1. 상태 구조 정의
|
||
|
|
# ItemFormState, ItemFormAction
|
||
|
|
|
||
|
|
# 2. Reducer 함수 작성
|
||
|
|
# itemFormReducer
|
||
|
|
|
||
|
|
# 3. Custom hook 작성
|
||
|
|
# useItemForm
|
||
|
|
```
|
||
|
|
|
||
|
|
**Day 3-5: useItemValidation hook 개발**
|
||
|
|
```bash
|
||
|
|
# 1. Validators 분리
|
||
|
|
# validators/itemValidators.ts
|
||
|
|
|
||
|
|
# 2. Custom hook 작성
|
||
|
|
# hooks/useItemValidation.ts
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📋 체크리스트
|
||
|
|
|
||
|
|
### Phase 0 완료 체크리스트 ✅
|
||
|
|
|
||
|
|
- [x] 문서 분석 (6개 핵심 문서)
|
||
|
|
- [x] API 코드 분석 (11 files)
|
||
|
|
- [x] React 코드 분석 (ItemManagement 6,521줄)
|
||
|
|
- [x] Gap 분석 (17개 Gap 발견 및 검증)
|
||
|
|
- [x] 교차 참조 맵 생성
|
||
|
|
- [x] 개발 로드맵 수립
|
||
|
|
- [x] Critical Path 정의
|
||
|
|
- [x] 예상 일정 및 비용 산정
|
||
|
|
- [x] 최종 보고서 작성
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Phase 1 준비 체크리스트
|
||
|
|
|
||
|
|
- [ ] Backend 개발자 배정
|
||
|
|
- [ ] Frontend 개발자 배정 (2명 권장)
|
||
|
|
- [ ] 개발 환경 세팅 (Laravel + React)
|
||
|
|
- [ ] Git 브랜치 전략 수립
|
||
|
|
- [ ] Jira/Notion 티켓 생성
|
||
|
|
- [ ] Swagger 문서 리뷰
|
||
|
|
- [ ] Storybook 환경 세팅
|
||
|
|
- [ ] 테스트 환경 구축 (PHPUnit + Vitest + Playwright)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎓 학습 리소스
|
||
|
|
|
||
|
|
### Backend 개발자
|
||
|
|
|
||
|
|
**필수 학습:**
|
||
|
|
1. Laravel Service-First 패턴
|
||
|
|
2. FormRequest Validation
|
||
|
|
3. Eloquent Relationships (다형성)
|
||
|
|
4. API Resource 패턴
|
||
|
|
5. PHPUnit 테스트 작성
|
||
|
|
|
||
|
|
**참고 자료:**
|
||
|
|
- SAM API Development Rules (CLAUDE.md)
|
||
|
|
- api_code_analysis_summary.md
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Frontend 개발자
|
||
|
|
|
||
|
|
**필수 학습:**
|
||
|
|
1. React useReducer 패턴
|
||
|
|
2. Custom Hooks 작성
|
||
|
|
3. Atomic Design 패턴
|
||
|
|
4. shadcn/ui 컴포넌트 활용
|
||
|
|
5. Vitest 테스트 작성
|
||
|
|
6. Storybook 문서화
|
||
|
|
|
||
|
|
**참고 자료:**
|
||
|
|
- react_dev_guidelines_summary.md
|
||
|
|
- react_atomic_design_summary.md
|
||
|
|
- react_code_analysis_summary.md
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🔗 관련 문서
|
||
|
|
|
||
|
|
### Phase 0 산출물
|
||
|
|
|
||
|
|
1. **문서 분석 (Phase A):**
|
||
|
|
- `document_cross_reference_map.md`
|
||
|
|
- `api_item_analysis_summary.md`
|
||
|
|
- `react_atomic_design_summary.md`
|
||
|
|
- `react_dev_guidelines_summary.md`
|
||
|
|
- `react_screen_spec_summary.md`
|
||
|
|
- `business_quotation_guide_summary.md`
|
||
|
|
- `business_user_story_summary.md`
|
||
|
|
|
||
|
|
2. **코드 분석 (Phase B):**
|
||
|
|
- `api_code_analysis_summary.md`
|
||
|
|
- `react_code_analysis_summary.md`
|
||
|
|
- `api_gap_validation_report.md`
|
||
|
|
|
||
|
|
3. **최종 보고서 (Phase C):**
|
||
|
|
- `PHASE_0_FINAL_REPORT.md` (본 문서)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 프로젝트 문서
|
||
|
|
|
||
|
|
- `MES_PROJECT_ROADMAP.md` - 전체 로드맵
|
||
|
|
- `MES_PROGRESS_TRACKER.md` - 진행 상황
|
||
|
|
- `CLAUDE.md` - 개발 규칙
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🏁 결론 및 권장 사항
|
||
|
|
|
||
|
|
### Phase 0 달성 사항
|
||
|
|
|
||
|
|
✅ **100% 완료**
|
||
|
|
- 문서 분석: 7,065줄 → 7개 요약본
|
||
|
|
- 코드 분석: API 11 files + React 6,521줄
|
||
|
|
- Gap 분석: 17개 Gap 발견 및 검증
|
||
|
|
- 개발 로드맵: Phase 1-12 실행 계획
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 핵심 권장 사항
|
||
|
|
|
||
|
|
1. **Phase 1-2 병렬 진행 필수**
|
||
|
|
- Backend: 치수 연결 매핑 (Week 1-2)
|
||
|
|
- Frontend: ItemManagement 리팩토링 (Week 1-7)
|
||
|
|
- **예상 단축:** 3-4주 절감
|
||
|
|
|
||
|
|
2. **ItemManagement 리팩토링 최우선**
|
||
|
|
- 🔴 6,521 lines God Component
|
||
|
|
- 성능 저하, 유지보수 불가능
|
||
|
|
- **4-7주 집중 투입 필요**
|
||
|
|
|
||
|
|
3. **치수 연결 매핑 조기 구현**
|
||
|
|
- 비즈니스 핵심 기능
|
||
|
|
- BOM 계산, 견적 산출의 전제 조건
|
||
|
|
- **1-2주 최우선 개발**
|
||
|
|
|
||
|
|
4. **인력 배정 권장**
|
||
|
|
- Backend 1명 (필수)
|
||
|
|
- Frontend 2명 (권장)
|
||
|
|
- **3명 체제로 병렬 진행 시 14주 완료 가능**
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 다음 단계
|
||
|
|
|
||
|
|
**즉시 시작 가능:**
|
||
|
|
```
|
||
|
|
"Phase 1 (백엔드 핵심 개발) 시작해줘"
|
||
|
|
"ItemManagement 리팩토링 시작해줘"
|
||
|
|
```
|
||
|
|
|
||
|
|
**상세 계획 필요:**
|
||
|
|
```
|
||
|
|
"dimension_mappings 테이블 설계 도와줘"
|
||
|
|
"useItemForm hook 설계 도와줘"
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**문서 버전:** v1.0 (Final)
|
||
|
|
**작성일:** 2025-11-12
|
||
|
|
**BP-MES Phase:** 0 완료 ✅
|
||
|
|
**다음 Phase:** 1 (백엔드 핵심 개발) 준비 완료
|
||
|
|
**예상 전체 기간:** 14-22주 (3.5-5.5개월)
|
||
|
|
**권장 인력:** 3명 (Backend 1명, Frontend 2명)
|