feat: 토너먼트 생성 페이지 바스켓 UX 개선#141
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough토너먼트 아이템 바구니 캐러셀을 Embla Carousel API와 동기화하도록 훅을 재구성하고, 컨테이너 높이 측정 훅을 추가하여 동적 maxHeight 계산, 조건부 위시 아이템 다이얼로그 렌더링, 및 캐러셀 슬라이드 크기 상수 조정을 적용합니다. Changes바구니 캐러셀 Embla 통합 및 레이아웃 개선
Sequence DiagramsequenceDiagram
participant CarouselComp as TournamentItemBasketCarousel
participant HeightHook as useContainerHeight
participant BasketHook as useBasketCarousel
participant Embla as CarouselApi
participant Basket as TournamentItemBasket
CarouselComp->>BasketHook: items, scrollToLast, onScrolled 전달
CarouselComp->>HeightHook: indicator/container ref 연결
BasketHook->>Embla: reInit()/select 이벤트 등록
Embla->>BasketHook: select/reInit 이벤트 전달
BasketHook->>CarouselComp: carouselApi, currentIndex, isCarouselEnabled 반환
CarouselComp->>Basket: maxHeight 전달하여 렌더링
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
|
No description provided. |
…asketCarousel에서 높이 계산 로직 개선
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/app/tournament/`[id]/create/_hooks/useBasketCarousel.ts:
- Around line 23-39: The effect in useBasketCarousel currently ignores the
scrollToLast flag after mount and always auto-scrolls when items.length
increases; update the useEffect to include scrollToLast in its dependency logic
and branch so that when scrollToLast is false you only update
prevItemCountRef.current = items.length (no scroll), and only call
carouselApi.scrollTo(getBasketIndexForLastItem(items.length)) and onScrolled
when scrollToLast is true (and carouselApi/isCarouselEnabled conditions still
apply). Ensure you reference prevItemCountRef, scrollToLast, carouselApi,
getBasketIndexForLastItem, onScrolled, isCarouselEnabled, and items.length when
making the change.
In `@apps/web/src/hooks/useContainerHeight.ts`:
- Around line 9-16: The useEffect in useContainerHeight currently only runs once
and observes the initial ref.current, so when the same ref is re-attached to a
different DOM node (as happens with containerRef/indicatorRef in
TournamentItemBasketCarousel) the ResizeObserver isn't updated; modify
useContainerHeight to accept or manage the actual DOM element (e.g., switch to a
callback ref or expose a setElement state) and register the ResizeObserver
inside an effect that depends on that element, ensuring you call
observer.observe(element) and disconnect the previous observer whenever the
element changes; update references to useContainerHeight, ref, setHeight and
ResizeObserver accordingly so reattachments re-register observation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 84f3381e-87b2-43fe-aaa6-7542560096ae
⛔ Files ignored due to path filters (1)
apps/web/src/app/tournament/[id]/create/_assets/basket-gray.pngis excluded by!**/*.png
📒 Files selected for processing (5)
apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsxapps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsxapps/web/src/app/tournament/[id]/create/_consts/tournamentItemBasket.tsapps/web/src/app/tournament/[id]/create/_hooks/useBasketCarousel.tsapps/web/src/hooks/useContainerHeight.ts
iOdiO89
approved these changes
Jun 9, 2026
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/web/src/app/tournament/[id]/create/_hooks/useBasketCarousel.ts (1)
8-8: ⚡ Quick win상대 경로 대신 절대 경로를 사용하세요.
코딩 가이드라인에 따라
@/*절대 경로 별칭을 사용해야 합니다. 동일 파일 내 다른 import(lines 5-6)와 일관성도 맞출 수 있습니다.♻️ 수정 제안
-import { getActiveBasketCount, getBasketIndexForLastItem } from '../_utils/tournamentItemBasket'; +import { getActiveBasketCount, getBasketIndexForLastItem } from '`@/app/tournament/`[id]/create/_utils/tournamentItemBasket';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/app/tournament/`[id]/create/_hooks/useBasketCarousel.ts at line 8, Replace the relative import of utility functions with the project’s absolute alias: change the import that currently brings in getActiveBasketCount and getBasketIndexForLastItem from '../_utils/tournamentItemBasket' to use the '`@/`...' alias so it matches the other imports in this file; locate the import line that references getActiveBasketCount and getBasketIndexForLastItem and update the path to the corresponding absolute path under the `@/src` (or project src root) alias used by other imports in this module.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/web/src/app/tournament/`[id]/create/_hooks/useBasketCarousel.ts:
- Line 8: Replace the relative import of utility functions with the project’s
absolute alias: change the import that currently brings in getActiveBasketCount
and getBasketIndexForLastItem from '../_utils/tournamentItemBasket' to use the
'`@/`...' alias so it matches the other imports in this file; locate the import
line that references getActiveBasketCount and getBasketIndexForLastItem and
update the path to the corresponding absolute path under the `@/src` (or project
src root) alias used by other imports in this module.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 62cfdfce-d7a5-44dd-b9dd-de2e5de0373d
📒 Files selected for processing (4)
apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsxapps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsxapps/web/src/app/tournament/[id]/create/_hooks/useBasketCarousel.tsapps/web/src/hooks/useContainerHeight.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasket.tsx
- apps/web/src/hooks/useContainerHeight.ts
- apps/web/src/app/tournament/[id]/create/_components/tournament-item-basket/TournamentItemBasketCarousel.tsx
iOdiO89
added a commit
that referenced
this pull request
Jun 10, 2026
* feat: 장바구니 아이템 수에 따라 위시 아이템 추가 버튼 표시 조건 변경 * feat: 장바구니 아이템 수 증가 시 toast 알림 추가 * refactor: 바스켓 캐러셀 로직 훅으로 분리 * refactor: 바스켓 캐러셀 슬라이드 크기 조정 * feat: 장바구니 컨테이너 높이 반응형 구현 * refactor: TournamentItemBasket 컴포넌트 maxHeight 타입 수정 및 TournamentItemBasketCarousel에서 높이 계산 로직 개선 * fix: ResizeObserver ref 재부착 시 observer 재등록 처리 * fix: crollToLast 조건 누락 수정 --------- Co-authored-by: Jung Sun A <amber0809@naver.com>
This was referenced Jun 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
작업 요약
작업 세부 내용
바스켓 최대 아이템 수 도달
+버튼 숨김 처리카트가 꽉 찼어요! 새 카트를 만들었어요.캐러셀 로직 훅 분리
useBasketCarousel을 embla carousel API 기반으로 재작성BASKET_CAROUSEL_SLIDE_SIZE_PERCENT75% → 90% 조정높이 반응형 구현
useContainerHeight훅 추가 —ResizeObserver로 컨테이너 높이를 실시간 측정maxHeight제어신규 파일 (공용 훅)
src/hooks/useContainerHeight.ts: 엘리먼트 높이를ResizeObserver로 추적Summary by CodeRabbit
새로운 기능
기능 개선