PayFlow — 모바일 결제 흐름

React Native(Expo) 앱으로, 실제 PG 연동 없이 Mock 결제 API로 결제 요청과 응답 흐름을 구현했습니다.

결제 진행 상태를 여러 개의 boolean이 아니라 하나의 PaymentStatus 값으로 모델링해, 각 화면이 필요한 선행 상태가 없으면 이전 단계로 되돌아가도록 했습니다.

진행 중인 결제 흐름 상태는 Zustand로, 서버에 원본이 있는 데이터(결제 요청 결과, 결제 내역)는 TanStack Query로 역할을 나눴습니다.

중복 결제는 버튼 연타를 UI에서 막는 것과 별개로, 각 결제 시도에 idempotency key를 부여해 같은 요청이 다시 전달돼도 Mock API에서 중복 처리되지 않도록 했습니다.

결제 도중 앱이 백그라운드로 전환됐다가 돌아오면, 아직 처리 중인 결제는 해당 key로 상태를 다시 확인해 서버가 확정한 결과로 화면을 복구합니다.

인증 실패 / 잔액 부족 / 네트워크 오류는 개발용 패널에서 직접 골라 재현했고, 결제 결과는 optimistic update 없이 서버가 확정한 뒤에만 반영했습니다.