From 8c475c9ee8328104d8078e4fce8679906c4bb541 Mon Sep 17 00:00:00 2001
From: minsung <minsung.kim.hanmaceng@gmail.com>
Date: Wed, 1 Apr 2026 16:20:28 +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=ED=91=9C=EC=8B=9C=20=EB=B0=8F=20=EA=B5=90?=
 =?UTF-8?q?=EB=9F=89/=ED=84=B0=EB=84=90=EB=A7=8C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상단 시점, 하단 종점 측점명 고정 표시
- POI는 교량/터널만 필터링 (터널: 보라, 교량: 하늘색)
- 불필요한 측점 도트/텍스트 제거

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

diff --git a/client/src/components/overlay/RoutePanel.tsx b/client/src/components/overlay/RoutePanel.tsx
index e338bd4..d34836d 100644
--- a/client/src/components/overlay/RoutePanel.tsx
+++ b/client/src/components/overlay/RoutePanel.tsx
@@ -225,6 +225,14 @@ 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');
+
   return (
     <div
       ref={panelRef}
@@ -233,49 +241,56 @@ 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: 20, bottom: 20, background: 'rgba(255,255,255,0.3)' }}
       />
 
-      {/* Stations */}
-      {validStations.map((st, i) => {
-        const km = stationKm(st.title);
-        if (km < 0) return null;
-        return (
-          <div
-            key={`st-${i}`}
-            className="absolute flex items-center"
-            style={{ top: `${kmToY(km)}%`, transform: 'translateY(-50%)', left: 0, right: 0 }}
-          >
-            <div className="text-[9px] text-white/70 text-right" style={{ width: 34 }}>
-              {st.title}
-            </div>
-            <div style={{ position: 'absolute', left: 33, width: 8, display: 'flex', justifyContent: 'center' }}>
-              <div className="w-2 h-2 rounded-full bg-white/60" />
-            </div>
-          </div>
-        );
-      })}
+      {/* 시점 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>
 
-      {/* POIs */}
-      {pois.map((poi, i) => {
+      {/* 종점 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; // 시점/종점 영역과 겹치지 않게
         return (
           <div
             key={`poi-${i}`}
-            className="absolute flex items-center"
-            style={{ top: `${kmToY(km)}%`, transform: 'translateY(-50%)', left: 0, right: 0 }}
+            className="absolute flex items-center pointer-events-none"
+            style={{ top: `${y}%`, transform: 'translateY(-50%)', left: 0, right: 0 }}
           >
-            <div className="text-[11px] text-right" style={{ width: 34 }}>
-              {CATEGORY_EMOJI[poi.category] || '\uD83D\uDCCD'}
-            </div>
-            <div style={{ position: 'absolute', left: 33, width: 8, display: 'flex', justifyContent: 'center' }}>
-              <div className="w-1.5 h-1.5 rounded-full bg-cyan-400/70" />
+            <div style={{ position: 'absolute', left: 30, width: 12, display: 'flex', justifyContent: 'center' }}>
+              <div
+                className="w-2.5 h-2.5 rounded-sm"
+                style={{ background: poi.category === '\uD130\uB110' ? '#6366f1' : '#0ea5e9' }}
+              />
             </div>
             <div
-              className="text-[8px] text-cyan-300/80 truncate"
-              style={{ position: 'absolute', left: 44, right: 2 }}
+              className="text-[8px] truncate"
+              style={{
+                position: 'absolute', left: 44, right: 2,
+                color: poi.category === '\uD130\uB110' ? '#a5b4fc' : '#7dd3fc',
+              }}
             >
               {poi.title}
             </div>