docs(content): 메인 콘텐츠 추천 탭 문서를 추가한다

docs/20260623_메인_콘텐츠_추천_탭/plan-task.md

@@ -0,0 +1,464 @@
+# 메인 콘텐츠 추천 탭 구현 계획/TASK
+
+> **For agentic workers:** 각 단계는 체크박스(`- [ ]`)로 추적하고, 완료 즉시 `- [x]`로 갱신한다. 구현 범위 변경이 생기면 이 문서를 먼저 수정한 뒤 코드에 반영한다.
+
+**Goal:** `GET /api/v2/audio/recommendations` 응답을 기반으로 메인 콘텐츠 탭 내부 `추천` 탭에 배너, 오리지널 시리즈, 최신/New&Hot/무료/포인트/댓글/추천 오디오 섹션을 표시한다.
+
+**Architecture:** 메인 콘텐츠 추천 탭의 Fragment/ViewModel/API/Repository/DTO/UI model/mapper/adapter는 `kr.co.vividnext.sodalive.v2.main.content` 하위에 둔다. 기존 `ContentMainFragment`는 해당 패키지로 이동하고, `MainV2Activity`는 이동된 Fragment를 참조한다. 화면은 XML View + ViewBinding + RecyclerView 기반으로 구성하며, 기존 V2 배너/오디오 카드/태그 위젯은 재사용하고 맞지 않는 섹션만 최소 신규 item view를 만든다.
+
+**Tech Stack:** Kotlin, Android XML Views, ViewBinding, RecyclerView, Retrofit, Gson, RxJava3, Koin, JUnit4/Robolectric local unit test.
+
+---
+
+## 전제와 성공 기준
+- PRD: `docs/20260623_메인_콘텐츠_추천_탭/prd.md`
+- Figma 전체 화면: `cont_001` `24:6737`
+- API endpoint는 `GET /api/v2/audio/recommendations`이다.
+- 기본 패키지는 `kr.co.vividnext.sodalive.v2.main.content.*`이다.
+- 기존 `ContentMainFragment`는 `kr.co.vividnext.sodalive.v2.main.content.ContentMainFragment`로 이동한다.
+- Jackson `@JsonProperty`는 사용하지 않고, Gson `@SerializedName` 정책을 따른다.
+- `AudioCardResponse.duration`은 DTO에는 유지하지만 이번 UI에는 표시하지 않는다.
+- title-bar와 tab-bar는 고정하고, 배너부터 하위 콘텐츠만 세로 스크롤한다.
+- title-bar 우측 아이콘은 `ic_bar_cash`, `ic_bar_search`, `ic_bar_storage` 순서로 배치한다.
+- `ic_bar_cash.png`, `ic_bar_search.png`, `ic_bar_storage.png`는 `app/src/main/res/drawable-mdpi/`의 drawable을 사용한다.
+- 이번 범위에서 `추천 시리즈`, `키워드의 오디오` 섹션은 만들지 않는다.
+- 각 API 리스트가 비어 있으면 해당 섹션 전체를 숨긴다.
+- 구현 완료 후 최소 다음 명령을 실행한다.
+  - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.main.content.*"`
+  - `./gradlew :app:mergeDebugResources`
+  - `./gradlew :app:compileDebugKotlin`
+  - `./gradlew :app:ktlintCheck`
+  - `git diff --check`
+
+---
+
+## Figma 참조 필요 Phase
+- Phase 1: 제한 참조
+  - 기존 Main V2, DI, title-bar, 위젯 구조 확인 중심으로 진행한다.
+- Phase 2: Figma 참조 불필요
+  - API/DTO/Repository/ViewModel 상태 모델은 서버 계약과 기존 V2 홈 추천 패턴을 따른다.
+- Phase 3: 필수 참조
+  - 고정 title-bar/tab-bar와 스크롤 영역 분리는 Figma `24:6738`, `24:6739`, `24:6740`을 기준으로 확인한다.
+- Phase 4: 필수 참조
+  - 배너, `오직 보이스온에서만!`, `새로 올라온 오디오`, `무료 오디오`, `포인트 오디오`, `추천 오디오` 카드 크기/간격을 확인한다.
+- Phase 5: 필수 참조
+  - `New&Hot` 리스트 묶음과 `최근 댓글이 많은 오디오` 댓글 카드 구조를 확인한다.
+- Phase 6: 제한 참조
+  - routing, section visibility, loading/error는 기존 코드 패턴 중심으로 검증한다.
+- Phase 7: 필수 참조
+  - 최종 수동 화면 검증은 PRD의 모든 포함/제외 섹션과 실제 화면을 대조한다.
+
+---
+
+## 파일 구조
+- Move: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/ContentMainFragment.kt` -> `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+  - 메인 콘텐츠 추천 탭 화면 Fragment다.
+- Modify: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/MainV2Activity.kt`
+  - 이동된 `ContentMainFragment` import를 반영한다.
+- Modify: `app/src/main/res/layout/fragment_v2_main_content.xml`
+  - title-bar, 내부 tab-bar, 추천 콘텐츠 scroll container, 섹션별 container/RecyclerView를 구성한다.
+- Create: `app/src/main/res/layout/view_title_bar_content.xml`
+  - `view_title_bar_home.xml` 구조를 기준으로 하되 우측 아이콘을 `ic_bar_cash`, `ic_bar_search`, `ic_bar_storage` 순서로 둔다.
+- Modify: `app/src/main/res/layout/view_audio_content_card.xml`
+  - 기존 사용처에 영향이 없도록 기본 `gone`인 성인 badge view를 추가한다.
+- Modify: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentCardView.kt`
+  - `setAdultVisible(isVisible: Boolean)`을 추가해 신규 content 화면에서만 성인 badge를 표시한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/data/AudioRecommendationsApi.kt`
+  - `GET /api/v2/audio/recommendations` Retrofit endpoint를 정의한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/data/AudioRecommendationsModels.kt`
+  - `AudioRecommendationsResponse`, `AudioBannerResponse`, `OriginalSeriesResponse`, `AudioCardResponse`, `CommentedAudioResponse`를 정의한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/data/AudioRecommendationsRepository.kt`
+  - API 호출을 Repository method로 감싼다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainViewModel.kt`
+  - 추천 데이터 로딩, loading/error/content 상태, toast 상태를 관리한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsUiState.kt`
+  - `Loading`, `Content`, `Empty`, `Error` 상태를 정의한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsUiModels.kt`
+  - 섹션별 UI model과 route model을 정의한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsMappers.kt`
+  - DTO를 UI model로 변환하고, `AudioContentTag` 매핑과 section empty 판단을 담당한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentBannerBinder.kt`
+  - `BannerView`와 `BannerItem` 바인딩 및 이미지 로딩을 담당한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentOriginalSeriesAdapter.kt`
+  - `originalSeries` 가로 목록을 표시한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentAudioCardAdapter.kt`
+  - 최신/무료/포인트/추천 오디오 카드 목록을 공통 처리한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentNewAndHotAdapter.kt`
+  - `New&Hot` 3개 row 단위 가로 묶음 리스트를 처리한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentCommentedAudioAdapter.kt`
+  - 최근 댓글이 많은 오디오 카드와 댓글 영역을 처리한다.
+- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentRecyclerItemLayoutParams.kt`
+  - 가로 section item spacing과 grid spacing helper를 둔다.
+- Create: `app/src/main/res/layout/item_content_original_series.xml`
+  - label 없는 오리지널 시리즈 cover item이다.
+- Create: `app/src/main/res/layout/item_content_audio_card.xml`
+  - `AudioContentCardView` 기반 공통 오디오 카드 item이다.
+- Create: `app/src/main/res/layout/item_content_new_and_hot_group.xml`
+  - 3개 `item_content_audio_list` row를 담는 가로 paging item이다.
+- Create: `app/src/main/res/layout/item_content_audio_list.xml`
+  - 88dp 썸네일 기반 오디오 리스트 row다. 성인 콘텐츠 badge를 기본 `gone`으로 포함한다.
+- Create: `app/src/main/res/layout/item_content_commented_audio.xml`
+  - 오디오 리스트 row와 `latestComment` 댓글 영역을 담는 item이다.
+- Modify: `app/src/main/res/values/strings.xml`, `app/src/main/res/values-en/strings.xml`, `app/src/main/res/values-ja/strings.xml`
+  - 콘텐츠 추천 탭/섹션 문구를 추가한다.
+- Modify: `app/src/main/java/kr/co/vividnext/sodalive/di/AppDI.kt`
+  - API, Repository, ViewModel을 Koin에 등록한다.
+- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/main/content/AudioRecommendationsMapperTest.kt`
+  - DTO -> UI model, 태그, duration 미표시, empty section 정책을 검증한다.
+- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragmentSourceTest.kt`
+  - package 이동, title-bar icon, 제외 섹션 미구현, routing source를 검증한다.
+
+---
+
+### Phase 1: 기존 구조 확인과 작업 경계 고정
+
+- [ ] **Task 1.1: 현재 ContentMainFragment와 MainV2 연결 확인**
+  - 확인:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/ContentMainFragment.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/MainV2Activity.kt`
+    - `app/src/main/res/layout/fragment_v2_main_content.xml`
+  - 작업:
+    - `ContentMainFragment`가 현재 빈 `FrameLayout` 기반임을 확인한다.
+    - `MainV2Activity.changeFragment()`의 `MainV2Tab.CONTENT -> ContentMainFragment()` 연결을 이동 후 import 갱신 대상으로 기록한다.
+  - 검증:
+    - `rg -n "ContentMainFragment|MainV2Tab.CONTENT|fragment_v2_main_content" app/src/main/java app/src/main/res`
+    - 기대 결과: 이동 전/후 참조 지점이 모두 확인된다.
+
+- [ ] **Task 1.2: 재사용 위젯과 신규 item 범위 확정**
+  - 확인:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/banner/BannerView.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/banner/BannerItem.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentCardView.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentCardSize.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentTag.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/SeriesContentCardView.kt`
+    - `app/src/main/res/layout/view_audio_content_card.xml`
+    - `app/src/main/res/layout/view_series_content_card.xml`
+  - 작업:
+    - 배너는 `BannerView`/`BannerItem` 재사용으로 고정한다.
+    - 일반 오디오 카드는 `AudioContentCardView`와 `AudioContentCardSize.Medium/Large` 재사용으로 고정한다.
+    - `오직 보이스온에서만!`은 label 없는 cover만 필요하므로 기존 `SeriesContentCardView`를 직접 변경하지 않고 신규 `item_content_original_series.xml`로 처리한다.
+    - `New&Hot`, `최근 댓글이 많은 오디오`는 Figma 구조가 공통 카드와 달라 신규 item view로 처리한다.
+  - 검증:
+    - PRD의 재사용 후보와 신규 item 범위가 일치하는지 문서상 체크한다.
+
+- [ ] **Task 1.3: title-bar icon asset 확인**
+  - 확인:
+    - `app/src/main/res/drawable-mdpi/ic_bar_cash.png`
+    - `app/src/main/res/drawable-mdpi/ic_bar_search.png`
+    - `app/src/main/res/drawable-mdpi/ic_bar_storage.png`
+    - `app/src/main/res/layout/view_title_bar_home.xml`
+  - 작업:
+    - `view_title_bar_home.xml`은 홈 탭에서 사용 중이므로 직접 수정하지 않는다.
+    - 콘텐츠 탭 전용 `view_title_bar_content.xml`을 생성해 `ic_bar_storage` 요구사항을 격리한다.
+  - 검증:
+    - `rg --files app/src/main/res/drawable-mdpi | rg "ic_bar_(cash|search|storage)\\.png$"`
+    - 기대 결과: 3개 파일이 모두 출력된다.
+
+---
+
+### Phase 2: API, DTO, Repository, DI, ViewModel 계약 추가
+
+- [ ] **Task 2.1: API/DTO/Repository 파일 생성**
+  - 생성:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/data/AudioRecommendationsApi.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/data/AudioRecommendationsModels.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/data/AudioRecommendationsRepository.kt`
+  - 작업:
+    - `AudioRecommendationsApi.getRecommendations(@Header("Authorization") authHeader: String)`를 `@GET("/api/v2/audio/recommendations")`로 추가한다.
+    - DTO에는 PRD의 모든 response class를 추가한다.
+    - Gson `@SerializedName`을 사용하고 Jackson `@JsonProperty`는 쓰지 않는다.
+    - Repository는 기존 V2 홈 추천 Repository처럼 Retrofit `Single<ApiResponse<AudioRecommendationsResponse>>`를 그대로 반환한다.
+  - 검증 명령:
+    - `./gradlew :app:compileDebugKotlin`
+  - 기대 결과:
+    - 신규 data layer 파일이 컴파일된다.
+
+- [ ] **Task 2.2: UI model과 mapper RED 테스트 작성**
+  - 생성:
+    - `app/src/test/java/kr/co/vividnext/sodalive/v2/main/content/AudioRecommendationsMapperTest.kt`
+  - 테스트 케이스:
+    - `price == 0`이면 `AudioContentTag.Free`가 포함된다.
+    - `isPointAvailable == true`이면 `AudioContentTag.Point`가 포함된다.
+    - `isFirstContent == true`이면 `AudioContentTag.First`가 포함된다.
+    - `isOriginalSeries == true`이면 `AudioContentTag.Original`이 포함된다.
+    - `isAdult == true`이면 UI model의 `showAdultBadge`가 true다.
+    - `duration`은 UI model에 노출되지 않는다.
+    - 빈 리스트 섹션은 `isVisible == false` 또는 빈 section으로 매핑된다.
+    - `latestComment`가 blank이면 댓글 section item의 댓글 영역 표시 flag가 false다.
+  - 검증 명령:
+    - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.main.content.AudioRecommendationsMapperTest"`
+  - 기대 결과:
+    - mapper 구현 전 실패한다.
+
+- [ ] **Task 2.3: UI model과 mapper 구현**
+  - 생성:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsUiState.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsUiModels.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsMappers.kt`
+  - 작업:
+    - `AudioRecommendationSection<T>` 또는 섹션별 UI model을 정의한다.
+    - `AudioCardResponse`를 공통 `ContentAudioCardUiModel`로 변환한다.
+    - `duration`은 UI model 필드에 넣지 않는다.
+    - `isAdult`는 `showAdultBadge` 필드로 변환한다.
+    - `CommentedAudioResponse.latestComment`는 댓글 표시용 model에 넣는다.
+    - `AudioBannerResponse`는 `BannerItem` 또는 `ContentBannerUiModel`로 변환한다.
+    - `OriginalSeriesResponse`는 `ContentOriginalSeriesUiModel(seriesId, coverImageUrl)`로 변환한다.
+  - 검증 명령:
+    - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.main.content.AudioRecommendationsMapperTest"`
+  - 기대 결과:
+    - mapper 테스트가 PASS한다.
+
+- [ ] **Task 2.4: ViewModel과 DI 등록**
+  - 생성:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainViewModel.kt`
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/di/AppDI.kt`
+  - 작업:
+    - `ContentMainViewModel`에 `recommendationsStateLiveData`, `isLoading`, `toastLiveData`, `loadRecommendations()`를 추가한다.
+    - API success + data 존재 시 `AudioRecommendationsUiState.Content`를 emit한다.
+    - success지만 모든 섹션이 비면 `AudioRecommendationsUiState.Empty`로 처리한다.
+    - error/Throwable은 기존 V2 홈 추천 ViewModel 패턴을 참고해 toast/error 상태로 처리한다.
+    - `AppDI.networkModule`에 `AudioRecommendationsApi`, `repositoryModule`에 `AudioRecommendationsRepository`, `viewModelModule`에 `ContentMainViewModel`을 등록한다.
+  - 검증 명령:
+    - `./gradlew :app:compileDebugKotlin`
+  - 기대 결과:
+    - Koin 등록과 ViewModel 생성이 컴파일된다.
+
+---
+
+### Phase 3: Fragment 이동, 고정 상단 UI, 기본 레이아웃 작성
+
+- [ ] **Task 3.1: ContentMainFragment 패키지 이동**
+  - Move:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/ContentMainFragment.kt` -> `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/MainV2Activity.kt`
+  - 작업:
+    - package를 `kr.co.vividnext.sodalive.v2.main.content`로 변경한다.
+    - `MainV2Activity` import를 이동된 Fragment로 갱신한다.
+  - 검증 명령:
+    - `./gradlew :app:compileDebugKotlin`
+  - 기대 결과:
+    - `MainV2Tab.CONTENT`가 이동된 Fragment를 정상 참조한다.
+
+- [ ] **Task 3.2: content 추천 기본 레이아웃 작성**
+  - 수정:
+    - `app/src/main/res/layout/fragment_v2_main_content.xml`
+  - 생성:
+    - `app/src/main/res/layout/view_title_bar_content.xml`
+  - 작업:
+    - root는 vertical 구조와 black background를 유지한다.
+    - 상단에는 `view_title_bar_content.xml`을 include한다.
+    - `view_title_bar_content.xml`은 `ic_bar_cash`, `ic_bar_search`, `ic_bar_storage`를 순서대로 표시한다.
+    - title-bar 아래에는 `@layout/view_text_tab_bar`를 include한다.
+    - tab-bar 아래에는 세로 scroll container를 배치한다.
+    - scroll container 내부에 배너, 오리지널 시리즈, 최신 오디오, New&Hot, 무료 오디오, 포인트 오디오, 최근 댓글, 추천 오디오 section container를 순서대로 배치한다.
+    - `추천 시리즈`, `키워드의 오디오` section container는 만들지 않는다.
+  - 검증 명령:
+    - `./gradlew :app:mergeDebugResources`
+  - 기대 결과:
+    - ViewBinding class가 생성되고 resource merge가 PASS한다.
+
+- [ ] **Task 3.3: title-bar와 tab-bar 바인딩**
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+    - `app/src/main/res/values/strings.xml`
+    - `app/src/main/res/values-en/strings.xml`
+    - `app/src/main/res/values-ja/strings.xml`
+  - 작업:
+    - 내부 tab-bar 메뉴는 `추천`을 첫 번째로 두고 selected index를 0으로 설정한다.
+    - 이번 범위에서는 다른 내부 탭 선택 시 화면 전환을 구현하지 않는다.
+    - title-bar 우측 icon 순서를 `ic_bar_cash`, `ic_bar_search`, `ic_bar_storage`로 맞춘다.
+    - 콘텐츠 추천 섹션 title string을 추가한다.
+  - 검증 명령:
+    - `./gradlew :app:mergeDebugResources`
+    - `./gradlew :app:compileDebugKotlin`
+  - 기대 결과:
+    - 문자열과 title-bar drawable 참조가 모두 resolve된다.
+
+---
+
+### Phase 4: 배너, 오리지널 시리즈, 공통 오디오 카드 섹션 구현
+
+- [ ] **Task 4.1: 배너 binder 구현**
+  - 생성:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentBannerBinder.kt`
+  - 작업:
+    - `BannerView.setItems()`로 `banners`를 바인딩한다.
+    - 이미지 로딩은 기존 `HomeBannerBinder`처럼 `ImageView.loadUrl()`을 사용한다.
+    - 배너가 비면 배너 section container를 숨긴다.
+    - 배너 클릭은 route model을 통해 event/creator/series/link 우선순위를 기존 홈 배너 정책과 맞춘다.
+  - 검증:
+    - 샘플 또는 API 응답으로 배너가 있을 때 carousel/counter가 보이고, 없을 때 section이 숨겨진다.
+
+- [ ] **Task 4.2: 오리지널 시리즈 adapter 구현**
+  - 생성:
+    - `app/src/main/res/layout/item_content_original_series.xml`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentOriginalSeriesAdapter.kt`
+  - 작업:
+    - `originalSeries`를 가로 RecyclerView로 표시한다.
+    - item은 `163dp x 230dp` cover와 original series tag를 기준으로 구성한다.
+    - label은 표시하지 않는다.
+    - `seriesId <= 0`이면 클릭을 무시한다.
+    - 클릭 시 `SeriesDetailActivity`로 이동하고 `Constants.EXTRA_SERIES_ID`를 전달한다.
+  - 검증:
+    - `originalSeries`가 비면 `오직 보이스온에서만!` 섹션 전체가 숨겨진다.
+
+- [ ] **Task 4.3: 공통 오디오 카드 adapter 구현**
+  - 생성:
+    - `app/src/main/res/layout/item_content_audio_card.xml`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentAudioCardAdapter.kt`
+  - 수정:
+    - `app/src/main/res/layout/view_audio_content_card.xml`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentCardView.kt`
+  - 작업:
+    - `view_audio_content_card.xml`의 thumbnail container 우측 상단에 기본 `gone`인 adult badge를 추가한다.
+    - `AudioContentCardView`에 `setAdultVisible(isVisible: Boolean)`을 추가하고 기존 호출부 기본 동작은 변경하지 않는다.
+    - `AudioContentCardView`를 inflate한다.
+    - `latestAudios`, `freeAudios`, `pointAudios`에는 `AudioContentCardSize.Medium`을 사용한다.
+    - `recommendedAudios`에는 `AudioContentCardSize.Large`를 사용한다.
+    - `setContent(title, creatorNickname)`와 `setTags(tags)`를 사용한다.
+    - `showAdultBadge`는 `setAdultVisible(showAdultBadge)`로 표시한다.
+    - `duration`은 표시하지 않는다.
+    - 이미지 로딩은 `thumbnailView().loadUrl(imageUrl)`을 사용한다.
+    - 클릭 시 `AudioContentDetailActivity`로 이동하고 `Constants.EXTRA_AUDIO_CONTENT_ID`를 전달한다.
+  - 검증:
+    - 무료/포인트/첫 콘텐츠/오리지널 태그 조합이 mapper 테스트와 화면에서 일치한다.
+
+- [ ] **Task 4.4: 최신/무료/포인트/추천 섹션 Fragment 바인딩**
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+    - `app/src/main/res/layout/fragment_v2_main_content.xml`
+  - 작업:
+    - 최신/무료/포인트 RecyclerView는 horizontal layout manager를 사용한다.
+    - 추천 오디오 RecyclerView는 2열 grid layout manager를 사용한다.
+    - 각 section은 item list가 비면 title과 list를 함께 숨긴다.
+    - 추천 오디오 홀수 item은 마지막 item이 좌측 정렬되도록 기본 GridLayoutManager 정책을 사용한다.
+  - 검증:
+    - `latestAudios`, `freeAudios`, `pointAudios`, `recommendedAudios` 각각의 empty/non-empty 상태를 수동 확인한다.
+
+---
+
+### Phase 5: New&Hot와 최근 댓글 섹션 구현
+
+- [ ] **Task 5.1: New&Hot group adapter 구현**
+  - 생성:
+    - `app/src/main/res/layout/item_content_new_and_hot_group.xml`
+    - `app/src/main/res/layout/item_content_audio_list.xml`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentNewAndHotAdapter.kt`
+  - 작업:
+    - `newAndHotAudios`를 3개 단위 group으로 chunking한다.
+    - group item은 세로로 최대 3개 `item_content_audio_list` row를 표시한다.
+    - 각 row는 88dp 썸네일, 제목, 크리에이터명, 태그를 표시한다.
+    - `showAdultBadge == true`인 row는 우측 상단 성인 badge를 표시한다.
+    - 마지막 group이 3개 미만이면 빈 row를 만들지 않는다.
+    - 클릭 시 오디오 상세로 이동한다.
+  - 검증:
+    - item 수 1, 2, 3, 4, 6개 샘플에서 group 수와 row 수가 의도대로 보인다.
+
+- [ ] **Task 5.2: 최근 댓글이 많은 오디오 adapter 구현**
+  - 생성:
+    - `app/src/main/res/layout/item_content_commented_audio.xml`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ui/ContentCommentedAudioAdapter.kt`
+  - 작업:
+    - `mostCommentedAudios`를 가로 RecyclerView로 표시한다.
+    - 각 item에는 88dp 오디오 썸네일 row와 댓글 영역을 표시한다.
+    - 댓글 영역에는 `latestComment`를 표시한다.
+    - `latestComment`가 blank이면 댓글 영역을 숨긴다.
+    - `latestCommentWriterProfileImageUrl`은 댓글 작성자 프로필 이미지로 로딩한다.
+    - 클릭 시 오디오 상세로 이동한다.
+  - 검증:
+    - 댓글 본문이 있는 item은 댓글 영역이 보이고, blank 댓글 item은 댓글 영역이 숨겨진다.
+
+- [ ] **Task 5.3: New&Hot와 댓글 섹션 Fragment 바인딩**
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+    - `app/src/main/res/layout/fragment_v2_main_content.xml`
+  - 작업:
+    - `New&Hot`는 horizontal group RecyclerView로 바인딩한다.
+    - `최근 댓글이 많은 오디오`는 horizontal card RecyclerView로 바인딩한다.
+    - 각 section은 item list가 비면 전체를 숨긴다.
+  - 검증:
+    - Figma 순서상 `New&Hot`가 최신 오디오 뒤, 무료 오디오 앞에 배치되는지 확인한다.
+    - `최근 댓글이 많은 오디오`가 포인트 오디오 뒤, 추천 오디오 앞에 배치되는지 확인한다.
+
+---
+
+### Phase 6: 실제 API 상태 바인딩, routing, 제외 섹션 검증
+
+- [ ] **Task 6.1: ViewModel observe와 실제 API 로딩 연결**
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+  - 작업:
+    - `ContentMainViewModel`을 Koin으로 주입한다.
+    - `onViewCreated()`에서 adapters, title/tab bar, observers를 설정한다.
+    - 최초 진입 시 `loadRecommendations()`를 호출한다.
+    - `Loading`은 기존 V2 홈 추천의 `LoadingDialog` 패턴을 참고한다.
+    - `Content`는 모든 section bind method에 전달한다.
+    - `Error` 또는 전체 empty는 기존 정책에 맞춰 빈 콘텐츠 또는 toast를 표시한다.
+  - 검증:
+    - API 성공/실패를 개발 환경에서 확인하거나 ViewModel 테스트로 상태 전환을 확인한다.
+
+- [ ] **Task 6.2: routing source test 작성**
+  - 생성:
+    - `app/src/test/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragmentSourceTest.kt`
+  - 테스트 케이스:
+    - `ContentMainFragment` package가 `kr.co.vividnext.sodalive.v2.main.content`인지 검증한다.
+    - `MainV2Activity`가 이동된 `ContentMainFragment`를 import하는지 검증한다.
+    - `fragment_v2_main_content.xml` 또는 content title bar가 `ic_bar_cash`, `ic_bar_search`, `ic_bar_storage`를 참조하는지 검증한다.
+    - `추천 시리즈`, `키워드의 오디오` 관련 section id/string이 추가되지 않았는지 검증한다.
+    - 오디오 상세 이동이 `AudioContentDetailActivity`와 `Constants.EXTRA_AUDIO_CONTENT_ID`를 사용하는지 검증한다.
+    - 시리즈 상세 이동이 `SeriesDetailActivity`와 `Constants.EXTRA_SERIES_ID`를 사용하는지 검증한다.
+  - 검증 명령:
+    - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.main.content.ContentMainFragmentSourceTest"`
+  - 기대 결과:
+    - 구현 전 실패하고, Phase 6 완료 후 PASS한다.
+
+- [ ] **Task 6.3: 배너 routing 구현**
+  - 수정:
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/model/AudioRecommendationsUiModels.kt`
+    - `app/src/main/java/kr/co/vividnext/sodalive/v2/main/content/ContentMainFragment.kt`
+  - 작업:
+    - 기존 `HomeRecommendationBannerRoute` 정책을 참고해 `eventItem`, `creatorId`, `seriesId`, `link` 순서 또는 기존 우선순위를 그대로 적용한다.
+    - `creatorId > 0`이면 `CreatorChannelActivity.newIntent(requireContext(), creatorId)`로 이동한다.
+    - `seriesId > 0`이면 `SeriesDetailActivity`로 이동한다.
+    - `link`는 기존 홈 배너 route 변환 정책을 확인해 동일하게 처리한다.
+    - 목적지가 없으면 클릭을 무시한다.
+  - 검증:
+    - 목적지별 배너 샘플로 intent extras가 의도대로 들어가는지 확인한다.
+
+---
+
+### Phase 7: 통합 검증과 문서 검증 기록
+
+- [ ] **Task 7.1: 단위 테스트와 리소스/컴파일 검증**
+  - 실행:
+    - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.main.content.*"`
+    - `./gradlew :app:mergeDebugResources`
+    - `./gradlew :app:compileDebugKotlin`
+    - `./gradlew :app:ktlintCheck`
+    - `git diff --check`
+  - 기대 결과:
+    - 모든 명령이 PASS한다.
+  - 검증 기록:
+    - 구현 후 실행 명령, 결과, 실패 시 수정 내용을 이 Task 아래에 누적 기록한다.
+
+- [ ] **Task 7.2: 수동 UI 검증**
+  - 확인:
+    - title-bar와 tab-bar가 스크롤 중 고정된다.
+    - 스크롤 영역은 배너부터 시작한다.
+    - 섹션 순서는 배너 → 오직 보이스온에서만! → 새로 올라온 오디오 → New&Hot → 무료 오디오 → 포인트 오디오 → 최근 댓글이 많은 오디오 → 추천 오디오다.
+    - `추천 시리즈`, `키워드의 오디오`는 표시되지 않는다.
+    - 각 section의 empty 상태에서 빈 title/list 공간이 남지 않는다.
+    - `duration`은 어떤 오디오 카드에도 표시되지 않는다.
+    - 태그는 `price`, `isPointAvailable`, `isFirstContent`, `isOriginalSeries` 정책과 일치한다.
+    - 성인 badge는 `isAdult` 정책과 일치한다.
+    - 배너, 오디오, 시리즈 item 클릭 routing이 의도대로 동작한다.
+  - 검증 기록:
+    - 기기/에뮬레이터, 화면 크기, 확인 결과를 이 Task 아래에 기록한다.
+
+---
+
+## Verification Log
+- 구현 중 여러 Phase에 걸친 통합 검증, 회귀 검증, 최종 수동 확인 기록을 여기에 누적한다.