🛠[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"
         }
     }

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" }
@@ -112,3 +135,4 @@ androidx-data = ["androidx-room-runtime", "androidx-room-coroutine", "androidx-p
 network = ["ktor-core", "ktor-okhttp", "ktor-resources", "ktor-content-negotiation", "ktor-kotlinx-serialization",
     "ktor-auth", "kotlinx-serialization"]
 logging = ["timber", "sentry"]
+compose = ["compose-ui-ui", "compose-ui-preview", "compose-material", "compose-viewmodel", "compose-hiltnavi", "compose-navi"]

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,17 @@ dependencies {
     implementation(libs.ted.permission)
 
     implementation(libs.bundles.logging)
+
+    implementation(libs.bundles.compose)
+    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/bottomBar/BottomBarItem.kt

@@ -0,0 +1,53 @@
+package ac.dnd.bookkeeping.android.presentation.common.bottomBar
+
+import ac.dnd.bookkeeping.android.presentation.R
+import ac.dnd.bookkeeping.android.presentation.common.root.MainRoot
+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 = MainRoot.BOTTOM_FIRST,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomSecond :
+        BottomBarItem(
+            route = MainRoot.BOTTOM_SECOND,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomThird :
+        BottomBarItem(
+            route = MainRoot.BOTTOM_THIRD,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomFourth :
+        BottomBarItem(
+            route = MainRoot.BOTTOM_FOURTH,
+            drawableResId = R.drawable.bottom_sample,
+            stringResId = R.string.bottom_sample
+        )
+
+    data object BottomFifth :
+        BottomBarItem(
+            route = MainRoot.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/common/bottomBar/BottomBarScreen.kt

@@ -0,0 +1,80 @@
+package ac.dnd.bookkeeping.android.presentation.common.bottomBar
+
+import ac.dnd.bookkeeping.android.presentation.common.root.ScreenRoot
+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(90.dp)
+    ) {
+
+        BottomNavigation(
+            elevation = 0.dp,
+            backgroundColor = Color.White,
+            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(ScreenRoot.MAIN_GRAPH) {
+                                saveState = true
+                            }
+                            launchSingleTop = true
+                            restoreState = true
+                        }
+                    }
+                )
+
+            }
+        }
+
+    }
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/bottomBar/BottomGraph.kt

@@ -0,0 +1,69 @@
+package ac.dnd.bookkeeping.android.presentation.common.bottomBar
+
+import ac.dnd.bookkeeping.android.presentation.common.root.MainRoot
+import ac.dnd.bookkeeping.android.presentation.common.root.ScreenRoot
+import ac.dnd.bookkeeping.android.presentation.common.state.ApplicationState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import androidx.navigation.navigation
+
+fun NavGraphBuilder.bottomGraph(
+    appState: ApplicationState
+) {
+
+    navigation(
+        startDestination = MainRoot.BOTTOM_FIRST,
+        route = ScreenRoot.MAIN_GRAPH
+    ) {
+
+        composable(BottomBarItem.BottomFirst.route) {
+            SampleScreen(appState,BottomBarItem.BottomFirst.route)
+        }
+
+        composable(BottomBarItem.BottomSecond.route) {
+            SampleScreen(appState,BottomBarItem.BottomSecond.route)
+        }
+
+        composable(BottomBarItem.BottomThird.route) {
+            SampleScreen(appState,BottomBarItem.BottomThird.route)
+        }
+
+        composable(BottomBarItem.BottomFourth.route) {
+            SampleScreen(appState,BottomBarItem.BottomFourth.route)
+        }
+
+        composable(BottomBarItem.BottomFifth.route) {
+            SampleScreen(appState,BottomBarItem.BottomFifth.route)
+        }
+
+    }
+
+}
+
+@Composable
+fun SampleScreen(
+    appState: ApplicationState,
+    text: String
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = Color.White),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = text,
+            fontSize = 20.sp,
+            color = Color.Black
+        )
+    }
+}