Improve mobile car monitor layout

2026-06-26 01:39:25 +09:00
parent 2e9c4eaf4a
commit 14f546890a
2 changed files with 158 additions and 12 deletions
@@ -15,6 +15,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저
 - 허용된 차량 명령 TCP 전송
 - monitor 화면과 AJAX 상태 갱신
 - monitor 화면 WakeLock, 언어, 테마 토글
+- 모바일 폭에 맞춘 사용량/로그 가로 스크롤과 시간 문구 축약
 - 사용량/요금 표시와 보정 metadata
 - 4.95초 UI timeout과 60초 사용량 정산 분리
 - TCP 실패 reason과 마지막 수신 지연 표시
@@ -37,6 +38,8 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저

 상태 기록 섹션의 경과는 각 로그가 기록된 시각부터 현재까지 흐른 시간입니다. 각 행의 `age_seconds`는 서버 현재시각과 로그 timestamp의 차이로 계산해 내려주며, 화면 갱신마다 상단 조회 주기 경과처럼 계속 증가합니다.

+모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표와 상태 기록 테이블은 카드 내부에서 좌우 스크롤되도록 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다.
+
 ## Monitor 화면 제어

 헤더 우측 컨트롤은 WakeLock, 언어, 테마 순서입니다. WakeLock은 Screen Wake Lock API를 지원하는 브라우저에서 화면 꺼짐을 방지하며, 활성 상태는 초록색 아이콘 버튼으로 표시합니다. 사용자의 선택은 `localStorage`에 저장하고, 새로고침이나 탭 복귀 후에는 브라우저 정책에 맞춰 다시 획득을 시도합니다.