From f5866d8395866c3836ce534f6964b8de8cfc41c6 Mon Sep 17 00:00:00 2001
From: minsung <minsung.kim.hanmaceng@gmail.com>
Date: Wed, 1 Apr 2026 16:27:10 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20RoutePanel=20=EC=8B=9C=EC=A0=90/?=
 =?UTF-8?q?=EC=A2=85=EC=A0=90=20=EC=B8=A1=EC=A0=90=EB=AA=85=20=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8/=ED=95=98=EB=8B=A8=20=ED=91=9C=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 | 21 ++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx
index 447920a..17e2b25 100644
--- a/client/src/components/overlay/RoutePanel.tsx
+++ b/client/src/components/overlay/RoutePanel.tsx
@@ -228,6 +228,11 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
   // 교량/터널만 표시
   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}
@@ -236,10 +241,22 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
     >
       {/* Center vertical line */}
       <div
-        className="absolute top-0 bottom-0"
-        style={{ left: 36, width: 2, background: 'rgba(255,255,255,0.3)' }}
+        className="absolute"
+        style={{ left: 36, width: 2, top: 18, bottom: 18, background: 'rgba(255,255,255,0.3)' }}
       />
 
+      {/* 시점 측점명 — 상단 */}
+      <div className="absolute left-0 right-0 flex items-center gap-1" style={{ top: 3 }}>
+        <div className="w-1.5 h-1.5 rounded-full bg-white/50 shrink-0" style={{ marginLeft: 30 }} />
+        <span className="text-[9px] text-white/60 truncate">{startTitle}</span>
+      </div>
+
+      {/* 종점 측점명 — 하단 */}
+      <div className="absolute left-0 right-0 flex items-center gap-1" style={{ bottom: 3 }}>
+        <div className="w-1.5 h-1.5 rounded-full bg-white/50 shrink-0" style={{ marginLeft: 30 }} />
+        <span className="text-[9px] text-white/60 truncate">{endTitle}</span>
+      </div>
+
       {/* 교량/터널 POIs */}
       {filteredPois.map((poi, i) => {
         const km = poiKm(poi, validStations);