/* Individual app screens for 셔틀아이디 */ // ---- BusInterior shared bg ---- const BusInterior = () => ( {[0, 1, 2, 3].map(row => ( ))} ); const MapSvg = () => ( ); // ============ SCREEN: Home ============ const HomeScreen = () => (
셔틀아이디
김
셔틀아이디가 처음인 분들을 위한
이용 가이드
›
오전 운행
곧 시작
08:30
일산 1호차 등하원
일산 차고지 → 한빛초등학교 · 23명 예정
주요 기능
); // ============ SCREEN: Multi-face Recognition (light) ============ const RecognitionScreen = () => (
3명 인식 · 멀티 모드
LIVE
{/* Camera viewfinder — matches real app's warm dark camera feed */}
{/* Corner scanning brackets */} {/* Recognition badge */}
인식 (3명)
{/* Faces */}
{/* Name list */}
{[{n: '김민준', p: 96}, {n: '이서연', p: 93}, {n: '박지훈', p: 91}].map(p => (
● {p.n}{p.p}%
))}
); const CornerBracket = ({x, y, dir}) => { const positions = { tl: {top: y, left: x, transform: 'rotate(0deg)'}, tr: {top: y, right: x, transform: 'rotate(90deg)'}, bl: {bottom: y, left: x, transform: 'rotate(-90deg)'}, br: {bottom: y, right: x, transform: 'rotate(180deg)'}, }; return (
); }; const FaceMarker = ({top, left, name, pct}) => (
{name}{pct}
); const StatCol = ({n, l, color}) => (
{n}
{l}
); // ============ SCREEN: 운행 종료 (residual check completed) ============ const CompletedScreen = () => (
운행 종료
⚠
안전 확인 절차
차 안에 남은 승객을 확인합니다
잔류 확인 완료
사진 3장 자동 촬영됨
); // ============ SCREEN: 운행 상세 ============ const DriveDetailScreen = () => (
운행 상세
2026.05.06 (수) · 08:30
일산 1호차 등원
잔류 확인 사진
{[1, 2, 3].map(i => (
{i}/3 · 자동
))}
); const BigStat = ({label, val}) => (
{label}
{val}
); // ============ SCREEN: 인식 결과 보고서 ============ const ReportScreen = () => (
인식 결과 보고서
상세
2026.05.06 등원
); const SummaryStat = ({label, val}) => (
{label}
{val}
); const PersonRow = ({init, name, sub, tag, tagColor}) => (
{init}
{name}
{sub}
{tag}
); // ============ SCREEN: 통계 dashboard ============ const StatsScreen = () => (
통계
이번 주 탑승객
123
명
+8%
통계 메뉴
); const BarChart = () => { const days = ['월', '화', '수', '목', '금', '토', '일']; const values = [18, 22, 28, 19, 25, 8, 3]; const max = 30; return (
{days.map((d, i) => { const h = (values[i] / max) * 70; const highlight = i === 2; return (
{d}
); })}
); }; // ============ SCREEN: 좌석 예약 ============ const SeatReservationScreen = () => { const available = new Set([5, 7, 10, 14, 15, 18, 20, 22, 24]); const numbers = {5: 5, 7: 7, 10: 10, 14: 14, 15: 15, 18: 18, 20: 20, 22: 22, 24: 25}; return (
좌석 예약
노선
일산 1호차 등원 · 08:30
← 운전석
{Array.from({length: 25}, (_, i) => { const row = Math.floor(i / 5); const col = i % 5; if (col === 2) return
; const isAvail = available.has(i); return (
{isAvail ? numbers[i] : ''}
); })}
예약 가능
이미 예약
); }; // ============ SCREEN: 운행 준비 ============ const PrepScreen = () => (
운행 준비
오전 운행 · 08:30
일산 1호차 등하원
일산 차고지
출발
한빛초등학교
도착
운행 시작 전 확인사항
스마트폰을 거치대에 놓으세요
전면 카메라가 출입구를 향하도록 고정해 주세요.
); Object.assign(window, { HomeScreen, RecognitionScreen, CompletedScreen, DriveDetailScreen, ReportScreen, StatsScreen, SeatReservationScreen, PrepScreen, BusInterior, MapSvg, });