diff --git a/SodaLive/Sources/V2/Main/Home/MainHomeView.swift b/SodaLive/Sources/V2/Main/Home/MainHomeView.swift index 640e7ef0..5f1e6785 100644 --- a/SodaLive/Sources/V2/Main/Home/MainHomeView.swift +++ b/SodaLive/Sources/V2/Main/Home/MainHomeView.swift @@ -55,7 +55,7 @@ struct MainHomeView: View { onTapFollowAll: onTapFollowAll ) case .ranking: - MainHomeRankingView() + MainHomeRankingView(onTapCreator: onTapCreator) case .following: MainHomeFollowingView() } diff --git a/SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift b/SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift index 0af17152..2e483ae0 100644 --- a/SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift +++ b/SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift @@ -1,8 +1,112 @@ import SwiftUI struct MainHomeRankingView: View { + let onTapCreator: (Int) -> Void + + @StateObject private var viewModel = MainHomeRankingViewModel() + + init(onTapCreator: @escaping (Int) -> Void = { _ in }) { + self.onTapCreator = onTapCreator + } + var body: some View { - MainPlaceholderTabView(title: "랭킹") + ZStack { + Color.black + .ignoresSafeArea() + + if viewModel.isLoading && !viewModel.hasLoaded { + ProgressView() + .progressViewStyle(CircularProgressViewStyle(tint: .white)) + } else if viewModel.items.isEmpty { + MainHomeRankingEmptyStateView() + } else { + rankingContent + } + } + .onAppear { + if !viewModel.hasLoaded { + viewModel.fetchRankings() + } + } + } + + private var rankingContent: some View { + ScrollView(showsIndicators: false) { + VStack(alignment: .leading, spacing: SodaSpacing.s8) { + ForEach(firstRankItems) { item in + MainHomeRankingCard( + item: item, + showRankChange: viewModel.showRankChange, + columnsPerRow: 1, + onTapCreator: onTapCreator + ) + } + + if !secondToSeventhRankItems.isEmpty { + LazyVGrid(columns: twoColumns, alignment: .center, spacing: SodaSpacing.s8) { + ForEach(secondToSeventhRankItems) { item in + MainHomeRankingCard( + item: item, + showRankChange: viewModel.showRankChange, + columnsPerRow: 2, + onTapCreator: onTapCreator + ) + } + } + } + + if !eighthToTenthRankItems.isEmpty { + LazyVGrid(columns: threeColumns, alignment: .center, spacing: SodaSpacing.s8) { + ForEach(eighthToTenthRankItems) { item in + MainHomeRankingCard( + item: item, + showRankChange: viewModel.showRankChange, + columnsPerRow: 3, + onTapCreator: onTapCreator + ) + } + } + } + + if !rowRankItems.isEmpty { + VStack(spacing: SodaSpacing.s8) { + ForEach(rowRankItems) { item in + MainHomeRankingRow( + item: item, + showRankChange: viewModel.showRankChange, + onTapCreator: onTapCreator + ) + } + } + } + } + .padding(.horizontal, SodaSpacing.s8) + .padding(.vertical, SodaSpacing.s20) + } + } + + private var twoColumns: [GridItem] { + [GridItem(.flexible()), GridItem(.flexible())] + } + + private var threeColumns: [GridItem] { + [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())] + } + + private var firstRankItems: [MainHomeCreatorRankingItem] { + viewModel.items.filter { $0.rank == 1 } + } + + private var secondToSeventhRankItems: [MainHomeCreatorRankingItem] { + viewModel.items.filter { 2...7 ~= $0.rank } + } + + private var eighthToTenthRankItems: [MainHomeCreatorRankingItem] { + viewModel.items.filter { 8...10 ~= $0.rank } + } + + private var rowRankItems: [MainHomeCreatorRankingItem] { + viewModel.items.filter { $0.rank >= 11 } } } diff --git a/docs/20260630_메인_홈_랭킹_탭/plan-task.md b/docs/20260630_메인_홈_랭킹_탭/plan-task.md index f4712bb2..8c2433f3 100644 --- a/docs/20260630_메인_홈_랭킹_탭/plan-task.md +++ b/docs/20260630_메인_홈_랭킹_탭/plan-task.md @@ -225,7 +225,7 @@ ### Phase 6: 랭킹 탭 화면 조립과 상세 진입 연결 -- [ ] **Task 6.1: MainHomeRankingView 구현** +- [x] **Task 6.1: MainHomeRankingView 구현** - 대상 파일: - 수정: `SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift` - 작업 내용: @@ -243,7 +243,7 @@ - 실행 명령: `rg "MainHomeRankingViewModel|fetchRankings|MainHomeRankingCard|MainHomeRankingRow|MainHomeRankingEmptyStateView|GridItem\\(\\.flexible\\(\\)\\)|onTapCreator|MainPlaceholderTabView|CapsuleTabBar" SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift` - 기대 결과: `MainPlaceholderTabView`와 `CapsuleTabBar`는 검색되지 않고, 랭킹 ViewModel/공용 카드/row 조립과 flexible grid가 확인된다. -- [ ] **Task 6.2: MainHomeView에서 creator tap callback 전달** +- [x] **Task 6.2: MainHomeView에서 creator tap callback 전달** - 대상 파일: - 수정: `SodaLive/Sources/V2/Main/Home/MainHomeView.swift` - 확인: `SodaLive/Sources/V2/Main/MainView.swift` @@ -373,3 +373,16 @@ - 검증 메모: - 문서의 Phase 5 정적 검색 기준으로 카드/row/empty state 필수 심볼과 Preview 상태를 확인 - 카드/row 루트 container에 고정 숫자 `frame(width:)`, `frame(height:)`를 두지 않고, 카드 전체 비율은 `aspectRatio` 기반으로 구성 + +- 2026-06-30 Phase 6 진행: + - 목적: 랭킹 탭 화면을 ViewModel 상태 기반으로 조립하고, 랭킹 item tap을 기존 creator 상세 진입 callback에 연결 + - 변경 내용: + - `MainHomeRankingView` placeholder 제거 + - `MainHomeRankingViewModel`을 `@StateObject`로 연결하고 최초 `onAppear`에서 `hasLoaded == false`일 때만 `fetchRankings()` 호출 + - loading, empty, content 상태 분기 추가 + - content 상태에서 1위 단독, 2~7위 2열, 8~10위 3열, 11위 이상 row로 조립 + - 1~10위는 `MainHomeRankingCard`, 11위 이상은 `MainHomeRankingRow`를 사용하고 `showRankChange`, `onTapCreator` 전달 + - `MainHomeView`의 랭킹 탭에서 `MainHomeRankingView(onTapCreator: onTapCreator)`를 호출하도록 변경 + - 검증 메모: + - Phase 6 정적 검색 기준으로 ViewModel, fetch, 공용 카드/row, empty state, flexible grid, creator tap callback 연결을 확인 + - `MainHomeRankingView`에서 `MainPlaceholderTabView`, `CapsuleTabBar`가 사용되지 않음을 확인