Skip to content

Commit

Permalink
[feat #80] :: 바텀네비게이션 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
parkuiery authored Nov 22, 2024
2 parents d8d4a1d + 09beffe commit 1949be1
Show file tree
Hide file tree
Showing 29 changed files with 633 additions and 6 deletions.
4 changes: 4 additions & 0 deletions composeApp/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@ kotlin {
implementation(projects.feature.splash)
implementation(projects.feature.signin)
implementation(projects.feature.signup)
implementation(projects.feature.home)
implementation(projects.feature.application)
implementation(projects.feature.notice)
implementation(projects.feature.mypage)
}
jvmMain.dependencies {
implementation(compose.desktop.currentOs)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import androidx.navigation.compose.NavHost
import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
import team.aliens.dms.kmp.navigation.authorized.NAVIGATION_AUTH
import team.aliens.dms.kmp.navigation.authorized.authNavigation
import team.aliens.dms.kmp.navigation.main.mainNavigation

@Composable
internal fun DmsApp() {
Expand All @@ -24,7 +25,7 @@ internal fun DmsApp() {
startDestination = NAVIGATION_AUTH,
) {
authNavigation(navigator = navigator)
// mainNavigation(navigator = navigator)
mainNavigation(navigator = navigator)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,16 @@ import team.aliens.dms.kmp.feature.signup.navigation.navigateToSetId
import team.aliens.dms.kmp.feature.signup.navigation.navigateToSetPassword
import team.aliens.dms.kmp.feature.signup.navigation.navigateToSignUp
import team.aliens.dms.kmp.feature.signup.navigation.navigateToTerms
import team.aliens.dms.kmp.root.navigateToRoot

internal class DmsNavigator(
val navController: NavHostController,
) {

fun navigateToRoot() {
navController.navigateToRoot()
}

fun navigateToSignIn() {
navController.navigateToSignIn()
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ internal fun NavGraphBuilder.authNavigation(
navigateToLogin = navigator::navigateToSignIn,
)
signIn(
navigateToMain = { },
navigateToMain = navigator::navigateToRoot,
navigateToSignUp = navigator::navigateToSignUp,
navigateToFindId = { },
navigateToFindPassword = { },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ package team.aliens.dms.kmp.navigation.main
import androidx.navigation.NavGraphBuilder
import androidx.navigation.navigation
import team.aliens.dms.kmp.DmsNavigator
import team.aliens.dms.kmp.root.NAVIGATION_ROOT
import team.aliens.dms.kmp.root.root

private const val NAVIGATION_MAIN = "main"

Expand All @@ -11,7 +13,8 @@ internal fun NavGraphBuilder.mainNavigation(
) {
navigation(
route = NAVIGATION_MAIN,
startDestination = "",
startDestination = NAVIGATION_ROOT,
) {
root()
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
package team.aliens.dms.kmp.root

import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable

const val NAVIGATION_ROOT = "root"

fun NavGraphBuilder.root() {
composable(NAVIGATION_ROOT) {
Root()
}
}

fun NavController.navigateToRoot() {
navigate(NAVIGATION_ROOT)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
package team.aliens.dms.kmp.root

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.rememberNavController
import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
import team.aliens.dms.kmp.feature.application.navigation.application
import team.aliens.dms.kmp.feature.home.navigation.NAVIGATION_HOME
import team.aliens.dms.kmp.feature.home.navigation.home
import team.aliens.dms.kmp.feature.mypage.navigation.myPage
import team.aliens.dms.kmp.feature.notice.navigation.notice
import team.aliens.dms.kmp.ui.BottomNavigationBar

@Composable
internal fun Root() {
RootScreen()
}

@Composable
private fun RootScreen() {
val navController: NavHostController = rememberNavController()

Scaffold(
bottomBar = { BottomNavigationBar(navController = navController) },
) {
NavHost(
navController = navController,
startDestination = NAVIGATION_HOME,
modifier = Modifier
.background(DmsTheme.colors.onBackground)
.padding(bottom = it.calculateBottomPadding()),
) {
home()
application()
notice()
myPage()
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
package team.aliens.dms.kmp.ui

import org.jetbrains.compose.resources.DrawableResource
import team.aliens.dms.kmp.core.designsystem.foundation.DmsIcon
import team.aliens.dms.kmp.feature.application.navigation.NAVIGATION_APPLICATION
import team.aliens.dms.kmp.feature.home.navigation.NAVIGATION_HOME
import team.aliens.dms.kmp.feature.mypage.navigation.NAVIGATION_MY_PAGE
import team.aliens.dms.kmp.feature.notice.navigation.NAVIGATION_NOTICE

sealed class BottomMenu(
val route: String,
val icon: DrawableResource,
val selectedIcon: DrawableResource,
val title: String,
) {
data object Home : BottomMenu(
route = NAVIGATION_HOME,
icon = DmsIcon.Home,
selectedIcon = DmsIcon.HomeFill,
title = "",
)

data object Application : BottomMenu(
route = NAVIGATION_APPLICATION,
icon = DmsIcon.AddNotes,
selectedIcon = DmsIcon.AddNotesFill,
title = "신청",
)

data object Notice : BottomMenu(
route = NAVIGATION_NOTICE,
icon = DmsIcon.BreakingNews,
selectedIcon = DmsIcon.BreakingNewsFill,
title = "안내",
)

data object MyPage : BottomMenu(
route = NAVIGATION_MY_PAGE,
icon = DmsIcon.Person,
selectedIcon = DmsIcon.PersonFill,
title = "내 페이지",
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
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.layout.padding
import androidx.compose.material3.BottomAppBar
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.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import org.jetbrains.compose.resources.painterResource
import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
import team.aliens.dms.kmp.core.designsystem.foundation.DmsTypography
import team.aliens.dms.kmp.core.designsystem.text.DmsText

private val bottomMenus = listOf(
BottomMenu.Home,
BottomMenu.Application,
BottomMenu.Notice,
BottomMenu.MyPage,
)

@Composable
fun BottomNavigationBar(
navController: NavController = rememberNavController(),
) {
val selectedRoute = navController.currentBackStackEntryAsState().value?.destination?.route
BottomAppBar(
modifier = Modifier.fillMaxHeight(0.08f),
contentColor = DmsTheme.colors.onBackground,
containerColor = DmsTheme.colors.onBackground,
) {
bottomMenus.forEach {
val selected = selectedRoute == it.route
val color by animateColorAsState(
targetValue = if (selected) {
DmsTheme.colors.surfaceContainerLow
} else {
DmsTheme.colors.surfaceVariant
},
)

NavigationBarItem(
selected = selected,
onClick = {
if (!selected) {
navController.navigate(it.route) {
launchSingleTop = true
restoreState = true
}
}
},
icon = {
Column(
modifier = Modifier.padding(10.dp),
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.Body2Medium,
color = color,
)
}
},
colors = NavigationBarItemColors(
selectedIconColor = DmsTheme.colors.surfaceContainerLow,
selectedTextColor = DmsTheme.colors.surfaceContainerLow,
selectedIndicatorColor = DmsTheme.colors.onBackground,
unselectedIconColor = DmsTheme.colors.surfaceVariant,
unselectedTextColor = DmsTheme.colors.surfaceVariant,
disabledIconColor = DmsTheme.colors.surfaceVariant,
disabledTextColor = DmsTheme.colors.surfaceVariant,
),
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="24dp"
android:viewportWidth="25"
android:viewportHeight="24">
<group>
<clip-path
android:pathData="M0.375,0h24v24h-24z"/>
<path
android:pathData="M17.933,18.5V20.558C17.933,20.676 17.977,20.779 18.066,20.867C18.154,20.956 18.257,21 18.375,21C18.493,21 18.596,20.956 18.684,20.867C18.773,20.779 18.817,20.676 18.817,20.558V18.5H20.875C20.993,18.5 21.096,18.456 21.184,18.367C21.273,18.279 21.317,18.176 21.317,18.058C21.317,17.94 21.273,17.837 21.184,17.748C21.096,17.66 20.993,17.615 20.875,17.615H18.817V15.558C18.817,15.44 18.773,15.337 18.684,15.248C18.596,15.16 18.493,15.116 18.375,15.116C18.257,15.116 18.154,15.16 18.066,15.248C17.977,15.337 17.933,15.44 17.933,15.558V17.615H15.875C15.757,17.615 15.654,17.66 15.566,17.748C15.477,17.837 15.433,17.94 15.433,18.058C15.433,18.176 15.477,18.279 15.566,18.367C15.654,18.456 15.757,18.5 15.875,18.5H17.933ZM18.375,22.558C17.126,22.558 16.064,22.12 15.189,21.244C14.313,20.369 13.875,19.306 13.875,18.058C13.875,16.809 14.313,15.747 15.189,14.871C16.064,13.996 17.126,13.558 18.375,13.558C19.624,13.558 20.686,13.996 21.562,14.871C22.437,15.747 22.875,16.809 22.875,18.058C22.875,19.306 22.437,20.369 21.562,21.244C20.686,22.12 19.624,22.558 18.375,22.558ZM8.375,8.865H16.375C16.587,8.865 16.766,8.793 16.909,8.65C17.053,8.506 17.125,8.328 17.125,8.115C17.125,7.903 17.053,7.724 16.909,7.581C16.766,7.437 16.587,7.365 16.375,7.365H8.375C8.163,7.365 7.984,7.437 7.841,7.581C7.697,7.725 7.625,7.903 7.625,8.116C7.625,8.328 7.697,8.506 7.841,8.65C7.984,8.793 8.163,8.865 8.375,8.865ZM5.683,20.5C5.186,20.5 4.76,20.323 4.406,19.969C4.052,19.615 3.875,19.189 3.875,18.692V5.308C3.875,4.811 4.052,4.385 4.406,4.031C4.76,3.677 5.186,3.5 5.683,3.5H19.067C19.564,3.5 19.99,3.677 20.344,4.031C20.698,4.385 20.875,4.811 20.875,5.308V10.536C20.875,10.812 20.766,11.027 20.548,11.18C20.33,11.333 20.089,11.372 19.825,11.298C19.599,11.234 19.364,11.188 19.119,11.159C18.874,11.13 18.626,11.116 18.375,11.116C18.115,11.116 17.865,11.131 17.627,11.161C17.389,11.192 17.151,11.24 16.913,11.306C16.801,11.281 16.676,11.265 16.538,11.259C16.401,11.253 16.276,11.25 16.163,11.25H8.375C8.163,11.25 7.984,11.322 7.841,11.466C7.697,11.61 7.625,11.788 7.625,12C7.625,12.213 7.697,12.391 7.841,12.535C7.984,12.678 8.163,12.75 8.375,12.75H13.981C13.578,13.065 13.221,13.423 12.909,13.824C12.597,14.225 12.333,14.662 12.117,15.135H8.375C8.163,15.135 7.984,15.207 7.841,15.35C7.697,15.494 7.625,15.672 7.625,15.885C7.625,16.097 7.697,16.276 7.841,16.419C7.984,16.563 8.163,16.635 8.375,16.635H11.642C11.59,16.859 11.551,17.082 11.527,17.305C11.503,17.527 11.491,17.759 11.491,18C11.491,18.25 11.501,18.496 11.521,18.739C11.542,18.981 11.581,19.221 11.639,19.459C11.696,19.717 11.649,19.955 11.498,20.173C11.347,20.391 11.143,20.5 10.887,20.5H5.683Z"
android:fillColor="#000000"/>
</group>
</vector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="24dp"
android:viewportWidth="25"
android:viewportHeight="24">
<group>
<clip-path
android:pathData="M0.625,0h24v24h-24z"/>
<path
android:pathData="M7.626,16.885C7.877,16.885 8.087,16.8 8.256,16.63C8.425,16.46 8.509,16.25 8.509,15.999C8.509,15.748 8.425,15.538 8.255,15.369C8.085,15.2 7.875,15.116 7.624,15.116C7.373,15.116 7.163,15.2 6.994,15.37C6.825,15.54 6.74,15.75 6.74,16.001C6.74,16.252 6.825,16.462 6.995,16.631C7.165,16.8 7.375,16.885 7.626,16.885ZM7.625,7.25C7.412,7.25 7.234,7.322 7.09,7.466C6.947,7.609 6.875,7.787 6.875,8V12.635C6.875,12.847 6.947,13.025 7.091,13.169C7.235,13.313 7.413,13.385 7.625,13.385C7.838,13.385 8.016,13.313 8.16,13.169C8.303,13.025 8.375,12.847 8.375,12.635V8C8.375,7.787 8.303,7.609 8.159,7.466C8.015,7.322 7.837,7.25 7.625,7.25ZM17.625,16.75C17.837,16.75 18.016,16.678 18.159,16.534C18.303,16.39 18.375,16.212 18.375,16C18.375,15.787 18.303,15.609 18.159,15.465C18.016,15.322 17.837,15.25 17.625,15.25H12.625C12.413,15.25 12.234,15.322 12.091,15.466C11.947,15.61 11.875,15.788 11.875,16C11.875,16.213 11.947,16.391 12.091,16.535C12.234,16.678 12.413,16.75 12.625,16.75H17.625ZM17.625,12.75C17.837,12.75 18.016,12.678 18.159,12.534C18.303,12.39 18.375,12.212 18.375,12C18.375,11.787 18.303,11.609 18.159,11.465C18.016,11.322 17.837,11.25 17.625,11.25H12.625C12.413,11.25 12.234,11.322 12.091,11.466C11.947,11.61 11.875,11.788 11.875,12C11.875,12.213 11.947,12.391 12.091,12.535C12.234,12.678 12.413,12.75 12.625,12.75H17.625ZM17.625,8.75C17.837,8.75 18.016,8.678 18.159,8.534C18.303,8.39 18.375,8.212 18.375,8C18.375,7.787 18.303,7.609 18.159,7.465C18.016,7.322 17.837,7.25 17.625,7.25H12.625C12.413,7.25 12.234,7.322 12.091,7.466C11.947,7.61 11.875,7.788 11.875,8C11.875,8.213 11.947,8.391 12.091,8.535C12.234,8.678 12.413,8.75 12.625,8.75H17.625ZM4.933,20.5C4.428,20.5 4,20.325 3.65,19.975C3.3,19.625 3.125,19.197 3.125,18.692V5.308C3.125,4.803 3.3,4.375 3.65,4.025C4,3.675 4.428,3.5 4.933,3.5H20.317C20.822,3.5 21.25,3.675 21.6,4.025C21.95,4.375 22.125,4.803 22.125,5.308V18.692C22.125,19.197 21.95,19.625 21.6,19.975C21.25,20.325 20.822,20.5 20.317,20.5H4.933Z"
android:fillColor="#000000"/>
</group>
</vector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="24dp"
android:viewportWidth="25"
android:viewportHeight="24">
<group>
<clip-path
android:pathData="M0.125,0h24v24h-24z"/>
<path
android:pathData="M4.625,19V10.154C4.625,9.867 4.689,9.596 4.817,9.34C4.945,9.084 5.122,8.873 5.348,8.708L11.04,4.419C11.356,4.178 11.717,4.058 12.123,4.058C12.53,4.058 12.892,4.178 13.21,4.419L18.902,8.708C19.128,8.873 19.305,9.084 19.433,9.34C19.561,9.596 19.625,9.867 19.625,10.154V19C19.625,19.409 19.477,19.761 19.182,20.057C18.886,20.352 18.534,20.5 18.125,20.5H14.933C14.677,20.5 14.462,20.413 14.289,20.24C14.115,20.067 14.029,19.852 14.029,19.596V14.711C14.029,14.455 13.942,14.241 13.769,14.067C13.596,13.894 13.381,13.808 13.125,13.808H11.125C10.869,13.808 10.654,13.894 10.481,14.067C10.308,14.241 10.221,14.455 10.221,14.711V19.596C10.221,19.852 10.135,20.067 9.961,20.24C9.788,20.413 9.573,20.5 9.317,20.5H6.125C5.716,20.5 5.364,20.352 5.068,20.057C4.773,19.761 4.625,19.409 4.625,19Z"
android:fillColor="#000000"/>
</group>
</vector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="24dp"
android:viewportWidth="25"
android:viewportHeight="24">
<group>
<clip-path
android:pathData="M0.875,0h24v24h-24z"/>
<path
android:pathData="M12.875,11.692C11.91,11.692 11.085,11.35 10.401,10.666C9.717,9.983 9.375,9.158 9.375,8.192C9.375,7.227 9.717,6.402 10.401,5.718C11.085,5.034 11.91,4.692 12.875,4.692C13.84,4.692 14.665,5.034 15.349,5.718C16.033,6.402 16.375,7.227 16.375,8.192C16.375,9.158 16.033,9.983 15.349,10.666C14.665,11.35 13.84,11.692 12.875,11.692ZM5.375,17.789V17.085C5.375,16.595 5.508,16.142 5.774,15.724C6.04,15.307 6.396,14.986 6.84,14.762C7.829,14.277 8.826,13.914 9.832,13.671C10.838,13.429 11.852,13.308 12.875,13.308C13.898,13.308 14.912,13.429 15.918,13.671C16.924,13.914 17.921,14.277 18.91,14.762C19.354,14.986 19.71,15.307 19.976,15.724C20.242,16.142 20.375,16.595 20.375,17.085V17.789C20.375,18.21 20.227,18.569 19.932,18.865C19.636,19.16 19.278,19.308 18.856,19.308H6.894C6.472,19.308 6.114,19.16 5.818,18.865C5.523,18.569 5.375,18.21 5.375,17.789Z"
android:fillColor="#000000"/>
</group>
</vector>
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@ package team.aliens.dms.kmp.core.designsystem.foundation

import dmskmp.core.design_system.generated.resources.Res
import dmskmp.core.design_system.generated.resources.ic_add_notes
import dmskmp.core.design_system.generated.resources.ic_add_notes_fill
import dmskmp.core.design_system.generated.resources.ic_alarm
import dmskmp.core.design_system.generated.resources.ic_arrow_back
import dmskmp.core.design_system.generated.resources.ic_breaking_news
import dmskmp.core.design_system.generated.resources.ic_breaking_news_fill
import dmskmp.core.design_system.generated.resources.ic_cancel
import dmskmp.core.design_system.generated.resources.ic_check
import dmskmp.core.design_system.generated.resources.ic_delete
import dmskmp.core.design_system.generated.resources.ic_edit
import dmskmp.core.design_system.generated.resources.ic_home
import dmskmp.core.design_system.generated.resources.ic_home_fill
import dmskmp.core.design_system.generated.resources.ic_person
import dmskmp.core.design_system.generated.resources.ic_person_fill
import dmskmp.core.design_system.generated.resources.ic_refresh
import dmskmp.core.design_system.generated.resources.ic_symbol_dark
import dmskmp.core.design_system.generated.resources.ic_symbol_light
Expand All @@ -33,4 +37,8 @@ object DmsIcon {
val Alarm = Res.drawable.ic_alarm
val Refresh = Res.drawable.ic_refresh
val Check = Res.drawable.ic_check
val HomeFill = Res.drawable.ic_home_fill
val AddNotesFill = Res.drawable.ic_add_notes_fill
val BreakingNewsFill = Res.drawable.ic_breaking_news_fill
val PersonFill = Res.drawable.ic_person_fill
}
Loading

0 comments on commit 1949be1

Please sign in to comment.