# 🎯 견적 산출하기 - 최종 테스트 가이드

## ✅ 구현 완료된 기능

### 1. 자동 산출
- AutoCalculationSimulator로 BOM 자동 생성
- 결과가 EditableBOMResults로 표시 (읽기 전용 FormulaCalculationResults 비활성화)

### 2. BOM 편집 기능
- ✅ 품목 추가 (+ 버튼)
- ✅ 품목 수정 (연필 아이콘)
- ✅ 품목 삭제 (휴지통 아이콘)

### 3. 저장 기능
- ✅ 임시저장 (localStorage)
- ✅ 견적으로 저장 (DataContext에 견적 추가)

### 4. UI 개선
- ✅ 상단 버튼 조건부 표시
- ✅ BOM 테이블 내 저장 버튼
- ✅ 실시간 금액 계산

---

## 🚀 테스트 단계별 가이드

### Step 1: 페이지 접근
1. **판매관리** 메뉴 클릭
2. **견적관리** 클릭
3. **견적 산출하기** 버튼 클릭

### Step 2: 기본 정보 입력
```
고객사명: 테스트 고객사
프로젝트명: 테스트 프로젝트 2025
```

### Step 3: 자동 산출 실행
1. 자동 산출 시뮬레이터 섹션에서:
   - **제품 선택**: 원하는 제품 선택
   - **카테고리**: 제품 카테고리 선택
   - **층수**: 예) 3
   - **부호**: 예) A
   - **W0 (개구부 폭)**: 예) 3000
   - **H0 (개구부 높이)**: 예) 4000

2. **"자동 산출 실행"** 버튼 클릭

### Step 4: 브라우저 콘솔 확인 (F12)
다음 로그가 순서대로 나타나야 합니다:

```
🎯 AutoCalculationSimulator - 계산 완료!
📦 results.bomItems: Array(X)
✅ onCalculationComplete 콜백 호출 중...
✅ onCalculationComplete 콜백 호출 완료

🎯 자동 산출 완료 호출됨!
📦 전달받은 results: {...}
✅ BOM 항목 설정 중: Array(X)

🔍 EditableBOM 렌더링 체크: { editableBOMItemsLength: X, ... }
✅ EditableBOMResults 렌더링됨

🎨 EditableBOMResults 렌더링됨!
📦 받은 bomItems: Array(X)
🔄 bomItems 변경 감지, items 업데이트
```

### Step 5: UI 확인

#### 5-1. BOM 테이블이 표시되는가?
- [ ] **"BOM 기반 자재 산출 결과 (편집 가능)"** 섹션 보임
- [ ] 테이블 헤더: 품목코드, 품목명, 계산수량, 단위, 단가, 금액, 비고, 작업
- [ ] 각 행에 수정/삭제 버튼 보임

#### 5-2. 헤더 버튼들이 있는가?
- [ ] **"디버깅 보기/숨기기"** 버튼 (Bug 아이콘)
- [ ] **"품목 추가"** 버튼 (Plus 아이콘)
- [ ] **"임시저장"** 버튼 (Save 아이콘)

#### 5-3. 하단 버튼들이 있는가?
- [ ] **"임시저장"** 버튼 (outline 스타일)
- [ ] **"견적으로 저장"** 버튼 (파란색 스타일)

#### 5-4. 상단 우측 버튼 확인
- [ ] **"임시저장"** 버튼 (outline 스타일)
- [ ] **"견적으로 저장"** 버튼 (녹색 스타일)

---

## 🧪 기능 테스트

### 테스트 1: 품목 추가
1. **"품목 추가"** 버튼 클릭
2. 드롭다운에서 품목 선택 (검색 가능)
3. 수량 입력 (예: 5)
4. **"추가"** 버튼 클릭

**예상 결과:**
- ✅ 테이블에 새 행 추가됨
- ✅ 토스트 메시지: "항목이 추가되었습니다."
- ✅ 콘솔: `📝 BOM 항목 변경됨: Array(X+1)`
- ✅ 하단 금액 자동 업데이트

### 테스트 2: 품목 수정
1. 임의의 행에서 **연필 아이콘** 클릭
2. 수량 또는 단가 변경 (예: 10 → 20)
3. **체크 아이콘** 클릭하여 저장

**예상 결과:**
- ✅ 값이 변경됨
- ✅ 토스트 메시지: "항목이 수정되었습니다."
- ✅ 콘솔: `📝 BOM 항목 변경됨: Array(X)`
- ✅ 금액 자동 재계산

### 테스트 3: 품목 삭제
1. 임의의 행에서 **휴지통 아이콘** 클릭
2. 확인 대화상자에서 **"확인"** 클릭

**예상 결과:**
- ✅ 행이 테이블에서 제거됨
- ✅ 토스트 메시지: "항목이 삭제되었습니다."
- ✅ 콘솔: `📝 BOM 항목 변경됨: Array(X-1)`
- ✅ 금액 자동 재계산

### 테스트 4: 임시저장
1. 상단 또는 하단의 **"임시저장"** 버튼 클릭

**예상 결과:**
- ✅ 토스트 메시지: "BOM 항목이 임시저장되었습니다."
- ✅ 콘솔: `💾 임시저장 완료: {...}`
- ✅ localStorage 확인 (F12 → Application 탭 → Local Storage → `quote-temp-save`)

**localStorage 확인 방법:**
```javascript
// 콘솔에서 직접 확인
JSON.parse(localStorage.getItem('quote-temp-save'))
```

### 테스트 5: 견적으로 저장
1. 고객사명, 프로젝트명이 입력되어 있는지 확인
2. 상단 또는 하단의 **"견적으로 저장"** 버튼 클릭

**예상 결과:**
- ✅ 콘솔 로그:
  ```
  💾 BOM을 견적으로 저장 버튼 클릭됨
  ✅ BOM 기반 견적 저장: {...}
  ✅ 저장할 견적: {...}
  ✅ addQuote 호출 완료
  ```
- ✅ 토스트 메시지: "견적이 성공적으로 저장되었습니다 (X개 품목)"
- ✅ 0.5초 후 견적 목록으로 자동 이동
- ✅ localStorage의 `quote-temp-save` 자동 삭제

### 테스트 6: 저장된 견적 확인
1. 견적 목록 페이지에서 방금 저장한 견적 확인
2. 견적 번호, 고객사명, 프로젝트명, 품목 수 확인

**예상 결과:**
- ✅ 견적이 목록 상단에 표시됨
- ✅ 고객사명: "테스트 고객사"
- ✅ 프로젝트명: "테스트 프로젝트 2025"
- ✅ 품목 수: X개 (편집한 BOM 항목 개수)

---

## ❌ 문제 발생 시 체크리스트

### 문제: BOM 테이블이 안 보임

#### 원인 1: editableBOMItems가 비어있음
**콘솔 확인:**
```
❌ editableBOMItems.length가 0이라 렌더링 안됨
```

**해결 방법:**
1. 선택한 제품에 BOM이 등록되어 있는지 확인
2. 기준정보 > 품목관리 > 해당 제품 선택 > BOM 탭 확인
3. BOM이 없다면 BOM 등록 후 다시 시도

#### 원인 2: AutoCalculationSimulator가 결과를 반환하지 않음
**콘솔 확인:**
```
⚠️ onCalculationComplete 콜백이 없음
또는
❌ BOM 항목이 없거나 배열이 아님
```

**해결 방법:**
1. 콘솔에서 `results.bomItems` 확인
2. 수식 규칙이 제대로 설정되어 있는지 확인
3. 기준정보 > 수식관리에서 해당 제품의 수식 확인

---

### 문제: 버튼 클릭이 작동하지 않음

#### 디버깅 방법:
1. F12로 콘솔 열기
2. 버튼 클릭 시 에러 메시지 확인
3. 해당 핸들러의 로그가 나오는지 확인

**예시:**
- 임시저장 클릭 → `💾 임시저장 완료` 로그가 없다면 핸들러가 호출되지 않은 것
- 견적 저장 클릭 → `💾 BOM을 견적으로 저장 버튼 클릭됨` 로그가 없다면 버튼 연결 문제

---

### 문제: 저장 후 목록으로 이동하지 않음

#### 원인: onBack prop이 전달되지 않음
**확인 방법:**
```javascript
// 콘솔에서 확인
console.log("onBack prop:", !!onBack); // true여야 함
```

**해결 방법:**
- QuoteSimulation을 호출하는 부모 컴포넌트에서 onBack prop 전달 확인
- 예: `<QuoteSimulation onBack={() => setCurrentView('list')} />`

---

### 문제: 금액이 업데이트되지 않음

#### 원인: 단가 정보가 없음
**확인 방법:**
1. 디버깅 보기/숨기기 버튼 클릭
2. 각 항목의 단가 확인
3. 단가가 0이라면 품목관리에서 단가 설정 필요

---

## 📊 예상 워크플로우

```
1. 사용자가 기본 정보 입력
   ↓
2. 자동 산출 실행
   ↓
3. AutoCalculationSimulator가 BOM 생성
   ↓
4. onCalculationComplete 호출
   ↓
5. editableBOMItems 상태 업데이트
   ↓
6. EditableBOMResults 렌더링
   ↓
7. 사용자가 BOM 편집 (추가/수정/삭제)
   ↓
8. onItemsChange로 변경사항 전달
   ↓
9. editableBOMItems 상태 업데이트
   ↓
10. [임시저장] 클릭 시:
    → localStorage에 저장
    → 토스트 메시지 표시
    
11. [견적으로 저장] 클릭 시:
    → 유효성 검사 (고객사명, 프로젝트명)
    → BOM → QuoteItem 변환
    → addQuote 호출
    → localStorage 정리
    → 0.5초 후 목록 이동
```

---

## 🎯 성공 기준

모든 항목이 체크되어야 합니다:

- [ ] 자동 산출 후 BOM 테이블 표시
- [ ] 품목 추가 버튼 작동
- [ ] 품목 수정 버튼 작동
- [ ] 품목 삭제 버튼 작동
- [ ] 임시저장 버튼 표시 및 작동
- [ ] 견적으로 저장 버튼 표시 및 작동
- [ ] 저장 후 목록으로 자동 이동
- [ ] 저장된 견적이 목록에 표시

---

## 🔍 추가 디버깅 팁

### 1. React DevTools 사용
- React DevTools 확장 프로그램 설치
- Components 탭에서 QuoteSimulation 찾기
- State 확인:
  - `editableBOMItems`: 배열이어야 하며 항목이 있어야 함
  - `calculationResults`: 자동 산출 후 객체가 있어야 함

### 2. localStorage 직접 확인
```javascript
// 콘솔에서 실행
localStorage.getItem('quote-temp-save')
```

### 3. DataContext 확인
```javascript
// 콘솔에서 실행 (React DevTools에서)
$r.props // 현재 선택된 컴포넌트의 props
$r.state // 현재 선택된 컴포넌트의 state
```

---

## 📞 문제 해결이 안 될 때

모든 로그를 캡처하여 공유해주세요:

1. **콘솔 로그 전체 복사**
   - 자동 산출 실행부터 저장까지의 모든 로그

2. **에러 메시지**
   - 빨간색으로 표시된 모든 에러

3. **UI 스크린샷**
   - 문제가 발생한 화면

4. **작업 순서**
   - 어떤 순서로 작업했는지 단계별로 설명

---

## ✅ 최종 확인

이 가이드대로 모든 테스트를 완료하셨다면, 견적 산출하기 기능이 완벽하게 작동하는 것입니다! 🎉

축하합니다! MES 시스템의 핵심 기능 중 하나가 완성되었습니다. 👏
