- {/* Left sidebar — top: video list, bottom: captures */}
+ {/* Left sidebar — top: video list, bottom: captures (UI 숨김, 코드 보존) */}
+ {SHOW_LEFT_PANEL && (
('search');
const [query, setQuery] = useState('');
const [suggestions, setSuggestions] = useState([]);
- const [allPois, setAllPois] = useState([]);
const [searchResult, setSearchResult] = useState<{ poi: GeoPoint; frames: FrameMatch[] } | null>(null);
const [reverseResult, setReverseResult] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const debounceRef = useRef | null>(null);
- // POI 목록 로드 (자동완성용)
- useEffect(() => {
- fetch('/api/geo/pois')
- .then(r => r.json())
- .then(data => setAllPois(Array.isArray(data) ? data : []))
- .catch(() => {});
- }, []);
+ // 클라이언트 지리정보 스토어 구독 (서버 /api/geo/* 대체)
+ const loaded = useGeoStore(s => s.loaded);
+ const frames = useGeoStore(s => s.frames);
+ const pois = useGeoStore(s => s.pois);
+ const stations = useGeoStore(s => s.stations);
+
+ // POI 목록 (자동완성용): 측점 + 건물 통합 (서버 /api/geo/pois 동치)
+ const allPois = React.useMemo(
+ () => (loaded ? [...stations, ...pois] : []),
+ [loaded, stations, pois],
+ );
// 자동완성 필터링
useEffect(() => {
@@ -71,45 +46,44 @@ export default function GeoSearch({ currentFrame, fps, onSeekToFrame }: Props) {
setSuggestions(allPois.filter(p => p.title.toLowerCase().includes(q)).slice(0, 10));
}, [query, allPois]);
- // 건물/측점명으로 프레임 검색
- const handleSearch = useCallback(async (q?: string) => {
+ // 건물/측점명으로 프레임 검색 (클라이언트 검색 — 서버 /api/geo/search 대체)
+ const handleSearch = useCallback((q?: string) => {
const searchQ = (q ?? query).trim();
if (!searchQ) return;
setLoading(true);
setError('');
setSuggestions([]);
try {
- const res = await fetch(`/api/geo/search?q=${encodeURIComponent(searchQ)}&margin=1.0&maxDist=1500`);
- const data = await res.json();
- if (!res.ok) { setError(data.error || '검색 실패'); setSearchResult(null); return; }
- setSearchResult(data);
- } catch {
- setError('서버 연결 실패');
+ if (!loaded) { setError('폴더를 먼저 선택하세요'); setSearchResult(null); return; }
+ const origin = useGeoStore.getState().origin;
+ const combined = [...stations, ...pois];
+ const result = findFramesForPoi(frames, combined, searchQ, 1.0, 1500, 0, origin);
+ if (!result.poi) { setError('일치하는 건물/측점 없음'); setSearchResult(null); return; }
+ setSearchResult({ poi: result.poi, frames: result.frames });
} finally {
setLoading(false);
}
- }, [query]);
+ }, [query, loaded, frames, stations, pois]);
- // 현재 프레임 역조회
- const handleReverse = useCallback(async () => {
+ // 현재 프레임 역조회 (클라이언트 검색 — 서버 /api/geo/frame/{n} 대체)
+ const handleReverse = useCallback(() => {
setLoading(true);
setError('');
try {
- const res = await fetch(`/api/geo/frame/${currentFrame}?margin=1.0`);
- const data = await res.json();
- if (!res.ok) { setError(data.error || '조회 실패'); setReverseResult(null); return; }
- setReverseResult(data.pois ?? []);
- } catch {
- setError('서버 연결 실패');
+ if (!loaded) { setReverseResult([]); return; }
+ const origin = useGeoStore.getState().origin;
+ const combined = [...stations, ...pois];
+ const result = findPoisForFrame(frames, combined, currentFrame, 1.0, 0, origin);
+ setReverseResult(result.pois);
} finally {
setLoading(false);
}
- }, [currentFrame]);
+ }, [currentFrame, loaded, frames, stations, pois]);
- // 탭 전환 시 역조회 자동 실행
+ // 탭 전환/프레임 변경/데이터 로드 시 역조회 자동 실행
useEffect(() => {
if (tab === 'reverse') handleReverse();
- }, [tab, currentFrame]);
+ }, [tab, currentFrame, handleReverse]);
const formatDist = (m: number) =>
m >= 1000 ? `${(m / 1000).toFixed(2)}km` : `${Math.round(m)}m`;
diff --git a/client/src/components/geo/StationVerify.tsx b/client/src/components/geo/StationVerify.tsx
index 9be5278..ed2ece0 100644
--- a/client/src/components/geo/StationVerify.tsx
+++ b/client/src/components/geo/StationVerify.tsx
@@ -2,31 +2,14 @@
* 측점 검증 패널
* - 측점 목록을 클릭하면 해당 측점이 가장 잘 보이는 프레임으로 이동
* - 이동 결과(거리, 화면 위치)를 표시하여 계산 정확도 검증
+ *
+ * 데이터 소스: 클라이언트 geoStore(폴더 선택으로 파싱). 폴더 미선택 시 빈 상태.
*/
-import React, { useState, useEffect, useRef } from 'react';
-
-interface GeoPoint {
- title: string;
- category: string;
- lat: number;
- lon: number;
- z: number;
- type: 'poi' | 'station';
-}
-
-interface FrameMatch {
- frame: number;
- time: number;
- bearingDiff: number;
- elevationDiff: number;
- distance: number;
- pixelX: number;
- pixelY: number;
- groupSize?: number;
- groupStart?: number;
- groupEnd?: number;
-}
+import React, { useState } from 'react';
+import { useGeoStore } from '../../store/geoStore';
+import { findFramesForPoi } from '../../utils/geoSearch';
+import type { GeoPoint, FrameMatch } from '../../types/geo';
interface StationResult {
frames: FrameMatch[];
@@ -38,43 +21,16 @@ interface Props {
onSeekToFrame: (frame: number) => void;
}
-function stationOrder(title: string): number {
- const m = title.match(/(\d+)[Kk](\d+)/);
- if (!m) return 0;
- return parseInt(m[1]) * 1000 + parseInt(m[2]);
-}
-
export default function StationVerify({ fps, onSeekToFrame }: Props) {
- const [stations, setStations] = useState([]);
+ // stations 는 이미 stationOrder 로 정렬되어 있다.
+ const stations = useGeoStore(s => s.stations);
const [selected, setSelected] = useState(null);
const [result, setResult] = useState(null);
- const [loading, setLoading] = useState(false);
const [seekedFrame, setSeekedFrame] = useState(null);
- // 드론 프레임(위경도) — 측점 클릭 시 GPS 최근접 프레임 계산용.
- const framesRef = useRef<{ frame: number; lat: number; lon: number }[]>([]);
-
- useEffect(() => {
- fetch('/api/geo/pois')
- .then(r => r.json())
- .then((data: GeoPoint[]) => {
- const s = Array.isArray(data)
- ? data.filter(p => p.type === 'station').sort((a, b) => stationOrder(a.title) - stationOrder(b.title))
- : [];
- setStations(s);
- })
- .catch(() => {});
- }, []);
-
- useEffect(() => {
- fetch('/api/geo/frames?step=1')
- .then(r => r.json())
- .then((d) => { framesRef.current = Array.isArray(d) ? d : []; })
- .catch(() => {});
- }, []);
// 드론 GPS 가 측점에 가장 가까운 프레임 (StationBar 배지·실제 위치와 동일 기준).
const nearestFrameForStation = (st: GeoPoint): number | null => {
- const fr = framesRef.current;
+ const fr = useGeoStore.getState().frames;
if (!fr.length) return null;
let best = fr[0];
let bd = (fr[0].lat - st.lat) ** 2 + (fr[0].lon - st.lon) ** 2;
@@ -85,10 +41,9 @@ export default function StationVerify({ fps, onSeekToFrame }: Props) {
return best.frame;
};
- const handleClick = async (station: GeoPoint) => {
+ const handleClick = (station: GeoPoint) => {
setSelected(station.title);
setResult(null);
- setLoading(true);
setSeekedFrame(null);
// 영상은 드론 GPS 가 그 측점에 가장 가까운 프레임으로 이동한다.
// (카메라 FOV 검색은 앞을 보는 카메라 특성상 ~200m 앞쪽으로 치우쳐 위치가 어긋남)
@@ -98,15 +53,17 @@ export default function StationVerify({ fps, onSeekToFrame }: Props) {
setSeekedFrame(gpsFrame);
}
// 검증 정보(카메라 시야 프레임/투영)는 참고용으로 표시.
- try {
- const res = await fetch(`/api/geo/search?q=${encodeURIComponent(station.title)}&margin=1.2&maxDist=2000`);
- const data = await res.json();
- setResult(res.ok && data.frames?.length ? data : { frames: [], poi: data.poi ?? station });
- } catch {
- setResult(null);
- } finally {
- setLoading(false);
- }
+ const { frames, pois, stations: sts, origin } = useGeoStore.getState();
+ const { poi, frames: matches } = findFramesForPoi(
+ frames,
+ [...sts, ...pois],
+ station.title,
+ 1.2,
+ 2000,
+ 0,
+ origin,
+ );
+ setResult({ frames: matches, poi: poi ?? station });
};
const pixelQuality = (px: number, py: number) => {
@@ -130,11 +87,10 @@ export default function StationVerify({ fps, onSeekToFrame }: Props) {
{selected && (
(null);
+ const setPanelRef = useCallback((el: HTMLDivElement | null) => {
+ roRef.current?.disconnect();
+ const parent = el?.parentElement;
+ if (!parent) return;
+ const update = () => setScale(parent.clientWidth / STAGE_WIDTH);
+ update();
+ const ro = new ResizeObserver(update);
+ ro.observe(parent);
+ roRef.current = ro;
+ }, []);
+
+ const direction = routeInfo?.direction;
+ const name = routeInfo?.name;
+
+ // 연장: route.json 우선 → 측점 구간 계산 폴백
+ let lengthKm = routeInfo?.lengthKm ?? null;
+ if (lengthKm == null && stations.length) {
+ const kms = stations.map((s) => stationKm(s.title)).filter((k) => k >= 0);
+ if (kms.length >= 2) {
+ lengthKm = Math.round((Math.max(...kms) - Math.min(...kms)) / 10) / 100; // m→km, 소수2
+ }
+ }
+
+ // 소요시간: route.json 우선 → 실제 영상 길이 폴백
+ const dur = formatDuration(routeInfo?.durationSec ?? videoDuration);
+
+ if (!direction && !name && lengthKm == null && !dur) return null;
+
+ return (
+ = {
'\uD130\uB110': '\uD83D\uDE87',
'\uAD50\uB7C9': '\uD83C\uDF09',
@@ -55,11 +57,14 @@ function poiKm(poi: GeoPoint, stations: GeoPoint[]): number {
return Math.round(ka + (kb - ka) * t);
}
-export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelProps) {
- const [stations, setStations] = useState([]);
- const [pois, setPois] = useState([]);
- const [droneFramesLoaded, setDroneFramesLoaded] = useState(false);
- const allDroneFramesRef = useRef([]);
+export default function RoutePanel({ currentTime, visible, onSeek, topPx = 90, bottomPx = 200 }: RoutePanelProps) {
+ // 지리정보는 클라이언트 geoStore(폴더 선택 파싱 결과)에서 직접 읽는다.
+ // 서버 /api/geo/* fetch 대체. 폴더 미선택 시 빈 배열 → idle 렌더.
+ const loaded = useGeoStore(s => s.loaded);
+ const stations = useGeoStore(s => s.stations);
+ const pois = useGeoStore(s => s.pois);
+ const droneFrames = useGeoStore(s => s.frames);
+ const routeMeta = useGeoStore(s => s.routeMeta);
const [currentKm, setCurrentKm] = useState(0);
const [currentStationTitle, setCurrentStationTitle] = useState('');
const [visibleRange, setVisibleRange] = useState<{ minKm: number; maxKm: number } | null>(null);
@@ -69,29 +74,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
const [dragYPct, setDragYPct] = useState(0);
const [dragging, setDragging] = useState(false);
- // Load POIs and stations
- useEffect(() => {
- if (!visible) return;
- fetch('/api/geo/pois')
- .then(r => r.json())
- .then((data: GeoPoint[]) => {
- setStations(data.filter(p => p.type === 'station'));
- setPois(data.filter(p => p.type === 'poi'));
- })
- .catch(() => {});
- }, [visible]);
-
- // Load drone frames when visible and not yet loaded
- useEffect(() => {
- if (!visible || droneFramesLoaded) return;
- fetch('/api/geo/frames?step=1')
- .then(r => r.json())
- .then((data: DroneFrameBasic[]) => {
- allDroneFramesRef.current = data;
- setDroneFramesLoaded(true);
- })
- .catch(() => {});
- }, [visible, droneFramesLoaded]);
+ // POI/측점/드론 프레임은 위 geoStore 셀렉터로 구독한다(폴더 데이터 도착 시 자동 재렌더).
// 시점/종점: 역사(category=역사) POI 중 km 최소/최대
useEffect(() => {
@@ -113,8 +96,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
// Update current km and visible range based on currentTime
useEffect(() => {
- if (!droneFramesLoaded) return;
- const frames = allDroneFramesRef.current;
+ const frames = droneFrames;
if (!frames.length || !stations.length) return;
// Find closest frame by time
@@ -142,9 +124,26 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
nearestDist = d;
}
}
- setCurrentKm(stationKm(nearestStation.title));
setCurrentStationTitle(nearestStation.title);
+ // 현재 km = 측점 폴리라인 투영 연속 체이니지 (재생바 StationBar 와 동일 기준).
+ const sorted = [...validStations].sort((a, b) => stationKm(a.title) - stationKm(b.title));
+ const lat0 = sorted.reduce((s, p) => s + p.lat, 0) / sorted.length;
+ const k = Math.cos((lat0 * Math.PI) / 180) * 111000;
+ const pts = sorted.map(p => ({ x: p.lon * k, y: p.lat * 111000, km: stationKm(p.title) }));
+ const cpx = closest.lon * k, cpy = closest.lat * 111000;
+ let bestD = Infinity, bestKm = pts.length ? pts[0].km : 0;
+ for (let i = 0; i < pts.length - 1; i++) {
+ const a = pts[i], b = pts[i + 1];
+ const dx = b.x - a.x, dy = b.y - a.y;
+ const L2 = dx * dx + dy * dy;
+ const t = L2 === 0 ? 0 : Math.max(0, Math.min(1, ((cpx - a.x) * dx + (cpy - a.y) * dy) / L2));
+ const ex = a.x + dx * t, ey = a.y + dy * t;
+ const dd = (cpx - ex) ** 2 + (cpy - ey) ** 2;
+ if (dd < bestD) { bestD = dd; bestKm = a.km + (b.km - a.km) * t; }
+ }
+ setCurrentKm(bestKm);
+
// Calculate visible range (green box)
const allPoints = [...validStations, ...pois];
const visibleKms: number[] = [];
@@ -165,7 +164,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
} else {
setVisibleRange(null);
}
- }, [currentTime, droneFramesLoaded, stations, pois]);
+ }, [currentTime, droneFrames, stations, pois]);
// Drag handling
const handleMouseDown = useCallback((e: React.MouseEvent) => {
@@ -212,7 +211,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
}
// Find closest drone frame to that station's lat/lon
- const frames = allDroneFramesRef.current;
+ const frames = droneFrames;
if (!frames.length) return;
let bestFrame = frames[0];
let bestFrameDist = (bestFrame.lat - bestStation.lat) ** 2 + (bestFrame.lon - bestStation.lon) ** 2;
@@ -232,10 +231,10 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
};
- }, [dragging, stations, pois, onSeek]);
+ }, [dragging, stations, pois, droneFrames, onSeek]);
- // Render guard
- if (!visible || stations.length === 0) return null;
+ // Render guard — 폴더 미선택(!loaded) 또는 측점 없음이면 idle(미표시)
+ if (!visible || !loaded || stations.length === 0) return null;
const validStations = stations.filter(s => stationKm(s.title) >= 0);
if (validStations.length < 2) return null;
@@ -254,7 +253,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
diff --git a/client/src/components/overlay/StationOverlay.tsx b/client/src/components/overlay/StationOverlay.tsx
index b3c355b..cda1e68 100644
--- a/client/src/components/overlay/StationOverlay.tsx
+++ b/client/src/components/overlay/StationOverlay.tsx
@@ -16,21 +16,8 @@ import {
type CameraCoords,
DEFAULT_CAMERA_PARAMS,
} from '../../utils/geoProjection';
-
-interface GeoPoint {
- title: string;
- category: string;
- lat: number;
- lon: number;
- z: number;
- type: 'poi' | 'station';
-}
-
-interface CenterlinePoint {
- lat: number;
- lon: number;
- z: number;
-}
+import { useGeoStore } from '../../store/geoStore';
+import type { GeoPoint, CenterlinePoint } from '../../types/geo';
const VIDEO_FPS = 30000 / 1001;
@@ -39,6 +26,10 @@ interface Props {
currentTime: number;
fps: number;
visible: boolean;
+ /** 카메라 파라미터 패널 표시 (영상제어 토글). 기본 true. */
+ showPanel?: boolean;
+ /** 카메라 파라미터 패널 top(px) — 노선 배너 아래로 배치. 기본 72. */
+ topPx?: number;
}
// category → 이모지
@@ -112,7 +103,7 @@ function ParamRow({ label, value, min, max, step, unit, decimals = 1, onChange }
// ── 메인 컴포넌트 ─────────────────────────────────────────────────────────────
-export default function StationOverlay({ currentFrame, currentTime, fps, visible }: Props) {
+export default function StationOverlay({ currentFrame, currentTime, fps, visible, showPanel = true, topPx = 72 }: Props) {
const canvasRef = useRefabcvideo
@@ -96,6 +100,7 @@ export default function App() {
@@ -115,7 +120,8 @@ export default function App() {
/>
- {/* Right sidebar — annotation + geo */}
+ {/* Right sidebar — annotation + geo (UI 숨김, 코드 보존) */}
+ {SHOW_RIGHT_PANEL && (
{/* 탭 헤더 */}
+ )}
{/* Add annotation modal */}
{showModal && (
diff --git a/client/src/components/geo/GeoSearch.tsx b/client/src/components/geo/GeoSearch.tsx
index 55c58d5..af00598 100644
--- a/client/src/components/geo/GeoSearch.tsx
+++ b/client/src/components/geo/GeoSearch.tsx
@@ -5,37 +5,9 @@
*/
import React, { useState, useEffect, useCallback, useRef } from 'react';
-
-interface GeoPoint {
- title: string;
- category: string;
- lat: number;
- lon: number;
- z: number;
- type: 'poi' | 'station';
-}
-
-interface FrameMatch {
- frame: number;
- time: number;
- bearingDiff: number;
- elevationDiff: number;
- distance: number;
- pixelX: number;
- pixelY: number;
- groupSize?: number;
- groupStart?: number;
- groupEnd?: number;
-}
-
-interface PoiInFrame {
- poi: GeoPoint;
- bearingDiff: number;
- elevationDiff: number;
- distance: number;
- pixelX: number;
- pixelY: number;
-}
+import { useGeoStore } from '../../store/geoStore';
+import { findFramesForPoi, findPoisForFrame } from '../../utils/geoSearch';
+import type { GeoPoint, FrameMatch, PoiInFrame } from '../../types/geo';
interface Props {
currentFrame: number;
@@ -49,20 +21,23 @@ export default function GeoSearch({ currentFrame, fps, onSeekToFrame }: Props) {
const [tab, setTab] = useState
@@ -163,6 +169,7 @@ export default function App() {
)}
{selected}
- {loading && 검색 중…
}
- {!loading && result && result.frames.length === 0 && (
+ {result && result.frames.length === 0 && (
카메라 시야에 들어오는 프레임 없음
)}
- {!loading && result && result.frames.length > 0 && (() => {
+ {result && result.frames.length > 0 && (() => {
const f = result.frames[0];
return (
<>
diff --git a/client/src/components/overlay/RouteInfo.module.css b/client/src/components/overlay/RouteInfo.module.css
new file mode 100644
index 0000000..6f17ad1
--- /dev/null
+++ b/client/src/components/overlay/RouteInfo.module.css
@@ -0,0 +1,117 @@
+/* videoplayer/src/components/RouteInfo/RouteInfo.module.scss 1:1 이식 (plain CSS). */
+.panel {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 429.5px;
+ height: 65px;
+ overflow: hidden;
+ z-index: 30;
+ pointer-events: none;
+ user-select: none;
+}
+
+.bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 429.5px;
+ height: 65px;
+ display: block;
+}
+
+.direction,
+.routeName {
+ position: absolute;
+ left: 79.5px;
+ margin: 0;
+ font-family: 'Noto Sans KR', var(--font-ui, sans-serif);
+ font-weight: 700;
+ line-height: 1.2;
+ -webkit-text-stroke: 2.5px rgb(13, 44, 36);
+ paint-order: stroke fill;
+}
+
+.direction {
+ top: 8px;
+ font-size: 20px;
+ color: #fff;
+}
+
+.routeName {
+ top: 35px;
+ font-size: 16.5px;
+ letter-spacing: 0.03em;
+ color: rgb(255, 132, 54);
+}
+
+.lengthLabel,
+.durationLabel {
+ position: absolute;
+ margin: 0;
+ font-family: 'Noto Sans KR', var(--font-ui, sans-serif);
+ font-weight: 700;
+ line-height: 1.2;
+ color: #fff;
+ text-shadow:
+ 0 0 4.5px rgb(0, 0, 0),
+ 0 0 4.5px rgb(0, 0, 0);
+}
+
+.lengthLabel {
+ left: 261.5px;
+ top: 13px;
+ font-size: 15px;
+}
+
+.lengthValue,
+.durationValue {
+ position: absolute;
+ margin: 0;
+ font-family: var(--font-ui, sans-serif);
+ font-weight: 700;
+ line-height: 1.2;
+ letter-spacing: -0.05em;
+ color: rgb(255, 132, 54);
+ text-shadow:
+ 0 0 4.5px rgb(0, 0, 0),
+ 0 0 4.5px rgb(0, 0, 0);
+}
+
+.lengthValue {
+ left: 296px;
+ top: 8px;
+ width: 40px;
+ text-align: right;
+ font-size: 19px;
+}
+
+.lengthUnit {
+ position: absolute;
+ left: 342px;
+ top: 11px;
+ margin: 0;
+ font-family: 'Noto Sans KR', var(--font-ui, sans-serif);
+ font-weight: 700;
+ font-size: 16.5px;
+ line-height: 1.2;
+ color: #fff;
+ text-shadow:
+ 0 0 4.5px rgb(0, 0, 0),
+ 0 0 4.5px rgb(0, 0, 0);
+}
+
+.durationValue {
+ left: 257.5px;
+ top: 33px;
+ width: 74px;
+ text-align: right;
+ font-size: 19px;
+ white-space: nowrap;
+}
+
+.durationLabel {
+ left: 337.5px;
+ top: 35px;
+ font-size: 16px;
+}
diff --git a/client/src/components/overlay/RouteInfoOverlay.tsx b/client/src/components/overlay/RouteInfoOverlay.tsx
new file mode 100644
index 0000000..7cd382f
--- /dev/null
+++ b/client/src/components/overlay/RouteInfoOverlay.tsx
@@ -0,0 +1,94 @@
+import { useCallback, useRef, useState } from 'react';
+import { useGeoStore } from '../../store/geoStore';
+import { usePlayerStore } from '../../store/playerStore';
+import styles from './RouteInfo.module.css';
+
+/** 정적 에셋 경로 (Vite base 반영). */
+const bgUrl = `${import.meta.env.BASE_URL}assets/title-panel-bg@2x.png`;
+
+/** 원본 디자인 무대 가로폭(px). 배너는 이 기준으로 만들어졌다. */
+const STAGE_WIDTH = 1920;
+
+/** 초 → "M분 S초". */
+function formatDuration(sec?: number | null): string {
+ if (sec == null || !isFinite(sec) || sec <= 0) return '';
+ const m = Math.floor(sec / 60);
+ const s = Math.round(sec % 60);
+ return s > 0 ? `${m}분 ${s}초` : `${m}분`;
+}
+
+/** "158k700" → 158700 (m). 매칭 실패 시 -1. */
+function stationKm(title: string): number {
+ const m = title.match(/(\d+)[Kk](\d+)/);
+ return m ? parseInt(m[1], 10) * 1000 + parseInt(m[2], 10) : -1;
+}
+
+/**
+ * 영상 좌상단 노선 정보 배너 — videoplayer 의 RouteInfo 디자인 이식.
+ * 값은 모두 선택한 폴더에서 가져온다(하드코딩 없음).
+ * - 연장(lengthKm): route.json 우선 → 측점 CSV 구간(min~max km) 계산 폴백.
+ * - 소요(durationSec): route.json 우선 → 실제 영상 길이 폴백.
+ * - 방향/노선명: CSV에 없는 정보 → route.json(routeInfo).
+ * 표출할 값이 하나도 없으면 렌더하지 않는다.
+ */
+export default function RouteInfoOverlay() {
+ const routeInfo = useGeoStore((s) => s.routeMeta?.routeInfo);
+ const stations = useGeoStore((s) => s.stations);
+ const videoDuration = usePlayerStore((s) => s.duration);
+
+ // 원본처럼 영상 폭/1920 비율로 배너를 스케일 (부모=영상 영역 폭 관측).
+ const [scale, setScale] = useState(1);
+ const roRef = useRef
+ 
+ {direction &&
+ );
+}
diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx
index c092ba5..ea36f2a 100644
--- a/client/src/components/overlay/RoutePanel.tsx
+++ b/client/src/components/overlay/RoutePanel.tsx
@@ -2,23 +2,19 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
import {
toCameraCoords,
pixelFromCamera,
- type DroneFrameBasic,
DEFAULT_CAMERA_PARAMS,
} from '../../utils/geoProjection';
-
-interface GeoPoint {
- title: string;
- category: string;
- lat: number;
- lon: number;
- z: number;
- type: string;
-}
+import { useGeoStore } from '../../store/geoStore';
+import type { GeoPoint } from '../../types/geo';
interface RoutePanelProps {
currentTime: number;
visible: boolean;
onSeek: (time: number) => void;
+ /** 상단 침범 방지: 컨테이너 top(px). 기본 위쪽(배너/카메라파라미터) 아래. */
+ topPx?: number;
+ /** 하단 침범 방지: 컨테이너 bottom(px). 기본 아래쪽(배속/토글/재생바) 위. */
+ bottomPx?: number;
}
const VIDEO_FPS = 30000 / 1001;
@@ -31,6 +27,12 @@ function stationKm(title: string): number {
return parseInt(m[1]) * 1000 + parseInt(m[2]);
}
+/** 미터값 → "158k160" (10m 단위, 재생바 배지와 동일 형식). */
+function formatKm10(m: number): string {
+ const r = Math.round(m / 10) * 10;
+ return `${Math.floor(r / 1000)}k${String(r % 1000).padStart(3, '0')}`;
+}
+
const CATEGORY_EMOJI: Record{direction}
} + {name &&{name}
} + {lengthKm != null && ( + <> +연장
+{lengthKm}
+km
+ + )} + {dur && ( + <> +{dur}
+소요
+ + )} +
{/* Center vertical line */}
- {cleanTitle(routeEndTitle)}
+ {routeMeta?.routeInfo?.endStationName || cleanTitle(routeEndTitle)}
{/* 낮은 km 역명 — 하단 (회덕) */}
- {cleanTitle(routeStartTitle)}
+ {routeMeta?.routeInfo?.startStationName || cleanTitle(routeStartTitle)}
{/* 교량/터널 POIs — 겹침 방지: Y 간격 7% 미만이면 건너뜀 */}
@@ -351,7 +350,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
style={{ position: 'absolute', left: 44 }}
className="bg-orange-500 text-white text-[11px] font-bold px-1.5 py-0.5 rounded whitespace-nowrap"
>
- {cleanTitle(currentStationTitle)}
+ {formatKm10(currentKm)}
+ {showPanel && (
+
+ )}
);
}
diff --git a/client/src/components/player/VideoPlayer.tsx b/client/src/components/player/VideoPlayer.tsx
index 25a5727..174ed30 100644
--- a/client/src/components/player/VideoPlayer.tsx
+++ b/client/src/components/player/VideoPlayer.tsx
@@ -1,11 +1,13 @@
-import React, { useRef, useImperativeHandle, forwardRef, useState } from 'react';
+import React, { useRef, useImperativeHandle, forwardRef, useState, useEffect } from 'react';
import StationOverlay from '../overlay/StationOverlay';
import RoutePanel from '../overlay/RoutePanel';
+import RouteInfoOverlay from '../overlay/RouteInfoOverlay';
import 'video.js/dist/video-js.css';
import { useVideoPlayer } from '../../hooks/useVideoPlayer';
import { useFrameStep } from '../../hooks/useFrameStep';
import { useKeyboard } from '../../hooks/useKeyboard';
import { usePlayerStore } from '../../store/playerStore';
+import { useGeoStore } from '../../store/geoStore';
import { captureFrame, downloadDataUrl } from '../../utils/frameCapture';
import { secondsToTimecode, secondsToFrame } from '../../utils/timecode';
import { useCaptureStore } from '../../store/captureStore';
@@ -35,6 +37,79 @@ const VideoPlayer = forwardRef
{showControls && (
@@ -618,6 +612,7 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
)}
e.preventDefault()}
>
- {/* 영상 영역 — 타임코드를 '영상 하단'에 앵커하기 위한 relative 래퍼 */}
-
- {/* Video.js container — data-vjs-player prevents extra wrapper per CLAUDE.md */}
+ {/* 영상 영역 — 컨테이너 전체를 채우는 relative 래퍼 (사이니지: 화면 가득) */}
+
+ {/* Video.js container — 영상이 영역을 꽉 채우는 베이스 레이어 (object-fit:cover) */}
{/* 영상 클릭 = 재생/일시정지 토글 (컨트롤바 숨김 상태) */}
{
if (source) handleTogglePlay();
}}
/>
- {/* 프레임/타임코드 — 영상 좌상단 코너 HUD (정보 그룹) */}
+ {/* 노선 정보 배너 — 영상 좌상단 (route.json routeInfo) */}
+ ) => void;
- /** 방향 색 트랙 CSS gradient (전진=주황/후진=하늘색, 회전구간 부드러운 전환). */
+ /** 통과 구간 트랙 gradient (전진=주황/후진=청록). */
trackGradient: string;
+ /** 미통과 구간 트랙 gradient (전진=회색/후진=청회색). */
+ trackGradientIdle: string;
+ /** 색(방향)이 바뀌는 전환점 px(스테이지 좌표) — 구분선 위치. */
+ dividers: number[];
/** 데이터 기반 측점값 라벨 (방향 전환점·시종점). */
kmLabels: KmLabel[];
/** 데이터 기반 구조물 (교량/터널/역사). */
structures: StructMark[];
+ /** 시점 역명 (route.json routeInfo 우선, 없으면 첫 측점 title). */
+ startStationName?: string;
+ /** 종점 역명 (route.json routeInfo 우선, 없으면 끝 측점 title). */
+ endStationName?: string;
}
-export function Timeline({ posPx, onSeekDown, trackGradient, kmLabels, structures }: TimelineProps) {
+export function Timeline({
+ posPx,
+ onSeekDown,
+ trackGradient,
+ trackGradientIdle,
+ dividers,
+ kmLabels,
+ structures,
+ startStationName,
+ endStationName,
+}: TimelineProps) {
// 라벨 겹침 방지: x px 순으로 gap px 이내는 1개만 표시.
const dedup = (items: T[], gap: number): T[] => {
const sorted = [...items].sort((a, b) => a.px - b.px);
@@ -32,7 +60,6 @@ export function Timeline({ posPx, onSeekDown, trackGradient, kmLabels, structure
}
return out;
};
- const labels = dedup(kmLabels, 28);
// 구조물명은 텍스트가 길어 더 넓은 간격으로 (겹침 방지).
const structs = dedup(structures, 90);
@@ -41,7 +68,7 @@ export function Timeline({ posPx, onSeekDown, trackGradient, kmLabels, structure
{/* 압축 밖 레이어: 상단 그라데이션과 역명 리더선 */}
- {/* 역명 레이어: 트랙 시작/끝(단일 소스) 기준 신탄진·대전 배치 */}
+ {/* 역명 레이어: 트랙 시작/끝(단일 소스) 기준 시·종점 역명 배치 (route.json/측점 유래) */}
) => void;
}
-export function TimelineCursor({ posPx, mileageText, reverse, onSeekDown }: TimelineCursorProps) {
+// 커서 x 위치(--cursor-x)는 상위(StationBar wrapRef)에서 rAF로 직접 갱신한다(transform).
+export function TimelineCursor({ mileageText, reverse, onSeekDown }: TimelineCursorProps) {
return (
-
- {secondsToTimecode(currentTime)} | F{frame} | {fps}fps
-
- )}
- {/* 재생 배속 — 영상 우하단 (항상 보임). 현재 배속은 파랗게 강조 */}
- {source && (
-
- 배속
- {[1, 1.5, 2, 3, 4].map((r) => (
+ playerRef.current?.currentTime(time)}
+ topPx={paramTop + 40}
+ bottomPx={(barHeight || 130) + 90}
/>
- {/* Empty state placeholder */}
+ {/* Empty state placeholder — 가운데 반투명 폴더 선택 */}
{!source && (
-
+ {/* 재생 배속 (영상제어 ON) */}
+ {showVideoControls && (
+
)}
- {/* 루트 패널 미니맵 — 영상 영역 기준(아래 StationBar 침범 방지) */}
+ {/* 루트 패널 미니맵 — 위(배너+카메라파라미터)·아래(배속/토글/재생바) 침범 방지 */}
+ 배속
+ {[0.5, 1, 1.5, 2, 3, 4].map((r) => (
+
+ ))}
+
+ )}
+ {/* 토글: 영상제어(카메라파라미터·프레임상태·배속) */}
+
- ))}
+ onClick={() => setShowVideoControls((v) => !v)}
+ className={`text-xs px-2 py-1 rounded border font-semibold ${showVideoControls ? 'bg-blue-600/80 border-blue-400 text-white' : 'bg-black/70 border-gray-600 text-gray-300'}`}
+ >영상제어 {showVideoControls ? 'ON' : 'OFF'}
+ {/* 프레임/타임코드 — 영상제어 ON 버튼 오른쪽 */}
+ {showVideoControls && (
+
+ {secondsToTimecode(currentTime)} | F{frame} | {fps}fps
+
+ )}
+
- (
currentTime={currentTime}
fps={fps}
visible={showStations}
+ showPanel={showVideoControls && !!source}
+ topPx={paramTop}
/>
- {/* 측점 기반 재생 바 — videoplayer-main 스테이션 바 이식 (시간 스크러버 대체) */}
+ {/* 측점 기반 재생 바 — 영상 하단에 오버레이로 앵커 (폴더 로드 후) */}
+ {geoLoaded && (
+
(
showStations={showStations}
onToggleStations={() => setShowStations((v) => !v)}
/>
+
+ )}
- {/* abcVideo 전용 유틸 행 (파일/프레임이동/HLS) */}
- ;
duration: number;
playing: boolean;
onTogglePlay: () => void;
@@ -122,6 +127,23 @@ function nearestStationKm(f: DroneFrameBasic, stations: GeoPoint[]): number {
return best;
}
+/** station 값(숫자=미터, "158k400" 문자열) → 미터. 실패 시 -1. */
+function mileageToMeters(v: number | string): number {
+ if (typeof v === 'number') return v;
+ const m = String(v).match(/(\d+)\s*[kK]\s*(\d+)/);
+ if (m) return parseInt(m[1], 10) * 1000 + parseInt(m[2], 10);
+ const n = parseInt(String(v).replace(/[^0-9]/g, ''), 10);
+ return Number.isFinite(n) ? n : -1;
+}
+
+/** 미터값 → "158k710" (10m 단위 반올림). 커서 배지용 십단위 표시. */
+function formatMileage10(m: number): string {
+ const r = Math.round(m / 10) * 10;
+ const km = Math.floor(r / 1000);
+ const mm = r % 1000;
+ return `${km}k${String(mm).padStart(3, '0')}`;
+}
+
/**
* abcVideo 실제 영상 데이터 기반 측점 바.
* - 트랙 x축 = 프레임(시간) 진행. 구간 색 = 측점 km 증가(주황)/감소(하늘색).
@@ -131,6 +153,7 @@ function nearestStationKm(f: DroneFrameBasic, stations: GeoPoint[]): number {
*/
export function StationBar({
currentTime,
+ timeRef,
duration,
playing,
onTogglePlay,
@@ -145,28 +168,18 @@ export function StationBar({
const [scale, setScale] = useState(0.5);
const draggingRef = useRef(false);
- const [pois, setPois] = useState([]);
- const framesRef = useRef([]);
- const [framesVersion, setFramesVersion] = useState(0);
+ // 측점/POI/드론프레임은 폴더 선택으로 채워지는 geoStore에서 읽는다 (서버 /api/geo fetch 대체).
+ const storePois = useGeoStore((s) => s.pois);
+ const storeStations = useGeoStore((s) => s.stations);
+ const pois = useMemo(
+ () => [...storeStations, ...storePois],
+ [storeStations, storePois],
+ );
+ const storeFrames = useGeoStore((s) => s.frames);
+ const routeMeta = useGeoStore((s) => s.routeMeta);
const viewedRef = useRef([]);
const [ready, setReady] = useState(false);
- useEffect(() => {
- fetch('/api/geo/pois')
- .then((r) => r.json())
- .then((data: GeoPoint[]) => setPois(Array.isArray(data) ? data : []))
- .catch(() => {});
- }, []);
- useEffect(() => {
- fetch(`/api/geo/frames?step=${FRAME_STEP}`)
- .then((r) => r.json())
- .then((data: DroneFrameBasic[]) => {
- framesRef.current = Array.isArray(data) ? data : [];
- setFramesVersion((v) => v + 1);
- })
- .catch(() => {});
- }, []);
-
const stations = useMemo(
() => pois.filter((p) => p.type === 'station' && stationKm(p.title) >= 0),
[pois],
@@ -188,8 +201,8 @@ export function StationBar({
// - km: 드론 GPS 최근접 측점 (배지 표시용, 좌측 RoutePanel 과 동일).
// - chain: 측점 폴리라인 투영 연속 체이니지 (구간 방향용, 전환 타이밍 정확).
useEffect(() => {
- const frames = framesRef.current;
- if (!frames.length || !stations.length || !stationLine) return;
+ const frames = storeFrames;
+ if (!frames.length || !stations.length || !stationLine) { setReady(false); return; }
const out: ViewedPoint[] = new Array(frames.length);
for (let i = 0; i < frames.length; i++) {
const f = frames[i];
@@ -202,7 +215,7 @@ export function StationBar({
}
viewedRef.current = out;
setReady(true);
- }, [stations, stationLine, framesVersion]);
+ }, [stations, stationLine, storeFrames]);
/** 현재 시간에 가장 가까운 precompute 인덱스. */
const viewedIdxAtTime = useCallback((t: number): number => {
@@ -221,11 +234,11 @@ export function StationBar({
return best;
}, []);
- // 현재 보는 측점 km
- const realKm = useMemo(() => {
+ // 현재 보는 측점값 — 연속 체이니지(chain)로 10m 해상도 (km 필드는 100m 양자화).
+ const realChain = useMemo(() => {
if (!ready) return null;
const idx = viewedIdxAtTime(currentTime);
- return idx >= 0 ? viewedRef.current[idx].km : null;
+ return idx >= 0 ? viewedRef.current[idx].chain : null;
}, [currentTime, ready, viewedIdxAtTime]);
// 프레임(시간) 진행률 px — 커서의 단조 이동 기준.
@@ -242,10 +255,10 @@ export function StationBar({
// → 진행은 유니크한 프레임 기준, 표시(배지)만 현재 보는 측점(realKm)으로 한다.
const cursorPx = progressPx;
+ // 커서 배지 = 폴더 데이터 기반 연속 체이니지(realChain)를 10m 단위로 표시.
+ // mock ROUTE_LEGS(mileageAtPx) 의존 제거. 데이터 없으면 빈 문자열.
const cursorText =
- realKm !== null && realKm >= 0
- ? formatMileage(realKm)
- : formatMileage(mileageAtPx(cursorPx));
+ realChain !== null && realChain >= 0 ? formatMileage10(realChain) : '';
// ── 데이터 기반 측점 바 ──────────────────────────────────────────
// 시간(프레임) 진행을 트랙 px로 선형 변환.
@@ -269,10 +282,15 @@ export function StationBar({
// 방향은 연속 체이니지(chain)로 판정 — 100m 양자화 km은 전환을 ~13s 빨리 잡아 영상과 어긋남.
const HYST = 100; // m — 이 이상 반대로 움직여야 방향 전환으로 인정 (GPS 노이즈 무시)
const segs: BarSegment[] = [];
- const bounds: { chain: number; time: number }[] = [
- { chain: arr[0].chain, time: arr[0].time },
+ const bounds: { chain: number; time: number; turn: boolean }[] = [
+ { chain: arr[0].chain, time: arr[0].time, turn: false },
];
+ // 시작 방향을 실제 데이터(첫 유의미 이동)로 판정. 기본 증가 가정이 틀리면 첫 구간 색이 반대로 나옴.
let dir: 1 | -1 = 1;
+ for (let i = 1; i < arr.length; i++) {
+ const d = arr[i].chain - arr[0].chain;
+ if (Math.abs(d) >= HYST) { dir = d > 0 ? 1 : -1; break; }
+ }
let extCh = arr[0].chain;
let extIdx = 0;
let startIdx = 0;
@@ -287,7 +305,7 @@ export function StationBar({
endPx: pxAtTime(arr[extIdx].time),
dir,
});
- bounds.push({ chain: extCh, time: arr[extIdx].time });
+ bounds.push({ chain: extCh, time: arr[extIdx].time, turn: true });
dir = dir > 0 ? -1 : 1;
startIdx = extIdx;
extCh = c;
@@ -299,76 +317,217 @@ export function StationBar({
endPx: pxAtTime(arr[arr.length - 1].time),
dir,
});
- bounds.push({ chain: arr[arr.length - 1].chain, time: arr[arr.length - 1].time });
- // 라벨은 전환점 체이니지를 최근접 측점(100m)으로 스냅해 표시.
+ bounds.push({ chain: arr[arr.length - 1].chain, time: arr[arr.length - 1].time, turn: false });
+ // 전환(턴) 지점은 실제 위치를 10m 단위로, 시·종점 등 기본 라벨은 100m 단위로 표시.
const labels: KmLabel[] = bounds.map((b) => ({
px: pxAtTime(b.time),
- text: formatMileage(Math.round(b.chain / 100) * 100),
+ text: b.turn ? formatMileage10(b.chain) : formatMileage(Math.round(b.chain / 100) * 100),
}));
return { barSegments: segs, kmLabels: labels };
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ready, duration, framesVersion, pxAtTime]);
+ }, [ready, duration, storeFrames, pxAtTime]);
- // 구조물(교량/터널/역사) → 체이니지(최근접 측점 km) → 통과 시점 px.
- const structureMarks = useMemo(() => {
- const arr = viewedRef.current;
- if (!ready || !arr.length || duration <= 0 || !stations.length) return [];
- const cats = new Set(['교량', '터널', '역사']);
- const seen = new Set();
- const out: StructMark[] = [];
- for (const p of pois) {
- if (!cats.has(p.category)) continue;
- // (상)/(하)/(인상) 등 변형은 같은 구조물 → base 이름으로 통합(중복 라벨 제거).
- const base = p.title.replace(/\s*[(（].*$/, '').trim();
- if (seen.has(base)) continue;
- seen.add(base);
- const chain = nearestStationKm(
- { lat: p.lat, lon: p.lon } as DroneFrameBasic,
- stations,
- );
- if (chain < 0) continue;
+ // viewedRef의 km(최근접 측점)가 주어진 mileage(m)에 가장 가까운 프레임 시간 → px.
+ const pxAtMileage = useCallback(
+ (mileage: number): number | null => {
+ const arr = viewedRef.current;
+ if (!arr.length) return null;
let best = -1;
let bd = Infinity;
for (let i = 0; i < arr.length; i++) {
- const d = Math.abs(arr[i].km - chain);
+ const d = Math.abs(arr[i].km - mileage);
if (d < bd) {
bd = d;
best = i;
}
}
- if (best >= 0)
- out.push({ px: pxAtTime(arr[best].time), title: base, category: p.category });
+ return best >= 0 ? pxAtTime(arr[best].time) : null;
+ },
+ [pxAtTime],
+ );
+
+ // 구조물(교량/터널/역사) 위치 = 실제 좌표(POI 위경도)에 드론 GPS 가 가장 가까워지는
+ // 프레임의 시점 px. → 영상에 구조물이 실제 지나가는 순간과 일치.
+ // route.json structures 의 이정값은 매칭되는 POI 가 없을 때만 폴백으로 사용.
+ const structureMarks = useMemo(() => {
+ const arr = viewedRef.current;
+ const frames = storeFrames;
+ if (!ready || !arr.length || duration <= 0 || !frames.length) return [];
+
+ // 실좌표(lat/lon)에 드론이 가까워지는 '모든 통과 구간'의 px 목록.
+ // (드론이 같은 구조물을 2번 이상 지날 때 각 통과마다 마커를 찍기 위함)
+ const pxPassesTo = (lat: number, lon: number, offsetM = 0): { px: number; km: number }[] => {
+ const cosLat = Math.cos((lat * Math.PI) / 180);
+ const ds: number[] = new Array(frames.length);
+ let gmin = Infinity;
+ for (let i = 0; i < frames.length; i++) {
+ const dy = (frames[i].lat - lat) * 111000;
+ const dx = (frames[i].lon - lon) * 111000 * cosLat;
+ const d = Math.hypot(dx, dy); // m
+ ds[i] = d;
+ if (d < gmin) gmin = d;
+ }
+ if (!isFinite(gmin)) return [];
+ const TH = Math.max(100, gmin * 3); // 통과 인정 거리(m)
+ // 통과 프레임에서 진행방향으로 offsetM 만큼 이동(GPS 누적거리 기준).
+ const shift = (idx: number): number => {
+ if (!offsetM) return idx;
+ const step = offsetM >= 0 ? 1 : -1;
+ const target = Math.abs(offsetM);
+ let fi = idx, acc = 0;
+ while (acc < target) {
+ const n = fi + step;
+ if (n < 0 || n >= frames.length) break;
+ const dy = (frames[n].lat - frames[fi].lat) * 111000;
+ const dx = (frames[n].lon - frames[fi].lon) * 111000 * cosLat;
+ acc += Math.hypot(dx, dy);
+ fi = n;
+ }
+ return fi;
+ };
+ const out: { px: number; km: number }[] = [];
+ let i = 0;
+ while (i < frames.length) {
+ if (ds[i] < TH) {
+ let j = i, bj = i, bd = ds[i];
+ while (j < frames.length && ds[j] < TH) {
+ if (ds[j] < bd) { bd = ds[j]; bj = j; }
+ j++;
+ }
+ const fi = shift(bj);
+ const px = pxAtTime(frames[fi].frame / VIDEO_FPS);
+ if (px !== null) out.push({ px, km: viewedRef.current[fi]?.chain ?? -1 });
+ i = j;
+ } else i++;
+ }
+ return out;
+ };
+
+ // 측점값(미터)에 해당하는 모든 통과 지점 px (연속 체이니지 기준).
+ const pxPassesAtMileage = (targetM: number): { px: number; km: number }[] => {
+ const arr = viewedRef.current;
+ if (!arr.length) return [];
+ // 측점 인정 범위(m): route.json routeInfo.stationTolerance (폴더별), 기본 20.
+ // 너무 크면 인접 통과가 합쳐져 마커가 밀린다 → 멀리 떨어진 통과만 안 잡힐 때 폴더에서 키울 것.
+ const TH = routeMeta?.routeInfo?.stationTolerance ?? 20;
+ const out: { px: number; km: number }[] = [];
+ let i = 0;
+ while (i < arr.length) {
+ if (Math.abs(arr[i].chain - targetM) < TH) {
+ let j = i, bj = i, bd = Math.abs(arr[i].chain - targetM);
+ while (j < arr.length && Math.abs(arr[j].chain - targetM) < TH) {
+ const d = Math.abs(arr[j].chain - targetM);
+ if (d < bd) { bd = d; bj = j; }
+ j++;
+ }
+ const px = pxAtTime(arr[bj].time);
+ if (px !== null) out.push({ px, km: targetM });
+ i = j;
+ } else i++;
+ }
+ return out;
+ };
+
+ // 구조물 후보 POI(교량/터널/역사) base 이름 → 실좌표.
+ const cats = new Set(['교량', '터널', '역사']);
+ const poiByName = new Map();
+ for (const p of pois) {
+ if (!cats.has(p.category)) continue;
+ const base = p.title.replace(/\s*[(（].*$/, '').trim();
+ if (!poiByName.has(base)) poiByName.set(base, { lat: p.lat, lon: p.lon, category: p.category });
+ }
+
+ const metaStructures = routeMeta?.structures;
+ if (metaStructures && metaStructures.length) {
+ const out: StructMark[] = [];
+ for (const s of metaStructures) {
+ const cat = s.type === 'tunnel' ? '터널' : s.type === 'bridge' ? '교량' : '역사';
+ const sBase = s.name.replace(/\s*[(（].*$/, '').trim();
+ // 이름 매칭 POI 실좌표 우선 → 없으면 route.json 이정값 폴백.
+ const match =
+ poiByName.get(sBase) ??
+ [...poiByName.entries()].find(([k]) => k.includes(sBase) || sBase.includes(k))?.[1];
+ // 우선순위: station(측점값) → 직접 좌표 → POI 이름매칭 → 이정값 폴백.
+ // 각 통과 지점마다 마커(드론이 2번 지나면 2개). 동명 시설물은 각자 station 으로 구분.
+ let passes: { px: number; km: number }[] = [];
+ const off = s.offset ?? 0;
+ if (s.station != null) {
+ const sM = mileageToMeters(s.station);
+ if (sM >= 0) passes = pxPassesAtMileage(sM);
+ }
+ if (!passes.length && s.lat != null && s.lon != null) passes = pxPassesTo(s.lat, s.lon, off);
+ if (!passes.length && match) passes = pxPassesTo(match.lat, match.lon, off);
+ if (!passes.length && s.startMileage != null && s.endMileage != null) {
+ const mid = (s.startMileage + s.endMileage) / 2;
+ const px = pxAtMileage(mid);
+ if (px !== null) passes = [{ px, km: mid }];
+ }
+ for (const p of passes) out.push({ px: p.px, title: s.name, category: cat, km: p.km });
+ }
+ return out;
+ }
+
+ // 폴백: POI category 기반 (실좌표 GPS 근접, 모든 통과).
+ const out: StructMark[] = [];
+ for (const [base, info] of poiByName) {
+ for (const p of pxPassesTo(info.lat, info.lon)) {
+ out.push({ px: p.px, title: base, category: info.category, km: p.km });
+ }
}
return out;
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ready, duration, framesVersion, pois, stations, pxAtTime]);
+ }, [ready, duration, storeFrames, pois, stations, pxAtTime, routeMeta, pxAtMileage]);
- // 방향 색 트랙을 CSS linear-gradient 로 구성. 구간 경계(드론 회전, 측점 변화 ~0,
- // 약 3~4초)는 딱딱한 경계 대신 부드러운 그라데이션으로 주황↔하늘색이 섞이게 한다.
- const trackGradient = useMemo(() => {
- const segs = barSegments;
- if (!segs.length) return '';
- const FWD = '#ff8a25'; // 전진(km 증가) 주황
- const BWD = '#06a4c8'; // 후진(km 감소) 하늘색
- const col = (d: 1 | -1) => (d > 0 ? FWD : BWD);
- // 전환 폭 ≈ 4초 (회전 소요시간). 최소/최대 px 로 가시성 보장.
- const transPx = duration > 0 ? clamp((4 / duration) * TRACK_WIDTH_PX, 6, 40) : 10;
- const pct = (px: number) =>
- clamp(((px - TRACK_START_PX) / TRACK_WIDTH_PX) * 100, 0, 100);
- const stops: string[] = [`${col(segs[0].dir)} 0%`];
- for (let i = 1; i < segs.length; i++) {
- const b = segs[i].startPx;
- const w = Math.min(
- transPx / 2,
- (segs[i - 1].endPx - segs[i - 1].startPx) / 2,
- (segs[i].endPx - segs[i].startPx) / 2,
- );
- stops.push(`${col(segs[i - 1].dir)} ${pct(b - w).toFixed(2)}%`);
- stops.push(`${col(segs[i].dir)} ${pct(b + w).toFixed(2)}%`);
- }
- stops.push(`${col(segs[segs.length - 1].dir)} 100%`);
- return `linear-gradient(to right, ${stops.join(', ')})`;
- }, [barSegments, duration]);
+ // 방향 색 트랙 gradient 빌더(전진/후진 색을 받아 구성). 구간 경계는 부드럽게 섞는다.
+ const buildGradient = useCallback(
+ (FWD: string, BWD: string): string => {
+ const segs = barSegments;
+ if (!segs.length) return '';
+ const col = (d: 1 | -1) => (d > 0 ? FWD : BWD);
+ const pct = (px: number) =>
+ clamp(((px - TRACK_START_PX) / TRACK_WIDTH_PX) * 100, 0, 100);
+ // 전환점에서 색이 '한번에' 바뀌도록 하드 스톱(같은 위치에 두 색).
+ const stops: string[] = [`${col(segs[0].dir)} 0%`];
+ for (let i = 1; i < segs.length; i++) {
+ const bp = pct(segs[i].startPx).toFixed(2);
+ stops.push(`${col(segs[i - 1].dir)} ${bp}%`);
+ stops.push(`${col(segs[i].dir)} ${bp}%`);
+ }
+ stops.push(`${col(segs[segs.length - 1].dir)} 100%`);
+ return `linear-gradient(to right, ${stops.join(', ')})`;
+ },
+ [barSegments, duration],
+ );
+ // 통과 구간 음영 그라데이션(videoplayer 원본): 구간마다 좌→우 3색 셰이딩, 구간 경계는 하드.
+ // 전진 주황: #ffc257 → #ff8a25 → #ff7b1b / 역방향 청록: #5ca887 → #35a7a7 → #06a4c8
+ const buildShaded = useCallback(
+ (fwd: [string, string, string], bwd: [string, string, string]): string => {
+ const segs = barSegments;
+ if (!segs.length) return '';
+ const cols = (d: 1 | -1) => (d > 0 ? fwd : bwd);
+ const pct = (px: number) =>
+ clamp(((px - TRACK_START_PX) / TRACK_WIDTH_PX) * 100, 0, 100);
+ const stops: string[] = [];
+ for (const s of segs) {
+ const a = pct(s.startPx);
+ const b = pct(s.endPx);
+ const c = cols(s.dir);
+ stops.push(`${c[0]} ${a.toFixed(2)}%`);
+ stops.push(`${c[1]} ${((a + b) / 2).toFixed(2)}%`);
+ stops.push(`${c[2]} ${b.toFixed(2)}%`);
+ }
+ return `linear-gradient(to right, ${stops.join(', ')})`;
+ },
+ [barSegments],
+ );
+ // 통과(지나간): 구간별 음영 그라데이션. 미통과: 단색(전진 회색 / 역방향 청회색).
+ const trackGradient = useMemo(
+ () => buildShaded(['#ffc257', '#ff8a25', '#ff7b1b'], ['#5ca887', '#35a7a7', '#06a4c8']),
+ [buildShaded],
+ );
+ const trackGradientIdle = useMemo(() => buildGradient('#7a7a7a', '#637789'), [buildGradient]);
+ // 방향(색)이 바뀌는 전환점 px — 구분선 위치.
+ const dividers = useMemo(() => barSegments.slice(1).map((s) => s.startPx), [barSegments]);
// 현재 위치가 역방향(km 감소, 하늘색) 구간이면 커서도 파란색.
const currentReverse = useMemo(() => {
@@ -390,6 +549,43 @@ export function StationBar({
return () => ro.disconnect();
}, []);
+ // 구조물 아이콘(3-slice PNG) 상태별 이미지를 미리 로드해, passed 전환 시
+ // 새 이미지 로딩으로 인한 깜빡임(잠시 사라짐)을 방지한다.
+ useEffect(() => {
+ const base = import.meta.env.BASE_URL;
+ for (const type of ['bridge', 'tunnel']) {
+ for (const st of ['upcoming', 'passed', 'revisit']) {
+ for (const slice of ['left', 'center', 'right']) {
+ const img = new Image();
+ img.src = `${base}assets/route-segment/${type}/${type}-${st}-${slice}.png`;
+ }
+ }
+ }
+ for (const st of ['upcoming', 'passed', 'revisit']) {
+ const img = new Image();
+ img.src = `${base}assets/route-segment/terminal/circle-${st}.png`;
+ }
+ }, []);
+
+ // 커서/진행바 매끄러운 이동: 라이브 시간(timeRef)을 매 프레임 읽어 CSS 변수만 직접 갱신.
+ // React 리렌더(배지/색)는 currentTime(throttle)으로 별도 처리 → 4K 디코딩 중에도 부드러움.
+ useEffect(() => {
+ if (!timeRef) return;
+ let raf = 0;
+ const tick = (): void => {
+ const el = wrapRef.current;
+ if (el && duration > 0) {
+ const t = timeRef.current ?? 0;
+ const pos = TRACK_START_PX + clamp(t / duration, 0, 1) * TRACK_WIDTH_PX;
+ el.style.setProperty('--pos-px', `${pos}px`);
+ el.style.setProperty('--cursor-x', `${renderX(pos)}px`);
+ }
+ raf = requestAnimationFrame(tick);
+ };
+ raf = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(raf);
+ }, [timeRef, duration]);
+
// 클릭/드래그 트랙 px → 시간(프레임) 선형 변환으로 seek (시간축 일관).
const seekToTrackX = useCallback(
(trackX: number) => {
@@ -435,15 +631,30 @@ export function StationBar({
[seekFromClientX],
);
+ // 터미널 역명: route.json routeInfo 우선, 없으면 측점(stationKm 정렬) 첫/끝 title.
+ const { startStationName, endStationName } = useMemo(() => {
+ const sorted = [...stations].sort(
+ (a, b) => stationKm(a.title) - stationKm(b.title),
+ );
+ const firstTitle = sorted.length ? sorted[0].title : '';
+ const lastTitle = sorted.length ? sorted[sorted.length - 1].title : '';
+ return {
+ startStationName: routeMeta?.routeInfo?.startStationName ?? firstTitle,
+ endStationName: routeMeta?.routeInfo?.endStationName ?? lastTitle,
+ };
+ }, [stations, routeMeta]);
+
// 측점입력(예: 158k200) → 그 측점을 보는(최근접) 프레임으로 seek (실데이터 기반).
const handleJumpToMileage = useCallback(
(km: number) => {
const arr = viewedRef.current;
if (!arr.length || duration <= 0) return;
+ // 연속 체이니지(chain) 기준으로 입력 측점에 가장 가까운 프레임 탐색.
+ // (km은 100m 양자화 최근접 측점이라 입력값과 오차 발생)
let best = -1;
let bd = Infinity;
for (let i = 0; i < arr.length; i++) {
- const d = Math.abs(arr[i].km - km);
+ const d = Math.abs(arr[i].chain - km);
if (d < bd) {
bd = d;
best = i;
@@ -475,12 +686,15 @@ export function StationBar({
posPx={cursorPx}
onSeekDown={handleSeekDown}
trackGradient={trackGradient}
+ trackGradientIdle={trackGradientIdle}
+ dividers={dividers}
kmLabels={kmLabels}
structures={structureMarks}
+ startStationName={startStationName}
+ endStationName={endStationName}
/>
▶
- 동영상을 드래그하거나 아래에서 선택하세요
-로컬 파일 또는 서버 영상 재생 지원
+
+
)}
@@ -174,11 +310,16 @@ const VideoPlayer = forwardRef▶
+ 동영상 폴더를 드래그하거나 선택하세요
+영상 + 측점/POI 데이터가 함께 로드됩니다
+
-
);
}
diff --git a/client/src/hooks/useVideoPlayer.ts b/client/src/hooks/useVideoPlayer.ts
index 915da37..c55d2a0 100644
--- a/client/src/hooks/useVideoPlayer.ts
+++ b/client/src/hooks/useVideoPlayer.ts
@@ -25,13 +25,14 @@ export function useVideoPlayer(containerRef: React.RefObject
-
{/* 트랙 본체 (가로 압축 래퍼) */}
@@ -76,7 +104,7 @@ export function Timeline({ posPx, onSeekDown, trackGradient, kmLabels, structure
{/* 데이터 기반 색 트랙(그라데이션): 전진=주황 / 후진=하늘색.
전체는 저톤(드론 순/역방향 미리보기), 재생되어 커서가 지나간 구간은 원래 색으로 복원. */}
신탄진
-
-
-
-
- 대전
+ {/* 좌측(시점)=역방향 하늘색, 우측(종점)=정방향 주황 */}
+ {startStationName ?? ''}
+
+
+
+
+ {endStationName ?? ''}
- {/* 미재생: 방향색 저톤 (전체 폭) */}
+ {/* 미재생(미통과): 회색/청회색 (전체 폭) */}
- {/* 재생된 구간: 원래 색 복원 (커서까지 clip) */}
+ {/* 재생된 구간: 원래 색 복원 (커서까지 clip). 폭은 CSS 변수(--pos-px)로 매 프레임
+ 직접 갱신되어 React 리렌더 없이 부드럽게 늘어난다. */}
-
- {/* 측점값 라벨 (데이터) */}
-
@@ -114,30 +141,115 @@ export function Timeline({ posPx, onSeekDown, trackGradient, kmLabels, structure
}}
/>
-
- {labels.map((l, i) => (
- (
+
))}
- {/* 구조물 라벨 (데이터: 교량/터널/역사) */}
+ {/* 측점값 라벨 — 각 시설물 측점값(아이콘 위) */}
+
+ {structs.map((s, i) =>
+ s.km >= 0 ? (
+
+
+ {/* 구조물 아이콘 — 재생바 위에 겹쳐 표시 (videoplayer 3-slice) */}
+
+ {structs.map((s, i) => {
+ // 두 상태(무채색 upcoming / 유채색 passed) 아이콘을 겹쳐두고 opacity 로 전환 →
+ // 배경이미지 교체가 없어 전환 순간 깜빡임(사라짐)이 없다.
+ // 역사/터미널 → 원형 아이콘
+ if (s.category === '역사' || s.category === '역') {
+ const D = 18;
+ // 라벨과 동일 트리거(라벨 W=22 → s.px-11). 아이콘·라벨 동시 전환.
+ const passed = posPx >= s.px - 11;
+ const base = import.meta.env.BASE_URL;
+ const common = {
+ position: 'absolute' as const,
+ left: s.px - D / 2,
+ top: 40.5 - D / 2,
+ width: D,
+ height: D,
+ transition: 'opacity 0.12s',
+ };
+ return (
+
+ 
+ 
+
+ );
+ }
+ const segType: StructureType | null =
+ s.category === '터널' ? 'tunnel' : s.category === '교량' ? 'bridge' : null;
+ if (!segType) return null;
+ // 원본(videoplayer) 치수: 교량 22×16/cap6/top32.5, 터널 24×14/cap10/top33.75
+ const isTunnel = segType === 'tunnel';
+ const W = isTunnel ? 24 : 22;
+ const H = isTunnel ? 14 : 16;
+ const CAP = isTunnel ? 10 : 6;
+ const TOP = isTunnel ? 33.75 : 32.5;
+ const passed = posPx >= s.px - W / 2;
+ const seg: StructureSegment = {
+ id: `st-${i}`,
+ type: segType,
+ label: s.title,
+ startMileage: 0,
+ endMileage: 0,
+ left: s.px - W / 2,
+ top: TOP,
+ width: W,
+ height: H,
+ capWidth: CAP,
+ centerHeight: H,
+ passedAtPx: 0,
+ };
+ const layer = (op: number) =>
+ ({ position: 'absolute' as const, inset: 0, opacity: op, transition: 'opacity 0.12s' });
+ return (
+
+
+ );
+ })}
+
+
+ {/* 구조물명 라벨 (바 아래) — 통과 시 아이콘과 함께 색 변경 */}
+
+
- {structs.map((s, i) => (
-
diff --git a/client/src/stationbar/components/TimelineCursor/TimelineCursor.module.scss b/client/src/stationbar/components/TimelineCursor/TimelineCursor.module.scss
index 958e660..14547ad 100755
--- a/client/src/stationbar/components/TimelineCursor/TimelineCursor.module.scss
+++ b/client/src/stationbar/components/TimelineCursor/TimelineCursor.module.scss
@@ -1,9 +1,11 @@
.cursor {
position: absolute;
- left: var(--cursor-x);
+ left: 0;
top: 0;
width: 0;
height: 0;
+ transform: translateX(var(--cursor-x, 0px));
+ will-change: transform;
}
.line {
diff --git a/client/src/stationbar/components/TimelineCursor/TimelineCursor.tsx b/client/src/stationbar/components/TimelineCursor/TimelineCursor.tsx
index 546ca3a..ac6c2dc 100755
--- a/client/src/stationbar/components/TimelineCursor/TimelineCursor.tsx
+++ b/client/src/stationbar/components/TimelineCursor/TimelineCursor.tsx
@@ -1,10 +1,7 @@
import type { MouseEvent } from 'react';
-import { renderX } from '../../mocks/route';
-import { cssVars, px } from '../../utils/cssVars';
import styles from './TimelineCursor.module.scss';
interface TimelineCursorProps {
- posPx: number;
mileageText: string;
/** 현재 위치가 역방향(km 감소) 구간이면 커서를 파란색으로. */
reverse?: boolean;
@@ -12,12 +9,10 @@ interface TimelineCursorProps {
onSeekDown: (e: MouseEvent
- {s.title}
-
- ))}
+ {structs.map((s, i) => {
+ const W = s.category === '터널' ? 24 : 22;
+ const passed = posPx >= s.px - W / 2;
+ return (
+
+ {s.title}
+
+ );
+ })}
+
diff --git a/client/src/store/geoStore.ts b/client/src/store/geoStore.ts
new file mode 100644
index 0000000..8f8f769
--- /dev/null
+++ b/client/src/store/geoStore.ts
@@ -0,0 +1,69 @@
+/**
+ * 클라이언트 지리정보 스토어 (Zustand)
+ *
+ * 폴더 선택으로 파싱한 드론 프레임 / POI / 측점 / 중심선 / ENU 원점을 보관한다.
+ * 4개 소비 컴포넌트(GeoSearch / StationVerify / StationOverlay / RoutePanel)가
+ * 이 스토어를 단일 소스로 구독한다(서버 /api/geo/* 대체).
+ *
+ * playerStore.ts 패턴을 따른다.
+ */
+
+import { create } from 'zustand';
+import type {
+ DroneFrame,
+ GeoPoint,
+ CenterlinePoint,
+ GeoOrigin,
+ RouteMeta,
+} from '../types/geo';
+import { loadFolderGeoData } from '../utils/geoData';
+
+interface GeoStore {
+ loaded: boolean;
+ frames: DroneFrame[];
+ pois: GeoPoint[]; // type==='poi'
+ stations: GeoPoint[]; // type==='station' (stationOrder 정렬)
+ centerline: CenterlinePoint[];
+ origin: GeoOrigin | null;
+ baseName: string | null;
+ routeMeta: RouteMeta | null;
+
+ /**
+ * 폴더 선택 파일에서 지리정보를 파싱해 스토어에 적재한다.
+ * 발견한 영상 File 을 반환(없으면 null) — 호출자가 loadLocalFile 로 재생.
+ */
+ loadFromFolder: (files: FileList | File[]) => Promise;
+ clear: () => void;
+}
+
+const EMPTY = {
+ loaded: false,
+ frames: [] as DroneFrame[],
+ pois: [] as GeoPoint[],
+ stations: [] as GeoPoint[],
+ centerline: [] as CenterlinePoint[],
+ origin: null as GeoOrigin | null,
+ baseName: null as string | null,
+ routeMeta: null as RouteMeta | null,
+};
+
+export const useGeoStore = create((set) => ({
+ ...EMPTY,
+
+ loadFromFolder: async (files) => {
+ const data = await loadFolderGeoData(files);
+ set({
+ loaded: true,
+ frames: data.frames,
+ pois: data.pois,
+ stations: data.stations,
+ centerline: data.centerline,
+ origin: data.origin,
+ baseName: data.baseName,
+ routeMeta: data.routeMeta,
+ });
+ return data.videoFile;
+ },
+
+ clear: () => set({ ...EMPTY }),
+}));
diff --git a/client/src/types/dom.d.ts b/client/src/types/dom.d.ts
new file mode 100644
index 0000000..06f37c8
--- /dev/null
+++ b/client/src/types/dom.d.ts
@@ -0,0 +1,25 @@
+/**
+ * 비표준 DOM 속성 보강
+ *
+ * `` 폴더 선택과
+ * `File.webkitRelativePath` 가 TypeScript 에서 타입체크되도록 확장한다.
+ * (lib.dom 에 webkitRelativePath 는 있으나 webkitdirectory/directory 속성은 없음)
+ */
+
+import 'react';
+
+declare module 'react' {
+ interface InputHTMLAttributes {
+ // 폴더 선택용 비표준 속성 (Chrome/Firefox/Edge)
+ webkitdirectory?: string;
+ directory?: string;
+ }
+}
+
+declare global {
+ interface HTMLInputElement {
+ webkitdirectory: boolean;
+ }
+}
+
+export {};
diff --git a/client/src/types/geo.ts b/client/src/types/geo.ts
new file mode 100644
index 0000000..fbb081f
--- /dev/null
+++ b/client/src/types/geo.ts
@@ -0,0 +1,124 @@
+/**
+ * 지리정보 공유 타입 (클라이언트)
+ *
+ * 서버 server/src/services/geoMatch.ts 의 타입을 그대로 미러링한다.
+ * 4개 소비 컴포넌트(GeoSearch / StationVerify / StationOverlay / RoutePanel)와
+ * geoStore / geoSearch / geoData 가 공유한다.
+ *
+ * 주의: DroneFrame 은 utils/geoProjection.ts 의 DroneFrameBasic 와 필드가 동일하다
+ * (frame/lat/lon/altitude/yaw/pitch/roll/focalLen). 오버레이 투영 유틸이
+ * DroneFrameBasic 을 받으므로, DroneFrame 은 그 타입에 그대로 대입 가능하다.
+ */
+
+/** 드론 프레임 (frame별 위경도/자세) — geoMatch.ts DroneFrame 동치 */
+export interface DroneFrame {
+ frame: number;
+ lat: number;
+ lon: number;
+ altitude: number;
+ yaw: number; // 기수방향 (North=0, 시계방향, degrees)
+ pitch: number; // 카메라 틸트 (음수=아래, degrees)
+ roll: number;
+ focalLen: number; // 35mm 환산 초점거리 (mm)
+}
+
+/** POI/측점 지리점 — geoMatch.ts GeoPoint 동치 */
+export interface GeoPoint {
+ title: string;
+ category: string;
+ lat: number;
+ lon: number;
+ z: number; // 표고 (m)
+ type: 'poi' | 'station';
+}
+
+/** 의미상 별칭 (POI = GeoPoint, Station = GeoPoint with type==='station') */
+export type Poi = GeoPoint;
+export type Station = GeoPoint;
+
+/** 선로 중심선 점 — geoMatch.ts CenterlinePoint 동치 */
+export interface CenterlinePoint {
+ lat: number;
+ lon: number;
+ z: number; // 타원체고(h)
+}
+
+/** 건물/측점명 검색 결과 프레임 — geoMatch.ts FrameMatch 동치 (+ 그룹 메타) */
+export interface FrameMatch {
+ frame: number;
+ time: number; // 초 단위 (frame / fps)
+ bearingDiff: number; // 수평 각도차 (degrees)
+ elevationDiff: number; // 수직 각도차 (degrees)
+ distance: number; // 수평 거리 (m)
+ pixelX: number; // 0~1 정규화
+ pixelY: number; // 0~1 정규화
+ groupSize?: number; // 연속 구간 프레임 수
+ groupStart?: number; // 구간 시작 프레임
+ groupEnd?: number; // 구간 끝 프레임
+}
+
+/** 프레임→POI 역조회 결과 항목 — geoMatch.ts PoiInFrame 동치 */
+export interface PoiInFrame {
+ poi: GeoPoint;
+ bearingDiff: number;
+ elevationDiff: number;
+ distance: number;
+ pixelX: number;
+ pixelY: number;
+}
+
+/** ENU 월드 원점 (첫 측점 기준) */
+export interface GeoOrigin {
+ lat: number;
+ lon: number;
+ alt: number;
+}
+
+/** 노선 구조물 (교량/터널) — route.json structures 항목 */
+export interface RouteStructure {
+ id: string;
+ /** bridge=교량, tunnel=터널, station(또는 그 외)=역사. */
+ type: 'bridge' | 'tunnel' | 'station';
+ name: string;
+ /** 선택(최우선): 이 측점값에 시설물을 배치. 숫자(미터, 158400) 또는 "158k400" 문자열.
+ * 동명 시설물은 각자의 station 값으로 구분 표시된다. */
+ station?: number | string;
+ /** 선택: 구조물 실좌표. station 없을 때 이 좌표로 배치(POI 매칭 불필요). */
+ lat?: number;
+ lon?: number;
+ /** 선택: 위치는 POI 실좌표(이름 매칭)로 계산. 이정값은 매칭 실패 시 폴백용. */
+ startMileage?: number;
+ endMileage?: number;
+ /** 선택: POI/좌표 기반 위치를 진행방향으로 ±N미터 미세조정. */
+ offset?: number;
+}
+
+/** 노선 기본 정보 — route.json routeInfo */
+export interface RouteInfo {
+ name?: string;
+ direction?: string;
+ lengthKm?: number;
+ durationSec?: number;
+ startStationName?: string;
+ endStationName?: string;
+ /** 측점 인정 범위(m): station 위치를 이 거리 이내로 지날 때 마커 표시. 기본 40. 폴더별 조절. */
+ stationTolerance?: number;
+}
+
+/** 폴더 보조 파일 {
+ const buf = await file.arrayBuffer();
+ const text = decodeBytes(buf, encoding);
+ return text
+ .split(/\r?\n/)
+ .filter(Boolean)
+ .map(parseCsvLine);
+}
+
+// ── 파일 식별 헬퍼 ────────────────────────────────────────────────────
+
+/** File 의 폴더 내 상대경로 (webkitRelativePath 우선, 없으면 name). */
+function relPath(f: File): string {
+ return f.webkitRelativePath || f.name;
+}
+
+/** 경로의 마지막 세그먼트(파일명). */
+function baseNameOf(p: string): string {
+ const parts = p.split('/');
+ return parts[parts.length - 1];
+}
+
+/** building/ 하위 파일 여부 (마지막 디렉토리 세그먼트가 building). */
+function isInBuilding(f: File): boolean {
+ const parts = relPath(f).split('/');
+ return parts.length >= 2 && parts[parts.length - 2].toLowerCase() === 'building';
+}
+
+const VIDEO_EXT = /\.(mp4|webm)$/i;
+
+/** 영상 파일 찾기 (mp4/webm, building 제외). */
+export function findVideoFile(files: File[]): File | null {
+ return (
+ files.find((f) => !isInBuilding(f) && VIDEO_EXT.test(baseNameOf(relPath(f)))) ?? null
+ );
+}
+
+/** 영상 파일명에서 base(확장자 제거) 추출. */
+export function deriveBaseName(videoFile: File | null): string | null {
+ if (!videoFile) return null;
+ return baseNameOf(relPath(videoFile)).replace(VIDEO_EXT, '');
+}
+
+// ── 파서 (geoMatch.ts loader 포팅) ────────────────────────────────────
+
+/**
+ * 드론 프레임 CSV 파싱 (UTF-8 BOM, 헤더 이름 인덱스). geoMatch.ts:289-302
+ * 루트(building 제외)의 base.csv 를 식별한다. base 가 없으면 루트 .csv 중
+ * POI/측점/center 가 아닌 첫 파일을 사용한다(영상명 비의존 폴백).
+ */
+export async function parseDroneFrames(
+ files: File[],
+ baseName: string | null,
+): Promise {
+ const rootCsv = files.filter((f) => {
+ if (isInBuilding(f)) return false;
+ const name = baseNameOf(relPath(f));
+ if (!/\.csv$/i.test(name)) return false;
+ if (/POI|측점/i.test(name)) return false;
+ if (name.toLowerCase() === 'center.csv') return false;
+ return true;
+ });
+ if (!rootCsv.length) return [];
+
+ // base 일치 우선, 없으면 첫 루트 csv
+ const droneFile =
+ (baseName && rootCsv.find((f) => baseNameOf(relPath(f)) === `${baseName}.csv`)) ||
+ rootCsv[0];
+
+ const rows = await readCsv(droneFile, 'utf-8');
+ if (rows.length < 2) return [];
+
+ const header = rows[0].map((h) => h.trim().replace(/^/, ''));
+ const fi = (name: string) => header.indexOf(name);
+
+ return rows
+ .slice(1)
+ .map((r) => ({
+ frame: parseInt(r[fi('frame_cnt')], 10),
+ lat: parseFloat(r[fi('latitude')]),
+ lon: parseFloat(r[fi('longitude')]),
+ altitude: parseFloat(r[fi('altitude')]),
+ yaw: parseFloat(r[fi('yaw')]),
+ pitch: parseFloat(r[fi('pitch')]),
+ roll: parseFloat(r[fi('roll')]),
+ focalLen: parseFloat(r[fi('focal_len')]),
+ }))
+ .filter((f) => !isNaN(f.lat));
+}
+
+/**
+ * POI + 측점 CSV 파싱 (building/, EUC-KR, 헤더 이름 인덱스). geoMatch.ts:321-357
+ * POI: category = category_clean || '건물', type='poi'
+ * 측점: category = '측점'(강제), type='station'
+ * 타원체고 버전 우선 규칙 유지.
+ */
+export async function parsePois(files: File[]): Promise {
+ const buildingFiles = files.filter((f) => isInBuilding(f));
+ const result: GeoPoint[] = [];
+
+ const nameOf = (f: File) => baseNameOf(relPath(f));
+
+ // POI 위경도 파일 (_타원체고 버전 우선)
+ const allPoiFiles = buildingFiles.filter(
+ (f) => nameOf(f).includes('POI') && nameOf(f).includes('위경도'),
+ );
+ const poiFiles =
+ allPoiFiles.filter((f) => nameOf(f).includes('타원체고')).length > 0
+ ? allPoiFiles.filter((f) => nameOf(f).includes('타원체고'))
+ : allPoiFiles.filter((f) => !nameOf(f).includes('타원체고'));
+
+ for (const f of poiFiles) {
+ const rows = await readCsv(f, 'euc-kr');
+ if (rows.length < 2) continue;
+ const header = rows[0].map((h) => h.trim().replace(/^/, ''));
+ const fi = (name: string) => header.indexOf(name);
+ for (const r of rows.slice(1)) {
+ const lat = parseFloat(r[fi('lat')]);
+ const lon = parseFloat(r[fi('lon')]);
+ if (isNaN(lat) || isNaN(lon)) continue;
+ result.push({
+ title: r[fi('title')] || '',
+ category: r[fi('category_clean')] || '건물',
+ lat,
+ lon,
+ z: parseFloat(r[fi('z')]) || 0,
+ type: 'poi',
+ });
+ }
+ }
+
+ // 측점 위경도 파일
+ const stationFiles = buildingFiles.filter(
+ (f) => nameOf(f).includes('측점') && nameOf(f).includes('위경도'),
+ );
+ for (const f of stationFiles) {
+ const rows = await readCsv(f, 'euc-kr');
+ if (rows.length < 2) continue;
+ const header = rows[0].map((h) => h.trim().replace(/^/, ''));
+ const fi = (name: string) => header.indexOf(name);
+ for (const r of rows.slice(1)) {
+ const lat = parseFloat(r[fi('lat')]);
+ const lon = parseFloat(r[fi('lon')]);
+ if (isNaN(lat) || isNaN(lon)) continue;
+ result.push({
+ title: r[fi('title')] || '',
+ category: '측점',
+ lat,
+ lon,
+ z: parseFloat(r[fi('z')]) || 0,
+ type: 'station',
+ });
+ }
+ }
+
+ return result;
+}
+
+/**
+ * center.csv 파싱 (EUC-KR, 위치 인덱스 1=lat, 2=lon, 5=z). geoMatch.ts:253-257
+ */
+export async function parseCenterline(files: File[]): Promise {
+ const file = files.find(
+ (f) => !isInBuilding(f) && baseNameOf(relPath(f)).toLowerCase() === 'center.csv',
+ );
+ if (!file) return [];
+
+ const rows = await readCsv(file, 'euc-kr');
+ if (rows.length < 2) return [];
+
+ return rows
+ .slice(1)
+ .map((r) => ({
+ lat: parseFloat(r[1]),
+ lon: parseFloat(r[2]),
+ z: parseFloat(r[5]),
+ }))
+ .filter((p) => !isNaN(p.lat) && !isNaN(p.lon) && !isNaN(p.z));
+}
+
+/**
+ * 폴더 보조 파일 route.json 파싱 (UTF-8, JSON).
+ * ` {
+ const rootJson = files.filter(
+ (f) => !isInBuilding(f) && /\.json$/i.test(baseNameOf(relPath(f))),
+ );
+ if (!rootJson.length) return null;
+
+ const wantBase = baseName ? `${baseName}.route.json`.toLowerCase() : null;
+ const file =
+ (wantBase &&
+ rootJson.find((f) => baseNameOf(relPath(f)).toLowerCase() === wantBase)) ||
+ rootJson.find((f) => baseNameOf(relPath(f)).toLowerCase() === 'route.json');
+ if (!file) return null;
+
+ try {
+ const text = await file.text();
+ return JSON.parse(text) as RouteMeta;
+ } catch {
+ return null;
+ }
+}
+
+// ── 통합 로더 ─────────────────────────────────────────────────────────
+
+/**
+ * 폴더 내 파일에서 영상 + 지리정보를 모두 파싱한다.
+ * 반환값을 geoStore.loadFromFolder 가 스토어에 적재한다.
+ */
+export async function loadFolderGeoData(
+ input: FileList | File[],
+): Promise {
+ const files = Array.from(input);
+
+ const videoFile = findVideoFile(files);
+ const baseName = deriveBaseName(videoFile);
+
+ const [frames, allPoints, centerline, routeMeta] = await Promise.all([
+ parseDroneFrames(files, baseName),
+ parsePois(files),
+ parseCenterline(files),
+ parseRouteMeta(files, baseName),
+ ]);
+
+ const pois = allPoints.filter((p) => p.type === 'poi');
+ const stations = allPoints
+ .filter((p) => p.type === 'station')
+ .sort((a, b) => stationOrder(a.title) - stationOrder(b.title));
+
+ let origin: GeoOrigin | null = null;
+ if (stations.length || frames.length) {
+ origin = getWorldOrigin(frames, allPoints);
+ } else if (centerline.length) {
+ origin = { lat: centerline[0].lat, lon: centerline[0].lon, alt: centerline[0].z };
+ }
+
+ return { videoFile, baseName, frames, pois, stations, centerline, origin, routeMeta };
+}
diff --git a/client/src/utils/geoSearch.ts b/client/src/utils/geoSearch.ts
new file mode 100644
index 0000000..dbb593c
--- /dev/null
+++ b/client/src/utils/geoSearch.ts
@@ -0,0 +1,255 @@
+/**
+ * 클라이언트 지리정보 검색 알고리즘
+ *
+ * 서버 server/src/services/geoMatch.ts 의 검색/투영 로직을 그대로 포팅한다.
+ * (검색 UI 결과를 서버 응답과 동일하게 유지하기 위해, 오버레이용 proj4 기반
+ * geoProjection.ts 와는 별개의 단순 ENU(cos-lat 근사) 투영을 사용한다.)
+ *
+ * 싱글턴 캐시(loadFrames/loadPois) 대신 데이터를 인자로 받는 순수 함수로 변경했다.
+ * 입력 데이터는 geoStore 에서 읽어 넘긴다.
+ */
+
+import type {
+ DroneFrame,
+ GeoPoint,
+ FrameMatch,
+ PoiInFrame,
+ GeoOrigin,
+} from '../types/geo';
+
+// ── 카메라/지구 상수 (geoMatch.ts 동일) ──────────────────────────────
+const SENSOR_W_MM = 36;
+const SENSOR_H_MM = 24;
+const R_EARTH = 6371000;
+const DEFAULT_FPS = 30;
+const GAP = 30;
+
+export function toRad(deg: number): number {
+ return (deg * Math.PI) / 180;
+}
+
+/** 위경도+표고 → 월드 ENU (m). refLat/refLon/refAlt = 원점. geoMatch.ts:78-87 */
+export function geoToEnu(
+ lat: number, lon: number, alt: number,
+ refLat: number, refLon: number, refAlt: number,
+): [number, number, number] {
+ const cosRef = Math.cos(toRad(refLat));
+ const e = toRad(lon - refLon) * cosRef * R_EARTH; // East (m)
+ const n = toRad(lat - refLat) * R_EARTH; // North (m)
+ const u = alt - refAlt; // Up (m)
+ return [e, n, u];
+}
+
+/** 월드 ENU 벡터 + 카메라 자세 → 정규화 픽셀. geoMatch.ts:90-124 */
+export function projectEnu(
+ relEnu: [number, number, number],
+ yawDeg: number,
+ pitchDeg: number,
+ focalMm: number,
+ yawOffset = 0,
+): { px: number; py: number; cx: number; cy: number; cz: number } | null {
+ const yaw = toRad(yawDeg + yawOffset);
+ const pitch = toRad(pitchDeg);
+ const cosY = Math.cos(yaw), sinY = Math.sin(yaw);
+ const cosP = Math.cos(pitch), sinP = Math.sin(pitch);
+
+ const fwd: readonly [number, number, number] = [sinY * cosP, cosY * cosP, sinP];
+ const right: readonly [number, number, number] = [cosY, -sinY, 0];
+ const up: readonly [number, number, number] = [
+ right[1] * fwd[2] - right[2] * fwd[1],
+ right[2] * fwd[0] - right[0] * fwd[2],
+ right[0] * fwd[1] - right[1] * fwd[0],
+ ];
+
+ const dot = (a: readonly [number, number, number], b: readonly [number, number, number]) =>
+ a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+
+ const cx = dot(relEnu, right);
+ const cy = dot(relEnu, up);
+ const cz = dot(relEnu, fwd);
+
+ if (cz <= 0) return null;
+
+ const f = focalMm || 24;
+ const px = 0.5 + (cx / cz) * (f / SENSOR_W_MM);
+ const py = 0.5 - (cy / cz) * (f / SENSOR_H_MM);
+ return { px, py, cx, cy, cz };
+}
+
+/** DroneFrame + POI + 공통 기준점 → 픽셀. geoMatch.ts:127-156 */
+export function project3D(
+ drone: DroneFrame,
+ poi: { lat: number; lon: number; z: number },
+ yawOffset = 0,
+ origin?: GeoOrigin,
+): { px: number; py: number; dist: number; h: number; v: number; inFov: boolean } | null {
+ const ref = origin ?? { lat: drone.lat, lon: drone.lon, alt: drone.altitude };
+
+ const stEnu = geoToEnu(poi.lat, poi.lon, poi.z, ref.lat, ref.lon, ref.alt);
+ const drEnu = geoToEnu(drone.lat, drone.lon, drone.altitude, ref.lat, ref.lon, ref.alt);
+ const relEnu: [number, number, number] = [
+ stEnu[0] - drEnu[0],
+ stEnu[1] - drEnu[1],
+ stEnu[2] - drEnu[2],
+ ];
+ const dist = Math.sqrt(relEnu[0] ** 2 + relEnu[1] ** 2);
+
+ const res = projectEnu(relEnu, drone.yaw, drone.pitch, drone.focalLen || 24, yawOffset);
+ if (!res) return null;
+
+ const h = Math.atan2(res.cx, res.cz) * (180 / Math.PI);
+ const v = Math.atan2(res.cy, res.cz) * (180 / Math.PI);
+ const inFov = res.px >= 0 && res.px <= 1 && res.py >= 0 && res.py <= 1;
+ return {
+ px: Math.max(0, Math.min(1, res.px)),
+ py: Math.max(0, Math.min(1, res.py)),
+ dist, h, v, inFov,
+ };
+}
+
+/** 측점 km 정렬 키. geoMatch.ts:371-375 */
+export function stationOrder(title: string): number {
+ const m = title.match(/(\d+)[Kk](\d+)/);
+ if (!m) return 0;
+ return parseInt(m[1]) * 1000 + parseInt(m[2]);
+}
+
+/** 첫 번째 측점 위치를 ENU 원점으로 반환. geoMatch.ts:378-387 */
+export function getWorldOrigin(frames: DroneFrame[], pois: GeoPoint[]): GeoOrigin {
+ const stations = pois
+ .filter((p) => p.type === 'station')
+ .sort((a, b) => stationOrder(a.title) - stationOrder(b.title));
+ if (stations.length) {
+ return { lat: stations[0].lat, lon: stations[0].lon, alt: stations[0].z };
+ }
+ return frames[0]
+ ? { lat: frames[0].lat, lon: frames[0].lon, alt: frames[0].altitude }
+ : { lat: 0, lon: 0, alt: 0 };
+}
+
+/**
+ * 건물/측점명 검색 → 매칭 POI + 카메라 시야 프레임 목록. geoMatch.ts:399-468
+ * pois 는 POI+측점 통합 배열을 넘긴다(검색 대상 전체).
+ */
+export function findFramesForPoi(
+ frames: DroneFrame[],
+ pois: GeoPoint[],
+ query: string,
+ marginFactor = 1.0,
+ maxDist = 2000,
+ yawOffset = 0,
+ origin?: GeoOrigin | null,
+): { poi: GeoPoint | null; frames: FrameMatch[] } {
+ const q = query.trim().toLowerCase();
+ const poi = pois.find((p) => p.title.toLowerCase().includes(q));
+ if (!poi) return { poi: null, frames: [] };
+
+ const matches: FrameMatch[] = [];
+ const ref = origin ?? getWorldOrigin(frames, pois);
+
+ for (const f of frames) {
+ const res = project3D(f, poi, yawOffset, ref);
+ if (!res) continue;
+ if (res.dist > maxDist) continue;
+
+ const halfW = 0.5 * marginFactor;
+ const halfH = 0.5 * marginFactor;
+ const rawPx = 0.5 + (res.px - 0.5);
+ const rawPy = 0.5 + (res.py - 0.5);
+ if (Math.abs(rawPx - 0.5) > halfW || Math.abs(rawPy - 0.5) > halfH) continue;
+
+ matches.push({
+ frame: f.frame,
+ time: f.frame / DEFAULT_FPS,
+ bearingDiff: res.h,
+ elevationDiff: res.v,
+ distance: res.dist,
+ pixelX: res.px,
+ pixelY: res.py,
+ });
+ }
+
+ matches.sort((a, b) => a.frame - b.frame);
+
+ const groups: FrameMatch[][] = [];
+ let group: FrameMatch[] = [];
+ for (const m of matches) {
+ if (group.length === 0 || m.frame - group[group.length - 1].frame <= GAP) {
+ group.push(m);
+ } else {
+ groups.push(group);
+ group = [m];
+ }
+ }
+ if (group.length > 0) groups.push(group);
+
+ const best = groups.map((g) => {
+ const groupStart = g[0].frame;
+ const groupEnd = g[g.length - 1].frame;
+ g.sort(
+ (a, b) =>
+ a.bearingDiff ** 2 + a.elevationDiff ** 2 - (b.bearingDiff ** 2 + b.elevationDiff ** 2),
+ );
+ return { ...g[0], groupSize: g.length, groupStart, groupEnd };
+ });
+
+ best.sort(
+ (a, b) =>
+ a.bearingDiff ** 2 + a.elevationDiff ** 2 - (b.bearingDiff ** 2 + b.elevationDiff ** 2),
+ );
+
+ return { poi, frames: best };
+}
+
+/**
+ * 프레임 번호 → 해당 프레임에서 카메라 시야에 들어오는 POI/측점 목록. geoMatch.ts:473-512
+ */
+export function findPoisForFrame(
+ frames: DroneFrame[],
+ pois: GeoPoint[],
+ frameNum: number,
+ marginFactor = 1.0,
+ yawOffset = 0,
+ origin?: GeoOrigin | null,
+): { droneFrame: DroneFrame | null; pois: PoiInFrame[] } {
+ const drone =
+ frames.find((f) => f.frame === frameNum) ??
+ (() => {
+ let best = frames[0];
+ let bestD = Math.abs((best?.frame ?? 0) - frameNum);
+ for (const f of frames) {
+ const d = Math.abs(f.frame - frameNum);
+ if (d < bestD) {
+ bestD = d;
+ best = f;
+ }
+ if (d === 0) break;
+ }
+ return best;
+ })();
+ if (!drone) return { droneFrame: null, pois: [] };
+
+ const result: PoiInFrame[] = [];
+ const ref = origin ?? getWorldOrigin(frames, pois);
+
+ for (const poi of pois) {
+ const res = project3D(drone, poi, yawOffset, ref);
+ if (!res) continue;
+
+ const halfW = 0.5 * marginFactor;
+ const halfH = 0.5 * marginFactor;
+ if (Math.abs(res.px - 0.5) > halfW || Math.abs(res.py - 0.5) > halfH) continue;
+
+ result.push({
+ poi,
+ bearingDiff: res.h,
+ elevationDiff: res.v,
+ distance: res.dist,
+ pixelX: res.px,
+ pixelY: res.py,
+ });
+ }
+
+ result.sort((a, b) => a.distance - b.distance);
+ return { droneFrame: drone, pois: result };
+}
diff --git a/ecosystem.config.js b/ecosystem.config.js
index f434d24..070b8c9 100755
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@@ -1,30 +1,27 @@
-const path = require("path");
-
-// 이 설정 파일이 있는 위치(프로젝트 루트) 기준으로 모든 경로를 계산한다.
-// → 프로젝트를 다른 경로로 옮겨도 그대로 동작.
-const ROOT = __dirname;
-
module.exports = {
apps: [
{
name: "defVideo",
- // 빌드 산출물 (npm run build 후 생성됨)
- script: path.join(ROOT, "server/dist/server/src/app.js"),
- cwd: ROOT,
- // nvm 으로 설치한 Node 20 을 명시 (PM2 데몬이 시스템 Node 12 를 쓰지 않도록)
- interpreter: "/home/hanmac/.nvm/versions/node/v20.20.2/bin/node",
+ // cwd = 이 설정 파일이 있는 위치(프로젝트 루트)를 작업 디렉토리로 고정.
+ // 이 한 곳만 앵커로 두고, 아래 경로는 전부 cwd 기준 상대경로로 해석된다.
+ cwd: __dirname,
+ // script: cwd 기준 상대경로 (npm run build 후 생성)
+ script: "server/dist/server/src/app.js",
+ // PATH 의 node 사용 — pm2 start 전에 nvm 으로 Node 20 이 활성화돼 있어야 함
+ interpreter: "node",
env: {
PORT: 55173,
- VIDEOS_DIR: path.join(ROOT, "samplevideo"),
- HLS_DIR: path.join(ROOT, "storage/hls"),
- FRAMES_DIR: path.join(ROOT, "storage/frames"),
- THUMBNAILS_DIR: path.join(ROOT, "storage/thumbnails"),
- DB_PATH: path.join(ROOT, "storage/annotations.db"),
- // apt 로 설치하면 /usr/bin 에 생성됨
- FFMPEG_PATH: "/usr/bin/ffmpeg",
- FFPROBE_PATH: "/usr/bin/ffprobe",
- GEO_DATA_DIR: path.join(ROOT, "samplevideo"),
- CENTER_CSV_PATH: path.join(ROOT, "pythonsource/input/center.csv"),
+ // 서버 config.ts 가 path.resolve(cwd 기준)로 해석 → 상대경로 OK
+ VIDEOS_DIR: "samplevideo",
+ HLS_DIR: "storage/hls",
+ FRAMES_DIR: "storage/frames",
+ THUMBNAILS_DIR: "storage/thumbnails",
+ DB_PATH: "storage/annotations.db",
+ // 절대경로 대신 PATH 에서 탐색 (apt 설치 시 /usr/bin 에 있고 PATH 포함됨)
+ FFMPEG_PATH: "ffmpeg",
+ FFPROBE_PATH: "ffprobe",
+ GEO_DATA_DIR: "samplevideo",
+ CENTER_CSV_PATH: "pythonsource/input/center.csv",
},
},
],
diff --git a/server/src/services/ffmpeg.ts b/server/src/services/ffmpeg.ts
index 553d564..0246cd0 100644
--- a/server/src/services/ffmpeg.ts
+++ b/server/src/services/ffmpeg.ts
@@ -109,11 +109,12 @@ export function getVideoFps(probe: FFprobeResult): number {
return den ? num / den : 30;
}
-export async function checkFFmpegInstalled(): Promise {
- try {
- await runFFprobe(['-version']);
- return true;
- } catch {
- return false;
- }
+export function checkFFmpegInstalled(): Promise {
+ // `ffprobe -version` 은 JSON 이 아닌 일반 텍스트를 출력하므로 runFFprobe(JSON 파싱) 로
+ // 검사하면 항상 실패한다. 여기서는 실행 가능 여부(exit code 0)만 직접 확인한다.
+ return new Promise((resolve) => {
+ const proc = spawn(config.ffprobePath, ['-version'], { stdio: 'ignore' });
+ proc.on('close', (code) => resolve(code === 0));
+ proc.on('error', () => resolve(false));
+ });
}
{mileageText}