feat(image): DownsampledKFImage 추가 및 캐릭터/배너에 공통 적용
- KFImage 공통 옵션(다운샘플링, scaleFactor, backgroundDecode, cancelOnDisappear, retry) 캡슐화한 DownsampledKFImage 추가 - 채팅-캐릭터 탭 Character/Recent/배너 뷰에서 인라인 KFImage 제거 → 공통 뷰 적용 - 수평 리스트 HStack → LazyHStack으로 교체해 프리로딩/메모리 개선 Why: 대형 원본 디코딩으로 인한 메모리 스파이크 완화 및 일관된 이미지 로딩 정책 적용. 유지보수성 및 성능 향상.
This commit is contained in:
@@ -84,16 +84,10 @@ private struct AutoSlideCharacterBannerPage: View {
|
|||||||
var body: some View {
|
var body: some View {
|
||||||
Group {
|
Group {
|
||||||
if let boundURL {
|
if let boundURL {
|
||||||
KFImage(boundURL)
|
DownsampledKFImage(
|
||||||
.placeholder { Color.gray.opacity(0.2) }
|
url: boundURL,
|
||||||
.retry(maxCount: 2, interval: .seconds(1))
|
size: CGSize(width: width, height: height)
|
||||||
.cancelOnDisappear(true)
|
).cornerRadius(12)
|
||||||
.downsampling(size: CGSize(width: width, height: height))
|
|
||||||
.resizable()
|
|
||||||
.scaledToFill()
|
|
||||||
.frame(width: width, height: height)
|
|
||||||
.clipped()
|
|
||||||
.cornerRadius(12)
|
|
||||||
} else {
|
} else {
|
||||||
Color.clear
|
Color.clear
|
||||||
.frame(width: width, height: height)
|
.frame(width: width, height: height)
|
||||||
|
|||||||
@@ -22,14 +22,10 @@ struct CharacterItemView: View {
|
|||||||
var body: some View {
|
var body: some View {
|
||||||
VStack(alignment: .leading, spacing: 4) {
|
VStack(alignment: .leading, spacing: 4) {
|
||||||
ZStack(alignment: .bottomLeading) {
|
ZStack(alignment: .bottomLeading) {
|
||||||
KFImage(URL(string: character.imageUrl))
|
DownsampledKFImage(
|
||||||
.placeholder { Color.gray.opacity(0.2) }
|
url: URL(string: character.imageUrl),
|
||||||
.retry(maxCount: 2, interval: .seconds(1))
|
size: CGSize(width: size, height: size)
|
||||||
.cancelOnDisappear(true)
|
)
|
||||||
.resizable()
|
|
||||||
.scaledToFill()
|
|
||||||
.frame(width: size, height: size)
|
|
||||||
.clipped()
|
|
||||||
.cornerRadius(12)
|
.cornerRadius(12)
|
||||||
|
|
||||||
if isShowRank {
|
if isShowRank {
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ struct CharacterSectionView: View {
|
|||||||
.padding(.horizontal, 24)
|
.padding(.horizontal, 24)
|
||||||
|
|
||||||
ScrollView(.horizontal, showsIndicators: false) {
|
ScrollView(.horizontal, showsIndicators: false) {
|
||||||
HStack(spacing: 16) {
|
LazyHStack(spacing: 16) {
|
||||||
ForEach(items.indices, id: \.self) { idx in
|
ForEach(items.indices, id: \.self) { idx in
|
||||||
let item = items[idx]
|
let item = items[idx]
|
||||||
CharacterItemView(
|
CharacterItemView(
|
||||||
|
|||||||
@@ -13,13 +13,10 @@ struct RecentCharacterItemView: View {
|
|||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
VStack(spacing: 6) {
|
VStack(spacing: 6) {
|
||||||
KFImage(URL(string: character.imageUrl))
|
DownsampledKFImage(
|
||||||
.placeholder { Circle().fill(Color.gray.opacity(0.2)) }
|
url: URL(string: character.imageUrl),
|
||||||
.retry(maxCount: 2, interval: .seconds(1))
|
size: CGSize(width: 76, height: 76)
|
||||||
.cancelOnDisappear(true)
|
)
|
||||||
.resizable()
|
|
||||||
.scaledToFill()
|
|
||||||
.frame(width: 76, height: 76)
|
|
||||||
.clipShape(Circle())
|
.clipShape(Circle())
|
||||||
|
|
||||||
Text(character.name)
|
Text(character.name)
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ struct RecentCharacterSectionView: View {
|
|||||||
.padding(.horizontal, 24)
|
.padding(.horizontal, 24)
|
||||||
|
|
||||||
ScrollView(.horizontal, showsIndicators: false) {
|
ScrollView(.horizontal, showsIndicators: false) {
|
||||||
HStack(spacing: 16) {
|
LazyHStack(spacing: 16) {
|
||||||
ForEach(items.indices, id: \.self) { idx in
|
ForEach(items.indices, id: \.self) { idx in
|
||||||
let item = items[idx]
|
let item = items[idx]
|
||||||
RecentCharacterItemView(character: item)
|
RecentCharacterItemView(character: item)
|
||||||
|
|||||||
45
SodaLive/Sources/CustomView/DownsampledKFImage.swift
Normal file
45
SodaLive/Sources/CustomView/DownsampledKFImage.swift
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user