From f3c312e6f2efa31051780ee69655ccb718ca303e Mon Sep 17 00:00:00 2001 From: arinming Date: Mon, 8 Jul 2024 00:04:31 +0900 Subject: [PATCH] =?UTF-8?q?[FEAT/#19]=20TextField=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../textfield/TerningTextField.kt | 86 +++++++++++++------ .../com/terning/feature/search/SearchRoute.kt | 16 +++- 2 files changed, 73 insertions(+), 29 deletions(-) diff --git a/core/src/main/java/com/terning/core/designsystem/textfield/TerningTextField.kt b/core/src/main/java/com/terning/core/designsystem/textfield/TerningTextField.kt index 1ff804ffc..d0a68498e 100644 --- a/core/src/main/java/com/terning/core/designsystem/textfield/TerningTextField.kt +++ b/core/src/main/java/com/terning/core/designsystem/textfield/TerningTextField.kt @@ -2,21 +2,23 @@ package com.terning.core.designsystem.textfield import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.BasicTextField import androidx.compose.material3.Icon +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.drawWithContent import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp -import com.terning.core.R +import com.terning.core.designsystem.theme.Grey300 import com.terning.core.designsystem.theme.TerningMain import com.terning.core.designsystem.theme.TerningTypography import com.terning.core.designsystem.theme.White @@ -25,44 +27,76 @@ import com.terning.core.designsystem.theme.White fun TerningTextField( value: String, onValueChange: (String) -> Unit, - modifier: Modifier = Modifier, + textStyle: TextStyle, + hint: String = "", + hintColor: Color = Grey300, + strokeWidth: Float = 1f, + drawLineColor: Color, + leftIcon: Int? = null, + maxTextLength: Int? = null, + showTextLength: Boolean = false, + warningMessage: String? = null, ) { BasicTextField( value = value, onValueChange = onValueChange, modifier = Modifier .fillMaxWidth() - .background(White), - textStyle = TerningTypography().button3, - decorationBox = { innerTextField -> - Column(modifier = Modifier.drawWithContent { + .background(White) + .drawWithContent { + val canvasWidth = size.width + val canvasHeight = size.height + drawContent() drawLine( - color = TerningMain, - start = Offset( - x = 0f, - y = size.height - 1.dp.toPx(), - ), - end = Offset( - x = size.width, - y = size.height - 1.dp.toPx(), - ), - strokeWidth = 2.dp.toPx(), + color = drawLineColor, + start = Offset(x = 0f, y = canvasHeight), + end = Offset(x = canvasWidth, y = canvasHeight), + strokeWidth = strokeWidth.dp.toPx(), ) - }) { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(12.dp), - ) { + }, + textStyle = textStyle, + + decorationBox = { innerTextField -> + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(12.dp), + modifier = Modifier.padding(vertical = 8.dp) + ) { + leftIcon?.let { Icon( - painter = painterResource(id = R.drawable.ic_back), + painter = painterResource(id = it), contentDescription = null, tint = TerningMain, ) + } + Box(modifier = Modifier.weight(1f)) { + if (value.isEmpty()) { + Text( + text = hint, + style = textStyle, + color = hintColor + ) + } innerTextField() } - Spacer(modifier = Modifier.height(8.dp)) } } ) + + if (showTextLength && maxTextLength != null) { + Text( + text = "${value.length}/$maxTextLength", + style = TerningTypography().button3, + color = Grey300, + ) + } + + warningMessage?.let { + Text( + text = it, + style = TerningTypography().button3, + color = Color.Red, + ) + } } \ No newline at end of file diff --git a/feature/src/main/java/com/terning/feature/search/SearchRoute.kt b/feature/src/main/java/com/terning/feature/search/SearchRoute.kt index 85b150e6a..4d1c9c542 100644 --- a/feature/src/main/java/com/terning/feature/search/SearchRoute.kt +++ b/feature/src/main/java/com/terning/feature/search/SearchRoute.kt @@ -12,6 +12,10 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.terning.core.designsystem.textfield.TerningTextField +import com.terning.core.designsystem.theme.Grey400 +import com.terning.core.designsystem.theme.TerningMain +import com.terning.core.designsystem.theme.TerningTypography +import com.terning.feature.R @Composable fun SearchRoute() { @@ -19,19 +23,25 @@ fun SearchRoute() { } @Composable -fun SearchScreen(modifier: Modifier = Modifier) { +fun SearchScreen() { var text by remember { mutableStateOf("") } + Column( modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp) ) { - Text(text = "탐색 스크린") TerningTextField( value = text, onValueChange = { newText -> text = newText - } + }, + textStyle = TerningTypography().button3, + drawLineColor = TerningMain, + strokeWidth = 2f, + hint = "힌트텍스트", + hintColor = Grey400, + leftIcon = R.drawable.ic_nav_search, ) } } \ No newline at end of file