9WAY 2.0.0

크레딧 현황 UI + 리퍼럴 대시보드 + 구매 페이지 + 크레딧 부족 안내

## 작업 내용 ### 1. 크레딧 현황 페이지 수정 (`app/views/credits/index.html.erb`) 기존 리포트 크레딧만 표시 → 2종류 크레딧 분리 표시. - **리포트 크레딧 카드**: 기존 balance 표시, 용도: "강점 리포트 열람" - **진단 크레딧 카드**: diagnosis_balance 표시, 용도: "Big5 / 성장 / 행복도 진단" - "구매하기" 버튼 → diagnosis_credits/new 링크 - "공유로 무료 획득" 안내 문구 - 거래 내역에 credit_type 표시 (리포트/진단 구분) - 기존 Tailwind 디자인 시스템 유지 CreditsController도 수정 필요: ```ruby def index @user = Current.user @user.ensure_credit! @credit = @user.credit @transactions = @user.credit_transactions.order(created_at: :desc).limit(50) @referrals = @user.referrals_given.rewarded.this_month # 월간 리퍼럴 현황 end ``` ### 2. 리퍼럴 현황 섹션 크레딧 페이지 내에 리퍼럴 섹션 추가 (별도 페이지 불필요): - 이번 달 보상 횟수: N / 10 - 최근 추천 목록 (rewarded 상태, 날짜, 피추천자 이름) - "친구에게 공유하기" CTA → 진단 결과 공유 안내 ### 3. 진단 크레딧 구매 페이지 (`app/views/diagnosis_credits/new.html.erb`) PR4에서 이미 생성됨 — 확인 후 디자인 개선: - 가격 표시: 3,000원 / 크레딧 - 수량 선택 (1, 3, 5개) - Toss Payments 결제 버튼 - 기존 paywall 디자인 참고 (`app/views/diagnoses/paywall/`) ### 4. 크레딧 부족 안내 모달/페이지 진단 시작 시 크레딧 부족할 때 보여줄 UI: - `app/views/diagnoses/_insufficient_credits.html.erb` (partial) - "진단 크레딧이 필요합니다" 안내 - 두 가지 옵션: 1. "크레딧 구매" → diagnosis_credits/new 링크 2. "친구에게 공유하여 무료 크레딧 받기" → 공유 안내 - DiagnosesController에서 크레딧 부족 시 이 partial을 render하도록 (현재는 redirect + flash) ### 5. i18n (4개 언어) ```yaml # credits 관련 credits: index: report_credit: "리포트 크레딧" diagnosis_credit: "진단 크레딧" report_credit_desc: "강점 리포트 열람에 사용" diagnosis_credit_desc: "Big5 / 성장마인드셋 / 행복도 진단에 사용" buy_credits: "크레딧 구매" earn_free: "공유로 무료 획득" referral_status: "이번 달 추천 보상" referral_count: "%{count} / 10" share_invite: "친구에게 공유하기" transaction: report: "리포트" diagnosis: "진단" referral: "추천 보상" # diagnosis_credits 관련 diagnosis_credits: new: title: "진단 크레딧 구매" price_per_credit: "크레딧당 %{price}원" quantity: "수량" total: "총 결제금액" purchase: "결제하기" # insufficient credits diagnosis: insufficient_credits: title: "진단 크레딧이 필요합니다" buy_option: "크레딧 구매하기" share_option: "친구에게 공유하여 무료 크레딧 받기" ``` en, zh, vi도 추가. ### 6. 기존 UI 참고 - `app/views/diagnoses/paywall/` — 결제 페이지 디자인 - `app/views/credits/index.html.erb` — 현재 크레딧 페이지 - `app/views/shared/` — 공통 partial (_button, _card 등) - Tailwind CSS 사용, 모바일 반응형 필수 ## 완료 기준 - 크레딧 페이지에 2종류 크레딧 분리 표시 - 리퍼럴 현황 (N/10) 표시 - 진단 크레딧 구매 페이지 디자인 - 크레딧 부족 시 안내 UI - 모바일 반응형 - 4개 locale i18n - 테스트 통과