sam-docs/dev/dev_plans/simulator-ui-enhancement-plan.md

# 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/dev_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 스킬로 생성되었습니다.*