[FEAT/#19] TextField helper 구현

teamterning · Jul 7, 2024 · 3e55a7e · 3e55a7e
1 parent 54b355b
commit 3e55a7e
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 14 deletions.
diff --git a/core/src/main/java/com/terning/core/designsystem/textfield/NameTextField.kt b/core/src/main/java/com/terning/core/designsystem/textfield/NameTextField.kt
@@ -1,9 +1,13 @@
 package com.terning.core.designsystem.textfield
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import com.terning.core.designsystem.theme.Black
 import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.Grey400
 import com.terning.core.designsystem.theme.Grey500
+import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.TerningTypography
 
 @Composable
@@ -12,17 +16,22 @@ fun NameTextField(
     onValueChange: (String) -> Unit,
     hint: String,
     helperMessage: String,
+    helperIcon: Int? = null,
+    helperColor: Color = TerningMain,
 ) {
     TerningTextField(
         value = text,
         onValueChange = onValueChange,
         textStyle = TerningTypography().detail1,
         textColor = Black,
         drawLineColor = Grey500,
+        cursorBrush = SolidColor(Grey400),
         hint = hint,
         hintColor = Grey300,
         showTextLength = true,
         maxTextLength = 12,
-        helperMessage = helperMessage
+        helperMessage = helperMessage,
+        helperIcon = helperIcon,
+        helperColor = helperColor
     )
 }
diff --git a/core/src/main/java/com/terning/core/designsystem/textfield/SearchTextField.kt b/core/src/main/java/com/terning/core/designsystem/textfield/SearchTextField.kt
@@ -4,7 +4,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.SolidColor
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.Grey400
-import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.TerningTypography
 
 @Composable
@@ -25,6 +24,6 @@ fun SearchTextField(
         hint = hint,
         hintColor = Grey300,
         leftIcon = leftIcon,
-        iconColor = Grey400
+        leftIconColor = Grey400,
     )
 }
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
@@ -21,7 +21,6 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import com.terning.core.designsystem.theme.Grey300
-import com.terning.core.designsystem.theme.Grey400
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.TerningTypography
 import com.terning.core.designsystem.theme.White
@@ -38,10 +37,12 @@ fun TerningTextField(
     strokeWidth: Float = 1f,
     drawLineColor: Color,
     leftIcon: Int? = null,
-    iconColor: Color = TerningMain,
+    leftIconColor: Color = TerningMain,
     maxTextLength: Int? = null,
     showTextLength: Boolean = false,
     helperMessage: String = "",
+    helperIcon: Int? = null,
+    helperColor: Color = TerningMain,
 ) {
     BasicTextField(
         value = value,
@@ -76,7 +77,7 @@ fun TerningTextField(
                     Icon(
                         painter = painterResource(id = it),
                         contentDescription = null,
-                        tint = iconColor,
+                        tint = leftIconColor,
                     )
                 }
                 Box(modifier = Modifier.weight(1f)) {
@@ -100,10 +101,22 @@ fun TerningTextField(
         }
     )
 
-    Text(
-        text = helperMessage,
-        modifier = Modifier.padding(vertical = 8.dp),
-        style = TerningTypography().detail3,
-        color = Grey400,
-    )
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        modifier = Modifier.padding(vertical = 8.dp)
+    ) {
+        helperIcon?.let {
+            Icon(
+                painter = painterResource(id = it),
+                contentDescription = null,
+                tint = helperColor,
+            )
+        }
+        Text(
+            text = helperMessage,
+            style = TerningTypography().detail3,
+            color = helperColor,
+        )
+    }
 }
diff --git a/feature/src/main/java/com/terning/feature/search/SearchRoute.kt b/feature/src/main/java/com/terning/feature/search/SearchRoute.kt
@@ -13,6 +13,9 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.terning.core.designsystem.textfield.NameTextField
 import com.terning.core.designsystem.textfield.SearchTextField
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.WarningRed
 import com.terning.feature.R
 
 @Composable
@@ -24,11 +27,40 @@ fun SearchRoute() {
 fun SearchScreen() {
     var text by remember { mutableStateOf("") }
 
+    // TODO 프로필 스크린 전용으로, 삭제될 코드입니다
+    var helperMessage by remember { mutableStateOf(R.string.profile_text_field_helper) }
+    var helperIcon by remember { mutableStateOf<Int?>(null) }
+    var helperColor by remember { mutableStateOf(Grey400) }
+    val specialCharacterPattern = Regex("[!@#\$%^&*(),.?\":{}|<>\\[\\]\\\\/]")
+
+    // TODO 프로필 스크린 전용으로, 삭제될 코드입니다
+    fun updateHelper(text: String) {
+        helperMessage = when {
+            text.isEmpty() -> R.string.profile_text_field_helper
+            specialCharacterPattern.containsMatchIn(text) -> R.string.profile_text_field_warning
+            text.length <= 12 -> R.string.profile_text_field_check
+            else -> R.string.profile_text_field_helper
+        }
+        helperIcon = when {
+            text.isEmpty() -> null
+            specialCharacterPattern.containsMatchIn(text) -> R.drawable.ic_warning
+            text.length <= 12 -> R.drawable.ic_check
+            else -> null
+        }
+        helperColor = when {
+            text.isEmpty() -> Grey400
+            specialCharacterPattern.containsMatchIn(text) -> WarningRed
+            text.length <= 12 -> TerningMain
+            else -> Grey400
+        }
+    }
+
     Column(
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = 16.dp)
     ) {
+
         SearchTextField(
             text = text,
             onValueChange = { newText ->
@@ -37,13 +69,18 @@ fun SearchScreen() {
             hint = stringResource(R.string.search_text_field_hint),
             leftIcon = R.drawable.ic_nav_search
         )
+
+        // TODO 프로필 스크린 전용으로, 삭제될 코드입니다
         NameTextField(
             text = text,
             onValueChange = { newText ->
                 text = newText
+                updateHelper(newText)
             },
             hint = stringResource(R.string.profile_text_field_hint),
-            helperMessage = stringResource(R.string.profile_text_field_helper)
+            helperMessage = stringResource(helperMessage),
+            helperIcon = helperIcon,
+            helperColor = helperColor
         )
     }
-}
+}
diff --git a/feature/src/main/res/drawable/ic_check.xml b/feature/src/main/res/drawable/ic_check.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M6,0.5L6,0.5A5.5,5.5 0,0 1,11.5 6L11.5,6A5.5,5.5 0,0 1,6 11.5L6,11.5A5.5,5.5 0,0 1,0.5 6L0.5,6A5.5,5.5 0,0 1,6 0.5z"
+      android:fillColor="#00000000"
+      android:strokeColor="#1EAC61"/>
+  <path
+      android:pathData="M9,4L4.875,8.125L3,6.25"
+      android:strokeLineJoin="round"
+      android:strokeWidth="0.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#1EAC61"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/feature/src/main/res/drawable/ic_warning.xml b/feature/src/main/res/drawable/ic_warning.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+  <group>
+    <clip-path
+        android:pathData="M6,0L6,0A6,6 0,0 1,12 6L12,6A6,6 0,0 1,6 12L6,12A6,6 0,0 1,0 6L0,6A6,6 0,0 1,6 0z"/>
+    <path
+        android:pathData="M5.657,6.895L5.604,2.659H6.396L6.343,6.895H5.657ZM6,9.044C5.719,9.044 5.499,8.824 5.499,8.543C5.499,8.257 5.719,8.042 6,8.042C6.286,8.042 6.501,8.257 6.501,8.543C6.501,8.824 6.286,9.044 6,9.044Z"
+        android:fillColor="#F54645"/>
+  </group>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M6,0.5L6,0.5A5.5,5.5 0,0 1,11.5 6L11.5,6A5.5,5.5 0,0 1,6 11.5L6,11.5A5.5,5.5 0,0 1,0.5 6L0.5,6A5.5,5.5 0,0 1,6 0.5z"
+      android:fillColor="#00000000"
+      android:strokeColor="#F54645"/>
+</vector>
diff --git a/feature/src/main/res/values/strings.xml b/feature/src/main/res/values/strings.xml
@@ -19,6 +19,8 @@
     <string name="profile_text_field_hint">이름을 입력해주세요</string>
     <string name="profile_text_field_helper">12자리 이내, 문자/숫자 가능, 특수문자/기호 입력불가</string>
     <string name="profile_text_field_warning">이름에 특수문자는 입력할 수 없어요</string>
+    <string name="profile_text_field_check">이용 가능한 이름이에요</string>
+
     <!--    Search-->
     <string name="search_text_field_hint">관심있는 인턴 공고 키워드를 검색해보세요</string>
 </resources>