화면 기록 2024-11-13 오전 12.20.05.mov

들어가며

기존 UI의 불편한 UX

화면 기록 2024-11-13 오전 12.29.39.mov

• 직접 입력하고자 하는 텍스트 필드를 클릭해야 해당 필드에 입력이 가능
• 키보드에 의해 다음 텍스트 필드가 가려져 키보드를 없애고, 다시 텍스트 필드를 눌러야 하는 불편함

위와 같은 UX는 추후 무조건 개선해야 한다 생각이 들었고, 개선을 미루기 보다는 바로 해결방법을 찾아보았습니다. 그러던 중 자동으로 다음 텍스트 필드로 포커스를 이동하게 할 수 있는 방식 을 발견하고 적용하게 되었습니다.

design system component 수정사항

위 동작을 하기 위해서는 keboardOptions, keyboardActions를 지정해줘야 하는데요. 따라서 공통 컴포넌트에 다음과 같이 keyboardOptions, keyboardActions property를 추가해줬습니다.

(default 값을 지정해주었기 때문에 기존 구현도 오류 없이 동작합니다!)

@Composable
fun WeQuizTextField(
    modifier: Modifier = Modifier,
    label: String,
    text: String,
    onTextChanged: (String) -> Unit,
    placeholder: String,
    minLines: Int = 1,
    maxLines: Int = 1,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default, // 추가
    keyboardActions: KeyboardActions = KeyboardActions.Default,
) {
    TextField(
        value = text,
        onValueChange = { onTextChanged(it) },
        modifier = modifier.fillMaxWidth(),
        textStyle = MaterialTheme.typography.bodyLarge,
        label = { Text(label) },
        placeholder = { Text(placeholder) },
        minLines = minLines,
        maxLines = maxLines,
        trailingIcon = {
            IconButton(
                onClick = { onTextChanged("") },
            ) {
                Icon(
                    painter = painterResource(R.drawable.outline_cancel_24),
                    tint = MaterialTheme.colorScheme.onSurfaceVariant,
                    contentDescription = stringResource(id = R.string.des_clear_text),
                )
            }
        },
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
    )
}

어떻게 적용해야 할까?

우선 사용을 하기 위해서는 두 가지 상태가 필요합니다.

1. focusRequester 제일 처음 focus를 둘 textField에 설정해줘야 합니다.
2. focusManager 해당 값으로 이제 focus를 다음으로 이동하거나 focus를 제거할 수 있습니다.

[1] focus를 처음으로 갖는 textField에 focusRequest를 지정해주세요!

WeQuizTextField(
    modifier = Modifier.focusRequester(focusRequester),
    label = stringResource(id = R.string.txt_question_title_label),
    text = title,
    onTextChanged = onTitleChanged,
    placeholder = stringResource(id = R.string.txt_question_title_placeholder),
    keyboardOptions = keyboardOptions,
    keyboardActions = keyboardActions,
)