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)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift
@@ -30,52 +30,27 @@ struct CreatorChannelView: View {
    }

    private var titleBar: some View {
-        HStack(spacing: 12) {
-            Button {
+        CreatorChannelTitleBar(
+            isFollow: viewModel.response?.creator.isFollow ?? false,
+            isNotify: viewModel.response?.creator.isNotify ?? false,
+            backgroundProgress: 1,
+            onTapBack: {
                dismiss()
-            } label: {
-                Image(systemName: "chevron.left")
-                    .foregroundColor(.white)
-                    .frame(width: 44, height: 44)
-            }
-
-            Spacer()
-
-            if let creator = viewModel.response?.creator {
-                Button {
-                    if creator.isFollow {
-                        viewModel.creatorFollow(follow: false, notify: false)
-                    } else {
-                        viewModel.creatorFollow(follow: true, notify: true)
-                    }
-                } label: {
-                    Text(creator.isFollow ? I18n.CreatorChannelHome.following : I18n.CreatorChannelHome.follow)
-                        .font(.system(size: 13, weight: .semibold))
-                        .foregroundColor(creator.isFollow ? .white : .black)
-                        .padding(.horizontal, 12)
-                        .frame(height: 30)
-                        .background(creator.isFollow ? Color.gray33 : Color.soda400)
-                        .clipShape(Capsule())
-                }
-
-                if creator.isFollow {
-                    Button {
-                        if creator.isNotify {
-                            viewModel.creatorFollow(follow: true, notify: false)
-                        } else {
-                            viewModel.creatorFollow(follow: true, notify: true)
-                        }
-                    } label: {
-                        Image(systemName: creator.isNotify ? "bell.fill" : "bell")
-                            .foregroundColor(.white)
-                            .frame(width: 44, height: 44)
-                    }
-                }
-            }
-        }
-        .frame(height: 56)
-        .padding(.horizontal, 8)
-        .background(Color.black)
+            },
+            onTapFollow: {
+                viewModel.creatorFollow(follow: true, notify: true)
+            },
+            onTapUnfollow: {
+                viewModel.creatorFollow(follow: false, notify: false)
+            },
+            onTapNotify: {
+                viewModel.creatorFollow(follow: true, notify: true)
+            },
+            onTapUnnotify: {
+                viewModel.creatorFollow(follow: true, notify: false)
+            },
+            onTapMore: {}
+        )
    }

    private var tabBar: some View {