Divider 제작 (#16)

* add : width를 nullable로 하는 버전 생성 * add : fillMaxWidth인 divider와 너비를 지정할 수 있는 Divider분리 * chore : 프리뷰수정 * chore : 리뷰 반영
yourssu · Jan 19, 2025 · e39245a · e39245a
1 parent e342649
commit e39245a
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 0 deletions.
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
diff --git a/.idea/git_toolbox_blame.xml b/.idea/git_toolbox_blame.xml
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DividerPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DividerPreview.kt
@@ -0,0 +1,31 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.Divider
+import com.yourssu.handy.compose.DividerThickness
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Text
+
+@Preview(showBackground = true)
+@Composable
+fun DividerExample() {
+    Column {
+        Text("Section 1")
+        Divider(
+            dividerThickness = DividerThickness.TWO,
+            width = 100.dp,
+            color = HandyTheme.colors.bgBasicBlack
+        )
+        Text("Section 2")
+        Divider(
+            dividerThickness = DividerThickness.FOUR,
+            width = 200.dp,
+            color = HandyTheme.colors.bgBasicBlack
+        )
+        Text("Section 3")
+        Divider(dividerThickness = DividerThickness.EIGHT, color = HandyTheme.colors.bgBasicBlack)
+    }
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Divider.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Divider.kt
@@ -0,0 +1,65 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * Divider의 두께를 정의하는 enum class
+ */
+enum class DividerThickness(
+    val size: Dp
+) {
+    ONE(1.dp),
+    TWO(2.dp),
+    FOUR(4.dp),
+    EIGHT(8.dp),
+}
+
+/**
+ * width를 지정할 수 있는 Divider
+ * @param width Divider의 너비
+ * @param color Divider의 색상
+ * @param dividerThickness Divider의 두께
+ */
+@Composable
+fun Divider(
+    dividerThickness: DividerThickness,
+    modifier: Modifier = Modifier,
+    width: Dp = 0.dp,
+    color: Color = HandyTheme.colors.bgBasicStrong,
+) {
+    Box(
+        modifier = modifier
+            .width(width)
+            .height(dividerThickness.size)
+            .background(color)
+    )
+}
+
+/**
+ * width를 지정할 수 없는 Divider
+ * 기본적으로 fillMaxWidth를 사용
+ * @param color Divider의 색상
+ * @param dividerThickness Divider의 두께
+ */
+@Composable
+fun Divider(
+    dividerThickness: DividerThickness,
+    modifier: Modifier = Modifier,
+    color: Color = HandyTheme.colors.bgBasicStrong,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(dividerThickness.size)
+            .background(color)
+    )
+}