가챠 카드게임 Spirit Summon(소환진) UI 리디자인

[sumi-0011]

💻 작업 내용

기존 FanDrawingGame(부채꼴 펼침 방식)을 Spirit Summon(소환진 수렴 의식) 컨셉의 새로운 카드 뽑기 UI로 완전 교체했습니다.

변경 전 → 변경 후

• 이전: 카드 7장이 부채꼴로 펼쳐지고, 선택한 카드가 뒤집히며 결과 공개
• 이후: 마법진 위에 카드 7장이 원형으로 소환되고, 선택 시 중앙으로 수렴 → 파쇄 → 충격파와 함께 결과 카드 등장

신규 파일 (4개)

파일	역할
SummonDrawingGame/RitualCircle.tsx	동심원 회전 마법진 (8개 룬 포인트, 센터 글로우, 가속 모드)
SummonDrawingGame/SummonMotion.tsx	6개 모션 컴포넌트: 원형 소환+플로팅, spring 수렴, 머지(펄스+흔들림), clip-path 파쇄(6조각), 충격파 링, overshoot spring 결과 등장
SummonDrawingGame/SummonDrawingGame.tsx	메인 상태 머신 (ready→drawing→revealing→selected), cos/sin 원형 좌표 계산, 모바일 반응형
SummonDrawingGame/index.ts	re-export

수정 파일 (1개)

• OnePet.tsx: import 경로를 FanDrawingGame → SummonDrawingGame으로 변경

주요 구현 사항

• 상태 머신: ready → drawing → revealing → selected 4단계 전환
• 마법진: animateSpin 키프레임 활용, 반대 방향 동심원 회전, revealing 시 가속
• 카드 배치: cos/sin으로 원형 좌표 계산 (데스크톱 반지름 140px, 모바일 90px)
• 모션: framer-motion spring/stagger 애니메이션 적극 활용
• 반응형: 카드 크기 데스크톱 100×124px / 모바일 72×89px, 결과 카드 320px (max 80vw)
• 닫기 UX: 백드롭 분리 + 카드/텍스트 직접 클릭 핸들러로 확실한 닫기 동작
• 메모리 관리: setTimeout을 ref로 추적, 언마운트 시 cleanup

Props interface 변경 없음

기존 CardDrawingGameProps 그대로 유지하여 OnePet.tsx에서 import 경로만 변경.

📸 스크린샷

데스크톱 (1280px) - 카드 소환 상태

마법진 동심원 위에 카드 7장이 원형으로 배치, 플로팅 애니메이션 적용

데스크톱 - 결과 카드 공개

충격파 + overshoot spring으로 결과 카드 등장 (HAMSTER_SANTA A+)

모바일 (400px) - 카드 소환 상태

모바일 반응형으로 카드/마법진 크기 축소

모바일 - 결과 카드 공개

모바일에서도 적절한 크기의 결과 카드 표시 (CAPYBARA_CARROT B-)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 02275ebb-06c1-425e-9f37-3fc2b1b9a8a3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/spirit-game

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}