모바일 티켓 + QR 태깅 + K-BINGO 카드

개요

크라우니티켓에 모바일 티켓 시스템 구현. 예매 시 K-BINGO 카드 1~4장이 자동 포함되고, QR 코드 이미지로 입장 체크인. 스태프 스캐너 페이지에서 카메라로 QR 태깅하여 현장 체크인.

무엇을 했는지

1. 모바일 티켓 페이지 (mticket.html)

• URL: ticket.crowny.org/mticket/TK-XXXXXXXX
• 모바일 퍼스트 반응형 디자인 (최대 400px)
• 티켓 정보: 공연명, 장소, 날짜, 좌석, 결제금액
• QR 코드 이미지 렌더링 (Canvas 기반 자체 구현, 외부 의존성 없음)
• 상태 표시: 입장가능(녹), 체크인완료(보라), 취소됨(빨강)
• 티켓 코드 직접 입력 조회 기능

2. K-BINGO 카드 임베딩

• 예매 시 K-컨텐츠 테마 5×5 빙고 카드 2장 자동 생성
• generateTicketBingoCards(theme, count) — kbingo/engine.js에 추가
• 카테고리 헤더(B/I/N/G/O) + 이모지/텍스트 셀 + FREE 중앙
• reservations 테이블에 bingo_cards JSON 컬럼 추가
• 기존 예약도 모바일 티켓 조회 시 자동 생성

3. QR 스캐너 (scan.html)

• URL: ticket.crowny.org/scan (스태프용)
• 카메라 접근 (getUserMedia, 후면 카메라 우선)
• jsQR 라이브러리로 실시간 QR 디코딩 (CDN, 폴백으로 수동입력)
• 스캔 프레임 오버레이 + 스캔라인 애니메이션
• 수동 입력 폴백 (카메라 불가 시)
• 체크인 이력 목록 (성공/실패, 시간)
• 진동 피드백 (체크인 성공 시)

4. 서버 API 추가

• GET /api/mticket/:qrCode — QR코드로 모바일 티켓 조회 (빙고카드 포함)
• POST /api/checkin — QR코드만으로 체크인 (reservation ID 불필요)
• POST /api/tickets/:id/checkin — 기존 체크인 API 유지 (하위호환)

5. 예매 엔진 업데이트

• bookSeat() — 예매 시 빙고카드 2장 자동 생성/저장
• bingo_cards 컬럼 ALTER TABLE 자동 추가 (서버 시작 시)

6. 한선씨 동반

• 한선씨/모바일티켓.한선 — QR코드생성, 빙고카드생성, 체크인검증, 환불비율
• 컴파일 성공 (hanseonc_high → 1,352 큐브)

아키텍처

[예매]                    [모바일 티켓]              [체크인]
ticket.html          →   mticket.html           ←   scan.html
 └ 예매 (bookSeat)         └ QR 코드 이미지          └ 카메라 스캔
 └ 빙고카드 자동생성        └ 티켓 정보               └ jsQR 디코딩
 └ 모바일티켓 링크          └ K-BINGO 카드 1~4장      └ 수동 입력
                            └ 상태 표시               └ POST /api/checkin

[ticket-server.js]
 └ GET /api/mticket/:qr   — 모바일 티켓 + 빙고카드
 └ POST /api/checkin       — QR 코드 체크인
 └ GET /mticket/:code      — SPA 라우팅
 └ GET /scan               — 스캐너 SPA

[kbingo/engine.js]
 └ generateTicketBingoCards(theme, count) — 신규

관련 파일

• /Users/ef/crowny-play/public/mticket.html — 모바일 티켓 SPA (QR+빙고)
• /Users/ef/crowny-play/public/scan.html — QR 스캐너 SPA (체크인)
• /Users/ef/crowny-play/ticket-server.js — API 추가 (mticket, checkin)
• /Users/ef/crowny-play/src/ticket/engine.js — 빙고카드 생성 연동
• /Users/ef/crowny-play/src/kbingo/engine.js — generateTicketBingoCards 추가
• /Users/ef/crowny-play/public/ticket.html — 모바일 티켓 링크 추가
• /Users/ef/crowny-play/한선씨/모바일티켓.한선 — 동반 코드
• /Users/ef/crowny-play/CLAUDE.md — v0.4.0 업데이트

잔여 이슈

• NFC 태깅 지원 (Web NFC API, Chrome Android 한정)
• 오프라인 모바일 티켓 (Service Worker 캐싱)
• 빙고 카드 테마 선택 (예매 시 테마 고르기)
• 빙고 카드 인쇄 기능 (mticket.html에서)
• LIVE 빙고와 모바일 티켓 빙고 카드 연동