fix(character-banner): indicator 위치 수정

This commit is contained in:
Yu Sung
2025-09-12 01:45:47 +09:00
parent 5451c7ec5e
commit 49e014878d

View File

@@ -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 }
} }
} }
} }