docs(creator): 채널 홈 계획을 갱신한다

This commit is contained in:
Yu Sung
2026-07-03 01:35:08 +09:00
parent f19b04dc0e
commit 527b499c30
2 changed files with 19 additions and 10 deletions

View File

@@ -287,7 +287,7 @@
- 실행 명령: `rg "struct CreatorChannelTabBar|ScrollView\\(\\.horizontal|CreatorChannelTab.allCases|selectedTab|soda|indicator|화보" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTabBar.swift SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift` - 실행 명령: `rg "struct CreatorChannelTabBar|ScrollView\\(\\.horizontal|CreatorChannelTab.allCases|selectedTab|soda|indicator|화보" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTabBar.swift SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
- 기대 결과: 7개 tab만 표시되고 선택 상태 UI가 확인된다. - 기대 결과: 7개 tab만 표시되고 선택 상태 UI가 확인된다.
- [ ] **Task 3.4: scroll progress와 sticky 계산 연결** - [x] **Task 3.4: scroll progress와 sticky 계산 연결**
- 대상 파일: - 대상 파일:
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift` - 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
- 수정: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift` - 수정: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
@@ -298,23 +298,26 @@
- title bar는 header view 위에 `ZStack` 또는 `overlay` 형태로 띄운다. - title bar는 header view 위에 `ZStack` 또는 `overlay` 형태로 띄운다.
- title bar 뒤로 큰 배경 이미지가 보이도록 기본 `backgroundProgress`는 0, 기본 배경은 투명으로 둔다. - title bar 뒤로 큰 배경 이미지가 보이도록 기본 `backgroundProgress`는 0, 기본 배경은 투명으로 둔다.
- tab-bar가 title bar에 닿으면 tab-bar를 sticky 상태로 고정한다. - tab-bar가 title bar에 닿으면 tab-bar를 sticky 상태로 고정한다.
- sticky 기준은 디바이스 최상단 `y=0`이 아니라 title bar 하단이며, sticky 이후 tab-bar는 title bar 하단까지만 스크롤된 뒤 멈춘다.
- sticky 이후 OS status bar 영역이 title bar와 동일한 black 배경으로 보이게 상단 overlay를 둔다. - sticky 이후 OS status bar 영역이 title bar와 동일한 black 배경으로 보이게 상단 overlay를 둔다.
- 검증 기준: - 검증 기준:
- 실행 명령: `rg "PreferenceKey|GeometryReader|ZStack|overlay|backgroundProgress|Color\\.clear|opacity|isTabBarSticky|clamp|safeAreaInsets|CreatorChannelTitleBar|CreatorChannelTabBar" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTabBar.swift` - 실행 명령: `rg "PreferenceKey|GeometryReader|ZStack|overlay|backgroundProgress|Color\\.clear|opacity|isTabBarSticky|clamp|safeAreaInsets|CreatorChannelTitleBar|CreatorChannelTabBar" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTabBar.swift`
- 기대 결과: geometry preference 기반 계산, 기본 투명 title bar overlay, scroll 기반 title bar opacity, sticky tab-bar 상태 계산이 확인된다. - 기대 결과: geometry preference 기반 계산, 기본 투명 title bar overlay, scroll 기반 title bar opacity, sticky tab-bar 상태 계산이 확인되고, tab-bar sticky 기준이 디바이스 최상단이 아니라 title bar 하단임이 확인된다.
- [ ] **Task 3.5: Header/TitleBar/TabBar만으로 sticky 조기 검증** - [ ] **Task 3.5: title bar 닉네임 표시 연결**
- 대상 파일: - 대상 파일:
- 수정: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
- 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift` - 수정: `SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
- 작업 내용: - 작업 내용:
- `#if DEBUG` preview 전용 sticky scaffold를 `CreatorChannelView_Previews` 또는 같은 파일의 private preview view로 둔다. - `CreatorChannelTitleBar`에 크리에이터 닉네임을 주입받는 값을 추가한다.
- preview scaffold는 sample creator, 큰 배경 이미지 기반 `CreatorChannelHeaderSection`, 기본 투명 배경의 `CreatorChannelTitleBar`, `CreatorChannelTabBar`, 충분한 높이의 dummy rows를 사용한다. - title bar의 back 버튼 우측 Text에는 크리에이터 닉네임을 표시한다.
- preview에서 초기 상태의 title bar 뒤로 header 큰 배경 이미지가 보이는지 확인한다. - 닉네임은 한 줄로 표시하고, 영역을 넘으면 말줄임 처리한다.
- production runtime에는 preview 전용 dummy rows가 노출되지 않게 `#if DEBUG` 범위에만 둔다. - 닉네임이 길어도 우측 팔로우/알림/더보기 영역은 항상 먼저 보이도록 layout priority 또는 고정 영역 우선순위를 적용한다.
- Xcode Preview 또는 simulator preview route에서 스크롤하며 title bar black 전환, tab-bar sticky 고정, title bar/header overlay 상태를 수동 확인한다. - 닉네임은 title bar background opacity가 1일 때만 표시한다.
- `CreatorChannelView``viewModel.response?.creator.nickname``CreatorChannelTitleBar`에 전달한다.
- 검증 기준: - 검증 기준:
- 실행 명령: `rg "#if DEBUG|CreatorChannelView_Previews|CreatorChannelHeaderSection|CreatorChannelTitleBar|CreatorChannelTabBar|dummy|isTabBarSticky|backgroundProgress|Color\\.clear|ZStack|overlay" SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift` - 실행 명령: `rg "nickname|lineLimit\\(1\\)|truncationMode|layoutPriority|backgroundProgress|opacity|CreatorChannelTitleBar\\(" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift`
- 기대 결과: API와 하위 섹션 구현 전에도 Header/TitleBar/TabBar sticky 동작과 title bar/header overlay 상태를 확인할 수 있는 debug-only preview scaffold가 존재한다. - 기대 결과: title bar에 크리에이터 닉네임이 전달되고, 한 줄 말줄임, 우측 action 영역 우선 노출, `backgroundProgress`가 1일 때만 닉네임 표시 조건이 확인된다.
### Phase 4: 홈 외 placeholder ### Phase 4: 홈 외 placeholder
@@ -617,6 +620,7 @@
- 2026-07-02: 이미 완료된 Phase 1~2 기록은 보존하고, 후속 구조 정리를 위해 Task 2.4 `공통 CreatorChannel shell로 구조 정리`를 추가했다. - 2026-07-02: 이미 완료된 Phase 1~2 기록은 보존하고, 후속 구조 정리를 위해 Task 2.4 `공통 CreatorChannel shell로 구조 정리`를 추가했다.
- 2026-07-02: 사용자 확인 사항을 반영해 title bar Figma URL 3종과 사용할 아이콘 asset(`ic_new_bar_back`, `ic_new_follow`, `ic_new_following`, `ic_new_more`, `ic_bar_bell`, `ic_bar_bell_fill`)을 Task 3.1 및 최종 회귀 검색 기준에 추가했다. - 2026-07-02: 사용자 확인 사항을 반영해 title bar Figma URL 3종과 사용할 아이콘 asset(`ic_new_bar_back`, `ic_new_follow`, `ic_new_following`, `ic_new_more`, `ic_bar_bell`, `ic_bar_bell_fill`)을 Task 3.1 및 최종 회귀 검색 기준에 추가했다.
- 2026-07-02: 기존 `UserProfile` 구현을 확인해 title bar 팔로우/팔로우 취소/알림 설정/알림 설정 취소를 `UserRepository.creatorFollow(creatorId:follow:notify:)`로 처리하고, `ic_bar_bell`/`ic_bar_bell_fill` 터치 시 각각 `notify: true`/`notify: false` 호출이 일어나도록 계획에 반영했다. - 2026-07-02: 기존 `UserProfile` 구현을 확인해 title bar 팔로우/팔로우 취소/알림 설정/알림 설정 취소를 `UserRepository.creatorFollow(creatorId:follow:notify:)`로 처리하고, `ic_bar_bell`/`ic_bar_bell_fill` 터치 시 각각 `notify: true`/`notify: false` 호출이 일어나도록 계획에 반영했다.
- 2026-07-03: Task 3.4 구현을 완료했다. `CreatorChannelView`에서 geometry preference로 tab-bar 위치를 추적하고, sticky 기준을 디바이스 최상단이 아닌 title bar 하단(`safeAreaInsets.top + 56`)으로 계산하도록 변경했다. `rg "PreferenceKey|GeometryReader|ZStack|overlay|backgroundProgress|Color\\.clear|opacity|isTabBarSticky|clamp|safeAreaInsets|CreatorChannelTitleBar|CreatorChannelTabBar" ...` 기준 키워드를 확인했고, `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build``BUILD SUCCEEDED`로 완료됐다.
- 2026-07-02: Task 3.2 구현을 완료하고 `CreatorChannelHeaderSection`을 공통 shell에 연결했다. `rg "struct CreatorChannelHeaderSection|CreatorChannelCreatorResponse|profileImageUrl|ignoresSafeArea\\(.*top|nickname|followerCount|DownsampledKFImage|KFImage" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift``xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 성공으로 검증했다. - 2026-07-02: Task 3.2 구현을 완료하고 `CreatorChannelHeaderSection`을 공통 shell에 연결했다. `rg "struct CreatorChannelHeaderSection|CreatorChannelCreatorResponse|profileImageUrl|ignoresSafeArea\\(.*top|nickname|followerCount|DownsampledKFImage|KFImage" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift``xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 성공으로 검증했다.
- 2026-07-02: Task 3.1 title bar 컴포넌트를 `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`로 생성하고 `CreatorChannelView`의 inline title bar를 교체했다. `rg "struct CreatorChannelTitleBar|isFollow|isNotify|backgroundProgress|onTapBack|onTapFollow|onTapUnfollow|onTapNotify|onTapUnnotify|onTapMore|ic_new_bar_back|ic_new_follow|ic_new_following|ic_new_more|ic_bar_bell|ic_bar_bell_fill|팔로우" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift``xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 성공으로 검증했다. - 2026-07-02: Task 3.1 title bar 컴포넌트를 `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`로 생성하고 `CreatorChannelView`의 inline title bar를 교체했다. `rg "struct CreatorChannelTitleBar|isFollow|isNotify|backgroundProgress|onTapBack|onTapFollow|onTapUnfollow|onTapNotify|onTapUnnotify|onTapMore|ic_new_bar_back|ic_new_follow|ic_new_following|ic_new_more|ic_bar_bell|ic_bar_bell_fill|팔로우" SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift``xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 성공으로 검증했다.
- 2026-07-02: 사용자 확인 사항을 반영해 HeaderView는 `CreatorChannelHomeResponse.creator` 데이터로 채우고, 별도 프로필 이미지 없이 큰 배경 이미지만 표시하며, title bar는 기본 투명 배경으로 header 위에 overlay되도록 Task 3.2/3.4/3.5와 최종 검증 기준을 갱신했다. - 2026-07-02: 사용자 확인 사항을 반영해 HeaderView는 `CreatorChannelHomeResponse.creator` 데이터로 채우고, 별도 프로필 이미지 없이 큰 배경 이미지만 표시하며, title bar는 기본 투명 배경으로 header 위에 overlay되도록 Task 3.2/3.4/3.5와 최종 검증 기준을 갱신했다.

View File

@@ -160,6 +160,10 @@ Figma 참조:
- tab-bar가 sticky 상태가 되면 OS status bar 영역도 title bar 배경색과 동일하게 보이도록 한다. - tab-bar가 sticky 상태가 되면 OS status bar 영역도 title bar 배경색과 동일하게 보이도록 한다.
- title bar 좌측에는 back 버튼을 둔다. - title bar 좌측에는 back 버튼을 둔다.
- title bar 우측에는 팔로우/알림 상태 버튼과 더보기 버튼을 둔다. - title bar 우측에는 팔로우/알림 상태 버튼과 더보기 버튼을 둔다.
- title bar 중앙에는 크리에이터 닉네임을 표시한다.
- title bar 닉네임은 `backgroundProgress`가 1일 때만 표시한다.
- title bar 닉네임은 한 줄로 표시하고, 영역을 넘으면 말줄임 처리한다.
- title bar 닉네임이 길어도 우측 팔로우/알림/더보기 영역은 항상 먼저 보여야 한다.
- title bar 좌측 back 버튼은 `ic_new_bar_back` asset을 사용한다. - title bar 좌측 back 버튼은 `ic_new_bar_back` asset을 사용한다.
- title bar 우측 더보기 버튼은 `ic_new_more` asset을 사용한다. - title bar 우측 더보기 버튼은 `ic_new_more` asset을 사용한다.
- `isFollow == false`이면 `팔로우` capsule 버튼을 표시한다. - `isFollow == false`이면 `팔로우` capsule 버튼을 표시한다.
@@ -365,6 +369,7 @@ Figma 참조:
- tab-bar가 title bar와 맞닿으면 sticky 상태가 되고 아래 콘텐츠만 스크롤된다. - tab-bar가 title bar와 맞닿으면 sticky 상태가 되고 아래 콘텐츠만 스크롤된다.
- sticky 상태에서 OS status bar 영역도 title bar와 동일한 black 배경으로 보인다. - sticky 상태에서 OS status bar 영역도 title bar와 동일한 black 배경으로 보인다.
- `isFollow`, `isNotify` 조합에 따라 title bar의 팔로우/알림 상태가 Figma 3개 상태와 일치한다. - `isFollow`, `isNotify` 조합에 따라 title bar의 팔로우/알림 상태가 Figma 3개 상태와 일치한다.
- title bar 배경 opacity가 1일 때 크리에이터 닉네임이 한 줄 말줄임으로 표시되고, 긴 닉네임이어도 우측 팔로우/알림/더보기 영역이 우선 노출된다.
- title bar는 `ic_new_bar_back`, `ic_new_follow`, `ic_new_following`, `ic_new_more`, `ic_bar_bell`, `ic_bar_bell_fill` asset만 사용한다. - title bar는 `ic_new_bar_back`, `ic_new_follow`, `ic_new_following`, `ic_new_more`, `ic_bar_bell`, `ic_bar_bell_fill` asset만 사용한다.
- 팔로우/팔로우 취소/알림 설정/알림 설정 취소 action은 기존 `UserProfile`과 동일하게 `UserRepository.creatorFollow(creatorId:follow:notify:)`를 호출한다. - 팔로우/팔로우 취소/알림 설정/알림 설정 취소 action은 기존 `UserProfile`과 동일하게 `UserRepository.creatorFollow(creatorId:follow:notify:)`를 호출한다.
- `ic_bar_bell` 터치 시 `creatorFollow(follow: true, notify: true)`, `ic_bar_bell_fill` 터치 시 `creatorFollow(follow: true, notify: false)`가 호출된다. - `ic_bar_bell` 터치 시 `creatorFollow(follow: true, notify: true)`, `ic_bar_bell_fill` 터치 시 `creatorFollow(follow: true, notify: false)`가 호출된다.