[UI/#57] 색상 팔레트

core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt

@@ -0,0 +1,98 @@
+package com.terning.core.designsystem.component.item
+
+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.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.terning.core.R
+import com.terning.core.designsystem.theme.CalBlue1
+import com.terning.core.designsystem.theme.CalBlue2
+import com.terning.core.designsystem.theme.CalGreen1
+import com.terning.core.designsystem.theme.CalGreen2
+import com.terning.core.designsystem.theme.CalOrange1
+import com.terning.core.designsystem.theme.CalOrange2
+import com.terning.core.designsystem.theme.CalPink
+import com.terning.core.designsystem.theme.CalPurple
+import com.terning.core.designsystem.theme.CalRed
+import com.terning.core.designsystem.theme.CalYellow
+import com.terning.core.extension.noRippleClickable
+
+@Composable
+fun ColorPalette(
+    modifier: Modifier = Modifier,
+    onColorSelected:(Color) -> Unit = {}
+) {
+    val colorList = listOf(
+        CalRed,
+        CalOrange2,
+        CalGreen1,
+        CalBlue1,
+        CalPurple,
+        CalOrange1,
+        CalYellow,
+        CalGreen2,
+        CalBlue2,
+        CalPink
+    )
+
+    RadioButtonGroups(
+        modifier = modifier.size(251.dp, 84.dp),
+        options = colorList,
+        gridCellCount = 5,
+        onOptionSelected = { color ->
+            onColorSelected(color)
+        },
+        buttonComposable = {
+            color, isSelected, onOptionSelected ->
+            ColorButton(
+                color = color,
+                isSelected = isSelected,
+                onColorSelected = onOptionSelected)
+        },
+        verticalArrangementSpace = 6.dp,
+        horizontalArrangementSpace = 14.dp,
+    )
+}
+
+@Composable
+internal fun ColorButton(
+    modifier: Modifier = Modifier,
+    color: Color,
+    isSelected: Boolean,
+    onColorSelected: (Color) -> Unit
+) {
+    Box(modifier = modifier.size(39.dp)) {
+        Box(
+            modifier = Modifier
+                .size(39.dp)
+                .background(shape = CircleShape, color = color)
+                .noRippleClickable {
+                    onColorSelected(color)
+                },
+            contentAlignment = Alignment.Center
+        ) {
+            if (isSelected) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_color_check),
+                    contentDescription = ""
+                )
+            }
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun ColorPalettePreview() {
+    ColorPalette()
+}
+

core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt

@@ -0,0 +1,45 @@
+package com.terning.core.designsystem.component.item
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+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.Modifier
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun <T> RadioButtonGroups(
+    options: List<T>,
+    buttonComposable: @Composable (T, Boolean, (T) -> Unit) -> Unit,
+    gridCellCount: Int,
+    verticalArrangementSpace: Dp,
+    horizontalArrangementSpace: Dp,
+    modifier: Modifier = Modifier,
+    onOptionSelected: (T) -> Unit = {},
+
+) {
+    var selectedOption by remember { mutableStateOf(options[0]) }
+
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(gridCellCount),
+        verticalArrangement = Arrangement.spacedBy(verticalArrangementSpace),
+        horizontalArrangement = Arrangement.spacedBy(horizontalArrangementSpace),
+        modifier = modifier
+    ) {
+        items(options) { option ->
+            buttonComposable(
+                option,
+                (selectedOption == option),
+            ) {
+                selectedOption = option
+                onOptionSelected(option)
+            }
+        }
+    }
+}
+

core/src/main/java/com/terning/core/designsystem/theme/Color.kt

@@ -31,12 +31,12 @@ val ToastGrey = Color(0XFF666666)
 // Calendar Color
 val CalRed = Color(0xFFED4E54)
 val CalOrange1 = Color(0xFFEE7647)
-val CalOrange2 = Color(0xFF5397F3)
+val CalOrange2 = Color(0xFFF3A649)
 val CalYellow = Color(0xFFF5E660)
 val CalGreen1 = Color(0xFFC4E953)
 val CalGreen2 = Color(0xFF84D558)
 val CalBlue1 = Color(0xFF45D0CC)
-val CalBlue2 = Color(0xFF4119F2)
+val CalBlue2 = Color(0xFF4AA9F2)
 val CalPurple = Color(0xFF9B64E2)
 val CalPink = Color(0xFFF260AC)
 

core/src/main/res/drawable/ic_color_check.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="13dp"
+    android:viewportWidth="16"
+    android:viewportHeight="13">
+  <path
+      android:pathData="M14.698,0.197C14.448,0.247 14.202,0.381 14.049,0.608L7.196,10.743C6.994,11.041 6.732,11.046 6.475,10.793L2.671,7.047C2.282,6.665 1.63,6.667 1.239,7.052C0.849,7.437 0.846,8.079 1.235,8.461L5.039,12.208C6.184,13.334 7.94,13.155 8.845,11.821L15.734,1.711C16.04,1.258 15.913,0.627 15.457,0.326C15.228,0.176 14.949,0.147 14.698,0.197Z"
+      android:fillColor="#ffffff"/>
+</vector>