klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yu Sung
2026-06-29 20:47:46 +09:00
parent 561e991050
commit 2727cdc7cb
8 changed files with 225 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
SodaLive.xcodeproj/project.pbxproj
View File

@@ -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 */,

22
SodaLive/Sources/V2/Component/Button/FollowAllButton.swift
View File

@@ -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)
}

10
SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift
View File

@@ -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())
}

7
SodaLive/Sources/V2/Main/Home/MainHomeView.swift
View File

@@ -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() }
)
}
}

147
SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeGenreCreatorSection.swift Normal file
View File

@@ -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)
}
}

16
SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift
View File

@@ -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() }
)
}
}

7
SodaLive/Sources/V2/Main/MainView.swift
View File

@@ -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 {

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

@@ -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 캐릭터 채팅 수 배지를 다국어 축약 표기로 표시