feat: 홈 메인

- 추천 채널 UI 추가

SodaLive/Resources/Assets.xcassets/ic_comment_dark_green.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_comment_dark_green.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Resources/Assets.xcassets/ic_heart_dark_green.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_heart_dark_green.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SodaLive/Sources/Home/HomeTabView.swift

@@ -136,23 +136,27 @@ struct HomeTabView: View {
                                 HomeWeeklyChartView(contentList: viewModel.contentRanking)
                             }
                             
-                            VStack(alignment: .leading, spacing: 16) {
+                            if !viewModel.recommendChannelList.isEmpty {
-                                HStack(spacing: 0) {
+                                VStack(alignment: .leading, spacing: 16) {
-                                    Text("추천")
+                                    HStack(spacing: 0) {
-                                        .font(.custom(Font.preBold.rawValue, size: 26))
+                                        Text("추천")
-                                        .foregroundColor(.button)
+                                            .font(.custom(Font.preBold.rawValue, size: 26))
-                                    
+                                            .foregroundColor(.button)
-                                    Text(" 채널")
-                                        .font(.custom(Font.preBold.rawValue, size: 26))
-                                        .foregroundColor(.white)
-                                }
-                                .padding(.horizontal, 24)
-                                
-                                ScrollView(.horizontal, showsIndicators: false) {
-                                    HStack(spacing: 16) {
                                         
+                                        Text(" 채널")
+                                            .font(.custom(Font.preBold.rawValue, size: 26))
+                                            .foregroundColor(.white)
                                     }
                                     .padding(.horizontal, 24)
+                                    
+                                    ScrollView(.horizontal, showsIndicators: false) {
+                                        HStack(spacing: 16) {
+                                            ForEach(0..<viewModel.recommendChannelList.count, id: \.self) {
+                                                RecommendChannelItemView(item: viewModel.recommendChannelList[$0])
+                                            }
+                                        }
+                                        .padding(.horizontal, 24)
+                                    }
                                 }
                             }
                             

SodaLive/Sources/Home/RecommendChannel/RecommendChannelContentItemView.swift

@@ -0,0 +1,70 @@
+//
+//  RecommendChannelContentItemView.swift
+//  SodaLive
+//
+//  Created by klaus on 7/14/25.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct RecommendChannelContentItemView: View {
+    
+    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
+    
+    let item: RecommendChannelContentItem
+    
+    var body: some View {
+        HStack(spacing: 16) {
+            KFImage(URL(string: item.thumbnailImageUrl))
+                .resizable()
+                .frame(width: 60, height: 60)
+                .cornerRadius(12)
+            
+            VStack(alignment: .leading, spacing: 2) {
+                Text(item.title)
+                    .font(.custom(Font.preRegular.rawValue, size: 18))
+                    .foregroundColor(.white)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+                
+                HStack(spacing: 12) {
+                    HStack(spacing: 4) {
+                        Image("ic_heart_dark_green")
+                        
+                        Text("\(item.likeCount)")
+                            .font(.custom(Font.preRegular.rawValue, size: 18))
+                            .foregroundColor(Color(hex: "B0BEC5"))
+                    }
+                    
+                    HStack(spacing: 4) {
+                        Image("ic_comment_dark_green")
+                        
+                        Text("\(item.commentCount)")
+                            .font(.custom(Font.preRegular.rawValue, size: 18))
+                            .foregroundColor(Color(hex: "B0BEC5"))
+                    }
+                }
+            }
+        }
+        .onTapGesture {
+            if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
+                AppState.shared.setAppStep(step: .contentDetail(contentId: item.contentId))
+            } else {
+                AppState.shared.setAppStep(step: .login)
+            }
+        }
+    }
+}
+
+#Preview {
+    RecommendChannelContentItemView(
+        item: RecommendChannelContentItem(
+            contentId: 1,
+            title: "고품격 음악 밥솥",
+            thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
+            likeCount: 999,
+            commentCount: 99
+        )
+    )
+}

SodaLive/Sources/Home/RecommendChannel/RecommendChannelItemView.swift

@@ -0,0 +1,92 @@
+//
+//  RecommendChannelItemView.swift
+//  SodaLive
+//
+//  Created by klaus on 7/14/25.
+//
+
+import SwiftUI
+import Kingfisher
+
+struct RecommendChannelItemView: View {
+    
+    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
+    
+    let item: RecommendChannelResponse
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            HStack(spacing: 6) {
+                KFImage(URL(string: item.creatorProfileImageUrl))
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .frame(width: 80, height: 80, alignment: .top)
+                    .clipShape(Circle())
+                
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(item.creatorNickname)
+                        .font(.custom(Font.preBold.rawValue, size: 24))
+                        .foregroundColor(.white)
+                    
+                    HStack(spacing: 4) {
+                        Text("콘텐츠")
+                            .font(.custom(Font.preRegular.rawValue, size: 18))
+                            .foregroundColor(Color(hex: "B0BEC5"))
+                        
+                        Text("\(item.contentCount)")
+                            .font(.custom(Font.preBold.rawValue, size: 18))
+                            .foregroundColor(.white)
+                    }
+                }
+            }
+            
+            ForEach(0..<item.contentList.count, id: \.self) {
+                RecommendChannelContentItemView(item: item.contentList[$0])
+            }
+        }
+        .padding(20)
+        .frame(width: 280, alignment: .leading)
+        .background(
+            LinearGradient(
+                gradient: Gradient(colors: [Color(hex: "5ACDE1"), Color(hex: "2A339D")]),
+                startPoint: .topLeading,
+                endPoint: .bottomTrailing
+            )
+        )
+        .cornerRadius(16)
+    }
+}
+
+#Preview {
+    RecommendChannelItemView(
+        item: RecommendChannelResponse(
+            channelId: 1,
+            creatorNickname: "닉네임",
+            creatorProfileImageUrl: "https://cf.sodalive.net/profile/34638/34638-profile-5bfc2bac-3278-48f8-b60c-1294b615f629-8832-1751707083877",
+            contentCount: 55,
+            contentList: [
+                RecommendChannelContentItem(
+                    contentId: 1,
+                    title: "고품격 음악 밥솥",
+                    thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
+                    likeCount: 999,
+                    commentCount: 99
+                ),
+                RecommendChannelContentItem(
+                    contentId: 2,
+                    title: "고품격 음악 밥솥",
+                    thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
+                    likeCount: 999,
+                    commentCount: 99
+                ),
+                RecommendChannelContentItem(
+                    contentId: 3,
+                    title: "고품격 음악 밥솥",
+                    thumbnailImageUrl: "https://cf.sodalive.net/audio_content_cover/5819/5819-cover-20a26c55-c7a2-47ef-bca5-ce47d953dfe0-1373-1752293900615",
+                    likeCount: 999,
+                    commentCount: 99
+                )
+            ]
+        )
+    )
+}