Merge pull request #44 from Nexters/feature/fix-design-bottom-bar

바텀바 디자인 수정
Nexters · Sep 20, 2023 · 03bd763 · 03bd763
2 parents 7317e37 + 0fea2ab
commit 03bd763
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/app/src/main/java/com/keyme/app/ui/KeymeApp.kt b/app/src/main/java/com/keyme/app/ui/KeymeApp.kt
@@ -1,14 +1,17 @@
 package com.keyme.app.ui
 
-import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
-import androidx.compose.material3.NavigationBarItem
-import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
+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.res.painterResource
@@ -26,6 +29,7 @@ import com.keyme.presentation.myprofile.ui.myProfileGraph
 import com.keyme.presentation.onboarding.onboardingGraph
 import com.keyme.presentation.takekeymetest.TakeKeymeTestDestination
 import com.keyme.presentation.takekeymetest.takeKeymeTestGraph
+import com.keyme.presentation.utils.topBorder
 
 @Composable
 fun KeymeApp() {
@@ -104,25 +108,29 @@ fun KeymeBottomBar(
     onNavigateToDestination: (TopLevelDestination) -> Unit,
 ) {
     NavigationBar(
-        modifier = Modifier.border(width = 1.dp, color = Color(0xFF363636)),
+        modifier = Modifier.topBorder(width = 1.dp, color = Color(0xFF363636)),
         containerColor = Color(0x80232323),
         tonalElevation = 4.dp,
     ) {
         keymeTopLevelDestinations.forEach { destination ->
             val isSelected = currentDestination?.hierarchy?.any { it.route == destination.route } == true
 
-            NavigationBarItem(
-                selected = isSelected,
-                onClick = {
-                    onNavigateToDestination(destination)
-                },
-                icon = {
-                    val iconResId =
-                        if (isSelected) destination.selectedIconResId else destination.unselectedIconResId
-                    Icon(painter = painterResource(id = iconResId), contentDescription = "")
-                },
-                colors = NavigationBarItemDefaults.colors(indicatorColor = Color.Transparent),
-            )
+            val iconResId =
+                if (isSelected) destination.selectedIconResId else destination.unselectedIconResId
+            Box(
+                modifier = Modifier
+                    .align(Alignment.CenterVertically)
+                    .fillMaxHeight()
+                    .weight(1f)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = { onNavigateToDestination(destination) },
+                    ),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(painter = painterResource(id = iconResId), contentDescription = "")
+            }
         }
     }
 }
diff --git a/presentation/src/main/java/com/keyme/presentation/utils/Modifiers.kt b/presentation/src/main/java/com/keyme/presentation/utils/Modifiers.kt
@@ -6,6 +6,10 @@ import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 
 fun Modifier.clickableRippleEffect(bounded: Boolean = true, onClick: () -> Unit) = composed {
     clickable(
@@ -14,3 +18,17 @@ fun Modifier.clickableRippleEffect(bounded: Boolean = true, onClick: () -> Unit)
         onClick = { onClick() },
     )
 }
+
+fun Modifier.topBorder(width: Dp, color: Color) = composed {
+    drawBehind {
+        val strokeWidth = width.value * density
+        val y = strokeWidth / 2
+
+        drawLine(
+            color,
+            Offset(0f, y),
+            Offset(size.width, y),
+            strokeWidth,
+        )
+    }
+}