feat(creator): 라이브 탭 화면을 추가한다

SodaLive/Resources/Assets.xcassets/v2/ic_new_player_play.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_new_player_play.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/v2/ic_new_shield_large.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_new_shield_large.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/v2/ic_new_shield_small.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_new_shield_small.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Sources/I18n/I18n.swift

@@ -3164,6 +3164,7 @@ If you block this user, the following features will be restricted.
 
     enum CreatorChannelLive {
         static var totalLabel: String { pick(ko: "전체", en: "Total", ja: "全体") }
+        static var startLive: String { pick(ko: "라이브 시작하기", en: "Start live", ja: "ライブを開始") }
         enum Sort {
             static var latest: String { pick(ko: "최신순", en: "Latest", ja: "最新順") }
             static var popular: String { pick(ko: "인기순", en: "Popular", ja: "人気順") }

SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelAudioContentListItem.swift

@@ -3,7 +3,7 @@ import SwiftUI
 struct CreatorChannelAudioContentListItem: View {
     let audioContent: CreatorChannelAudioContentResponse
     let action: () -> Void
-
+    
     init(
         audioContent: CreatorChannelAudioContentResponse,
         action: @escaping () -> Void = {}
@@ -11,19 +11,19 @@ struct CreatorChannelAudioContentListItem: View {
         self.audioContent = audioContent
         self.action = action
     }
-
+    
     var body: some View {
         Button(action: action) {
             HStack(alignment: .center, spacing: SodaSpacing.s14) {
                 thumbnail
-
+                
                 VStack(alignment: .leading, spacing: 2) {
                     Text(audioContent.title)
                         .appFont(size: 16, weight: .bold)
                         .foregroundColor(.white)
                         .lineLimit(1)
                         .truncationMode(.tail)
-
+                    
                     if !subtitle.isEmpty {
                         Text(subtitle)
                             .appFont(size: 14, weight: .medium)
@@ -38,7 +38,7 @@ struct CreatorChannelAudioContentListItem: View {
         }
         .buttonStyle(.plain)
     }
-
+    
     private var subtitle: String {
         [audioContent.duration, audioContent.seriesName]
             .compactMap { value in
@@ -47,7 +47,7 @@ struct CreatorChannelAudioContentListItem: View {
             }
             .joined(separator: " • ")
     }
-
+    
     private var thumbnail: some View {
         ZStack(alignment: .topLeading) {
             DownsampledKFImage(
@@ -55,39 +55,39 @@ struct CreatorChannelAudioContentListItem: View {
                 size: CGSize(width: 88, height: 88)
             )
             .background(Color.gray800)
-
+            
             VStack(alignment: .leading, spacing: 0) {
                 topTagList
-
+                
                 Spacer(minLength: 0)
-
+                
                 bottomTagList
             }
         }
         .frame(width: 88, height: 88)
         .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
     }
-
+    
     @ViewBuilder
     private var topTagList: some View {
         HStack(spacing: 0) {
             if audioContent.isOriginalSeries == true {
                 CreatorChannelAudioImageTag(imageName: "ic_content_tag_original")
             }
-
+            
             if audioContent.isFirstContent {
                 CreatorChannelAudioFirstTag()
             }
         }
     }
-
+    
     @ViewBuilder
     private var bottomTagList: some View {
         HStack(spacing: 0) {
             if audioContent.isPointAvailable {
                 CreatorChannelAudioImageTag(imageName: "ic_content_tag_point")
             }
-
+            
             if audioContent.price == 0 {
                 CreatorChannelAudioFreeTag()
             }
@@ -97,7 +97,7 @@ struct CreatorChannelAudioContentListItem: View {
 
 struct CreatorChannelAudioImageTag: View {
     let imageName: String
-
+    
     var body: some View {
         Image(imageName)
             .resizable()
@@ -110,7 +110,7 @@ struct CreatorChannelAudioFirstTag: View {
     var body: some View {
         ZStack {
             Color(hex: "FF34B8")
-
+            
             Image("ic_content_tag_first_star")
                 .resizable()
                 .scaledToFit()
@@ -120,6 +120,21 @@ struct CreatorChannelAudioFirstTag: View {
     }
 }
 
+struct CreatorChannelAudioAdultTag: View {
+    var body: some View {
+        ZStack {
+            Color(hex: "FF4C3C")
+            
+            Image("ic_new_shield_small")
+                .resizable()
+                .scaledToFit()
+                .padding(2)
+        }
+        .frame(width: 18, height: 18)
+        .cornerRadius(4)
+    }
+}
+
 struct CreatorChannelAudioFreeTag: View {
     var body: some View {
         Text("무료")

SodaLive/Sources/V2/CreatorChannel/Live/Components/CreatorChannelLiveReplayListItem.swift

@@ -0,0 +1,221 @@
+import SwiftUI
+
+struct CreatorChannelLiveReplayListItem: View {
+    let audioContent: CreatorChannelAudioContentResponse
+    let action: () -> Void
+
+    init(
+        audioContent: CreatorChannelAudioContentResponse,
+        action: @escaping () -> Void = {}
+    ) {
+        self.audioContent = audioContent
+        self.action = action
+    }
+
+    var body: some View {
+        Button {
+            action()
+        } label: {
+            HStack(alignment: .center, spacing: SodaSpacing.s14) {
+                thumbnail
+
+                VStack(alignment: .leading, spacing: SodaSpacing.s6) {
+                    Text(audioContent.title)
+                        .appFont(size: 16, weight: .bold)
+                        .foregroundColor(.white)
+                        .lineLimit(2)
+                        .truncationMode(.tail)
+
+                    if let duration = audioContent.duration, !duration.isEmpty {
+                        Text(duration)
+                            .appFont(size: 14, weight: .medium)
+                            .foregroundColor(Color.gray500)
+                            .lineLimit(1)
+                    }
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+                trailingState
+            }
+            .padding(.horizontal, SodaSpacing.s20)
+            .padding(.vertical, SodaSpacing.s8)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .buttonStyle(.plain)
+    }
+
+    private var thumbnail: some View {
+        ZStack(alignment: .topLeading) {
+            DownsampledKFImage(
+                url: audioContent.imageUrl.flatMap(URL.init(string:)),
+                size: CGSize(width: 88, height: 88)
+            )
+            .background(Color.gray800)
+
+            VStack(alignment: .leading, spacing: 0) {
+                topTagList
+
+                Spacer(minLength: 0)
+
+                bottomTagList
+            }
+        }
+        .frame(width: 88, height: 88)
+        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+    }
+
+    @ViewBuilder
+    private var topTagList: some View {
+        HStack(spacing: 0) {
+            if audioContent.isOriginalSeries == true {
+                CreatorChannelAudioImageTag(imageName: "ic_content_tag_original")
+            }
+            
+            if audioContent.isFirstContent {
+                CreatorChannelAudioFirstTag()
+            }
+            
+            Spacer()
+            
+            if audioContent.isAdult {
+                CreatorChannelAudioAdultTag()
+                    .padding(.top, 6)
+                    .padding(.trailing, 6)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var bottomTagList: some View {
+        HStack(spacing: 0) {
+            if audioContent.isPointAvailable {
+                CreatorChannelAudioImageTag(imageName: "ic_content_tag_point")
+            }
+
+            if audioContent.price == 0 {
+                CreatorChannelAudioFreeTag()
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var trailingState: some View {
+        if audioContent.isOwned {
+            playbackState(I18n.Content.Status.owned)
+        } else if audioContent.isRented {
+            playbackState(I18n.Content.Status.rented)
+        } else if audioContent.price == 0 {
+            playbackState("")
+        } else {
+            HStack(spacing: 2) {
+                Image("ic_bar_cash")
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 18, height: 18)
+
+                Text(audioContent.price.comma())
+                    .appFont(size: 14, weight: .regular)
+                    .foregroundColor(.white)
+                    .lineLimit(1)
+            }
+        }
+    }
+
+    private func playbackState(_ title: String) -> some View {
+        VStack(spacing: SodaSpacing.s4) {
+            ZStack {
+                Color.white
+                
+                Image("ic_new_player_play")
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 16, height: 16)
+            }
+            .frame(width: 28, height: 28)
+            .clipShape(Circle())
+
+            if !title.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
+                Text(title)
+                    .appFont(size: 12, weight: .medium)
+                    .foregroundColor(Color.gray400)
+                    .lineLimit(1)
+            }
+        }
+    }
+}
+
+struct CreatorChannelLiveReplayListItem_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: SodaSpacing.s8) {
+            CreatorChannelLiveReplayListItem(
+                audioContent: CreatorChannelAudioContentResponse(
+                    audioContentId: 1,
+                    title: "라이브 다시듣기 제목이 두 줄까지 표시됩니다",
+                    duration: "1:43:25",
+                    imageUrl: "https://picsum.photos/300/300",
+                    price: 10,
+                    isAdult: true,
+                    isPointAvailable: true,
+                    isFirstContent: true,
+                    seriesName: nil,
+                    isOriginalSeries: true,
+                    isOwned: true,
+                    isRented: false
+                )
+            )
+            
+            CreatorChannelLiveReplayListItem(
+                audioContent: CreatorChannelAudioContentResponse(
+                    audioContentId: 1,
+                    title: "라이브 다시듣기 제목이 두 줄까지 표시됩니다",
+                    duration: "1:43:25",
+                    imageUrl: "https://picsum.photos/300/300",
+                    price: 10,
+                    isAdult: true,
+                    isPointAvailable: true,
+                    isFirstContent: true,
+                    seriesName: nil,
+                    isOriginalSeries: true,
+                    isOwned: false,
+                    isRented: true
+                )
+            )
+            
+            CreatorChannelLiveReplayListItem(
+                audioContent: CreatorChannelAudioContentResponse(
+                    audioContentId: 1,
+                    title: "라이브 다시듣기 제목이 두 줄까지 표시됩니다",
+                    duration: "1:43:25",
+                    imageUrl: "https://picsum.photos/300/300",
+                    price: 3000,
+                    isAdult: true,
+                    isPointAvailable: true,
+                    isFirstContent: true,
+                    seriesName: nil,
+                    isOriginalSeries: true,
+                    isOwned: false,
+                    isRented: false
+                )
+            )
+            
+            CreatorChannelLiveReplayListItem(
+                audioContent: CreatorChannelAudioContentResponse(
+                    audioContentId: 1,
+                    title: "라이브 다시듣기 제목이 두 줄까지 표시됩니다",
+                    duration: "1:43:25",
+                    imageUrl: "https://picsum.photos/300/300",
+                    price: 0,
+                    isAdult: true,
+                    isPointAvailable: true,
+                    isFirstContent: true,
+                    seriesName: nil,
+                    isOriginalSeries: true,
+                    isOwned: false,
+                    isRented: false
+                )
+            )
+        }
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}

SodaLive/Sources/V2/CreatorChannel/Live/Components/CreatorChannelLiveStartButton.swift

@@ -0,0 +1,35 @@
+import SwiftUI
+
+struct CreatorChannelLiveStartButton: View {
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            HStack(spacing: SodaSpacing.s6) {
+                Image("ic_new_create_live")
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 24, height: 24)
+
+                Text(I18n.CreatorChannelLive.startLive)
+                    .appFont(size: 16, weight: .bold)
+                    .foregroundColor(.white)
+                    .lineLimit(1)
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: 56)
+            .background(Color.soda400)
+            .clipShape(Capsule())
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+struct CreatorChannelLiveStartButton_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelLiveStartButton(action: {})
+            .padding(SodaSpacing.s20)
+            .background(Color.black)
+            .previewLayout(.sizeThatFits)
+    }
+}

SodaLive/Sources/V2/CreatorChannel/Live/CreatorChannelLiveTabView.swift

@@ -0,0 +1,87 @@
+import SwiftUI
+
+struct CreatorChannelLiveTabView: View {
+    let creatorId: Int
+    let isOwnCreatorChannel: Bool
+    let onTapLive: (Int) -> Void
+    let onTapContent: (Int) -> Void
+    let onTapCreateLive: () -> Void
+
+    @StateObject private var viewModel = CreatorChannelLiveViewModel()
+    @State private var isSortSheetPresented = false
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            content
+
+            if isOwnCreatorChannel {
+                CreatorChannelLiveStartButton(action: onTapCreateLive)
+                    .padding(.horizontal, SodaSpacing.s20)
+                    .padding(.bottom, SodaSpacing.s20)
+            }
+        }
+        .background(Color.black)
+        .onAppear {
+            if viewModel.hasLoaded == false {
+                viewModel.fetchFirstPage(creatorId: creatorId)
+            }
+        }
+        .sheet(isPresented: $isSortSheetPresented) {
+            CreatorChannelSortBottomSheet(selectedSort: viewModel.selectedSort) { sort in
+                viewModel.selectSort(sort, creatorId: creatorId)
+                isSortSheetPresented = false
+            }
+        }
+        .sodaToast(isPresented: $viewModel.isShowPopup, message: viewModel.errorMessage, autohideIn: 1)
+    }
+
+    private var content: some View {
+        VStack(spacing: 0) {
+            CreatorChannelSortBar(
+                totalCount: viewModel.response?.liveReplayContentCount ?? 0,
+                selectedSort: viewModel.selectedSort,
+                onTapSort: {
+                    isSortSheetPresented = true
+                }
+            )
+
+            LazyVStack(spacing: 0) {
+                CreatorChannelCurrentLiveSection(
+                    currentLive: viewModel.response?.currentLive,
+                    onTapLive: onTapLive
+                )
+                .padding(.top, SodaSpacing.s14)
+                .padding(.bottom, SodaSpacing.s12)
+
+                ForEach(viewModel.liveReplayContents) { audioContent in
+                    CreatorChannelLiveReplayListItem(audioContent: audioContent) {
+                        onTapContent(audioContent.audioContentId)
+                    }
+                    .onAppear {
+                        viewModel.fetchNextPageIfNeeded(creatorId: creatorId, currentItem: audioContent)
+                    }
+                }
+
+                if viewModel.isLoadingNextPage {
+                    ProgressView()
+                        .padding(.vertical, SodaSpacing.s20)
+                }
+            }
+            .padding(.bottom, isOwnCreatorChannel ? 96 : SodaSpacing.s20)
+        }
+    }
+}
+
+struct CreatorChannelLiveTabView_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelLiveTabView(
+            creatorId: 1,
+            isOwnCreatorChannel: true,
+            onTapLive: { _ in },
+            onTapContent: { _ in },
+            onTapCreateLive: {}
+        )
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}