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

- bottom 정렬되도록 수정

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

@@ -106,12 +106,12 @@ struct ChatRoomView: View {
                 .cornerRadius(16)
                 .frame(width: screenSize().width - 48)
                 
+                GeometryReader { geometry in
+                    ScrollViewReader { proxy in
                         ScrollView(.vertical, showsIndicators: false) {
-                    VStack(spacing: 16) {
+                            LazyVStack(spacing: 16) {
-                        Spacer()
+                                ForEach(0..<viewModel.messages.count, id: \.self) { index in
-                        
+                                    let message = viewModel.messages[index]
-                        ForEach(0..<viewModel.messages.count, id: \.self) {
-                            let message = viewModel.messages[$0]
                                     if message.mine {
                                         UserMessageItemView(message: message)
                                     } else {
@@ -123,6 +123,16 @@ struct ChatRoomView: View {
                                 }
                             }
                             .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)
+                                }
+                            }
+                        }
+                    }
                 }
                 .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()