콘텐츠 메인

- 홈 UI 페이지 생성
2025-02-20 23:31:59 +09:00
parent e641636007
commit 48ebc1eaef
35 changed files with 1517 additions and 4 deletions
--- a/SodaLive/Sources/Content/Main/V2/Content/ContentMainTabRankContentView.swift
+++ b/SodaLive/Sources/Content/Main/V2/Content/ContentMainTabRankContentView.swift
@@ -0,0 +1,154 @@
+//
+//  ContentMainTabRankContentView.swift
+//  SodaLive
+//
+//  Created by klaus on 2/20/25.
+//
+
+import SwiftUI
+
+import Kingfisher
+
+struct ContentMainTabRankContentView: View {
+    
+    let rows = [
+        GridItem(.fixed(60), alignment: .leading),
+        GridItem(.fixed(60), alignment: .leading),
+        GridItem(.fixed(60), alignment: .leading)
+    ]
+    
+    let title: String
+    
+    let isMore: Bool
+    let onClickMore: () -> Void
+    
+    let sortList: [String]
+    let onClickSort: (String) -> Void
+    
+    let contentList: [GetAudioContentRankingItem]
+    
+    @State private var selectedSort = ""
+    
+    var body: some View {
+        VStack(spacing: 13.3) {
+            HStack(spacing: 0) {
+                Text(title)
+                    .font(.custom(Font.bold.rawValue, size: 18.3))
+                    .foregroundColor(Color(hex: "eeeeee"))
+                
+                Spacer()
+                
+                if isMore {
+                    Image("ic_forward")
+                        .onTapGesture { onClickMore() }
+                }
+            }
+            
+            if !sortList.isEmpty {
+                ContentMainRankingSortView(
+                    sorts: sortList,
+                    selectSort: {
+                        selectedSort = $0
+                        onClickSort($0)
+                    },
+                    selectedSort: $selectedSort
+                )
+            }
+            
+            ScrollView(.horizontal, showsIndicators: false) {
+                LazyHGrid(rows: rows, spacing: 13.3) {
+                    ForEach(0..<contentList.count, id: \.self) { index in
+                        let content = contentList[index]
+                        HStack(spacing: 0) {
+                            KFImage(URL(string: content.coverImageUrl))
+                                .cancelOnDisappear(true)
+                                .downsampling(
+                                    size: CGSize(
+                                        width: 60,
+                                        height: 60
+                                    )
+                                )
+                                .resizable()
+                                .frame(width: 60, height: 60)
+                                .cornerRadius(2.7)
+                            
+                            Text("\(index + 1)")
+                                .font(.custom(Font.bold.rawValue, size: 16.7))
+                                .foregroundColor(.button)
+                                .padding(.horizontal, 12)
+                            
+                            VStack(alignment: .leading, spacing: 8) {
+                                Text(content.title)
+                                    .lineLimit(2)
+                                    .font(.custom(Font.medium.rawValue, size: 13.3))
+                                    .foregroundColor(.grayd2)
+                                
+                                Text(content.creatorNickname)
+                                    .font(.custom(Font.medium.rawValue, size: 11))
+                                    .foregroundColor(.gray77)
+                            }
+                        }
+                        .frame(maxWidth: screenSize().width * 0.66, alignment: .leading)
+                        .contentShape(Rectangle())
+                        .onTapGesture {
+                            AppState
+                                .shared
+                                .setAppStep(step: .contentDetail(contentId: content.contentId))
+                        }
+                    }
+                }
+                .frame(height: 207)
+            }
+        }
+        .onAppear {
+            if !sortList.isEmpty {
+                selectedSort = sortList[0]
+            }
+        }
+    }
+}
+
+#Preview {
+    ContentMainTabRankContentView(
+        title: "인기 단편",
+        isMore: true,
+        onClickMore: {},
+        sortList: ["매출", "댓글", "좋아요"],
+        onClickSort: { _ in },
+        contentList: [
+            GetAudioContentRankingItem(
+                contentId: 1,
+                title: "안녕하세요 오늘은 커버곡을 들려드릴께요....안녕하세요 오늘은 커버곡을 들려드릴께요....",
+                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
+                themeStr: "커버곡",
+                price: 100,
+                duration: "00:30:20",
+                creatorId: 1,
+                creatorNickname: "유저1",
+                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
+            ),
+            GetAudioContentRankingItem(
+                contentId: 2,
+                title: "안녕하세요 오늘은 커버곡을 들려드릴께요....",
+                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
+                themeStr: "커버곡",
+                price: 0,
+                duration: "00:30:20",
+                creatorId: 2,
+                creatorNickname: "유저2",
+                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
+            ),
+            GetAudioContentRankingItem(
+                contentId: 3,
+                title: "안녕하세요 오늘은 커버곡을 들려드릴께요....안녕하세요 오늘은 커버곡을 들려드릴께요....",
+                coverImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
+                themeStr: "커버곡",
+                price: 50,
+                duration: "00:30:20",
+                creatorId: 3,
+                creatorNickname: "유저3",
+                creatorProfileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png"
+            )
+        ]
+    )
+}