Story: 추천 코드 공유 UX (카카오/링크)

메타

항목	값
Story ID	E-07-S-12
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	서비스 썸네일, 혜택 안내, CTA가 표시된다

---

태스크 분해

Task 1: 링크 복사

• [ ] 1.1: 추천 링크 생성
  • https://jangsawang.com/signup?ref={code}
• [ ] 1.2: 클립보드 복사 + 토스트 알림
  • "복사 완료! 친구에게 공유해보세요"

Task 2: 카카오톡 공유

• [ ] 2.1: 카카오 SDK 연동
• [ ] 2.2: 공유 템플릿 설정
  • 썸네일 이미지
  • 제목: "장사왕으로 광고 순이익 분석하세요"
  • 설명: "가입하면 첫결제 100원!"
  • 버튼: "가입하기"
• [ ] 2.3: 카카오 비즈앱 설정

Task 3: 공유 버튼 UI

• [ ] 3.1: 마이페이지 공유 버튼 컴포넌트
  • [카카오톡 공유] [링크 복사]
• [ ] 3.2: 모바일 네이티브 공유 (선택)
  • Web Share API 활용

---

화면 설계

공유 버튼 영역

┌────────────────────────────────────────────────────────────┐
│                                                            │
│  내 추천 코드: SELLER-ABC123                                │
│                                                            │
│  ┌─────────────────┐  ┌─────────────────┐                │
│  │  🟡 카카오톡 공유  │  │  🔗 링크 복사    │                │
│  └─────────────────┘  └─────────────────┘                │
│                                                            │
└────────────────────────────────────────────────────────────┘

카카오톡 공유 카드

┌────────────────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────────────┐ │
│  │  [장사왕 썸네일 이미지]                                │ │
│  │                                                      │ │
│  │  장사왕으로 광고 순이익 분석하세요                      │ │
│  │                                                      │ │
│  │  쿠팡/스마트스토어 셀러를 위한                         │ │
│  │  광고 수익성 분석 서비스                               │ │
│  │                                                      │ │
│  │  🎁 가입하면 첫결제 100원!                            │ │
│  │                                                      │ │
│  │  [    가입하기    ]                                  │ │
│  └──────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘

---

개발 노트

카카오 SDK 설정

Kakao.Share.sendDefault({
  objectType: 'feed',
  content: {
    title: '장사왕으로 광고 순이익 분석하세요',
    description: '쿠팡/스마트스토어 셀러를 위한 광고 수익성 분석 서비스',
    imageUrl: 'https://jangsawang.com/og-image.png',
    link: {
      mobileWebUrl: `https://jangsawang.com/signup?ref=${referralCode}`,
      webUrl: `https://jangsawang.com/signup?ref=${referralCode}`,
    },
  },
  buttons: [
    {
      title: '가입하기',
      link: {
        mobileWebUrl: `https://jangsawang.com/signup?ref=${referralCode}`,
        webUrl: `https://jangsawang.com/signup?ref=${referralCode}`,
      },
    },
  ],
});

---

이벤트 로깅

이벤트	파라미터
referral_link_copied	user_id, referral_code
referral_kakao_shared	user_id, referral_code
referral_share_clicked	user_id, share_type (kakao/link)

---

생성일: 2026-01-20