b23042andClaude Opus 4.8
78fc090360
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2.5 KiB
2.5 KiB
구글 새 KML 형식 파싱 + 스테이션바 구조물 클릭 팝업
날짜: 2026-06-24
수정 파일: client/src/utils/geoData.ts, client/src/stationbar/StationBar.tsx,
client/src/stationbar/components/Timeline/Timeline.tsx
관련: 2026-06-24_1630_KMZ-KAKAO_RAIL-스테이션바라우팅.md
증상
- 회덕화물역 속성이 위도/경도만 보임(=props 비어 no-props 폴백). 영상에 남아있음(스테이션바로 안 감).
- 구글에서 다시 받은 KML의 형식이 달라짐.
원인 (새 KML 형식)
구글어스에서 재저장된 Placemark description 표가 변형됨:
- 옛:
<b>source</b></td><td>VWORLD_ROAD</td> - 새:
<table><tbody>…<b>source</b><br></td><td>KAKAO_RAIL<br></td>(<tbody>·</b>뒤<br>·>엔티티) 기존 정규식<b>키</b>\s*</td>…이</b>뒤<br>때문에 매칭 실패 → props 빈값 → source 못 읽어 KAKAO_RAIL 라우팅도 실패(영상에 남음). 또 사용자는 .kmz 가 아니라 baredoc.kml을 폴더에 받음.
조치
1) description 파싱을 행/셀 단위로 견고화 (geoData.ts)
<tr> 안 두 <td> 셀에서 태그 제거+엔티티 디코드(stripHtml) → (키,값). 옛/새 형식 모두 처리.
→ 회덕화물역 17개 속성 전부 추출(source=KAKAO_RAIL 포함) 검증. KAKAO_RAIL→스테이션바 라우팅 정상화.
2) bare .kml 지원 (parseKmz)
폴더 루트의 .kml 우선(구글 직접 다운로드, UTF-8 await file.text()), 없으면 .kmz(zip) 해제.
3) 스테이션바 구조물 클릭 팝업 (StationBar.tsx·Timeline.tsx)
역사(회덕화물역)는 스테이션바 원형 아이콘만 있어 속성이 안 보였음 →
StructMark에props추가(구조물 마크 빌드 시s.props전달).- Timeline: 구조물 마커 위 클릭 핫스팟(zIndex 21, seekArea 위) → 클릭 시 속성 팝업.
팝업은 클릭 좌표 기준
position:fixed(트랙 래퍼 transform 영향 회피), 배경 클릭 시 닫힘. - 역사/교량/터널 모두 적용(구교는 영상에서 처리).
결과
- 회덕화물역: KAKAO_RAIL → 스테이션바(원형) + 클릭 시 전체 KML 속성 팝업.
- 새 형식 KML(또는 .kmz) 모두 속성 정상 추출.
검증
npm run build -w client(node20) 통과. Python으로 새 형식 행/셀 파싱 → 17속성 추출 확인.
소요 시간: 약 25분 Context 사용량: input ~820k / output ~12k tokens