8.6 KiB
PRD: 메인 페이지 신규 개발
1. Overview
앱 진입 후 표시되는 메인 페이지를 하단 내비게이션 4개 탭 구조로 정리한다. 탭은 홈, 콘텐츠, 채팅, 마이 순서로 제공하며, 마이는 기존 MyPageView를 재사용하고 나머지 탭은 신규 빈 페이지로 시작한다.
2. Background
현재 앱의 전역 진입 흐름은 SodaLiveApp → ContentView → HomeView 구조다. ContentView는 NavigationStack(path: $appState.navigationPath)로 전역 화면 전환을 관리하고, .main 상태에서는 별도 화면을 push하지 않고 항상 HomeView()를 루트 화면으로 노출한다.
현재 메인 탭 관련 구현은 아래 파일에 분산되어 있다.
SodaLive/Sources/Main/Home/HomeView.swift: 현재 메인 루트 컨테이너와 미니 플레이어, 하단 탭 포함SodaLive/Sources/Main/Home/HomeViewModel.swift: 현재 탭 상태CurrentTab = home, chat, live, mypageSodaLive/Sources/Main/Home/BottomTabView.swift: 하단 탭 4개 UISodaLive/Sources/Main/Home/TabButton.swift: 탭 버튼 공용 UISodaLive/Sources/MyPage/MyPageView.swift: 신규마이탭에서 재사용할 기존 마이페이지
3. Goals
- 메인 페이지가 하단 내비게이션 4개 탭을 제공한다.
- 탭 순서는
홈,콘텐츠,채팅,마이로 고정한다. - 탭 선택 시 각 탭에 대응하는 페이지가 표시된다.
마이탭은 기존SodaLive/Sources/MyPage/MyPageView.swift를 그대로 표시한다.홈,콘텐츠,채팅탭은 신규 빈 페이지를 만들어 표시한다.- 하단 내비게이션 아이콘은 요청된
ic_nav_*계열을 사용한다. - 현재 없는
ic_nav_my_selected는 임시로ic_tabbar_my_selected를 사용한다.
4. Non-Goals
- 신규
홈,콘텐츠,채팅탭의 실제 콘텐츠 구현은 하지 않는다. - 기존 마이페이지 내부 UI/비즈니스 로직은 변경하지 않는다.
- 전역 라우팅 구조(
AppState,AppStep,ContentView)의 대규모 개편은 하지 않는다. - 미니 플레이어, 팝업, 본인인증, 딥링크 등 기존 메인 주변 기능의 동작 변경은 하지 않는다.
- 누락된 실제 이미지 리소스
ic_nav_my_selected를 새로 제작하거나 추가하지 않는다.
5. Core Requirements
5.1 하단 내비게이션 탭
하단 내비게이션은 4개 탭으로 구성한다.
| 순서 | 탭 | 표시 페이지 | 구현 상태 |
|---|---|---|---|
| 1 | 홈 | 신규 빈 페이지 | 신규 생성 |
| 2 | 콘텐츠 | 신규 빈 페이지 | 신규 생성 |
| 3 | 채팅 | 신규 빈 페이지 | 신규 생성 |
| 4 | 마이 | MyPageView |
기존 재사용 |
5.2 탭 선택 상태
탭을 선택하면 선택된 탭의 페이지를 메인 콘텐츠 영역에 표시한다. 선택된 탭과 선택되지 않은 탭의 아이콘은 아래 매핑을 따른다.
| 탭 | 선택 아이콘 | 미선택 아이콘 |
|---|---|---|
| 홈 | ic_nav_home_selected |
ic_nav_home |
| 콘텐츠 | ic_nav_content_selected |
ic_nav_content |
| 채팅 | ic_nav_chat_selected |
ic_nav_chat |
| 마이 | ic_tabbar_my_selected 임시 사용 |
ic_nav_my |
ic_nav_my_selected 리소스가 추가되면 마이 탭 선택 아이콘은 ic_tabbar_my_selected에서 ic_nav_my_selected로 교체한다.
5.3 탭 버튼 정렬
탭 버튼의 아이콘과 타이틀 정렬 우선순위는 아래 기준을 따른다.
- 가로 정렬 1순위: 탭 버튼 내부 콘텐츠는 가운데 정렬한다.
- 세로 정렬 1순위: 아이콘과 타이틀 묶음은 가운데 정렬한다.
- 세로 정렬 2순위: 탭별 타이틀의 하단 라인을 맞춘다.
구현 시 탭 버튼별 콘텐츠 높이가 달라도 타이틀 기준선이 흔들리지 않도록 아이콘 영역 높이와 타이틀 영역 높이를 명확히 분리한다.
6. Recommended Approach
접근안 A: 기존 HomeView/BottomTabView 구조를 최소 변경으로 확장
현재 앱 구조와 가장 잘 맞는다. HomeView가 이미 메인 루트 컨테이너 역할을 하고 있고, BottomTabView가 4개 탭을 width / 4로 고정 렌더링하고 있으므로 신규 요구사항을 반영하기 쉽다.
장점은 변경 범위가 작고 기존 미니 플레이어, 전역 팝업, AppState.startTab 연동을 유지하기 쉽다는 점이다. 단점은 현재 HomeView가 이미 많은 책임을 갖고 있어, 구현 시 탭 콘텐츠 분리 경계를 문서대로 지키지 않으면 파일이 더 커질 수 있다.
접근안 B: 신규 MainView 컨테이너를 만들고 ContentView에서 교체
신규 메인 페이지의 의미가 명확해진다. 기존 HomeView를 직접 확장하지 않고 MainView, MainTab, MainTabBarView 등으로 책임을 분리할 수 있다.
장점은 구조가 명확하고 새 요구사항을 독립적으로 구현하기 좋다는 점이다. 단점은 기존 HomeView에 포함된 미니 플레이어, 팝업, 인증, 이벤트 팝업 흐름을 이관해야 하므로 문서 단계의 요구사항보다 구현 영향이 커질 수 있다.
접근안 C: SwiftUI 기본 TabView(selection:) 기반으로 전환
SwiftUI 표준 탭 내비게이션 방식이다. 탭별 독립 상태 관리와 접근성 측면에서 유리하다.
단, 현재 프로젝트는 커스텀 하단 바와 전역 NavigationStack/AppStep 구조를 이미 사용하고 있으므로 기본 TabView 전환은 기존 UI/안전영역/미니 플레이어 연동 방식과 충돌할 수 있다.
권장
접근안 B로 결정한다. 새 요구사항을 기존 HomeView에 덧붙이기보다 신규 MainView 컨테이너에서 독립적으로 구현한 뒤, 기존 HomeView에 있던 미니 플레이어, 인증, 팝업 등 메인 주변 기능을 필요한 범위만 이관하는 방향이 낫다고 판단한다. 구현 계획 단계에서는 신규 파일을 SodaLive/Sources/V2/Main/** 아래에 작성하고, ContentView의 루트 렌더링 지점에서 신규 메인 컨테이너를 사용하도록 연결한다.
7. Technical Constraints
AppStep.main은 기존처럼 메인 복귀 의미로 유지한다.ContentView의 전역NavigationStack구조와AppStepLayerView매핑은 변경하지 않는다.- 현재
HomeViewModel.CurrentTab에는content가 없고live가 있으므로, 구현 시 탭 enum을home, content, chat, mypage로 변경하거나 신규 메인 탭 enum을 도입해야 한다. I18n.Main.Tab에는 현재home,live,chat,my만 있으므로content라벨을 추가해야 한다.ic_nav_my_selected는 현재 에셋에 없으므로 구현 시ic_tabbar_my_selected를 임시 사용한다.- 신규로 생성되는 메인 페이지 관련 파일은 모두
SodaLive/Sources/V2/Main/**아래에 둔다.
8. Success Criteria
- 문서 기준 구현 후 앱 메인 화면에 하단 탭 4개가 표시된다.
- 탭 순서가
홈,콘텐츠,채팅,마이와 일치한다. - 각 탭 선택 시 대응 페이지가 표시된다.
마이탭 선택 시 기존MyPageView가 표시된다.홈,콘텐츠,채팅탭 선택 시 빈 페이지가 표시된다.- 탭 아이콘 선택/미선택 매핑이 요구사항과 일치한다.
마이선택 아이콘은 임시로ic_tabbar_my_selected를 사용한다.- 탭 버튼 내부 콘텐츠는 가로/세로 가운데 정렬을 우선하고, 타이틀 하단 라인이 맞는다.
9. Decisions
- 신규 빈 페이지는 검정 배경을 사용하고 탭명만 표시한다.
- 신규로 생성되는 파일은 모두
SodaLive/Sources/V2/Main/**아래에 둔다. - 메인 컨테이너는 접근안 B에 따라 신규 구현 후 기존 미니 플레이어, 인증, 팝업 등 필요한 주변 기능을 이관한다.
10. Verification Notes
- 문서 작성 전
SodaLive/Sources/MyPage/MyPageView.swift를 확인해마이탭 재사용 대상을 검증했다. SodaLive/Sources/Main/Home/HomeView.swift,HomeViewModel.swift,BottomTabView.swift,TabButton.swift를 확인해 현재 메인/탭 구조를 검증했다.SodaLive/Sources/App/AppState.swift,AppStep.swift,ContentView.swift를 확인해.main라우팅과 전역 내비게이션 구조를 검증했다.SodaLive/Resources/Assets.xcassets검색으로ic_nav_home(_selected),ic_nav_content(_selected),ic_nav_chat(_selected),ic_nav_my,ic_tabbar_my_selected존재와ic_nav_my_selected부재를 확인했다.SodaLive/Sources/I18n/I18n.swift를 확인해I18n.Main.Tab.content가 아직 없음을 확인했다.