232 lines
8.2 KiB
Markdown
232 lines
8.2 KiB
Markdown
|
# MNG 시뮬레이터 UI 개선 계획
|
||
|
|
|
||
|
|
> **작성일**: 2025-12-30
|
||
|
|
> **목적**: MNG 시뮬레이터를 Design 자동 견적 산출과 동일하게 개선
|
||
|
|
> **기준 문서**: `design/src/components/QuoteAutoCalculation.tsx`
|
||
|
|
> **상태**: 🔄 진행중 (Serena ID: simulator-ui-state)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📍 현재 진행 상태
|
||
|
|
|
||
|
|
| 항목 | 내용 |
|
||
|
|
|------|------|
|
||
|
|
| **마지막 완료 작업** | Phase 1 UI 레이아웃 수정 (단일행) |
|
||
|
|
| **다음 작업** | Phase 2 제품 드롭다운 데이터 로드 수정 |
|
||
|
|
| **진행률** | 6/10 (60%) |
|
||
|
|
| **마지막 업데이트** | 2025-12-30 19:00 |
|
||
|
|
|
||
|
|
### 🚨 현재 이슈
|
||
|
|
|
||
|
|
| 이슈 | 설명 | 상태 |
|
||
|
|
|------|------|------|
|
||
|
|
| 제품 드롭다운 비어있음 | FG 제품이 로드되지 않음 | ⏳ 조사 필요 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 1. 개요
|
||
|
|
|
||
|
|
### 1.1 배경
|
||
|
|
|
||
|
|
Design 자동 견적 산출(`localhost:3002` > 판매관리 > 견적관리 > 견적등록 > 자동 견적 산출)과
|
||
|
|
MNG 시뮬레이터(`mng.sam.kr/quote-formulas/simulator`)가 동일한 결과를 도출해야 함.
|
||
|
|
|
||
|
|
**현재 차이점:**
|
||
|
|
- Design: 프론트엔드에서 자체 계산 (`eval()`)
|
||
|
|
- MNG: 백엔드 API에서 계산 (`FormulaEvaluatorService`)
|
||
|
|
|
||
|
|
**목표:**
|
||
|
|
MNG 시뮬레이터 UI를 Design과 동일하게 맞추고, 동일한 입력에 동일한 결과가 나오도록 개선.
|
||
|
|
|
||
|
|
### 1.2 기준 원칙
|
||
|
|
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────────────────────┐
|
||
|
|
│ 🎯 핵심 원칙 │
|
||
|
|
├─────────────────────────────────────────────────────────────────┤
|
||
|
|
│ 1. Design QuoteAutoCalculation UI를 MNG Blade로 구현 │
|
||
|
|
│ 2. 동일 입력 → 동일 결과 (Design과 MNG) │
|
||
|
|
│ 3. DB 데이터 기반 동적 제품 로드 │
|
||
|
|
│ 4. 기존 FormulaEvaluatorService 계산 로직 활용 │
|
||
|
|
└─────────────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 1.3 변경 승인 정책
|
||
|
|
|
||
|
|
| 분류 | 예시 | 승인 |
|
||
|
|
|------|------|------|
|
||
|
|
| ✅ 즉시 가능 | UI 필드 추가, 드롭다운 옵션, CSS 스타일 | 불필요 |
|
||
|
|
| ⚠️ 컨펌 필요 | 백엔드 API 변경, 계산 로직 수정 | **필수** |
|
||
|
|
| 🔴 금지 | DB 스키마 변경, 기존 API 삭제 | 별도 협의 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. Design vs MNG 비교 분석
|
||
|
|
|
||
|
|
### 2.1 입력 필드 비교
|
||
|
|
|
||
|
|
| 필드 | Design 변수명 | Design | MNG 현재 | MNG 목표 |
|
||
|
|
|------|--------------|:------:|:--------:|:--------:|
|
||
|
|
| 제품 선택 | selectedProductId | ✅ | ✅ | ✅ |
|
||
|
|
| 폭 | width | ✅ | ✅ (W0) | ✅ |
|
||
|
|
| 높이 | height | ✅ | ✅ (H0) | ✅ |
|
||
|
|
| 수량 | quantity | ✅ | ✅ (QTY) | ✅ |
|
||
|
|
|
||
|
|
### 2.2 Design 코드 분석
|
||
|
|
|
||
|
|
**파일**: `design/src/components/QuoteAutoCalculation.tsx`
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 입력 상태
|
||
|
|
const [selectedProductId, setSelectedProductId] = useState("");
|
||
|
|
const [inputValues, setInputValues] = useState<Record<string, number>>({
|
||
|
|
width: 1000,
|
||
|
|
height: 2000,
|
||
|
|
quantity: 1
|
||
|
|
});
|
||
|
|
|
||
|
|
// 제품 목록 (FG 타입만 필터링)
|
||
|
|
const products = useMemo(() => {
|
||
|
|
return itemMasters.filter(item => item.itemType === 'FG');
|
||
|
|
}, [itemMasters]);
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2.3 계산 방식 비교
|
||
|
|
|
||
|
|
| 항목 | Design | MNG |
|
||
|
|
|------|--------|-----|
|
||
|
|
| 계산 위치 | 프론트엔드 (`eval()`) | 백엔드 (`FormulaEvaluatorService`) |
|
||
|
|
| 데이터 소스 | `useData()` Context | DB API |
|
||
|
|
| BOM 규칙 | `formulaRules` | `quote_formulas` 테이블 |
|
||
|
|
| 단가 | `pricing` Context | DB 단가 테이블 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. 대상 범위
|
||
|
|
|
||
|
|
### 3.1 Phase 1: UI 입력 필드 (Design 기준)
|
||
|
|
|
||
|
|
| # | 작업 항목 | 상태 | 비고 |
|
||
|
|
|---|----------|:----:|------|
|
||
|
|
| 1.1 | 제품 선택 드롭다운 | ✅ | FG 타입 제품 |
|
||
|
|
| 1.2 | 폭(width) 입력 필드 | ✅ | 기본값: 1000 |
|
||
|
|
| 1.3 | 높이(height) 입력 필드 | ✅ | 기본값: 2000 |
|
||
|
|
| 1.4 | 수량(quantity) 입력 필드 | ✅ | 기본값: 1 |
|
||
|
|
| 1.5 | UI 레이아웃 단일행 수정 | ✅ | flex-wrap |
|
||
|
|
|
||
|
|
### 3.2 Phase 2: 제품 데이터 로드 수정
|
||
|
|
|
||
|
|
| # | 작업 항목 | 상태 | 비고 |
|
||
|
|
|---|----------|:----:|------|
|
||
|
|
| 2.1 | FG 제품 API 호출 확인 | ⏳ | 현재 빈 배열 반환 |
|
||
|
|
| 2.2 | tenant_id 확인 | ⏳ | 세션 기반 |
|
||
|
|
| 2.3 | 제품 드롭다운 데이터 바인딩 | ⏳ | - |
|
||
|
|
|
||
|
|
### 3.3 Phase 3: 계산 결과 검증
|
||
|
|
|
||
|
|
| # | 작업 항목 | 상태 | 비고 |
|
||
|
|
|---|----------|:----:|------|
|
||
|
|
| 3.1 | Design과 동일 입력으로 테스트 | ⏳ | width=1200, height=2400, qty=10 |
|
||
|
|
| 3.2 | BOM 구성 결과 비교 | ⏳ | 품목/수량 일치 여부 |
|
||
|
|
| 3.3 | 금액 계산 결과 비교 | ⏳ | 단가/총액 일치 여부 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. 상세 작업 내용
|
||
|
|
|
||
|
|
### 4.1 수정 대상 파일
|
||
|
|
|
||
|
|
| 파일 | 수정 내용 |
|
||
|
|
|------|----------|
|
||
|
|
| `simulator.blade.php` | UI 입력 필드 (Design 기준) |
|
||
|
|
| `FormulaEvaluatorService.php` | 계산 로직 (필요시) |
|
||
|
|
| `QuoteFormulaController.php` | API 파라미터 (필요시) |
|
||
|
|
|
||
|
|
### 4.2 UI 레이아웃 (Design 기준)
|
||
|
|
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────────────────────┐
|
||
|
|
│ 완제품 BOM 시뮬레이션 │
|
||
|
|
├─────────────────────────────────────────────────────────────────┤
|
||
|
|
│ │
|
||
|
|
│ [제품 선택 ▼] [폭 width] [높이 height] [수량] [실행] │
|
||
|
|
│ │
|
||
|
|
└─────────────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. 컨펌 대기 목록
|
||
|
|
|
||
|
|
| # | 항목 | 변경 내용 | 영향 범위 | 상태 |
|
||
|
|
|---|------|----------|----------|------|
|
||
|
|
| 1 | 기존 추가 필드 제거 | PC, GT, MP, CT, WS, INSP 필드가 Design에 없음 | UI | ⚠️ 컨펌 필요 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. 변경 이력
|
||
|
|
|
||
|
|
| 날짜 | 항목 | 변경 내용 | 파일 | 승인 |
|
||
|
|
|------|------|----------|------|------|
|
||
|
|
| 2025-12-30 | 초안 | 계획 문서 작성 | - | - |
|
||
|
|
| 2025-12-30 | Phase 1 | UI 입력 필드 추가 (PC, GT, MP, CT, WS, INSP) | simulator.blade.php | ✅ |
|
||
|
|
| 2025-12-30 | Phase 2 | 백엔드 변수 처리 및 디버그 로깅 개선 | FormulaEvaluatorService.php | ✅ |
|
||
|
|
| 2025-12-30 | 수정 | UI 레이아웃 단일행으로 변경 | simulator.blade.php | ✅ |
|
||
|
|
| 2025-12-30 | 수정 | 기준 문서 변경 (React → Design) | 계획 문서 | ✅ |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 7. 참고 문서
|
||
|
|
|
||
|
|
- **Design 원본**: `design/src/components/QuoteAutoCalculation.tsx`
|
||
|
|
- **Design 가이드**: `design/src/QUOTE_AUTO_CALCULATION_GUIDE.md`
|
||
|
|
- **기존 시뮬레이터 계획**: `docs/plans/simulator-calculation-logic-mapping.md`
|
||
|
|
- **품질 체크리스트**: `docs/standards/quality-checklist.md`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 8. 세션 및 메모리 관리 정책
|
||
|
|
|
||
|
|
### 8.1 Serena 메모리 구조
|
||
|
|
|
||
|
|
- `simulator-ui-state`: { phase, progress, next_step, last_decision }
|
||
|
|
- `simulator-ui-snapshot`: 현재까지의 코드 변경점 요약
|
||
|
|
|
||
|
|
### 8.2 세션 시작 시
|
||
|
|
|
||
|
|
```
|
||
|
|
read_memory("simulator-ui-state")
|
||
|
|
read_memory("simulator-ui-snapshot")
|
||
|
|
계획 문서 읽기
|
||
|
|
```
|
||
|
|
|
||
|
|
### 8.3 세션 종료 시
|
||
|
|
|
||
|
|
```
|
||
|
|
write_memory("simulator-ui-state")
|
||
|
|
계획 문서 업데이트
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 9. 검증 결과
|
||
|
|
|
||
|
|
> 작업 완료 후 이 섹션에 검증 결과 추가
|
||
|
|
|
||
|
|
### 9.1 테스트 케이스
|
||
|
|
|
||
|
|
| 입력값 | 예상 결과 | 실제 결과 | 상태 |
|
||
|
|
|--------|----------|----------|------|
|
||
|
|
| 스크린 제품, W=1200, H=2400, Q=10 | Design과 동일 | - | ⏳ |
|
||
|
|
|
||
|
|
### 9.2 성공 기준 달성 현황
|
||
|
|
|
||
|
|
| 기준 | 달성 | 비고 |
|
||
|
|
|------|------|------|
|
||
|
|
| Design과 동일한 입력 필드 | ⏳ | 제품/폭/높이/수량 |
|
||
|
|
| 제품 드롭다운 데이터 로드 | ❌ | 현재 비어있음 |
|
||
|
|
| Design과 동일한 계산 결과 | ⏳ | 검증 필요 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
*이 문서는 /sc:plan 스킬로 생성되었습니다.*
|