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

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