🎮 월드컵 게임 투표 통계 기능 개선기

오늘 월드컵 게임의 결과 페이지에서 투표 통계가 제대로 표시되지 않는 문제를 해결했습니다. 통계 매칭 로직과 UI까지 전면적으로 개선했습니다.

---

🐛 문제

월드컵 게임을 마친 후 결과 페이지에서

"아직 다른 사용자들의 투표 데이터가 없습니다”

라는 안내 문구만 보게 되는 상황이 지속적으로 발생하고 있었습니다"

---

🔍 원인 분석

투표 저장 누락

사용자가 선택을 완료해도 데이터베이스에 결과가 저장되지 않아 통계 데이터가 누락되고 있었습니다.

통계 매칭 오류

결과 페이지에서 우승자 ID로 정확한 통계 데이터를 찾지 못하는 로직 문제가 있었습니다.

---

🛠️ 해결 과정

1. 투표 저장 로직 추가

// 월드컵 게임에서 선택 시 투표를 저장
const handleChoice = async (choice: "A" | "B") => {
  const selectedQuestion = choice === "A" ? currentQuestionA : currentQuestionB;
  await updateQuestionVotesInDB(selectedQuestion.id, questionSet.id, choice);
};

2. 투표 통계 매칭 로직 수정

const winnerId = winner.id;
const stats = voteStats[winnerId];

if (stats) {
  const votesA = stats.votesA || 0;
  const votesB = stats.votesB || 0;
  const totalVotes = votesA + votesB;

  if (totalVotes > 0) {
    const winnerVotes = isOptionA ? votesA : votesB;
    const percentage = Math.round((winnerVotes / totalVotes) * 100);
    // 통계 계산 및 화면에 표시
  }
}

3. UI 개선

기존에는 투표 통계가 존재하더라도 항상 "데이터 없음" 메시지가 우선 노출되었습니다. 이에 따라 실제 통계가 있는 경우에도 사용자에게 보여지지 않는 문제가 있었습니다.

개선 전 UI

개선 후 UI

---

{/* 투표 통계 표시 */}
<div className="bg-blue-50 rounded-xl p-4 mb-6">
  <h4 className="text-sm font-medium text-blue-800 mb-2">📊 실제 투표 통계</h4>
  <div className="text-xs text-blue-600 mb-3">
    <strong>�� 최종 우승자</strong>가 참여한 모든 대결의 통계입니다.<br />
    (마지막 선택이 최종 우승자입니다)
  </div>

  <div className="flex items-center justify-between">
    <div className="text-blue-700">
      <span className="text-lg font-bold">{winnerStats.totalVotes}명</span> 총 선택
    </div>
    <div className="text-blue-700">
      <span className="text-lg font-bold">{winnerStats.averagePercentage}%</span> 평균 선택률
    </div>
  </div>
</div>

UI 내 텍스트와 숫자 강조를 분리해 가독성을 높였고, '실제 데이터'임을 명확히 표현해 사용자 신뢰도를 향상시켰습니다.

---

✅ 개선 결과

• 사용자의 선택이 즉시 저장되고
• 결과 페이지에서 정확한 투표 통계가 표시됩니다
• 우승자가 참가한 모든 대결의 평균 선택률을 통해, 해당 우승 항목이 얼마나 지지를 받았는지 확인할 수 있습니다.

📈 더 많은 사용자가 참여할수록 통계의 신뢰도와 재미도 함께 올라갑니다!

---

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