React NativeExpoSupabaseToss Payments
HealthBox — 피트니스 센터 회원 앱
- 기여도
- 100%
- 기간
- 2.5개월
프로젝트 개요
수도권 3개 지점을 운영하는 피트니스 센터 체인의 회원 전용 모바일 앱입니다. 수업 예약, PT 스케줄 확인, QR 코드 출석 체크, 월 결제 내역 조회 기능을 제공합니다. Expo를 활용하여 iOS·Android를 단일 코드로 동시 배포했으며, Supabase Realtime으로 예약 현황을 실시간 반영합니다. Toss Payments로 정기 결제 자동화를 구현했습니다.
상세 기술 스택
- React Native (Expo SDK 51)
- TypeScript
- Supabase (PostgreSQL + Realtime)
- Toss Payments (정기 결제)
- Expo Camera (QR 스캔)
- React Query
- Zustand
기술적 문제 해결 과정
Problem 1
수업 예약과 결제 승인이 각각 독립적으로 처리되어, 결제 실패 후 예약이 확정되거나 결제 성공 후 예약이 누락되는 데이터 불일치 문제.
Solution
Supabase Edge Function으로 예약+결제를 단일 트랜잭션으로 처리. 결제 실패 시 예약 롤백, 예약 실패 시 결제 자동 취소 로직을 추가했습니다.
Result
예약-결제 불일치 건수 0건, 환불 처리 자동화로 CS 업무 70% 감소.
Problem 2
iOS에서 카메라 권한 요청이 앱 최초 실행이 아닌 QR 스캔 진입 시점에 팝업되어 UX가 어색하고, 권한 거부 후 재요청 방법이 없는 문제.
Solution
앱 온보딩 플로우에서 카메라 권한을 미리 요청하고, 거부된 경우 설정 앱으로 안내하는 딥링크 버튼을 제공하도록 수정했습니다.
Result
카메라 권한 허용율 61% → 89% 개선, QR 출석 기능 활성화율 40%p 상승.