From 3ed763af4eb834db6e15a824e4974d58fec13f01 Mon Sep 17 00:00:00 2001 From: Yu Sung Date: Mon, 29 Jun 2026 16:32:33 +0900 Subject: [PATCH] =?UTF-8?q?feat(home):=20=EC=B5=9C=EA=B7=BC=20=ED=99=9C?= =?UTF-8?q?=EB=8F=99=20=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=84=B9=EC=85=98=EC=9D=84=20=EC=97=B0=EA=B2=B0=ED=95=9C?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SodaLive.xcodeproj/project.pbxproj | 8 + .../MainHomeActiveCreatorSection.swift | 163 ++++++++++++++++++ .../MainHomeRecommendationView.swift | 7 + .../plan-task.md | 18 +- 4 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeActiveCreatorSection.swift diff --git a/SodaLive.xcodeproj/project.pbxproj b/SodaLive.xcodeproj/project.pbxproj index dc1f57cb..b0e2e55f 100644 --- a/SodaLive.xcodeproj/project.pbxproj +++ b/SodaLive.xcodeproj/project.pbxproj @@ -215,10 +215,13 @@ 401A3FB32FEEAFA000A5BBA3 /* MainHomeFollowingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FB72FEEAFA000A5BBA3 /* MainHomeFollowingView.swift */; }; 401A3FC22FEEB00100A5BBA3 /* MainHomeLiveSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FC12FEEB00100A5BBA3 /* MainHomeLiveSection.swift */; }; 401A3FC62FEEB00200A5BBA3 /* MainHomeBannerSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FC52FEEB00200A5BBA3 /* MainHomeBannerSection.swift */; }; + 401A3FC92FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */; }; 401A3FC32FEEB00100A5BBA3 /* MainHomeLiveSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FC12FEEB00100A5BBA3 /* MainHomeLiveSection.swift */; }; 401A3FC72FEEB00200A5BBA3 /* MainHomeBannerSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FC52FEEB00200A5BBA3 /* MainHomeBannerSection.swift */; }; + 401A3FCA2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */; }; 401A3FC42FEEB00100A5BBA3 /* MainHomeLiveSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FC12FEEB00100A5BBA3 /* MainHomeLiveSection.swift */; }; 401A3FC82FEEB00200A5BBA3 /* MainHomeBannerSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FC52FEEB00200A5BBA3 /* MainHomeBannerSection.swift */; }; + 401A3FCB2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.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 */; }; @@ -1734,6 +1737,7 @@ 401A3FB72FEEAFA000A5BBA3 /* MainHomeFollowingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeFollowingView.swift; sourceTree = ""; }; 401A3FC12FEEB00100A5BBA3 /* MainHomeLiveSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeLiveSection.swift; sourceTree = ""; }; 401A3FC52FEEB00200A5BBA3 /* MainHomeBannerSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeBannerSection.swift; sourceTree = ""; }; + 401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainHomeActiveCreatorSection.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 = ""; }; @@ -2707,6 +2711,7 @@ children = ( 401A3FC12FEEB00100A5BBA3 /* MainHomeLiveSection.swift */, 401A3FC52FEEB00200A5BBA3 /* MainHomeBannerSection.swift */, + 401A3FCC2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift */, ); path = Components; sourceTree = ""; @@ -5334,6 +5339,7 @@ 401A3FA92FEEAFA000A5BBA3 /* MainHomeRecommendationView.swift in Sources */, 401A3FC22FEEB00100A5BBA3 /* MainHomeLiveSection.swift in Sources */, 401A3FC62FEEB00200A5BBA3 /* MainHomeBannerSection.swift in Sources */, + 401A3FC92FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */, 401A3FAA2FEEAFA000A5BBA3 /* MainHomeRankingView.swift in Sources */, 401A3FAB2FEEAFA000A5BBA3 /* MainHomeFollowingView.swift in Sources */, 409143302A85652F00EEBFB1 /* CanChargeView.swift in Sources */, @@ -6082,6 +6088,7 @@ 401A3FAD2FEEAFA000A5BBA3 /* MainHomeRecommendationView.swift in Sources */, 401A3FC32FEEB00100A5BBA3 /* MainHomeLiveSection.swift in Sources */, 401A3FC72FEEB00200A5BBA3 /* MainHomeBannerSection.swift in Sources */, + 401A3FCA2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */, 401A3FAE2FEEAFA000A5BBA3 /* MainHomeRankingView.swift in Sources */, 401A3FAF2FEEAFA000A5BBA3 /* MainHomeFollowingView.swift in Sources */, B3AF650899B8FC84E0C0CDA0 /* MainPlaceholderTabView.swift in Sources */, @@ -6857,6 +6864,7 @@ 401A3FB12FEEAFA000A5BBA3 /* MainHomeRecommendationView.swift in Sources */, 401A3FC42FEEB00100A5BBA3 /* MainHomeLiveSection.swift in Sources */, 401A3FC82FEEB00200A5BBA3 /* MainHomeBannerSection.swift in Sources */, + 401A3FCB2FEEB00300A5BBA3 /* MainHomeActiveCreatorSection.swift in Sources */, 401A3FB22FEEAFA000A5BBA3 /* MainHomeRankingView.swift in Sources */, 401A3FB32FEEAFA000A5BBA3 /* MainHomeFollowingView.swift in Sources */, ACD71056E97E13E48941ABBB /* MainPlaceholderTabView.swift in Sources */, diff --git a/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeActiveCreatorSection.swift b/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeActiveCreatorSection.swift new file mode 100644 index 00000000..5fc9d6b6 --- /dev/null +++ b/SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeActiveCreatorSection.swift @@ -0,0 +1,163 @@ +import SwiftUI + +struct MainHomeActiveCreatorSection: View { + let items: [HomeActiveCreatorItem] + let onTapLive: (Int) -> Void + let onTapContent: (Int) -> Void + let onTapCommunity: (Int) -> Void + + init( + items: [HomeActiveCreatorItem], + onTapLive: @escaping (Int) -> Void = { _ in }, + onTapContent: @escaping (Int) -> Void = { _ in }, + onTapCommunity: @escaping (Int) -> Void = { _ in } + ) { + self.items = items + self.onTapLive = onTapLive + self.onTapContent = onTapContent + self.onTapCommunity = onTapCommunity + } + + var body: some View { + if !items.isEmpty { + VStack(alignment: .leading, spacing: SodaSpacing.s14) { + SectionTitle(title: I18n.HomeRecommendation.activeCreatorSectionTitle) + + ScrollView(.horizontal, showsIndicators: false) { + LazyHStack(alignment: .center, spacing: SodaSpacing.s8) { + ForEach(items, id: \.self) { item in + MainHomeActiveCreatorItemView(item: item) { + handleTap(item) + } + } + } + .padding(.horizontal, SodaSpacing.s14) + } + } + } + } + + private func handleTap(_ item: HomeActiveCreatorItem) { + guard let targetId = item.targetId else { return } + + switch item.activityType { + case .live: + onTapLive(targetId) + case .audio: + onTapContent(targetId) + case .community: + onTapCommunity(targetId) + case .unknown: + break + } + } +} + +private struct MainHomeActiveCreatorItemView: View { + let item: HomeActiveCreatorItem + let action: () -> Void + + var body: some View { + Button(action: action) { + HStack(alignment: .center, spacing: SodaSpacing.s8) { + DownsampledKFImage(url: URL(string: item.creatorProfileImage), size: CGSize(width: 52, height: 52)) + .background(Color.gray800) + .clipShape(Circle()) + .frame(width: 52, height: 52) + + VStack(alignment: .leading, spacing: SodaSpacing.s6) { + Text(item.creatorNickname) + .appFont(.heading4) + .foregroundColor(.white) + .lineLimit(1) + .truncationMode(.tail) + .frame(width: 147, alignment: .leading) + + HStack(alignment: .center, spacing: SodaSpacing.s8) { + if !item.activityType.title.isEmpty { + Text(item.activityType.title) + .appFont(.body5) + .foregroundColor(Color.gray100) + .padding(.horizontal, SodaSpacing.s4) + .padding(.vertical, 2) + .background(Color.gray700) + .clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s4, style: .continuous)) + } + + Text(item.relativeActivityAtText()) + .appFont(.body4) + .foregroundColor(Color.gray500) + .lineLimit(1) + } + } + .frame(width: 159, alignment: .leading) + } + .padding(SodaSpacing.s12) + .background(Color.gray900) + .clipShape(Capsule()) + } + .buttonStyle(.plain) + } +} + +private extension HomeActiveCreatorItem { + func relativeActivityAtText(now: Date = Date()) -> String { + guard let activityDate = DateParser.parse(activityAt) else { + return activityAt + } + + let interval = max(0, now.timeIntervalSince(activityDate)) + let calendar = Calendar.current + let yearMonth = calendar.dateComponents([.year, .month], from: activityDate, to: now) + + if let years = yearMonth.year, years >= 1 { + return I18n.Time.yearsAgo(years) + } + + if let months = yearMonth.month, months >= 1 { + return I18n.Time.monthsAgo(months) + } + + if interval < 60 { + return I18n.Time.justNow + } + + if interval < 3600 { + return I18n.Time.minutesAgo(max(1, Int(interval / 60))) + } + + if interval < 86_400 { + return I18n.Time.hoursAgo(max(1, Int(interval / 3600))) + } + + return I18n.Time.daysAgo(max(1, Int(interval / 86_400))) + } +} + +struct MainHomeActiveCreatorSection_Previews: PreviewProvider { + private static let previewImageUrl = "https://picsum.photos/500/500" + + static var previews: some View { + MainHomeActiveCreatorSection( + items: [ + HomeActiveCreatorItem( + creatorNickname: "크리에이터이름", + creatorProfileImage: previewImageUrl, + activityType: .live, + activityAt: "2026-06-29T06:39:00Z", + targetId: 1 + ), + HomeActiveCreatorItem( + creatorNickname: "크리에이터이름", + creatorProfileImage: previewImageUrl, + activityType: .audio, + activityAt: "2026-06-29T06:39:00Z", + targetId: 2 + ) + ] + ) + .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 532789e6..cd7f67fa 100644 --- a/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift +++ b/SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift @@ -30,6 +30,13 @@ struct MainHomeRecommendationView: View { items: viewModel.recommendations?.banners ?? [], onTapBanner: onTapBanner ) + + MainHomeActiveCreatorSection( + items: viewModel.recommendations?.recentlyActiveCreators ?? [], + onTapLive: onTapLive, + onTapContent: onTapContent, + onTapCommunity: onTapCommunity + ) } .padding(.vertical, SodaSpacing.s20) } diff --git a/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md b/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md index 2ae96e06..da58a1ad 100644 --- a/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md +++ b/docs/20260602_메인_홈_추천_UI_API_연동/plan-task.md @@ -309,7 +309,7 @@ ### Phase 10: 최근 활동 크리에이터 섹션 UI -- [ ] **Task 10.1: 최근 활동 크리에이터 섹션 작성/보완** +- [x] **Task 10.1: 최근 활동 크리에이터 섹션 작성/보완** - 대상 파일: - 생성/보완: `SodaLive/Sources/V2/Main/Home/Recommendation/Components/MainHomeActiveCreatorSection.swift` - 작업 내용: @@ -496,6 +496,22 @@ ## 검증 기록 +### 2026-06-29 Phase 10 최근 활동 크리에이터 섹션 구현 완료 + +- 목적: V2 Main Home 추천 탭에 Figma `24:5529`, `24:5532` 기준 최근 활동 크리에이터 섹션을 연결 +- 수행 내용: + - `MainHomeActiveCreatorSection`을 추가해 `creatorNickname`, `creatorProfileImage`, `activityType`, `activityAt`, `targetId` 기반 pill 형태 가로 목록을 표시 + - `RecommendedActivityType.title`로 활동 태그를 표시하고, `DateParser.parse`와 `I18n.Time` 기준 상대 시간을 표시 + - 데이터가 비어 있으면 섹션 제목과 목록을 렌더링하지 않도록 구성 + - `MainHomeRecommendationView`에서 현재 라이브, 배너 다음 순서로 최근 활동 크리에이터 섹션을 배치 + - 신규 `MainHomeActiveCreatorSection.swift`를 `SodaLive.xcodeproj/project.pbxproj` 빌드 대상에 포함 +- 검증: + - Figma `24:5529`, `24:5532` 디자인 컨텍스트와 스크린샷 확인, 섹션 제목/가로 pill 아이템/52px 원형 이미지/활동 태그/상대 시간 구조 확인 + - `rg "MainHomeActiveCreatorSection|activityType|activityAt|targetId|RecommendedActivityType" SodaLive/Sources/V2/Main/Home/Recommendation` 실행, 최근 활동 섹션이 신규 응답 필드와 활동 타입 변환을 사용함 확인 + - `plutil -lint SodaLive.xcodeproj/project.pbxproj` 실행, `OK` 확인 + - `git diff --check` 실행, 출력 없이 성공 확인 + - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build` 실행, `BUILD SUCCEEDED` 확인 + ### 2026-06-29 Phase 9 배너 스펙 변경 반영 - 목적: 변경된 `RecommendationBannerResponse` 백엔드 응답과 배너 1:1 이미지 비율 요구사항을 반영