diff --git a/SodaLive/Sources/Chat/Character/Detail/Gallery/CharacterDetailGalleryView.swift b/SodaLive/Sources/Chat/Character/Detail/Gallery/CharacterDetailGalleryView.swift index 0e13acc..549e98c 100644 --- a/SodaLive/Sources/Chat/Character/Detail/Gallery/CharacterDetailGalleryView.swift +++ b/SodaLive/Sources/Chat/Character/Detail/Gallery/CharacterDetailGalleryView.swift @@ -140,61 +140,68 @@ struct CharacterDetailGalleryView: View { @ViewBuilder private func galleryImageView(item: CharacterImageListItemResponse, index: Int) -> some View { - ZStack { - // 이미지 - AsyncImage(url: URL(string: item.imageUrl)) { image in - image - .resizable() - .aspectRatio(contentMode: .fill) - } placeholder: { - Rectangle() - .fill(Color.gray.opacity(0.3)) - } - .frame(width: 132, height: 165) - .clipped() - .cornerRadius(0) + GeometryReader { geo in + let width = geo.size.width + let height = width * 5 / 4 - // 미소유 이미지 오버레이 - if !item.isOwned { - // 어두운 오버레이 - Rectangle() - .fill(Color.black.opacity(0.2)) - .frame(width: 132, height: 165) - - // 자물쇠 아이콘과 코인 정보 - VStack(spacing: 8) { - // 자물쇠 아이콘 - Image("ic_new_lock") + ZStack { + // 이미지 + AsyncImage(url: URL(string: item.imageUrl)) { image in + image .resizable() - .scaledToFit() - .frame(width: 24) + .scaledToFill() + .frame(width: width, height: height) + .clipped() + } placeholder: { + Rectangle() + .fill(Color.gray.opacity(0.3)) + } + + // 미소유 이미지 오버레이 + if !item.isOwned { + // 어두운 오버레이 + Rectangle() + .fill(Color.black.opacity(0.2)) - // 코인 정보 배경 - HStack(spacing: 4) { - Image("ic_can") + // 자물쇠 아이콘과 코인 정보 + VStack(spacing: 8) { + // 자물쇠 아이콘 + Image("ic_new_lock") .resizable() .scaledToFit() - .frame(width: 16) + .frame(width: 24) - Text("\(item.imagePriceCan)") - .font(.custom(Font.preBold.rawValue, size: 16)) - .foregroundColor(Color(hex: "#263238")) - } - .padding(.horizontal, 12) - .padding(.vertical, 6) - .background(Color(hex: "#B5E7FA")) - .cornerRadius(30) - .overlay { - RoundedRectangle(cornerRadius: 30) - .strokeBorder(lineWidth: 1) - .foregroundColor(.button) + // 코인 정보 배경 + HStack(spacing: 4) { + Image("ic_can") + .resizable() + .scaledToFit() + .frame(width: 16) + + Text("\(item.imagePriceCan)") + .font(.custom(Font.preBold.rawValue, size: 16)) + .foregroundColor(Color(hex: "#263238")) + } + .padding(.horizontal, 12) + .padding(.vertical, 6) + .background(Color(hex: "#B5E7FA")) + .cornerRadius(30) + .overlay { + RoundedRectangle(cornerRadius: 30) + .strokeBorder(lineWidth: 1) + .foregroundColor(.button) + } } } } + .frame(width: width, height: height) + .clipped() + .contentShape(Rectangle()) + .onTapGesture { + viewModel.onImageTapped(item, index: index) + } } - .onTapGesture { - viewModel.onImageTapped(item, index: index) - } + .aspectRatio(4/5, contentMode: .fit) } }