[BOOK-473] refactor: 누락된 background -> drawBehind { drawRect() } 전환

shape가 속성의 경우 Modifier.clip으로 빼낼 수 있음

적용 후 이전과 UI가 같은지 확인 필요

Author: easyhooon

app/src/main/kotlin/com/ninecraft/booket/di/CircuitGraph.kt

@@ -1,7 +1,7 @@
 package com.ninecraft.booket.di
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.text.BasicText
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import com.slack.circuit.foundation.Circuit
@@ -43,7 +43,7 @@ interface CircuitGraph {
                       All uiFactories: ${circuit?.newBuilder()?.uiFactories}
                       """
                         .trimIndent(),
-                    modifier = modifier.background(Color.Red),
+                    modifier = modifier.drawBehind { drawRect(Color.Red) },
                     style = TextStyle(color = Color.Yellow),
                 )
             }

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/RecordProgressBar.kt

@@ -1,6 +1,5 @@
 package com.ninecraft.booket.core.designsystem.component
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -10,6 +9,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.unit.dp
 import com.ninecraft.booket.core.designsystem.RecordStep
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
@@ -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
-                        },
-                    ),
+                    .drawBehind { drawRect(bgColor) },
             )
         }
     }

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt

@@ -1,6 +1,5 @@
 package com.ninecraft.booket.core.designsystem.component.checkbox
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
@@ -14,6 +13,8 @@ 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.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.vectorResource
@@ -36,10 +37,8 @@ fun CircleCheckBox(
     Box(
         modifier = modifier
             .size(24.dp)
-            .background(
-                color = bgColor,
-                shape = CircleShape,
-            )
+            .clip(CircleShape)
+            .drawBehind { drawRect(bgColor) }
             .border(1.dp, borderColor, CircleShape)
             .noRippleClickable { onCheckedChange(!checked) }
             .padding(2.dp),

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt

@@ -1,6 +1,5 @@
 package com.ninecraft.booket.core.designsystem.component.checkbox
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
@@ -14,6 +13,8 @@ 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.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.vectorResource
@@ -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))
+            .drawBehind { drawRect(bgColor) }
             .border(1.dp, borderColor, RoundedCornerShape(ReedTheme.radius.xs))
             .noRippleClickable { onCheckedChange(!checked) }
             .padding(2.dp),

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/textfield/ReedRecordTextField.kt

@@ -2,7 +2,6 @@ package com.ninecraft.booket.core.designsystem.component.textfield
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
@@ -26,6 +25,8 @@ 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.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
@@ -80,7 +81,8 @@ fun ReedRecordTextField(
                 decorator = { innerTextField ->
                     Row(
                         modifier = modifier
-                            .background(color = backgroundColor, shape = cornerShape)
+                            .clip(cornerShape)
+                            .drawBehind { drawRect(backgroundColor) }
                             .border(
                                 border = if (isError) errorBorderStroke else borderStroke,
                                 shape = cornerShape,

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/textfield/ReedSearchTextField.kt

@@ -2,7 +2,6 @@ package com.ninecraft.booket.core.designsystem.component.textfield
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
@@ -25,6 +24,8 @@ 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.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
@@ -77,7 +78,8 @@ fun ReedTextField(
             decorator = { innerTextField ->
                 Row(
                     modifier = modifier
-                        .background(color = backgroundColor, shape = cornerShape)
+                        .clip(cornerShape)
+                        .drawBehind { drawRect(backgroundColor) }
                         .then(
                             if (borderStroke != null) {
                                 Modifier.border(borderStroke, shape = cornerShape)

core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/InfinityLazyColumn.kt

@@ -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
@@ -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 {

core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedDialog.kt

@@ -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
@@ -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,

core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedFullScreen.kt

@@ -1,6 +1,5 @@
 package com.ninecraft.booket.core.ui.component
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
@@ -10,6 +9,7 @@ import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalFocusManager
 import com.ninecraft.booket.core.designsystem.theme.White
@@ -31,7 +31,7 @@ fun ReedFullScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .background(backgroundColor)
+            .drawBehind { drawRect(backgroundColor) }
             .systemBarsPadding()
             .clickable(
                 indication = null,

core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedTopAppBar.kt

@@ -1,7 +1,6 @@
 package com.ninecraft.booket.core.ui.component
 
 import androidx.annotation.DrawableRes
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -15,6 +14,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.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
@@ -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)
+            .drawBehind { drawRect(bgColor) }
             .padding(horizontal = ReedTheme.spacing.spacing2),
         horizontalArrangement = Arrangement.Start,
         verticalAlignment = Alignment.CenterVertically,