# 완료 계획: B06 종횡단도(도면) 렌더링 추가 — 0_old 버전 이식
**이관일**: 2026-07-18
**이관 원본**: `docs/raw/PLAN.md`

---

### 배경
B06에서 종횡단 생성·자동 실행까지는 완료됐지만, 결과 카드는 요약 수치(연장·횡단 개수·파일 경로)만 표시하고 도면은 없다. **0_old 버전에는 종횡단도 구현이 완전히 존재**하므로(React) 이를 현 프로젝트 규약(바닐라 TS + locale + 테마 CSS 변수)으로 이식한다.

**0_old 원본 설계** (이식 기준):
- `0_old/frontend/src/LongitudinalProfile.tsx` — 종단면도 SVG: 표고 폴리라인(평활 없음), 표고 그리드+라벨, **클릭 가능한 측점 수직선**(BP=주황/EP=보라 점선/선택=빨강 굵게), 축 제목("BP 기준 누적거리", "지반고(m)")
- `0_old/frontend/src/CrossSectionCard.tsx` — 횡단면도 카드: 헤더(측점명·누적거리·BP/EP/20m 구분), x/y 눈금, invalid 구간 분절, **중심선(offset 0) 빨강 십자 마커**, 푸터(중심고·방위각)
- `0_old/frontend/src/CrossSectionGrid.tsx` — 전체 횡단면도를 그리드로 일괄 표시, 선택 카드 하이라이트
- `0_old/frontend/src/SectionGenerationStage.tsx:33-37` — **Y축 스케일 동기화**: 종단+횡단 전체 표고 min/max로 공통 pixelsPerMeter 계산, 모든 도면이 같은 수직 스케일 공유
- **높이 배율(vertical_exaggeration)** 옵션: 사용자 입력(기본 1.0), `0_old/config.py:179 SECTION_VERTICAL_EXAGGERATION`으로 config 관리 — **현 config_system.py에는 누락됨 → 추가 필요**
- 종단도 측점 클릭 → 해당 횡단 카드 선택·스크롤 동기화

### 구현 체크리스트

**백엔드**
- [x] 1. `config/config_system.py`: `SECTION_VERTICAL_EXAGGERATION`(기본 1.0, env 오버라이드) 추가 — 0_old config.py:179 이식
- [x] 2. `B06_wf3_ProfileCross_Router.py`: `GET /api/projects/{project_id}/sections/{route_id}/detail` 추가 — 프로젝트 루트에서 longitudinal.json + cross_sections/*.json을 읽어 한 응답으로 반환: `{longitudinal: {length_m, samples, stations}, cross_sections: [...]}` (13개×61샘플 규모, 단일 응답 무리 없음). 파일 접근은 기존 `resolve_stored_project_path` + `get_project_storage_relative_path` 재사용, DB의 file_path로 경로 결정
- [x] 3. `B06_wf3_ProfileCross_Schema.py`: `SectionDetailResponse` 추가(samples는 `list[dict]` 전달, 세부 모델 최소화). `SectionContextResponse.defaults`에 `vertical_exaggeration` 추가

**프론트엔드**
- [x] 4. 신규 `B06_wf3_ProfileCross_UI_Section_View.ts`: 0_old 3개 컴포넌트를 바닐라 TS로 이식
  - `createLongitudinalProfile(...)` — LongitudinalProfile.tsx 이식: 측점 수직선 클릭 시 콜백, 높이 배율·yScale 동기화 반영
  - `createCrossSectionCard(...)` / 그리드 컨테이너 — CrossSectionCard/Grid.tsx 이식: 십자 마커·눈금·헤더/푸터 포함
  - Y축 동기화: SectionGenerationStage.tsx:33-37 로직 이식(전체 표고 min/max → 공통 pixelsPerMeter)
  - 색상은 하드코딩(#2563eb 등) 대신 테마 CSS 변수 사용
- [x] 5. `B06_wf3_ProfileCross_Api_Fetch.ts`: `SectionDetailResponse` 인터페이스 + `fetchSectionDetail(projectId, routeId)` 추가
- [x] 6. `B06_wf3_ProfileCross_UI_Page.ts`: 옵션 그룹에 "높이 배율" 필드 추가(context defaults로 프리필, 변경 시 도면만 재렌더 — 재생성 불필요). 결과 카드 아래 메인 영역에 종단면도(전체 폭) + 횡단면도 그리드 배치. 자동 생성/재생성/기존 결과 표시 시 `fetchSectionDetail` 호출해 도면 렌더. 종단도 측점 클릭 → 횡단 카드 선택+스크롤
- [x] 7. `B06_wf3_ProfileCross_UI_Style.css`: 0_old `sectionGeneration.css` 참조해 도면·그리드·선택 하이라이트 스타일 이식(테마 변수 기반)
- [x] 8. locale: 종단면도/횡단면도 제목, 높이 배율, 축 라벨, BP/EP/측점 구분 등 신규 키 등록
- [x] 9. 700줄 제한 점검: UI_Page 초과 시 도면 연결 로직도 Section_View로 이동

### 검증 방법
1. `GET /sections/9/detail` — 종단 samples/stations + 횡단 13개 반환 확인
2. 브라우저 B06 진입 → 종단면도(표고선+측점 수직선+라벨), 횡단면도 그리드(13개 카드) 표시 확인
3. 종단도 측점 클릭 → 해당 횡단 카드 하이라이트+스크롤 확인
4. 높이 배율 변경 → 도면 세로 과장 즉시 반영 확인
5. 재생성 후 도면 갱신 확인, `npm run typecheck`, 서버 재시작 후 확인