Skip to content

feat: implement bottom navigation with haptic feedback and safe area support - #77

Merged
Salvation-sub merged 4 commits into
mainfrom
feat/76-bottom-navigation
Nov 4, 2025
Merged

feat: implement bottom navigation with haptic feedback and safe area support#77
Salvation-sub merged 4 commits into
mainfrom
feat/76-bottom-navigation

Conversation

@Salvation-sub

Copy link
Copy Markdown
Collaborator

🔥 PR Title

feat: implement bottom navigation with haptic feedback and safe area support


📌 Work Description

  • Replace floating navigation button with full bottom navigation bar
  • Add 4 navigation tabs: Home, Map, Report, My Page
  • Implement native haptic feedback on tab clicks via WebView bridge
  • Add iPhone safe area support for notch and home indicator
  • Enable iOS swipe-back gesture in WebView

✅ Checklist

  • Tested that the code works correctly
  • Added bridge communication for haptic feedback
  • Fixed hydration errors with client-side mounting
  • Configured safe area insets for iOS devices

🚀 How to Test (Optional)

Web

  1. Run pnpm dev in /web directory
  2. Navigate to /home or /map
  3. Check bottom navigation displays correctly
  4. Verify safe area padding on iPhone simulators

React Native

  1. Update WebView URI to local IP address in app/app/index.tsx
  2. Run npx expo start in /app directory
  3. Open in Expo Go
  4. Test haptic feedback on tab clicks
  5. Verify iOS swipe-back gesture works

@vercel

vercel Bot commented Nov 2, 2025

Copy link
Copy Markdown

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

Project Deployment Preview Comments Updated (UTC)
gryffindor Ready Ready Preview Comment Nov 4, 2025 2:11pm

@javadocq javadocq left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

웹과 앱 safeareaview까지 둘 다 적용이 되게 하는 거 완전 깔끔한 것 같습니다!
바텀 내브도 변경하시느라 고생 많으셨습니다!

Comment thread web/src/shared/ui/BottomNavigation.tsx Outdated

const handleNavigation = async (path: string) => {
await triggerHaptic();
router.replace(path as any);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용자 입장에서 탭 이동은 독립적인 이동으로 간주할 것 같은데 replace로 가면 UX적으로 혼동이 있지 않을까? 싶은데 어떠신가용?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞습니당! 생각해보니깐 그렇네요! 해당 내용 반영했습니다!!

@haejinyun haejinyun left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

인증 필요 경로만 수정 부탁드립니다!

Comment thread web/src/shared/config/routeConfig.ts Outdated
export const AUTH_CONFIG = {
// 인증이 필요한 경로들
PROTECTED_ROUTES: ["/onboarding"] as const,
PROTECTED_ROUTES: ["/onboarding", "/mypage"] as const,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요고 빠져야할 듯 합니당

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영 완료했습니당!! 나이스 캐취!!

@soosoo22 soosoo22 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

빠르게 구현하셨네요👍👍👍 수고하셨습니다!

@Salvation-sub
Salvation-sub merged commit 62c7ed1 into main Nov 4, 2025
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat :Implement a bottom navigation bar with haptic feedback and iPhone safe area support to replace the floating navigation button

4 participants