From 3c35de96000e4745a75f43d6546d1aece2a01683 Mon Sep 17 00:00:00 2001
From: LEE YOU BIN <128459613+leeeyubin@users.noreply.github.com>
Date: Sun, 18 Aug 2024 21:35:27 +0900
Subject: [PATCH] =?UTF-8?q?CheckBox=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20(#4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <harryjung1001@gmail.com>
---
 .idea/other.xml                               |  11 --
 .../com/yourssu/handy/demo/CheckBoxPreview.kt | 109 ++++++++++++++++++
 .../com/yourssu/handy/demo/MainActivity.kt    |   2 +-
 .../com/yourssu/handy/compose/CheckBox.kt     |  85 ++++++++++++++
 .../res/drawable/ic_checkcircle_disabled.xml  |  10 ++
 .../res/drawable/ic_checkcircle_filled.xml    |  10 ++
 .../main/res/drawable/ic_checkcircle_line.xml |  14 +++
 7 files changed, 229 insertions(+), 12 deletions(-)
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/CheckBoxPreview.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/CheckBox.kt
 create mode 100644 compose/src/main/res/drawable/ic_checkcircle_disabled.xml
 create mode 100644 compose/src/main/res/drawable/ic_checkcircle_filled.xml
 create mode 100644 compose/src/main/res/drawable/ic_checkcircle_line.xml

diff --git a/.idea/other.xml b/.idea/other.xml
index 0d3a1fb..4604c44 100644
--- a/.idea/other.xml
+++ b/.idea/other.xml
@@ -179,17 +179,6 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2400" />
         </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="31" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="q2q" />
-          <option name="id" value="q2q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Z Fold3" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1768" />
-          <option name="screenY" value="2208" />
-        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="samsung" />
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/CheckBoxPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/CheckBoxPreview.kt
new file mode 100644
index 0000000..3f57624
--- /dev/null
+++ 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
+                    )
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/MainActivity.kt b/app/src/main/kotlin/com/yourssu/handy/demo/MainActivity.kt
index d67ee67..05f64a9 100644
--- 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 {}
     }
-}
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/CheckBox.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/CheckBox.kt
new file mode 100644
index 0000000..785f4de
--- /dev/null
+++ 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
new file mode 100644
index 0000000..31e5eeb
--- /dev/null
+++ 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
new file mode 100644
index 0000000..6f3ab1a
--- /dev/null
+++ 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
new file mode 100644
index 0000000..b52b7ef
--- /dev/null
+++ 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>