#5 [fix] textfield 컴포넌트를 이용

AND-SOPT-ANDROID · Nov 1, 2024 · 5af6128 · 5af6128
1 parent bf03b1d
commit 5af6128
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 101 deletions.
diff --git a/app/src/main/java/org/sopt/and/component/CustomTextField.kt b/app/src/main/java/org/sopt/and/component/CustomTextField.kt
diff --git a/app/src/main/java/org/sopt/and/feature/login/LoginScreen.kt b/app/src/main/java/org/sopt/and/feature/login/LoginScreen.kt
@@ -27,9 +27,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -42,9 +40,10 @@ import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavController
 import org.sopt.and.R
-import org.sopt.and.component.CustomTextField
 import org.sopt.and.component.DescriptionText
 import org.sopt.and.component.DividerWithText
+import org.sopt.and.component.textfield.CustomPwTextField
+import org.sopt.and.component.textfield.CustomEmailTextField
 import org.sopt.and.feature.model.UserInfo
 import org.sopt.and.ui.theme.ANDANDROIDTheme
 
@@ -55,7 +54,6 @@ fun LoginScreen(navController: NavController) {
     val loginEmail by viewModel.email.collectAsState()
     val loginPassword by viewModel.password.collectAsState()
     val isLoginSuccessful by viewModel.isLoginSuccessful.collectAsState()
-    var passwordVisible by remember { mutableStateOf(false) }
     val context = LocalContext.current
 
     val snackbarHostState = remember { SnackbarHostState() }
@@ -69,39 +67,27 @@ fun LoginScreen(navController: NavController) {
     ) {
         LoginTopBar()
         Spacer(modifier = Modifier.padding(top = 30.dp))
-        CustomTextField(
+        CustomEmailTextField(
             value = loginEmail,
             onValueChange = { viewModel.updateEmail(it) },
             placeholder = stringResource(R.string.login_email_id)
         )
         Spacer(modifier = Modifier.padding(top = 10.dp))
-        Box(
-            modifier = Modifier.fillMaxWidth(),
-            contentAlignment = Alignment.CenterEnd
-        ) {
-            CustomTextField(
-                value = loginPassword,
-                onValueChange = { viewModel.updatePassword(it) },
-                placeholder = stringResource(R.string.login_setting_password),
-                passwordVisible = passwordVisible,
-                padding = PaddingValues(vertical = 10.dp)
-            )
-            Text(
-                text = if (passwordVisible) "hide" else "show",
-                color = Color.White,
-                modifier = Modifier
-                    .padding(end = 10.dp)
-                    .clickable { passwordVisible = !passwordVisible }
-            )
-        }
+
+        CustomPwTextField(
+            value = loginPassword,
+            onValueChange = { viewModel.updatePassword(it) },
+            placeholder = stringResource(R.string.login_setting_password),
+            modifier = Modifier.padding(vertical = 10.dp)
+        )
         Spacer(modifier = Modifier.padding(top = 30.dp))
 
         NavigateToMain {
             viewModel.login(userInfo)
         }
 
         LaunchedEffect(isLoginSuccessful) {
-            isLoginSuccessful?.let {
+            isLoginSuccessful.let {
                 if (it) {
                     snackbarHostState.showSnackbar(context.getString(R.string.login_success))
                     navController.currentBackStackEntry?.arguments?.putParcelable(

diff --git a/app/src/main/java/org/sopt/and/feature/signup/SignUpScreen.kt b/app/src/main/java/org/sopt/and/feature/signup/SignUpScreen.kt
@@ -2,7 +2,6 @@ package org.sopt.and.feature.signup
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -17,9 +16,6 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -32,9 +28,10 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavController
 import org.sopt.and.R
-import org.sopt.and.component.CustomTextField
+import org.sopt.and.component.textfield.CustomEmailTextField
 import org.sopt.and.component.DescriptionText
 import org.sopt.and.component.DividerWithText
+import org.sopt.and.component.textfield.CustomPwTextField
 import org.sopt.and.core.showToast
 import org.sopt.and.feature.model.UserInfo
 import org.sopt.and.ui.theme.ANDANDROIDTheme
@@ -46,10 +43,10 @@ fun SignUpScreen(navController: NavController) {
 
     val signUpEmail by viewModel.email.collectAsState()
     val signUpPassword by viewModel.password.collectAsState()
-    var passwordVisible by remember { mutableStateOf(false) }
 
     val isEmailValid by viewModel.isEmailValid.collectAsState()
     val isPasswordValid by viewModel.isPasswordValid.collectAsState()
+
     val context = LocalContext.current
 
     Column(
@@ -81,33 +78,23 @@ fun SignUpScreen(navController: NavController) {
             )
             Spacer(modifier = Modifier.padding(top = 20.dp))
 
-            CustomTextField(
+            CustomEmailTextField(
                 value = signUpEmail,
                 onValueChange = { viewModel.updateEmail(it) },
-                placeholder = "[email protected]"
+                placeholder = "[email protected]",
+                isError = !isEmailValid,
             )
             DescriptionText(stringResource(R.string.signup_id_description))
 
             Spacer(modifier = Modifier.padding(top = 20.dp))
 
-            Box(
-                modifier = Modifier.fillMaxWidth(),
-                contentAlignment = Alignment.CenterEnd
-            ) {
-                CustomTextField(
-                    value = signUpPassword,
-                    onValueChange = { viewModel.updatePassword(it) },
-                    placeholder = stringResource(R.string.login_setting_password),
-                    passwordVisible = passwordVisible
-                )
-                Text(
-                    text = if (passwordVisible) "hide" else "show",
-                    color = Color.White,
-                    modifier = Modifier
-                        .padding(end = 10.dp)
-                        .clickable { passwordVisible = !passwordVisible }
-                )
-            }
+            CustomPwTextField(
+                value = signUpPassword,
+                onValueChange = { viewModel.updatePassword(it) },
+                placeholder = stringResource(R.string.login_setting_password),
+                isError = !isPasswordValid,
+                modifier = Modifier.padding(vertical = 10.dp)
+            )
             DescriptionText(stringResource(R.string.signup_password_description))
 
             Spacer(modifier = Modifier.padding(top = 30.dp))

diff --git a/app/src/main/java/org/sopt/and/feature/signup/SignUpViewModel.kt b/app/src/main/java/org/sopt/and/feature/signup/SignUpViewModel.kt
@@ -12,27 +12,28 @@ class SignUpViewModel : ViewModel() {
     private val _password = MutableStateFlow("")
     val password: StateFlow<String> = _password
 
-    private val _isEmailValid = MutableStateFlow(false)
+    private val _isEmailValid = MutableStateFlow(true)
     val isEmailValid: StateFlow<Boolean> = _isEmailValid
 
-    private val _isPasswordValid = MutableStateFlow(false)
+    private val _isPasswordValid = MutableStateFlow(true)
     val isPasswordValid: StateFlow<Boolean> = _isPasswordValid
 
+
     fun updateEmail(newEmail: String) {
         _email.value = newEmail
-        _isEmailValid.value = isValidEmail(newEmail)
+        _isEmailValid.value = newEmail.isBlank() || isValidEmail(newEmail)
     }
 
     fun updatePassword(newPassword: String) {
         _password.value = newPassword
-        _isPasswordValid.value = isValidPassword(newPassword)
+        _isPasswordValid.value = newPassword.isBlank() || isValidPassword(newPassword)
     }
 
     fun isValidEmail(email: String): Boolean {
         return Patterns.EMAIL_ADDRESS.matcher(email).matches()
     }
 
-    fun isValidPassword(password: String): Boolean {
+    private fun isValidPassword(password: String): Boolean {
         val regex =
             Regex("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@\$!%*?&])[A-Za-z\\d@\$!%*?&]{8,20}$")
         return password.matches(regex)