diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx index 57bdf3d..e492232 100644 --- a/client/src/components/overlay/RoutePanel.tsx +++ b/client/src/components/overlay/RoutePanel.tsx @@ -245,21 +245,16 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP ]; const minKm = Math.min(...allKms); const maxKm = Math.max(...allKms); - const kmToY = (km: number) => (1 - (km - minKm) / (maxKm - minKm)) * 100; + const kmToY = (km: number) => ((km - minKm) / (maxKm - minKm)) * 100; // 교량/터널만 표시 const filteredPois = pois.filter(p => p.category === '\uD130\uB110' || p.category === '\uAD50\uB7C9'); - // 시점/종점 측점명 - const sortedByKm = [...validStations].sort((a, b) => stationKm(a.title) - stationKm(b.title)); - const startTitle = sortedByKm[0]?.title ?? ''; - const endTitle = sortedByKm[sortedByKm.length - 1]?.title ?? ''; - return (
{/* Center vertical line */}
{ - const MIN_GAP = 7; // % + const MIN_GAP = 9; // % const placed: number[] = []; return filteredPois.map((poi, i) => { const km = poiKm(poi, validStations); @@ -323,8 +318,8 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP style={{ left: 30, right: 4, - top: `${kmToY(visibleRange.maxKm)}%`, - bottom: `${100 - kmToY(visibleRange.minKm)}%`, + top: `${kmToY(visibleRange.minKm)}%`, + bottom: `${100 - kmToY(visibleRange.maxKm)}%`, border: '1px solid rgba(74,222,128,0.7)', background: 'rgba(74,222,128,0.08)', }}