From cdd9bdfd95f3de7d4b59e1f52d99550a042e0acf Mon Sep 17 00:00:00 2001 From: dohyeons Date: Thu, 20 Nov 2025 14:47:04 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B0=A8=EB=9F=89=EC=9D=B4=20=EB=AC=B4?= =?UTF-8?q?=EC=A1=B0=EA=B1=B4=20=EC=98=A4=EB=A5=B8=EC=AA=BD=EC=9D=84=20?= =?UTF-8?q?=EB=B3=B4=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dashboard/widgets/MapTestWidgetV2.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx index 694cba79..6b30f328 100644 --- a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx +++ b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx @@ -1271,7 +1271,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) { let markerIcon: any; if (typeof window !== "undefined") { const L = require("leaflet"); - const heading = marker.heading || 0; + // heading이 없거나 0일 때 기본값 90(동쪽/오른쪽)으로 설정하여 처음에 오른쪽을 보게 함 + const heading = marker.heading || 90; if (markerType === "arrow") { // 화살표 마커 @@ -1303,6 +1304,9 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) { }); } else if (markerType === "truck") { // 트럭 마커 + // 트럭 아이콘이 오른쪽(90도)을 보고 있으므로, 북쪽(0도)으로 가려면 -90도 회전 필요 + const rotation = heading - 90; + markerIcon = L.divIcon({ className: "custom-truck-marker", html: ` @@ -1312,11 +1316,11 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) { display: flex; align-items: center; justify-content: center; - transform: translate(-50%, -50%) rotate(${heading}deg); + transform: translate(-50%, -50%) rotate(${rotation}deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); "> - +