레퍼럴(추천인) 시스템 구축

// 1. 사용자별 고유 추천 코드 생성 function generateReferralCode(userId) { // 사용자 ID 기반 짧은 코드 생성 return btoa(userId.toString()).slice(0, 8).toUpperCase(); } // 2. 추천 링크 생성 function getReferralLink(userId) { const code = generateReferralCode(userId); return `https://myhourlyrate.com?ref=${code}`; } // 3. 추천 코드 확인 (새 사용자가 방문할 때) async function checkReferral() { const params = new URLSearchParams(window.location.search); const refCode = params.get('ref'); if (!refCode) return; // 추천인 확인 const referrer = await findUserByCode(refCode); if (!referrer) return; // 추천 기록 저장 await supabase.from('referrals').insert({ referrer_id: referrer.id, referred_session: getSessionId(), status: 'visited' }); // 쿠키에 추천 코드 저장 (나중에 가입/사용 시 확인) document.cookie = `ref=${refCode}; max-age=2592000`; // 30일 } // 4. 도구 사용 완료 시 추천 확정 async function confirmReferral() { const refCode = getCookie('ref'); if (!refCode) return; // 추천 상태를 'converted'로 업데이트 await supabase.from('referrals') .update({ status: 'converted' }) .eq('referred_session', getSessionId()); // 추천인 보상 처리 const referrer = await findUserByCode(refCode); await addReward(referrer.id); }

<div class="referral-dashboard"> <h3>내 추천 현황</h3> <!-- 추천 링크 --> <div class="referral-link-section"> <p>내 추천 링크:</p> <div class="link-box"> <input readonly value="https://myhourlyrate.com?ref=ABC123" /> <button onclick="copyLink()">복사</button> </div> </div> <!-- 추천 현황 --> <div class="referral-stats"> <div class="stat"> <span class="stat-number">5</span> <span class="stat-label">링크 클릭</span> </div> <div class="stat"> <span class="stat-number">3</span> <span class="stat-label">가입 완료</span> </div> <div class="stat"> <span class="stat-number">2</span> <span class="stat-label">보상 획득</span> </div> </div> <!-- 보상 진행 --> <div class="reward-progress"> <p>다음 보상까지: 2명 더 추천!</p> <div class="progress-bar" style="width: 60%"></div> </div> </div>