시리즈 아이템

- 상단을 기준으로 정렬이 되도록 수정
This commit is contained in:
Yu Sung
2024-04-30 23:33:09 +09:00
parent f97917f407
commit 9f3eb8a995
4 changed files with 56 additions and 50 deletions

View File

@@ -11,67 +11,73 @@ import Kingfisher
struct SeriesListItemView: View {
let itemWidth: CGFloat
let item: SeriesListItem
var body: some View {
VStack(alignment: .leading, spacing: 8) {
ZStack {
KFImage(URL(string: item.coverImage))
.resizable()
.scaledToFill()
.cornerRadius(5)
.clipped()
LinearGradient(
colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)],
startPoint: .top,
endPoint: .bottom
)
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 3.3) {
if !item.isComplete && item.isNew {
SeriesItemBadgeView(title: "신작", backgroundColor: .button)
}
if item.isComplete {
SeriesItemBadgeView(title: "완결", backgroundColor: Color(hex: "002abd"))
}
if item.isPopular {
SeriesItemBadgeView(title: "인기", backgroundColor: Color(hex: "ec6033"))
HStack(alignment: .top) {
VStack(alignment: .leading, spacing: 8) {
ZStack {
KFImage(URL(string: item.coverImage))
.resizable()
.scaledToFill()
.cornerRadius(5)
.clipped()
LinearGradient(
colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)],
startPoint: .top,
endPoint: .bottom
)
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 3.3) {
if !item.isComplete && item.isNew {
SeriesItemBadgeView(title: "신작", backgroundColor: .button)
}
if item.isComplete {
SeriesItemBadgeView(title: "완결", backgroundColor: Color(hex: "002abd"))
}
if item.isPopular {
SeriesItemBadgeView(title: "인기", backgroundColor: Color(hex: "ec6033"))
}
Spacer()
}
Spacer()
}
Spacer()
HStack {
Spacer()
SeriesItemBadgeView(title: "\(item.numberOfContent)", backgroundColor: Color.gray33.opacity(0.7))
HStack {
Spacer()
SeriesItemBadgeView(title: "\(item.numberOfContent)", backgroundColor: Color.gray33.opacity(0.7))
}
}
.padding(3.3)
}
.padding(3.3)
.frame(width: itemWidth, height: itemWidth * 432 / 306)
Text(item.title)
.font(.custom(Font.medium.rawValue, size: 12))
.foregroundColor(Color.grayee)
.lineLimit(2)
.frame(width: itemWidth, alignment: .leading)
Text(item.publishedDaysOfWeek)
.font(.custom(Font.medium.rawValue, size: 11))
.foregroundColor(Color.gray77)
.frame(width: itemWidth, alignment: .leading)
}
Text(item.title)
.font(.custom(Font.medium.rawValue, size: 12))
.foregroundColor(Color.grayee)
.lineLimit(2)
.frame(width: (screenSize().width - 60) / 3, alignment: .leading)
Text(item.publishedDaysOfWeek)
.font(.custom(Font.medium.rawValue, size: 11))
.foregroundColor(Color.gray77)
.frame(width: itemWidth)
}
.frame(width: (screenSize().width - 60) / 3)
}
}
#Preview {
SeriesListItemView(
itemWidth: CGFloat(294 / 3),
item: SeriesListItem(
seriesId: 1,
title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",