초기 관제 시스템 뼈대 구성

apps/web/public/app.js

@@ -0,0 +1,720 @@
+const state = {
+  map: null,
+  markers: new Map(),
+  infoOverlay: null,
+  drivers: new Map(),
+  locations: new Map(),
+  selectedDriverId: "",
+  eventSource: null,
+  activeView: "locations",
+  adminToken: new URLSearchParams(window.location.search).get("adminToken") ||
+    window.localStorage.getItem("cargoRadarAdminToken") ||
+    ""
+};
+
+const elements = {
+  connectionStatus: document.getElementById("connectionStatus"),
+  refreshButton: document.getElementById("refreshButton"),
+  demoButton: document.getElementById("demoButton"),
+  locationsTab: document.getElementById("locationsTab"),
+  driversTab: document.getElementById("driversTab"),
+  locationsPanel: document.getElementById("locationsPanel"),
+  driversPanel: document.getElementById("driversPanel"),
+  vehicleList: document.getElementById("vehicleList"),
+  mapMessage: document.getElementById("mapMessage"),
+  totalCount: document.getElementById("totalCount"),
+  activeCount: document.getElementById("activeCount"),
+  staleCount: document.getElementById("staleCount"),
+  lastUpdated: document.getElementById("lastUpdated"),
+  driverForm: document.getElementById("driverForm"),
+  driverNameInput: document.getElementById("driverNameInput"),
+  vehicleNoInput: document.getElementById("vehicleNoInput"),
+  phoneInput: document.getElementById("phoneInput"),
+  driverIdInput: document.getElementById("driverIdInput"),
+  driverCount: document.getElementById("driverCount"),
+  driverList: document.getElementById("driverList"),
+  historyDrawer: document.getElementById("historyDrawer"),
+  historyCloseButton: document.getElementById("historyCloseButton"),
+  historyTitle: document.getElementById("historyTitle"),
+  historySummary: document.getElementById("historySummary"),
+  historyList: document.getElementById("historyList")
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  initializeMap();
+  bindActions();
+  refreshDrivers();
+  refreshLatestLocations();
+  connectEvents();
+});
+
+async function initializeMap() {
+  const kakaoJavaScriptKey = window.CARGORADAR_CONFIG?.kakaoJavaScriptKey || "";
+
+  if (!kakaoJavaScriptKey) {
+    showMapMessage("Kakao JavaScript 키가 설정되지 않았습니다.");
+    return;
+  }
+
+  try {
+    await loadKakaoMapsSdk(kakaoJavaScriptKey);
+    const center = new kakao.maps.LatLng(36.45, 127.85);
+    state.map = new kakao.maps.Map(document.getElementById("map"), {
+      center,
+      level: 13
+    });
+
+    state.map.addControl(new kakao.maps.ZoomControl(), kakao.maps.ControlPosition.RIGHT);
+    state.map.addControl(new kakao.maps.MapTypeControl(), kakao.maps.ControlPosition.TOPRIGHT);
+    hideMapMessage();
+    updateMarkers({ fitBounds: state.locations.size > 0 });
+  } catch (error) {
+    console.error(error);
+    showMapMessage("Kakao 지도 키 또는 허용 도메인을 확인하세요.");
+  }
+}
+
+function loadKakaoMapsSdk(appKey) {
+  return new Promise((resolve, reject) => {
+    if (window.kakao?.maps) {
+      kakao.maps.load(resolve);
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${encodeURIComponent(appKey)}&autoload=false`;
+    script.async = true;
+    script.onload = () => kakao.maps.load(resolve);
+    script.onerror = () => reject(new Error("kakao_maps_load_failed"));
+    document.head.appendChild(script);
+  });
+}
+
+function bindActions() {
+  elements.refreshButton.addEventListener("click", refreshLatestLocations);
+  elements.demoButton.addEventListener("click", postDemoLocation);
+  elements.locationsTab.addEventListener("click", () => setActiveView("locations"));
+  elements.driversTab.addEventListener("click", () => setActiveView("drivers"));
+  elements.driverForm.addEventListener("submit", submitDriverForm);
+  elements.historyCloseButton.addEventListener("click", closeHistoryDrawer);
+}
+
+function setActiveView(view) {
+  state.activeView = view;
+  elements.locationsTab.classList.toggle("is-active", view === "locations");
+  elements.driversTab.classList.toggle("is-active", view === "drivers");
+  elements.locationsPanel.classList.toggle("is-hidden", view !== "locations");
+  elements.driversPanel.classList.toggle("is-hidden", view !== "drivers");
+}
+
+async function refreshLatestLocations() {
+  try {
+    setConnectionStatus("연결됨", "online");
+    const data = await fetchJson("/api/v1/locations/latest", {
+      headers: adminHeaders()
+    });
+    replaceLocations(data.locations || []);
+  } catch (error) {
+    console.error(error);
+    if (error.message === "invalid_admin_token") {
+      requestAdminToken();
+      return;
+    }
+    setConnectionStatus("조회 실패", "error");
+  }
+}
+
+async function refreshDrivers() {
+  try {
+    const data = await fetchJson("/api/v1/drivers", {
+      headers: adminHeaders()
+    });
+    replaceDrivers(data.drivers || []);
+  } catch (error) {
+    console.error(error);
+    if (error.message === "invalid_admin_token") {
+      requestAdminToken();
+    }
+  }
+}
+
+function connectEvents() {
+  if (state.eventSource) {
+    state.eventSource.close();
+  }
+
+  state.eventSource = new EventSource(withAdminToken("/api/v1/events"));
+  state.eventSource.addEventListener("open", () => setConnectionStatus("실시간 연결", "online"));
+  state.eventSource.addEventListener("snapshot", (event) => {
+    const payload = JSON.parse(event.data);
+    replaceLocations(payload.locations || []);
+  });
+  state.eventSource.addEventListener("location.updated", (event) => {
+    upsertLocation(JSON.parse(event.data), { focus: true });
+  });
+  state.eventSource.addEventListener("drivers.updated", (event) => {
+    const payload = JSON.parse(event.data);
+    replaceDrivers(payload.drivers || []);
+  });
+  state.eventSource.addEventListener("error", () => setConnectionStatus("재연결 중", "error"));
+}
+
+async function postDemoLocation() {
+  const driver = getDemoDriver();
+  const now = Date.now();
+  const latitude = 37.5665 + Math.sin(now / 60000) * 0.03;
+  const longitude = 126.978 + Math.cos(now / 60000) * 0.04;
+
+  try {
+    await fetchJson("/api/v1/locations", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Device-Token": driver.token
+      },
+      body: JSON.stringify({
+        driverId: driver.driverId,
+        vehicleNo: driver.vehicleNo,
+        latitude,
+        longitude,
+        accuracy: 12,
+        speed: 42,
+        heading: Math.round((now / 1000) % 360),
+        provider: "demo",
+        recordedAt: new Date().toISOString()
+      })
+    });
+  } catch (error) {
+    console.error(error);
+    setConnectionStatus("전송 실패", "error");
+  }
+}
+
+function getDemoDriver() {
+  const enabledDriver = [...state.drivers.values()].find((driver) => driver.enabled && driver.token);
+  return enabledDriver || {
+    driverId: "demo-driver",
+    vehicleNo: "SEOUL-12-3456",
+    token: "demo-token"
+  };
+}
+
+function replaceLocations(locations) {
+  state.locations.clear();
+  for (const location of locations) {
+    state.locations.set(location.driverId, location);
+  }
+  render();
+  updateMarkers({ fitBounds: locations.length > 0 });
+}
+
+function replaceDrivers(drivers) {
+  state.drivers.clear();
+  for (const driver of drivers) {
+    state.drivers.set(driver.driverId, driver);
+  }
+  renderDrivers();
+}
+
+function upsertLocation(location, options = {}) {
+  state.locations.set(location.driverId, location);
+  render();
+  updateMarker(location);
+
+  if (state.selectedDriverId === location.driverId && !elements.historyDrawer.classList.contains("is-hidden")) {
+    loadLocationHistory(location);
+  }
+
+  if (options.focus && state.map && window.kakao?.maps) {
+    state.map.setCenter(new kakao.maps.LatLng(location.latitude, location.longitude));
+  }
+}
+
+function render() {
+  const locations = [...state.locations.values()].sort((left, right) => {
+    return new Date(right.receivedAt).getTime() - new Date(left.receivedAt).getTime();
+  });
+
+  const counts = locations.reduce(
+    (accumulator, location) => {
+      const status = getLocationStatus(location);
+      accumulator.total += 1;
+      if (status.key === "active") accumulator.active += 1;
+      if (status.key !== "active") accumulator.stale += 1;
+      return accumulator;
+    },
+    { total: 0, active: 0, stale: 0 }
+  );
+
+  elements.totalCount.textContent = String(counts.total);
+  elements.activeCount.textContent = String(counts.active);
+  elements.staleCount.textContent = String(counts.stale);
+  elements.lastUpdated.textContent = locations[0] ? formatDateTime(locations[0].receivedAt) : "-";
+
+  elements.vehicleList.replaceChildren();
+
+  if (!locations.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "수신된 차량 위치가 없습니다.";
+    elements.vehicleList.append(empty);
+    return;
+  }
+
+  for (const location of locations) {
+    elements.vehicleList.append(createVehicleItem(location));
+  }
+}
+
+function renderDrivers() {
+  const drivers = [...state.drivers.values()].sort((left, right) => {
+    return String(left.vehicleNo || left.driverId).localeCompare(String(right.vehicleNo || right.driverId), "ko");
+  });
+
+  elements.driverCount.textContent = `${drivers.length}명`;
+  elements.driverList.replaceChildren();
+
+  if (!drivers.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "등록된 기사가 없습니다.";
+    elements.driverList.append(empty);
+    return;
+  }
+
+  for (const driver of drivers) {
+    elements.driverList.append(createDriverItem(driver));
+  }
+}
+
+function createVehicleItem(location) {
+  const status = getLocationStatus(location);
+  const item = document.createElement("article");
+  item.className = "vehicle-item";
+  item.tabIndex = 0;
+
+  const main = document.createElement("div");
+  main.className = "vehicle-main";
+
+  const title = document.createElement("div");
+  title.className = "vehicle-title";
+
+  const badge = document.createElement("span");
+  badge.className = `badge ${status.key}`;
+  badge.textContent = status.label;
+
+  const vehicleNo = document.createElement("strong");
+  vehicleNo.textContent = location.vehicleNo || location.driverId;
+
+  title.append(badge, vehicleNo);
+
+  const meta = document.createElement("div");
+  meta.className = "vehicle-meta";
+  meta.textContent = `${location.driverName || location.driverId} · ${formatDateTime(location.receivedAt)} · ${formatCoordinate(location.latitude)}, ${formatCoordinate(location.longitude)}`;
+
+  const speed = document.createElement("div");
+  speed.className = "speed";
+  speed.textContent = location.speed === null || location.speed === undefined ? "-" : `${Math.round(location.speed)} km/h`;
+
+  main.append(title, meta);
+  item.append(main, speed);
+
+  item.addEventListener("click", () => focusLocation(location));
+  item.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      focusLocation(location);
+    }
+  });
+
+  return item;
+}
+
+function createDriverItem(driver) {
+  const item = document.createElement("article");
+  item.className = "driver-item";
+
+  const head = document.createElement("div");
+  head.className = "driver-head";
+
+  const title = document.createElement("div");
+  title.className = "driver-title";
+
+  const name = document.createElement("strong");
+  name.textContent = `${driver.vehicleNo || driver.driverId} · ${driver.name}`;
+
+  const meta = document.createElement("div");
+  meta.className = "vehicle-meta";
+  meta.textContent = [driver.driverId, driver.phone].filter(Boolean).join(" · ");
+
+  title.append(name, meta);
+
+  const badge = document.createElement("span");
+  badge.className = `badge ${driver.enabled ? "active" : "offline"}`;
+  badge.textContent = driver.enabled ? "사용" : "중지";
+
+  head.append(title, badge);
+
+  const tokenRow = document.createElement("div");
+  tokenRow.className = "driver-token";
+
+  const token = document.createElement("code");
+  token.textContent = driver.token || "-";
+
+  const copyButton = document.createElement("button");
+  copyButton.type = "button";
+  copyButton.textContent = "복사";
+  copyButton.addEventListener("click", () => copyToken(driver.token));
+
+  tokenRow.append(token, copyButton);
+
+  const actions = document.createElement("div");
+  actions.className = "driver-actions";
+
+  const toggleButton = document.createElement("button");
+  toggleButton.type = "button";
+  toggleButton.textContent = driver.enabled ? "중지" : "사용";
+  toggleButton.addEventListener("click", () => updateDriver(driver.driverId, { enabled: !driver.enabled }));
+
+  const tokenButton = document.createElement("button");
+  tokenButton.type = "button";
+  tokenButton.textContent = "토큰 재발급";
+  tokenButton.addEventListener("click", () => updateDriver(driver.driverId, { regenerateToken: true }));
+
+  const deleteButton = document.createElement("button");
+  deleteButton.type = "button";
+  deleteButton.textContent = "삭제";
+  deleteButton.addEventListener("click", () => deleteDriver(driver));
+
+  actions.append(toggleButton, tokenButton, deleteButton);
+  item.append(head, tokenRow, actions);
+  return item;
+}
+
+async function submitDriverForm(event) {
+  event.preventDefault();
+
+  const payload = {
+    name: elements.driverNameInput.value.trim(),
+    vehicleNo: elements.vehicleNoInput.value.trim(),
+    phone: elements.phoneInput.value.trim(),
+    driverId: elements.driverIdInput.value.trim()
+  };
+
+  try {
+    await fetchJson("/api/v1/drivers", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...adminHeaders()
+      },
+      body: JSON.stringify(payload)
+    });
+    elements.driverForm.reset();
+    await refreshDrivers();
+  } catch (error) {
+    console.error(error);
+    window.alert(`등록 실패: ${error.message}`);
+  }
+}
+
+async function updateDriver(driverId, patch) {
+  try {
+    const data = await fetchJson(`/api/v1/drivers/${encodeURIComponent(driverId)}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        ...adminHeaders()
+      },
+      body: JSON.stringify(patch)
+    });
+    state.drivers.set(data.driver.driverId, data.driver);
+    renderDrivers();
+  } catch (error) {
+    console.error(error);
+    window.alert(`수정 실패: ${error.message}`);
+  }
+}
+
+async function deleteDriver(driver) {
+  const confirmed = window.confirm(`${driver.vehicleNo || driver.driverId} 삭제`);
+  if (!confirmed) return;
+
+  try {
+    await fetchJson(`/api/v1/drivers/${encodeURIComponent(driver.driverId)}`, {
+      method: "DELETE",
+      headers: adminHeaders()
+    });
+    state.drivers.delete(driver.driverId);
+    renderDrivers();
+  } catch (error) {
+    console.error(error);
+    window.alert(`삭제 실패: ${error.message}`);
+  }
+}
+
+async function copyToken(token) {
+  if (!token) return;
+
+  try {
+    await navigator.clipboard.writeText(token);
+    setConnectionStatus("토큰 복사됨", "online");
+  } catch {
+    window.prompt("기기 토큰", token);
+  }
+}
+
+function updateMarkers({ fitBounds = false } = {}) {
+  if (!state.map || !window.kakao?.maps) return;
+
+  const activeIds = new Set(state.locations.keys());
+
+  for (const [driverId, markerOverlay] of state.markers) {
+    if (!activeIds.has(driverId)) {
+      markerOverlay.setMap(null);
+      state.markers.delete(driverId);
+    }
+  }
+
+  for (const location of state.locations.values()) {
+    updateMarker(location);
+  }
+
+  if (fitBounds && state.markers.size > 0) {
+    const bounds = new kakao.maps.LatLngBounds();
+    for (const location of state.locations.values()) {
+      bounds.extend(new kakao.maps.LatLng(location.latitude, location.longitude));
+    }
+    state.map.setBounds(bounds);
+  }
+}
+
+function updateMarker(location) {
+  if (!state.map || !window.kakao?.maps) return;
+
+  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
+  const status = getLocationStatus(location);
+  const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
+
+  const markerElement = document.createElement("button");
+  markerElement.className = `kakao-marker ${status.key}`;
+  markerElement.type = "button";
+  markerElement.textContent = label;
+  markerElement.title = location.vehicleNo || location.driverId;
+  markerElement.addEventListener("click", () => focusLocation(location));
+
+  let markerOverlay = state.markers.get(location.driverId);
+
+  if (!markerOverlay) {
+    markerOverlay = new kakao.maps.CustomOverlay({
+      position,
+      content: markerElement,
+      yAnchor: 1
+    });
+    markerOverlay.setMap(state.map);
+    state.markers.set(location.driverId, markerOverlay);
+  } else {
+    markerOverlay.setPosition(position);
+    markerOverlay.setContent(markerElement);
+  }
+}
+
+function focusLocation(location) {
+  loadLocationHistory(location);
+
+  if (!state.map || !window.kakao?.maps) return;
+
+  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
+  state.map.setCenter(position);
+  if (state.map.getLevel() > 4) {
+    state.map.setLevel(4);
+  }
+  showInfoOverlay(location);
+}
+
+async function loadLocationHistory(location) {
+  state.selectedDriverId = location.driverId;
+  elements.historyDrawer.classList.remove("is-hidden");
+  elements.historyTitle.textContent = `${location.vehicleNo || location.driverId} 위치 이력`;
+  elements.historySummary.textContent = "조회 중";
+  elements.historyList.replaceChildren();
+
+  try {
+    const data = await fetchJson(
+      `/api/v1/locations/history?driverId=${encodeURIComponent(location.driverId)}&limit=80`,
+      { headers: adminHeaders() }
+    );
+    renderHistory(location, data.locations || []);
+  } catch (error) {
+    console.error(error);
+    elements.historySummary.textContent = `조회 실패: ${error.message}`;
+  }
+}
+
+function renderHistory(location, records) {
+  elements.historyList.replaceChildren();
+  elements.historySummary.textContent = `${records.length}건 · ${location.driverName || location.driverId}`;
+
+  if (!records.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "위치 이력이 없습니다.";
+    elements.historyList.append(empty);
+    return;
+  }
+
+  for (const record of records.reverse()) {
+    const row = document.createElement("div");
+    row.className = "history-row";
+
+    const time = document.createElement("time");
+    time.textContent = formatTime(record.receivedAt);
+
+    const coordinate = document.createElement("span");
+    coordinate.textContent = `${formatCoordinate(record.latitude)}, ${formatCoordinate(record.longitude)}`;
+
+    const speed = document.createElement("span");
+    speed.textContent = record.speed === null || record.speed === undefined ? "-" : `${Math.round(record.speed)} km/h`;
+
+    row.append(time, coordinate, speed);
+    elements.historyList.append(row);
+  }
+}
+
+function closeHistoryDrawer() {
+  state.selectedDriverId = "";
+  elements.historyDrawer.classList.add("is-hidden");
+}
+
+function showInfoOverlay(location) {
+  const status = getLocationStatus(location);
+  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
+  const content = createPopupElement(location, status);
+
+  if (!state.infoOverlay) {
+    state.infoOverlay = new kakao.maps.CustomOverlay({
+      yAnchor: 1.25
+    });
+  }
+
+  state.infoOverlay.setContent(content);
+  state.infoOverlay.setPosition(position);
+  state.infoOverlay.setMap(state.map);
+}
+
+function createPopupElement(location, status) {
+  const container = document.createElement("div");
+  container.className = "kakao-popup";
+
+  const title = document.createElement("strong");
+  title.className = "popup-title";
+  title.textContent = location.vehicleNo || location.driverId;
+
+  const driver = document.createElement("div");
+  driver.textContent = `${location.driverName || location.driverId} · ${status.label}`;
+
+  const receivedAt = document.createElement("div");
+  receivedAt.textContent = formatDateTime(location.receivedAt);
+
+  const coordinate = document.createElement("div");
+  coordinate.textContent = `${formatCoordinate(location.latitude)}, ${formatCoordinate(location.longitude)}`;
+
+  container.append(title, driver, receivedAt, coordinate);
+  return container;
+}
+
+async function fetchJson(url, options) {
+  const response = await fetch(url, options);
+  const data = await response.json().catch(() => ({}));
+
+  if (!response.ok) {
+    throw new Error(data.error || `HTTP ${response.status}`);
+  }
+
+  return data;
+}
+
+function adminHeaders() {
+  return state.adminToken ? { "X-Admin-Token": state.adminToken } : {};
+}
+
+function withAdminToken(url) {
+  if (!state.adminToken) return url;
+
+  const parsedUrl = new URL(url, window.location.origin);
+  parsedUrl.searchParams.set("adminToken", state.adminToken);
+  return `${parsedUrl.pathname}${parsedUrl.search}`;
+}
+
+function requestAdminToken() {
+  const token = window.prompt("관리자 토큰");
+  if (!token) {
+    setConnectionStatus("토큰 필요", "error");
+    return;
+  }
+
+  state.adminToken = token.trim();
+  window.localStorage.setItem("cargoRadarAdminToken", state.adminToken);
+  refreshDrivers();
+  refreshLatestLocations();
+  connectEvents();
+}
+
+function setConnectionStatus(text, mode) {
+  elements.connectionStatus.textContent = text;
+  elements.connectionStatus.classList.toggle("is-online", mode === "online");
+  elements.connectionStatus.classList.toggle("is-error", mode === "error");
+}
+
+function showMapMessage(text) {
+  elements.mapMessage.textContent = text;
+  elements.mapMessage.classList.remove("is-hidden");
+}
+
+function hideMapMessage() {
+  elements.mapMessage.classList.add("is-hidden");
+}
+
+function getLocationStatus(location) {
+  const receivedAt = new Date(location.receivedAt).getTime();
+  const ageMs = Date.now() - receivedAt;
+
+  if (ageMs <= 2 * 60 * 1000) return { key: "active", label: "수신중" };
+  if (ageMs <= 10 * 60 * 1000) return { key: "stale", label: "지연" };
+  return { key: "offline", label: "미수신" };
+}
+
+function formatDateTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return new Intl.DateTimeFormat("ko-KR", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }).format(date);
+}
+
+function formatTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return new Intl.DateTimeFormat("ko-KR", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }).format(date);
+}
+
+function formatCoordinate(value) {
+  return Number(value).toFixed(5);
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}

apps/web/public/index.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CargoRadar Control</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <header class="topbar">
+        <div>
+          <strong class="brand">CargoRadar</strong>
+          <span class="subtitle">Control</span>
+        </div>
+        <div class="toolbar">
+          <span id="connectionStatus" class="status-pill">연결 대기</span>
+          <button id="refreshButton" type="button">새로고침</button>
+          <button id="demoButton" type="button">샘플 위치</button>
+        </div>
+      </header>
+
+      <main class="workspace">
+        <aside class="sidebar" aria-label="차량 목록">
+          <section class="summary-grid" aria-label="운영 현황">
+            <div class="metric">
+              <span class="metric-label">전체</span>
+              <strong id="totalCount">0</strong>
+            </div>
+            <div class="metric">
+              <span class="metric-label">수신중</span>
+              <strong id="activeCount">0</strong>
+            </div>
+            <div class="metric">
+              <span class="metric-label">지연</span>
+              <strong id="staleCount">0</strong>
+            </div>
+          </section>
+
+          <nav class="view-tabs" aria-label="관제 보기">
+            <button id="locationsTab" class="tab-button is-active" type="button">위치</button>
+            <button id="driversTab" class="tab-button" type="button">기사</button>
+          </nav>
+
+          <section id="locationsPanel" class="vehicle-panel">
+            <div class="panel-heading">
+              <h1>차량 위치</h1>
+              <span id="lastUpdated">-</span>
+            </div>
+            <div id="vehicleList" class="vehicle-list"></div>
+          </section>
+
+          <section id="driversPanel" class="vehicle-panel is-hidden">
+            <div class="panel-heading">
+              <h1>기사 관리</h1>
+              <span id="driverCount">0명</span>
+            </div>
+
+            <form id="driverForm" class="driver-form">
+              <label>
+                <span>기사명</span>
+                <input id="driverNameInput" name="name" required autocomplete="off" />
+              </label>
+              <label>
+                <span>차량번호</span>
+                <input id="vehicleNoInput" name="vehicleNo" required autocomplete="off" />
+              </label>
+              <label>
+                <span>전화번호</span>
+                <input id="phoneInput" name="phone" autocomplete="off" />
+              </label>
+              <label>
+                <span>기사 ID</span>
+                <input id="driverIdInput" name="driverId" autocomplete="off" />
+              </label>
+              <button type="submit">기사 등록</button>
+            </form>
+
+            <div id="driverList" class="driver-list"></div>
+          </section>
+        </aside>
+
+        <section class="map-panel" aria-label="지도">
+          <div id="map"></div>
+          <div id="mapMessage" class="map-message">지도 로딩 중</div>
+          <section id="historyDrawer" class="history-drawer is-hidden" aria-label="위치 이력">
+            <div class="history-heading">
+              <div>
+                <strong id="historyTitle">위치 이력</strong>
+                <span id="historySummary">-</span>
+              </div>
+              <button id="historyCloseButton" type="button">닫기</button>
+            </div>
+            <div id="historyList" class="history-list"></div>
+          </section>
+        </section>
+      </main>
+    </div>
+
+    <script src="/config.js"></script>
+    <script src="/app.js"></script>
+  </body>
+</html>

apps/web/public/styles.css

@@ -0,0 +1,594 @@
+:root {
+  color-scheme: light;
+  --bg: #f5f7f9;
+  --surface: #ffffff;
+  --surface-muted: #eef2f5;
+  --border: #d9e0e7;
+  --text: #17212b;
+  --muted: #657487;
+  --blue: #1f6feb;
+  --green: #15803d;
+  --amber: #b45309;
+  --red: #b42318;
+  --shadow: 0 12px 30px rgba(25, 37, 52, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family:
+    "Segoe UI",
+    "Noto Sans KR",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  letter-spacing: 0;
+}
+
+button {
+  min-height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+button:hover {
+  border-color: #9aa9b8;
+  background: #f9fbfc;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-rows: 58px minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: 0 1px 0 rgba(23, 33, 43, 0.02);
+}
+
+.brand {
+  font-size: 18px;
+}
+
+.subtitle {
+  margin-left: 8px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.status-pill.is-online {
+  border-color: rgba(21, 128, 61, 0.25);
+  background: rgba(21, 128, 61, 0.08);
+  color: var(--green);
+}
+
+.status-pill.is-error {
+  border-color: rgba(180, 35, 24, 0.25);
+  background: rgba(180, 35, 24, 0.08);
+  color: var(--red);
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+  min-height: 0;
+}
+
+.sidebar {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 12px;
+  min-height: 0;
+  padding: 14px;
+  border-right: 1px solid var(--border);
+  background: #fbfcfd;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.metric {
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.metric-label {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.metric strong {
+  display: block;
+  margin-top: 4px;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.view-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-muted);
+}
+
+.tab-button {
+  min-width: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--muted);
+}
+
+.tab-button.is-active {
+  border-color: var(--border);
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: 0 1px 4px rgba(25, 37, 52, 0.08);
+}
+
+.vehicle-panel {
+  min-height: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.vehicle-panel.is-hidden {
+  display: none;
+}
+
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-heading h1 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.panel-heading span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.vehicle-list {
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+
+.driver-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.driver-form label {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.driver-form label:nth-child(3),
+.driver-form label:nth-child(4),
+.driver-form button {
+  grid-column: 1 / -1;
+}
+
+.driver-form span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.driver-form input {
+  width: 100%;
+  min-height: 36px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0 9px;
+  background: #ffffff;
+  color: var(--text);
+  font: inherit;
+}
+
+.driver-form input:focus {
+  border-color: var(--blue);
+  outline: 2px solid rgba(31, 111, 235, 0.14);
+}
+
+.driver-list {
+  height: calc(100% - 259px);
+  min-height: 160px;
+  overflow: auto;
+}
+
+.driver-item {
+  display: grid;
+  gap: 10px;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.driver-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: start;
+}
+
+.driver-title {
+  min-width: 0;
+}
+
+.driver-title strong,
+.driver-token code {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.driver-token {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #f8fafb;
+}
+
+.driver-token code {
+  color: #25313d;
+  font-family: Consolas, "SFMono-Regular", monospace;
+  font-size: 12px;
+}
+
+.driver-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.empty-state {
+  padding: 20px 14px;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.vehicle-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+
+.vehicle-item:hover {
+  background: #f6f9fb;
+}
+
+.vehicle-main {
+  min-width: 0;
+}
+
+.vehicle-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.vehicle-title strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vehicle-meta {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 7px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.badge.active {
+  background: rgba(21, 128, 61, 0.1);
+  color: var(--green);
+}
+
+.badge.stale {
+  background: rgba(180, 83, 9, 0.12);
+  color: var(--amber);
+}
+
+.badge.offline {
+  background: rgba(180, 35, 24, 0.1);
+  color: var(--red);
+}
+
+.speed {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.map-panel {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+  background: #dfe7ed;
+}
+
+.map-message {
+  position: absolute;
+  z-index: 5;
+  top: 14px;
+  left: 50%;
+  max-width: min(420px, calc(100% - 28px));
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.96);
+  color: var(--muted);
+  box-shadow: var(--shadow);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.35;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+.map-message.is-hidden {
+  display: none;
+}
+
+.history-drawer {
+  position: absolute;
+  z-index: 4;
+  right: 14px;
+  bottom: 14px;
+  left: 14px;
+  max-height: min(310px, calc(100% - 28px));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.history-drawer.is-hidden {
+  display: none;
+}
+
+.history-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.history-heading strong,
+.history-heading span {
+  display: block;
+}
+
+.history-heading span {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.history-list {
+  display: grid;
+  max-height: 248px;
+  overflow: auto;
+}
+
+.history-row {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr) 72px;
+  gap: 10px;
+  align-items: center;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.history-row time,
+.history-row span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-row time {
+  color: var(--muted);
+  font-weight: 800;
+}
+
+.kakao-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  min-width: 42px;
+  min-height: 30px;
+  padding: 0 9px;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  background: var(--blue);
+  color: #ffffff;
+  box-shadow: 0 8px 18px rgba(16, 32, 48, 0.25);
+  font-size: 11px;
+  font-weight: 900;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.kakao-marker.stale {
+  background: var(--amber);
+}
+
+.kakao-marker.offline {
+  background: var(--red);
+}
+
+.kakao-popup {
+  min-width: 180px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.popup-title {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 900;
+}
+
+@media (max-width: 860px) {
+  .app-shell {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 12px;
+  }
+
+  .toolbar {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .workspace {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(260px, 38vh) minmax(0, 1fr);
+  }
+
+  .sidebar {
+    order: 2;
+    border-top: 1px solid var(--border);
+    border-right: 0;
+  }
+
+  .map-panel {
+    order: 1;
+  }
+
+  .driver-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .history-drawer {
+    right: 8px;
+    bottom: 8px;
+    left: 8px;
+  }
+
+  .history-row {
+    grid-template-columns: 82px minmax(0, 1fr);
+  }
+
+  .history-row span:last-child {
+    display: none;
+  }
+}