[Feat/#57] 챌린지 Todo 미션칩 컴포넌트 구현 #58
Conversation
- Todo 챌린지 컴포넌트 구현
- Todo 챌린지 칩 구현 - Todo 챌린지 칩 열로 구현
Walkthrough새로운 Jetpack Compose UI 컴포넌트 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
개요새로운 Jetpack Compose UI 컴포넌트 ChallengeMissionCardChip을 추가합니다. 이 컴포넌트는 아이콘과 텍스트가 있는 둥근 테두리 행을 렌더링하며, 선택 상태에 따라 색상과 아이콘이 변경됩니다. 변경 사항
추정 코드 리뷰 난이도🎯 2 (Simple) | ⏱️ ~12분 관련 PR
추천 리뷰어
🚥 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
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
nhyeonii
left a comment
nhyeonii
left a comment
There was a problem hiding this comment.
LGTM ~~ 🚀🚀🚀 깔끔하네요잉 고생햇슈
| @Composable | ||
| private fun ChallengeMissionCardChipsPreview() { | ||
| CherrishTheme { | ||
| val dummyMissions = listOf( |
There was a problem hiding this comment.
| val dummyMissions = listOf( | |
| val dummyMissions = persistentListOf( |
P1 : persistentListOf 사용해주셍용 ~~
There was a problem hiding this comment.
불변리스트라서 이거 사용해야하는군요 !! 넵 !! 수정하겠습니다 :)
- 성능 최적화를 위해 프리뷰 내에서 listOf -> 불변 컬렉션인 persistentListOf로 변경
sohee6989
left a comment
sohee6989
left a comment
There was a problem hiding this comment.
수고하셨습니다!
리뷰 한 번만 확인 부탁드립니다~~
| .background( | ||
| color = if (isSelected) CherrishTheme.colors.red100 else CherrishTheme.colors.gray0 | ||
| ) | ||
| .padding(top = 14.dp, start = 14.dp, bottom = 14.dp, end = 44.dp) |
There was a problem hiding this comment.
p2:
| .padding(top = 14.dp, start = 14.dp, bottom = 14.dp, end = 44.dp) | |
| .padding(vertical = 14.dp) | |
| .padding( start = 14.dp, end = 44.dp) |
이렇게 쓰는거 어떠세요??
가독성이 더 좋아보여서 제안 드립니다~!
There was a problem hiding this comment.
오 좋은것 같아요 ~ 수정하겠습니다 !
| ) | ||
| .padding(top = 14.dp, start = 14.dp, bottom = 14.dp, end = 44.dp) | ||
| .noRippleClickable(onClick = onClick), | ||
|
|
There was a problem hiding this comment.
p2: 공백 지워주세요~!!
55번째줄 공백도요!
| text = text, | ||
| style = CherrishTheme.typography.body1R14, | ||
| color = if (isSelected) CherrishTheme.colors.gray800 else CherrishTheme.colors.gray700, | ||
| modifier = Modifier.fillMaxWidth() |
There was a problem hiding this comment.
오오 그러네용 ~~~!! 지우겠습니다아 ~!
| modifier = Modifier.padding(all = 16.dp), | ||
| verticalArrangement = Arrangement.spacedBy(space = 8.dp) | ||
| ) { | ||
| itemsIndexed(items = dummyMissions) { index, text -> |
There was a problem hiding this comment.
p3: 나중에 화면에서 쓸때는 key값 활용해도 좋을 듯 합니다!
There was a problem hiding this comment.
넵 기억하겠습니다 ~! 조립하면서 uiState 만들 때 변경해도록 하겠습니다 :)
| .padding(top = 14.dp, start = 14.dp, bottom = 14.dp, end = 44.dp) | ||
| .noRippleClickable(onClick = onClick), | ||
|
|
||
| horizontalArrangement = Arrangement.spacedBy(space = 6.dp), |
There was a problem hiding this comment.
P199: 헉 !! 요소가 두 개뿐이라 modifier 패딩 값 따로 줘도 되지 않나 싶었는데 찾아보니 요소 개수와 관계없이 spacedBy로 레이아웃 간격을 조정해주는게 더 좋다네요 ?!?! 오호 배워갑니다옹
There was a problem hiding this comment.
좋습니당 !!!! 저도 이번에 알았서요 !!!!
- 불필요한 코드 삭제 - ktLint 실행
![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/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt`:
- Around line 38-53: The Row modifier chain currently places noRippleClickable
after the padding calls, which restricts the touch target to the inner content;
move noRippleClickable(onClick = onClick) to just after the background(...) call
and before any padding calls so the entire chip including its padded edges is
clickable; update the modifier chain around the Row (the modifier variable
passed into Row and the noRippleClickable usage) accordingly to ensure full-area
touch handling.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt
🧰 Additional context used
📓 Path-based instructions (1)
**/*.kt
⚙️ CodeRabbit configuration file
**/*.kt: - Jetpack Compose 구조, 상태 관리, recomposition 최적화에 집중
- ViewModel, UiState, 단방향 데이터 흐름 패턴 검토
- 불필요한 recomposition 가능성, remember/derivedStateOf 적절한 사용 확인
- 네이밍 컨벤션, 가독성, Google 권장 Android 아키텍처 준수 여부
Files:
app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt
🧠 Learnings (3)
📓 Common learnings
Learnt from: nhyeonii
Repo: TEAM-Cherrish/Cherrish-Android PR: 14
File: app/src/main/java/com/cherrish/android/core/designsystem/component/chip/CherrishSelction.kt:1-1
Timestamp: 2026-01-09T08:26:00.938Z
Learning: Cherrish Android 프로젝트에서는 Jetpack Compose 컴포저블 파일명과 해당 파일의 메인 컴포저블 함수명이 일치해야 합니다 (예: CherrishBasicChip.kt 파일에는 CherrishBasicChip 컴포저블 함수).
📚 Learning: 2026-01-09T08:26:00.938Z
Learnt from: nhyeonii
Repo: TEAM-Cherrish/Cherrish-Android PR: 14
File: app/src/main/java/com/cherrish/android/core/designsystem/component/chip/CherrishSelction.kt:1-1
Timestamp: 2026-01-09T08:26:00.938Z
Learning: Cherrish Android 프로젝트에서는 Jetpack Compose 컴포저블 파일명과 해당 파일의 메인 컴포저블 함수명이 일치해야 합니다 (예: CherrishBasicChip.kt 파일에는 CherrishBasicChip 컴포저블 함수).
Applied to files:
app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt
📚 Learning: 2026-01-12T19:49:27.085Z
Learnt from: nhyeonii
Repo: TEAM-Cherrish/Cherrish-Android PR: 41
File: app/src/main/java/com/cherrish/android/presentation/challenge/ChallengeScreen.kt:30-39
Timestamp: 2026-01-12T19:49:27.085Z
Learning: When a Jetpack Compose screen composable receives a Scaffold paddingValues: PaddingValues parameter (commonly from Scaffold), apply it to the root container's modifier first (e.g., .padding(paddingValues)) before applying any additional padding. This ensures content respects system bars (status/navigation) and avoids layout overlap. This pattern should be followed across presentation screens under app/src/main/java/com/cherrish/android/presentation/ to maintain consistent insets handling.
Applied to files:
app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt
🧬 Code graph analysis (1)
app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt (1)
app/src/main/java/com/cherrish/android/core/designsystem/theme/Theme.kt (1)
CherrishTheme(38-61)
⏰ 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 (3)
app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt (3)
1-30: LGTM!패키지 선언과 import 구성이 적절합니다.
persistentListOf사용을 위한 불변 컬렉션 라이브러리 import와 필요한 Compose 의존성들이 잘 정리되어 있습니다.
57-74: LGTM!Icon과 Text 컴포저블이
isSelected상태에 따라 적절히 스타일링됩니다.contentDescription = null은 데코레이티브 아이콘에 적합하며,CherrishTheme의 typography와 colors를 일관되게 사용하고 있습니다.
77-118: LGTM!프리뷰 구현이 적절합니다.
persistentListOf를 사용하여 불변 컬렉션을 적용했고,CherrishTheme으로 감싸 실제 테마 환경에서 테스트됩니다.selectedIndex의Int?타입 사용으로 미선택 상태(null)도 표현 가능합니다.Based on learnings, 파일명(
ChallengeMissionCardChip.kt)과 메인 컴포저블 함수명(ChallengeMissionCardChip)이 일치하여 프로젝트 컨벤션을 준수합니다.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| Row( | ||
| modifier = modifier | ||
| .fillMaxWidth() | ||
| .clip(shape = RoundedCornerShape(size = 10.dp)) | ||
| .border( | ||
| width = 1.dp, | ||
| color = | ||
| if (isSelected) CherrishTheme.colors.red500 else CherrishTheme.colors.gray500, | ||
| shape = RoundedCornerShape(size = 10.dp) | ||
| ) | ||
| .background( | ||
| color = if (isSelected) CherrishTheme.colors.red100 else CherrishTheme.colors.gray0 | ||
| ) | ||
| .padding(vertical = 14.dp) | ||
| .padding(start = 14.dp, end = 44.dp) | ||
| .noRippleClickable(onClick = onClick), |
There was a problem hiding this comment.
Modifier 체인에서 noRippleClickable 위치 조정 필요
현재 noRippleClickable이 padding 뒤에 위치하여 클릭 가능 영역이 패딩을 제외한 콘텐츠 영역으로 제한됩니다. 사용자가 칩의 가장자리(패딩 영역)를 터치하면 클릭이 동작하지 않아 UX가 저하될 수 있습니다.
noRippleClickable을 background 바로 뒤, padding 앞으로 이동하면 전체 칩 영역이 클릭 가능해집니다.
🔧 권장 수정 사항
modifier = modifier
.fillMaxWidth()
.clip(shape = RoundedCornerShape(size = 10.dp))
.border(
width = 1.dp,
color =
if (isSelected) CherrishTheme.colors.red500 else CherrishTheme.colors.gray500,
shape = RoundedCornerShape(size = 10.dp)
)
.background(
color = if (isSelected) CherrishTheme.colors.red100 else CherrishTheme.colors.gray0
)
+ .noRippleClickable(onClick = onClick)
.padding(vertical = 14.dp)
- .padding(start = 14.dp, end = 44.dp)
- .noRippleClickable(onClick = onClick),
+ .padding(start = 14.dp, end = 44.dp),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Row( | |
| modifier = modifier | |
| .fillMaxWidth() | |
| .clip(shape = RoundedCornerShape(size = 10.dp)) | |
| .border( | |
| width = 1.dp, | |
| color = | |
| if (isSelected) CherrishTheme.colors.red500 else CherrishTheme.colors.gray500, | |
| shape = RoundedCornerShape(size = 10.dp) | |
| ) | |
| .background( | |
| color = if (isSelected) CherrishTheme.colors.red100 else CherrishTheme.colors.gray0 | |
| ) | |
| .padding(vertical = 14.dp) | |
| .padding(start = 14.dp, end = 44.dp) | |
| .noRippleClickable(onClick = onClick), | |
| Row( | |
| modifier = modifier | |
| .fillMaxWidth() | |
| .clip(shape = RoundedCornerShape(size = 10.dp)) | |
| .border( | |
| width = 1.dp, | |
| color = | |
| if (isSelected) CherrishTheme.colors.red500 else CherrishTheme.colors.gray500, | |
| shape = RoundedCornerShape(size = 10.dp) | |
| ) | |
| .background( | |
| color = if (isSelected) CherrishTheme.colors.red100 else CherrishTheme.colors.gray0 | |
| ) | |
| .noRippleClickable(onClick = onClick) | |
| .padding(vertical = 14.dp) | |
| .padding(start = 14.dp, end = 44.dp), |
🤖 Prompt for AI Agents
In
`@app/src/main/java/com/cherrish/android/presentation/challenge/component/ChallengeMissionCardChip.kt`
around lines 38 - 53, The Row modifier chain currently places noRippleClickable
after the padding calls, which restricts the touch target to the inner content;
move noRippleClickable(onClick = onClick) to just after the background(...) call
and before any padding calls so the entire chip including its padded edges is
clickable; update the modifier chain around the Row (the modifier variable
passed into Row and the noRippleClickable usage) accordingly to ensure full-area
touch handling.
4 participants
Related issue 🛠
Work Description ✏️
Screenshot 📸
미션 칩 프리뷰
미션 칩s 프리뷰
미션칩 활성화
Uncompleted Tasks 😅
N/A
To Reviewers 📢
최대한 재사용성이 높을 수 있게 구현해보려고 노력했습니다 ! 파라미터 등등 확인해주시면 감사하겠습니당 ~~!!
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.