From 95deceba49e636c544cdc6e8559215fd0fe2165d Mon Sep 17 00:00:00 2001 From: arinming Date: Sat, 13 Jul 2024 01:41:04 +0900 Subject: [PATCH] =?UTF-8?q?[FEAT/#53]=20=EC=BB=AC=EB=9F=AC=20=ED=8C=94?= =?UTF-8?q?=EB=A0=88=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/dialog/ScrapDialogContent.kt | 27 +++++++++++--- .../component/item/ColorPalette.kt | 36 +++++++++++-------- 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/core/src/main/java/com/terning/core/designsystem/component/dialog/ScrapDialogContent.kt b/core/src/main/java/com/terning/core/designsystem/component/dialog/ScrapDialogContent.kt index b032b2d69..9e58eaab8 100644 --- a/core/src/main/java/com/terning/core/designsystem/component/dialog/ScrapDialogContent.kt +++ b/core/src/main/java/com/terning/core/designsystem/component/dialog/ScrapDialogContent.kt @@ -31,7 +31,10 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import com.terning.core.R import com.terning.core.designsystem.component.button.RoundButton +import com.terning.core.designsystem.component.item.ColorPalette +import com.terning.core.designsystem.theme.CalBlue2 import com.terning.core.designsystem.theme.CalGreen2 +import com.terning.core.designsystem.theme.CalRed import com.terning.core.designsystem.theme.Grey200 import com.terning.core.designsystem.theme.Grey300 import com.terning.core.designsystem.theme.Grey350 @@ -48,6 +51,7 @@ fun ScrapDialogContent( isScrapped: Boolean, ) { var isColorChange by remember { mutableStateOf(false) } + var selectedColor by remember { mutableStateOf(CalRed) } Box( modifier = Modifier @@ -63,11 +67,14 @@ fun ScrapDialogContent( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End ) { - IconButton(onClick = { onDismissRequest() }, modifier = Modifier.padding(6.dp)) { + IconButton( + onClick = { onDismissRequest() }, + modifier = Modifier.padding(6.dp) + ) { Icon( painter = painterResource(id = R.drawable.ic_dialog_x_32), contentDescription = null, - tint = Grey300 + tint = Grey300, ) } } @@ -134,7 +141,7 @@ fun ScrapDialogContent( Row( modifier = Modifier .background( - color = CalGreen2, + color = if (selectedColor != CalRed) CalBlue2 else CalGreen2, shape = RoundedCornerShape(14.dp) ) .noRippleClickable { @@ -174,7 +181,19 @@ fun ScrapDialogContent( ) ) if (isColorChange) { - Text(text = "컬러 팔레트") + Box( + modifier = Modifier + .fillMaxWidth() + .padding( + top = 12.dp, + bottom = 23.dp, + ), + contentAlignment = Alignment.Center + ) { + ColorPalette( + initialColor = CalRed, + onColorSelected = { selectedColor = it }) + } } else { Text( text = stringResource(id = R.string.intern_item_d_day), diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt b/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt index d263ad91d..663286fa1 100644 --- a/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt +++ b/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt @@ -4,8 +4,13 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.shape.CircleShape import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -27,8 +32,8 @@ import com.terning.core.extension.noRippleClickable @Composable fun ColorPalette( - modifier: Modifier = Modifier, - onColorSelected:(Color) -> Unit = {} + initialColor: Color, + onColorSelected: (Color) -> Unit = {}, ) { val colorList = listOf( CalRed, @@ -43,22 +48,24 @@ fun ColorPalette( CalPink ) + var selectedColor by remember { mutableStateOf(initialColor) } + RadioButtonGroups( - modifier = modifier.size(251.dp, 84.dp), options = colorList, gridCellCount = 5, onOptionSelected = { color -> + selectedColor = color onColorSelected(color) }, - buttonComposable = { - color, isSelected, onOptionSelected -> + buttonComposable = { color, isSelected, onOptionSelected -> ColorButton( color = color, - isSelected = isSelected, - onColorSelected = onOptionSelected) + isSelected = selectedColor == color, + onColorSelected = onOptionSelected + ) }, verticalArrangementSpace = 6.dp, - horizontalArrangementSpace = 14.dp, + horizontalArrangementSpace = 0.dp, ) } @@ -67,13 +74,16 @@ internal fun ColorButton( modifier: Modifier = Modifier, color: Color, isSelected: Boolean, - onColorSelected: (Color) -> Unit + onColorSelected: (Color) -> Unit, ) { - Box(modifier = modifier.size(39.dp)) { + Box(modifier = modifier.wrapContentSize()) { Box( modifier = Modifier .size(39.dp) - .background(shape = CircleShape, color = color) + .background( + shape = CircleShape, + color = color + ) .noRippleClickable { onColorSelected(color) }, @@ -89,10 +99,8 @@ internal fun ColorButton( } } - @Preview(showBackground = true) @Composable fun ColorPalettePreview() { - ColorPalette() + ColorPalette(initialColor = CalRed) } -