[Feat] OTT 리스트 바텀시트 컴포넌트 제작#69
Conversation
📝 Walkthrough개요OTT 콘텐츠 목록을 표시하는 바텀시트 UI 컴포넌트 2개를 신규 추가했으며, 기존 메뉴 바텀시트에 닫음 콜백을 연결했습니다. 변경사항
예상 코드 리뷰 소요시간🎯 2 (Simple) | ⏱️ ~15 minutes 제안 라벨
제안 검토자
시
🚥 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
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: 1
🤖 Fix all issues with AI agents
In
@app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt:
- Around line 57-72: Replace the instance of the parameter `modifier` used on
the inner Box with `Modifier` (capital M) so the Box uses its own internal chain
(e.g., Modifier.clip(RoundedCornerShape(8.dp)).clickable { onMoveClick()
}.background(...).padding(...).then(modifier)) — this prevents the external
`modifier` from being applied twice; also reorder so
`clip(RoundedCornerShape(8.dp))` comes before `clickable` to ensure the ripple
is clipped; reference Box, modifier (param), Modifier, clip, RoundedCornerShape,
clickable, onMoveClick, and then(modifier).
🧹 Nitpick comments (1)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (1)
30-40:items함수의 관용적 사용법을 권장합니다.
items(ottList.size)와 인덱스 접근 대신items(ottList, key = ...)를 사용하면 더 안전하고 가독성이 좋습니다.key를 제공하면 리스트 변경 시 불필요한 recomposition을 방지할 수 있습니다.♻️ 리팩토링 제안
LazyColumn( modifier = modifier.padding(top = 24.dp, bottom = 32.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { - items(ottList.size) { + items( + items = ottList, + key = { it.name } + ) { ottType -> OttShortCutListItem( - ottType = ottList[it], - onMoveClick = { onMoveClick(ottList[it]) }, + ottType = ottType, + onMoveClick = { onMoveClick(ottType) }, ) } }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.ktapp/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.ktapp/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.ktapp/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.ktapp/src/main/java/com/flint/presentation/collectioncreate/component/CollectionAddFilmBottomSheet.ktapp/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateFilmDeleteModal.kt
🧰 Additional context used
🧬 Code graph analysis (5)
app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt (1)
app/src/main/java/com/flint/core/designsystem/component/image/ProfileImage.kt (1)
ProfileImage(11-29)
app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionAddFilmBottomSheet.kt (1)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/MenuBottomSheet.kt (1)
MenuBottomSheet(30-78)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (3)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/FlintBasicBottomSheet.kt (1)
FlintBasicBottomSheet(32-82)app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
OttShortCutListItem(27-74)app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt (1)
app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)
NetworkImage(22-46)
⏰ 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 (6)
app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt (1)
24-66: 코드 스타일 개선 확인명명된 매개변수와 후행 쉼표를 추가하여 Kotlin 코딩 컨벤션에 맞게 포매팅을 개선한 변경사항입니다. 로직 변경은 없습니다.
app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateFilmDeleteModal.kt (1)
12-33: 코드 스타일 개선 확인함수 시그니처와 호출부에 후행 쉼표를 추가한 포매팅 변경입니다. 로직 변경은 없습니다.
app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt (1)
25-69: 코드 스타일 개선 확인명명된 매개변수와 후행 쉼표를 추가하여 코드 가독성을 향상시킨 포매팅 변경입니다. 로직 변경은 없습니다.
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
76-107: LGTM!다양한 OttType을 테스트하는 Preview가 잘 구성되어 있습니다.
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (1)
44-68: LGTM!Preview 구성이 적절합니다.
app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionAddFilmBottomSheet.kt (1)
11-38: LGTM!포맷팅 개선으로 코드 가독성이 향상되었습니다. Trailing comma 사용은 향후 변경 시 더 깔끔한 diff를 만들어줍니다.
| Box( | ||
| modifier = | ||
| modifier | ||
| .clickable { | ||
| onMoveClick() | ||
| }.clip(RoundedCornerShape(8.dp)) | ||
| .background(FlintTheme.colors.primary400) | ||
| .padding(vertical = 7.dp, horizontal = 12.dp), | ||
| contentAlignment = Alignment.Center, | ||
| ) { | ||
| Text( | ||
| text = "바로 보러가기", | ||
| style = FlintTypography.body2M14, | ||
| color = FlintTheme.colors.white, | ||
| ) | ||
| } |
There was a problem hiding this comment.
modifier 대신 Modifier를 사용해야 합니다.
Line 59에서 파라미터로 받은 modifier를 Box에 재사용하고 있습니다. 이는 외부에서 전달된 modifier가 Row와 Box 양쪽에 중복 적용되어 의도치 않은 레이아웃 문제를 일으킬 수 있습니다.
또한 clickable이 clip 앞에 위치해 있어 ripple 효과가 둥근 모서리를 벗어날 수 있습니다.
🐛 수정 제안
Box(
modifier =
- modifier
- .clickable {
- onMoveClick()
- }.clip(RoundedCornerShape(8.dp))
+ Modifier
+ .clip(RoundedCornerShape(8.dp))
.background(FlintTheme.colors.primary400)
- .padding(vertical = 7.dp, horizontal = 12.dp),
+ .clickable { onMoveClick() }
+ .padding(vertical = 7.dp, horizontal = 12.dp),
contentAlignment = Alignment.Center,
) {🤖 Prompt for AI Agents
In
@app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt
around lines 57 - 72, Replace the instance of the parameter `modifier` used on
the inner Box with `Modifier` (capital M) so the Box uses its own internal chain
(e.g., Modifier.clip(RoundedCornerShape(8.dp)).clickable { onMoveClick()
}.background(...).padding(...).then(modifier)) — this prevents the external
`modifier` from being applied twice; also reorder so
`clip(RoundedCornerShape(8.dp))` comes before `clickable` to ensure the ripple
is clipped; reference Box, modifier (param), Modifier, clip, RoundedCornerShape,
clickable, onMoveClick, and then(modifier).
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (1)
34-42:items()사용 시 더 관용적인 패턴을 권장합니다.현재
items(ottList.size)+ 인덱스 기반 접근 방식 대신items(ottList)또는itemsIndexed()를 사용하면 더 간결하고 안전합니다. 특히 키를 지정하면 리컴포지션 성능도 개선됩니다.♻️ 권장 수정 사항
- items(ottList.size) { + items( + items = ottList, + key = { it.name } + ) { ottType -> OttShortCutListItem( - ottType = ottList[it], + ottType = ottType, onMoveClick = { - onMoveClick(ottList[it]) + onMoveClick(ottType) onDismiss() }, ) }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/MenuBottomSheet.ktapp/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt
⏰ 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/core/designsystem/component/bottomsheet/MenuBottomSheet.kt (1)
52-55: LGTM!클릭 액션 실행 후 바텀시트를 닫는 로직이 올바르게 추가되었습니다. 실행 순서도 적절합니다 (먼저 액션 실행 → 그 다음 dismiss).
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (1)
17-45: 전체 컴포넌트 구조가 잘 구성되어 있습니다.
FlintBasicBottomSheet를 기반으로 한 구현이MenuBottomSheet와 일관된 패턴을 따르고 있으며, dismiss 처리 로직도 적절합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (3)
41-45: 접근성:contentDescription제공 고려이미지의
contentDescription이null로 설정되어 있습니다. 스크린 리더 사용자를 위해ottType.ottName을contentDescription으로 제공하는 것이 좋습니다.♿ 접근성 개선 제안
Image( painter = painterResource(ottType.iconRes), - contentDescription = null, + contentDescription = ottType.ottName, modifier = Modifier.size(44.dp), )
57-72: 접근성 및 일관성 개선 필요두 가지 이슈가 있습니다:
Typography 참조 불일치: Line 51에서는
FlintTheme.typography.body1Sb16을 사용하지만, line 69에서는FlintTypography.body2M14를 직접 참조합니다. 일관성을 위해FlintTheme.typography를 사용하세요.버튼 접근성:
clickablemodifier만 사용하면 스크린 리더가 이 요소를 버튼으로 인식하지 못합니다.semantics또는 Material3의TextButton사용을 권장합니다.♻️ Typography 일관성 수정
Box( modifier = Modifier .clip(RoundedCornerShape(8.dp)) .background(FlintTheme.colors.primary400) .clickable { onMoveClick() }.padding(vertical = 7.dp, horizontal = 12.dp), contentAlignment = Alignment.Center, ) { Text( text = "바로 보러가기", - style = FlintTypography.body2M14, + style = FlintTheme.typography.body2M14, color = FlintTheme.colors.white, ) }
68-68: 하드코딩된 문자열을 string resource로 추출 권장"바로 보러가기" 문자열이 하드코딩되어 있습니다. 다국어 지원(i18n)을 위해
strings.xml로 추출하는 것이 좋습니다.🌐 String resource 사용 예시
Text( - text = "바로 보러가기", + text = stringResource(R.string.ott_shortcut_go_watch), style = FlintTypography.body2M14, color = FlintTheme.colors.white, )
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt
🧰 Additional context used
🧬 Code graph analysis (1)
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
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/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
76-107: LGTM!Preview가 다양한 OttType 변형을 포함하여 디자인 타임 검증에 유용합니다.
FlintTheme으로 올바르게 래핑되어 있습니다.
| listOf( | ||
| OttType.Netflix, | ||
| OttType.Wave, | ||
| OttType.Tving, | ||
| OttType.Disney, | ||
| OttType.Coupang, | ||
| OttType.Watcha, | ||
| ) |
|
|
||
| @Composable | ||
| fun OttShortCutListItem( | ||
| modifier: Modifier = Modifier, |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (1)
30-43: LazyColumn items 사용 패턴 개선을 권장합니다.
items(ottList.size)와 인덱스 접근 방식 대신items(list, key)를 사용하면 가독성과 리컴포지션 성능이 향상됩니다.♻️ 개선 제안
LazyColumn( modifier = modifier.padding(top = 24.dp, bottom = 32.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { - items(ottList.size) { + items( + items = ottList, + key = { it.name } + ) { ottType -> OttShortCutListItem( - ottType = ottList[it], + ottType = ottType, onMoveClick = { - onMoveClick(ottList[it]) + onMoveClick(ottType) onDismiss() }, ) } }app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (2)
41-45: 접근성을 위해 contentDescription 추가를 권장합니다.스크린 리더 사용자를 위해 OTT 아이콘에 대한 설명을 제공하면 좋습니다.
♻️ 개선 제안
Image( painter = painterResource(ottType.iconRes), - contentDescription = null, + contentDescription = ottType.ottName, modifier = Modifier.size(44.dp), )
67-71: Typography 접근 방식의 일관성을 확인하세요.Line 51에서는
FlintTheme.typography.body1Sb16을 사용하지만, 여기서는FlintTypography.body2M14를 직접 참조합니다. 일관성을 위해FlintTheme.typography를 통해 접근하는 것이 좋습니다.♻️ 개선 제안
Text( text = "바로 보러가기", - style = FlintTypography.body2M14, + style = FlintTheme.typography.body2M14, color = FlintTheme.colors.white, )
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.ktapp/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt
🧰 Additional context used
🧬 Code graph analysis (2)
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (3)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/FlintBasicBottomSheet.kt (1)
FlintBasicBottomSheet(32-82)app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (1)
OttShortCutListItem(27-74)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 (4)
app/src/main/java/com/flint/core/designsystem/component/bottomsheet/OttListBottomSheet.kt (2)
17-45: 전반적인 구현이 적절합니다.FlintBasicBottomSheet를 활용한 구조와 onMoveClick 후 onDismiss 호출 패턴이 MenuBottomSheet와 일관됩니다.
47-64: Preview 구현이 적절합니다.FlintTheme으로 감싸고 OttType.entries를 사용하여 모든 OTT 타입을 미리 볼 수 있도록 잘 구성되어 있습니다.
app/src/main/java/com/flint/core/designsystem/component/listItem/OttShortCutListItem.kt (2)
27-74: 컴포넌트 구현이 잘 되어 있습니다.Row 레이아웃 구성, Spacer를 활용한 정렬, clickable Box를 이용한 버튼 구현이 적절합니다. FlintTheme 색상을 일관되게 사용하고 있습니다.
76-107: Preview가 다양한 OTT 타입을 잘 보여줍니다.여러 OttType 케이스를 미리 볼 수 있어 디자인 검증에 유용합니다.
nahy-512
added
🧩 Component
2 participants
📮 관련 이슈
📌 작업 내용
📸 스크린샷
Summary by CodeRabbit
릴리스 노트
새로운 기능
버그 수정
✏️ Tip: You can customize this high-level summary in your review settings.