# PRD: 메인 페이지 하단 내비게이션 신규 개발 ## 1. Overview 메인 페이지를 4개 하단 내비게이션 탭 구조로 정리하고, 탭별 페이지를 표시한다. --- ## 2. Problem - 현재 메인 화면은 커스텀 하단 탭바와 기존 `MainActivity`에 여러 레거시 흐름이 함께 묶여 있다. - `BottomNavigationView`와 신규 페이지 구조를 기존 `MainActivity`에 덧씌우면 레거시 구조와 신규 구조가 섞여 복잡도가 커질 수 있다. - 신규 메인 페이지는 `홈`, `콘텐츠`, `채팅`, `마이` 4개 탭을 기준으로 동작해야 한다. - `마이` 탭은 기존 마이페이지 기능을 유지해야 하며, 나머지 탭은 아직 상세 기능이 없으므로 빈 페이지로 시작해야 한다. --- ## 3. Goals - 메인 페이지 하단 내비게이션을 `홈`, `콘텐츠`, `채팅`, `마이` 4개로 구성한다. - 신규 메인 컨테이너는 기존 `MainActivity`를 수정해 덧씌우지 않고 `kr.co.vividnext.sodalive.v2` 하위 신규 Activity로 개발한다. - 하단 내비게이션은 커스텀 탭바가 아니라 Material `BottomNavigationView`를 사용한다. - 탭 선택 시 해당 탭에 대응하는 Fragment 페이지를 표시한다. - `마이` 탭은 기존 `MyPageFragment`를 그대로 표시한다. - `홈`, `콘텐츠`, `채팅` 탭은 신규 빈 페이지 Fragment를 만들어 표시한다. - 탭 아이콘은 tint와 선택 상태용 파란 아이콘 리소스를 적용하지 않고 원본 아이콘 리소스를 그대로 사용한다. - 하단 내비게이션 아이콘/타이틀 정렬은 가로 가운데, 세로 가운데를 우선 적용하고 타이틀은 아이콘 하단에 위치하도록 한다. --- ## 4. Non-Goals - `홈`, `콘텐츠`, `채팅` 탭의 실제 콘텐츠/데이터/API 기능은 구현하지 않는다. - 기존 `MyPageFragment` 내부 UI와 비즈니스 로직은 수정하지 않는다. - 기존 `MainActivity`에 신규 `BottomNavigationView` 구조를 덧씌우지 않는다. - 메인 페이지 외 다른 화면의 탭 구조를 일괄 변경하지 않는다. - 탭별 back stack은 구현하지 않는다. - Navigation Component 도입은 이번 범위에 포함하지 않는다. - 누락된 `ic_nav_my_selected` 원본 리소스를 새로 제작하지 않는다. - 기존 `MainActivity` 전체를 리팩터링하지 않는다. 신규 Activity에 필요한 인증, 이벤트 팝업, 미니 플레이어 등 필수 흐름만 선별 이관한다. --- ## 5. Target Users - 앱 메인 화면에서 하단 탭으로 주요 섹션을 이동하는 일반 사용자. - 메인 탭 구조를 기준으로 후속 홈/콘텐츠/채팅 기능을 개발할 Android 개발자. --- ## 6. User Stories - 사용자는 메인 화면 하단에서 `홈`, `콘텐츠`, `채팅`, `마이` 탭을 볼 수 있다. - 사용자는 각 탭을 눌러 해당 페이지로 이동할 수 있다. - 사용자는 `마이` 탭에서 기존 마이페이지 기능을 그대로 사용할 수 있다. - 개발자는 아직 기능이 정해지지 않은 `홈`, `콘텐츠`, `채팅` 탭을 빈 페이지로 구분해 후속 개발의 시작점으로 사용할 수 있다. --- ## 7. Core Features ### Feature A: 4개 하단 내비게이션 탭 신규 메인 Activity의 하단 내비게이션을 `홈`, `콘텐츠`, `채팅`, `마이` 순서로 구성한다. #### Requirements - 탭 순서는 왼쪽부터 `홈`, `콘텐츠`, `채팅`, `마이`이다. - 하단 내비게이션 UI는 Material `BottomNavigationView`와 menu 리소스로 구성한다. - 탭 라벨은 기존 문자열 리소스가 있으면 재사용하고, 없는 경우 새 문자열 리소스를 추가한다. - 현재 확인된 기존 문자열은 `tab_home`, `tab_chat`, `tab_my`이다. - `콘텐츠` 탭 라벨은 신규 문자열 리소스 추가가 필요하다. #### Edge Cases - 기존 `LIVE` 탭에 연결된 딥링크/진입 흐름은 신규 메인 Activity에서 그대로 탭으로 노출하지 않는다. - 신규 메인 탭 상태는 기존 `MainViewModel.CurrentTab`을 수정하지 않고 v2 전용 탭 모델로 분리한다. ### Feature B: 탭별 Fragment 표시 탭 선택 시 신규 메인 Activity의 Fragment 컨테이너에 대응 Fragment를 표시한다. #### Requirements - `마이` 탭은 `app/src/main/java/kr/co/vividnext/sodalive/mypage/MyPageFragment.kt`를 표시한다. - `홈`, `콘텐츠`, `채팅` 탭은 신규 빈 Fragment를 표시한다. - 신규 `Activity`, `Fragment`, `ViewModel` 및 연결 하위 코드는 저장소 규칙에 따라 `kr.co.vividnext.sodalive.v2` 패키지 하위에 작성한다. - 빈 페이지는 화면 영역을 차지하되, 별도 데이터 로딩이나 네트워크 호출을 하지 않는다. - 탭별 back stack은 만들지 않는다. #### Edge Cases - 신규 빈 Fragment는 `BaseFragment` 패턴과 ViewBinding 사용 여부를 기존 코드 스타일에 맞춘다. - `MyPageFragment`는 기존 패키지에 있으므로 재사용만 하고 이동하지 않는다. ### Feature C: 신규 메인 Activity와 기존 필수 프로세스 이관 신규 메인 Activity는 기존 `MainActivity`를 덮어쓰지 않고 별도 진입점으로 구성하며, 사용자 경험 유지에 필요한 필수 프로세스만 이관한다. #### Requirements - 신규 Activity는 `kr.co.vividnext.sodalive.v2` 패키지 하위에 작성한다. - 기존 인증/로그인 진입, 권한 요청, 이벤트 팝업, 미니 플레이어 표시/해제 흐름은 신규 Activity에서도 현재 사용자 경험과 동일하게 동작해야 한다. - 미니 플레이어는 `BottomNavigationView` 위에 배치해 하단 내비게이션과 겹치지 않도록 한다. - 기존 `MainActivity`의 모든 레거시 메서드를 무조건 복사하지 않고 신규 메인 화면에 필요한 흐름만 이관한다. - 스플래시, 로그인/회원가입 완료, 딥링크, 플레이어 알림 등 기존 `MainActivity`로 이동하던 주요 진입점은 신규 Activity로 전환할지 구현 계획에서 명시적으로 검토한다. #### Edge Cases - 딥링크는 향후 정리 계획이 있으므로 신규 Activity에서 탭 라우팅 진입점을 분리해 확장 가능하게 둔다. - 채팅 배지는 향후 `BottomNavigationView`의 badge API로 확장할 수 있도록 menu item id를 안정적으로 정의한다. ### Feature D: 탭 아이콘 색상 유지 탭 선택/미선택 상태와 무관하게 아이콘 리소스 원본 색상을 그대로 표시한다. #### Requirements - `홈`: `ic_nav_home` - `콘텐츠`: `ic_nav_content` - `채팅`: `ic_nav_chat` - `마이`: `ic_nav_my` - `BottomNavigationView`의 `itemIconTint`는 `null`로 두어 아이콘 tint를 적용하지 않는다. - checked 상태에서도 선택용 파란 아이콘 리소스를 사용하지 않는다. #### Edge Cases - 라벨 선택 상태는 텍스트 색상으로만 구분한다. --- ## 8. UX / UI Expectations - 하단 내비게이션은 화면 하단에 고정된다. - 각 탭은 동일한 가로 영역을 가진다. - 아이콘과 타이틀은 가로 가운데 정렬한다. - 세로 정렬은 가운데 정렬을 우선으로 하고, 타이틀은 아이콘 하단에 배치한다. - 선택된 탭은 선택 아이콘과 선택 텍스트 스타일로 구분한다. - 미선택 탭은 미선택 아이콘과 미선택 텍스트 스타일로 구분한다. - 하단 내비게이션 배경은 `black`을 사용한다. - 하단 내비게이션 아이콘은 tint로 색을 변경하지 않고 아이콘 리소스 원본 색상을 그대로 사용한다. - checked 상태에서 `#3BB9F1` 계열 선택 아이콘으로 바뀌지 않아야 한다. - 하단 내비게이션 라벨 색상은 미선택 `gray_600`, 선택 `white`를 사용한다. - 하단 내비게이션 라벨 typography는 `Typography.Caption3`을 사용한다. - 하단 내비게이션의 과도한 내부 padding은 `BottomNavigationView` item padding 속성으로 줄인다. - edge-to-edge로 인해 하단 내비게이션 아래에 생기는 system bar inset 빈 공간은 MainV2 화면 범위에서만 제거한다. - 향후 채팅 배지와 Material UX 정리를 고려해 `BottomNavigationView`의 표준 item 상태, ripple, badge 확장성을 우선한다. - 빈 페이지는 기능이 비어 있음을 개발자가 확인할 수 있는 최소 UI로 유지한다. --- ## 9. Technical Constraints - Android XML 레이아웃과 Kotlin Fragment 기반 구현을 따른다. - 신규 메인 화면은 기존 `MainActivity`, `activity_main.xml`, `item_main_tab.xml`에 덧씌우지 않는다. - 신규 Activity, ViewModel, Fragment 코드는 `kr.co.vividnext.sodalive.v2` 하위에 둔다. - 하단 내비게이션은 Material `BottomNavigationView`를 사용한다. - 탭 전환은 탭별 back stack 없이 단일 Fragment 컨테이너에서 처리한다. - 기존 `MyPageFragment`는 `kr.co.vividnext.sodalive.mypage` 패키지의 기존 파일을 재사용한다. - 이번 문서 작성 단계에서는 구현 파일을 변경하지 않는다. --- ## 10. Metrics - 하단 내비게이션 탭이 `홈`, `콘텐츠`, `채팅`, `마이` 4개로 표시된다. - 신규 메인 화면이 `kr.co.vividnext.sodalive.v2` 하위 신규 Activity로 구성된다. - 하단 내비게이션이 `BottomNavigationView`로 구성된다. - 각 탭 선택 시 대응 Fragment가 표시된다. - `마이` 탭 선택 시 기존 `MyPageFragment`가 표시된다. - `홈`, `콘텐츠`, `채팅` 탭 선택 시 각각 신규 빈 페이지가 표시된다. - 인증, 이벤트 팝업, 미니 플레이어 흐름이 신규 Activity에서도 기존 사용자 경험과 동일하게 동작한다. - 요청된 선택/미선택 아이콘 리소스가 탭 상태에 맞게 연결된다. - 디버그 빌드가 성공한다. --- ## 11. Open Questions - 없음. 현재 구현 범위는 요청된 4탭 구성과 빈 페이지 표시로 한정한다.