From 7b837cf4a4c2e21918aa0a31adc005cfea9be035 Mon Sep 17 00:00:00 2001
From: minsung <minsung.kim.hanmaceng@gmail.com>
Date: Wed, 1 Apr 2026 16:24:53 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20RoutePanel=20=EC=8B=9C=EC=A0=90/?=
 =?UTF-8?q?=EC=A2=85=EC=A0=90=20=EA=B3=A0=EC=A0=95=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EC=A0=9C=EA=B1=B0=20=E2=80=94=20=EA=B5=90=EB=9F=89?=
 =?UTF-8?q?/=ED=84=B0=EB=84=90=20=EC=9D=B4=EB=A6=84=EB=A7=8C=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
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 | 33 ++------------------
 1 file changed, 3 insertions(+), 30 deletions(-)

diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx
index d34836d..447920a 100644
--- a/client/src/components/overlay/RoutePanel.tsx
+++ b/client/src/components/overlay/RoutePanel.tsx
@@ -225,11 +225,6 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
   const maxKm = Math.max(...allKms);
   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');
 
@@ -241,38 +236,16 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
     >
       {/* Center vertical line */}
       <div
-        className="absolute"
-        style={{ left: 36, width: 2, top: 20, bottom: 20, background: 'rgba(255,255,255,0.3)' }}
+        className="absolute top-0 bottom-0"
+        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 */}
       {filteredPois.map((poi, i) => {
         const km = poiKm(poi, validStations);
         if (km < 0) return null;
         const y = kmToY(km);
-        if (y < 5 || y > 95) return null; // 시점/종점 영역과 겹치지 않게
+        if (y < 2 || y > 98) return null;
         return (
           <div
             key={`poi-${i}`}