klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(creator): 채널 헤더를 연결한다

Browse Source
This commit is contained in:
Yu Sung
2026-07-02 21:54:16 +09:00
parent 1a7368d2a4
commit 6b571424cf
7 changed files with 203 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift Normal file
View File

@@ -0,0 +1,81 @@
import SwiftUI
import Kingfisher
struct CreatorChannelHeaderSection: View {
let creator: CreatorChannelCreatorResponse
var body: some View {
ZStack(alignment: .bottom) {
KFImage(URL(string: creator.profileImageUrl))
.placeholder { Color.gray.opacity(0.2) }
.retry(maxCount: 2, interval: .seconds(1))
.cancelOnDisappear(true)
.downsampled(to: CGSize(width: screenSize().width, height: screenSize().width))
.resizable()
.scaledToFill()
.frame(width: screenSize().width, height: screenSize().width)
.clipped()
VStack(spacing: 0) {
LinearGradient(
colors: [Color.black.opacity(0.3), Color.black.opacity(0)],
startPoint: .top,
endPoint: .bottom
)
.frame(height: 120)
Spacer(minLength: 0)
LinearGradient(
gradient: Gradient(stops: [
.init(color: Color.black.opacity(0), location: 0),
.init(color: Color.black.opacity(0), location: 0.35),
.init(color: Color.black.opacity(0.85), location: 1)
]),
startPoint: .top,
endPoint: .bottom
)
.frame(height: 180)
}
VStack(alignment: .center, spacing: SodaSpacing.s8) {
Text(I18n.CreatorChannelHome.followerCount(creator.followerCount.comma()))
.appFont(size: 16, weight: .medium)
.foregroundColor(.white)
.multilineTextAlignment(.center)
Text(creator.nickname)
.appFont(size: 32, weight: .bold)
.foregroundColor(.white)
.multilineTextAlignment(.center)
talkButton
}
.frame(maxWidth: .infinity)
.padding(.horizontal, SodaSpacing.s24)
.padding(.bottom, SodaSpacing.s14)
}
.frame(width: screenSize().width, height: screenSize().width)
.ignoresSafeArea(.container, edges: .top)
}
private var talkButton: some View {
Button(action: {}) {
HStack(spacing: SodaSpacing.s6) {
Image("ic_new_talk")
.resizable()
.frame(width: 20, height: 20)
Text(I18n.CreatorChannelHome.talk)
.appFont(size: 16, weight: .medium)
.foregroundColor(.white)
}
.padding(SodaSpacing.s12)
.overlay(
Capsule()
.stroke(Color.white.opacity(0.3), lineWidth: 1)
)
}
.buttonStyle(.plain)
}
}

82
SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift
View File

@@ -57,7 +57,8 @@ struct CreatorChannelTitleBar: View {
.foregroundColor(Color.white)
}
}
.padding(SodaSpacing.s8)
.frame(width: isFollow ? 36 : nil, height: 36)
.padding(.horizontal, isFollow ? 0 : SodaSpacing.s12)
.background(isFollow ? Color.white : Color.clear)
.clipShape(Capsule())
}
@@ -67,54 +68,53 @@ struct CreatorChannelTitleBar: View {
private var notifyButton: some View {
Button(action: isNotify ? onTapUnnotify : onTapNotify) {
Image(isNotify ? "ic_bar_bell_fill" : "ic_bar_bell")
Image(isNotify ? "ic_bar_bell_colored" : "ic_bar_bell")
.resizable()
.frame(width: 24, height: 24)
.frame(width: 36, height: 36)
}
.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: {}
)
#Preview {
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: true,
backgroundProgress: 0,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
CreatorChannelTitleBar(
isFollow: true,
isNotify: false,
backgroundProgress: 1,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
}
.background(Color.gray)
.previewLayout(.sizeThatFits)
CreatorChannelTitleBar(
isFollow: true,
isNotify: false,
backgroundProgress: 0,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
}
.background(Color.gray)
.previewLayout(.sizeThatFits)
}