refactor: 하단 탭 네비게이션 개편 (4탭 + 글래스) - #354
Merged
Merged
Conversation
5 tasks
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (4)
📒 Files selected for processing (45)
📝 WalkthroughWalkthrough4탭 글래스형 Changes웹 네비게이션 및 공통 UI
Playwright E2E 환경
앱 스플래시 및 웹 인증
SVG 처리 설정
Estimated code review effort: 5 (Critical) | ~90 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant BottomTabBar
participant Router
User->>BottomTabBar: 포인터 입력 및 드래그
BottomTabBar->>BottomTabBar: 인디케이터 스냅
BottomTabBar->>Router: 지연된 router.push 호출
Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Biome (2.5.3)apps/app/app.jsonFile contains syntax errors that prevent linting: Line 21: Expected a property but instead found '// NOTE: 배포할때 'production'으로 변경'.; Line 22: expected Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/web/src/components/bottom-tab-bar/index.tsx (1)
43-49: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift고정된 320px 탭 바를 반응형 너비로 변경하세요.
탭 너비와 위치 계산이 픽셀 상수에 결합되어 좁은 화면이나 확대 환경에서 탭 바가 넘칠 수 있습니다. 컨테이너는
w-full px-5 max-w-*, 탭은 가변 너비를 사용하고 실제 측정 너비로 인디케이터 위치를 계산하는 편이 안전합니다.As per coding guidelines, “Avoid fixed widths; use the mobile-friendly
w-full px-5pattern withmax-w-*for upper bounds.”Also applies to: 68-71, 290-300
🤖 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/components/bottom-tab-bar/index.tsx` around lines 43 - 49, Replace the fixed pixel sizing in the bottom tab bar, including TAB_WIDTH, TAB_GAP, BAR_PADDING, TAB_STEP, and BAR_WIDTH, with a responsive w-full px-5 container and an appropriate max-w-* upper bound. Make tabs flexibly fill the available width, and calculate the indicator position from the rendered tab/container measurements rather than hardcoded constants, including the related logic around the tab layout and indicator positioning.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.
Inline comments:
In `@apps/web/src/components/bottom-tab-bar/index.tsx`:
- Around line 161-168: Separate pointercancel handling from handleUp so
cancellation never triggers snap or routing. Add a cancel-specific handler that
removes the gesture listeners, clears the grabbing/pressed visual state, and
restores the indicator to the active tab; keep handleUp responsible only for
completed gestures and navigation, and register the cancel handler for
pointercancel.
- Around line 52-53: Update NAVIGATE_DELAY and the related navigation timing at
the drag-snap and tab-slide transition handlers so routing occurs only after the
full landing animation completes. Either reduce each transition’s total duration
to 380ms or less, or increase NAVIGATE_DELAY to match the longest transition,
including its animation and delay.
- Around line 99-115: Update the new-gesture initialization in handlePointerDown
and the corresponding path around the referenced later lines to cancel any
pending navigation timer before starting another tab interaction. Clear
navigateTimerRef.current and reset it appropriately so an older delayed
router.push cannot run after a newer selection begins.
---
Nitpick comments:
In `@apps/web/src/components/bottom-tab-bar/index.tsx`:
- Around line 43-49: Replace the fixed pixel sizing in the bottom tab bar,
including TAB_WIDTH, TAB_GAP, BAR_PADDING, TAB_STEP, and BAR_WIDTH, with a
responsive w-full px-5 container and an appropriate max-w-* upper bound. Make
tabs flexibly fill the available width, and calculate the indicator position
from the rendered tab/container measurements rather than hardcoded constants,
including the related logic around the tab layout and indicator positioning.
🪄 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 Plus
Run ID: d20ed86b-493c-4304-94a7-24dd6883cd14
⛔ Files ignored due to path filters (1)
apps/web/src/assets/icons/outline/home.svgis excluded by!**/*.svg
📒 Files selected for processing (10)
apps/web/next.config.mjsapps/web/src/app/archive/_common/_components/ArchivePageLayout.tsxapps/web/src/app/archive/tournament/_components/ArchiveTournamentClient.tsxapps/web/src/app/archive/tournament/page.tsxapps/web/src/app/archive/wish/_components/WishlistBottomBar.tsxapps/web/src/app/home/page.tsxapps/web/src/app/mypage/page.tsxapps/web/src/assets/icons/outline/index.tsapps/web/src/components/bottom-tab-bar/index.tsxapps/web/src/consts/zIndex.ts
💤 Files with no reviewable changes (1)
- apps/web/src/app/archive/tournament/_components/ArchiveTournamentClient.tsx
* refactor: access token JWT에서 role 추출하는 유틸 추가 * refactor: 로그인 세션 검사(getMe) 제거하고 JWT role 기반으로 전환 * refactor: 게스트 세션 재활용 판정을 클릭 시점 refresh로 일원화 * fix: 루트 스플래시 배경 FOUC 제거 * feat: 로그인 진입 시 문구·버튼 fade-in 애니메이션 추가 * refactor: /archive 탭을 위시리스트·내 토너먼트 페이지로 분리 (#347) * refactor: /archive 탭 쿼리 파라미터를 /archive/wish, /archive/tournament 경로로 분리 * refactor: 구버전 /archive(?tab=) 경로를 신규 경로로 리다이렉트 * refactor: 옛 /wish 페이지 잔재 정리 및 archive 콜로케이션 재배치 * fix: 위시 페이지 체류 중 후속 공유 인텐트가 무시되던 문제 수정 * fix: 보관 탭 활성 판정 경로 경계 추가 및 위시 추가 후 중복 라우팅 제거 * fix: 공유 인텐트 실패 URL 잠금 해제 및 링크 담기 실패 시 다이얼로그 유지 * refactor: JWT role을 명시적 검증으로 좁혀 타입 단언 제거 * fix: share intent 처리 후 URL 잠금 해제하여 재공유 허용 * refactor: font preload 삭제 * refactor: Pretendard 폰트 CDN Dynamic Subset Variable로 교체 * chore: TanstackQuery devtool Dynamic Import로 변경 * chore: Tanstack Query Devtools ssr false 설정
This reverts commit adede7e.
This reverts commit 74d09aa.
* fix: 카카오 로그인 안드로이드 리다이렉트 수신 액티비티 등록 * chore: 서명 자격증명 및 빌드 산출물 gitignore 추가
* fix: Android 12+ 스플래시 로고 저해상도 문제 해결 (RN 오버레이로 전환) * fix: Android 시스템 스플래시 저품질 로고 미노출 처리 (배경색만 표시) * fix: SplashScreen.hideAsync rejection 처리 추가
* feat: 바텀 CTA 상단 그라데이션 옵션 추가 및 패딩 스펙 반영 * refactor: 페이지별 바텀 CTA를 BottomCta 공통 컴포넌트로 교체
* chore: iOS 앱 공유 바텀 시트 에셋 추가 * feat: iOS 앱 공유 바텀시트 성공/에러 UI 추가
* chore: playwright 설치 * chore: Playwright 설정 및 테스트 스크립트 추가 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat: 게스트 storageState 생성 setup 추가 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat: page.route 기반 API 목킹 fixture 및 목 데이터 추가 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * test: 홈 및 토너먼트 준비 페이지 E2E 테스트 추가 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix: SSR 접근 권한 조회용 목 스텁 서버 추가 및 준비 페이지 테스트를 진입 플로우로 변경 * chore: playwright/.auth gitignore 패턴 수정 * chore: E2E 테스트 CI 잡 추가 * fix: UI 모드와 CLI 동시 실행 시 목 스텁 포트 충돌 해결 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * fix: dev 전용 react-grab 스크립트 차단으로 trace 스냅샷 빈 화면 해결 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * chore: CI Node 버전 22 LTS로 변경 * refactor: E2E 테스트를 도메인 폴더 구조로 변경 * refactor: @e2e alias 도입 * feat: E2E 이미지 목킹 추가 (가짜 CDN URL + /_next/image 인터셉트) * feat: api 목킹 fixture에 patch, delete 메서드 추가 * docs: E2E 테스트 사용 가이드 추가 --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Jung Sun A <amber0809@naver.com>
This was referenced Jul 19, 2026
Merged
This was referenced Jul 31, 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
3 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.
작업 요약
Z_INDEX상수로 통일합니다작업 세부 내용
바텀탭 개편
homeoutline 아이콘 신규 추가button→next/link의<Link>로 교체해 마크업을 시맨틱하게 정리/mypage)에도 바텀탭을 노출하고, 겹침 방지를 위해pb를pb-32로 조정Liquid glass 인터랙션
DRAG_THRESHOLD(12px) 이상 이동 시에만 드래그로 판정해 손떨림 탭 오작동 방지NAVIGATE_DELAY380ms)을 마친 뒤 라우팅 처리하고, 제스처로 처리된Link클릭은onClickCapture에서 차단헤더 / 기타
PROFILE아이콘 제거 (마이 탭 신설로 동선 일원화)z-20을Z_INDEX.BOTTOM_TAB_BAR상수로 교체next.config.mjs의 SVGR 설정에서removeViewBox: false적용 — 아이콘 축소 렌더링 시 잘림 방지스크린샷
2026-07-18.12.59.56.mov
2026-07-18.12.47.53.mov
연관 이슈
closes #340
Summary by CodeRabbit