Merge pull request #357 from Nexters/feature/Boolti-343

Feature/boolti 343 edge to edge 활성화 및 스타일 반영
Nexters · Jan 12, 2025 · 51f0079 · 51f0079
2 parents 21ff010 + 3ac8ae4
commit 51f0079
Show file tree

Hide file tree

Showing 37 changed files with 571 additions and 387 deletions.
diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/QrScanActivity.kt b/presentation/src/main/java/com/nexters/boolti/presentation/QrScanActivity.kt
@@ -1,10 +1,13 @@
 package com.nexters.boolti.presentation
 
 import android.Manifest
+import android.graphics.Color
 import android.os.Bundle
 import android.view.KeyEvent
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.activity.viewModels
 import androidx.core.view.isVisible
 import androidx.lifecycle.Lifecycle
@@ -54,6 +57,8 @@ class QrScanActivity : ComponentActivity() {
 
         requestPermission(Manifest.permission.CAMERA, 100)
 
+        enableEdgeToEdge(statusBarStyle = SystemBarStyle.dark(Color.TRANSPARENT))
+
         setContent {
             BooltiTheme {
                 QrScanScreen(

diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/component/BtAppBar.kt b/presentation/src/main/java/com/nexters/boolti/presentation/component/BtAppBar.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -35,12 +36,14 @@ fun BtAppBar(
     modifier: Modifier = Modifier,
     title: String = "",
     colors: BtAppBarColors = BtAppBarDefaults.appBarColors(),
+    statusBarPadding: Boolean = true,
     navigateButtons: @Composable (RowScope.() -> Unit)? = null,
     actionButtons: @Composable (RowScope.() -> Unit)? = null,
 ) {
     Row(
         modifier = modifier
             .background(color = colors.containerColor)
+            .let { if (statusBarPadding) it.statusBarsPadding() else it }
             .fillMaxWidth()
             .height(44.dp)
             .padding(horizontal = 8.dp),
@@ -80,13 +83,15 @@ fun BtAppBar(
     modifier: Modifier = Modifier,
     title: String = "",
     colors: BtAppBarColors = BtAppBarDefaults.appBarColors(),
+    statusBarPadding: Boolean = true,
     navigationButtons: List<Pair<Int, () -> Unit>> = emptyList(),
     actionButtons: List<Pair<Int, () -> Unit>> = emptyList(),
 ) {
     BtAppBar(
         modifier = modifier,
         title = title,
         colors = colors,
+        statusBarPadding = statusBarPadding,
         navigateButtons = if (navigationButtons.isNotEmpty()) {
             {
                 navigationButtons.forEach { (res, onClick) ->
@@ -113,6 +118,7 @@ fun BtBackAppBar(
     modifier: Modifier = Modifier,
     title: String = "",
     colors: BtAppBarColors = BtAppBarDefaults.appBarColors(),
+    statusBarPadding: Boolean = true,
     onClickBack: () -> Unit,
 ) {
     BtAppBar(
@@ -125,6 +131,7 @@ fun BtBackAppBar(
             )
         },
         colors = colors,
+        statusBarPadding = statusBarPadding,
     )
 }
 
@@ -133,6 +140,7 @@ fun BtCloseableAppBar(
     modifier: Modifier = Modifier,
     title: String = "",
     colors: BtAppBarColors = BtAppBarDefaults.appBarColors(),
+    statusBarPadding: Boolean = true,
     onClickClose: () -> Unit,
 ) {
     BtAppBar(
@@ -146,6 +154,7 @@ fun BtCloseableAppBar(
             )
         },
         colors = colors,
+        statusBarPadding = statusBarPadding,
     )
 }
 

diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/component/GradientBackground.kt b/presentation/src/main/java/com/nexters/boolti/presentation/component/GradientBackground.kt
@@ -0,0 +1,88 @@
+package com.nexters.boolti.presentation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.nexters.boolti.presentation.extension.toDp
+import com.nexters.boolti.presentation.theme.BooltiTheme
+import com.nexters.boolti.presentation.theme.marginHorizontal
+
+@Composable
+fun TopGradientBackground(
+    modifier: Modifier = Modifier,
+    bgColor: Color = MaterialTheme.colorScheme.background,
+    gradientHeight: Dp = 16.dp,
+    onHeightChanged: (Dp) -> Unit = {},
+    content: @Composable () -> Unit,
+) {
+    val density = LocalDensity.current
+    var contentWidthDp by remember { mutableStateOf(0.dp) }
+
+    Column(
+        modifier = modifier.onGloballyPositioned {
+            onHeightChanged(it.size.height.toDp(density))
+        },
+    ) {
+        Box(
+            Modifier
+                .width(contentWidthDp)
+                .height(gradientHeight)
+                .background(
+                    brush = Brush.verticalGradient(listOf(Color.Transparent, bgColor))
+                )
+        )
+        Box(
+            Modifier
+                .onGloballyPositioned { contentWidthDp = it.size.width.toDp(density) }
+                .background(bgColor),
+        ) {
+            content()
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun TopGradientBackgroundPreview() {
+    BooltiTheme {
+        Surface(
+            color = Color.White,
+        ) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+            ) {
+                TopGradientBackground(
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter),
+                ) {
+                    SecondaryButton(
+                        modifier = Modifier
+                            .padding(horizontal = marginHorizontal)
+                            .padding(bottom = 20.dp),
+                        label = "예매하기",
+                    ) { }
+                }
+            }
+        }
+    }
+}
diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/component/StatusBarCover.kt b/presentation/src/main/java/com/nexters/boolti/presentation/component/StatusBarCover.kt
@@ -0,0 +1,29 @@
+package com.nexters.boolti.presentation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.statusBarsIgnoringVisibility
+import androidx.compose.foundation.layout.windowInsetsTopHeight
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.zIndex
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun StatusBarCover(
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.background,
+) {
+    Box(
+        modifier = modifier
+            .zIndex(1f)
+            .background(color)
+            .fillMaxWidth()
+            .windowInsetsTopHeight(WindowInsets.statusBarsIgnoringVisibility),
+    )
+}
diff --git a/...rc/main/java/com/nexters/boolti/presentation/reservationdetail/ReservationDetailScreen.kt b/...rc/main/java/com/nexters/boolti/presentation/reservationdetail/ReservationDetailScreen.kt
@@ -9,7 +9,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
@@ -74,7 +76,7 @@ fun ReservationDetailScreen(
     }
 
     Scaffold(
-        modifier = modifier,
+        modifier = modifier.navigationBarsPadding(),
         topBar = {
             BtBackAppBar(
                 title = stringResource(id = R.string.reservation_detail),
@@ -143,7 +145,8 @@ fun ReservationDetailScreen(
             if (state.reservation.isRefundable) {
                 MainButton(
                     modifier = modifier
-                        .padding(horizontal = marginHorizontal, vertical = 8.dp)
+                        .padding(horizontal = marginHorizontal)
+                        .padding(top = 8.dp, bottom = 20.dp)
                         .fillMaxWidth(),
                     colors = MainButtonDefaults.buttonColors(
                         containerColor = Grey15,
@@ -159,6 +162,8 @@ fun ReservationDetailScreen(
                     }
                 )
             }
+
+            Spacer(Modifier.size(32.dp))
         }
 
         if (showRefundDialog) {

diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/screen/Main.kt b/presentation/src/main/java/com/nexters/boolti/presentation/screen/Main.kt
@@ -1,11 +1,11 @@
 package com.nexters.boolti.presentation.screen
 
+import android.annotation.SuppressLint
 import android.content.Intent
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHostState
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.compositionLocalOf
@@ -65,6 +65,7 @@ val LocalNavController = compositionLocalOf<NavHostController> {
     error("No NavController provided")
 }
 
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun Main(onClickQrScan: (showId: String, showName: String) -> Unit) {
     val modifier = Modifier.fillMaxSize()
@@ -73,27 +74,25 @@ fun Main(onClickQrScan: (showId: String, showName: String) -> Unit) {
     val rootNavController = rememberNavControllerWithLog()
 
     BooltiTheme {
-        Surface(modifier) {
-            Scaffold(
-                snackbarHost = {
-                    ToastSnackbarHost(
-                        modifier = Modifier.padding(bottom = 80.dp),
-                        hostState = snackbarHostState,
-                    )
-                },
-            ) { innerPadding ->
-                CompositionLocalProvider(
-                    LocalSnackbarController provides SnackbarController(
-                        snackbarHostState,
-                        scope,
-                    ),
-                    LocalNavController provides rootNavController,
-                ) {
-                    MainNavigation(
-                        modifier = modifier.padding(innerPadding),
-                        onClickQrScan = onClickQrScan,
-                    )
-                }
+        Scaffold(
+            snackbarHost = {
+                ToastSnackbarHost(
+                    modifier = Modifier.padding(bottom = 80.dp),
+                    hostState = snackbarHostState,
+                )
+            },
+        ) {
+            CompositionLocalProvider(
+                LocalSnackbarController provides SnackbarController(
+                    snackbarHostState,
+                    scope,
+                ),
+                LocalNavController provides rootNavController,
+            ) {
+                MainNavigation(
+                    modifier = modifier,
+                    onClickQrScan = onClickQrScan,
+                )
             }
         }
     }

diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/screen/MainActivity.kt b/presentation/src/main/java/com/nexters/boolti/presentation/screen/MainActivity.kt
@@ -3,10 +3,13 @@ package com.nexters.boolti.presentation.screen
 import android.Manifest
 import android.app.NotificationChannel
 import android.app.NotificationManager
+import android.graphics.Color
 import android.os.Build
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -26,6 +29,9 @@ import timber.log.Timber
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(Color.TRANSPARENT),
+        )
         setContent {
             BooltiTheme {
                 Surface(

diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/screen/gift/GiftScreen.kt b/presentation/src/main/java/com/nexters/boolti/presentation/screen/gift/GiftScreen.kt
@@ -26,8 +26,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
@@ -45,6 +43,7 @@ import com.nexters.boolti.presentation.component.BusinessInformation
 import com.nexters.boolti.presentation.component.MainButton
 import com.nexters.boolti.presentation.component.PolicyBottomSheet
 import com.nexters.boolti.presentation.component.ShowItem
+import com.nexters.boolti.presentation.component.TopGradientBackground
 import com.nexters.boolti.presentation.screen.ticketing.InputRow
 import com.nexters.boolti.presentation.screen.ticketing.OrderAgreementSection
 import com.nexters.boolti.presentation.screen.ticketing.PaymentFailureDialog
@@ -73,6 +72,7 @@ fun GiftScreen(
     var showTicketSoldOutDialog by remember { mutableStateOf(false) }
     var showPaymentFailureDialog by remember { mutableStateOf(false) }
     var policyPageUrl: String? by remember { mutableStateOf(null) }
+    var bottomButtonHeight by remember { mutableStateOf(0.dp) }
 
     val paymentLauncher =
         rememberLauncherForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
@@ -231,26 +231,13 @@ fun GiftScreen(
                     modifier = Modifier.fillMaxWidth(),
                     onClick = navigateToBusiness
                 )
-                Spacer(modifier = Modifier.height(120.dp))
+                Spacer(modifier = Modifier.height(bottomButtonHeight))
             }
 
-            Column(
-                modifier = Modifier.align(Alignment.BottomCenter)
+            TopGradientBackground(
+                modifier = Modifier.align(Alignment.BottomCenter),
+                onHeightChanged = { bottomButtonHeight = it },
             ) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(16.dp)
-                        .background(
-                            brush = Brush.verticalGradient(
-                                colors = listOf(
-                                    MaterialTheme.colorScheme.background.copy(alpha = 0F),
-                                    MaterialTheme.colorScheme.background,
-                                )
-                            ),
-                            shape = RectangleShape,
-                        )
-                )
                 MainButton(
                     modifier = Modifier
                         .fillMaxWidth()