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

2026-07-02 23:22:46 +09:00
parent 6b571424cf
commit 6cebf3052c
8 changed files with 193 additions and 137 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelHeaderSection.swift
@@ -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 {
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTabBar.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTabBar.swift
@@ -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)
+    }
+}
--- a/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Components/CreatorChannelTitleBar.swift
@@ -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)
 }
--- a/SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/CreatorChannelView.swift
@@ -2,29 +2,31 @@ import SwiftUI

 struct CreatorChannelView: View {
    let creatorId: Int
-
+    
    @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()
-
+            
            ZStack(alignment: .top) {
-                VStack(spacing: 0) {
-                    headerSection
-                    tabBar
-                    selectedTabContent
+                ScrollView(.vertical, showsIndicators: false) {
+                    VStack(spacing: 0) {
+                        headerSection
+                        tabBar
+                        selectedTabContent
+                    }
                }
-
+                
                titleBar
            }
-
+            
            if viewModel.isLoading {
                LoadingView()
            }
@@ -37,7 +39,7 @@ struct CreatorChannelView: View {
        }
        .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
    }
-
+    
    private var titleBar: some View {
        CreatorChannelTitleBar(
            isFollow: viewModel.response?.creator.isFollow ?? false,
@@ -61,95 +63,71 @@ struct CreatorChannelView: View {
            onTapMore: {}
        )
    }
-
+    
    @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) {
-                ForEach(CreatorChannelTab.allCases, id: \.self) { tab in
-                    Button {
-                        viewModel.selectedTab = tab
-                    } label: {
-                        VStack(spacing: 8) {
-                            Text(tab.title)
-                                .font(.system(size: 15, weight: viewModel.selectedTab == tab ? .semibold : .regular))
-                                .foregroundColor(viewModel.selectedTab == tab ? .white : Color.gray500)
-
-                            Rectangle()
-                                .fill(viewModel.selectedTab == tab ? Color.soda400 : Color.clear)
-                                .frame(height: 2)
-                        }
-                    }
-                }
-            }
-            .padding(.horizontal, 20)
-        }
-        .frame(height: 48)
-        .background(Color.black)
+        CreatorChannelTabBar(selectedTab: $viewModel.selectedTab)
    }
-
+    
    @ViewBuilder
    private var selectedTabContent: some View {
-        if viewModel.selectedTab != .home || viewModel.isApiFailedPlaceholderVisible {
-            CreatorChannelPlaceholderTabView(title: viewModel.selectedTab.title)
-        } else if let response = viewModel.response {
-            CreatorChannelHomeView(response: response) { tab in
-                viewModel.selectedTab = tab
-            }
-        } else {
-            CreatorChannelPlaceholderTabView(title: CreatorChannelTab.home.title)
-        }
+        CreatorChannelPlaceholderTabView(title: viewModel.selectedTab.title)
    }
 }

-#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: ""
+struct CreatorChannelView_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelView(creatorId: 1, viewModel: sampleViewModel)
+    }
+    
+    private static var sampleViewModel: CreatorChannelViewModel {
+        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)
+        viewModel.hasLoaded = true
+        return viewModel
+    }
 }
--- a/SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelPlaceholderTabView.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelPlaceholderTabView.swift
@@ -4,16 +4,40 @@ struct CreatorChannelPlaceholderTabView: View {
    let title: String

    var body: some View {
-        VStack(spacing: 12) {
-            Text(title)
-                .font(.system(size: 18, weight: .semibold))
-                .foregroundColor(.white)
+        VStack(spacing: 24) {
+            VStack(spacing: 12) {
+                Text(title)
+                    .font(.system(size: 18, weight: .semibold))
+                    .foregroundColor(.white)

-            Text(I18n.CreatorChannelHome.placeholderMessage)
-                .font(.system(size: 14))
-                .foregroundColor(Color.gray500)
+                Text(I18n.CreatorChannelHome.placeholderMessage)
+                    .font(.system(size: 14))
+                    .foregroundColor(Color.gray500)
+            }
+
+            #if DEBUG
+            VStack(spacing: 14) {
+                ForEach(1...12, id: \.self) { index in
+                    VStack(alignment: .leading, spacing: 8) {
+                        Text("DEBUG Dummy Content \(index)")
+                            .appFont(size: 16, weight: .medium)
+                            .foregroundColor(.white)
+
+                        Text("Sticky validation placeholder row")
+                            .appFont(size: 14, weight: .regular)
+                            .foregroundColor(Color.gray500)
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(16)
+                    .background(Color.gray900)
+                    .cornerRadius(14)
+                }
+            }
+            .padding(.horizontal, 20)
+            #endif
        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.vertical, 24)
+        .frame(maxWidth: .infinity, alignment: .top)
        .background(Color.black)
    }
 }