feat(character-detail, gallery): 캐릭터 상세 갤러리 - 이미지 리스트 API 연동
CharacterDetailView에 갤러리 탭을 추가하고, 갤러리 화면/상태 관리/네트워킹을 구현했습니다. 소유/미소유 UI, 페이지네이션, 이미지 뷰어, 오류 토스트를 포함합니다. TODO: 이미지 구매 API 연동
This commit is contained in:
Yu Sung
@@ -10,48 +10,81 @@ import SwiftUI
|
||||
struct CharacterDetailGalleryView: View {
|
||||
@StateObject var viewModel = CharacterDetailGalleryViewModel()
|
||||
|
||||
private let columns = Array(repeating: GridItem(.flexible(), spacing: 2), count: 3)
|
||||
|
||||
// 갤러리 데이터
|
||||
private let ownedCount: Int = 104
|
||||
private let totalCount: Int = 259
|
||||
private let columns = Array(repeating: GridItem(.flexible()), count: 3)
|
||||
let characterId: Int
|
||||
|
||||
// 계산된 속성들
|
||||
private var ownershipPercentage: Int {
|
||||
guard totalCount > 0 else { return 0 }
|
||||
return Int(round(Double(ownedCount) / Double(totalCount) * 100))
|
||||
}
|
||||
|
||||
private var progressBarWidth: CGFloat {
|
||||
let maxWidth: CGFloat = 352 // 전체 진행률 바의 최대 너비
|
||||
guard totalCount > 0 else { return 0 }
|
||||
let percentage = Double(ownedCount) / Double(totalCount)
|
||||
let maxWidth: CGFloat = screenSize().width - 48
|
||||
guard viewModel.totalCount > 0 else { return 0 }
|
||||
let percentage = Double(viewModel.ownedCount) / Double(viewModel.totalCount)
|
||||
return maxWidth * percentage
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
BaseView(isLoading: $viewModel.isLoading) {
|
||||
VStack(spacing: 0) {
|
||||
// 상단 여백 24px
|
||||
Spacer()
|
||||
.frame(height: 24)
|
||||
|
||||
VStack(spacing: 24) {
|
||||
// 보유 정보 섹션
|
||||
collectionInfoView()
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.bottom, 8)
|
||||
|
||||
// 갤러리 그리드
|
||||
LazyVGrid(columns: columns, spacing: 2) {
|
||||
ForEach(0..<4, id: \.self) { index in
|
||||
galleryImageView(index: index)
|
||||
ScrollView {
|
||||
LazyVGrid(columns: columns, spacing: 2) {
|
||||
ForEach(Array(viewModel.galleryItems.enumerated()), id: \.element.id) { index, item in
|
||||
galleryImageView(item: item, index: index)
|
||||
.onAppear {
|
||||
viewModel.loadMoreIfNeeded(currentItem: item)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 0)
|
||||
}
|
||||
.padding(.horizontal, 0)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.background(Color(hex: "#131313"))
|
||||
.padding(.top, 24)
|
||||
.popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
|
||||
GeometryReader { geo in
|
||||
HStack {
|
||||
Spacer()
|
||||
Text(viewModel.errorMessage)
|
||||
.padding(.vertical, 13.3)
|
||||
.frame(alignment: .center)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.horizontal, 33.3)
|
||||
.font(.custom(Font.medium.rawValue, size: 12))
|
||||
.background(Color.button)
|
||||
.foregroundColor(Color.white)
|
||||
.multilineTextAlignment(.center)
|
||||
.cornerRadius(20)
|
||||
.padding(.top, 66.7)
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
viewModel.characterId = characterId
|
||||
viewModel.loadInitialData()
|
||||
}
|
||||
.sheet(isPresented: $viewModel.isShowImageViewer) {
|
||||
ImageViewerView(
|
||||
images: viewModel.ownedImages.map { $0.imageUrl },
|
||||
selectedIndex: $viewModel.selectedImageIndex
|
||||
)
|
||||
}
|
||||
.overlay {
|
||||
if viewModel.isShowPurchaseDialog {
|
||||
SodaDialog(
|
||||
title: "구매 확인",
|
||||
desc: "선택한 이미지를 구매하시겠습니까?",
|
||||
confirmButtonTitle: viewModel.selectedItemPrice,
|
||||
confirmButtonAction: viewModel.onPurchaseConfirm,
|
||||
cancelButtonTitle: "취소",
|
||||
cancelButtonAction: viewModel.onPurchaseCancel
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,14 +93,14 @@ struct CharacterDetailGalleryView: View {
|
||||
VStack(spacing: 8) {
|
||||
// 상단 정보 (계산된 % 보유중, 정보 아이콘, 개수)
|
||||
HStack {
|
||||
Text("\(ownershipPercentage)% 보유중")
|
||||
Text("\(viewModel.ownershipPercentage)% 보유중")
|
||||
.font(.custom(Font.preBold.rawValue, size: 18))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Spacer()
|
||||
|
||||
HStack(spacing: 4) {
|
||||
Text("\(ownedCount)")
|
||||
Text("\(viewModel.ownedCount)")
|
||||
.font(.custom(Font.preRegular.rawValue, size: 16))
|
||||
.foregroundColor(Color(hex: "#FDD453"))
|
||||
|
||||
@@ -75,7 +108,7 @@ struct CharacterDetailGalleryView: View {
|
||||
.font(.custom(Font.preRegular.rawValue, size: 16))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Text("\(totalCount)개")
|
||||
Text("\(viewModel.totalCount)개")
|
||||
.font(.custom(Font.preRegular.rawValue, size: 16))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
@@ -106,10 +139,10 @@ struct CharacterDetailGalleryView: View {
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func galleryImageView(index: Int) -> some View {
|
||||
private func galleryImageView(item: CharacterImageListItemResponse, index: Int) -> some View {
|
||||
ZStack {
|
||||
// 이미지
|
||||
AsyncImage(url: URL(string: "https://picsum.photos/400/500")) { image in
|
||||
AsyncImage(url: URL(string: item.imageUrl)) { image in
|
||||
image
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fill)
|
||||
@@ -121,8 +154,8 @@ struct CharacterDetailGalleryView: View {
|
||||
.clipped()
|
||||
.cornerRadius(0)
|
||||
|
||||
// 자물쇠가 있는 이미지들 (index 2, 3)
|
||||
if index >= 2 {
|
||||
// 미소유 이미지 오버레이
|
||||
if !item.isOwned {
|
||||
// 어두운 오버레이
|
||||
Rectangle()
|
||||
.fill(Color.black.opacity(0.2))
|
||||
@@ -143,7 +176,7 @@ struct CharacterDetailGalleryView: View {
|
||||
.scaledToFit()
|
||||
.frame(width: 16)
|
||||
|
||||
Text("20")
|
||||
Text("\(item.imagePriceCan)")
|
||||
.font(.custom(Font.preBold.rawValue, size: 16))
|
||||
.foregroundColor(Color(hex: "#263238"))
|
||||
}
|
||||
@@ -159,9 +192,12 @@ struct CharacterDetailGalleryView: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
.onTapGesture {
|
||||
viewModel.onImageTapped(item, index: index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
CharacterDetailGalleryView()
|
||||
CharacterDetailGalleryView(characterId: 1)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user