From eecd17c59085a3e732683c03fd6cde5508cc7184 Mon Sep 17 00:00:00 2001
From: minsung <minsung.kim.hanmaceng@gmail.com>
Date: Wed, 1 Apr 2026 16:37:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20RoutePanel=20=EC=A0=95=EB=A0=AC=20?=
 =?UTF-8?q?=EB=B0=A9=ED=96=A5=20=EC=88=98=EC=A0=95=20(=EB=82=AE=EC=9D=80km?=
 =?UTF-8?q?=3D=EC=9C=84,=20=EB=86=92=EC=9D=80km=3D=EC=95=84=EB=9E=98),=20?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=2080%,=20=EA=B2=B9=EC=B9=A8=20=EA=B0=84?=
 =?UTF-8?q?=EA=B2=A9=209%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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 (
     <div
       ref={panelRef}
       className="absolute left-0 w-28 border-r border-white/20 z-30"
-      style={{ top: '5%', height: '90%', background: 'rgba(0,0,0,0.6)' }}
+      style={{ top: '8%', height: '80%', background: 'rgba(0,0,0,0.6)' }}
     >
       {/* Center vertical line */}
       <div
@@ -281,7 +276,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
 
       {/* 교량/터널 POIs — 겹침 방지: Y 간격 7% 미만이면 건너뜀 */}
       {(() => {
-        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)',
           }}