refactor :: 디자인 변경

team-aliens · Jan 4, 2025 · 090e994 · 090e994
1 parent eeaeb69
commit 090e994
Showing 1 changed file with 60 additions and 57 deletions.
diff --git a/composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt b/composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt
@@ -3,15 +3,16 @@ package team.aliens.dms.kmp.ui
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.BottomAppBar
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
@@ -33,64 +34,66 @@ fun BottomNavigationBar(
     navController: NavController = rememberNavController(),
 ) {
     val selectedRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    BottomAppBar(
-        modifier = Modifier
-            .fillMaxHeight(0.08f)
-            .graphicsLayer {
-                clip = true
-                shape = RoundedCornerShape(
-                    topStart = 24.dp,
-                    topEnd = 24.dp,
+
+    Column {
+        HorizontalDivider(
+            modifier = Modifier.fillMaxWidth(),
+            thickness = 1.dp,
+            color = DmsTheme.colors.surface,
+        )
+        BottomAppBar(
+            modifier = Modifier
+                .fillMaxHeight(0.08f),
+            contentColor = DmsTheme.colors.background,
+            containerColor = DmsTheme.colors.background,
+        ) {
+            bottomMenus.forEach {
+                val selected = selectedRoute == it.route
+                val color by animateColorAsState(
+                    targetValue = if (selected) {
+                        DmsTheme.colors.inversePrimary
+                    } else {
+                        DmsTheme.colors.inverseSurface
+                    },
                 )
-                shadowElevation = 20f
-            },
-        contentColor = DmsTheme.colors.onBackground,
-        containerColor = DmsTheme.colors.onBackground,
-    ) {
-        bottomMenus.forEach {
-            val selected = selectedRoute == it.route
-            val color by animateColorAsState(
-                targetValue = if (selected) {
-                    DmsTheme.colors.onBackground
-                } else {
-                    DmsTheme.colors.inverseSurface
-                },
-            )
 
-            NavigationBarItem(
-                selected = selected,
-                onClick = {
-                    if (!selected) {
-                        navController.navigate(it.route) {
-                            launchSingleTop = true
-                            restoreState = true
+                NavigationBarItem(
+                    selected = selected,
+                    onClick = {
+                        if (!selected) {
+                            navController.navigate(it.route) {
+                                launchSingleTop = true
+                                restoreState = true
+                            }
+                        }
+                    },
+                    icon = {
+                        Column(
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                        ) {
+                            Icon(
+                                painter = painterResource(resource = if (selected) it.selectedIcon else it.icon),
+                                contentDescription = it.route,
+                                tint = color,
+                            )
+                            DmsText(
+                                text = it.title,
+                                style = DmsTypography.Body3,
+                                color = color,
+                            )
                         }
-                    }
-                },
-                icon = {
-                    Column {
-                        Icon(
-                            painter = painterResource(resource = if (selected) it.selectedIcon else it.icon),
-                            contentDescription = it.route,
-                            tint = color,
-                        )
-                        DmsText(
-                            text = it.title,
-                            style = DmsTypography.Button4,
-                            color = color,
-                        )
-                    }
-                },
-                colors = NavigationBarItemColors(
-                    selectedIconColor = DmsTheme.colors.onBackground,
-                    selectedTextColor = DmsTheme.colors.onBackground,
-                    selectedIndicatorColor = DmsTheme.colors.onBackground,
-                    unselectedIconColor = DmsTheme.colors.inverseSurface,
-                    unselectedTextColor = DmsTheme.colors.inverseSurface,
-                    disabledIconColor = DmsTheme.colors.inverseSurface,
-                    disabledTextColor = DmsTheme.colors.inverseSurface,
-                ),
-            )
+                    },
+                    colors = NavigationBarItemColors(
+                        selectedIconColor = DmsTheme.colors.inversePrimary,
+                        selectedTextColor = DmsTheme.colors.inversePrimary,
+                        selectedIndicatorColor = DmsTheme.colors.background,
+                        unselectedIconColor = DmsTheme.colors.inverseSurface,
+                        unselectedTextColor = DmsTheme.colors.inverseSurface,
+                        disabledIconColor = DmsTheme.colors.inverseSurface,
+                        disabledTextColor = DmsTheme.colors.inverseSurface,
+                    ),
+                )
+            }
         }
     }
 }