# [IMPL-2026-01-12] 견적 V2 테스트 페이지 구현

## 개요
- **목적**: 견적 등록/상세/수정 페이지의 새로운 UI (자동 견적 산출 V2) 테스트
- **원칙**: 기존 견적관리 페이지는 절대 수정하지 않음 (API 연결됨)
- **범위**: 테스트 페이지 3개 + 새 컴포넌트 생성

---

## 스크린샷 기반 UI 구성

### 레이아웃 구조
```
┌─────────────────────────────────────────────────────────────┐
│  [발주 개소 목록 (3)]          │  [1층 / FSS-01 상세정보]    │
│  ┌──────────────────────┐      │  제품명: KSS01              │
│  │ 층 │ 부호 │사이즈│제품│수량│  오픈사이즈: 5000 × 3000     │
│  │ 1층│FSS-01│5000×3000│KSS01│1│  제작사이즈/중량/면적/수량    │
│  │ 3층│FST-30│7500×3300│KSS02│1│  ─────────────────────     │
│  │ 5층│FSS-50│6000×2800│KSS01│2│  필수설정: 가이드레일/전원/제어기│
│  └──────────────────────┘      │  ─────────────────────     │
│  [품목 추가 폼]                 │  [탭: 본체│철골품-가이드레일│...]│
│  층|부호|가로|세로|제품명|수량   │  [품목 테이블]              │
│  가이드레일|전원|제어기 [+][↑]  │                            │
├─────────────────────────────────────────────────────────────┤
│  💰 견적 금액 요약                                           │
│  ┌─────────────────┐  ┌──────────────────────────────┐      │
│  │ 개소별 합계      │  │ 상세별 합계 (선택 개소)        │      │
│  │ 1층/FSS-01 1,645,200│ │ 본체(스크린/슬랫)  1,061,676 │      │
│  │ 3층/FST-30 2,589,198│ │ 철골품-가이드레일   116,556  │      │
│  │ 5층/FSS-50 3,442,428│ │ ...                        │      │
│  └─────────────────┘  └──────────────────────────────┘      │
├─────────────────────────────────────────────────────────────┤
│  총 개소 수: 3    │  예상 견적금액: 11,119,254  │  견적상태: 작성중│
├─────────────────────────────────────────────────────────────┤
│  예상 전체 견적금액         [견적서산출] [임시저장] [최종저장]  │
│  11,119,254원                                               │
└─────────────────────────────────────────────────────────────┘
```

### 기능 요약
| 영역 | 기능 |
|------|------|
| 발주 개소 목록 | 테이블로 개소 표시, 클릭 시 우측 상세 변경 |
| 품목 추가 폼 | 층/부호/사이즈/제품/수량 + 설정 입력 후 [+] 추가 |
| 엑셀 업로드 | [↑] 버튼으로 엑셀 일괄 업로드 |
| 상세 정보 | 선택 개소의 제품정보, 필수설정, 품목탭 |
| 견적 금액 요약 | 개소별 합계 + 상세별 합계 |
| 푸터 | 총 개소 수, 예상 견적금액, 견적 상태 |
| 버튼 | 견적서 산출, 임시저장, 최종저장 (미리보기 제외) |

---

## 파일 구조

### 테스트 페이지 (새로 생성)
```
src/app/[locale]/(protected)/sales/quote-management/
├── test-new/page.tsx           ← 테스트 등록 페이지
├── test/[id]/page.tsx          ← 테스트 상세 페이지
└── test/[id]/edit/page.tsx     ← 테스트 수정 페이지
```

### 컴포넌트 (새로 생성)
```
src/components/quotes/
├── QuoteRegistrationV2.tsx     ← 메인 컴포넌트 (새 UI)
├── LocationListPanel.tsx       ← 왼쪽: 발주 개소 목록 + 추가 폼
├── LocationDetailPanel.tsx     ← 오른쪽: 선택 개소 상세
├── QuoteSummaryPanel.tsx       ← 견적 금액 요약
├── QuoteFooterBar.tsx          ← 하단 푸터 바
└── ExcelUploadButton.tsx       ← 엑셀 업로드/다운로드
```

---

## 작업 체크리스트

### Phase 1: 기본 구조 설정
- [ ] 테스트 등록 페이지 생성 (test-new/page.tsx)
- [ ] 테스트 상세 페이지 생성 (test/[id]/page.tsx)
- [ ] 테스트 수정 페이지 생성 (test/[id]/edit/page.tsx)
- [ ] /dev/test-urls에 테스트 URL 추가

### Phase 2: 핵심 컴포넌트 구현
- [ ] QuoteRegistrationV2.tsx 메인 컴포넌트 생성
- [ ] LocationListPanel.tsx 발주 개소 목록 구현
- [ ] LocationDetailPanel.tsx 상세 정보 구현
- [ ] QuoteSummaryPanel.tsx 금액 요약 구현
- [ ] QuoteFooterBar.tsx 푸터 바 구현

### Phase 3: 상세 기능 구현
- [ ] 개소 선택 시 우측 상세 변경 기능
- [ ] 품목 추가 폼 기능
- [ ] 탭 전환 기능 (본체, 철골품 등)
- [ ] 품목 테이블 표시

### Phase 4: 엑셀 기능
- [ ] ExcelUploadButton.tsx 컴포넌트 생성
- [ ] 엑셀 양식 다운로드 기능
- [ ] 엑셀 업로드 및 파싱 기능

### Phase 5: 버튼 및 저장 기능
- [ ] 견적서 산출 버튼 기능
- [ ] 임시저장 버튼 기능
- [ ] 최종저장 버튼 기능

---

## 참고 사항

### 기존 파일 (수정 금지)
- `src/app/[locale]/(protected)/sales/quote-management/page.tsx` (목록)
- `src/app/[locale]/(protected)/sales/quote-management/new/page.tsx` (등록)
- `src/app/[locale]/(protected)/sales/quote-management/[id]/page.tsx` (상세)
- `src/app/[locale]/(protected)/sales/quote-management/[id]/edit/page.tsx` (수정)
- `src/components/quotes/QuoteRegistration.tsx` (기존 컴포넌트)

### 재사용 가능 파일
- `src/components/quotes/actions.ts` (API 호출)
- `src/components/quotes/QuoteDocument.tsx` (견적서 문서)
- `src/components/quotes/types.ts` (타입 정의)

### 디자인 원칙
- 내용/기능: 스크린샷 충실히 구현
- 스타일/레이아웃: 기존 프로젝트 패턴 따르기
- 색상: 주황색 헤더, 노란색 배경 등 스크린샷 참고

---

## 진행 상태
- 시작일: 2026-01-12
- 현재 상태: 계획 수립 완료