feat(creator): 커뮤니티 섹션을 연결한다

SodaLive/Sources/V2/Component/Card/CommunityPostCard.swift

@@ -1,4 +1,5 @@
 import SwiftUI
+import Kingfisher
 
 struct CommunityPostCard: View {
     let postId: Int
@@ -67,8 +68,11 @@ struct CommunityPostCard: View {
                 imageContent
             }
 
-            reactionBar
+            if isAccessiblePost {
+                reactionBar
+            }
         }
+        .frame(maxWidth: .infinity, alignment: .leading)
         .padding(SodaSpacing.s14)
         .background(Color.gray900)
         .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
@@ -110,28 +114,26 @@ struct CommunityPostCard: View {
             .lineLimit(5)
             .truncationMode(.tail)
             .fixedSize(horizontal: false, vertical: true)
+            .frame(maxWidth: .infinity, alignment: .leading)
     }
 
     private var imageContent: some View {
-        GeometryReader { proxy in
-            ZStack {
-                DownsampledKFImage(
-                    url: URL(string: imageUrl ?? ""),
-                    size: CGSize(width: proxy.size.width, height: proxy.size.height)
-                )
+        ZStack {
+            KFImage(URL(string: imageUrl ?? ""))
+                .cancelOnDisappear(true)
+                .resizable()
+                .scaledToFit()
+                .frame(maxWidth: .infinity)
                 .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
-                }
+            if isLocked {
+                paidLockOverlay
+            } else if hasAudio {
+                audioPlayButton
             }
         }
-        .aspectRatio(346.0 / 236.0, contentMode: .fit)
+        .frame(maxWidth: .infinity)
         .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
     }
 
@@ -148,7 +150,7 @@ struct CommunityPostCard: View {
                         .frame(width: 24, height: 24)
 
                     HStack(spacing: SodaSpacing.s6) {
-                        Image("ic_can")
+                        Image("ic_bar_cash")
                             .resizable()
                             .frame(width: 20, height: 20)
 
@@ -224,6 +226,10 @@ struct CommunityPostCard: View {
         price > 0 && !existOrdered
     }
 
+    private var isAccessiblePost: Bool {
+        price == 0 || existOrdered
+    }
+
     private func toggleLike() {
         localIsLike.toggle()
         localLikeCount += localIsLike ? 1 : -1
@@ -236,39 +242,56 @@ struct CommunityPostCard_Previews: PreviewProvider {
     private static let previewImageUrl = "https://picsum.photos/500/500"
 
     static var previews: some View {
-        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
-            )
+        ScrollView(.vertical, showsIndicators: false) {
+            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
-            )
+                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
+                )
+
+                CommunityPostCard(
+                    postId: 3,
+                    creatorNickname: "크리에이터 이름",
+                    creatorProfileImageUrl: previewImageUrl,
+                    content: "이미지가 있는 커뮤니티 게시글입니다.",
+                    imageUrl: previewImageUrl,
+                    audioUrl: "https://example.com/audio.mp3",
+                    price: 0,
+                    existOrdered: false,
+                    createdAt: "2분 전",
+                    isLike: true,
+                    likeCount: 5,
+                    commentCount: 6
+                )
+            }
+            .padding(SodaSpacing.s14)
+            .background(Color.black)
+            .previewLayout(.sizeThatFits)
         }
-        .padding(SodaSpacing.s14)
-        .background(Color.black)
-        .previewLayout(.sizeThatFits)
     }
 }