제주 드론 도로영상 지원: DJI 로그 어댑터·분할영상 연속재생·카메라 자동감지·오버레이 개선

- 제주 DJI 시간기반 비행로그(CSV) 파싱 어댑터: 세그먼트 창 정렬, 가상 fps 환산
- 분할 영상(이름 오름차순) 연속재생 + 좌상단 영상목록 콤보(선택 재생), 세그먼트별 드론 로그 재정렬
- KML 다중 파일 병합 파싱: STA 체이니지 측점(71개) + 지장물 신포맷(타입/이름/텍스트박스_색상)
- 시설물 라벨: 지정색 배경 박스 + 흰 글자, 팝업 중앙 정렬, 호버 구간 깜빡임 수정
- 카메라 자동감지(djmd: ZenmuseP1, focal 29.9mm) + <영상명>.camera.json PC 저장/폴더 자동 적용
- Yaw 자동추정(GPS 진행방위 기반) + 라벨 드래그 Yaw 역산 모드
- 스테이션바: GPS 이동거리 진행도(호버 시 정지), 노선밖 거리 표기, 원거리 구조물 마크 제외
- 서버: /api/camera 라우트, ecosystem 포트 54000·제주 데이터 경로
- docs/history: 작업 이력 21건

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

client/src/components/overlay/StationOverlay.tsx

@@ -91,11 +91,26 @@ const CATEGORY_EMOJI: Record<string, string> = {
   '역사': '🚉',
   '철도역': '🚉',
   '지장물': '🏢',
+  '지장물L': '🏢',
   '측점': '📍',
   '구교': '🌉',
   '출입문': '🚪',
+  '교차로': '🚦',
+  '도로': '🛣️',
+  '강.하천': '🌊',
+  '마을': '🏘️',
+  '산': '⛰️',
 };
 
+/** 라벨 색 밝기 판정 — 어두운 색이면 외곽선을 밝게 반전(가독성). */
+function isDarkLabelColor(hex: string): boolean {
+  const m = hex.match(/^#([0-9a-f]{6})$/i);
+  if (!m) return false;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+  return 0.299 * r + 0.587 * g + 0.114 * b < 96;
+}
+
 // 영상 오버레이엔 모든 선로 구조물(교량/터널/구교)을 라벨로 표출한다.
 // 시설등급(시설종별) 표시 필터는 하단 스테이션바·RoutePanel 전용 → 영상은 항상 전부 표출.
 // (역사=철도역은 type='station'이라 여기 미포함 → 스테이션바 전용 유지.)
@@ -113,8 +128,10 @@ const DISPLAY_DEFAULTS = {
   smoothSpeedRef: 0.010, // 즉시추종 기준 속도(클수록 더 강하게 평활)
   maxPoiRange: 1000,
   // false = 지면고도 기준(POI를 지면고도 z에 고정 → gap=드론고도−지면고도 자동변동, 드론 오르내려도 지물에 붙음).
+  //         표고 미상(z=0) 라벨은 '경로 표고' 평면에 앵커 → 궤적과 같은 슬라이더로 함께 보정됨.
   // true = 드론−이격거리 고정(gap 상수). 드론 고도 변동 시 부정확.
-  poiDroneHeight: true,
+  // 기본 false: 실측 z(회덕)는 지물에 정확히 붙고, 미상(제주)은 경로표고로 일괄 보정 가능.
+  poiDroneHeight: false,
   droneHeightDrop: 24,
 };
 
@@ -123,7 +140,7 @@ const DISPLAY_DEFAULTS = {
 // 포즈(poseAt)로 직접 투영 → 라인처럼 부드럽게 이동. (precompute = 가시성/겹침 결정 전용)
 interface LabelCache {
   stationLabels: { title: string; lat: number; lon: number; z: number }[];
-  poiMarkers: { title: string; label: string; category: string; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; labelRow: number; labelRowCount: number }[];
+  poiMarkers: { title: string; label: string; category: string; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; labelRow: number; labelRowCount: number; color?: string }[];
 }
 
 // 중심선 + 나침반 렌더 캐시 (per-frame, renderCacheRef)
@@ -322,6 +339,9 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
   // FOV(초점) 보정 모드: POI 라벨을 실제 위치로 끌면 그 대응점으로 focal 을 역산.
   const [fovMode, setFovMode] = useState(false);
   const fovModeRef = useRef(false);
+  // Yaw 보정 모드: POI 라벨을 실제 위치(좌우)로 끌면 필요한 Yaw± 를 역산.
+  const [yawMode, setYawMode] = useState(false);
+  const yawModeRef = useRef(false);
   // 라벨 속성 팝업(다중) — 항상 활성(모드 버튼 없음). 라벨 위에서만 캔버스가 입력을 받아 클릭→팝업.
   //   id=`${kind}:${title}`. 위치는 RAF 가 라벨 displayed 좌표로 매 프레임 갱신(재생 중 따라 이동).
   type InfoPopup = { id: string; kind: 'poi' | 'station'; title: string; category: string; lat: number; lon: number; z: number; dist: number | null; sx: number; sy: number; props?: { k: string; v: string }[];
@@ -392,6 +412,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
   useEffect(() => { maxPoiRangeRef.current = maxPoiRange; }, [maxPoiRange]);
   useEffect(() => { editModeRef.current = editMode; }, [editMode]);
   useEffect(() => { fovModeRef.current = fovMode; }, [fovMode]);
+  useEffect(() => { yawModeRef.current = yawMode; }, [yawMode]);
 
   // 컴팩트 자동 팝업 동기화 — visStructRef(연속 온스크린 라벨) 마다 라벨 옆 DOM 팝업을 자동 '생성'만.
   //   제거는 RAF 가 단일 권한(onScreenLabels + 4프레임 유예)으로 담당 → add/remove 충돌(번쩍임) 제거.
@@ -480,27 +501,35 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
   useEffect(() => { overlapExcludeRef.current = poiOverlapExclude; }, [poiOverlapExclude]);
   // 좌측 노선 패널(RoutePanel) 표시 토글은 하단 재생바(VideoPlayer)로 이동.
   const storeBaseName = useGeoStore(s => s.baseName);
+  const storeCameraInfo = useGeoStore(s => s.cameraInfo);
+  const storeCameraJson = useGeoStore(s => s.cameraJson);
   const storePoiOverrides = useGeoStore(s => s.poiOverrides);
   const setPoiOverride = useGeoStore(s => s.setPoiOverride);
   const setPoiOverrides = useGeoStore(s => s.setPoiOverrides);
   const clearPoiOverride = useGeoStore(s => s.clearPoiOverride);
-  // 경로 표고 슬라이더 상한 — 데이터(중심선) 최대 지면표고 + 여유 (없으면 60 폴백)
+  // 경로 표고 슬라이더 상한 — 데이터 최대 표고 + 여유 (없으면 60 폴백).
+  // 중심선이 없거나 z=0 인 데이터셋(예: 제주 DJI 로그)은 드론 고도(ASL)가 유일한 상한 근거 —
+  // 지면은 드론보다 낮으므로 max(드론고도)까지 열어두면 어떤 지형이든 슬라이더로 도달 가능.
   const pathZMax = useMemo(() => {
     let m = 0;
     for (const c of storeCenterline) if (typeof c.z === 'number' && c.z > m) m = c.z;
+    for (const f of storeFrames) if (typeof f.altitude === 'number' && f.altitude > m) m = f.altitude;
     return m > 0 ? Math.ceil(m + 10) : 60;
-  }, [storeCenterline]);
+  }, [storeCenterline, storeFrames]);
   useEffect(() => { overridesRef.current = storePoiOverrides; }, [storePoiOverrides]);
 
   // ── 보정값 영속화 (baseName별 localStorage) ──────────────────────────────
   // 카메라 각도/내부표정(Yaw±/Pitch±/focal 등) + 표시설정을 데이터셋별로 저장·복원.
   // 한 번 튜닝하면 새로고침/재로드해도 유지 → "처음부터 맞게" 표시.
   const calibLoadedFor = useRef<string | null>(null);
+  // 이 데이터셋에 저장된 보정값이 있었는지 — 카메라 감지값 자동 적용 여부 판단(사용자 튜닝 우선).
+  const calibHadSavedRef = useRef(false);
   useEffect(() => {
     if (!storeBaseName || calibLoadedFor.current === storeBaseName) return;
     calibLoadedFor.current = storeBaseName;
     try {
       const raw = localStorage.getItem(`ghivideo:calib:${storeBaseName}`);
+      calibHadSavedRef.current = !!raw;
       if (!raw) return;
       const c = JSON.parse(raw);
       if (c.params && typeof c.params === 'object') setParams(p => ({ ...p, ...c.params }));
@@ -525,6 +554,100 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
     return () => clearTimeout(t);
   }, [storeBaseName, params, maxPoiRange, smoothHalf, emaAlpha, smoothMinAlpha, smoothSpeedRef]);
 
+  // 영상(djmd)에서 감지한 카메라 초점거리 자동 적용.
+  // 사용자가 f 를 직접 튜닝한 값(기본값 24 가 아닌 저장값)만 우선하고, 그 외(첫 로드,
+  // 또는 저장은 됐지만 f 가 기본값 그대로인 경우)는 감지값을 적용한다.
+  // (보정 자동저장은 폴더를 열기만 해도 기본값으로 저장되므로 '저장 존재' 만으론 튜닝 여부 판단 불가)
+  const camAppliedFor = useRef<string | null>(null);
+  useEffect(() => {
+    if (!storeBaseName || !storeCameraInfo?.focalLen35) return;
+    if (camAppliedFor.current === storeBaseName) return;
+    camAppliedFor.current = storeBaseName;
+    const f = storeCameraInfo.focalLen35;
+    const model = storeCameraInfo.model;
+    setParams(p => {
+      const focalTuned = calibHadSavedRef.current &&
+        Math.abs(p.focalLen - DEFAULT_CAMERA_PARAMS.focalLen) > 0.01;
+      if (focalTuned) {
+        console.log(`[camera] ${model} 감지 (${f}mm) — 사용자 튜닝 f=${p.focalLen}mm 유지 (패널 '적용'으로 교체 가능)`);
+        return p;
+      }
+      console.log(`[camera] ${model} 감지 → focal ${f}mm 자동 적용`);
+      return { ...p, focalLen: f };
+    });
+  }, [storeBaseName, storeCameraInfo]);
+
+  // 폴더의 <영상 base>.camera.json 카메라 파라미터 — 최우선 적용(localStorage/감지값 위에).
+  // 이 effect 는 calib 복원·감지값 적용 effect 뒤에 선언되어 함수형 업데이트가 마지막에 반영된다.
+  const camJsonAppliedFor = useRef<string | null>(null);
+  useEffect(() => {
+    if (!storeBaseName || !storeCameraJson) return;
+    if (camJsonAppliedFor.current === storeBaseName) return;
+    camJsonAppliedFor.current = storeBaseName;
+    const cam = storeCameraJson;
+    setParams(p => {
+      const next = { ...p };
+      for (const [k, v] of Object.entries(cam)) {
+        if (k in next && typeof v === 'number' && isFinite(v)) (next as unknown as Record<string, number>)[k] = v;
+      }
+      return next;
+    });
+    console.log('[camera] <base>.camera.json 파라미터 적용(최우선):', cam);
+  }, [storeBaseName, storeCameraJson]);
+
+  // 현재 카메라 파라미터를 사용자 PC 에 <영상 base>.camera.json 으로 다운로드 저장.
+  // Yaw±(자동추정/드래그 역산 결과) 포함 전체 파라미터가 담긴다.
+  // 받은 파일을 영상 폴더에 넣어두면 다음 폴더 선택 때 최우선으로 자동 적용된다.
+  const [camSaveState, setCamSaveState] = useState<'idle' | 'ok'>('idle');
+  const saveCameraToPc = useCallback(() => {
+    const geo = useGeoStore.getState();
+    const videoName = geo.videoFiles[geo.videoIndex]?.name ?? (geo.baseName ? `${geo.baseName}.mp4` : 'camera.mp4');
+    const base = videoName.replace(/\.[^.]+$/, '');
+    const payload = {
+      camera: paramsRef.current,
+      model: geo.cameraInfo?.model,
+      savedAt: new Date().toISOString(),
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${base}.camera.json`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 5000);
+    setCamSaveState('ok');
+    setTimeout(() => setCamSaveState('idle'), 2500);
+  }, []);
+
+  // Yaw 자동 추정 — 전진 비행 구간에서 GPS 진행 방위(정확) vs 짐벌 헤딩(나침반 오차 포함)의
+  // 차이 중앙값을 Yaw± 로 설정. 카메라가 진행방향을 보며 촬영하는 도로 추종 비행 가정(근사치).
+  const autoEstimateYaw = useCallback(() => {
+    const frames = allDroneFramesRef.current;
+    if (!frames || frames.length < 30) { alert('드론 로그가 부족해 자동 추정할 수 없습니다.'); return; }
+    const fps = fpsRef.current;
+    const cosLat = Math.cos((frames[0].lat * Math.PI) / 180);
+    const STEP = 10; // 진행방위 계산 창(≈1초) — GPS 지터 평활
+    const diffs: number[] = [];
+    for (let i = STEP; i < frames.length; i++) {
+      const a = frames[i - STEP], b = frames[i];
+      const dt = (b.frame - a.frame) / fps;
+      if (dt <= 0) continue;
+      const dx = (b.lon - a.lon) * 111000 * cosLat;
+      const dy = (b.lat - a.lat) * 111000;
+      if (Math.hypot(dx, dy) / dt < 2) continue;             // 정지/호버 구간 제외
+      const course = (Math.atan2(dx, dy) * 180) / Math.PI;    // 진행 방위 (North=0, CW)
+      let d = course - frames[i - (STEP >> 1)].yaw;            // 진행방위 − 짐벌 헤딩
+      d = ((d + 540) % 360) - 180;
+      if (Math.abs(d) < 60) diffs.push(d);                     // 옆을 보며 찍은 구간 제외
+    }
+    if (diffs.length < 20) { alert('전진 촬영 구간이 부족해 자동 추정할 수 없습니다.'); return; }
+    diffs.sort((x, y) => x - y);
+    const med = diffs[diffs.length >> 1];
+    const next = Math.round(med * 10) / 10;
+    setParam('yawOffset', next);
+    console.log(`[yaw] 자동 추정: 유효 샘플 ${diffs.length}개, 중앙값 ${med.toFixed(2)}° → Yaw± ${next}° 적용`);
+  }, [setParam]);
+
   // POI 보정(override: DEM 표고/드래그)도 baseName별 자동 저장·복원 → 새로고침해도 유지.
   const ovLoadedFor = useRef<string | null>(null);
   useEffect(() => {
@@ -728,6 +851,9 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
     const CLIP_Z = 0.1;
     const SMOOTH_HALF = currentSmoothHalf;
     const MAX_RANGE = currentMaxRange;  // POI 표시 범위 — 드론 수평 직선거리(m)
+    // 표고 미상(z=0) 라벨의 앵커 평면 — 드론 궤적과 동일한 '경로 표고' 값.
+    // 사용자가 경로표고 슬라이더로 궤적을 도로에 맞추면 측점/POI 라벨도 함께 맞는다.
+    const PATH_Z = dronePathZRef.current;
 
     if (!frames.length) return;
 
@@ -752,20 +878,31 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
         const stationLabels: LabelCache['stationLabels'] = [];
         for (const st of allSt) {
           const snap = nearestCL(st.lat, st.lon);
-          const slat = snap?.lat ?? st.lat, slon = snap?.lon ?? st.lon, sz = snap?.z ?? st.z;
+          const slat = snap?.lat ?? st.lat, slon = snap?.lon ?? st.lon;
+          const szRaw = snap?.z ?? st.z;
+          // 표고 미상(0 이하)이면 경로표고 평면에 앵커 — 공중부양/시차 밀림 방지.
+          const sz = szRaw > 0 ? szRaw : PATH_Z;
           const cc = toCameraCoords(drone, slat, slon, sz, currentParams, worldOrigin);
           if (cc.Zc < CLIP_Z) continue;
+          // 측점도 POI 와 동일하게 표시 범위 제한 — 원거리(수 km) 측점이 수평선에 뭉치는 것 방지.
+          if ((cc.distH ?? 0) > MAX_RANGE) continue;
           const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
-          if (pxRaw < -0.05 || pxRaw > 1.05 || pyRaw < -0.05 || pyRaw > 1.05) continue;
+          // 포함 경계 ±0.15 로 넉넉히 — 경계에 걸친 라벨이 호버(정지) 중 GPS 지터로
+          // 캐시 프레임마다 들락거리며 깜빡이는 것 방지. 실제 화면 밖 컬링은 드로우가 담당.
+          if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
           // 화면좌표 대신 (스냅된)월드좌표 저장 → RAF 가 연속 포즈로 재투영.
           stationLabels.push({ title: st.title, lat: slat, lon: slon, z: sz });
         }
 
         // 후보 수집 (거리 dist + 월드좌표 + 지면고도 gz) → 겹침 억제용
-        const poiCand: { x: number; y: number; title: string; label: string; category: string; dist: number; lat: number; lon: number; gz: number; compact: { k: string; v: string }[] }[] = [];
+        const poiCand: { x: number; y: number; title: string; label: string; category: string; dist: number; lat: number; lon: number; gz: number; compact: { k: string; v: string }[]; color?: string }[] = [];
         for (const poi of allPoi) {
-          // 지면고도 gz: 보정값(DEM/드래그) 또는 최근접 선로표고. RAF 투영 기준값.
+          // 지면고도 gz: 보정값(DEM/드래그) → 최근접 선로표고(유효값) → POI 자체 z → 경로표고 앵커.
-          const gz = overridesRef.current[poi.title]?.z ?? nearestCL(poi.lat, poi.lon)?.z ?? poi.z;
+          // 표고 미상(0)인 데이터셋(제주)은 경로표고 평면에 앵커되어 궤적과 함께 보정된다.
+          const clz = nearestCL(poi.lat, poi.lon)?.z;
+          const gz = overridesRef.current[poi.title]?.z
+            ?? (clz !== undefined && clz > 0 ? clz : undefined)
+            ?? (poi.z > 0 ? poi.z : PATH_Z);
           // 가시성 판정용 poiZ: 드론높이 모드면 드론−이격거리, 아니면 gz.
           const poiZ = currentDroneHeight
             ? drone.altitude - (currentParams.geoidOffset ?? 0) - currentDroneDrop
@@ -775,13 +912,18 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
           // 표시 범위: 드론과의 수평 직선거리(distH)가 범위 안이면 표시, 밖이면 제외.
           if ((cc.distH ?? 0) > MAX_RANGE) continue;
           const { pxRaw, pyRaw } = pixelFromCamera(cc, currentParams);
-          if (pxRaw < -0.02 || pxRaw > 1.02 || pyRaw < -0.02 || pyRaw > 1.02) continue;
+          // 포함 경계 ±0.15 — 경계 걸침 라벨의 호버 중 10Hz 깜빡임 방지(화면 밖 컬링은 드로우 담당).
-          poiCand.push({ x: pxRaw, y: pyRaw, title: poi.title, label: guboonOf(poi.props) ?? cleanTitle(poi.title), category: poi.category, dist: cc.distH ?? 0, lat: poi.lat, lon: poi.lon, gz, compact: compactFieldsOf(poi.props) });
+          if (pxRaw < -0.15 || pxRaw > 1.15 || pyRaw < -0.15 || pyRaw > 1.15) continue;
+          poiCand.push({ x: pxRaw, y: pyRaw, title: poi.title, label: guboonOf(poi.props) ?? cleanTitle(poi.title), category: poi.category, dist: cc.distH ?? 0, lat: poi.lat, lon: poi.lon, gz, compact: compactFieldsOf(poi.props), ...(poi.labelColor ? { color: poi.labelColor } : {}) });
         }
         // 겹침 억제: KAKAO_RAIL(철도역/역사) 라벨을 최우선 유지 → 겹치면 일반 POI 가 숨겨진다.
         // 같은 우선순위 내에서는 가까운(dist 작은) 것 우선. 임계 이내면 뒤(낮은우선/먼) 것 숨김.
+        // 거리차 1m 미만은 제목순 고정 — 호버(정지) 중 GPS 지터로 승자가 프레임마다 뒤바뀌며
+        // 라벨 쌍이 교대로 깜빡이는 것 방지.
         const railRank = (cat: string): number => (cat === '철도역' || cat === '역사' ? 0 : 1);
-        poiCand.sort((a, b) => railRank(a.category) - railRank(b.category) || a.dist - b.dist);
+        poiCand.sort((a, b) =>
+          railRank(a.category) - railRank(b.category) ||
+          (Math.abs(a.dist - b.dist) > 1 ? a.dist - b.dist : (a.title < b.title ? -1 : a.title > b.title ? 1 : 0)));
         // 겹침 시 진행방향 변형 우선: 같은 base 형제(예: 회덕제1가도교 상/하)가 겹치면
         //   하행='(하)' / 상행='(상)' 쪽을 남긴다(드론이 실제 지나는 선로). 무관한 POI엔 영향 없음.
         // 진행방향 변형 태그(닫는 괄호까지) — 하행='(하)', 상행='(상)'. '(하인상)' 등은 제외.
@@ -816,7 +958,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
           const ck = coordKey(c);
           const row = groupSeen.get(ck) ?? 0;
           groupSeen.set(ck, row + 1);
-          return { title: c.title, label: c.label, category: c.category, lat: c.lat, lon: c.lon, gz: c.gz, compact: c.compact, labelRow: row, labelRowCount: groupCount.get(ck) ?? 1 };
+          return { title: c.title, label: c.label, category: c.category, lat: c.lat, lon: c.lon, gz: c.gz, compact: c.compact, labelRow: row, labelRowCount: groupCount.get(ck) ?? 1, ...(c.color ? { color: c.color } : {}) };
         });
 
         newMap.set(drone.frame, { stationLabels, poiMarkers });
@@ -841,17 +983,20 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
   }, [nearestCL]);
 
   // 모든 데이터 로드 완료 시 사전 계산 시작
+  // storeFrames 의존 필수: 분할 영상 세그먼트 전환(loadSegment)으로 frames 가 교체되면
+  // 라벨 캐시(프레임별 가시 POI)를 새 구간 기준으로 재계산해야 함 — 없으면 이전 세그먼트
+  // 캐시가 남아 두 번째 영상부터 시설물이 표출되지 않는다.
   useEffect(() => {
     if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
     startLabelPrecompute(paramsRef.current, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop);
-  }, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, poiOverlapExclude]);
+  }, [droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, poiOverlapExclude, dronePathZ, storeFrames]);
 
-  // params / smoothHalf / maxPoiDist 변경 시 사전 계산 재시작 (500ms debounce)
+  // params / smoothHalf / maxPoiDist / 경로표고(표고 미상 라벨 앵커) 변경 시 사전 계산 재시작 (500ms debounce)
   useEffect(() => {
     if (!droneFramesLoaded || !geoDataLoaded || !clDataLoaded) return;
     const timer = setTimeout(() => startLabelPrecompute(params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop), 500);
     return () => clearTimeout(timer);
-  }, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude]);
+  }, [params, smoothHalf, maxPoiRange, poiDroneHeight, droneHeightDrop, storePois, storeStructures, droneFramesLoaded, geoDataLoaded, clDataLoaded, startLabelPrecompute, poiOverlapExclude, dronePathZ, storeFrames]);
 
   // 현재 재생 시간 → 드론 프레임 ref 갱신
   useEffect(() => {
@@ -1131,31 +1276,32 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
           const py = (prevDpoi?.ry !== undefined && Math.abs(psy0 - prevDpoi.ry) <= 0.75) ? prevDpoi.ry : Math.round(psy0);
           d.rx = px; d.ry = py;
           displayedPoiRef.current.set(poiA.title, d);
-          const r = 10;
+          // 텍스트 박스만 표출(십자 마커/이모지 아이콘 없음):
-          // 십자 마커
+          //   배경 = KML 텍스트박스_색상(poiA.color, 없으면 기본 하늘색), 글자 = 흰색.
-          ctx.strokeStyle = '#64c8ff'; ctx.lineWidth = 2.5;
+          //   박스는 POI 지점(px)에 가로 중앙 정렬.
-          ctx.beginPath();
+          const boxCol = poiA.color ?? '#64c8ff';
-          ctx.moveTo(px-r, py); ctx.lineTo(px+r, py);
-          ctx.moveTo(px, py-r); ctx.lineTo(px, py+r);
-          ctx.stroke();
-          // 이모지 + 텍스트
-          const emoji = CATEGORY_EMOJI[poiA.category] ?? '📌';
           // 라벨: 속성에 '구분'이 있으면 그 값(원문 그대로), 없으면 cleanTitle(title). poiCand에서 확정.
-          const label = `${emoji} ${poiA.label}`;
+          const label = poiA.label;
-          const lx = Math.max(2, px + 14);
+          // 동일좌표 라벨 세로 배치: 행 중앙을 지점에 맞춰 위→아래로 안 겹치게 오프셋.
-          // 동일좌표 라벨 세로 배치: 행 중앙을 십자에 맞춰 위→아래로 안 겹치게 오프셋.
+          const ROW_H = 28;
-          const ROW_H = 24;
           const labelY = py + (poiA.labelRow - (poiA.labelRowCount - 1) / 2) * ROW_H;
-          ctx.strokeStyle = 'rgba(0,0,0,0.85)'; ctx.lineWidth = 4;
-          ctx.lineJoin = 'round';
-          ctx.textBaseline = 'middle';
-          ctx.strokeText(label, lx, labelY);
-          ctx.fillStyle = '#64c8ff';
-          ctx.fillText(label, lx, labelY);
-          // 히트박스(십자 마커 ~ 글자 끝) — 아이콘·글자 어디를 눌러도 선택되게. (라벨 행 위치 기준)
           const tw = ctx.measureText(label).width;
-          hitBoxes.push({ kind: 'poi', title: poiA.title, x0: px - r, y0: labelY - 13, x1: lx + tw + 2, y1: labelY + 13 });
+          // 박스 높이 = 글자 크기(20px) × 1.2 — 라벨 상하 여유. 행 간격(ROW_H)도 같이 벌림.
-          const poiVisible = labelOnScreen(px - r, labelY - 13, lx + tw + 2, labelY + 13);
+          const PAD_X = 7, BOX_H = 24;
+          const bx0 = Math.max(2, px - tw / 2 - PAD_X);
+          const bx1 = bx0 + tw + PAD_X * 2;
+          const by0 = labelY - BOX_H / 2, by1 = labelY + BOX_H / 2;
+          ctx.fillStyle = boxCol;
+          ctx.beginPath();
+          if (typeof ctx.roundRect === 'function') ctx.roundRect(bx0, by0, bx1 - bx0, BOX_H, 5);
+          else ctx.rect(bx0, by0, bx1 - bx0, BOX_H);
+          ctx.fill();
+          ctx.fillStyle = '#ffffff';
+          ctx.textBaseline = 'middle';
+          ctx.fillText(label, bx0 + PAD_X, labelY);
+          // 히트박스 = 텍스트 박스 영역 (어디를 눌러도 선택)
+          hitBoxes.push({ kind: 'poi', title: poiA.title, x0: bx0, y0: by0 - 2, x1: bx1 + 2, y1: by1 + 2 });
+          const poiVisible = labelOnScreen(bx0, by0, bx1, by1);
           if (poiVisible) onScreenLabels.add(`poi:${poiA.title}`);
           // 연속 온스크린 프레임 수 갱신(화면 밖이면 0으로 리셋).
           const streak = poiVisible ? (poiOnScreenStreakRef.current.get(poiA.title) ?? 0) + 1 : 0;
@@ -1179,7 +1325,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
       } // end if(cache) — 중심선/드론경로/측점/POI
 
       // 편집/FOV 보정 모드: 드래그 중 마커 피드백 (마우스 따라다님)
-      if ((editModeRef.current || fovModeRef.current) && dragRef.current && dragPosRef.current) {
+      if ((editModeRef.current || fovModeRef.current || yawModeRef.current) && dragRef.current && dragPosRef.current) {
         const dx = vx(dragPosRef.current.x), dy = vy(dragPosRef.current.y);
         ctx.strokeStyle = '#ffe14d'; ctx.lineWidth = 2;
         ctx.beginPath(); ctx.arc(dx, dy, 14, 0, Math.PI * 2); ctx.stroke();
@@ -1224,7 +1370,10 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
           //   잡으면 라벨 높이만큼 먹혀 팝업이 글자에 붙는다 → 라벨 '바깥 가장자리' 기준으로 띄운다.
           const LABEL_HALF = 15;             // 라벨 반높이(px) — sy 중심 ± 이 값이 글자/아이콘 영역
           const GAP = 12;                    // 라벨 가장자리 ~ 팝업 사이 실제 여백
-          const tx = Math.min(Math.max(8, sx - 10), Math.max(8, W - pw - 4));
+          // POI 라벨은 지점(sx) 기준 가로 중앙 정렬 박스 → 팝업도 박스 중앙 아래로 정렬.
+          // 측점 라벨은 마커 오른쪽으로 그려지므로 기존(좌측 여유 10px) 유지.
+          const txRaw = kind === 'poi' ? sx - pw / 2 : sx - 10;
+          const tx = Math.min(Math.max(8, txRaw), Math.max(8, W - pw - 4));
           // 기본은 라벨 '아래'. 아래 공간이 부족하면(화면 하단 근접) 라벨 '위'로 플립.
           //   ※ 히스테리시스(sticky): 경계에서 sy 가 미세하게 오르내려도 위↔아래로 왕복하지 않도록,
           //     '위'로 간 뒤엔 아래에 HYST 이상 여유가 생겨야만 '아래'로 복귀. (왕복=팝업 순간이동=번쩍임 방지)
@@ -1299,7 +1448,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
     const { x: nx, y: ny } = clientToVideoNorm(e.clientX, e.clientY);
 
     // 편집/세로화각 보정: POI 선택 + 드래그
-    if (editModeRef.current || fovModeRef.current) {
+    if (editModeRef.current || fovModeRef.current || yawModeRef.current) {
       const canvas = canvasRef.current; if (!canvas) return;
       const hit = hitTestLabel(nx, ny);
       if (!hit) return;
@@ -1366,15 +1515,15 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
     // 영상이 준비되기 전(폴더 선택 화면 등)엔 입력을 받지 않음 → 하위 UI(폴더 선택/드롭) 클릭 통과.
     if (!videoReady) { canvas.style.pointerEvents = 'none'; return; }
     canvas.style.pointerEvents = 'auto';
-    canvas.style.cursor = (editMode || fovMode) ? 'move' : 'default';
+    canvas.style.cursor = (editMode || fovMode || yawMode) ? 'move' : 'default';
-    if (editMode || fovMode) { setInfoPopups([]); return; }
+    if (editMode || fovMode || yawMode) { setInfoPopups([]); return; }
     const onMove = (e: MouseEvent) => {
       const { x: nx, y: ny } = clientToVideoNorm(e.clientX, e.clientY);
       canvas.style.cursor = hitTestLabel(nx, ny) ? 'pointer' : 'default';
     };
     parent.addEventListener('mousemove', onMove);
     return () => { parent.removeEventListener('mousemove', onMove); };
-  }, [videoReady, editMode, fovMode, clientToVideoNorm, hitTestLabel]);
+  }, [videoReady, editMode, fovMode, yawMode, clientToVideoNorm, hitTestLabel]);
 
   const onPoiPointerUp = useCallback(() => {
     const drag = dragRef.current, pos = dragPosRef.current;
@@ -1385,6 +1534,27 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
     const drone = getSmoothedDrone(); if (!drone) return;
     const p = paramsRef.current, wo = worldOriginRef.current;
 
+    // ── Yaw(방위 오프셋) 보정 ──
+    // 드롭한 화면점의 '가로'(px)만 맞춘다. 라벨의 절대 방위는 고정이므로,
+    //   현재 카메라축 기준 수평각 θ0 = atan2(Xc, Zc) 과 드롭 지점이 요구하는
+    //   수평각 θ1 = atan((px* − 0.5 − cx0)·sW / f) 의 차이만큼 카메라 방위를 돌리면 됨:
+    //   yawOffset_new = yawOffset_old + (θ0 − θ1)
+    if (yawModeRef.current) {
+      const poiZ = poiDroneHeightRef.current
+        ? drone.altitude - (p.geoidOffset ?? 0) - droneHeightDropRef.current
+        : drag.z0;
+      const cc = toCameraCoords(drone, drag.lat, drag.lon, poiZ, p, wo);
+      if (cc.Zc < 0.1) return;
+      const th0 = Math.atan2(cc.Xc, cc.Zc);
+      const th1 = Math.atan(((pos.x - 0.5 - (p.cx0 ?? 0)) * (p.sensorW ?? 36)) / p.focalLen);
+      const dYaw = (th0 - th1) * 180 / Math.PI;
+      if (!isFinite(dYaw) || Math.abs(dYaw) > 45) { alert('보정량이 비정상적으로 큽니다 — 올바른 지물 위치로 끌었는지 확인하세요.'); return; }
+      const next = Math.max(-180, Math.min(180, (p.yawOffset ?? 0) + dYaw));
+      setParam('yawOffset', Math.round(next * 10) / 10);
+      console.log(`[yaw] 드래그 역산: Δ${dYaw.toFixed(2)}° → Yaw± ${next.toFixed(1)}°`);
+      return;
+    }
+
     // ── 세로 화각(sensorH) 보정 ──
     // 드롭한 화면점의 '세로'(py)만 맞춘다. 가로(f/sW)는 이미 정확하므로 건드리지 않음
     //   (f 를 바꾸면 가로까지 틀어져 스테이션선이 좌우로 벗어남).
@@ -1632,26 +1802,32 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
                 {poiDroneHeight ? `■ 드론 높이와 POI 이격거리 ${droneHeightDrop}m` : '▶ 드론 높이와 POI 이격거리'}
               </button>
               {poiDroneHeight && (
-                <ParamRow label="이격거리" tip={`POI를 드론보다 ${droneHeightDrop}m 아래에 배치 (값↑ = POI 아래로)`} value={droneHeightDrop} min={0} max={120} step={1} unit="m" decimals={0} onChange={v => setDroneHeightDrop(Math.round(v))} />
+                <ParamRow label="이격거리" tip={`POI를 드론보다 ${droneHeightDrop}m 아래에 배치 (값↑ = POI 아래로)`} value={droneHeightDrop} min={0} max={300} step={1} unit="m" decimals={0} onChange={v => setDroneHeightDrop(Math.round(v))} />
               )}
             </div>
             <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">POI 위치 편집 (마우스)
               <InfoTip text="드래그=수평위치 이동(가까운 프레임에서). 클릭 후 표고 슬라이더=높이. DEM(SRTM 30m)으로 각 POI 지점의 지면고도 적용(구글 지면고도와 일치). 옥상으로 뜨는 건물은 드래그/슬라이더로 보정. 자동저장." />
             </div>
             <div className="space-y-2">
-              <button onClick={() => { setEditMode(v => { const nv = !v; if (nv) setFovMode(false); return nv; }); }}
+              <button onClick={() => { setEditMode(v => { const nv = !v; if (nv) { setFovMode(false); setYawMode(false); } return nv; }); }}
                 className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${editMode ? 'bg-yellow-500/80 border-yellow-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                 {editMode ? '■ 편집 종료' : '✎ 편집 모드 (POI 위치/표고)'}
               </button>
-              <button onClick={() => { setFovMode(v => { const nv = !v; if (nv) setEditMode(false); return nv; }); }}
+              <button onClick={() => { setFovMode(v => { const nv = !v; if (nv) { setEditMode(false); setYawMode(false); } return nv; }); }}
                 className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${fovMode ? 'bg-purple-500/80 border-purple-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
                 {fovMode ? '■ 세로화각 보정 종료' : '🎯 세로화각 보정 — POI를 실제 위치(상하)로 드래그'}
                 <InfoTip text="라벨이 멀리(위)/가까이(아래)서 상하로 어긋날 때 사용. POI 하나를 영상 속 실제 위치로 끌면 세로 화각(sensorH)만 역산해 상하 정렬. 가로(초점 f)는 안 건드려 빨간 중심선이 좌우로 안 틀어짐. 세로 중심에서 충분히 떨어진(위/아래) POI로 보정." />
               </button>
+              <button onClick={() => { setYawMode(v => { const nv = !v; if (nv) { setEditMode(false); setFovMode(false); } return nv; }); }}
+                className={`w-full text-[11px] px-2 py-1 rounded border transition-colors ${yawMode ? 'bg-sky-500/80 border-sky-300 text-black font-bold' : 'bg-black/60 border-gray-600 text-gray-200 hover:border-gray-400'}`}>
+                {yawMode ? '■ Yaw 보정 종료' : '🧭 Yaw 보정 — POI를 실제 위치(좌우)로 드래그'}
+                <InfoTip text="라벨 전체가 좌우로 치우칠 때 사용. POI 하나를 영상 속 실제 지물 위치로 끌면 필요한 Yaw±(방위 오프셋)를 역산해 자동 설정. 자동추정(비행경로) 후 마무리 미세조정에 적합." />
+              </button>
               <div className="text-[10px] text-gray-600">ℹ️ 라벨 클릭 → 속성 팝업(여러 개 누적, 재생 따라 이동). 빈 곳 클릭 → 팝업 닫기, 팝업 없으면 재생/정지.</div>
               <div className="text-[10px] text-gray-500">
                 {dragTitle ? `드래그 중: ${dragTitle}`
                   : fovMode ? `🎯 POI를 실제 위치로 끌면 세로화각 자동보정 (현재 senH=${(params.sensorH ?? 20.25).toFixed(2)}mm)`
+                  : yawMode ? `🧭 POI를 실제 위치(좌우)로 끌면 Yaw 자동보정 (현재 Yaw±=${params.yawOffset.toFixed(1)}°)`
                   : `보정된 POI ${Object.keys(storePoiOverrides).length}개`}
               </div>
               {editMode && selPoi && (
@@ -1700,6 +1876,13 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
             <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-b border-gray-700 pb-2 mb-2">자세 보정 오프셋<span className="ml-1 text-gray-600">(SRT + offset)</span></div>
             <div className="space-y-2 mb-3">
               <ParamRow label="Yaw ±" value={params.yawOffset} min={-180} max={180} step={0.1} unit="°" decimals={1} onChange={v => setParam('yawOffset', v)} />
+              {/* Yaw 자동 추정(2단계 보정의 1단계) — 대략 맞춘 뒤 'Yaw 보정' 드래그 모드로 마무리 */}
+              <button
+                type="button"
+                onClick={autoEstimateYaw}
+                className="w-full text-[10px] px-2 py-0.5 rounded border border-gray-600 bg-gray-800 hover:bg-gray-700 text-gray-300"
+                title="전진 비행 구간의 GPS 진행 방위와 짐벌 헤딩 차이(중앙값)로 Yaw± 자동 설정 (근사) — 이후 'Yaw 보정' 드래그로 미세 조정"
+              >Yaw 자동추정 (비행경로 기준)</button>
               <ParamRow label="Pitch ±" value={params.pitch} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('pitch', v)} />
               <ParamRow label="Roll ±" value={params.roll} min={-45} max={45} step={0.1} unit="°" decimals={1} onChange={v => setParam('roll', v)} />
             </div>
@@ -1712,6 +1895,30 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
               <div className="text-[10px] text-gray-600 text-right">정표고→타원체고 (대전≈25.8)</div>
             </div>
             <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1.5 border-t border-gray-700 pt-2">내부표정 (초점·주점·센서)</div>
+            {/* 영상(djmd) 자동 감지 정보 + 카메라값 서버 저장('<영상 base>.camera.json' — 재로드 시 자동 적용) */}
+            <div className="flex items-center justify-between gap-1 mb-1.5 text-[10px] text-gray-400">
+              <span className="truncate" title="영상 메타데이터(djmd)에서 감지된 카메라 정보">
+                📷 {storeCameraInfo
+                  ? `${storeCameraInfo.model}${storeCameraInfo.focalLen35 ? ` · ${storeCameraInfo.focalLen35}mm` : ''}${storeCameraInfo.fps ? ` · ${storeCameraInfo.fps}fps` : ''}`
+                  : '카메라 미감지'}
+              </span>
+              <div className="flex gap-1 shrink-0">
+                {storeCameraInfo?.focalLen35 !== undefined && (
+                  <button
+                    type="button"
+                    onClick={() => setParams(p => ({ ...p, focalLen: storeCameraInfo!.focalLen35! }))}
+                    className="px-1.5 py-0.5 rounded border border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200"
+                    title={`감지된 초점거리 ${storeCameraInfo!.focalLen35}mm 를 f 에 적용`}
+                  >적용</button>
+                )}
+                <button
+                  type="button"
+                  onClick={saveCameraToPc}
+                  className={`px-1.5 py-0.5 rounded border ${camSaveState === 'ok' ? 'border-emerald-400 bg-emerald-700/60 text-emerald-100' : 'border-gray-600 bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
+                  title="현재 카메라 파라미터(Yaw± 보정 포함 전체)를 <영상이름>.camera.json 으로 PC에 다운로드 — 영상 폴더에 넣어두면 폴더 선택 시 자동 적용"
+                >{camSaveState === 'ok' ? '저장됨 ✓' : 'PC에 저장'}</button>
+              </div>
+            </div>
             <div className="space-y-2 mb-3">
               <ParamRow label="f" value={params.focalLen} min={10} max={100} step={0.1} unit="mm" decimals={1} onChange={v => setParam('focalLen', v)} />
               <ParamRow label="cx₀" value={params.cx0} min={-0.5} max={0.5} step={0.005} unit="" decimals={3} onChange={v => setParam('cx0', v)} />

client/src/components/player/VideoPlayer.tsx

@@ -43,6 +43,12 @@ export interface VideoPlayerHandle {
   getVideoElement: () => HTMLVideoElement | null;
 }
 
+/** 초 → "m:ss" (재생목록 길이 표시용). 미상이면 "--:--". */
+function fmtDur(d: number | null | undefined): string {
+  if (d == null || !isFinite(d)) return '--:--';
+  return `${Math.floor(d / 60)}:${String(Math.floor(d % 60)).padStart(2, '0')}`;
+}
+
 interface VideoPlayerProps {
   onAddMemo: (time: number) => void;
   onToggleHelp?: () => void;
@@ -119,6 +125,12 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const geoLoaded = useGeoStore((s) => s.loaded);
     // 드론 정보 — 하단바에 GPS/고도 항상 표시.
     const storeFrames = useGeoStore((s) => s.frames);
+    // 분할 영상 재생목록 — 폴더 로드 시 이름 오름차순. 목록 클릭으로 세그먼트 직접 선택 재생.
+    const videoFiles = useGeoStore((s) => s.videoFiles);
+    const videoDurations = useGeoStore((s) => s.videoDurations);
+    const videoIndex = useGeoStore((s) => s.videoIndex);
+    // 영상목록 콤보(좌상단 타이틀 아래) 펼침 상태 — 기본 접힘.
+    const [showPlaylist, setShowPlaylist] = useState(false);
     // 시설등급(시설종별) 표시 필터 — 재생바/패널이 구독하는 설정 스토어.
     const gradeFilter = useSettingsStore((s) => s.gradeFilter);
     const setGradeFilter = useSettingsStore((s) => s.setGradeFilter);
@@ -155,6 +167,48 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       }
     };
 
+    // 재생목록에서 세그먼트 선택 — 같은 항목이면 처음부터 재생, 다른 항목이면
+    // 드론 로그를 해당 구간으로 재정렬(loadSegment)한 뒤 전환 재생.
+    const handleSelectSegment = async (i: number): Promise<void> => {
+      const geo = useGeoStore.getState();
+      if (usePlayerStore.getState().source?.kind !== 'local') return;
+      if (i === geo.videoIndex) {
+        playerRef.current?.currentTime(0);
+      } else {
+        const file = await geo.loadSegment(i);
+        if (!file) return;
+        loadLocalFile(file);
+      }
+      const p = playerRef.current?.play();
+      if (p && typeof p.catch === 'function') p.catch(() => {});
+    };
+
+    // 분할 영상 연속재생 — 영상이 끝나면 같은 폴더의 다음 영상(이름 오름차순)을 자동 재생.
+    // 드론 로그(시간 기반)는 loadSegment 가 누적 오프셋으로 재정렬해 궤적 정합을 유지한다.
+    useEffect(() => {
+      const player = playerRef.current;
+      if (!player) return;
+      const onEnded = (): void => {
+        void (async () => {
+          const geo = useGeoStore.getState();
+          if (!geo.loaded || geo.videoFiles.length < 2) return;
+          // 폴더 기반 로컬 재생에서만 동작 (서버 스트림/단일 파일은 대상 아님)
+          if (usePlayerStore.getState().source?.kind !== 'local') return;
+          const next = geo.videoIndex + 1;
+          if (next >= geo.videoFiles.length) return;
+          const file = await geo.loadSegment(next);
+          if (!file) return;
+          loadLocalFile(file);
+          // ended 직후는 paused 상태라 loadLocalFile 의 이어재생 로직이 안 걸림 → 직접 재생.
+          const p = player.play();
+          if (p && typeof p.catch === 'function') p.catch(() => {});
+        })();
+      };
+      player.on('ended', onEnded);
+      return () => { player.off('ended', onEnded); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [playerRef, loadLocalFile]);
+
     // Expose methods to parent via ref
     useImperativeHandle(ref, () => ({
       loadLocalFile,
@@ -425,6 +479,54 @@ const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           />
         </div>
 
+        {/* 영상 목록 콤보 — 좌상단 타이틀(노선 배너) 아래. 버튼 클릭 시 목록이 아래로 펼쳐지고
+            항목 선택 시 해당 영상으로 즉시 전환(드론 로그도 세그먼트에 맞춰 자동 재정렬).
+            현재 재생 항목 재선택 시 처음부터 재생. */}
+        {source?.kind === 'local' && videoFiles.length > 0 && (
+          <div className="absolute left-2 z-40 w-80 pointer-events-auto" style={{ top: paramTop }}>
+            <button
+              type="button"
+              onClick={() => setShowPlaylist((v) => !v)}
+              title="폴더 영상 목록 펼치기/접기"
+              className={`w-full flex items-center gap-1.5 px-2 py-1 rounded border text-xs text-left ${
+                showPlaylist
+                  ? 'bg-amber-400 border-amber-300 text-black font-semibold'
+                  : 'bg-black/70 border-gray-600 text-gray-200 hover:bg-black/90'
+              }`}
+            >
+              <span className="shrink-0">▶</span>
+              <span className="flex-1 truncate">{videoFiles[videoIndex]?.name ?? ''}</span>
+              <span className={`shrink-0 font-mono ${showPlaylist ? 'text-black/70' : 'text-gray-400'}`}>
+                {videoIndex + 1}/{videoFiles.length} {showPlaylist ? '▲' : '▼'}
+              </span>
+            </button>
+            {showPlaylist && (
+              <ul className="mt-1 max-h-56 overflow-y-auto bg-black/85 border border-gray-600 rounded-md">
+                {videoFiles.map((f, i) => (
+                  <li key={`${i}-${f.name}`}>
+                    <button
+                      type="button"
+                      onClick={() => { setShowPlaylist(false); void handleSelectSegment(i); }}
+                      title={i === videoIndex ? `${f.name} (재선택 시 처음부터)` : f.name}
+                      className={`w-full flex items-center gap-1.5 px-2 py-1 text-xs text-left ${
+                        i === videoIndex
+                          ? 'bg-amber-400/90 text-black font-semibold'
+                          : 'text-gray-200 hover:bg-gray-700/80'
+                      }`}
+                    >
+                      <span className="w-4 shrink-0 text-center">{i === videoIndex ? '▶' : i + 1}</span>
+                      <span className="flex-1 truncate">{f.name}</span>
+                      <span className={`shrink-0 font-mono ${i === videoIndex ? 'text-black/70' : 'text-gray-400'}`}>
+                        {fmtDur(videoDurations[i])}
+                      </span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+
         {/* Empty state placeholder — 가운데 반투명 폴더 선택 */}
         {!source && (
           <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-400 pointer-events-none select-none" style={{ minHeight: '240px' }}>

client/src/stationbar/StationBar.tsx

@@ -33,11 +33,13 @@ interface GeoPoint {
   type: string;
 }
 
-/** 프레임별 precompute 결과. km=배지용 최근접측점, chain=구간방향용 연속 체이니지. */
+/** 프레임별 precompute 결과. km=배지용 최근접측점, chain=구간방향용 연속 체이니지,
+ *  offM=측점 폴리라인까지 수평거리(m) — 노선 밖(접근/이탈) 판별용. */
 interface ViewedPoint {
   frameNum: number;
   km: number;
   chain: number;
+  offM: number;
   time: number;
 }
 
@@ -47,9 +49,10 @@ interface StationLine {
   k: number; // 경도→m 환산 (cos(lat0)*111000)
 }
 
-/** 드론 lat/lon 을 측점 폴리라인에 투영 → 연속 체이니지(m).
+/** 드론 lat/lon 을 측점 폴리라인에 투영 → 연속 체이니지(m) + 폴리라인까지 수평거리(m).
- *  100m 양자화된 최근접측점과 달리 전진/후진 전환 시점이 실제 이동과 일치. */
+ *  100m 양자화된 최근접측점과 달리 전진/후진 전환 시점이 실제 이동과 일치.
-function projectChainage(lat: number, lon: number, line: StationLine): number {
+ *  distM 은 노선 밖(접근/이탈) 판별에 사용 — 밖에서는 chain 이 끝점에 클램프됨. */
+function projectChainageDist(lat: number, lon: number, line: StationLine): { chain: number; distM: number } {
   const px = lon * line.k;
   const py = lat * 111000;
   const pts = line.pts;
@@ -70,7 +73,11 @@ function projectChainage(lat: number, lon: number, line: StationLine): number {
       bestKm = a.km + (b.km - a.km) * t;
     }
   }
-  return bestKm;
+  return { chain: bestKm, distM: isFinite(bestD) ? Math.sqrt(bestD) : Infinity };
+}
+
+function projectChainage(lat: number, lon: number, line: StationLine): number {
+  return projectChainageDist(lat, lon, line).chain;
 }
 
 /** 데이터 기반 트랙 구간: km 증가(dir 1, 주황) / 감소(dir -1, 하늘색). px는 시간축. */
@@ -232,32 +239,79 @@ export function StationBar({
 
   useEffect(() => {
     const frames = storeFrames;
-    if (!frames.length || !stations.length || !stationLine) { setReady(false); return; }
+    if (!frames.length || !stations.length || !stationLine) {
+      // 측점 없는 데이터셋(예: 제주 DJI 로그) 폴백 — 측점 기반 기능(배지/구간색/마크)은
+      // ready=false 로 비활성이지만, 이동거리축(chainRef)은 드론 GPS 누적 이동거리로 구성한다.
+      // → 커서 진행도가 시간 선형이 아닌 실제 이동량을 따라가 호버(정지) 시 커서도 멈춘다.
+      setReady(false);
+      viewedRef.current = [];
+      if (!frames.length) { chainRef.current = null; return; }
+      const n = frames.length;
+      const W = 8; // 평활 반폭(프레임) — GPS 지터가 이동거리로 누적되는 것 방지(측점 경로와 동일 정책)
+      const preLat = new Float64Array(n + 1);
+      const preLon = new Float64Array(n + 1);
+      for (let i = 0; i < n; i++) {
+        preLat[i + 1] = preLat[i] + frames[i].lat;
+        preLon[i + 1] = preLon[i] + frames[i].lon;
+      }
+      const cosLat = Math.cos((frames[0].lat * Math.PI) / 180);
+      const time = new Float64Array(n);
+      const frac = new Float64Array(n);
+      let cum = 0, pLat = 0, pLon = 0;
+      for (let i = 0; i < n; i++) {
+        const lo = Math.max(0, i - W), hi = Math.min(n, i + W + 1);
+        const la = (preLat[hi] - preLat[lo]) / (hi - lo);
+        const ln = (preLon[hi] - preLon[lo]) / (hi - lo);
+        if (i > 0) cum += Math.hypot((la - pLat) * 111000, (ln - pLon) * 111000 * cosLat);
+        pLat = la; pLon = ln;
+        time[i] = frames[i].frame / videoFps;
+        frac[i] = cum;
+      }
+      const total = cum > 0 ? cum : 1;
+      for (let i = 0; i < n; i++) frac[i] /= total;
+      // depChain/arrChain 은 방향색(측점 기반) 전용 — 폴백에선 의미 없음(단조 증가 가정값).
+      chainRef.current = { time, frac, depChain: 0, arrChain: 1 };
+      return;
+    }
     const n = frames.length;
     const out: ViewedPoint[] = new Array(n);
     for (let i = 0; i < n; i++) {
       const f = frames[i];
+      const pj = projectChainageDist(f.lat, f.lon, stationLine);
       out[i] = {
         frameNum: f.frame,
         km: nearestStationKm(f, stations),
-        chain: projectChainage(f.lat, f.lon, stationLine),
+        chain: pj.chain,
+        offM: pj.distM,
         time: f.frame / videoFps,
       };
     }
-    // 이동거리 축: 평활 측점값(±W 이동평균)의 프레임간 |Δ| 누적 = 실제 이동량 → 전체로 정규화(frac).
+    // 이동거리 축(frac): 체이니지 |Δ| 가 아니라 GPS 실이동거리 누적(±W 이동평균 평활).
-    //   호버(이동 無)면 frac 정체 → 커서 정지. 이동하면(전진/후진 무관) frac 증가 → 커서 항상 우측.
+    //   체이니지 투영은 노선 밖(접근/이탈 구간)에서 폴리라인 끝점(0k000 등)에 클램프되어
-    //   depChain/arrChain(앞·뒤 5% 평균)은 방향색 기준.
+    //   드론이 움직여도 커서가 멈추는 문제가 있었음(제주 — 비행 시작점이 노선 밖 700m).
+    //   GPS 누적거리는 호버 시 정체(커서 정지) + 노선 안팎 무관하게 실제 이동을 따라간다.
+    //   depChain/arrChain(앞·뒤 5% 평균, 체이니지 기준)은 방향색 판정에만 사용.
     const W = 8; // 평활 반폭(프레임)
     const pre = new Float64Array(n + 1);
-    for (let i = 0; i < n; i++) pre[i + 1] = pre[i] + out[i].chain;
+    const preLat = new Float64Array(n + 1);
+    const preLon = new Float64Array(n + 1);
+    for (let i = 0; i < n; i++) {
+      pre[i + 1] = pre[i] + out[i].chain;
+      preLat[i + 1] = preLat[i] + frames[i].lat;
+      preLon[i + 1] = preLon[i] + frames[i].lon;
+    }
+    const cosLat = Math.cos((frames[0].lat * Math.PI) / 180);
     const time = new Float64Array(n);
     const sm = new Float64Array(n);
     const frac = new Float64Array(n);
-    let cum = 0;
+    let cum = 0, pLat = 0, pLon = 0;
     for (let i = 0; i < n; i++) {
       const lo = Math.max(0, i - W), hi = Math.min(n, i + W + 1);
       sm[i] = (pre[hi] - pre[lo]) / (hi - lo);
-      if (i > 0) cum += Math.abs(sm[i] - sm[i - 1]);
+      const la = (preLat[hi] - preLat[lo]) / (hi - lo);
+      const ln = (preLon[hi] - preLon[lo]) / (hi - lo);
+      if (i > 0) cum += Math.hypot((la - pLat) * 111000, (ln - pLon) * 111000 * cosLat);
+      pLat = la; pLon = ln;
       time[i] = out[i].time;
       frac[i] = cum;
     }
@@ -297,6 +351,13 @@ export function StationBar({
     return idx >= 0 ? viewedRef.current[idx].chain : null;
   }, [currentTime, ready, viewedIdxAtTime]);
 
+  // 현재 드론의 노선(측점 폴리라인) 이탈 거리(m) — 접근/이탈 구간 배지 표기용.
+  const realOffM = useMemo<number | null>(() => {
+    if (!ready) return null;
+    const idx = viewedIdxAtTime(currentTime);
+    return idx >= 0 ? viewedRef.current[idx].offM : null;
+  }, [currentTime, ready, viewedIdxAtTime]);
+
   // 종점역 '미도착' 폭(px) — 영상이 종점역 도착 전 끝날 때, 트랙 우측에 이만큼 비워둔다.
   // 영상 타임라인은 [START … END−endGapPx] 에만 매핑되고, 종점역 마커는 END(미도착)에 둔다.
   // 폭 = 미도착거리(m) / 노선길이(m) × 트랙폭 (옵션 2: 실제 비례). 안전상 15%로 상한.
@@ -335,11 +396,12 @@ export function StationBar({
     return null;
   }, [routeMeta, directionChanges, duration]);
 
-  // 진행도(이동거리축): 시간 t → 누적 이동거리 비율(frac, 0~1). chainRef 미준비 시 시간선형 폴백.
+  // 진행도(이동거리축): 시간 t → 누적 이동거리 비율(frac, 0~1). chainRef 미구성 시 시간선형 폴백.
+  // chainRef 는 측점 유무와 무관하게 드론 프레임만 있으면 구성된다(위 폴백) → ready 비의존.
   const cumFracAtTime = useCallback(
     (t: number): number => {
       const c = chainRef.current;
-      if (!c || !ready || duration <= 0)
+      if (!c || duration <= 0)
         return duration > 0 ? clamp(t / duration, 0, 1) : 0;
       const { time, frac } = c;
       const n = time.length;
@@ -355,10 +417,11 @@ export function StationBar({
     [ready, duration],
   );
   // 역변환(이동거리 비율 → 시간): 바 클릭 seek 용. frac 단조 비감소 → 이진 탐색.
+  // cumFracAtTime 과 동일하게 ready 비의존(측점 없는 폴백 chainRef 도 사용).
   const timeAtFrac = useCallback(
     (f: number): number => {
       const c = chainRef.current;
-      if (!c || !ready || duration <= 0) return clamp(f, 0, 1) * duration;
+      if (!c || duration <= 0) return clamp(f, 0, 1) * duration;
       const { time, frac } = c;
       const n = frac.length;
       if (n === 0) return 0;
@@ -387,8 +450,15 @@ export function StationBar({
   const cursorPx = progressPx;
 
   // 커서 배지 = 폴더 데이터 기반 연속 체이니지(realChain)를 10m 단위로 표시. 데이터 없으면 빈 문자열.
+  // 드론이 노선(측점 폴리라인)에서 OFF_ROUTE_M 이상 벗어난 구간(접근/이탈)은 체이니지가
+  // 끝점에 클램프되어 무의미 → "노선밖 ○○m" 로 표기해 측점이 안 변하는 이유를 드러낸다.
+  const OFF_ROUTE_M = 60;
   const cursorText =
-    realChain !== null && realChain >= 0 ? formatMileage10(realChain) : '';
+    realChain !== null && realChain >= 0
+      ? (realOffM !== null && realOffM > OFF_ROUTE_M
+          ? `노선밖 ${Math.round(realOffM)}m`
+          : formatMileage10(realChain))
+      : '';
 
   // viewedRef(프레임→측점 km) 추이로 구간 색·전환점 산출.
   // km 증가 구간 = dir 1(주황), 감소 구간 = dir -1(하늘색). HYST로 최근접 지터 무시.
@@ -498,6 +568,13 @@ export function StationBar({
         if (d < gmin) gmin = d;
       }
       if (!isFinite(gmin)) return [];
+      // 이 영상(세그먼트)에서 실제로 근접 통과하지 않은 구조물은 마크 생략.
+      // 종전엔 TH 가 최근접거리에 비례해 늘어나(gmin×3) 수 km 밖 구조물도 최근접
+      // 프레임(세그먼트 끝)에 마크가 찍혀, 실제 통과 구조물과 겹쳐 보였음
+      // (제주: 세그1 끝 귀덕천교 위에 금성천교·어음천교가 겹침 — 이들은 세그3 통과분).
+      // 해당 구조물은 통과하는 세그먼트의 바에서 정상 표시된다.
+      const PASS_MAX_M = 300;
+      if (gmin > PASS_MAX_M) return [];
       const TH = Math.max(100, gmin * 3); // 통과 인정 거리(m)
       // 통과 프레임에서 진행방향으로 offsetM 만큼 이동(GPS 누적거리 기준).
       const shift = (idx: number): number => {

client/src/stationbar/components/TimelineCursor/TimelineCursor.module.scss

@@ -41,9 +41,11 @@
   align-items: center;
   justify-content: center;
   color: #fff;
-  font-size: 20px;
+  /* "노선밖 737m" 같은 긴 표기도 한 줄 유지 — 글자 축소 + 줄바꿈 금지(폭은 내용에 맞게 늘어남) */
+  font-size: 17px;
   font-weight: 700;
   letter-spacing: 0.4px;
+  white-space: nowrap;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.35),
     0 2px 6px rgba(0, 0, 0, 0.45);

client/src/store/geoStore.ts

@@ -23,8 +23,9 @@ import type {
   DirectionChange,
   PoiOverride,
   PoiOverrideMap,
+  DetectedCameraInfo,
 } from '../types/geo';
-import { loadFolderGeoData, applyPoiOverrides } from '../utils/geoData';
+import { loadFolderGeoData, applyPoiOverrides, parseDroneFrames } from '../utils/geoData';
 
 interface GeoStore {
   loaded: boolean;
@@ -43,12 +44,30 @@ interface GeoStore {
   directionChanges: DirectionChange[];
   /** 마지막 폴더 로드에서 KMZ(POI·구조물 원본)가 누락됐는지. true면 재구축 필요. */
   kmzMissing: boolean;
+  /** 폴더 내 영상 파일 전체(이름 오름차순) — 분할본 연속재생용. */
+  videoFiles: File[];
+  /** videoFiles 각 영상 길이(초). 측정 실패 시 null. */
+  videoDurations: (number | null)[];
+  /** 현재 재생 중인 세그먼트 인덱스 (videoFiles 기준). */
+  videoIndex: number;
+  /** 폴더 원본 파일 전체 — 세그먼트 전환 시 드론 CSV 재파싱용. */
+  folderFiles: File[];
+  /** 영상 djmd 트랙에서 감지한 카메라 정보 (예: ZenmuseP1, 초점거리). */
+  cameraInfo: DetectedCameraInfo | null;
+  /** 폴더의 `<영상 base>.camera.json` 카메라 파라미터 — 감지값/저장값보다 최우선 적용. */
+  cameraJson: Record<string, number> | null;
 
   /**
    * 폴더 선택 파일에서 지리정보를 파싱해 스토어에 적재한다.
    * 발견한 영상 File 을 반환(없으면 null) — 호출자가 loadLocalFile 로 재생.
    */
   loadFromFolder: (files: FileList | File[]) => Promise<File | null>;
+  /**
+   * 분할 영상 세그먼트 전환 — 드론 로그(시간 기반)를 해당 영상 구간(누적 오프셋)으로
+   * 재정렬해 frames 를 교체한다. 재생할 영상 File 을 반환(범위 밖이면 null).
+   * baseName 은 폴더(첫 영상) 기준을 유지한다 — 카메라 보정 localStorage 연속성.
+   */
+  loadSegment: (index: number) => Promise<File | null>;
   /** 단일 POI 보정 설정/갱신 (드래그 종료 시). title 키. */
   setPoiOverride: (title: string, ov: PoiOverride) => void;
   /** 단일 POI 보정 해제. */
@@ -72,9 +91,15 @@ const EMPTY = {
   structures: [] as RouteStructure[],
   directionChanges: [] as DirectionChange[],
   kmzMissing: false,
+  videoFiles: [] as File[],
+  videoDurations: [] as (number | null)[],
+  videoIndex: 0,
+  folderFiles: [] as File[],
+  cameraInfo: null as DetectedCameraInfo | null,
+  cameraJson: null as Record<string, number> | null,
 };
 
-export const useGeoStore = create<GeoStore>((set) => ({
+export const useGeoStore = create<GeoStore>((set, get) => ({
   ...EMPTY,
 
   loadFromFolder: async (files) => {
@@ -93,10 +118,47 @@ export const useGeoStore = create<GeoStore>((set) => ({
       structures: data.structures,
       directionChanges: data.directionChanges,
       kmzMissing: data.kmzMissing,
+      videoFiles: data.videoFiles,
+      videoDurations: data.videoDurations,
+      videoIndex: 0,
+      folderFiles: data.folderFiles,
+      cameraInfo: data.cameraInfo,
+      cameraJson: data.cameraJson,
     });
     return data.videoFile;
   },
 
+  loadSegment: async (index) => {
+    const s = get();
+    const file = s.videoFiles[index];
+    if (!file) return null;
+
+    // 누적 오프셋 = 앞 세그먼트 길이 합. 하나라도 측정 실패면 정렬 불가 → 궤적만 비운다(재생은 계속).
+    let offsetSec = 0;
+    let offsetKnown = true;
+    for (let i = 0; i < index; i++) {
+      const d = s.videoDurations[i];
+      if (d == null) { offsetKnown = false; break; }
+      offsetSec += d;
+    }
+
+    if (!offsetKnown) {
+      console.warn(`[geo] 세그먼트 ${index + 1} 오프셋 계산 불가(영상 길이 측정 실패) — 드론 궤적 미표시`);
+      set({ frames: [], videoIndex: index });
+      return file;
+    }
+
+    const frames = await parseDroneFrames(s.folderFiles, s.baseName, {
+      offsetSec,
+      durationSec: s.videoDurations[index],
+    });
+    console.log(
+      `[geo] 세그먼트 ${index + 1}/${s.videoFiles.length} 전환 — 로그 ${offsetSec.toFixed(1)}s~ 정렬, ${frames.length}행`,
+    );
+    set({ frames, videoIndex: index });
+    return file;
+  },
+
   setPoiOverride: (title, ov) =>
     set((s) => {
       const poiOverrides = { ...s.poiOverrides, [title]: ov };

client/src/types/geo.ts

@@ -32,6 +32,8 @@ export interface GeoPoint {
   type: 'poi' | 'station';
   /** 원본 CSV 속성(라벨 클릭 팝업에 표시). 순서 보존 위해 배열. */
   props?: { k: string; v: string }[];
+  /** 라벨 표시 색(CSS). KML 텍스트박스_색상/IconStyle 유래. 없으면 기본색. */
+  labelColor?: string;
 }
 
 /** 의미상 별칭 (POI = GeoPoint, Station = GeoPoint with type==='station') */
@@ -152,6 +154,17 @@ export interface RouteMeta {
   structures?: RouteStructure[];
 }
 
+/** 영상 파일(djmd 트랙)에서 자동 감지한 드론 카메라 정보 */
+export interface DetectedCameraInfo {
+  /** 카메라 모델 (예: "DJI ZenmuseP1") */
+  model: string;
+  /** 35mm 환산 초점거리(mm) — djmd 필드 8.6(0.1mm 단위) 유래 */
+  focalLen35?: number;
+  width?: number;
+  height?: number;
+  fps?: number;
+}
+
 /** loadFolderGeoData 파싱 결과 (v2.0 데이터 형상) */
 export interface FolderGeoData {
   videoFile: File | null;
@@ -170,4 +183,14 @@ export interface FolderGeoData {
   poiOverrides: PoiOverrideMap;
   /** KMZ(POI·구조물 원본)가 없거나 비어 있음 → 데이터 누락(재구축 필요). 측점·드론은 별개. */
   kmzMissing: boolean;
+  /** 폴더 내 영상 파일 전체(이름 오름차순) — 분할본 연속재생용. videoFile === videoFiles[0]. */
+  videoFiles: File[];
+  /** videoFiles 와 짝을 이루는 각 영상 길이(초). 메타데이터 측정 실패 시 null. */
+  videoDurations: (number | null)[];
+  /** 폴더 원본 파일 전체 — 세그먼트 전환 시 드론 CSV 재파싱용. */
+  folderFiles: File[];
+  /** 영상 djmd 트랙에서 감지한 카메라 정보 (DJI 아닌 영상이면 null). */
+  cameraInfo: DetectedCameraInfo | null;
+  /** 폴더의 `<영상 base>.camera.json` 카메라 파라미터 (없으면 null). 최우선 적용. */
+  cameraJson: Record<string, number> | null;
 }

client/src/utils/cameraMeta.ts

@@ -0,0 +1,108 @@
+/**
+ * DJI 영상 카메라 메타데이터 자동 감지
+ *
+ * DJI 드론 MP4 에는 'djmd' 데이터 트랙(프레임별 protobuf 텔레메트리)이 mdat 에
+ * 비디오 프레임과 인터리브되어 있다. 파일 앞부분(8MB)에서 첫 djmd 샘플을 찾아 추출:
+ *   - 카메라 모델 문자열 (필드 1.1.2, 예: "DJI ZenmuseP1")
+ *   - 렌즈 초점거리 (필드 8.6, 0.1mm 단위 35mm 환산)
+ *   - 해상도/fps (필드 1.7/1.6/1.8)
+ *
+ * 실측 검증(2026-07-09, 제주 데이터): DJI_20260629121835_0002.MP4 →
+ *   model "DJI ZenmuseP1", 8.6=299(=29.9mm — DL 24mm 렌즈 × 4K 비디오 크롭 ≈1.25),
+ *   3840×2160, 59.94fps. (djmd 필드 6.4/6.5 는 위경도 라디안, 6.6 은 타원체고 mm)
+ */
+
+import type { DetectedCameraInfo } from '../types/geo';
+
+const HEAD_BYTES = 8 * 1024 * 1024;
+
+function readVarint(b: Uint8Array, i: number): [number, number] | null {
+  let v = 0, s = 0;
+  while (i < b.length && (b[i] & 0x80)) {
+    v += (b[i] & 0x7f) * 2 ** s;
+    s += 7; i++;
+    if (s > 42) return null;
+  }
+  if (i >= b.length) return null;
+  v += (b[i] & 0x7f) * 2 ** s;
+  return [v, i + 1];
+}
+
+/** [start,end) 구간을 protobuf 필드로 파싱해 경로("8.6")→값 수집. 깨진 구간은 조용히 중단. */
+function parseFields(
+  b: Uint8Array, dv: DataView,
+  start: number, end: number,
+  prefix: string, out: Map<string, number>,
+): void {
+  let i = start;
+  while (i < end) {
+    const kv = readVarint(b, i);
+    if (!kv) return;
+    const [key, ni] = kv;
+    i = ni;
+    const tag = key >> 3, wire = key & 7;
+    if (tag === 0 || tag > 60) return;
+    const path = prefix + tag;
+    if (wire === 0) {
+      const r = readVarint(b, i); if (!r) return;
+      out.set(path, r[0]); i = r[1];
+    } else if (wire === 5) {
+      if (i + 4 > end) return;
+      out.set(path, dv.getFloat32(i, true)); i += 4;
+    } else if (wire === 1) {
+      if (i + 8 > end) return;
+      out.set(path, dv.getFloat64(i, true)); i += 8;
+    } else if (wire === 2) {
+      const r = readVarint(b, i); if (!r) return;
+      const [len, p] = r;
+      if (p + len > end) return;
+      // 하위 메시지 시도 — 문자열/바이너리면 내부에서 알아서 중단됨(경로 prefix 로 충돌 없음)
+      parseFields(b, dv, p, p + len, path + '.', out);
+      i = p + len;
+    } else return;
+  }
+}
+
+/** 영상 File 앞부분에서 DJI djmd 카메라 정보를 감지한다. DJI 영상이 아니면 null. */
+export async function detectCameraInfo(file: File): Promise<DetectedCameraInfo | null> {
+  try {
+    const buf = new Uint8Array(await file.slice(0, HEAD_BYTES).arrayBuffer());
+    const dv = new DataView(buf.buffer, buf.byteOffset, buf.byteLength);
+
+    // 모델 문자열: 0x12 <len> "DJI ..." (필드 1.1.2)
+    let m = -1;
+    for (let i = 2; i < buf.length - 4; i++) {
+      if (buf[i] === 0x44 && buf[i + 1] === 0x4a && buf[i + 2] === 0x49 && buf[i + 3] === 0x20 &&
+          buf[i - 2] === 0x12 && buf[i - 1] >= 4 && buf[i - 1] <= 40) { m = i; break; }
+    }
+    if (m < 0) return null;
+    const model = new TextDecoder().decode(buf.slice(m, m + buf[m - 1]));
+
+    // 샘플 시작(최상위 필드1, 0x0a <varint len> 0x0a ...)을 모델 문자열에서 역방향 탐색
+    let sampleStart = -1;
+    for (let back = 4; back <= 16; back++) {
+      const i = m - 2 - back;
+      if (i < 0) break;
+      if (buf[i] !== 0x0a) continue;
+      const r = readVarint(buf, i + 1);
+      if (!r) continue;
+      const [len, p] = r;
+      if (buf[p] === 0x0a && p < m && p + len > m && p + len <= buf.length) { sampleStart = i; break; }
+    }
+    if (sampleStart < 0) return { model };
+
+    const out = new Map<string, number>();
+    parseFields(buf, dv, sampleStart, Math.min(buf.length, sampleStart + 512), '', out);
+
+    const info: DetectedCameraInfo = { model };
+    const focal10 = out.get('8.6');
+    if (focal10 !== undefined && focal10 > 80 && focal10 < 3000) info.focalLen35 = focal10 / 10; // 8~300mm 만 신뢰
+    const w = out.get('1.7'), h = out.get('1.6'), fps = out.get('1.8');
+    if (w && w > 100) info.width = w;
+    if (h && h > 100) info.height = h;
+    if (typeof fps === 'number' && fps > 1 && fps < 1000) info.fps = Math.round(fps * 100) / 100;
+    return info;
+  } catch {
+    return null;
+  }
+}

client/src/utils/geoData.ts

@@ -33,6 +33,7 @@ import type {
   PoiOverrideMap,
 } from '../types/geo';
 import { stationOrder, getWorldOrigin } from './geoSearch';
+import { detectCameraInfo } from './cameraMeta';
 import { unzipSync, strFromU8 } from 'fflate';
 
 // ── CSV 파싱 헬퍼 ─────────────────────────────────────────────────────
@@ -120,11 +121,33 @@ function findBuildingFile(files: File[], keyword: string): File | null {
 
 const VIDEO_EXT = /\.(mp4|webm)$/i;
 
-/** 영상 파일 찾기 (mp4/webm, building 제외). */
+/** 폴더 내 모든 영상 파일 (이름순 정렬 — DJI 분할본 _0002, _0003… 순서 보장). */
+export function findVideoFiles(files: File[]): File[] {
+  return files
+    .filter((f) => !isInBuilding(f) && VIDEO_EXT.test(baseNameOf(relPath(f))))
+    .sort((a, b) => baseNameOf(relPath(a)).localeCompare(baseNameOf(relPath(b))));
+}
+
+/** 영상 파일 찾기 (mp4/webm, building 제외). 여러 개면 이름순 첫 번째. */
 export function findVideoFile(files: File[]): File | null {
-  return (
+  return findVideoFiles(files)[0] ?? null;
-    files.find((f) => !isInBuilding(f) && VIDEO_EXT.test(baseNameOf(relPath(f)))) ?? null
+}
-  );
+
+/** 영상 File 의 재생 길이(초) — 메타데이터만 읽는다(전체 로드 없음). 실패 시 null. */
+export function probeVideoDuration(file: File): Promise<number | null> {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const v = document.createElement('video');
+    v.preload = 'metadata';
+    const done = (d: number | null): void => {
+      URL.revokeObjectURL(url);
+      v.removeAttribute('src');
+      resolve(d);
+    };
+    v.onloadedmetadata = () => done(isFinite(v.duration) ? v.duration : null);
+    v.onerror = () => done(null);
+    v.src = url;
+  });
 }
 
 /** 영상 파일명에서 base(확장자 제거) 추출. */
@@ -133,17 +156,44 @@ export function deriveBaseName(videoFile: File | null): string | null {
   return baseNameOf(relPath(videoFile)).replace(VIDEO_EXT, '');
 }
 
-// ── 파서: 드론 프레임 (변경 없음) ─────────────────────────────────────
+// ── 파서: 드론 프레임 ─────────────────────────────────────────────────
 
 /**
- * 드론 프레임 CSV 파싱 (UTF-8 BOM, 헤더 이름 인덱스).
+ * DJI 비행로그(시간 기반) → 프레임 환산용 가상 fps.
- * 헤더: frame_cnt,latitude,longitude,altitude,yaw,pitch,roll,focal_len
+ * frame = 영상 상대시간(초) × 이 값. 소비측(effectiveFps = maxFrame ÷ 영상길이)이
+ * 같은 값을 역산해 시간으로 되돌리므로 상수 자체는 임의여도 정합이 유지된다.
+ * 59.94 는 이 데이터셋(DJI 4K60) 실제 fps 와 일치시켜 HUD 표기도 자연스럽게 한 것.
+ */
+const DJI_VIRTUAL_FPS = 59.94;
+
+/** 영상 세그먼트 창 — DJI 시간 기반 로그를 특정 영상 구간에 정렬할 때 사용. */
+export interface SegmentWindow {
+  /** 전체 녹화 기준 이 영상의 시작 오프셋(초). 첫 세그먼트는 0. */
+  offsetSec: number;
+  /** 이 영상의 길이(초). 미상(null)이면 클리핑 없이 전체 로그를 쓴다. */
+  durationSec: number | null;
+}
+
+/**
+ * 드론 프레임 CSV 파싱 (UTF-8 BOM, 헤더 이름 인덱스). 두 형식 지원:
+ *
+ * ① 프레임 기반(회덕 v2.0): frame_cnt,latitude,longitude,altitude,yaw,pitch,roll,focal_len
+ * ② 시간 기반(DJI 비행로그, 제주): time(millisecond),latitude,longitude,…,
+ *    altitude_above_seaLevel/compass_heading/gimbal_heading(degrees) 등.
+ *    - 첫 행 time = 녹화 시작으로 보고(로그 폭 ≈ 분할영상 총길이 검증됨),
+ *      frame = ((time−t0)/1000 − offsetSec) × DJI_VIRTUAL_FPS 로 환산.
+ *    - 자세는 카메라 방향인 gimbal_* 우선, 없으면 기체 compass/pitch/roll 폴백.
+ *    - focal_len 이 없어 35mm 환산 24mm(DJI 광각 기본)로 둔다 → 카메라 파라미터 UI로 보정.
+ *    - segmentWindow.durationSec 가 있으면 해당 영상 구간 밖 행을 버린다
+ *      (분할 영상에서 effectiveFps 자기보정이 성립하려면 필수).
+ *
  * 루트(building 제외)의 <base>.csv 를 식별한다. base 가 없으면 루트 .csv 중
  * POI 가 아닌 첫 파일을 사용한다(영상명 비의존 폴백).
  */
 export async function parseDroneFrames(
   files: File[],
   baseName: string | null,
+  segmentWindow: SegmentWindow | null = null,
 ): Promise<DroneFrame[]> {
   const rootCsv = files.filter((f) => {
     if (isInBuilding(f)) return false;
@@ -164,6 +214,51 @@ export async function parseDroneFrames(
 
   const fi = makeFieldIndexer(rows[0]);
 
+  // ② 시간 기반(DJI 비행로그) — time(millisecond) 헤더로 감지.
+  const iTime = fi('time(millisecond)');
+  if (iTime >= 0) {
+    const iLat = fi('latitude');
+    const iLon = fi('longitude');
+    const iAlt = fi('altitude_above_seaLevel(meter)');
+    const iYaw = fi('gimbal_heading(degrees)') >= 0 ? fi('gimbal_heading(degrees)') : fi('compass_heading(degrees)');
+    const iPitch = fi('gimbal_pitch(degrees)') >= 0 ? fi('gimbal_pitch(degrees)') : fi('pitch(degrees)');
+    const iRoll = fi('gimbal_roll(degrees)') >= 0 ? fi('gimbal_roll(degrees)') : fi('roll(degrees)');
+
+    const raw = rows
+      .slice(1)
+      .map((r) => ({
+        timeMs: parseFloat(cell(r, iTime)),
+        lat: parseFloat(cell(r, iLat)),
+        lon: parseFloat(cell(r, iLon)),
+        altitude: parseFloat(cell(r, iAlt)),
+        yaw: parseFloat(cell(r, iYaw)),
+        pitch: parseFloat(cell(r, iPitch)),
+        roll: parseFloat(cell(r, iRoll)) || 0,
+        focalLen: 24,
+      }))
+      .filter((f) => !isNaN(f.lat) && !isNaN(f.timeMs));
+    if (!raw.length) return [];
+
+    const t0 = raw[0].timeMs;
+    const offsetSec = segmentWindow?.offsetSec ?? 0;
+    const durationSec = segmentWindow?.durationSec ?? null;
+    const maxFrame = durationSec != null ? durationSec * DJI_VIRTUAL_FPS : Infinity;
+
+    const frames = raw
+      .map(({ timeMs, ...rest }) => ({
+        ...rest,
+        frame: Math.round(((timeMs - t0) / 1000 - offsetSec) * DJI_VIRTUAL_FPS),
+      }))
+      .filter((f) => f.frame >= 0 && f.frame <= maxFrame);
+
+    console.log(
+      `[geo] DJI 시간기반 로그: ${raw.length}행 중 ${frames.length}행 사용 ` +
+      `(구간 ${offsetSec.toFixed(1)}s~${durationSec != null ? (offsetSec + durationSec).toFixed(1) : '끝'}s, 가상fps ${DJI_VIRTUAL_FPS})`,
+    );
+    return frames;
+  }
+
+  // ① 프레임 기반(회덕 v2.0)
   return rows
     .slice(1)
     .map((r) => ({
@@ -290,48 +385,91 @@ function childLocal(el: Element, local: string): Element | null {
   return null;
 }
 
-/** KMZ/KML 파싱 — 있으면 { pois, structures }, 없거나 실패 시 null.
+/** 한국어 색상명 → CSS 색 (KML 텍스트박스_색상 속성). 어두운 색은 렌더 시 밝은 외곽선 처리. */
- *  bare .kml(구글 직접 다운로드) 우선, 없으면 .kmz(zip) 해제. */
+const KOR_LABEL_COLORS: Record<string, string> = {
+  검정: '#1f2937', 흰색: '#ffffff', 회색: '#9ca3af',
+  빨강: '#ef4444', 주황: '#fb923c', 노랑: '#facc15',
+  연두: '#a3e635', 초록: '#22c55e', 하늘: '#38bdf8',
+  파랑: '#3b82f6', 남색: '#3730a3', 보라: '#a855f7', 분홍: '#f472b6',
+};
+
+function koreanColorToCss(v?: string): string | undefined {
+  if (!v) return undefined;
+  const key = v.trim();
+  if (KOR_LABEL_COLORS[key]) return KOR_LABEL_COLORS[key];
+  for (const k in KOR_LABEL_COLORS) if (key.includes(k)) return KOR_LABEL_COLORS[k];
+  return undefined;
+}
+
+/** Placemark 인라인 IconStyle 색 — KML aabbggrr → CSS #rrggbb. */
+function inlineIconColor(pm: Element): string | undefined {
+  const icon = pm.getElementsByTagName('IconStyle')[0];
+  const c = icon?.getElementsByTagName('color')[0]?.textContent?.trim();
+  if (!c || !/^[0-9a-fA-F]{8}$/.test(c)) return undefined;
+  const bb = c.slice(2, 4), gg = c.slice(4, 6), rr = c.slice(6, 8);
+  return `#${rr}${gg}${bb}`.toLowerCase();
+}
+
+/** KMZ/KML 파싱 — 있으면 { pois, structures, stations }, 없거나 실패 시 null.
+ *  bare .kml(구글 직접 다운로드) 우선, 없으면 .kmz(zip) 해제.
+ *
+ *  속성 소스 2종을 모두 props 로 수집한다:
+ *   - description CDATA HTML 표 (구글어스/지오코딩 산출물 — 회덕 v2.0)
+ *   - ExtendedData/SchemaData/SimpleData (CAD·GIS 내보내기 — 제주 도로 KML)
+ *
+ *  측점(STA): 이름이 도로 체이니지(`6+998`) 형식이거나 STA 속성이 있는 Point 는
+ *  POI 가 아니라 측점(type='station')으로 수집한다. km 속성(단위 km) 우선, 없으면
+ *  이름에서 미터값을 파싱해 기존 철도식 제목(`6k998`)으로 변환 — stationOrder/stationKm
+ *  등 측점 파이프라인(스테이션바·노선패널·검색)과 그대로 호환된다. */
 export async function parseKmz(
   files: File[],
-): Promise<{ pois: GeoPoint[]; structures: RouteStructure[] } | null> {
+): Promise<{ pois: GeoPoint[]; structures: RouteStructure[]; stations: GeoPoint[] } | null> {
-  const kmlFile = files.find(
+  // 폴더 내 모든 KML/KMZ 를 파싱해 병합한다 (예: 제주 — 측점 KML + 지장물 KML 별도 파일).
+  const kmlFiles = files.filter(
     (f) => !isInBuilding(f) && /\.kml$/i.test(baseNameOf(relPath(f))),
   );
-  const kmzFile = files.find(
+  const kmzFiles = files.filter(
     (f) => !isInBuilding(f) && /\.kmz$/i.test(baseNameOf(relPath(f))),
   );
-  if (!kmlFile && !kmzFile) return null;
+  if (!kmlFiles.length && !kmzFiles.length) return null;
 
-  let kmlText: string;
+  const kmlTexts: string[] = [];
+  for (const kf of kmlFiles) {
     try {
-    if (kmlFile) {
+      kmlTexts.push(await kf.text());   // 구글 KML 은 UTF-8
-      kmlText = await kmlFile.text();   // 구글 KML 은 UTF-8
+    } catch (e) {
-    } else {
+      console.warn(`[KML] 읽기 실패: ${baseNameOf(relPath(kf))}`, e);
-      const buf = new Uint8Array(await kmzFile!.arrayBuffer());
+    }
+  }
+  for (const kf of kmzFiles) {
+    try {
+      const buf = new Uint8Array(await kf.arrayBuffer());
       const entries = unzipSync(buf);
       const kmlName =
         Object.keys(entries).find((n) => /(^|\/)doc\.kml$/i.test(n)) ??
         Object.keys(entries).find((n) => /\.kml$/i.test(n));
-      if (!kmlName || !entries[kmlName]) return null;
+      if (kmlName && entries[kmlName]) kmlTexts.push(strFromU8(entries[kmlName]));
-      kmlText = strFromU8(entries[kmlName]);
-    }
     } catch (e) {
-    console.warn('[KMZ/KML] 읽기 실패 → CSV 폴백', e);
+      console.warn(`[KMZ] 읽기 실패: ${baseNameOf(relPath(kf))}`, e);
-    return null;
     }
-
+  }
-  const doc = new DOMParser().parseFromString(kmlText, 'application/xml');
+  if (!kmlTexts.length) return null;
-  if (doc.getElementsByTagName('parsererror').length) return null;
 
   const pois: GeoPoint[] = [];
   const structures: RouteStructure[] = [];
+  const stations: GeoPoint[] = [];
   let nStruct = 0;
 
   const handlePlacemark = (pm: Element, folder: string): void => {
     const name = childLocal(pm, 'name')?.textContent?.trim() ?? '';
     const desc = childLocal(pm, 'description')?.textContent ?? '';
     const props = parseKmlDescProps(desc);
+    // ExtendedData/SchemaData/SimpleData 속성 (CAD·GIS 내보내기) — HTML 표 props 와 통합.
+    for (const sd of Array.from(pm.getElementsByTagName('SimpleData'))) {
+      const k = sd.getAttribute('name') ?? '';
+      const v = sd.textContent?.trim() ?? '';
+      if (k) props.push({ k, v });
+    }
     const pget = (k: string): string | undefined => props.find((p) => p.k === k)?.v;
 
     // 좌표: <coordinates> lon,lat[,alt] 우선, 없으면 속성 lat/lon.
@@ -347,6 +485,32 @@ export async function parseKmz(
     }
     if (isNaN(lat) || isNaN(lon) || lat < 33 || lat > 39 || lon < 124 || lon > 132) return;
 
+    // 새 포맷: 구글어스 CSV 변환 지장물 KML — Schema(타입/타입상세/이름/연장/텍스트박스_색상/높이),
+    // 폴더 구분 없이 Placemark 직속. '타입' 키 존재로 감지한다(회덕 desc표/STA 스키마엔 없음).
+    // 좌표는 SimpleData X/Y(저정밀)가 아니라 Point coordinates(고정밀)를 쓴다(위에서 이미 추출).
+    if (pget('타입') !== undefined) {
+      const title = pget('이름') || name;
+      if (!title) return;
+      const category = pget('타입') || '지장물';
+      const lenM = parseFloat(pget('연장') ?? '');
+      // 라벨 색: 텍스트박스_색상(한국어명) 우선, 없으면 인라인 IconStyle 색.
+      const labelColor = koreanColorToCss(pget('텍스트박스_색상')) ?? inlineIconColor(pm);
+      // z: '높이'는 표고가 아니라 구조물 높이라 사용하지 않음(팝업 props 로만 노출).
+      // 지면표고 미상(0) → 오버레이 기본(드론고도−이격) 모드 및 중심선 z 폴백으로 표시.
+      pois.push({
+        title, category, lat, lon, z: 0, type: 'poi',
+        ...(labelColor ? { labelColor } : {}),
+        props,
+      });
+      // 교량/터널은 스테이션바·노선패널 마크용 구조물로도 등록.
+      if (category.includes('교량')) {
+        structures.push({ id: `교량-${nStruct++}`, type: 'bridge', category: '교량', name: title, lat, lon, ...(isFinite(lenM) ? { lengthM: lenM } : {}), props });
+      } else if (category.includes('터널')) {
+        structures.push({ id: `터널-${nStruct++}`, type: 'tunnel', category: '터널', name: title, lat, lon, ...(isFinite(lenM) ? { lengthM: lenM } : {}), props });
+      }
+      return;
+    }
+
     const lenNum = parseFloat(pget('연장(m)') ?? '');
     if (folder.includes('교량')) {
       structures.push({ id: `교량-${nStruct++}`, type: 'bridge', category: '교량', name: pget('구분') || name, lat, lon, ...(isNaN(lenNum) ? {} : { lengthM: lenNum }), ...(pget('시설종별') ? { grade: pget('시설종별') } : {}), props });
@@ -358,6 +522,21 @@ export async function parseKmz(
       const title = pget('출입문번호') || name;
       if (title) pois.push({ title, category: '출입문', lat, lon, z: parseFloat(pget('z') ?? pget('절대고도') ?? '0') || 0, type: 'poi', props });
     } else {
+      // 도로 체이니지 측점 (예: "0+100" 또는 STA 속성) → type='station' 으로 수집.
+      // km 속성(단위 km) 우선, 없으면 이름의 "k+m" 파싱. 제목은 철도식 NkNNN 으로 변환.
+      const staName = pget('STA') || name;
+      const staMatch = staName.match(/^(\d+)\+(\d+)$/);
+      if (staMatch || pget('STA') !== undefined) {
+        const kmProp = parseFloat(pget('km') ?? '');
+        const meters = isFinite(kmProp)
+          ? Math.round(kmProp * 1000)
+          : staMatch ? parseInt(staMatch[1], 10) * 1000 + parseInt(staMatch[2], 10) : NaN;
+        if (!isFinite(meters)) return;
+        const title = `${Math.floor(meters / 1000)}k${String(meters % 1000).padStart(3, '0')}`;
+        // z 미상(KML 고도 0) — 소비측(loadFolderGeoData)에서 드론 고도 기반으로 보정.
+        stations.push({ title, category: '측점', lat, lon, z: 0, type: 'station', props });
+        return;
+      }
       // 02)지장물 등 = 지오코딩 POI. 모든 POI 는 영상에 표출(철도역 포함).
       if (!name) return;
       const src = pget('source');
@@ -384,9 +563,52 @@ export async function parseKmz(
       }
     }
   };
+  for (const text of kmlTexts) {
+    const doc = new DOMParser().parseFromString(text, 'application/xml');
+    if (doc.getElementsByTagName('parsererror').length) {
+      console.warn('[KML] XML 파싱 실패 — 해당 파일 건너뜀');
+      continue;
+    }
     if (doc.documentElement) walk(doc.documentElement, '');
+  }
 
-  return { pois, structures };
+  return { pois, structures, stations };
+}
+
+// ── 카메라 파라미터 파일 (<base>.camera.json) ─────────────────────────
+
+/**
+ * 폴더에서 카메라 파라미터 파일을 읽는다. 서버 '카메라값 저장'(PUT /api/camera/:videoId)이
+ * 영상 옆에 만든 `<영상 base>.camera.json`(또는 `<영상 base>.json`) 형식:
+ *   { "camera": { focalLen, sensorW, sensorH, yawOffset, pitch, roll, offX, offY, offZ, geoidOffset, cx0, cy0 }, ... }
+ * 폴더 내 어떤 영상의 base 와도 매칭 허용(분할본 공용). 숫자 필드만 통과시킨다.
+ */
+export async function parseCameraJson(
+  files: File[],
+  videoFiles: File[],
+): Promise<Record<string, number> | null> {
+  const bases = videoFiles.map((v) => baseNameOf(relPath(v)).replace(VIDEO_EXT, '').toLowerCase());
+  const file = files.find((f) => {
+    if (isInBuilding(f)) return false;
+    const name = baseNameOf(relPath(f)).toLowerCase();
+    const m = name.match(/^(.+?)(\.camera)?\.json$/);
+    if (!m) return false;
+    if (/\.route\.json$|_poi_overrides\.json$/.test(name)) return false;
+    return bases.includes(m[1]);
+  });
+  if (!file) return null;
+  try {
+    const obj = JSON.parse(await file.text());
+    const cam = obj && typeof obj === 'object' ? (obj.camera ?? obj) : null;
+    if (!cam || typeof cam !== 'object') return null;
+    const out: Record<string, number> = {};
+    for (const [k, v] of Object.entries(cam)) {
+      if (typeof v === 'number' && isFinite(v)) out[k] = v;
+    }
+    return Object.keys(out).length ? out : null;
+  } catch {
+    return null;
+  }
 }
 
 // ── route.json 보정 ───────────────────────────────────────────────────
@@ -409,7 +631,9 @@ export async function parseRouteMeta(
   const file =
     (wantBase &&
       rootJson.find((f) => baseNameOf(relPath(f)).toLowerCase() === wantBase)) ||
-    rootJson.find((f) => baseNameOf(relPath(f)).toLowerCase() === 'route.json');
+    rootJson.find((f) => baseNameOf(relPath(f)).toLowerCase() === 'route.json') ||
+    // 임의 접두 `<이름>.route.json` 허용 (예: 제주 중산간도로 경로 1-1.route.json)
+    rootJson.find((f) => /\.route\.json$/i.test(baseNameOf(relPath(f))));
   if (!file) return null;
 
   try {
@@ -533,33 +757,80 @@ export async function loadFolderGeoData(
 ): Promise<FolderGeoData> {
   const files = Array.from(input);
 
-  const videoFile = findVideoFile(files);
+  const videoFiles = findVideoFiles(files);
+  const videoFile = videoFiles[0] ?? null;
   const baseName = deriveBaseName(videoFile);
 
-  const [frames, stationResult, routeMeta, poiOverrides, kmz] = await Promise.all([
+  // 각 영상 길이를 메타데이터로 측정 — DJI 시간 기반 로그의 세그먼트 정렬(누적 오프셋)과
-    parseDroneFrames(files, baseName),
+  // ended 연속재생(geoStore.loadSegment)에 쓴다. 분할본이 아니면 1개만 측정.
+  const videoDurations: (number | null)[] = [];
+  for (const vf of videoFiles) videoDurations.push(await probeVideoDuration(vf));
+
+  // 첫 세그먼트 창 — 로그는 전체 녹화(분할본 합)를 커버하므로 첫 영상 구간만 잘라 쓴다.
+  const segmentWindow: SegmentWindow | null = videoFile
+    ? { offsetSec: 0, durationSec: videoDurations[0] }
+    : null;
+  if (videoFiles.length > 1) {
+    console.log(
+      `[geo] 분할 영상 ${videoFiles.length}개 감지 (이름 오름차순 연속재생): ` +
+      videoFiles.map((vf, i) => `${baseNameOf(relPath(vf))}(${videoDurations[i]?.toFixed(1) ?? '?'}s)`).join(' → '),
+    );
+  }
+
+  const [frames, stationResult, routeMeta, poiOverrides, kmz, cameraInfo, cameraJson] = await Promise.all([
+    parseDroneFrames(files, baseName, segmentWindow),
     parseStations(files),
     parseRouteMeta(files, baseName),
     parsePoiOverrides(files, baseName),
     parseKmz(files),
+    videoFile ? detectCameraInfo(videoFile) : Promise.resolve(null),
+    parseCameraJson(files, videoFiles),
   ]);
 
+  if (cameraJson) {
+    console.log('[camera] <base>.camera.json 발견 — 저장된 카메라 파라미터 적용:', cameraJson);
+  }
+
+  // 감지된 초점거리를 드론 프레임 focalLen 에도 반영 (검색/투영 FOV 판정 일관성).
+  if (cameraInfo?.focalLen35) {
+    for (const f of frames) f.focalLen = cameraInfo.focalLen35;
+    console.log(
+      `[camera] ${cameraInfo.model} 감지 — focal ${cameraInfo.focalLen35}mm` +
+      (cameraInfo.width ? `, ${cameraInfo.width}x${cameraInfo.height}@${cameraInfo.fps ?? '?'}fps` : ''),
+    );
+  } else if (cameraInfo) {
+    console.log(`[camera] ${cameraInfo.model} 감지 (초점거리 정보 없음)`);
+  }
+
   // POI/구조물 출처: KMZ(원본)가 유일한 소스다(지장물·출입문·교량/터널/구교·철도역).
-  // KMZ 정책상 필수 — 없거나 비어 있으면 "데이터 누락"으로 보고 경고만 남기고 빈 상태로 둔다
+  // KMZ 파일 자체가 없을 때만 "데이터 누락"(kmzMissing=alert 대상)으로 본다.
-  // (CSV 폴백 없음. building/ POI·구조물 CSV는 사용하지 않음). 측점·중심선은 항상 CSV(측점)에서 온다.
+  // 파일은 있는데 POI/구조물이 0건인 경우(예: 제주 — 노선 KML만 있고 POI 없음)는
-  const kmzMissing = !kmz || (kmz.pois.length === 0 && kmz.structures.length === 0);
+  // 정상 데이터셋으로 취급하고 콘솔 경고만 남긴다.
+  const kmzMissing = !kmz;
   if (kmzMissing) {
     console.warn(
-      '[KMZ] 누락/비어있음 — POI·구조물이 표시되지 않습니다. ' +
+      '[KMZ] 누락 — POI·구조물이 표시되지 않습니다. ' +
       'KMZ(원본)를 포함해 데이터를 재구축·전달하세요. (측점·드론 정보는 정상 로드)',
     );
+  } else if (kmz!.pois.length === 0 && kmz!.structures.length === 0 && kmz!.stations.length === 0) {
+    console.warn('[KMZ] POI·구조물·측점 0건 — 이 데이터셋엔 표출할 지물이 없습니다(드론 궤적은 무관).');
   } else {
-    console.log(`[KMZ] POI ${kmz!.pois.length} · 구조물 ${kmz!.structures.length} 로드(원본)`);
+    console.log(`[KMZ] POI ${kmz!.pois.length} · 구조물 ${kmz!.structures.length} · 측점 ${kmz!.stations.length} 로드(원본)`);
   }
   const pois = kmz?.pois ?? [];
   const baseStructures = kmz?.structures ?? [];
 
-  const stations = stationResult.stations.sort(
+  // 측점 소스: CSV(01)측점 — 실측 표고 보유) 우선, 없으면 KML 체이니지 측점(STA) 사용.
+  // KML 측점은 표고 미상 → z=0 그대로 둔다(미상 표식). 드론고도 기반 근사(−24m)는
+  // 실제 지면과 수십 m 어긋나 라벨이 공중에 떠서 시차 불일치(카메라 전진 시 라벨 밀림)를
+  // 유발했음 → 오버레이가 z=0 라벨을 '경로 표고' 평면에 앵커하는 방식으로 대체.
+  let rawStations = stationResult.stations;
+  if (!rawStations.length && kmz?.stations.length) {
+    rawStations = kmz.stations;
+    console.log(`[KMZ] 체이니지 측점 ${rawStations.length}개 로드 (표고 미상 → 오버레이 '경로 표고' 평면 앵커)`);
+  }
+
+  const stations = rawStations.sort(
     (a, b) => stationOrder(a.title) - stationOrder(b.title),
   );
   const directionChanges = stationResult.directionChanges;
@@ -591,5 +862,10 @@ export async function loadFolderGeoData(
     directionChanges,
     poiOverrides,
     kmzMissing,
+    videoFiles,
+    videoDurations,
+    folderFiles: files,
+    cameraInfo,
+    cameraJson,
   };
 }

docs/history/2026-07-09_1510_54000포트-외부접근-셋팅.md

@@ -0,0 +1,36 @@
+# 2026-07-09 54000 포트 외부 접근 셋팅
+
+**소요 시간**: 15분
+**Context 사용량**: input 95k / output 10k tokens
+
+## 작업 내용
+
+GhiVideo_v4를 54000 포트로 서비스하고 다른 컴퓨터에서 접근 가능하도록 셋팅.
+
+### 완료 항목
+
+1. **의존성 설치 + 빌드**
+   - 시스템 기본 node(v12)로 `npm install` 실패 (better-sqlite3 gyp 오류) → nvm Node 20 (v20.20.2)으로 재설치 성공
+   - `npm run build` (shared → server → client) 완료
+
+2. **PM2 앱 이름 충돌 해결**
+   - 원본 GhiVideo와 v4의 ecosystem.config.js가 둘 다 `name: "ghiVideo"` → `pm2 start` 시 원본 앱이 v4 env(PORT=54000)로 재시작되는 사고 발생
+   - v4의 ecosystem.config.js 이름을 `ghiVideo-v4`로 변경
+   - 꼬인 엔트리 삭제 후 양쪽 재기동: 원본 `ghiVideo`(55000) 복구 + `ghiVideo-v4`(54000) 신규 기동
+   - 둘 다 `/api/videos` 200 응답 확인, `pm2 save` 완료
+
+3. **Windows 포트포워딩 (미완 — 사용자 실행 필요)**
+   - WSL2 NAT 모드 (WSL IP: 172.21.50.250). 기존 포트들(55000, 5173, 8080 등)은 netsh portproxy + 방화벽 규칙으로 개방된 패턴 확인
+   - 54000용 스크립트를 `C:\Users\Public\ghivideo-v4-54000-setup.ps1`에 작성
+   - 관리자 권한 자동 실행은 권한 정책상 차단 → **사용자가 관리자 PowerShell에서 직접 실행 필요**
+
+### 재부팅 내구성 검토 (같은 세션 후속 작업)
+
+- Windows 루프백 → WSL 포워딩 확인: `127.0.0.1:54000` 200 응답 → portproxy `connectaddress=127.0.0.1` 방식이면 **WSL IP가 바뀌어도 규칙이 안 깨짐**. 설정 스크립트를 이 방식으로 갱신함
+- 기존 규칙들(55000, 5173 등)은 WSL IP(172.21.50.250) 하드코딩 — 재부팅으로 IP 바뀌면 깨질 수 있음. 동일하게 127.0.0.1로 바꾸는 것 권장
+- **pm2 자동 시작 없음**: pm2 systemd 유닛 없음, 시작프로그램의 AI-Video-Brief.vbs는 ai_video_brief 전용. 재부팅 후 `pm2 resurrect` 수동 실행 필요. 시작프로그램 vbs 자동 생성은 보안 정책 차단 → 사용자 직접 생성 필요
+
+### 다음 단계 참고
+
+- 관리자 PowerShell에서 1회 실행: `powershell -ExecutionPolicy Bypass -File C:\Users\Public\ghivideo-v4-54000-setup.ps1` (portproxy 127.0.0.1 방식 + 방화벽 규칙)
+- v4 서버 코드 기본 포트는 3030(`server/src/config.ts`)이나, PM2 env로 54000 주입됨

docs/history/2026-07-09_1525_제주데이터-플레이어-연결.md

@@ -0,0 +1,37 @@
+# 2026-07-09 제주 중산간 도로 데이터 플레이어 연결
+
+**소요 시간**: 10분
+**Context 사용량**: input 130k / output 6k tokens
+
+## 작업 내용
+
+`D:\_project\...\제주 중산간 도로 노선 동영상 비행 로그\경로 1-1` 데이터를 GhiVideo_v4 플레이어에 연결.
+
+### 데이터 구성
+
+- DJI 드론 영상 4개 (DJI_20260629121835_0002~0005.MP4, 총 12GB)
+  - H.264, 4K(3840x2160), 59.94fps, 개당 약 197초(0005는 더 짧음)
+- 비행로그 CSV: `제주 중산간도로 동영상 경로 1-1.csv` — **시간 기반**(100ms 간격), 컬럼: `time(millisecond), latitude, longitude, X(E), Y(N), altitude_above_seaLevel, compass_heading, pitch, roll, gimbal_heading, gimbal_pitch, gimbal_roll`
+- `제주_중산간도로.kml` — 도로 노선
+
+### 완료 항목
+
+- ecosystem.config.js의 `VIDEOS_DIR`/`GEO_DATA_DIR`를 `/mnt/d/...` 제주 경로로 변경, pm2 재기동 + save
+- `/api/videos` 4개 영상 인식, `/api/meta` 정상 (H.264 확인 → HLS 변환 시 `-c copy` 가능)
+- Range 스트리밍 검증: 앞부분 55MB/s, 2GB 지점 seek 34MB/s (4K60 비트레이트 약 19MB/s 대비 충분)
+
+### 미완료 / 알려진 제약 (geo 비행로그 연동)
+
+현재 geoMatch 서비스는 회덕 데이터셋 전용이라 제주 CSV를 읽지 못함:
+
+1. 드론 CSV 파일명 `'회덕'` 하드코딩 필터 (`geoMatch.ts` loadFrames)
+2. 컬럼 불일치: 기대 `frame_cnt/latitude/longitude/altitude/yaw/pitch/roll/focal_len` vs 제주 `time(millisecond)/compass_heading/gimbal_heading/...` → 시간→프레임 변환 어댑터 필요
+3. POI/측점(`building/` 폴더) 데이터가 제주 데이터셋에 없음 → POI 검색 기능은 데이터 부재로 불가
+4. 영상이 4개로 분할 → 로그 시간을 (영상 파일, 영상 내 시점)으로 매핑하는 오프셋 계산 필요
+5. KML은 중심선(center.csv 대체) 소스로 활용 가능
+
+### 다음 단계 참고
+
+- 업로드 기능(tus) 사용 시 D: 폴더(VIDEOS_DIR)에 저장됨 — 의도 확인 필요
+- HLS/프레임/썸네일 산출물은 기존대로 프로젝트 `storage/`에 생성됨
+- 제주 geo 어댑터 작업 시 요구 기능(경로 시각화, 프레임별 위치 표시 등) 범위 확정 필요

docs/history/2026-07-09_1558_제주-드론궤적-어댑터.md

@@ -0,0 +1,49 @@
+# 2026-07-09 제주 DJI 비행로그 드론궤적 어댑터
+
+**소요 시간**: 30분
+**Context 사용량**: input 175k / output 12k tokens
+
+## 문제
+
+제주 데이터 폴더 선택 시 드론 궤적 오버레이가 표시되지 않음.
+
+## 원인
+
+클라이언트 지리정보 파이프라인(폴더 선택 → `geoData.ts` 파싱 → geoStore → StationOverlay 투영)이 회덕 v2.0 프레임 기반 CSV(`frame_cnt,latitude,…,yaw,pitch,roll,focal_len`) 전용이었음. 제주 CSV는 DJI 비행로그 시간 기반(`time(millisecond),latitude,…,compass_heading,gimbal_heading,…`)이라:
+
+1. 위치 폴백 인덱스로 컬럼이 밀림 — frame←ms값(89500~), altitude←X(E) 평면좌표, yaw←Y(N), focalLen←pitch 등 전부 오염
+2. `effectiveFps`(=마지막 frame ÷ 영상길이) 자기보정이 깨져 시간↔프레임 변환 실패
+3. 분할 영상 4개(_0002~_0005) 중 첫 영상 길이(197.1s)에 로그 전체(672.6s)가 압축 매핑됨
+4. 경로표고 슬라이더 상한(중심선 z 기반, 폴백 60m)이 제주 지형(드론 148m ASL)에 못 미침
+
+## 수정 내용
+
+### client/src/utils/geoData.ts
+
+- `parseDroneFrames`: `time(millisecond)` 헤더 감지 시 DJI 시간 기반 브랜치로 분기
+  - 컬럼: lat/lon/`altitude_above_seaLevel(meter)`, 자세는 gimbal_* 우선(기체 compass/pitch/roll 폴백), focalLen=24mm 기본
+  - `frame = ((time−t0)/1000 − offsetSec) × 59.94(가상fps)` — effectiveFps 자기보정과 정합
+  - `SegmentWindow`(offsetSec/durationSec)로 재생 영상 구간 밖 행 클리핑
+- `findVideoFiles`: 영상 이름순 정렬(DJI 분할본 _0002 먼저 확정)
+- `probeVideoDuration`: objectURL + `preload=metadata`로 영상 길이만 측정
+- `loadFolderGeoData`: 첫 영상 길이 측정 → 세그먼트 창 전달, 분할본 감지 시 콘솔 경고
+- `parseRouteMeta`: 임의 접두 `*.route.json` 인식 (제주 route.json 파일명 대응)
+- `parseKmz`: 체이니지 표점(`0+100` 형식) Point는 POI 제외 (z=0이라 투영 깨짐 방지)
+- `kmzMissing`: KML/KMZ 파일 자체가 없을 때만 alert (파일은 있으나 POI 0건은 콘솔 경고만)
+
+### client/src/components/overlay/StationOverlay.tsx
+
+- `pathZMax`: 중심선 z에 더해 드론 고도(ASL) 최대값도 상한 근거에 포함 → 제주에서 슬라이더 159m까지
+
+## 검증
+
+- `npm run build -w client` (tsc + vite) 통과, 54000 포트가 새 번들(index-Cp4zEgX_.js) 서빙 확인
+- 실제 CSV로 파싱 수학 시뮬레이션: 6649행 → 세그먼트 내 1947행, frame 0~11814, effectiveFps 59.9248→59.94 스냅, 영상 t=100s ↔ 로그 t=100.00s 왕복 정합, 자세값 정상(yaw 65.1°, pitch −15°, alt 147.9m)
+
+## 남은 제약 / 다음 단계 참고
+
+- **분할 영상 2~4번째(_0003~_0005) 미지원** — 세그먼트 선택 UI + offsetSec(누적 길이) 연결 필요. 로그 폭(672.6s) ≈ 영상 총길이(671.7s) 검증됨, 오프셋: 0 / 197.147 / 394.211 / 591.475s
+- 드론 고도 거의 일정(147.8~148.6m ASL) — 도로 표고는 그 아래. 경로표고 슬라이더로 90~140m 부근 튜닝 필요
+- KML LineString(도로 중심선)은 고도가 전부 0이라 중심선(선형 오버레이) 소스로 미사용
+- 측점/POI 데이터가 제주 데이터셋에 없음 — KML 체이니지 표점(0+000~) 활용하려면 표고 부여 필요
+- route.json의 durationSec(568)이 실제 영상 총길이(671.7s)와 불일치 — 사용자 확인 필요

docs/history/2026-07-09_1637_분할영상-연속재생.md

@@ -0,0 +1,48 @@
+# 2026-07-09 분할 영상 연속재생 (이름 오름차순 자동 전환)
+
+**소요 시간**: 25분
+**Context 사용량**: input 210k / output 8k tokens
+
+## 작업 내용
+
+폴더 내 분할 영상(DJI _0002~_0005)이 끝나면 이름 오름차순으로 다음 영상을 자동 재생.
+전환 시 드론 로그(시간 기반)를 해당 세그먼트의 누적 오프셋으로 재정렬해 궤적 정합 유지.
+
+## 수정 파일
+
+### client/src/types/geo.ts
+- `FolderGeoData`에 `videoFiles`(이름 오름차순), `videoDurations`, `folderFiles` 추가
+
+### client/src/utils/geoData.ts
+- `loadFolderGeoData`: 폴더 내 **모든** 영상 길이를 메타데이터로 측정(기존엔 첫 영상만),
+  분할본 감지 시 재생 순서 콘솔 로그. 측정값·원본 파일 목록을 반환값에 포함
+
+### client/src/store/geoStore.ts
+- 상태 추가: `videoFiles` / `videoDurations` / `videoIndex` / `folderFiles`
+- **`loadSegment(index)` 액션 신설**: 누적 오프셋(앞 세그먼트 길이 합) 계산 →
+  `parseDroneFrames`를 세그먼트 창으로 재실행해 frames 교체, videoIndex 갱신, 재생할 File 반환
+  - 길이 측정 실패 세그먼트가 있으면 궤적만 비우고(frames=[]) 재생은 계속
+  - `baseName`은 폴더(첫 영상) 기준 유지 — 카메라 보정 localStorage 연속성
+  - `origin`도 폴더 로드 시점 값 유지 — ENU 기준점 일관성(전환 시 투영 점프 방지)
+
+### client/src/components/player/VideoPlayer.tsx
+- Video.js `ended` 이벤트 핸들러 추가: 폴더 기반 로컬 재생 + 분할본 2개 이상일 때만
+  `loadSegment(next)` → `loadLocalFile(file)` → `player.play()` (ended 직후는 paused라 직접 재생)
+- 서버 스트림/단일 파일 재생은 대상 아님 (source.kind !== 'local' 가드)
+
+## 검증
+
+- `npm run build -w client` (tsc + vite) 통과, 54000 포트 새 번들(index-BA4g81-1.js) 서빙 확인
+- 실제 CSV로 4개 세그먼트 오프셋 시뮬레이션:
+  - 세그먼트 1: offset 0s, 1947행, effFps 59.925 → 59.94 스냅 ✓
+  - 세그먼트 2: offset 197.1s, 1963행, effFps 59.935 ✓
+  - 세그먼트 3: offset 394.2s, 1936행, effFps 59.920 ✓
+  - 세그먼트 4: offset 591.5s, 793행, effFps 59.877 ✓ (±10% 스냅 범위 내)
+  - 행 합계 6639/6649 — 경계 인접 소수 행만 제외, 정상
+
+## 다음 단계 참고
+
+- 세그먼트 수동 선택 UI(목록에서 특정 세그먼트로 점프)는 미구현 — `loadSegment`가 이미 있어
+  UI만 붙이면 됨 (`useGeoStore.getState().loadSegment(i)` + `loadLocalFile`)
+- 마지막 세그먼트(_0005) 종료 시 정지 (반복 재생 없음 — 요구사항 밖)
+- 전환 시 1~2초 로딩 공백 가능(objectURL 교체) — 프리로드 최적화는 필요 시

docs/history/2026-07-09_1648_스테이션바-이동거리-진행도.md

@@ -0,0 +1,44 @@
+# 2026-07-09 스테이션바 진행도 — 드론 정지 시 커서 정지 (이동거리축 폴백)
+
+**소요 시간**: 10분
+**Context 사용량**: input 240k / output 5k tokens
+
+## 문제
+
+드론이 이동을 멈췄는데(호버링) 하단 스테이션바 커서는 계속 증가.
+
+## 원인
+
+StationBar의 진행도 축(chainRef: 시간→누적 이동거리 비율)은 **측점 폴리라인 체이니지 기반**으로만
+구성됨 (`frames + stations + stationLine` 필요). 제주 데이터셋은 측점이 없어 `ready=false`
+→ `cumFracAtTime`이 **시간 선형 폴백**(`t / duration`) 사용 → 드론이 멈춰도 커서는 시간 비례로 전진.
+
+실데이터 확인: 세그먼트 2에서 드론이 t=8~128s(120초), t=178~198s 두 번 호버링 —
+사용자가 관측한 구간과 일치.
+
+## 수정 내용 — client/src/stationbar/StationBar.tsx
+
+- precompute useEffect에 **측점 없음 폴백** 추가: 드론 프레임만 있으면 GPS(위경도)를
+  ±8프레임 이동평균으로 평활 후 프레임 간 수평거리 누적 → 정규화(frac)해 chainRef 구성.
+  측점 기반 기능(배지/구간색/구조물 마크)은 기존대로 ready=false 비활성 유지
+- `cumFracAtTime` / `timeAtFrac` 가드에서 `!ready` 제거 — chainRef 존재 여부만 확인
+  (폴백 chainRef도 사용). 바 클릭 seek도 이동거리축 역변환으로 동작
+- depChain/arrChain은 방향색 전용이라 폴백에선 더미(0/1)
+
+## 검증 (실데이터 시뮬레이션, 세그먼트 2)
+
+| 시점 | 기존(시간선형) | 수정(이동거리) |
+|------|--------------|--------------|
+| t=8s (호버 시작) | 4.1% | 8.0% |
+| t=68s (호버 중) | 34.5% | 8.4% |
+| t=128s (호버 끝) | 65.0% | 9.0% |
+
+호버 120초 동안 커서가 사실상 정지(+1.0%p). 세그먼트 2 총 이동거리 460.2m.
+tsc+vite 빌드 통과, 54000 포트 새 번들(index-quVWnwfd.js) 서빙 확인.
+
+## 다음 단계 참고
+
+- 정지 구간에서 커서가 멈추므로, 그 동안 시간은 흐르는데 커서가 안 움직이는 게 정상 동작
+  (좌측 시간 배지는 계속 증가 — 서로 다른 축)
+- 드론이 전 구간 정지(총 이동거리 0)인 극단 케이스는 frac 전부 0 → 커서 시작점 고정
+- 세그먼트 전환(loadSegment) 시 frames 교체 → chainRef 자동 재구성됨

docs/history/2026-07-09_1702_KML-시설물-측점-임포트.md

@@ -0,0 +1,53 @@
+# 2026-07-09 KML 시설물/측점 정보 임포트 (ExtendedData 지원)
+
+**소요 시간**: 12분
+**Context 사용량**: input 265k / output 6k tokens
+
+## 작업 내용
+
+KML 파일에서 시설물 정보를 가져올 수 있도록 parseKmz 확장. 제주 KML의 STA(체이니지 측점)
+71개가 측점으로 로드되어 측점 파이프라인 전체(스테이션바·노선패널·검색·오버레이) 활성화.
+
+## 배경 — 제주 KML 구조
+
+```
+Folder 선형중심선: LineString (도로 중심선, CAD 내보내기)
+Folder STA: Point 71개 (0+000 ~ 6+998, 100m 간격)
+  └ ExtendedData/SchemaData/SimpleData: STA(이름), lat, lon, 5186_x/y, km(float)
+```
+
+기존 parseKmz 는 description CDATA HTML 표(회덕 지오코딩 산출물)만 속성으로 읽었고,
+체이니지 Point 는 직전 작업에서 POI 오염 방지를 위해 스킵 처리했었음.
+
+## 수정 내용 — client/src/utils/geoData.ts
+
+1. **SimpleData 속성 수집**: `ExtendedData/SchemaData/SimpleData` 를 description HTML 표와
+   동일하게 props 로 통합 — CAD·GIS 내보내기 KML의 속성이 기존 폴더 분기(교량/터널/구교/출입문)에서도
+   그대로 동작 (향후 시설물 폴더가 있는 KML 대응)
+2. **체이니지 측점 → station**: 이름 `N+NNN` 형식 또는 STA 속성 보유 Point 를
+   `type='station'` 으로 수집. km 속성(단위 km) 우선, 없으면 이름 파싱.
+   제목을 철도식 `NkNNN`("0k100")으로 변환 → stationOrder/stationKm 파이프라인 그대로 호환
+3. **parseKmz 반환에 `stations` 추가**, 로드 로그에 측점 수 표기
+4. **loadFolderGeoData**: CSV 측점(01)측점 — 실측 표고) 우선, 없으면 KML 측점 사용.
+   KML 측점은 표고 미상(z=0) → **최근접 드론 프레임 고도 − 24m 근사**
+   (도로 추종 저고도 비행 가정, 오버레이 기본 모드가 드론고도 기준이라 오차 영향 작음)
+
+## 활성화되는 기능 (제주 데이터)
+
+- 하단 스테이션바: 측점 체이니지 기반 이동거리축(ready=true), 최근접 측점 배지, 바 클릭 seek
+- 좌측 노선 패널(RoutePanel): 측점 71개 (0k000~6k998), 시점/종점명은 route.json(A/B)
+- 영상 오버레이: 측점 라벨 투영 (드론고도 − 이격 모드 기본)
+- GeoSearch: 측점명 검색/자동완성
+
+## 검증
+
+- tsc + vite 빌드 통과, 54000 포트 새 번들(index-BvbrGp3O.js) 서빙
+- KML STA 데이터 레벨 검증: 71개 전부 변환, 제목 0k000~6k998, stationKm 파싱 유효, 단조증가
+
+## 다음 단계 참고
+
+- KML 노선은 0~7km인데 경로 1-1 비행은 그중 약 1.9km 구간만 커버 — RoutePanel 마커가
+  일부 구간에서만 움직이는 것이 정상
+- 교량/터널 등 실제 시설물 Placemark 가 있는 KML 이 오면 기존 폴더명 분기(교량/터널/구교/출입문)로
+  자동 임포트됨 — SimpleData 속성(연장(m), 구분 등)도 이제 인식
+- 선형중심선 LineString 은 미사용 (측점 폴리라인으로 중심선 생성 — 기존 로직)

docs/history/2026-07-09_1715_지장물KML-신포맷-파싱.md

@@ -0,0 +1,51 @@
+# 2026-07-09 지장물 KML 신포맷 파싱 (다중 KML + 라벨 색상)
+
+**소요 시간**: 13분
+**Context 사용량**: input 300k / output 8k tokens
+
+## 문제
+
+새로 받은 `제주_중산간도로_지장물.kml`(구글어스 Pro에서 CSV 변환, 지장물 33개)의
+좌표/라벨 색상이 화면에 표시되지 않음.
+
+## 원인
+
+1. **parseKmz 가 KML 을 1개만 읽음** — `files.find(...)` 라 폴더에 KML 이 2개(측점 KML + 지장물 KML)면
+   첫 파일만 파싱되고 지장물 KML 은 통째로 무시됨 (핵심 원인)
+2. 신포맷은 폴더(교량/터널 등) 구분이 없고 Placemark 직속 + Schema
+   (`타입/타입상세/텍스트박스_색상/이름/연장/X/Y/높이`) — 기존 desc HTML 표 기반 분기와 불일치
+3. 라벨 색상 개념이 렌더러에 없음 — 캔버스 라벨이 고정색(#64c8ff) 단일
+
+## 수정 내용
+
+### client/src/utils/geoData.ts
+- **parseKmz 다중 파일 병합**: 폴더 내 모든 .kml/.kmz 를 순회 파싱해 pois/structures/stations 병합
+  (파일 단위 실패는 경고 후 건너뜀)
+- **신포맷(지장물 스키마) 브랜치**: `타입` SimpleData 존재로 감지 —
+  - title=`이름`(폴백 name), category=`타입`(교차로/도로/교량/강.하천/마을/산/지장물/지장물L)
+  - 좌표는 SimpleData X/Y(저정밀)가 아닌 **Point coordinates(고정밀)** 사용
+  - `높이`는 표고가 아닌 구조물 높이 → z=0 유지(팝업 props 로만 노출)
+  - 타입 교량/터널은 구조물(스테이션바·노선패널 마크)로도 중복 등록 (연장→lengthM)
+- **라벨 색**: `텍스트박스_색상` 한국어명(검정/남색/빨강/연두/주황/초록/파랑 등 13색) → CSS 매핑,
+  없으면 인라인 IconStyle 색(KML aabbggrr → #rrggbb) 폴백 → `GeoPoint.labelColor`
+
+### client/src/types/geo.ts
+- `GeoPoint.labelColor?: string` 추가
+
+### client/src/components/overlay/StationOverlay.tsx
+- labelColor 를 poiCand → poiMarkers(라벨 캐시) → 캔버스 렌더로 전달
+- 십자 마커·라벨 텍스트를 지정 색으로 렌더, 어두운 색(검정·남색)은 외곽선을 밝게 반전(가독성)
+- CATEGORY_EMOJI 확장: 교차로🚦 도로🛣️ 강.하천🌊 마을🏘️ 산⛰️ 지장물L🏢
+
+## 검증
+
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-CLmojEn3.js) 서빙
+- 지장물 KML 데이터 검증: 33개 전부 파싱, 색상 매핑 33/33, 교량 3건 구조물 중복 등록,
+  좌표 불량 0 (Point coordinates 고정밀 사용)
+- 기존 측점 KML(STA 71개)과 병합 로드 확인 (다중 KML)
+
+## 다음 단계 참고
+
+- 신포맷 감지 키는 `타입` SimpleData — 회덕 desc표/STA 스키마와 충돌 없음
+- styleUrl(#pointStyleMap1) → StyleMap 참조 해석은 미구현 (인라인 Style 이 항상 존재해 불필요)
+- 색상명 미정의 시(예: 새로운 색 이름) 인라인 IconStyle 색 폴백 → 그것도 없으면 기본 하늘색

docs/history/2026-07-09_1725_라벨-표고앵커-측점거리제한.md

@@ -0,0 +1,52 @@
+# 2026-07-09 오버레이 라벨 표고 앵커 + 측점 거리 제한
+
+**소요 시간**: 10분
+**Context 사용량**: input 340k / output 6k tokens
+
+## 문제 (스크린샷 제보)
+
+1. 빨간 측점 라벨(0k000~6k998)이 수평선 부근에 전부 겹쳐서 깨진 글자처럼 보임
+2. POI 라벨이 실제 지물보다 높게 떠서, 카메라(드론)가 전진하면 라벨이 계속 뒤로 밀림(시차 불일치)
+
+## 원인
+
+1. **측점 라벨엔 거리 제한이 없음** — POI는 maxPoiRange(기본 1000m) 필터가 있지만 측점은 없어서
+   7km 앞 측점까지 전부 FOV 안 수평선 근처에 투영·중첩됨
+2. **라벨 표고 근사가 틀림** — 직전 작업에서 측점 z를 "드론고도−24m ≈ 124m"로 근사했으나
+   실제 지면은 ≈60m(경로표고 기본값 58이 도로에 붙는 것으로 확인) → 라벨이 지면보다
+   약 60m 공중에 떠서 원근 시차가 안 맞아 전진 시 라벨이 뒤로 흐름.
+   드론고도 모드(pz=드론고도−이격24)도 동일하게 124m 평면이라 같은 증상
+
+## 수정 내용
+
+### client/src/utils/geoData.ts
+- KML 측점의 z 근사(드론고도−24) 제거 → z=0(표고 미상 표식) 유지
+
+### client/src/components/overlay/StationOverlay.tsx
+- **표고 미상(z≤0) 라벨을 '경로 표고'(dronePathZ) 평면에 앵커**:
+  - 측점 라벨 sz: 유효 z 없으면 PATH_Z(경로표고) 사용
+  - POI gz 폴백 체인: 보정값 → 중심선 z(>0만) → POI z(>0만) → PATH_Z
+  - 경로표고 슬라이더 변경 시 라벨 캐시 재계산(500ms 디바운스, 기존 트리거에 dronePathZ 추가)
+  - → **궤적을 도로에 맞추는 슬라이더 하나로 측점/POI 라벨 높이가 함께 보정됨**
+- **측점 라벨에도 maxPoiRange 거리 제한 적용** — 원거리 측점 수평선 뭉침 해소
+- **poiDroneHeight 기본값 true→false(지면고도 기준)**:
+  - 실측 z 데이터셋(회덕)은 지물에 정확히 붙음(원래 이 모드가 정확)
+  - 표고 미상 데이터셋(제주)은 경로표고 앵커로 일괄 보정 가능
+  - 드론고도 모드는 UI 토글로 여전히 선택 가능
+
+## 검증
+
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-Nv1HLuS3.js) 서빙
+- 기하 검증(계산): 지면 60m/드론 148m 기준, 124m 라벨은 300m 전방 지물 대비 화면상 약
+  12% 위쪽에 투영(수평선 방향) → 전진 시 벌어짐. PATH_Z(58) 앵커 시 지물과 동일 평면 → 시차 일치
+
+## 사용법 (사용자 안내)
+
+- 새로고침 후 폴더 재선택 → '경로 표고' 슬라이더로 파란 궤적을 도로 노면에 맞추면
+  측점·POI 라벨도 같은 평면으로 따라옴 (기본 58m가 대략 맞음)
+- 측점 라벨 표시 거리는 'POI 표시범위'(maxPoiRange) 슬라이더로 조절
+
+## 다음 단계 참고
+
+- 지형 기복이 큰 구간은 단일 평면 앵커의 한계 있음 — 필요 시 구간별 z 또는 DEM 도입 검토
+- RoutePanel 가시범위(초록 박스) 계산은 여전히 pt.z(0) 사용 — 부정확할 수 있으나 부차적

docs/history/2026-07-09_1738_영상-재생목록-패널.md

@@ -0,0 +1,31 @@
+# 2026-07-09 영상 재생목록 패널 (분할 영상 선택 재생)
+
+**소요 시간**: 10분
+**Context 사용량**: input 380k / output 5k tokens
+
+## 작업 내용
+
+폴더 로드 시 폴더 내 영상 파일 목록(이름 오름차순)을 패널로 표시하고,
+목록에서 원하는 영상을 클릭해 바로 선택 재생할 수 있게 함.
+
+## 수정 내용 — client/src/components/player/VideoPlayer.tsx
+
+- **재생목록 패널** (우하단, 재생바 위):
+  - 폴더 내 영상 파일명 + 길이(m:ss), 현재 재생 항목 ▶ + 주황 하이라이트
+  - 항목 클릭 → 해당 세그먼트로 즉시 전환 재생 (geoStore.loadSegment 로 드론 로그도
+    해당 구간 누적 오프셋으로 재정렬 — ended 자동 전환과 동일 경로)
+  - 현재 재생 중인 항목 재클릭 → 처음(0초)부터 재생
+  - 목록이 길면 스크롤 (max-h-48)
+  - 헤더에 "N/M" 진행 표시. ended 자동 전환 시에도 videoIndex 구독으로 하이라이트 자동 갱신
+- **'영상목록 N/M' 토글 버튼**: 하단 컨트롤 행(드론궤적 버튼 옆). 기본 표시(ON)
+- `fmtDur` 헬퍼(초→"m:ss"), geoStore videoFiles/videoDurations/videoIndex 구독 추가
+- 로컬(폴더) 재생일 때만 표시 (source.kind === 'local')
+
+## 검증
+
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-DLUIvK3Q.js) 서빙
+
+## 다음 단계 참고
+
+- 세그먼트 전환 시 약 1초 로딩 공백(objectURL 교체) — 필요 시 다음 세그먼트 프리로드 검토
+- 패널 위치는 우하단 고정 — 캡처 목록 등 다른 우측 UI 와 겹치면 위치 조정 필요

docs/history/2026-07-09_1754_카메라감지-라벨박스-영상콤보.md

@@ -0,0 +1,50 @@
+# 2026-07-09 드론 카메라 자동 감지 + 라벨 박스 스타일 + 영상목록 콤보
+
+**소요 시간**: 16분
+**Context 사용량**: input 430k / output 12k tokens
+
+## 작업 내용 (요청 4건)
+
+### 1. 드론 카메라 정보 자동 감지 → 카메라 파라미터 적용 (POI 매핑 어긋남의 핵심 원인)
+
+DJI MP4의 `djmd` 데이터 트랙(프레임별 protobuf 텔레메트리)을 분석해 필드 구조 해독:
+
+| 필드 | 내용 | 제주 값 |
+|------|------|--------|
+| 1.1.2 | 카메라 모델 | **DJI ZenmuseP1** (풀프레임 측량 카메라) |
+| 1.7 / 1.6 / 1.8 | 해상도 / fps | 3840×2160 / 59.94 |
+| 6.4 / 6.5 / 6.6 | 위경도(라디안) / 타원체고(mm) | 33.40°/126.29°/174.4m |
+| **8.6** | **초점거리 (0.1mm, 35mm 환산)** | **299 → 29.9mm** |
+
+- 기존 기본값 24mm vs 실제 29.9mm(DL 24mm 렌즈 × 4K 비디오 크롭 ≈1.25) → FOV 과대 → POI 어긋남
+- `client/src/utils/cameraMeta.ts` 신규: 브라우저에서 영상 File 앞 8MB를 읽어 djmd 첫 샘플 파싱
+  (모델 문자열 탐색 → 샘플 경계 역추적 → protobuf 필드 수집). 실파일 검증 완료
+- `loadFolderGeoData`: 감지 정보를 FolderGeoData/geoStore(cameraInfo)에 적재, 드론 프레임 focalLen에도 반영
+- StationOverlay: **저장된 보정(localStorage calib)이 없는 데이터셋은 감지 focal 자동 적용**,
+  카메라 파라미터 패널에 "📷 모델 · 초점 · fps" 표시 + **[적용] 버튼**(수동 적용 — 이미 튜닝한
+  데이터셋은 자동 적용을 건너뛰므로 이 버튼 사용)
+
+### 2. '드론 높이와 POI 이격거리' 슬라이더 최대값 120 → 300
+
+### 3. 영상목록 → 좌상단 타이틀 아래 콤보 드롭다운
+
+- 우하단 패널/하단 버튼 제거 → 노선 배너(타이틀) 아래 `left:8, top:paramTop` 콤보 버튼
+  (현재 파일명 + n/m + ▼). 클릭 시 목록이 아래로 펼쳐지고 선택 시 즉시 전환·접힘
+- RoutePanel이 paramTop+40부터 시작해 겹침 없음
+
+### 4. POI 라벨: 십자/아이콘 제거, 지정색 배경 + 흰 글자
+
+- 캔버스 렌더를 "텍스트 박스"로 변경: 배경 = KML 텍스트박스_색상(라운드 사각형), 글자 = 흰색
+- POI 지점에 가로 중앙 정렬, 히트박스도 박스 영역으로 갱신
+
+## 검증
+
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-Bn6Gs0g2.js) 서빙
+- 카메라 감지 알고리즘을 실파일 앞 8MB로 재현 검증: ZenmuseP1 / 29.9mm / 3840×2160@59.94 정확 추출
+
+## 다음 단계 참고
+
+- **이미 캘리브레이션이 저장된 데이터셋(이번 세션에서 슬라이더 만진 경우)은 focal 자동 적용이
+  건너뛰어짐** → 카메라 파라미터 패널의 [적용] 버튼으로 29.9mm 반영 필요
+- djmd 6.x(위경도 라디안/타원체고)는 CSV보다 정밀한 포즈 소스 — 향후 CSV 대체 후보
+- 8.8(변화 필드)은 포커스 거리로 추정 — 미사용

docs/history/2026-07-09_1758_카메라focal-자동적용-개선.md

@@ -0,0 +1,30 @@
+# 2026-07-09 카메라 focal 자동 적용 조건 개선
+
+**소요 시간**: 4분
+**Context 사용량**: input 460k / output 3k tokens
+
+## 문제
+
+"드론 카메라 속성이 카메라 파라미터에 적용된 건가?" 확인 요청.
+직전 구현은 "저장된 보정(localStorage calib)이 있으면 자동 적용 건너뜀"이었는데,
+**보정 자동저장은 폴더를 열기만 해도 기본 params 로 저장**되므로(800ms 디바운스 저장 effect가
+첫 로드에도 실행) 제주 데이터셋은 이미 calib 이 존재 → 감지 focal(29.9mm)이 적용되지 않았을
+가능성이 높았음.
+
+## 수정 — StationOverlay.tsx 자동 적용 조건
+
+- 기존: 저장된 calib 존재 → 무조건 건너뜀
+- 변경: **사용자가 f 를 실제로 튜닝한 경우(저장된 f ≠ 기본값 24)만 유지**, 그 외
+  (첫 로드 / 저장은 됐지만 f 기본값 그대로)는 감지값 자동 적용
+- setParams 함수형 업데이트 안에서 판단 → calib 복원값 기준으로 정확히 비교
+
+## 확인 방법 (사용자 안내)
+
+- 새로고침 → 폴더 재선택 → 카메라 파라미터 패널: **f = 29.9mm** 이고
+  📷 줄에 "DJI ZenmuseP1 · 29.9mm" 표시되면 적용된 것
+- 콘솔 로그: `[camera] DJI ZenmuseP1 감지 → focal 29.9mm 자동 적용`
+- f 를 이미 직접 튜닝했던 경우엔 유지되며, [적용] 버튼으로 감지값 교체 가능
+
+## 검증
+
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-Ba4WSfaE.js) 서빙

docs/history/2026-07-09_1802_스테이션바-노선밖-진행정지-수정.md

@@ -0,0 +1,33 @@
+# 2026-07-09 스테이션바 노선 밖 구간 진행 정지 수정
+
+**소요 시간**: 4분
+**Context 사용량**: input 500k / output 3k tokens
+
+## 문제 (스크린샷 제보)
+
+드론이 전진 중인데(영상 1:17, GPS 33.4084/126.2945) 하단 스테이션바 커서·배지(0k000)가 고정.
+
+## 원인
+
+측점이 로드되면서 스테이션바 이동거리축이 **측점 폴리라인 체이니지 투영 |Δ| 누적** 방식으로
+동작하는데, 제주 비행은 **노선 시작점(0k000)에서 남서쪽 약 700m 밖에서 이륙해 접근**한다
+(0k000 도달은 87.3초 시점). 노선 밖에서는 투영이 폴리라인 끝점(0k000)에 클램프 → 체이니지
+변화량 0 → 접근 구간 내내(첫 87초) 커서·배지 정지.
+
+## 수정 — client/src/stationbar/StationBar.tsx
+
+- 이동거리축(frac)을 체이니지 |Δ| 대신 **GPS 실이동거리 누적**(±8프레임 이동평균 평활)으로 변경
+  - 호버 시 정체(커서 정지) 특성 유지 + 노선 안팎 무관하게 실제 이동 반영
+  - 측점 배지(최근접 측점)·구간 방향색(depChain/arrChain)은 기존 체이니지 기준 유지
+  - 측점 없는 데이터셋용 GPS 폴백(직전 작업)과 계산 방식 일원화
+
+## 검증 (실데이터 시뮬레이션, 세그먼트 1)
+
+- 스크린샷 시점 t=77.8s: 이동 719m → 커서 37.7% (기존 방식은 0% 고정)
+- 총 이동거리 1909m, 0k000 도달 87.3s — 도달 전 배지가 0k000인 것은 정상(최근접 측점)
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-C1t_EPA4.js) 서빙
+
+## 다음 단계 참고
+
+- 배지는 "가장 가까운 측점"이라 노선 접근 전에는 0k000 고정이 맞는 동작 — 접근 구간을
+  별도 표시(예: "노선 진입 전")하고 싶으면 chain 클램프 여부로 판별 가능

docs/history/2026-07-09_1842_스테이션바-원거리구조물-겹침수정.md

@@ -0,0 +1,40 @@
+# 2026-07-09 스테이션바 원거리 구조물 마크 겹침 수정
+
+**소요 시간**: 6분
+**Context 사용량**: input 540k / output 3k tokens
+
+## 문제 (스크린샷 제보)
+
+스테이션바에 교량 마크 2개가 붙어 있고 라벨이 "귀어음천교"처럼 보임 — 실제로는
+**"귀덕천교"와 "어음천교" 라벨이 같은 위치에 겹쳐** 찍힌 것. (귀어음천교라는 시설물은 없음)
+
+## 원인
+
+지장물 KML의 교량 3개 통과 시점(실데이터 계산):
+
+| 교량 | 세그1 최근접 | 실제 통과 |
+|------|------------|----------|
+| 귀덕천교 | t=194.6s, 24m | 세그먼트 1 끝 (정상) |
+| 금성천교 | t=197.1s(끝 클램프), **1358m** | 세그먼트 3 (t=510.8s, 3m) |
+| 어음천교 | t=197.1s(끝 클램프), **1880m** | 세그먼트 3 (t=565.2s, 59m) |
+
+`pxPassesTo`의 통과 인정 거리(TH)가 `max(100, 최근접거리×3)` — 근접 통과가 없는 구조물은
+TH 가 수 km 로 늘어나 전체 비행이 "통과"로 인정 → 최근접 프레임(세그먼트 끝)에 마크 생성 →
+세그1 끝에서 실제 통과하는 귀덕천교와 같은 px 에 3개 마크·라벨이 겹침.
+
+## 수정 — client/src/stationbar/StationBar.tsx
+
+- `pxPassesTo`에 근접 통과 상한 `PASS_MAX_M = 300` 추가: 이 영상(세그먼트)에서 300m 이내로
+  접근하지 않은 구조물은 마크 생략. 해당 구조물은 실제 통과하는 세그먼트의 바에 정상 표시됨
+  (세그먼트 전환 시 frames 교체 → 마크 재계산)
+
+## 검증
+
+- 실데이터 기준: 세그1 → 귀덕천교만(24m ✓), 금성·어음 제외(1358/1880m) ✓
+  세그3 → 금성천교(3m)·어음천교(59m) 표시 ✓
+- tsc+vite 빌드 통과, 54000 포트 새 번들(index-CFrrDGW7.js) 서빙
+
+## 다음 단계 참고
+
+- PASS_MAX_M(300m)은 역사처럼 노선 옆 구조물도 포함하도록 여유 있게 설정 — 도로/철도
+  공통으로 문제없을 값. 특수 데이터셋에서 조정 필요 시 route.json 파라미터화 검토

docs/history/2026-07-09_1850_스테이션배지-노선밖-표기.md

@@ -0,0 +1,38 @@
+# 2026-07-09 스테이션 배지 노선 밖(접근 구간) 표기
+
+**소요 시간**: 6분
+**Context 사용량**: input 580k / output 3k tokens
+
+## 문제 (스크린샷 제보)
+
+영상 54.8초(커서는 정상 진행 중)인데 스테이션 배지가 "0k000"에서 안 변함.
+
+## 원인 (버그 아님 — 표기 문제)
+
+이 비행은 노선 시작점(0k000)에서 남서쪽 ~700m 밖에서 이륙해 **87초에 노선 진입**.
+진입 전에는 "가장 가까운 측점 = 0k000"이라 배지가 0k000으로 고정되는 게 계산상 맞지만,
+사용자는 고장으로 인식 → 접근 구간임을 배지에 드러내기로 함.
+
+## 수정 — client/src/stationbar/StationBar.tsx
+
+- `projectChainageDist` 신설: 체이니지 + **폴리라인까지 수평거리(distM)** 반환
+  (기존 `projectChainage`는 래퍼로 유지 — 구조물 마크 등 기존 호출부 무변경)
+- `ViewedPoint.offM` 추가(프레임별 노선 이탈 거리), `realOffM` memo 추가
+- 배지 표기: 노선에서 **60m 이상 벗어난 구간은 "노선밖 ○○m"** 로 표시(거리 실시간 갱신),
+  60m 이내면 기존 체이니지(0k000, 0k110, …) 표시
+
+## 검증 (실데이터 시뮬레이션, 세그먼트 1)
+
+| 시점 | 배지 |
+|------|------|
+| 10s | 노선밖 708m |
+| 54.8s (스크린샷) | 노선밖 346m |
+| 87s (진입) | 0k000 |
+| 100s / 130s / 190s | 0k110 / 0k410 / 1k010 |
+
+→ 진입 후 배지 정상 진행 확인. tsc+vite 빌드 통과, 새 번들(index-DyILp3c8.js) 서빙.
+
+## 다음 단계 참고
+
+- OFF_ROUTE_M=60m 고정 — 드론이 노선 옆으로 크게 이격 비행하는 데이터셋이면 route.json
+  파라미터화 검토

docs/history/2026-07-09_2021_카메라json-세그먼트라벨-팝업정렬.md

@@ -0,0 +1,47 @@
+# 2026-07-09 카메라 JSON 저장/적용 + 세그먼트 라벨 캐시 + 팝업 정렬 + 박스 높이
+
+**소요 시간**: 20분
+**Context 사용량**: input 640k / output 10k tokens
+
+## 요청 4건 처리
+
+### 1. 카메라 화각 정보를 영상 이름의 JSON 으로 서버 저장 → 폴더에 함께 있으면 자동 적용
+
+- **서버**: `routes/camera.ts` 신규 — `PUT /api/camera/:videoId` 가 영상 폴더(VIDEOS_DIR)에
+  `<영상 base>.camera.json` 저장(`{ camera: {...}, model, savedAt }`), `GET` 조회. Path traversal 방어
+- **클라이언트**:
+  - `parseCameraJson`(geoData): 폴더에서 `<영상 base>.camera.json`(또는 `<base>.json`) 인식 —
+    폴더 내 어떤 분할본 base 와도 매칭, 숫자 필드만 통과
+  - geoStore `cameraJson` 적재 → StationOverlay 에서 **최우선 적용**(localStorage 보정·djmd 감지값보다 위,
+    effect 선언 순서로 보장)
+  - 카메라 파라미터 패널 📷 줄에 **[서버에 저장]** 버튼 — 현재 파라미터 전체(focalLen/yaw/pitch/…)를
+    현재 재생 중인 영상 이름으로 저장. 저장중…/저장됨 ✓/실패 상태 표시
+- E2E 검증: PUT → D: 폴더에 파일 생성 → GET 일치 → 정리 완료
+
+### 2. 두 번째 영상에서 시설물 미표출
+
+- 원인: 라벨 사전계산(startLabelPrecompute) effect deps 에 `storeFrames` 누락 —
+  세그먼트 전환(loadSegment)으로 frames 가 교체돼도 이전 세그먼트의 라벨 캐시를 계속 사용 →
+  새 위치에서 전부 화면 밖 투영
+- 수정: 두 precompute effect deps 에 `storeFrames` 추가 → 세그먼트 전환 시 재계산
+
+### 3. 시설물 라벨 아래 검은 팝업 정렬
+
+- 원인: 팝업 x 앵커가 구 라벨 레이아웃(지점 오른쪽 텍스트) 기준 `sx − 10` 고정 —
+  라벨이 중앙정렬 박스로 바뀌면서 어긋남
+- 수정: POI 팝업은 `sx − 팝업폭/2`(박스 중앙 아래 정렬), 측점 팝업은 기존 유지
+
+### 4. 라벨 배경 박스 여유
+
+- BOX_H 22 → **24**(글자 20px × 1.2), PAD_X 6→7, 동일좌표 다중 라벨 행 간격 ROW_H 24→28
+
+## 검증
+
+- 클라이언트(tsc+vite)·서버(tsc) 빌드 통과, pm2 재시작, 새 번들(index-BxAoyQvu.js) 서빙
+- 카메라 API 왕복 테스트 통과
+
+## 다음 단계 참고
+
+- camera.json 저장은 서버 VIDEOS_DIR 기준 — 폴더 선택으로 여는 로컬 폴더가 VIDEOS_DIR 과
+  다른 경로면 저장 파일이 그 폴더에 없음(현 구성은 동일 폴더라 문제없음)
+- camera.json 은 폴더 공용(분할본 전체 적용). 세그먼트별 별도 카메라가 필요하면 확장 필요

docs/history/2026-07-09_2024_커서배지-줄바꿈-수정.md

@@ -0,0 +1,17 @@
+# 2026-07-09 스테이션바 커서 배지 줄바꿈 수정
+
+**소요 시간**: 3분
+**Context 사용량**: input 680k / output 1k tokens
+
+## 문제
+
+커서 배지의 "노선밖 737m" 표기가 두 줄로 꺾여 표시됨 (배지가 min-width 112px + 20px 글자
++ 줄바꿈 허용이라 공백에서 개행).
+
+## 수정 — TimelineCursor.module.scss
+
+- 배지 글자 20px → **17px**, `white-space: nowrap` 추가 (폭은 내용에 맞게 자동 확장)
+
+## 검증
+
+- 빌드 통과, 새 번들(index-Cf5yoZh9.js) 서빙

docs/history/2026-07-09_2030_호버구간-라벨-깜빡임-수정.md

@@ -0,0 +1,35 @@
+# 2026-07-09 호버 구간 라벨 깜빡임 수정 (세그먼트 2)
+
+**소요 시간**: 6분
+**Context 사용량**: input 720k / output 3k tokens
+
+## 문제
+
+두 번째 영상 재생 시 라벨이 심하게 깜빡임.
+
+## 원인
+
+세그먼트 2는 **120초 호버 구간**(짐벌 회전 0.0°/s — 실데이터 확인, 완전 정지 프레이밍):
+
+1. **화면 경계 걸침 라벨의 포함 경계 플래핑**: 라벨 사전계산의 화면 포함 판정이
+   POI ±0.02 / 측점 ±0.05 로 타이트 — 호버 중 GPS 미세 지터로 경계에 걸친 라벨이
+   캐시 프레임(10Hz)마다 포함↔제외를 반복 → 표시/소멸 깜빡임.
+   (이동 중에는 경계 통과가 순간이라 눈에 안 띄었음 — 호버에선 120초 내내 반복)
+2. **겹침 억제 승자 플래핑**: 겹친 라벨 쌍의 우선순위가 dist 정렬 — 거리가 거의 같은 쌍은
+   지터로 순위가 프레임마다 뒤바뀌어 두 라벨이 교대로 깜빡임.
+
+## 수정 — client/src/components/overlay/StationOverlay.tsx
+
+- 사전계산 포함 경계를 POI/측점 모두 **±0.15** 로 확대 — 경계 판정을 안정화하고
+  실제 화면 밖 컬링은 드로우 단계(labelOnScreen)가 담당 (마커 수 증가는 미미)
+- 겹침 억제 정렬에 **거리차 1m 미만 = 제목순 고정** 타이브레이크 추가 — 승자 고정
+
+## 검증
+
+- 세그먼트별 짐벌 데이터: 세그1 평균 0.4°/s(이동 촬영) vs 세그2 평균 0.0°/s(호버) — 원인 부합
+- tsc+vite 빌드 통과, 새 번들(index-pDBh9-ym.js) 서빙
+
+## 다음 단계 참고
+
+- 남을 수 있는 잔여 깜빡임: POI 표시범위(maxPoiRange) 경계(기본 1000m)에 정확히 걸친 POI 가
+  호버 중 지터로 in/out 반복하는 경우 — 발생 시 범위 판정에 히스테리시스(±2%) 추가 검토

docs/history/2026-07-09_2035_카메라패널-값-출처-확인.md

@@ -0,0 +1,23 @@
+# 2026-07-09 카메라 패널 값 출처 확인 (Q&A)
+
+**소요 시간**: 3분
+**Context 사용량**: input 750k / output 1k tokens
+
+## 질문
+
+폴더 로드 후 카메라 파라미터 패널 값들이 드론에 저장된 카메라 값인지 확인 요청.
+
+## 답변 (코드 변경 없음)
+
+| 항목 | 값 | 출처 |
+|------|-----|------|
+| f | 29.9mm | **드론(djmd) 감지값 자동 적용** ✓ |
+| 상태줄 yaw/pitch | 13.2°/−15° | **드론 비행로그**(현재 프레임 짐벌 자세) ✓ |
+| Yaw ± | −16.5° | localStorage 복원된 사용자 보정(기본 0) — f=24 시절 튜닝 잔재, 재조정 권장 |
+| cy₀ | −0.105 | localStorage 복원된 사용자 보정(기본 0) |
+| 지오이드 | 25.8 | 앱 기본값(대전 기준) — 지면고도 모드에선 미사용 |
+| sen W/H | 36/20.25 | 앱 기본값 — P1이 실제 풀프레임이라 사실과 일치 |
+
+## 사용자 안내
+
+초기화 → f 29.9 적용 → Yaw 재조정 → [서버에 저장]으로 camera.json 고정 권장.

docs/history/2026-07-09_2042_djmd-자세-주점-부재-확인.md

@@ -0,0 +1,28 @@
+# 2026-07-09 djmd에 yaw/cy₀ 존재 여부 확인 (Q&A)
+
+**소요 시간**: 5분
+**Context 사용량**: input 780k / output 2k tokens
+
+## 질문
+
+드론 카메라에서 yaw, cy₀ 값도 가져올 수 있지 않은지.
+
+## 분석 (코드 변경 없음)
+
+세그먼트1 중반(프레임 5990, t≈100s, CSV yaw=65.1°) djmd 레코드 전수 해독:
+
+- 존재: 위치(6.4/6.5 위경도 라디안, 6.6 타원체고 mm), 노출(7.4 셔터분모 60~65, 7.5 ISO계열,
+  7.7~7.10 측광), 렌즈(8.6 초점 299=29.9mm, 8.8 포커스거리), 해상도/fps
+- **부재: 짐벌 자세(yaw/pitch/roll), 주점(cx/cy) 캘리브레이션**
+- 7.4=65 는 yaw(65.1°)와 우연히 유사하나 프레임10에서 61(당시 yaw 29.7°)로 불일치 → 셔터 분모로 판정
+
+## 답변 요지
+
+- Yaw±는 로그 계통 오차(자기편각 등)의 보정 델타 — 드론 데이터에 존재 불가
+- cy₀는 DJI **사진 JPG의 XMP DewarpData**에만 존재 (fx/fy/cx/cy/왜곡계수)
+
+## 제안 (미구현)
+
+1. P1 사진 1장 폴더 동봉 시 DewarpData 자동 적용 기능
+2. GPS 진행방위 vs 짐벌 헤딩으로 yaw 바이어스 자동 추정
+3. 라벨 드래그로 yaw 역산 모드 (FOV 보정과 동일 패턴) — 실무적 최선

docs/history/2026-07-09_2046_yaw보정-방안-설명.md

@@ -0,0 +1,15 @@
+# 2026-07-09 Yaw 보정 방안 2·3번 상세 설명 (Q&A)
+
+**소요 시간**: 3분
+**Context 사용량**: input 800k / output 1k tokens
+
+## 내용 (코드 변경 없음)
+
+Yaw 보정 자동화 두 방안을 쉬운 언어로 재설명:
+
+- **2번(자동 추정)**: GPS 이동 방위(정확) vs 짐벌 헤딩(나침반 오차 포함)의 일정한 차이의
+  중앙값을 Yaw± 에 자동 입력. 버튼 한 번, 근사치. 카메라가 진행방향을 안 본 구간이 섞이면 오차.
+- **3번(드래그 역산)**: 일시정지 → 어긋난 라벨을 영상 속 실제 지물 위치로 드래그 →
+  필요한 Yaw± 를 역산해 자동 설정. 기존 FOV 보정 모드(f 역산)와 동일 패턴. 정확·직관적.
+
+추천: 3번(정확) 또는 2번+3번 병행. 사용자 선택 대기.

docs/history/2026-07-09_2050_yaw자동추정-드래그역산-PC저장.md

@@ -0,0 +1,39 @@
+# 2026-07-09 Yaw 자동추정 + 드래그 역산 + 카메라값 PC 저장
+
+**소요 시간**: 15분
+**Context 사용량**: input 850k / output 8k tokens
+
+## 작업 내용 (요청 3건)
+
+### 1. Yaw 자동 추정 버튼 (2번 방안)
+
+- 카메라 파라미터 패널 'Yaw ±' 아래 **[Yaw 자동추정 (비행경로 기준)]** 버튼
+- 알고리즘: 전진 구간(속도≥2m/s)에서 GPS 진행 방위(1초 창 평활) − 짐벌 헤딩 차이 수집
+  (|차|≥60° 는 옆보기 촬영으로 간주 제외) → **중앙값을 Yaw± 로 설정**
+- 실데이터 검증: 세그먼트1 유효 샘플 1889개, 중앙값 **−16.3°**
+  — 사용자가 이전에 수동 튜닝했던 −16.5° 와 거의 일치 (알고리즘·기존 튜닝 상호 검증)
+
+### 2. Yaw 드래그 역산 모드 (3번 방안)
+
+- POI 편집 섹션에 **[🧭 Yaw 보정 — POI를 실제 위치(좌우)로 드래그]** 모드 추가
+  (편집/세로화각 모드와 상호 배제, 기존 fovMode 패턴 재사용)
+- 역산: θ0=atan2(Xc,Zc)(현재 투영각) vs θ1=atan((px*−0.5−cx0)·sW/f)(드롭 지점 요구각)
+  → `yawOffset += (θ0−θ1)`. |Δ|>45° 는 오조작으로 거부
+- 게이팅(커서/히트/팝업/드래그 피드백) 4곳에 yawMode 연결
+
+### 3. 카메라값 저장: 서버 → **사용자 PC 다운로드**
+
+- 📷 줄 버튼 '서버에 저장' → **[PC에 저장]**: 현재 파라미터 전체(Yaw± 보정 결과 포함)를
+  `<영상이름>.camera.json` 으로 브라우저 다운로드
+- 받은 파일을 영상 폴더에 넣으면 폴더 선택 시 최우선 자동 적용(기존 로더 그대로)
+- 서버 라우트(/api/camera)는 유지하되 UI 에서는 미사용
+
+## 검증
+
+- tsc+vite 빌드 통과, 새 번들(index-D5ltlp17.js) 서빙
+- Yaw 자동 추정 실데이터 시뮬레이션 −16.3° (수동값 −16.5° 부합)
+
+## 사용 흐름 (사용자 안내)
+
+1. [Yaw 자동추정] → 대략 정렬 2. [🧭 Yaw 보정] 모드에서 라벨 하나를 실제 지물로 드래그 → 미세 조정
+3. [PC에 저장] → 받은 `<영상이름>.camera.json` 을 영상 폴더로 이동 → 이후 폴더 선택만으로 적용

ecosystem.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   apps: [
     {
-      name: "ghiVideo",
+      name: "ghiVideo-v4",
       // cwd = 이 설정 파일이 있는 위치(프로젝트 루트)를 작업 디렉토리로 고정.
       // 이 한 곳만 앵커로 두고, 아래 경로는 전부 cwd 기준 상대경로로 해석된다.
       cwd: __dirname,
@@ -10,9 +10,11 @@ module.exports = {
       // PATH 의 node 사용 — pm2 start 전에 nvm 으로 Node 20 이 활성화돼 있어야 함
       interpreter: "node",
       env: {
-        PORT: 55000,
+        PORT: 54000,
         // 서버 config.ts 가 path.resolve(cwd 기준)로 해석 → 상대경로 OK
-        VIDEOS_DIR: "samplevideo",
+        // 제주 중산간 도로 데이터 (D: 드라이브, WSL drvfs 마운트 경유)
+        VIDEOS_DIR:
+          "/mnt/d/_project/20260612_abcvideo/import data/v4.0 (제주도)/v4.0 (제주도_필요한 데이터만)/제주 중산간 도로 노선 동영상 비행 로그/경로 1-1",
         HLS_DIR: "storage/hls",
         FRAMES_DIR: "storage/frames",
         THUMBNAILS_DIR: "storage/thumbnails",
@@ -20,7 +22,9 @@ module.exports = {
         // 절대경로 대신 PATH 에서 탐색 (apt 설치 시 /usr/bin 에 있고 PATH 포함됨)
         FFMPEG_PATH: "ffmpeg",
         FFPROBE_PATH: "ffprobe",
-        GEO_DATA_DIR: "samplevideo",
+        // 비행로그 CSV/KML 위치 (드론 CSV 로더는 제주 형식 미지원 — 어댑터 작업 필요)
+        GEO_DATA_DIR:
+          "/mnt/d/_project/20260612_abcvideo/import data/v4.0 (제주도)/v4.0 (제주도_필요한 데이터만)/제주 중산간 도로 노선 동영상 비행 로그/경로 1-1",
         CENTER_CSV_PATH: "pythonsource/input/center.csv",
       },
     },

server/src/app.ts

@@ -15,6 +15,7 @@ import annotationsRouter from './routes/annotations';
 import geoRouter from './routes/geo';
 import elevationRouter from './routes/elevation';
 import tileRouter from './routes/tile';
+import cameraRouter from './routes/camera';
 
 const app = express();
 
@@ -37,6 +38,7 @@ app.use('/api/annotations/:videoId', annotationsRouter);
 app.use('/api/geo', geoRouter);
 app.use('/api/elevation', elevationRouter);
 app.use('/api/tile', tileRouter);
+app.use('/api/camera', cameraRouter);
 
 app.get('/api/health', (_req, res) => {
   res.json({ status: 'ok', timestamp: new Date().toISOString() });

server/src/routes/camera.ts

@@ -0,0 +1,64 @@
+/**
+ * 카메라 파라미터 파일 저장/조회
+ *
+ * 클라이언트(카메라 파라미터 패널)의 '서버에 저장' 버튼이 현재 파라미터를
+ * 영상과 같은 폴더(VIDEOS_DIR)에 `<영상 base>.camera.json` 으로 저장한다.
+ * 이후 사용자가 폴더를 다시 선택하면(영상과 함께 이 json 이 딸려 오면)
+ * 클라이언트 로더가 이 파일의 카메라 값을 최우선으로 적용한다.
+ */
+
+import { Router, Request, Response } from 'express';
+import path from 'path';
+import fs from 'fs';
+import { config } from '../config';
+
+const router = Router();
+
+function cameraFilePath(videoId: string): string | null {
+  const base = videoId.replace(/\.[^.]+$/, '');
+  if (!base) return null;
+  const filePath = path.resolve(config.videosDir, `${base}.camera.json`);
+  // Path traversal 방어 — VIDEOS_DIR 내부만 허용
+  if (!filePath.startsWith(path.resolve(config.videosDir))) return null;
+  return filePath;
+}
+
+// PUT /api/camera/:videoId — 카메라 파라미터 저장 (body = { camera: {...}, model?, savedAt? })
+router.put('/:videoId', (req: Request, res: Response) => {
+  const filePath = cameraFilePath(req.params.videoId);
+  if (!filePath) {
+    res.status(400).json({ error: 'Invalid video ID' });
+    return;
+  }
+  const body = req.body;
+  if (!body || typeof body !== 'object' || typeof body.camera !== 'object') {
+    res.status(400).json({ error: 'body.camera 객체가 필요합니다' });
+    return;
+  }
+  try {
+    fs.writeFileSync(filePath, JSON.stringify(body, null, 2), 'utf-8');
+    res.json({ ok: true, file: path.basename(filePath) });
+  } catch (e) {
+    res.status(500).json({ error: String(e) });
+  }
+});
+
+// GET /api/camera/:videoId — 저장된 카메라 파라미터 조회 (없으면 404)
+router.get('/:videoId', (req: Request, res: Response) => {
+  const filePath = cameraFilePath(req.params.videoId);
+  if (!filePath) {
+    res.status(400).json({ error: 'Invalid video ID' });
+    return;
+  }
+  if (!fs.existsSync(filePath)) {
+    res.status(404).json({ error: 'camera.json 없음' });
+    return;
+  }
+  try {
+    res.json(JSON.parse(fs.readFileSync(filePath, 'utf-8')));
+  } catch (e) {
+    res.status(500).json({ error: String(e) });
+  }
+});
+
+export default router;