feat(chat-room) 채팅방 메시지 표시

- bottom 정렬되도록 수정

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

@@ -106,23 +106,33 @@ struct ChatRoomView: View {
                 .cornerRadius(16)
                 .frame(width: screenSize().width - 48)
                 
-                ScrollView(.vertical, showsIndicators: false) {
+                GeometryReader { geometry in
-                    VStack(spacing: 16) {
+                    ScrollViewReader { proxy in
-                        Spacer()
+                        ScrollView(.vertical, showsIndicators: false) {
-                        
+                            LazyVStack(spacing: 16) {
-                        ForEach(0..<viewModel.messages.count, id: \.self) {
+                                ForEach(0..<viewModel.messages.count, id: \.self) { index in
-                            let message = viewModel.messages[$0]
+                                    let message = viewModel.messages[index]
-                            if message.mine {
+                                    if message.mine {
-                                UserMessageItemView(message: message)
+                                        UserMessageItemView(message: message)
-                            } else {
+                                    } else {
-                                AiMessageItemView(
+                                        AiMessageItemView(
-                                    message: message,
+                                            message: message,
-                                    characterName: viewModel.characterName
+                                            characterName: viewModel.characterName
-                                )
+                                        )
+                                    }
+                                }
+                            }
+                            .padding(.horizontal, 24)
+                            .frame(minHeight: geometry.size.height, alignment: .bottom)
+                        }
+                        .onChange(of: viewModel.messages.count) { _ in
+                            if !viewModel.messages.isEmpty {
+                                withAnimation(.easeOut(duration: 0.3)) {
+                                    proxy.scrollTo(viewModel.messages.count - 1, anchor: .bottom)
+                                }
                             }
                         }
                     }
-                    .padding(.horizontal, 24)
                 }
                 .frame(width: screenSize().width)
                 .frame(maxHeight: .infinity)

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

@@ -21,30 +21,7 @@ final class ChatRoomViewModel: ObservableObject {
     
     // MARK: - Message State
     @Published var messageText: String = ""
-    @Published private(set) var messages: [ServerChatMessage] = [
+    @Published private(set) var messages: [ServerChatMessage] = []
-        ServerChatMessage(
-            messageId: 1,
-            message: "(만약에) 멈춰 인프피",
-            profileImageUrl: "",
-            mine: true,
-            createdAt: Date().currentTimeMillis(),
-            messageType: "text",
-            imageUrl: nil,
-            price: nil,
-            hasAccess: true
-        ),
-        ServerChatMessage(
-            messageId: 2,
-            message: "(언제부턴가) 너랑 노는게 제일 재밌고\n너랑 이야기 하는게 제일 신나더라,\n앞으로도 그럴 것 같아❤️",
-            profileImageUrl: "https://example.com/profile.jpg",
-            mine: false,
-            createdAt: Date().currentTimeMillis(),
-            messageType: "text",
-            imageUrl: nil,
-            price: nil,
-            hasAccess: true
-        )
-    ]
     
     // MARK: - Private
     private let userRepository = UserRepository()