🎮 Pick2 게임에 실시간 투표 통계 기능 추가하기

Pick2 게임에 실시간 투표 통계 기능을 추가했습니다. 사용자들이 각 질문에 대해 어떤 선택을 했는지 실시간으로 확인할 수 있는 기능입니다!

---

🛠️ 구현한 기능

📊 실시간 투표 통계

• 각 질문별 A/B 선택 비율 표시
• 총 투표 수와 퍼센트 계산
• 커스텀 질문 세트별 통계 관리

---

🗃️ 데이터베이스 설계

-- 투표 통계 테이블
CREATE TABLE question_votes (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  question_id TEXT NOT NULL,
  question_set_id TEXT NOT NULL,
  votes_a INTEGER DEFAULT 0,
  votes_b INTEGER DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

---

🔧 기술적 구현

🧮 통계 데이터 구조

interface VoteStats {
  votesA: number;
  votesB: number;
  totalVotes: number;
  percentageA: number;
  percentageB: number;
}

🎨 UI 컴포넌트

• 투표 차트: 원형 차트로 A/B 비율 시각화
• 통계 카드: 투표 수와 퍼센트 표시
• 실시간 업데이트: 게임 완료 시 자동 통계 갱신

---

✨ 개선 내용

이전 vs 현재

---

🚀 주요 개선사항

1. 실시간 통계 표시

// 투표 통계 가져오기
const getQuestionVotes = async (questionId: string) => {
  const { data } = await supabase
    .from('question_votes')
    .select('votes_a, votes_b')
    .eq('question_id', questionId)
    .single();
  
  return {
    votesA: data?.votes_a || 0,
    votesB: data?.votes_b || 0
  };
};

2. 자동 통계 업데이트

• 게임 완료 시 자동으로 투표 데이터 저장
• UPSERT 방식으로 중복 방지
• 실시간 UI 업데이트

3. 시각적 개선

• 원형 차트로 직관적인 비율 표시
• 색상 구분으로 A/B 선택 명확화
• 반응형 디자인으로 모바일 최적화

---

📈 결과

💡 성능 개선

• 데이터 정확성: 100% 정확한 투표 통계
• 실시간성: 즉시 업데이트되는 통계
• 확장성: 무제한 사용자 지원

🙌 사용자

• 투명성: 다른 사용자들의 선택 확인 가능
• 재미요소: 통계를 통한 추가 흥미
• 공유문화: 전역 통계로 커뮤니티 형성

---

🎉 이제 Pick2 게임에서 실시간으로 다른 사용자들의 선택을 확인할 수 있습니다!

"통계는 단순한 숫자가 아니라, 사람들의 생각과 선호를 보여주는 거울입니다."

---

🔗 Pick2 체험해보기 (https://pik2.vercel.app/)