feat(chat-room-bg): 배경 이미지 변경 기능 추가

SodaLive/Sources/Chat/Talk/Room/Settings/ChatBgSelectionView.swift

@@ -8,11 +8,117 @@
 import SwiftUI
 
 struct ChatBgSelectionView: View {
+    
+    @StateObject var viewModel = ChatBgSelectionViewModel()
+    
+    private let columns = Array(
+        repeating: GridItem(.flexible(), spacing: 0),
+        count: 3
+    )
+    
+    let characterId: Int64
+    let selectedBgImageId: Int
+    let onTapBgImage: (CharacterImageListItemResponse) -> Void
+    
+    @Binding var isShowing: Bool
+    
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        BaseView(isLoading: $viewModel.isLoading) {
+            VStack(spacing: 0) {
+                DetailNavigationBar(title: "배경 사진 선택") {
+                    isShowing = false
+                }
+                // 갤러리 그리드
+                ScrollView {
+                    LazyVGrid(columns: columns, spacing: 0) {
+                        ForEach(viewModel.galleryItems, id: \.self) { item in
+                            galleryImageView(item: item)
+                                .onAppear {
+                                    viewModel.loadMoreIfNeeded(currentItem: item)
+                                }
+                        }
+                    }
+                    .frame(maxWidth: screenSize().width)
+                }
+                
+                Spacer()
+            }
+            .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
+                GeometryReader { geo in
+                    HStack {
+                        Spacer()
+                        Text(viewModel.errorMessage)
+                            .padding(.vertical, 13.3)
+                            .frame(alignment: .center)
+                            .frame(maxWidth: .infinity)
+                            .padding(.horizontal, 33.3)
+                            .font(.custom(Font.medium.rawValue, size: 12))
+                            .background(Color.button)
+                            .foregroundColor(Color.white)
+                            .multilineTextAlignment(.center)
+                            .cornerRadius(20)
+                            .padding(.top, 66.7)
+                        Spacer()
+                    }
+                }
+            }
+        }
+        .onAppear {
+            viewModel.characterId = characterId
+            viewModel.loadInitialData()
+        }
+    }
+    
+    @ViewBuilder
+    private func galleryImageView(item: CharacterImageListItemResponse) -> some View {
+        GeometryReader { geo in
+            let width = geo.size.width
+            let height = width * 5 / 4
+            
+            ZStack(alignment: .bottomTrailing) {
+                // 이미지
+                AsyncImage(url: URL(string: item.imageUrl)) { image in
+                    image
+                        .resizable()
+                        .scaledToFill()
+                        .frame(width: width, height: height)
+                        .clipped()
+                } placeholder: {
+                    Rectangle()
+                        .fill(Color.gray.opacity(0.3))
+                }
+                .overlay {
+                    Rectangle()
+                        .stroke(lineWidth: 1)
+                        .foregroundColor(.button)
+                        .opacity(selectedBgImageId == item.id ? 1 : 0)
+                }
+                
+                if selectedBgImageId == item.id {
+                    Text("현재 배경")
+                        .font(.custom(Font.preRegular.rawValue, size: 12))
+                        .foregroundColor(.white)
+                        .padding(.horizontal, 6)
+                        .padding(.vertical, 2)
+                        .background(Color.button)
+                        .cornerRadius(6.7)
+                        .padding(6)
+                }
+            }
+            .frame(width: width, height: height)
+            .clipped()
+            .contentShape(Rectangle())
+            .onTapGesture { onTapBgImage(item) }
+        }
+        .aspectRatio(4/5, contentMode: .fit)
     }
 }
 
 #Preview {
-    ChatBgSelectionView()
+    ChatBgSelectionView(
+        characterId: 0,
+        selectedBgImageId: 1,
+        onTapBgImage: { _ in },
+        isShowing: .constant(true)
+    )
 }