feat(creator): 채널 타이틀 바를 분리한다

This commit is contained in:
Yu Sung
2026-07-02 16:41:00 +09:00
parent 949c8cec8e
commit cd55b3e2f5
4 changed files with 158 additions and 46 deletions

View File

@@ -25,6 +25,9 @@
CC0101082FF0100000A5BBA3 /* CreatorChannelView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100082FF0100000A5BBA3 /* CreatorChannelView.swift */; };
CC0102082FF0100000A5BBA3 /* CreatorChannelView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100082FF0100000A5BBA3 /* CreatorChannelView.swift */; };
CC0103082FF0100000A5BBA3 /* CreatorChannelView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100082FF0100000A5BBA3 /* CreatorChannelView.swift */; };
CC0101112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift */; };
CC0102112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift */; };
CC0103112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift */; };
CC0101092FF0100000A5BBA3 /* CreatorChannelViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100092FF0100000A5BBA3 /* CreatorChannelViewModel.swift */; };
CC0102092FF0100000A5BBA3 /* CreatorChannelViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100092FF0100000A5BBA3 /* CreatorChannelViewModel.swift */; };
CC0103092FF0100000A5BBA3 /* CreatorChannelViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC0100092FF0100000A5BBA3 /* CreatorChannelViewModel.swift */; };
@@ -1734,6 +1737,7 @@
CC0100082FF0100000A5BBA3 /* CreatorChannelView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreatorChannelView.swift; sourceTree = "<group>"; };
CC0100092FF0100000A5BBA3 /* CreatorChannelViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreatorChannelViewModel.swift; sourceTree = "<group>"; };
CC0100102FF0100000A5BBA3 /* CreatorChannelTab.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreatorChannelTab.swift; sourceTree = "<group>"; };
CC0100112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreatorChannelTitleBar.swift; sourceTree = "<group>"; };
0BBDC3ECBBE049EAA4057D3A /* PostChannelDonationRequest.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; path = PostChannelDonationRequest.swift; sourceTree = "<group>"; };
0EC05859619BDC03056911E7 /* MainTab.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; path = MainTab.swift; sourceTree = "<group>"; };
189350EA101CF12EEBA6EC1D /* MainTabBarView.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; path = MainTabBarView.swift; sourceTree = "<group>"; };
@@ -2672,6 +2676,7 @@
isa = PBXGroup;
children = (
CC0100252FF0100000A5BBA3 /* Models */,
CC0100262FF0100000A5BBA3 /* Components */,
CC0100232FF0100000A5BBA3 /* Home */,
CC0100082FF0100000A5BBA3 /* CreatorChannelView.swift */,
CC0100092FF0100000A5BBA3 /* CreatorChannelViewModel.swift */,
@@ -2687,6 +2692,14 @@
path = Models;
sourceTree = "<group>";
};
CC0100262FF0100000A5BBA3 /* Components */ = {
isa = PBXGroup;
children = (
CC0100112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift */,
);
path = Components;
sourceTree = "<group>";
};
038B15E425DE0639156ADBA9 /* Repository */ = {
isa = PBXGroup;
children = (
@@ -5577,6 +5590,7 @@
CC0101062FF0100000A5BBA3 /* CreatorChannelHomeView.swift in Sources */,
CC0101072FF0100000A5BBA3 /* CreatorChannelPlaceholderTabView.swift in Sources */,
CC0101082FF0100000A5BBA3 /* CreatorChannelView.swift in Sources */,
CC0101112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift in Sources */,
CC0101092FF0100000A5BBA3 /* CreatorChannelViewModel.swift in Sources */,
CC0101102FF0100000A5BBA3 /* CreatorChannelTab.swift in Sources */,
409E35082B0759DE00CCB985 /* MoyaProviderExtension.swift in Sources */,
@@ -6371,6 +6385,7 @@
CC0102062FF0100000A5BBA3 /* CreatorChannelHomeView.swift in Sources */,
CC0102072FF0100000A5BBA3 /* CreatorChannelPlaceholderTabView.swift in Sources */,
CC0102082FF0100000A5BBA3 /* CreatorChannelView.swift in Sources */,
CC0102112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift in Sources */,
CC0102092FF0100000A5BBA3 /* CreatorChannelViewModel.swift in Sources */,
CC0102102FF0100000A5BBA3 /* CreatorChannelTab.swift in Sources */,
401B3F092FEEF10000A5BBA3 /* MainHomeRankingViewModel.swift in Sources */,
@@ -7181,6 +7196,7 @@
CC0103062FF0100000A5BBA3 /* CreatorChannelHomeView.swift in Sources */,
CC0103072FF0100000A5BBA3 /* CreatorChannelPlaceholderTabView.swift in Sources */,
CC0103082FF0100000A5BBA3 /* CreatorChannelView.swift in Sources */,
CC0103112FF0100000A5BBA3 /* CreatorChannelTitleBar.swift in Sources */,
CC0103092FF0100000A5BBA3 /* CreatorChannelViewModel.swift in Sources */,
CC0103102FF0100000A5BBA3 /* CreatorChannelTab.swift in Sources */,
401B3F082FEEF10000A5BBA3 /* MainHomeRankingViewModel.swift in Sources */,

View File

@@ -0,0 +1,120 @@
import SwiftUI
struct CreatorChannelTitleBar: View {
let isFollow: Bool
let isNotify: Bool
let backgroundProgress: CGFloat
let onTapBack: () -> Void
let onTapFollow: () -> Void
let onTapUnfollow: () -> Void
let onTapNotify: () -> Void
let onTapUnnotify: () -> Void
let onTapMore: () -> Void
var body: some View {
HStack(spacing: 0) {
Button(action: onTapBack) {
Image("ic_new_bar_back")
.resizable()
.frame(width: 24, height: 24)
}
.buttonStyle(.plain)
Spacer(minLength: 0)
HStack(spacing: SodaSpacing.s14) {
followButton
if isFollow {
notifyButton
}
Button(action: onTapMore) {
Image("ic_new_more")
.resizable()
.frame(width: 24, height: 24)
}
.buttonStyle(.plain)
}
}
.padding(.horizontal, SodaSpacing.s14)
.frame(height: 56)
.background(Color.black.opacity(max(0, min(backgroundProgress, 1))))
}
private var followButton: some View {
Button(action: isFollow ? onTapUnfollow : onTapFollow) {
HStack(spacing: SodaSpacing.s6) {
Image(isFollow ? "ic_new_following" : "ic_new_follow")
.resizable()
.renderingMode(.template)
.foregroundColor(isFollow ? Color.black : Color.white)
.frame(width: 20, height: 20)
if isFollow == false {
Text(I18n.CreatorChannelHome.follow)
.appFont(size: 16, weight: .medium)
.foregroundColor(Color.white)
}
}
.padding(SodaSpacing.s8)
.background(isFollow ? Color.white : Color.clear)
.clipShape(Capsule())
}
.accessibilityLabel(isFollow ? I18n.CreatorChannelHome.following : "팔로우")
.buttonStyle(.plain)
}
private var notifyButton: some View {
Button(action: isNotify ? onTapUnnotify : onTapNotify) {
Image(isNotify ? "ic_bar_bell_fill" : "ic_bar_bell")
.resizable()
.frame(width: 24, height: 24)
}
.buttonStyle(.plain)
}
}
struct CreatorChannelTitleBar_Previews: PreviewProvider {
static var previews: some View {
VStack(spacing: SodaSpacing.s16) {
CreatorChannelTitleBar(
isFollow: false,
isNotify: false,
backgroundProgress: 0,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
CreatorChannelTitleBar(
isFollow: true,
isNotify: true,
backgroundProgress: 1,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
CreatorChannelTitleBar(
isFollow: true,
isNotify: false,
backgroundProgress: 1,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
}
.background(Color.gray)
.previewLayout(.sizeThatFits)
}
}

View File

@@ -30,52 +30,27 @@ struct CreatorChannelView: View {
}
private var titleBar: some View {
HStack(spacing: 12) {
Button {
CreatorChannelTitleBar(
isFollow: viewModel.response?.creator.isFollow ?? false,
isNotify: viewModel.response?.creator.isNotify ?? false,
backgroundProgress: 1,
onTapBack: {
dismiss()
} label: {
Image(systemName: "chevron.left")
.foregroundColor(.white)
.frame(width: 44, height: 44)
}
Spacer()
if let creator = viewModel.response?.creator {
Button {
if creator.isFollow {
viewModel.creatorFollow(follow: false, notify: false)
} else {
viewModel.creatorFollow(follow: true, notify: true)
}
} label: {
Text(creator.isFollow ? I18n.CreatorChannelHome.following : I18n.CreatorChannelHome.follow)
.font(.system(size: 13, weight: .semibold))
.foregroundColor(creator.isFollow ? .white : .black)
.padding(.horizontal, 12)
.frame(height: 30)
.background(creator.isFollow ? Color.gray33 : Color.soda400)
.clipShape(Capsule())
}
if creator.isFollow {
Button {
if creator.isNotify {
viewModel.creatorFollow(follow: true, notify: false)
} else {
viewModel.creatorFollow(follow: true, notify: true)
}
} label: {
Image(systemName: creator.isNotify ? "bell.fill" : "bell")
.foregroundColor(.white)
.frame(width: 44, height: 44)
}
}
}
}
.frame(height: 56)
.padding(.horizontal, 8)
.background(Color.black)
},
onTapFollow: {
viewModel.creatorFollow(follow: true, notify: true)
},
onTapUnfollow: {
viewModel.creatorFollow(follow: false, notify: false)
},
onTapNotify: {
viewModel.creatorFollow(follow: true, notify: true)
},
onTapUnnotify: {
viewModel.creatorFollow(follow: true, notify: false)
},
onTapMore: {}
)
}
private var tabBar: some View {

View File

@@ -232,7 +232,7 @@
### Phase 3: Header / Title Bar / Tab Bar / Sticky
- [ ] **Task 3.1: title bar 컴포넌트 생성**
- [x] **Task 3.1: title bar 컴포넌트 생성**
- 대상 파일:
- 생성: `SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift`
- 확인: `SodaLive/Sources/Common/FollowButtonImageAsset.swift`
@@ -617,4 +617,5 @@
- 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: 기존 `UserProfile` 구현을 확인해 title bar 팔로우/팔로우 취소/알림 설정/알림 설정 취소를 `UserRepository.creatorFollow(creatorId:follow:notify:)`로 처리하고, `ic_bar_bell`/`ic_bar_bell_fill` 터치 시 각각 `notify: true`/`notify: false` 호출이 일어나도록 계획에 반영했다.
- 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와 최종 검증 기준을 갱신했다.