b59150551e
- PermissionManagement externalSelection 콜백 함수 오류 수정 - setSelectedItems → onToggleSelection, onToggleSelectAll, getItemId 변경 - claudedocs 문서 폴더별 정리 (26개 파일) - dashboard/, guides/, settings/, construction/, sales/ 등 Co-Authored-By: Claude <noreply@anthropic.com>
6.7 KiB
6.7 KiB
[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
- 현재 상태: 계획 수립 완료