feat(home): 장르 크리에이터 섹션을 연결한다

SodaLive.xcodeproj/project.pbxproj

@@ -228,6 +228,8 @@
 		401A3FD12FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */; };
 		401A3FD22FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */; };
 		401A3FD32FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */; };
+		401A3FD72FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FD52FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift */; };
+		401A3FD82FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FD52FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift */; };
 		40235DED2E3797EB00B09A87 /* RecentContent+CoreDataClass.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40235DEC2E3797EB00B09A87 /* RecentContent+CoreDataClass.swift */; };
 		40235DEE2E3797EB00B09A87 /* RecentContent+CoreDataClass.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40235DEC2E3797EB00B09A87 /* RecentContent+CoreDataClass.swift */; };
 		40235DF02E37983D00B09A87 /* PersistenceController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40235DEF2E37983D00B09A87 /* PersistenceController.swift */; };
@@ -1746,6 +1748,7 @@
 		401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeActiveCreatorSection.swift; sourceTree = "<group>"; };
 		401A3FCD2FEEB00400A5BBA3 /* MainHomeRecentDebutCreatorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeRecentDebutCreatorSection.swift; sourceTree = "<group>"; };
 		401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeAiCharacterSection.swift; sourceTree = "<group>"; };
+		401A3FD52FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeGenreCreatorSection.swift; sourceTree = "<group>"; };
 		40235DEC2E3797EB00B09A87 /* RecentContent+CoreDataClass.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "RecentContent+CoreDataClass.swift"; sourceTree = "<group>"; };
 		40235DEF2E37983D00B09A87 /* PersistenceController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PersistenceController.swift; sourceTree = "<group>"; };
 		40235DF22E37987300B09A87 /* RecentContentService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RecentContentService.swift; sourceTree = "<group>"; };
@@ -2750,6 +2753,7 @@
 				401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */,
 				401A3FCD2FEEB00400A5BBA3 /* MainHomeRecentDebutCreatorSection.swift */,
 				401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */,
+				401A3FD52FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -6103,6 +6107,7 @@
 				401A3FCA2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */,
 				401A3FCF2FEEB00400A5BBA3 /* MainHomeRecentDebutCreatorSection.swift in Sources */,
 				401A3FD22FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift in Sources */,
+				401A3FD72FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift in Sources */,
 				401A3FAE2FEEAFA000A5BBA3 /* MainHomeRankingView.swift in Sources */,
 				401A3FAF2FEEAFA000A5BBA3 /* MainHomeFollowingView.swift in Sources */,
 				B3AF650899B8FC84E0C0CDA0 /* MainPlaceholderTabView.swift in Sources */,
@@ -6881,6 +6886,7 @@
 				401A3FCB2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */,
 				401A3FD02FEEB00400A5BBA3 /* MainHomeRecentDebutCreatorSection.swift in Sources */,
 				401A3FD32FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift in Sources */,
+				401A3FD82FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift in Sources */,
 				401A3FB22FEEAFA000A5BBA3 /* MainHomeRankingView.swift in Sources */,
 				401A3FB32FEEAFA000A5BBA3 /* MainHomeFollowingView.swift in Sources */,
 				ACD71056E97E13E48941ABBB /* MainPlaceholderTabView.swift in Sources */,

SodaLive/Sources/V2/Component/Button/FollowAllButton.swift

@@ -24,19 +24,31 @@ struct FollowAllButton: View {
             HStack(spacing: SodaSpacing.s6) {
                 if isCompleted {
                     Image("ic_new_following")
+                        .resizable()
+                        .renderingMode(.template)
+                        .foregroundColor(.black)
+                        .frame(width: 20, height: 20)
+                } else {
+                    Image("ic_new_follow")
                         .resizable()
                         .renderingMode(.template)
                         .foregroundColor(.white)
-                        .frame(width: 16, height: 16)
+                        .frame(width: 20, height: 20)
                 }
 
                 Text(isCompleted ? I18n.HomeRecommendation.followAllCompleted : I18n.HomeRecommendation.followAll)
                     .appFont(.body5)
-                    .foregroundColor(.white)
+                    .foregroundColor(isCompleted ? .black : .white)
+            }
+            .padding(SodaSpacing.s12)
+            .frame(maxWidth: .infinity)
+            .background(isCompleted ? Color.white : Color.clear)
+            .overlay {
+                if !isCompleted {
+                    Capsule()
+                        .stroke(Color.white.opacity(0.3), lineWidth: 1)
+                }
             }
-            .padding(.horizontal, SodaSpacing.s16)
-            .frame(height: 36)
-            .background(isCompleted ? Color.gray700 : Color.button)
             .clipShape(Capsule())
             .opacity(isLoading ? 0.6 : 1)
         }

SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift

@@ -4,17 +4,23 @@ struct CreatorProfileItem: View {
     let imageUrl: String?
     let name: String
     let subtitle: String?
+    let imageSize: CGSize
+    let spacing: CGFloat
     let action: (() -> Void)?
 
     init(
         imageUrl: String?,
         name: String,
         subtitle: String? = nil,
+        imageSize: CGSize = CGSize(width: 72, height: 72),
+        spacing: CGFloat = SodaSpacing.s8,
         action: (() -> Void)? = nil
     ) {
         self.imageUrl = imageUrl
         self.name = name
         self.subtitle = subtitle
+        self.imageSize = imageSize
+        self.spacing = spacing
         self.action = action
     }
 
@@ -22,7 +28,7 @@ struct CreatorProfileItem: View {
         Button {
             action?()
         } label: {
-            VStack(alignment: .center, spacing: SodaSpacing.s8) {
+            VStack(alignment: .center, spacing: spacing) {
                 profileImage
 
                 VStack(alignment: .center, spacing: 2) {
@@ -48,7 +54,7 @@ struct CreatorProfileItem: View {
     }
 
     private var profileImage: some View {
-        DownsampledKFImage(url: URL(string: imageUrl ?? ""), size: CGSize(width: 72, height: 72))
+        DownsampledKFImage(url: URL(string: imageUrl ?? ""), size: imageSize)
             .background(Color.gray800)
             .clipShape(Circle())
     }

SodaLive/Sources/V2/Main/Home/MainHomeView.swift

@@ -10,6 +10,7 @@ struct MainHomeView: View {
     let onTapCharacter: (Int) -> Void
     let onTapCommunity: (Int) -> Void
     let onTapBanner: (RecommendationBannerResponse) -> Void
+    let onTapFollowAll: (@escaping () -> Void) -> Void
 
     @State private var selectedTab: MainHomeTab = .recommendation
 
@@ -50,7 +51,8 @@ struct MainHomeView: View {
                 onTapContent: onTapContent,
                 onTapCharacter: onTapCharacter,
                 onTapCommunity: onTapCommunity,
-                onTapBanner: onTapBanner
+                onTapBanner: onTapBanner,
+                onTapFollowAll: onTapFollowAll
             )
         case .ranking:
             MainHomeRankingView()
@@ -88,7 +90,8 @@ struct MainHomeView_Previews: PreviewProvider {
             onTapContent: { _ in },
             onTapCharacter: { _ in },
             onTapCommunity: { _ in },
-            onTapBanner: { _ in }
+            onTapBanner: { _ in },
+            onTapFollowAll: { action in action() }
         )
     }
 }

SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeGenreCreatorSection.swift

@@ -0,0 +1,147 @@
+import SwiftUI
+
+struct MainHomeGenreCreatorSection: View {
+    let items: [HomeGenreCreatorGroupItem]
+    let isFollowAllCompleted: (String) -> Bool
+    let isFollowAllLoading: (String) -> Bool
+    let onTapCreator: (Int) -> Void
+    let onTapFollowAll: ([Int], String) -> Void
+
+    init(
+        items: [HomeGenreCreatorGroupItem],
+        isFollowAllCompleted: @escaping (String) -> Bool = { _ in false },
+        isFollowAllLoading: @escaping (String) -> Bool = { _ in false },
+        onTapCreator: @escaping (Int) -> Void = { _ in },
+        onTapFollowAll: @escaping ([Int], String) -> Void = { _, _ in }
+    ) {
+        self.items = items
+        self.isFollowAllCompleted = isFollowAllCompleted
+        self.isFollowAllLoading = isFollowAllLoading
+        self.onTapCreator = onTapCreator
+        self.onTapFollowAll = onTapFollowAll
+    }
+
+    var body: some View {
+        if !items.isEmpty {
+            ScrollView(.horizontal, showsIndicators: false) {
+                LazyHStack(alignment: .top, spacing: SodaSpacing.s4) {
+                    ForEach(Array(items.enumerated()), id: \.offset) { index, item in
+                        let followKey = "genre-\(index)-\(item.genreName)"
+
+                        MainHomeCreatorGroupSection(
+                            title: item.genreName,
+                            creators: item.creators,
+                            isFollowAllCompleted: isFollowAllCompleted(followKey),
+                            isFollowAllLoading: isFollowAllLoading(followKey),
+                            onTapCreator: onTapCreator,
+                            onTapFollowAll: {
+                                onTapFollowAll(item.creators.map(\.creatorId), followKey)
+                            }
+                        )
+                    }
+                }
+                .padding(.leading, SodaSpacing.s14)
+                .padding(.trailing, SodaSpacing.s20)
+            }
+        }
+    }
+}
+
+struct MainHomeCreatorGroupSection: View {
+    let title: String
+    let creators: [HomeCreatorItem]
+    let isFollowAllCompleted: Bool
+    let isFollowAllLoading: Bool
+    let onTapCreator: (Int) -> Void
+    let onTapFollowAll: () -> Void
+
+    init(
+        title: String,
+        creators: [HomeCreatorItem],
+        isFollowAllCompleted: Bool = false,
+        isFollowAllLoading: Bool = false,
+        onTapCreator: @escaping (Int) -> Void = { _ in },
+        onTapFollowAll: @escaping () -> Void = {}
+    ) {
+        self.title = title
+        self.creators = creators
+        self.isFollowAllCompleted = isFollowAllCompleted
+        self.isFollowAllLoading = isFollowAllLoading
+        self.onTapCreator = onTapCreator
+        self.onTapFollowAll = onTapFollowAll
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: SodaSpacing.s14) {
+            Text(title)
+                .appFont(.heading3)
+                .foregroundColor(.white)
+                .lineLimit(1)
+                .truncationMode(.tail)
+
+            LazyVGrid(columns: columns, alignment: .center, spacing: SodaSpacing.s14) {
+                ForEach(creators.prefix(8), id: \.self) { creator in
+                    CreatorProfileItem(
+                        imageUrl: creator.creatorProfileImage,
+                        name: creator.creatorNickname,
+                        imageSize: CGSize(width: 75, height: 75),
+                        spacing: SodaSpacing.s6
+                    ) {
+                        onTapCreator(creator.creatorId)
+                    }
+                    .frame(width: 75)
+                }
+            }
+
+            FollowAllButton(
+                isCompleted: isFollowAllCompleted,
+                isLoading: isFollowAllLoading,
+                action: onTapFollowAll
+            )
+        }
+        .padding(SodaSpacing.s14)
+        .frame(width: 374)
+        .background(cardBackground)
+        .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
+    }
+
+    private var columns: [GridItem] {
+        Array(repeating: GridItem(.fixed(75), spacing: SodaSpacing.s14), count: 4)
+    }
+
+    private var cardBackground: some View {
+        LinearGradient(
+            stops: [
+                .init(color: Color.gray900, location: 0),
+                .init(color: Color.gray900, location: 0.29327),
+                .init(color: Color.soda700, location: 1)
+            ],
+            startPoint: .top,
+            endPoint: .bottom
+        )
+    }
+}
+
+struct MainHomeGenreCreatorSection_Previews: PreviewProvider {
+    private static let previewImageUrl = "https://picsum.photos/200/200"
+
+    static var previews: some View {
+        MainHomeGenreCreatorSection(
+            items: [
+                HomeGenreCreatorGroupItem(
+                    genreName: I18n.HomeRecommendation.genreCreatorSectionTitle,
+                    creators: (1...8).map {
+                        HomeCreatorItem(
+                            creatorId: $0,
+                            creatorNickname: "크리에이터이름",
+                            creatorProfileImage: previewImageUrl
+                        )
+                    }
+                )
+            ]
+        )
+        .padding(.vertical, SodaSpacing.s20)
+        .background(Color.black)
+        .previewLayout(.sizeThatFits)
+    }
+}

SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift

@@ -7,6 +7,7 @@ struct MainHomeRecommendationView: View {
     let onTapCharacter: (Int) -> Void
     let onTapCommunity: (Int) -> Void
     let onTapBanner: (RecommendationBannerResponse) -> Void
+    let onTapFollowAll: (@escaping () -> Void) -> Void
 
     @StateObject private var viewModel = MainHomeRecommendationViewModel()
 
@@ -47,6 +48,18 @@ struct MainHomeRecommendationView: View {
                             items: viewModel.recommendations?.aiCharacters ?? [],
                             onTapCharacter: onTapCharacter
                         )
+
+                        MainHomeGenreCreatorSection(
+                            items: viewModel.recommendations?.genreCreators ?? [],
+                            isFollowAllCompleted: viewModel.isFollowAllCompleted,
+                            isFollowAllLoading: viewModel.isFollowAllLoading,
+                            onTapCreator: onTapCreator,
+                            onTapFollowAll: { creatorIds, completionKey in
+                                onTapFollowAll {
+                                    viewModel.followAll(creatorIds: creatorIds, completionKey: completionKey)
+                                }
+                            }
+                        )
                     }
                     .padding(.vertical, SodaSpacing.s20)
                 }
@@ -73,7 +86,8 @@ struct MainHomeRecommendationView_Previews: PreviewProvider {
             onTapContent: { _ in },
             onTapCharacter: { _ in },
             onTapCommunity: { _ in },
-            onTapBanner: { _ in }
+            onTapBanner: { _ in },
+            onTapFollowAll: { action in action() }
         )
     }
 }

SodaLive/Sources/V2/Main/MainView.swift

@@ -162,7 +162,8 @@ struct MainView: View {
                 onTapContent: handleRecommendationContentTap,
                 onTapCharacter: handleRecommendationCharacterTap,
                 onTapCommunity: handleRecommendationCommunityTap,
-                onTapBanner: handleRecommendationBannerTap
+                onTapBanner: handleRecommendationBannerTap,
+                onTapFollowAll: handleRecommendationFollowAllTap
             )
         case .content:
             MainPlaceholderTabView(title: MainTab.content.title)
@@ -479,6 +480,10 @@ struct MainView: View {
         }
     }
 
+    private func handleRecommendationFollowAllTap(action: @escaping () -> Void) {
+        performRecommendationDetailAction(action: action)
+    }
+
 
     private func handleRecommendationBannerTap(_ item: RecommendationBannerResponse) {
         if let eventItem = item.eventItem {

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

@@ -349,7 +349,7 @@
 
 ### Phase 13: 장르의 크리에이터 섹션 UI
 
-- [ ] **Task 13.1: 장르 크리에이터 그룹 섹션 작성/보완**
+- [x] **Task 13.1: 장르 크리에이터 그룹 섹션 작성/보완**
   - 대상 파일:
     - 생성/보완: `SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeGenreCreatorSection.swift`
     - 생성/보완: `SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeCreatorGroupSection.swift`
@@ -477,6 +477,26 @@
 
 ## 검증 기록
 
+### 2026-06-29 Phase 13 장르 크리에이터 섹션 구현 완료
+
+- 목적: V2 Main Home 추천 탭에 Figma `24:5611`, `24:5612`, `24:5615`, `24:5623`, `24:9092` 기준 장르 크리에이터 그룹 섹션과 모두 팔로우 상태를 연결
+- 수행 내용:
+  - `MainHomeGenreCreatorSection`을 추가해 `HomeGenreCreatorGroupItem.genreName`, `creators` 기반 가로 그룹 카드 목록을 표시
+  - `MainHomeCreatorGroupSection`을 같은 파일에 분리해 Phase 14에서도 재사용 가능한 그룹 카드 UI로 구성
+  - 그룹 카드는 Figma 기준 폭 `374`, padding/radius/gap `14`, 어두운 배경에서 `soda700`으로 이어지는 세로 gradient, 최대 8개 크리에이터 2행 x 4열 구조로 구현
+  - 크리에이터 아이템은 기존 `CreatorProfileItem`을 재사용하고, `75x75` 원형 이미지와 한 줄 말줄임 닉네임을 표시하며, 탭 시 기존 `onTapCreator` guard 경로를 재사용
+  - 모두 팔로우 버튼은 `ic_new_follow`, `ic_new_following` 아이콘과 Figma의 미완료/완료 상태를 반영하도록 보완
+  - `MainHomeRecommendationView`에서 AI 캐릭터 섹션 다음에 장르 섹션을 배치하고, 기존 `MainHomeRecommendationViewModel.followAll(creatorIds:completionKey:)`와 `POST /api/v2/home/recommendations/creators/follow` 경로를 재사용
+  - 신규 `MainHomeGenreCreatorSection.swift`를 `SodaLive.xcodeproj/project.pbxproj` 빌드 대상에 포함
+- 검증:
+  - Figma `24:5611`, `24:5612`, `24:5615`, `24:5623`, `24:9092` 디자인 컨텍스트와 스크린샷 확인, 카드 폭/내부 간격/프로필 크기/버튼 상태 확인
+  - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" test` 실행, `Scheme SodaLive-dev is not currently configured for the test action`으로 테스트 액션 미구성 확인
+  - `rg -n "MainHomeGenreCreatorSection|MainHomeCreatorGroupSection|genreCreators|genreName|creators|followAll|FollowAllButton|followRecommendedCreators|localhost:3845|figma.com" SodaLive/Sources/V2/Main/Home/Recommendation SodaLive/Sources/V2/Component/Button/FollowAllButton.swift` 실행, 섹션/필드/API 연결 및 forbidden URL 미포함 확인
+  - `plutil -lint SodaLive.xcodeproj/project.pbxproj` 실행, `OK` 확인
+  - `git diff --check` 실행, 출력 없이 성공 확인
+  - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 실행, `BUILD SUCCEEDED` 확인
+  - 리뷰어 지적에 따라 `CreatorProfileItem` 재사용과 `project.pbxproj` 중복 Sources 등록 제거를 반영한 뒤 동일 빌드 재실행, `BUILD SUCCEEDED` 확인
+
 ### 2026-06-29 Phase 12 카드 반응형 크기와 채팅 수 표기 보완
 
 - 목적: AI 캐릭터와 최근 데뷔 크리에이터 썸네일 카드 크기를 `402` 기준으로 보정하고, AI 캐릭터 채팅 수 배지를 다국어 축약 표기로 표시