feat(image): DownsampledKFImage 추가 및 캐릭터/배너에 공통 적용

- KFImage 공통 옵션(다운샘플링, scaleFactor, backgroundDecode,
  cancelOnDisappear, retry) 캡슐화한 DownsampledKFImage 추가
- 채팅-캐릭터 탭 Character/Recent/배너 뷰에서 인라인 KFImage 제거 → 공통 뷰 적용
- 수평 리스트 HStack → LazyHStack으로 교체해 프리로딩/메모리 개선

Why: 대형 원본 디코딩으로 인한 메모리 스파이크 완화 및 일관된
이미지 로딩 정책 적용. 유지보수성 및 성능 향상.
This commit is contained in:
Yu Sung
2025-10-23 17:10:04 +09:00
parent 8c58c08a85
commit 62012bd722
6 changed files with 61 additions and 29 deletions

View File

@@ -84,16 +84,10 @@ private struct AutoSlideCharacterBannerPage: View {
var body: some View {
Group {
if let boundURL {
KFImage(boundURL)
.placeholder { Color.gray.opacity(0.2) }
.retry(maxCount: 2, interval: .seconds(1))
.cancelOnDisappear(true)
.downsampling(size: CGSize(width: width, height: height))
.resizable()
.scaledToFill()
.frame(width: width, height: height)
.clipped()
.cornerRadius(12)
DownsampledKFImage(
url: boundURL,
size: CGSize(width: width, height: height)
).cornerRadius(12)
} else {
Color.clear
.frame(width: width, height: height)

View File

@@ -22,15 +22,11 @@ struct CharacterItemView: View {
var body: some View {
VStack(alignment: .leading, spacing: 4) {
ZStack(alignment: .bottomLeading) {
KFImage(URL(string: character.imageUrl))
.placeholder { Color.gray.opacity(0.2) }
.retry(maxCount: 2, interval: .seconds(1))
.cancelOnDisappear(true)
.resizable()
.scaledToFill()
.frame(width: size, height: size)
.clipped()
.cornerRadius(12)
DownsampledKFImage(
url: URL(string: character.imageUrl),
size: CGSize(width: size, height: size)
)
.cornerRadius(12)
if isShowRank {
Text("\(rank)")

View File

@@ -32,7 +32,7 @@ struct CharacterSectionView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(items.indices, id: \.self) { idx in
let item = items[idx]
CharacterItemView(

View File

@@ -13,14 +13,11 @@ struct RecentCharacterItemView: View {
var body: some View {
VStack(spacing: 6) {
KFImage(URL(string: character.imageUrl))
.placeholder { Circle().fill(Color.gray.opacity(0.2)) }
.retry(maxCount: 2, interval: .seconds(1))
.cancelOnDisappear(true)
.resizable()
.scaledToFill()
.frame(width: 76, height: 76)
.clipShape(Circle())
DownsampledKFImage(
url: URL(string: character.imageUrl),
size: CGSize(width: 76, height: 76)
)
.clipShape(Circle())
Text(character.name)
.font(.custom(Font.preRegular.rawValue, size: 18))

View File

@@ -28,7 +28,7 @@ struct RecentCharacterSectionView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(items.indices, id: \.self) { idx in
let item = items[idx]
RecentCharacterItemView(character: item)

View File

@@ -0,0 +1,45 @@
//
// DownsampledKFImage.swift
// SodaLive
//
// Created by klaus on 10/23/25.
//
import SwiftUI
import Kingfisher
struct DownsampledKFImage: View {
let url: URL?
let size: CGSize
let cacheOriginal: Bool = false
var body: some View {
KFImage(url)
.placeholder { Color.gray.opacity(0.2) }
.retry(maxCount: 2, interval: .seconds(1))
.cancelOnDisappear(true)
.downsampled(to: size, cacheOriginal: cacheOriginal)
.resizable()
.scaledToFill()
.frame(width: size.width, height: size.height)
.clipped()
}
}
extension KFImage {
func downsampled(
to targetSize: CGSize,
scale: CGFloat = UIScreen.main.scale,
cacheOriginal: Bool = false
) -> KFImage {
let pixel = CGSize(
width: targetSize.width * scale,
height: targetSize.height * scale
)
return self
.setProcessor(DownsamplingImageProcessor(size: pixel))
.scaleFactor(scale)
.backgroundDecode()
.cacheOriginalImage(cacheOriginal)
}
}