Replace BottomSheetScaffold with ModalBottomSheet

presentation/build.gradle

@@ -78,6 +78,7 @@ dependencies {
 
     implementation 'androidx.appcompat:appcompat:1.7.1'
     implementation 'com.google.android.material:material:1.13.0'
+    implementation 'androidx.compose.runtime:runtime:1.9.5'
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.3.0'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.7.0'

presentation/src/main/java/daily/dayo/presentation/common/BottomSheetController.kt

@@ -0,0 +1,31 @@
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+@Stable
+class BottomSheetController {
+    var sheetContent: @Composable (() -> Unit) by mutableStateOf({})
+        private set
+
+    var isVisible by mutableStateOf(false)
+        private set
+
+    fun setContent(content: @Composable () -> Unit) {
+        sheetContent = content
+    }
+
+    fun show() {
+        isVisible = true
+    }
+
+    fun hide() {
+        isVisible = false
+    }
+}
+
+val LocalBottomSheetController = compositionLocalOf<BottomSheetController> {
+    error("No BottomSheetController provided")
+}

presentation/src/main/java/daily/dayo/presentation/screen/account/AccountScreen.kt

@@ -1,32 +1,23 @@
 package daily.dayo.presentation.screen.account
 
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
+import BottomSheetController
+import LocalBottomSheetController
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
-import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.SheetValue
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
-import daily.dayo.presentation.theme.Dark
-import daily.dayo.presentation.view.dialog.getBottomSheetDialogState
-import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -35,30 +26,19 @@ internal fun AccountScreen(
 ) {
     val coroutineScope = rememberCoroutineScope()
     val snackBarHostState = remember { SnackbarHostState() }
-    var bottomSheetContent by remember { mutableStateOf<(@Composable () -> Unit)?>(null) }
-    val bottomSheetState = getBottomSheetDialogState()
-    val bottomSheetDimAlpha by remember {
-        derivedStateOf { if (bottomSheetState.bottomSheetState.currentValue == SheetValue.Expanded) 0.6f else 0f }
-    }
-    val animatedDimAlpha by animateFloatAsState(targetValue = bottomSheetDimAlpha)
+    val bottomSheetController = remember { BottomSheetController() }
+    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
 
-    BottomSheetScaffold(
-        modifier = Modifier.systemBarsPadding(),
-        scaffoldState = bottomSheetState,
-        sheetDragHandle = null,
-        sheetContent = {
-            Box(modifier = Modifier.navigationBarsPadding()) {
-                bottomSheetContent?.invoke()
+    CompositionLocalProvider(LocalBottomSheetController provides bottomSheetController) {
+        Scaffold(
+            modifier = Modifier.systemBarsPadding(),
+            snackbarHost = {
+                SnackbarHost(
+                    hostState = snackBarHostState,
+                    modifier = Modifier.navigationBarsPadding()
+                )
             }
-        },
-        sheetPeekHeight = 0.dp,
-        snackbarHost = {
-            SnackbarHost(
-                hostState = snackBarHostState,
-                modifier = Modifier.navigationBarsPadding()
-            )
-        },
-        content = { innerPadding ->
+        ) { innerPadding ->
             Box(Modifier.padding(innerPadding)) {
                 NavHost(
                     navController = navigator.navController,
@@ -74,27 +54,23 @@ internal fun AccountScreen(
                         navigateToResetPassword = { navigator.navigateResetPassword() },
                         navigateToSignUpEmail = { navigator.navigateSignUpEmail() },
                         navigateToProfileSetting = { navigator.navigateProfileSetting() },
-                        navigateToRules = { route -> navigator.navigateRules(route) },
-                        bottomSheetState = bottomSheetState,
-                        bottomSheetContent = { content ->
-                            bottomSheetContent = content
-                        }
+                        navigateToRules = { route -> navigator.navigateRules(route) }
                     )
                 }
 
-                if (animatedDimAlpha > 0f) {
-                    Box(
-                        modifier = Modifier
-                            .fillMaxSize()
-                            .background(Dark.copy(alpha = animatedDimAlpha))
-                            .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
-                                coroutineScope.launch { bottomSheetState.bottomSheetState.hide() }
-                            }
-                    )
+                if (bottomSheetController.isVisible) {
+                    ModalBottomSheet(
+                        onDismissRequest = { bottomSheetController.hide() },
+                        modifier = Modifier.navigationBarsPadding(),
+                        sheetState = bottomSheetState,
+                        dragHandle = null
+                    ) {
+                        bottomSheetController.sheetContent()
+                    }
                 }
             }
         }
-    )
+    }
 }
 
 sealed class AccountScreen(val route: String) {

presentation/src/main/java/daily/dayo/presentation/screen/account/SetProfileSetupView.kt

@@ -1,5 +1,6 @@
 package daily.dayo.presentation.screen.account
 
+import LocalBottomSheetController
 import android.content.Context
 import android.graphics.Bitmap
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -11,13 +12,11 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.BottomSheetScaffoldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -30,17 +29,12 @@ import daily.dayo.presentation.common.extension.clickableSingle
 import daily.dayo.presentation.screen.account.model.NicknameCertificationState
 import daily.dayo.presentation.view.BadgeRoundImageView
 import daily.dayo.presentation.view.DayoTextField
-import daily.dayo.presentation.view.dialog.getBottomSheetDialogState
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Preview
 @Composable
 fun SetProfileSetupView(
     context: Context = LocalContext.current,
-    bottomSheetState: BottomSheetScaffoldState = getBottomSheetDialogState(),
-    coroutineScope: CoroutineScope = rememberCoroutineScope(),
     isNextButtonEnabled: MutableState<Boolean> = remember { mutableStateOf(false) },
     isNextButtonClickable: MutableState<Boolean> = remember { mutableStateOf(false) },
     nicknameState: MutableState<String> = remember { mutableStateOf("") },
@@ -52,6 +46,7 @@ fun SetProfileSetupView(
     requestIsNicknameDuplicate: (String) -> Unit = {},
     profileImg: Bitmap? = null,
 ) {
+    val bottomSheetController = LocalBottomSheetController.current
     val placeholderResId = remember { R.drawable.ic_profile_default }
     val interactionSource = remember { MutableInteractionSource() }
     val profileImageClickModifier = remember {
@@ -62,9 +57,7 @@ fun SetProfileSetupView(
             .clickableSingle(
                 interactionSource = interactionSource,
                 indication = null,
-                onClick = {
-                    coroutineScope.launch { bottomSheetState.bottomSheetState.expand() }
-                }
+                onClick = { bottomSheetController.show() }
             )
     }
 

presentation/src/main/java/daily/dayo/presentation/screen/account/SignInNavigation.kt

@@ -1,9 +1,7 @@
 package daily.dayo.presentation.screen.account
 
-import androidx.compose.material3.BottomSheetScaffoldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SnackbarHostState
-import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavController
@@ -47,9 +45,7 @@ fun NavGraphBuilder.signInNavGraph(
     navigateToResetPassword: () -> Unit,
     navigateToSignUpEmail: () -> Unit,
     navigateToRules: (RuleType) -> Unit,
-    navigateToProfileSetting: () -> Unit,
-    bottomSheetState: BottomSheetScaffoldState,
-    bottomSheetContent: (@Composable () -> Unit) -> Unit,
+    navigateToProfileSetting: () -> Unit
 ) {
     composable(route = SignInRoute.route) {
         val parentStackEntry = remember(it) {
@@ -96,8 +92,6 @@ fun NavGraphBuilder.signInNavGraph(
         SignUpEmailRoute(
             coroutineScope = coroutineScope,
             snackBarHostState = snackBarHostState,
-            bottomSheetState = bottomSheetState,
-            bottomSheetContent = bottomSheetContent,
             onBackClick = onBackClick,
             accountViewModel = hiltViewModel(parentStackEntry),
             profileSettingViewModel = hiltViewModel(parentStackEntry),
@@ -111,8 +105,6 @@ fun NavGraphBuilder.signInNavGraph(
         SignUpEmailRoute(
             coroutineScope = coroutineScope,
             snackBarHostState = snackBarHostState,
-            bottomSheetState = bottomSheetState,
-            bottomSheetContent = bottomSheetContent,
             onBackClick = onBackClick,
             accountViewModel = hiltViewModel(parentStackEntry),
             profileSettingViewModel = hiltViewModel(parentStackEntry),

presentation/src/main/java/daily/dayo/presentation/screen/account/SignUpEmailScreen.kt

@@ -1,5 +1,6 @@
 package daily.dayo.presentation.screen.account
 
+import LocalBottomSheetController
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
@@ -17,11 +18,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.Text
-import androidx.compose.material3.BottomSheetScaffoldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -57,7 +58,6 @@ import daily.dayo.presentation.view.Loading
 import daily.dayo.presentation.view.NoRippleIconButton
 import daily.dayo.presentation.view.TopNavigation
 import daily.dayo.presentation.view.dialog.ProfileImageBottomSheetDialog
-import daily.dayo.presentation.view.dialog.getBottomSheetDialogState
 import daily.dayo.presentation.viewmodel.AccountViewModel
 import daily.dayo.presentation.viewmodel.AccountViewModel.Companion.EMAIL_CERTIFICATE_AUTH_CODE_INITIAL
 import daily.dayo.presentation.viewmodel.AccountViewModel.Companion.SIGN_UP_EMAIL_CERTIFICATE_AUTH_CODE_FAIL
@@ -81,8 +81,6 @@ const val IMAGE_TEMP_FILE_EXTENSION = ".jpg"
 internal fun SignUpEmailRoute(
     coroutineScope: CoroutineScope = rememberCoroutineScope(),
     snackBarHostState: SnackbarHostState,
-    bottomSheetState: BottomSheetScaffoldState,
-    bottomSheetContent: (@Composable () -> Unit) -> Unit,
     onBackClick: () -> Unit = {},
     accountViewModel: AccountViewModel = hiltViewModel(),
     profileSettingViewModel: ProfileSettingViewModel = hiltViewModel(),
@@ -91,8 +89,7 @@ internal fun SignUpEmailRoute(
     val context = LocalContext.current
     val contentResolver = context.contentResolver
     val keyboardController = LocalSoftwareKeyboardController.current
-    val bitmapOptions =
-        BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.ARGB_8888 }
+    val bitmapOptions = BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.ARGB_8888 }
 
     var signUpStep by remember { mutableStateOf(startSignUpStep) }
     val isEmailDuplicate by accountViewModel.isEmailDuplicate.collectAsStateWithLifecycle()
@@ -136,6 +133,34 @@ internal fun SignUpEmailRoute(
         }
     )
 
+    // bottom sheet
+    val bottomSheetController = LocalBottomSheetController.current
+    val bottomSheetContent: @Composable () -> Unit = remember {
+        {
+            ProfileImageBottomSheetDialog(
+                onClickProfileSelect = {
+                    showProfileGallery = true
+                    bottomSheetController.hide()
+                },
+                onClickProfileCapture = {
+                    showProfileCapture = true
+                    bottomSheetController.hide()
+
+                },
+                onClickProfileReset = {
+                    profileImgState.value = null
+                    bottomSheetController.hide()
+                }
+            )
+        }
+    }
+    DisposableEffect(Unit) {
+        bottomSheetController.setContent(bottomSheetContent)
+        onDispose {
+            bottomSheetController.hide()
+        }
+    }
+
     if (showProfileGallery) {
         openGallery()
         showProfileGallery = false
@@ -148,8 +173,6 @@ internal fun SignUpEmailRoute(
 
     SignUpEmailScreen(
         context = context,
-        coroutineScope = coroutineScope,
-        bottomSheetState = bottomSheetState,
         hideKeyboard = { keyboardController?.hide() },
         onBackClick = onBackClick,
         requestIsEmailDuplicate = { accountViewModel.requestCheckEmailDuplicate(it) },
@@ -224,30 +247,6 @@ internal fun SignUpEmailRoute(
         isVisible = (signUpStatus == Status.LOADING || updateProfileStatus == Status.LOADING),
         message = stringResource(R.string.signup_email_alert_message_loading)
     )
-
-    bottomSheetContent {
-        ProfileImageBottomSheetDialog(
-            bottomSheetState = bottomSheetState,
-            onClickProfileSelect = {
-                coroutineScope.launch {
-                    showProfileGallery = true
-                    bottomSheetState.bottomSheetState.hide()
-                }
-            },
-            onClickProfileCapture = {
-                coroutineScope.launch {
-                    showProfileCapture = true
-                    bottomSheetState.bottomSheetState.hide()
-                }
-            },
-            onClickProfileReset = {
-                profileImgState.value = null
-                coroutineScope.launch {
-                    bottomSheetState.bottomSheetState.hide()
-                }
-            },
-        )
-    }
 }
 
 @Composable
@@ -280,8 +279,6 @@ fun SignUpEmailTitleLayout(
 @Preview
 fun SignUpEmailScreen(
     context: Context = LocalContext.current,
-    coroutineScope: CoroutineScope = rememberCoroutineScope(),
-    bottomSheetState: BottomSheetScaffoldState = getBottomSheetDialogState(),
     hideKeyboard: () -> Unit = {},
     onBackClick: () -> Unit = {},
     requestIsEmailDuplicate: (email: String) -> Unit = {},
@@ -538,8 +535,6 @@ fun SignUpEmailScreen(
 
             SignUpStep.PROFILE_SETUP -> {
                 SetProfileSetupView(
-                    bottomSheetState = bottomSheetState,
-                    coroutineScope = coroutineScope,
                     isNextButtonEnabled = isNextButtonEnabled,
                     isNextButtonClickable = isNextButtonClickable,
                     nicknameState = nicknameState,