코인토스 & 야바위 페이지 리팩토링

[Ethen1264]

💡 배경 및 개요

• 기존 코인토스(CoinToss)와 야바위(Yavarwee) 미니게임은 하나의 컴포넌트에 모든 로직(상태 관리, 캔버스 렌더링, API 통신 등)이 몰려 있었습니다.
• 이로 인해 유지보수성이 떨어지고, 각 기능별 변경 및 확장이 어려웠습니다.
• 역할별 분리(Responsibility Separation) 및 **구조화(Modularization)**를 통해 유지보수성과 가독성을 크게 향상시켰습니다.

📃 작업내용

코인토스 (CoinToss)

• Canvas 렌더링 분리:
  useVideoCanvasPlayer 훅과 drawVideoFrameToCanvas 유틸로 영상-Canvas 렌더링 처리
• 애니메이션 관리 분리:
  useCoinTossAnimationEndHandler로 비디오 종료 후 처리 로직 관리
• 상태 관리 분리:
  useCoinTossController로 API 요청, 폼 상태, 애니메이션 상태를 통합 관리
• UI 분리:
  CoinTossAnimation 컴포넌트로 Canvas+Video UI 렌더링 분리
• 정리된 페이지 구성:
  CoinTossPage는 Form 조립과 UI 배치만 담당

야바위 (Yavarwee)

• Canvas 렌더링 분리:
  useCanvasAnimation, drawCups, drawBall 등 분리하여 관리
• 상태 관리 분리:
  useYavarweeCups, useYavarweeBall 훅으로 cups와 ball 상태 분리
• 타이머 관리 분리:
  useYavarweeTimer 훅으로 선택 제한 타이머 관리
• 상태 업데이트 분리:
  updateCupsAndBall 유틸로 컵/공 상태 일괄 업데이트
• UI 분리:
  StatusText, SelectingTimerProgress, IdleOverlay, RoundOverlay 등으로 UI 분리
• 정리된 페이지 구성:
  YavarweeAnimation은 오직 조립(responsible only for composition)

🔀 변경사항

• /entities/mini-game/coin-toss/
• /entities/mini-game/yavarwee/
• /shared/types/mini-game/
• canvas/, hooks/, ui/, utils/ 디렉토리 세분화 및 역할별 코드 분리
• Canvas 기반 렌더링 및 비디오 기반 렌더링 방식 정리
• 공통적으로 상태 관리, 애니메이션 제어, UI 컴포넌트 역할 구분

🎸 기타

야바위 페이지를 리팩토링 하면서 컵을 셔플 하는 로직을 변경 하였지만 안정성 혹은 애니매이션과의 싱크가 맞지 않는 상황이 우려되어 컵을 섞는 로직을 롤백함

• 기존 방식(구식 performShuffleAnimation):
  • 모든 shuffle 경로를 미리 계산한 다음,
  • 계획된 시간에 따라 정확히 재생하는 엄격한 방식.
• 현재 방식(리팩터링한 performShuffleAnimation):
  • shuffle 경로를 실시간 랜덤 생성해서,
  • 바로 setTimeout 등록하는 유연하지만 약간 불안정한 방식.

[netlify]

✅ Deploy Preview for gsm-gogov3 ready!

Name	Link
🔨 Latest commit	a9fbc66
🔍 Latest deploy log	https://app.netlify.com/sites/gsm-gogov3/deploys/6812d680a26a960009416537
😎 Deploy Preview	https://deploy-preview-221--gsm-gogov3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.