라이브 전체보기 그리드 레이아웃 조정

SodaLive/Sources/Live/Now/All/LiveNowAllView.swift

@@ -13,13 +13,15 @@ struct LiveNowAllView: View {
     @StateObject var viewModel = LiveViewModel()
     @StateObject var liveAllViewModel = LiveAllViewModel()
     
-    let columns = [
-        GridItem(.flexible(), alignment: .top),
-        GridItem(.flexible(), alignment: .top)
-    ]
-    
     let spacing: CGFloat = 16
     
+    var columns: [GridItem] {
+        [
+            GridItem(.flexible(), spacing: spacing, alignment: .top),
+            GridItem(.flexible(), spacing: spacing, alignment: .top)
+        ]
+    }
+    
     let onClickParticipant: (Int) -> Void
     
     var body: some View {
@@ -36,11 +38,13 @@ struct LiveNowAllView: View {
                             viewModel.getLiveNowList()
                         },
                         content: {
+                            let itemWidth = (proxy.size.width - (spacing * 3)) / 2
+                            
                             LazyVGrid(columns: columns, spacing: spacing) {
                                 ForEach(0..<viewModel.liveNowItems.count, id: \.self) { index in
                                     let item = viewModel.liveNowItems[index]
                                     
-                                    LiveNowAllItemView(item: item, itemWidth: (screenSize().width - (spacing * (CGFloat(columns.count + 1)))) / 2)
+                                    LiveNowItemView(item: item, itemWidth: itemWidth)
                                         .contentShape(Rectangle())
                                         .onTapGesture {
                                             self.liveAllViewModel.selectedRoomId = item.roomId
@@ -55,6 +59,8 @@ struct LiveNowAllView: View {
                                         }
                                 }
                             }
+                            .padding(.horizontal, spacing)
+                            .padding(.top, spacing)
                         }
                     )
                     

SodaLive/Sources/Live/Now/LiveNowItemView.swift

@@ -11,6 +11,18 @@ import Kingfisher
 struct LiveNowItemView: View {
     
     let item: GetRoomListResponse
+    let itemWidth: CGFloat?
+    
+    private let defaultWidth: CGFloat = 144
+    private let defaultHeight: CGFloat = 204
+    
+    private var resolvedWidth: CGFloat {
+        itemWidth ?? defaultWidth
+    }
+    
+    private var resolvedHeight: CGFloat {
+        resolvedWidth * defaultHeight / defaultWidth
+    }
     
     var body: some View {
         ZStack(alignment: .top) {
@@ -93,7 +105,7 @@ struct LiveNowItemView: View {
             }
         }
         .padding(10)
-        .frame(width: 144, height: 204, alignment: .top)
+        .frame(width: resolvedWidth, height: resolvedHeight, alignment: .top)
         .background(Color(hex: "263238"))
         .cornerRadius(16)
     }
@@ -119,7 +131,8 @@ struct LiveNowItemView_Previews: PreviewProvider {
                 creatorId: 19,
                 isReservation: false,
                 isPrivateRoom: false
-            )
+            ),
+            itemWidth: 144
         )
     }
 }

SodaLive/Sources/Live/Now/SectionLiveNowView.swift

@@ -40,7 +40,7 @@ struct SectionLiveNowView: View {
                 ScrollView(.horizontal, showsIndicators: false) {
                     LazyHStack(alignment: .top, spacing: 16) {
                         ForEach(items, id: \.self) { item in
-                            LiveNowItemView(item: item)
+                            LiveNowItemView(item: item, itemWidth: nil)
                                 .contentShape(Rectangle())
                                 .onTapGesture {
                                     if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {