Canteen Admin
캔틴 주문 관리 시스템
개요
- 캔틴 주방에서 사용하는 모바일 주문 관리 시스템으로, PIN 인증을 통해 키친 단말에 로그인하면 주문 카드가 실시간으로 표시되고 영수증 및 라벨이 USB 프린터로 즉시 출력
- 주문 발생 시 사운드와 함께 카드가 강조되어 주방 작업 흐름을 빠르게 처리할 수 있도록 구성
주요 기능
- PIN 키친 로그인 6자리 PIN 검증 후 HMAC-SHA256 서명 기반 쿠키 세션 발급, 최대 1년 유지로 단말 재로그인 최소화
- 실시간 주문 카드 WebSocket으로 CanteenHub Durable Object에 연결하여 신규 주문 즉시 카드 생성 및 알림음 출력
- 카드 액션 인쇄, 호출, 취소, 완료를 카드 단위로 즉시 처리하며 처리 상태를 시각적으로 강조
- WebUSB 영수증 출력 브라우저에서 USB 프린터로 ESC/POS 바이트를 직접 전송하고 자동 재연결 및 컬럼 자동 감지 지원
- 번호 키패드 오버레이 주문 번호 기반 빠른 검색 및 호출을 위한 풀스크린 키패드 제공
- Wake Lock 유지 화면 꺼짐 방지를 위해 navigator.wakeLock을 사용해 주방 단말 idle 슬립 방지
- 배터리 인디케이터 navigator.getBattery 기반으로 상태 표시 및 저전력 경고 제공
- 다크 모드 매장 환경에 맞춘 테마 전환 및 카드 UI 일괄 적용
- PWA 풀스크린 홈 화면 설치 시 네이티브 앱처럼 동작하는 풀스크린 모드 지원
기술 스택
- TypeScript 기반 Cloudflare Worker가 PIN 인증 화면과 주문 관리 UI 및 API를 통합 서빙
- 실시간 통신은 Durable Object CanteenHub를 기반으로 WebSocket 샤딩 구조로 처리
- 데이터는 D1, 알림 사운드는 R2에 저장되며, 프론트는 서버 렌더 HTML 위의 Vanilla JS로 구성
- 프린터 연동은 WebUSB API를 통해 ESC/POS 명령을 직접 전송하며, 화면 유지 및 상태 표시는 Web Platform API를 활용
설계 노트
- PIN 세션을 다운로드 토큰 발급 구조와 통합하여 인증 로직 단일화
- WebUSB 디바이스 자동 재연결 및 disconnect 이벤트 기반 상태 즉시 반영
- iOS Safari 자동재생 정책 대응을 위해 최초 사용자 인터랙션 기반 오디오 활성화
- WebSocket 자동 재연결 및 상태 인디케이터를 통한 수동 재연결 지원
- dvh 기반 레이아웃으로 모바일 회전 및 주소창 변화 환경에서도 UI 안정성 유지