Files
Aislo/docs/wiki/pages/B06_Section/B06_frontend.md
T
eomsangdonandClaude Opus 5 eb30b774f8 chore(docs): docs 폴더 git 추적 전환 · PLAN·OWNERS 최상위 이관
- `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>
2026-09-09 18:19:07 +09:00

12 KiB

type, status, page_id, related_pages, last_updated, source
type status page_id related_pages last_updated source
page-frontend stable B06_Section
B06_Section/B06_backend
B06_Section/B06_api
B06_Section/B06_db
B06_Section/B06_culvert_set
concepts/mass_haul_diagram
architecture/project_map
architecture/workflow_data_flow
2026-08-22
docs/raw/verification/2026-07-19_verify_B05_B06_UI_Station_Improvement.md
docs/raw/verification/2026-07-19_verify_B05_B06_improvements.md
docs/raw/verification/2026-07-19_verify_half_width_persistence.md
docs/raw/verification/2026-07-19_verify_responsive_layout_drag.md
docs/raw/verification/2026-07-19_verify_B05_B06_차트_레이아웃_후속보정.md
docs/raw/verification/2026-07-19_verify_B06_사이드바_버튼_폭_및_확정_후_B07_이동.md
docs/raw/verification/2026-07-20_verify_B06_profile_cross_design_elevation.md
docs/raw/verification/2026-07-21_verify_B06_ground_section_type_B07_linkage.md
docs/raw/verification/2026-07-21_verify_B06_default_design_B07_gating.md
docs/raw/verification/2026-07-22_verify_B06_B07.md
docs/raw/verification/2026-07-22_verify_B06_cross_scale_row_height.md
docs/raw/verification/2026-07-25_verify_b05_b06_modifications.md
docs/raw/verification/2026-07-25_verify_b05_b06_3rd_4th_improvements.md
docs/raw/verification/2026-07-25_verify_b06_2nd_improvements.md
docs/raw/verification/2026-07-25_verify_b06_n6_n7.md
docs/raw/verification/2026-08-02_verify_mass_haul_and_drainage_fixes.md
docs/raw/verification/2026-08-02_verify_panel_fold_B05_style.md
docs/raw/verification/2026-08-02_verify_mass_haul_distribution_and_refinements.md
docs/raw/verification/2026-08-06_verify_B05_B06_feature_updates.md
docs/raw/verification/2026-07-18_verify_B06_DrawingRendering.md
docs/raw/verification/2026-07-18_verify_B06_ProfileCross.md
docs/raw/verification/2026-07-24_verify_B05_B06_표준횡단.md
docs/raw/verification/2026-07-24_verify_B05_layout_refinements.md
docs/raw/verification/2026-08-08_verify_B05_B06_fixes.md

B06_Section — Frontend

B05 일반 구조물 정본과 STALE 경계는 B05_Profile/B05_structures에 구현됐다. 배수관 횡단도 세트는 B06_Section/B06_culvert_set에 완료 반영했으며, 나머지 구조물 표현은 docs/raw/PLAN.md의 통합 표를 다음 입력으로 사용한다.

파일 구성

파일 위키 명세 문서 역할
B06_Section_UI_Page.ts [[B06_Section/frontend/B06_Section_UI_Page]] 결과 요약 및 종횡단 변경 감지 자동재계산(reconcileStaleDesigns), B07 자동 이동
B06_Section_UI_Section_View.ts [[B06_Section/frontend/B06_Section_UI_Section_View]] 0_old SVG 도면 이식, 반응형 열 수 정합, 패널 접기 손잡이 B05 방식으로 맞춤, 휠 가로 스크롤
B06_Section_UI_Cross_Design.ts [[B06_Section/frontend/B06_Section_UI_Cross_Design]] 횡단 측점별 컨트롤, 암 경계선 ▲/▼ hold-repeat 타이머, 측구 미생성 시 비활성화
B06_Section_UI_Cross_Culvert_Geom.ts [[B06_Section/B06_culvert_set]] 배관·기슭막이/집수정·보호공 기하와 계획선 트림 계산
B06_Section_UI_Cross_Culvert.ts [[B06_Section/B06_culvert_set]] 배수관 세트 SVG 표시와 기하 모듈 재수출
B06_Section_UI_Cross_Areas.ts [[B06_Section/frontend/B06_Section_UI_Cross_Areas]] [신설/2026-08-02] EA/RR/BR 2x4 면적표 렌더링, 밴드 하이라이트 및 버블링 방지
B06_Section_UI_MassHaul.ts [[B06_Section/frontend/B06_Section_UI_MassHaul]] [신설/2026-08-02] 유토곡선 토사/암반 다짐률 순토량/누가토량 계산 엔진
B06_Section_UI_MassHaul_View.ts B06_Section/frontend/B06_Section_UI_MassHaul_View 유토곡선 SVG 렌더러. 구간 물량 말풍선화(SVG), Y축 자동 스케일링, 0선 눈금 표시
B06_Section_UI_MassHaul_Balance.ts B06_Section/frontend/B06_Section_UI_MassHaul_Balance [신설/2026-08-02] 평형선 순차 탐색 및 장비 띠(HaulBand) 분할 엔진 (526줄)
B06_Section_UI_MassHaul_Balance_View.ts B06_Section/frontend/B06_Section_UI_MassHaul_Balance_View [신설/2026-08-02] 운반 띠 반투명 다각형 렌더러 및 띠 아웃라인 클램핑
B06_Section_UI_MassHaul_Balloon.ts B06_Section/frontend/B06_Section_UI_MassHaul_Balloon [신설/2026-08-02] 육각 balloon 배치(링 탐색 findSlot), 지시선 정렬, 드래그 및 오프셋 보관
B06_Section_UI_MassHaul_Curve.ts B06_Section/frontend/B06_Section_UI_MassHaul_Curve [신설/2026-08-02] 포물선/직선 보간 연산 및 2차 베지에 궤적 드로잉 보조
B06_Section_UI_MassHaul_Settle.ts B06_Section/frontend/B06_Section_UI_MassHaul_Settle [신설/2026-08-02] 잉여/부족 장거리 상쇄(HaulTransfer) 및 수량 항등식 검산 칩 연산
B06_Section_UI_Standard_Diagram.ts [[B06_Section/frontend/B06_Section_UI_Standard_Diagram]] 세로형 인라인 SVG 표준단면 모식도 컴포넌트
B06_Section_UI_Standard_Panel.ts [[B06_Section/frontend/B06_Section_UI_Standard_Panel]] [전체 반영] 버튼, 타 프로젝트 설정 불러오기
B06_Section_Api_Fetch.ts [[B06_Section/frontend/B06_Section_Api_Fetch]] API 통신 클라이언트 (sections, regenerate, crossDesignOne 등)
B06_Section_UI_Style.css (스타일시트) 종횡단 전체 레이아웃 및 sticky 스크롤 스타일
B06_Section_UI_Style_Cross.css (스타일시트) 횡단 십자선 마커, 구조물 세로 파선 독립 CSS 모듈
B06_Section_UI_Style_Cross_Areas.css (스타일시트) [신설/2026-08-02] 면적 테이블 및 지반 밴드 하이라이트 스타일 CSS 모듈
B06_Section_UI_Style_MassHaul.css (스타일시트) 유토곡선 범례 및 차트 레이아웃 스타일 독립 CSS 모듈

화면·workflow (조회 및 확정 전용)

항목 위치 역할
renderB06ProfileCross() B06_Section_UI_Page.ts:57 엔지니어링 레이아웃(createWorkflowLayout) 적용. 좌측 사이드바 routeGroup 아래 resultGroup에 결과 3개 메트릭 카드를 밀착 배치. [재계산] 버튼 신설 및 변경된 입력값(횡단 반폭)이 실제 적용된 값과 다른 stale 상태일 때만 [재계산] 버튼을 활성화하고 [확정] 버튼은 비활성화하는 상태 가드 연동.
종횡단 확정 B06_Section_UI_Page.ts:233 route별 종횡단을 confirmSections()로 확정 (미지정 측점은 기본값 토사+좌절토로 일괄 계산/저장 후 CONFIRMED 승격 및 성공 시 goToWorkflowStage를 통해 B07 자동 이동)
workflow 상태 조회 B06_Section_UI_Page.ts:259 단계 상태와 진입 가능 단계 조회
workflow layout 구성 B06_Section_UI_Page.ts:271 공통 단계·경로·상태 표시

SVG 렌더러 및 유틸리티

항목 위치 역할
createLongitudinalProfile B06_Section_UI_Section_View.ts Vanilla TS와 createElementNS 기반 종단 지반고 폴리라인, 종단 계획선(design_profiles) 및 절성토 음영 렌더링. X축 제목을 상단으로 올려 하단을 측점 라벨용으로 비워두고 유토곡선과 공유하는 연출.
createMassHaulChart B06_Section_UI_MassHaul_View.ts [신설/2026-08-02] 수직 정렬된 유토곡선 차트 렌더러. 0선 눈금값 "0" 표기, 선택 측점의 구간 물량 말풍선화(SVG), Y축 데이터 기반 동적 자동 스케일링, 가로 스크롤 및 줌 동기화.
createCrossSectionCard B06_Section_UI_Section_View.ts 개별 횡단 카드 렌더러: 중심선 계획고 기준 십자선 마커. [2026-08-02 개선] 절성토 EA/RR/BR 2x4 면적표(Cross_Areas) 렌더링 및 지반 밴드 하이라이트 클릭 연동, 버블링 차단(event.stopPropagation).
calculateYScale B06_Section_UI_Section_View.ts 종/횡단 표고 범위를 통일하는 Y스케일 계산 유틸리티 (지반고와 계획고 표고 범위를 합계해 잘림 방지).
designElevationAt B06_Section_UI_Section_View.ts 측점 chainage_m 기반 선형 보간 계획고 계산 헬퍼 (부재 시 지반고 폴백).
마커 선택 연동 B06_Section_UI_Page.ts 종단도 측점 마커 클릭 시 대상 횡단도 카드로 스크롤 및 빨강 강조 아웃라인 연동. 히트 영역(14px)을 구성하여 마우스 클릭성 보완.
stationLabel B06_Section_UI_Section_View.ts 측점 라벨 표기 규칙 통일: "STA" 접두사를 제거하고 측점번호+잔여거리 형식(예: 4+0.0)으로 표기를 통일하며 소수점 첫째 자리까지 표기.

API 클라이언트

항목 위치 역할
getSections() B06_Section_Api_Fetch.ts:93 route별 결과 요약 조회
confirmSections() B06_Section_Api_Fetch.ts:103 생성 결과 확정 요청
getSectionsDetail() B06_Section_Api_Fetch.ts:114 종단 결과 및 다수 횡단면 데이터 일괄 조회 요청 (SectionDetailResponse 매핑)
regenerateSections() B06_Section_Api_Fetch.ts:125 횡단 반폭 재생성 요청 (SectionRegenerateRequest 매핑)
crossDesignOne() B06_Section_Api_Fetch.ts [신설] 측점별 지반유형/단면유형 온디맨드 즉시 계산/저장 요청 (CrossDesignRequest 매핑)

입력 옵션 (표시 옵션 및 횡단 반폭 제어)

  • 측점/횡단 옵션 (3개 필드) B05로 이관: 기존의 station_interval_m, cross_sample_interval_m, long_sample_interval_m 옵션은 노선 설계 단계인 [B05_Profile](file:///C:/Program_coding/임도설계 및 견적자동화 프로그램 개발/docs/wiki/pages/B05_Profile/B05_frontend.md)로 이관되었습니다.
  • B06 이관 및 신설 옵션:
    • cross_half_width_m (횡단 반폭): 기존 B05에서 제어하던 필드를 B06 좌측 사이드바로 이관하여 횡단도 폭 결정용으로 신설하였습니다.
    • 지반유형·단면유형 컨트롤 (측점별): 토사/리핑암/발파암 지반 3종, 좌절/우절/양절/양성 단면 4종, 측구위치(좌/우). 선택 시 즉시 단면적 계산 및 미리보기 차트에 반영. 미지정 측점은 확정 시 토사+좌절토 기본값으로 자동 일괄 계산/저장.
    • 단일 소스화 초기값 연동: 도면 데이터를 로드할 때 summaryData?.options에 저장된 이전 반폭 정보를 1순위로 채택하여 화면 초기값으로 복원하며, 데이터 스냅샷이 존재하지 않는 레코드에 대해서만 폴백으로 측점 최대 offset 추정치를 사용합니다.
    • 값 변경 시 [재계산] 버튼이 활성화되어, 이를 클릭 시 백엔드 재생성 API를 트리거하고 성공하면 appliedHalfWidth를 갱신해 화면을 재렌더링하고 [확정] 버튼을 재활성화합니다.
  • 남은 표시 옵션:
    • vertical_exaggeration: 종단/횡단도 SVG 렌더링용 실시간 Y축 배율 (사이드바의 "표시 옵션" 그룹으로 구성, 로컬 즉시 재렌더)
    • route_id: 확정된 B05 경로 자동 연동 (B05에서 계산 완료된 상태에서만 진입 가능)

UI 패널 크기 및 리사이저 규칙 (2026-08-02 신설)

  • 상하 리사이저 부착: 하단의 종단+유토곡선 패널 세로 크기를 조절할 수 있는 리사이저(createPanelResizer)를 패널 하단 경계에 부착하고 sessionStorage에 크기를 저장합니다.
  • 높이 분배 공식 (chartHeights):
    • 총 패널 높이가 기본 높이 H0 이상일 때: 종단도는 220px로 높이가 고정되며, 유토곡선 SVG 영역이 늘어난 높이 몫을 전부 흡수합니다.
    • 총 패널 높이가 H0 미만으로 축소될 때: 종단도와 유토곡선 영역의 높이가 동일한 비율로 축소됩니다.

기술부채 (해결됨)

2026-08-22 파일 한계 정리

기능 변경 없이 책임을 분리했다. 현재 줄 수는 Style_Cross.css 564, Section_View.ts 672, Cross_Culvert_Geom.ts 700, Cross_View.ts 626, Page.ts 693, Cross_Design.ts 644로 모두 700줄 이하이다. TypeScript 검사와 Vite 빌드 통과 기록이 있으며 Git 작업은 하지 않았다.