klaus/sodalive-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
d312ce7cd879b45e893d22e2a65048cece2ce62e
sodalive-android/docs/plan-task/20260521_피드컴포넌트.md

881 lines
38 KiB
Markdown
Raw Blame History

# 피드 컴포넌트 Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Figma `63:4133`, `63:4140`, `63:4142`, `63:4155` 기준으로 Rank, Live, Content, Community 4가지 Feed variant를 제공하는 재사용 가능한 Android XML Views 컴포넌트를 추가한다.
**Architecture:** Feed 표시 데이터와 variant를 순수 Kotlin contract로 먼저 정의하고, variant별 XML layout/custom view가 해당 contract를 바인딩한다. 실제 이미지 로딩과 화면 이동은 컴포넌트 내부에서 결정하지 않고 호출부 callback 또는 노출된 `ImageView`를 통해 위임한다.
**Tech Stack:** Android XML Views, Kotlin custom View, ViewBinding/resource merge, Spannable text styling, JUnit4 local unit test.
---
## 작업 목표
- `Rank` variant는 왼쪽 `80dp` 이미지와 오른쪽 변경 가능한 문장을 세로 가운데 정렬로 표시한다.
- `Rank` variant는 순위 텍스트 범위만 `soda_400`으로 강조한다.
- `Live` variant는 라이브 종료 안내, 라이브 제목, 상대 시간을 표시하고 제목과 시간이 겹치지 않게 한다.
- `Content` variant는 콘텐츠 이미지, 프로필, 콘텐츠명, category tag, 상대 시간을 표시한다.
- `Community` variant는 프로필, 커뮤니티 본문, 키워드, 댓글/좋아요 반응 수를 표시한다.
- 구현 중 체크박스와 검증 기록은 이 문서에 누적한다.
## 파일 구조
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedVariant.kt`
- `Rank`, `Live`, `Content`, `Community` variant를 정의한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedItem.kt`
- Feed variant별 표시 데이터 계약을 sealed class로 정의한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankHighlight.kt`
- Rank 문장 강조 범위와 안전한 범위 보정 정책을 정의한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankTextStyler.kt`
- Rank 문장에 `soda_400` foreground span을 적용한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedWidthMode.kt`
- Feed root width를 Figma fixed width로 쓸지 부모 가용 폭으로 채울지 정의한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedSize.kt`
- variant별 Figma root width와 width mode별 적용 width를 계산한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentCategory.kt`
- Content Feed category string resource id와 이미지 비율을 정의한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentImageSize.kt`
- Content Feed 왼쪽 이미지의 현재 가로 크기를 유지하면서 category별 높이를 계산한다.
- Create: `app/src/main/res/layout/view_feed_rank.xml`
- Figma `63:4133` 기준 Rank layout을 정의한다.
- Create: `app/src/main/res/layout/view_feed_live.xml`
- Figma `63:4140` 기준 Live layout을 정의한다.
- Create: `app/src/main/res/layout/view_feed_content.xml`
- Figma `63:4142` 기준 Content layout을 정의한다.
- Create: `app/src/main/res/layout/view_feed_community.xml`
- Figma `63:4155` 기준 Community layout을 정의한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankView.kt`
- Rank 텍스트 강조, 이미지 view 노출, 클릭 callback을 처리한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedLiveView.kt`
- Live 제목/시간 제약, 프로필 이미지 view 노출, 클릭 callback을 처리한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentView.kt`
- Content 정보 바인딩, 콘텐츠/프로필 이미지 view 노출, 클릭 callback을 처리한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedCommunityView.kt`
- Community 본문/키워드/반응 수 바인딩, 프로필 이미지 view 노출, 클릭 callback을 처리한다.
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedAdapter.kt`
- RecyclerView에서 variant별 viewType을 생성하고 item click을 호출부에 위임한다.
- Add if missing: `app/src/main/res/drawable/bg_feed_card.xml`
- `gray_900` background + `radius_14` shape를 정의한다.
- Add if missing: `app/src/main/res/drawable/bg_feed_category_tag.xml`
- `gray_700` background + `radius_4` category tag shape를 정의한다.
- Add if missing: `app/src/main/res/drawable/ic_feed_comment.xml`, `app/src/main/res/drawable/ic_feed_like.xml`
- Community 반응 row icon을 정의한다. 기존 동일 아이콘이 있으면 재사용한다.
- Modify: `app/src/main/res/values/strings.xml`
- Live 종료 문구와 Content category 기본 label을 추가한다.
- Modify: `app/src/main/res/values-en/strings.xml`, `app/src/main/res/values-ja/strings.xml`
- 신규 string의 기존 다국어 정책에 맞는 번역을 추가한다.
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankHighlightTest.kt`
- Rank 강조 범위 보정 정책을 검증한다.
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedItemTest.kt`
- variant별 item contract와 기본값을 검증한다.
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankTextStylerTest.kt`
- 순위 텍스트 범위에만 `soda_400` span이 적용되는지 검증한다.
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedSizeTest.kt`
- 가로 스크롤/한 줄 다중 표시에서는 Figma width를, 한 줄 1개 표시에서는 부모 가용 폭을 사용하는지 검증한다.
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentImageSizeTest.kt`
- Content Feed category별 이미지 비율과 높이 계산을 검증한다.
- Modify: `docs/plan-task/20260521_피드컴포넌트.md`
- 구현 중 체크박스와 검증 기록을 누적한다.
## 구현 계획
### Task 1: 기존 패턴 및 Figma 기준 확인
**Files:**
- Read: `docs/prd/20260521_피드컴포넌트_prd.md`
- Read: `docs/prd/20260520_라이브썸네일컴포넌트_prd.md`
- Read: `docs/prd/20260519_오디오콘텐츠카드컴포넌트_prd.md`
- Read: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentCardView.kt`
- Read: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/livethumbnail/LiveThumbnailDetailView.kt`
- Read: `app/src/main/res/values/colors.xml`
- Read: `app/src/main/res/values/dimens.xml`
- Read: `app/src/main/res/values/typography.xml`
- [ ] **Step 1: 관련 기존 코드 확인**
Run: `rg -n "AudioContentCardView|LiveThumbnailDetailView|CreatorRanking|ContentRanking|ellipsize=\"end\"|maxLines=\"1\"" app/src/main/java app/src/main/res/layout app/src/main/res/values`
Expected: 기존 v2 custom view의 `ImageView` 노출 패턴, 1줄 ellipsis 적용 방식, ranking span/gradient 관련 구현을 확인한다.
- [ ] **Step 2: Figma 세부 컨텍스트 재확인**
Run tools:
- `Figma_get_design_context(63:4133)`
- `Figma_get_screenshot(63:4133)`
- `Figma_get_design_context(63:4140)`
- `Figma_get_screenshot(63:4140)`
- `Figma_get_design_context(63:4142)`
- `Figma_get_screenshot(63:4142)`
- `Figma_get_design_context(63:4155)`
- `Figma_get_screenshot(63:4155)`
Expected: Rank, Live, Content, Community variant의 size, typography, color, radius, spacing, image placeholder 위치를 확인한다.
- [ ] **Step 3: 구현 기준 token 정리**
Expected token contract:
- 공통 root: `gray_900`, `radius_14`, `spacing_14` padding
- 공통 Figma root width: `374dp`
- 가로 스크롤 또는 한 줄 다중 표시 width: Figma root width `374dp`
- 한 줄 1개 표시 width: 부모 view의 가용 영역 폭
- Rank image: `80dp x 80dp`, `radius_14`, `centerCrop`
- Rank text: `Typography.Body2`, white, highlighted rank range `soda_400`
- Live title: `Typography.Heading4`, white, 1 line ellipsis
- Live time: `Typography.Body6`, `gray_500`, end aligned
- Content image width: 현재 설정된 가로 크기 유지
- Content image ratio: `콘텐츠=1:1`, `시리즈=163:230`, `매거진=163:218`
- Content title: `Typography.Heading4`, white, 1 line ellipsis
- Category tag: `gray_700`, `radius_4`, `spacing_4` horizontal padding, `2dp` vertical padding, `gray_100`
- Community body/keyword: `Typography.Body3`, white/`soda_400`
- Reaction icon/text: icon `18dp`, text `Typography.Body3`, `gray_500`
### Task 2: Feed data contract TDD
**Files:**
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedItemTest.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedVariant.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentCategory.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedItem.kt`
- [ ] **Step 1: RED - variant별 item contract 테스트 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
import org.junit.Assert.assertEquals
import org.junit.Test
class FeedItemTest {
@Test
fun `rank item exposes rank variant and message`() {
val item = FeedItem.Rank(
feedId = "feed-rank-1",
imageUrl = "https://example.com/rank.png",
rankText = "12위",
message = "크리에이터님이 5월 2주차 크리에이터 12위를 차지하였어요!",
highlightRanges = listOf(FeedRankHighlight(start = 22, endExclusive = 25))
)
assertEquals(FeedVariant.Rank, item.variant)
assertEquals("12위", item.rankText)
assertEquals(1, item.highlightRanges.size)
}
@Test
fun `live item exposes title and created time`() {
val item = FeedItem.Live(
feedId = "feed-live-1",
creatorId = "creator-1",
creatorName = "크리에이터이름",
creatorImageUrl = "https://example.com/profile.png",
liveId = "live-1",
liveTitle = "라이브 방송 이름",
createdAtText = "2분 전"
)
assertEquals(FeedVariant.Live, item.variant)
assertEquals("라이브 방송 이름", item.liveTitle)
assertEquals("2분 전", item.createdAtText)
}
@Test
fun `content item uses default category label`() {
val item = FeedItem.Content(
feedId = "feed-content-1",
creatorId = "creator-1",
creatorName = "크리에이터이름",
creatorImageUrl = "https://example.com/profile.png",
contentId = "content-1",
contentTitle = "콘텐츠 이름",
contentImageUrl = "https://example.com/content.png",
createdAtText = "2분 전"
)
assertEquals(FeedVariant.Content, item.variant)
assertEquals(FeedContentCategory.Content, item.category)
assertEquals("콘텐츠", item.category.label)
}
@Test
fun `content item accepts series and magazine category`() {
val series = FeedItem.Content(
feedId = "feed-content-series",
creatorId = "creator-1",
creatorName = "크리에이터이름",
creatorImageUrl = "https://example.com/profile.png",
contentId = "series-1",
contentTitle = "시리즈 이름",
contentImageUrl = "https://example.com/series.png",
createdAtText = "2분 전",
category = FeedContentCategory.Series
)
val magazine = series.copy(
feedId = "feed-content-magazine",
contentId = "magazine-1",
contentTitle = "매거진 이름",
contentImageUrl = "https://example.com/magazine.png",
category = FeedContentCategory.Magazine
)
assertEquals("시리즈", series.category.label)
assertEquals("매거진", magazine.category.label)
}
@Test
fun `community item exposes reaction counts`() {
val item = FeedItem.Community(
feedId = "feed-community-1",
creatorId = "creator-1",
creatorName = "크리에이터 이름",
creatorImageUrl = "https://example.com/profile.png",
postId = "post-1",
bodyText = "커뮤니티 본문",
keywordText = "#키워드 #키워드",
createdAtText = "2분 전",
commentCount = 5,
likeCount = 6
)
assertEquals(FeedVariant.Community, item.variant)
assertEquals(5, item.commentCount)
assertEquals(6, item.likeCount)
}
}
```
- [ ] **Step 2: RED 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedItemTest"`
Expected: `Unresolved reference 'FeedItem'`, `Unresolved reference 'FeedVariant'` 또는 `Unresolved reference 'FeedContentCategory'`로 실패한다.
- [ ] **Step 3: GREEN - 최소 data contract 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
enum class FeedVariant {
Rank,
Live,
Content,
Community
}
```
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
enum class FeedContentCategory(
val label: String,
val ratioWidth: Int,
val ratioHeight: Int
) {
Content(label = "콘텐츠", ratioWidth = 1, ratioHeight = 1),
Series(label = "시리즈", ratioWidth = 163, ratioHeight = 230),
Magazine(label = "매거진", ratioWidth = 163, ratioHeight = 218)
}
```
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
sealed class FeedItem(open val feedId: String, val variant: FeedVariant) {
data class Rank(
override val feedId: String,
val imageUrl: String,
val rankText: String,
val message: String,
val highlightRanges: List<FeedRankHighlight>
) : FeedItem(feedId, FeedVariant.Rank)
data class Live(
override val feedId: String,
val creatorId: String,
val creatorName: String,
val creatorImageUrl: String,
val liveId: String,
val liveTitle: String,
val createdAtText: String
) : FeedItem(feedId, FeedVariant.Live)
data class Content(
override val feedId: String,
val creatorId: String,
val creatorName: String,
val creatorImageUrl: String,
val contentId: String,
val contentTitle: String,
val contentImageUrl: String,
val createdAtText: String,
val category: FeedContentCategory = FeedContentCategory.Content
) : FeedItem(feedId, FeedVariant.Content)
data class Community(
override val feedId: String,
val creatorId: String,
val creatorName: String,
val creatorImageUrl: String,
val postId: String,
val bodyText: String,
val keywordText: String,
val createdAtText: String,
val commentCount: Int,
val likeCount: Int
) : FeedItem(feedId, FeedVariant.Community)
}
```
- [ ] **Step 4: GREEN 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedItemTest"`
Expected: `BUILD SUCCESSFUL`
### Task 3: Rank highlight contract TDD
**Files:**
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankHighlightTest.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankHighlight.kt`
- [ ] **Step 1: RED - 강조 범위 보정 테스트 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
import org.junit.Assert.assertEquals
import org.junit.Assert.assertNull
import org.junit.Test
class FeedRankHighlightTest {
@Test
fun `valid range remains unchanged`() {
val range = FeedRankHighlight(start = 3, endExclusive = 6).coerceIn("abc12위def")
assertEquals(3, range?.start)
assertEquals(6, range?.endExclusive)
}
@Test
fun `range larger than text is clamped`() {
val range = FeedRankHighlight(start = 2, endExclusive = 99).coerceIn("abc12위")
assertEquals(2, range?.start)
assertEquals(6, range?.endExclusive)
}
@Test
fun `empty range is ignored`() {
val range = FeedRankHighlight(start = 4, endExclusive = 4).coerceIn("abc12위")
assertNull(range)
}
@Test
fun `range starting after text is ignored`() {
val range = FeedRankHighlight(start = 99, endExclusive = 100).coerceIn("abc12위")
assertNull(range)
}
}
```
- [ ] **Step 2: RED 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedRankHighlightTest"`
Expected: `Unresolved reference 'FeedRankHighlight'`로 실패한다.
- [ ] **Step 3: GREEN - 강조 범위 contract 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
data class FeedRankHighlight(
val start: Int,
val endExclusive: Int
) {
fun coerceIn(text: CharSequence): FeedRankHighlight? {
if (text.isEmpty()) return null
val safeStart = start.coerceIn(0, text.length)
val safeEnd = endExclusive.coerceIn(0, text.length)
return if (safeStart < safeEnd) FeedRankHighlight(safeStart, safeEnd) else null
}
}
```
- [ ] **Step 4: GREEN 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedRankHighlightTest"`
Expected: `BUILD SUCCESSFUL`
### Task 4: Rank text styling TDD
**Files:**
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankTextStylerTest.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankTextStyler.kt`
- [ ] **Step 1: RED - 순위 범위 색상 span 테스트 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
import android.graphics.Color
import android.text.Spanned
import android.text.style.ForegroundColorSpan
import org.junit.Assert.assertEquals
import org.junit.Test
class FeedRankTextStylerTest {
@Test
fun `applies highlight color only to rank range`() {
val text = "크리에이터님이 12위를 차지하였어요!"
val styled = FeedRankTextStyler.style(
text = text,
highlightRanges = listOf(FeedRankHighlight(start = 8, endExclusive = 11)),
highlightColor = Color.CYAN
)
val spans = styled.getSpans(0, styled.length, ForegroundColorSpan::class.java)
assertEquals(1, spans.size)
assertEquals(Color.CYAN, spans[0].foregroundColor)
assertEquals(8, styled.getSpanStart(spans[0]))
assertEquals(11, styled.getSpanEnd(spans[0]))
assertEquals(Spanned.SPAN_EXCLUSIVE_EXCLUSIVE, styled.getSpanFlags(spans[0]))
}
}
```
- [ ] **Step 2: RED 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedRankTextStylerTest"`
Expected: `Unresolved reference 'FeedRankTextStyler'`로 실패한다.
- [ ] **Step 3: GREEN - 최소 text styler 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
import android.text.SpannableString
import android.text.Spanned
import android.text.style.ForegroundColorSpan
object FeedRankTextStyler {
fun style(
text: String,
highlightRanges: List<FeedRankHighlight>,
highlightColor: Int
): SpannableString {
val spannable = SpannableString(text)
highlightRanges.mapNotNull { it.coerceIn(text) }.forEach { range ->
spannable.setSpan(
ForegroundColorSpan(highlightColor),
range.start,
range.endExclusive,
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
return spannable
}
}
```
- [ ] **Step 4: GREEN 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedRankTextStylerTest"`
Expected: `BUILD SUCCESSFUL`
### Task 5: Feed size contract TDD
**Files:**
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedSizeTest.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedWidthMode.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedSize.kt`
- [ ] **Step 1: RED - width mode별 root width 테스트 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
import org.junit.Assert.assertEquals
import org.junit.Test
class FeedSizeTest {
@Test
fun `horizontal scroll uses figma width`() {
val size = FeedSize.from(
variant = FeedVariant.Rank,
widthMode = FeedWidthMode.FigmaFixed,
parentAvailableWidthDp = 320
)
assertEquals(374, size.rootWidthDp)
}
@Test
fun `multi item row uses figma width`() {
val size = FeedSize.from(
variant = FeedVariant.Content,
widthMode = FeedWidthMode.FigmaFixed,
parentAvailableWidthDp = 720
)
assertEquals(374, size.rootWidthDp)
}
@Test
fun `single item row uses parent available width`() {
val size = FeedSize.from(
variant = FeedVariant.Live,
widthMode = FeedWidthMode.ParentAvailable,
parentAvailableWidthDp = 328
)
assertEquals(328, size.rootWidthDp)
}
@Test(expected = IllegalArgumentException::class)
fun `parent available width must be positive for parent available mode`() {
FeedSize.from(
variant = FeedVariant.Community,
widthMode = FeedWidthMode.ParentAvailable,
parentAvailableWidthDp = 0
)
}
}
```
- [ ] **Step 2: RED 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedSizeTest"`
Expected: `Unresolved reference 'FeedSize'` 또는 `Unresolved reference 'FeedWidthMode'`로 실패한다.
- [ ] **Step 3: GREEN - width mode와 size contract 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
enum class FeedWidthMode {
FigmaFixed,
ParentAvailable
}
```
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
data class FeedSize(
val rootWidthDp: Int
) {
companion object {
private const val FIGMA_ROOT_WIDTH_DP = 374
fun from(
variant: FeedVariant,
widthMode: FeedWidthMode,
parentAvailableWidthDp: Int
): FeedSize {
val width = when (widthMode) {
FeedWidthMode.FigmaFixed -> FIGMA_ROOT_WIDTH_DP
FeedWidthMode.ParentAvailable -> {
require(parentAvailableWidthDp > 0) { "parentAvailableWidthDp must be greater than 0." }
parentAvailableWidthDp
}
}
return FeedSize(rootWidthDp = width)
}
}
}
```
- [ ] **Step 4: GREEN 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedSizeTest"`
Expected: `BUILD SUCCESSFUL`
### Task 6: Content image size contract TDD
**Files:**
- Create: `app/src/test/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentImageSizeTest.kt`
- Read: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentCategory.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentImageSize.kt`
- [ ] **Step 1: RED - category별 이미지 비율 테스트 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
import org.junit.Assert.assertEquals
import org.junit.Test
class FeedContentImageSizeTest {
@Test
fun `content category keeps one to one ratio`() {
val size = FeedContentImageSize.from(widthDp = 163, category = FeedContentCategory.Content)
assertEquals(163, size.widthDp)
assertEquals(163, size.heightDp)
assertEquals("콘텐츠", FeedContentCategory.Content.label)
}
@Test
fun `series category keeps configured width and uses 163 by 230 ratio`() {
val size = FeedContentImageSize.from(widthDp = 163, category = FeedContentCategory.Series)
assertEquals(163, size.widthDp)
assertEquals(230, size.heightDp)
assertEquals("시리즈", FeedContentCategory.Series.label)
}
@Test
fun `magazine category keeps configured width and uses 163 by 218 ratio`() {
val size = FeedContentImageSize.from(widthDp = 163, category = FeedContentCategory.Magazine)
assertEquals(163, size.widthDp)
assertEquals(218, size.heightDp)
assertEquals("매거진", FeedContentCategory.Magazine.label)
}
@Test(expected = IllegalArgumentException::class)
fun `image width must be positive`() {
FeedContentImageSize.from(widthDp = 0, category = FeedContentCategory.Content)
}
}
```
- [ ] **Step 2: RED 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedContentImageSizeTest"`
Expected: `Unresolved reference 'FeedContentImageSize'`로 실패한다.
- [ ] **Step 3: GREEN - 이미지 크기 contract 추가**
```kotlin
package kr.co.vividnext.sodalive.v2.widget.feed
data class FeedContentImageSize(
val widthDp: Int,
val heightDp: Int
) {
companion object {
fun from(widthDp: Int, category: FeedContentCategory): FeedContentImageSize {
require(widthDp > 0) { "widthDp must be greater than 0." }
val height = (widthDp * category.ratioHeight.toFloat() / category.ratioWidth).toInt()
return FeedContentImageSize(widthDp = widthDp, heightDp = height)
}
}
}
```
- [ ] **Step 4: GREEN 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.FeedContentImageSizeTest"`
Expected: `BUILD SUCCESSFUL`
### Task 7: XML resource 추가
**Files:**
- Create: `app/src/main/res/drawable/bg_feed_card.xml`
- Create: `app/src/main/res/drawable/bg_feed_category_tag.xml`
- Add if missing: `app/src/main/res/drawable/ic_feed_comment.xml`
- Add if missing: `app/src/main/res/drawable/ic_feed_like.xml`
- Modify: `app/src/main/res/values/strings.xml`
- Modify: `app/src/main/res/values-en/strings.xml`
- Modify: `app/src/main/res/values-ja/strings.xml`
- [x] **Step 1: 공통 background drawable 추가**
Expected `bg_feed_card.xml`:
```xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/gray_900" />
<corners android:radius="@dimen/radius_14" />
</shape>
```
Expected `bg_feed_category_tag.xml`:
```xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/gray_700" />
<corners android:radius="@dimen/radius_4" />
</shape>
```
- [x] **Step 2: 문자열 resource 추가**
Expected:
- `strings.xml`: `<string name="feed_content_category_default">콘텐츠</string>`
- `strings.xml`: `feed_content_category_content`, `feed_content_category_series`, `feed_content_category_magazine` 추가
- `values-en/strings.xml`, `values-ja/strings.xml`: 기존 번역 스타일에 맞춰 동일 key 추가
- [x] **Step 3: resource merge 확인**
Run: `./gradlew :app:assembleDebug`
Expected: `BUILD SUCCESSFUL`
### Task 8: Rank and Live view 추가
**Files:**
- Create: `app/src/main/res/layout/view_feed_rank.xml`
- Create: `app/src/main/res/layout/view_feed_live.xml`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedRankView.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedLiveView.kt`
- [x] **Step 1: Rank XML layout 추가**
Expected:
- Root는 `bg_feed_card`, horizontal orientation, `padding=14dp`, `gravity=center_vertical`, `gap=14dp`에 해당하는 구조다.
- 왼쪽 image는 `80dp x 80dp`, `scaleType=centerCrop`, rounded clipping 가능한 구조다.
- 오른쪽 TextView는 `Typography.Body2`, white, `maxLines`는 Figma 줄 수에 맞춰 기본 2줄 허용 또는 호출부 설정 가능으로 둔다.
- Root width는 가로 스크롤/한 줄 다중 표시에서는 `374dp`, 한 줄 1개 표시에서는 부모 가용 폭을 적용할 수 있는 구조다.
- 순위 overlay TextView는 `Pattaya Regular`, `40sp`, shadow `0dp 0dp 4dp rgba(0,0,0,0.48)` 기준으로 표시한다.
- 순위 overlay TextView는 image 오른쪽 하단에서 약간 벗어난 Figma 위치를 유지하며, root/image container는 overlay를 clip하지 않는다.
- [x] **Step 2: Live XML layout 추가**
Expected:
- Root는 `bg_feed_card`, vertical orientation, `padding=14dp`, `gap=6dp`에 해당하는 구조다.
- 첫 row는 profile image `20dp`와 서버/호출부가 전달한 종료 안내 문구 하나의 `12sp` TextView를 가진다.
- 종료 안내 문구 TextView는 `0dp` width + constraint/weight로 폭 제약을 받고, `maxLines=1`, `ellipsize=end`를 적용한다.
- 두 번째 row는 `ConstraintLayout` 또는 동등한 제약을 사용한다.
- Live title TextView는 start to parent, end to time start, `layout_constraintHorizontal_bias=0`, `maxLines=1`, `ellipsize=end`다.
- Time TextView는 end to parent, `maxLines=1`, `ellipsize=end`다.
- Title과 time 사이 margin은 `20dp`다.
- Root width는 가로 스크롤/한 줄 다중 표시에서는 `374dp`, 한 줄 1개 표시에서는 부모 가용 폭을 적용할 수 있는 구조다.
- [x] **Step 3: Rank/Live custom view 추가**
Expected:
- `FeedRankView.bind(item: FeedItem.Rank)`는 `FeedRankTextStyler`로 강조 span을 적용한다.
- `FeedRankView.imageView(): ImageView`는 호출부 이미지 로딩을 위해 왼쪽 이미지 view를 반환한다.
- `FeedLiveView.bind(item: FeedItem.Live)`는 서버/호출부가 전달한 종료 안내 문구, title, time 텍스트를 바인딩한다.
- `FeedLiveView.profileImageView(): ImageView`는 호출부 이미지 로딩을 위해 프로필 image view를 반환한다.
- 두 view 모두 `setFeedSize(size: FeedSize)` 또는 동등한 API로 root width를 적용한다.
- 두 view 모두 `setOnFeedClick(listener: ((FeedItem) -> Unit)?)` 또는 variant별 listener를 제공한다.
- [x] **Step 4: 단위 테스트와 assemble 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.*"`
Expected: `BUILD SUCCESSFUL`
Run: `./gradlew :app:assembleDebug`
Expected: `BUILD SUCCESSFUL`
### Task 9: Content and Community view 추가
**Files:**
- Create: `app/src/main/res/layout/view_feed_content.xml`
- Create: `app/src/main/res/layout/view_feed_community.xml`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedContentView.kt`
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedCommunityView.kt`
- [x] **Step 1: Content XML layout 추가**
Expected:
- Root는 `bg_feed_card`, horizontal orientation, `padding=14dp`, `gap=14dp`에 해당하는 구조다.
- 왼쪽 content image는 현재 설정된 가로 크기를 유지하고, `FeedContentImageSize`로 category별 높이를 적용할 수 있는 구조다.
- 왼쪽 content image category별 비율은 `Content=1:1`, `Series=163:230`, `Magazine=163:218`이다.
- 오른쪽 column은 width `0dp` + weight 또는 constraints로 남은 폭을 사용한다.
- Root width는 가로 스크롤/한 줄 다중 표시에서는 `374dp`, 한 줄 1개 표시에서는 부모 가용 폭을 적용할 수 있는 구조다.
- Profile row는 `20dp` 원형 image와 creator name `12sp`를 가진다.
- Content title은 `Typography.Heading4`, white, `maxLines=1`, `ellipsize=end`다.
- Bottom row는 category tag start, time end 배치이며 서로 겹치지 않는다.
- [x] **Step 2: Community XML layout 추가**
Expected:
- Root는 `bg_feed_card`, vertical orientation, `padding=14dp`, `gap=14dp`에 해당하는 구조다.
- Root width는 가로 스크롤/한 줄 다중 표시에서는 `374dp`, 한 줄 1개 표시에서는 부모 가용 폭을 적용할 수 있는 구조다.
- Profile row는 profile image `42dp`, creator name `Typography.Body5`, time `Typography.Body6`를 가진다.
- Body text는 `Typography.Body3`, white, line-height는 기존 typography 한계 내에서 Figma에 가장 가깝게 맞춘다.
- Keyword text는 `Typography.Body3`, `soda_400`이다.
- Reaction row는 comment icon/text, like icon/text 순서이며 gap은 Figma 기준 `15dp`다.
- Reaction row의 comment icon은 `ic_feed_community_reply`, like icon은 `ic_feed_community_heart`를 사용한다.
- [x] **Step 3: Content/Community custom view 추가**
Expected:
- `FeedContentView.bind(item: FeedItem.Content)`는 creator/title/category/time을 바인딩한다.
- `FeedContentView.bind(item: FeedItem.Content)`는 `item.category.labelResId`로 string resource를 조회해 하단 meta row의 category tag에 표시한다.
- `FeedContentView.bind(item: FeedItem.Content)`는 `FeedContentImageSize.from(currentImageWidth, item.category)`로 왼쪽 이미지 height를 적용한다.
- `FeedContentView.contentImageView(): ImageView`와 `profileImageView(): ImageView`를 제공한다.
- `FeedCommunityView.bind(item: FeedItem.Community)`는 creator/time/body/keyword/comment/like를 바인딩한다.
- `FeedCommunityView`는 호출부 정책에 따라 빈 body/keyword row를 숨길 수 있는 API를 제공한다.
- `FeedCommunityView.profileImageView(): ImageView`를 제공한다.
- 두 view 모두 `setFeedSize(size: FeedSize)` 또는 동등한 API로 root width를 적용한다.
- 두 view 모두 클릭 callback을 호출부에 위임한다.
- [x] **Step 4: 단위 테스트와 assemble 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.*"`
Expected: `BUILD SUCCESSFUL`
Run: `./gradlew :app:assembleDebug`
Expected: `BUILD SUCCESSFUL`
### Task 10: FeedAdapter 추가 및 통합 검증
**Files:**
- Create: `app/src/main/java/kr/co/vividnext/sodalive/v2/widget/feed/FeedAdapter.kt`
- Modify: `docs/plan-task/20260521_피드컴포넌트.md`
- [x] **Step 1: Adapter 추가**
Expected:
- `getItemViewType`은 `FeedItem.variant` 기준으로 view type을 반환한다.
- `onCreateViewHolder`는 `view_feed_rank`, `view_feed_live`, `view_feed_content`, `view_feed_community` 중 하나를 inflate한다.
- `onBindViewHolder`는 item type에 맞는 custom view `bind`를 호출한다.
- 외부 클릭 동작은 `onItemClick: (FeedItem) -> Unit` 형태로 호출부에 위임한다.
- 이미지 로딩은 adapter 내부에 고정하지 않고, 필요하면 `onBindImages(holder, item)` 같은 callback으로 호출부에 위임한다.
- adapter 또는 호출부는 표시 맥락에 따라 `FeedWidthMode.FigmaFixed`와 `FeedWidthMode.ParentAvailable`을 선택한다.
- 가로 스크롤 목록과 한 줄 다중 표시에서는 `FeedWidthMode.FigmaFixed`를 사용한다.
- 한 줄 1개 표시에서는 부모 padding/item decoration을 제외한 폭으로 `FeedWidthMode.ParentAvailable`을 사용한다.
- [x] **Step 2: 전체 feed 단위 테스트 실행**
Run: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.*"`
Expected: `BUILD SUCCESSFUL`
- [x] **Step 3: 관련 빌드 실행**
Run: `./gradlew :app:assembleDebug`
Expected: `BUILD SUCCESSFUL`
- [x] **Step 4: 계획 문서 검증 기록 누적**
Expected:
- 실행한 명령, 결과, 실패 시 원인과 후속 조치를 이 문서 하단 `검증 기록`에 누적한다.
---
## 검증 기록
- 2026-05-21: 문서만 작성하는 요청이므로 구현/빌드/테스트는 실행하지 않았다. Figma `63:4133`, `63:4140`, `63:4142`, `63:4155`의 design context와 screenshot을 확인해 PRD 및 구현 계획에 반영했다.
- 2026-05-21: 사용자 추가 요구사항에 따라 Feed root width 정책을 보강했다. 가로 스크롤 및 한 줄 다중 표시는 Figma `374dp` width를 사용하고, 한 줄 1개 표시는 부모 view의 가용 영역 폭을 사용하도록 PRD와 구현 계획에 반영했다. 문서만 수정했으므로 구현/빌드/테스트는 실행하지 않았다.
- 2026-05-21: 사용자 추가 요구사항에 따라 Content Feed category tag별 왼쪽 이미지 비율 정책을 보강했다. `콘텐츠`는 `1:1`, `시리즈`는 `163:230`, `매거진`은 `163:218` 비율을 사용하고, 이미지 가로 크기는 현재 설정값을 유지한 채 높이만 변경하도록 PRD와 구현 계획에 반영했다. 문서만 수정했으므로 구현/빌드/테스트는 실행하지 않았다.
- 2026-05-21: Feed 순수 contract 테스트를 먼저 추가하고 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.*"`로 RED를 확인했다. 이후 `FeedItem`, `FeedVariant`, `FeedRankHighlight`, `FeedRankTextStyler`, `FeedWidthMode`, `FeedSize`, `FeedContentCategory`, `FeedContentImageSize`를 추가했다.
- 2026-05-21: Rank/Live/Content/Community custom view, XML layout, drawable, string resource, `FeedAdapter`를 추가했다. 첫 Feed 테스트 실행은 `values-en/strings.xml`의 apostrophe escape 문제로 resource merge가 실패했고, `feed_live_ended_suffix`를 `\'s live broadcast has ended.`로 수정했다.
- 2026-05-21: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.*"` 재실행 결과 `BUILD SUCCESSFUL`을 확인했다. 기존 프로젝트 Kotlin deprecation/unchecked cast warning은 출력됐지만 Feed 변경으로 인한 실패는 없었다.
- 2026-05-21: `./gradlew :app:assembleDebug` 실행 결과 `BUILD SUCCESSFUL`을 확인했다. Kotlin LSP diagnostics는 현재 환경에 `.kt` 서버가 구성되어 있지 않아 실행할 수 없었다.
- 2026-05-21: 코드리뷰 blocking issue 및 사용자 추가 지시에 따라 Live 종료 안내 문구를 단일 서버 제공 문자열로 바인딩하고 header 폭 제약을 보강했다. Content category label은 string resource id 기반으로 변경하고 하단 meta row에 category/time을 함께 배치했다. Community reaction icon은 `ic_feed_community_reply`, `ic_feed_community_heart`로 변경하고 빈 body/keyword 숨김 API를 추가했다. Rank overlay는 Figma `Rank(type=Default, rank1=all)` 기준에 맞춰 `Pattaya Regular` 40sp, shadow, 오른쪽 하단 overflow 위치로 보정했다.
- 2026-05-21: 위 보완 사항에 대해 `FeedViewTest` 및 기존 Feed 테스트를 추가/수정했다. `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.widget.feed.*"`와 `./gradlew :app:assembleDebug` 실행 결과 `BUILD SUCCESSFUL`을 확인했다.
Reference in New Issue View Git Blame Copy Permalink