perf(banner): TabView 프리로딩 완화·다운샘플링·요청취소 적용

배너/캐러셀에서 인접 페이지 프리로딩과 원본 해상도 디코딩으로
발생하던 메모리 스파이크와 중복 로드를 완화했습니다.

- 각 페이지에서 이미지 URL을 onAppear에 바인딩, onDisappear에 nil 해제
  → 인접 페이지 프리로딩 시 중복 로드·디코딩 방지, 요청 취소 실효
- 모든 KFImage에 cancelOnDisappear(true) 일관 적용
- 큰 배너 이미지에 downsampling(size:) 적용(디코딩 메모리 절감)
- 자동 슬라이드 주기 3초 → 4초로 완화(동시 로드 빈도 감소)
- TabView 페이지를 서브뷰로 분리하여 뷰 로직 단순화 및 재사용성 향상

결과: 동시 디코딩 감소, 피크 메모리 사용량 하락, 자동 슬라이드 안정성 개선

SodaLive/Sources/Chat/Character/Banner/AutoSlideCharacterBannerView.swift

@@ -21,18 +21,13 @@ struct AutoSlideCharacterBannerView: View {
             TabView(selection: $currentIndex) {
                 ForEach(0..<items.count, id: \.self) { index in
                     let item = items[index]
-                    KFImage(URL(string: item.imageUrl))
-                        .placeholder { Color.gray.opacity(0.2) }
-                        .retry(maxCount: 2, interval: .seconds(1))
-                        .cancelOnDisappear(true)
-                        .resizable()
-                        .scaledToFill()
-                        .frame(height: height)
-                        .clipped()
-                        .cornerRadius(12)
-                        .contentShape(Rectangle())
-                        .tag(index)
-                        .onTapGesture { onTap(item) }
+                    AutoSlideCharacterBannerPage(
+                        item: item,
+                        width: screenSize().width,
+                        height: height,
+                        onTap: onTap
+                    )
+                    .tag(index)
                 }
             }
             .tabViewStyle(.page(indexDisplayMode: .never))
@@ -77,3 +72,44 @@ struct AutoSlideCharacterBannerView: View {
     .padding()
     .background(Color.black)
 }
+
+
+private struct AutoSlideCharacterBannerPage: View {
+    let item: CharacterBannerResponse
+    let width: CGFloat
+    let height: CGFloat
+    let onTap: (CharacterBannerResponse) -> Void
+    @State private var boundURL: URL?
+    
+    var body: some View {
+        Group {
+            if let boundURL {
+                KFImage(boundURL)
+                    .placeholder { Color.gray.opacity(0.2) }
+                    .retry(maxCount: 2, interval: .seconds(1))
+                    .cancelOnDisappear(true)
+                    .downsampling(size: CGSize(width: width, height: height))
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: width, height: height)
+                    .clipped()
+                    .cornerRadius(12)
+            } else {
+                Color.clear
+                    .frame(width: width, height: height)
+                    .cornerRadius(12)
+            }
+        }
+        .contentShape(Rectangle())
+        .onTapGesture { onTap(item) }
+        .onAppear {
+            let encoded = item.imageUrl.addingPercentEncoding(
+                withAllowedCharacters: .urlQueryAllowed
+            ) ?? item.imageUrl
+            boundURL = URL(string: encoded)
+        }
+        .onDisappear {
+            boundURL = nil
+        }
+    }
+}