---
type: page-frontend
status: stable
page_id: B05_Profile
related_pages: ["[[B05_Profile/B05_frontend]]", "[[B05_Profile/B05_backend]]", "[[concepts/mass_haul_diagram]]", "[[architecture/project_map]]", "[[architecture/workflow_data_flow]]"]
last_updated: 2026-07-25
source: ["docs/raw/verification/2026-07-24_verify_B05_Route_Improvements.md", "docs/raw/verification/2026-07-25_verify_b06_2nd_improvements.md", "docs/raw/verification/2026-07-20_verify_B05_longitudinal_grade_line.md", "docs/raw/verification/2026-07-24_verify_B05_irregular_stations.md"]
---

# B05_Profile — Profile Alignment & Table

## 종단 계획고 편집 인터랙션 (`_UI_Profile_Edit.ts`, `_UI_Profile_Panel.ts`, `_UI_Page.ts`)
*   **선택 무한 재귀 차단 (프리즈 예방)**: 3D↔그래프↔사이드바 선택 상호 갱신 시 `selectionSyncing = false` 가드 변수를 도입하여 순환 재귀 호출 및 스택 오버플로를 근본 차단.
*   **측점 버튼 (꺾임 편집)**: 측점 수직선 상단 ▲/하단 ▼ 버튼 클릭 시 계획고를 `0.1m` 단위로 조정합니다. 
    *   **보이는 계획고 보정**: 절점 표고 기준 조정 시 중앙종거 변화분을 4회 되먹임(feedback) 보정하여 실제 렌더링되는 계획고가 정확히 0.1m 단위로 편집되도록 처리.
    *   **연속 조정 Hold 타이머**: 버튼을 0.5초 누르고 있으면 100ms 간격으로 연속 조정되는 `createHoldRepeater()`를 window 레벨 이벤트에 바인딩하여 렌더링에 의한 DOM 재생성 시에도 안정적으로 동작.
    *   **상시 표시 및 색상 개선**: 편집 버튼(상/하, 시프트 상/하)을 마우스 오버(hover) 시 노출하던 방식에서 상시 노출(`opacity: 0.9`, hover 시 `1.0`)로 변경하여 사용성을 높이고 글자색을 더 밝게 표시.
*   **구간 평행이동 (Segment Shift)**: 두 PVI 사이 직선 구간의 중앙에 위치한 ⇧/⇩ 버튼 클릭 시, 기울기(구배)를 유지한 채 양 끝 변화점의 표고를 동시에 `0.1m` 씩 이동시킵니다. (**[N-3-1] 구간 양 끝 편집 시 ↺ 원복 버튼 노출 및 양 끝 오프셋 일괄 삭제 연동**)
*   **편집 데이터 롤백 및 초기화**: 개별 측점/세그먼트 ↺ 클릭 시 override/shift 델타 맵을 지우며, 상단 [초기선 복원] 클릭 시 모든 편집 이력을 리셋.
*   **임시 저장 및 영속화**: 편집 중 상태는 `sessionStorage`에 실시간 임시 저장되며, [확정] 클릭 시 서버 저장 API를 동기적으로 실행.

## 12행 도면 테이블 및 가로 스크롤 정렬 개편 (`_UI_Profile_Table.ts`, `_UI_Profile_Panel.ts`)
*   **12행 도면 테이블**: PDF 도면의 하단 정보 구성을 모방한 12개 행을 렌더링합니다:
    *   *구배 3행*: 구배 L (m) / 구배 H (m) / 구배 S (%) - R 중심 변화점 기준으로 셀이 균등하게 이어지도록 설계. S행 내부에는 중앙종거를 생략하고 곡선 셀 툴팁으로 이동. S행 내 글자 넘침 시 칸은 유지하되 텍스트만 비움.
    *   *측점값 7행*: 절토고 (m), 성토고 (m), 계획고 (m), 지반고 (m), 누가거리 (m), 거리 (m), 측점.
    *   *곡선 2행*: 곡선 L (m), 곡선 R (m). (R과 L 상호 연동 환산 $R = L \times (r_m/l_m)$ 지원, `.b05-profile-table__no-spin`으로 스피너 제거).
*   **스크롤 정렬 개편 및 좌측 틈새 여백 차단**:
    *   `b05-route-profile__body`의 좌측 여백(`padding-left`)을 `0`으로 설정(우측만 `15px` 유지)하여 가로 스크롤 시 sticky 이름표 왼쪽 틈으로 셀 정보가 노출되지 않도록 차단.
    *   **0측점 정렬을 위한 우측 이동**: 데이터 매핑에 오프셋(`PROFILE_ORIGIN_OFFSET_PX = STATION_SPACING_PX / 2`)을 설정하여 0측점 셀 전체가 이름표 오른쪽으로 정렬되도록 오프셋 계산. 그래프 렌더러도 새 `originOffsetPx` 파라미터를 받아 X축 정렬을 정확히 일치시킴.
*   **최소 측점폭 및 화면 폭맞춤 병행 (`computeProfileLayout`)**:
    *   기존의 `57px` 고정 폭 방식을 폐지하고, `STATION_SPACING_PX * 1.5` (약 `85px`)를 최소 폭으로 지정하되 화면 너비가 더 크면 폭맞춤으로 균등하게 늘려 렌더링하는 `computeProfileLayout` 구조 적용.
*   **테이블 종점 열 우측 이동 클램핑**:
    *   off-grid 종점(마지막 측점)이 앞 측점과 겹쳐 뭉개지는 현상을 방지하기 위해 `stationCellCenters()` 함수에서 겹침을 감지하고 우측 여백 한도 내에서 값을 오른쪽으로 밀어 클램핑 처리.
*   **세로 비율 및 폰트 크기 조정**:
    *   패널 내 그래프 대 테이블 세로 비율을 기존 3:7에서 4:6(`CHART_HEIGHT_RATIO = 0.4`)으로 조정.
    *   테이블 글자 상하 여백을 축소(`CELL_PADDING_PX = 2`)하고 폰트 비율을 상향(`FONT_PER_ROW_HEIGHT = 0.64`)하여 시인성 개선.
*   **마우스 휠 스크롤 및 뷰 오버플로 가드**:
    *   테이블 영역에 세로 휠 스크롤 입력 시 이를 가로 스크롤로 동적 변환하는 `wheel` 핸들러 구현.
    *   가로 스크롤 시 스티키 이름표 열의 투명 배경 뒤로 격자가 뚫려 보이는 현상을 방지하기 위해 `z-index: 5` 및 불투명 배경 적용.
    *   하단 종단면도 패널만 12px 두꺼운 스크롤바 커스텀 스타일을 사용하던 오버라이드를 제거하고, 좌측 사이드바와 같이 8px 크기의 전역 pill 스크롤바 테마를 상속하도록 통일.

## 비정규 측점(구조물) 테이블 오버레이 & 런타임 검증 (`_UI_Profile_Table.ts`, `_UI_IrregularStations.ts`)
*   **선택 시 12행 테이블 값 열 오버레이**: 선택된 비정규 측점에 대해 기존 파선+태그 방식 대신 지반고, 계획고, 누가거리, 절성토 등 12행 구조의 오버레이 값 열(`buildIrregularColumn`)을 연산(`interpolateSample`)하여 정밀 표기.
*   **잔여거리 입력 및 클램핑**: 잔여거리를 `[0, 측점간격]`으로 제한하고 사이드바 입력창의 `max` 속성을 실시간 동기화 (`intervalMax`).
*   **사이드바 UX 개선**: `h3` 클릭 시 컨테이너 본문 접기/펼치기(`is-collapsed`) 구현 및 불필요한 도움말 `details` 제거.
*   **런타임 횡단 병합 검증 & 파일명 유의사항**: 
    *   확정 시 비정규 횡단 파일(`cross_*.json`) 생성 및 종단 병합 헬퍼(`_merge_irregular_into_longitudinal`) 멱등성 검증 완료 (36개 테스트 통과).
    *   `cross_00038m.json`과 같이 체이니지를 정수로 반올림하여 파일명을 지정하므로, 1m 이내 근접 비정규 측점 간 횡단 파일명 충돌 주의 필요.