feat(home): 최근 데뷔 크리에이터 섹션을 연결한다

SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeRecentDebutCreatorSection.swift

@@ -0,0 +1,97 @@
+import SwiftUI
+
+struct MainHomeRecentDebutCreatorSection: View {
+    let items: [HomeCreatorItem]
+    let onTapCreator: (Int) -> Void
+
+    init(
+        items: [HomeCreatorItem],
+        onTapCreator: @escaping (Int) -> Void = { _ in }
+    ) {
+        self.items = items
+        self.onTapCreator = onTapCreator
+    }
+
+    var body: some View {
+        if !items.isEmpty {
+            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
+                SectionTitle(title: I18n.HomeRecommendation.recentDebutCreatorSectionTitle)
+
+                ScrollView(.horizontal, showsIndicators: false) {
+                    LazyHStack(alignment: .center, spacing: SodaSpacing.s4) {
+                        ForEach(items, id: \.self) { item in
+                            MainHomeRecentDebutCreatorItemView(item: item) {
+                                onTapCreator(item.creatorId)
+                            }
+                        }
+                    }
+                    .padding(.horizontal, SodaSpacing.s14)
+                }
+            }
+        }
+    }
+}
+
+private struct MainHomeRecentDebutCreatorItemView: View {
+    private static let itemWidth: CGFloat = 185
+    private static let itemHeight: CGFloat = 234
+
+    let item: HomeCreatorItem
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            ZStack(alignment: .bottom) {
+                DownsampledKFImage(
+                    url: URL(string: item.creatorProfileImage),
+                    size: CGSize(width: Self.itemWidth, height: Self.itemHeight)
+                )
+                .frame(width: Self.itemWidth, height: Self.itemHeight)
+                .background(Color.gray800)
+                .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+
+                LinearGradient(
+                    colors: [Color.black.opacity(0), Color.black.opacity(0.7)],
+                    startPoint: .top,
+                    endPoint: .bottom
+                )
+                .frame(height: 80)
+
+                Text(item.creatorNickname)
+                    .appFont(.heading4)
+                    .foregroundColor(.white)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+                    .padding(.horizontal, SodaSpacing.s12)
+                    .padding(.bottom, SodaSpacing.s20)
+            }
+            .frame(width: Self.itemWidth, height: Self.itemHeight)
+            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+struct MainHomeRecentDebutCreatorSection_Previews: PreviewProvider {
+    private static let previewImageUrl = "https://picsum.photos/500/700"
+
+    static var previews: some View {
+        MainHomeRecentDebutCreatorSection(
+            items: [
+                HomeCreatorItem(
+                    creatorId: 1,
+                    creatorNickname: "크리에이터 이름",
+                    creatorProfileImage: previewImageUrl
+                ),
+                HomeCreatorItem(
+                    creatorId: 2,
+                    creatorNickname: "크리에이터 이름",
+                    creatorProfileImage: previewImageUrl
+                )
+            ]
+        )
+        .padding(.vertical, SodaSpacing.s20)
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}

SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift

@@ -37,6 +37,11 @@ struct MainHomeRecommendationView: View {
                             onTapContent: onTapContent,
                             onTapCommunity: onTapCommunity
                         )
+
+                        MainHomeRecentDebutCreatorSection(
+                            items: viewModel.recommendations?.recentDebutCreators ?? [],
+                            onTapCreator: onTapCreator
+                        )
                     }
                     .padding(.vertical, SodaSpacing.s20)
                 }