kimminsung/dronevideoplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: RoutePanel 시점/종점 고정 레이블 제거 — 교량/터널 이름만 표시

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
minsung
2026-04-01 16:24:53 +09:00
parent 8c475c9ee8
commit 7b837cf4a4
1 changed files with 3 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/overlay/RoutePanel.tsx
View File

@@ -225,11 +225,6 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
const maxKm = Math.max(...allKms); const maxKm = Math.max(...allKms);
const kmToY = (km: number) => (1 - (km - minKm) / (maxKm - minKm)) * 100; const kmToY = (km: number) => (1 - (km - minKm) / (maxKm - minKm)) * 100;
// 시점/종점 측점
const sortedByKm = [...validStations].sort((a, b) => stationKm(a.title) - stationKm(b.title));
const startStation = sortedByKm[0];
const endStation = sortedByKm[sortedByKm.length - 1];
// 교량/터널만 표시 // 교량/터널만 표시
const filteredPois = pois.filter(p => p.category === '\uD130\uB110' || p.category === '\uAD50\uB7C9'); const filteredPois = pois.filter(p => p.category === '\uD130\uB110' || p.category === '\uAD50\uB7C9');
@@ -241,38 +236,16 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
> >
{/* Center vertical line */} {/* Center vertical line */}
<div <div
className="absolute" className="absolute top-0 bottom-0"
style={{ left: 36, width: 2, top: 20, bottom: 20, background: 'rgba(255,255,255,0.3)' }} style={{ left: 36, width: 2, background: 'rgba(255,255,255,0.3)' }}
/> />
{/* 시점 label — top */}
<div className="absolute left-0 right-0 flex items-center" style={{ top: 4 }}>
<div className="text-[9px] text-white/50 text-right" style={{ width: 34 }}>
{startStation.title}
</div>
<div style={{ position: 'absolute', left: 30, width: 12, display: 'flex', justifyContent: 'center' }}>
<div className="w-2 h-2 rounded-full bg-white/50" />
</div>
<div className="text-[8px] text-white/40 ml-1" style={{ position: 'absolute', left: 44 }}>시점</div>
</div>
{/* 종점 label — bottom */}
<div className="absolute left-0 right-0 flex items-center" style={{ bottom: 4 }}>
<div className="text-[9px] text-white/50 text-right" style={{ width: 34 }}>
{endStation.title}
</div>
<div style={{ position: 'absolute', left: 30, width: 12, display: 'flex', justifyContent: 'center' }}>
<div className="w-2 h-2 rounded-full bg-white/50" />
</div>
<div className="text-[8px] text-white/40" style={{ position: 'absolute', left: 44 }}>종점</div>
</div>
{/* 교량/터널 POIs */} {/* 교량/터널 POIs */}
{filteredPois.map((poi, i) => { {filteredPois.map((poi, i) => {
const km = poiKm(poi, validStations); const km = poiKm(poi, validStations);
if (km < 0) return null; if (km < 0) return null;
const y = kmToY(km); const y = kmToY(km);
if (y < 5 || y > 95) return null; // 시점/종점 영역과 겹치지 않게 if (y < 2 || y > 98) return null;
return ( return (
<div <div
key={`poi-${i}`} key={`poi-${i}`}