feat(creator): 오디오 섹션을 연결한다

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

@@ -0,0 +1,157 @@
+import SwiftUI
+
+struct CreatorChannelAudioContentListItem: 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: 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)
+                            .foregroundColor(Color.gray500)
+                            .lineLimit(1)
+                            .truncationMode(.tail)
+                    }
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+            }
+            .frame(width: 346, alignment: .leading)
+        }
+        .buttonStyle(.plain)
+    }
+
+    private var subtitle: String {
+        [audioContent.duration, audioContent.seriesName]
+            .compactMap { value in
+                guard let value, !value.isEmpty else { return nil }
+                return value
+            }
+            .joined(separator: " • ")
+    }
+
+    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()
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var bottomTagList: some View {
+        HStack(spacing: 0) {
+            if audioContent.isPointAvailable {
+                CreatorChannelAudioImageTag(imageName: "ic_content_tag_point")
+            }
+
+            if audioContent.price == 0 {
+                CreatorChannelAudioFreeTag()
+            }
+        }
+    }
+}
+
+struct CreatorChannelAudioImageTag: View {
+    let imageName: String
+
+    var body: some View {
+        Image(imageName)
+            .resizable()
+            .scaledToFit()
+            .frame(width: 24, height: 24)
+    }
+}
+
+struct CreatorChannelAudioFirstTag: View {
+    var body: some View {
+        ZStack {
+            Color(hex: "FF34B8")
+
+            Image("ic_content_tag_first_star")
+                .resizable()
+                .scaledToFit()
+                .padding(SodaSpacing.s4)
+        }
+        .frame(width: 24, height: 24)
+    }
+}
+
+struct CreatorChannelAudioFreeTag: View {
+    var body: some View {
+        Text("무료")
+            .appFont(size: 14, weight: .semibold)
+            .foregroundColor(.white)
+            .lineLimit(1)
+            .padding(SodaSpacing.s4)
+            .frame(height: 24)
+            .background(Color.soda900)
+    }
+}
+
+struct CreatorChannelAudioContentListItem_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelAudioContentListItem(
+            audioContent: CreatorChannelAudioContentResponse(
+                audioContentId: 1,
+                title: "콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄",
+                duration: "3:00",
+                imageUrl: "https://picsum.photos/300/300",
+                price: 0,
+                isAdult: false,
+                isPointAvailable: true,
+                isFirstContent: true,
+                seriesName: "시리즈 이름",
+                isOriginalSeries: true,
+                isOwned: false,
+                isRented: false
+            )
+        )
+        .padding(SodaSpacing.s14)
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}

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

@@ -0,0 +1,83 @@
+import SwiftUI
+
+struct CreatorChannelAudioSection: View {
+    let audioContents: [CreatorChannelAudioContentResponse]
+    let onSelectTab: (CreatorChannelTab) -> Void
+    let onTapContent: (Int) -> Void
+
+    private let homeVisibleCount = 9
+    private let itemsPerColumn = 3
+
+    init(
+        audioContents: [CreatorChannelAudioContentResponse],
+        onSelectTab: @escaping (CreatorChannelTab) -> Void,
+        onTapContent: @escaping (Int) -> Void = { _ in }
+    ) {
+        self.audioContents = audioContents
+        self.onSelectTab = onSelectTab
+        self.onTapContent = onTapContent
+    }
+
+    var body: some View {
+        if audioContents.isEmpty == false {
+            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
+                SectionTitle(title: I18n.CreatorChannelHome.audio) {
+                    onSelectTab(.audio)
+                }
+
+                ScrollView(.horizontal, showsIndicators: false) {
+                    HStack(alignment: .top, spacing: SodaSpacing.s8) {
+                        ForEach(audioContentColumns.indices, id: \.self) { index in
+                            VStack(alignment: .leading, spacing: SodaSpacing.s8) {
+                                ForEach(audioContentColumns[index]) { audioContent in
+                                    CreatorChannelAudioContentListItem(audioContent: audioContent) {
+                                        onTapContent(audioContent.audioContentId)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    .padding(.leading, SodaSpacing.s14)
+                    .padding(.trailing, SodaSpacing.s20)
+                }
+            }
+            .padding(.top, SodaSpacing.s20)
+        }
+    }
+
+    private var visibleAudioContents: [CreatorChannelAudioContentResponse] {
+        Array(audioContents.prefix(homeVisibleCount))
+    }
+
+    private var audioContentColumns: [[CreatorChannelAudioContentResponse]] {
+        stride(from: 0, to: visibleAudioContents.count, by: itemsPerColumn).map { index in
+            Array(visibleAudioContents[index..<min(index + itemsPerColumn, visibleAudioContents.count)])
+        }
+    }
+}
+
+struct CreatorChannelAudioSection_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelAudioSection(
+            audioContents: (1...9).map { index in
+                CreatorChannelAudioContentResponse(
+                    audioContentId: index,
+                    title: "콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄",
+                    duration: "3:00",
+                    imageUrl: "https://picsum.photos/300/300?\(index)",
+                    price: index.isMultiple(of: 2) ? 0 : 10,
+                    isAdult: false,
+                    isPointAvailable: index.isMultiple(of: 3),
+                    isFirstContent: index.isMultiple(of: 2),
+                    seriesName: index == 3 ? "시리즈 이름" : nil,
+                    isOriginalSeries: index == 3,
+                    isOwned: false,
+                    isRented: false
+                )
+            },
+            onSelectTab: { _ in }
+        )
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}

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

@@ -114,43 +114,6 @@ private struct CreatorChannelLatestAudioCard: View {
     }
 }
 
-private struct CreatorChannelAudioImageTag: View {
-    let imageName: String
-
-    var body: some View {
-        Image(imageName)
-            .resizable()
-            .scaledToFit()
-            .frame(width: 24, height: 24)
-    }
-}
-
-private struct CreatorChannelAudioFirstTag: View {
-    var body: some View {
-        ZStack {
-            Color(hex: "FF34B8")
-
-            Image("ic_content_tag_first_star")
-                .resizable()
-                .scaledToFit()
-                .padding(SodaSpacing.s4)
-        }
-        .frame(width: 24, height: 24)
-    }
-}
-
-private struct CreatorChannelAudioFreeTag: View {
-    var body: some View {
-        Text("무료")
-            .appFont(size: 14, weight: .semibold)
-            .foregroundColor(.white)
-            .lineLimit(1)
-            .padding(SodaSpacing.s4)
-            .frame(height: 24)
-            .background(Color.soda900)
-    }
-}
-
 struct CreatorChannelLatestAudioSection_Previews: PreviewProvider {
     static var previews: some View {
         CreatorChannelLatestAudioSection(

SodaLive/Sources/V2/CreatorChannel/Home/CreatorChannelHomeView.swift

@@ -48,6 +48,12 @@ struct CreatorChannelHomeView: View {
                 schedules: response.schedules,
                 onTapSchedule: onTapSchedule
             )
+
+            CreatorChannelAudioSection(
+                audioContents: response.audioContents,
+                onSelectTab: onSelectTab,
+                onTapContent: onTapContent
+            )
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .background(Color.black)