콘텐츠 메인

- 시리즈 탭 UI 페이지 생성

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

@@ -8,11 +8,51 @@
 import SwiftUI
 
 struct ContentMainSeriesGenreView: View {
+    let genreList: [GetSeriesGenreListResponse]
+    let selectGenre: (Int) -> Void
+    
+    @Binding var selectedGenreId: Int
+    
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack(alignment: .top, spacing: 8) {
+                ForEach(0..<genreList.count, id: \.self) { index in
+                    let genre = genreList[index]
+                    Text(genre.genre)
+                        .font(.custom(Font.medium.rawValue, size: 14.7))
+                        .foregroundColor(selectedGenreId == genre.id ? Color.button : Color.gray77)
+                        .padding(.horizontal, 13.3)
+                        .padding(.vertical, 9.3)
+                        .border(
+                            selectedGenreId == genre.id ? Color.button : Color.grayee,
+                            width: 1
+                        )
+                        .cornerRadius(16.7)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: CGFloat(16.7))
+                                .stroke(lineWidth: 1)
+                                .foregroundColor(selectedGenreId == genre.id ? Color.button : Color.grayee)
+                        )
+                        .onTapGesture {
+                            if selectedGenreId != genre.id {
+                                selectGenre(genre.id)
+                            }
+                        }
+                }
+            }
+            .padding(.horizontal, 13.3)
+        }
     }
 }
 
 #Preview {
-    ContentMainSeriesGenreView()
+    ContentMainSeriesGenreView(
+        genreList: [
+            GetSeriesGenreListResponse(id: 1, genre: "test"),
+            GetSeriesGenreListResponse(id: 2, genre: "test2"),
+            GetSeriesGenreListResponse(id: 3, genre: "test3")
+        ],
+        selectGenre: { _ in },
+        selectedGenreId: .constant(2)
+    )
 }