테마
Story: 마이페이지 추천 코드 UI
메타
| 항목 | 값 |
|---|---|
| Story ID | E-07-S-07 |
| Epic | E-07 쿠폰 & 추천인 코드 |
| 상태 | ready-for-dev |
| 우선순위 | P1 |
| 규모 | S |
| 담당 개발자 | FE |
사용자 스토리
As a 유료 구독자,
I want 마이페이지에서 추천 현황을 확인하고 싶다,
So that 크레딧 적립 상태를 알 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 추천 코드 표시
| 항목 | 내용 |
|---|---|
| Given | 유료 구독자가 마이페이지에 진입할 때 |
| When | 추천 코드 섹션을 확인하면 |
| Then | 내 고유 추천 코드가 복사 가능하게 표시된다 |
AC-02: 추천 현황 표시
| 항목 | 내용 |
|---|---|
| Given | 추천 코드 섹션에서 |
| When | 추천 현황을 확인하면 |
| Then | 총 추천, 몰연동 완료, 결제 완료 수가 표시된다 |
AC-03: 크레딧 잔액 표시
| 항목 | 내용 |
|---|---|
| Given | 추천 코드 섹션에서 |
| When | 크레딧 정보를 확인하면 |
| Then | 총 잔액과 만료 예정 내역이 표시된다 |
태스크 분해
Task 1: 추천 코드 섹션
- [ ] 1.1: 추천 코드 카드 컴포넌트
- 코드 표시 + 복사 버튼
- 복사 시 "복사 완료!" 토스트
- [ ] 1.2: 보상 안내 문구
- 몰연동 3,500원 + 결제 3,500원
Task 2: 추천 현황
- [ ] 2.1: 추천 통계 표시
- 총 추천, 몰연동 완료, 결제 완료
- 각 단계별 적립 금액 표시
- [ ] 2.2: GET /users/me/referrals API 연동
Task 3: 크레딧 정보
- [ ] 3.1: 크레딧 잔액 표시
- "다음 결제 시 자동 차감됩니다"
- [ ] 3.2: 만료 예정 크레딧 목록
- 금액, 만료일, D-day 표시
- [ ] 3.3: GET /users/me/credits API 연동
화면 설계
┌────────────────────────────────────────────────────────────┐
│ 내 추천 코드 │
├────────────────────────────────────────────────────────────┤
│ │
│ 🎁 친구 추천하고 크레딧 받기! │
│ │
│ 내 추천 코드 │
│ ┌──────────────────────────────────────────┐ │
│ │ SELLER-ABC123 [복사] │ │
│ └──────────────────────────────────────────┘ │
│ │
│ 💰 보상 안내 │
│ • 친구가 몰연동하면 3,500원 크레딧 │
│ • 친구가 결제하면 3,500원 추가 크레딧 │
│ • 크레딧은 다음 결제 시 자동 차감! │
│ │
│ ───────────────────────────────────────────── │
│ │
│ 📊 추천 현황 │
│ │
│ 총 추천 5명 │
│ 몰연동 완료 3명 (+10,500원 적립) │
│ 결제 완료 2명 (+7,000원 적립) │
│ │
│ 💳 내 크레딧 잔액: 17,500원 │
│ └ 다음 결제 시 자동 차감됩니다 │
│ │
│ ⏰ 만료 예정 크레딧 │
│ ┌──────────────────────────────────────────┐ │
│ │ 3,500원 2026-03-15 만료 (D-54) │ │
│ │ 7,000원 2026-05-20 만료 (D-120) │ │
│ └──────────────────────────────────────────┘ │
│ └ 크레딧은 적립일로부터 12개월 내 사용해주세요 │
│ │
│ [카카오톡 공유] [링크 복사] │
│ │
└────────────────────────────────────────────────────────────┘이벤트 로깅
| 이벤트 | 파라미터 |
|---|---|
referral_page_viewed | user_id |
referral_code_copied | user_id, referral_code |
생성일: 2026-01-20