feat(home): 인기 커뮤니티 섹션을 연결한다
This commit is contained in:
Yu Sung
@@ -1,129 +1,273 @@
|
||||
import SwiftUI
|
||||
|
||||
struct CommunityPostCard: View {
|
||||
let postId: Int
|
||||
let creatorNickname: String
|
||||
let creatorProfileImageUrl: String?
|
||||
let content: String
|
||||
let imageUrl: String?
|
||||
let price: Int?
|
||||
let audioUrl: String?
|
||||
let price: Int
|
||||
let existOrdered: Bool
|
||||
let createdAt: String?
|
||||
let likeCount: Int?
|
||||
let commentCount: Int?
|
||||
let createdAt: String
|
||||
let isLike: Bool
|
||||
let likeCount: Int
|
||||
let commentCount: Int
|
||||
let onTapLike: () -> Void
|
||||
let onTapComment: () -> Void
|
||||
let onTapPurchase: () -> Void
|
||||
|
||||
@State private var localIsLike: Bool
|
||||
@State private var localLikeCount: Int
|
||||
@StateObject private var playManager = CreatorCommunityMediaPlayerManager.shared
|
||||
@StateObject private var contentPlayManager = ContentPlayManager.shared
|
||||
|
||||
init(
|
||||
postId: Int,
|
||||
creatorNickname: String,
|
||||
creatorProfileImageUrl: String?,
|
||||
content: String,
|
||||
imageUrl: String?,
|
||||
audioUrl: String?,
|
||||
price: Int,
|
||||
existOrdered: Bool,
|
||||
createdAt: String,
|
||||
isLike: Bool,
|
||||
likeCount: Int,
|
||||
commentCount: Int,
|
||||
onTapLike: @escaping () -> Void = {},
|
||||
onTapComment: @escaping () -> Void = {},
|
||||
onTapPurchase: @escaping () -> Void = {}
|
||||
) {
|
||||
self.postId = postId
|
||||
self.creatorNickname = creatorNickname
|
||||
self.creatorProfileImageUrl = creatorProfileImageUrl
|
||||
self.content = content
|
||||
self.imageUrl = imageUrl
|
||||
self.audioUrl = audioUrl
|
||||
self.price = price
|
||||
self.existOrdered = existOrdered
|
||||
self.createdAt = createdAt
|
||||
self.isLike = isLike
|
||||
self.likeCount = likeCount
|
||||
self.commentCount = commentCount
|
||||
self.onTapLike = onTapLike
|
||||
self.onTapComment = onTapComment
|
||||
self.onTapPurchase = onTapPurchase
|
||||
_localIsLike = State(initialValue: isLike)
|
||||
_localLikeCount = State(initialValue: likeCount)
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s12) {
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s16) {
|
||||
header
|
||||
|
||||
Text(content)
|
||||
.appFont(.body4)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(3)
|
||||
.truncationMode(.tail)
|
||||
contentText
|
||||
|
||||
if hasImage {
|
||||
imageContent
|
||||
}
|
||||
|
||||
footer
|
||||
reactionBar
|
||||
}
|
||||
.padding(SodaSpacing.s12)
|
||||
.padding(SodaSpacing.s14)
|
||||
.background(Color.gray900)
|
||||
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
||||
.onChange(of: isLike) { newValue in
|
||||
localIsLike = newValue
|
||||
}
|
||||
.onChange(of: likeCount) { newValue in
|
||||
localLikeCount = newValue
|
||||
}
|
||||
}
|
||||
|
||||
private var header: some View {
|
||||
HStack(spacing: SodaSpacing.s8) {
|
||||
DownsampledKFImage(url: URL(string: creatorProfileImageUrl ?? ""), size: CGSize(width: 32, height: 32))
|
||||
DownsampledKFImage(url: URL(string: creatorProfileImageUrl ?? ""), size: CGSize(width: 42, height: 42))
|
||||
.background(Color.gray800)
|
||||
.clipShape(Circle())
|
||||
.frame(width: 42, height: 42)
|
||||
|
||||
Text(creatorNickname)
|
||||
.appFont(.body5)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(1)
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(creatorNickname)
|
||||
.appFont(.body4)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(1)
|
||||
|
||||
Text(createdAt)
|
||||
.appFont(.body5)
|
||||
.foregroundColor(Color.gray500)
|
||||
.lineLimit(1)
|
||||
}
|
||||
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
}
|
||||
|
||||
private var imageContent: some View {
|
||||
ZStack {
|
||||
DownsampledKFImage(url: URL(string: imageUrl ?? ""), size: CGSize(width: 240, height: 150))
|
||||
.background(Color.gray800)
|
||||
.frame(maxWidth: .infinity)
|
||||
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s12, style: .continuous))
|
||||
.blur(radius: isLocked ? 8 : 0)
|
||||
private var contentText: some View {
|
||||
Text(content)
|
||||
.appFont(.body2)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(5)
|
||||
.truncationMode(.tail)
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
|
||||
if isLocked {
|
||||
VStack(spacing: SodaSpacing.s6) {
|
||||
private var imageContent: some View {
|
||||
GeometryReader { proxy in
|
||||
ZStack {
|
||||
DownsampledKFImage(
|
||||
url: URL(string: imageUrl ?? ""),
|
||||
size: CGSize(width: proxy.size.width, height: proxy.size.height)
|
||||
)
|
||||
.background(Color.gray800)
|
||||
.frame(width: proxy.size.width, height: proxy.size.height)
|
||||
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
||||
.blur(radius: isLocked ? 12 : 0)
|
||||
|
||||
if isLocked {
|
||||
paidLockOverlay
|
||||
} else if hasAudio {
|
||||
audioPlayButton
|
||||
}
|
||||
}
|
||||
}
|
||||
.aspectRatio(346.0 / 236.0, contentMode: .fit)
|
||||
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
||||
}
|
||||
|
||||
private var paidLockOverlay: some View {
|
||||
Button(action: onTapPurchase) {
|
||||
ZStack {
|
||||
Color.gray700.opacity(0.35)
|
||||
|
||||
VStack(spacing: SodaSpacing.s4) {
|
||||
Image("ic_new_community_lock")
|
||||
.resizable()
|
||||
.renderingMode(.template)
|
||||
.foregroundColor(.white)
|
||||
.frame(width: 24, height: 24)
|
||||
|
||||
if let price {
|
||||
Text("\(price) can")
|
||||
.appFont(.caption2)
|
||||
.foregroundColor(Color.button)
|
||||
.padding(.horizontal, SodaSpacing.s12)
|
||||
.padding(.vertical, SodaSpacing.s6)
|
||||
.overlay(
|
||||
Capsule()
|
||||
.stroke(Color.button, lineWidth: 1)
|
||||
)
|
||||
HStack(spacing: SodaSpacing.s6) {
|
||||
Image("ic_can")
|
||||
.resizable()
|
||||
.frame(width: 20, height: 20)
|
||||
|
||||
Text("\(price)")
|
||||
.appFont(.body2)
|
||||
.foregroundColor(.black)
|
||||
}
|
||||
.padding(SodaSpacing.s8)
|
||||
.background(Color.white)
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
|
||||
private var footer: some View {
|
||||
HStack(spacing: SodaSpacing.s12) {
|
||||
if let createdAt, !createdAt.isEmpty {
|
||||
Text(createdAt)
|
||||
.appFont(.caption2)
|
||||
.foregroundColor(Color.gray500)
|
||||
}
|
||||
private var audioPlayButton: some View {
|
||||
Button {
|
||||
guard let audioUrl, !audioUrl.isEmpty else { return }
|
||||
|
||||
if let likeCount {
|
||||
Text("Like \(likeCount)")
|
||||
.appFont(.caption2)
|
||||
.foregroundColor(Color.gray500)
|
||||
}
|
||||
|
||||
if let commentCount {
|
||||
Text("Comment \(commentCount)")
|
||||
.appFont(.caption2)
|
||||
.foregroundColor(Color.gray500)
|
||||
}
|
||||
contentPlayManager.pauseAudio()
|
||||
playManager.toggleContent(item: CreatorCommunityContentItem(contentId: postId, url: audioUrl))
|
||||
} label: {
|
||||
Image(playManager.isPlaying && playManager.currentPlayingContentId == postId ? "btn_audio_content_pause" : "btn_audio_content_play")
|
||||
.resizable()
|
||||
.frame(width: 48, height: 48)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
|
||||
private var reactionBar: some View {
|
||||
HStack(spacing: 15) {
|
||||
Button {
|
||||
toggleLike()
|
||||
} label: {
|
||||
HStack(spacing: SodaSpacing.s4) {
|
||||
Image(localIsLike ? "ic_feed_community_heart_fill" : "ic_feed_community_heart")
|
||||
.resizable()
|
||||
.frame(width: 18, height: 18)
|
||||
|
||||
Text("\(localLikeCount)")
|
||||
.appFont(.body2)
|
||||
.foregroundColor(Color.gray400)
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
|
||||
Button(action: onTapComment) {
|
||||
HStack(spacing: SodaSpacing.s4) {
|
||||
Image("ic_feed_community_reply")
|
||||
.resizable()
|
||||
.frame(width: 18, height: 18)
|
||||
|
||||
Text("\(commentCount)")
|
||||
.appFont(.body2)
|
||||
.foregroundColor(Color.gray400)
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.frame(height: 24)
|
||||
}
|
||||
|
||||
private var hasImage: Bool {
|
||||
!(imageUrl ?? "").isEmpty
|
||||
}
|
||||
|
||||
private var hasAudio: Bool {
|
||||
!(audioUrl ?? "").isEmpty
|
||||
}
|
||||
|
||||
private var isLocked: Bool {
|
||||
(price ?? 0) > 0 && !existOrdered
|
||||
price > 0 && !existOrdered
|
||||
}
|
||||
|
||||
private func toggleLike() {
|
||||
localIsLike.toggle()
|
||||
localLikeCount += localIsLike ? 1 : -1
|
||||
localLikeCount = max(0, localLikeCount)
|
||||
onTapLike()
|
||||
}
|
||||
}
|
||||
|
||||
struct CommunityPostCard_Previews: PreviewProvider {
|
||||
private static let previewImageUrl = "https://picsum.photos/500/500"
|
||||
|
||||
static var previews: some View {
|
||||
CommunityPostCard(
|
||||
creatorNickname: "크리에이터",
|
||||
creatorProfileImageUrl: nil,
|
||||
content: "커뮤니티 본문입니다.",
|
||||
imageUrl: nil,
|
||||
price: nil,
|
||||
existOrdered: false,
|
||||
createdAt: "방금 전",
|
||||
likeCount: 10,
|
||||
commentCount: 2
|
||||
)
|
||||
.padding(SodaSpacing.s20)
|
||||
VStack(spacing: SodaSpacing.s8) {
|
||||
CommunityPostCard(
|
||||
postId: 1,
|
||||
creatorNickname: "크리에이터 이름",
|
||||
creatorProfileImageUrl: previewImageUrl,
|
||||
content: "크리에이터가 커뮤니티에 올린 글이 보이는 부분 크리에이터가 커뮤니티에 올린 글이 보이는 부분",
|
||||
imageUrl: nil,
|
||||
audioUrl: nil,
|
||||
price: 0,
|
||||
existOrdered: false,
|
||||
createdAt: "2분 전",
|
||||
isLike: false,
|
||||
likeCount: 5,
|
||||
commentCount: 6
|
||||
)
|
||||
|
||||
CommunityPostCard(
|
||||
postId: 2,
|
||||
creatorNickname: "크리에이터 이름",
|
||||
creatorProfileImageUrl: previewImageUrl,
|
||||
content: "이미지가 있는 커뮤니티 게시글입니다.",
|
||||
imageUrl: previewImageUrl,
|
||||
audioUrl: "https://example.com/audio.mp3",
|
||||
price: 30,
|
||||
existOrdered: false,
|
||||
createdAt: "2분 전",
|
||||
isLike: true,
|
||||
likeCount: 5,
|
||||
commentCount: 6
|
||||
)
|
||||
}
|
||||
.padding(SodaSpacing.s14)
|
||||
.background(Color.black)
|
||||
.previewLayout(.sizeThatFits)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user