From e97c62c4457ce749b23ba0f010d60413247a954f Mon Sep 17 00:00:00 2001
From: minsung <minsung.kim.hanmaceng@gmail.com>
Date: Wed, 1 Apr 2026 16:11:01 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20RoutePanel=20=EC=B8=A1=EC=A0=90=20?=
 =?UTF-8?q?=EC=84=A0=ED=98=95=20=EC=9C=84=EC=95=84=EB=9E=98=20=EB=B0=98?=
 =?UTF-8?q?=EC=A0=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

kmToY 함수를 반전(1 - ratio)하여 높은 km값이 아래, 낮은 km값이 위에 오도록 수정.
visibleRange 초록 박스 top/bottom도 함께 교정.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/components/overlay/RoutePanel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx
index fe19a1d..0c76c03 100644
--- a/client/src/components/overlay/RoutePanel.tsx
+++ b/client/src/components/overlay/RoutePanel.tsx
@@ -223,7 +223,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;
 
   return (
     <div
@@ -289,8 +289,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)',
           }}