feat(creator): 후원 탭 UI 조각을 추가한다

2026-07-04 22:44:48 +09:00
parent e75d836b99
commit 02b56ac6da
4 changed files with 226 additions and 0 deletions
--- a/SodaLive/Sources/V2/CreatorChannel/Donation/Components/CreatorChannelDonationRankingSection.swift
+++ b/SodaLive/Sources/V2/CreatorChannel/Donation/Components/CreatorChannelDonationRankingSection.swift
@@ -0,0 +1,109 @@
+import SwiftUI
+
+struct CreatorChannelDonationRankingSection: View {
+    let rankings: [MemberDonationRankingResponse]
+    let onTapViewAll: () -> Void
+
+    var body: some View {
+        if rankings.isEmpty == false {
+            VStack(alignment: .leading, spacing: SodaSpacing.s14) {
+                Text("후원 랭킹")
+                    .appFont(size: 20, weight: .bold)
+                    .foregroundColor(.white)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                LazyVGrid(columns: columns, spacing: SodaSpacing.s14) {
+                    ForEach(displayRankings.indices, id: \.self) { rank in
+                        rankingItem(rank: rank, ranking: displayRankings[rank])
+                    }
+                }
+
+                Button(action: onTapViewAll) {
+                    Text("전체보기")
+                        .appFont(size: 16, weight: .medium)
+                        .foregroundColor(.white)
+                        .frame(maxWidth: .infinity)
+                        .frame(height: 36)
+                        .overlay(
+                            Capsule()
+                                .stroke(Color.white.opacity(0.3), lineWidth: 1)
+                        )
+                        .contentShape(Rectangle())
+                }
+                .buttonStyle(.plain)
+            }
+            .padding(SodaSpacing.s14)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(Color.gray900)
+            .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+            .padding(.horizontal, SodaSpacing.s14)
+            .padding(.bottom, SodaSpacing.s14)
+        }
+    }
+
+    private var displayRankings: [MemberDonationRankingResponse] {
+        Array(rankings.prefix(8))
+    }
+
+    private var columns: [GridItem] {
+        [
+            GridItem(.flexible(), spacing: SodaSpacing.s14),
+            GridItem(.flexible(), spacing: SodaSpacing.s14),
+            GridItem(.flexible(), spacing: SodaSpacing.s14),
+            GridItem(.flexible(), spacing: SodaSpacing.s14)
+        ]
+    }
+
+    private func rankingItem(rank: Int, ranking: MemberDonationRankingResponse) -> some View {
+        VStack(spacing: SodaSpacing.s8) {
+            GeometryReader { proxy in
+                let imageSize = min(proxy.size.width, 75)
+
+                ZStack(alignment: .bottom) {
+                    DownsampledKFImage(
+                        url: URL(string: ranking.profileImage),
+                        size: CGSize(width: imageSize, height: imageSize)
+                    )
+                    .frame(width: imageSize, height: imageSize)
+                    .background(Color.gray800)
+                    .clipShape(Circle())
+
+                    Text("\(rank + 1)")
+                        .appFont(size: 28, weight: .regular, family: .pattaya)
+                        .foregroundColor(.white)
+                        .shadow(color: Color.black.opacity(0.8), radius: 3, x: 0, y: 2)
+                        .shadow(color: Color.black.opacity(0.4), radius: 1, x: 0, y: 0)
+                        .offset(y: SodaSpacing.s4)
+                        .padding(.bottom, -12)
+                }
+                .frame(width: imageSize, height: imageSize)
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+            }
+            .aspectRatio(1, contentMode: .fit)
+
+            Text(ranking.nickname)
+                .appFont(size: 14, weight: .medium)
+                .foregroundColor(.white)
+                .lineLimit(1)
+                .truncationMode(.tail)
+                .multilineTextAlignment(.center)
+                .frame(maxWidth: 75)
+        }
+        .frame(maxWidth: .infinity)
+    }
+}
+
+struct CreatorChannelDonationRankingSection_Previews: PreviewProvider {
+    static var previews: some View {
+        CreatorChannelDonationRankingSection(
+            rankings: [
+                MemberDonationRankingResponse(userId: 1, nickname: "첫 번째 팬", profileImage: "https://picsum.photos/120/120?1", donationCan: 100),
+                MemberDonationRankingResponse(userId: 2, nickname: "두 번째 팬", profileImage: "https://picsum.photos/120/120?2", donationCan: 80),
+                MemberDonationRankingResponse(userId: 3, nickname: "세 번째 팬", profileImage: "https://picsum.photos/120/120?3", donationCan: 60)
+            ],
+            onTapViewAll: {}
+        )
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}