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

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

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))
-                            .placeholder {
-                                Rectangle()
-                                    .fill(Color.gray.opacity(0.3))
-                                    .frame(width: maxWidth, height: imageHeight)
-                            }
-                            .resizable()
-                            .aspectRatio(4/5, contentMode: .fit)
-                            .frame(width: maxWidth, height: imageHeight)
-                            .cornerRadius(10)
+                        ZStack {
+                            KFImage(URL(string: imageUrl))
+                                .resizable()
+                                .scaledToFill() // 비율 유지하며 프레임을 채움
+                        }
+                        .frame(width: maxWidth, height: imageHeight)
+                        .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                     } 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 period: Double = 1.2   // 초
+    var color: Color = .primary
+    /// 한 주기(모든 점이 한 번 튀는 데 걸리는 시간, 초)
+    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)