[FEAT/#19] TextField 속성 추가

teamterning · Jul 7, 2024 · f3c312e · f3c312e
1 parent 63e2097
commit f3c312e
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 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
@@ -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,
+        )
+    }
 }
diff --git a/feature/src/main/java/com/terning/feature/search/SearchRoute.kt b/feature/src/main/java/com/terning/feature/search/SearchRoute.kt
@@ -12,26 +12,36 @@ 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() {
     SearchScreen()
 }
 
 @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,
         )
     }
 }