From 3f83363ef4b48c17db0ec8ccf6d4d50283b4d787 Mon Sep 17 00:00:00 2001 From: minsung Date: Wed, 1 Apr 2026 16:41:13 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20RoutePanel=20km=20=EB=B0=A9=ED=96=A5=20?= =?UTF-8?q?=ED=99=95=EC=A0=95=20=E2=80=94=20=EB=86=92=EC=9D=80km=3D?= =?UTF-8?q?=EC=9C=84(=EB=8C=80=EC=A0=84=EC=A1=B0=EC=B0=A8=EC=9E=A5),=20?= =?UTF-8?q?=EB=82=AE=EC=9D=80km=3D=EC=95=84=EB=9E=98(=ED=9A=8C=EB=8D=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit kmToY=(1-ratio), visibleRange/drag seek 모두 동일 방향으로 수정 Co-Authored-By: Claude Sonnet 4.6 --- client/src/components/overlay/RoutePanel.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx index e492232..3f0faef 100644 --- a/client/src/components/overlay/RoutePanel.tsx +++ b/client/src/components/overlay/RoutePanel.tsx @@ -198,7 +198,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP ]; const minK = Math.min(...allKms); const maxK = Math.max(...allKms); - const targetKm = minK + yPct * (maxK - minK); + const targetKm = maxK - yPct * (maxK - minK); // Find closest station to target km let bestStation = validStations[0]; @@ -245,7 +245,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP ]; const minKm = Math.min(...allKms); const maxKm = Math.max(...allKms); - const kmToY = (km: number) => ((km - minKm) / (maxKm - minKm)) * 100; + const kmToY = (km: number) => (1 - (km - minKm) / (maxKm - minKm)) * 100; // 교량/터널만 표시 const filteredPois = pois.filter(p => p.category === '\uD130\uB110' || p.category === '\uAD50\uB7C9'); @@ -318,8 +318,8 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP style={{ left: 30, right: 4, - top: `${kmToY(visibleRange.minKm)}%`, - bottom: `${100 - kmToY(visibleRange.maxKm)}%`, + top: `${kmToY(visibleRange.maxKm)}%`, + bottom: `${100 - kmToY(visibleRange.minKm)}%`, border: '1px solid rgba(74,222,128,0.7)', background: 'rgba(74,222,128,0.08)', }}