Chip 구현

app/src/main/kotlin/com/yourssu/handy/demo/ChipPreview.kt

@@ -0,0 +1,121 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.Chip
+import com.yourssu.handy.compose.ChipSize
+import com.yourssu.handy.compose.ChipState
+import com.yourssu.handy.compose.HandyTheme
+
+@Preview
+@Composable
+fun ChipPreview() {
+    HandyTheme {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            modifier = Modifier
+                .background(Color.White)
+                .padding(10.dp)
+        ) {
+            Column(
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                modifier = Modifier.padding(16.dp)
+            ) {
+                Chip(
+                    text = "Unselected",
+                    chipState = ChipState.Unselected,
+                    chipSize = ChipSize.Large
+                )
+
+                Chip(
+                    text = "Selected",
+                    chipState = ChipState.Selected,
+                    chipSize = ChipSize.Large
+                )
+
+                Chip(
+                    text = "Disabled",
+                    chipState = ChipState.Disabled,
+                    chipSize = ChipSize.Large
+                )
+            }
+            Column(
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                modifier = Modifier.padding(16.dp)
+            ) {
+                Chip(
+                    text = "Unselected",
+                    chipState = ChipState.Unselected,
+                    chipSize = ChipSize.Small
+                )
+
+                Chip(
+                    text = "Selected",
+                    chipState = ChipState.Selected,
+                    chipSize = ChipSize.Small
+                )
+
+                Chip(
+                    text = "Disabled",
+                    chipState = ChipState.Disabled,
+                    chipSize = ChipSize.Small
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun HorizontalChipPreview() {
+    HandyTheme {
+        val state = rememberLazyListState(initialFirstVisibleItemIndex = 2)
+        LazyRow(
+            state = state,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            modifier = Modifier
+                .background(Color.White)
+                .padding(10.dp)
+
+        ) {
+            item {
+                Chip(
+                    text = "Chip1",
+                    chipState = ChipState.Unselected,
+                    chipSize = ChipSize.Large
+                )
+            }
+            item {
+                Chip(
+                    text = "Chip2",
+                    chipState = ChipState.Selected,
+                    chipSize = ChipSize.Large
+                )
+            }
+            item {
+                Chip(
+                    text = "Chip3",
+                    chipState = ChipState.Disabled,
+                    chipSize = ChipSize.Large
+                )
+            }
+            item {
+                Chip(
+                    text = "LongNameChip",
+                    chipState = ChipState.Unselected,
+                    chipSize = ChipSize.Large
+                )
+            }
+        }
+    }
+}

compose/src/main/kotlin/com/yourssu/handy/compose/Chip.kt

@@ -0,0 +1,116 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.foundation.*
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.line.*
+
+enum class ChipSize(
+    internal val chipHeight: Dp
+) {
+    Large(32.dp),
+    Small(24.dp)
+}
+
+enum class ChipState {
+    Unselected,
+    Selected,
+    Disabled
+}
+
+@Composable
+fun Chip(
+    modifier: Modifier = Modifier,
+    text: String = "",
+    chipState: ChipState = ChipState.Unselected,
+    chipSize: ChipSize = ChipSize.Large,
+    leadingIcon: ImageVector? = null,
+    trailingIcon: ImageVector? = null,
+    chipOnClick: (() -> Unit) = {},
+    leadingIconOnClick: (() -> Unit) = {},
+    trailingIconOnClick: (() -> Unit) = {}
+) {
+
+    val backgroundColor = when (chipState) {
+        ChipState.Unselected -> ColorGray100
+        ChipState.Selected -> ColorViolet100
+        ChipState.Disabled -> ColorGray50
+    }
+    val textColor = when (chipState) {
+        ChipState.Unselected -> ColorGray700
+        ChipState.Selected -> ColorViolet500
+        ChipState.Disabled -> ColorGray300
+    }
+
+    val textStyle: HandyTextStyle =
+        if (chipState == ChipState.Selected) HandyTypography.B3Sb14 else HandyTypography.B3Rg14
+
+    Box(
+        modifier = modifier
+            .wrapContentWidth(unbounded = true)
+            .height(chipSize.chipHeight)
+            .background(backgroundColor, shape = RoundedCornerShape(16.dp))
+            .clickable(
+                enabled = chipState != ChipState.Disabled,
+                onClick = { chipOnClick() })
+            .padding(horizontal = 12.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
+            leadingIcon?.let {
+                Icon(
+                    leadingIcon,
+                    tint = textColor,
+                    iconSize = IconSize.XS,
+                    modifier = Modifier.clickable(
+                        enabled = chipState != ChipState.Disabled,
+                        onClick = { leadingIconOnClick() },
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null
+                    )
+                )
+            }
+
+            Text(
+                text = if (text.length < 10) text else text.take(9) + "...",
+                color = textColor,
+                fontSize = 14.dp,
+                style = textStyle
+            )
+
+            trailingIcon?.let {
+                Icon(
+                    trailingIcon,
+                    tint = textColor,
+                    iconSize = IconSize.XS,
+                    modifier = Modifier.clickable(
+                        enabled = chipState != ChipState.Disabled,
+                        onClick = { trailingIconOnClick() },
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null
+                    )
+                )
+            }
+        }
+    }
+}

compose/src/main/kotlin/com/yourssu/handy/compose/SearchBar.kt

@@ -0,0 +1,26 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.layout.Row
+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.Modifier
+import androidx.compose.ui.text.input.TextFieldValue
+
+enum class SearchBarState {
+    Inactive,
+    Focused,
+    Typing,
+    Completed
+}
+
+@Composable
+fun SearchBar(
+    modifier: Modifier  = Modifier,
+    text : String,
+    onTextChange : (String) -> Unit
+){
+    var searchText by remember { mutableStateOf(TextFieldValue(text)) }
+}