feat(home): 인기 커뮤니티 섹션을 연결한다

docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md

@@ -381,7 +381,7 @@
 
 ### Phase 15: 인기 커뮤니티 섹션 UI와 FeedCommunityView
 
-- [ ] **Task 15.1: FeedCommunityView/CommunityPostCard 요구 보완**
+- [x] **Task 15.1: FeedCommunityView/CommunityPostCard 요구 보완**
   - 대상 파일:
     - 확인/보완: `SodaLive/Sources/V2/Component/Card/CommunityPostCard.swift`
     - 생성/보완: `SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomePopularCommunitySection.swift`
@@ -392,10 +392,12 @@
     - `price <= 0 || existOrdered == true`이면 일반 이미지로 표시한다.
     - `구매완료` 버튼은 표시하지 않는다.
     - `creatorProfileImage`, `createdAt`, `likeCount`, `commentCount`를 표시한다.
-    - `audioUrl` 재생 UI는 확정 전까지 추가하지 않는다.
+    - `audioUrl`이 있으면 이미지 중앙 재생 UI를 표시한다.
+    - 기존 커뮤니티 구매 API를 재사용해 유료 미구매 포스트 구매를 지원한다.
+    - `createdAt`은 UTC로 파싱해 디바이스 Timezone 기준 상대 날짜로 표시한다.
   - 검증 기준:
-    - 실행 명령: `rg "MainHomePopularCommunitySection|CommunityPostCard|imageUrl|audioUrl|existOrdered|구매완료" SodaLive/Sources/V2`
-    - 기대 결과: 커뮤니티 섹션과 카드 조건 분기가 확인되고 `구매완료` 표시 구현은 없어야 한다.
+    - 실행 명령: `rg "MainHomePopularCommunitySection|CommunityPostCard|imageUrl|audioUrl|existOrdered|구매완료|purchaseCommunityPost|communityPostLike|toggleContent|relativeTimeText" SodaLive/Sources/V2 SodaLive/Sources/Common SodaLive/Sources/Explorer/Profile/CreatorCommunity`
+    - 기대 결과: 커뮤니티 섹션과 카드 조건 분기, 오디오 재생, 구매/좋아요 연결, UTC 상대 날짜 변환이 확인되고 `구매완료` 표시 구현은 없어야 한다.
 
 ### Phase 16: 사업자 정보 섹션 UI
 
@@ -477,6 +479,40 @@
 
 ## 검증 기록
 
+### 2026-06-30 Phase 15 isLiked 컴파일 보완
+
+- 목적: `HomePopularCommunityPostItem.isLiked` 추가 이후 추천 인기 커뮤니티 섹션 컴파일 오류 보완
+- 수행 내용:
+  - `HomePopularCommunityPostItem`에 `isLiked` 필드를 유지하고, 섹션에서 사용하는 `relativeCreatedAtText(now:)` helper를 복구
+  - `MainHomePopularCommunitySection`이 `item.isLiked`를 `CommunityPostCard(isLike:)` 초기 상태로 전달하는지 확인
+- 검증:
+  - `rg -n "HomePopularCommunityPostItem\(|\.isLike\b|isLike: item|isLiked|relativeCreatedAtText"` 실행, 추천 섹션에 남은 `item.isLike` 참조 없음 확인
+  - `git diff --check` 실행, 출력 없이 성공 확인
+  - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 실행, `BUILD SUCCEEDED` 확인
+
+### 2026-06-29 Phase 15 인기 커뮤니티 섹션 세로 FeedCommunityView 보정 완료
+
+- 목적: V2 Main Home 추천 탭의 인기 커뮤니티 섹션을 Figma `24:5645`, `567:17875`, `567:17878` 기준 세로 FeedCommunityView 형태로 보정
+- 수행 내용:
+  - `MainHomePopularCommunitySection`의 가로 `ScrollView`/`LazyHStack`/240폭 카드 구성을 제거하고, 부모 추천 ScrollView 안에서 세로 `VStack` 피드 목록으로 표시
+  - `CommunityPostCard`를 Figma FeedCommunityView 형태로 보정해 Text Only, Text + Image, Text + Image + Audio, 유료 미구매 잠금 상태를 지원
+  - `audioUrl`이 있으면 기존 `CreatorCommunityMediaPlayerManager`와 `ContentPlayManager.pauseAudio()` 흐름을 재사용해 이미지 중앙 재생/일시정지 버튼을 표시
+  - 기존 `CreatorCommunityRepository.communityPostLike(postId:)`, `purchaseCommunityPost(postId:)`, `CommunityPostPurchaseDialog`를 추천 ViewModel에 연결해 좋아요와 유료 미구매 포스트 구매를 지원
+  - `DateParser.relativeTimeText(fromUTC:fallback:now:)`를 공용 함수로 추가하고, 기존 커뮤니티 상세와 추천 홈 카드가 UTC 날짜를 디바이스 Timezone 기준 상대 날짜로 표시하도록 연결
+  - `HomePopularCommunityPostItem.isLiked`를 카드 좋아요 초기 상태와 연결
+  - 키워드 영역과 `구매완료` 버튼은 추가하지 않음
+  - `MainHomeRecommendationView`에서 응원 섹션 다음에 인기 커뮤니티 섹션을 배치하고, 댓글 아이콘 탭은 기존 `creatorCommunityAll(creatorId:)` 라우팅에 맞춰 `creatorId`를 전달
+  - 신규 `MainHomePopularCommunitySection.swift`를 `SodaLive.xcodeproj/project.pbxproj` 빌드 대상에 포함
+- 검증:
+  - Figma `24:5645`, `567:17875`, `567:17878` 디자인 컨텍스트와 스크린샷 확인, 인기 커뮤니티 섹션이 세로 리스트이고 Feed 카드가 14 padding, 16 gap, 14 radius, 댓글/좋아요 18 아이콘 구조임을 확인
+  - `rg -n "ScrollView\\(\\.horizontal|LazyHStack|frame\\(width: 240\\)" SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomePopularCommunitySection.swift SodaLive/Sources/V2/Component/Card/CommunityPostCard.swift` 실행, 검색 결과 없음 확인
+  - `rg -n "ic_feed_community_heart|ic_feed_community_heart_fill|ic_feed_community_reply|CommunityPostPurchaseDialog|purchaseCommunityPost|communityPostLike|toggleContent\\(item:|relativeTimeText\\(fromUTC|relativeCreatedAtText|CreatorCommunityRepository" SodaLive/Sources` 실행, 좋아요/댓글 아이콘, 구매/좋아요 API, 오디오 재생, UTC 상대 날짜 연결 확인
+  - `rg -n "localhost:3845|figma.com" SodaLive/Sources/V2/Main/Home SodaLive/Sources/V2/Component` 실행, 검색 결과 없음 확인
+  - `plutil -lint SodaLive.xcodeproj/project.pbxproj` 실행, `OK` 확인
+  - `git diff --check` 실행, 출력 없이 성공 확인
+  - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" test` 실행, `Scheme SodaLive-dev is not currently configured for the test action`으로 테스트 액션 미구성 확인
+  - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 실행, `BUILD SUCCEEDED` 확인
+
 ### 2026-06-29 Phase 14 최근 응원이 많은 크리에이터 섹션 구현 완료
 
 - 목적: V2 Main Home 추천 탭에 Figma `24:5636`, `309:19196` 기준 최근 응원이 많은 크리에이터 섹션을 연결

docs/20260602_메인_홈_추천_UI_API_연동/prd.md

@@ -9,7 +9,7 @@
 - 추천 탭 전용 데이터가 기존 홈 API와 섞이면 응답/화면 책임이 커지고 회귀 위험이 커진다.
 - Figma 추천 탭은 라이브, 배너, 최근 활동, 최근 데뷔, AI 캐릭터, 장르 크리에이터, 응원 크리에이터, 인기 커뮤니티, 사업자 정보 등 여러 독립 섹션으로 구성된다.
 - 섹션별 UI가 많으므로 한 화면 파일에 직접 구현하면 유지보수와 검증이 어려워진다.
-- `FeedCommunityView`는 추천 탭 요구에 맞춰 키워드 영역 제거, 이미지 표시, 유료/구매 상태 UI가 필요하다.
+- `FeedCommunityView`는 추천 탭 요구에 맞춰 키워드 영역 제거, 이미지 표시, 오디오 재생, 유료/구매 상태 UI가 필요하다.
 - 사업자 정보는 외부 라이브러리 없이 최대 3줄 말줄임표, 더보기, 접기 동작을 제공해야 한다.
 
 ## 3. Goals
@@ -22,7 +22,7 @@
 - `RecommendedActivityType` 서버 enum 값을 앱 enum으로 변환하고 I18n 문구로 표시한다.
 - 빈 데이터 섹션은 제목과 컨테이너를 표시하지 않는다.
 - 사업자 정보 섹션은 화면 width를 채우고, 기본 3줄 말줄임표와 더보기/접기 전환을 지원한다.
-- `FeedCommunityView`는 추천 탭 요구에 맞게 이미지와 유료 커뮤니티 포스트 UI를 지원한다.
+- `FeedCommunityView`는 추천 탭 요구에 맞게 세로 피드형 이미지/오디오/유료 커뮤니티 포스트 UI를 지원한다.
 
 ## 4. Non-Goals
 - `추천 필모그래피` 섹션은 만들지 않는다.
@@ -135,6 +135,7 @@ data class HomePopularCommunityPostItem(
     val createdAt: String,
     val likeCount: Long,
     val commentCount: Long,
+    val isLiked: Boolean,
     val existOrdered: Boolean
 )
 ```
@@ -187,18 +188,22 @@ enum class RecommendedActivityType(val code: String) {
 ### 7.4 FeedCommunityView
 
 참조 Figma:
-- 유료이고 구매하지 않은 UI: `node-id=309-19774`
-- 유료인데 구매함 또는 무료 UI: `node-id=309-19775`
+- 인기 커뮤니티 섹션: `node-id=24-5645`
+- Text Only Feed: `node-id=567-17875`
+- Text + Image Feed: `node-id=567-17878`
 
 요구사항:
 - 키워드 영역을 제거한다.
+- 인기 커뮤니티 섹션은 가로 캐러셀이 아니라 세로 피드 목록으로 배치한다.
 - 커뮤니티 포스트 이미지를 추가한다.
 - `imageUrl == nil`이면 이미지 영역 없이 본문 중심으로 표시한다.
 - `imageUrl != nil && price > 0 && existOrdered == false`이면 유료 미구매 상태 UI를 표시한다.
 - `imageUrl != nil && (price <= 0 || existOrdered == true)`이면 이미지를 일반 노출한다.
-- `node-id=309-19775`의 `구매완료` 버튼은 뺀다.
+- `audioUrl`이 있으면 이미지 중앙에 재생/일시정지 버튼을 표시하고 기존 커뮤니티 오디오 재생 흐름을 재사용한다.
+- 유료 미구매 커뮤니티 포스트는 기존 커뮤니티 구매 API로 구매 가능해야 한다.
+- `구매완료` 버튼은 표시하지 않는다.
 - 작성자, 본문, 생성 시간, 좋아요 수, 댓글 수를 표시한다.
-- `audioUrl`은 이번 추천 탭 카드에서 표시 대상이 확정되지 않았으므로 재생 UI를 추가하지 않는다.
+- 생성 시간은 UTC 값을 디바이스 Timezone 기준 상대 날짜로 표시한다.
 
 ### 7.5 사업자 정보 더보기/접기