[cherry-pick] 혜택 섹션 캐릭터 비율 수정 및 SEO 메타태그 업데이트

[HA-SEUNG-JEONG]

개요

혜택 섹션의 제로워니 캐릭터(zerowoni_walk.webm)가 가로 왜곡(298×223)되던 버그를 원본 비율(251×337)로 수정하고, 휠 스크롤로 혜택 카드를 전환하는 인터랙션을 추가했습니다. 홈·클래스 페이지 메타태그를 바이브 코딩 카피로 교체하고 /class 레이아웃 전용 SEO 필드를 보완했습니다.

원본 PR

• develop PR: 혜택 섹션 캐릭터 비율 수정 및 SEO 메타태그 업데이트 #710 (혜택 섹션 캐릭터 비율 수정 및 SEO 메타태그 업데이트 #710)
• 원본 브랜치: fix/alpha-test

Cherry-pick 대상 커밋

• 6bc2a86 — fix(benefit-scroll): 제로워니 캐릭터 비율 왜곡 수정 및 비디오 에셋 추가
• 00e5ffde — chore(seo): 홈·클래스 페이지 메타태그 업데이트
• 43699a55 — feat(benefit-scroll): 휠 스크롤로 혜택 카드 전환 제어
• 8e706382 — chore: PR 혜택 섹션 캐릭터 비율 수정 및 SEO 메타태그 업데이트 #710 리뷰 수정용 spacing 토큰 11개 추가
• 7396c287 — fix: canonical trailing slash 제거 및 /class 레이아웃 SEO 필드 보완
• b9b891f7 — fix: prefers-reduced-motion IO 충돌 및 임의 px 토큰 교체

752eab38 (불필요 스크린샷 정리) 제외 — main에 public/pr-screenshots/ 없음

변경 파일

• public/zerowoni_walk.webm — 제로워니 캐릭터 비디오 에셋 추가
• src/components/pages/class/benefit-scroll-character.tsx — 캐릭터 치수 251×337 수정, offset 공식 단순화, 그림자 위치 재계산
• src/components/pages/class/class-detail-benefits-section.tsx — 휠 스크롤로 activeIndex 제어 (700ms throttle)
• src/app/(landing)/class/layout.tsx — 클래스 페이지 전용 메타데이터 신규 추가
• src/app/(landing)/layout.tsx — 루트 description 바이브 코딩 카피로 교체
• src/app/(landing)/page.tsx — 홈 페이지 OG/robots/canonical 구조화
• src/app/global.css — spacing 토큰 11개 추가

혼입 검증 결과

git diff main...fix/alpha-test --stat 결과 160개 파일 diff — 브랜치 누적 누적분. Cherry-pick 대상 6개 커밋의 변경 파일만 확인 → PR #710 범위 내 코드만 포함됨.

• develop 전용 코드 혼입 없음

Test plan

• /class/vibe-intro 혜택 섹션에서 캐릭터가 세로형(251×337)으로 표시되는지 확인
• 혜택 섹션 위에서 휠 다운 시 카드 전환 + 캐릭터 스프링 이동 확인
• 휠 업으로 이전 카드 복귀 확인
• 700ms 이내 연속 스크롤 시 중복 전환 없음 확인
• 홈/클래스 페이지 SNS 공유 미리보기에서 바이브 코딩 카피 표시 확인
• /class URL OG 태그 확인

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
study-platform-client-dev	Ready	Preview, Comment	May 27, 2026 12:11pm

[coderabbitai]

Caution

Review failed

An error occurred during the review process. Please try again later.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cherry/fix-alpha-test-to-main

---

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