diff --git a/core/common/src/commonMain/kotlin/team/aliens/dms/kmp/core/common/ui/PaddingDefaults.kt b/core/common/src/commonMain/kotlin/team/aliens/dms/kmp/core/common/ui/PaddingDefaults.kt index eef563e8..2656fdf0 100644 --- a/core/common/src/commonMain/kotlin/team/aliens/dms/kmp/core/common/ui/PaddingDefaults.kt +++ b/core/common/src/commonMain/kotlin/team/aliens/dms/kmp/core/common/ui/PaddingDefaults.kt @@ -15,6 +15,10 @@ fun Modifier.horizontalPadding( value: Dp = PaddingDefaults.ExtraLarge, ): Modifier = padding(horizontal = value) +fun Modifier.startPadding(value: Dp): Modifier = padding(start = value) + +fun Modifier.endPadding(value: Dp): Modifier = padding(end = value) + fun Modifier.topPadding( value: Dp = PaddingDefaults.Medium, ): Modifier = padding(top = value) diff --git a/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt b/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt index 7947c702..1a5871b1 100644 --- a/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt +++ b/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt @@ -3,11 +3,8 @@ package team.aliens.dms.kmp.core.designsystem.button import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.background import androidx.compose.foundation.border -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable @@ -15,12 +12,12 @@ 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.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.text.style.TextDecoration -import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme import team.aliens.dms.kmp.core.designsystem.foundation.DmsTypography @@ -124,16 +121,16 @@ private fun ButtonColor.containedColors() = when (this) { private fun ButtonColor.outlinedColors() = when (this) { ButtonColor.Primary -> ButtonState( enabled = ButtonTheme( - textColor = DmsTheme.colors.onSecondaryContainer, - borderColor = DmsTheme.colors.onSecondaryContainer, + textColor = DmsTheme.colors.secondary, + borderColor = DmsTheme.colors.secondary, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.surfaceTint, - borderColor = DmsTheme.colors.errorContainer, + textColor = DmsTheme.colors.onSecondaryContainer, + borderColor = DmsTheme.colors.onSecondaryContainer, ), disabled = ButtonTheme( - textColor = DmsTheme.colors.surfaceTint, - borderColor = DmsTheme.colors.onError, + textColor = DmsTheme.colors.primaryContainer, + borderColor = DmsTheme.colors.primaryContainer, ), ) @@ -318,8 +315,11 @@ private fun ButtonColor.roundedColors() = when (this) { @Composable private fun BasicButton( modifier: Modifier = Modifier, + backgroundColor: Color, enabled: Boolean, shape: Shape, + borderColor: Color, + buttonType: ButtonType, onClick: () -> Unit, onPressed: (pressed: Boolean) -> Unit, keyboardInteractionEnabled: Boolean, @@ -342,162 +342,34 @@ private fun BasicButton( } else { shape to DEFAULT_PRESS_DEPTH } + Box( modifier = modifier .clip(shape = shapeByKeyboardShow) + .background(backgroundColor) + .then( + if (buttonType == ButtonType.Outlined) { + Modifier.border( + 1.dp, + color = borderColor, + shapeByKeyboardShow, + ) + } else { + Modifier + }, + ) .clickable( pressDepth = pressDepth, enabled = enabled, onPressed = onPressed, onClick = onClick, ), + contentAlignment = Alignment.Center, ) { content() } } -/*@Composable -fun DmsButton( - modifier: Modifier = Modifier, - text: String, - enabled: Boolean = true, - onClick: () -> Unit, -) { - val backgroundColor by animateColorAsState( - targetValue = if (enabled) { - DmsTheme.colors.onSecondary - } else { - DmsTheme.colors.onTertiaryContainer - }, - ) - - BasicButton( - modifier = modifier, - enabled = enabled, - backgroundColor = backgroundColor, - onClick = onClick, - ) { - Row( - modifier = Modifier - .fillMaxWidth() - .padding( - horizontal = 24.dp, - vertical = 16.dp, - ), - horizontalArrangement = Arrangement.Center, - ) { - DmsText( - text = text, - style = DmsTypography.SubtitleSemiBold, - color = DmsTheme.colors.surfaceContainerHighest, - ) - } - } -}*/ - -/*@Composable -fun DmsSmallButton( - modifier: Modifier = Modifier, - text: String, - enabled: Boolean = true, - onClick: () -> Unit, -) { - val backgroundColor by animateColorAsState( - targetValue = if (enabled) { - DmsTheme.colors.onSecondary - } else { - DmsTheme.colors.error - }, - ) - val contentColor by animateColorAsState( - targetValue = if (enabled) { - DmsTheme.colors.surfaceContainerHighest - } else { - DmsTheme.colors.surfaceContainerHigh - }, - ) - - BasicButton( - modifier = modifier, - enabled = enabled, - backgroundColor = backgroundColor, - onClick = onClick, - ) { - Row( - modifier = Modifier - .fillMaxWidth() - .padding( - horizontal = 14.dp, - vertical = 8.dp, - ), - horizontalArrangement = Arrangement.Center, - ) { - DmsText( - text = text, - style = DmsTypography.Body1Medium, - color = contentColor, - ) - } - } -}*/ - -@Composable -fun DmsContainedButton( - modifier: Modifier = Modifier, - text: String, - enabled: Boolean = true, - shape: Shape = RoundedCornerShape(4.dp), - buttonColor: ButtonColor, - contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 14.dp), - keyboardInteractionEnabled: Boolean = true, - onClick: () -> Unit, -) { - var pressed by remember { mutableStateOf(false) } - - val buttonColors = buttonColor.containedColors() - val backgroundColor by animateColorAsState( - targetValue = if (!enabled) { - buttonColors.disabled.backgroundColor!! - } else if (pressed) { - buttonColors.pressed.backgroundColor!! - } else { - buttonColors.enabled.backgroundColor!! - }, - ) - val contentColor by animateColorAsState( - targetValue = if (!enabled) { - buttonColors.disabled.textColor - } else if (pressed) { - buttonColors.pressed.textColor - } else { - buttonColors.pressed.textColor - }, - ) - - BasicButton( - modifier = modifier, - enabled = enabled, - shape = shape, - onClick = onClick, - onPressed = { pressed = it }, - keyboardInteractionEnabled = keyboardInteractionEnabled, - ) { - Row( - modifier = Modifier - .fillMaxWidth() - .background(backgroundColor) - .padding(contentPadding), - horizontalArrangement = Arrangement.Center, - ) { - DmsText( - text = text, - style = DmsTypography.Button0, - color = contentColor, - ) - } - } -} - @Composable fun DmsButton( modifier: Modifier = Modifier, @@ -552,49 +424,21 @@ fun DmsButton( BasicButton( modifier = modifier, + backgroundColor = backgroundColor, enabled = enabled, shape = buttonShape, + borderColor = borderColor, + buttonType = buttonType, onClick = onClick, onPressed = { pressed = it }, keyboardInteractionEnabled = keyboardInteractionEnabled, ) { - Row( - modifier = Modifier - .fillMaxWidth() - .background(backgroundColor) - .border( - buttonType = buttonType, - width = 1.dp, - shape = buttonShape, - color = borderColor, - ) - .padding(contentPadding), - horizontalArrangement = Arrangement.Center, - ) { - DmsText( - text = text, - style = if (buttonType == ButtonType.Underline) DmsTypography.Button3 else DmsTypography.Button0, - color = contentColor, - textDecoration = if (buttonType == ButtonType.Underline) TextDecoration.Underline else TextDecoration.None, - ) - } - } -} - -@Composable -private fun Modifier.border( - buttonType: ButtonType, - width: Dp, - shape: Shape, - color: Color, -): Modifier { - return if (buttonType == ButtonType.Outlined) { - Modifier.border( - width = width, - shape = shape, - color = color, + DmsText( + modifier = Modifier.padding(contentPadding), + text = text, + style = if (buttonType == ButtonType.Underline) DmsTypography.Button3 else DmsTypography.Button0, + color = contentColor, + textDecoration = if (buttonType == ButtonType.Underline) TextDecoration.Underline else TextDecoration.None, ) - } else { - Modifier } } diff --git a/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt b/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt index 7ca10996..d7dace9a 100644 --- a/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt +++ b/core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt @@ -2,9 +2,7 @@ package team.aliens.dms.kmp.core.designsystem.textfield import androidx.compose.animation.animateColorAsState import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.interaction.collectIsFocusedAsState import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column diff --git a/feature/home/src/commonMain/kotlin/team/aliens/dms/kmp/feature/home/ui/HomeScreen.kt b/feature/home/src/commonMain/kotlin/team/aliens/dms/kmp/feature/home/ui/HomeScreen.kt index a1a4ef4e..10718307 100644 --- a/feature/home/src/commonMain/kotlin/team/aliens/dms/kmp/feature/home/ui/HomeScreen.kt +++ b/feature/home/src/commonMain/kotlin/team/aliens/dms/kmp/feature/home/ui/HomeScreen.kt @@ -1,8 +1,6 @@ package team.aliens.dms.kmp.feature.home.ui import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -37,8 +35,6 @@ import team.aliens.dms.kmp.core.designsystem.appbar.DmsTopAppBar import team.aliens.dms.kmp.core.designsystem.button.DmsIconButton import team.aliens.dms.kmp.core.designsystem.foundation.DmsIcon import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme -import team.aliens.dms.kmp.core.designsystem.foundation.DmsTypography -import team.aliens.dms.kmp.core.designsystem.text.DmsText import team.aliens.dms.kmp.feature.home.viewmodel.HomeState import team.aliens.dms.kmp.feature.home.viewmodel.HomeViewModel @@ -140,7 +136,7 @@ private fun DateCard( // text = "${selectDate.monthNumber}월 ${selectDate.dayOfMonth}일 ${selectDate.dayOfWeek.text}요일", // color = DmsTheme.colors.surfaceContainerLow, // style = DmsTypography.Body1SemiBold, - //) +// ) DmsIconButton( resource = DmsIcon.Forward, tint = DmsTheme.colors.surfaceContainerLow, diff --git a/feature/signin/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signin/ui/SignInScreen.kt b/feature/signin/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signin/ui/SignInScreen.kt index 9224bcbc..b93eadbe 100644 --- a/feature/signin/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signin/ui/SignInScreen.kt +++ b/feature/signin/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signin/ui/SignInScreen.kt @@ -1,14 +1,35 @@ package team.aliens.dms.kmp.feature.signin.ui import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer 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.material3.VerticalDivider import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp import org.koin.compose.koinInject +import team.aliens.dms.kmp.core.common.ui.horizontalPadding +import team.aliens.dms.kmp.core.common.ui.startPadding +import team.aliens.dms.kmp.core.common.ui.topPadding +import team.aliens.dms.kmp.core.designsystem.appbar.DmsTopAppBar +import team.aliens.dms.kmp.core.designsystem.button.ButtonColor +import team.aliens.dms.kmp.core.designsystem.button.ButtonType +import team.aliens.dms.kmp.core.designsystem.button.DmsButton +import team.aliens.dms.kmp.core.designsystem.foundation.DmsSymbol import team.aliens.dms.kmp.core.designsystem.foundation.DmsTheme +import team.aliens.dms.kmp.core.designsystem.foundation.DmsTypography +import team.aliens.dms.kmp.core.designsystem.text.DmsText +import team.aliens.dms.kmp.core.designsystem.textfield.DmsTextField import team.aliens.dms.kmp.feature.signin.viewmodel.SignInState import team.aliens.dms.kmp.feature.signin.viewmodel.SignInViewModel @@ -44,5 +65,116 @@ fun SignInScreen( .fillMaxSize() .background(DmsTheme.colors.background), ) { + DmsTopAppBar(title = "로그인") + DmsSymbol( + modifier = Modifier + .startPadding(24.dp) + .topPadding(40.dp), + ) + UserInformationInputs( + modifier = Modifier.topPadding(44.dp), + accountId = state.accountId, + onAccountIdChange = onAccountIdChange, + password = state.password, + onPasswordChange = onPasswordChange, + onFindId = {}, + onResetPassword = {}, + ) + Spacer(modifier = Modifier.weight(1f)) + SignupActions(onSignUp = navigateToSignUp) + DmsButton( + modifier = Modifier + .fillMaxWidth() + .padding(24.dp), + text = "로그인", + buttonType = ButtonType.Contained, + buttonColor = ButtonColor.Primary, + onClick = navigateToMain, + enabled = state.buttonEnabled, + ) + } +} + +@Composable +private fun UserInformationInputs( + modifier: Modifier = Modifier, + accountId: String, + onAccountIdChange: (String) -> Unit, + password: String, + onPasswordChange: (String) -> Unit, + onFindId: () -> Unit, + onResetPassword: () -> Unit, +) { + Column( + modifier = modifier.horizontalPadding(24.dp), + verticalArrangement = Arrangement.spacedBy(36.dp), + ) { + DmsTextField( + modifier = Modifier.fillMaxWidth(), + value = accountId, + hint = "아이디", + onValueChange = onAccountIdChange, + ) + DmsTextField( + modifier = Modifier.fillMaxWidth(), + value = password, + hint = "비빌번호", + onValueChange = onPasswordChange, + showVisibleIcon = true, + ) + Row( + modifier = Modifier.align(Alignment.End), + horizontalArrangement = Arrangement.spacedBy(12.dp), + ) { + DmsText( + modifier = Modifier.clickable( + onClick = onFindId, + ), + text = "아이디 찾기", + style = DmsTypography.Body3, + color = DmsTheme.colors.inverseSurface, + ) + VerticalDivider( + modifier = Modifier.height(12.dp), + thickness = 0.5.dp, + color = DmsTheme.colors.inverseSurface, + ) + DmsText( + modifier = Modifier + .clickable( + onClick = onResetPassword, + ), + text = "비밀번호 재설정", + style = DmsTypography.Body3, + color = DmsTheme.colors.inverseSurface, + ) + } + } +} + +@Composable +private fun SignupActions( + modifier: Modifier = Modifier, + onSignUp: () -> Unit, +) { + Row( + modifier = modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy( + space = 12.dp, + alignment = Alignment.CenterHorizontally, + ), + verticalAlignment = Alignment.CenterVertically, + ) { + DmsText( + text = "아직 회원이 아니신가요?", + style = DmsTypography.Caption, + color = DmsTheme.colors.inverseSurface, + ) + DmsText( + modifier = Modifier.clickable(onClick = onSignUp), + text = "회원가입", + style = DmsTypography.Body1, + color = DmsTheme.colors.onSecondary, + ) } }