화물 수량 표시 개선

apps/web/public/app.js

@@ -304,6 +304,7 @@ async function postDemoLocation() {
         speed: 42,
         heading: Math.round((now / 1000) % 360),
         cargoName: "전자부품",
+        cargoQuantity: "36박스",
         cargoWeight: "1.2t",
         origin: "서울 상차지",
         destination: "평택 물류센터",
@@ -859,7 +860,13 @@ function createPopupElement(location, status) {
 
   const cargo = document.createElement("div");
   cargo.className = "popup-cargo";
-  cargo.textContent = `화물: ${getCargoSummary(location)}`;
+  cargo.textContent = `제품: ${getCargoName(location) || "미등록"}`;
+
+  const quantity = document.createElement("div");
+  quantity.textContent = `수량: ${getCargoQuantity(location) || "미등록"}`;
+
+  const weight = document.createElement("div");
+  weight.textContent = `중량: ${getCargoWeight(location) || "미등록"}`;
 
   const destination = document.createElement("div");
   destination.textContent = getRouteSummary(location);
@@ -870,7 +877,7 @@ function createPopupElement(location, status) {
   const movement = document.createElement("div");
   movement.textContent = `속도: ${formatSpeed(location.speed)}`;
 
-  container.append(title, driver, cargo, destination, movement, receivedAt);
+  container.append(title, driver, cargo, quantity, weight, destination, movement, receivedAt);
   return container;
 }
 
@@ -974,9 +981,21 @@ function formatCoordinate(value) {
 }
 
 function getCargoSummary(location) {
-  const cargoName = firstString(location.cargoName, location.cargoItem, location.cargo, location.itemName);
-  const cargoWeight = firstString(location.cargoWeight, location.weight);
-  return [cargoName, cargoWeight].filter(Boolean).join(" · ") || "미등록";
+  return [getCargoName(location), getCargoQuantity(location), getCargoWeight(location)]
+    .filter(Boolean)
+    .join(" · ") || "미등록";
+}
+
+function getCargoName(location) {
+  return firstString(location.cargoName, location.cargoItem, location.cargo, location.itemName);
+}
+
+function getCargoQuantity(location) {
+  return firstString(location.cargoQuantity, location.quantity, location.qty, location.count);
+}
+
+function getCargoWeight(location) {
+  return firstString(location.cargoWeight, location.weight);
 }
 
 function getRouteSummary(location) {