[feat] 하단바 리디자인

[ff1451]

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 채팅 페이지 전용 라우트 추가
  • 하단 네비게이션에 새로운 채팅 항목 추가

• UI 개선

  • 네비게이션 항목 렌더링 방식 개선 (절대 위치 지정 및 조건부 표시 적용)
  • 네비게이션 스타일 업데이트 (모서리 둥글기, 간격 조정)
  • 메인 콘텐츠 영역 하단 패딩 계산 개선

[coderabbitai]

Walkthrough

채팅 기능을 위한 라우팅 및 하단 네비게이션 개선이 진행되었습니다. App.tsx에서 /chats 경로를 보호된 최상위 라우트로 추가하고, /chats/:chatRoomId에서 개별 채팅방을 렌더링하도록 구조를 변경했습니다. BottomNav 컴포넌트는 새로운 설정 구조를 도입해 Icon을 선택적으로 처리하고 floatingImageSrc 지원을 추가했으며, 채팅 항목을 네비게이션에 포함시켰습니다. 레이아웃의 하단 패딩도 CSS 변수를 활용해 동적으로 조정됩니다.

Possibly related issues

• [feat] 하단바 리디자인 #212: 하단바 리디자인 요청 사항과 일치합니다. BottomNav의 아이콘 임포트 변경, Icon 선택화, floatingImageSrc 추가, 레이아웃 및 스타일링 개선이 해당 이슈의 요구사항을 다룹니다.

Possibly related PRs

• [fix] 따닥 이슈 해결 및 채팅 읽지 않은 사람 표시 추가 #129: App.tsx의 라우팅 구조 변경이 ChatRoom 컴포넌트의 접근 경로에 직접 영향을 미칩니다.
• 136 refactor 채팅 UI 문의하기 라우트 경로 기본 질문 내용 수정 #137: 채팅 라우팅 및 네비게이션 로직과 연관되어 있으며, /chats/{chatRoomId} 경로 변경을 함께 반영합니다.
• [hotfix] 하단바 너비 수정 #208: BottomNav 컴포넌트 수정 사항(아이템 렌더링 리팩토링 및 /chats 항목 추가)이 동일 파일에서 진행됩니다.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목 '[feat] 하단바 리디자인'은 변경 사항의 핵심을 정확히 반영합니다. 실제로 BottomNav 컴포넌트의 아이콘, 레이아웃, 스타일링이 리디자인되었고 라우팅이 업데이트되었습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 212-feat-하단바-리디자인

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/layout/BottomNav/index.tsx`:
- Around line 75-79: The BottomNav's root <nav> currently uses a fixed 80px
baseline and doesn't account for the safe-area inset variable (var(--sab)),
causing icons/labels to sit too low on devices with home indicators; update the
nav (referencing navRef in src/components/layout/BottomNav/index.tsx) to include
the safe-area amount by adjusting its height/min-height or bottom padding to use
calc(80px + var(--sab)) (or add padding-bottom: var(--sab)) so it matches the
page body adjustment used in src/components/layout/index.tsx.
- Around line 33-45: The floating image visually sits outside the NavLink hitbox
so clicks on it miss the link; update the BottomNav NavLink wrapper (the element
using props to and end with className "relative h-[46px] w-10 ...") to expand
its clickable area to cover the floating image — either by increasing its
dimensions/padding or by adding an absolutely positioned, invisible hit target
inside the same NavLink (e.g., a transparent <span> or div) that matches the
img's bounds — and keep the img as pointer-events-none so visuals don’t
intercept events; adjust the element that renders floatingImageSrc (the img) and
the NavLink container together so the clickable area includes the img’s visual
overflow.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: cc83cb7b-60bb-4ab2-b0f2-b4a813a79aa6

📥 Commits

Reviewing files that changed from the base of the PR and between f060de0 and 0a28a60.

⛔ Files ignored due to path filters (5)

• src/assets/image/bottom-nav-home.png is excluded by !**/*.png, !src/assets/** and included by **
• src/assets/svg/bottom-nav-chat.svg is excluded by !**/*.svg, !src/assets/** and included by **
• src/assets/svg/bottom-nav-clubs.svg is excluded by !**/*.svg, !src/assets/** and included by **
• src/assets/svg/bottom-nav-mypage.svg is excluded by !**/*.svg, !src/assets/** and included by **
• src/assets/svg/bottom-nav-timer.svg is excluded by !**/*.svg, !src/assets/** and included by **

📒 Files selected for processing (3)

• src/App.tsx
• src/components/layout/BottomNav/index.tsx
• src/components/layout/index.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

홈 버튼의 떠 있는 영역이 실제 탭 타깃에서 빠져 있습니다.

Line 33의 링크 박스는 w-10 h-[46px]인데, Line 44에서 이미지를 그 밖으로 꺼내면서 pointer-events-none까지 걸어둬서 보이는 상단/측면 영역을 누르면 클릭이 빗나갈 수 있습니다. 중앙 홈 탭이라 체감이 클 가능성이 큽니다.

예시

-                className="pointer-events-none absolute top-[-26px] left-[-11px] z-10 h-[54px] w-[65px] max-w-none filter-[drop-shadow(0_4px_4px_rgba(0,0,0,0.15))]"
+                className="absolute top-[-26px] left-[-11px] z-10 h-[54px] w-[65px] max-w-none filter-[drop-shadow(0_4px_4px_rgba(0,0,0,0.15))]"

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<NavLink to={to} end={end} className="relative h-[46px] w-10 shrink-0 overflow-visible">
	{({ isActive }) => {
	const shouldShowFloatingImage = Boolean(floatingImageSrc);
	return (
	<>
	{shouldShowFloatingImage ? (
	<img
	src={floatingImageSrc}
	alt=""
	aria-hidden="true"
	className="pointer-events-none absolute top-[-26px] left-[-11px] z-10 h-[54px] w-[65px] max-w-none filter-[drop-shadow(0_4px_4px_rgba(0,0,0,0.15))]"
	/>
	<NavLink to={to} end={end} className="relative h-[46px] w-10 shrink-0 overflow-visible">
	{({ isActive }) => {
	const shouldShowFloatingImage = Boolean(floatingImageSrc);
	return (
	<>
	{shouldShowFloatingImage ? (
	<img
	src={floatingImageSrc}
	alt=""
	aria-hidden="true"
	className="absolute top-[-26px] left-[-11px] z-10 h-[54px] w-[65px] max-w-none filter-[drop-shadow(0_4px_4px_rgba(0,0,0,0.15))]"
	/>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/layout/BottomNav/index.tsx` around lines 33 - 45, The floating
image visually sits outside the NavLink hitbox so clicks on it miss the link;
update the BottomNav NavLink wrapper (the element using props to and end with
className "relative h-[46px] w-10 ...") to expand its clickable area to cover
the floating image — either by increasing its dimensions/padding or by adding an
absolutely positioned, invisible hit target inside the same NavLink (e.g., a
transparent <span> or div) that matches the img's bounds — and keep the img as
pointer-events-none so visuals don’t intercept events; adjust the element that
renders floatingImageSrc (the img) and the NavLink container together so the
clickable area includes the img’s visual overflow.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

하단 safe area가 네비게이션 본체에는 아직 반영되지 않았습니다.

src/components/layout/index.tsx Line 47은 이미 calc(80px + var(--sab))로 본문을 보정하고 있는데, 여기서는 nav가 여전히 80px 기준이라 iPhone/WebView에서 라벨과 아이콘이 홈 인디케이터 쪽으로 내려갈 수 있습니다. nav 쪽에도 var(--sab)를 포함한 패딩이나 높이를 같이 주는 편이 맞습니다.

예시

     <nav
       ref={navRef}
-      className="fixed right-0 bottom-0 left-0 z-20 rounded-t-[20px] border-t border-[`#e0e0e0`] bg-white"
+      className="fixed right-0 bottom-0 left-0 z-20 rounded-t-[20px] border-t border-[`#e0e0e0`] bg-white pb-[var(--sab)]"
     >
       <div className="flex min-h-20 w-full items-center justify-around px-[31px]">

As per coding guidelines, "Maintain mobile webview responsive design with `--viewport-height` and safe area variables".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/layout/BottomNav/index.tsx` around lines 75 - 79, The
BottomNav's root <nav> currently uses a fixed 80px baseline and doesn't account
for the safe-area inset variable (var(--sab)), causing icons/labels to sit too
low on devices with home indicators; update the nav (referencing navRef in
src/components/layout/BottomNav/index.tsx) to include the safe-area amount by
adjusting its height/min-height or bottom padding to use calc(80px + var(--sab))
(or add padding-bottom: var(--sab)) so it matches the page body adjustment used
in src/components/layout/index.tsx.