# 견적 산출하기 디버깅 체크리스트

## 🔍 수정 사항 요약

### 1. AutoCalculationSimulator 수정
- `showResults` prop 추가 (기본값: true)
- QuoteSimulation에서는 `showResults={false}`로 설정하여 내부 결과 표시 비활성화
- 자동 산출 완료 시 상세 디버깅 로그 추가

### 2. EditableBOMResults 수정  
- `useEffect` 추가: bomItems prop 변경 시 내부 items 상태 자동 업데이트
- 컴포넌트 렌더링 및 상태 변경 시 디버깅 로그 추가

### 3. QuoteSimulation 수정
- 상단 버튼 로직 변경:
  - **BOM 항목이 있을 때**: "임시저장" + "견적으로 저장" 버튼 표시
  - **BOM 항목이 없을 때**: "견적 저장" 버튼만 표시
- handleCalculationComplete에 상세 디버깅 로그 추가
- EditableBOMResults 렌더링 조건 확인 로그 추가

## 📋 브라우저에서 확인할 사항

### Step 1: 페이지 로드
- 브라우저 개발자 도구 열기 (F12)
- Console 탭으로 이동

### Step 2: 기본 정보 입력
1. 고객사명 입력 (예: "테스트 고객사")
2. 프로젝트명 입력 (예: "테스트 프로젝트")

### Step 3: 자동 산출 실행
1. 자동 산출 시뮬레이터 섹션에서 조건 입력
   - 제품 선택
   - W0, H0 입력
   - 층수, 부호 등 입력
2. "자동 산출 실행" 버튼 클릭

### Step 4: 콘솔 로그 확인
다음 로그들이 순서대로 나타나야 합니다:

```
🎯 AutoCalculationSimulator - 계산 완료!
📦 results.bomItems: [...]
📦 results.bomItems 길이: X
✅ onCalculationComplete 콜백 호출 중...
✅ onCalculationComplete 콜백 호출 완료

🎯 자동 산출 완료 호출됨!
📦 전달받은 results: {...}
📋 results.bomItems 타입: object
📋 results.bomItems 배열 여부: true
📋 results.bomItems 길이: X
✅ BOM 항목 설정 중: [...]

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

🎨 EditableBOMResults 렌더링됨!
📦 받은 bomItems: [...]
📦 bomItems 길이: X
🔄 bomItems 변경 감지, items 업데이트: [...]
📋 현재 items 상태: [...]
📋 items 길이: X
```

### Step 5: UI 확인
자동 산출 후 다음이 표시되어야 합니다:

1. ✅ **BOM 기반 자재 산출 결과 (편집 가능)** 섹션
   - 헤더에 "디버깅 보기/숨기기" 버튼
   - 헤더에 "품목 추가" 버튼
   - 헤더에 "임시저장" 버튼

2. ✅ **테이블**
   - 품목코드, 품목명, 계산수량, 단위, 단가, 금액, 비고, 작업 컬럼
   - 각 행에 수정(연필) 버튼과 삭제(휴지통) 버튼

3. ✅ **하단 버튼**
   - "임시저장" 버튼 (outline)
   - "견적으로 저장" 버튼 (파란색)

4. ✅ **상단 우측 버튼**
   - "임시저장" 버튼 (BOM 있을 때)
   - "견적으로 저장" 버튼 (녹색, BOM 있을 때)

### Step 6: 기능 테스트

#### 6-1. 품목 추가
1. "품목 추가" 버튼 클릭
2. 품목 선택
3. 수량 입력
4. "추가" 버튼 클릭
5. 콘솔에 "항목이 추가되었습니다." 토스트 확인

#### 6-2. 품목 수정
1. 임의의 행에서 수정(연필) 버튼 클릭
2. 수량 또는 단가 변경
3. 저장(체크) 버튼 클릭
4. 콘솔에 "항목이 수정되었습니다." 토스트 확인
5. 콘솔에 `📝 BOM 항목 변경됨:` 로그 확인

#### 6-3. 품목 삭제
1. 임의의 행에서 삭제(휴지통) 버튼 클릭
2. 확인 대화상자에서 "확인" 클릭
3. 콘솔에 "항목이 삭제되었습니다." 토스트 확인
4. 콘솔에 `📝 BOM 항목 변경됨:` 로그 확인

#### 6-4. 임시저장
1. 상단 또는 하단의 "임시저장" 버튼 클릭
2. 콘솔에 "BOM 항목이 임시저장되었습니다." 토스트 확인
3. 콘솔에 `💾 임시저장 완료:` 로그 확인
4. localStorage 확인 (Application 탭 → Local Storage → `quote-temp-save`)

#### 6-5. 견적으로 저장
1. 고객사명, 프로젝트명이 입력되어 있는지 확인
2. 상단 또는 하단의 "견적으로 저장" 버튼 클릭
3. 콘솔에 다음 로그 확인:
   ```
   💾 BOM을 견적으로 저장 버튼 클릭됨
   ✅ BOM 기반 견적 저장: {...}
   ✅ addQuote 호출 완료
   🔙 목록으로 이동
   ```
4. 토스트 메시지: "견적이 성공적으로 저장되었습니다 (X개 품목)"
5. 0.8초 후 견적 목록으로 자동 이동

## ❌ 문제 발생 시 체크사항

### 문제 1: EditableBOMResults가 렌더링되지 않음
**콘솔 확인:**
- `❌ editableBOMItems.length가 0이라 렌더링 안됨` 로그가 있는지 확인
- `results.bomItems` 배열이 비어있는지 확인

**해결 방법:**
- 선택한 제품에 BOM이 등록되어 있는지 확인
- 품목관리에서 해당 제품의 BOM 탭 확인

### 문제 2: 버튼이 작동하지 않음
**콘솔 확인:**
- 버튼 클릭 시 해당 핸들러의 로그가 나오는지 확인
- 에러 메시지가 있는지 확인

**해결 방법:**
- React DevTools로 컴포넌트 props 확인
- 함수가 제대로 전달되었는지 확인

### 문제 3: 임시저장 버튼이 안 보임
**원인:**
- editableBOMItems.length가 0
- EditableBOMResults 컴포넌트가 렌더링되지 않음

**해결 방법:**
- 문제 1 참조

### 문제 4: 상단 저장 버튼이 작동하지 않음
**확인사항:**
- BOM 항목이 있을 때는 `handleSaveBOMAsQuote`가 호출되어야 함
- BOM 항목이 없을 때는 `handleSaveQuote`가 호출되어야 함

**콘솔 로그:**
- `💾 BOM을 견적으로 저장 버튼 클릭됨` (BOM 있을 때)
- `💾 저장 버튼 클릭됨` (BOM 없을 때)

## 🎯 최종 확인사항

- [ ] 자동 산출 실행 시 BOM 테이블 표시됨
- [ ] 품목 추가 버튼 작동
- [ ] 품목 수정 버튼 작동 (연필 아이콘)
- [ ] 품목 삭제 버튼 작동 (휴지통 아이콘)
- [ ] 임시저장 버튼 표시됨
- [ ] 임시저장 작동 (localStorage 저장 확인)
- [ ] 견적으로 저장 버튼 표시됨
- [ ] 견적으로 저장 작동 (목록 이동 확인)
- [ ] 저장된 견적이 목록에 표시됨
