feat(creator): 시리즈 섹션을 연결한다

2026-07-03 15:07:24 +09:00
parent 32174cd0af
commit ed6240fdd0
9 changed files with 188 additions and 5 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelSeriesSection.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Home/Components/CreatorChannelSeriesSection.swift
@@ -0,0 +1,117 @@
+import SwiftUI
+
+struct CreatorChannelSeriesSection: View {
+    let series: [CreatorChannelSeriesResponse]
+    let onSelectTab: (CreatorChannelTab) -> Void
+    let onTapSeries: (Int) -> Void
+    
+    init(
+        series: [CreatorChannelSeriesResponse],
+        onSelectTab: @escaping (CreatorChannelTab) -> Void,
+        onTapSeries: @escaping (Int) -> Void = { _ in }
+    ) {
+        self.series = series
+        self.onSelectTab = onSelectTab
+        self.onTapSeries = onTapSeries
+    }
+    
+    var body: some View {
+        if series.isEmpty == false {
+            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
+                SectionTitle(title: I18n.CreatorChannelHome.series) {
+                    onSelectTab(.series)
+                }
+                
+                ScrollView(.horizontal, showsIndicators: false) {
+                    HStack(alignment: .top, spacing: SodaSpacing.s8) {
+                        ForEach(series) { item in
+                            CreatorChannelSeriesCard(series: item) {
+                                onTapSeries(item.seriesId)
+                            }
+                        }
+                    }
+                    .padding(.leading, SodaSpacing.s14)
+                    .padding(.trailing, SodaSpacing.s20)
+                }
+            }
+            .padding(.top, SodaSpacing.s20)
+        }
+    }
+}
+
+private struct CreatorChannelSeriesCard: View {
+    let series: CreatorChannelSeriesResponse
+    let action: () -> Void
+    
+    private let baseDeviceWidth: CGFloat = 402
+    private let maxThumbnailWidth: CGFloat = 163
+    private let maxThumbnailHeight: CGFloat = 230
+    
+    private var scale: CGFloat {
+        min(1, UIScreen.main.bounds.width / baseDeviceWidth)
+    }
+    
+    private var thumbnailWidth: CGFloat {
+        maxThumbnailWidth * scale
+    }
+    
+    private var thumbnailHeight: CGFloat {
+        maxThumbnailHeight * scale
+    }
+    
+    var body: some View {
+        Button(action: action) {
+            thumbnail
+        }
+        .buttonStyle(.plain)
+    }
+    
+    private var thumbnail: some View {
+        ZStack(alignment: .topLeading) {
+            DownsampledKFImage(
+                url: URL(string: series.coverImageUrl),
+                size: CGSize(width: thumbnailWidth, height: thumbnailHeight)
+            )
+            .background(Color.gray800)
+            
+            if series.isOriginal {
+                HStack(spacing: 4) {
+                    Image("ic_series_original")
+                        .resizable()
+                        .scaledToFit()
+                        .frame(width: 14, height: 14)
+                    
+                    Image("img_new_only")
+                        .resizable()
+                        .scaledToFit()
+                        .frame(height: 14)
+                }
+                .padding(.horizontal, 8)
+                .padding(.vertical, 5)
+                .background(Color.gray900)
+            }
+        }
+        .frame(width: thumbnailWidth, height: thumbnailHeight)
+        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+    }
+}
+
+struct CreatorChannelSeriesSection_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelSeriesSection(
+            series: (1...3).map { index in
+                CreatorChannelSeriesResponse(
+                    seriesId: index,
+                    title: "시리즈 제목",
+                    coverImageUrl: "https://picsum.photos/300/420?\(index)",
+                    numberOfContent: 10,
+                    isNew: index.isMultiple(of: 2),
+                    isOriginal: true
+                )
+            },
+            onSelectTab: { _ in }
+        )
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}