181 lines
		
	
	
		
			7.9 KiB
		
	
	
	
		
			Swift
		
	
	
	
	
	
			
		
		
	
	
			181 lines
		
	
	
		
			7.9 KiB
		
	
	
	
		
			Swift
		
	
	
	
	
	
//
 | 
						|
//  ContentMainTabHomeRankCreatorView.swift
 | 
						|
//  SodaLive
 | 
						|
//
 | 
						|
//  Created by klaus on 2/20/25.
 | 
						|
//
 | 
						|
 | 
						|
import SwiftUI
 | 
						|
import Kingfisher
 | 
						|
 | 
						|
struct ContentMainTabHomeRankCreatorView: View {
 | 
						|
    
 | 
						|
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
 | 
						|
    
 | 
						|
    let response: 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: 0) {
 | 
						|
            if let desc = response.desc, !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
 | 
						|
                VStack(spacing: 8) {
 | 
						|
                    Text("\(desc)")
 | 
						|
                        .font(.custom(Font.bold.rawValue, size: 14.7))
 | 
						|
                        .foregroundColor(Color.grayee)
 | 
						|
                    
 | 
						|
                    Text("※ 인기 순위는 매주 업데이트됩니다.")
 | 
						|
                        .font(.custom(Font.light.rawValue, size: 13.3))
 | 
						|
                        .foregroundColor(Color.graybb)
 | 
						|
                }
 | 
						|
                .padding(.vertical, 8)
 | 
						|
                .frame(maxWidth: .infinity)
 | 
						|
                .background(Color.gray22)
 | 
						|
            }
 | 
						|
            
 | 
						|
            if let coloredTitle = response.coloredTitle, let color = response.color {
 | 
						|
                let titleArray = response.title.components(separatedBy: coloredTitle)
 | 
						|
                HStack(spacing: 0) {
 | 
						|
                    Text(titleArray[0])
 | 
						|
                        .font(.custom(Font.bold.rawValue, size: 18.3))
 | 
						|
                        .foregroundColor(Color.grayee)
 | 
						|
                    
 | 
						|
                    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.grayee)
 | 
						|
                    }
 | 
						|
                }
 | 
						|
                .padding(.top, token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty ? 0 : 30)
 | 
						|
            } else {
 | 
						|
                Text(response.title)
 | 
						|
                    .font(.custom(Font.bold.rawValue, size: 18.3))
 | 
						|
                    .foregroundColor(Color.grayee)
 | 
						|
                    .padding(.top, 30)
 | 
						|
            }
 | 
						|
            
 | 
						|
            ScrollView(.horizontal, showsIndicators: false) {
 | 
						|
                HStack(spacing: 13.3) {
 | 
						|
                    ForEach(0..<response.creators.count, id: \.self) { index in
 | 
						|
                        let creator = response.creators[index]
 | 
						|
                        VStack(spacing: 0) {
 | 
						|
                            if let _ = response.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.grayee)
 | 
						|
                                .lineLimit(1)
 | 
						|
                                .frame(width: 93.3)
 | 
						|
                                .padding(.top, 13.3)
 | 
						|
                            
 | 
						|
                            Text(creator.tags)
 | 
						|
                                .font(.custom(Font.medium.rawValue, size: 10))
 | 
						|
                                .foregroundColor(Color.button)
 | 
						|
                                .lineLimit(1)
 | 
						|
                                .frame(width: 93.3)
 | 
						|
                                .padding(.top, 3.3)
 | 
						|
                        }
 | 
						|
                        .contentShape(Rectangle())
 | 
						|
                        .onTapGesture {
 | 
						|
                            if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
 | 
						|
                                AppState.shared
 | 
						|
                                    .setAppStep(step: .creatorDetail(userId: creator.id))
 | 
						|
                            } else {
 | 
						|
                                AppState.shared
 | 
						|
                                    .setAppStep(step: .login)
 | 
						|
                            }
 | 
						|
                        }
 | 
						|
                    }
 | 
						|
                }
 | 
						|
            }
 | 
						|
            .padding(.top, 13.3)
 | 
						|
        }
 | 
						|
    }
 | 
						|
}
 | 
						|
 | 
						|
#Preview {
 | 
						|
    ContentMainTabHomeRankCreatorView(
 | 
						|
        response: GetExplorerSectionResponse(
 | 
						|
            title: "인기 크리에이터",
 | 
						|
            coloredTitle: "인기",
 | 
						|
            color: "ff5c49",
 | 
						|
            desc: "2025년 02월 10일 ~ 02월 16일",
 | 
						|
            creators: [
 | 
						|
                GetExplorerSectionCreatorResponse(
 | 
						|
                    id: 1,
 | 
						|
                    nickname: "User1",
 | 
						|
                    tags: "",
 | 
						|
                    profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
 | 
						|
                    follow: false
 | 
						|
                ),
 | 
						|
                GetExplorerSectionCreatorResponse(
 | 
						|
                    id: 2,
 | 
						|
                    nickname: "User2",
 | 
						|
                    tags: "",
 | 
						|
                    profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
 | 
						|
                    follow: false
 | 
						|
                ),
 | 
						|
                GetExplorerSectionCreatorResponse(
 | 
						|
                    id: 3,
 | 
						|
                    nickname: "User3",
 | 
						|
                    tags: "",
 | 
						|
                    profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
 | 
						|
                    follow: false
 | 
						|
                ),
 | 
						|
                GetExplorerSectionCreatorResponse(
 | 
						|
                    id: 4,
 | 
						|
                    nickname: "User4",
 | 
						|
                    tags: "",
 | 
						|
                    profileImageUrl: "https://test-cf.sodalive.net/profile/default-profile.png",
 | 
						|
                    follow: false
 | 
						|
                )
 | 
						|
            ]
 | 
						|
        )
 | 
						|
    )
 | 
						|
}
 |