Merge pull request #26 from laco-dev/feature/#21

[Main] 메인 화면 BottomBar 구조 추가
droidknights · Jul 9, 2023 · ddb4a54 · ddb4a54
2 parents a311a07 + ba82fd5
commit ddb4a54
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 7 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -20,4 +20,6 @@ android {
 
 dependencies {
     implementation(project(":feature:main"))
+
+    implementation(project(":core:designsystem"))
 }
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
diff --git a/core/designsystem/src/main/res/values/themes.xml b/core/designsystem/src/main/res/values/themes.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="Theme.DroidKnights2023" parent="android:Theme.Material.Light.NoActionBar" />
+
+    <style name="Theme.DroidKnights2023.NoStatusBar">
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">true</item>
+    </style>
+
+</resources>
diff --git a/feature/main/src/main/AndroidManifest.xml b/feature/main/src/main/AndroidManifest.xml
@@ -5,7 +5,9 @@
 
         <activity
             android:name=".MainActivity"
-            android:exported="true">
+            android:exported="true"
+            android:theme="@style/Theme.DroidKnights2023.NoStatusBar">
+
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

diff --git a/feature/main/src/main/java/com/droidknights/app2023/feature/main/MainActivity.kt b/feature/main/src/main/java/com/droidknights/app2023/feature/main/MainActivity.kt
@@ -3,14 +3,20 @@ package com.droidknights.app2023.feature.main
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.material3.MaterialTheme
+import androidx.core.view.WindowCompat
 
 class MainActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+
         setContent {
-            // TODO: MainScreen 구현
+            MaterialTheme {
+                MainScreen()
+            }
         }
     }
 }
diff --git a/feature/main/src/main/java/com/droidknights/app2023/feature/main/MainScreen.kt b/feature/main/src/main/java/com/droidknights/app2023/feature/main/MainScreen.kt
@@ -0,0 +1,113 @@
+package com.droidknights.app2023.feature.main
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
+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.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+
+@Composable
+internal fun MainScreen() {
+    var currentTab by remember { mutableStateOf(MainTab.HOME) }
+    Scaffold(
+        content = { padding ->
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(Color(0xFFF9F9F9))
+                    .padding(padding)
+            ) {
+                // TODO: 컨텐츠 추가
+            }
+        },
+        bottomBar = {
+            MainBottomBar(
+                tabs = MainTab.values().toList(),
+                currentTab = currentTab,
+                onTabSelected = { currentTab = it }
+            )
+        },
+    )
+}
+
+@Composable
+private fun MainBottomBar(
+    tabs: List<MainTab>,
+    currentTab: MainTab,
+    onTabSelected: (MainTab) -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .navigationBarsPadding()
+            .padding(start = 8.dp, end = 8.dp, bottom = 28.dp)
+            .border(
+                width = 1.dp,
+                color = Color(0xFFDCDCDC), // lightgray
+                shape = RoundedCornerShape(size = 28.dp)
+            )
+            .background(color = Color(0xFFFFFFFF), shape = RoundedCornerShape(28.dp))
+            .padding(horizontal = 28.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        tabs.forEach { tab ->
+            MainBottomBarItem(
+                selected = tab == currentTab,
+                onClick = { onTabSelected(tab) },
+                resId = tab.iconResId,
+            )
+        }
+    }
+}
+
+@Composable
+private fun RowScope.MainBottomBarItem(
+    selected: Boolean,
+    onClick: () -> Unit,
+    resId: Int,
+) {
+    Box(
+        modifier = Modifier
+            .weight(1f)
+            .fillMaxHeight()
+            .selectable(
+                selected = selected,
+                indication = null,
+                role = null,
+                interactionSource = remember { MutableInteractionSource() },
+                onClick = onClick,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            painter = painterResource(id = resId),
+            contentDescription = null,
+            tint = if (selected) Color(0xFF49F300) else Color(0xFFDCDCDC),
+            modifier = Modifier.size(34.dp),
+        )
+    }
+}
diff --git a/feature/main/src/main/java/com/droidknights/app2023/feature/main/MainTab.kt b/feature/main/src/main/java/com/droidknights/app2023/feature/main/MainTab.kt
@@ -0,0 +1,9 @@
+package com.droidknights.app2023.feature.main
+
+internal enum class MainTab(
+    val iconResId: Int,
+) {
+    SETTING(R.drawable.ic_setting),
+    HOME(R.drawable.ic_home),
+    TEMP(R.drawable.ic_temp),
+}
diff --git a/feature/main/src/main/res/drawable/ic_home.xml b/feature/main/src/main/res/drawable/ic_home.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="34dp"
+    android:height="34dp"
+    android:viewportWidth="34"
+    android:viewportHeight="34">
+    <path
+        android:pathData="M25.824,12.821C25.741,12.743 25.657,12.666 25.574,12.591L28.346,9.952C28.429,9.873 28.495,9.779 28.54,9.676C28.584,9.573 28.608,9.462 28.608,9.35C28.608,9.239 28.584,9.128 28.54,9.025C28.495,8.922 28.429,8.828 28.346,8.749C28.263,8.67 28.164,8.607 28.056,8.565C27.948,8.522 27.832,8.5 27.714,8.5C27.597,8.5 27.481,8.522 27.372,8.565C27.264,8.607 27.166,8.67 27.083,8.749L24.181,11.512C22.08,10.104 19.573,9.35 17.004,9.354C14.435,9.357 11.93,10.118 9.834,11.532L6.917,8.749C6.75,8.59 6.523,8.5 6.286,8.5C6.049,8.5 5.822,8.59 5.654,8.749C5.486,8.909 5.392,9.125 5.392,9.35C5.392,9.576 5.486,9.792 5.654,9.952L8.451,12.614C7.201,13.741 6.207,15.099 5.527,16.604C4.848,18.11 4.498,19.732 4.5,21.37V23.8C4.5,24.251 4.688,24.683 5.023,25.002C5.358,25.321 5.812,25.5 6.286,25.5H27.714C28.188,25.5 28.642,25.321 28.977,25.002C29.312,24.683 29.5,24.251 29.5,23.8V21.25C29.504,19.683 29.182,18.131 28.551,16.684C27.92,15.238 26.993,13.924 25.824,12.821ZM12.982,21.25C12.717,21.25 12.458,21.175 12.238,21.035C12.018,20.895 11.846,20.696 11.745,20.463C11.643,20.23 11.617,19.974 11.669,19.726C11.72,19.479 11.848,19.252 12.035,19.074C12.222,18.895 12.461,18.774 12.721,18.725C12.981,18.676 13.25,18.701 13.495,18.797C13.739,18.894 13.948,19.057 14.096,19.267C14.243,19.476 14.321,19.723 14.321,19.975C14.321,20.313 14.18,20.638 13.929,20.877C13.678,21.116 13.337,21.25 12.982,21.25ZM21.018,21.25C20.753,21.25 20.494,21.175 20.274,21.035C20.053,20.895 19.882,20.696 19.781,20.463C19.679,20.23 19.653,19.974 19.704,19.726C19.756,19.479 19.883,19.252 20.071,19.074C20.258,18.895 20.497,18.774 20.757,18.725C21.016,18.676 21.286,18.701 21.53,18.797C21.775,18.894 21.984,19.057 22.131,19.267C22.279,19.476 22.357,19.723 22.357,19.975C22.357,20.313 22.216,20.638 21.965,20.877C21.714,21.116 21.373,21.25 21.018,21.25Z"
+        android:fillColor="#DCDCDC" />
+</vector>
diff --git a/feature/main/src/main/res/drawable/ic_setting.xml b/feature/main/src/main/res/drawable/ic_setting.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="34dp"
+    android:height="34dp"
+    android:viewportWidth="34"
+    android:viewportHeight="34">
+    <path
+        android:pathData="M5,11.346C5,11.092 5.099,10.849 5.274,10.67C5.449,10.49 5.687,10.389 5.935,10.389H10.28C10.481,9.699 10.895,9.094 11.46,8.663C12.025,8.233 12.711,8 13.415,8C14.12,8 14.806,8.233 15.371,8.663C15.936,9.094 16.35,9.699 16.551,10.389H26.506C26.754,10.389 26.992,10.49 27.167,10.67C27.343,10.849 27.441,11.092 27.441,11.346C27.441,11.599 27.343,11.843 27.167,12.022C26.992,12.201 26.754,12.302 26.506,12.302H16.551C16.35,12.993 15.936,13.598 15.371,14.028C14.806,14.459 14.12,14.691 13.415,14.691C12.711,14.691 12.025,14.459 11.46,14.028C10.895,13.598 10.481,12.993 10.28,12.302H5.935C5.687,12.302 5.449,12.201 5.274,12.022C5.099,11.843 5,11.599 5,11.346ZM26.506,21.865H24.032C23.83,21.174 23.416,20.569 22.851,20.138C22.286,19.708 21.6,19.475 20.896,19.475C20.191,19.475 19.505,19.708 18.94,20.138C18.375,20.569 17.961,21.174 17.76,21.865H5.935C5.687,21.865 5.449,21.965 5.274,22.145C5.099,22.324 5,22.567 5,22.821C5,23.074 5.099,23.318 5.274,23.497C5.449,23.676 5.687,23.777 5.935,23.777H17.76C17.961,24.468 18.375,25.073 18.94,25.503C19.505,25.934 20.191,26.167 20.896,26.167C21.6,26.167 22.286,25.934 22.851,25.503C23.416,25.073 23.83,24.468 24.032,23.777H26.506C26.754,23.777 26.992,23.676 27.167,23.497C27.343,23.318 27.441,23.074 27.441,22.821C27.441,22.567 27.343,22.324 27.167,22.145C26.992,21.965 26.754,21.865 26.506,21.865Z"
+        android:fillColor="#DCDCDC" />
+</vector>
diff --git a/feature/main/src/main/res/drawable/ic_temp.xml b/feature/main/src/main/res/drawable/ic_temp.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="34dp"
+    android:height="34dp"
+    android:viewportWidth="34"
+    android:viewportHeight="34">
+    <path
+        android:pathData="M27.804,16.547L17.721,6.28C17.635,6.193 17.525,6.122 17.401,6.074C17.276,6.025 17.139,6 17,6C16.861,6 16.724,6.025 16.599,6.074C16.475,6.122 16.365,6.193 16.279,6.28L6.196,16.547C6.069,16.676 6,16.836 6,17C6,17.164 6.069,17.324 6.196,17.453L16.279,27.72C16.365,27.807 16.475,27.878 16.599,27.926C16.724,27.975 16.861,28 17,28C17.139,28 17.276,27.975 17.401,27.926C17.525,27.878 17.635,27.807 17.721,27.72L27.804,17.453C27.931,17.324 28,17.164 28,17C28,16.836 27.931,16.676 27.804,16.547ZM17.917,19.528V8.853L25.642,16.719L17.917,19.528ZM16.083,19.528L8.358,16.719L16.083,8.853V19.528ZM16.083,21.139V25.147L9.961,18.913L16.083,21.139Z"
+        android:fillColor="#DCDCDC" />
+</vector>