style: 토너먼트 담기 화면 가이드 시안 반영 (툴팁·카트 레이아웃·인디케이터)

[kanghaeun]

작업 요약

• 가이드 시안에 맞춰 토너먼트 담기(/tournament/[id]/create) 화면 UI 정리 — 기능 변경 없이 스타일·레이아웃만 수정

작업 상세 내용

1. 인포 툴팁

• 가이드 항목 본문 폰트 축소: body-1-medium → body-2-medium
• 가이드 항목 아이콘 축소: size-6(24px) → size-4.5(18px)

2. 카트 화면 레이아웃

dvh 매직넘버 제거
기기 높이에 따라 여백이 달라지던 mt-[3.9dvh] / mt-[3dvh]를 시안 기준 고정값으로 교체

• 헤더 ↔ 참여자 패널: mt-7 (28px)
• 참여자 패널 ↔ 카트: mt-9 (36px)

카트 1개 / 2개 이상 크기 통일
카트 1개일 때는 px-5 + w-full, 2개 이상일 때는 슬라이드 80%로 서로 다른 너비를 써서 두 번째 카트가 생기는 순간 카트가 작아지던 문제 → 두 분기 모두 BASKET_CAROUSEL_SLIDE_SIZE_PERCENT를 쓰도록 통일

기타

• 개수 라벨 위치 고정 — my-auto로 떠 있던 라벨을 카트와 고정 간격(gap-4)으로 붙임
• 카트 안 상품 크기·간격 조정 — 그리드 w-[45%] → w-[46.5%], 간격 gap-x-6 gap-y-5 → gap-3.5, 상단 여백 pt-[20%] → pt-[17%]
• 상품 카드 테두리 두께 1.85px → 2px (상품 이미지 + 아이템 추가 버튼)
• 루트 컨테이너 <div> → <main> (다른 화면과 동일하게 semantic tag 적용)

3. 개수 라벨 (14/32개)

• 고정 높이 h-10 제거 → 패딩 기반(px-3 py-2)으로 변경
• 단위 개 추가 (14/32 → 14/32개)

4. 카트 하단 page indicator(dot) 삭제

• CarouselIndicator 컴포넌트 및 렌더 제거
• 딸려 있던 죽은 코드 정리: currentIndex state, handleIndicatorSelect, indicatorRef, carouselApi.on('select') 리스너
• 카트 최대 높이 계산에서 인디케이터 항 제거 → 두 분기가 같은 식이 되어 하나로 통합
• 로딩 스켈레톤(layout.tsx)의 dot 3개도 함께 제거
• 스와이프로 카트 이동하는 동작과 개수 라벨은 그대로 유지

변경 파일

파일	내용
TournamentCreateClient.tsx	여백 고정값화, <main> 적용
TournamentItemBasketCarousel.tsx	인디케이터 제거, 카트 크기 통일, 높이 계산 정리
TournamentItemBasket.tsx	상품 그리드 크기·간격, 추가 버튼 테두리
TournamentItemBasketStatus.tsx	개수 라벨 패딩·단위
TournamentGuidePopover.tsx	툴팁 폰트·아이콘 크기
productImage.const.ts	상품 이미지 테두리 두께
tournamentItemBasket.ts	BASKET_CAROUSEL_SLIDE_SIZE_PERCENT 90 → 80, BASKET_STACK_GAP 추가
CarouselIndicator.tsx	삭제
layout.tsx	로딩 스켈레톤 dot 제거

스크린샷

인포 툴팁 - 본문 폰트 사이즈 조정

Before	After

앱 버전에 맞게 카트 화면 레이아웃 개선

Before	After

하단 인디케이터 삭제

Before	After

연관 이슈

close #543

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 23, 2026 2:02pm

[github-actions]

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

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 77650d60-c81f-46cd-8e0f-3f41a4aaa2c2

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: 8621e21f-c4bd-43de-8325-cb7fd34bb60c

📥 Commits

Reviewing files that changed from the base of the PR and between a8d9087 and 9cecda8.

📒 Files selected for processing (9)

• apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
• apps/web/src/app/tournament/[id]/create/_components/product-image/productImage.const.ts
• apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.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
• apps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.ts
• apps/web/src/app/tournament/[id]/create/layout.tsx

💤 Files with no reviewable changes (2)

• apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.tsx
• apps/web/src/app/tournament/[id]/create/layout.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

토너먼트 담기 화면의 고정 간격, 카트 캐러셀 하단 슬롯, 수량 라벨, 안내 팝오버, 상품 이미지 스타일을 조정했습니다. 카트 페이지 인디케이터와 로딩 진행 Skeleton 3개를 제거했습니다.

Changes

토너먼트 담기 화면 UI

Layer / File(s)	Summary
카트 캐러셀 및 하단 슬롯 정리 apps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.ts, apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx, apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/CarouselIndicator.tsx	슬라이드 크기를 80%로 변경했습니다. BASKET_STACK_GAP을 추가했습니다. CarouselIndicator와 선택 이벤트 처리를 제거했습니다.
카트 콘텐츠 표시 조정 apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx, apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket-status/TournamentItemBasketStatus.tsx, apps/web/src/app/tournament/[id]/create/_components/product-image/productImage.const.ts	카트 그리드와 추가 아이템 버튼의 크기 및 간격을 변경했습니다. 수량 라벨에 개를 추가했습니다. 상품 이미지의 테두리 두께를 변경했습니다.
화면 간격 및 안내 UI 조정 apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx, apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentGuidePopover.tsx, apps/web/src/app/tournament/[id]/create/layout.tsx	최상위 컨테이너를 main으로 변경했습니다. 화면 간격을 고정 spacing으로 변경했습니다. 안내 문구와 아이콘 스타일을 조정했습니다. 로딩 화면의 원형 Skeleton 3개를 제거했습니다.

Estimated code review effort: 2 (Simple) | ~15 minutes

Merge Risk: ⚪ Minimal · up to 9cecd

This PR only adjusts the tournament creation screen’s styling, layout, labels, and indicators; no actionable merge-blocking risk remains beyond normal checks and review.

Suggested reviewers: ychany, iodio89

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	대부분의 UI 요구사항을 반영했지만, 연결 이슈의 타이머 컬러 개선 대상인 DepositCountdown.tsx 변경이 확인되지 않습니다.	DepositCountdown.tsx에서 두 타이머 노출 위치의 시맨틱 색상 토큰을 적용하고 근거 없는 opacity 값을 제거하세요.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 툴팁, 카트 레이아웃, 인디케이터 변경을 명확히 설명하며 주요 변경 범위와 일치합니다.
Out of Scope Changes check	✅ Passed	변경 사항은 연결 이슈의 툴팁, 카트 레이아웃, 라벨, 인디케이터, 로딩 UI, 접근성 컨테이너, 테두리 조정 범위에 포함됩니다.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.

✨ 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 style/543-tournament-create-layout

---

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