fix: 초대 배너 펼침 영역이 상품 이미지에 가려지는 문제

[kanghaeun]

작업 요약

• 초대 배너 펼침 영역이 상품 이미지에 가려지는 문제 해결

작업 세부 내용

토너먼트 준비(담기) 화면에서 상단 초대 배너("N명이 함께 담는 중")를 펼치면, 펼쳐진 참가자 목록이 아래 바구니의 상품 이미지 뒤로 들어가 가려지는 문제를 수정했습니다.

원인

• 펼침 영역이 Tailwind z-10 을 하드코딩하고 있었습니다.
• 배너와 바구니 사이에 스택 컨텍스트를 만드는 요소가 없습니다. TournamentCreateClient 의 .px-5, ParticipantPanel 의 .relative w-full 모두 z-index: auto 라 스택 컨텍스트를 만들지 않습니다.
• 상품 이미지도 같은 루트 스택 컨텍스트에 속합니다. BaseImage 가 zIndex: Z_INDEX.BASE_IMAGE(10) 를 걸고, TournamentBasketItem 의 relative/absolute 조상들은 전부 z-auto 입니다.
• 결과적으로 배너(10) == 이미지(10) 이 되어, DOM 순서상 뒤에 오는 바구니가 위로 올라옵니다. 친구 프로필 뱃지는 BASE_IMAGE + 10(20) 이라 항상 배너를 덮었습니다.

수정

하드코딩된 z-10 을 제거하고 기존 토큰 Z_INDEX.POPOVER(40) 를 적용했습니다.

<div
  className="absolute top-full w-full rounded-b-xl bg-base-50 px-3 pb-3"
  style={{ zIndex: Z_INDEX.POPOVER }}
>

토큰 선택 근거 — 새 토큰 추가 없이 POPOVER 재사용

• 트리거에 앵커되어 펼쳐지는 오버레이라 의미상 정확히 popover 입니다. components/popover/index.tsx 가 같은 토큰을 씁니다.
• BASE_IMAGE(10), 친구 뱃지 BASE_IMAGE + 10(20), BOTTOM_TAB_BAR(20), BOTTOM_CTA(30) 보다 위 → 가려지지 않습니다.
• DIALOG/DRAWER(50) 보다 아래 → InviteFriendsDialog·실패 드로어는 여전히 배너를 덮습니다.
• BASE_IMAGE + n 상대값은 이미지 스택 내부 뱃지/썸네일 겹침용 관용구라 화면 레이어 오버레이에는 맞지 않는다고 판단했습니다.

적용 방식은 프로젝트 전역 관용구인 style={{ zIndex: Z_INDEX.X }} 를 따랐습니다 (dialog, drawer, popover, bottom-cta, bottom-tab-bar, base-image 등 동일). Tailwind 쪽에 z-index 토큰(--z-*)이 없어 임의 클래스(z-[40])는 만들지 않았습니다.

스크린샷

연관 이슈

closes #477

Summary by CodeRabbit

• 버그 수정
  • 참가자 목록을 펼쳤을 때 다른 팝오버 요소와 겹치는 표시 문제를 개선했습니다.
  • 참가자 목록이 올바른 화면 우선순위로 표시되도록 조정했습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
piki	Ready	Preview	Aug 13, 2026 7:13am

[github-actions]

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 116 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

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

How do review limits work?

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

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, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1acac434-951d-4363-86f2-584c6c942b83

📥 Commits

Reviewing files that changed from the base of the PR and between 8554197 and 4589d5a.

📒 Files selected for processing (1)

• apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantPanel.tsx

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 740d68aa-21fc-48ee-a625-2e1dcb02338b

📥 Commits

Reviewing files that changed from the base of the PR and between f53b255 and 8554197.

📒 Files selected for processing (1)

• apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantPanel.tsx

---

📝 Walkthrough

Walkthrough

ParticipantPanel의 펼쳐진 참가자 목록 패널이 Tailwind z-10 대신 Z_INDEX.POPOVER를 사용하도록 변경되었습니다.

Changes

참가자 패널 표시 순서

Layer / File(s)	Summary
팝오버 z-index 적용 apps/web/src/app/tournament/[id]/create/_components/participant-panel/ParticipantPanel.tsx	Z_INDEX를 import하고, 펼쳐진 참가자 목록 패널에 Z_INDEX.POPOVER를 적용합니다.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Mergeability Score: ⚪ Minimal · up to 85541

This localized UI layering fix changes the invite banner’s overlay priority so its expanded participant list remains visible above product images; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: ychany, iodio89

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 초대 배너 펼침 영역이 상품 이미지에 가려지는 문제를 명확하게 설명합니다.
Linked Issues check	✅ Passed	[이슈 #477]은 하드코딩된 z-10을 Z_INDEX.POPOVER로 대체해 참가자 목록이 상품 이미지 위에 표시되도록 요구하며, 변경 사항이 이를 충족합니다.
Out of Scope Changes check	✅ Passed	변경 사항은 참가자 목록의 z-index 수정에만 해당하며, 연결된 이슈의 범위를 벗어난 변경은 확인되지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/477-invite-banner-z-index

---

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

[iOdiO89]

@coderabbitai full review

[coderabbitai]

✅ Action performed

Full review finished.