feat(home): 랭킹 순위 UI를 추가한다
This commit is contained in:
@@ -175,7 +175,7 @@
|
||||
|
||||
### Phase 5: 순위별 랭킹 UI 컴포넌트
|
||||
|
||||
- [ ] **Task 5.1: 1~10위 공용 카드 컴포넌트 생성**
|
||||
- [x] **Task 5.1: 1~10위 공용 카드 컴포넌트 생성**
|
||||
- 대상 파일:
|
||||
- 생성: `SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingCard.swift`
|
||||
- 확인: `SodaLive/Sources/V2/Component/Creator/CreatorProfileItem.swift`
|
||||
@@ -197,7 +197,7 @@
|
||||
- 실행 명령: `rg "struct MainHomeRankingCard|DownsampledKFImage|LinearGradient|item.rank|MainHomeRankChangeBadge|onTapCreator\\(item.creatorId\\)|aspectRatio|PreviewProvider|rankChange: 5|rankChange: -|rankChange: 0|isNew: true|showRankChange: false" SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingCard.swift`
|
||||
- 기대 결과: 1~10위 카드가 하나의 공용 컴포넌트로 구현되고, 서버 rank와 공용 badge를 사용하며, 전체 크기는 부모 layout에 의해 결정되고 조건별 Preview가 확인된다.
|
||||
|
||||
- [ ] **Task 5.2: 11위 이상 row 컴포넌트 생성**
|
||||
- [x] **Task 5.2: 11위 이상 row 컴포넌트 생성**
|
||||
- 대상 파일:
|
||||
- 생성: `SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingRow.swift`
|
||||
- 작업 내용:
|
||||
@@ -213,7 +213,7 @@
|
||||
- 실행 명령: `rg "struct MainHomeRankingRow|DownsampledKFImage|item.rank|MainHomeRankChangeBadge|onTapCreator\\(item.creatorId\\)|aspectRatio|PreviewProvider|rankChange: 5|rankChange: -|rankChange: 0|isNew: true|showRankChange: false" SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingRow.swift`
|
||||
- 기대 결과: row형 순위 UI가 서버 rank와 공용 badge를 사용하고, 전체 크기는 반응형 제약으로 구성되며 조건별 Preview가 확인된다.
|
||||
|
||||
- [ ] **Task 5.3: empty state 컴포넌트 생성**
|
||||
- [x] **Task 5.3: empty state 컴포넌트 생성**
|
||||
- 대상 파일:
|
||||
- 생성: `SodaLive/Sources/V2/Main/Home/Ranking/Components/MainHomeRankingEmptyStateView.swift`
|
||||
- 작업 내용:
|
||||
@@ -359,3 +359,17 @@
|
||||
- 검증 메모:
|
||||
- 문서의 Phase 4 정적 검색 기준으로 아이콘명, 조건별 Preview, `abs()` 사용을 확인
|
||||
- Figma badge 배경 기준 확인 후 `Color.gray900`(`#202020`) 배경, horizontal padding 4, corner radius 4를 `MainHomeRankChangeBadge`에 반영
|
||||
|
||||
- 2026-06-30 Phase 5 진행:
|
||||
- 목적: 랭킹 순위별 UI 조립에 사용할 카드/row/empty state 컴포넌트 추가
|
||||
- 확인한 기준:
|
||||
- Figma `24:5659`, `24:5670` 기준 카드/row 구조 확인
|
||||
- 기존 V2 추천 탭의 `DownsampledKFImage`, `LinearGradient`, `SodaSpacing`, `Color.gray*`, `.buttonStyle(.plain)` 사용 관례 확인
|
||||
- 변경 내용:
|
||||
- `MainHomeRankingCard` 추가: 1~10위 공용 카드, 서버 `item.rank`, 하단 dim gradient, `MainHomeRankChangeBadge`, creator tap callback 사용
|
||||
- `MainHomeRankingRow` 추가: 11위 이상 row, 서버 `item.rank`, 프로필 이미지, nickname, `MainHomeRankChangeBadge`, creator tap callback 사용
|
||||
- `MainHomeRankingEmptyStateView` 추가: `I18n.HomeRanking.emptyStateMessage`를 검정 배경 위에 표시
|
||||
- Phase 5 Preview에 상승, 하락, 변동 없음, 신규 진입, 순위 변화 숨김 상태 추가
|
||||
- 검증 메모:
|
||||
- 문서의 Phase 5 정적 검색 기준으로 카드/row/empty state 필수 심볼과 Preview 상태를 확인
|
||||
- 카드/row 루트 container에 고정 숫자 `frame(width:)`, `frame(height:)`를 두지 않고, 카드 전체 비율은 `aspectRatio` 기반으로 구성
|
||||
|
||||
Reference in New Issue
Block a user