[refactor] 광고 카드 레이아웃 밀림 수정

[ff1451]

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 광고 로딩 중 스켈레톤 로더 추가 (채팅 및 클럽 목록)
  • 광고 로딩 상태 표시기 추가

• 버그 수정

  • 광고 슬롯 계산 로직 개선 (엣지 케이스 처리)
  • 광고 로딩 실패 시 폴백 처리 개선

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9e8e1b49-8918-4111-8d9b-2808b74e28d7

📥 Commits

Reviewing files that changed from the base of the PR and between b84ad2f and 0d7246f.

📒 Files selected for processing (5)

• src/pages/Chat/index.tsx
• src/pages/Club/ClubList/components/AdvertisementCard.tsx
• src/pages/Club/ClubList/index.tsx
• src/utils/hooks/useAdvertisementInterval.ts
• src/utils/hooks/useAdvertisements.ts

---

Walkthrough

광고 슬롯 로딩 상태를 처리하기 위해 채팅과 클럽 리스트에 스켈레톤 컴포넌트(ChatAdvertisementListItemSkeleton, AdvertisementCardSkeleton)를 추가했습니다. useAdvertisementInterval 훅에서 반환 타입을 number | null로 변경하고, 광고 슬롯 계산 시 null 체크 로직을 강화했습니다. useAdvertisements 훅에 isLoadingAdvertisements 플래그를 추가하여 로딩 상태를 노출합니다.

Possibly related issues

• [refactor] 광고 카드 레이아웃 밀림 수정 #214: 광고 슬롯 계산 및 렌더링 흐름 개선과 관련 있으며, 동일한 슬롯 수학 연산 방식과 null 가드 로직을 다루고 있습니다.

Possibly related PRs

• [feat] 광고 배너 추가 #200: 기본이 되는 광고 기능 PR로, 이 PR은 동일한 훅과 페이지 컴포넌트(Chat/Club 리스트, useAdvertisementInterval, useAdvertisements)에서 스켈레톤 UI, null 처리 로직, 그리고 로딩 플래그를 추가하여 기능을 확장하고 있습니다.

---

리뷰 포인트

React/TypeScript 컨벤션:

1. useAdvertisementInterval의 반환 타입이 number | null로 변경되었는데, 이 값을 사용하는 곳에서 null 체크가 적절히 되고 있는지 확인 필요합니다.

2. 스켈레톤 컴포넌트들에서 aria-hidden="true" 사용은 좋으나, 접근성을 위해 로딩 상태를 announce하는 메커니즘이 있는지 검토하세요.

3. isLoadingAdvertisements 플래그가 조건부 렌더링에서 일관되게 사용되고 있는지 확인—모든 스켈레톤 렌더링 지점에서 이 플래그로 래핑되어야 합니다.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 광고 카드 레이아웃 관련 변경을 명확하게 설명하고 있으며, 실제 변경사항(스켈레톤 추가, 로딩 상태 처리, 슬롯 계산 로직 개선)의 핵심을 잘 반영하고 있습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 214-refactor-광고-카드-레이아웃-밀림-수정

---

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