diff --git a/SodaLive/Sources/Content/Series/SeriesListAllView.swift b/SodaLive/Sources/Content/Series/SeriesListAllView.swift index c61fb9f..31b42ef 100644 --- a/SodaLive/Sources/Content/Series/SeriesListAllView.swift +++ b/SodaLive/Sources/Content/Series/SeriesListAllView.swift @@ -25,10 +25,10 @@ struct SeriesListAllView: View { DetailNavigationBar(title: "시리즈 전체보기") ScrollView(.vertical, showsIndicators: false) { - LazyVGrid(columns: columns, spacing: 13.3) { + LazyVGrid(columns: columns, spacing: 16.7) { ForEach(0.. 0 ? 13.3 : 0) HStack(spacing: 10) { diff --git a/SodaLive/Sources/UI/Component/SeriesListItemView.swift b/SodaLive/Sources/UI/Component/SeriesListItemView.swift index 1ebcd1e..48687ed 100644 --- a/SodaLive/Sources/UI/Component/SeriesListItemView.swift +++ b/SodaLive/Sources/UI/Component/SeriesListItemView.swift @@ -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: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",