🎮 Pik2 월드컵 토너먼트 버그 수정기: "선택한 승자가 사라지는 미스터리
개발하다 보면 예상치 못한 버그를 만나게 됩니다. 오늘은 Pik2 게임의 월드컵 토너먼트 모드에서 발생한 흥미로운 버그와 해결 과정을 공유해보려 합니다.
🐛 문제 발견: "어? 내가 선택한 캐릭터가 어디 갔지?"
16강에서 좋아하는 캐릭터들을 선택하고 8강으로 넘어갔는데...
"어? 분명히 프랭키와 니코 로빈을 선택했는데 왜 상디가 나와서 우승하고 있어?"
처음에는 단순한 UI 문제인 줄 알았습니다. 하지만 파고들수록 더 복잡한 문제들이 드러났습니다.
🔍 문제 분석: 3단계의 함정
1️⃣ 첫 번째 실수: "16강인데 4강이 나와요"
// 문제가 된 코드
console.log('roundQuestions:', 4) // 16강인데 4개만?
원인: 질문 세트는 16개로 저장되어 있었지만, 실제 브라켓 생성에서 문제가 발생
해결: 초기 데이터 로딩 과정을 디버깅하여 정확한 16개 질문 확인
2️⃣ 두 번째 실수: "질문 vs 캐릭터 개념 혼동"
가장 큰 실수는 데이터 구조를 잘못 이해한 것이었습니다.
// ❌ 잘못된 접근: 질문을 그대로 토너먼트 참가자로 사용
질문: "헐크 vs 스파이더맨" → 하나의 토너먼트 참가자
// ✅ 올바른 접근: 각 선택지를 개별 참가자로 분리
질문: "헐크 vs 스파이더맨" → 헐크(개별), 스파이더맨(개별)
해결 과정:
// 각 질문의 A, B 선택지를 개별 캐릭터로 변환
questions.forEach((q) => {
individuals.push({
id: `${q.id}_A`,
optionA: q.optionA, // 헐크
// ...
})
individuals.push({
id: `${q.id}_B`,
optionA: q.optionB, // 스파이더맨
// ...
})
})
3️⃣ 세 번째 실수: "React 상태 업데이트의 비동기 함정"
가장 까다로웠던 문제는 승자가 다음 라운드로 제대로 전달되지 않는 것이었습니다.
// ❌ 문제가 된 코드
setRoundQuestions(newWinners) // 비동기 업데이트
setWinners([]) // 다른 상태들과 충돌
setCurrentMatchIndex(0)
원인: React의 비동기 상태 업데이트로 인해 이전 데이터와 새 데이터가 섞임
해결책: 순차적 상태 업데이트와 함수형 업데이트 활용
// ✅ 해결된 코드
setWinners([]) // 1. 다른 상태 먼저 초기화
setCurrentMatchIndex(0)
setCurrentRound(prev => prev + 1)
setTimeout(() => { // 2. 짧은 지연 후 핵심 상태 업데이트
setRoundQuestions([...updatedWinners])
setIsSubmitting(false)
}, 100)
🛠️ 디버깅 전략: "로그야 고마워"
문제 해결 과정에서 체계적인 로깅이 큰 도움이 되었습니다:
console.log('🏆 Match completed:', {
roundName: "16강",
winner: "니코 로빈",
totalWinners: 7,
winnersNeeded: 8
})
이런 식으로 각 단계를 추적하니 정확히 어느 지점에서 문제가 발생하는지 파악할 수 있었습니다.
✨ 최종 결과: 완벽한 토너먼트
수정 전:
- 16강 → 갑자기 4강으로 점프 😵
- 선택한 캐릭터가 사라지고 엉뚱한 캐릭터가 우승 🤔
- 사용자 혼란과 불만 📢
수정 후:
- 16강 → 8강 → 준결승 → 결승 순서대로 정확한 진행 ✅
- 사용자가 선택한 승자들만 다음 라운드 진출 ✅
- 원하는 캐릭터들의 대결을 볼 수 있음 ✅
🎓 배운 점
1. 데이터 구조의 중요성
단순해 보이는 기능도 데이터를 어떻게 구조화하느냐에 따라 완전히 달라질 수 있습니다.
2. React 상태 관리의 복잡성
여러 상태가 연관되어 있을 때는 업데이트 순서와 타이밍이 매우 중요합니다.
3. 체계적인 디버깅의 힘
감으로 때려 맞추려 하지 말고, 로그를 통해 정확한 상황을 파악하는 것이 훨씬 효율적입니다.
🎯 마무리
버그는 좌절을 주기도 하지만, 동시에 성장의 기회이기도 합니다. 이번 경험을 통해 사용자 경험의 중요성과 세심한 상태 관리의 필요성을 다시 한번 깨달았습니다.
쉽지 않네...
🔗 Pick2 체험해보기 (https://pik2.vercel.app/)