feat(creator): 커뮤니티 게시글 상세를 연결한다

This commit is contained in:
Yu Sung
2026-07-08 01:56:57 +09:00
parent f2d589eca2
commit c0369e6f58
23 changed files with 2187 additions and 138 deletions

View File

@@ -0,0 +1,51 @@
import SwiftUI
struct CreatorChannelCommunityPostDetailCommentListView: View {
let creatorId: Int
let postId: Int
let commentCount: Int
let comments: [CreatorChannelCommunityCommentResponse]
let selectedComment: CreatorChannelCommunityCommentResponse?
let canEdit: (CreatorChannelCommunityCommentResponse) -> Bool
let canDelete: (CreatorChannelCommunityCommentResponse) -> Bool
let onAppearComment: (CreatorChannelCommunityCommentResponse) -> Void
let onTapReplyDetail: (CreatorChannelCommunityCommentResponse) -> Void
let onTapMore: (CreatorChannelCommunityCommentResponse) -> Void
let onTapEdit: (CreatorChannelCommunityCommentResponse) -> Void
let onTapDelete: (CreatorChannelCommunityCommentResponse) -> Void
var body: some View {
VStack(alignment: .leading, spacing: SodaSpacing.s16) {
Text("댓글 \(commentCount)")
.appFont(size: 16, weight: .medium)
.foregroundColor(.white)
.padding(.horizontal, SodaSpacing.s14)
LazyVStack(alignment: .leading, spacing: SodaSpacing.s20) {
ForEach(comments, id: \.commentId) { comment in
ZStack(alignment: .topTrailing) {
CreatorChannelCommunityPostDetailCommentRow(
comment: comment,
creatorId: creatorId,
onTapReplyDetail: { onTapReplyDetail(comment) },
onTapMore: { onTapMore(comment) }
)
if selectedComment?.commentId == comment.commentId {
CreatorChannelActionPopup(
canEdit: canEdit(comment),
canDelete: canDelete(comment),
onTapEdit: { onTapEdit(comment) },
onTapDelete: { onTapDelete(comment) }
)
.padding(.top, 28)
}
}
.onAppear { onAppearComment(comment) }
}
}
.padding(.horizontal, SodaSpacing.s14)
}
.padding(.vertical, SodaSpacing.s20)
}
}

View File

@@ -0,0 +1,134 @@
import SwiftUI
struct CreatorChannelCommunityPostDetailCommentRow: View {
let comment: CreatorChannelCommunityCommentResponse
let creatorId: Int
let onTapReplyDetail: () -> Void
let onTapMore: () -> Void
private var currentUserId: Int { UserDefaults.int(forKey: .userId) }
var body: some View {
Button(action: onTapReplyDetail) {
VStack(alignment: .leading, spacing: SodaSpacing.s12) {
HStack(alignment: .top, spacing: SodaSpacing.s8) {
DownsampledKFImage(url: URL(string: comment.writerProfileImageUrl), size: CGSize(width: 42, height: 42))
.background(Color.gray800)
.clipShape(Circle())
.frame(width: 42, height: 42)
VStack(alignment: .leading, spacing: SodaSpacing.s8) {
header
Text(comment.content)
.appFont(size: 16, weight: .regular)
.foregroundColor(.white)
.fixedSize(horizontal: false, vertical: true)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
if let latestReply = comment.latestReply {
latestReplyCard(latestReply)
.padding(.leading, 50)
.background(alignment: .leading) {
CreatorChannelCommunityPostDetailReplyConnector()
.stroke(Color.gray800, style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round))
.frame(width: 42)
.padding(.leading, 20)
}
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
}
private var header: some View {
HStack(spacing: SodaSpacing.s8) {
Text(comment.writerNickname)
.appFont(size: 14, weight: .medium)
.foregroundColor(.white)
.lineLimit(1)
Text(comment.relativeTimeText())
.appFont(size: 14, weight: .regular)
.foregroundColor(Color.gray500)
.lineLimit(1)
if comment.isSecret {
Text(I18n.Explorer.secretComment)
.appFont(size: 11, weight: .medium)
.foregroundColor(Color.grayee)
.padding(.horizontal, 4)
.padding(.vertical, 2)
.background(Color.soda400.opacity(0.2))
.cornerRadius(3)
}
Spacer(minLength: 0)
if showsMoreButton {
Button(action: onTapMore) {
Image("ic_new_more")
.resizable()
.frame(width: 24, height: 24)
}
.buttonStyle(.plain)
}
}
}
private func latestReplyCard(_ latestReply: CreatorChannelCommunityReplyResponse) -> some View {
VStack(alignment: .leading, spacing: SodaSpacing.s8) {
HStack(spacing: SodaSpacing.s8) {
DownsampledKFImage(url: URL(string: latestReply.writerProfileImageUrl), size: CGSize(width: 20, height: 20))
.background(Color.gray800)
.clipShape(Circle())
.frame(width: 20, height: 20)
Text(latestReply.writerNickname)
.appFont(size: 13, weight: .medium)
.foregroundColor(.white)
.lineLimit(1)
Text(latestReply.relativeTimeText())
.appFont(size: 14, weight: .regular)
.foregroundColor(Color.gray500)
.lineLimit(1)
Spacer(minLength: 0)
}
Text(latestReply.content)
.appFont(size: 16, weight: .regular)
.foregroundColor(.white)
.fixedSize(horizontal: false, vertical: true)
.frame(maxWidth: .infinity, alignment: .leading)
}
.padding(SodaSpacing.s12)
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color.gray900)
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
}
private var showsMoreButton: Bool {
comment.writerId == currentUserId || creatorId == currentUserId
}
}
private struct CreatorChannelCommunityPostDetailReplyConnector: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
let startX: CGFloat = 0
let endX: CGFloat = rect.width
let endY = rect.height - 8
let bendY = max(0, endY - 14)
path.move(to: CGPoint(x: startX, y: 0))
path.addLine(to: CGPoint(x: startX, y: bendY))
path.addQuadCurve(to: CGPoint(x: endX, y: endY), control: CGPoint(x: startX, y: endY))
return path
}
}

View File

@@ -0,0 +1,194 @@
import SwiftUI
import SDWebImageSwiftUI
struct CreatorChannelCommunityPostDetailContentView: View {
let detail: CreatorChannelCommunityPostDetailResponse
let onTapLike: () -> Void
let onTapPurchase: () -> Void
@StateObject private var playManager = CreatorCommunityMediaPlayerManager.shared
@StateObject private var contentPlayManager = ContentPlayManager.shared
var body: some View {
VStack(alignment: .leading, spacing: SodaSpacing.s16) {
if detail.isPinned {
pinnedLabel
}
header
Text(detail.content)
.appFont(size: 16, weight: .regular)
.foregroundColor(.white)
.fixedSize(horizontal: false, vertical: true)
.frame(maxWidth: .infinity, alignment: .leading)
mediaContent
reactionBar
}
.padding(SodaSpacing.s14)
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color.black)
}
private var pinnedLabel: some View {
HStack(spacing: 2) {
Image("ic_pin")
.resizable()
.scaledToFit()
.frame(width: 18, height: 18)
Text("Notice")
.appFont(size: 14, weight: .medium)
.foregroundColor(Color(hex: "73FF01"))
}
}
private var header: some View {
HStack(spacing: SodaSpacing.s8) {
DownsampledKFImage(url: URL(string: detail.creatorProfileUrl), size: CGSize(width: 42, height: 42))
.background(Color.gray800)
.clipShape(Circle())
.frame(width: 42, height: 42)
VStack(alignment: .leading, spacing: 2) {
Text(detail.creatorNickname)
.appFont(size: 14, weight: .medium)
.foregroundColor(.white)
.lineLimit(1)
Text(detail.relativeTimeText())
.appFont(size: 14, weight: .regular)
.foregroundColor(Color.gray500)
.lineLimit(1)
}
Spacer(minLength: 0)
if detail.price > 0 && detail.existOrdered && isOwnPost == false {
purchaseCompleteTag
}
}
}
@ViewBuilder
private var mediaContent: some View {
if isPaidLocked {
Button(action: onTapPurchase) {
RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous)
.fill(Color.gray800)
.frame(maxWidth: .infinity)
.frame(height: 236)
.overlay(paidLockedOverlay)
}
.buttonStyle(.plain)
} else if let imageUrl = detail.imageUrl, imageUrl.isEmpty == false {
ZStack {
WebImage(url: URL(string: imageUrl))
.resizable()
.scaledToFit()
.frame(maxWidth: .infinity)
.background(Color.gray800)
audioPlayButton
}
.frame(maxWidth: .infinity)
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
} else if detail.audioUrl?.isEmpty == false {
RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous)
.fill(Color.gray900)
.frame(maxWidth: .infinity)
.frame(height: 132)
.overlay(audioPlayButton)
}
}
@ViewBuilder
private var audioPlayButton: some View {
if let audioUrl = detail.audioUrl, audioUrl.isEmpty == false {
Button {
contentPlayManager.pauseAudio()
playManager.toggleContent(item: CreatorCommunityContentItem(contentId: detail.postId, url: audioUrl))
} label: {
Image(playManager.isPlaying && playManager.currentPlayingContentId == detail.postId ? "btn_audio_content_pause" : "btn_audio_content_play")
.resizable()
.frame(width: 48, height: 48)
}
.buttonStyle(.plain)
}
}
private var paidLockedOverlay: some View {
VStack(spacing: SodaSpacing.s4) {
Image("ic_new_community_lock")
.resizable()
.renderingMode(.template)
.foregroundColor(.white)
.frame(width: 24, height: 24)
HStack(spacing: SodaSpacing.s6) {
Image("ic_bar_cash")
.resizable()
.frame(width: 20, height: 20)
Text("\(detail.price)")
.appFont(size: 16, weight: .medium)
.foregroundColor(Color.black)
}
.padding(SodaSpacing.s8)
.background(Color.white)
.clipShape(Capsule())
}
}
private var purchaseCompleteTag: some View {
Text("구매완료")
.appFont(size: 12, weight: .medium)
.foregroundColor(Color.black)
.padding(.horizontal, SodaSpacing.s8)
.padding(.vertical, SodaSpacing.s4)
.background(Color.soda400)
.clipShape(Capsule())
}
private var reactionBar: some View {
HStack(spacing: 15) {
if isPaidLocked == false {
Button(action: onTapLike) {
HStack(spacing: SodaSpacing.s4) {
Image(detail.isLiked ? "ic_feed_community_heart_fill" : "ic_feed_community_heart")
.resizable()
.frame(width: 18, height: 18)
Text("\(detail.likeCount)")
.appFont(size: 16, weight: .regular)
.foregroundColor(Color.gray500)
}
}
.buttonStyle(.plain)
if detail.isCommentAvailable {
HStack(spacing: SodaSpacing.s4) {
Image("ic_feed_community_reply")
.resizable()
.frame(width: 18, height: 18)
Text("\(detail.commentCount)")
.appFont(size: 16, weight: .regular)
.foregroundColor(Color.gray500)
}
}
}
}
.frame(height: 24)
}
private var isOwnPost: Bool {
detail.creatorId == UserDefaults.int(forKey: .userId)
}
private var isPaidLocked: Bool {
detail.price > 0 && detail.existOrdered == false && isOwnPost == false
}
}

View File

@@ -0,0 +1,152 @@
import SwiftUI
struct CreatorChannelCommunityPostDetailInputBar: View {
@Binding var text: String
@Binding var isSecret: Bool
let isShowSecret: Bool
let isSendEnabled: Bool
let isEditing: Bool
let onTapSend: () -> Void
let onTapCancelEditing: () -> Void
var body: some View {
VStack(spacing: 0) {
Rectangle()
.fill(Color.gray800)
.frame(height: 1)
if isShowSecret {
secretToggle
}
HStack(alignment: .bottom, spacing: SodaSpacing.s8) {
if isEditing {
Button(action: onTapCancelEditing) {
Image("ic_close_white")
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
.frame(width: 36, height: 36)
}
.buttonStyle(.plain)
}
TextField(I18n.CreatorChannelCommunity.commentPlaceholder, text: $text, axis: .vertical)
.autocapitalization(.none)
.disableAutocorrection(true)
.appFont(size: 15, weight: .regular)
.foregroundColor(.white)
.accentColor(Color.soda400)
.lineLimit(1...3)
.padding(.horizontal, SodaSpacing.s14)
.padding(.vertical, SodaSpacing.s8)
.frame(minHeight: 40)
.background(Color.gray900)
.clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
Button(action: {
guard isSendEnabled else { return }
onTapSend()
}) {
Image(isSendEnabled ? "ic_arrow_up_white" : "ic_arrow_up_gray")
.resizable()
.scaledToFit()
.frame(width: 20, height: 20)
.frame(width: 36, height: 36)
.background(isSendEnabled ? Color.soda400 : Color.gray900)
.clipShape(Circle())
}
.buttonStyle(.plain)
.disabled(isSendEnabled == false)
}
.padding(.horizontal, SodaSpacing.s14)
.padding(.vertical, SodaSpacing.s8)
}
.background(Color.black)
}
private var secretToggle: some View {
Button {
isSecret.toggle()
} label: {
HStack(spacing: SodaSpacing.s6) {
Image(isSecret ? "btn_square_select_checked" : "btn_square_select_normal")
.resizable()
.frame(width: 18, height: 18)
Text(I18n.Explorer.secretComment)
.appFont(size: 13, weight: .regular)
.foregroundColor(Color.gray500)
Spacer(minLength: 0)
}
.padding(.horizontal, SodaSpacing.s14)
.padding(.top, SodaSpacing.s8)
}
.buttonStyle(.plain)
}
}
struct CreatorChannelCommunityPostDetailInputBar_Previews: PreviewProvider {
static var previews: some View {
Group {
PreviewWrapper(
text: "Secret comment",
isSecret: true,
isShowSecret: true,
isSendEnabled: true,
isEditing: false
)
.padding(.vertical, SodaSpacing.s16)
.background(Color.black)
.previewLayout(.sizeThatFits)
.previewDisplayName("isShowSecret: true")
PreviewWrapper(
text: "Public comment",
isSecret: false,
isShowSecret: false,
isSendEnabled: true,
isEditing: false
)
.padding(.vertical, SodaSpacing.s16)
.background(Color.black)
.previewLayout(.sizeThatFits)
.previewDisplayName("isShowSecret: false")
}
}
private struct PreviewWrapper: View {
@State private var text: String
@State private var isSecret: Bool
let isShowSecret: Bool
let isSendEnabled: Bool
let isEditing: Bool
init(
text: String,
isSecret: Bool,
isShowSecret: Bool,
isSendEnabled: Bool,
isEditing: Bool
) {
_text = State(initialValue: text)
_isSecret = State(initialValue: isSecret)
self.isShowSecret = isShowSecret
self.isSendEnabled = isSendEnabled
self.isEditing = isEditing
}
var body: some View {
CreatorChannelCommunityPostDetailInputBar(
text: $text,
isSecret: $isSecret,
isShowSecret: isShowSecret,
isSendEnabled: isSendEnabled,
isEditing: isEditing,
onTapSend: {},
onTapCancelEditing: {}
)
}
}
}