diff --git a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx index 8170aa11..02cafe2b 100644 --- a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx +++ b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx @@ -1409,6 +1409,14 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) { // 트럭 마커 // 트럭 아이콘이 오른쪽(90도)을 보고 있으므로, 북쪽(0도)으로 가려면 -90도 회전 필요 const rotation = heading - 90; + + // 회전 각도가 90~270도 범위면 차량이 뒤집어짐 (바퀴가 위로) + // 이 경우 scaleY(-1)로 상하 반전하여 바퀴가 아래로 오도록 함 + const normalizedRotation = ((rotation % 360) + 360) % 360; + const isFlipped = normalizedRotation > 90 && normalizedRotation < 270; + const transformStyle = isFlipped + ? `translate(-50%, -50%) rotate(${rotation}deg) scaleY(-1)` + : `translate(-50%, -50%) rotate(${rotation}deg)`; markerIcon = L.divIcon({ className: "custom-truck-marker", @@ -1419,7 +1427,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) { display: flex; align-items: center; justify-content: center; - transform: translate(-50%, -50%) rotate(${rotation}deg); + transform: ${transformStyle}; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); ">