From 2727cdc7cb68dc32170ca0c31c56ddbf722f8dde Mon Sep 17 00:00:00 2001 From: Yu Sung Date: Mon, 29 Jun 2026 20:47:46 +0900 Subject: [PATCH] =?UTF-8?q?feat(home):=20=EC=9E=A5=EB=A5=B4=20=ED=81=AC?= =?UTF-8?q?=EB=A6=AC=EC=97=90=EC=9D=B4=ED=84=B0=20=EC=84=B9=EC=85=98?= =?UTF-8?q?=EC=9D=84=20=EC=97=B0=EA=B2=B0=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SodaLive.xcodeproj/project.pbxproj | 6 + .../V2/Component/Button/FollowAllButton.swift | 22 ++- .../Creator/CreatorProfileItem.swift | 10 +- .../Sources/V2/Main/Home/MainHomeView.swift | 7 +- .../MainHomeGenreCreatorSection.swift | 147 ++++++++++++++++++ .../MainHomeRecommendationView.swift | 16 +- SodaLive/Sources/V2/Main/MainView.swift | 7 +- .../plan-task.md | 22 ++- 8 files changed, 225 insertions(+), 12 deletions(-) create mode 100644 SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeGenreCreatorSection.swift diff --git a/SodaLive.xcodeproj/project.pbxproj b/SodaLive.xcodeproj/project.pbxproj index 1a02b5a7..7f9513b4 100644 --- a/SodaLive.xcodeproj/project.pbxproj +++ b/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 = ""; }; 401A3FCD2FEEB00400A5BBA3 /* MainHomeRecentDebutCreatorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeRecentDebutCreatorSection.swift; sourceTree = ""; }; 401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeAiCharacterSection.swift; sourceTree = ""; }; + 401A3FD52FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeGenreCreatorSection.swift; sourceTree = ""; }; 40235DEC2E3797EB00B09A87 /* RecentContent+CoreDataClass.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "RecentContent+CoreDataClass.swift"; sourceTree = ""; }; 40235DEF2E37983D00B09A87 /* PersistenceController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PersistenceController.swift; sourceTree = ""; }; 40235DF22E37987300B09A87 /* RecentContentService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RecentContentService.swift; sourceTree = ""; }; @@ -2750,6 +2753,7 @@ 401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */, 401A3FCD2FEEB00400A5BBA3 /* MainHomeRecentDebutCreatorSection.swift */, 401A3FD42FEEB00500A5BBA3 /* MainHomeAiCharacterSection.swift */, + 401A3FD52FEEB00600A5BBA3 /* MainHomeGenreCreatorSection.swift */, ); path = Components; sourceTree = ""; @@ -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 */, diff --git a/SodaLive/Sources/V2/Component/Button/FollowAllButton.swift b/SodaLive/Sources/V2/Component/Button/FollowAllButton.swift index 0537f33f..822eae2e 100644 --- a/SodaLive/Sources/V2/Component/Button/FollowAllButton.swift +++ b/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) } diff --git a/SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift b/SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift index 3cab80a1..b1ac3223 100644 --- a/SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift +++ b/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()) } diff --git a/SodaLive/Sources/V2/Main/Home/MainHomeView.swift b/SodaLive/Sources/V2/Main/Home/MainHomeView.swift index f832454c..640e7ef0 100644 --- a/SodaLive/Sources/V2/Main/Home/MainHomeView.swift +++ b/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() } ) } } diff --git a/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeGenreCreatorSection.swift b/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeGenreCreatorSection.swift new file mode 100644 index 00000000..9ac9b133 --- /dev/null +++ b/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) + } +} diff --git a/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift b/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift index ae07a094..4d85195d 100644 --- a/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift +++ b/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() } ) } } diff --git a/SodaLive/Sources/V2/Main/MainView.swift b/SodaLive/Sources/V2/Main/MainView.swift index b9a630de..fbb60911 100644 --- a/SodaLive/Sources/V2/Main/MainView.swift +++ b/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 { diff --git a/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md b/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md index ce39ed4c..2c1f3f6e 100644 --- a/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md +++ b/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 캐릭터 채팅 수 배지를 다국어 축약 표기로 표시