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 1a5871b..f9f29b3 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 @@ -215,10 +215,10 @@ private fun ButtonColor.underlineColors() = when (this) { textColor = DmsTheme.colors.secondary, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.primaryContainer, + textColor = DmsTheme.colors.secondaryContainer, ), disabled = ButtonTheme( - textColor = DmsTheme.colors.secondaryContainer, + textColor = DmsTheme.colors.primaryContainer, ), ) @@ -227,10 +227,10 @@ private fun ButtonColor.underlineColors() = when (this) { textColor = DmsTheme.colors.onTertiaryContainer, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.surfaceVariant, + textColor = DmsTheme.colors.surfaceBright, ), disabled = ButtonTheme( - textColor = DmsTheme.colors.surfaceBright, + textColor = DmsTheme.colors.surfaceVariant, ), ) @@ -239,10 +239,10 @@ private fun ButtonColor.underlineColors() = when (this) { textColor = DmsTheme.colors.outline, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.onError, + textColor = DmsTheme.colors.errorContainer, ), disabled = ButtonTheme( - textColor = DmsTheme.colors.errorContainer, + textColor = DmsTheme.colors.onError, ), ) @@ -253,17 +253,17 @@ private fun ButtonColor.underlineColors() = when (this) { private fun ButtonColor.roundedColors() = when (this) { ButtonColor.Primary -> ButtonState( enabled = ButtonTheme( - textColor = DmsTheme.colors.onPrimary, - backgroundColor = DmsTheme.colors.secondary, + textColor = DmsTheme.colors.secondary, + backgroundColor = DmsTheme.colors.onPrimary, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.primaryContainer, - backgroundColor = DmsTheme.colors.primary, - ), - disabled = ButtonTheme( textColor = DmsTheme.colors.secondaryContainer, backgroundColor = DmsTheme.colors.inversePrimary, ), + disabled = ButtonTheme( + textColor = DmsTheme.colors.primaryContainer, + backgroundColor = DmsTheme.colors.primary, + ), ) ButtonColor.Gray -> ButtonState( @@ -272,13 +272,13 @@ private fun ButtonColor.roundedColors() = when (this) { backgroundColor = DmsTheme.colors.surfaceVariant, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.surfaceVariant, - backgroundColor = DmsTheme.colors.surface, - ), - disabled = ButtonTheme( textColor = DmsTheme.colors.surfaceBright, backgroundColor = DmsTheme.colors.onTertiaryContainer, ), + disabled = ButtonTheme( + textColor = DmsTheme.colors.surfaceVariant, + backgroundColor = DmsTheme.colors.surface, + ), ) ButtonColor.Error -> ButtonState( @@ -287,13 +287,13 @@ private fun ButtonColor.roundedColors() = when (this) { backgroundColor = DmsTheme.colors.outline, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.error, - backgroundColor = DmsTheme.colors.onError, - ), - disabled = ButtonTheme( textColor = DmsTheme.colors.onError, backgroundColor = DmsTheme.colors.errorContainer, ), + disabled = ButtonTheme( + textColor = DmsTheme.colors.error, + backgroundColor = DmsTheme.colors.onError, + ), ) ButtonColor.Refuse -> ButtonState( @@ -302,13 +302,13 @@ private fun ButtonColor.roundedColors() = when (this) { backgroundColor = DmsTheme.colors.onError, ), pressed = ButtonTheme( - textColor = DmsTheme.colors.onError, - backgroundColor = DmsTheme.colors.error, - ), - disabled = ButtonTheme( textColor = DmsTheme.colors.errorContainer, backgroundColor = DmsTheme.colors.onErrorContainer, ), + disabled = ButtonTheme( + textColor = DmsTheme.colors.onError, + backgroundColor = DmsTheme.colors.error, + ), ) } diff --git a/feature/application/src/commonMain/kotlin/team/aliens/dms/kmp/feature/application/ui/ApplicationScreen.kt b/feature/application/src/commonMain/kotlin/team/aliens/dms/kmp/feature/application/ui/ApplicationScreen.kt index 3e71ca5..c9f2ec4 100644 --- a/feature/application/src/commonMain/kotlin/team/aliens/dms/kmp/feature/application/ui/ApplicationScreen.kt +++ b/feature/application/src/commonMain/kotlin/team/aliens/dms/kmp/feature/application/ui/ApplicationScreen.kt @@ -1,7 +1,26 @@ package team.aliens.dms.kmp.feature.application.ui -import androidx.compose.material3.Text +import androidx.compose.foundation.background +import androidx.compose.foundation.border +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.padding +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +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.DmsTheme +import team.aliens.dms.kmp.core.designsystem.foundation.DmsTypography +import team.aliens.dms.kmp.core.designsystem.text.DmsText @Composable internal fun Application() { @@ -10,5 +29,107 @@ internal fun Application() { @Composable private fun ApplicationScreen() { - Text("신청") + Column( + modifier = Modifier + .fillMaxSize() + .background(DmsTheme.colors.background), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + DmsTopAppBar(title = "신청") + Column( + modifier = Modifier + .fillMaxSize() + .padding( + horizontal = 24.dp, + vertical = 28.dp, + ), + verticalArrangement = Arrangement.spacedBy(24.dp), + ) { + ApplicationCard( + title = "잔류", + description = "주말 기숙사 잔류 여부를 확인하고, 잔류 신청을 통해서 잔류 또는 귀가를 신청해 보세요.", + buttonText = "잔류 신청하기", + onButtonClick = { }, + ) + ApplicationCard( + title = "외출", + appliedTitle = "금요 귀가", + description = "기숙사 생활 중 밖으로 나갈 일이 있다면, 외출 신청을 통해서 외출해 보세요.", + buttonText = "외출 신청하기", + onButtonClick = { }, + ) + } + } +} + +@Composable +private fun ApplicationCard( + modifier: Modifier = Modifier, + title: String, + appliedTitle: String? = null, + description: String, + buttonText: String, + onButtonClick: () -> Unit, +) { + Column( + modifier = modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = DmsTheme.colors.surface, + shape = RoundedCornerShape(10.dp), + ) + .background( + color = DmsTheme.colors.background, + shape = RoundedCornerShape(10.dp), + ) + .padding( + horizontal = 20.dp, + vertical = 16.dp, + ), + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp), + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + DmsText( + text = title, + style = DmsTypography.Header3, + color = DmsTheme.colors.onBackground, + ) + Spacer(modifier = Modifier.weight(1f)) + appliedTitle?.let { text -> + DmsText( + modifier = Modifier + .background( + color = DmsTheme.colors.primary, + shape = RoundedCornerShape(24.dp), + ) + .padding( + horizontal = 16.dp, + vertical = 6.dp, + ), + text = text, + style = DmsTypography.Caption, + color = DmsTheme.colors.inversePrimary, + ) + } + } + DmsText( + text = description, + style = DmsTypography.Body3, + color = DmsTheme.colors.tertiaryContainer, + ) + } + DmsButton( + modifier = Modifier.fillMaxWidth(), + text = buttonText, + buttonType = ButtonType.Contained, + buttonColor = ButtonColor.Primary, + onClick = onButtonClick, + ) + } }