[FIX] #67-bottomSheet의 구분을 위한 그림자 추가

YAPP-Github · Aug 31, 2024 · 58bfb1b · 58bfb1b
1 parent 5e141a5
commit 58bfb1b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 22 deletions.
diff --git a/...src/main/java/pokitmons/pokit/core/ui/components/template/bottomsheet/PokitBottomSheet.kt b/...src/main/java/pokitmons/pokit/core/ui/components/template/bottomsheet/PokitBottomSheet.kt
@@ -7,13 +7,15 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsIgnoringVisibility
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Surface
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -22,6 +24,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -64,31 +67,45 @@ fun PokitBottomSheet(
             },
             sheetState = bottomSheetState,
             scrimColor = Color.Transparent,
-            shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
-            containerColor = PokitTheme.colors.backgroundBase,
-            dragHandle = {
-                Column {
-                    Spacer(modifier = Modifier.height(8.dp))
+            containerColor = Color.Transparent,
+            dragHandle = null
+        ) {
+            Spacer(modifier = Modifier.height(8.dp).background(Color.Transparent))
 
-                    Box(
-                        Modifier
-                            .clip(RoundedCornerShape(4.dp))
-                            .width(36.dp)
-                            .height(4.dp)
-                            .background(color = PokitTheme.colors.iconTertiary)
-                    )
+            Surface(
+                shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
+                color = PokitTheme.colors.backgroundBase,
+                shadowElevation = 20.dp
+            ) {
+                Column(
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Column(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Spacer(modifier = Modifier.height(8.dp))
+
+                        Box(
+                            Modifier
+                                .clip(RoundedCornerShape(4.dp))
+                                .width(36.dp)
+                                .height(4.dp)
+                                .background(color = PokitTheme.colors.iconTertiary)
+                        )
+
+                        Spacer(modifier = Modifier.height(12.dp))
+                    }
 
-                    Spacer(modifier = Modifier.height(12.dp))
+                    content()
+
+                    Spacer(
+                        Modifier.windowInsetsBottomHeight(
+                            WindowInsets.navigationBarsIgnoringVisibility
+                        )
+                    )
                 }
             }
-        ) {
-            content()
-
-            Spacer(
-                Modifier.windowInsetsBottomHeight(
-                    WindowInsets.navigationBarsIgnoringVisibility
-                )
-            )
         }
     }
 }
diff --git a/core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/bottomsheet/Preview.kt b/core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/bottomsheet/Preview.kt
@@ -3,7 +3,6 @@ package pokitmons.pokit.core.ui.components.template.bottomsheet
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Button
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable