828b452186
- README.md: 전체 개요, 메뉴 구조, 작업 순서 - step1-데이터분석.md: 레거시 매핑 + options 확장 스키마 - step2-API.md: 엔드포인트 설계 (docs 규칙 준수) - step3-MNG화면.md: Blade+HTMX 화면 구성 (3타입별 폼) - step4-React연동.md: 견적 이미지 + 운영 화면 계획
3.2 KiB
3.2 KiB
Step 4: React 견적 화면 이미지 연동
프로젝트: React (
sam/react) 선행 조건: Step 2 (API), Step 3 (MNG에서 데이터 등록 후) 참조: 기존 GuideRailSection 컴포넌트
1. 목적
견적 페이지(/sales/quote-management/new)에서 가이드레일 모델 선택 시
전개도 이미지 + 부품 조합 테이블을 표시한다.
2. 현재 흐름
제품 선택 → BOM 계산 (BendingInfoBuilder)
→ product_code, finish_material 확정
→ 가이드레일 모델 결정
→ 텍스트만 표시 ❌ 이미지 없음
3. 목표 흐름
제품 선택 → BOM 계산 (기존 그대로)
→ 모델 확정
→ GET /api/guiderail-models/{id} 호출 🆕
→ GuiderailPreview 컴포넌트 렌더링 🆕
├─ 전개도 이미지
└─ 부품 조합 테이블 (부품명/재질/수량/전개폭)
4. 구현 사항
4-1. GuiderailPreview 컴포넌트
┌─────────────────────────────────────────────────────┐
│ 가이드레일: KSS01 벽면형 | 인정 | SUS마감 | 70×120 │
├──────────────────────┬──────────────────────────────┤
│ 전개도 이미지 │ 부품 조합 │
│ ┌────────────────┐ │ # │ 부품 │ 재질 │ 수량 │
│ │ │ │ 1 │ 마감재 │ SUS │ 2 │
│ │ (이미지) │ │ 2 │ 본체 │ EGI │ 1 │
│ │ │ │ 3 │ C형 │ EGI │ 1 │
│ └────────────────┘ │ 4 │ D형 │ EGI │ 1 │
└──────────────────────┴──────────────────────────────┘
4-2. 삽입 위치
견적 페이지에서 BOM 결과 표시 영역 하단 (기존 레이아웃 무변경)
4-3. 데이터 흐름
BOM 계산 결과 → product_code + finish_material
→ API 호출: GET /api/guiderail-models?model={code}&check_type={형상}
→ 응답: image_url + components + material_summary
→ GuiderailPreview 렌더링
5. 주의사항
- 기존 견적 계산 로직 무변경
- 기존 GuideRailSection (작업지시서용) 무변경 — 별도 컴포넌트
- 이미지 없는 모델: 텍스트만 표시 (graceful degradation)
- 모바일 반응형 처리
6. 범위 (추후 확정)
| 영역 | 설명 | 시점 |
|---|---|---|
| 견적 이미지 연동 | GuiderailPreview 컴포넌트 | Step 1~3 완료 후 |
| 절곡품 관리 화면 | React 버전 CRUD (MNG 대체) | MNG 샘플 검증 후 |
- MNG는 샘플 확인용 — API 연동 검증이 목적
- 실제 운영 화면은 React에서 구현 (MNG와 동일한 API 호출)
- React 화면 상세 설계는 MNG 검증 후 별도 문서로 작성 예정
- 현재 문서는 견적 이미지 연동 범위만 정의