🚀 3단계 - 회원가입(유효성 검사)

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">📝 android-signup</h1>
+<h1 align="center">android-signup</h1>
 
 ## 🚀 2단계 - 회원가입(뷰)
 
@@ -11,4 +11,23 @@
 - [x]  Password Confirm 입력 구현
 - [x]  Sign Up 버튼 구현
 - [x]  레이아웃 배치하기(padding)
-- [x]  함수 분리 및 리팩토링
+- [x]  함수 분리 및 리팩토링
+
+## 🚀 3단계 - 회원가입(유효성 검사)
+
+### ✅ 구현할 기능 목록
+
+- [x]  2단계 피드백 반영
+- [x]  에러 메시지 추가
+- [ ]  `SignupTextField` 분리
+  - [ ]  `UsernameTextField`
+  - [x]  `EmailTextField`
+  - [ ]  `PasswordTextField`
+- [ ]  Username 유효성 검사
+- [x]  Email 유효성 검사
+- [ ]  Password 유효성 검사
+- [ ]  Password Confirm 유효성 검사
+- [ ]  UI 테스트 작성
+  - [ ]  `UsernameTextField`
+  - [x]  `EmailTextField`
+  - [ ]  `PasswordTextField`

app/src/androidTest/java/nextstep/signup/InputValidationTest.kt

@@ -0,0 +1,84 @@
+package nextstep.signup
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performTextInput
+import nextstep.signup.ui.component.EmailTextField
+import nextstep.signup.ui.component.UsernameTextField
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+
+class InputValidationTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+    private val username = mutableStateOf("")
+    private val email = mutableStateOf("")
+
+    @Before
+    fun setup() {
+        composeTestRule.setContent {
+            Column {
+                UsernameTextField(username = username)
+                EmailTextField(email = email)
+            }
+        }
+    }
+
+    @Test
+    fun 사용자_이름은_2에서_5자여야_한다() {
+        // when
+        username.value = "김컴포즈"
+
+        // then
+        composeTestRule
+            .onNodeWithText(USERNAME_LENGTH_ERROR)
+            .assertDoesNotExist()
+    }
+
+    @Test
+    fun 사용자_이름이_2에서_5자가_아니면_에러메시지가_노출된다() {
+        // when
+        username.value = "김컴포즈입니다"
+
+        // then
+        composeTestRule
+            .onNodeWithText(USERNAME_LENGTH_ERROR)
+            .assertExists()
+    }
+
+    @Test
+    fun 이메일_형식이_올바른_경우() {
+        // when
+        email.value = "[email protected]"
+
+        // then
+        composeTestRule
+            .onNodeWithText(EMAIL_ERROR)
+            .assertDoesNotExist()
+    }
+
+    @Test
+    fun 이메일_형식이_올바르지_않은_경우() {
+        // when
+        composeTestRule.onNodeWithTag("emailTextField").performTextInput("compose")
+
+        // then
+        composeTestRule
+            .onNodeWithText(EMAIL_ERROR)
+            .assertExists()
+    }
+
+    companion object {
+        private const val USERNAME_LENGTH_ERROR = "이름은 2~5자여야 합니다."
+        private const val USERNAME_LETTER_ERROR = "이름에는 숫자나 기호가 포함될 수 없습니다."
+        private const val EMAIL_ERROR = "이메일 형식이 올바르지 않습니다."
+        private const val PASSWORD_LENGTH_ERROR = "비밀번호는 8~16자여야 합니다."
+        private const val PASSWORD_LETTER_ERROR = "비밀번호는 영문과 숫자를 포함해야 합니다."
+        private const val PASSWORD_CONFIRM_ERROR = "비밀번호가 일치하지 않습니다."
+    }
+}

app/src/main/java/nextstep/signup/MainActivity.kt

@@ -3,203 +3,16 @@ package nextstep.signup
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.text.KeyboardActions
-import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonColors
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusDirection
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalFocusManager
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.text.input.PasswordVisualTransformation
-import androidx.compose.ui.text.input.VisualTransformation
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import nextstep.signup.ui.theme.Pink80
+import nextstep.signup.ui.screen.SignupScreen
 import nextstep.signup.ui.theme.SignupTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             SignupTheme {
-                ScreenLayoutSetting()
+                SignupScreen()
             }
         }
     }
-}
-
-@Composable
-private fun TitleTextComponent() {
-    Text(
-        text = stringResource(id = R.string.signup_title),
-        style = TextStyle(
-            fontSize = 26.sp,
-            lineHeight = 20.sp,
-            fontWeight = FontWeight(700),
-            color = Color.Black,
-            letterSpacing = 0.26.sp
-        ),
-        modifier = Modifier
-            .fillMaxWidth(1.0F)
-            .padding(bottom = 42.dp),
-        textAlign = TextAlign.Center,
-    )
-}
-
-@Composable
-private fun TextFieldComponent(
-    label: Int,
-    input: MutableState<String>,
-    inputEntered: MutableState<Boolean>
-) {
-    Row(modifier = Modifier.padding(bottom = 32.dp)) {
-        val focusManager = LocalFocusManager.current
-
-        TextField(
-            value = input.value,
-            onValueChange = {
-                input.value = it
-            },
-            label = {
-                Text(text = stringResource(id = label))
-            },
-            modifier = Modifier
-                .alignByBaseline()
-                .weight(1.0F),
-            singleLine = true,
-            visualTransformation = if (label == R.string.signup_password || label == R.string.signup_password_confirm) PasswordVisualTransformation() else VisualTransformation.None,
-            keyboardOptions = KeyboardOptions(
-                autoCorrect = false,
-                keyboardType = when (label) {
-                    R.string.signup_username -> KeyboardType.Text
-                    R.string.signup_email -> KeyboardType.Email
-                    R.string.signup_password,
-                    R.string.signup_password_confirm -> KeyboardType.Password
-
-                    else -> KeyboardType.Text
-                }
-            ),
-            keyboardActions = KeyboardActions(
-                onDone = {
-                    inputEntered.value = true
-                    if (label == R.string.signup_password_confirm) focusManager.clearFocus()
-                    else focusManager.moveFocus(FocusDirection.Next)
-                }
-            )
-        )
-    }
-}
-
-@Composable
-private fun SignupButtonComponent() {
-    Button(
-        onClick = { /*TODO*/ },
-        modifier = Modifier
-            .fillMaxWidth(1.0F),
-        colors = ButtonColors(
-            containerColor = Color(Pink80.value),
-            contentColor = Color.White,
-            disabledContainerColor = Color.LightGray,
-            disabledContentColor = Color.White
-        )
-    ) {
-        Text(
-            text = stringResource(id = R.string.signup_button),
-            modifier = Modifier
-                .padding(vertical = 15.dp),
-            color = Color.White,
-            style = TextStyle(
-                fontSize = 14.sp,
-                fontWeight = FontWeight(500),
-                letterSpacing = 0.1.sp
-            )
-        )
-    }
-}
-
-@Composable
-private fun ScreenLayoutSetting() {
-    val name = remember {
-        mutableStateOf("")
-    }
-    val nameEntered = remember {
-        mutableStateOf(false)
-    }
-    val email = remember {
-        mutableStateOf("")
-    }
-    val emailEntered = remember {
-        mutableStateOf(false)
-    }
-    val password = remember {
-        mutableStateOf("")
-    }
-    val passwordEntered = remember {
-        mutableStateOf(false)
-    }
-    val passwordConfirm = remember {
-        mutableStateOf("")
-    }
-    val passwordConfirmEntered = remember {
-        mutableStateOf(false)
-    }
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(32.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        Column(horizontalAlignment = Alignment.CenterHorizontally) {
-            TitleTextComponent()
-            TextFieldComponent(
-                label = R.string.signup_username,
-                input = name,
-                inputEntered = nameEntered
-            )
-            TextFieldComponent(
-                label = R.string.signup_email,
-                input = email,
-                inputEntered = emailEntered
-            )
-            TextFieldComponent(
-                label = R.string.signup_password,
-                input = password,
-                inputEntered = passwordEntered
-            )
-            TextFieldComponent(
-                label = R.string.signup_password_confirm,
-                input = passwordConfirm,
-                inputEntered = passwordConfirmEntered
-            )
-            SignupButtonComponent()
-        }
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-fun TextFieldSettingPreview() {
-    SignupTheme {
-        ScreenLayoutSetting()
-    }
 }