feat(series-all-home): 시리즈 전체보기 홈 탭 완결 시리즈 UI 추가

This commit is contained in:
Yu Sung
2025-11-15 02:47:03 +09:00
parent 438f12024f
commit daca685ea2
3 changed files with 159 additions and 0 deletions

View File

@@ -16,6 +16,37 @@ struct SeriesMainHomeView: View {
VStack(spacing: 48) {
SeriesMainHomeBannerView(bannerList: viewModel.banners)
.padding(.top, 24)
if !viewModel.completedSeriesList.isEmpty {
VStack(alignment: .leading, spacing: 16) {
HStack(spacing: 0) {
Text("완결 시리즈")
.font(.custom(Font.preBold.rawValue, size: 24))
.foregroundColor(.white)
Spacer()
Text("전체보기")
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(.init(hex: "78909C"))
}
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 16) {
ForEach(0..<viewModel.completedSeriesList.count, id: \.self) {
let item = viewModel.completedSeriesList[$0]
NavigationLink {
SeriesDetailView(seriesId: item.seriesId)
} label: {
SeriesMainItemView(item: item)
}
}
}
.padding(.horizontal, 24)
}
}
}
}
}
.onAppear {

View File

@@ -17,6 +17,7 @@ final class SeriesMainHomeViewModel: ObservableObject {
@Published var isShowPopup = false
@Published var banners: [SeriesBannerResponse] = []
@Published var completedSeriesList: [SeriesListItem] = []
func fetchHome() {
isLoading = true
@@ -38,6 +39,7 @@ final class SeriesMainHomeViewModel: ObservableObject {
if let data = decoded.data, decoded.success {
self.banners = data.banners
self.completedSeriesList = data.completedSeriesList
} else {
if let message = decoded.message {
self.errorMessage = message

View File

@@ -0,0 +1,126 @@
//
// SeriesMainItemView.swift
// SodaLive
//
// Created by klaus on 11/15/25.
//
import SwiftUI
struct SeriesMainItemView: View {
let item: SeriesListItem
var width: CGFloat = 160
var height: CGFloat = 227
var body: some View {
VStack(alignment: .leading, spacing: 4) {
ZStack {
DownsampledKFImage(
url: URL(string: item.coverImage),
size: CGSize(width: width, height: height)
)
.cornerRadius(16)
.clipped()
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 0) {
if item.isPopular {
Text("인기")
.font(.custom(Font.preRegular.rawValue, size: 12))
.foregroundColor(.white)
.padding(.horizontal, 10)
.padding(.vertical, 3)
.background(Color(hex: "EF5247"))
.cornerRadius(16, corners: [.topLeft, .bottomRight])
}
if item.isNew {
Text("신작")
.font(.custom(Font.preRegular.rawValue, size: 12))
.foregroundColor(.white)
.padding(.horizontal, 10)
.padding(.vertical, 3)
.background(
LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(hex: "0001B1"), location: 0.24),
.init(color: Color(hex: "3B5FF1"), location: 1.0)
]),
startPoint: .top,
endPoint: .bottom
)
)
.cornerRadius(16, corners: [.topLeft, .bottomRight])
}
if item.isComplete {
Text("완결")
.font(.custom(Font.preRegular.rawValue, size: 12))
.foregroundColor(.white)
.padding(.horizontal, 10)
.padding(.vertical, 3)
.background(Color.black.opacity(0.7))
.cornerRadius(16, corners: [.topLeft, .bottomRight])
}
}
Spacer()
HStack {
Spacer()
Text("\(item.numberOfContent)")
.font(.custom(Font.preRegular.rawValue, size: 12))
.foregroundColor(.white)
.padding(.horizontal, 10)
.padding(.vertical, 3)
.overlay {
RoundedRectangle(cornerRadius: 39)
.strokeBorder(lineWidth: 1)
.foregroundColor(.white)
}
}
.padding(.bottom, 8)
.padding(.trailing, 8)
}
}
.frame(width: width, height: height, alignment: .center)
Text(item.title)
.font(.custom(Font.preRegular.rawValue, size: 18))
.foregroundColor(Color(hex: "B0BEC5"))
.lineLimit(1)
.padding(.horizontal, 8)
Text(item.creator.nickname)
.font(.custom(Font.preRegular.rawValue, size: 14))
.foregroundColor(Color(hex: "78909C"))
.lineLimit(1)
.padding(.horizontal, 8)
}
.frame(width: width)
.contentShape(Rectangle())
}
}
#Preview {
SeriesMainItemView(
item: SeriesListItem(
seriesId: 1,
title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",
coverImage: "https://test-cf.sodalive.net/profile/default-profile.png",
publishedDaysOfWeek: "매주 수, 토요일",
isComplete: true,
creator: SeriesListItemCreator(
creatorId: 1,
nickname: "creator",
profileImage: "https://test-cf.sodalive.net/profile/default-profile.png"
),
numberOfContent: 10,
isNew: true,
isPopular: true
)
)
}