PrezelCheckbox 구현

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelCheckbox.kt

@@ -0,0 +1,156 @@
+package com.team.prezel.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.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.dp
+import com.team.prezel.core.designsystem.R
+import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles
+import com.team.prezel.core.designsystem.icon.PrezelIcons
+import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.theme.PrezelTheme
+
+enum class CheckboxSize {
+    REGULAR,
+    LARGE,
+}
+
+@Composable
+fun PrezelCheckbox(
+    checked: Boolean,
+    modifier: Modifier = Modifier,
+    size: CheckboxSize = CheckboxSize.REGULAR,
+    onCheckedChange: (Boolean) -> Unit,
+) {
+    val checkboxSize = when (size) {
+        CheckboxSize.REGULAR -> 24.dp
+        CheckboxSize.LARGE -> 32.dp
+    }
+
+    val iconRes =
+        if (checked) {
+            PrezelIcons.CheckCircleFilled
+        } else {
+            PrezelIcons.CheckCircleOutlined
+        }
+
+    val iconColor =
+        if (checked) {
+            PrezelTheme.colors.interactiveRegular
+        } else {
+            PrezelTheme.colors.iconDisabled
+        }
+
+    Box(
+        modifier = modifier
+            .size(48.dp)
+            .toggleable(
+                value = checked,
+                interactionSource = null,
+                indication = null,
+                role = Role.Checkbox,
+                onValueChange = onCheckedChange,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            painter = painterResource(id = iconRes),
+            contentDescription = stringResource(R.string.core_designsystem_checkbox_desc),
+            modifier = Modifier.size(checkboxSize),
+            tint = iconColor,
+        )
+    }
+}
+
+@ThemePreview
+@Composable
+private fun PrezelRegularCheckboxPreview() {
+    PrezelTheme {
+        Column(
+            modifier = Modifier
+                .background(PrezelTheme.colors.bgRegular)
+                .padding(16.dp),
+        ) {
+            CheckboxRowPreview(title = "Regular Checkbox") {
+                var checkState by remember { mutableStateOf(true) }
+
+                PrezelCheckbox(
+                    size = CheckboxSize.REGULAR,
+                    checked = checkState,
+                    onCheckedChange = { checkState = it },
+                )
+
+                PrezelCheckbox(
+                    size = CheckboxSize.REGULAR,
+                    checked = !checkState,
+                    onCheckedChange = { checkState = it },
+                )
+            }
+        }
+    }
+}
+
+@ThemePreview
+@Composable
+private fun PrezelLargeCheckboxPreview() {
+    PrezelTheme {
+        Column(
+            modifier = Modifier
+                .background(PrezelTheme.colors.bgRegular)
+                .padding(16.dp),
+        ) {
+            CheckboxRowPreview(title = "Large Checkbox") {
+                var checkState by remember { mutableStateOf(true) }
+
+                PrezelCheckbox(
+                    size = CheckboxSize.LARGE,
+                    checked = checkState,
+                    onCheckedChange = { checkState = it },
+                )
+
+                PrezelCheckbox(
+                    size = CheckboxSize.LARGE,
+                    checked = !checkState,
+                    onCheckedChange = { checkState = it },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun CheckboxRowPreview(
+    title: String,
+    content: @Composable RowScope.() -> Unit,
+) {
+    Column(modifier = Modifier.padding(bottom = 16.dp)) {
+        Text(
+            text = title,
+            style = PrezelTextStyles.Caption2Regular.toTextStyle(),
+            color = PrezelTheme.colors.textLarge,
+            modifier = Modifier.padding(bottom = 4.dp),
+        )
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            content = content,
+        )
+    }
+}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/button/floating/PrezelFloatingMenuButton.kt

@@ -72,7 +72,14 @@ private fun PrezelMainFloatingButton(
     modifier: Modifier = Modifier,
 ) {
     val currentIconSource =
-        if (isExpanded) DrawableIcon(resId = PrezelIcons.Cancel, contentDescTextId = R.string.close_floating_btn_content_desc) else iconSource
+        if (isExpanded) {
+            DrawableIcon(
+                resId = PrezelIcons.Cancel,
+                contentDescTextId = R.string.core_designsystem_close_floating_btn_content_desc,
+            )
+        } else {
+            iconSource
+        }
 
     PrezelFloatingButton(
         iconSource = currentIconSource,

Prezel/core/designsystem/src/main/res/values/strings.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <string name="close_floating_btn_content_desc">플로팅 버튼 닫기</string>
+    <string name="core_designsystem_close_floating_btn_content_desc">플로팅 버튼 닫기</string>
+    <string name="core_designsystem_checkbox_desc">체크박스</string>
 </resources>