feat(character): 캐릭터 메인 화면 구현 및 Combine 기반 리팩터링

- 배너/최근/신규/큐레이션 섹션 UI 구성 및 데이터 바인딩
- 네트워크 이미지 로더를 Kingfisher(KFImage)로 교체하여 캐싱/재시도 지원
- CharacterApi에 토큰 헤더 포함, GET /api/chat/character/main 연동

SodaLive/Sources/Chat/Character/CharacterView.swift

@@ -8,17 +8,85 @@
 import SwiftUI
 
 struct CharacterView: View {
-  var body: some View {
-    VStack(spacing: 12) {
-      Spacer()
-      Text("캐릭터 페이지 (준비중)")
-        .font(.custom(Font.preMedium.rawValue, size: 16))
-        .multilineTextAlignment(.center)
-      Spacer()
+    @StateObject var viewModel = CharacterViewModel()
+    
+    private let horizontalPadding: CGFloat = 16
+    
+    var body: some View {
+        BaseView(isLoading: $viewModel.isLoading) {
+            ScrollView(.vertical, showsIndicators: false) {
+                VStack(alignment: .leading, spacing: 24) {
+                    // 배너
+                    if !viewModel.banners.isEmpty {
+                        AutoSlideCharacterBannerView(items: viewModel.banners) { banner in
+                            DEBUG_LOG("Banner tapped: \(banner.characterId)")
+                        }
+                    }
+                    
+                    // 최근 대화한 캐릭터 섹션
+                    if !viewModel.recentCharacters.isEmpty {
+                        RecentCharacterSectionView(
+                            titleCount: viewModel.recentCharacters.count,
+                            items: viewModel.recentCharacters
+                        ) { ch in
+                            DEBUG_LOG("Recent tapped: \(ch.characterId)")
+                        }
+                    }
+                    
+                    // 신규 캐릭터 섹션
+                    if !viewModel.newCharacters.isEmpty {
+                        CharacterSectionView(
+                            title: "신규 캐릭터",
+                            items: viewModel.newCharacters
+                        ) { ch in
+                            DEBUG_LOG("New tapped: \(ch.characterId)")
+                        }
+                    }
+                    
+                    // 큐레이션 섹션 (여러 섹션)
+                    if !viewModel.curations.isEmpty {
+                        VStack(alignment: .leading, spacing: 24) {
+                            ForEach(viewModel.curations.indices, id: \.self) { idx in
+                                let section = viewModel.curations[idx]
+                                CharacterSectionView(
+                                    title: section.title,
+                                    items: section.characters
+                                ) { ch in
+                                    DEBUG_LOG("Curation tapped: \\(ch.characterId)")
+                                }
+                            }
+                        }
+                    }
+                }
+                .padding(.vertical, 24)
+            }
+            .background(Color.black.ignoresSafeArea())
+            .onAppear {
+                if !viewModel.isLoading {
+                    viewModel.getCharacterMain()
+                }
+            }
+        }
+        .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
+            GeometryReader { geo in
+                HStack {
+                    Spacer()
+                    Text(viewModel.errorMessage)
+                        .padding(.vertical, 13.3)
+                        .frame(width: geo.size.width - 66.7, alignment: .center)
+                        .font(.custom(Font.medium.rawValue, size: 12))
+                        .background(Color.button)
+                        .foregroundColor(Color.white)
+                        .multilineTextAlignment(.center)
+                        .cornerRadius(20)
+                        .padding(.top, 66.7)
+                    Spacer()
+                }
+            }
+        }
     }
-  }
 }
 
 #Preview {
-  CharacterView()
+    CharacterView()
 }