Aislo/docs/wiki/pages/B05_Profile/B05_frontend_alignment.md

type, status, page_id, related_pages, last_updated, source

type	status	page_id	related_pages	last_updated	source
page-frontend	stable	B05_Profile	B05_Profile/B05_frontend B05_Profile/B05_backend concepts/mass_haul_diagram architecture/project_map architecture/workflow_data_flow	2026-07-25	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 이내 근접 비정규 측점 간 횡단 파일명 충돌 주의 필요.