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

2026-07-02 21:54:16 +09:00
parent 1a7368d2a4
commit 6b571424cf
7 changed files with 203 additions and 58 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift
+++ b/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)
+    }
+}