[REFACTOR] 알람 설정 바텀 시트 리팩토링

app/build.gradle.kts

@@ -48,6 +48,7 @@ dependencies {
     implementation(projects.feature.setting)
     implementation(projects.feature.webview)
     implementation(platform(libs.firebase.bom))
+    implementation(libs.compose.material)
     implementation(libs.firebase.analytics)
     implementation(libs.firebase.crashlytics)
     implementation(libs.play.services.ads)

app/src/main/AndroidManifest.xml

@@ -22,8 +22,9 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.Orbit"
+        android:enableOnBackInvokedCallback="true"
         android:usesCleartextTraffic="true"
-        tools:targetApi="31">
+        tools:targetApi="33">
 
         <meta-data
             android:name="com.google.android.gms.ads.APPLICATION_ID"

app/src/main/java/com/yapp/orbit/OrbitNavHost.kt

@@ -25,6 +25,9 @@ import com.yapp.mission.missionScreen
 import com.yapp.onboarding.onboardingNavGraph
 import com.yapp.setting.settingNavGraph
 import com.yapp.splash.splashScreen
+import com.yapp.ui.component.bottomsheet.OrbitBottomSheetLayout
+import com.yapp.ui.component.bottomsheet.OrbitBottomSheetState
+import com.yapp.ui.component.bottomsheet.rememberOrbitBottomSheetState
 import com.yapp.ui.component.snackbar.CustomSnackBarVisuals
 import com.yapp.ui.component.snackbar.OrbitSnackBar
 import com.yapp.webview.webViewScreen
@@ -34,34 +37,45 @@ import com.yapp.webview.webViewScreen
 internal fun OrbitNavHost(
     modifier: Modifier = Modifier,
     navigator: OrbitNavigator = rememberOrbitNavigator(),
+    bottomSheetState: OrbitBottomSheetState = rememberOrbitBottomSheetState(),
 ) {
     val snackBarHostState = remember { SnackbarHostState() }
 
-    Scaffold(
-        modifier = modifier,
-        snackbarHost = {
-            OrbitSnackBarHost(snackBarHostState = snackBarHostState)
-        },
-        containerColor = OrbitTheme.colors.gray_900,
+    OrbitBottomSheetLayout(
+        sheetState = bottomSheetState,
     ) {
-        NavHost(
-            navController = navigator.navController,
-            startDestination = navigator.startDestination,
-            modifier = Modifier.navigationBarsPadding(),
+        Scaffold(
+            modifier = modifier,
+            snackbarHost = {
+                OrbitSnackBarHost(snackBarHostState = snackBarHostState)
+            },
+            containerColor = OrbitTheme.colors.gray_900,
         ) {
-            splashScreen(navigator = navigator)
-            onboardingNavGraph(navigator = navigator)
-            homeNavGraph(
-                navigator = navigator,
-                snackBarHostState = snackBarHostState,
-            )
-            missionScreen(navigator = navigator)
-            fortuneNavGraph(
-                navigator = navigator,
-                snackBarHostState = snackBarHostState,
-            )
-            settingNavGraph(navigator = navigator)
-            webViewScreen(navigator = navigator)
+            NavHost(
+                navController = navigator.navController,
+                startDestination = navigator.startDestination,
+                modifier = Modifier.navigationBarsPadding(),
+            ) {
+                splashScreen(
+                    navigator = navigator,
+                )
+                onboardingNavGraph(
+                    navigator = navigator,
+                    bottomSheetState = bottomSheetState,
+                )
+                homeNavGraph(
+                    navigator = navigator,
+                    bottomSheetState = bottomSheetState,
+                    snackBarHostState = snackBarHostState,
+                )
+                missionScreen(navigator = navigator)
+                fortuneNavGraph(
+                    navigator = navigator,
+                    snackBarHostState = snackBarHostState,
+                )
+                settingNavGraph(navigator = navigator)
+                webViewScreen(navigator = navigator)
+            }
         }
     }
 }

core/ui/src/main/java/com/yapp/ui/component/bottomsheet/BottomSheetContent.kt

@@ -0,0 +1,6 @@
+package com.yapp.ui.component.bottomsheet
+
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.runtime.Composable
+
+typealias BottomSheetContent = @Composable BoxScope.() -> Unit

core/ui/src/main/java/com/yapp/ui/component/OrbitBottomSheet.kt → core/ui/src/main/java/com/yapp/ui/component/bottomsheet/OrbitBottomSheetLayout.kt

@@ -1,22 +1,19 @@
-package com.yapp.ui.component
+package com.yapp.ui.component.bottomsheet
 
 import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ModalBottomSheetLayout
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.rememberCoroutineScope
-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.geometry.Rect
@@ -33,42 +30,31 @@ import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun OrbitBottomSheet(
+fun OrbitBottomSheetLayout(
     modifier: Modifier = Modifier,
-    sheetState: SheetState = rememberModalBottomSheetState(
-        skipPartiallyExpanded = true,
-    ),
-    isSheetOpen: Boolean,
-    onDismissRequest: () -> Unit = {},
+    sheetState: OrbitBottomSheetState,
     shape: Shape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp),
     containerColor: Color = OrbitTheme.colors.gray_800,
     strokeColor: Color = OrbitTheme.colors.gray_700,
     strokeThickness: Dp = 1.dp,
     content: @Composable () -> Unit,
 ) {
-    val scope = rememberCoroutineScope()
-    if (isSheetOpen) {
-        ModalBottomSheet(
-            modifier = modifier,
-            sheetState = sheetState,
-            shape = shape,
-            onDismissRequest = {
-                scope.launch {
-                    sheetState.hide()
-                    onDismissRequest()
-                }
-            },
-            containerColor = containerColor,
-            dragHandle = null,
-        ) {
+    ModalBottomSheetLayout(
+        modifier = modifier.navigationBarsPadding(),
+        sheetState = sheetState.state,
+        sheetShape = shape,
+        sheetBackgroundColor = containerColor,
+        sheetContent = {
             Box {
-                content()
+                sheetState.content?.invoke(this)
                 BottomSheetTopRoundedStroke(
                     strokeColor = strokeColor,
                     strokeThickness = strokeThickness,
                 )
             }
-        }
+        },
+    ) {
+        content()
     }
 }
 
@@ -139,43 +125,31 @@ fun BottomSheetTopRoundedStroke(
 @Preview
 @Composable
 fun OrbitBottomSheetPreview() {
-    var isSheetOpen by rememberSaveable { mutableStateOf(true) }
-    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    val sheetState = rememberOrbitBottomSheetState()
     val scope = rememberCoroutineScope()
 
     OrbitTheme {
-        Button(
-            onClick = {
-                scope.launch {
-                    sheetState.show()
-                }.invokeOnCompletion {
-                    if (!isSheetOpen) {
-                        isSheetOpen = true
-                    }
-                }
-            },
-        ) {
-            Text("Toggle Bottom Sheet")
-        }
-
-        OrbitBottomSheet(
-            isSheetOpen = isSheetOpen,
+        OrbitBottomSheetLayout(
             sheetState = sheetState,
-            onDismissRequest = { isSheetOpen = !isSheetOpen },
             content = {
                 Box(
                     modifier = Modifier
-                        .fillMaxWidth()
-                        .height(600.dp),
+                        .fillMaxSize()
+                        .background(color = OrbitTheme.colors.white),
                     contentAlignment = Alignment.Center,
                 ) {
                     Button(
                         onClick = {
                             scope.launch {
-                                sheetState.hide()
-                            }.invokeOnCompletion {
-                                if (isSheetOpen) {
-                                    isSheetOpen = false
+                                sheetState.show {
+                                    Box(
+                                        modifier = Modifier
+                                            .fillMaxWidth()
+                                            .height(500.dp),
+                                        contentAlignment = Alignment.Center,
+                                    ) {
+                                        Text("This is a bottom sheet content")
+                                    }
                                 }
                             }
                         },

core/ui/src/main/java/com/yapp/ui/component/bottomsheet/OrbitBottomSheetState.kt

@@ -0,0 +1,49 @@
+package com.yapp.ui.component.bottomsheet
+
+import androidx.compose.material.ModalBottomSheetState
+import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+
+@Composable
+fun rememberOrbitBottomSheetState(): OrbitBottomSheetState {
+    val contentState = remember { mutableStateOf<BottomSheetContent?>(null) }
+
+    val bottomSheetState = rememberModalBottomSheetState(
+        initialValue = ModalBottomSheetValue.Hidden,
+        confirmValueChange = { value ->
+            if (value == ModalBottomSheetValue.Hidden) {
+                contentState.value = null
+            }
+            true
+        },
+        skipHalfExpanded = true,
+    )
+
+    return remember(contentState, bottomSheetState) {
+        OrbitBottomSheetState(
+            state = bottomSheetState,
+            contentState = contentState,
+            setContent = { contentState.value = it },
+        )
+    }
+}
+
+class OrbitBottomSheetState(
+    val state: ModalBottomSheetState,
+    val contentState: State<BottomSheetContent?>,
+    private val setContent: (BottomSheetContent?) -> Unit,
+) {
+    val content: BottomSheetContent?
+        get() = contentState.value
+
+    suspend fun show(sheetContent: BottomSheetContent) {
+        setContent(sheetContent)
+        state.show()
+    }
+
+    suspend fun hide() = state.hide()
+}

feature/home/src/main/java/com/yapp/home/HomeNavGraph.kt

@@ -8,13 +8,15 @@ import com.yapp.common.navigation.OrbitNavigator
 import com.yapp.common.navigation.route.HomeBaseRoute
 import com.yapp.common.navigation.route.HomeDestination
 import com.yapp.home.alarm.addedit.AlarmAddEditRoute
+import com.yapp.ui.component.bottomsheet.OrbitBottomSheetState
 
 const val ADD_ALARM_RESULT_KEY = "addAlarmResult"
 const val UPDATE_ALARM_RESULT_KEY = "updateAlarmResult"
 const val DELETE_ALARM_RESULT_KEY = "deleteAlarmResult"
 
 fun NavGraphBuilder.homeNavGraph(
     navigator: OrbitNavigator,
+    bottomSheetState: OrbitBottomSheetState,
     snackBarHostState: SnackbarHostState,
 ) {
     navigation<HomeBaseRoute>(
@@ -30,6 +32,7 @@ fun NavGraphBuilder.homeNavGraph(
         composable<HomeDestination.AlarmAddEdit> {
             AlarmAddEditRoute(
                 navigator = navigator,
+                bottomSheetState = bottomSheetState,
                 snackBarHostState = snackBarHostState,
             )
         }

feature/home/src/main/java/com/yapp/home/alarm/addedit/AlarmAddEditContract.kt

@@ -51,10 +51,8 @@ sealed class AlarmAddEditContract {
 
     data class AlarmSnoozeState(
         val isSnoozeEnabled: Boolean = true,
-        val snoozeIntervalIndex: Int = 2,
-        val snoozeCountIndex: Int = 2,
-        val snoozeIntervals: List<String> = listOf("1분", "3분", "5분", "10분", "15분"),
-        val snoozeCounts: List<String> = listOf("1회", "3회", "5회", "10회", "무한"),
+        val snoozeInterval: Int = 5,
+        val snoozeCount: Int = 5,
     )
 
     data class AlarmSoundState(
@@ -83,16 +81,25 @@ sealed class AlarmAddEditContract {
         data object ToggleWeekendsSelection : Action()
         data class ToggleSpecificDaySelection(val day: AlarmDay) : Action()
         data object ToggleHolidaySkipOption : Action()
-        data object ToggleSnoozeOption : Action()
-        data class SaveMission(val type: MissionType, val count: Int) : Action()
+        data class SaveMissionSetting(val type: MissionType, val count: Int) : Action()
+        data class SaveSnoozeSetting(
+            val enabled: Boolean,
+            val interval: Int,
+            val count: Int,
+        ) : Action()
+        data class SaveSoundSetting(
+            val vibrationEnabled: Boolean,
+            val soundEnabled: Boolean,
+            val soundVolume: Int,
+            val soundIndex: Int,
+        ) : Action()
+        data class ToggleVibrationEnabled(val enabled: Boolean) : Action()
+        data class ToggleSoundEnabled(val enabled: Boolean) : Action()
+        data class SetSoundVolume(val volume: Int) : Action()
+        data class SetSoundIndex(val index: Int) : Action()
+        data class ShowBottomSheet(val sheetType: BottomSheetType) : Action()
         data class NavigateToMissionPreview(val missionType: MissionType, val missionCount: Int) : Action()
-        data class SetSnoozeInterval(val index: Int) : Action()
-        data class SetSnoozeRepeatCount(val index: Int) : Action()
-        data object ToggleVibrationOption : Action()
-        data object ToggleSoundOption : Action()
-        data class AdjustSoundVolume(val volume: Int) : Action()
-        data class SelectAlarmSound(val index: Int) : Action()
-        data class ToggleBottomSheet(val sheetType: BottomSheetType) : Action()
+        data object HideBottomSheet : Action()
     }
 
     sealed class BottomSheetType {
@@ -109,6 +116,12 @@ sealed class AlarmAddEditContract {
             val missionCount: Int,
         ) : SideEffect()
 
+        data class ShowBottomSheet(
+            val sheetType: BottomSheetType,
+        ) : SideEffect()
+
+        data object HideBottomSheet : SideEffect()
+
         data class SaveAlarm(val id: Long) : SideEffect()
 
         data class UpdateAlarm(val id: Long) : SideEffect()
@@ -137,13 +150,8 @@ internal fun AlarmAddEditContract.State.toAlarm(id: Long = 0): Alarm {
         missionType = missionState.missionType,
         missionCount = missionState.missionCount,
         isSnoozeEnabled = snoozeState.isSnoozeEnabled,
-        snoozeInterval = snoozeState.snoozeIntervals.getOrNull(snoozeState.snoozeIntervalIndex)
-            ?.filter { it.isDigit() }
-            ?.toIntOrNull()
-            ?: 5,
-        snoozeCount = snoozeState.snoozeCounts.getOrNull(snoozeState.snoozeCountIndex)
-            ?.let { if (it == "무한") -1 else it.filter { char -> char.isDigit() }.toIntOrNull() ?: 1 }
-            ?: 1,
+        snoozeInterval = snoozeState.snoozeInterval,
+        snoozeCount = snoozeState.snoozeCount,
         isVibrationEnabled = soundState.isVibrationEnabled,
         isSoundEnabled = soundState.isSoundEnabled,
         soundUri = soundState.sounds.getOrNull(soundState.soundIndex)?.uri.toString(),