feat(shop): 10펫 뽑기 UX 개편 — 카드팩 개봉 연출

[sumi-0011]

배경

기존 10펫 뽑기는 2x5 그리드를 클릭하면 전부 순차 플립되고 3초 뒤 자동 닫히는 밋밋한 연출이었습니다. postGotcha({count:10}) API는 그대로 두고 연출/UX만 개편했습니다.

변경

• 연출 교체: 그리드 플립(TenCardFlipGame) 제거 → 카드팩 개봉 기반 CardPackGame 신설
• 픽셀 톤: 서비스의 픽셀 카드 뒷면(AnimalCardBack) 재활용해 ×10 덱 구성 (별도 에셋/라이선스 불필요)
• 딜 연출: 탭 개봉 시 카드가 덱 중앙에서 각 슬롯으로 부채처럼 펼쳐짐
• 레어 강조: S+/EX 뒤집힐 때 팝 + 티어 글로우 + 화면 흔들림 + 컨페티
• 피날레: 최고 등급 카드 중앙 확대(레어면 회전 광선+대형 컨페티) + 완료 후 상시 스포트라이트
• 오조작 방지: 3초 자동닫힘 제거, 뽑는 중 X/Esc/오버레이 닫기 차단
• 픽셀 사각형 canvas-confetti, prefers-reduced-motion 존중, 탭 스킵

테스트

• 프리뷰(목데이터 혼합 티어)로 딜·플립·레어 강조·피날레 확인
• 실제 shop 풀스크린 덱 모달 정상 렌더 확인(idle)
• type-check / lint 통과

참고

• 외부 에셋 없음(기존 픽셀 카드백 재사용) → 라이선스 이슈 없음
• 1펫(OnePet) 알 부화 개편은 별도 PR feat(shop): 1펫 뽑기 UX 개편 — 카드 뽑기 → 풀스크린 알 부화 연출 #396

🤖 Generated with Claude Code

[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: 5f280292-b928-4b11-b62d-a8fcd0fd15ae

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 tenpet-flashy-animation

---

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.}