feat(creator): 커뮤니티 게시글 상세를 연결한다
This commit is contained in:
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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: {}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user