feat(home): 추천 배너 섹션을 연결한다

SodaLive/Sources/V2/Component/Banner/BannerCarousel.swift

@@ -11,48 +11,205 @@ struct BannerCarouselItem: Identifiable, Hashable {
 }
 
 struct BannerCarousel: View {
+    private static let maxItemCount = 20
+    private static let autoScrollInterval: TimeInterval = 5
+    private static let transitionDuration: TimeInterval = 0.35
+
     let items: [BannerCarouselItem]
-    let height: CGFloat
     let action: (BannerCarouselItem) -> Void
 
+    @State private var displayIndex = 1
+    @GestureState private var dragOffset: CGFloat = 0
+    @State private var autoScrollTimer: Timer?
+    @State private var isSwiping = false
+
     init(
         items: [BannerCarouselItem],
         height: CGFloat = 120,
         action: @escaping (BannerCarouselItem) -> Void = { _ in }
     ) {
-        self.items = items
-        self.height = height
+        self.items = Array(items.prefix(BannerCarousel.maxItemCount))
         self.action = action
     }
 
     var body: some View {
         if !items.isEmpty {
-            TabView {
-                ForEach(items) { item in
-                    Button {
-                        action(item)
-                    } label: {
-                        DownsampledKFImage(
-                            url: URL(string: item.imageUrl ?? ""),
-                            size: CGSize(width: UIScreen.main.bounds.width - (SodaSpacing.s20 * 2), height: height)
-                        )
-                        .background(Color.gray800)
-                        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+            GeometryReader { proxy in
+                let itemWidth = proxy.size.width - (SodaSpacing.s20 * 2)
+                let itemHeight = itemWidth
+                let step = itemWidth + SodaSpacing.s8
+                let leadingInset = (proxy.size.width - itemWidth) / 2
+                let effectiveIndex = items.count > 1 ? displayIndex : 0
+                let offset = leadingInset - (CGFloat(effectiveIndex) * step) + dragOffset
+
+                HStack(spacing: SodaSpacing.s8) {
+                    ForEach(Array(visibleItems.enumerated()), id: \.offset) { _, item in
+                        Button {
+                            guard !isSwiping else { return }
+                            action(item)
+                        } label: {
+                            DownsampledKFImage(
+                                url: URL(string: item.imageUrl ?? ""),
+                                size: CGSize(width: itemWidth, height: itemHeight)
+                            )
+                            .background(Color.gray800)
+                            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+                        }
+                        .buttonStyle(.plain)
+                        .frame(width: itemWidth, height: itemHeight)
                     }
-                    .buttonStyle(.plain)
-                    .padding(.horizontal, SodaSpacing.s20)
+                }
+                .offset(x: offset)
+                .frame(width: proxy.size.width, height: itemHeight, alignment: .leading)
+                .animation(.easeOut(duration: BannerCarousel.transitionDuration), value: displayIndex)
+                .clipped()
+                .overlay(alignment: .topTrailing) {
+                    pageIndicator
+                        .padding(.top, SodaSpacing.s14)
+                        .padding(.trailing, SodaSpacing.s20 + SodaSpacing.s14)
+                }
+                .contentShape(Rectangle())
+                .simultaneousGesture(dragGesture(step: step))
+                .onChange(of: items) { _ in
+                    displayIndex = items.count > 1 ? 1 : 0
+                    restartAutoScrollTimer()
+                }
+            }
+            .frame(height: UIScreen.main.bounds.width - (SodaSpacing.s20 * 2))
+            .onAppear {
+                displayIndex = items.count > 1 ? 1 : 0
+                restartAutoScrollTimer()
+            }
+            .onDisappear {
+                stopAutoScrollTimer()
+            }
+        }
+    }
+
+    private var visibleItems: [BannerCarouselItem] {
+        guard items.count > 1, let first = items.first, let last = items.last else {
+            return items
+        }
+
+        return [last] + items + [first]
+    }
+
+    private var currentPage: Int {
+        guard items.count > 1 else { return items.isEmpty ? 0 : 1 }
+
+        if displayIndex == 0 {
+            return items.count
+        }
+
+        if displayIndex == items.count + 1 {
+            return 1
+        }
+
+        return displayIndex
+    }
+
+    private var pageIndicator: some View {
+        HStack(alignment: .center, spacing: 1) {
+            Text(String(format: "%02d", currentPage))
+                .foregroundColor(.white)
+                .frame(width: 20)
+
+            Text("/")
+                .foregroundColor(.gray400)
+
+            Text(String(format: "%02d", items.count))
+                .foregroundColor(.gray400)
+                .frame(width: 20)
+        }
+        .appFont(.body3)
+        .padding(.horizontal, SodaSpacing.s6)
+        .padding(.vertical, SodaSpacing.s4)
+        .background(Color.black.opacity(0.7))
+        .clipShape(Capsule())
+    }
+
+    private func dragGesture(step: CGFloat) -> some Gesture {
+        DragGesture(minimumDistance: 10)
+            .updating($dragOffset) { value, state, _ in
+                state = value.translation.width
+            }
+            .onChanged { _ in
+                if !isSwiping {
+                    isSwiping = true
+                }
+            }
+            .onEnded { value in
+                defer {
+                    DispatchQueue.main.async {
+                        isSwiping = false
+                    }
+                }
+
+                guard items.count > 1 else { return }
+
+                let threshold = step * 0.2
+                if value.translation.width < -threshold {
+                    displayIndex += 1
+                } else if value.translation.width > threshold {
+                    displayIndex -= 1
+                }
+
+                wrapIfNeeded()
+                restartAutoScrollTimer()
+            }
+    }
+
+    private func restartAutoScrollTimer() {
+        stopAutoScrollTimer()
+        guard items.count > 1 else { return }
+
+        autoScrollTimer = Timer.scheduledTimer(
+            withTimeInterval: BannerCarousel.autoScrollInterval,
+            repeats: true
+        ) { _ in
+            displayIndex += 1
+            wrapIfNeeded()
+        }
+    }
+
+    private func stopAutoScrollTimer() {
+        autoScrollTimer?.invalidate()
+        autoScrollTimer = nil
+    }
+
+    private func wrapIfNeeded() {
+        guard items.count > 1 else { return }
+
+        if displayIndex == 0 {
+            DispatchQueue.main.asyncAfter(deadline: .now() + BannerCarousel.transitionDuration) {
+                var transaction = Transaction()
+                transaction.disablesAnimations = true
+                withTransaction(transaction) {
+                    displayIndex = items.count
+                }
+            }
+        } else if displayIndex == items.count + 1 {
+            DispatchQueue.main.asyncAfter(deadline: .now() + BannerCarousel.transitionDuration) {
+                var transaction = Transaction()
+                transaction.disablesAnimations = true
+                withTransaction(transaction) {
+                    displayIndex = 1
                 }
             }
-            .frame(height: height)
-            .tabViewStyle(.page(indexDisplayMode: items.count > 1 ? .automatic : .never))
         }
     }
 }
 
 struct BannerCarousel_Previews: PreviewProvider {
     static var previews: some View {
-        BannerCarousel(items: [BannerCarouselItem(id: "1", imageUrl: nil)])
-            .background(Color.black)
-            .previewLayout(.sizeThatFits)
+        BannerCarousel(
+            items: [
+                BannerCarouselItem(id: "1", imageUrl: "https://picsum.photos/500/500"),
+                BannerCarouselItem(id: "2", imageUrl: "https://picsum.photos/500/500"),
+                BannerCarouselItem(id: "3", imageUrl: "https://picsum.photos/500/500")
+            ]
+        )
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
     }
 }