feat(creator): 라이브 탭 UI를 마무리한다
This commit is contained in:
@@ -50,8 +50,8 @@ Figma 참조:
|
||||
|
||||
## 6. User Stories
|
||||
- 사용자는 크리에이터 채널 라이브 탭에서 현재 진행 중인 라이브가 있으면 상단에서 바로 확인하고 싶다.
|
||||
- 사용자는 라이브 다시듣기 전체 개수와 현재 정렬 기준을 확인하고 싶다.
|
||||
- 사용자는 최신순, 인기순, 소장순, 가격 높은 순, 가격 낮은 순으로 다시듣기 목록을 정렬하고 싶다.
|
||||
- 사용자는 라이브 다시듣기 현재 정렬 기준을 확인하고 싶다.
|
||||
- 사용자는 최신순, 인기순, 가격 높은 순, 가격 낮은 순으로 다시듣기 목록을 정렬하고 싶다.
|
||||
- 사용자는 목록을 아래로 스크롤하면 다음 페이지가 자동으로 이어서 로드되기를 기대한다.
|
||||
- 사용자는 다시듣기 item에서 무료, 가격, 포인트 사용 가능, 19금, 소장중, 대여중 상태를 구분하고 싶다.
|
||||
- 크리에이터는 본인 채널의 라이브 탭에서 하단 고정 버튼으로 라이브 시작 화면에 빠르게 진입하고 싶다.
|
||||
@@ -99,7 +99,6 @@ data class CreatorChannelAudioContentResponse(
|
||||
enum class ContentSort {
|
||||
LATEST,
|
||||
POPULAR,
|
||||
OWNED,
|
||||
PRICE_HIGH,
|
||||
PRICE_LOW
|
||||
}
|
||||
@@ -120,7 +119,6 @@ struct CreatorChannelLiveTabResponse: Decodable {
|
||||
enum ContentSort: String, Decodable, CaseIterable {
|
||||
case latest = "LATEST"
|
||||
case popular = "POPULAR"
|
||||
case owned = "OWNED"
|
||||
case priceHigh = "PRICE_HIGH"
|
||||
case priceLow = "PRICE_LOW"
|
||||
}
|
||||
@@ -135,27 +133,25 @@ enum ContentSort: String, Decodable, CaseIterable {
|
||||
- 동일 화면 생명주기에서 같은 `creatorId`, `sort`, 첫 페이지 데이터가 이미 있으면 불필요한 중복 호출을 피한다.
|
||||
- 정렬 변경 시 첫 페이지부터 다시 조회하고, 조회 성공 시에만 기존 `liveReplayContents`를 새 정렬 결과로 교체한다.
|
||||
- API 실패 시 크리에이터 채널 공통 shell은 유지하고, 이미 표시 중인 `liveReplayContents`는 유지한 채 기존 V2 패턴의 오류/빈 상태를 표시한다.
|
||||
- `liveReplayContentCount == 0`이고 `currentLive == nil`이면 sort-bar의 전체 개수는 `0`으로 표시하고 목록 empty state를 표시한다.
|
||||
- `liveReplayContentCount == 0`이고 `currentLive == nil`이면 목록 empty state를 표시한다.
|
||||
|
||||
### 7.3 Sort-bar
|
||||
- 생성 위치: `SodaLive/Sources/V2/CreatorChannel/Components/**`
|
||||
- sort-bar는 좌측에 전체 개수, 우측에 현재 정렬명과 아래 방향 아이콘을 표시한다.
|
||||
- sort-bar는 현재 정렬명과 아래 방향 아이콘을 표시한다.
|
||||
- Figma 기준 높이는 `52pt`, 좌우 horizontal padding은 기존 `SodaSpacing` 토큰으로 맞춘다.
|
||||
- 전체 개수는 `liveReplayContentCount`를 사용한다.
|
||||
- 문구 `전체`, 정렬명은 `I18n`에 추가한다.
|
||||
- sort-bar는 다른 탭에서도 재사용 가능하도록 `totalCount`, `selectedSort`, `availableSorts`, `onTapSort` 같은 일반화된 입력을 받는다.
|
||||
- 정렬명은 `I18n`에 추가한다.
|
||||
- sort-bar는 다른 탭에서도 재사용 가능하도록 `selectedSort`, `availableSorts`, `onTapSort` 같은 일반화된 입력을 받는다.
|
||||
- 이번 범위에서는 Figma의 `리스트형` view mode 옵션은 사용하지 않는다.
|
||||
|
||||
### 7.4 정렬 선택 UI
|
||||
- 정렬 선택 UI는 BottomSheet 방식으로 구현한다.
|
||||
- 선택 사유:
|
||||
- 모바일 한 손 조작에서 화면 하단 sheet가 우측 상단 anchored menu보다 터치 접근성이 좋다.
|
||||
- 정렬 옵션이 5개이고 이후 탭별 옵션 추가 가능성이 있어 sheet가 선택 영역과 dismiss 동작을 안정적으로 제공한다.
|
||||
- 정렬 옵션이 4개이고 이후 탭별 옵션 추가 가능성이 있어 sheet가 선택 영역과 dismiss 동작을 안정적으로 제공한다.
|
||||
- iOS/Material 계열 최신 모바일 앱에서 필터/정렬 같은 목록 제어는 sheet 패턴이 일반적이며, context menu는 짧은 보조 action에 더 적합하다.
|
||||
- 정렬 sheet 항목:
|
||||
- `LATEST`: 최신순
|
||||
- `POPULAR`: 인기순
|
||||
- `OWNED`: 소장순
|
||||
- `PRICE_HIGH`: 가격 높은 순
|
||||
- `PRICE_LOW`: 가격 낮은 순
|
||||
- Figma `290:9041`에는 `추천순`이 있으나 API `ContentSort`에 없으므로 구현하지 않는다.
|
||||
@@ -230,8 +226,7 @@ enum ContentSort: String, Decodable, CaseIterable {
|
||||
- 라이브 탭 선택 시 `GET /api/v2/creator-channels/{creatorId}/live?page={page}&size={size}&sort={sort}`가 호출된다.
|
||||
- 기본 sort는 `LATEST`이며 sort-bar에는 `최신순`이 표시된다.
|
||||
- 최초 요청은 `page=0`, `size=20`으로 호출된다.
|
||||
- sort-bar 좌측에 `liveReplayContentCount` 기준 전체 개수가 표시된다.
|
||||
- sort-bar 터치 시 BottomSheet가 표시되고 `LATEST`, `POPULAR`, `OWNED`, `PRICE_HIGH`, `PRICE_LOW` 5개 옵션만 보인다.
|
||||
- sort-bar 터치 시 BottomSheet가 표시되고 `LATEST`, `POPULAR`, `PRICE_HIGH`, `PRICE_LOW` 4개 옵션만 보인다.
|
||||
- 정렬 변경 시 첫 페이지부터 다시 조회되고, 조회 성공 시에만 목록이 새 정렬 결과로 교체된다.
|
||||
- `currentLive != nil`이면 홈 탭과 동일한 현재 라이브 UI가 라이브 탭에 표시된다.
|
||||
- 라이브 다시듣기 item에 가격, 포인트 사용 가능, 19금, 소장중, 대여중 상태가 조건에 맞게 표시된다.
|
||||
|
||||
Reference in New Issue
Block a user