- `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>
3.3 KiB
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 빌드에서 어떠한 경고나 에러도 발생하지 않았습니다.