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

2026-07-06 20:19:27 +09:00
parent bae92eba4b
commit d129583d3b
15 changed files with 1322 additions and 1 deletions
--- a/SodaLive/Sources/V2/Main/Content/Ranking/Components/MainContentAudioRankingTopCard.swift
+++ b/SodaLive/Sources/V2/Main/Content/Ranking/Components/MainContentAudioRankingTopCard.swift
@@ -0,0 +1,93 @@
+import SwiftUI
+
+struct MainContentAudioRankingTopCard: View {
+    let item: AudioRankingItemResponse
+    let showRankChange: Bool
+    let onTapContent: (Int) -> Void
+
+    var body: some View {
+        Button {
+            onTapContent(item.contentId)
+        } label: {
+            GeometryReader { proxy in
+                let width = proxy.size.width
+                let imageSide = min(width * 0.42, proxy.size.height * 0.65)
+
+                ZStack(alignment: .topLeading) {
+                    DownsampledKFImage(
+                        url: URL(string: item.coverImageUrl ?? ""),
+                        size: CGSize(width: width, height: proxy.size.height)
+                    )
+                    .background(Color.gray800)
+                    .blur(radius: 10)
+
+                    Color.black.opacity(0.1)
+
+                    LinearGradient(
+                        colors: [Color.black.opacity(0), Color.black.opacity(0.72)],
+                        startPoint: .top,
+                        endPoint: .bottom
+                    )
+
+                    rankColumn
+                        .padding(.leading, SodaSpacing.s20)
+                        .padding(.top, SodaSpacing.s4)
+
+                    VStack(spacing: SodaSpacing.s8) {
+                        DownsampledKFImage(
+                            url: URL(string: item.coverImageUrl ?? ""),
+                            size: CGSize(width: imageSide, height: imageSide)
+                        )
+                        .background(Color.gray800)
+                        .aspectRatio(1, contentMode: .fill)
+                        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+                        .shadow(color: Color.black.opacity(0.2), radius: 15)
+
+                        VStack(spacing: 0) {
+                            Text(item.title)
+                                .appFont(size: 22, weight: .bold)
+                                .foregroundColor(.white)
+                                .lineLimit(1)
+                                .truncationMode(.tail)
+
+                            Text(item.creatorNickname)
+                                .appFont(.caption1)
+                                .foregroundColor(.white)
+                                .lineLimit(1)
+                                .truncationMode(.tail)
+                        }
+                        .frame(maxWidth: .infinity)
+                    }
+                    .padding(.horizontal, SodaSpacing.s20)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
+                }
+                .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+            }
+            .aspectRatio(1.57, contentMode: .fit)
+        }
+        .buttonStyle(.plain)
+    }
+
+    private var rankColumn: some View {
+        VStack(alignment: .center, spacing: -20) {
+            Text("\(item.rank)")
+                .appFont(size: 96, family: .pattaya)
+                .foregroundStyle(
+                    LinearGradient(
+                        colors: [.white, Color.gray200],
+                        startPoint: .top,
+                        endPoint: .bottom
+                    )
+                )
+                .shadow(color: Color.black.opacity(0.48), radius: 2)
+                .lineLimit(1)
+
+            MainContentRankChangeBadge(
+                showRankChange: showRankChange,
+                rankChange: item.rankChange,
+                isNew: item.isNew
+            )
+        }
+        .frame(width: 86, alignment: .center)
+    }
+}