RC Kiosk

1. 화면

왼쪽은 헌혈자가 보는 키오스크, 오른쪽은 직원이 보는 관리자 백오피스. 같은 데이터, 다른 관점.

2. 문제

기존에는 헌혈자가 기념품을 고르면 직원이 종이로 받아 적고, 기록은 엑셀로 수동 관리했다. 헌혈의 집마다 기념품 구성이 다르고, A/B 그룹(단일 선택 vs 다중 선택) 정책도 달라 현장마다 매번 설명·기록이 반복됐다. 이걸 키오스크로 자동화하되, 운영자가 지점·기념품을 직접 통제할 수 있는 백오피스를 함께 만들었다.

3. 사용자 키오스크 (rc-kiosk-app)

3.1 동작 흐름

1. 지점 식별 — 단축 URL의 locationId로 donation_locations 조회, 지점명 표시.
2. 기념품 목록 로드 — gift_items에서 해당 지점에 활성화(visible=true)된 항목만 필터. 카테고리(A/B), 정렬순서, 다중 선택 가능 여부까지 모두 DB에서.
3. 선택 → 검증 — 카테고리별 1개(A 그룹) / 다중(B 그룹) 정책 적용.
4. 이름 입력 → 제출 — 선택 기록을 gift_records에 저장.

3.2 화면별 구현 디테일

• 기념품 카드 — 카테고리, 이름, 설명, 선택 표시. 선택 시 적색 테두리 + 체크 배지.
• 에러 토스트 — 네트워크 오류 시 3초간 자동 닫힘 메시지.
• 툴팁 — 다중 선택 가능/불가 항목에 대한 안내.

4. 관리자 백오피스 (rc-kiosk-admin-app)

4.1 MainLayout (사이드바)

4개 탭 — 선택자(selector) / 선택 기록(records) / 일괄 아이템(bulkItems) / 로그인(login). 활성 탭을 localStorage에 저장해 새로고침 시에도 유지. 키보드 포커스 트랩 + ESC 닫기 등 접근성 처리.

4.2 AdminRecords

헌혈자가 제출한 선택 기록 조회. 지점·날짜·지급 상태 필터, 일괄 삭제·지급 토글.

4.3 BulkItemManager

기념품 다중 등록/수정. react-beautiful-dnd로 카테고리·정렬 순서 드래그 편집. 이미지 선택 시 ImageSelectorModal로 미리보기/업로드.

4.4 GlobalItemManager

전 지점 공통 vs 지점별 기념품 분리 관리. 지점 활성화/비활성화 토글.

4.5 KioskLinks

qrcode.react로 각 지점 단축 URL의 QR을 즉시 생성 — 포스터에 인쇄해서 지점에 붙인다.

4.6 통계 (StatisticsModal)

기념품별 선택 수 집계. 대시보드 KPI와 일관되게 표시.

4.7 UX 디테일

• 모달 우선: 일괄 등록·이미지 선택·통계는 모두 모달로 띄워 메인 흐름 끊김 없이.
• 드래그 정렬: 기념품 카테고리/순서를 드래그로 즉시 편집.
• QR 즉시 생성: 지점 등록 시 바로 QR 미리보기 — 인쇄용 PNG(1024px) 다운로드.
• 키보드 접근성: 사이드바 ESC 닫기, 포커스 트랩, 마지막 활성 탭 기억.

5. 공유 데이터 모델

두 앱은 같은 5개 테이블을 공유한다. 지점·기념품·지점별 매핑·선택기록·인증이 분리되어 있어 양쪽이 항상 동기화된다.

gift_items {
  id, name, image_url, description,
  category: "A" | "B",
  sort_order, allow_multiple, visible
}

donation_locations {
  id, name  -- 키오스크 단축 URL 진입점
}

location_gift_items {
  location_id, gift_item_id  -- 지점별 기념품 매핑
}

gift_records {
  id, location_id, item_ids, donor_name, created_at
}

user_auth {
  id, password_hash  -- 관리자 인증 (백오피스)
}

관리자가 비활성화한 기념품은 즉시 키오스크에서 사라진다 — 별도 캐시 없이. Tailwind 색상 토큰은 적십자 팬톤 팔레트(redCrossRed, redCrossWarmGray, redCrossGold, redCrossGray, redCrossSilver) 5종을 사용해 시각 일관성을 유지했다.

6. 배포

• Firebase Hosting 정적 호스팅 (firebase deploy --only hosting).
• 지점별 단축 URL — 각 헌혈의 집에 QR/포스터로 배포. 키오스크 PC 브라우저에서 바로 진입.
• 환경 변수 — VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY만 주입. 키 값은 레포 밖.
• 인증 — localStorage 기반 isAdmin 플래그 (사내 사용 한정).

7. 레포지토리