feat(series-all-home): 시리즈 전체보기 홈 탭 배너 UI 추가

2025-11-15 02:32:53 +09:00
parent 72329d6f60
commit 438f12024f
3 changed files with 123 additions and 2 deletions
--- a/SodaLive/Sources/Content/Series/Main/Home/SeriesMainHomeBannerView.swift
+++ b/SodaLive/Sources/Content/Series/Main/Home/SeriesMainHomeBannerView.swift
@@ -0,0 +1,118 @@
+//
+//  SeriesMainHomeBannerView.swift
+//  SodaLive
+//
+//  Created by klaus on 11/15/25.
+//
+
+import SwiftUI
+
+struct SeriesMainHomeBannerView: View {
+    let bannerList: [SeriesBannerResponse]
+    
+    @State var currentIndex = 0
+    @State var timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
+    
+    @State var width: CGFloat = 0
+    @State var height: CGFloat = 0
+    
+    var body: some View {
+        VStack(spacing: 0) {
+            TabView(selection: $currentIndex) {
+                ForEach(0..<bannerList.count, id: \.self) { index in
+                    let item = bannerList[index]
+                    
+                    NavigationLink {
+                        SeriesDetailView(seriesId: item.seriesId)
+                    } label: {
+                        SeriesMainHomeBannerImageView(url: item.imagePath, width: width, height: height)
+                    }
+                }
+            }
+            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
+            .frame(
+                width: width,
+                height: height
+            )
+            
+            HStack(spacing: 4) {
+                ForEach(0..<bannerList.count, id: \.self) { index in
+                    Capsule()
+                        .foregroundColor(
+                            index == currentIndex
+                            ? .button
+                            : .gray90
+                        )
+                        .frame(
+                            width: index == currentIndex ? 18 : 6,
+                            height: 6
+                        )
+                        .tag(index)
+                }
+            }
+            .padding(.top, 13.3)
+        }
+        .frame(maxWidth: .infinity)
+        .onAppear {
+            width = screenSize().width
+            // 352x198
+            height = width * 198 / 352
+            timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
+        }
+        .onDisappear {
+            timer.upstream.connect().cancel()
+        }
+        .onReceive(timer) { _ in
+            DispatchQueue.main.async {
+                withAnimation {
+                    if currentIndex == bannerList.count - 1 {
+                        currentIndex = 0
+                    } else {
+                        currentIndex += 1
+                    }
+                }
+            }
+        }
+    }
+}
+
+struct SeriesMainHomeBannerImageView: View {
+    let url: String
+    let width: CGFloat
+    let height: CGFloat
+    @State private var boundURL: URL?
+    
+    var body: some View {
+        Group {
+            if let boundURL {
+                DownsampledKFImage(
+                    url: boundURL,
+                    size: CGSize(width: width, height: height)
+                )
+                .cornerRadius(4.7)
+            } else {
+                Color.clear
+                    .frame(width: width, height: height)
+                    .cornerRadius(4.7)
+            }
+        }
+        .contentShape(Rectangle())
+        .onAppear {
+            let encoded = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? url
+            boundURL = URL(string: encoded)
+        }
+        .onDisappear {
+            boundURL = nil
+        }
+    }
+}
+
+#Preview {
+    SeriesMainHomeBannerView(
+        bannerList: [
+            SeriesBannerResponse(seriesId: 1, imagePath: "https://picsum.photos/352/198"),
+            SeriesBannerResponse(seriesId: 2, imagePath: "https://picsum.photos/352/198"),
+            SeriesBannerResponse(seriesId: 3, imagePath: "https://picsum.photos/352/198"),
+        ]
+    )
+}