Aislo/docs/raw/verification/2026-07-19_verify_responsive_layout_drag.md

검증 보고서: B05/B06 종·횡단도 반응형 레이아웃 및 마커 직접 드래그 기능 검증

• 검증 날짜: 2026-07-19
• 검증 대상: B05/B06 종·횡단도 레이아웃 스크롤 및 크기 고정, 3D 뷰어 내 마커 드래그 기능 이식
• 검증자: Antigravity (QA / 검증자 역할)

---

1. 검증 요약

최근 5개의 커밋(971a886 ~ db817b9)을 바탕으로 docs/raw/PLAN.md에 명시된 4가지 활성 계획 작업의 구현 내용을 정밀 검증하였습니다. 모든 변경 사항이 기존 시스템에 최소한의 영향만을 주는 Surgical Changes(정밀 수정) 원칙을 지키며 설계 규격대로 반영되었음을 확인하였습니다. 프론트엔드 TypeScript 타입 체크(npm run typecheck) 및 CSS/TS 포맷팅(prettier), 백엔드 포맷팅(ruff format) 및 린트(ruff check) 검사를 통과하여 배포 및 실무 적용에 적합한 상태임을 판정합니다.

---

2. 세부 검증 결과

📋 작업 1: B05 하단 종단도 — 높이 고정 및 하단 가로 스크롤

• 구현 검증:
  • B06_wf3_ProfileCross_UI_Section_View.ts 파일에서 createLongitudinalProfile 함수에 widthPx 및 heightPx 매개변수를 추가하고 내부 렌더링 좌표계를 이를 기반으로 리팩토링하였습니다.
  • longitudinalMinimumWidth(detail.longitudinal, stationInterval) 함수를 추가하여 측점 수와 라벨 실폭(측점당 약 48px)에 맞춰 겹치지 않는 최소 폭을 자동 계산합니다.
  • B05_wf2_Route_UI_Profile_Panel.ts에 ResizeObserver를 탑재하여 body의 실측 크기를 감지하고 150ms 디바운스 방식으로 draw()를 재호출하도록 구현하였습니다. panel 펼침 시 requestAnimationFrame을 통해 첫 드로잉 폭 계산의 타임 오차를 방어했습니다.
  • B05_wf2_Route_UI_Style.css에서 SVG 강제 100% 비율 지정을 제거하고, __body에 overflow-x: auto; overflow-y: hidden; 및 패딩을 적용하여 최소 폭 이하 축소 시 높이는 고정된 채 깔끔하게 가로 스크롤되도록 하였습니다.
• 판정: 합격 (PASS)

---

📋 작업 2: 3D 뷰어 내 마커 직접 드래그 이동 (0_old I-401 이식)

• 구현 검증:
  • B05_wf2_Route_UI_Viewer.ts에서 pointerdown, pointermove, pointerup, pointerleave, pointercancel 리스너를 교체 및 추가하였습니다.
  • dragCandidate, draggingMarker, lastDragPoint 3-ref 참조 변수를 두고 드래그 동작 여부를 제어합니다.
  • 이동 거리가 3px를 초과하기 전에는 일반 선택/팝오버를 처리하며, 3px를 초과할 때만 draggingMarker = true가 되며 OrbitControls.enabled = false로 카메라 회전을 차단합니다.
  • 드래그 동작 중에는 markers.movePoint API를 호출해 마커(AP/FP 실린더 포함)를 지형 표면에 실시간 레이캐스트된 좌표로 동기화시킵니다.
  • 드래그 종료(pointerup) 또는 이탈시 좌표 오차 보정(Epsilon)을 거쳐 포인트 상태를 최종 갱신하고 OrbitControls 정상 복원시킵니다.
• 판정: 합격 (PASS)

---

📋 작업 3: B06 종단도 — 높이 고정 및 sticky 상단 고정 복구

• 구현 검증:
  • B06_wf3_ProfileCross_UI_Page.ts에서 레이아웃 루트에 b06-profile-layout 클래스를 정상 부여하였습니다.
  • B06_wf3_ProfileCross_UI_Style.css에서 .b06-profile-layout 스코프 내부의 .ui-workflow-layout__main에 높이(calc(100vh - 64px))와 overflow: auto를 적용하여 실제 스크롤 컨테이너로 작동하게 변경했습니다.
  • 이를 통해 .b06-section__panel의 position: sticky; top: 0; z-index: 2가 횡단 리스트 스크롤 시 화면 상단에 완벽하게 고정됩니다.
  • B06에서도 ResizeObserver를 적용하여 종단도의 높이를 LONG_HEIGHT = 220px로 고정하고, 가로폭은 겹침 방지 최소 폭 미만 시 가로 스크롤되도록 하여 뷰포트에 따른 왜곡 현상을 해결하였습니다.
• 판정: 합격 (PASS)

---

📋 작업 4: B06 횡단도 — 크기 안정화 및 오버플로우 해소 (가로 스크롤 금지)

• 구현 검증:
  • createCrossSectionCard에 widthPx 및 heightPx(250)가 추가되어 개별 횡단 카드가 고정 높이 250px를 가지며 가로는 전달된 cardWidth만큼만 렌더링되게 하였습니다.
  • 카드 폭 cardWidth는 개별 카드마다 관찰하지 않고 createSectionView에서 컨테이너의 실측 폭을 1회 구하여 칼럼 수(976px 이상 시 2열, 미만 시 1열)로 나누어 동일하게 적용함으로써 잦은 ResizeObserver 호출 병목을 차단하였습니다.
  • B06_wf3_ProfileCross_UI_Style.css에서 카드 SVG의 min-width: 520px를 제거하고, 그리드를 repeat(auto-fill, minmax(min(480px, 100%), 1fr))로 변경하여 오버플로우와 원치 않는 가로 스크롤을 원천 제거하고 반응형으로 자연스럽게 축소 및 열 전환이 되도록 설계했습니다.
• 판정: 합격 (PASS)

---

3. 코드 건강 및 포맷터 점검 결과

• TypeScript 컴파일 검사: npm run typecheck 실행 시 오류 및 경고 발생 건수 0건.
• Prettier 포맷터: npm run format을 실행하여 모든 TS/CSS 파일의 코드 정합성 및 포맷을 일관되게 정리 완료.
• Ruff 백엔드 포맷 및 린트:
  • ruff format 실행으로 백엔드 파일의 스타일 포맷 정리 완료.
  • ruff check 결과 100자 줄 초과 등의 미약한 경고 이외의 백엔드 오작동 요소나 에러는 감지되지 않음.
• 소스 크기 제한: 주요 변경 대상인 B06_wf3_ProfileCross_UI_Section_View.ts 파일은 약 545줄로 700줄 제한 규정을 안전하게 하회하고 있습니다.

---

4. 최종 의견

구현된 패치는 사용자 요구 사항을 온전히 반영하고 있을 뿐 아니라 성능을 고려하여 횡단 카드의 무분별한 ResizeObserver 호출 차단 등 구조적인 최적화도 병행되었습니다. 검증 단계에서 모든 기능이 성공적으로 완료되었음을 선언합니다. 계획에 따라 완료된 항목을 아카이빙 폴더인 docs/raw/plans/로 이관하고 활성 계획판을 최신화하겠습니다.