Canteen Waiting Screen

개요

• 캔틴 매장에 설치되는 실시간 대기현황 전광판으로, 주문 상태를 대기와 완료로 나누어 시각적으로 표시
• 주문 완료 시 한국어 TTS와 알림음을 통해 호출 안내가 함께 출력

주요 기능

• 2단 레이아웃 좌측 대기, 우측 완료 구조로 매장 어디서든 한눈에 상태를 확인 가능
• 실시간 호출 WebSocket으로 CanteenHub Durable Object와 연결하여 신규 이벤트 즉시 반영, 카드 강조 및 알림음, TTS 호출 실행
• 오버레이 알림 호출 발생 시 전체 화면 오버레이로 번호와 메시지를 강조 표시
• 인기 메뉴 마퀴 인기 메뉴 및 운영 메시지를 흐르는 텍스트 형태로 노출
• 운영 상태 표시 운영 시간 및 임시 휴무 등 상태에 따라 안내 문구 자동 전환
• 음소거 동기화 어드민 설정과 연동되어 알림 음소거 상태를 동기화하고 로고 상태로 시각 표시
• 자동 새로고침 서버 빌드 타임 변경을 감지하여 idle 상태에서 자동 새로고침
• 연결 상태 표시 WebSocket 연결 상태 인디케이터 표시 및 30초 단위 ping pong 기반 자동 재연결

기술 스택

• TypeScript 기반 Cloudflare Worker가 단일 URL 호스트에서 HTML과 API를 함께 서빙
• 실시간 채널은 Durable Object CanteenHub를 키 기반으로 샤딩하고 WebSocket으로 연결
• 데이터는 D1, 알림 사운드는 R2에 저장하며, 프론트엔드는 서버 렌더 HTML 위에서 Vanilla JS로 동작
• TTS는 Web Speech API speechSynthesis와 HTMLAudioElement를 함께 사용

설계 노트

• 자동 재생 정책 대응을 위해 최초 사용자 인터랙션 시 muted 오디오를 통해 audio context를 활성화
• 알림 큐를 직렬화하여 동시에 들어온 호출도 순차적으로 처리하고 세션 ID로 중복 재생 방지
• TTS 실패 시 알림음을 이중 재생하는 fallback 구조로 모든 호출 보장
• 서버 빌드 타임 기반 버전 비교로 클라이언트 강제 갱신 타이밍 제어
• WebSocket 재연결을 2초 단위로 수행하고 30초 ping pong으로 연결 유지