refactor :: 디자인 시스템 변경

team-aliens · Jan 1, 2025 · 47f7fbf · 47f7fbf
1 parent 00e6081
commit 47f7fbf
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 111 deletions.
diff --git a/composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt b/composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt
@@ -3,15 +3,15 @@ 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.foundation.shape.RoundedCornerShape
 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.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
@@ -34,17 +34,26 @@ fun BottomNavigationBar(
 ) {
     val selectedRoute = navController.currentBackStackEntryAsState().value?.destination?.route
     BottomAppBar(
-        modifier = Modifier.fillMaxHeight(0.08f),
+        modifier = Modifier
+            .fillMaxHeight(0.08f)
+            .graphicsLayer {
+                clip = true
+                shape = RoundedCornerShape(
+                    topStart = 24.dp,
+                    topEnd = 24.dp,
+                )
+                shadowElevation = 20f
+            },
         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
+                    DmsTheme.colors.onBackground
                 } else {
-                    DmsTheme.colors.surfaceVariant
+                    DmsTheme.colors.inverseSurface
                 },
             )
 
@@ -59,30 +68,27 @@ fun BottomNavigationBar(
                     }
                 },
                 icon = {
-                    Column(
-                        modifier = Modifier.padding(10.dp),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                    ) {
+                    Column {
                         Icon(
                             painter = painterResource(resource = if (selected) it.selectedIcon else it.icon),
                             contentDescription = it.route,
                             tint = color,
                         )
                         DmsText(
                             text = it.title,
-                            style = DmsTypography.Body2Medium,
+                            style = DmsTypography.Button4,
                             color = color,
                         )
                     }
                 },
                 colors = NavigationBarItemColors(
-                    selectedIconColor = DmsTheme.colors.surfaceContainerLow,
-                    selectedTextColor = DmsTheme.colors.surfaceContainerLow,
+                    selectedIconColor = DmsTheme.colors.onBackground,
+                    selectedTextColor = DmsTheme.colors.onBackground,
                     selectedIndicatorColor = DmsTheme.colors.onBackground,
-                    unselectedIconColor = DmsTheme.colors.surfaceVariant,
-                    unselectedTextColor = DmsTheme.colors.surfaceVariant,
-                    disabledIconColor = DmsTheme.colors.surfaceVariant,
-                    disabledTextColor = DmsTheme.colors.surfaceVariant,
+                    unselectedIconColor = DmsTheme.colors.inverseSurface,
+                    unselectedTextColor = DmsTheme.colors.inverseSurface,
+                    disabledIconColor = DmsTheme.colors.inverseSurface,
+                    disabledTextColor = DmsTheme.colors.inverseSurface,
                 ),
             )
         }

diff --git a/...ystem/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsIconButton.kt b/...ystem/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsIconButton.kt
@@ -21,7 +21,7 @@ import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme
 fun DmsIconButton(
     modifier: Modifier = Modifier,
     resource: DrawableResource,
-    tint: Color = DmsTheme.colors.surfaceContainerLow,
+    tint: Color = DmsTheme.colors.onBackground,
     enabled: Boolean = true,
     size: Dp = 24.dp,
     contentDescription: String? = null,

diff --git a/...src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/numberfield/DmsNumberField.kt b/...src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/numberfield/DmsNumberField.kt
@@ -28,7 +28,7 @@ fun DmsNumberField(
     onValueChange: (String) -> Unit,
     enabled: Boolean = true,
     isError: Boolean = false,
-    errorDescription: String? = null,
+    errorMessage: String? = null,
 ) {
     BasicTextField(
         modifier = modifier,
@@ -47,7 +47,7 @@ fun DmsNumberField(
     ) { _ ->
         Column(
             modifier = Modifier.fillMaxWidth(),
-            verticalArrangement = Arrangement.spacedBy(12.dp),
+            verticalArrangement = Arrangement.spacedBy(4.dp),
         ) {
             LazyRow(
                 modifier = Modifier.fillMaxWidth(),
@@ -56,21 +56,22 @@ fun DmsNumberField(
             ) {
                 items(totalLength) { index ->
                     val borderColor = if (isError) {
-                        DmsTheme.colors.outlineVariant
-                    } else if (value.length - 1 == index) {
-                        DmsTheme.colors.inversePrimary
+                        DmsTheme.colors.outline
                     } else if (value.length > index) {
-                        DmsTheme.colors.onSecondary
+                        DmsTheme.colors.inversePrimary
                     } else {
-                        DmsTheme.colors.surface
+                        DmsTheme.colors.onSurface
                     }
                     Box(
                         modifier = Modifier
-                            .size(48.dp)
+                            .size(
+                                width = 40.dp,
+                                height = 52.dp,
+                            )
                             .border(
                                 width = 1.dp,
                                 color = borderColor,
-                                shape = RoundedCornerShape(4.dp),
+                                shape = RoundedCornerShape(12.dp),
                             ),
                         contentAlignment = Alignment.Center,
                     ) {
@@ -81,17 +82,19 @@ fun DmsNumberField(
                             } else {
                                 ""
                             },
-                            style = DmsTypography.Body1Medium,
+                            style = DmsTypography.Title3,
                         )
                     }
                 }
             }
-            errorDescription?.let {
-                DmsText(
-                    text = errorDescription,
-                    style = DmsTypography.Body1Medium,
-                    color = DmsTheme.colors.outlineVariant,
-                )
+            if (isError) {
+                errorMessage?.let {
+                    DmsText(
+                        text = it,
+                        style = DmsTypography.Button2,
+                        color = DmsTheme.colors.outline,
+                    )
+                }
             }
         }
     }

diff --git a/...-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/status/CheckStatus.kt b/...-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/status/CheckStatus.kt
@@ -52,7 +52,7 @@ fun CheckStatus(
         )
         DmsText(
             text = text,
-            style = DmsTypography.HeadlineSemiBold,
+            style = DmsTypography.Title3,
         )
     }
 }
diff --git a/...-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/status/ErrorStatus.kt b/...-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/status/ErrorStatus.kt
@@ -55,13 +55,13 @@ fun ErrorStatus(
         Spacer(modifier = Modifier.height(12.dp))
         DmsText(
             text = title,
-            style = DmsTypography.HeadlineSemiBold,
+            style = DmsTypography.Title3,
         )
         Spacer(modifier = Modifier.height(2.dp))
         description?.let {
             DmsText(
                 text = it,
-                style = DmsTypography.Body2Medium,
+                style = DmsTypography.Body3,
                 color = DmsTheme.colors.onSurface,
             )
         }

diff --git a/...gn-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/switch/DmsSwitch.kt b/...gn-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/switch/DmsSwitch.kt
@@ -32,14 +32,14 @@ fun DmsSwitch(
 object DmsSwitchDefaults {
     @Composable
     fun colors(
-        checkedThumbColor: Color = DmsTheme.colors.surfaceContainerHighest,
-        checkedTrackColor: Color = DmsTheme.colors.onSecondary,
+        checkedThumbColor: Color = DmsTheme.colors.surfaceTint,
+        checkedTrackColor: Color = DmsTheme.colors.secondary,
         checkedBorderColor: Color = Color.Transparent,
-        checkedIconColor: Color = DmsTheme.colors.onSecondary,
-        uncheckedThumbColor: Color = DmsTheme.colors.surfaceContainerHighest,
-        uncheckedTrackColor: Color = DmsTheme.colors.surface,
+        checkedIconColor: Color = DmsTheme.colors.secondary,
+        uncheckedThumbColor: Color = DmsTheme.colors.surfaceTint,
+        uncheckedTrackColor: Color = DmsTheme.colors.onSurface,
         uncheckedBorderColor: Color = Color.Transparent,
-        uncheckedIconColor: Color = DmsTheme.colors.surface,
+        uncheckedIconColor: Color = DmsTheme.colors.onSurface,
     ): SwitchColors = SwitchDefaults.colors(
         checkedThumbColor = checkedThumbColor,
         checkedTrackColor = checkedTrackColor,