feat: 토너먼트 친구 아바타 뱃지 및 참여자 상품 개수 연동

[kanghaeun]

작업 요약

• 참여자 상품 개수 API 연동 및 친구가 담은 아이템 슬롯에 프로필 아바타 뱃지 표시 구현

작업 세부 내용

참여자 상품 개수 API 연동

• TournamentParticipantT에 itemCount 필드 추가 (API 응답 반영)
• TournamentCreateClient에서 participants 맵핑 시 itemCount: 0 하드코딩 → p.itemCount로 수정
• ParticipantPanel / ParticipantChip에 실제 담은 상품 수 표시

친구 아바타 뱃지 표시

• TournamentPendingItemT에 userId?: string 추가
• 친구가 담은 아이템 슬롯 우측 하단에 해당 친구의 프로필 이미지를 원형 뱃지로 표시
• 본인이 담은 아이템에는 뱃지 미노출
• 뱃지 크기는 카드 너비 기준 35%로 반응형 처리 (% 단위)

버그 수정

• TournamentBasketItem의 cursor-pointer 조건 오류 수정 (|| 연산자 우선순위 버그)
• overflow-hidden을 이미지 inner div로 분리하여 뱃지가 카드 경계 밖으로 걸쳐 보이도록 구조 개선

스크린샷

연관 이슈

closes #204

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 토너먼트 장바구니 아이템에 참가자의 프로필 이미지가 원형 배지 형태로 오버레이되어 표시됩니다.

• 개선 사항

  • 참여자 응답 타입에 아이템 개수(itemCount)가 포함되도록 업데이트되었습니다.
  • 대기(pending) 데이터에서 사용자 식별자(userId)가 누락될 수 있는 경우를 타입 수준에서 반영해 처리 안정성이 향상되었습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jun 17, 2026 11:55am

[github-actions]

No description provided.

[kanghaeun]

@coderabbitai review

[coderabbitai]

Warning

Review limit reached

@kanghaeun, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 50 minutes and 9 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bec40f23-e49b-4b24-86b7-991a952b2956

📥 Commits

Reviewing files that changed from the base of the PR and between bebef34 and 54a3667.

📒 Files selected for processing (5)

• apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts
• apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentBasketItem.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx

Walkthrough

토너먼트 응답 타입에 itemCount와 optional userId를 추가하고, TournamentCreateClient에서 participantImageMap(userId → profileImage)을 생성해 컴포넌트 트리를 통해 TournamentBasketItem까지 전달한다. TournamentBasketItem은 현재 사용자와 아이템 소유자를 비교해 원형 프로필 배지를 오버레이로 렌더링한다.

Changes

참가자 아바타 오버레이 기능 추가

Layer / File(s)	Summary
응답 타입 확장 apps/web/src/app/tournament/[id]/_common/_types/tournamentResponse.ts	TournamentParticipantT에 itemCount: number 필드 추가, TournamentPendingItemT의 userId를 userId?: string으로 변경
participantImageMap 생성 및 Carousel 전달 apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx	participants 각 원소에 itemCount 포함, pending.participants에서 userId → profileImage Map 생성 후 TournamentItemBasketCarousel에 전달
컴포넌트 트리 props 연결 apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx, apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx	TournamentItemBasketCarouselProps와 TournamentItemBasketProps에 participantImageMap 추가, 캐러셀 비활성/활성 두 분기 모두에서 TournamentItemBasket으로 전달
TournamentBasketItem 원형 아바타 오버레이 apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentBasketItem.tsx	participantImageMap prop 추가, useGetMe로 현재 userId와 item.userId 비교 후 친구 이미지 URL 결정, 원형 프로필 배지 조건부 오버레이 렌더링 및 외곽 컨테이너 클래스 재구성

Sequence Diagram

sequenceDiagram
  participant CreateClient as TournamentCreateClient
  participant Carousel as TournamentItemBasketCarousel
  participant Basket as TournamentItemBasket
  participant BasketItem as TournamentBasketItem
  CreateClient->>Carousel: participantImageMap 전달
  Carousel->>Basket: participantImageMap 전달
  Basket->>BasketItem: participantImageMap 전달
  BasketItem->>BasketItem: useGetMe로 현재 userId 확인
  BasketItem->>BasketItem: Map에서 친구 profileImage 조회
  BasketItem->>BasketItem: 원형 배지 오버레이 렌더링

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• depromeet/PIKI-Client#133: TournamentItemBasketCarousel에 scrollToLast/onScrolled props를 추가하는 변경으로, 본 PR과 동일 컴포넌트의 props 시그니처를 함께 확장하므로 머지 순서 조정이 필요할 수 있습니다.
• depromeet/PIKI-Client#141: TournamentItemBasket/TournamentItemBasketCarousel의 props와 렌더링 로직(maxHeight, dialog 조건, carousel 구조)을 수정하는 변경으로, 본 PR의 participantImageMap prop 추가와 겹칠 수 있어 병행 작업 시 충돌 검토가 필요합니다.

Suggested labels

WEB

Suggested reviewers

• iOdiO89
• ychany

Poem

🐰 장바구니 슬롯마다 동그란 얼굴,
친구의 아바타가 쏙 고개를 내밀어요!
userId Map을 타고 쑥 내려온 이미지,
오버레이 배지로 반짝반짝 빛나네.
토끼도 내 상품에 뱃지 하나 달고 싶어요! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 두 가지 주요 기능(토너먼트 친구 아바타 뱃지 및 참여자 상품 개수)을 명확하게 요약하고 있으며, 변경 사항의 핵심을 잘 반영하고 있습니다.
Linked Issues check	✅ Passed	PR의 구현이 이슈 #204의 요구사항을 충족합니다: 상품 개수 필드 추가, 참여자 아바타 뱃지 UI 구현, 선택적 userId 필드 추가로 참여자 식별 가능하게 변경했습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #204의 요구사항 범위 내에 있으며, 토너먼트 참여자 관리 기능 구현에만 집중하고 있습니다.

_{✏️ 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 feat/204-invite-product-count-avatar

---

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