Skip to content

refactor: 리컴포지션 최적화를 위한 람다 기반 Modifier 적용 #230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
easyhooon merged 8 commits into from
Dec 18, 2025
Merged

refactor: 리컴포지션 최적화를 위한 람다 기반 Modifier 적용 #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8bd0329
[BOOK-473] refactor: 람다 기반 modifier 적용
easyhooon Dec 3, 2025
c0c35a5
[BOOK-473] chore: code style check success
easyhooon Dec 3, 2025
dbbb6c4
Merge branch 'develop' into BOOK-473-refactor/#229
easyhooon Dec 3, 2025
7eb465a
[BOOK-473] chore: compose stability check success
easyhooon Dec 3, 2025
4bd9d8e
[BOOK-473] refactor: 누락된 background -> drawBehind { drawRect() } 전환
easyhooon Dec 3, 2025
5abda29
[BOOK-473] chore: 고정 컬러값 및 if else 컬러 분기처리 다시 background Modifier로 원복
easyhooon Dec 9, 2025
41f3684
[BOOK-473] chore: code style check success
easyhooon Dec 9, 2025
f428b99
[BOOK-473] refactor: 중복된 cornerShape 변수로 추출
easyhooon Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions ...tem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/RecordProgressBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,14 @@ fun RecordProgressBar(
horizontalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing1),
) {
repeat(3) { index ->
val bgColor = if (index <= currentStep.ordinal) ReedTheme.colors.bgPrimary else ReedTheme.colors.bgDisabled

Box(
modifier = Modifier
.weight(1f)
.height(6.dp)
.clip(RoundedCornerShape(ReedTheme.radius.full))
.background(
color = if (index <= currentStep.ordinal) {
ReedTheme.colors.bgPrimary
} else {
ReedTheme.colors.bgDisabled
},
),
.background(bgColor),
)
}
}
Expand Down
7 changes: 3 additions & 4 deletions ...c/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
Expand All @@ -36,10 +37,8 @@ fun CircleCheckBox(
Box(
modifier = modifier
.size(24.dp)
.background(
color = bgColor,
shape = CircleShape,
)
.clip(CircleShape)
.background(bgColor)
.border(1.dp, borderColor, CircleShape)
.noRippleClickable { onCheckedChange(!checked) }
.padding(2.dp),
Expand Down
7 changes: 3 additions & 4 deletions ...c/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
Expand All @@ -36,10 +37,8 @@ fun SquareCheckBox(
Box(
modifier = modifier
.size(24.dp)
.background(
color = bgColor,
shape = RoundedCornerShape(ReedTheme.radius.xs),
)
.clip(RoundedCornerShape(ReedTheme.radius.xs))
.background(bgColor)
.border(1.dp, borderColor, RoundedCornerShape(ReedTheme.radius.xs))
.noRippleClickable { onCheckedChange(!checked) }
.padding(2.dp),
Expand Down
4 changes: 3 additions & 1 deletion .../kotlin/com/ninecraft/booket/core/designsystem/component/textfield/ReedRecordTextField.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
Expand Down Expand Up @@ -80,7 +81,8 @@ fun ReedRecordTextField(
decorator = { innerTextField ->
Row(
modifier = modifier
.background(color = backgroundColor, shape = cornerShape)
.clip(cornerShape)
.background(backgroundColor)
.border(
border = if (isError) errorBorderStroke else borderStroke,
shape = cornerShape,
Expand Down
4 changes: 3 additions & 1 deletion .../kotlin/com/ninecraft/booket/core/designsystem/component/textfield/ReedSearchTextField.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
Expand Down Expand Up @@ -77,7 +78,8 @@ fun ReedTextField(
decorator = { innerTextField ->
Row(
modifier = modifier
.background(color = backgroundColor, shape = cornerShape)
.clip(cornerShape)
.background(backgroundColor)
.then(
if (borderStroke != null) {
Modifier.border(borderStroke, shape = cornerShape)
Expand Down
7 changes: 3 additions & 4 deletions core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/InfinityLazyColumn.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
Expand Down Expand Up @@ -139,10 +140,8 @@ private fun InfinityLazyColumnPreview() {
modifier = Modifier
.width(68.dp)
.height(100.dp)
.background(
color = ReedTheme.colors.contentTertiary,
shape = RoundedCornerShape(ReedTheme.radius.sm),
),
.clip(RoundedCornerShape(ReedTheme.radius.sm))
.background(color = ReedTheme.colors.contentTertiary),
)
Spacer(Modifier.width(ReedTheme.spacing.spacing4))
Column {
Expand Down
9 changes: 3 additions & 6 deletions core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedDialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.window.Dialog
Expand Down Expand Up @@ -45,12 +46,8 @@ fun ReedDialog(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = ReedTheme.spacing.spacing5)
.background(
color = ReedTheme.colors.basePrimary,
shape = RoundedCornerShape(
ReedTheme.radius.lg,
),
)
.clip(RoundedCornerShape(ReedTheme.radius.lg))
.background(color = ReedTheme.colors.basePrimary)
.padding(
start = ReedTheme.spacing.spacing5,
top = ReedTheme.spacing.spacing8,
Expand Down
4 changes: 3 additions & 1 deletion core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,13 @@ fun ReedTopAppBar(
endIconDescription: String = "",
endIconOnClick: () -> Unit = {},
) {
val bgColor = if (isDark) Neutral950 else White

Row(
modifier = modifier
.fillMaxWidth()
.height(60.dp)
.background(color = if (isDark) Neutral950 else White)
.background(bgColor)
.padding(horizontal = ReedTheme.spacing.spacing2),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically,
Expand Down
4 changes: 3 additions & 1 deletion ...c/main/kotlin/com/ninecraft/booket/feature/detail/book/component/BookUpdateBottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,13 @@ fun RowScope.BookStatusItem(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
val bgColor = if (selected) ReedTheme.colors.bgTertiary else ReedTheme.colors.bgSecondary

Box(
modifier = modifier
.weight(1f)
.clip(RoundedCornerShape(ReedTheme.radius.sm))
.background(if (selected) ReedTheme.colors.bgTertiary else ReedTheme.colors.bgSecondary)
.background(bgColor)
.selectable(
selected = selected,
indication = null,
Expand Down
7 changes: 3 additions & 4 deletions .../detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/component/QuoteItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.style.TextAlign
import com.ninecraft.booket.core.designsystem.ComponentPreview
Expand All @@ -23,10 +24,8 @@ internal fun QuoteItem(
Box(
modifier = modifier
.fillMaxWidth()
.background(
color = ReedTheme.colors.baseSecondary,
shape = RoundedCornerShape(ReedTheme.radius.md),
)
.clip(RoundedCornerShape(ReedTheme.radius.md))
.background(color = ReedTheme.colors.baseSecondary)
.padding(
horizontal = ReedTheme.spacing.spacing5,
vertical = ReedTheme.spacing.spacing4,
Expand Down
6 changes: 2 additions & 4 deletions ...detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/component/ReviewItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,8 @@ internal fun ReviewItem(
Box(
modifier = modifier
.fillMaxWidth()
.background(
color = ReedTheme.colors.baseSecondary,
shape = RoundedCornerShape(ReedTheme.radius.md),
)
.clip(RoundedCornerShape(ReedTheme.radius.md))
.background(color = ReedTheme.colors.baseSecondary)
.padding(
horizontal = ReedTheme.spacing.spacing4,
vertical = ReedTheme.spacing.spacing4,
Expand Down
7 changes: 2 additions & 5 deletions feature/edit/src/main/kotlin/com/ninecraft/booket/feature/edit/emotion/EmotionEditUi.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,8 @@ private fun EmotionItem(
Box(
modifier = modifier
.height(214.dp)
.background(
color = ReedTheme.colors.bgTertiary,
shape = RoundedCornerShape(ReedTheme.radius.md),
)
.clip(RoundedCornerShape(ReedTheme.radius.md))
.background(color = ReedTheme.colors.bgTertiary)
.then(
if (isSelected) Modifier.border(
width = 2.dp,
Expand All @@ -150,7 +148,6 @@ private fun EmotionItem(
)
else Modifier,
)
.clip(RoundedCornerShape(ReedTheme.radius.md))
.clickableSingle {
onClick()
},
Expand Down
2 changes: 1 addition & 1 deletion feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ internal fun HomeUi(
Column(
modifier = Modifier
.fillMaxSize()
.background(HomeBg)
.background(color = HomeBg)
.padding(innerPadding),
) {
HomeHeader(
Expand Down
18 changes: 5 additions & 13 deletions feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/BookCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,8 @@ fun BookCard(
ambientColor = Color(0xFFBCC4BE).copy(alpha = 0.2f),
spotColor = Color(0xFFBCC4BE).copy(alpha = 0.2f),
)
.background(
color = ReedTheme.colors.basePrimary,
shape = RoundedCornerShape(ReedTheme.radius.sm),
)
.clip(shape = RoundedCornerShape(ReedTheme.radius.sm))
.background(color = ReedTheme.colors.basePrimary)
.border(
width = 1.dp,
color = ReedTheme.colors.borderSecondary,
Expand Down Expand Up @@ -148,11 +145,8 @@ fun BookCard(
) {
Row(
modifier = Modifier
.background(
color = ReedTheme.colors.baseSecondary,
shape = RoundedCornerShape(ReedTheme.radius.sm),
)
.clip(shape = RoundedCornerShape(ReedTheme.radius.sm))
.clip(RoundedCornerShape(ReedTheme.radius.sm))
.background(color = ReedTheme.colors.baseSecondary)
.clickableSingle {
onBookDetailClick()
}
Expand Down Expand Up @@ -219,10 +213,8 @@ fun EmptyBookCard(
ambientColor = Color(0xFFBCC4BE).copy(alpha = 0.2f),
spotColor = Color(0xFFBCC4BE).copy(alpha = 0.2f),
)
.background(
color = ReedTheme.colors.basePrimary,
shape = RoundedCornerShape(ReedTheme.radius.sm),
)
.clip(RoundedCornerShape(ReedTheme.radius.sm))
.background(color = ReedTheme.colors.basePrimary)
.border(
width = ReedTheme.border.border1,
color = ReedTheme.colors.borderPrimary,
Expand Down
2 changes: 1 addition & 1 deletion feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeHeader.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ fun HomeHeader(
Row(
modifier = modifier
.fillMaxWidth()
.background(HomeBg)
.background(color = HomeBg)
.height(60.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Expand Down
5 changes: 1 addition & 4 deletions feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/FilterChip.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,8 @@ fun FilterChip(

Box(
modifier = modifier
.background(
color = chipColor,
shape = RoundedCornerShape(ReedTheme.radius.full),
)
.clip(shape = RoundedCornerShape(ReedTheme.radius.full))
.background(chipColor)
.noRippleClickable {
onChipClick(option)
}
Expand Down
2 changes: 1 addition & 1 deletion ...e/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/LibraryHeader.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ fun LibraryHeader(
modifier = modifier
.fillMaxWidth()
.height(60.dp)
.background(White),
.background(color = White),
verticalAlignment = Alignment.CenterVertically,
) {
Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing5))
Expand Down
17 changes: 10 additions & 7 deletions .../record/src/main/kotlin/com/ninecraft/booket/feature/record/component/CustomTooltipBox.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import com.ninecraft.booket.core.designsystem.ComponentPreview
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
Expand All @@ -28,10 +30,8 @@ internal fun CustomTooltipBox(
Box(
Modifier
.shadow(ReedTheme.radius.xs, RoundedCornerShape(ReedTheme.radius.xs), clip = false)
.background(
ReedTheme.colors.contentPrimary,
RoundedCornerShape(ReedTheme.radius.xs),
)
.clip(RoundedCornerShape(ReedTheme.radius.xs))
.background(ReedTheme.colors.contentPrimary)
.padding(
horizontal = ReedTheme.spacing.spacing3,
vertical = ReedTheme.spacing.spacing2,
Expand All @@ -47,9 +47,12 @@ internal fun CustomTooltipBox(
Modifier
.padding(start = 2.dp)
.size(ReedTheme.spacing.spacing3)
.offset(
x = (-10).dp,
)
.offset {
Copy link
Copy Markdown
Contributor

@seoyoon513 seoyoon513 Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

첨부해주신 레퍼런스 잘 봤습니다!
람다 내부 값 변경으로 수정하면 Layout 단계부터 재실행!(Composition 스킵 가능)

Copy link
Copy Markdown
Contributor Author

@easyhooon easyhooon Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://angrypodo.tistory.com/10

Modifier 교체 방식과 값 자체를 람다 함수를 통헤 지연 읽기 방법도 존재하는데, 이를 적용하기 위해선 수정해야할 곳들이 많아질것같아 이후에 보이면 그때그때 개선해보도록 하겠습다~

IntOffset(
x = (-10).dp.roundToPx(),
y = 0,
)
}
.graphicsLayer {
rotationZ = 45f
shadowElevation = 8.dp.toPx()
Expand Down
10 changes: 4 additions & 6 deletions ...ecord/src/main/kotlin/com/ninecraft/booket/feature/record/component/ImpressionGuideBox.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,18 @@ fun ImpressionGuideBox(
) {
val bgColor = if (isSelected) ReedTheme.colors.bgTertiary else White
val borderColor = if (isSelected) ReedTheme.colors.borderBrand else ReedTheme.colors.borderPrimary
val cornerShape = RoundedCornerShape(ReedTheme.radius.sm)

Box(
modifier = modifier
.fillMaxWidth()
.background(
color = bgColor,
shape = RoundedCornerShape(ReedTheme.radius.sm),
)
.clip(cornerShape)
.background(bgColor)
.border(
width = 1.dp,
color = borderColor,
shape = RoundedCornerShape(ReedTheme.radius.sm),
shape = cornerShape,
)
.clip(RoundedCornerShape(ReedTheme.radius.sm))
.noRippleClickable {
onClick()
}
Expand Down
Loading
Loading