Merge pull request #66 from YAPP-Github/feature/TNT-182

[TNT-182] 트레이니 홈 화면 바텀 네비게이션 UI 구현

core/designsystem/src/main/res/drawable/ic_navbar_home.xml

@@ -0,0 +1,11 @@
+<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="M2,10.618C2,10.039 2.25,9.489 2.687,9.109L10.687,2.144C11.439,1.488 12.561,1.488 13.313,2.144L21.313,9.109C21.75,9.489 22,10.039 22,10.618V20C22,21.105 21.105,22 20,22H17C15.895,22 15,21.105 15,20V17C15,15.895 14.105,15 13,15H11C9.895,15 9,15.895 9,17V20C9,21.105 8.105,22 7,22H4C2.895,22 2,21.105 2,20V10.618Z"
+      android:strokeWidth="1.5"
+      android:fillColor="#D4D4D4"
+      android:strokeColor="#D4D4D4"/>
+</vector>

core/designsystem/src/main/res/drawable/ic_navbar_mypage.xml

@@ -0,0 +1,20 @@
+<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="M12,4C10.067,4 8.5,5.567 8.5,7.5C8.5,9.433 10.067,11 12,11C13.933,11 15.5,9.433 15.5,7.5C15.5,5.567 13.933,4 12,4Z"
+      android:fillColor="#D4D4D4"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M9.25,7.5C9.25,5.981 10.481,4.75 12,4.75V3.25C9.653,3.25 7.75,5.153 7.75,7.5H9.25ZM12,10.25C10.481,10.25 9.25,9.019 9.25,7.5H7.75C7.75,9.847 9.653,11.75 12,11.75V10.25ZM14.75,7.5C14.75,9.019 13.519,10.25 12,10.25V11.75C14.347,11.75 16.25,9.847 16.25,7.5H14.75ZM12,4.75C13.519,4.75 14.75,5.981 14.75,7.5H16.25C16.25,5.153 14.347,3.25 12,3.25V4.75Z"
+      android:fillColor="#D4D4D4"/>
+  <path
+      android:pathData="M11.5,13.333C7.91,13.333 5,15.879 5,19.021C5,19.745 5.588,20.333 6.313,20.333H17.688C18.412,20.333 19,19.745 19,19.021C19,15.879 16.09,13.333 12.5,13.333H11.5Z"
+      android:fillColor="#D4D4D4"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M5.75,19.021C5.75,16.385 8.227,14.083 11.5,14.083V12.583C7.593,12.583 4.25,15.374 4.25,19.021H5.75ZM17.688,19.583H6.313V21.083H17.688V19.583ZM12.5,14.083C15.773,14.083 18.25,16.385 18.25,19.021H19.75C19.75,15.374 16.407,12.583 12.5,12.583V14.083ZM11.5,14.083H12.5V12.583H11.5V14.083ZM17.688,21.083C18.827,21.083 19.75,20.16 19.75,19.021H18.25C18.25,19.331 17.998,19.583 17.688,19.583V21.083ZM4.25,19.021C4.25,20.16 5.173,21.083 6.313,21.083V19.583C6.002,19.583 5.75,19.331 5.75,19.021H4.25Z"
+      android:fillColor="#D4D4D4"/>
+</vector>

core/ui/src/main/java/co/kr/tnt/ui/model/NotificationState.kt

@@ -3,7 +3,7 @@ package co.kr.tnt.ui.model
 import co.kr.tnt.designsystem.component.notification.model.NotificationIcon
 import co.kr.tnt.domain.model.NotificationInfo
 import co.kr.tnt.domain.model.NotificationType
-import co.kr.tnt.ui.util.NotificationTimeFormatter
+import co.kr.tnt.ui.utils.NotificationTimeFormatter
 
 data class NotificationState(
     val type: NotificationIcon,

core/ui/src/main/java/co/kr/tnt/ui/util/FileUtils.kt → core/ui/src/main/java/co/kr/tnt/ui/utils/FileUtils.kt

@@ -1,4 +1,4 @@
-package co.kr.tnt.ui.util
+package co.kr.tnt.ui.utils
 
 import android.content.Context
 import android.database.Cursor

core/ui/src/main/java/co/kr/tnt/ui/util/NotificationTimeUtil.kt → core/ui/src/main/java/co/kr/tnt/ui/utils/NotificationTimeUtil.kt

@@ -1,4 +1,4 @@
-package co.kr.tnt.ui.util
+package co.kr.tnt.ui.utils
 
 import java.time.LocalDateTime
 import java.time.format.DateTimeFormatter

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

@@ -1,19 +1,35 @@
 package co.kr.tnt.trainee.main
 
 import android.annotation.SuppressLint
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 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.material3.Button
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+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.dp
+import androidx.compose.ui.unit.sp
 import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navOptions
+import co.kr.tnt.designsystem.theme.TnTTheme
 import co.kr.tnt.navigation.Route
 import co.kr.tnt.trainee.home.navigation.traineeHomeNavGraph
 import co.kr.tnt.trainee.mypage.navigation.traineeMyPageNavGraph
@@ -46,18 +62,21 @@ private fun TraineeMainScreen(
     Scaffold(
         modifier = Modifier.fillMaxSize(),
         bottomBar = {
-            TraineeMainBottomBar { tab ->
-                navController.navigate(
-                    route = tab.route,
-                    navOptions = navOptions {
-                        popUpTo(navController.graph.findStartDestination().id) {
-                            saveState = true
-                        }
-                        launchSingleTop = true
-                        restoreState = true
-                    },
-                )
-            }
+            TraineeMainBottomBar(
+                navController = navController,
+                onClickTab = { tab ->
+                    navController.navigate(
+                        route = tab.route,
+                        navOptions = navOptions {
+                            popUpTo(navController.graph.findStartDestination().id) {
+                                saveState = true
+                            }
+                            launchSingleTop = true
+                            restoreState = true
+                        },
+                    )
+                },
+            )
         },
     ) { _ ->
         NavHost(
@@ -83,17 +102,83 @@ private fun TraineeMainScreen(
 
 @Composable
 private fun TraineeMainBottomBar(
+    navController: NavHostController,
     onClickTab: (tab: TraineeMainTab) -> Unit,
 ) {
+    val navBackStackEntry by navController.currentBackStackEntryAsState()
+    val currentRoute = navBackStackEntry?.destination?.route
+
     Row(
-        modifier = Modifier.navigationBarsPadding(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier
+            .background(TnTTheme.colors.commonColors.Common0)
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp)
+            .navigationBarsPadding(),
     ) {
         TraineeMainTab.entries.forEach { tab ->
-            Button(
-                onClick = { onClickTab(tab) },
-            ) {
-                Text(tab.contentDescription)
-            }
+            val selected = currentRoute?.contains(tab.route.toString()) == true
+            BottomAppBarItem(
+                tab = tab,
+                selected = selected,
+                onClickTab = onClickTab,
+            )
         }
     }
 }
+
+@Composable
+private fun RowScope.BottomAppBarItem(
+    tab: TraineeMainTab,
+    selected: Boolean,
+    onClickTab: (tab: TraineeMainTab) -> Unit,
+) {
+    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,
+        ),
+    ) {
+        Column(
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Icon(
+                painter = painterResource(tab.icon),
+                contentDescription = null,
+                tint = if (selected) {
+                    TnTTheme.colors.neutralColors.Neutral800
+                } else {
+                    TnTTheme.colors.neutralColors.Neutral300
+                },
+            )
+            Text(
+                text = tab.contentDescription,
+                style = TnTTheme.typography.label2Medium,
+                fontSize = 12.sp,
+                color = if (selected) {
+                    TnTTheme.colors.neutralColors.Neutral800
+                } else {
+                    TnTTheme.colors.neutralColors.Neutral400
+                },
+                modifier = Modifier.padding(top = 6.dp),
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun TraineeMainBottomPreview() {
+    TnTTheme {
+        TraineeMainBottomBar(
+            onClickTab = {},
+            navController = rememberNavController(),
+        )
+    }
+}

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

@@ -1,17 +1,21 @@
 package co.kr.tnt.trainee.main
 
+import co.kr.tnt.core.designsystem.R
 import co.kr.tnt.navigation.Route
 
 internal enum class TraineeMainTab(
     internal val contentDescription: String,
+    internal val icon: Int,
     val route: Route.TraineeMainTab,
 ) {
     HOME(
         contentDescription = "홈",
-        Route.TraineeMainTab.Home,
+        icon = R.drawable.ic_navbar_home,
+        route = Route.TraineeMainTab.Home,
     ),
     MY_PAGE(
         contentDescription = "내 정보",
-        Route.TraineeMainTab.MyPage,
+        icon = R.drawable.ic_navbar_mypage,
+        route = Route.TraineeMainTab.MyPage,
     ),
 }

feature/trainee/signup/src/main/java/co/kr/tnt/trainee/signup/TraineeSignUpViewModel.kt

@@ -11,7 +11,7 @@ import co.kr.tnt.trainee.signup.TraineeSignUpContract.TraineeSignUpPage
 import co.kr.tnt.trainee.signup.TraineeSignUpContract.TraineeSignUpUiEvent
 import co.kr.tnt.trainee.signup.TraineeSignUpContract.TraineeSignUpUiState
 import co.kr.tnt.ui.base.BaseViewModel
-import co.kr.tnt.ui.util.toFile
+import co.kr.tnt.ui.utils.toFile
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.launch
 import java.time.LocalDate

feature/trainer/signup/src/main/java/co/kr/tnt/trainer/signup/TrainerSignUpViewModel.kt

@@ -10,7 +10,7 @@ import co.kr.tnt.trainer.signup.TrainerSignUpContract.TrainerSignUpPage
 import co.kr.tnt.trainer.signup.TrainerSignUpContract.TrainerSignUpUiEvent
 import co.kr.tnt.trainer.signup.TrainerSignUpContract.TrainerSignUpUiState
 import co.kr.tnt.ui.base.BaseViewModel
-import co.kr.tnt.ui.util.toFile
+import co.kr.tnt.ui.utils.toFile
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.launch
 import javax.inject.Inject