지도 차량 마커 시인성 개선

apps/web/public/app.js

@@ -817,11 +817,25 @@ function updateMarkers({ fitBounds = false } = {}) {
     updateMarker(location);
   }
 
+  updateMarkerSelectionClasses();
+
   if (fitBounds && state.markers.size > 0) {
     fitMapToLocations();
   }
 }
 
+function updateMarkerSelectionClasses() {
+  for (const [driverId, marker] of state.markers) {
+    const element = marker.provider === "leaflet"
+      ? marker.marker.getElement?.()
+      : marker.element;
+
+    if (element) {
+      element.classList.toggle("is-selected", state.selectedDriverId === driverId);
+    }
+  }
+}
+
 function updateInitialMapFit() {
   if (state.hasFittedInitialLocations || !state.map || !state.locations.size) return;
 
@@ -889,12 +903,14 @@ function updateKakaoMarker(location) {
         content: markerElement,
         yAnchor: 1
       }),
+      element: markerElement,
       currentPosition: targetPosition
     };
     marker.overlay.setMap(state.map);
     state.markers.set(location.driverId, marker);
   } else {
     marker.overlay.setContent(markerElement);
+    marker.element = markerElement;
     animateMarkerPosition(marker, targetPosition);
   }
 }
@@ -906,12 +922,13 @@ function updateLeafletMarker(location) {
   const leafletPosition = [targetPosition.latitude, targetPosition.longitude];
   const existingMarker = state.markers.get(location.driverId);
   const markerHeading = resolveMarkerHeading(location, existingMarker?.currentPosition, targetPosition);
+  const selectedClass = state.selectedDriverId === location.driverId ? "is-selected" : "";
   const icon = L.divIcon({
-    className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className}`,
+    className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`,
     html: createTruckMarkerHtml(location, vehicleType, markerHeading),
-    iconSize: [86, 56],
-    iconAnchor: [43, 56],
-    popupAnchor: [0, -44]
+    iconSize: [106, 82],
+    iconAnchor: [53, 78],
+    popupAnchor: [0, -66]
   });
 
   let marker = existingMarker;
@@ -936,7 +953,8 @@ function updateLeafletMarker(location) {
 function createTruckMarkerElement(location, status, heading) {
   const vehicleType = getVehicleType(location);
   const markerElement = document.createElement("button");
-  markerElement.className = `truck-marker ${status.key} ${vehicleType.className}`;
+  const selectedClass = state.selectedDriverId === location.driverId ? "is-selected" : "";
+  markerElement.className = `truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`;
   markerElement.type = "button";
   markerElement.title = `${vehicleType.label} ${location.vehicleNo || location.driverId}`;
   markerElement.setAttribute("aria-label", `${vehicleType.label} ${location.vehicleNo || location.driverId} 위치 보기`);
@@ -952,6 +970,7 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
   const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
   const rotation = normalizeMarkerRotation(heading);
   return `
+    <span class="truck-marker__halo" aria-hidden="true"></span>
     <span class="truck-marker__vehicle" style="--truck-heading: ${rotation}deg">
       <span class="truck-marker__body"></span>
       <span class="truck-marker__cab"></span>
@@ -1300,6 +1319,7 @@ function openMarkerActionPanel(location) {
   renderMarkerActionPanel(location);
   elements.markerActionPanel.classList.remove("is-hidden");
   render();
+  updateMarkerSelectionClasses();
 }
 
 function hideMarkerActionPanel() {
@@ -1313,6 +1333,7 @@ function closeMarkerActionPanel() {
   }
   state.selectedDriverId = "";
   render();
+  updateMarkerSelectionClasses();
 }
 
 function renderMarkerActionPanel(location) {
@@ -1374,6 +1395,7 @@ function showVehicleRoute(location) {
   clearInfoOverlay();
   renderRouteFocusPanel(location);
   render();
+  updateMarkerSelectionClasses();
 
   if (!state.map || !state.mapProvider) return;
 
@@ -1390,6 +1412,7 @@ function showVehicleCargo(location) {
   clearRouteOverlay();
   renderCargoFocusPanel(location);
   render();
+  updateMarkerSelectionClasses();
   showInfoOverlay(location);
 }
 
@@ -1400,6 +1423,7 @@ function showVehicleHistory(location) {
   clearInfoOverlay();
   renderRouteFocusPanel(location);
   render();
+  updateMarkerSelectionClasses();
   renderRoutePreview(location, { fit: false });
   loadLocationHistory(location);
 }
@@ -1412,6 +1436,7 @@ function showVehicleCenter(location) {
   clearRouteOverlay();
   renderCurrentLocationPanel(location);
   render();
+  updateMarkerSelectionClasses();
 
   if (state.map && state.mapProvider) {
     centerMapOnLocation(location, { zoom: true });
@@ -1484,6 +1509,7 @@ function focusLocation(location) {
   loadLocationHistory(location);
   renderRouteFocusPanel(location);
   render();
+  updateMarkerSelectionClasses();
 
   if (!state.map || !state.mapProvider) return;
 
@@ -1553,6 +1579,7 @@ function closeHistoryDrawer() {
   clearInfoOverlay();
   renderRouteFocusPanel(null);
   render();
+  updateMarkerSelectionClasses();
 }
 
 function showInfoOverlay(location) {