feat(main-v2): 메인 하단 내비게이션을 추가한다
This commit is contained in:
158
docs/prd/20260519_메인페이지하단내비게이션신규개발_prd.md
Normal file
158
docs/prd/20260519_메인페이지하단내비게이션신규개발_prd.md
Normal file
@@ -0,0 +1,158 @@
|
||||
# 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탭 구성과 빈 페이지 표시로 한정한다.
|
||||
Reference in New Issue
Block a user