[Feat] SavedFilmListItem 제작#84
Conversation
chanmi1125
added
🧩 Component
📝 WalkthroughWalkthrough새로운 최상위 Composable Changes
Sequence Diagram(s)(생성 조건 미충족 — 해당 섹션은 생략되었습니다.) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
시
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✏️ Tip: You can disable this entire section by setting Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt:
- Around line 198-200: The preview function name is inconsistent: rename the
@Preview @Composable function currently named CollectionCreateFilmSectionPreview
to match the component being previewed (SavedFilmListItemPreview) and ensure the
function body renders SavedFilmListItem; update any usages or duplicate preview
functions to avoid name collisions so the preview clearly maps to the
SavedFilmListItem composable.
- Around line 88-105: The Box in SavedFilmListItem sets .height(180.dp) but its
parent Row uses 150.dp, causing layout clipping; make heights consistent by
either changing the Box height to 150.dp (update the Box modifier.height(180.dp)
-> .height(150.dp)) or updating the parent Row height to 180.dp so NetworkImage
and OttHorizontalList (which use fillMaxSize / padding) no longer overflow;
ensure the chosen height is applied to the parent Row and the Box so
NetworkImage and OttHorizontalList render without clipping.
🧹 Nitpick comments (2)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (2)
36-44:contentModel에 이미title,year가 포함되어 있어 중복 파라미터입니다.
ContentModel에title과year필드가 있는데,title과createdYear를 별도의 파라미터로 받고 있습니다. 이는 데이터 불일치 가능성을 만들고 API 표면을 불필요하게 확장합니다.
contentModel에서 직접 값을 사용하거나, 별도 파라미터가 필요한 경우contentModel대신posterImage와ottSimpleList만 전달하는 것을 고려해 주세요.
178-186: 북마크 아이콘의 터치 영역이 작습니다.아이콘 크기가 24.dp로, Material Design 권장 최소 터치 영역 48dp보다 작습니다. 접근성을 위해 터치 영역 확대를 권장합니다.
♻️ 터치 영역 확대 제안
Icon( imageVector = ImageVector.vectorResource(if (isBookmarked) R.drawable.ic_bookmark_fill else R.drawable.ic_bookmark_empty), contentDescription = null, tint = Color.Unspecified, modifier = Modifier .size(24.dp) - .clickable(onClick = onBookmarkClick), + .clickable( + onClick = onBookmarkClick, + interactionSource = remember { MutableInteractionSource() }, + indication = null, + ) + .padding(12.dp), )또는
IconButton을 사용하면 기본적으로 48dp 터치 영역이 적용됩니다.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
🧰 Additional context used
🧬 Code graph analysis (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (3)
app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)
NetworkImage(22-46)app/src/main/java/com/flint/core/designsystem/component/listView/OttHorizontalList.kt (1)
OttHorizontalList(25-111)app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: PR Lint Check
- GitHub Check: PR Build Check
🔇 Additional comments (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (1)
149-164: "작품 보러가기" 영역에 클릭 핸들러가 없습니다."작품 보러가기" 텍스트와 아이콘이 네비게이션을 암시하지만, 클릭 동작이 구현되어 있지 않습니다. 의도된 디자인인지 확인이 필요합니다.
클릭 기능이 필요한 경우
onFilmClick: () -> Unit콜백을 추가하는 것을 권장합니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt:
- Around line 179-187: The bookmark Icon currently has contentDescription = null
and a 24.dp clickable area; update it to provide an accessible description based
on isBookmarked (e.g., use string resources or conditional text like
"Bookmarked" vs "Add bookmark") and ensure the clickable touch target meets
Android's 48.dp minimum by moving the clickable to a larger container (or give
the Icon a 48.dp clickable Modifier while keeping the visual icon at 24.dp),
wiring the click to onBookmarkClick; reference the Icon, isBookmarked,
onBookmarkClick, and contentDescription when making the change.
🧹 Nitpick comments (3)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (3)
40-48:ContentModel에 이미 포함된 데이터와 파라미터 중복 검토
ContentModel에 이미title과year프로퍼티가 있는데,title과createdYear를 별도 파라미터로 받고 있습니다. 호출부에서 다른 값을 전달할 경우 불일치가 발생할 수 있습니다.다음 중 하나를 고려해주세요:
contentModel에서 직접 추출하여 중복 파라미터 제거- 의도적인 설계라면, 파라미터 네이밍에 목적을 명확히 (예:
displayTitle)
153-157: 하드코딩된 문자열을 리소스로 분리 권장
"작품 보러가기"문자열이 하드코딩되어 있습니다. i18n 지원 및 일관성을 위해strings.xml로 분리하는 것이 좋습니다.♻️ 수정 제안
Text( - text = "작품 보러가기", + text = stringResource(R.string.saved_film_go_to_content), color = FlintTheme.colors.white, style = FlintTheme.typography.body2R14, )
strings.xml에 추가:<string name="saved_film_go_to_content">작품 보러가기</string>
199-201: Preview 함수 네이밍 불일치
SavedFilmListItemBookmarkPreview라는 이름이지만 실제로는 전체SavedFilmListItem을 프리뷰합니다. 일관성을 위해SavedFilmListItemPreview로 변경하는 것이 좋습니다.♻️ 수정 제안
@Preview @Composable -private fun SavedFilmListItemBookmarkPreview() { +private fun SavedFilmListItemPreview() {
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2026-01-13T19:02:41.580Z
Learnt from: chanmi1125
Repo: imflint/Flint-Android PR: 77
File: app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt:45-72
Timestamp: 2026-01-13T19:02:41.580Z
Learning: In `app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt`, the height difference between CollectionCreateEmptyThumbnail (no aspectRatio) and CollectionCreateFillThumbnail (aspectRatio 1.5f / 1f) is intentional design - the empty state should not have the same aspectRatio as the filled state.
Applied to files:
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
📚 Learning: 2026-01-13T19:02:56.195Z
Learnt from: chanmi1125
Repo: imflint/Flint-Android PR: 77
File: app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt:45-72
Timestamp: 2026-01-13T19:02:56.195Z
Learning: In `app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt`, the aspect ratio difference between `CollectionCreateEmptyThumbnail` (no aspect ratio) and `CollectionCreateFillThumbnail` (1.5f / 1f) is intentional by design.
Applied to files:
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
🧬 Code graph analysis (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (3)
app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)
NetworkImage(22-46)app/src/main/java/com/flint/core/designsystem/component/listView/OttHorizontalList.kt (1)
OttHorizontalList(25-111)app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: PR Build Check
- GitHub Check: PR Lint Check
🔇 Additional comments (2)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (2)
84-108: LGTM!포스터 이미지 위에 OTT 오버레이를 배치하는 구조가 적절합니다.
NetworkImage와OttHorizontalList를 활용한 구현이 깔끔합니다.
39-42: 두 컴포넌트는 서로 다른 목적의 독립적인 컴포넌트입니다
SavedContentItem은 디자인 시스템의 제네릭 컴포넌트(수직 카드 형식, contentModel만 사용)이고,SavedFilmListItem은 특화된 피처 컴포넌트(수평 행 형식, 영화 메타데이터와 북마크 기능 포함)입니다. 레이아웃, 파라미터, 상호작용이 모두 다르므로 코드 중복이나 재사용 가능성은 없습니다. 현재 구조가 적절합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (3)
89-105: 불필요한 Column wrapper 제거 고려
Column이 하나의Box자식만 포함하고 있어 불필요합니다.Box만으로 동일한 레이아웃을 구현할 수 있습니다.♻️ 제안된 수정 사항
@Composable private fun SavedFilmListItemImage( contentModel: ContentModel, modifier: Modifier = Modifier, ) { - Column( - modifier = modifier.width(100.dp), - ) { - Box( - modifier = Modifier.fillMaxSize(), - ) { - NetworkImage( - imageUrl = contentModel.posterImage, - modifier = Modifier.fillMaxSize(), - ) - - OttHorizontalList( - ottList = contentModel.ottSimpleList, - modifier = Modifier.padding(top = 10.dp, start = 8.dp), - ) - } - } + Box( + modifier = modifier.width(100.dp), + ) { + NetworkImage( + imageUrl = contentModel.posterImage, + modifier = Modifier.fillMaxSize(), + ) + + OttHorizontalList( + ottList = contentModel.ottSimpleList, + modifier = Modifier.padding(top = 10.dp, start = 8.dp), + ) + } }
177-185: 터치 영역 확대 고려북마크 아이콘의 클릭 가능 영역이 24.dp로, Material Design 권장 최소 터치 영역(48.dp)보다 작습니다. 전체
Column에clickable을 적용하면 접근성과 사용성이 개선됩니다.♻️ 제안된 수정 사항
@Composable private fun SavedFilmListItemBookmark( isBookmarked: Boolean, bookmarkCount: Int, onBookmarkClick: () -> Unit, ) { Column( - modifier = Modifier.size(48.dp), + modifier = Modifier + .size(48.dp) + .clickable(onClick = onBookmarkClick), horizontalAlignment = Alignment.CenterHorizontally, ) { Icon( imageVector = ImageVector.vectorResource(if (isBookmarked) R.drawable.ic_bookmark_fill else R.drawable.ic_bookmark_empty), contentDescription = "북마크", tint = Color.Unspecified, - modifier = - Modifier - .size(24.dp) - .clickable(onClick = onBookmarkClick), + modifier = Modifier.size(24.dp), )
198-199: Preview 함수명 수정 권장함수명이
SavedFilmListItemBookmarkPreview이지만 실제로는 전체SavedFilmListItem을 프리뷰합니다.SavedFilmListItemPreview로 수정하면 더 명확합니다.♻️ 제안된 수정 사항
@Preview @Composable -private fun SavedFilmListItemBookmarkPreview() { +private fun SavedFilmListItemPreview() {
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2026-01-13T19:02:41.580Z
Learnt from: chanmi1125
Repo: imflint/Flint-Android PR: 77
File: app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt:45-72
Timestamp: 2026-01-13T19:02:41.580Z
Learning: In `app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt`, the height difference between CollectionCreateEmptyThumbnail (no aspectRatio) and CollectionCreateFillThumbnail (aspectRatio 1.5f / 1f) is intentional design - the empty state should not have the same aspectRatio as the filled state.
Applied to files:
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
📚 Learning: 2026-01-13T19:02:56.195Z
Learnt from: chanmi1125
Repo: imflint/Flint-Android PR: 77
File: app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt:45-72
Timestamp: 2026-01-13T19:02:56.195Z
Learning: In `app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt`, the aspect ratio difference between `CollectionCreateEmptyThumbnail` (no aspect ratio) and `CollectionCreateFillThumbnail` (1.5f / 1f) is intentional by design.
Applied to files:
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt
🧬 Code graph analysis (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (3)
app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)
NetworkImage(22-46)app/src/main/java/com/flint/core/designsystem/component/listView/OttHorizontalList.kt (1)
OttHorizontalList(25-111)app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: PR Lint Check
- GitHub Check: PR Build Check
🔇 Additional comments (1)
app/src/main/java/com/flint/presentation/savedfilm/SavedFilmListItem.kt (1)
148-163: "작품 보러가기" 클릭 동작 누락 확인 필요"작품 보러가기" 텍스트와 화살표 아이콘이 있지만 클릭 핸들러가 없습니다. 사용자가 이 영역을 탭할 것으로 예상할 수 있으므로, 의도적으로 클릭 동작을 생략한 것인지 확인해 주세요. 필요하다면
onDetailClick콜백을 추가하는 것을 고려해 보세요.
nahy-512
left a comment
nahy-512
left a comment
There was a problem hiding this comment.
작업 넘넘 고생했어요~! 이제 컴포넌트도 뚝딱 만들고 찬미 최고다잉🫳🏻
넘 잘했는데, 반영되면 좋을 부분들이 보여서 RC 드립니다 수정 후 다시 알려주세요
| Row( | ||
| modifier = | ||
| modifier | ||
| .fillMaxWidth() | ||
| .height(150.dp) | ||
| .background(color = FlintTheme.colors.background), | ||
| ) { |
There was a problem hiding this comment.
p2
컴포넌트에 내부 패딩이 존재하는 거 같은데, Row에 패딩을 안 주신 이유가 있을까요?
There was a problem hiding this comment.
디자인이 되어있는 부분이 컴포넌트라고 생각하면 패딩을 넣어주는게 맞는거 같아요! 반영하겠습니다아!!
| modifier | ||
| .fillMaxWidth() | ||
| .height(150.dp) | ||
| .background(color = FlintTheme.colors.background), |
There was a problem hiding this comment.
p1
디자인에 background 지금 들어가있나요??
따로 컴포넌트 배경 없이, 화면 배경색을 따라가는 것 같아 보여서용
There was a problem hiding this comment.
없습니다...! 저도 궁금했던 부분인데 그럼 배경을 투명색으로 넣어주는게 맞을까요? 이전 컴포넌트들도 다 배경을 검정색으로 넣어줬어서 일단 검정색 넣어서 작업 진행했습니다!
There was a problem hiding this comment.
디자인 잡힌대로 가는 편이 맞을 것 같아요..!
프리뷰 돌릴 때 showBackground나 Column background로 Background를 직접 넣어주면 컴포넌트 색상 확인할 수 있습니다
| createdYear: String, | ||
| isBookmarked: Boolean, | ||
| bookmarkCount: Int, | ||
| onBookmarkClick: () -> Unit, |
There was a problem hiding this comment.
p1
ContentModel을 활용하고 있는데, 새로운 모델을 만들지 않고 다른 데이터들을 추가로 받은 이유가 있나요??
사용하는 것들을 모두 받는 모델을 새로 만드는 편이 더 명확할 것 같아요.
특히 title, createYear 같은 경우는 이미 ContentModel에 들어있는 정보인데, 추가로 또 받고 있다는 점이 걸리네요.
|
|
||
| @Composable | ||
| private fun SavedFilmListItemImage( | ||
| contentModel: ContentModel, |
There was a problem hiding this comment.
p1
받기는 ContentModel을 받고 있지만, 그 중 컴포넌트에서 활용하는 정보는 posterImage, ottSimpleList가 전부네요.
저라면 이런 경우(컴포넌트에 넣어야 할 정보가 한정적임)에 인자를 모델로 받는 게 아니라, posterImge, ottSimpleList 타입을 직접 명시하고 넣어줄 것 같은데, 찬미님은 선호하시는 방식이 있으신가요?
There was a problem hiding this comment.
저도 타입 직접 명시하고 넣어주는 방식을 선호하긴 합니다! 근데 종우님이 기존이 만드신걸 가지고 오면서 통일성있게 제작하고 싶어서 ContentModel을 그대로 사용했습니다!
| Column( | ||
| modifier = modifier.width(100.dp), | ||
| ) { | ||
| Box( | ||
| modifier = Modifier.fillMaxSize(), | ||
| ) { | ||
| NetworkImage( | ||
| imageUrl = contentModel.posterImage, | ||
| modifier = Modifier.fillMaxSize(), | ||
| ) | ||
|
|
||
| OttHorizontalList( | ||
| ottList = contentModel.ottSimpleList, | ||
| modifier = Modifier.padding(top = 10.dp, start = 8.dp), | ||
| ) | ||
| } |
There was a problem hiding this comment.
p1
Column이 하는 역할이 없는 것 같은데(내부에 Box 하나만 있음) 아래처럼 Box를 바로 쓸 수 있을 것 같아요.
| Column( | |
| modifier = modifier.width(100.dp), | |
| ) { | |
| Box( | |
| modifier = Modifier.fillMaxSize(), | |
| ) { | |
| NetworkImage( | |
| imageUrl = contentModel.posterImage, | |
| modifier = Modifier.fillMaxSize(), | |
| ) | |
| OttHorizontalList( | |
| ottList = contentModel.ottSimpleList, | |
| modifier = Modifier.padding(top = 10.dp, start = 8.dp), | |
| ) | |
| } | |
| Box( | |
| modifier = modifier | |
| .width(100.dp) | |
| .fillMaxSize(), | |
| ) { | |
| NetworkImage( | |
| imageUrl = contentModel.posterImage, | |
| modifier = Modifier.fillMaxSize(), | |
| ) | |
| OttHorizontalList( | |
| ottList = contentModel.ottSimpleList, | |
| modifier = Modifier.padding(top = 10.dp, start = 8.dp), | |
| ) | |
| } |
| private fun SavedFilmListItemInfo( | ||
| title: String, | ||
| director: String, | ||
| createdYear: String, | ||
| modifier: Modifier = Modifier, | ||
| ) { |
There was a problem hiding this comment.
p1
'작품 보러가기' 클릭 이벤트도 미리 받아서 넣어주면 좋을 것 같아요~~
| ottSimpleList = | ||
| listOf( | ||
| OttType.Netflix, | ||
| OttType.Disney, | ||
| OttType.Tving, | ||
| OttType.Coupang, | ||
| OttType.Wave, | ||
| OttType.Watcha, | ||
| ), |
There was a problem hiding this comment.
p2
이거
| ottSimpleList = | |
| listOf( | |
| OttType.Netflix, | |
| OttType.Disney, | |
| OttType.Tving, | |
| OttType.Coupang, | |
| OttType.Wave, | |
| OttType.Watcha, | |
| ), | |
| ottSimpleList = OttType.entries |
식으로 리스트 넣어줄 수도 있습니다ㅎㅎ
There was a problem hiding this comment.
우엥... 짱이다...
바로 반영하겠습니다!
nahy-512
left a comment
nahy-512
left a comment
There was a problem hiding this comment.
나중에 패딩만 한번 확인해주세요~~
작업 고생하셨습니다 굿굿!
| modifier | ||
| .fillMaxWidth() | ||
| .height(150.dp) | ||
| .background(color = FlintTheme.colors.background), |
There was a problem hiding this comment.
디자인 잡힌대로 가는 편이 맞을 것 같아요..!
프리뷰 돌릴 때 showBackground나 Column background로 Background를 직접 넣어주면 컴포넌트 색상 확인할 수 있습니다
2 participants
📮 관련 이슈
📌 작업 내용
📸 스크린샷
| 스크린샷 |
😅 미구현
🫛 To. 리뷰어
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.