fix(character-banner): indicator 위치 수정
This commit is contained in:
@@ -12,40 +12,58 @@ struct AutoSlideCharacterBannerView: View {
|
|||||||
var items: [CharacterBannerResponse] = []
|
var items: [CharacterBannerResponse] = []
|
||||||
var onTap: (CharacterBannerResponse) -> Void = { _ in }
|
var onTap: (CharacterBannerResponse) -> Void = { _ in }
|
||||||
|
|
||||||
@State private var index: Int = 0
|
@State private var currentIndex: Int = 0
|
||||||
@State private var height: CGFloat = 0
|
@State private var height: CGFloat = 0
|
||||||
private let timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
|
private let timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
TabView(selection: $index) {
|
VStack(spacing: 8) {
|
||||||
ForEach(0..<items.count, id: \.self) { index in
|
TabView(selection: $currentIndex) {
|
||||||
let item = items[index]
|
ForEach(0..<items.count, id: \.self) { index in
|
||||||
KFImage(URL(string: item.imageUrl))
|
let item = items[index]
|
||||||
.placeholder { Color.gray.opacity(0.2) }
|
KFImage(URL(string: item.imageUrl))
|
||||||
.retry(maxCount: 2, interval: .seconds(1))
|
.placeholder { Color.gray.opacity(0.2) }
|
||||||
.cancelOnDisappear(true)
|
.retry(maxCount: 2, interval: .seconds(1))
|
||||||
.resizable()
|
.cancelOnDisappear(true)
|
||||||
.scaledToFill()
|
.resizable()
|
||||||
.frame(height: height)
|
.scaledToFill()
|
||||||
.clipped()
|
.frame(height: height)
|
||||||
.cornerRadius(12)
|
.clipped()
|
||||||
.contentShape(Rectangle())
|
.cornerRadius(12)
|
||||||
.tag(index)
|
.contentShape(Rectangle())
|
||||||
.onTapGesture { onTap(item) }
|
.tag(index)
|
||||||
|
.onTapGesture { onTap(item) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tabViewStyle(.page(indexDisplayMode: .never))
|
||||||
|
.frame(maxWidth: .infinity)
|
||||||
|
.frame(height: height)
|
||||||
|
.onAppear {
|
||||||
|
self.height = screenSize().width * 0.53
|
||||||
|
}
|
||||||
|
.onDisappear {
|
||||||
|
timer.upstream.connect().cancel()
|
||||||
|
}
|
||||||
|
.onReceive(timer) { _ in
|
||||||
|
guard !items.isEmpty else { return }
|
||||||
|
withAnimation { currentIndex = (currentIndex + 1) % items.count }
|
||||||
|
}
|
||||||
|
|
||||||
|
HStack(spacing: 4) {
|
||||||
|
ForEach(0..<items.count, id: \.self) { index in
|
||||||
|
Capsule()
|
||||||
|
.foregroundColor(
|
||||||
|
index == currentIndex
|
||||||
|
? .button
|
||||||
|
: .gray90
|
||||||
|
)
|
||||||
|
.frame(
|
||||||
|
width: index == currentIndex ? 18 : 6,
|
||||||
|
height: 6
|
||||||
|
)
|
||||||
|
.tag(index)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.tabViewStyle(.page(indexDisplayMode: .automatic))
|
|
||||||
.frame(maxWidth: .infinity)
|
|
||||||
.frame(height: height)
|
|
||||||
.onAppear {
|
|
||||||
self.height = screenSize().width * 0.53
|
|
||||||
}
|
|
||||||
.onDisappear {
|
|
||||||
timer.upstream.connect().cancel()
|
|
||||||
}
|
|
||||||
.onReceive(timer) { _ in
|
|
||||||
guard !items.isEmpty else { return }
|
|
||||||
withAnimation { index = (index + 1) % items.count }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user