[PC-1623] 가치관 톡 작성 시 각 항목 입력 시 키패드에 화면에 보이도록 스크롤 기능 고도화 #202
Conversation
📝 WalkthroughWalkthroughA new Modifier extension Changes
Sequence DiagramsequenceDiagram
actor User
participant Focus as Focus System
participant Modifier as animateScrollToItemOnFocus
participant IME as IME Detector
participant List as LazyListState
User->>Focus: Focus item
Focus->>Modifier: onFocusChanged (isFocused=true)
Modifier->>IME: Check WindowInsets.ime
alt IME Visible
IME-->>Modifier: imeVisible = true
Modifier->>Modifier: Delay (~100ms)
Modifier->>List: scrollToItem(index, offset)
List-->>User: Scroll animation
else IME Hidden
IME-->>Modifier: imeVisible = false
Modifier-->>User: No scroll action
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
core/common-ui/src/main/java/com/puzzle/common/ui/Modifier.kt (1)
210-232: Consider addingindexto LaunchedEffect keys.The
indexparameter is not included in theLaunchedEffectkeys. If the index changes while the item is focused (e.g., due to list reordering), the scroll will target the stale index captured at effect launch time.Additionally, consider extracting the
200delay as a named constant for clarity.♻️ Suggested improvement
+private const val IME_ANIMATION_DELAY_MS = 200L + @OptIn(ExperimentalLayoutApi::class) fun Modifier.animateScrollToItemOnFocus( listState: LazyListState, index: Int, scrollOffsetDp: Dp = 20.dp ): Modifier = composed { val density = LocalDensity.current val imeBottom = WindowInsets.ime.asPaddingValues().calculateBottomPadding() var isFocused by remember { mutableStateOf(false) } - LaunchedEffect(imeBottom, isFocused) { + LaunchedEffect(imeBottom, isFocused, index) { if (isFocused && imeBottom > 0.dp) { - delay(200) + delay(IME_ANIMATION_DELAY_MS) listState.animateScrollToItem( index = index, scrollOffset = with(density) { -scrollOffsetDp.roundToPx() } ) } } this.onFocusChanged { isFocused = it.isFocused } }feature/profile/src/main/java/com/puzzle/profile/graph/register/page/ValueTalkPage.kt (1)
158-158: Remove unused variable.The
densityvariable is no longer used after replacinganimateScrollWhenFocuswithanimateScrollToItemOnFocus. This is dead code that can be removed.🧹 Suggested cleanup
- val density = LocalDensity.current - Column(modifier = modifier) {
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
core/common-ui/src/main/java/com/puzzle/common/ui/Modifier.ktfeature/profile/src/main/java/com/puzzle/profile/graph/register/page/ValueTalkPage.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). (1)
- GitHub Check: build
🔇 Additional comments (1)
feature/profile/src/main/java/com/puzzle/profile/graph/register/page/ValueTalkPage.kt (1)
125-135: LGTM! Integration looks correct.The
idx + 1calculation correctly accounts for the header item at LazyList index 0, ensuring the scroll targets the correct ValueTalkCard. The modifier usage and parameter passing are properly wired.Also applies to: 183-189
tgyuuAn
left a comment
tgyuuAn
left a comment
There was a problem hiding this comment.
해당 Modifier가 다른 디바이스에서도 온전히 동작하나요?
체크가 필요할 것 같아요.
추가적으로 해당 Modifier가 생겨나면 기존 Modifier는 제거해도 될까요 ?
| state = listState, | ||
| modifier = modifier, | ||
| contentPadding = PaddingValues(bottom = imeBottom) | ||
| contentPadding = PaddingValues(bottom = imeBottom + 40.dp) |
There was a problem hiding this comment.
키패드가 올라왔을 때, 마지막 입력 칸이 키보드에 너무 붙는 현상이 있어 적당하게 추가 했습니다.
| @OptIn(ExperimentalLayoutApi::class) | ||
| fun Modifier.animateScrollToItemOnFocus( | ||
| listState: LazyListState, | ||
| index: Int, | ||
| scrollOffsetDp: Dp = 20.dp | ||
| ): Modifier = composed { | ||
| val density = LocalDensity.current | ||
| val imeBottom = WindowInsets.ime.asPaddingValues().calculateBottomPadding() | ||
| var isFocused by remember { mutableStateOf(false) } | ||
|
|
||
| LaunchedEffect(imeBottom, isFocused) { | ||
| if (isFocused && imeBottom > 0.dp) { | ||
| delay(200) | ||
| listState.animateScrollToItem( | ||
| index = index, | ||
| scrollOffset = with(density) { -scrollOffsetDp.roundToPx() } | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| this.onFocusChanged { isFocused = it.isFocused } | ||
| } |
There was a problem hiding this comment.
이거 Composed 말고 Modfiier.Node()로 변경해주시는 게 좋을 것 같아요.
composed로 작성되면 상위 Composable에서 리컴포지션 일어나면 항상 Modifier가 재트리거 되거든요.
참고 : https://developer.android.com/develop/ui/compose/custom-modifiers?hl=ko
1. ⭐️ 변경된 내용
2. 🖼️ 스크린샷(선택)
3. 💡 알게된 부분
4. 📌 이 부분은 꼭 봐주세요!
Summary by CodeRabbit
Release Notes
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.