Aislo/docs/raw/plans/2026-07-18_plan_B06_DrawingRendering.md

완료 계획: 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에는 누락됨 → 추가 필요
• 종단도 측점 클릭 → 해당 횡단 카드 선택·스크롤 동기화

구현 체크리스트

백엔드

• 1. config/config_system.py: SECTION_VERTICAL_EXAGGERATION(기본 1.0, env 오버라이드) 추가 — 0_old config.py:179 이식
• 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로 경로 결정
• 3. B06_wf3_ProfileCross_Schema.py: SectionDetailResponse 추가(samples는 list[dict] 전달, 세부 모델 최소화). SectionContextResponse.defaults에 vertical_exaggeration 추가

프론트엔드

• 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 변수 사용
• 5. B06_wf3_ProfileCross_Api_Fetch.ts: SectionDetailResponse 인터페이스 + fetchSectionDetail(projectId, routeId) 추가
• 6. B06_wf3_ProfileCross_UI_Page.ts: 옵션 그룹에 "높이 배율" 필드 추가(context defaults로 프리필, 변경 시 도면만 재렌더 — 재생성 불필요). 결과 카드 아래 메인 영역에 종단면도(전체 폭) + 횡단면도 그리드 배치. 자동 생성/재생성/기존 결과 표시 시 fetchSectionDetail 호출해 도면 렌더. 종단도 측점 클릭 → 횡단 카드 선택+스크롤
• 7. B06_wf3_ProfileCross_UI_Style.css: 0_old sectionGeneration.css 참조해 도면·그리드·선택 하이라이트 스타일 이식(테마 변수 기반)
• 8. locale: 종단면도/횡단면도 제목, 높이 배율, 축 라벨, BP/EP/측점 구분 등 신규 키 등록
• 9. 700줄 제한 점검: UI_Page 초과 시 도면 연결 로직도 Section_View로 이동

검증 방법

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