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

SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift

@@ -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)
+    }
+}

SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift

@@ -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)
 }

SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift

@@ -6,14 +6,23 @@ struct CreatorChannelView: View {
     @StateObject private var viewModel = CreatorChannelViewModel()
     @Environment(\.dismiss) private var dismiss
 
+    init(creatorId: Int, viewModel: CreatorChannelViewModel = CreatorChannelViewModel()) {
+        self.creatorId = creatorId
+        _viewModel = StateObject(wrappedValue: viewModel)
+    }
+
     var body: some View {
         ZStack {
             Color.black.ignoresSafeArea()
 
-            VStack(spacing: 0) {
+            ZStack(alignment: .top) {
+                VStack(spacing: 0) {
+                    headerSection
+                    tabBar
+                    selectedTabContent
+                }
+
                 titleBar
-                tabBar
-                selectedTabContent
             }
 
             if viewModel.isLoading {
@@ -33,7 +42,7 @@ struct CreatorChannelView: View {
         CreatorChannelTitleBar(
             isFollow: viewModel.response?.creator.isFollow ?? false,
             isNotify: viewModel.response?.creator.isNotify ?? false,
-            backgroundProgress: 1,
+            backgroundProgress: 0,
             onTapBack: {
                 dismiss()
             },
@@ -53,6 +62,13 @@ struct CreatorChannelView: View {
         )
     }
 
+    @ViewBuilder
+    private var headerSection: some View {
+        if let creator = viewModel.response?.creator {
+            CreatorChannelHeaderSection(creator: creator)
+        }
+    }
+
     private var tabBar: some View {
         ScrollView(.horizontal, showsIndicators: false) {
             HStack(spacing: 20) {
@@ -91,3 +107,49 @@ struct CreatorChannelView: View {
         }
     }
 }
+
+#Preview {
+    let viewModel = CreatorChannelViewModel()
+    viewModel.response = CreatorChannelHomeResponse(
+        creator: CreatorChannelCreatorResponse(
+            creatorId: 1,
+            characterId: 10,
+            nickname: "Soda Creator",
+            profileImageUrl: "https://picsum.photos/600",
+            followerCount: 12345,
+            isAiChatAvailable: true,
+            isDmAvailable: false,
+            isFollow: true,
+            isNotify: true
+        ),
+        currentLive: nil,
+        latestAudioContent: nil,
+        channelDonations: [],
+        notices: [],
+        schedules: [],
+        audioContents: [],
+        series: [],
+        communities: [],
+        fanTalk: CreatorChannelFanTalkSummaryResponse(totalCount: 0, latestFanTalk: nil),
+        introduce: "",
+        activity: CreatorChannelActivityResponse(
+            debutDateUtc: nil,
+            dday: "D+1",
+            liveCount: 0,
+            liveDurationHours: 0,
+            liveContributorCount: 0,
+            audioContentCount: 0,
+            seriesCount: 0
+        ),
+        sns: CreatorChannelSnsResponse(
+            instagramUrl: "",
+            fancimmUrl: "",
+            xurl: "",
+            youtubeUrl: "",
+            kakaoOpenChatUrl: ""
+        )
+    )
+    viewModel.hasLoaded = true
+
+    return CreatorChannelView(creatorId: 1, viewModel: viewModel)
+}

SodaLive/Sources/V2/CreatorChannel/Home/CreatorChannelHomeView.swift

@@ -6,17 +6,8 @@ struct CreatorChannelHomeView: View {
 
     var body: some View {
         ScrollView {
-            VStack(alignment: .leading, spacing: 16) {
-                Text(response.creator.nickname)
-                    .font(.system(size: 24, weight: .bold))
-                    .foregroundColor(.white)
-
-                Text(I18n.CreatorChannelHome.followerCount(response.creator.followerCount.comma()))
-                    .font(.system(size: 14))
-                    .foregroundColor(Color.gray500)
-            }
-            .frame(maxWidth: .infinity, alignment: .leading)
-            .padding(20)
+            Color.clear
+                .frame(height: 1)
         }
         .background(Color.black)
     }