docs(creator): 오디오 탭 공통 UI 재사용 계획을 갱신한다

This commit is contained in:
2026-06-19 17:59:24 +09:00
parent 12a9d9f398
commit 6770dbd682
2 changed files with 108 additions and 74 deletions

View File

@@ -22,13 +22,14 @@
- 최초 조회 시 `themeId` query parameter는 보내지 않는다.
- 응답의 `themes`에는 `전체` 항목이 포함되지 않으므로, 클라이언트가 맨 앞에 `전체` tab을 추가한다.
- 응답의 `themeId == null` 상태는 클라이언트가 추가한 `전체` tab 선택 상태로 표현한다.
- 테마 tab-bar는 v2 공통 `CapsuleTabBarView`를 재사용한다.
- Sort-bar에는 전체 오디오 콘텐츠 수와 현재 정렬 label을 표시한다.
- 정렬 선택 방식과 옵션은 `라이브`과 동일하게 적용한다.
- 정렬 선택 방식과 옵션은 `라이브` 구현을 크리에이터 채널 공통 sort popup으로 rename/move해 재사용한다.
- 소장률 섹션은 내 채널이 아니고 `전체` 테마 선택 상태일 때만 표시한다.
- 소장률 섹션에는 전체 유료 오디오 중 소장한 비율과 `purchasedAudioContentCount/paidAudioContentCount`를 표시한다.
- 내 채널인 경우 소장률 섹션을 숨기고 하단 고정 `오디오 올리기` CTA를 표시한다.
- 오디오 콘텐츠 목록은 기존 라이브 다시듣기 item UI 재사용하되, `seriesName`이 있으면 `duration • seriesName` 형식으로 표시한다.
- `seriesName`이 없으면 시리즈 이름 UI를 숨기고 `duration`만 표시한다.
- 오디오 콘텐츠 목록은 기존 라이브 다시듣기 item UI/adapter를 크리에이터 채널 공통 오디오 콘텐츠 item으로 rename/move해 재사용하되, `seriesName`이 있으면 `duration • seriesName` 형식으로 표시한다.
- `seriesName`이 없으면 공통 secondary text에 `duration`만 표시하고 빈 구분자나 별도 시리즈 영역은 노출하지 않는다.
- 오디오 콘텐츠가 0개이면 오디오 콘텐츠가 있을 때 표시하는 UI를 모두 숨기고 empty 문구만 표시한다.
- 응답의 `hasNext``true`이면 현재 `page + 1` 페이지를 추가 로딩한다.
@@ -134,6 +135,9 @@ data class CreatorChannelAudioThemeResponse(
- `CreatorChannelAudioTabResponse.themeId`가 특정 theme id이면 해당 `themeId`를 가진 서버 테마 tab을 선택 상태로 표시한다.
- 선택된 tab은 Figma처럼 white background와 black text로 표시한다.
- 선택되지 않은 tab은 black background, gray border, white text로 표시한다.
- theme tab-bar는 v2 공통 `CapsuleTabBarView`를 사용한다.
- `CapsuleTabBarView.setMenus()`에는 `CreatorChannelAudioThemeUiModel.title` 목록을 전달하고, 선택 index는 `isSelected == true`인 theme의 index를 사용한다.
- `CapsuleTabBarView.setOnTabSelectedListener`에서 선택 index를 `CreatorChannelAudioThemeUiModel.themeId`로 역매핑해 `themeId`를 결정한다.
- theme tab을 선택하면 `page=0`, 현재 `sort`, 선택한 `themeId`로 API를 다시 조회한다.
- 이미 선택된 theme tab을 다시 선택하면 API를 재호출하지 않는다.
- theme tab-bar는 가로 스크롤을 지원한다.
@@ -153,7 +157,7 @@ Sort-bar는 전체 오디오 콘텐츠 수와 현재 정렬 상태를 표시하
- 우측에는 현재 정렬 label과 정렬 icon을 표시한다.
- 정렬 선택 방식은 `라이브` 탭과 동일하다.
- 정렬 기본값은 `ContentSort.LATEST`이며 label은 한국어 기준 `최신순`이다.
- 정렬 옵션, label, 선택 표시, 메뉴 닫힘 동작은 `라이브` 탭 구현과 동일하게 재사용한다.
- 정렬 옵션, label, 선택 표시, 메뉴 닫힘 동작은 기존 `CreatorChannelLiveSortPopup``CreatorChannelSortPopup`으로 rename/move해 라이브/오디오가 함께 재사용한다.
- 정렬 옵션을 선택하면 `page=0`, 선택된 `sort`, 현재 `themeId`로 API를 다시 조회한다.
- 선택 중인 정렬 옵션을 다시 선택하면 API 재호출 없이 메뉴만 닫는다.
@@ -188,12 +192,12 @@ Sort-bar는 전체 오디오 콘텐츠 수와 현재 정렬 상태를 표시하
#### Requirements
- Figma 콘텐츠 item 기준 노드는 `290:9026`이다.
- `audioContents`를 세로 목록으로 표시한다.
- 각 item은 기존 라이브 다시듣기 item UI, 상태 표시, tag 표시, 가격/재생 CTA 정책을 재사용한다.
- 각 item은 기존 라이브 다시듣기 item UI, adapter, 상태 표시, tag 표시, 가격/재생 CTA 정책을 크리에이터 채널 공통 오디오 콘텐츠 item으로 rename/move해 재사용한다.
- 각 item은 `imageUrl`, `title`, `duration`, `seriesName`을 표시한다.
- `seriesName`이 있으면 secondary text를 `duration • seriesName` 형식으로 표시한다.
- `seriesName`이 없으면 시리즈 이름 UI를 숨기고 `duration`만 표시한다.
- `seriesName`이 없으면 공통 secondary text에 `duration`만 표시하고 빈 구분자나 별도 시리즈 영역은 노출하지 않는다.
- `duration`은 필수 표시 값이며, `duration == null`인 콘텐츠는 목록에서 숨긴다.
- `isAdult`, `isPointAvailable`, `isFirstContent`, `isOriginalSeries`, `price`, `isOwned`, `isRented`는 기존 라이브 다시듣기/오디오 item 정책과 동일하게 매핑한다.
- `isAdult`, `isPointAvailable`, `isFirstContent`, `isOriginalSeries`, `price`, `isOwned`, `isRented`는 기존 라이브 다시듣기 item 정책과 v2 공통 `AudioContentTag`를 재사용해 매핑한다.
- item 터치 시 오디오 콘텐츠 상세 또는 재생 진입은 기존 오디오 콘텐츠 item 정책을 재사용한다.
#### Edge Cases
@@ -242,7 +246,7 @@ Sort-bar는 전체 오디오 콘텐츠 수와 현재 정렬 상태를 표시하
#### Requirements
- Figma 기준 노드는 `665:19008`이다.
- CTA 버튼 표시 방식은 라이브 탭의 `라이브 시작하기` CTA와 동일하게 적용한다.
- CTA 버튼 표시 방식은 라이브 탭의 `라이브 시작하기` CTA 컨테이너를 공통 owner CTA로 rename해 재사용한다.
- 로그인 사용자가 현재 크리에이터 채널의 본인이면 하단 고정 CTA 영역을 표시한다.
- 로그인 사용자가 현재 크리에이터 채널의 본인이 아니면 하단 고정 CTA 영역을 표시하지 않는다.
- 내 채널인 경우 소장률 섹션은 표시하지 않는다.
@@ -251,7 +255,7 @@ Sort-bar는 전체 오디오 콘텐츠 수와 현재 정렬 상태를 표시하
- CTA 버튼 icon은 `ic_new_upload_audio` drawable 리소스를 사용한다.
- CTA가 표시되는 경우 목록 마지막 item 또는 empty 문구가 CTA에 가려지지 않도록 하단 padding 또는 inset을 추가한다.
- Android gesture navigation, soft navigation bar, display cutout 환경에서 CTA가 system navigation 영역과 겹치지 않도록 bottom inset을 반영한다.
- 버튼 터치 시 기존 또는 신규 오디오 업로드 진입 플로우로 이동한다. 업로드 화면 내부 구현은 이번 PRD 범위에서 제외한다.
- 버튼 터치 시 기존 `onOwnerFabAudioClicked()``AudioContentUploadActivity` 진입 경로를 재사용한다. 업로드 화면 내부 구현은 이번 PRD 범위에서 제외한다.
#### Edge Cases
- 본인 여부 판정 데이터가 아직 로딩 중이면 CTA를 먼저 노출하지 않는다.
@@ -294,9 +298,11 @@ Figma 섹션 기준으로 구현 계획/TASK 문서를 작성할 때 아래 단
- 신규 `Activity`, `Fragment`, `ViewModel` 및 연결된 하위 코드는 `kr.co.vividnext.sodalive.v2` 패키지 하위에 작성한다.
- 기존 크리에이터 채널 컨테이너, 탭 전환, sticky 동작을 불필요하게 재설계하지 않는다.
- 기존 `ContentSort``CreatorChannelAudioContentResponse`를 재사용한다.
- 정렬 메뉴는 라이브 탭과 동일한 구현/리소스/문자열 매핑을 우선 재사용한다.
- 내 채널 하단 CTA는 라이브 탭 CTA 구현/레이아웃/inset 처리 방식을 우선 재사용한다.
- 이미지 placeholder, 가격/포인트/무료/소장중/대여중/19금/original tag 표시 정책은 기존 라이브 다시듣기 및 오디오 item 구현과 맞춘다.
- 테마 tab-bar는 v2 공통 `CapsuleTabBarView`를 재사용하고 별도 theme adapter/item layout을 만들지 않는다.
- 정렬 메뉴는 기존 라이브 탭 sort popup 구현/리소스/문자열 매핑을 크리에이터 채널 공통 이름으로 rename/move해 재사용한다.
- 내 채널 하단 CTA는 라이브 탭 CTA 구현/레이아웃/inset 처리 방식을 공통 owner CTA로 rename해 재사용한다.
- 오디오 콘텐츠 item은 기존 라이브 다시듣기 item layout/adapter/model/status를 크리에이터 채널 공통 오디오 콘텐츠 item으로 rename/move해 재사용한다.
- 이미지 placeholder, 가격/포인트/무료/소장중/대여중/19금/original tag 표시 정책은 기존 라이브 다시듣기 item 구현과 v2 공통 `AudioContentTag`를 따른다.
- API 실패, retry, pagination 실패 표시는 기존 프로젝트 패턴을 구현 계획 단계에서 확인해 따른다.
---