From f7cd6ccae348467db9b2727a0a3cd61844f17d1a Mon Sep 17 00:00:00 2001
From: y2keui <y2keui@nate.com>
Date: Sat, 6 Jun 2026 23:12:54 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EC=A0=9C=ED=98=95=20=EC=B0=A8?=
 =?UTF-8?q?=EB=9F=89=20=EB=A7=88=EC=BB=A4=EB=A1=9C=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/public/app.js     | 126 ++++--------------
 apps/web/public/styles.css | 258 ++++++++++++++++---------------------
 2 files changed, 137 insertions(+), 247 deletions(-)

diff --git a/apps/web/public/app.js b/apps/web/public/app.js
index c551f74..c988421 100644
--- a/apps/web/public/app.js
+++ b/apps/web/public/app.js
@@ -926,9 +926,9 @@ function updateLeafletMarker(location) {
   const icon = L.divIcon({
     className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`,
     html: createTruckMarkerHtml(location, vehicleType, markerHeading),
-    iconSize: [96, 78],
-    iconAnchor: [48, 74],
-    popupAnchor: [0, -58]
+    iconSize: [86, 68],
+    iconAnchor: [43, 64],
+    popupAnchor: [0, -50]
   });
 
   let marker = existingMarker;
@@ -969,113 +969,35 @@ 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);
   return `
-    <span class="truck-marker__direction" style="--truck-heading: ${rotation}deg" aria-hidden="true">
-      <svg class="truck-marker__direction-icon" viewBox="0 0 28 28" focusable="false" aria-hidden="true">
-        <path d="M14 2 23 24 14 19 5 24z"></path>
+    <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">
+        <path class="beacon-shadow" d="M22 4 39 45 22 36 5 45z"></path>
+        <path class="beacon-body" d="M22 4 39 45 22 36 5 45z"></path>
+        <path class="beacon-spine" d="M22 13v25"></path>
       </svg>
     </span>
-    <span class="truck-marker__vehicle" aria-hidden="true">
-      ${createVehicleMarkerSvg(vehicleType.className)}
-    </span>
-    <span class="truck-marker__label">
-      <span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
+    <span class="truck-marker__type-code" aria-hidden="true">${escapeHtml(markerCode)}</span>
+    <span class="truck-marker__status" aria-hidden="true"></span>
+    <span class="truck-marker__identity">
       <span class="truck-marker__plate">${escapeHtml(label)}</span>
+      <span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
     </span>
   `;
 }
 
-function createVehicleMarkerSvg(typeClass) {
-  if (typeClass === "type-trailer") {
-    return `
-      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-        <rect class="vehicle-trailer" x="8" y="18" width="54" height="18" rx="4"></rect>
-        <path class="vehicle-cab" d="M64 24h12l8 8v10H64z"></path>
-        <path class="vehicle-window" d="M74 26l5 6h-8v-6z"></path>
-        <path class="vehicle-hitch" d="M61 34h6"></path>
-        <circle class="vehicle-wheel" cx="21" cy="42" r="5"></circle>
-        <circle class="vehicle-wheel" cx="52" cy="42" r="5"></circle>
-        <circle class="vehicle-wheel" cx="76" cy="42" r="5"></circle>
-      </svg>
-    `;
-  }
-
-  if (typeClass === "type-container") {
-    return `
-      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-        <rect class="vehicle-body" x="10" y="16" width="54" height="22" rx="3"></rect>
-        <path class="vehicle-cab" d="M65 24h12l8 8v10H65z"></path>
-        <path class="vehicle-window" d="M75 26l5 6h-8v-6z"></path>
-        <path class="vehicle-container-lines" d="M19 18v19M28 18v19M37 18v19M46 18v19M55 18v19"></path>
-        <circle class="vehicle-wheel" cx="22" cy="43" r="5"></circle>
-        <circle class="vehicle-wheel" cx="53" cy="43" r="5"></circle>
-        <circle class="vehicle-wheel" cx="77" cy="43" r="5"></circle>
-      </svg>
-    `;
-  }
-
-  if (typeClass === "type-box") {
-    return `
-      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-        <rect class="vehicle-body" x="17" y="12" width="43" height="29" rx="4"></rect>
-        <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
-        <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
-        <path class="vehicle-detail" d="M25 20h26M25 28h20"></path>
-        <circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
-        <circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
-      </svg>
-    `;
-  }
-
-  if (typeClass === "type-van") {
-    return `
-      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-        <path class="vehicle-body" d="M17 34c0-10 6-18 16-18h24c9 0 17 8 18 18l5 2v7H15v-7z"></path>
-        <path class="vehicle-window" d="M33 20h14v11H27c1-5 3-8 6-11zM50 20h9c4 2 7 6 9 11H50z"></path>
-        <path class="vehicle-detail" d="M25 35h44"></path>
-        <circle class="vehicle-wheel" cx="30" cy="44" r="5"></circle>
-        <circle class="vehicle-wheel" cx="66" cy="44" r="5"></circle>
-      </svg>
-    `;
-  }
-
-  if (typeClass === "type-cold") {
-    return `
-      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-        <rect class="vehicle-body" x="15" y="14" width="45" height="27" rx="4"></rect>
-        <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
-        <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
-        <path class="vehicle-snow" d="M37 19v16M29 23l16 8M45 23l-16 8"></path>
-        <circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
-        <circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
-      </svg>
-    `;
-  }
-
-  if (typeClass === "type-wing") {
-    return `
-      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-        <path class="vehicle-wing" d="M18 18h46l-10 16H8z"></path>
-        <rect class="vehicle-body" x="18" y="22" width="42" height="19" rx="4"></rect>
-        <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
-        <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
-        <path class="vehicle-detail" d="M24 30h28"></path>
-        <circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
-        <circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
-      </svg>
-    `;
-  }
-
-  return `
-    <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
-      <rect class="vehicle-body" x="15" y="17" width="45" height="23" rx="4"></rect>
-      <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
-      <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
-      <path class="vehicle-detail" d="M23 24h31M23 31h26"></path>
-      <circle class="vehicle-wheel" cx="28" cy="43" r="5"></circle>
-      <circle class="vehicle-wheel" cx="71" cy="43" r="5"></circle>
-    </svg>
-  `;
+function getVehicleMarkerCode(typeClass) {
+  const markerCodes = {
+    "type-cargo": "CT",
+    "type-trailer": "TR",
+    "type-container": "CN",
+    "type-box": "BX",
+    "type-van": "V",
+    "type-cold": "RF",
+    "type-wing": "WB"
+  };
+  return markerCodes[typeClass] || "CT";
 }
 
 function resolveMarkerHeading(location, fromPosition, targetPosition) {
diff --git a/apps/web/public/styles.css b/apps/web/public/styles.css
index 198def8..c135ebb 100644
--- a/apps/web/public/styles.css
+++ b/apps/web/public/styles.css
@@ -1050,24 +1050,23 @@ button:hover {
 }
 
 .truck-marker {
-  --truck-color: var(--blue);
-  --truck-cab: #1556b8;
-  --truck-secondary: #93c5fd;
+  --marker-fill: #2563eb;
+  --marker-dark: #1e40af;
+  --marker-chip: #dbeafe;
   --marker-status: var(--green);
-  --marker-arrow: #111827;
   --truck-heading: 0deg;
   position: relative;
   display: grid;
   place-items: center;
-  width: 96px;
-  min-width: 96px;
-  height: 78px;
-  min-height: 78px;
+  width: 86px;
+  min-width: 86px;
+  height: 68px;
+  min-height: 68px;
   border: 0;
   padding: 0;
   background: transparent;
-  color: #ffffff;
-  filter: drop-shadow(0 7px 11px rgba(15, 23, 42, 0.28));
+  color: var(--text);
+  filter: drop-shadow(0 7px 12px rgba(15, 23, 42, 0.26));
   font-family: inherit;
   cursor: pointer;
   transition: filter 0.18s ease, transform 0.18s ease;
@@ -1076,7 +1075,9 @@ button:hover {
 .truck-marker:hover,
 .truck-marker.is-selected {
   z-index: 8;
-  filter: drop-shadow(0 10px 15px rgba(15, 23, 42, 0.38));
+  filter:
+    drop-shadow(0 0 0 rgba(255, 255, 255, 1))
+    drop-shadow(0 11px 16px rgba(15, 23, 42, 0.34));
   transform: translateY(-1px);
 }
 
@@ -1090,191 +1091,142 @@ button:hover {
 }
 
 .truck-marker.type-trailer {
-  --truck-color: #7c3aed;
-  --truck-cab: #4c1d95;
-  --truck-secondary: #c4b5fd;
+  --marker-fill: #7c3aed;
+  --marker-dark: #4c1d95;
+  --marker-chip: #ede9fe;
 }
 
 .truck-marker.type-container {
-  --truck-color: #f97316;
-  --truck-cab: #c2410c;
-  --truck-secondary: #fed7aa;
+  --marker-fill: #ea580c;
+  --marker-dark: #9a3412;
+  --marker-chip: #ffedd5;
 }
 
 .truck-marker.type-box {
-  --truck-color: #059669;
-  --truck-cab: #047857;
-  --truck-secondary: #a7f3d0;
+  --marker-fill: #059669;
+  --marker-dark: #047857;
+  --marker-chip: #d1fae5;
 }
 
 .truck-marker.type-van {
-  --truck-color: #0ea5e9;
-  --truck-cab: #0369a1;
-  --truck-secondary: #bae6fd;
+  --marker-fill: #0284c7;
+  --marker-dark: #075985;
+  --marker-chip: #e0f2fe;
 }
 
 .truck-marker.type-cold {
-  --truck-color: #0891b2;
-  --truck-cab: #155e75;
-  --truck-secondary: #cffafe;
+  --marker-fill: #0891b2;
+  --marker-dark: #155e75;
+  --marker-chip: #cffafe;
 }
 
 .truck-marker.type-wing {
-  --truck-color: #16a34a;
-  --truck-cab: #15803d;
-  --truck-secondary: #bbf7d0;
+  --marker-fill: #16a34a;
+  --marker-dark: #166534;
+  --marker-chip: #dcfce7;
 }
 
 .truck-marker::after {
-  content: "";
-  position: absolute;
-  top: 25px;
-  right: 7px;
-  z-index: 4;
-  width: 10px;
-  height: 10px;
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  background: var(--marker-status);
-  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.34);
-  pointer-events: none;
+  display: none;
 }
 
-.truck-marker__direction {
+.truck-marker__beacon {
   position: absolute;
-  top: 4px;
+  top: 0;
   left: 50%;
-  z-index: 4;
-  width: 24px;
-  height: 24px;
+  z-index: 2;
+  width: 44px;
+  height: 52px;
   transform: translateX(-50%) rotate(var(--truck-heading));
   transform-origin: 50% 50%;
   transition: transform 0.35s ease;
   pointer-events: none;
 }
 
-.truck-marker__direction-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
-}
-
-.truck-marker__direction-icon path {
-  fill: var(--marker-arrow);
-  stroke: #ffffff;
-  stroke-linejoin: round;
-  stroke-width: 3.2;
-}
-
-.truck-marker.is-selected .truck-marker__direction {
-  --marker-arrow: var(--blue);
-}
-
-.truck-marker__vehicle {
-  position: absolute;
-  top: 18px;
-  left: 50%;
-  z-index: 2;
-  display: block;
-  width: 86px;
-  height: 46px;
-  transform: translateX(-50%);
-}
-
-.truck-marker__vehicle::before {
-  content: "";
-  position: absolute;
-  inset: 5px 2px 0;
-  z-index: -1;
-  border: 1px solid rgba(15, 23, 42, 0.11);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.94);
-  box-shadow:
-    0 0 0 2px rgba(255, 255, 255, 0.86),
-    0 6px 13px rgba(15, 23, 42, 0.22);
-}
-
-.truck-marker.is-selected .truck-marker__vehicle::before {
-  border-color: rgba(31, 111, 235, 0.72);
-  box-shadow:
-    0 0 0 3px rgba(255, 255, 255, 0.92),
-    0 0 0 6px rgba(31, 111, 235, 0.2),
-    0 8px 17px rgba(15, 23, 42, 0.27);
-}
-
-.truck-marker__svg {
+.truck-marker__beacon-icon {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
 }
 
-.truck-marker__svg .vehicle-body,
-.truck-marker__svg .vehicle-cab,
-.truck-marker__svg .vehicle-trailer,
-.truck-marker__svg .vehicle-wing {
-  fill: var(--truck-color);
+.truck-marker__beacon-icon .beacon-shadow {
+  fill: rgba(15, 23, 42, 0.22);
+  stroke: none;
+  transform: translate(2px, 3px);
+}
+
+.truck-marker__beacon-icon .beacon-body {
+  fill: var(--marker-fill);
   stroke: #ffffff;
   stroke-linejoin: round;
-  stroke-width: 3;
+  stroke-width: 3.4;
 }
 
-.truck-marker__svg .vehicle-cab {
-  fill: var(--truck-cab);
-}
-
-.truck-marker__svg .vehicle-wing {
-  fill: var(--truck-secondary);
-  stroke: #ffffff;
-}
-
-.truck-marker__svg .vehicle-window {
-  fill: #e0f2fe;
-  stroke: #ffffff;
-  stroke-linejoin: round;
-  stroke-width: 2;
-}
-
-.truck-marker__svg .vehicle-wheel {
-  fill: #111827;
-  stroke: #ffffff;
-  stroke-width: 3;
-}
-
-.truck-marker__svg .vehicle-detail,
-.truck-marker__svg .vehicle-container-lines,
-.truck-marker__svg .vehicle-hitch,
-.truck-marker__svg .vehicle-snow {
+.truck-marker__beacon-icon .beacon-spine {
   fill: none;
-  stroke: rgba(255, 255, 255, 0.78);
+  stroke: rgba(255, 255, 255, 0.72);
   stroke-linecap: round;
-  stroke-linejoin: round;
   stroke-width: 2.4;
 }
 
-.truck-marker__svg .vehicle-snow {
+.truck-marker.is-selected .truck-marker__beacon-icon .beacon-body {
   stroke: #ffffff;
-  stroke-width: 2.2;
+  stroke-width: 4.6;
+  filter: drop-shadow(0 0 0 rgba(31, 111, 235, 0.22));
 }
 
-.truck-marker__label {
+.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;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  background: var(--marker-status);
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
+  pointer-events: none;
+}
+
+.truck-marker__identity {
   position: absolute;
   left: 50%;
-  bottom: 0;
+  bottom: 1px;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  max-width: 88px;
-  min-height: 19px;
-  padding: 2px 7px 3px;
-  border: 1px solid rgba(255, 255, 255, 0.9);
-  border-radius: 999px;
-  background: rgba(15, 23, 42, 0.94);
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.28);
-  color: #ffffff;
+  max-width: 84px;
+  min-height: 20px;
+  padding: 2px 7px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);
+  color: var(--navy);
   font-size: 10px;
   font-weight: 900;
   line-height: 1.1;
@@ -1282,12 +1234,28 @@ button:hover {
   white-space: nowrap;
 }
 
-.truck-marker__type,
 .truck-marker__plate {
   display: inline-block;
   min-width: 0;
 }
 
+.truck-marker__plate {
+  color: var(--navy);
+}
+
+.truck-marker__type {
+  display: inline-grid;
+  place-items: center;
+  min-width: 25px;
+  height: 15px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--marker-chip);
+  color: var(--marker-dark);
+  font-size: 9px;
+  font-weight: 950;
+}
+
 .truck-marker__plate {
   overflow: hidden;
   text-overflow: ellipsis;