콘텐츠 메인

- 시리즈 탭 UI 페이지 생성

SodaLive/Sources/Content/Main/V2/Series/ContentMainSeriesByGenreView.swift

@@ -8,11 +8,109 @@
 import SwiftUI
 
 struct ContentMainSeriesByGenreView: View {
+    
+    let genreList: [GetSeriesGenreListResponse]
+    let itemList: [SeriesListItem]
+    let onClickGenre: (Int) -> Void
+    
+    @State private var selectedGenreId = 0
+    
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        VStack(alignment: .leading, spacing: 13.3) {
+            Text("장르별 추천 시리즈")
+                .font(.custom(Font.bold.rawValue, size: 18.3))
+                .foregroundColor(Color.grayee)
+                .padding(.horizontal, 13.3)
+            
+            ContentMainSeriesGenreView(
+                genreList: genreList,
+                selectGenre: {
+                    selectedGenreId = $0
+                    onClickGenre($0)
+                },
+                selectedGenreId: $selectedGenreId
+            )
+            
+            if !itemList.isEmpty {
+                ScrollView(.horizontal, showsIndicators: false) {
+                    HStack(spacing: 13.3) {
+                        ForEach(0..<itemList.count, id: \.self) { index in
+                            let item = itemList[index]
+                            
+                            SeriesListBigItemView(
+                                item: item,
+                                isVisibleCreator: true
+                            )
+                        }
+                    }
+                    .padding(.horizontal, 13.3)
+                }
+            } else {
+                ContentMainNoItemView()
+            }
+        }
+        .onAppear {
+            if !genreList.isEmpty {
+                selectedGenreId = genreList[0].id
+            }
+        }
     }
 }
 
 #Preview {
-    ContentMainSeriesByGenreView()
+    ContentMainSeriesByGenreView(
+        genreList: [
+            GetSeriesGenreListResponse(id: 1, genre: "test"),
+            GetSeriesGenreListResponse(id: 2, genre: "test2"),
+            GetSeriesGenreListResponse(id: 3, genre: "test3")
+        ],
+        itemList: [
+            SeriesListItem(
+                seriesId: 1,
+                title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",
+                coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
+                publishedDaysOfWeek: "매주 수, 토요일",
+                isComplete: true,
+                creator: SeriesListItemCreator(
+                    creatorId: 1,
+                    nickname: "creator",
+                    profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
+                ),
+                numberOfContent: 10,
+                isNew: false,
+                isPopular: true
+            ),
+            SeriesListItem(
+                seriesId: 2,
+                title: "제목2",
+                coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
+                publishedDaysOfWeek: "랜덤",
+                isComplete: false,
+                creator: SeriesListItemCreator(
+                    creatorId: 1,
+                    nickname: "creator",
+                    profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
+                ),
+                numberOfContent: 10,
+                isNew: true,
+                isPopular: false
+            ),
+            SeriesListItem(
+                seriesId: 2,
+                title: "제목2",
+                coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
+                publishedDaysOfWeek: "랜덤",
+                isComplete: false,
+                creator: SeriesListItemCreator(
+                    creatorId: 1,
+                    nickname: "creator",
+                    profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
+                ),
+                numberOfContent: 10,
+                isNew: true,
+                isPopular: false
+            )
+        ],
+        onClickGenre: { _ in }
+    )
 }