탐색 - 크리에이터 랭킹 UI 추가
This commit is contained in:
		
							
								
								
									
										137
									
								
								SodaLive/Sources/Explorer/ExplorerSectionView.swift
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										137
									
								
								SodaLive/Sources/Explorer/ExplorerSectionView.swift
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,137 @@
 | 
			
		||||
//
 | 
			
		||||
//  ExplorerSectionView.swift
 | 
			
		||||
//  SodaLive
 | 
			
		||||
//
 | 
			
		||||
//  Created by klaus on 2023/10/14.
 | 
			
		||||
//
 | 
			
		||||
 | 
			
		||||
import SwiftUI
 | 
			
		||||
import Kingfisher
 | 
			
		||||
 | 
			
		||||
struct ExplorerSectionView: View {
 | 
			
		||||
    
 | 
			
		||||
    let section: GetExplorerSectionResponse
 | 
			
		||||
    let rankingCrawns = ["ic_crown_1", "ic_crown_2", "ic_crown_3"]
 | 
			
		||||
    let rankingColors = [
 | 
			
		||||
        [Color(hex: "ffdc00"), Color(hex: "ffb600")],
 | 
			
		||||
        [Color(hex: "ffffff"), Color(hex: "9f9f9f")],
 | 
			
		||||
        [Color(hex: "e6a77a"), Color(hex: "c67e4a")],
 | 
			
		||||
        [Color(hex: "ffffff").opacity(0), Color(hex: "ffffff").opacity(0)]
 | 
			
		||||
    ]
 | 
			
		||||
    
 | 
			
		||||
    var body: some View {
 | 
			
		||||
        VStack(alignment: .leading, spacing: 13.3) {
 | 
			
		||||
            VStack(alignment: .leading, spacing: 4) {
 | 
			
		||||
                if let coloredTitle = section.coloredTitle, let color = section.color {
 | 
			
		||||
                    let titleArray = section.title.components(separatedBy: coloredTitle)
 | 
			
		||||
                    HStack(spacing: 0) {
 | 
			
		||||
                        Text(titleArray[0])
 | 
			
		||||
                            .font(.custom(Font.bold.rawValue, size: 18.3))
 | 
			
		||||
                            .foregroundColor(Color(hex: "eeeeee"))
 | 
			
		||||
                        
 | 
			
		||||
                        Text(coloredTitle)
 | 
			
		||||
                            .font(.custom(Font.bold.rawValue, size: 18.3))
 | 
			
		||||
                            .foregroundColor(Color(hex: color))
 | 
			
		||||
                        
 | 
			
		||||
                        if titleArray.count > 1 {
 | 
			
		||||
                            Text(titleArray[1])
 | 
			
		||||
                                .font(.custom(Font.bold.rawValue, size: 18.3))
 | 
			
		||||
                                .foregroundColor(Color(hex: "eeeeee"))
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                } else {
 | 
			
		||||
                    Text(section.title)
 | 
			
		||||
                        .font(.custom(Font.bold.rawValue, size: 18.3))
 | 
			
		||||
                        .foregroundColor(Color(hex: "eeeeee"))
 | 
			
		||||
                }
 | 
			
		||||
                
 | 
			
		||||
                if let desc = section.desc {
 | 
			
		||||
                    Text(desc)
 | 
			
		||||
                        .font(.custom(Font.medium.rawValue, size: 11))
 | 
			
		||||
                        .foregroundColor(Color(hex: "777777"))
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
            .frame(width: screenSize().width - 26.7, alignment: .leading)
 | 
			
		||||
            
 | 
			
		||||
            ScrollView(.horizontal, showsIndicators: false) {
 | 
			
		||||
                HStack(spacing: 13.3) {
 | 
			
		||||
                    ForEach(0..<section.creators.count, id: \.self) { index in
 | 
			
		||||
                        let creator = section.creators[index]
 | 
			
		||||
                        VStack(spacing: 0) {
 | 
			
		||||
                            if let desc = section.desc {
 | 
			
		||||
                                ZStack {
 | 
			
		||||
                                    KFImage(URL(string: creator.profileImageUrl))
 | 
			
		||||
                                        .cancelOnDisappear(true)
 | 
			
		||||
                                        .downsampling(size: CGSize(width: 90, height: 90))
 | 
			
		||||
                                        .resizable()
 | 
			
		||||
                                        .clipShape(Circle())
 | 
			
		||||
                                        .frame(width: 90, height: 90)
 | 
			
		||||
                                        .overlay(
 | 
			
		||||
                                            Circle()
 | 
			
		||||
                                                .stroke(
 | 
			
		||||
                                                    AngularGradient(colors: rankingColors[index < 4 ? index : 3], center: .center),
 | 
			
		||||
                                                    lineWidth: 3
 | 
			
		||||
                                                )
 | 
			
		||||
                                        )
 | 
			
		||||
                                    
 | 
			
		||||
                                    if index < 3 {
 | 
			
		||||
                                        VStack(alignment: .trailing, spacing: 0) {
 | 
			
		||||
                                            Spacer()
 | 
			
		||||
                                            
 | 
			
		||||
                                            Image(rankingCrawns[index])
 | 
			
		||||
                                                .resizable()
 | 
			
		||||
                                                .frame(width: 37, height: 37)
 | 
			
		||||
                                        }
 | 
			
		||||
                                        .frame(width: 93.3, height: 93.3, alignment: .trailing)
 | 
			
		||||
                                    }
 | 
			
		||||
                                }
 | 
			
		||||
                                .frame(width: 93.3, height: 93.3)
 | 
			
		||||
                            } else {
 | 
			
		||||
                                KFImage(URL(string: creator.profileImageUrl))
 | 
			
		||||
                                    .cancelOnDisappear(true)
 | 
			
		||||
                                    .downsampling(size: CGSize(width: 93, height: 93))
 | 
			
		||||
                                    .resizable()
 | 
			
		||||
                                    .clipShape(Circle())
 | 
			
		||||
                                    .frame(width: 93, height: 93)
 | 
			
		||||
                            }
 | 
			
		||||
                            
 | 
			
		||||
                            Text(creator.nickname)
 | 
			
		||||
                                .font(.custom(Font.medium.rawValue, size: 11.3))
 | 
			
		||||
                                .foregroundColor(Color(hex: "eeeeee"))
 | 
			
		||||
                                .lineLimit(1)
 | 
			
		||||
                                .frame(width: 93.3)
 | 
			
		||||
                                .padding(.top, 13.3)
 | 
			
		||||
                            
 | 
			
		||||
                            Text(creator.tags)
 | 
			
		||||
                                .font(.custom(Font.medium.rawValue, size: 10))
 | 
			
		||||
                                .foregroundColor(Color(hex: "9970ff"))
 | 
			
		||||
                                .lineLimit(1)
 | 
			
		||||
                                .frame(width: 93.3)
 | 
			
		||||
                                .padding(.top, 3.3)
 | 
			
		||||
                        }
 | 
			
		||||
                        .contentShape(Rectangle())
 | 
			
		||||
                        .onTapGesture {
 | 
			
		||||
                            AppState.shared
 | 
			
		||||
                                .setAppStep(step: .creatorDetail(userId: creator.id))
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
            .frame(width: screenSize().width - 26.7, alignment: .leading)
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
struct ExplorerSectionView_Previews: PreviewProvider {
 | 
			
		||||
    static var previews: some View {
 | 
			
		||||
        ExplorerSectionView(
 | 
			
		||||
            section: GetExplorerSectionResponse(
 | 
			
		||||
                title: "",
 | 
			
		||||
                coloredTitle: nil,
 | 
			
		||||
                color: nil,
 | 
			
		||||
                desc: nil,
 | 
			
		||||
                creators: []
 | 
			
		||||
            )
 | 
			
		||||
        )
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user