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,15 +22,11 @@ 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()
 | 
					                .cornerRadius(12)
 | 
				
			||||||
                    .scaledToFill()
 | 
					 | 
				
			||||||
                    .frame(width: size, height: size)
 | 
					 | 
				
			||||||
                    .clipped()
 | 
					 | 
				
			||||||
                    .cornerRadius(12)
 | 
					 | 
				
			||||||
                
 | 
					                
 | 
				
			||||||
                if isShowRank {
 | 
					                if isShowRank {
 | 
				
			||||||
                    Text("\(rank)")
 | 
					                    Text("\(rank)")
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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,14 +13,11 @@ 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()
 | 
					            .clipShape(Circle())
 | 
				
			||||||
                .scaledToFill()
 | 
					 | 
				
			||||||
                .frame(width: 76, height: 76)
 | 
					 | 
				
			||||||
                .clipShape(Circle())
 | 
					 | 
				
			||||||
            
 | 
					            
 | 
				
			||||||
            Text(character.name)
 | 
					            Text(character.name)
 | 
				
			||||||
                .font(.custom(Font.preRegular.rawValue, size: 18))
 | 
					                .font(.custom(Font.preRegular.rawValue, size: 18))
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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