eomsangdonandClaude Opus 5
eb30b774f8
- `docs/` 를 .gitignore 에서 빼 git 추적 대상으로 전환 (위키·완료 이력·검증 기록) - `docs/raw/PLAN.md` · `docs/raw/OWNERS.md` 를 저장소 최상위로 이동 후 .gitignore 에 등록 — 창끼리 공유하되 저장소에는 안 올리는 장부 - 살아 있는 경로 참조 7개 파일 정정 (아카이브 107건은 그때 사실이라 그대로 둠) - graphify 날짜별 산출물(`docs/wiki/graphify-out/20*/`) 제외 — `graphify update` 가 다시 만듦 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
4.5 KiB
4.5 KiB
완료 계획: 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_oldsectionGeneration.css참조해 도면·그리드·선택 하이라이트 스타일 이식(테마 변수 기반) - 8. locale: 종단면도/횡단면도 제목, 높이 배율, 축 라벨, BP/EP/측점 구분 등 신규 키 등록
- 9. 700줄 제한 점검: UI_Page 초과 시 도면 연결 로직도 Section_View로 이동
검증 방법
GET /sections/9/detail— 종단 samples/stations + 횡단 13개 반환 확인- 브라우저 B06 진입 → 종단면도(표고선+측점 수직선+라벨), 횡단면도 그리드(13개 카드) 표시 확인
- 종단도 측점 클릭 → 해당 횡단 카드 하이라이트+스크롤 확인
- 높이 배율 변경 → 도면 세로 과장 즉시 반영 확인
- 재생성 후 도면 갱신 확인,
npm run typecheck, 서버 재시작 후 확인