[Feat/#6] UX 개선 : 엔터키 입력 시 다음 TextField로 이동하는 기능 추가

NOW-SOPT-ANDROID · Sep 18, 2024 · f064a3c · f064a3c
1 parent afa41ce
commit f064a3c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
diff --git a/app/src/main/java/com/sopt/now/compose/presentation/ui/auth/component/AuthTextField.kt b/app/src/main/java/com/sopt/now/compose/presentation/ui/auth/component/AuthTextField.kt
@@ -12,11 +12,15 @@ 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.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.painterResource
@@ -36,18 +40,24 @@ fun AuthTextField(
     onFocusChanged: (Boolean) -> Unit,
     onRemove: () -> Unit,
     hint: String,
-    visualTransformation: VisualTransformation = VisualTransformation.None
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    focusRequester: FocusRequester = FocusRequester(),
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    keyboardActions: KeyboardActions = KeyboardActions.Default,
 ) {
     Box(modifier = modifier) {
         BasicTextField(
             value = value,
             onValueChange = onValueChange,
             modifier = Modifier
                 .fillMaxWidth()
+                .focusRequester(focusRequester)
                 .onFocusChanged { focusState ->
                     onFocusChanged(focusState.isFocused)
                 },
             textStyle = TextStyle(color = CustomTheme.colors.gray01),
+            keyboardOptions = keyboardOptions,
+            keyboardActions = keyboardActions,
             singleLine = true,
             visualTransformation = visualTransformation,
             cursorBrush = SolidColor(CustomTheme.colors.gray01),

diff --git a/app/src/main/java/com/sopt/now/compose/presentation/ui/auth/screen/SignInScreen.kt b/app/src/main/java/com/sopt/now/compose/presentation/ui/auth/screen/SignInScreen.kt
@@ -11,6 +11,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
@@ -21,8 +23,11 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextDecoration
@@ -74,6 +79,9 @@ fun SignInScreen(
     var isIdTextFieldFocused by remember { mutableStateOf(false) }
     var isPasswordTextFieldFocused by remember { mutableStateOf(false) }
 
+    val idFocusRequester = remember { FocusRequester() }
+    val passwordFocusRequester = remember { FocusRequester() }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -96,7 +104,10 @@ fun SignInScreen(
             isFocused = isIdTextFieldFocused,
             onFocusChanged = { isIdTextFieldFocused = it },
             onRemove = { inputId = TextFieldValue("") },
-            hint = stringResource(R.string.signin_id_hint)
+            hint = stringResource(R.string.signin_id_hint),
+            focusRequester = idFocusRequester,
+            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Next),
+            keyboardActions = KeyboardActions(onNext = { passwordFocusRequester.requestFocus() })
         )
         Spacer(modifier = Modifier.height(40.dp))
         AuthTextField(
@@ -108,7 +119,8 @@ fun SignInScreen(
             onFocusChanged = { isPasswordTextFieldFocused = it },
             onRemove = { inputPassword = TextFieldValue("") },
             hint = stringResource(R.string.signin_password_hint),
-            visualTransformation = PasswordVisualTransformation()
+            visualTransformation = PasswordVisualTransformation(),
+            focusRequester = passwordFocusRequester,
         )
         Spacer(modifier = Modifier.height(40.dp))
         Text(
@@ -126,6 +138,8 @@ fun SignInScreen(
         )
         Spacer(modifier = Modifier.weight(1f))
         SignInButton(
+            modifier = Modifier
+                .fillMaxWidth(),
             context = context,
             inputId = inputId.text,
             inputPassword = inputPassword.text,
@@ -140,6 +154,7 @@ fun SignInScreen(
 
 @Composable
 fun SignInButton(
+    modifier: Modifier = Modifier,
     context: Context,
     inputId: String,
     inputPassword: String,
@@ -173,8 +188,7 @@ fun SignInButton(
                 }
             }
         },
-        modifier = Modifier
-            .fillMaxWidth(),
+        modifier = modifier,
         colors = ButtonDefaults.buttonColors(CustomTheme.colors.mainYellow),
         shape = RoundedCornerShape(10.dp)
     ) {

diff --git a/app/src/main/java/com/sopt/now/compose/presentation/ui/auth/screen/SignUpScreen.kt b/app/src/main/java/com/sopt/now/compose/presentation/ui/auth/screen/SignUpScreen.kt
@@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
@@ -18,8 +20,11 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
@@ -63,6 +68,11 @@ fun SignUpScreen(
     var isNicknameTextFieldFocused by remember { mutableStateOf(false) }
     var isPhoneNumberTextFieldFocused by remember { mutableStateOf(false) }
 
+    val idFocusRequester= remember { FocusRequester() }
+    val passwordFocusRequester= remember { FocusRequester() }
+    val nicknameFocusRequester= remember { FocusRequester() }
+    val phoneNumberFocusRequester= remember { FocusRequester() }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -96,7 +106,10 @@ fun SignUpScreen(
             isFocused = isIdTextFieldFocused,
             onFocusChanged = { isIdTextFieldFocused = it },
             onRemove = { inputId = TextFieldValue("") },
-            hint = stringResource(R.string.signup_id_hint)
+            hint = stringResource(R.string.signup_id_hint),
+            focusRequester = idFocusRequester,
+            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Next),
+            keyboardActions = KeyboardActions(onNext = { passwordFocusRequester.requestFocus() })
         )
 
         Spacer(modifier = Modifier.height(30.dp))
@@ -118,7 +131,10 @@ fun SignUpScreen(
             onFocusChanged = { isPasswordTextFieldFocused = it },
             onRemove = { inputPassword = TextFieldValue("") },
             hint = stringResource(R.string.signup_password_hint),
-            visualTransformation = PasswordVisualTransformation()
+            visualTransformation = PasswordVisualTransformation(),
+            focusRequester = passwordFocusRequester,
+            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Next),
+            keyboardActions = KeyboardActions(onNext = { nicknameFocusRequester.requestFocus() })
         )
 
         Spacer(modifier = Modifier.height(30.dp))
@@ -139,7 +155,10 @@ fun SignUpScreen(
             isFocused = isNicknameTextFieldFocused,
             onFocusChanged = { isNicknameTextFieldFocused = it },
             onRemove = { inputNickname = TextFieldValue("") },
-            hint = stringResource(R.string.signup_nickname_hint)
+            hint = stringResource(R.string.signup_nickname_hint),
+            focusRequester = nicknameFocusRequester,
+            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Next),
+            keyboardActions = KeyboardActions(onNext = { phoneNumberFocusRequester.requestFocus() })
         )
 
         Spacer(modifier = Modifier.height(30.dp))
@@ -160,7 +179,8 @@ fun SignUpScreen(
             isFocused = isPhoneNumberTextFieldFocused,
             onFocusChanged = { isPhoneNumberTextFieldFocused = it },
             onRemove = { inputPhoneNumber = TextFieldValue("") },
-            hint = stringResource(R.string.signup_phone_number_hint)
+            hint = stringResource(R.string.signup_phone_number_hint),
+            focusRequester = phoneNumberFocusRequester
         )
 
         Spacer(modifier = Modifier.weight(1f))