fix(shop): 10펫 뽑기 연출 어색함 3건 수정

[sumi-0011]

배경

10펫 뽑기(CardPackGame) 동작이 어색하다는 리포트를 받아, dev 서버를 띄우고 브라우저에서 프레임 단위로 캡처해 원인을 특정했습니다.

발견한 문제와 수정

1. 응답 대기 중 화면이 죽어 있음

opening(API 호출 중) 단계에서 이미 카드 10장이 전부 펼쳐져, 500ms 만에 정지된 뒷면 그리드만 남고 응답이 올 때까지 아무 움직임이 없었습니다. 지연 3초로 재현하니 2.5초간 완전 정지.

→ 덱을 대기 동안 유지(맥박 + 흔들림)하고, 결과가 도착한 뒤에만 카드를 펼치도록 변경. API가 느려도 빈 화면이 생기지 않습니다.

2. 뒤집기 전에 등급이 새어나감

isFlipped가 회전 시작과 동시에 true가 되어, 카드가 아직 뒷면인 상태에서 광채와 컨페티가 터졌습니다. (캡처에 물음표 뒷면 카드가 보라색 광채에 둘러싸인 채로 찍힘)

→ 레어 강조를 회전 완료 후로 이동(RARE_EMPHASIS_DELAY_MS = 500), 광채는 거기서 한 박자 더 뒤(delay: 0.45s)에 번지도록 조정.

3. 피날레 카드가 그리드에 파묻힘

확대 카드가 260px(그리드 카드 116px)뿐이고 뒤 그리드가 opacity: 0.35로 살아 있어, 히어로 연출이 아니라 "잘못 놓인 카드"처럼 보였습니다.

→ bg-black/75 스크림을 깔고 카드를 320px로 확대.

검증

• 브라우저에서 지연 800ms / 3000ms 두 조건으로 전체 시퀀스 재생 확인
• 진행 중 탭 = 건너뛰기 정상 동작 확인
• pnpm --filter @gitanimals/web type-check 통과

미검증: reduced-motion 경로는 코드 분기만 확인했고 브라우저 재현은 하지 않았습니다.

🤖 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: 4499261c-58da-4d6e-892d-9486b0d3a520

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 dev-2

---

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