[feat]: 수정화면으로 넘어갈 때 cursor 맨 뒤에 focus 잡히게 구현 (#133)

Nico1eKim · Nico1eKim · commit 5b0c1aea3396 · 2025-09-10T22:51:21.000+09:00
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/OpinionInputSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/OpinionInputSection.kt
@@ -11,9 +11,12 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.TextFieldValue
@@ -29,7 +32,8 @@ fun OpinionInputSection(
     textFieldValue: TextFieldValue,
     onTextChange: (TextFieldValue) -> Unit,
     hint: String = stringResource(R.string.my_opinion_placeholder),
-    maxLength: Int = 500
+    maxLength: Int = 500,
+    focusRequester: FocusRequester = remember { FocusRequester() }
 ) {
     val text = textFieldValue.text
 
@@ -52,7 +56,8 @@ fun OpinionInputSection(
                 },
                 textStyle = typography.menu_r400_s14_h24.copy(color = colors.White),
                 modifier = Modifier
-                    .fillMaxWidth(),
+                    .fillMaxWidth()
+                    .focusRequester(focusRequester),
                 cursorBrush = SolidColor(colors.NeonGreen),
                 decorationBox = { innerTextField ->
                     Box(
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteInputSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteInputSection.kt
@@ -18,9 +18,12 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
@@ -30,16 +33,17 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun VoteInputSection(
-    title: String,
-    onTitleChange: (String) -> Unit,
+    titleValue: TextFieldValue,
+    onTitleChange: (TextFieldValue) -> Unit,
     options: List<String>,
     onOptionChange: (index: Int, newText: String) -> Unit,
     onAddOption: () -> Unit,
     onRemoveOption: (index: Int) -> Unit,
     modifier: Modifier = Modifier,
     isEnabled: Boolean = true,
     maxOptionLength: Int = 20,
-    maxOptions: Int = 5
+    maxOptions: Int = 5,
+    focusRequester: FocusRequester = remember { FocusRequester() },
 ) {
     val focusManager = LocalFocusManager.current
 
@@ -55,15 +59,15 @@ fun VoteInputSection(
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
         BasicTextField(
-            value = title,
-            onValueChange = { if (it.length <= maxOptionLength) onTitleChange(it) },
-//            enabled = isEnabled,
+            value = titleValue,
+            onValueChange = { if (it.text.length <= maxOptionLength) onTitleChange(it) },
             textStyle = typography.smalltitle_m500_s18_h24.copy(color = colors.White),
             modifier = Modifier
-                .fillMaxWidth(),
+                .fillMaxWidth()
+                .focusRequester(focusRequester),
             cursorBrush = SolidColor(colors.NeonGreen),
             decorationBox = { innerTextField ->
-                if (title.isEmpty()) {
+                if (titleValue.text.isEmpty()) {
                     Text(
                         text = stringResource(R.string.vote_title_placeholder),
                         color = colors.Grey02,
@@ -116,12 +120,14 @@ fun VoteInputSection(
 @Preview
 @Composable
 private fun VoteInputSectionPreview() {
-    var title by rememberSaveable { mutableStateOf("") }
+    var value by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(TextFieldValue(""))
+    }
     var options by rememberSaveable { mutableStateOf(mutableListOf("", "")) }
 
     VoteInputSection(
-        title = title,
-        onTitleChange = { title = it },
+        titleValue = value,
+        onTitleChange = { value = it },
         options = options,
         onOptionChange = { index, newText ->
             options = options.toMutableList().also { it[index] = newText }
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteCreateScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteCreateScreen.kt
@@ -18,6 +18,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 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.layout.LayoutCoordinates
 import androidx.compose.ui.layout.positionInRoot
 import androidx.compose.ui.platform.LocalDensity
@@ -38,6 +39,7 @@ import com.texthip.thip.ui.group.note.viewmodel.GroupNoteCreateUiState
 import com.texthip.thip.ui.group.note.viewmodel.GroupNoteCreateViewModel
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
 
 @Composable
 fun GroupNoteCreateScreen(
@@ -87,6 +89,15 @@ fun GroupNoteCreateContent(
     // Tooltip 위치 측정용 state
     val iconCoordinates = remember { mutableStateOf<LayoutCoordinates?>(null) }
 
+    val focusRequester = remember { FocusRequester() }
+
+    LaunchedEffect(uiState.isEditMode) {
+        if (uiState.isEditMode) {
+            delay(100)
+            focusRequester.requestFocus()
+        }
+    }
+
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -125,7 +136,8 @@ fun GroupNoteCreateContent(
 
                 OpinionInputSection(
                     textFieldValue = uiState.opinionTextFieldValue,
-                    onTextChange = { onEvent(GroupNoteCreateEvent.OpinionChanged(it)) }
+                    onTextChange = { onEvent(GroupNoteCreateEvent.OpinionChanged(it)) },
+                    focusRequester = focusRequester
                 )
             }
         }
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupVoteCreateScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupVoteCreateScreen.kt
@@ -18,10 +18,12 @@ import androidx.compose.runtime.saveable.rememberSaveable
 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.layout.LayoutCoordinates
 import androidx.compose.ui.layout.positionInRoot
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
@@ -38,6 +40,7 @@ import com.texthip.thip.ui.group.note.viewmodel.GroupVoteCreateUiState
 import com.texthip.thip.ui.group.note.viewmodel.GroupVoteCreateViewModel
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
 
 @Composable
 fun GroupVoteCreateScreen(
@@ -86,6 +89,15 @@ fun GroupVoteCreateContent(
     var showTooltip by rememberSaveable { mutableStateOf(false) }
     val iconCoordinates = remember { mutableStateOf<LayoutCoordinates?>(null) }
 
+    val focusRequester = remember { FocusRequester() }
+
+    LaunchedEffect(uiState.isEditMode) {
+        if (uiState.isEditMode) {
+            delay(100)
+            focusRequester.requestFocus()
+        }
+    }
+
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -120,7 +132,7 @@ fun GroupVoteCreateContent(
                 )
 
                 VoteInputSection(
-                    title = uiState.title,
+                    titleValue = uiState.titleValue,
                     onTitleChange = { onEvent(GroupVoteCreateEvent.TitleChanged(it)) },
                     options = uiState.options,
                     onOptionChange = { index, newText ->
@@ -130,7 +142,8 @@ fun GroupVoteCreateContent(
                     onRemoveOption = { index ->
                         onEvent(GroupVoteCreateEvent.RemoveOptionClicked(index))
                     },
-                    isEnabled = !uiState.isEditMode
+                    isEnabled = !uiState.isEditMode,
+                    focusRequester = focusRequester
                 )
             }
         }
@@ -173,7 +186,7 @@ private fun GroupVoteCreateScreenPreview() {
         GroupVoteCreateContent(
             uiState = GroupVoteCreateUiState(
                 pageText = "123",
-                title = "가장 인상깊은 구절은?",
+                titleValue = TextFieldValue("이번 모임의 장소는 어디가 좋을까요?"),
                 options = listOf("1연 1행", "2연 3행", ""),
                 bookTotalPage = 600,
                 isGeneralReviewEnabled = true
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupVoteCreateViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupVoteCreateViewModel.kt
@@ -1,5 +1,7 @@
 package com.texthip.thip.ui.group.note.viewmodel
 
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.texthip.thip.data.model.rooms.request.VoteItem
@@ -14,7 +16,7 @@ import javax.inject.Inject
 data class GroupVoteCreateUiState(
     // 입력 값
     val pageText: String = "",
-    val title: String = "",
+    val titleValue: TextFieldValue = TextFieldValue(""),
     val options: List<String> = listOf("", ""), // 옵션은 최소 2개로 시작
     val isGeneralReview: Boolean = false,
     val isEditMode: Boolean = false,
@@ -37,14 +39,14 @@ data class GroupVoteCreateUiState(
         get() {
             val filledOptionsCount = options.count { it.isNotBlank() }
             return (isGeneralReview || pageText.isNotBlank()) &&
-                    title.isNotBlank() &&
+                    titleValue.text.isNotBlank() &&
                     filledOptionsCount >= 2
         }
 }
 
 sealed interface GroupVoteCreateEvent {
     data class PageChanged(val text: String) : GroupVoteCreateEvent
-    data class TitleChanged(val text: String) : GroupVoteCreateEvent
+    data class TitleChanged(val newValue: TextFieldValue) : GroupVoteCreateEvent
     data class OptionChanged(val index: Int, val text: String) : GroupVoteCreateEvent
     data class GeneralReviewToggled(val isChecked: Boolean) : GroupVoteCreateEvent
     data object AddOptionClicked : GroupVoteCreateEvent
@@ -83,7 +85,10 @@ class GroupVoteCreateViewModel @Inject constructor(
                     postId = postId,
                     pageText = page.toString(),
                     isGeneralReview = isOverview,
-                    title = title,
+                    titleValue = TextFieldValue(
+                        text = title,
+                        selection = TextRange(title.length)
+                    ),
                     options = options,
                     bookTotalPage = totalPage,
                     isGeneralReviewEnabled = isOverviewPossible
@@ -106,7 +111,7 @@ class GroupVoteCreateViewModel @Inject constructor(
                 _uiState.update { it.copy(pageText = event.text) }
             }
 
-            is GroupVoteCreateEvent.TitleChanged -> _uiState.update { it.copy(title = event.text) }
+            is GroupVoteCreateEvent.TitleChanged -> _uiState.update { it.copy(titleValue = event.newValue) }
             is GroupVoteCreateEvent.OptionChanged -> _uiState.update {
                 val newOptions = it.options.toMutableList()
                 newOptions[event.index] = event.text
@@ -152,7 +157,7 @@ class GroupVoteCreateViewModel @Inject constructor(
             roomsRepository.patchRoomsVote(
                 roomId = roomId,
                 voteId = postId,
-                content = currentState.title,
+                content = currentState.titleValue.text
             ).onSuccess {
                 _uiState.update { it.copy(isLoading = false, isSuccess = true) }
             }.onFailure { throwable ->
@@ -185,7 +190,7 @@ class GroupVoteCreateViewModel @Inject constructor(
                 roomId = roomId,
                 page = pageNumber,
                 isOverview = currentState.isGeneralReview,
-                content = currentState.title,
+                content = currentState.titleValue.text,
                 voteItemList = voteItems
             ).onSuccess {
                 _uiState.update { it.copy(isLoading = false, isSuccess = true) }
