Merge pull request #106 from YAPP-Github/feature/#90-home-redesign

[Feature/#90] 홈 화면 리디자인 변경 사항을 반영합니다.

Author: wjdrjs00

app/src/main/java/com/threegap/bitnagil/MainNavHost.kt

@@ -115,9 +115,6 @@ fun MainNavHost(
                 navigateToRegisterRoutine = { routineId ->
                     navigator.navController.navigate(Route.WriteRoutine(routineId = routineId))
                 },
-                navigateToEditRoutine = { routineId ->
-                    navigator.navController.navigate(Route.WriteRoutine(routineId = routineId, isRegister = false))
-                },
                 navigateToEmotion = {
                     navigator.navController.navigate(Route.Emotion)
                 },

app/src/main/java/com/threegap/bitnagil/navigation/home/HomeNavHost.kt

@@ -40,7 +40,6 @@ fun HomeNavHost(
     navigateToNotice: () -> Unit,
     navigateToQnA: () -> Unit,
     navigateToRegisterRoutine: (String?) -> Unit,
-    navigateToEditRoutine: (String) -> Unit,
     navigateToEmotion: () -> Unit,
 ) {
     val navigator = rememberHomeNavigator()
@@ -66,7 +65,6 @@ fun HomeNavHost(
                             navigateToRegisterRoutine = {
                                 navigateToRegisterRoutine(null)
                             },
-                            navigateToEditRoutine = navigateToEditRoutine,
                             navigateToEmotion = navigateToEmotion,
                         )
                     }
@@ -102,11 +100,6 @@ fun HomeNavHost(
 
             BitnagilFloatingActionMenu(
                 actions = listOf(
-                    FloatingActionItem(
-                        icon = R.drawable.ic_report,
-                        text = "제보하기",
-                        onClick = { GlobalBitnagilToast.showWarning("제보하기 기능은 추후 제공될 예정입니다.") },
-                    ),
                     FloatingActionItem(
                         icon = R.drawable.ic_routine_add,
                         text = "루틴 등록",

core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/component/atom/BitnagilFloatingButton.kt

@@ -10,7 +10,6 @@ import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -22,13 +21,12 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.threegap.bitnagil.designsystem.BitnagilTheme
@@ -40,22 +38,22 @@ fun BitnagilFloatingButton(
     @DrawableRes id: Int,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
+    isActive: Boolean = false,
+    colors: BitnagilFloatingButtonColor = BitnagilFloatingButtonColor.default(),
 ) {
     Box(
         contentAlignment = Alignment.Center,
         modifier = modifier
             .background(
-                color = BitnagilTheme.colors.navy500,
+                color = if (isActive) colors.activeIconBackgroundColor else colors.defaultIconBackgroundColor,
                 shape = CircleShape,
             )
             .size(52.dp)
             .clickableWithoutRipple { onClick() },
     ) {
-        Image(
-            imageVector = ImageVector.vectorResource(id),
-            contentDescription = null,
-            colorFilter = ColorFilter.tint(BitnagilTheme.colors.white),
-            modifier = Modifier.size(24.dp),
+        BitnagilIcon(
+            id = id,
+            tint = if (isActive) colors.activeIconColor else colors.defaultIconColor,
         )
     }
 }
@@ -66,8 +64,9 @@ fun BitnagilFloatingActionMenu(
     isExpanded: Boolean,
     onToggle: (Boolean) -> Unit,
     modifier: Modifier = Modifier,
-    @DrawableRes defaultIcon: Int = R.drawable.ic_plus,
+    @DrawableRes defaultIcon: Int = R.drawable.ic_add,
     @DrawableRes activeIcon: Int = R.drawable.ic_close,
+    colors: BitnagilFloatingButtonColor = BitnagilFloatingButtonColor.default(),
 ) {
     Box(modifier = modifier) {
         AnimatedVisibility(
@@ -102,7 +101,7 @@ fun BitnagilFloatingActionMenu(
                     ),
             ) {
                 Column(
-                    modifier = Modifier.padding(vertical = 16.dp, horizontal = 22.dp),
+                    modifier = Modifier.padding(16.dp),
                     verticalArrangement = Arrangement.spacedBy(24.dp),
                 ) {
                     actions.forEach { action ->
@@ -125,6 +124,8 @@ fun BitnagilFloatingActionMenu(
             BitnagilFloatingButton(
                 id = if (isExpanded) activeIcon else defaultIcon,
                 onClick = { onToggle(!isExpanded) },
+                isActive = isExpanded,
+                colors = colors,
             )
         }
     }
@@ -136,6 +137,24 @@ data class FloatingActionItem(
     val onClick: () -> Unit,
 )
 
+@Immutable
+data class BitnagilFloatingButtonColor(
+    val defaultIconColor: Color,
+    val defaultIconBackgroundColor: Color,
+    val activeIconColor: Color,
+    val activeIconBackgroundColor: Color,
+) {
+    companion object {
+        @Composable
+        fun default() = BitnagilFloatingButtonColor(
+            defaultIconColor = BitnagilTheme.colors.white,
+            defaultIconBackgroundColor = BitnagilTheme.colors.orange500,
+            activeIconColor = BitnagilTheme.colors.coolGray30,
+            activeIconBackgroundColor = BitnagilTheme.colors.white,
+        )
+    }
+}
+
 @Composable
 private fun FloatingActionMenuItem(
     @DrawableRes icon: Int,
@@ -159,12 +178,13 @@ private fun FloatingActionMenuItem(
         BitnagilIcon(
             id = icon,
             tint = null,
+            modifier = Modifier.size(24.dp),
         )
 
         Text(
             text = text,
-            style = BitnagilTheme.typography.subtitle1Medium,
-            color = BitnagilTheme.colors.navy500,
+            style = BitnagilTheme.typography.body2Medium,
+            color = BitnagilTheme.colors.coolGray30,
         )
     }
 }
@@ -174,17 +194,12 @@ private fun FloatingActionMenuItem(
 private fun BitnagilFloatingButtonPreview() {
     Column {
         BitnagilFloatingButton(
-            id = R.drawable.ic_plus,
+            id = R.drawable.ic_add,
             onClick = {},
         )
 
         BitnagilFloatingActionMenu(
             actions = listOf(
-                FloatingActionItem(
-                    icon = R.drawable.ic_report,
-                    text = "제보하기",
-                    onClick = {},
-                ),
                 FloatingActionItem(
                     icon = R.drawable.ic_routine_add,
                     text = "루틴 등록",

core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/component/atom/BitnagilTextButton.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -40,6 +41,7 @@ fun BitnagilTextButton(
     shape: Shape = RoundedCornerShape(12.dp),
     textStyle: TextStyle = BitnagilTheme.typography.body1SemiBold,
     textDecoration: TextDecoration? = null,
+    textPadding: PaddingValues = PaddingValues(0.dp),
 ) {
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
@@ -77,6 +79,7 @@ fun BitnagilTextButton(
             color = textColor,
             style = textStyle,
             textDecoration = textDecoration,
+            modifier = Modifier.padding(textPadding),
         )
     }
 }

core/designsystem/src/main/java/com/threegap/bitnagil/designsystem/typography/Type.kt

@@ -97,8 +97,8 @@ class BitnagilTypography internal constructor(
     private val _cafe24SsurroundAir: BitnagilTextStyle = BitnagilTextStyle(
         fontFamily = cafe24SsurroundAir,
         fontWeight = FontWeight.Light,
-        fontSize = 24,
-        lineHeight = 36,
+        fontSize = 20,
+        lineHeight = 30,
         letterSpacing = (-0.5f),
     ),
 ) {