Wickedness/Comtropy_CargoRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

관제 첫 화면 디자인 개선

Browse Source
This commit is contained in:
y2keui
2026-06-06 19:32:28 +09:00
parent 412acbc846
commit b2562e9145
3 changed files with 736 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
apps/web/public/index.html
View File

@@ -9,19 +9,65 @@
<body>
<div class="app-shell">
<header class="topbar">
<div>
<strong class="brand">CargoRadar</strong>
<span class="subtitle">Control</span>
<div class="brand-lockup">
<span class="brand-mark" aria-hidden="true">CR</span>
<div>
<strong class="brand">CargoRadar</strong>
<span class="subtitle">Live freight control</span>
</div>
</div>
<div class="topbar-context">
<span class="topbar-chip">Demo control tower</span>
<time id="systemClock" datetime="">--:--</time>
</div>
<div class="toolbar">
<span id="connectionStatus" class="status-pill">연결 대기</span>
<button id="refreshButton" type="button">새로고침</button>
<button id="demoButton" type="button">샘플 위치</button>
<button id="refreshButton" class="toolbar-button" type="button">
<span class="button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img">
<path d="M20 12a8 8 0 1 1-2.34-5.66" />
<path d="M20 4v6h-6" />
</svg>
</span>
새로고침
</button>
<button id="demoButton" class="toolbar-button" type="button">
<span class="button-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img">
<path d="M7 18h10" />
<path d="M6 14l2-5h8l2 5" />
<path d="M8 14h8" />
<path d="M9 18v-2" />
<path d="M15 18v-2" />
</svg>
</span>
샘플 위치
</button>
</div>
</header>
<main class="workspace">
<aside class="sidebar" aria-label="차량 목록">
<section class="ops-brief" aria-label="운영 브리핑">
<span class="section-eyebrow">오늘의 관제</span>
<strong id="opsHeadline">전국 운송 상태 확인 중</strong>
<p id="opsSubline">실시간 위치 수신을 기다리고 있습니다.</p>
<div class="ops-brief-grid">
<span>
<small>평균 ETA</small>
<strong id="averageEta">-</strong>
</span>
<span>
<small>화물 품목</small>
<strong id="cargoTypeCount">-</strong>
</span>
<span>
<small>경로 표시</small>
<strong id="routePreviewCount">-</strong>
</span>
</div>
</section>
<section class="summary-grid" aria-label="운영 현황">
<div class="metric">
<span class="metric-label">전체</span>
@@ -45,7 +91,18 @@
<section id="locationsPanel" class="vehicle-panel">
<div class="panel-heading">
<h1>차량 위치</h1>
<span id="lastUpdated">-</span>
<span id="lastUpdated">수신 대기</span>
</div>
<div class="vehicle-controls">
<label class="search-field">
<span>검색</span>
<input id="vehicleSearchInput" type="search" placeholder="차량, 기사, 화물, 목적지" autocomplete="off" />
</label>
<div class="status-filters" aria-label="차량 상태 필터">
<button class="filter-button is-active" type="button" data-status-filter="all">전체</button>
<button class="filter-button" type="button" data-status-filter="active">수신중</button>
<button class="filter-button" type="button" data-status-filter="stale">주의</button>
</div>
</div>
<div id="vehicleList" class="vehicle-list"></div>
</section>
@@ -95,6 +152,25 @@
<section class="map-panel" aria-label="지도">
<div id="map"></div>
<div id="mapMessage" class="map-message">지도 로딩 중</div>
<section class="map-status-panel" aria-label="지도 운영 상태">
<span class="section-eyebrow">Realtime map</span>
<strong id="mapStatusTitle">전국 화물 이동 상황</strong>
<div class="map-status-grid">
<span><b id="mapActiveCount">0</b> 수신중</span>
<span><b id="mapEtaSummary">-</b> 평균 ETA</span>
<span><b id="mapUpdatedAt">-</b> 최근 수신</span>
</div>
</section>
<section id="routeFocusPanel" class="route-focus-panel" aria-live="polite">
<span class="section-eyebrow">Selected route</span>
<strong id="routeFocusTitle">차량을 선택하세요</strong>
<p id="routeFocusMeta">목적지 경로와 예상 도착 시간이 지도 위에 표시됩니다.</p>
</section>
<div class="map-legend" aria-label="지도 범례">
<span><i class="legend-dot active"></i>수신중</span>
<span><i class="legend-dot stale"></i>주의</span>
<span><i class="legend-line"></i>목적지 경로</span>
</div>
<section id="historyDrawer" class="history-drawer is-hidden" aria-label="위치 이력">
<div class="history-heading">
<div>