feat(creator): 채널 탭 바를 분리한다

This commit is contained in:
Yu Sung
2026-07-02 23:22:46 +09:00
parent 6b571424cf
commit 6cebf3052c
8 changed files with 193 additions and 137 deletions

View File

@@ -56,7 +56,6 @@ struct CreatorChannelHeaderSection: View {
.padding(.bottom, SodaSpacing.s14)
}
.frame(width: screenSize().width, height: screenSize().width)
.ignoresSafeArea(.container, edges: .top)
}
private var talkButton: some View {

View File

@@ -0,0 +1,45 @@
import SwiftUI
struct CreatorChannelTabBar: View {
@Binding var selectedTab: CreatorChannelTab
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 0) {
ForEach(CreatorChannelTab.allCases, id: \.self) { tab in
Button {
selectedTab = tab
} label: {
VStack(spacing: 0) {
Text(tab.title)
.appFont(size: 16, weight: .medium)
.foregroundColor(selectedTab == tab ? Color.white : Color.gray500)
.frame(maxWidth: .infinity, maxHeight: .infinity)
Rectangle()
.fill(selectedTab == tab ? Color.soda400 : Color.clear)
.frame(height: 3)
}
.frame(width: 110, height: 52)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
}
}
}
.frame(height: 52)
.background(Color.black)
.overlay(alignment: .bottom) {
Rectangle()
.fill(Color.gray900)
.frame(height: 1)
}
}
}
struct CreatorChannelTabBar_Previews: PreviewProvider {
static var previews: some View {
CreatorChannelTabBar(selectedTab: .constant(.home))
.previewLayout(.sizeThatFits)
}
}

View File

@@ -77,44 +77,46 @@ struct CreatorChannelTitleBar: View {
}
}
#Preview {
VStack(spacing: SodaSpacing.s16) {
CreatorChannelTitleBar(
isFollow: false,
isNotify: false,
backgroundProgress: 0,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
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: 0,
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: 0,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
CreatorChannelTitleBar(
isFollow: true,
isNotify: false,
backgroundProgress: 0,
onTapBack: {},
onTapFollow: {},
onTapUnfollow: {},
onTapNotify: {},
onTapUnnotify: {},
onTapMore: {}
)
}
.background(Color.gray)
.previewLayout(.sizeThatFits)
}
.background(Color.gray)
.previewLayout(.sizeThatFits)
}