테마
Story: 결제 UI 개발 (SDK 적용)
메타
| 항목 | 값 |
|---|---|
| Story ID | E-06-S-03 |
| Epic | E-06 PG사 이관 |
| 상태 | ready-for-dev |
| 우선순위 | P0 |
| 규모 | M |
| 담당 개발자 | 수민 (FE) |
사용자 스토리
As a 셀러,
I want 깔끔한 결제 화면에서 쉽게 결제하고 싶다,
So that 복잡한 과정 없이 구독을 시작할 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 결제 페이지
| 항목 | 내용 |
|---|---|
| Given | 사용자가 결제 페이지에 진입했을 때 |
| When | 페이지가 로드되면 |
| Then | 요금제 정보와 결제 버튼이 표시된다 |
AC-02: SDK 결제창 호출
| 항목 | 내용 |
|---|---|
| Given | 결제 버튼을 클릭했을 때 |
| When | 토스페이먼츠 SDK를 호출하면 |
| Then | 결제창이 팝업으로 열린다 |
AC-03: 결제 완료 처리
| 항목 | 내용 |
|---|---|
| Given | 결제가 완료되었을 때 |
| When | 결제 결과를 받으면 |
| Then | 성공/실패에 따라 적절한 화면이 표시된다 |
태스크 분해
Task 1: 결제 페이지
- [ ] 1.1: /payment 라우트 생성
- [ ] 1.2: 요금제 정보 표시
- [ ] 1.3: 결제 버튼
Task 2: SDK 연동
- [ ] 2.1: @tosspayments/payment-widget-sdk 설치
- [ ] 2.2: PaymentWidget 초기화
- [ ] 2.3: 결제창 호출 로직
Task 3: 결제 결과
- [ ] 3.1: 성공 페이지 (/payment/success)
- [ ] 3.2: 실패 페이지 (/payment/fail)
- [ ] 3.3: GA4 이벤트
생성일: 2026-01-20