jay.log

픽챗 웹 - 결제·본인인증

라이프오아시스 • 2026.03 - 2026.07

토스페이먼츠 v2 결제위젯을 연동해 재화 결제 플로우를 구축했습니다. 클라이언트가 만들던 주문 ID를 서버 생성으로 옮기고, 결제 인증 후 서버 승인이 끝나야만 성공 화면을 보여주도록 설계해 금액 위변조·미승인 결제를 차단했습니다. 재화 부족(HTTP 402) 응답을 에러 코드 상수로 중앙화하고, 에러 토스트 대신 구매 바텀시트로 연결해 결제 전환 경로를 확보했습니다. 성인 콘텐츠 제작 시 PG 본인인증(PASS)을 요구하는 게이트는 인증 팝업과 메인 탭을 postMessage로 연결해 구현했습니다. 서버 API가 준비되기 전에도 검증이 돌도록 MSW 목 서버를 구축하고, 결제·본인인증·게스트 로그인·SSE 토큰 갱신 등 핵심 경로를 Playwright E2E로, 결제 승인·본인인증 상태 로직은 Vitest 단위 테스트로 고정했습니다.

주요 지표

10
E2E 핵심 경로
4개월
투입 기간

도전 과제

  • 클라이언트 주문 ID 생성으로 인한 금액 위변조 가능성
  • 결제 실패·이탈 경로 처리
  • 서버 API 준비 전 프론트 검증

해결 방안

  • 주문 생성을 서버로 옮기고 서버 승인 후에만 성공 화면 노출
  • 실패 코드별 안내와 결제 후 원래 화면 복귀 처리
  • MSW 목 서버 + Playwright E2E + Vitest 단위 테스트

결과

  • 금액 위변조·미승인 결제 차단
  • 핵심 경로 10개 자동 검증
  • 재화 부족 시 결제 전환 경로 확보

기술 스택

Next.js 15TanStack QueryTossPaymentsMSWPlaywrightVitest

© jay.log powered by Next.js, Vercel