feat(creator-channel): 홈 빈 상태 동작을 보강한다

This commit is contained in:
Yu Sung
2026-08-14 18:41:04 +09:00
parent 2203fc9089
commit 6db26c55a8
7 changed files with 183 additions and 16 deletions

View File

@@ -41,6 +41,7 @@ Figma 전체 화면 기준 공통 shell은 아래를 따른다.
- 후속 UI 보정(2026-07-20): 채널 홈 후원 섹션의 카드 너비가 `374pt`로 고정되어 있어 디바이스 너비가 `402pt`보다 작은 화면에서는 기준 디자인과 같은 비율을 유지하지 못한다.
- 후속 연결(2026-08-03): 내 채널의 헤더 팔로워 수(`팔로워 n명`)는 표시만 되고 있어, 사용자가 자신을 팔로우하는 유저 목록으로 바로 이동할 수 없다.
- 후속 누락(2026-08-14): 다른 크리에이터 채널의 title bar 더보기 버튼은 표시되지만 `CreatorChannelView.titleBar``onTapMore`가 빈 closure라 사용자 차단/신고 메뉴가 열리지 않는다.
- 후속 누락(2026-08-14): 홈 탭의 후원 empty 문구가 한국어로 하드코딩되어 있고, 팬레터가 없으면 섹션 전체가 숨겨져 사용자가 첫 후원·팬레터 작성 방법을 확인할 수 없다.
## 3. Goals
- `creatorId``GET /api/v2/creator-channels/{creatorId}/home`을 호출하고 응답 데이터로 크리에이터 채널 공통 shell과 홈 탭 콘텐츠를 구성한다.
@@ -56,7 +57,7 @@ Figma 전체 화면 기준 공통 shell은 아래를 따른다.
- title bar는 `isFollow`, `isNotify` 상태에 따라 Figma의 Unfollow, Follow+알림 설정, Follow+알림 해제 상태를 표시한다.
- 홈 tab 외 tab-bar 항목 및 홈 섹션의 전체보기 destination은 placeholder 형태로 먼저 연결한다.
- V2 하위의 재사용 가능한 공용 컴포넌트는 우선 재사용한다.
- 빈 섹션은 section title과 empty state를 표시하지 않고 숨긴다.
- 빈 섹션은 기본적으로 숨기되, 채널 후원과 팬레터는 지정된 다국어 empty state를 표시다.
- 크리에이터 채널의 라이브 예약 스케줄 항목을 누르면 현재 채널 화면 위에 기존 `LiveDetailView`가 즉시 표시되고, 닫으면 같은 채널 화면으로 돌아온다.
- `.liveReplay` 스케줄 항목을 누르면 `targetId`를 콘텐츠 ID로 사용해 `.audio`와 동일한 기존 오디오 콘텐츠 상세 페이지로 이동한다.
- 이미 종료된 라이브의 `LiveDetailView`를 열면 `이미 종료된 라이브 입니다.` 토스트를 표시하고 `LiveDetailView`/DIM overlay를 닫아 진입 전 화면을 유지한다.
@@ -156,7 +157,7 @@ struct CreatorChannelHomeResponse: Decodable {
- API 실패 시에는 전체 화면 error state로 전환하지 않고 placeholder 기반으로 일부 UI를 유지한다.
- API 실패 placeholder는 title bar, tab-bar, 홈 외 tab placeholder destination처럼 서버 데이터 없이 표시 가능한 공통 shell을 유지하는 방식으로 처리한다.
- 선택된 tab 상태와 홈 API 호출 상태는 공통 shell의 ViewModel에서 관리한다.
- 응답을 성공적으로 받은 뒤 각 섹션은 자신의 데이터가 비어 있으면 section title과 empty state를 표시하지 않고 섹션 전체를 숨긴다.
- 응답을 성공적으로 받은 뒤 각 섹션은 자신의 데이터가 비어 있으면 기본적으로 숨긴다. 채널 후원과 팬레터는 예외로 section title과 지정된 empty state를 표시다.
- 동일 화면 생명주기 안에서 불필요한 중복 호출은 피한다.
- pull-to-refresh가 기존 크리에이터 상세 화면에 있다면 같은 패턴을 검토한다. 기존 패턴이 없으면 이번 범위에서 새로 추가하지 않는다.
@@ -255,7 +256,12 @@ Figma 참조:
- `channelDonations`를 사용해 채널 후원 요약 목록을 표시한다.
- 각 item은 `nickname`, `profileImageUrl`, `can`, `message`, `createdAtUtc`를 표시한다.
- `channelDonations`가 비어 있으면 채널 후원 섹션을 숨긴다.
- `channelDonations`가 비어 있으면 채널 후원 섹션과 empty card를 표시한다.
- Empty 문구는 아래 언어별 값을 사용한다. `\n`은 명시적 줄바꿈이다.
- 한국어: `처음으로 크리에이터를\n후원해 보세요!`
- 영어: `Be the first to\nsupport this creator!`
- 일본어: `最初のサポートをしてみましょう!`
- Empty card의 후원 버튼 문구는 신규 키를 만들지 않고 기존 `I18n.ContentDetail.DonationDialog.title`을 재사용한다.
- 전체보기 action은 기존 `AppStep.channelDonationAll(creatorId:)` 또는 동일한 기존 흐름이 있으면 연결한다.
- 기존 흐름 연결이 어렵다면 후원 tab placeholder로 이동한다.
- 카드 너비는 기준 디바이스 너비 `402pt`, 최대 카드 너비 `374pt`를 사용한다.
@@ -319,7 +325,18 @@ Figma 참조:
### 7.15 팬Talk 섹션
- `fanTalk.totalCount``fanTalk.latestFanTalk`를 사용한다.
- `latestFanTalk == nil`이면 팬Talk 섹션을 숨긴다.
- `latestFanTalk == nil`이면 팬레터 섹션과 후원 empty card와 동일한 구조의 empty card를 표시한다.
- Empty 문구는 아래 언어별 값을 사용한다. `\n`은 명시적 줄바꿈이다.
- 한국어: `당신의 첫 응원을\n기다리고 있어요!`
- 영어: `We're waiting for\nyour first fan letter!`
- 일본어: `あなたの最初のファンレターを待っています!`
- Empty card에는 아래 언어별 팬레터 작성 버튼을 표시한다.
- 한국어: `응원남기기`
- 영어: `Send a fan letter`
- 일본어: `ファンレターを送る`
- 후원·팬레터 empty card의 CTA는 `Color.white` 배경과 black 아이콘·텍스트를 사용한다.
- 팬레터 작성 버튼은 기존 팬레터 작성 화면으로 연결한다.
- 내 크리에이터 채널에서는 empty card를 유지하되 팬레터 작성 버튼을 숨긴다.
- 최신 팬Talk가 있으면 `nickname`, `profileImageUrl`, `content`, `languageCode`, `createdAtUtc`를 표시한다.
- 전체보기 action은 크리에이터 채널의 팬Talk 탭으로 이동한다.
@@ -388,6 +405,8 @@ Figma 참조:
- 신규 asset은 프로젝트 asset catalog에 이미 존재하는 `ic_new_talk`을 사용한다. `ic_new_dm`은 추후 DM 버튼 작업에서 사용한다.
- title bar 아이콘은 프로젝트 asset catalog의 `ic_new_bar_back`, `ic_new_follow`, `ic_new_following`, `ic_new_more`, `ic_bar_bell`, `ic_bar_bell_colored`를 사용한다.
- 신규 문구가 다국어 대상이면 `SodaLive/Sources/I18n/I18n.swift`에 추가한다.
- 이번 후속 empty 문구와 팬레터 작성 버튼은 `pick(ko:en:ja:)`로 관리하며 View에 언어별 문구를 직접 작성하지 않는다.
- 홈 후원 empty 버튼은 기존 `I18n.ContentDetail.DonationDialog.title`을 재사용하고 중복 후원 버튼 문구를 추가하지 않는다.
- Figma에서 제공되는 localhost asset URL은 앱 코드에 넣지 않는다.
- 프로젝트 설정 변경은 신규 파일이 Xcode project에 자동 포함되지 않는 구조일 때만 수행한다.
- Kotlin `Long`으로 정의된 id/count 계열 값은 Swift에서 `Int`로 통일한다.
@@ -418,7 +437,13 @@ Figma 참조:
- tab-bar 아래 콘텐츠는 선택된 tab에 따라 교체된다.
- 홈 tab에는 현재 라이브, 최신 오디오 콘텐츠, 채널 후원, 공지, 스케줄, 오디오, 시리즈, 커뮤니티, 팬Talk, 소개, 활동, SNS 섹션이 API 데이터 기반으로 표시된다.
- SNS 섹션은 `ic_sns_*` asset 아이콘과 유효한 SNS URL만 사용해 표시된다.
- 데이터가 비어 있는 섹션은 표시되지 않는다.
- 데이터가 비어 있는 섹션은 기본적으로 표시되지 않지만, 채널 후원과 팬레터는 지정된 empty state를 표시한다.
- 홈 후원 empty 문구가 한국어 `처음으로 크리에이터를\n후원해 보세요!`, 영어 `Be the first to\nsupport this creator!`, 일본어 `最初のサポートをしてみましょう!`로 표시된다.
- 홈 팬레터 empty 문구가 한국어 `당신의 첫 응원을\n기다리고 있어요!`, 영어 `We're waiting for\nyour first fan letter!`, 일본어 `あなたの最初のファンレターを待っています!`로 표시된다.
- 홈 팬레터 empty card의 작성 버튼은 한국어 `응원남기기`, 영어 `Send a fan letter`, 일본어 `ファンレターを送る`로 표시되고 기존 팬레터 작성 화면으로 이동한다.
- 내 크리에이터 채널에서는 홈 팬레터 empty card는 표시되지만 작성 버튼은 표시되지 않는다.
- 홈 후원 empty 버튼은 기존 `I18n.ContentDetail.DonationDialog.title`을 사용한다.
- 홈 후원·팬레터 empty 버튼은 `Color.white` 배경과 black 아이콘·텍스트로 표시된다.
- `화보` 탭, 화보 섹션, 활동의 화보 row가 표시되지 않는다.
- 홈 외 tab-bar 항목 선택 시 선택한 탭 제목을 표시하는 placeholder page가 표시된다.
- 홈 섹션의 전체보기 action은 기존 화면 또는 placeholder destination으로 이동한다.
@@ -464,3 +489,4 @@ Figma 참조:
- 2026-08-03: 사용자 요청에 따라 내 채널의 헤더 팔로워 수를 기존 레거시 `FollowerListView`로 연결하는 범위를 추가했다. 요청 문구의 `팔로잉 n명`은 현재 UI와 API 계약상 `팔로워 n명`, 즉 해당 채널을 팔로우하는 사용자 목록으로 해석한다.
- 2026-08-14: `UserProfileView``ProfileReportMenuView`를 최상위 `ZStack` overlay로 표시하며 `UserBlockConfirmDialogView`, `UserReportDialogView`, `ProfileReportDialogView`에 연결하는 기존 구현을 확인했다. `CreatorChannelView.titleBar`의 빈 `onTapMore`를 같은 흐름에 연결하고 새 BottomSheet View나 `.sheet`를 추가하지 않는 최소 변경으로 요구사항을 확정했다.
- 2026-08-14: 사용자 제안에 따라 차단 성공 후 현재 `CreatorChannelView``dismiss()`해 진입 이전 화면으로 돌아가도록 확정했다. 이 동작에서는 차단 후 메뉴를 다시 표시할 필요가 없으므로 `CreatorChannelHomeResponse`에 차단 상태를 추가하거나 강제로 홈 route를 설정하지 않는다.
- 2026-08-14: 사용자 인터뷰로 홈 후원·팬레터 empty state의 한국어·일본어 문구, 자연스러운 영어 번역, 팬레터 작성 버튼 연결, 내 채널에서 작성 버튼 숨김을 확정했다. 기존 후원 버튼 문구는 `I18n.ContentDetail.DonationDialog.title`을 재사용하며 이번 작업에서는 Swift 구현을 수행하지 않는다.