Merge pull request #96 from YAPP-Github/fix/bottom

TaewoongR · web-flow · commit af718ac128b2 · 2025-09-16T19:39:04.000+09:00
[Fix/#95] 바텀 네비게이션 바, 스낵바 패딩, status bar 색상 설정
diff --git a/core/auth/src/main/java/com/yapp/breake/core/auth/kakao/KakaoAuthScreen.kt b/core/auth/src/main/java/com/yapp/breake/core/auth/kakao/KakaoAuthScreen.kt
@@ -1,6 +1,7 @@
 package com.yapp.breake.core.auth.kakao
 
 import android.annotation.SuppressLint
+import android.app.Activity
 import android.content.Intent
 import android.view.ViewGroup.LayoutParams
 import android.webkit.WebResourceError
@@ -9,16 +10,18 @@ import android.webkit.WebView
 import android.webkit.WebViewClient
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.net.toUri
+import androidx.core.view.WindowInsetsControllerCompat
 import com.yapp.breake.core.auth.BuildConfig
 import com.yapp.breake.core.auth.R
 import timber.log.Timber
@@ -71,6 +74,24 @@ fun KakaoScreen(
 		}
 	}
 
+	val view = LocalView.current
+
+	DisposableEffect(view) {
+		val window = (view.context as? Activity)?.window ?: return@DisposableEffect onDispose {}
+		val insetsController = WindowInsetsControllerCompat(window, view)
+
+		// 원래 설정 저장
+		val originalLightStatusBars = insetsController.isAppearanceLightStatusBars
+
+		// Status Bar 아이콘을 어둡게 설정 (밝은 배경용)
+		insetsController.isAppearanceLightStatusBars = true
+
+		onDispose {
+			// 원래 설정으로 복원
+			insetsController.isAppearanceLightStatusBars = originalLightStatusBars
+		}
+	}
+
 	val webView = WebView(context).apply {
 		webViewRef = this
 
@@ -185,9 +206,7 @@ fun KakaoScreen(
 
 	AndroidView(
 		factory = { webView },
-		modifier = Modifier
-			.fillMaxSize()
-			.statusBarsPadding(),
+		modifier = Modifier.fillMaxSize(),
 		onRelease = { webView ->
 			webView.destroySafely()
 		},
diff --git a/core/designsystem/src/main/java/com/yapp/breake/core/designsystem/component/Button.kt b/core/designsystem/src/main/java/com/yapp/breake/core/designsystem/component/Button.kt
@@ -21,6 +21,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
@@ -32,6 +34,7 @@ import com.yapp.breake.core.designsystem.theme.BrakeTheme
 import com.yapp.breake.core.designsystem.theme.Gray200
 import com.yapp.breake.core.designsystem.theme.Gray700
 import com.yapp.breake.core.designsystem.theme.Gray800
+import com.yapp.breake.core.designsystem.theme.LocalDynamicPaddings
 import com.yapp.breake.core.designsystem.theme.Red
 import com.yapp.breake.core.designsystem.util.BooleanProvider
 import com.yapp.breake.core.designsystem.util.MultipleEventsCutter
@@ -53,13 +56,24 @@ fun LargeButton(
 ) {
 	val multipleEventsCutter = remember { MultipleEventsCutter.get() }
 
+	val density = LocalDensity.current
+	val dynamicPaddingsProvider = LocalDynamicPaddings.current
+
 	Button(
 		shape = MaterialTheme.shapes.large,
 		colors = colors,
 		contentPadding = paddingValues,
 		enabled = enabled,
 		onClick = { multipleEventsCutter.processEvent(onClick) },
-		modifier = modifier.fillMaxWidth(),
+		modifier = modifier
+			.fillMaxWidth()
+			.onGloballyPositioned { coordinates ->
+				with(density) {
+					dynamicPaddingsProvider.updateOneButtonHeight(
+						coordinates.size.height.toDp() + (24 + 12).dp,
+					)
+				}
+			},
 	) {
 		Row(
 			modifier = Modifier.fillMaxWidth(),
diff --git a/core/designsystem/src/main/java/com/yapp/breake/core/designsystem/theme/Padding.kt b/core/designsystem/src/main/java/com/yapp/breake/core/designsystem/theme/Padding.kt
@@ -1,15 +1,42 @@
 package com.yapp.breake.core.designsystem.theme
 
 import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
 val Paddings = BrakePadding()
 
 val LocalPadding = staticCompositionLocalOf { BrakePadding() }
+val LocalDynamicPaddings = staticCompositionLocalOf { DynamicPaddingsProvider() }
 
 @Immutable
 data class BrakePadding(
 	val screenPaddingHorizontal: Dp = 16.dp,
 )
+
+data class DynamicPaddings(
+	val bottomNavBarHeight: Dp = 100.dp,
+	val oneButtonHeight: Dp = 80.dp,
+	val twoButtonHeight: Dp = 130.dp,
+)
+
+class DynamicPaddingsProvider {
+	var paddings by mutableStateOf(DynamicPaddings())
+		private set
+
+	fun updateBottomNavHeight(height: Dp) {
+		paddings = paddings.copy(bottomNavBarHeight = height)
+	}
+
+	fun updateOneButtonHeight(height: Dp) {
+		paddings = paddings.copy(oneButtonHeight = height)
+	}
+
+	fun updateTwoButtonHeight(height: Dp) {
+		paddings = paddings.copy(twoButtonHeight = height)
+	}
+}
diff --git a/presentation/home/src/main/java/com/yapp/breake/presentation/home/screen/TickingScreen.kt b/presentation/home/src/main/java/com/yapp/breake/presentation/home/screen/TickingScreen.kt
@@ -41,6 +41,7 @@ import com.yapp.breake.core.designsystem.theme.AppItemGradient
 import com.yapp.breake.core.designsystem.theme.BlockingTimerBackgroundGradient
 import com.yapp.breake.core.designsystem.theme.BrakeTheme
 import com.yapp.breake.core.designsystem.theme.Gray900
+import com.yapp.breake.core.designsystem.theme.LocalDynamicPaddings
 import com.yapp.breake.core.model.app.AppGroup
 import com.yapp.breake.core.model.app.AppGroupState
 import com.yapp.breake.presentation.home.R
@@ -90,6 +91,8 @@ internal fun TickingScreen(
 		}
 	}
 
+	val bottomPadding = LocalDynamicPaddings.current.paddings.bottomNavBarHeight
+
 	// LazyColumn, LazyRow 의 오버 스크롤시 내부 요소의 늘어짐 방지
 	CompositionLocalProvider(LocalOverscrollFactory provides null) {
 		Scaffold(
@@ -226,7 +229,7 @@ internal fun TickingScreen(
 						}
 					}
 
-					item { VerticalSpacer(12.dp) }
+					item { VerticalSpacer(bottomPadding) }
 				}
 			},
 		)
diff --git a/presentation/login/src/main/java/com/yapp/breake/presentation/login/LoginScreen.kt b/presentation/login/src/main/java/com/yapp/breake/presentation/login/LoginScreen.kt
@@ -13,9 +13,14 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 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.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -28,6 +33,7 @@ import com.google.android.gms.auth.api.identity.Identity
 import com.google.android.gms.common.api.ApiException
 import com.yapp.breake.core.auth.kakao.KakaoScreen
 import com.yapp.breake.core.designsystem.theme.BrakeTheme
+import com.yapp.breake.core.designsystem.theme.LocalDynamicPaddings
 import com.yapp.breake.core.designsystem.theme.LocalPadding
 import com.yapp.breake.core.navigation.compositionlocal.LocalMainAction
 import com.yapp.breake.core.navigation.compositionlocal.LocalNavigatorAction
@@ -157,6 +163,22 @@ fun LoginScreen(
 	onGoogleLoginClick: () -> Unit,
 	onkakaoLoginClick: () -> Unit,
 ) {
+	val density = LocalDensity.current
+	val dynamicPaddingsProvider = LocalDynamicPaddings.current
+
+	var googleButtonHeight by remember { mutableStateOf(0.dp) }
+	var kakaoButtonHeight by remember { mutableStateOf(0.dp) }
+
+	val buttonSpacing = 12.dp
+	val bottomPadding = 24.dp
+
+	LaunchedEffect(googleButtonHeight, kakaoButtonHeight) {
+		if (googleButtonHeight > 0.dp && kakaoButtonHeight > 0.dp) {
+			val totalHeight = googleButtonHeight + kakaoButtonHeight + buttonSpacing + bottomPadding
+			dynamicPaddingsProvider.updateTwoButtonHeight(totalHeight)
+		}
+	}
+
 	ConstraintLayout(
 		modifier = Modifier.fillMaxSize(),
 	) {
@@ -206,6 +228,9 @@ fun LoginScreen(
 			modifier = Modifier
 				.padding(horizontal = padding)
 				.widthIn(max = 400.dp)
+				.onGloballyPositioned { coordinates ->
+					googleButtonHeight = with(density) { coordinates.size.height.toDp() }
+				}
 				.constrainAs(googleLoginButton) {
 					bottom.linkTo(kakaoLoginButton.top, margin = 12.dp)
 					start.linkTo(parent.start)
@@ -220,6 +245,9 @@ fun LoginScreen(
 				.padding(horizontal = padding)
 				.padding(bottom = 24.dp)
 				.widthIn(max = 400.dp)
+				.onGloballyPositioned { coordinates ->
+					kakaoButtonHeight = with(density) { coordinates.size.height.toDp() }
+				}
 				.constrainAs(kakaoLoginButton) {
 					bottom.linkTo(parent.bottom)
 					start.linkTo(parent.start)
diff --git a/presentation/main/src/main/java/com/yapp/breake/presentation/main/MainScreen.kt b/presentation/main/src/main/java/com/yapp/breake/presentation/main/MainScreen.kt
@@ -1,17 +1,31 @@
 package com.yapp.breake.presentation.main
 
+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.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 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.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.yapp.breake.core.designsystem.theme.DynamicPaddingsProvider
+import com.yapp.breake.core.designsystem.theme.Gray900
+import com.yapp.breake.core.designsystem.theme.LocalDynamicPaddings
 import com.yapp.breake.core.navigation.route.InitialRoute
 import com.yapp.breake.core.navigation.route.MainTabRoute
 import com.yapp.breake.presentation.main.component.BrakeSnackbar
@@ -47,32 +61,73 @@ private fun MainScreenContent(
 	// 2. MainTabRoute 화면일 때 하단 네비게이션 바를 띄우고, 그 외는 안띄우기 위한 Route 구독
 	val currentRoute by navigator.currentRoute.collectAsStateWithLifecycle()
 
+	// 바텀 패딩 조정 용도 (스낵바 높이 위치 및 하단 네비게이션 바 상호작용)
+	val dynamicPaddingsProvider = remember { DynamicPaddingsProvider() }
+	val density = LocalDensity.current
+
 	Scaffold(
 		modifier = modifier,
 		content = { padding ->
-			MainNavHost(
-				navigator = navigator,
-				padding = padding,
-				onChangeDarkTheme = onChangeDarkTheme,
-			)
-		},
-		bottomBar = {
-			MainBottomNavBar(
-				modifier = Modifier
-					.navigationBarsPadding()
-					.fillMaxWidth()
-					.padding(bottom = 34.dp)
-					.wrapContentWidth(Alignment.CenterHorizontally),
-				visible = currentRoute is MainTabRoute,
-				tabs = MainTab.entries.toPersistentList(),
-				currentTab = when (currentRoute) {
-					is MainTabRoute.Home -> MainTab.HOME
-					is MainTabRoute.Report -> MainTab.REPORT
-					is MainTabRoute.Setting -> MainTab.SETTING
-					else -> null
-				},
-				onTabSelected = navigator::navigate,
-			)
+			Box(
+				modifier = Modifier.fillMaxSize(),
+			) {
+				CompositionLocalProvider(
+					LocalDynamicPaddings provides dynamicPaddingsProvider,
+				) {
+					MainNavHost(
+						navigator = navigator,
+						padding = padding,
+						onChangeDarkTheme = onChangeDarkTheme,
+					)
+				}
+
+				Box(
+					modifier = Modifier
+						.align(Alignment.BottomCenter)
+						.clickable(
+							interactionSource = remember { MutableInteractionSource() },
+							indication = null,
+						) { /* 터치 이벤트 가로채기 */ }
+						.onGloballyPositioned { coordinates ->
+							with(density) {
+								dynamicPaddingsProvider.updateBottomNavHeight(
+									coordinates.size.height.toDp() + 12.dp,
+								)
+							}
+						}
+						.fillMaxWidth()
+						.background(
+							brush = Brush.verticalGradient(
+								colors = listOf(
+									Color.Transparent,
+									Gray900.copy(alpha = 0.1f),
+									Gray900.copy(alpha = 0.3f),
+									Gray900.copy(alpha = 0.5f),
+									Gray900.copy(alpha = 0.8f),
+									Gray900.copy(alpha = 0.9f),
+									Gray900, Gray900, Gray900,
+								),
+							),
+						)
+						.wrapContentWidth(Alignment.CenterHorizontally)
+						.navigationBarsPadding()
+						.padding(bottom = 34.dp),
+				) {
+					MainBottomNavBar(
+						modifier = Modifier
+							.background(Color.Transparent),
+						visible = currentRoute is MainTabRoute,
+						tabs = MainTab.entries.toPersistentList(),
+						currentTab = when (currentRoute) {
+							is MainTabRoute.Home -> MainTab.HOME
+							is MainTabRoute.Report -> MainTab.REPORT
+							is MainTabRoute.Setting -> MainTab.SETTING
+							else -> null
+						},
+						onTabSelected = navigator::navigate,
+					)
+				}
+			}
 		},
 		contentWindowInsets = WindowInsets(0.dp),
 		snackbarHost = {
@@ -86,17 +141,23 @@ private fun MainScreenContent(
 				// 현재 화면에 따라 스낵바 y 축 위치 조정
 				modifier = Modifier.then(
 					when (currentRoute) {
-						is MainTabRoute -> Modifier.padding(bottom = 0.dp)
+						is MainTabRoute -> Modifier.padding(
+							bottom = dynamicPaddingsProvider.paddings.bottomNavBarHeight,
+						)
 
 						InitialRoute.Login ->
 							Modifier
 								.navigationBarsPadding()
-								.padding(bottom = 130.dp)	// 기존 190, 배포 환경 구성 완료 전까지 감추기
+								.padding(
+									bottom = dynamicPaddingsProvider.paddings.twoButtonHeight,
+								)
 
 						else ->
 							Modifier
 								.navigationBarsPadding()
-								.padding(bottom = 80.dp)
+								.padding(
+									bottom = dynamicPaddingsProvider.paddings.oneButtonHeight,
+								)
 					},
 				),
 			)
diff --git a/presentation/report/src/main/java/com/yapp/breake/presentation/report/ReportScreen.kt b/presentation/report/src/main/java/com/yapp/breake/presentation/report/ReportScreen.kt

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ import com.yapp.breake.core.designsystem.theme.AppItemGradient`
`41`	`41`	`import com.yapp.breake.core.designsystem.theme.BlockingTimerBackgroundGradient`
`42`	`42`	`import com.yapp.breake.core.designsystem.theme.BrakeTheme`
`43`	`43`	`import com.yapp.breake.core.designsystem.theme.Gray900`
	`44`	`+import com.yapp.breake.core.designsystem.theme.LocalDynamicPaddings`
`44`	`45`	`import com.yapp.breake.core.model.app.AppGroup`
`45`	`46`	`import com.yapp.breake.core.model.app.AppGroupState`
`46`	`47`	`import com.yapp.breake.presentation.home.R`
`@@ -90,6 +91,8 @@ internal fun TickingScreen(`
`90`	`91`	`}`
`91`	`92`	`}`
`92`	`93`
	`94`	`+ val bottomPadding = LocalDynamicPaddings.current.paddings.bottomNavBarHeight`
	`95`	`+`
`93`	`96`	`// LazyColumn, LazyRow 의 오버 스크롤시 내부 요소의 늘어짐 방지`
`94`	`97`	`CompositionLocalProvider(LocalOverscrollFactory provides null) {`
`95`	`98`	`Scaffold(`
`@@ -226,7 +229,7 @@ internal fun TickingScreen(`
`226`	`229`	`}`
`227`	`230`	`}`
`228`	`231`
`229`		`- item { VerticalSpacer(12.dp) }`
	`232`	`+ item { VerticalSpacer(bottomPadding) }`
`230`	`233`	`}`
`231`	`234`	`},`
`232`	`235`	`)`