kimminsung/dronevideoplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: RoutePanel 정렬 방향 수정 (낮은km=위, 높은km=아래), 높이 80%, 겹침 간격 9%

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
minsung
2026-04-01 16:37:09 +09:00
parent 4fc59416b2
commit eecd17c590
1 changed files with 5 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/overlay/RoutePanel.tsx
View File

@@ -245,21 +245,16 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
]; ];
const minKm = Math.min(...allKms); const minKm = Math.min(...allKms);
const maxKm = Math.max(...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 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 ( return (
<div <div
ref={panelRef} ref={panelRef}
className="absolute left-0 w-28 border-r border-white/20 z-30" 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 */} {/* Center vertical line */}
<div <div
@@ -281,7 +276,7 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
{/* 교량/터널 POIs — 겹침 방지: Y 간격 7% 미만이면 건너뜀 */} {/* 교량/터널 POIs — 겹침 방지: Y 간격 7% 미만이면 건너뜀 */}
{(() => { {(() => {
const MIN_GAP = 7; // % const MIN_GAP = 9; // %
const placed: number[] = []; const placed: number[] = [];
return filteredPois.map((poi, i) => { return filteredPois.map((poi, i) => {
const km = poiKm(poi, validStations); const km = poiKm(poi, validStations);
@@ -323,8 +318,8 @@ export default function RoutePanel({ currentTime, visible, onSeek }: RoutePanelP
style={{ style={{
left: 30, left: 30,
right: 4, right: 4,
top: `${kmToY(visibleRange.maxKm)}%`, top: `${kmToY(visibleRange.minKm)}%`,
bottom: `${100 - kmToY(visibleRange.minKm)}%`, bottom: `${100 - kmToY(visibleRange.maxKm)}%`,
border: '1px solid rgba(74,222,128,0.7)', border: '1px solid rgba(74,222,128,0.7)',
background: 'rgba(74,222,128,0.08)', background: 'rgba(74,222,128,0.08)',
}} }}