feat(content): 랭킹 유형 탭을 추가한다

SodaLive/Sources/V2/Main/Content/Ranking/MainContentRankingView.swift

@@ -14,13 +14,23 @@ struct MainContentRankingView: View {
             Color.black
                 .ignoresSafeArea()
 
-            if viewModel.isLoading && !viewModel.hasLoaded {
-                ProgressView()
-                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
-            } else if viewModel.shouldShowEmptyState {
-                MainContentAudioRankingEmptyStateView(message: viewModel.emptyStateMessage)
-            } else {
-                rankingContent
+            VStack(spacing: 0) {
+                MainContentRankingTypeTabBar(
+                    items: AudioRankingType.allCases,
+                    selectedItem: selectedTypeBinding,
+                    title: { $0.title }
+                )
+
+                if viewModel.isLoading && !viewModel.hasLoaded {
+                    ProgressView()
+                        .progressViewStyle(CircularProgressViewStyle(tint: .white))
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
+                } else if viewModel.shouldShowEmptyState {
+                    MainContentAudioRankingEmptyStateView(message: viewModel.emptyStateMessage)
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
+                } else {
+                    rankingContent
+                }
             }
         }
         .onAppear {
@@ -93,6 +103,13 @@ struct MainContentRankingView: View {
         [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
     }
 
+    private var selectedTypeBinding: Binding<AudioRankingType> {
+        Binding(
+            get: { viewModel.selectedType },
+            set: { viewModel.selectType($0) }
+        )
+    }
+
     private var topItem: AudioRankingItemResponse? {
         viewModel.items.first { $0.rank == 1 }
     }
@@ -109,3 +126,54 @@ struct MainContentRankingView: View {
         viewModel.items.filter { 11...20 ~= $0.rank }
     }
 }
+
+private struct MainContentRankingTypeTabBar: View {
+    let items: [AudioRankingType]
+    @Binding var selectedItem: AudioRankingType
+    let title: (AudioRankingType) -> String
+
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            LazyHStack(alignment: .center, spacing: SodaSpacing.s8) {
+                ForEach(items, id: \.self) { item in
+                    MainContentRankingTypeTabBarItem(
+                        title: title(item),
+                        isSelected: selectedItem == item,
+                        action: { selectedItem = item }
+                    )
+                }
+            }
+            .padding(.horizontal, SodaSpacing.s14)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(height: 52, alignment: .center)
+        .background(Color.black)
+    }
+}
+
+private struct MainContentRankingTypeTabBarItem: View {
+    let title: String
+    let isSelected: Bool
+    let action: () -> Void
+
+    var body: some View {
+        Button {
+            action()
+        } label: {
+            Text(title)
+                .appFont(size: 14, weight: .medium)
+                .foregroundColor(isSelected ? Color.black : Color.white)
+                .lineLimit(1)
+                .padding(.horizontal, SodaSpacing.s12)
+                .padding(.vertical, SodaSpacing.s8)
+                .frame(height: 34)
+                .background(isSelected ? Color.white : Color.black)
+                .clipShape(Capsule())
+                .overlay(
+                    Capsule()
+                        .stroke(isSelected ? Color.white : Color.gray700, lineWidth: 1)
+                )
+        }
+        .buttonStyle(.plain)
+    }
+}