feat(series-all-home): 시리즈 전체보기 홈 탭 배너 UI 추가
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
//
|
||||
// SeriesMainHomeBannerView.swift
|
||||
// SodaLive
|
||||
//
|
||||
// Created by klaus on 11/15/25.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct SeriesMainHomeBannerView: View {
|
||||
let bannerList: [SeriesBannerResponse]
|
||||
|
||||
@State var currentIndex = 0
|
||||
@State var timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
|
||||
|
||||
@State var width: CGFloat = 0
|
||||
@State var height: CGFloat = 0
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
TabView(selection: $currentIndex) {
|
||||
ForEach(0..<bannerList.count, id: \.self) { index in
|
||||
let item = bannerList[index]
|
||||
|
||||
NavigationLink {
|
||||
SeriesDetailView(seriesId: item.seriesId)
|
||||
} label: {
|
||||
SeriesMainHomeBannerImageView(url: item.imagePath, width: width, height: height)
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
|
||||
.frame(
|
||||
width: width,
|
||||
height: height
|
||||
)
|
||||
|
||||
HStack(spacing: 4) {
|
||||
ForEach(0..<bannerList.count, id: \.self) { index in
|
||||
Capsule()
|
||||
.foregroundColor(
|
||||
index == currentIndex
|
||||
? .button
|
||||
: .gray90
|
||||
)
|
||||
.frame(
|
||||
width: index == currentIndex ? 18 : 6,
|
||||
height: 6
|
||||
)
|
||||
.tag(index)
|
||||
}
|
||||
}
|
||||
.padding(.top, 13.3)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.onAppear {
|
||||
width = screenSize().width
|
||||
// 352x198
|
||||
height = width * 198 / 352
|
||||
timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
|
||||
}
|
||||
.onDisappear {
|
||||
timer.upstream.connect().cancel()
|
||||
}
|
||||
.onReceive(timer) { _ in
|
||||
DispatchQueue.main.async {
|
||||
withAnimation {
|
||||
if currentIndex == bannerList.count - 1 {
|
||||
currentIndex = 0
|
||||
} else {
|
||||
currentIndex += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct SeriesMainHomeBannerImageView: View {
|
||||
let url: String
|
||||
let width: CGFloat
|
||||
let height: CGFloat
|
||||
@State private var boundURL: URL?
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
if let boundURL {
|
||||
DownsampledKFImage(
|
||||
url: boundURL,
|
||||
size: CGSize(width: width, height: height)
|
||||
)
|
||||
.cornerRadius(4.7)
|
||||
} else {
|
||||
Color.clear
|
||||
.frame(width: width, height: height)
|
||||
.cornerRadius(4.7)
|
||||
}
|
||||
}
|
||||
.contentShape(Rectangle())
|
||||
.onAppear {
|
||||
let encoded = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? url
|
||||
boundURL = URL(string: encoded)
|
||||
}
|
||||
.onDisappear {
|
||||
boundURL = nil
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
SeriesMainHomeBannerView(
|
||||
bannerList: [
|
||||
SeriesBannerResponse(seriesId: 1, imagePath: "https://picsum.photos/352/198"),
|
||||
SeriesBannerResponse(seriesId: 2, imagePath: "https://picsum.photos/352/198"),
|
||||
SeriesBannerResponse(seriesId: 3, imagePath: "https://picsum.photos/352/198"),
|
||||
]
|
||||
)
|
||||
}
|
||||
@@ -14,7 +14,8 @@ struct SeriesMainHomeView: View {
|
||||
var body: some View {
|
||||
ScrollView(.vertical, showsIndicators: false) {
|
||||
VStack(spacing: 48) {
|
||||
|
||||
SeriesMainHomeBannerView(bannerList: viewModel.banners)
|
||||
.padding(.top, 24)
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
|
||||
@@ -16,6 +16,8 @@ final class SeriesMainHomeViewModel: ObservableObject {
|
||||
@Published var errorMessage = ""
|
||||
@Published var isShowPopup = false
|
||||
|
||||
@Published var banners: [SeriesBannerResponse] = []
|
||||
|
||||
func fetchHome() {
|
||||
isLoading = true
|
||||
repository
|
||||
@@ -35,7 +37,7 @@ final class SeriesMainHomeViewModel: ObservableObject {
|
||||
let decoded = try jsonDecoder.decode(ApiResponse<SeriesMainHomeResponse>.self, from: responseData)
|
||||
|
||||
if let data = decoded.data, decoded.success {
|
||||
DEBUG_LOG("data: \(data)")
|
||||
self.banners = data.banners
|
||||
} else {
|
||||
if let message = decoded.message {
|
||||
self.errorMessage = message
|
||||
|
||||
Reference in New Issue
Block a user