From 532c56f9977af2176b3206eca5626ea6c440b504 Mon Sep 17 00:00:00 2001 From: leeheejin Date: Thu, 4 Dec 2025 10:46:37 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B0=A8=EB=9F=89=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=95=88=EB=92=A4=EC=A7=91=ED=9E=88=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dashboard/widgets/MapTestWidgetV2.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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)); ">