이모지 토글 버튼 추가

bezier/src/main/java/io/channel/bezier/compose/component/toggle_emoji_button/BezierToggleEmojiButton.kt

@@ -0,0 +1,123 @@
+package io.channel.bezier.compose.component.toggle_emoji_button
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.draw.clip
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.channel.bezier.BezierTheme
+import io.channel.bezier.compose.component.emoji.BezierEmoji
+import io.channel.bezier.compose.component.emoji.properties.BezierEmojiSize
+import io.channel.bezier.compose.component.toggle_emoji_button.properties.BezierToggleEmojiButtonVariant
+
+@Composable
+fun BezierToggleEmojiButton(
+        selected: Boolean,
+        name: String,
+        variant: BezierToggleEmojiButtonVariant,
+        modifier: Modifier = Modifier,
+        enabled: Boolean = true,
+        onClick: () -> Unit,
+) {
+    val colorSchemes = variant.getColorSchemes(selected)
+
+    val shape = RoundedCornerShape(12.dp)
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+
+    Box(
+            modifier = modifier
+                    .clip(shape)
+                    .border(
+                            width = variant.borderWidth,
+                            color = colorSchemes.borderColor().color,
+                            shape = shape,
+                    )
+                    .clickable(
+                            enabled = enabled,
+                            interactionSource = interactionSource,
+                            indication = null,
+                            onClick = onClick,
+                    )
+                    .background(
+                            if (isPressed) {
+                                colorSchemes.pressedBackgroundColor().color
+                            } else {
+                                colorSchemes.backgroundColor().color
+                            },
+                    )
+                    .padding(12.dp),
+    ) {
+        BezierEmoji(
+                name = name,
+                size = BezierEmojiSize.Size30,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BezierToggleEmojiButtonPreview() {
+    BezierTheme {
+        Column(
+                modifier = Modifier.padding(10.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            var checked1 by remember { mutableStateOf(false) }
+            var checked2 by remember { mutableStateOf(true) }
+            var checked3 by remember { mutableStateOf(false) }
+            var checked4 by remember { mutableStateOf(true) }
+
+            Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                BezierToggleEmojiButton(
+                        selected = checked1,
+                        name = "",
+                        variant = BezierToggleEmojiButtonVariant.Primary,
+                        onClick = { checked1 = !checked1 },
+                )
+
+                BezierToggleEmojiButton(
+                        selected = checked2,
+                        name = "",
+                        variant = BezierToggleEmojiButtonVariant.Primary,
+                        onClick = { checked2 = !checked2 },
+                )
+            }
+
+            Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+            ) {
+                BezierToggleEmojiButton(
+                        selected = checked3,
+                        name = "",
+                        variant = BezierToggleEmojiButtonVariant.Secondary,
+                        onClick = { checked3 = !checked3 },
+                )
+
+                BezierToggleEmojiButton(
+                        selected = checked4,
+                        name = "",
+                        variant = BezierToggleEmojiButtonVariant.Secondary,
+                        onClick = { checked4 = !checked4 },
+                )
+            }
+        }
+    }
+}

bezier/src/main/java/io/channel/bezier/compose/component/toggle_emoji_button/properties/BezierToggleEmojiButtonVariant.kt

@@ -0,0 +1,59 @@
+package io.channel.bezier.compose.component.toggle_emoji_button.properties
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.channel.bezier.BezierTheme
+import io.channel.bezier.compose.color_v2.BezierColor
+
+enum class BezierToggleEmojiButtonVariant(
+        internal val borderWidth: Dp,
+        internal val selectedBackgroundColor: @Composable () -> BezierColor,
+        internal val selectedBorderColor: @Composable () -> BezierColor,
+        internal val selectedPressedBackgroundColor: @Composable () -> BezierColor,
+        internal val unselectedBackgroundColor: @Composable () -> BezierColor,
+        internal val unselectedBorderColor: @Composable () -> BezierColor,
+        internal val unselectedPressedBackgroundColor: @Composable () -> BezierColor,
+) {
+    Primary(
+            borderWidth = 1.dp,
+            selectedBackgroundColor = { BezierTheme.colorSchemes.bgBlueLightest },
+            selectedBorderColor = { BezierTheme.colorSchemes.primaryBgNormal },
+            selectedPressedBackgroundColor = { BezierTheme.colorSchemes.bgBlueLighter },
+            unselectedBackgroundColor = { BezierTheme.colorSchemes.bgGreyLightest },
+            unselectedBorderColor = { BezierTheme.colorSchemes.bgBlackDark },
+            unselectedPressedBackgroundColor = { BezierTheme.colorSchemes.bgGreyLighter },
+    ),
+    Secondary(
+            borderWidth = 0.dp,
+            selectedBackgroundColor = { BezierTheme.colorSchemes.primaryBgLighter },
+            selectedBorderColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent },
+            selectedPressedBackgroundColor = { BezierTheme.colorSchemes.primaryBgLight },
+            unselectedBackgroundColor = { BezierTheme.colorSchemes.bgBlackLightest },
+            unselectedBorderColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent },
+            unselectedPressedBackgroundColor = { BezierTheme.colorSchemes.bgBlackLighter },
+    );
+
+    internal fun getColorSchemes(selected: Boolean): BezierToggleEmojiButtonColorSchemes {
+        return if (selected) {
+            BezierToggleEmojiButtonColorSchemes(
+                    backgroundColor = selectedBackgroundColor,
+                    pressedBackgroundColor = selectedPressedBackgroundColor,
+                    borderColor = selectedBorderColor,
+            )
+        } else {
+            BezierToggleEmojiButtonColorSchemes(
+                    backgroundColor = unselectedBackgroundColor,
+                    pressedBackgroundColor = unselectedPressedBackgroundColor,
+                    borderColor = unselectedBorderColor,
+            )
+        }
+    }
+}
+
+internal class BezierToggleEmojiButtonColorSchemes(
+        val backgroundColor: @Composable () -> BezierColor,
+        val pressedBackgroundColor: @Composable () -> BezierColor,
+        val borderColor: @Composable () -> BezierColor,
+)
+