[Feature] 하단 내비게이션 바 컴포넌트 구현

[choihooo]

Summary

• Figma 하단 내비게이션 바를 @comma/design-system의 NavigationBar 컴포넌트로 추가했습니다.
• rest, feed, archive, mypage active 상태와 inline SVG 아이콘, glass pill 스타일을 구현했습니다.
• Storybook에 Playground와 4개 상태 비교 스토리를 등록했습니다.

Scope

• Included: 디자인 시스템 React 컴포넌트, vanilla-extract 스타일, 아이콘 분리, Storybook 스토리
• Excluded: 실제 라우팅 연결, 앱 하단 fixed 배치, 네이티브 RN 컴포넌트

Validation

• pnpm --filter @comma/design-system typecheck
• pnpm --filter @comma/storybook typecheck
• pnpm lint
• pnpm build:storybook

Notes

• pnpm lint는 기존 apps/web/public/images/onboardingBackground*.svg 대용량 파일 경고 2개를 출력하지만 실패하지 않습니다.

Summary by CodeRabbit

• New Features

  • Added a new navigation bar component to the design system with selectable active states.
  • Included matching icon set and styling for active/inactive item display.
  • Added Storybook stories to preview a single interactive version and multiple variants.

• Bug Fixes

  • Improved accessibility by marking the active navigation item appropriately.

• Chores

  • Updated package requirements to reflect React 19 support.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
comma-front-web	Ready	Preview, Comment	Jun 27, 2026 7:03am

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new NavigationBar design-system component with SVG icons, active-state styling, package exports, and Storybook stories. The package manifest now declares a React 19 peer dependency.

Changes

Navigation bar feature

Layer / File(s)	Summary
Icons and styles packages/design-system/src/NavigationBar.css.ts, packages/design-system/src/NavigationBarIcons.tsx	SVG icon components and navigation bar CSS-in-TS styles define the item visuals, tone variants, and focus-visible styling.
Component and exports packages/design-system/src/NavigationBar.tsx, packages/design-system/src/index.ts, packages/design-system/package.json	The navigation bar component declares its item and props types, renders active and inactive buttons, re-exports through the package index, and adds a React peer dependency.
Storybook stories apps/storybook/src/NavigationBar.stories.tsx	Storybook adds a playground story with an active-item control and a variants story showing each navigation state.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through bars with icon cheer,
Active, inactive, crystal clear.
One click, one bounce, one little hop,
Storybook glows and buttons pop.
My carrot paws applaud the view,
A tidy nav in shades anew.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: implementing a bottom navigation bar component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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 feature/8-navigation-bar

---

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]

🧹 Nitpick comments (1)

packages/design-system/package.json (1)

26-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Bound the React peer range to the tested major.

>=19.0.0 also claims React 20+ compatibility, which this PR does not establish. Prefer ^19.0.0 unless you already test future majors.

Suggested change

   "peerDependencies": {
-    "react": ">=19.0.0"
+    "react": "^19.0.0"
   },

🤖 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 `@packages/design-system/package.json` around lines 26 - 28, The React peer
dependency range in package.json is too broad because it claims compatibility
with future major versions not yet tested. Update the peerDependencies entry for
react from a lower-bounded range to the tested major range, using the
package.json peerDependencies block as the target so it only accepts React 19.x
unless future majors are explicitly validated.

🤖 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 `@packages/design-system/package.json`:
- Around line 26-28: The React peer dependency range in package.json is too
broad because it claims compatibility with future major versions not yet tested.
Update the peerDependencies entry for react from a lower-bounded range to the
tested major range, using the package.json peerDependencies block as the target
so it only accepts React 19.x unless future majors are explicitly validated.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7ee67916-8419-47e4-a926-0c2190b68173

📥 Commits

Reviewing files that changed from the base of the PR and between ef28d51 and f84e4d2.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (6)

• apps/storybook/src/NavigationBar.stories.tsx
• packages/design-system/package.json
• packages/design-system/src/NavigationBar.css.ts
• packages/design-system/src/NavigationBar.tsx
• packages/design-system/src/NavigationBarIcons.tsx
• packages/design-system/src/index.ts