feat(home): 랭킹 순위 UI를 추가한다

2026-06-30 16:17:02 +09:00
parent 6e3a7b21f7
commit 66dc8b29cb
5 changed files with 359 additions and 3 deletions
--- a/SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingRow.swift
+++ b/SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingRow.swift
@@ -0,0 +1,105 @@
+import SwiftUI
+
+struct MainHomeRankingRow: View {
+    let item: MainHomeCreatorRankingItem
+    let showRankChange: Bool
+    let onTapCreator: (Int) -> Void
+
+    init(
+        item: MainHomeCreatorRankingItem,
+        showRankChange: Bool,
+        onTapCreator: @escaping (Int) -> Void = { _ in }
+    ) {
+        self.item = item
+        self.showRankChange = showRankChange
+        self.onTapCreator = onTapCreator
+    }
+
+    var body: some View {
+        Button {
+            onTapCreator(item.creatorId)
+        } label: {
+            GeometryReader { proxy in
+                let rowHeight = proxy.size.height
+                let imageSide = rowHeight * 0.8
+
+                HStack(alignment: .center, spacing: SodaSpacing.s14) {
+                    rankColumn
+
+                    DownsampledKFImage(
+                        url: URL(string: item.profileImageUrl ?? ""),
+                        size: CGSize(width: imageSide, height: imageSide)
+                    )
+                    .background(Color.gray800)
+                    .aspectRatio(1, contentMode: .fit)
+                    .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+
+                    Text(item.nickname)
+                        .appFont(.heading4)
+                        .foregroundColor(.white)
+                        .lineLimit(1)
+                        .truncationMode(.tail)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                }
+                .padding(.horizontal, SodaSpacing.s14)
+                .padding(.vertical, rowHeight * 0.1)
+            }
+            .aspectRatio(3.74, contentMode: .fit)
+            .background(Color.black)
+        }
+        .buttonStyle(.plain)
+    }
+
+    private var rankColumn: some View {
+        VStack(alignment: .center, spacing: 0) {
+            Text("\(item.rank)")
+                .appFont(size: 40, family: .pattaya)
+                .foregroundStyle(
+                    LinearGradient(
+                        colors: [.white, Color.gray200],
+                        startPoint: .top,
+                        endPoint: .bottom
+                    )
+                )
+                .shadow(color: Color.black.opacity(0.48), radius: 2)
+                .lineLimit(1)
+                .frame(maxWidth: .infinity, alignment: .center)
+
+            MainHomeRankChangeBadge(
+                showRankChange: showRankChange,
+                rankChange: item.rankChange,
+                isNew: item.isNew
+            )
+            .frame(maxWidth: .infinity, alignment: .center)
+        }
+        .frame(width: 49, alignment: .center)
+    }
+}
+
+struct MainHomeRankingRow_Previews: PreviewProvider {
+    private static let previewImageUrl = "https://picsum.photos/500/500"
+
+    static var previews: some View {
+        VStack(spacing: SodaSpacing.s8) {
+            MainHomeRankingRow(item: previewItem(rank: 11, rankChange: 5, isNew: false), showRankChange: true)
+            MainHomeRankingRow(item: previewItem(rank: 12, rankChange: -3, isNew: false), showRankChange: true)
+            MainHomeRankingRow(item: previewItem(rank: 13, rankChange: 0, isNew: false), showRankChange: true)
+            MainHomeRankingRow(item: previewItem(rank: 14, rankChange: nil, isNew: true), showRankChange: true)
+            MainHomeRankingRow(item: previewItem(rank: 15, rankChange: 2, isNew: false), showRankChange: false)
+        }
+        .padding(SodaSpacing.s20)
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+
+    private static func previewItem(rank: Int, rankChange: Int?, isNew: Bool) -> MainHomeCreatorRankingItem {
+        MainHomeCreatorRankingItem(
+            rank: rank,
+            rankChange: rankChange,
+            isNew: isNew,
+            creatorId: rank,
+            nickname: "크리에이터이름",
+            profileImageUrl: previewImageUrl
+        )
+    }
+}