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

// 입력 상태
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 스킬로 생성되었습니다.