feat(home): 랭킹 탭 화면을 조립한다

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

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

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`가 사용되지 않음을 확인