Merge pull request #92 from YAPP-Github/ui/#91-design-system-update

[UI/#91] 디자인 시스템 변경 사항 반영

Author: wjdrjs00

app/src/main/java/com/threegap/bitnagil/navigation/home/HomeBottomNavigationBar.kt

@@ -1,6 +1,5 @@
 package com.threegap.bitnagil.navigation.home
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -9,6 +8,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 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.material3.Text
@@ -17,13 +17,12 @@ 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.ColorFilter
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import com.threegap.bitnagil.designsystem.BitnagilTheme
+import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
 
 @Composable
 fun HomeBottomNavigationBar(
@@ -35,14 +34,15 @@ fun HomeBottomNavigationBar(
         modifier = Modifier
             .fillMaxWidth()
             .background(color = BitnagilTheme.colors.white)
+            .height(62.dp)
             .padding(horizontal = 16.dp, vertical = 7.dp),
-        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalAlignment = Alignment.CenterVertically,
     ) {
         HomeRoute.entries.map { homeRoute ->
             HomeBottomNavigationItem(
                 modifier = Modifier.weight(1f),
-                selectIconResourceId = homeRoute.selectIconResourceId,
-                unSelectIconResourceId = homeRoute.unSelectIconResourceId,
+                icon = homeRoute.icon,
                 title = homeRoute.title,
                 onClick = {
                     navController.navigate(homeRoute.route) {
@@ -58,8 +58,7 @@ fun HomeBottomNavigationBar(
 @Composable
 private fun HomeBottomNavigationItem(
     modifier: Modifier = Modifier,
-    selectIconResourceId: Int,
-    unSelectIconResourceId: Int,
+    icon: Int,
     title: String,
     onClick: () -> Unit,
     selected: Boolean,
@@ -68,25 +67,26 @@ private fun HomeBottomNavigationItem(
     val isPressed by interactionSource.collectIsPressedAsState()
 
     val contentTintColor = when {
-        isPressed -> BitnagilTheme.colors.navy300
-        selected -> BitnagilTheme.colors.navy500
-        else -> BitnagilTheme.colors.navy100
+        isPressed -> BitnagilTheme.colors.coolGray10
+        selected -> BitnagilTheme.colors.coolGray10
+        else -> BitnagilTheme.colors.coolGray90
     }
-    val iconResourceId = if (selected) selectIconResourceId else unSelectIconResourceId
 
     Column(
-        modifier = modifier.clickable(
-            onClick = onClick,
-            interactionSource = interactionSource,
-            indication = null,
-        ),
+        modifier = modifier
+            .clickable(
+                onClick = onClick,
+                interactionSource = interactionSource,
+                indication = null,
+            )
+            .padding(4.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(4.dp),
     ) {
-        Image(
-            painter = painterResource(id = iconResourceId),
-            contentDescription = title,
-            modifier = Modifier.padding(4.dp).size(24.dp),
-            colorFilter = ColorFilter.tint(color = contentTintColor),
+        BitnagilIcon(
+            id = icon,
+            modifier = Modifier.size(24.dp),
+            tint = contentTintColor,
         )
 
         Text(
@@ -104,6 +104,5 @@ private fun HomeBottomNavigationBarPreview() {
 
     HomeBottomNavigationBar(
         navController = navigator.navController,
-
     )
 }

app/src/main/java/com/threegap/bitnagil/navigation/home/HomeNavHost.kt

@@ -108,7 +108,7 @@ fun HomeNavHost(
                         onClick = { GlobalBitnagilToast.showWarning("제보하기 기능은 추후 제공될 예정입니다.") },
                     ),
                     FloatingActionItem(
-                        icon = R.drawable.ic_add_routine,
+                        icon = R.drawable.ic_routine_add,
                         text = "루틴 등록",
                         onClick = { navigateToRegisterRoutine(null) },
                     ),

app/src/main/java/com/threegap/bitnagil/navigation/home/HomeRoute.kt

@@ -5,28 +5,24 @@ import com.threegap.bitnagil.R
 enum class HomeRoute(
     val route: String,
     val title: String,
-    val selectIconResourceId: Int,
-    val unSelectIconResourceId: Int,
+    val icon: Int,
 ) {
     Home(
         route = "home/home",
         title = "홈",
-        selectIconResourceId = R.drawable.ic_home_fill,
-        unSelectIconResourceId = R.drawable.ic_home_empty,
+        icon = R.drawable.ic_home,
     ),
 
     RecommendRoutine(
         route = "home/recommend_routine",
         title = "추천 루틴",
-        selectIconResourceId = R.drawable.ic_recommend_fill,
-        unSelectIconResourceId = R.drawable.ic_recommend_empty,
+        icon = R.drawable.ic_routine_recommend,
     ),
 
     MyPage(
         route = "home/my_page",
         title = "마이페이지",
-        selectIconResourceId = R.drawable.ic_mypage_fill,
-        unSelectIconResourceId = R.drawable.ic_mypage_empty,
+        icon = R.drawable.ic_profile,
     ),
     ;
 }

app/src/main/res/drawable/ic_home.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19.831,16.45C19.831,16.05 20.261,16.05 20.261,15.66C20.261,15.27 20.341,15.27 20.341,14.87C20.341,14.47 20.041,14.48 20.041,14.08C20.041,13.68 19.941,13.68 19.941,13.29C19.941,12.9 20.061,12.89 20.061,12.5C20.061,12.11 20.211,12.1 20.211,11.7C20.211,11.3 20.311,11.3 20.311,10.9C20.311,10.37 20.141,10.09 20.071,9.84C20.011,9.62 19.961,9.37 19.831,9.18C19.691,8.97 19.491,8.75 19.091,8.39C18.791,8.13 18.801,8.11 18.501,7.85C18.201,7.59 18.061,7.75 17.761,7.49C17.461,7.23 17.611,7.06 17.311,6.79C17.011,6.52 17.041,6.5 16.741,6.24C16.441,5.98 16.211,6.24 15.911,5.98C15.611,5.72 15.631,5.7 15.331,5.43C15.031,5.16 15.191,4.98 14.891,4.71C14.591,4.44 14.401,4.66 14.101,4.39C13.811,4.14 13.851,3.6 13.641,3.44C13.321,3.18 12.991,2.99 12.731,2.92C12.361,2.81 11.941,3.24 11.571,3.35C11.311,3.43 10.971,3.35 10.661,3.6C10.461,3.76 10.281,4.04 9.991,4.29C9.691,4.55 9.581,4.43 9.281,4.69C8.981,4.95 9.161,5.16 8.861,5.42C8.561,5.68 8.311,5.4 8.011,5.66C7.711,5.92 7.771,5.99 7.471,6.25C7.171,6.51 7.311,6.67 7.011,6.94C6.711,7.21 6.791,7.29 6.481,7.55C6.171,7.81 6.241,7.89 5.941,8.15C5.641,8.41 5.601,8.37 5.301,8.63C4.901,8.98 4.561,9.01 4.421,9.22C4.291,9.41 4.111,9.6 4.061,9.82C4.001,10.07 4.241,10.36 4.241,10.89C4.241,11.29 3.971,11.29 3.971,11.68C3.971,12.07 4.271,12.07 4.271,12.47C4.271,12.87 4.141,12.86 4.141,13.26C4.141,13.66 4.001,13.66 4.001,14.05C4.001,14.44 3.941,14.45 3.941,14.84C3.941,15.23 4.201,15.24 4.201,15.64C4.201,16.04 3.861,16.04 3.861,16.44C3.861,16.8 3.991,17.09 3.991,17.34C4.001,17.72 3.921,18.08 4.011,18.3C4.111,18.55 4.291,18.87 4.471,19.05C4.651,19.23 5.151,18.99 5.391,19.09C5.621,19.18 5.801,19.43 6.181,19.44C6.421,19.44 6.711,19.33 7.071,19.33C7.431,19.33 7.721,19.37 7.961,19.36C8.341,19.35 8.661,19.5 8.881,19.4C9.131,19.3 9.281,19.02 9.461,18.83C9.641,18.64 9.801,18.44 9.901,18.2C9.991,17.97 10.241,17.72 10.261,17.34C10.261,17.1 10.121,16.8 10.121,16.44C10.121,15.94 10.191,15.94 10.191,15.44C10.191,15.17 9.911,14.83 10.011,14.59C10.111,14.35 10.431,14.18 10.621,14C10.811,13.82 11.141,13.91 11.391,13.81C11.641,13.71 11.801,13.37 12.071,13.37C12.341,13.37 12.511,13.73 12.741,13.82C12.971,13.91 13.401,13.75 13.581,13.93C13.761,14.11 13.721,14.47 13.821,14.71C13.921,14.95 14.261,15.17 14.261,15.44C14.261,15.94 14.221,15.94 14.221,16.44C14.221,16.8 13.991,17.09 14.001,17.34C14.011,17.72 14.331,17.9 14.421,18.13C14.521,18.38 14.281,18.87 14.461,19.05C14.641,19.23 15.101,19.08 15.351,19.18C15.581,19.27 15.781,19.61 16.171,19.62C16.411,19.62 16.711,19.54 17.071,19.54C17.431,19.54 17.731,19.62 17.971,19.61C18.351,19.6 18.511,19.14 18.731,19.04C18.981,18.94 19.251,18.99 19.431,18.81C19.611,18.63 20.041,18.55 20.151,18.3C20.241,18.07 20.011,17.71 20.021,17.33C20.021,17.09 19.821,16.8 19.821,16.44L19.831,16.45Z"
+      android:fillColor="#171719"/>
+  <path
+      android:pathData="M19.831,16.45C19.831,16.05 20.261,16.05 20.261,15.66C20.261,15.27 20.341,15.27 20.341,14.87C20.341,14.47 20.041,14.48 20.041,14.08C20.041,13.68 19.941,13.68 19.941,13.29C19.941,12.9 20.061,12.89 20.061,12.5C20.061,12.11 20.211,12.1 20.211,11.7C20.211,11.3 20.311,11.3 20.311,10.9C20.311,10.37 20.141,10.09 20.071,9.84C20.011,9.62 19.961,9.37 19.831,9.18C19.691,8.97 19.491,8.75 19.091,8.39C18.791,8.13 18.801,8.11 18.501,7.85C18.201,7.59 18.061,7.75 17.761,7.49C17.461,7.23 17.611,7.06 17.311,6.79C17.011,6.52 17.041,6.5 16.741,6.24C16.441,5.98 16.211,6.24 15.911,5.98C15.611,5.72 15.631,5.7 15.331,5.43C15.031,5.16 15.191,4.98 14.891,4.71C14.591,4.44 14.401,4.66 14.101,4.39C13.811,4.14 13.851,3.6 13.641,3.44C13.321,3.18 12.991,2.99 12.731,2.92C12.361,2.81 11.941,3.24 11.571,3.35C11.311,3.43 10.971,3.35 10.661,3.6C10.461,3.76 10.281,4.04 9.991,4.29C9.691,4.55 9.581,4.43 9.281,4.69C8.981,4.95 9.161,5.16 8.861,5.42C8.561,5.68 8.311,5.4 8.011,5.66C7.711,5.92 7.771,5.99 7.471,6.25C7.171,6.51 7.311,6.67 7.011,6.94C6.711,7.21 6.791,7.29 6.481,7.55C6.171,7.81 6.241,7.89 5.941,8.15C5.641,8.41 5.601,8.37 5.301,8.63C4.901,8.98 4.561,9.01 4.421,9.22C4.291,9.41 4.111,9.6 4.061,9.82C4.001,10.07 4.241,10.36 4.241,10.89C4.241,11.29 3.971,11.29 3.971,11.68C3.971,12.07 4.271,12.07 4.271,12.47C4.271,12.87 4.141,12.86 4.141,13.26C4.141,13.66 4.001,13.66 4.001,14.05C4.001,14.44 3.941,14.45 3.941,14.84C3.941,15.23 4.201,15.24 4.201,15.64C4.201,16.04 3.861,16.04 3.861,16.44C3.861,16.8 3.991,17.09 3.991,17.34C4.001,17.72 3.921,18.08 4.011,18.3C4.111,18.55 4.291,18.87 4.471,19.05C4.651,19.23 5.151,18.99 5.391,19.09C5.621,19.18 5.801,19.43 6.181,19.44C6.421,19.44 6.711,19.33 7.071,19.33C7.431,19.33 7.721,19.37 7.961,19.36C8.341,19.35 8.661,19.5 8.881,19.4C9.131,19.3 9.281,19.02 9.461,18.83C9.641,18.64 9.801,18.44 9.901,18.2C9.991,17.97 10.241,17.72 10.261,17.34C10.261,17.1 10.121,16.8 10.121,16.44C10.121,15.94 10.191,15.94 10.191,15.44C10.191,15.17 9.911,14.83 10.011,14.59C10.111,14.35 10.431,14.18 10.621,14C10.811,13.82 11.141,13.91 11.391,13.81C11.641,13.71 11.801,13.37 12.071,13.37C12.341,13.37 12.511,13.73 12.741,13.82C12.971,13.91 13.401,13.75 13.581,13.93C13.761,14.11 13.721,14.47 13.821,14.71C13.921,14.95 14.261,15.17 14.261,15.44C14.261,15.94 14.221,15.94 14.221,16.44C14.221,16.8 13.991,17.09 14.001,17.34C14.011,17.72 14.331,17.9 14.421,18.13C14.521,18.38 14.281,18.87 14.461,19.05C14.641,19.23 15.101,19.08 15.351,19.18C15.581,19.27 15.781,19.61 16.171,19.62C16.411,19.62 16.711,19.54 17.071,19.54C17.431,19.54 17.731,19.62 17.971,19.61C18.351,19.6 18.511,19.14 18.731,19.04C18.981,18.94 19.251,18.99 19.431,18.81C19.611,18.63 20.041,18.55 20.151,18.3C20.241,18.07 20.011,17.71 20.021,17.33C20.021,17.09 19.821,16.8 19.821,16.44L19.831,16.45Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#171719"
+      android:strokeLineCap="round"/>
+</vector>