장사왕 스프린트 대시보드

테마

Story: 결제 페이지 쿠폰 적용 ​

메타 ​

항목값
Story IDE-07-S-03
EpicE-07 쿠폰 & 추천인 코드
상태ready-for-dev
우선순위P0
규모M
담당 개발자FE, BE

사용자 스토리 ​

As a 신규 구독자,
I want 결제 시 쿠폰을 적용하고 싶다,
So that 할인된 금액으로 결제할 수 있다.

수락 기준 (Acceptance Criteria) ​

AC-01: 쿠폰 선택 UI ​

항목내용
Given결제 페이지에서
When보유 쿠폰이 있으면
Then쿠폰 선택 드롭다운에 적용 가능한 쿠폰이 표시된다

AC-02: 쿠폰 자동 적용 ​

항목내용
Given첫결제 100원 쿠폰을 보유한 사용자가
When결제 페이지에 진입하면
Then쿠폰이 자동 선택되고 100원으로 표시된다

AC-03: 할인 금액 계산 ​

항목내용
Given쿠폰을 선택했을 때
When금액을 계산하면
Then원가, 쿠폰 할인, 크레딧 차감, 최종 금액이 표시된다

AC-04: TossPayments 연동 ​

항목내용
Given결제하기 버튼을 클릭하면
WhenTossPayments SDK를 호출할 때
Then최종 금액과 상품명(할인 정보 포함)이 전달된다

태스크 분해 ​

Task 1: 결제 페이지 UI ​

  • [ ] 1.1: 쿠폰 선택 컴포넌트
    • 보유 쿠폰 목록 드롭다운
    • 적용 불가 쿠폰은 회색 처리 + 사유 표시
  • [ ] 1.2: 금액 계산 영역
    • 상품 금액, 쿠폰 할인, 크레딧 사용, 최종 결제 금액
  • [ ] 1.3: 다음 결제 예정 안내
    • "다음 결제일: 2026.02.15 (110,000원)"

Task 2: 결제 금액 계산 API ​

  • [ ] 2.1: POST /payments/calculate
    • 입력: planId, couponId
    • 출력: originalPrice, couponDiscount, creditUsage, finalAmount
  • [ ] 2.2: 적용 순서 로직
    1. 원가에서 쿠폰 할인
    2. 쿠폰 적용 후 금액에서 크레딧 차감
    3. 최종 결제 금액

Task 3: TossPayments 연동 ​

  • [ ] 3.1: orderName 생성 로직
    • 첫결제 쿠폰: "장사왕 PRO10 (첫결제 할인)"
    • 일반 쿠폰: "장사왕 PRO10 (XX% 할인)"
  • [ ] 3.2: 결제 성공 후 쿠폰 사용 처리
  • [ ] 3.3: 결제 실패 시 쿠폰 미차감 유지

화면 설계 ​

┌────────────────────────────────────────────────────────────┐
│  결제하기                                                   │
├────────────────────────────────────────────────────────────┤
│                                                            │
│  📦 장사왕 PRO10                                            │
│     월 110,000원                                            │
│                                                            │
│  ─────────────────────────────────────────────             │
│                                                            │
│  🎫 쿠폰                                                    │
│  ┌──────────────────────────────────────────┐             │
│  │ ✅ 첫결제 100원 쿠폰 (-109,900원)          │             │
│  └──────────────────────────────────────────┘             │
│                     [다른 쿠폰 선택]                        │
│                                                            │
│  💰 추천 크레딧                                             │
│     보유: 7,000원 → 사용: 0원 (결제금액 100원 미만)         │
│                                                            │
│  ─────────────────────────────────────────────             │
│                                                            │
│  결제 금액                                                  │
│  상품 금액             110,000원                            │
│  쿠폰 할인            -109,900원                            │
│  크레딧 사용               -0원                            │
│  ─────────────────────────────────────────────            │
│  최종 결제 금액           100원                            │
│                                                            │
│  ※ 다음 결제일: 2026.02.15 (110,000원)                      │
│                                                            │
│  [        100원 결제하기        ]                          │
│                                                            │
└────────────────────────────────────────────────────────────┘

개발 노트 ​

적용 순서 (업계 표준) ​

1. 원가에서 쿠폰 할인 먼저 적용
2. 쿠폰 적용 후 금액에서 크레딧 차감
3. 남은 금액 결제

예시:
원가: 110,000원
쿠폰: 50% 할인 (55,000원)
크레딧: 14,000원

계산:
① 110,000 - 55,000(쿠폰) = 55,000원
② 55,000 - 14,000(크레딧) = 41,000원
③ 최종 결제: 41,000원

TossPayments UI 제약 ​

  • 결제창 내 쿠폰 선택 UI 불가
  • 장사왕 페이지에서 쿠폰/크레딧 선택 후 최종 금액만 전달

이벤트 로깅 ​

이벤트파라미터
coupon_selectedcoupon_code, discount_amount
coupon_appliedcoupon_code, discount_amount, final_amount
coupon_usedcoupon_code, payment_id
first_payment_coupon_useduser_id, payment_amount

생성일: 2026-01-20

장사왕 Product Team

© 2026 장사왕