feat(chat-room): 채팅방에서 메시지 보내기 API 연동

- 타이핑 indicator 동작하지 않던 버그 수정
- 이미지 4:5 비율로 보이도록 수정

SodaLive/Sources/Chat/Talk/Room/ChatRoomView.swift

@@ -139,6 +139,14 @@ struct ChatRoomView: View {
                                         }
                                     }
                                 }
+                                
+                                if viewModel.showSendingMessage {
+                                    TypingIndicatorItemView(
+                                        characterName: viewModel.characterName,
+                                        characterProfileUrl: viewModel.characterProfileUrl
+                                    )
+                                    .id(viewModel.messages.count)
+                                }
                             }
                             .padding(.horizontal, 24)
                             .frame(minHeight: geometry.size.height, alignment: .bottom)
@@ -146,7 +154,12 @@ struct ChatRoomView: View {
                         .onChange(of: viewModel.messages.count) { _ in
                             if !viewModel.messages.isEmpty {
                                 withAnimation(.easeOut(duration: 0.3)) {
-                                    proxy.scrollTo(viewModel.messages.count - 1, anchor: .bottom)
+                                    proxy.scrollTo(
+                                        viewModel.showSendingMessage ?
+                                        viewModel.messages.count :
+                                        viewModel.messages.count - 1,
+                                        anchor: .bottom
+                                    )
                                 }
                             }
                         }

SodaLive/Sources/Chat/Talk/Room/ChatRoomViewModel.swift

@@ -24,6 +24,8 @@ final class ChatRoomViewModel: ObservableObject {
     @Published private(set) var countdownText: String = "00:00:00"
     @Published private(set) var showQuotaNoticeView: Bool = false
     
+    @Published private(set) var showSendingMessage: Bool = false
+    
     // MARK: - Message State
     @Published var messageText: String = ""
     @Published private(set) var messages: [ServerChatMessage] = []
@@ -48,8 +50,59 @@ final class ChatRoomViewModel: ObservableObject {
         let message = messageText.trimmingCharacters(in: .whitespacesAndNewlines)
         messageText = ""
         
-        // TODO: 실제 메시지 전송 로직 구현
+        let nowMs = Int64(Date().timeIntervalSince1970 * 1000)
-        DEBUG_LOG("메시지 전송: \(message)")
+        
+        messages.append(
+            ServerChatMessage(
+                messageId: 0 - nowMs,
+                message: message,
+                profileImageUrl: "",
+                mine: true,
+                createdAt: nowMs,
+                messageType: "TEXT",
+                imageUrl: nil,
+                price: nil,
+                hasAccess: true
+            )
+        )
+        
+        showSendingMessage = true
+        repository.sendMessage(roomId: roomId, message: message)
+            .sink { result in
+                switch result {
+                case .finished:
+                    DEBUG_LOG("finish")
+                case .failure(let error):
+                    ERROR_LOG(error.localizedDescription)
+                }
+            } receiveValue: { [weak self] response in
+                let responseData = response.data
+                
+                do {
+                    let jsonDecoder = JSONDecoder()
+                    let decoded = try jsonDecoder.decode(ApiResponse<SendChatMessageResponse>.self, from: responseData)
+                    
+                    if let data = decoded.data, decoded.success {
+                        self?.messages.append(contentsOf: data.messages)
+                        self?.updateQuota(totalRemaining: data.totalRemaining, nextRechargeAtEpoch: data.nextRechargeAtEpoch)
+                    } else {
+                        if let message = decoded.message {
+                            self?.errorMessage = message
+                        } else {
+                            self?.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                        }
+                        
+                        self?.isShowPopup = true
+                    }
+                    
+                    self?.showSendingMessage = false
+                } catch {
+                    self?.showSendingMessage = false
+                    self?.errorMessage = "다시 시도해 주세요.\n계속 같은 문제가 발생할 경우 고객센터로 문의 주시기 바랍니다."
+                    self?.isShowPopup = true
+                }
+            }
+            .store(in: &subscription)
     }
     
     @MainActor

SodaLive/Sources/Chat/Talk/Room/Message/AiMessageItemView.swift

@@ -93,16 +93,13 @@ struct AiMessageItemView: View {
                         let maxWidth = (UIScreen.main.bounds.width - 48) * 0.7
                         let imageHeight = maxWidth * 5 / 4 // 4:5 비율
                         
-                        KFImage(URL(string: imageUrl))
+                        ZStack {
-                            .placeholder {
+                            KFImage(URL(string: imageUrl))
-                                Rectangle()
+                                .resizable()
-                                    .fill(Color.gray.opacity(0.3))
+                                .scaledToFill() // 비율 유지하며 프레임을 채움
-                                    .frame(width: maxWidth, height: imageHeight)
+                        }
-                            }
+                        .frame(width: maxWidth, height: imageHeight)
-                            .resizable()
+                        .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
-                            .aspectRatio(4/5, contentMode: .fit)
-                            .frame(width: maxWidth, height: imageHeight)
-                            .cornerRadius(10)
                     } else {
                         // 텍스트 메시지 버블
                         HStack(spacing: 10) {

SodaLive/Sources/Chat/Talk/Room/Message/TypingIndicatorItemView.swift

@@ -10,10 +10,13 @@ import Kingfisher
 
 struct TypingIndicatorItemView: View {
     var dotCount: Int = 3
-    var size: CGFloat = 6
+    var size: CGFloat = 8
     var spacing: CGFloat = 6
-    var color: Color = .secondary
+    var color: Color = .primary
-    var period: Double = 1.2   // 초
+    /// 한 주기(모든 점이 한 번 튀는 데 걸리는 시간, 초)
+    var period: Double = 1.2
+    /// 각 점의 위상 차이(라디안)
+    var phaseStep: Double = 0.7
     
     let characterName: String
     let characterProfileUrl: String
@@ -40,17 +43,22 @@ struct TypingIndicatorItemView: View {
                 HStack(spacing: 10) {
                     TimelineView(.animation) { context in
                         let t = context.date.timeIntervalSinceReferenceDate
+                        let base = (t.truncatingRemainder(dividingBy: period)) / period
                         HStack(spacing: spacing) {
                             ForEach(0..<dotCount, id: \.self) { i in
+                                let angle = base * 2 * .pi - Double(i) * phaseStep
+                                // 0...1 로 정규화된 파형
+                                let wave = (sin(angle) + 1) / 2
                                 Circle()
                                     .fill(color)
                                     .frame(width: size, height: size)
-                                    .opacity(opacity(for: i, time: t))
+                                    .scaleEffect(0.7 + 0.3 * wave)      // 0.7 ~ 1.0
+                                    .opacity(0.35 + 0.65 * wave)        // 0.35 ~ 1.0
+                                    .accessibilityHidden(true)
                             }
                         }
-                        // 레이아웃이 미세하게 흔들리지 않도록 애니메이션은 투명도에만 적용
-                        .animation(.easeInOut(duration: period / Double(dotCount)).repeatForever(autoreverses: true), value: context.date)
                     }
+                    .accessibilityLabel(Text("입력 중"))
                 }
                 .padding(.horizontal, 10)
                 .padding(.vertical, 8)