CheckBox 컴포넌트 추가 (#4)

* feat : checkbox with icon * feat : icon color * chore : 줄바꿈 * chore : delete color * chore : add padding * chore : delete icon * chore : fix icon size * feat : make CheckCircleSelected * feat : 불필요한 코드 삭제 * feat : 불필요한 코드 삭제 * feat : make CheckCircleUnselected * feat : iconColor 구현 * feat : text가 empty일 때의 간격 수정 * feat : 버튼 아이콘 위치 수정 * feat : add CheckBoxPreview * feat : delete ic_checkcircle_unselected.xml * feat : icon 수정 * chore : move CheckBox file * feat : add surface * feat : add svg icons * chore : isDisabled -> enabled * feat : add icon color * chore : change checkbox icon * chore : change disabled text color * chore : add preview * chore : 주석 추가 * add : checkbox preview --------- Co-authored-by: cometj03 <[email protected]>
yourssu · Aug 18, 2024 · 3c35de9 · 3c35de9
1 parent 4f60802
commit 3c35de9
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 12 deletions.
diff --git a/.idea/other.xml b/.idea/other.xml
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/CheckBoxPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/CheckBoxPreview.kt
@@ -0,0 +1,109 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import com.yourssu.handy.compose.CheckBox
+import com.yourssu.handy.compose.CheckBoxSize
+import com.yourssu.handy.compose.HandyTheme
+
+@Preview(showBackground = true)
+@Composable
+private fun CheckBoxPreview() {
+    HandyTheme {
+        Column {
+            Row {
+                Column {
+                    CheckBox(
+                        checked = true,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Small,
+                        text = "selected"
+                    )
+                    CheckBox(
+                        checked = true,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Medium,
+                        text = "selected"
+                    )
+                    CheckBox(
+                        checked = true,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Large,
+                        text = "selected"
+                    )
+                }
+                Column {
+                    CheckBox(
+                        checked = false,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Small,
+                        text = "selected"
+                    )
+                    CheckBox(
+                        checked = false,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Medium,
+                        text = "selected"
+                    )
+                    CheckBox(
+                        checked = false,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Large,
+                        text = "selected"
+                    )
+                }
+            }
+            Row {
+                Column {
+                    CheckBox(
+                        checked = true,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Small,
+                        text = "selected",
+                        contentColor = Color.Red
+                    )
+                    CheckBox(
+                        checked = true,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Medium,
+                        text = "selected",
+                        contentColor = Color.Red
+                    )
+                    CheckBox(
+                        checked = true,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Large,
+                        text = "selected",
+                        contentColor = Color.Red
+                    )
+                }
+                Column {
+                    CheckBox(
+                        checked = false,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Small,
+                        text = "selected",
+                        contentColor = Color.Red
+                    )
+                    CheckBox(
+                        checked = false,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Medium,
+                        text = "selected",
+                        contentColor = Color.Red
+                    )
+                    CheckBox(
+                        checked = false,
+                        onCheckedChange = {},
+                        sizeType = CheckBoxSize.Large,
+                        text = "selected",
+                        contentColor = Color.Red
+                    )
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/MainActivity.kt b/app/src/main/kotlin/com/yourssu/handy/demo/MainActivity.kt
@@ -11,4 +11,4 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {}
     }
-}
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/CheckBox.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/CheckBox.kt
@@ -0,0 +1,85 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+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.unit.dp
+import com.yourssu.handy.compose.foundation.ColorGray300
+import com.yourssu.handy.compose.foundation.HandyTextStyle
+import com.yourssu.handy.compose.foundation.HandyTypography
+
+sealed class CheckBoxSize(
+    val typo: HandyTextStyle,
+    val iconSize: IconSize,
+) {
+    data object Small : CheckBoxSize(typo = HandyTypography.B5Rg12, iconSize = IconSize.XS)
+    data object Medium : CheckBoxSize(typo = HandyTypography.B3Rg14, iconSize = IconSize.S)
+    data object Large : CheckBoxSize(typo = HandyTypography.B1Rg16, iconSize = IconSize.M)
+}
+
+/**
+ * 선택, 비선택, 비활성화 상태를 나타낼 수 있는 [CheckBox]입니다.
+ *
+ * @param checked CheckBox의 선택 유무
+ * @param onCheckedChange CheckBox의 선택 상태가 변경될 때 호출되는 함수
+ * @param modifier CheckBox에 대한 선택적 Modifier
+ * @param sizeType CheckBox의 크기에 따른 텍스트의 타이포, 아이콘 사이즈 설정. 기본값은 Medium
+ * @param text CheckBox 옆에 표시되는 텍스트
+ * @param enabled CheckBox의 활성화 유무
+ * @param contentColor CheckBox의 아이콘 색상
+ */
+@Composable
+fun CheckBox(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    sizeType: CheckBoxSize = CheckBoxSize.Medium,
+    text: String = "",
+    enabled: Boolean = true,
+    contentColor: Color = HandyTheme.colors.checkBoxSelected
+) {
+    val icon = when {
+        checked -> R.drawable.ic_checkcircle_filled
+        !enabled -> R.drawable.ic_checkcircle_disabled
+        else -> R.drawable.ic_checkcircle_line
+    }
+
+    val iconColor = when {
+        checked -> contentColor
+        !enabled -> HandyTheme.colors.checkBoxDisabled
+        else -> HandyTheme.colors.lineBasicMedium
+    }
+
+    val iconSize = sizeType.iconSize
+    val typo = sizeType.typo
+
+    Surface(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        modifier = modifier,
+        enabled = enabled,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                painter = painterResource(id = icon),
+                tint = iconColor,
+                iconSize = iconSize,
+            )
+            if (text.isNotEmpty()) {
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = text,
+                    style = typo,
+                    color = if(enabled) Color.Unspecified else ColorGray300
+                )
+            }
+        }
+    }
+}
diff --git a/compose/src/main/res/drawable/ic_checkcircle_disabled.xml b/compose/src/main/res/drawable/ic_checkcircle_disabled.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,24C18.627,24 24,18.627 24,12C24,5.373 18.627,0 12,0C5.373,0 0,5.373 0,12C0,18.627 5.373,24 12,24ZM9.331,15.926C9.509,16.073 9.733,16.153 9.964,16.153C10.217,16.154 10.46,16.059 10.644,15.886L14.284,12.52L17.924,9.153C18.245,8.932 18.408,8.545 18.342,8.161C18.276,7.778 17.994,7.467 17.618,7.365C17.242,7.263 16.841,7.388 16.591,7.686L9.924,13.826L7.611,11.933C7.183,11.603 6.569,11.673 6.226,12.091C5.884,12.51 5.936,13.125 6.344,13.48L9.331,15.926Z"
+      android:fillColor="#E3E4E8"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/compose/src/main/res/drawable/ic_checkcircle_filled.xml b/compose/src/main/res/drawable/ic_checkcircle_filled.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,24C18.627,24 24,18.627 24,12C24,5.373 18.627,0 12,0C5.373,0 0,5.373 0,12C0,18.627 5.373,24 12,24ZM9.331,15.926C9.509,16.073 9.733,16.153 9.964,16.153C10.217,16.154 10.46,16.059 10.644,15.886L14.284,12.52L17.924,9.153C18.245,8.932 18.408,8.545 18.342,8.161C18.276,7.778 17.994,7.467 17.618,7.365C17.242,7.263 16.841,7.388 16.591,7.686L9.924,13.826L7.611,11.933C7.183,11.603 6.569,11.673 6.226,12.091C5.884,12.51 5.936,13.125 6.344,13.48L9.331,15.926Z"
+      android:fillColor="#6B5CFF"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/compose/src/main/res/drawable/ic_checkcircle_line.xml b/compose/src/main/res/drawable/ic_checkcircle_line.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M12,0.5L12,0.5A11.5,11.5 0,0 1,23.5 12L23.5,12A11.5,11.5 0,0 1,12 23.5L12,23.5A11.5,11.5 0,0 1,0.5 12L0.5,12A11.5,11.5 0,0 1,12 0.5z"
+      android:fillColor="#00000000"
+      android:strokeColor="#E3E4E8"/>
+  <path
+      android:pathData="M9.964,16.156C9.733,16.156 9.509,16.076 9.331,15.93L6.344,13.483C5.936,13.128 5.884,12.513 6.226,12.094C6.569,11.676 7.183,11.606 7.611,11.936L9.924,13.83L16.591,7.69C16.841,7.392 17.242,7.266 17.618,7.368C17.994,7.47 18.276,7.781 18.342,8.165C18.408,8.548 18.245,8.935 17.924,9.156L10.644,15.89C10.46,16.062 10.217,16.158 9.964,16.156Z"
+      android:fillColor="#E3E4E8"/>
+</vector>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,4 +11,4 @@ class MainActivity : ComponentActivity() { @@
             enableEdgeToEdge()
             setContent {}
         }
-    }
+    }