차종별 마커 픽토그램 추가

apps/web/public/app.js

@@ -926,8 +926,8 @@ function updateLeafletMarker(location) {
   const icon = L.divIcon({
     className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`,
     html: createTruckMarkerHtml(location, vehicleType, markerHeading),
-    iconSize: [86, 68],
+    iconSize: [104, 68],
-    iconAnchor: [43, 64],
+    iconAnchor: [52, 64],
     popupAnchor: [0, -50]
   });
 
@@ -969,7 +969,7 @@ function createTruckMarkerElement(location, status, heading) {
 function createTruckMarkerHtml(location, vehicleType = getVehicleType(location), heading = getLocationHeading(location)) {
   const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
   const rotation = normalizeMarkerRotation(heading);
-  const markerCode = getVehicleMarkerCode(vehicleType.className);
+  const vehiclePictogram = createVehiclePictogramSvg(vehicleType.className);
   return `
     <span class="truck-marker__beacon" style="--truck-heading: ${rotation}deg" aria-hidden="true">
       <svg class="truck-marker__beacon-icon" viewBox="0 0 44 52" focusable="false" aria-hidden="true">
@@ -978,26 +978,99 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
         <path class="beacon-spine" d="M22 13v25"></path>
       </svg>
     </span>
-    <span class="truck-marker__type-code" aria-hidden="true">${escapeHtml(markerCode)}</span>
+    <span class="truck-marker__body-icon" aria-hidden="true">${vehiclePictogram}</span>
     <span class="truck-marker__status" aria-hidden="true"></span>
     <span class="truck-marker__identity">
+      <span class="truck-marker__label-icon" aria-hidden="true">${vehiclePictogram}</span>
       <span class="truck-marker__plate">${escapeHtml(label)}</span>
       <span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
     </span>
   `;
 }
 
-function getVehicleMarkerCode(typeClass) {
+function createVehiclePictogramSvg(typeClass) {
-  const markerCodes = {
+  if (typeClass === "type-trailer") {
-    "type-cargo": "CT",
+    return `
-    "type-trailer": "TR",
+      <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
-    "type-container": "CN",
+        <rect class="icon-load" x="3" y="7" width="23" height="7" rx="2"></rect>
-    "type-box": "BX",
+        <path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
-    "type-van": "V",
+        <path class="icon-line" d="M26 13h3"></path>
-    "type-cold": "RF",
+        <circle class="icon-wheel" cx="9" cy="17" r="2.2"></circle>
-    "type-wing": "WB"
+        <circle class="icon-wheel" cx="23" cy="17" r="2.2"></circle>
-  };
+        <circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
-  return markerCodes[typeClass] || "CT";
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-container") {
+    return `
+      <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
+        <rect class="icon-load" x="3" y="6" width="24" height="9" rx="1.5"></rect>
+        <path class="icon-cab" d="M29 9h5l4 4v4h-9z"></path>
+        <path class="icon-line" d="M8 7v7M13 7v7M18 7v7M23 7v7"></path>
+        <circle class="icon-wheel" cx="10" cy="17" r="2.2"></circle>
+        <circle class="icon-wheel" cx="24" cy="17" r="2.2"></circle>
+        <circle class="icon-wheel" cx="35" cy="17" r="2.2"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-box") {
+    return `
+      <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
+        <rect class="icon-load" x="6" y="4" width="20" height="12" rx="2"></rect>
+        <path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
+        <path class="icon-line" d="M11 8h10M11 12h8"></path>
+        <circle class="icon-wheel" cx="12" cy="17" r="2.2"></circle>
+        <circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-van") {
+    return `
+      <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
+        <path class="icon-load" d="M6 16v-4c1-5 5-8 10-8h9c5 0 8 4 9 9l3 2v2H6z"></path>
+        <path class="icon-window" d="M15 6h7v6H11c1-3 2-5 4-6zM24 6h3c3 1 5 3 6 6h-9z"></path>
+        <circle class="icon-wheel" cx="14" cy="17" r="2.2"></circle>
+        <circle class="icon-wheel" cx="30" cy="17" r="2.2"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-cold") {
+    return `
+      <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
+        <rect class="icon-load" x="6" y="5" width="20" height="11" rx="2"></rect>
+        <path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
+        <path class="icon-snow" d="M16 7v7M12 9l8 4M20 9l-8 4"></path>
+        <circle class="icon-wheel" cx="12" cy="17" r="2.2"></circle>
+        <circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-wing") {
+    return `
+      <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
+        <path class="icon-wing" d="M8 6h21l-6 8H4z"></path>
+        <rect class="icon-load" x="8" y="10" width="18" height="6" rx="2"></rect>
+        <path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
+        <circle class="icon-wheel" cx="13" cy="17" r="2.2"></circle>
+        <circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
+      </svg>
+    `;
+  }
+
+  return `
+    <svg class="truck-marker__vehicle-icon" viewBox="0 0 40 22" focusable="false" aria-hidden="true">
+      <rect class="icon-load" x="6" y="7" width="20" height="9" rx="2"></rect>
+      <path class="icon-cab" d="M28 9h5l4 4v4h-9z"></path>
+      <path class="icon-line" d="M11 10h10M11 13h8"></path>
+      <circle class="icon-wheel" cx="12" cy="17" r="2.2"></circle>
+      <circle class="icon-wheel" cx="34" cy="17" r="2.2"></circle>
+    </svg>
+  `;
 }
 
 function resolveMarkerHeading(location, fromPosition, targetPosition) {

apps/web/public/styles.css

@@ -1058,8 +1058,8 @@ button:hover {
   position: relative;
   display: grid;
   place-items: center;
-  width: 86px;
+  width: 104px;
-  min-width: 86px;
+  min-width: 104px;
   height: 68px;
   min-height: 68px;
   border: 0;
@@ -1176,32 +1176,11 @@ button:hover {
   filter: drop-shadow(0 0 0 rgba(31, 111, 235, 0.22));
 }
 
-.truck-marker__type-code {
-  position: absolute;
-  top: 19px;
-  left: 50%;
-  z-index: 3;
-  display: grid;
-  place-items: center;
-  width: 25px;
-  height: 17px;
-  border: 1px solid rgba(255, 255, 255, 0.72);
-  border-radius: 5px;
-  background: rgba(15, 23, 42, 0.2);
-  color: #ffffff;
-  font-size: 9px;
-  font-weight: 950;
-  line-height: 1;
-  letter-spacing: 0;
-  transform: translateX(-50%);
-  pointer-events: none;
-}
-
 .truck-marker__status {
   position: absolute;
   top: 33px;
   left: calc(50% + 16px);
-  z-index: 4;
+  z-index: 5;
   width: 10px;
   height: 10px;
   border: 2px solid #ffffff;
@@ -1211,6 +1190,47 @@ button:hover {
   pointer-events: none;
 }
 
+.truck-marker__body-icon {
+  position: absolute;
+  top: 15px;
+  left: 50%;
+  z-index: 4;
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 27px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
+  box-shadow:
+    0 6px 14px rgba(15, 23, 42, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.truck-marker__body-icon .truck-marker__vehicle-icon {
+  width: 47px;
+  height: 25px;
+  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.24));
+}
+
+.truck-marker__body-icon .truck-marker__vehicle-icon .icon-load,
+.truck-marker__body-icon .truck-marker__vehicle-icon .icon-cab,
+.truck-marker__body-icon .truck-marker__vehicle-icon .icon-wing {
+  stroke-width: 1.55;
+}
+
+.truck-marker__body-icon .truck-marker__vehicle-icon .icon-line,
+.truck-marker__body-icon .truck-marker__vehicle-icon .icon-snow {
+  stroke-width: 1.45;
+}
+
+.truck-marker__body-icon .truck-marker__vehicle-icon .icon-wheel {
+  stroke-width: 1.2;
+}
+
 .truck-marker__identity {
   position: absolute;
   left: 50%;
@@ -1218,10 +1238,10 @@ button:hover {
   z-index: 3;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
-  max-width: 84px;
+  max-width: 102px;
-  min-height: 20px;
+  min-height: 23px;
-  padding: 2px 7px;
+  padding: 2px 7px 2px 4px;
   border: 1px solid rgba(15, 23, 42, 0.12);
   border-radius: 7px;
   background: rgba(255, 255, 255, 0.96);
@@ -1234,6 +1254,61 @@ button:hover {
   white-space: nowrap;
 }
 
+.truck-marker__label-icon {
+  display: grid;
+  flex: 0 0 28px;
+  place-items: center;
+  width: 28px;
+  height: 17px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 5px;
+  background: var(--marker-chip);
+  overflow: hidden;
+}
+
+.truck-marker__vehicle-icon {
+  display: block;
+  width: 26px;
+  height: 15px;
+  overflow: visible;
+}
+
+.truck-marker__vehicle-icon .icon-load,
+.truck-marker__vehicle-icon .icon-cab,
+.truck-marker__vehicle-icon .icon-wing {
+  fill: var(--marker-fill);
+  stroke: #ffffff;
+  stroke-linejoin: round;
+  stroke-width: 1.35;
+}
+
+.truck-marker__vehicle-icon .icon-cab {
+  fill: var(--marker-dark);
+}
+
+.truck-marker__vehicle-icon .icon-window {
+  fill: rgba(255, 255, 255, 0.75);
+}
+
+.truck-marker__vehicle-icon .icon-wheel {
+  fill: #111827;
+  stroke: #ffffff;
+  stroke-width: 1.1;
+}
+
+.truck-marker__vehicle-icon .icon-line,
+.truck-marker__vehicle-icon .icon-snow {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.86);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.3;
+}
+
+.truck-marker__vehicle-icon .icon-snow {
+  stroke: #ffffff;
+}
+
 .truck-marker__plate {
   display: inline-block;
   min-width: 0;