feat: textbox error icon 추가 (#63) (KAN-138)

IoTeaTime · Nov 7, 2024 · 4871ae9 · 4871ae9
1 parent cfb9beb
commit 4871ae9
Showing 1 changed file with 65 additions and 30 deletions.
diff --git a/app/src/main/java/com/example/mhnfe/ui/components/TextBox.kt b/app/src/main/java/com/example/mhnfe/ui/components/TextBox.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
@@ -32,6 +33,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextAlign
@@ -50,10 +52,10 @@ fun MainTextBox(
     focusManager: FocusManager,
     isError: Boolean = false,
     onIsErrorChange: (Boolean) -> Unit = {},
-    inputText: String,
-    onInputTextChange: (String) -> Unit,
+    inputText: String = "",
+    onInputTextChange: (String) -> Unit = {},
     hintText: String = "", // setting hint text
-//    warningText: String = "" // setting warning text
+    warningText: String = "" // setting warning text
 ) {
     var isFocused by remember { mutableStateOf(false) } // focus state
     val backgroundColor = Color.White
@@ -90,23 +92,26 @@ fun MainTextBox(
             cursorBrush = SolidColor(Color.Black),
             singleLine = true,
             // focus out when click enter
-            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
-            // focus out when enter
             keyboardActions = KeyboardActions(
                 onDone = {
                     focusManager.clearFocus()
                 }
             ),
+            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
             // innerTextField settings
             decorationBox = { innerTextField ->
                 Row(
                     modifier = modifier
                         .fillMaxWidth()
-                        .padding(start = 8.dp, end = 8.dp),
+                        .padding(start = 8.dp, end = 8.dp)
+                        .wrapContentHeight(),
+                    horizontalArrangement = Arrangement.spacedBy(10.dp , alignment = Alignment.Start),
                     verticalAlignment = Alignment.CenterVertically
                 ) {
                     // Place holder
-                    Box(modifier = modifier.weight(1f)) {
+                    Box(modifier = modifier
+                        .weight(1f)
+                    ) {
                         if (inputText.isEmpty() && !isFocused) {
                             Text(
                                 text = hintText,
@@ -133,29 +138,59 @@ fun MainTextBox(
             }
         )
         // Print warning text under text box
-//        if (isError) {
-//            Text(
-//                text = warningText,
-//                color = mainRed,
-//                style = Typography.bodySmall.copy(fontSize = 12.sp)
-//            )
-//        }
+        if (isError) {
+            Row(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp , alignment = Alignment.Start),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    modifier = modifier.size(16.dp),
+                    painter = painterResource(id = R.drawable.cautionicon),
+                    contentDescription = null,
+                    tint = mainRed
+                )
+                Text(
+                    text = "warningText",
+                    color = mainRed,
+                    style = Typography.bodySmall.copy(fontSize = 12.sp)
+                )
+            }
+
+        }
     }
 }
 
-//@Preview(showBackground = true)
-//@Composable
-//fun MainTextBoxPreview(){
-//    val focusManager = LocalFocusManager.current
-//
-//    Column (
-//        modifier = Modifier
-//            .fillMaxSize(),
-//        horizontalAlignment = Alignment.CenterHorizontally,
-//        verticalArrangement = Arrangement.spacedBy(10.dp)
-//    ) {
-//        MainTextBox(
-//            focusManager = focusManager
-//        )
-//    }
-//}
+@Preview(showBackground = true)
+@Composable
+fun MainTextBoxPreview() {
+    // FocusManager를 로컬로 가져옵니다.
+    val focusManager = LocalFocusManager.current
+    var text by rememberSaveable { mutableStateOf("") }
+    var isError by rememberSaveable { mutableStateOf(false) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        MainTextBox(
+            modifier = Modifier,
+            focusManager = focusManager,
+            isError = isError,
+            onIsErrorChange = { isError = it },
+            inputText = text,
+            onInputTextChange = { newText ->
+                text = newText
+                // 예시로 오류 조건을 text 길이로 설정
+                isError = newText.length > 3
+            },
+            hintText = "Enter text here...",
+            warningText = "Text must be at least 3 characters"
+        )
+    }
+}