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

2026-07-02 16:41:00 +09:00
parent 949c8cec8e
commit cd55b3e2f5
4 changed files with 158 additions and 46 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift
@@ -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)
+    }
+}