⚙️ [기능추가][네비게이션] 하단 네비게이션 바 + FAB 구현 필요

[Cassiiopeia]

📝 현재 문제점

• 현재 앱에 하단 네비게이션 바가 없어 화면 간 이동이 불가능함
• GoRouter가 평면 구조로만 구성되어 있어 탭 기반 네비게이션을 지원하지 않음
• 기존 이슈(⚙️ [기능추가][홈] 최신/인기 장소 목록 UI #18~⚙️ [기능추가][마이페이지] 프로필 조회/수정 설정 화면 필요 #26)의 기능들이 네비게이션 없이는 사용자에게 노출될 수 없음

🛠️ 해결 방안 / 제안 기능

• 하단 네비게이션 바를 4탭 + FAB 구조로 구현
  • Tab 1: 홈 (홈 피드)
  • Tab 2: 검색 (장소/키워드 탐색)
  • Tab 3: 지도 (북마크/저장 장소를 지도에 표시)
  • Tab 4: 마이페이지 (프로필, 설정)
  • 중앙 FAB: AI 장소 추출 (URL 입력 바텀시트 호출)
• GoRouter에 StatefulShellRoute 적용하여 탭 전환 시 상태 유지
• 각 탭의 루트 페이지(검색, 지도, 마이페이지)는 빈 Scaffold로 우선 구현 가능

⚙️ 작업 내용

• 하단 네비게이션 바 위젯 구현 (4탭 + 중앙 FAB 버튼)
• GoRouter StatefulShellRoute 설정 추가
• route_paths.dart에 검색(/search), 지도(/map), 마이페이지(/mypage) 경로 추가
• 각 탭 루트 페이지 placeholder 생성 (검색, 지도, 마이페이지)
• 기존 홈 피드 페이지를 첫 번째 탭으로 연동

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: @Cassiiopeia
• 디자인: 이름

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260223_#38_하단_네비게이션_바_FAB_구현_필요

커밋 메시지

하단 네비게이션 바 + FAB 구현 필요 : feat : {변경 사항에 대한 설명} https://github.com/MapSee-Lab/MapSy-FE/issues/38

[Cassiiopeia]

📌 작업 개요

하단 네비게이션 바(4탭) + 중앙 FAB(AI 추출) 구조 구현. GoRouter의 StatefulShellRoute.indexedStack을 적용하여 탭 전환 시 상태 보존. 검색/지도/마이페이지 탭은 placeholder 페이지로 우선 생성.

🎯 구현 목표

• 홈 / 검색 / 지도 / 마이페이지 4개 탭 네비게이션 바 추가
• 중앙 FAB 버튼으로 AI 장소 추출 진입점 확보
• 탭별 독립 네비게이션 스택으로 상태 유지
• 기존 인증 가드(redirect) 로직과 자연스럽게 통합

✅ 구현 내용

경로 상수 추가

• 파일: lib/routing/route_paths.dart
• 변경 내용: /search, /map, /mypage 경로 및 이름 상수 추가
• 이유: 하드코딩 방지를 위한 기존 패턴 준수

메인 스캐폴드 위젯 생성

• 파일: lib/common/widgets/main_scaffold.dart (신규)
• 변경 내용: MainScaffold 위젯 구현. StatefulNavigationShell을 받아 하단 네비게이션 바 + FAB를 렌더링
• 이유: StatefulShellRoute의 builder에서 모든 탭 페이지를 감싸는 셸 역할

GoRouter StatefulShellRoute 설정

• 파일: lib/routing/app_router.dart
• 변경 내용: 기존 단일 GoRoute(path: '/home') 제거 → StatefulShellRoute.indexedStack으로 교체. 4개 StatefulShellBranch(home, search, map, mypage) 구성. 각 branch에 독립 GlobalKey<NavigatorState> 부여
• 이유: 탭 전환 시 각 탭의 스크롤 위치, 상태 등을 보존하기 위함

Placeholder 페이지 3개 생성

• 파일: lib/features/search/presentation/pages/search_page.dart (신규)
• 파일: lib/features/map/presentation/pages/map_page.dart (신규)
• 파일: lib/features/mypage/presentation/pages/mypage_page.dart (신규)
• 변경 내용: 각 탭의 루트 페이지를 "준비 중" UI로 구현
• 이유: 네비게이션 구조를 먼저 완성하고, 각 탭의 실제 기능은 후속 이슈(⚙️ [기능추가][홈] 트렌드 키워드 섹션 #19~⚙️ [기능추가][마이페이지] 프로필 조회/수정 설정 화면 필요 #26)에서 구현

🔧 주요 변경사항 상세

MainScaffold (main_scaffold.dart)

하단 네비게이션 바 구조:

• 4개 탭 아이콘 + 라벨 (홈/검색/지도/마이) + 중앙 FAB 공간
• 선택된 탭: HomeColors.textPrimary (0xFF1A1A1A), 비선택 탭: HomeColors.iconSecondary (0xFFAAAAAA)
• FAB: 검정 원형 버튼 + 흰색 + 아이콘, 클릭 시 "AI 장소 추출 기능 준비 중" 스낵바 표시
• SafeArea 적용으로 노치/홈 인디케이터 영역 고려
• GestureDetector + HitTestBehavior.opaque로 투명 영역에서도 탭 이벤트 정상 처리

특이사항:

• FloatingActionButtonLocation.centerFloat 사용 (커스텀 Container 기반 네비게이션 바와의 호환성 확보)
• 같은 탭 재탭 시 goBranch(index, initialLocation: true)로 해당 탭의 초기 위치로 복귀

app_router.dart

• GlobalKey 4개를 routerProvider 내부 로컬 변수로 선언 (hot restart 시 Duplicate GlobalKey 에러 방지)
• 기존 redirect 로직은 변경 없음 → /search, /map, /mypage는 publicPaths에 포함되지 않으므로 자동으로 인증 보호 대상

Placeholder 페이지

• 기존 HomePage의 AppBar 스타일과 동일한 패턴 적용
• AppTextStyles.heading02 디자인 시스템 상수 활용
• HomeColors 컬러 팔레트 일관 적용

🧪 테스트 및 검증

• flutter pub get → 네트워크 이슈로 미실행 (로컬 패키지 캐시 부재)
• 코드 구조 및 문법은 수동 검증 완료
• 네트워크 복구 후 flutter analyze 및 실행 테스트 필요

확인 항목:

• 4개 탭 전환 정상 동작
• 탭 전환 시 상태 유지 (홈 스크롤 위치 등)
• FAB 클릭 시 스낵바 표시
• 로그아웃 후 로그인 페이지 리다이렉트 정상
• 비로그인 상태에서 /search, /map, /mypage 접근 시 로그인으로 리다이렉트

📌 참고사항

• FAB 동작은 현재 스낵바만 표시. 추후 ⚙️ [기능추가][AI] AI 장소 추출 URL 입력 바텀시트추가 필요 #21 이슈에서 AI 추출 URL 입력 바텀시트로 교체 예정
• 검색/지도/마이페이지의 실제 기능은 후속 이슈(⚙️ [기능추가][홈] 트렌드 키워드 섹션 #19, ⚙️ [기능추가][장소] 장소 상세 페이지 구현 필요 #24, ⚙️[기능추가][폴더] 폴더 CRUD 및 저장 장소 관리 UI 구현 #25, ⚙️ [기능추가][마이페이지] 프로필 조회/수정 설정 화면 필요 #26)에서 구현
• 변경 파일 총 6개: 수정 2개 (route_paths.dart, app_router.dart) + 신규 4개 (main_scaffold.dart, search_page.dart, map_page.dart, mypage_page.dart)

[Cassiiopeia]

Stable 적용 완료