[TNT-251] Topbar 관련 오류 수정

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/bottombar/BottomBar.kt

@@ -1,5 +1,12 @@
 package co.kr.tnt.designsystem.component.bottombar
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideIn
+import androidx.compose.animation.slideOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -13,6 +20,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import co.kr.tnt.core.designsystem.R
@@ -22,25 +30,32 @@ import co.kr.tnt.designsystem.theme.TnTTheme
 fun <Tab : BottomTab> TnTBottomBar(
     bottomTabs: List<Tab>,
     currentTab: Tab?,
+    isVisible: Boolean,
     onClickTab: (tab: Tab) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Row(modifier = modifier) {
-        bottomTabs.forEach { tab ->
-            Button(
-                onClick = { onClickTab(tab) },
-                modifier = Modifier.weight(1f),
-                colors = ButtonColors(
-                    containerColor = TnTTheme.colors.commonColors.Common0,
-                    contentColor = TnTTheme.colors.commonColors.Common0,
-                    disabledContainerColor = TnTTheme.colors.commonColors.Common0,
-                    disabledContentColor = TnTTheme.colors.commonColors.Common0,
-                ),
-            ) {
-                TnTBottomTab(
-                    bottomTab = tab,
-                    isSelected = currentTab == tab,
-                )
+    AnimatedVisibility(
+        visible = isVisible,
+        enter = fadeIn(animationSpec = tween(700)) + slideIn { IntOffset(0, it.height) },
+        exit = fadeOut(animationSpec = tween(700)) + slideOut { IntOffset(0, it.height) },
+    ) {
+        Row(modifier = modifier.background(TnTTheme.colors.commonColors.Common0)) {
+            bottomTabs.forEach { tab ->
+                Button(
+                    onClick = { onClickTab(tab) },
+                    modifier = Modifier.weight(1f),
+                    colors = ButtonColors(
+                        containerColor = TnTTheme.colors.commonColors.Common0,
+                        contentColor = TnTTheme.colors.commonColors.Common0,
+                        disabledContainerColor = TnTTheme.colors.commonColors.Common0,
+                        disabledContentColor = TnTTheme.colors.commonColors.Common0,
+                    ),
+                ) {
+                    TnTBottomTab(
+                        bottomTab = tab,
+                        isSelected = currentTab == tab,
+                    )
+                }
             }
         }
     }
@@ -103,6 +118,7 @@ private fun TnTBottomBarPreview() {
         TnTBottomBar(
             bottomTabs = tabs,
             currentTab = home,
+            isVisible = true,
             onClickTab = { },
         )
     }

feature/roleselect/src/main/java/co/kr/tnt/roleselect/RoleSelectionScreen.kt

@@ -1,7 +1,6 @@
 package co.kr.tnt.roleselect
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -61,12 +60,14 @@ fun RoleSelectionScreen(
 ) {
     var selectedRole by remember { mutableStateOf(RoleState.fromDomain(UserType.TRAINER)) }
 
-    Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        containerColor = TnTTheme.colors.commonColors.Common0,
+    ) { innerPadding ->
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(innerPadding)
-                .background(TnTTheme.colors.commonColors.Common0),
+                .padding(innerPadding),
             verticalArrangement = Arrangement.SpaceBetween,
         ) {
             Column(modifier = Modifier.padding(start = 24.dp, top = 60.dp)) {

feature/trainee/home/src/main/java/co/kr/tnt/trainee/home/TraineeHomeScreen.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 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.fillMaxSize
@@ -78,6 +79,7 @@ import java.time.YearMonth
 @Composable
 internal fun TraineeHomeRoute(
     viewModel: TraineeHomeViewModel = hiltViewModel(),
+    padding: PaddingValues,
     navigateToNotification: () -> Unit,
     navigateToExerciseRecord: () -> Unit,
     navigateToMealRecord: () -> Unit,
@@ -92,6 +94,7 @@ internal fun TraineeHomeRoute(
 
     TraineeHomeScreen(
         state = uiState,
+        padding = padding,
         context = context,
         onClickNotification = navigateToNotification,
         onChangeVisibleMonth = { yearMonth ->
@@ -147,6 +150,7 @@ internal fun TraineeHomeRoute(
 @Composable
 private fun TraineeHomeScreen(
     state: TraineeHomeUiState,
+    padding: PaddingValues,
     context: Context,
     onClickNotification: () -> Unit,
     onChangeVisibleMonth: (YearMonth) -> Unit,
@@ -168,6 +172,7 @@ private fun TraineeHomeScreen(
 
     Box(
         modifier = Modifier
+            .padding(padding)
             .fillMaxSize()
             .background(TnTTheme.colors.neutralColors.Neutral100),
     ) {
@@ -509,6 +514,7 @@ private fun TraineeHomeScreenPreview() {
     TnTTheme {
         TraineeHomeScreen(
             state = dummyUiState,
+            padding = PaddingValues(),
             context = LocalContext.current,
             onClickNotification = { },
             onClickDay = { },

feature/trainee/home/src/main/java/co/kr/tnt/trainee/home/navigation/TraineeHomeNavigation.kt

@@ -1,5 +1,6 @@
 package co.kr.tnt.trainee.home.navigation
 
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptionsBuilder
@@ -16,6 +17,7 @@ fun NavController.navigateToTraineeHome(
 )
 
 fun NavGraphBuilder.traineeHomeNavGraph(
+    padding: PaddingValues,
     navigateToNotification: () -> Unit,
     navigateToMealRecord: () -> Unit,
     navigateToMealDetail: (id: Long) -> Unit,
@@ -24,6 +26,7 @@ fun NavGraphBuilder.traineeHomeNavGraph(
     navigation<Route.TraineeMainTab.Home>(startDestination = Route.TraineeHome) {
         composable<Route.TraineeHome> {
             TraineeHomeRoute(
+                padding = padding,
                 navigateToNotification = navigateToNotification,
                 navigateToExerciseRecord = { /* TODO */ },
                 navigateToMealRecord = navigateToMealRecord,

feature/trainee/main/src/main/java/co/kr/tnt/trainee/main/TraineeMainScreen.kt

@@ -50,25 +50,24 @@ private fun TraineeMainScreen(
     val navController = state.navController
 
     Scaffold(
-        containerColor = TnTTheme.colors.commonColors.Common0,
+        containerColor = state.currentMainTab?.containerColor?.invoke() ?: TnTTheme.colors.commonColors.Common0,
         modifier = Modifier.fillMaxSize(),
         bottomBar = {
-            if (state.shouldShowBottomBar) {
-                TnTBottomBar(
-                    modifier = Modifier.navigationBarsPadding(),
-                    bottomTabs = state.mainTabs,
-                    currentTab = state.currentMainTab,
-                    onClickTab = state::navigateMainTab,
-                )
-            }
+            TnTBottomBar(
+                modifier = Modifier.navigationBarsPadding(),
+                bottomTabs = state.mainTabs,
+                isVisible = state.shouldShowBottomBar,
+                currentTab = state.currentMainTab,
+                onClickTab = state::navigateMainTab,
+            )
         },
     ) { innerPadding ->
         NavHost(
-            modifier = Modifier.padding(innerPadding),
             navController = navController,
             startDestination = state.startDestination,
         ) {
             traineeHomeNavGraph(
+                padding = innerPadding,
                 navigateToNotification = navController::navigateToTraineeNotification,
                 navigateToMealRecord = navigateToMealRecord,
                 navigateToMealDetail = navigateToMealDetail,
@@ -78,6 +77,7 @@ private fun TraineeMainScreen(
                 )
             }
             traineeMyPageNavGraph(
+                padding = innerPadding,
                 navigateToLogin = navigateToLogin,
                 navigateToWebView = navigateToWebView,
                 navigateToTraineeConnect = navigateToConnect,

feature/trainee/main/src/main/java/co/kr/tnt/trainee/main/TraineeMainTab.kt

@@ -1,24 +1,30 @@
 package co.kr.tnt.trainee.main
 
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import co.kr.tnt.core.designsystem.R
 import co.kr.tnt.designsystem.component.bottombar.BottomTab
+import co.kr.tnt.designsystem.theme.TnTTheme
 import co.kr.tnt.navigation.Route
 
 internal enum class TraineeMainTab(
     override val contentDescription: String,
     override val icon: Int,
+    val containerColor: @Composable () -> Color,
     val baseRoute: Route.TraineeMainTab,
     val route: Route,
 ) : BottomTab {
     HOME(
         contentDescription = "홈",
         icon = R.drawable.ic_navbar_home,
+        containerColor = { TnTTheme.colors.commonColors.Common0 },
         baseRoute = Route.TraineeMainTab.Home,
         route = Route.TraineeHome,
     ),
     MY_PAGE(
         contentDescription = "내 정보",
         icon = R.drawable.ic_navbar_mypage,
+        containerColor = { TnTTheme.colors.neutralColors.Neutral50 },
         baseRoute = Route.TraineeMainTab.MyPage,
         route = Route.TraineeMyPage,
     ),

feature/trainee/mypage/src/main/java/co/kr/tnt/trainee/mypage/TraineeMyPageScreen.kt

@@ -4,6 +4,7 @@ import android.content.Intent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -55,6 +56,7 @@ import co.kr.tnt.core.ui.R as coreR
 @OptIn(ExperimentalPermissionsApi::class)
 @Composable
 internal fun TraineeMyPageRoute(
+    padding: PaddingValues,
     navigateToConnect: (Boolean) -> Unit,
     navigateToLogin: () -> Unit,
     navigateToWebView: (url: String) -> Unit,
@@ -68,6 +70,7 @@ internal fun TraineeMyPageRoute(
 
     TraineeMyPageScreen(
         state = uiState,
+        padding = padding,
         appVersion = context.getAppVersion(),
         onClickConnect = { viewModel.setEvent(TraineeMyPageUiEvent.OnClickConnect) },
         onTogglePushNotification = {
@@ -117,6 +120,7 @@ internal fun TraineeMyPageRoute(
 @Composable
 private fun TraineeMyPageScreen(
     state: TraineeMyPageUiState,
+    padding: PaddingValues,
     appVersion: String,
     onClickConnect: () -> Unit,
     onTogglePushNotification: () -> Unit,
@@ -137,6 +141,7 @@ private fun TraineeMyPageScreen(
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier
+            .padding(padding)
             .fillMaxSize()
             .background(TnTTheme.colors.neutralColors.Neutral50)
             .verticalScroll(rememberScrollState()),
@@ -321,6 +326,7 @@ private fun TraineeMyPageScreenPreview() {
                 ),
                 isEnablePushNotification = true,
             ),
+            padding = PaddingValues(),
             appVersion = "1.0",
             onClickConnect = { },
             onTogglePushNotification = { },

feature/trainee/mypage/src/main/java/co/kr/tnt/trainee/mypage/navigation/TraineeMyPageNavigation.kt

@@ -1,5 +1,6 @@
 package co.kr.tnt.trainee.mypage.navigation
 
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptionsBuilder
@@ -16,13 +17,15 @@ fun NavController.navigateToTraineeMyPage(
 )
 
 fun NavGraphBuilder.traineeMyPageNavGraph(
+    padding: PaddingValues,
     navigateToTraineeConnect: (Boolean) -> Unit,
     navigateToLogin: () -> Unit,
     navigateToWebView: (url: String) -> Unit,
 ) {
     navigation<Route.TraineeMainTab.MyPage>(startDestination = Route.TraineeMyPage) {
         composable<Route.TraineeMyPage> {
             TraineeMyPageRoute(
+                padding = padding,
                 navigateToConnect = navigateToTraineeConnect,
                 navigateToLogin = navigateToLogin,
                 navigateToWebView = navigateToWebView,

feature/trainee/notification/src/main/java/co/kr/tnt/trainee/notification/TraineeNotificationScreen.kt

@@ -1,6 +1,7 @@
 package co.kr.tnt.trainee.notification
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -59,11 +60,12 @@ private fun TraineeNotificationScreen(
             TnTTopBarWithBackButton(
                 title = stringResource(uiResource.string.notification),
                 onBackClick = onBackClick,
+                showStoke = true,
             )
         },
         containerColor = TnTTheme.colors.commonColors.Common0,
     ) { innerPadding ->
-        Box(modifier = Modifier.fillMaxSize()) {
+        Column(modifier = Modifier.padding(innerPadding)) {
             if (state.notifications.isEmpty()) {
                 Box(
                     modifier = Modifier.fillMaxSize(),
@@ -77,9 +79,7 @@ private fun TraineeNotificationScreen(
                 }
             } else {
                 LazyColumn(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(innerPadding),
+                    modifier = Modifier.fillMaxSize(),
                 ) {
                     items(state.notifications) { notification ->
                         TnTNotification(