[UI/#53] TerningBasicDialog

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

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)
 }
-