fix: 페이지별 토스트 위치 커스터마이즈 (탭바 페이지 토스트 겹침 수정)

[kanghaeun]

작업 요약

• 홈/보관 페이지에서 토스트가 하단 탭바와 겹치는 문제 수정
• 토스트 offset을 페이지(컴포넌트)별로 override할 수 있는 로직 추가

작업 세부 내용

전역 Toaster가 offset: 90px 고정값 하나로 모든 페이지에 적용되어, Bottom Tab Bar가 있는 홈/보관 페이지에서 토스트가 탭바와 겹치는 문제를 수정했습니다.

• 탭바는 bottom-[40px] + 자체 높이 약 68px → 상단이 뷰포트 바닥에서 약 108px 지점인데, 토스트 offset이 90px이라 탭바 상단과 겹침
• 토너먼트 준비·로그인 등 하단 in-flow 버튼(~88px) 페이지는 기존 offset이 잘 맞는 상태

변경 사항

1. 토스트 offset 페이지별 override 메커니즘 추가 (components/toast/)

• toast.const.ts — offset 상수 분리: DEFAULT(95px) / ABOVE_TAB_BAR(115px)
• useToastOffset.ts — zustand 기반 스택형 override 스토어 + 마운트 동안 offset을 등록하고 언마운트 시 자동 해제하는 useToastOffset 훅
• Toaster — 마지막 override 값(없으면 DEFAULT)을 구독해 offset/mobileOffset에 적용

2. BottomTabBar 자동 등록 (components/bottom-tab-bar/)

• 컴포넌트 내부에서 useToastOffset(TOAST_OFFSET.ABOVE_TAB_BAR) 호출
• 탭바가 렌더되는 페이지(홈 등)는 별도 작업 없이 토스트가 탭바 위에 뜸

3. WishlistBottomBar 등록 (app/archive/_components/)

• 보관 페이지 삭제 모드에서 탭바가 "n개 선택됨" pill로 교체되어 BottomTabBar가 언마운트돼도 offset이 유지되도록 자체 등록
• 두 컴포넌트가 중복 등록해도 안전하도록 스토어를 스택 구조로 설계

변경하지 않은 것

• 탭바 없는 페이지(토너먼트 준비/결과, 로그인, BottomCta 편집 등)는 기본 offset 유지 → 회귀 없음
• toast.success() 등 기존 토스트 호출부 변경 없음
• 향후 바텀시트/CTA 높이가 다른 페이지는 해당 컴포넌트에서 useToastOffset('...px') 한 줄로 개별 지정 가능

스크린샷

Before	After

연관 이슈

closes #297

Summary by CodeRabbit

• 버그 수정
  • 하단 탭 바가 있는 화면에서 토스트 알림이 탭 바와 겹치지 않도록 위치를 조정했습니다.
  • 삭제 모드에서 하단 바가 사라져도 토스트가 더 안정적으로 하단 영역 위에 표시되도록 개선했습니다.
  • 모바일과 데스크톱 모두에서 하단 여백 기준이 더 일관되게 적용됩니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jul 6, 2026 3:04am

[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: 46 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

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

Run ID: 4e3d9350-a035-4f9b-b260-2878cca841d3

📥 Commits

Reviewing files that changed from the base of the PR and between 310d5bf and d5901d5.

📒 Files selected for processing (1)

• apps/web/src/components/toast/index.tsx

📝 Walkthrough

Walkthrough

BottomTabBar와 WishlistBottomBar 컨테이너에 data-bottom-tab-bar 마커 속성을 추가하고, globals.css에서 해당 마커가 존재하는 페이지의 Sonner 토스트 하단 오프셋을 115px로 강제하는 CSS 규칙을 신설했으며, 기본 TOAST_OFFSET 상수를 90px에서 95px로 조정했습니다.

Changes

탭바 마커 기반 토스트 오프셋 조정

Layer / File(s)	Summary
탭바 컨테이너에 마커 속성 추가 apps/web/src/components/bottom-tab-bar/index.tsx, apps/web/src/app/archive/_components/WishlistBottomBar.tsx	BottomTabBar와 WishlistBottomBar의 하단 고정 컨테이너에 data-bottom-tab-bar 속성과 설명 주석을 추가했고, BottomTabBar의 그라데이션 배경 JSX 표현과 import 순서를 정리함.
마커 기반 CSS 오프셋 강제 및 기본값 조정 apps/web/src/styles/globals.css, apps/web/src/components/toast/index.tsx	body:has([data-bottom-tab-bar]) 조건에서 하단 토스트의 offset 변수를 115px로 강제하는 CSS 규칙을 추가하고, TOAST_OFFSET 기본값을 90px에서 95px로 변경함.

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

Possibly related PRs

• depromeet/PIKI-Client#263: 위시리스트 삭제 시 토스트를 노출하는 변경으로, 삭제 모드에서 하단 탭바 대비 토스트 위치를 조정하는 본 PR과 동일한 삭제-토스트 흐름을 지원함.

Suggested reviewers: ychany, iOdiO89

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	탭바 페이지용 마커/CSS만 추가되어 페이지별 useToastOffset 주입 구조와 비탭바 화면 기본 오프셋 요구를 충족하지 못합니다.	useToastOffset 같은 페이지·레이아웃 단위 훅이나 컨텍스트를 추가하고, 비탭바 페이지와 하단 CTA 화면별 오프셋을 적용하세요.

✅ 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	변경은 토스트 오프셋 조정과 탭바/위시 바 관련 수정에 한정되어 보여 명백한 범위 밖 변경은 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 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/components/toast/index.tsx`:
- Around line 7-8: The imports in the toast component are using relative paths
while the rest of the PR follows the `@/` alias convention. Update the import
statements in the toast component to use absolute alias paths for toast.const
and useToastOffset, matching the patterns used by BottomTabBar and
WishlistBottomBar, and keep the import style consistent across apps/web/src.

🪄 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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: f2a1a6cc-0971-4f64-8d65-ac3a4e6a4848

📥 Commits

Reviewing files that changed from the base of the PR and between 66947a7 and 57c3b4f.

📒 Files selected for processing (5)

• apps/web/src/app/archive/_components/WishlistBottomBar.tsx
• apps/web/src/components/bottom-tab-bar/index.tsx
• apps/web/src/components/toast/index.tsx
• apps/web/src/components/toast/toast.const.ts
• apps/web/src/components/toast/useToastOffset.ts

[iOdiO89]

바텀탭 유무에 따라 toast bottom offset이 달라져서, 그걸 zustand store 기반으로 수정한 거 맞지?

우리 코드베이스에 zustand(상태관리툴) 사용처가 아직 없는데, toast에서만 zustand 쓰는 게 좀 마음에 걸리네. 개인적으로는 zustand 없이 문제를 해결할 수 있으면 더 좋을 것 같다는 생각 ..

4개 중에 하나로 수정해보면 어떨까! 개인적으로는 1 추천

대안

1. CSS :has() — 하단바에 마커만 달고 body:has([data-bottom-tab-bar]) [data-sonner-toaster] { --offset-bottom: 115px !important }로 처리, JS 상태 0줄에 마운트/언마운트·삭제모드 전환까지 브라우저가 자동 처리돼서 가장 우아함
2. useSyncExternalStore — React 내장 훅으로 모듈 전역 스택 구독, 외부 의존성 없이 zustand 동작을 그대로 재현하고 하단바가 스스로 offset 등록(colocation 유지)
3. pathname 분기 — Toaster 내부에서 usePathname()으로 탭바 있는 라우트만 분기, 코드 최소·최고 가독성이지만 새 탭바 페이지 추가 시 route 목록 수동 관리 필요
4. React Context + useState — 표준 React 패턴으로 Provider가 children+Toaster를 감싸 스택 관리, useSyncExternalStore와 쌍둥이지만 Provider가 하나 필요

[coderabbitai]

🧹 Nitpick comments (2)

apps/web/src/app/archive/_components/WishlistBottomBar.tsx (1)

10-14: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

마커 속성명 data-bottom-tab-bar가 실제 용도와 어긋남.

삭제 모드에서는 BottomTabBar가 아니라 선택 개수 뱃지가 렌더되는데도 동일한 data-bottom-tab-bar 마커를 유지하고 있습니다. 실제 의도는 "하단에 고정 UI가 있으니 토스트를 올려야 한다"는 범용 신호이므로, 이름을 data-bottom-fixed-ui처럼 의미에 맞게 바꾸면 향후 유지보수자가 혼동하지 않을 것입니다. 코드/주석상으로는 명확히 문서화되어 있어 기능적으로 문제는 없습니다.

🤖 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/archive/_components/WishlistBottomBar.tsx` around lines 10 -
14, The marker attribute name used in WishlistBottomBar is too specific to
BottomTabBar even though this component can render the deletion-mode badge
instead. Rename the existing data-bottom-tab-bar marker to a more generic name
such as data-bottom-fixed-ui in the WishlistBottomBar component, and update any
related globals.css comments or selectors so the intent matches the actual fixed
UI behavior.

apps/web/src/styles/globals.css (1)

193-196: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

115px 매직넘버 중복 - CSS 변수로 추출 고려.

--offset-bottom, --mobile-offset-bottom에 동일한 115px 값이 두 번 하드코딩되어 있습니다. 로컬 CSS 변수(예: --tab-bar-toast-offset: 115px)로 한 번만 선언 후 재사용하면 향후 값 조정 시 한 곳만 수정하면 됩니다.

♻️ 제안

 body:has([data-bottom-tab-bar]) [data-sonner-toaster][data-y-position='bottom'] {
-  --offset-bottom: 115px !important;
-  --mobile-offset-bottom: 115px !important;
+  --tab-bar-toast-offset: 115px;
+  --offset-bottom: var(--tab-bar-toast-offset) !important;
+  --mobile-offset-bottom: var(--tab-bar-toast-offset) !important;
 }

🤖 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/styles/globals.css` around lines 193 - 196, The bottom toaster
offset in the globals stylesheet hardcodes the same 115px value twice. In the
body:has([data-bottom-tab-bar]) [data-sonner-toaster][data-y-position='bottom']
rule, extract that value into a local CSS variable and reuse it for both
--offset-bottom and --mobile-offset-bottom so it can be updated in one place.

🤖 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/archive/_components/WishlistBottomBar.tsx`:
- Around line 10-14: The marker attribute name used in WishlistBottomBar is too
specific to BottomTabBar even though this component can render the deletion-mode
badge instead. Rename the existing data-bottom-tab-bar marker to a more generic
name such as data-bottom-fixed-ui in the WishlistBottomBar component, and update
any related globals.css comments or selectors so the intent matches the actual
fixed UI behavior.

In `@apps/web/src/styles/globals.css`:
- Around line 193-196: The bottom toaster offset in the globals stylesheet
hardcodes the same 115px value twice. In the body:has([data-bottom-tab-bar])
[data-sonner-toaster][data-y-position='bottom'] rule, extract that value into a
local CSS variable and reuse it for both --offset-bottom and
--mobile-offset-bottom so it can be updated in one place.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d1c1fee7-7409-4e24-8aa9-ee14d4c9ca5f

📥 Commits

Reviewing files that changed from the base of the PR and between 57c3b4f and 310d5bf.

📒 Files selected for processing (4)

• apps/web/src/app/archive/_components/WishlistBottomBar.tsx
• apps/web/src/components/bottom-tab-bar/index.tsx
• apps/web/src/components/toast/index.tsx
• apps/web/src/styles/globals.css

✅ Files skipped from review due to trivial changes (1)

• apps/web/src/components/toast/index.tsx

[kanghaeun]

리뷰 반영해서 1번 CSS :has() 방식으로 수정했어! (310d5bf)

적용하면서 한가지 보완도 같이 진행

• sonner가 모바일(600px 이하)에서는 --mobile-offset-bottom을 따로 쓰길래 두 변수 다 오버라이드

상태 관리 없이 처리되니 깔끔하당 좋은 제안 감사합니다