캐릭터 변경 기능 추가 (#70)

* refactor : pass modifier

* feat : add SelectCharacterDialog

* feat : Add character change to settings

* refactor : use string resources for button text

* refactor : lint

* feat : review

* feat : contentDesc

* refactor : en res

app/src/main/kotlin/com/chipichipi/dobedobe/onboarding/OnboardingSelectCharacterScreen.kt

@@ -1,9 +1,13 @@
 package com.chipichipi.dobedobe.onboarding
 
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.chipichipi.dobedobe.R
 import com.chipichipi.dobedobe.core.ui.SelectCharacterScreen
 import org.koin.androidx.compose.koinViewModel
 
@@ -15,9 +19,16 @@ internal fun OnboardingSelectCharacterRoute(
     val selectedCharacter by viewModel.selectedCharacter.collectAsStateWithLifecycle()
 
     SelectCharacterScreen(
-        modifier = modifier,
         selectedCharacter = selectedCharacter,
         onCharacterToggled = viewModel::toggleCharacter,
         onCompleted = viewModel::completeOnboarding,
+        buttonText = R.string.onboarding_all_completed,
+        modifier = modifier
+            .fillMaxSize()
+            .padding(horizontal = 24.dp)
+            .padding(
+                top = 48.dp,
+                bottom = 32.dp,
+            ),
     )
 }

app/src/main/res/values-en/strings.xml

@@ -6,4 +6,5 @@
     <string name="onboarding_goal_hint">ex) Read 1 book per day</string>
     <string name="onboarding_goal_support_message">The simpler the goal, the better the focus.</string>
     <string name="onboarding_goal_completed">Complete</string>
+    <string name="onboarding_all_completed">Start</string>
 </resources>

app/src/main/res/values/strings.xml

@@ -5,4 +5,5 @@
     <string name="onboarding_goal_hint">ex) 1일 1책 읽기</string>
     <string name="onboarding_goal_support_message">목표가 간결할수록 집중력이 높아져요.</string>
     <string name="onboarding_goal_completed">작성 완료</string>
+    <string name="onboarding_all_completed">시작하기</string>
 </resources>

core/ui/src/main/kotlin/com/chipichipi/dobedobe/core/ui/SelectCharacterScreen.kt

@@ -1,12 +1,11 @@
 package com.chipichipi.dobedobe.core.ui
 
+import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -22,16 +21,11 @@ fun SelectCharacterScreen(
     selectedCharacter: CharacterType,
     onCharacterToggled: () -> Unit,
     onCompleted: () -> Unit,
+    @StringRes buttonText: Int,
     modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = modifier
-            .fillMaxSize()
-            .padding(horizontal = 24.dp)
-            .padding(
-                top = 48.dp,
-                bottom = 32.dp,
-            ),
+        modifier = modifier,
     ) {
         Text(
             text = stringResource(R.string.select_character_title),
@@ -59,7 +53,7 @@ fun SelectCharacterScreen(
             onClick = onCompleted,
         ) {
             Text(
-                text = stringResource(R.string.all_complete),
+                text = stringResource(buttonText),
                 style = DobeDobeTheme.typography.heading2,
                 color = DobeDobeTheme.colors.white,
             )
@@ -75,6 +69,7 @@ private fun SelectCharacterScreenPreview() {
             selectedCharacter = CharacterType.Rabbit,
             onCharacterToggled = {},
             onCompleted = {},
+            buttonText = R.string.select_character_title,
         )
     }
 }

core/ui/src/main/res/values-en/strings.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <string name="select_character_title">Please select your running mate</string>
-    <string name="all_complete">Start</string>
     <string name="bird_character_description">Nagging Bird</string>
     <string name="rabbit_character_description">Empathetic Lucky Rabbit</string>
 </resources>

core/ui/src/main/res/values/strings.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <string name="select_character_title">함께 할 러닝메이트를\n선택해 주세요</string>
-    <string name="all_complete">시작하기</string>
     <string name="bird_character_description">마구 쪼는 잔소리무새</string>
     <string name="rabbit_character_description">공감 만점 럭키 토끼</string>
 </resources>

feature/setting/src/main/kotlin/com/chipichipi/dobedobe/feature/setting/SettingScreen.kt

@@ -12,6 +12,7 @@ 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.Alignment
 import androidx.compose.ui.Modifier
@@ -25,8 +26,10 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.chipichipi.dobedobe.core.designsystem.component.DobeDobeSwitch
 import com.chipichipi.dobedobe.core.designsystem.icon.DobeDobeIcons
 import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme
+import com.chipichipi.dobedobe.core.model.CharacterType
 import com.chipichipi.dobedobe.core.notifications.NotificationUtil
 import com.chipichipi.dobedobe.core.notifications.NotificationUtil.areNotificationsEnabled
+import com.chipichipi.dobedobe.feature.setting.component.SelectCharacterDialog
 import com.chipichipi.dobedobe.feature.setting.component.SettingRow
 import com.chipichipi.dobedobe.feature.setting.component.SettingTopAppBar
 import com.chipichipi.dobedobe.feature.setting.util.openPlayStore
@@ -46,6 +49,7 @@ internal fun SettingRoute(
         uiState = settingUiState,
         navigateToBack = navigateToBack,
         onNotificationToggled = viewModel::setGoalNotificationEnabled,
+        onCharacterChangeCompleted = viewModel::changeCharacterCompleted,
     )
 }
 
@@ -54,6 +58,7 @@ private fun SettingScreen(
     uiState: SettingUiState,
     navigateToBack: () -> Unit,
     onNotificationToggled: (Boolean) -> Unit,
+    onCharacterChangeCompleted: (CharacterType) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Scaffold(
@@ -81,6 +86,8 @@ private fun SettingScreen(
                     SettingBody(
                         isGoalNotificationEnabled = uiState.isGoalNotificationEnabled,
                         onNotificationToggled = onNotificationToggled,
+                        characterType = uiState.characterType,
+                        onCharacterChangeCompleted = onCharacterChangeCompleted,
                     )
                 }
             }
@@ -96,9 +103,12 @@ private fun SettingScreen(
 private fun SettingBody(
     isGoalNotificationEnabled: Boolean,
     onNotificationToggled: (Boolean) -> Unit,
+    characterType: CharacterType,
+    onCharacterChangeCompleted: (CharacterType) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val context = LocalContext.current
+    var showSelectCharacterDialog by rememberSaveable { mutableStateOf(false) }
 
     val handleNotificationToggle: (Boolean) -> Unit = { enabled ->
         NotificationUtil.handleNotificationToggle(
@@ -108,6 +118,14 @@ private fun SettingBody(
         )
     }
 
+    if (showSelectCharacterDialog) {
+        SelectCharacterDialog(
+            onDismissRequest = { showSelectCharacterDialog = false },
+            characterType = characterType,
+            onCharacterChangeCompleted = onCharacterChangeCompleted,
+        )
+    }
+
     Column(
         modifier = modifier
             .fillMaxSize(),
@@ -137,6 +155,17 @@ private fun SettingBody(
                 tint = Color.Unspecified,
             )
         }
+
+        SettingRow(
+            label = stringResource(R.string.feature_setting_change_character),
+            onClick = { showSelectCharacterDialog = true },
+        ) {
+            Icon(
+                painter = painterResource(DobeDobeIcons.ArrowForward),
+                contentDescription = null,
+                tint = Color.Unspecified,
+            )
+        }
     }
 }
 

feature/setting/src/main/kotlin/com/chipichipi/dobedobe/feature/setting/SettingUiState.kt

@@ -1,9 +1,12 @@
 package com.chipichipi.dobedobe.feature.setting
 
+import com.chipichipi.dobedobe.core.model.CharacterType
+
 sealed interface SettingUiState {
     data object Loading : SettingUiState
 
     data class Success(
         val isGoalNotificationEnabled: Boolean,
+        val characterType: CharacterType,
     ) : SettingUiState
 }

feature/setting/src/main/kotlin/com/chipichipi/dobedobe/feature/setting/SettingViewModel.kt

@@ -3,6 +3,7 @@ package com.chipichipi.dobedobe.feature.setting
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.chipichipi.dobedobe.core.data.repository.UserRepository
+import com.chipichipi.dobedobe.core.model.CharacterType
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
@@ -12,7 +13,12 @@ internal class SettingViewModel(
     private val userRepository: UserRepository,
 ) : ViewModel() {
     val settingUiState = userRepository.userData
-        .map { SettingUiState.Success(it.isGoalNotificationEnabled) }
+        .map { user ->
+            SettingUiState.Success(
+                isGoalNotificationEnabled = user.isGoalNotificationEnabled,
+                characterType = user.characterType,
+            )
+        }
         .stateIn(
             scope = viewModelScope,
             started = SharingStarted.WhileSubscribed(5_000),
@@ -24,4 +30,10 @@ internal class SettingViewModel(
             userRepository.setGoalNotificationEnabled(checked)
         }
     }
+
+    fun changeCharacterCompleted(type: CharacterType) {
+        viewModelScope.launch {
+            userRepository.saveCharacter(type)
+        }
+    }
 }

feature/setting/src/main/kotlin/com/chipichipi/dobedobe/feature/setting/component/SelectCharacterDialog.kt

@@ -0,0 +1,97 @@
+package com.chipichipi.dobedobe.feature.setting.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Cancel
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import com.chipichipi.dobedobe.core.designsystem.component.ThemePreviews
+import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme
+import com.chipichipi.dobedobe.core.model.CharacterType
+import com.chipichipi.dobedobe.core.ui.SelectCharacterScreen
+import com.chipichipi.dobedobe.feature.setting.R
+
+@Composable
+internal fun SelectCharacterDialog(
+    onDismissRequest: () -> Unit,
+    characterType: CharacterType,
+    onCharacterChangeCompleted: (CharacterType) -> Unit,
+) {
+    var selectedCharacterType by rememberSaveable { mutableStateOf(characterType) }
+
+    Dialog(
+        onDismissRequest = onDismissRequest,
+        properties = DialogProperties(
+            usePlatformDefaultWidth = false,
+        ),
+    ) {
+        Surface(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 24.dp),
+            shape = RoundedCornerShape(16.dp),
+            color = DobeDobeTheme.colors.white,
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 10.dp, bottom = 32.dp),
+            ) {
+                IconButton(
+                    modifier = Modifier.align(Alignment.End),
+                    onClick = onDismissRequest,
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Cancel,
+                        contentDescription = "close",
+                    )
+                }
+
+                SelectCharacterScreen(
+                    selectedCharacter = selectedCharacterType,
+                    onCompleted = {
+                        onCharacterChangeCompleted(selectedCharacterType)
+                        onDismissRequest()
+                    },
+                    onCharacterToggled = {
+                        selectedCharacterType = if (selectedCharacterType == CharacterType.Rabbit) {
+                            CharacterType.Bird
+                        } else {
+                            CharacterType.Rabbit
+                        }
+                    },
+                    buttonText = R.string.feature_setting_change_character_completed,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 24.dp),
+                )
+            }
+        }
+    }
+}
+
+@ThemePreviews
+@Composable
+private fun SelectCharacterDialogPreview() {
+    DobeDobeTheme {
+        SelectCharacterDialog(
+            onDismissRequest = {},
+            characterType = CharacterType.Rabbit,
+            onCharacterChangeCompleted = {},
+        )
+    }
+}

feature/setting/src/main/res/values-en/strings.xml

@@ -3,4 +3,6 @@
     <string name="feature_setting">Setting</string>
     <string name="feature_setting_app_feedback">Leave App Feedback</string>
     <string name="feature_setting_goal_notifications">Notification</string>
+    <string name="feature_setting_change_character">Change Character</string>
+    <string name="feature_setting_change_character_completed">Confirm Change</string>
 </resources>

feature/setting/src/main/res/values/strings.xml

@@ -3,4 +3,6 @@
     <string name="feature_setting">설정</string>
     <string name="feature_setting_app_feedback">앱 피드백 남기기</string>
     <string name="feature_setting_goal_notifications">알림</string>
+    <string name="feature_setting_change_character">캐릭터 변경하기</string>
+    <string name="feature_setting_change_character_completed">변경하기</string>
 </resources>