콘텐츠 메인 - 인기 콘텐츠 영역 추가

This commit is contained in:
Yu Sung 2023-10-15 05:50:54 +09:00
parent 41d5bad46f
commit c440e8abd9
4 changed files with 166 additions and 0 deletions

View File

@ -0,0 +1,140 @@
//
// ContentMainRankingView.swift
// SodaLive
//
// Created by klaus on 2023/10/15.
//
import SwiftUI
import Kingfisher
struct ContentMainRankingView: View {
let item: GetAudioContentRanking
let rows = [
GridItem(.fixed(60), alignment: .leading),
GridItem(.fixed(60), alignment: .leading),
GridItem(.fixed(60), alignment: .leading)
]
var body: some View {
VStack(spacing: 0) {
HStack(spacing: 0) {
Text("인기 콘텐츠")
.font(.custom(Font.bold.rawValue, size: 18.3))
.foregroundColor(Color(hex: "eeeeee"))
Spacer()
Image("ic_forward")
.onTapGesture {}
}
VStack(spacing: 8) {
Text("\(item.startDate) ~ \(item.endDate)")
.font(.custom(Font.bold.rawValue, size: 14.7))
.foregroundColor(Color(hex: "eeeeee"))
Text("※ 인기 콘텐츠의 순위는 매주 업데이트됩니다.")
.font(.custom(Font.light.rawValue, size: 13.3))
.foregroundColor(Color(hex: "bbbbbb"))
}
.padding(.vertical, 8)
.frame(width: screenSize().width - 26.7)
.background(Color(hex: "222222"))
.padding(.top, 13.3)
ScrollView(.horizontal, showsIndicators: false) {
LazyHGrid(rows: rows, spacing: 13.3) {
ForEach(0..<item.items.count, id: \.self) { index in
let content = item.items[index]
HStack(spacing: 0) {
KFImage(URL(string: content.coverImageUrl))
.resizable()
.frame(width: 60, height: 60)
.cornerRadius(2.7)
Text("\(index + 1)")
.font(.custom(Font.bold.rawValue, size: 16.7))
.foregroundColor(Color(hex: "3bb9f1"))
.padding(.horizontal, 12)
VStack(alignment: .leading, spacing: 8) {
Text(content.title)
.lineLimit(2)
.font(.custom(Font.medium.rawValue, size: 13.3))
.foregroundColor(Color(hex: "d2d2d2"))
Text(content.creatorNickname)
.font(.custom(Font.medium.rawValue, size: 11))
.foregroundColor(Color(hex: "777777"))
}
}
.frame(maxWidth: screenSize().width * 0.66, alignment: .leading)
.onTapGesture {
AppState
.shared
.setAppStep(step: .contentDetail(contentId: content.contentId))
}
}
}
.frame(height: 207)
}
.padding(.top, 13.3)
}
}
}
struct ContentMainRankingView_Previews: PreviewProvider {
static var previews: some View {
ContentMainRankingView(
item: GetAudioContentRanking(
startDate: "2023년 10월 2일",
endDate: "10월 9일",
items: [
GetAudioContentRankingItem(
contentId: 10,
title: "sdffsfddfs",
coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
themeStr: "커버곡",
price: 10,
duration: "00:30:20",
creatorId: 1,
creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
),
GetAudioContentRankingItem(
contentId: 10,
title: "sdffsfddfs",
coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
themeStr: "커버곡",
price: 10,
duration: "00:30:20",
creatorId: 1,
creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
),
GetAudioContentRankingItem(
contentId: 10,
title: "sdffsfddfs",
coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
themeStr: "커버곡",
price: 10,
duration: "00:30:20",
creatorId: 1,
creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
),
GetAudioContentRankingItem(
contentId: 10,
title: "sdffsfddfs",
coverImageUrl: "https://test-cf.sodalive.net/audio_content_cover/27/27-cover-77e3a23f-23f2-467c-867f-3e6b7e08060c-9136-1696424061456",
themeStr: "커버곡",
price: 10,
duration: "00:30:20",
creatorId: 1,
creatorNickname: "ㄹㄴ어ㅏㅣㅇㄴ런아ㅣ"
),
]
)
)
}
}

View File

@ -55,6 +55,12 @@ struct ContentMainView: View {
)
.padding(.horizontal, 13.3)
if let contentRanking = viewModel.contentRanking {
ContentMainRankingView(item: contentRanking)
.padding(.top, 40)
.padding(.horizontal, 13.3)
}
if viewModel.curationList.count > 0 {
ContentMainCurationView(items: viewModel.curationList)
.padding(.top, 40)

View File

@ -24,6 +24,7 @@ final class ContentMainViewModel: ObservableObject {
@Published var orderList = [GetAudioContentMainItem]()
@Published var themeList = [String]()
@Published var curationList = [GetAudioContentCurationResponse]()
@Published var contentRanking: GetAudioContentRanking? = nil
@Published var selectedTheme = "전체" {
didSet {
@ -64,6 +65,7 @@ final class ContentMainViewModel: ObservableObject {
self.bannerList.append(contentsOf: data.bannerList)
self.orderList.append(contentsOf: data.orderList)
self.curationList.append(contentsOf: data.curationList)
self.contentRanking = data.contentRanking
self.themeList.append("전체")
self.themeList.append(contentsOf: data.themeList)

View File

@ -14,6 +14,24 @@ struct GetAudioContentMainResponse: Decodable {
let themeList: [String]
let newContentList: [GetAudioContentMainItem]
let curationList: [GetAudioContentCurationResponse]
let contentRanking: GetAudioContentRanking
}
struct GetAudioContentRanking: Decodable {
let startDate: String
let endDate: String
let items: [GetAudioContentRankingItem]
}
struct GetAudioContentRankingItem: Decodable {
let contentId: Int
let title: String
let coverImageUrl: String
let themeStr: String
let price: Int
let duration: String
let creatorId: Int
let creatorNickname: String
}
struct GetNewContentUploadCreator: Decodable {