Divider 제작

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.DividerSize
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Text
+
+@Preview(showBackground = true)
+@Composable
+fun DividerExample() {
+    Column {
+        Text("Section 1")
+        Divider(
+            dividerSize = DividerSize.TWO,
+            width = 100.dp,
+            color = HandyTheme.colors.bgBasicBlack
+        )
+        Text("Section 2")
+        Divider(
+            dividerSize = DividerSize.FOUR,
+            width = 200.dp,
+            color = HandyTheme.colors.bgBasicBlack
+        )
+        Text("Section 3")
+        Divider(dividerSize = DividerSize.EIGHT, color = HandyTheme.colors.bgBasicBlack)
+    }
+}

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 DividerSize(
+    val size: Dp
+) {
+    ONE(1.dp),
+    TWO(2.dp),
+    FOUR(4.dp),
+    EIGHT(8.dp),
+}
+
+/**
+ * width를 지정할 수 있는 Divider
+ * @param width Divider의 너비
+ * @param color Divider의 색상
+ * @param dividerSize Divider의 두께
+ */
+@Composable
+fun Divider(
+    dividerSize: DividerSize,
+    modifier: Modifier = Modifier,
+    width: Dp = 0.dp,
+    color: Color = HandyTheme.colors.bgBasicStrong,
+) {
+    Box(
+        modifier = modifier
+            .width(width)
+            .height(dividerSize.size)
+            .background(color)
+    )
+}
+
+/**
+ * width를 지정할 수 없는 Divider
+ * 기본적으로 fillMaxWidth를 사용
+ * @param color Divider의 색상
+ * @param dividerSize Divider의 두께
+ */
+@Composable
+fun Divider(
+    dividerSize: DividerSize,
+    modifier: Modifier = Modifier,
+    color: Color = HandyTheme.colors.bgBasicStrong,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(dividerSize.size)
+            .background(color)
+    )
+}