refactor: 리컴포지션 최적화를 위한 람다 기반 Modifier 적용 #230
Conversation
Walkthrough이 PR은 값 기반 Modifier를 람다 기반 Modifier로 대체하는 리팩토링을 수행합니다. 배경 렌더링을 drawBehind로 전환하고, Dp 오프셋을 IntOffset으로 바꾸며, Modifier.scale을 graphicsLayer로 대체하는 등 렌더링/변환 방식이 변경되었습니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt (1)
9-24: Add missingandroidx.compose.foundation.backgroundimport to fix compilation errorThe file uses
Modifier.background()at lines 132 and 222, but the required importandroidx.compose.foundation.backgroundis missing from the import section. This will cause a compilation error.Add the import after line 24:
import androidx.compose.foundation.verticalScroll +import androidx.compose.foundation.background import androidx.compose.material3.Textfeature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/component/ReedSwitch.kt (1)
34-34: 구식 lint suppression 주석 제거 권장코드가 이제 람다 기반
offset을 사용하고 있으므로,@SuppressLint("UseOfNonLambdaOffsetOverload")주석은 더 이상 필요하지 않습니다. 이 주석을 제거하는 것이 좋습니다.-@SuppressLint("UseOfNonLambdaOffsetOverload") @Composable internal fun ReedSwitch(
🧹 Nitpick comments (1)
feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/SettingsUi.kt (1)
20-21: SettingsUi 루트 배경 drawBehind 적용 및 중복 색상 처리
ReedScaffold의 modifier에서background(White)를drawBehind { drawRect(color = White) }로 바꾼 것은 리컴포지션 최적화 방향과 잘 맞고, 동작도 그대로 유지될 것으로 보입니다. 다만containerColor = White도 이미 배경을 그리므로, 장기적으로는 둘 중 하나만 남겨서 중복을 줄이는 것도 고려해 볼 수 있습니다(이 PR에서 꼭 정리할 필요까지는 없어 보입니다).Also applies to: 71-75
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt(2 hunks)feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt(2 hunks)feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeHeader.kt(2 hunks)feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/LibraryHeader.kt(2 hunks)feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginUi.kt(2 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/component/CustomTooltipBox.kt(2 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/OcrUi.kt(4 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/component/CameraFrame.kt(4 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt(2 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt(2 hunks)feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt(2 hunks)feature/screens/src/main/kotlin/com/ninecraft/booket/feature/screens/component/MainBottomBar.kt(2 hunks)feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/SettingsUi.kt(2 hunks)feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/component/ReedSwitch.kt(3 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-07-28T18:08:47.298Z
Learnt from: seoyoon513
Repo: YAPP-Github/Reed-Android PR: 72
File: feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/component/CameraFrame.kt:21-82
Timestamp: 2025-07-28T18:08:47.298Z
Learning: Jetpack Compose에서 scale() 변환은 시각적 변환만 적용하며 레이아웃 좌표계는 변경하지 않는다. 따라서 scale(scaleX = -1f, scaleY = -1f)로 반전된 아이콘에서 padding()은 원래 레이아웃 기준으로 동작하므로, 시각적으로 올바른 위치를 위해서는 변환 전 좌표계 기준으로 padding을 설정해야 한다.
Applied to files:
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.ktfeature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/component/CameraFrame.kt
📚 Learning: 2025-07-20T12:34:23.786Z
Learnt from: easyhooon
Repo: YAPP-Github/Reed-Android PR: 61
File: feature/webview/build.gradle.kts:17-21
Timestamp: 2025-07-20T12:34:23.786Z
Learning: Reed-Android 프로젝트에서는 `booket.android.feature` convention plugin을 사용하여 feature 모듈들의 공통 의존성을 관리한다. 이 plugin은 Circuit, Compose, 그리고 core 모듈들의 의존성을 자동으로 포함하므로, 각 feature 모듈의 build.gradle.kts에서는 특별한 의존성(예: libs.logger, libs.kakao.auth)만 별도로 선언하면 된다.
Applied to files:
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/LibraryHeader.kt
📚 Learning: 2025-08-28T12:25:54.058Z
Learnt from: easyhooon
Repo: YAPP-Github/Reed-Android PR: 174
File: feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/BookSearchPresenter.kt:128-133
Timestamp: 2025-08-28T12:25:54.058Z
Learning: In BookSearchPresenter.kt, when a guest user tries to register a book and is redirected to login, the bottom sheet (isBookRegisterBottomSheetVisible) and selection state (selectedBookIsbn, selectedBookStatus) are intentionally kept open/preserved so that when the user returns from login, they can continue from where they left off without losing context.
Applied to files:
feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginUi.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: Compose Stability Check
- GitHub Check: ci-build
🔇 Additional comments (14)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt (1)
18-19: HomeBanner 배경을 drawBehind로 변경한 부분 확인
background(HomeBg)를drawBehind { drawRect(HomeBg) }로 교체한 변경은 레이아웃·색상 동작을 그대로 유지하면서 람다 기반 Modifier로 전환하려는 PR 목적과 잘 맞습니다. 이 부분은 별다른 이슈 없이 그대로 가져가도 될 것 같습니다.Also applies to: 48-53
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt (1)
28-31: HomeUi 루트 Column 배경 drawBehind 적용 확인홈 화면 루트
Column에서background(HomeBg)를drawBehind { drawRect(color = HomeBg) }로 바꾼 부분은 색상·레이아웃 동작을 유지하면서 람다 기반 Modifier로 전환하려는 목적에 잘 부합합니다. Modifier 체인도fillMaxSize()이후에 배경을 그리고 그 위에padding(innerPadding)을 적용하는 기존 구조를 그대로 유지하고 있어, 이 변경 자체로 인한 부작용은 없을 것으로 보입니다.Also applies to: 100-105
feature/screens/src/main/kotlin/com/ninecraft/booket/feature/screens/component/MainBottomBar.kt (1)
23-24: MainBottomBar 컨테이너 배경 drawBehind 변경 검토하단 바 컨테이너의 배경을
background(White)에서drawBehind { drawRect(color = White) }로 교체한 부분은 기존 둥근 모서리·테두리 구조(dropShadow → clip → border)와 계층을 그대로 유지하고 있어 시각적 결과나 레이아웃에는 변화가 없을 것으로 보입니다. 람다 기반 Modifier 전환이라는 PR 목적에도 부합하는 깔끔한 변경입니다.Also applies to: 43-69
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/component/CustomTooltipBox.kt (1)
18-19: 툴팁 꼬리 offset의 IntOffset 람다 기반 변경
offset(x = (-10).dp, ...)형태에서offset { IntOffset(x = (-10).dp.roundToPx(), y = 0) }로 바꾼 부분은 Density 스코프 안에서roundToPx()를 호출하는 올바른 람다 기반 패턴으로 보입니다. 음수 x 오프셋도 기존과 동일한 픽셀 값으로 계산되므로, 시각적인 위치 변화 없이 리컴포지션 최적화 목적을 달성하는 안전한 변경이라고 판단됩니다.Also applies to: 48-56
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt (1)
28-29: QuoteStep 루트 Column 배경 drawBehind 변경루트
Column에서 White 배경을drawBehind { drawRect(color = White) }로 그리도록 변경한 것은 리컴포지션 최적화 방향과 잘 맞고,fillMaxSize()이후·imePadding()이전에 배경을 처리하고 있어 이전과 동일하게 전체 화면을 흰색으로 채울 수 있습니다. 이 변경으로 인한 기능·레이아웃 상의 문제점은 없어 보입니다.Also applies to: 75-80
feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/LibraryHeader.kt (1)
14-15: LibraryHeader Row 배경 drawBehind 변경헤더
Row에서 사용하던 White 배경을drawBehind { drawRect(color = White) }로 교체한 변경은 레이아웃·색상 동작을 그대로 유지하면서 람다 기반 Modifier로 전환하려는 PR 목표에 잘 부합합니다. 다른 로직 변경 없이 렌더링 경로만 바뀐 것이어서, 이 부분은 그대로 머지해도 무방해 보입니다.Also applies to: 30-35
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/component/CameraFrame.kt (1)
14-15: CameraFrame 모서리 마커의 scale → graphicsLayer 전환 검토세 군데 모서리 마커 아이콘에서
Modifier.scale대신graphicsLayer { scaleX / scaleY }를 사용하도록 바뀐 부분은,align → graphicsLayer → padding순서를 그대로 유지하고 있어 레이아웃 좌표계나 패딩 기준이 변하지 않고 시각적인 결과도 기존과 동일하게 유지될 것으로 보입니다. Based on learnings, Jetpack Compose에서 scale/graphicsLayer는 레이아웃에는 영향을 주지 않고 시각적 변환만 적용하므로, 이 수정 방향은 타당하고 안전한 변경이라고 판단됩니다.Also applies to: 50-85
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt (1)
23-23: 변경 사항 확인 완료람다 기반
drawBehind를 사용한 배경 렌더링 최적화가 올바르게 적용되었습니다.drawBehind는 드로잉 단계에서만 실행되므로 리컴포지션 최적화에 도움이 됩니다.Also applies to: 54-54
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeHeader.kt (1)
14-14: 변경 사항 확인 완료람다 기반
drawBehind를 사용한 배경 렌더링 최적화가 올바르게 적용되었습니다.Also applies to: 33-33
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt (1)
36-36: 변경 사항 확인 완료람다 기반
drawBehind를 사용한 배경 렌더링 최적화가 올바르게 적용되었습니다.Also applies to: 90-90
feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/ocr/OcrUi.kt (2)
43-43: 변경 사항 확인 완료람다 기반
drawBehind를 사용한 배경 렌더링 최적화가 올바르게 적용되었습니다.Also applies to: 195-195, 221-221
50-50: 변경 사항 확인 완료람다 기반
offset을 사용한 위치 계산 최적화가 올바르게 적용되었습니다.IntOffset을 사용하여 오프셋 계산을 레이아웃 단계로 지연시켜 리컴포지션을 줄입니다.Also applies to: 206-211
feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/component/ReedSwitch.kt (1)
62-67: 변경 사항 확인 완료람다 기반
offset을 사용한 위치 계산 최적화가 올바르게 적용되었습니다.feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginUi.kt (1)
17-17: 변경 사항 확인 완료람다 기반
drawBehind를 사용한 배경 렌더링 최적화가 올바르게 적용되었습니다.Also applies to: 58-58
| @@ -1,5 +1,6 @@ | |||
| package com.ninecraft.booket.feature.settings.component | |||
|
|
|||
| import android.R.attr.x | |||
There was a problem hiding this comment.
불필요한 import 제거 필요
android.R.attr.x import는 이 파일에서 사용되지 않으며, 의도하지 않게 추가된 것으로 보입니다. 이 import는 Android의 내부 속성 상수이며 offset 계산과는 무관합니다.
다음과 같이 해당 import를 제거하세요:
-import android.R.attr.x
import android.annotation.SuppressLint📝 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.
| import android.R.attr.x | |
| import android.annotation.SuppressLint |
🤖 Prompt for AI Agents
In
feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/component/ReedSwitch.kt
around line 3, remove the unused import "import android.R.attr.x" because it's
not referenced and was added unintentionally; simply delete that import line and
run a build or IDE sync to confirm no remaining references or unused-import
warnings.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt (1)
218-224: LGTM! 페이저 인디케이터 최적화 완료페이지 변경 시 리컴포지션을 최적화하기 위해
drawBehind를 적용한 것은 좋은 변경입니다. 기능적으로 동일하게 동작합니다.선택적 개선 제안: 의미적 명확성을 위해
drawCircle사용 고려현재
drawRect로 사각형을 그린 후CircleShape으로 클리핑하고 있습니다. 더 명확한 의도 표현을 위해drawCircle을 사용할 수 있습니다:Box( modifier = Modifier .size(12.dp) .padding(3.dp) .clip(CircleShape) - .drawBehind { drawRect(color) }, + .drawBehind { + drawCircle( + color = color, + radius = size.minDimension / 2f + ) + }, )이는 필수 사항은 아니며, 기존 변경사항도 충분히 올바르게 동작합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt(3 hunks)
⏰ 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: Compose Stability Check
- GitHub Check: ci-build
🔇 Additional comments (2)
feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt (2)
31-31: LGTM! 필요한 import 추가
drawBehind사용을 위해 필요한 import가 정상적으로 추가되었습니다.
104-104: LGTM! 리컴포지션 최적화 적용 완료단순 색상 배경을
drawBehind로 교체하여 layout 단계를 건너뛸 수 있게 최적화되었습니다. PR 목표에 부합하는 올바른 변경사항입니다.
shape가 속성의 경우 Modifier.clip으로 빼낼 수 있음 적용 후 이전과 UI가 같은지 확인 필요
|
흠.. drawBehind { drawRect() } 는 아무리 생각해도 .background Modifier에 비해 직관성이 떨어지는거 같네요. 따라서 애니메이션이 적용되지 않는 케이스의 경우 background -> drawBehind { drawRect() } 는 다시 background로 롤백하고, |
🔗 관련 이슈
📙 작업 설명
Modifier.background->drawBehind { drawRect() }으로 변경drawBehind { drawRect() }로 변경 완료 (ex. .background(White))Modifier.offset->.offset { IntOffset() }으로 변경Modifier.alpha(a).rotate(r).scale(s)->.graphicsLayers { alpha = a rotationZ = r scaleX = s scaleY = s }으로 변경graphicsLayers { scaleX = s scaleY = s}로 변경 완료🧪 테스트 내역 (선택)
📸 스크린샷 또는 시연 영상 (선택)
💬 추가 설명 or 리뷰 포인트 (선택)
background Modifier 사용 전체를 drawBehind { drawRect() } 로 변경해보려고 했으나 문제점이 있었습니다.
1. Theme.colors 를 사용하는 부분
2. background 내에 color 뿐만 아니라 shape로 설정하는 부분
-> 이부분은 shape를 Modifier.clip으로 빼내어 해결(변경 이후 UI가 같은지는 한번씩 확인 필요)
reference)
Compose 성능 끌어올리기 - Devfest Android in Korea 2024 강경완
https://www.linkedin.com/posts/blumock_boosting-compose-with-simple-tricks-during-activity-7398993998079696896-zRkK?utm_source=share&utm_medium=member_desktop&rcm=ACoAADeYy2YBzSJPCJqjzoaiEve7gxLPUaiMBqA
Summary by CodeRabbit
릴리스 노트
성능 개선
UI 개선
✏️ Tip: You can customize this high-level summary in your review settings.