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)); "> - +