// // ExplorerView.swift // SodaLive // // Created by klaus on 2023/08/09. // import SwiftUI import Kingfisher struct ExplorerView: View { @StateObject var viewModel = ExplorerViewModel() var body: some View { BaseView(isLoading: $viewModel.isLoading) { VStack(spacing: 0) { HStack(spacing: 0) { Image("ic_title_search_black") TextField("채널명을 입력해 보세요", text: $viewModel.channel) .autocapitalization(.none) .disableAutocorrection(true) .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color(hex: "eeeeee")) .accentColor(Color(hex: "9970ff")) .keyboardType(.default) .padding(.horizontal, 13.3) if !viewModel.channel.isEmpty { Image("ic_close_white") .resizable() .frame(width: 20, height: 20) .onTapGesture { viewModel.channel = "" } } } .padding(.horizontal, 21.3) .frame(width: screenSize().width - 26.7, height: 50) .background(Color(hex: "222222")) .overlay( RoundedRectangle(cornerRadius: 6.7) .strokeBorder(lineWidth: 1) .foregroundColor(Color(hex: "bbbbbb")) ) .padding(.top, 20) ZStack { if viewModel.channel.count > 1 { ScrollView(.vertical, showsIndicators: false) { if viewModel.channelResponses.count > 0 { VStack(spacing: 26.7) { ForEach(viewModel.channelResponses, id: \.self) { channel in HStack(spacing: 13.3) { KFImage(URL(string: channel.profileImageUrl)) .cancelOnDisappear(true) .downsampling(size: CGSize(width: 46.7, height: 46.7)) .resizable() .frame(width: 46.7, height: 46.7) .clipShape(Circle()) Text(channel.nickname) .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color(hex: "eeeeee")) Spacer() } .frame(width: screenSize().width - 26.7) .contentShape(Rectangle()) .onTapGesture {} } } } else { Text("검색 결과가 없습니다.") .font(.custom(Font.medium.rawValue, size: 18.3)) .foregroundColor(.white) .padding(.top, 40) } } .padding(.vertical, 40) .padding(.horizontal, 26.7) } else { ScrollView(.vertical, showsIndicators: false) { VStack(spacing: 26.7) { ForEach(viewModel.explorerSections, id: \.self) { section in VStack(alignment: .leading, spacing: 13.3) { 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")) } } .frame(width: screenSize().width - 26.7, alignment: .leading) } else { Text(section.title) .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color(hex: "eeeeee")) .frame(width: screenSize().width - 26.7, alignment: .leading) } ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 13.3) { ForEach(section.creators, id: \.self) { creator in VStack(spacing: 0) { KFImage(URL(string: creator.profileImageUrl)) .cancelOnDisappear(true) .downsampling(size: CGSize(width: 93.3, height: 93.3)) .resizable() .frame(width: 93.3, height: 93.3) .clipShape(Circle()) 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 {} } } } .frame(width: screenSize().width - 26.7, alignment: .leading) } } } .padding(.vertical, 40) .padding(.horizontal, 26.7) } } } } .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) { GeometryReader { geo in HStack { Spacer() Text(viewModel.errorMessage) .padding(.vertical, 13.3) .frame(width: geo.size.width - 66.7, alignment: .center) .font(.custom(Font.medium.rawValue, size: 12)) .background(Color(hex: "9970ff")) .foregroundColor(Color.white) .multilineTextAlignment(.center) .cornerRadius(20) .padding(.top, 66.7) Spacer() } } } .onAppear { viewModel.getExplorer() } .onTapGesture { hideKeyboard() } } } } struct ExplorerView_Previews: PreviewProvider { static var previews: some View { ExplorerView() } }