🛠[Setting] Compose 기본 세팅과 템플릿 제작

app/build.gradle.kts

@@ -28,13 +28,19 @@ android {
             isMinifyEnabled = true
             isShrinkResources = true
             isDebuggable = false
-            proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
         }
         debug {
             isMinifyEnabled = false
             isShrinkResources = false
             isDebuggable = true
-            proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
             applicationIdSuffix = ".debug"
         }
     }

common/build.gradle.kts

@@ -23,7 +23,6 @@ android {
 
 dependencies {
     implementation(libs.bundles.kotlin)
-    implementation(libs.bundles.androidx.presentation)
     implementation(libs.google.material)
     implementation(libs.glide)
 

gradle/libs.versions.toml

@@ -28,6 +28,7 @@ androidx-room = "2.6.1"
 androidx-paging = "3.1.1"
 # Google
 google-material = "1.11.0"
+system-contoller = "0.20.1"
 # Network
 ktor = "2.3.7"
 kotlinx-serialization = "1.6.1"
@@ -44,6 +45,14 @@ leakcanary = "2.12"
 okhttp3-logging-interceptor = "4.9.1"
 # Common
 ted-permission = "3.3.0"
+# Compose
+androidx-compose = "1.4.3"
+compose-viewmodel = "2.7.0"
+compose-coil = "1.3.2"
+compose-livedata = "1.5.4"
+compose-navi = "2.7.0"
+compose-hiltnavi = "1.1.0"
+compose-bottomsheet = "1.3.1"
 
 [libraries]
 # Kotlin
@@ -71,6 +80,7 @@ androidx-paging-runtime = { module = "androidx.paging:paging-runtime-ktx", versi
 androidx-paging-common = { module = "androidx.paging:paging-common-ktx", version.ref = "androidx-paging" }
 # Google
 google-material = { module = "com.google.android.material:material", version.ref = "google-material" }
+google-system-contoller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "system-contoller" }
 # Network
 ktor-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
@@ -92,6 +102,19 @@ sentry = { module = "io.sentry:sentry-android", version.ref = "sentry" }
 # Debug
 leakcanary = { module = "com.squareup.leakcanary:leakcanary-android", version.ref = "leakcanary" }
 okhttp3-logging-interceptor = { module = "com.squareup.okhttp3:logging-interceptor", version.ref = "okhttp3-logging-interceptor" }
+# Compose
+compose-material = { module = "androidx.compose.material:material", version.ref = "androidx-compose" }
+compose-ui-ui = { module = "androidx.compose.ui:ui", version.ref = "androidx-compose" }
+compose-ui-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "androidx-compose" }
+compose-viewmodel = { module = "androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "compose-viewmodel" }
+compose-navi = { module = "androidx.navigation:navigation-compose", version.ref = "compose-navi" }
+compose-hiltnavi = { module = "androidx.hilt:hilt-navigation-compose", version.ref = "compose-hiltnavi" }
+
+compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "androidx-compose" }
+compose-ui-test = { module = "androidx.compose.ui:ui-test-manifest", version.ref = "androidx-compose" }
+compose-bottomsheet = { module = "com.holix.android:bottomsheetdialog-compose", version.ref = "compose-bottomsheet" }
+compose-coil = { module = "io.coil-kt:coil-compose", version.ref = "compose-coil" }
+compose-livedata = { module = "androidx.compose.runtime:runtime-livedata", version.ref = "compose-livedata" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "plugin-gradle" }
@@ -106,9 +129,10 @@ sentry = { id = "io.sentry.android.gradle", version.ref = "plugin-sentry" }
 
 [bundles]
 kotlin = ["kotlin", "kotlinx-coroutines-android", "kotlinx-coroutines-core", "kotlinx-datetime"]
-androidx-presentation = ["androidx-core", "androidx-appcompat", "androidx-constraintlayout", "androidx-fragment",
-    "androidx-viewmodel", "androidx-livedata", "androidx-navigation-fragment", "androidx-navigation-ui"]
 androidx-data = ["androidx-room-runtime", "androidx-room-coroutine", "androidx-paging-runtime"]
+androidx-presentation = ["androidx-core", "androidx-appcompat", "androidx-constraintlayout", "androidx-fragment",
+    "androidx-viewmodel", "androidx-livedata", "androidx-navigation-fragment", "androidx-navigation-ui",
+    "compose-ui-ui", "compose-ui-preview", "compose-material", "compose-viewmodel", "compose-hiltnavi", "compose-navi"]
 network = ["ktor-core", "ktor-okhttp", "ktor-resources", "ktor-content-negotiation", "ktor-kotlinx-serialization",
     "ktor-auth", "kotlinx-serialization"]
 logging = ["timber", "sentry"]

presentation/build.gradle.kts

@@ -20,10 +20,16 @@ android {
 
     buildTypes {
         debug {
-            proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
         }
         release {
-            proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
         }
     }
 
@@ -37,6 +43,10 @@ android {
 
     buildFeatures {
         dataBinding = true
+        compose = true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.5.6"
     }
 }
 
@@ -59,6 +69,16 @@ dependencies {
     implementation(libs.ted.permission)
 
     implementation(libs.bundles.logging)
+
+    debugImplementation(libs.compose.ui.tooling)
+    debugImplementation(libs.compose.ui.test)
+
+    implementation(libs.compose.bottomsheet)
+    implementation(libs.compose.coil)
+    implementation(libs.compose.livedata)
+
+    implementation(libs.google.system.contoller)
+
 }
 
 fun getLocalProperty(propertyKey: String): String {

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/root/LoginRootConstant.kt

@@ -0,0 +1,8 @@
+package ac.dnd.bookkeeping.android.presentation.common.root
+
+object LoginRootConstant {
+
+    const val LOGIN_MAIN = "loginMainScreen"
+    const val LOGIN_ONBOARD = "loginOnboardScreen"
+
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/root/MainRootConstant.kt

@@ -0,0 +1,11 @@
+package ac.dnd.bookkeeping.android.presentation.common.root
+
+object MainRootConstant {
+
+    const val BOTTOM_FIRST = "firstScreen"
+    const val BOTTOM_SECOND = "secondScreen"
+    const val BOTTOM_THIRD = "thirdScreen"
+    const val BOTTOM_FOURTH = "fourthScreen"
+    const val BOTTOM_FIFTH = "fifthScreen"
+
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/root/RootEntryPoint.kt

@@ -0,0 +1,6 @@
+package ac.dnd.bookkeeping.android.presentation.common.root
+
+enum class RootEntryPoint {
+    LOGIN,
+    MAIN
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/root/ScreenRootConstant.kt

@@ -0,0 +1,10 @@
+package ac.dnd.bookkeeping.android.presentation.common.root
+
+object ScreenRootConstant {
+
+    const val LOGIN_SPLASH = "loginSplashScreen"
+    const val MAIN_SPLASH = "mainSplashScreen"
+    const val LOGIN_GRAPH = "loginGraph"
+    const val MAIN_GRAPH = "mainGraph"
+
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/state/ApplicationState.kt

@@ -0,0 +1,41 @@
+package ac.dnd.bookkeeping.android.presentation.common.state
+
+import androidx.compose.material.ScaffoldState
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.google.accompanist.systemuicontroller.SystemUiController
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+
+@Stable
+class ApplicationState(
+    val bottomBarState: MutableState<Boolean>,
+    val navController: NavHostController,
+    val systemUiController: SystemUiController,
+    val scaffoldState: ScaffoldState
+)
+
+@Composable
+fun rememberApplicationState(
+    bottomBarState: MutableState<Boolean> = remember { mutableStateOf(false) },
+    navController: NavHostController = rememberNavController(),
+    systemUiController: SystemUiController = rememberSystemUiController(),
+    scaffoldState: ScaffoldState = rememberScaffoldState()
+) = remember(
+    bottomBarState,
+    navController,
+    systemUiController,
+    scaffoldState
+) {
+    ApplicationState(
+        bottomBarState = bottomBarState,
+        navController = navController,
+        systemUiController = systemUiController,
+        scaffoldState = scaffoldState
+    )
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/state/ManageSystemUiState.kt

@@ -0,0 +1,41 @@
+package ac.dnd.bookkeeping.android.presentation.common.state
+
+import ac.dnd.bookkeeping.android.presentation.common.root.LoginRootConstant
+import ac.dnd.bookkeeping.android.presentation.common.root.MainRootConstant
+import ac.dnd.bookkeeping.android.presentation.common.root.ScreenRootConstant
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.navigation.compose.currentBackStackEntryAsState
+
+@Composable
+fun ManageSystemUiState(
+    appState: ApplicationState
+) {
+    val navBackStackEntry by appState.navController.currentBackStackEntryAsState()
+
+    when (navBackStackEntry?.destination?.route) {
+
+        ScreenRootConstant.LOGIN_SPLASH, ScreenRootConstant.MAIN_SPLASH -> {
+            appState.systemUiController.isStatusBarVisible = false
+            appState.systemUiController.isNavigationBarVisible = false
+            appState.bottomBarState.value = false
+        }
+
+        MainRootConstant.BOTTOM_FIRST,
+        MainRootConstant.BOTTOM_SECOND,
+        MainRootConstant.BOTTOM_THIRD,
+        MainRootConstant.BOTTOM_FOURTH,
+        MainRootConstant.BOTTOM_FIFTH -> {
+            appState.systemUiController.isStatusBarVisible = false
+            appState.systemUiController.isNavigationBarVisible = true
+            appState.bottomBarState.value = true
+        }
+
+        LoginRootConstant.LOGIN_ONBOARD, LoginRootConstant.LOGIN_MAIN -> {
+            appState.systemUiController.isStatusBarVisible = true
+            appState.systemUiController.isNavigationBarVisible = true
+            appState.bottomBarState.value = false
+        }
+    }
+
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/bottombar/BottomBarItem.kt

@@ -0,0 +1,53 @@
+package ac.dnd.bookkeeping.android.presentation.ui.bottombar
+
+import ac.dnd.bookkeeping.android.presentation.R
+import ac.dnd.bookkeeping.android.presentation.common.root.MainRootConstant
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+
+sealed class BottomBarItem(
+    val route: String,
+    @DrawableRes val drawableResId: Int,
+    @StringRes val stringResId: Int
+) {
+    data object BottomFirst :
+        BottomBarItem(
+            route = MainRootConstant.BOTTOM_FIRST,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomSecond :
+        BottomBarItem(
+            route = MainRootConstant.BOTTOM_SECOND,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomThird :
+        BottomBarItem(
+            route = MainRootConstant.BOTTOM_THIRD,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomFourth :
+        BottomBarItem(
+            route = MainRootConstant.BOTTOM_FOURTH,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomFifth :
+        BottomBarItem(
+            route = MainRootConstant.BOTTOM_FIFTH,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    companion object {
+        val BOTTOM_NAV_ITEMS = listOf<BottomBarItem>(
+            BottomFirst, BottomSecond, BottomThird, BottomFourth, BottomFifth
+        )
+    }
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/bottombar/BottomBarScreen.kt

@@ -0,0 +1,80 @@
+package ac.dnd.bookkeeping.android.presentation.ui.bottombar
+
+import ac.dnd.bookkeeping.android.presentation.common.root.ScreenRootConstant
+import ac.dnd.bookkeeping.android.presentation.common.state.ApplicationState
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.compose.currentBackStackEntryAsState
+
+@Composable
+fun BottomBarScreen(
+    appState: ApplicationState,
+    bottomBarItems: List<BottomBarItem> = BottomBarItem.BOTTOM_NAV_ITEMS
+) {
+
+    AnimatedVisibility(
+        visible = appState.bottomBarState.value,
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(80.dp)
+    ) {
+
+        BottomNavigation(
+            elevation = 0.dp,
+            backgroundColor = Color.LightGray,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            val navBackStackEntry by appState.navController.currentBackStackEntryAsState()
+            val currentRoute = navBackStackEntry?.destination?.route
+
+            bottomBarItems.forEach { screen ->
+
+                BottomNavigationItem(
+                    selected = currentRoute == screen.route,
+                    icon = {
+                        Icon(
+                            painter = painterResource(id = screen.drawableResId),
+                            contentDescription = "bottom icon"
+                        )
+                    },
+                    label = {
+                        Text(
+                            text = stringResource(id = screen.stringResId),
+                            fontSize = 12.sp,
+                            color = Color.Black,
+                            modifier = Modifier.padding(0.dp)
+                        )
+                    },
+                    selectedContentColor = Color.Black,
+                    unselectedContentColor = Color.Gray,
+                    onClick = {
+                        appState.navController.navigate(screen.route) {
+                            popUpTo(ScreenRootConstant.MAIN_GRAPH) {
+                                saveState = true
+                            }
+                            launchSingleTop = true
+                            restoreState = true
+                        }
+                    }
+                )
+
+            }
+        }
+
+    }
+}