Bottom sheet display issue

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

@@ -1,21 +1,32 @@
 package daily.dayo.presentation.screen.account
 
 import android.annotation.SuppressLint
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 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.material.Scaffold
+import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SheetValue
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 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
 
 @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
 @OptIn(ExperimentalMaterial3Api::class)
@@ -25,43 +36,65 @@ internal fun AccountScreen(
 ) {
     val coroutineScope = rememberCoroutineScope()
     val snackBarHostState = remember { SnackbarHostState() }
+    var bottomSheetContent by remember { mutableStateOf<(@Composable () -> Unit)?>(null) }
     val bottomSheetState = getBottomSheetDialogState()
-    var bottomSheet: (@Composable () -> Unit)? by remember { mutableStateOf(null) }
-    val bottomSheetContent: (@Composable () -> Unit) -> Unit = {
-        bottomSheet = it
+    val bottomSheetDimAlpha by remember {
+        derivedStateOf { if (bottomSheetState.bottomSheetState.currentValue == SheetValue.Expanded) 0.6f else 0f }
     }
-    Scaffold(
-        snackbarHost = { SnackbarHost(hostState = snackBarHostState) }
-    ) {
-        Scaffold(
-            bottomBar = { bottomSheet?.let { it() } }
-        ) {
-            Scaffold(
-                content = { innerPadding ->
-                    Box(Modifier.padding(innerPadding)) {
-                        NavHost(
-                            navController = navigator.navController,
-                            startDestination = AccountScreen.SignIn.route
-                        ) {
-                            signInNavGraph(
-                                coroutineScope = coroutineScope,
-                                snackBarHostState = snackBarHostState,
-                                navController = navigator.navController,
-                                onBackClick = { navigator.popBackStack() },
-                                navigateToSignIn = { navigator.navigateSignIn() },
-                                navigateToSignInEmail = { navigator.navigateSignInEmail() },
-                                navigateToResetPassword = { navigator.navigateResetPassword() },
-                                navigateToSignUpEmail = { navigator.navigateSignUpEmail() },
-                                navigateToProfileSetting = { navigator.navigateProfileSetting() },
-                                navigateToRules = { route -> navigator.navigateRules(route) },
-                                bottomSheetState = bottomSheetState,
-                                bottomSheetContent = bottomSheetContent
-                            )
+    val animatedDimAlpha by animateFloatAsState(targetValue = bottomSheetDimAlpha)
+
+    BottomSheetScaffold(
+        scaffoldState = bottomSheetState,
+        sheetDragHandle = null,
+        sheetContent = {
+            Box(modifier = Modifier.navigationBarsPadding()) {
+                bottomSheetContent?.invoke()
+            }
+        },
+        sheetPeekHeight = 0.dp,
+        snackbarHost = {
+            SnackbarHost(
+                hostState = snackBarHostState,
+                modifier = Modifier.navigationBarsPadding()
+            )
+        },
+        content = { innerPadding ->
+            Box(Modifier.padding(innerPadding)) {
+                NavHost(
+                    navController = navigator.navController,
+                    startDestination = AccountScreen.SignIn.route
+                ) {
+                    signInNavGraph(
+                        coroutineScope = coroutineScope,
+                        snackBarHostState = snackBarHostState,
+                        navController = navigator.navController,
+                        onBackClick = { navigator.popBackStack() },
+                        navigateToSignIn = { navigator.navigateSignIn() },
+                        navigateToSignInEmail = { navigator.navigateSignInEmail() },
+                        navigateToResetPassword = { navigator.navigateResetPassword() },
+                        navigateToSignUpEmail = { navigator.navigateSignUpEmail() },
+                        navigateToProfileSetting = { navigator.navigateProfileSetting() },
+                        navigateToRules = { route -> navigator.navigateRules(route) },
+                        bottomSheetState = bottomSheetState,
+                        bottomSheetContent = { content ->
+                            bottomSheetContent = content
                         }
-                    }
-                })
+                    )
+                }
+
+                if (animatedDimAlpha > 0f) {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .background(Dark.copy(alpha = animatedDimAlpha))
+                            .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
+                                coroutineScope.launch { bottomSheetState.bottomSheetState.hide() }
+                            }
+                    )
+                }
+            }
         }
-    }
+    )
 }
 
 sealed class AccountScreen(val route: String) {

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

@@ -96,6 +96,8 @@ fun NavGraphBuilder.signInNavGraph(
         SignUpEmailRoute(
             coroutineScope = coroutineScope,
             snackBarHostState = snackBarHostState,
+            bottomSheetState = bottomSheetState,
+            bottomSheetContent = bottomSheetContent,
             onBackClick = onBackClick,
             accountViewModel = hiltViewModel(parentStackEntry),
             profileSettingViewModel = hiltViewModel(parentStackEntry),
@@ -109,6 +111,8 @@ 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

@@ -81,14 +81,15 @@ 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(),
     startSignUpStep: SignUpStep = SignUpStep.EMAIL_INPUT
 ) {
     val context = LocalContext.current
     val contentResolver = context.contentResolver
-    val bottomSheetState = getBottomSheetDialogState()
     val keyboardController = LocalSoftwareKeyboardController.current
     val bitmapOptions =
         BitmapFactory.Options().apply { inPreferredConfig = Bitmap.Config.ARGB_8888 }
@@ -224,27 +225,29 @@ internal fun SignUpEmailRoute(
         message = stringResource(R.string.signup_email_alert_message_loading)
     )
 
-    ProfileImageBottomSheetDialog(
-        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()
-            }
-        },
-    )
+    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