Files
Aislo/docs/raw/verification/2026-07-19_verify_b05_dark_theme.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

3.3 KiB

검증 보고서: B05 3D 뷰어 다크 테마 배경 연동

  • 작성일: 2026-07-19
  • 검증자: Antigravity (QA 역할)
  • 대상 기능: B05 3D 뷰어 다크 테마 배경 연동 및 마커 포인터 제어 개선
  • 상태: Pass (통과)

1. 검증 대상 및 범위

  • 대상 파일:
    • [B05_wf2_Route_UI_Viewer.ts](file:///C:/Program_coding/임도설계 및 견적자동화 프로그램 개발/B05_wf2_Route/B05_wf2_Route_UI_Viewer.ts) (381줄)
    • [B05_wf2_Route_UI_Style.css](file:///C:/Program_coding/임도설계 및 견적자동화 프로그램 개발/B05_wf2_Route/B05_wf2_Route_UI_Style.css) (참조)

2. 세부 검증 항목 및 결과

① 라이트 테마 기존 배경 유지 여부

  • 검증: LIGHT_VIEWER_BACKGROUND = 0xf5f7fa 상수를 도입하고, !dark 조건일 때 해당 색상으로 scene.background를 지정하는 것을 확인했습니다.
  • 결과: Pass (기존 뷰어 색상 유지)

② 다크 테마 연동 및 안전 폴백 구조

  • 검증:
    • document.documentElement에서 data-theme 속성을 확인하고, 시스템 다크 모드(prefers-color-scheme: dark) 상태를 교차 확인하여 다크 여부를 판별합니다.
    • 다크 상태일 때 getComputedStyle(document.documentElement).getPropertyValue("--color-surface-raised")를 사용하여 CSS 변수 테마 값을 동적으로 읽어옵니다.
    • 읽어온 값에 대해 CSS.supports("color", surfaceRaised) 조건 체크를 수행하여, 올바르지 않거나 로딩 전 상태인 경우 안전한 다크 폴백 값(DARK_VIEWER_BACKGROUND = 0x251f38)을 사용하도록 구현되었습니다.
  • 결과: Pass (안전한 폴백 및 동적 연동 보장)

③ 실시간 테마 변경 감지 및 리소스 해제

  • 검증:
    • MutationObserver를 사용하여 data-theme 속성 변화를 감지하고, prefers-color-scheme 미디어 쿼리 리스너를 바인딩하여 테마 전환 즉시 배경색이 갱신되도록 하였습니다.
    • dispose() 메서드 호출 시 themeObserver.disconnect() 및 미디어 쿼리 이벤트 리스너 해제가 누락 없이 수행되는 것을 확인했습니다.
  • 결과: Pass (메모리 누수 방지 및 리소스 정리 보장)

④ 마커 포인터 인터랙션 개선 (부가 검증)

  • 검증:
    • 기존 pointerdown 단일 리스너에서 포인터 캡처(setPointerCapture, releasePointerCapture)를 활용한 정밀 드래그 제어(pointerdown, pointermove, pointerup, pointerleave, pointercancel) 로직이 추가되었습니다.
    • 드래그 중에는 OrbitControls를 일시 비활성화(controls.enabled = false)하여 뷰어 화면이 함께 회전하는 오작동을 방지합니다.
    • dispose() 시 새로 추가된 포인터 리스너들이 안전하게 제거되는 것을 확인했습니다.
  • 결과: Pass

3. 코드 품질 및 제약 조건 검증

  • 700줄 제한: B05_wf2_Route_UI_Viewer.ts는 총 381줄로 규칙을 준수합니다.
  • Surgical Edit: 기존 마커 히트 테스트 로직과 뷰어 부트스트랩 영역에만 정밀 수정이 적용되었습니다.
  • 빌드 테스트: Typescript 타입 체크 및 Vite 빌드에서 어떠한 경고나 에러도 발생하지 않았습니다.