Aislo/docs/wiki/pages/B06_Section/B06_frontend.md

---
type: page-frontend
status: stable
page_id: B06_Section
related_pages: ["[[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]]"]
last_updated: 2026-08-22
source: ["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 작업은 하지 않았다.