[Feat] BottomNavigationBar Compose 마이그레이션

app/build.gradle.kts

@@ -150,6 +150,7 @@ android {
 dependencies {
     ktlintRuleset(libs.ktlint)
     implementation(libs.map.sdk)
+    implementation(libs.androidx.navigation.compose)
     implementation(libs.play.services.location)
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.fragment.ktx)

app/src/main/java/com/daedan/festabook/presentation/home/navigation/HomeNavigation.kt

@@ -0,0 +1,24 @@
+package com.daedan.festabook.presentation.home.navigation
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import com.daedan.festabook.presentation.home.HomeViewModel
+import com.daedan.festabook.presentation.home.component.HomeScreen
+import com.daedan.festabook.presentation.main.MainTabRoute
+
+fun NavGraphBuilder.homeNavGraph(
+    padding: PaddingValues,
+    viewModel: HomeViewModel,
+    onNavigateToExplore: () -> Unit,
+) {
+    composable<MainTabRoute.Home> {
+        HomeScreen(
+            modifier = Modifier.padding(padding),
+            viewModel = viewModel,
+            onNavigateToExplore = onNavigateToExplore,
+        )
+    }
+}

app/src/main/java/com/daedan/festabook/presentation/main/FestabookMainTab.kt

@@ -0,0 +1,59 @@
+package com.daedan.festabook.presentation.main
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import com.daedan.festabook.R
+import com.daedan.festabook.presentation.theme.FestabookColor
+
+enum class FestabookMainTab(
+    @param:DrawableRes val iconResId: Int,
+    @param:StringRes val labelResId: Int,
+    val route: MainTabRoute,
+) {
+    HOME(
+        iconResId = R.drawable.ic_home,
+        labelResId = R.string.menu_home_title,
+        route = MainTabRoute.Home,
+    ),
+    SCHEDULE(
+        iconResId = R.drawable.ic_schedule,
+        labelResId = R.string.menu_schedule_title,
+        route = MainTabRoute.Schedule,
+    ),
+    PLACE_MAP(
+        iconResId = R.drawable.ic_map,
+        labelResId = R.string.menu_map_title,
+        route = MainTabRoute.PlaceMap,
+    ),
+    NEWS(
+        iconResId = R.drawable.ic_news,
+        labelResId = R.string.menu_news_title,
+        route = MainTabRoute.News,
+    ),
+    SETTING(
+        iconResId = R.drawable.ic_setting,
+        labelResId = R.string.menu_setting_title,
+        route = MainTabRoute.Setting,
+    ),
+    ;
+
+    companion object Defaults {
+        @Composable
+        fun find(predicate: @Composable (FestabookRoute) -> Boolean) =
+            entries.find {
+                predicate(it.route)
+            }
+
+        val selectedColor
+            @Composable
+            @ReadOnlyComposable
+            get() = FestabookColor.black
+
+        val unselectedColor
+            @Composable
+            @ReadOnlyComposable
+            get() = FestabookColor.gray400
+    }
+}

app/src/main/java/com/daedan/festabook/presentation/main/FestabookNavigator.kt

@@ -0,0 +1,84 @@
+package com.daedan.festabook.presentation.main
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.navigation.NavDestination.Companion.hasRoute
+import androidx.navigation.NavGraph.Companion.findStartDestination
+import androidx.navigation.NavHostController
+import androidx.navigation.NavOptions
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.navOptions
+
+class FestabookNavigator(
+    val navController: NavHostController,
+) {
+    private val currentDestination
+        @Composable
+        get() =
+            navController
+                .currentBackStackEntryAsState()
+                .value
+                ?.destination
+
+    private val defaultNavOptions =
+        navOptions {
+            popUpTo(navController.graph.findStartDestination().id) {
+                saveState = true
+            }
+            launchSingleTop = true
+            restoreState = true
+        }
+
+    val currentTab
+        @Composable
+        get() =
+            FestabookMainTab.find {
+                currentDestination?.hasRoute(it::class) ?: false
+            }
+
+    val shouldShowBottomBar
+        @Composable
+        get() =
+            FestabookMainTab.find {
+                currentDestination?.hasRoute(it::class) ?: false
+            } != null
+
+    val startRoute = MainTabRoute.Home // TODO: Splash와 Explore 연동 시 변경
+
+    fun navigateToMainTab(route: FestabookRoute) {
+        navController.navigate(
+            route,
+            defaultNavOptions,
+        )
+    }
+
+    fun navigate(
+        route: FestabookRoute,
+        navOptions: NavOptions? = null,
+    ) {
+        navController.navigate(
+            route,
+            navOptions,
+        )
+    }
+
+    fun popBackStack() {
+        navController.popBackStack()
+    }
+
+    fun popBackStack(
+        route: FestabookRoute,
+        inclusive: Boolean = false,
+    ) {
+        navController.popBackStack(route, inclusive)
+    }
+}
+
+@Composable
+fun rememberFestabookNavigator(): FestabookNavigator {
+    val navController = rememberNavController()
+    return remember {
+        FestabookNavigator(navController = navController)
+    }
+}

app/src/main/java/com/daedan/festabook/presentation/main/FestabookRoute.kt

@@ -0,0 +1,34 @@
+package com.daedan.festabook.presentation.main
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed interface FestabookRoute {
+    @Serializable
+    data object Splash : FestabookRoute
+
+    // TODO: PlaceUiModel, PlaceDetailUiModel 생성자에 추가 후 UiModel에 @Serializable 어노테이션 필요
+    @Serializable
+    data object PlaceDetail : FestabookRoute
+
+    @Serializable
+    data object Explore : FestabookRoute
+}
+
+@Serializable
+sealed interface MainTabRoute : FestabookRoute {
+    @Serializable
+    data object Home : MainTabRoute
+
+    @Serializable
+    data object Schedule : MainTabRoute
+
+    @Serializable
+    data object PlaceMap : MainTabRoute
+
+    @Serializable
+    data object News : MainTabRoute
+
+    @Serializable
+    data object Setting : MainTabRoute
+}

app/src/main/java/com/daedan/festabook/presentation/main/component/FestabookBottomNavigationBar.kt

@@ -0,0 +1,150 @@
+package com.daedan.festabook.presentation.main.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.selection.selectable
+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.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.daedan.festabook.R
+import com.daedan.festabook.presentation.main.FestabookMainTab
+import com.daedan.festabook.presentation.main.FestabookMainTab.Defaults.selectedColor
+import com.daedan.festabook.presentation.main.FestabookMainTab.Defaults.unselectedColor
+import com.daedan.festabook.presentation.theme.FestabookColor
+import com.daedan.festabook.presentation.theme.FestabookTheme
+import com.daedan.festabook.presentation.theme.FestabookTypography
+import com.daedan.festabook.presentation.theme.festabookSpacing
+
+@Composable
+fun FestabookBottomNavigationBar(
+    currentTab: FestabookMainTab?,
+    onTabSelect: (FestabookMainTab) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        contentAlignment = Alignment.BottomCenter,
+        modifier = modifier,
+    ) {
+        Row(
+            modifier =
+                Modifier
+                    .background(color = FestabookColor.white)
+                    .fillMaxWidth()
+                    .height(70.dp),
+        ) {
+            FestabookMainTab.entries.forEach { item ->
+                when (item) {
+                    FestabookMainTab.PLACE_MAP -> Spacer(modifier = Modifier.weight(1f))
+                    else -> {
+                        FestabookNavigationItem(
+                            tab = item,
+                            selected = item == currentTab,
+                            onClick = onTabSelect,
+                        )
+                    }
+                }
+            }
+        }
+        PlaceMapNavigationItem(onClick = onTabSelect)
+    }
+}
+
+@Composable
+private fun RowScope.FestabookNavigationItem(
+    onClick: (FestabookMainTab) -> Unit,
+    tab: FestabookMainTab,
+    selected: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier =
+            modifier
+                .weight(1f)
+                .fillMaxHeight()
+                .background(color = FestabookColor.white)
+                .selectable(
+                    selected = selected,
+                    onClick = { onClick(tab) },
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null, // 리플(Ripple) 완벽 제거
+                ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            Icon(
+                painter = painterResource(id = tab.iconResId),
+                contentDescription = stringResource(tab.labelResId),
+                tint = if (selected) selectedColor else unselectedColor,
+            )
+            Spacer(modifier = Modifier.height(festabookSpacing.paddingBody1))
+            Text(
+                text = stringResource(tab.labelResId),
+                style = FestabookTypography.labelMedium,
+                color = if (selected) selectedColor else unselectedColor,
+            )
+        }
+    }
+}
+
+@Composable
+private fun PlaceMapNavigationItem(
+    onClick: (FestabookMainTab) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Image(
+        modifier =
+            modifier
+                .offset(y = -festabookSpacing.paddingBody4)
+                .clickable(
+                    onClick = {
+                        onClick(FestabookMainTab.PLACE_MAP)
+                    },
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() },
+                ),
+        painter = painterResource(id = R.drawable.btn_fab_manu),
+        contentDescription = stringResource(FestabookMainTab.PLACE_MAP.labelResId),
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun FestabookBottomNavigationBarPreview() {
+    FestabookTheme {
+        var currentTabState by remember { mutableStateOf(FestabookMainTab.HOME) }
+        Scaffold(
+            bottomBar = {
+                FestabookBottomNavigationBar(
+                    currentTab = currentTabState,
+                    onTabSelect = { currentTabState = it },
+                )
+            },
+        ) { it }
+    }
+}