feat(image): 메인 홈, 채팅 - 톡 페이지에 DownsampledKFImage 적용

- 수평 리스트 HStack → LazyHStack으로 교체해 프리로딩/메모리 개선
This commit is contained in:
Yu Sung
2025-10-23 18:55:53 +09:00
parent 62012bd722
commit 8221746569
12 changed files with 57 additions and 72 deletions

View File

@@ -15,15 +15,10 @@ struct OriginalTabItemView: View {
var body: some View {
VStack(alignment: .leading, spacing: 4) {
KFImage(URL(string: item.imageUrl!))
.placeholder { Color.gray.opacity(0.2) }
.retry(maxCount: 2, interval: .seconds(1))
.cancelOnDisappear(true)
.resizable()
.scaledToFill()
.frame(width: size, height: size * 432 / 306)
.clipped()
.cornerRadius(16)
DownsampledKFImage(
url: URL(string: item.imageUrl!),
size: CGSize(width: size, height: size * 432 / 306)
).cornerRadius(16)
Text(item.title)
.font(.custom(Font.preRegular.rawValue, size: 18))

View File

@@ -16,14 +16,10 @@ struct TalkItemView: View {
var body: some View {
HStack(spacing: 13) {
KFImage(URL(string: item.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: item.imageUrl),
size: CGSize(width: 76, height: 76)
).clipShape(Circle())
VStack(alignment: .leading, spacing: 6) {
HStack(spacing: 4) {

View File

@@ -17,12 +17,11 @@ struct ContentItemView: View {
var body: some View {
VStack(alignment: .leading, spacing: 0) {
ZStack(alignment: .top) {
KFImage(URL(string: item.coverImageUrl))
.cancelOnDisappear(true)
.resizable()
.scaledToFill()
.frame(width: 160, height: 160, alignment: .top)
.cornerRadius(16)
DownsampledKFImage(
url: URL(string: item.coverImageUrl),
size: CGSize(width: 160, height: 160)
)
.cornerRadius(16)
HStack(alignment: .top, spacing: 0) {
Spacer()

View File

@@ -112,13 +112,11 @@ struct ContentMainBannerImageView: View {
var body: some View {
Group {
if let boundURL {
KFImage(boundURL)
.cancelOnDisappear(true)
.downsampling(size: CGSize(width: width, height: height))
.resizable()
.scaledToFill()
.frame(width: width, height: height)
.cornerRadius(4.7)
DownsampledKFImage(
url: boundURL,
size: CGSize(width: width, height: height)
)
.cornerRadius(4.7)
} else {
Color.clear
.frame(width: width, height: height)

View File

@@ -56,7 +56,7 @@ struct DayOfWeekSeriesView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 5) {
LazyHStack(spacing: 5) {
ForEach(0..<dayOfWeekItems.count, id: \.self) {
let item = dayOfWeekItems[$0]
DayOfWeekDayView(dayOfWeek: item.dayOfWeekStr, isSelected: dayOfWeek == item.dayOfWeek)
@@ -72,7 +72,7 @@ struct DayOfWeekSeriesView: View {
}
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<seriesList.count, id: \.self) {
SeriesItemView(item: seriesList[$0])
}

View File

@@ -17,13 +17,12 @@ struct SeriesItemView: View {
var body: some View {
VStack(alignment: .leading, spacing: 4) {
ZStack {
KFImage(URL(string: item.coverImage))
.cancelOnDisappear(true)
.resizable()
.scaledToFill()
.frame(width: 160, height: 227, alignment: .center)
.cornerRadius(16)
.clipped()
DownsampledKFImage(
url: URL(string: item.coverImage),
size: CGSize(width: 160, height: 227)
)
.cornerRadius(16)
.clipped()
VStack(alignment: .leading, spacing: 0) {
HStack(spacing: 0) {

View File

@@ -22,12 +22,11 @@ struct HomeCreatorRankingItemView: View {
var body: some View {
ZStack(alignment: .topLeading) {
VStack(spacing: 0) {
KFImage(URL(string: item.profileImageUrl))
.cancelOnDisappear(true)
.resizable()
.scaledToFill()
.frame(width: 84, height: 84, alignment: .top)
.clipShape(Circle())
DownsampledKFImage(
url: URL(string: item.profileImageUrl),
size: CGSize(width: 84, height: 84)
)
.clipShape(Circle())
Text(item.nickname)
.font(.custom(Font.preRegular.rawValue, size: 16))

View File

@@ -17,11 +17,11 @@ struct HomeLiveItemView: View {
HStack(spacing: 16) {
ZStack(alignment: .bottom) {
ZStack {
KFImage(URL(string: item.creatorProfileImage))
.cancelOnDisappear(true)
.resizable()
.frame(width: 62, height: 62)
.clipShape(Circle())
DownsampledKFImage(
url: URL(string: item.creatorProfileImage),
size: CGSize(width: 62, height: 62)
)
.clipShape(Circle())
}
.padding(7)
.overlay {

View File

@@ -93,7 +93,7 @@ struct HomeTabView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<viewModel.liveList.count, id: \.self) { index in
HomeLiveItemView(item: viewModel.liveList[index]) { roomId in
if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
@@ -134,7 +134,7 @@ struct HomeTabView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<viewModel.creatorRanking.count, id: \.self) {
let item = viewModel.creatorRanking[$0]
HomeCreatorRankingItemView(
@@ -205,7 +205,7 @@ struct HomeTabView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<viewModel.originalAudioDramaList.count, id: \.self) {
SeriesItemView(item: viewModel.originalAudioDramaList[$0])
}
@@ -269,7 +269,7 @@ struct HomeTabView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<viewModel.recommendChannelList.count, id: \.self) {
RecommendChannelItemView(item: viewModel.recommendChannelList[$0])
}
@@ -293,7 +293,7 @@ struct HomeTabView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<viewModel.freeContentList.count, id: \.self) { index in
ContentItemView(item: viewModel.freeContentList[index])
}
@@ -315,7 +315,7 @@ struct HomeTabView: View {
.padding(.horizontal, 24)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 16) {
LazyHStack(spacing: 16) {
ForEach(0..<curation.items.count, id: \.self) { index in
let item = curation.items[index]
ContentItemView(

View File

@@ -21,11 +21,11 @@ struct HomeWeeklyChartItemView: View {
.foregroundColor(Color(hex: "B5E7FA"))
.frame(width: 30)
KFImage(URL(string: content.coverImageUrl))
.cancelOnDisappear(true)
.resizable()
.frame(width: 60, height: 60)
.cornerRadius(12)
DownsampledKFImage(
url: URL(string: content.coverImageUrl),
size: CGSize(width: 60, height: 60)
)
.cornerRadius(12)
VStack(alignment: .leading, spacing: 6) {
Text(content.title)

View File

@@ -16,11 +16,11 @@ struct RecommendChannelContentItemView: View {
var body: some View {
HStack(spacing: 16) {
KFImage(URL(string: item.thumbnailImageUrl))
.cancelOnDisappear(true)
.resizable()
.frame(width: 60, height: 60)
.cornerRadius(12)
DownsampledKFImage(
url: URL(string: item.thumbnailImageUrl),
size: CGSize(width: 60, height: 60)
)
.cornerRadius(12)
VStack(alignment: .leading, spacing: 2) {
Text(item.title)

View File

@@ -17,12 +17,11 @@ struct RecommendChannelItemView: View {
var body: some View {
VStack(alignment: .leading, spacing: 12) {
HStack(spacing: 6) {
KFImage(URL(string: item.creatorProfileImageUrl))
.cancelOnDisappear(true)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 80, height: 80, alignment: .top)
.clipShape(Circle())
DownsampledKFImage(
url: URL(string: item.creatorProfileImageUrl),
size: CGSize(width: 80, height: 80)
)
.clipShape(Circle())
VStack(alignment: .leading, spacing: 4) {
Text(item.creatorNickname)