From 39c601283a80b60032d0a40e4f24ad23de12dcf9 Mon Sep 17 00:00:00 2001 From: Jung SeokJoon Date: Thu, 25 Jul 2024 22:37:51 +0900 Subject: [PATCH 1/6] implement MissionMateTextField & MissionMateTextFieldGroup --- .../core/designsystem/component/TextField.kt | 198 ++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt diff --git a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt new file mode 100644 index 00000000..1ecc1901 --- /dev/null +++ b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt @@ -0,0 +1,198 @@ +package com.goalpanzi.mission_mate.core.designsystem.component + +import androidx.compose.foundation.BorderStroke +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.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.material3.Text +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.draw.clip +import androidx.compose.ui.focus.onFocusChanged +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.input.VisualTransformation +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography + +@Composable +fun MissionMateTextField( + text: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + hint : String = "", + isError : Boolean = false, + textStyle: TextStyle = MissionMateTypography.body_lg_bold, + hintStyle: TextStyle = MissionMateTypography.body_lg_regular, + textColor: Color = Color(0xFF313239), + hintColor: Color = Color(0xFF727484), + containerColor: Color = Color(0xFFF5F6F9), + errorContainerColor: Color = Color(0x4DFF6464), + borderStroke: BorderStroke = BorderStroke(1.dp,Color(0xFFF5F6F9)), + focusedBorderStroke: BorderStroke = BorderStroke(1.dp, Color(0xFF000000)), + errorBorderStroke: BorderStroke = BorderStroke(1.dp, Color(0xFFFF6464)), + shape: Shape = RoundedCornerShape(12.dp), + isSingleLine: Boolean = true, + visualTransformation: VisualTransformation = VisualTransformation.None, + textAlign : Alignment = Alignment.CenterStart, + contentPadding : PaddingValues = PaddingValues(horizontal = 16.dp) +) { + var isFocused by remember { mutableStateOf(false) } + + BasicTextField( + modifier = modifier + .heightIn(min = 60.dp) + .onFocusChanged { + isFocused = it.isFocused + }, + value = text, + singleLine = isSingleLine, + textStyle = textStyle.copy( + color = textColor + ), + visualTransformation = visualTransformation, + onValueChange = onValueChange, + decorationBox = { innerTextField -> + Box( + modifier = Modifier + .clip(shape) + .border( + border = if (isError) errorBorderStroke + else if (isFocused) focusedBorderStroke + else borderStroke, + shape = shape + ) + .background( + if (isError) errorContainerColor + else containerColor + ) + .padding(contentPadding), + contentAlignment = textAlign + ) { + if(text.isBlank()){ + Text( + text = hint, + style = hintStyle, + color = hintColor + ) + } + innerTextField() + } + + } + ) +} + +@Composable +fun MissionMateTextFieldGroup( + text: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + useTitle : Boolean = false, + useGuidance : Boolean = false, + useMaxLength : Boolean = false, + title : String = "", + hint : String = "", + guidance : String = "", + maxLength : Int = Int.MAX_VALUE, + isError : Boolean = false, + titleColor : Color = Color(0xFF4F505C), + guidanceColor : Color = Color(0xFF4F505C), + errorColor : Color = Color(0xFFFF6464) +){ + Column( + modifier = modifier, + verticalArrangement = Arrangement.spacedBy(8.dp) + ) { + if(useTitle){ + Text( + modifier = Modifier.padding(bottom = 4.dp), + text = title, + style = MissionMateTypography.body_md_bold, + color = titleColor + ) + } + MissionMateTextField( + text = text, + onValueChange = onValueChange, + modifier = Modifier.fillMaxWidth(), + hint = hint, + isError = isError + ) + if(useGuidance){ + Text( + text = guidance + if(useMaxLength) "(${text.length}/$maxLength)" else "", + style = MissionMateTypography.body_md_regular, + color = if(isError) errorColor else guidanceColor + ) + } + } +} + +@Composable +@Preview +fun PreviewMissionMateTextField(){ + MissionMateTextField( + modifier = Modifier.fillMaxWidth(), + text = "Goalpanzi", + onValueChange = {} + ) +} + +@Composable +@Preview +fun PreviewMissionMateTextFieldGroup(){ + MissionMateTextFieldGroup( + text = "Goalpanzi", + onValueChange = {}, + useTitle = true, + useGuidance = true, + title = "Mission-Mate", + guidance = "4~10자, 한글, 영문 또는 숫자를 입력하세요." + ) +} + +@Composable +@Preview +fun PreviewMissionMateTextFieldGroupWithMaxLength(){ + MissionMateTextFieldGroup( + text = "Goalpanzi", + onValueChange = {}, + useTitle = true, + useGuidance = true, + title = "Mission-Mate", + guidance = "4~12자 이내로 입력하세요. ", + useMaxLength = true, + maxLength = 12 + ) +} + +@Composable +@Preview +fun PreviewMissionMateTextFieldGroupError(){ + MissionMateTextFieldGroup( + text = "Goalpanzi", + onValueChange = {}, + useTitle = true, + useGuidance = true, + title = "Mission-Mate", + guidance = "중복된 닉네임이에요.", + isError = true + ) +} + From cb1764236ff86fa51b09928156db221f8be7545d Mon Sep 17 00:00:00 2001 From: Jung SeokJoon Date: Sun, 28 Jul 2024 00:21:56 +0900 Subject: [PATCH 2/6] implement MissionMate Button --- .../core/designsystem/component/Button.kt | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt diff --git a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt new file mode 100644 index 00000000..d96cc924 --- /dev/null +++ b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt @@ -0,0 +1,87 @@ +package com.goalpanzi.mission_mate.core.designsystem.component + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography + +@Composable +fun MissionMateTextButton( + text: String, + onClick: () -> Unit, + modifier: Modifier = Modifier, + textColor: Color = Color(0xFFFFFFFF), + textStyle: TextStyle = MissionMateTypography.body_lg_bold, + enabled: Boolean = true +) { + MissionMateButton( + modifier = modifier, + contentColor = textColor, + enabled = enabled, + onClick = onClick + ) { + Text(text = text, style = textStyle) + } +} + +@Composable +fun MissionMateButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + containerColor: Color = Color(0xFFFF5F3C), + disabledContainerColor: Color = Color(0xFFB3B3B3), + contentColor: Color = Color(0xFFFFFFFF), + disabledContentColor: Color = Color(0xFFFFFFFF), + enabled: Boolean = true, + shape: Shape = RoundedCornerShape(30.dp), + contentPadding: PaddingValues = PaddingValues(vertical = 18.dp, horizontal = 30.dp), + content: @Composable () -> Unit +) { + Button( + modifier = modifier, + enabled = enabled, + shape = shape, + colors = ButtonColors( + containerColor = containerColor, + disabledContainerColor = disabledContainerColor, + contentColor = contentColor, + disabledContentColor = disabledContentColor + ), + contentPadding = contentPadding, + onClick = onClick + ) { + content() + } +} + +@Preview +@Composable +fun PreviewTextButton(){ + MissionMateTextButton( + modifier = Modifier.fillMaxWidth(), + text = "btn", + onClick = {} + ) +} + +@Preview +@Composable +fun PreviewTextButtonDisabled(){ + MissionMateTextButton( + modifier = Modifier.fillMaxWidth(), + text = "btn", + enabled = false, + onClick = {} + ) +} \ No newline at end of file From c221e497cfd0e86aec1e910ca69accc36010425f Mon Sep 17 00:00:00 2001 From: Jung SeokJoon Date: Tue, 30 Jul 2024 21:08:14 +0900 Subject: [PATCH 3/6] add MissionMateDialog --- .../core/designsystem/component/Dialog.kt | 217 ++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Dialog.kt diff --git a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Dialog.kt b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Dialog.kt new file mode 100644 index 00000000..7a4b72cb --- /dev/null +++ b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Dialog.kt @@ -0,0 +1,217 @@ +package com.goalpanzi.mission_mate.core.designsystem.component + +import androidx.annotation.StringRes +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +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.aspectRatio +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.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.window.Dialog +import androidx.compose.ui.window.DialogProperties +import com.goalpanzi.mission_mate.core.designsystem.R +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorBlack_FF000000 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray2_FF4F505C +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray3_FF727484 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF +import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography + +@Composable +fun MissionMateDialog( + @StringRes titleId: Int, + onDismissRequest: () -> Unit, + onClickOk : () -> Unit, + modifier: Modifier = Modifier, + @StringRes descriptionId: Int? = null, + @StringRes okTextId: Int? = null, + @StringRes cancelTextId: Int? = null, + titleStyle: TextStyle = MissionMateTypography.title_xl_bold, + descriptionStyle: TextStyle = MissionMateTypography.body_lg_regular, + okTextStyle: TextStyle = MissionMateTypography.body_lg_bold, + cancelTextStyle: TextStyle = MissionMateTypography.body_lg_bold, + shape: Shape = RoundedCornerShape(20.dp), + dialogInnerPadding: PaddingValues = PaddingValues( + top = 40.dp, + bottom = 34.dp, + start = 24.dp, + end = 24.dp + ) +) { + Dialog( + properties = DialogProperties( + usePlatformDefaultWidth = false + ), + onDismissRequest = onDismissRequest, + ) { + Column( + modifier = modifier + .padding(horizontal = 20.dp) + .clip(shape) + .background(ColorWhite_FFFFFFFF) + .padding(dialogInnerPadding), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + text = stringResource(id = titleId), + style = titleStyle, + textAlign = TextAlign.Center, + color = ColorGray1_FF404249 + ) + if (descriptionId != null) { + Text( + modifier = Modifier.padding(top = 12.dp), + text = stringResource(id = descriptionId), + style = descriptionStyle, + textAlign = TextAlign.Center, + color = ColorGray2_FF4F505C + ) + } + if (okTextId != null) { + MissionMateTextButton( + modifier = Modifier + .padding(top = 32.dp) + .fillMaxWidth(), + textId = okTextId, + textStyle = okTextStyle, + onClick = onClickOk + ) + } + + if (cancelTextId != null) { + Text( + modifier = Modifier.padding(top = 20.dp) + .clickable( + interactionSource = null, + indication = null, + onClick = onDismissRequest + ), + text = stringResource(id = cancelTextId), + style = cancelTextStyle, + textAlign = TextAlign.Center, + color = ColorGray3_FF727484 + ) + } + } + } +} + + +@Composable +fun MissionMateDialog( + onDismissRequest: () -> Unit, + modifier: Modifier = Modifier, + @StringRes okTextId: Int? = null, + @StringRes cancelTextId: Int? = null, + okTextStyle: TextStyle = MissionMateTypography.body_lg_bold, + cancelTextStyle: TextStyle = MissionMateTypography.body_lg_bold, + shape: Shape = RoundedCornerShape(20.dp), + dialogInnerPadding: PaddingValues = PaddingValues( + top = 40.dp, + bottom = 34.dp, + start = 24.dp, + end = 24.dp + ), + content: @Composable () -> Unit +) { + Dialog( + properties = DialogProperties( + usePlatformDefaultWidth = false + ), + onDismissRequest = onDismissRequest, + ) { + Column( + modifier = modifier + .padding(horizontal = 20.dp) + .clip(shape) + .background(ColorWhite_FFFFFFFF) + .padding(dialogInnerPadding), + horizontalAlignment = Alignment.CenterHorizontally + ) { + content() + if (okTextId != null) { + MissionMateTextButton( + modifier = Modifier + .fillMaxWidth(), + textId = okTextId, + textStyle = okTextStyle, + onClick = {} + ) + } + + if (cancelTextId != null) { + Text( + modifier = Modifier.padding(top = 20.dp), + text = stringResource(id = cancelTextId), + style = cancelTextStyle, + textAlign = TextAlign.Center, + color = ColorGray3_FF727484 + ) + } + } + } +} + + +@Preview +@Composable +fun PreviewMissionMateDialog() { + Box( + modifier = Modifier.fillMaxSize() + ) { + MissionMateDialog( + modifier = Modifier.fillMaxWidth(), + titleId = R.string.app_name, + descriptionId = R.string.app_name, + okTextId = R.string.app_name, + cancelTextId = R.string.app_name, + onClickOk = {}, + onDismissRequest = {} + ) + } + +} + +@Preview +@Composable +fun PreviewMissionMateContentDialog() { + Box( + modifier = Modifier.fillMaxSize() + ) { + MissionMateDialog( + modifier = Modifier.fillMaxWidth(), + okTextId = R.string.app_name, + cancelTextId = R.string.app_name, + onDismissRequest = {} + ) { + Spacer( + modifier = Modifier + .padding(bottom = 20.dp) + .fillMaxWidth() + .aspectRatio(1f) + .border( + 1.dp, + ColorBlack_FF000000 + ) + ) + } + } + +} \ No newline at end of file From 0252a7b3f93f9be988adda99d4b157aa70da32a7 Mon Sep 17 00:00:00 2001 From: Jung SeokJoon Date: Tue, 30 Jul 2024 21:09:50 +0900 Subject: [PATCH 4/6] add MissionMateButtonType & color & id with stringResource --- .../core/designsystem/component/Button.kt | 57 ++++++++++++++----- 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt index d96cc924..e50a18a9 100644 --- a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt +++ b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt @@ -1,8 +1,8 @@ package com.goalpanzi.mission_mate.core.designsystem.component +import androidx.annotation.StringRes import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Button import androidx.compose.material3.ButtonColors @@ -11,27 +11,47 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.goalpanzi.mission_mate.core.designsystem.R +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorDisabled_FFB3B3B3 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorOrange_FFFF5732 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography +enum class MissionMateButtonType( + val containerColor : Color, + val contentColor : Color = ColorWhite_FFFFFFFF, +) { + ACTIVE(containerColor = ColorOrange_FFFF5732), + SECONDARY(containerColor = ColorGray1_FF404249), + DISABLED(containerColor = ColorDisabled_FFB3B3B3) +} + @Composable fun MissionMateTextButton( - text: String, + @StringRes textId: Int, onClick: () -> Unit, modifier: Modifier = Modifier, + buttonType: MissionMateButtonType = MissionMateButtonType.ACTIVE, textColor: Color = Color(0xFFFFFFFF), textStyle: TextStyle = MissionMateTypography.body_lg_bold, enabled: Boolean = true ) { MissionMateButton( modifier = modifier, - contentColor = textColor, + buttonType = buttonType, enabled = enabled, onClick = onClick ) { - Text(text = text, style = textStyle) + Text( + text = stringResource(id = textId), + style = textStyle, + color = textColor + ) } } @@ -39,10 +59,7 @@ fun MissionMateTextButton( fun MissionMateButton( onClick: () -> Unit, modifier: Modifier = Modifier, - containerColor: Color = Color(0xFFFF5F3C), - disabledContainerColor: Color = Color(0xFFB3B3B3), - contentColor: Color = Color(0xFFFFFFFF), - disabledContentColor: Color = Color(0xFFFFFFFF), + buttonType: MissionMateButtonType = MissionMateButtonType.ACTIVE, enabled: Boolean = true, shape: Shape = RoundedCornerShape(30.dp), contentPadding: PaddingValues = PaddingValues(vertical = 18.dp, horizontal = 30.dp), @@ -53,10 +70,10 @@ fun MissionMateButton( enabled = enabled, shape = shape, colors = ButtonColors( - containerColor = containerColor, - disabledContainerColor = disabledContainerColor, - contentColor = contentColor, - disabledContentColor = disabledContentColor + containerColor = buttonType.containerColor, + disabledContainerColor = MissionMateButtonType.DISABLED.containerColor, + contentColor = buttonType.contentColor, + disabledContentColor = MissionMateButtonType.DISABLED.contentColor ), contentPadding = contentPadding, onClick = onClick @@ -70,17 +87,29 @@ fun MissionMateButton( fun PreviewTextButton(){ MissionMateTextButton( modifier = Modifier.fillMaxWidth(), - text = "btn", + textId = R.string.app_name, + onClick = {} + ) +} + +@Preview +@Composable +fun PreviewSecondaryTextButton(){ + MissionMateTextButton( + modifier = Modifier.fillMaxWidth(), + textId = R.string.app_name, + buttonType = MissionMateButtonType.SECONDARY, onClick = {} ) } + @Preview @Composable fun PreviewTextButtonDisabled(){ MissionMateTextButton( modifier = Modifier.fillMaxWidth(), - text = "btn", + textId = R.string.app_name, enabled = false, onClick = {} ) From d3a7b98edb9acbb9646d1c141f81c680e00bb44a Mon Sep 17 00:00:00 2001 From: Jung SeokJoon Date: Tue, 30 Jul 2024 21:23:47 +0900 Subject: [PATCH 5/6] add MissionMateTextField color & id with stringResource --- .../core/designsystem/component/TextField.kt | 71 ++++++++++--------- 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt index 1ecc1901..24df52cb 100644 --- a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt +++ b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/TextField.kt @@ -1,5 +1,6 @@ package com.goalpanzi.mission_mate.core.designsystem.component +import androidx.annotation.StringRes import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border @@ -24,10 +25,18 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.goalpanzi.mission_mate.core.designsystem.R +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray3_FF727484 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray4_FFE5E5E5 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray5_80F5F6F9 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorRed_FFFF5858 +import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography @Composable @@ -35,17 +44,17 @@ fun MissionMateTextField( text: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, - hint : String = "", + @StringRes hintId : Int? = null, isError : Boolean = false, - textStyle: TextStyle = MissionMateTypography.body_lg_bold, + textStyle: TextStyle = MissionMateTypography.body_lg_regular, hintStyle: TextStyle = MissionMateTypography.body_lg_regular, - textColor: Color = Color(0xFF313239), - hintColor: Color = Color(0xFF727484), - containerColor: Color = Color(0xFFF5F6F9), - errorContainerColor: Color = Color(0x4DFF6464), - borderStroke: BorderStroke = BorderStroke(1.dp,Color(0xFFF5F6F9)), - focusedBorderStroke: BorderStroke = BorderStroke(1.dp, Color(0xFF000000)), - errorBorderStroke: BorderStroke = BorderStroke(1.dp, Color(0xFFFF6464)), + textColor: Color = ColorGray1_FF404249, + hintColor: Color = ColorGray3_FF727484, + containerColor: Color = ColorWhite_FFFFFFFF, + unfocusedHintColor: Color = ColorGray5_80F5F6F9, + borderStroke: BorderStroke = BorderStroke(1.dp, ColorGray4_FFE5E5E5), + focusedBorderStroke: BorderStroke = BorderStroke(1.dp, ColorGray4_FFE5E5E5), + errorBorderStroke: BorderStroke = BorderStroke(2.dp, ColorRed_FFFF5858), shape: Shape = RoundedCornerShape(12.dp), isSingleLine: Boolean = true, visualTransformation: VisualTransformation = VisualTransformation.None, @@ -53,7 +62,6 @@ fun MissionMateTextField( contentPadding : PaddingValues = PaddingValues(horizontal = 16.dp) ) { var isFocused by remember { mutableStateOf(false) } - BasicTextField( modifier = modifier .heightIn(min = 60.dp) @@ -78,7 +86,7 @@ fun MissionMateTextField( shape = shape ) .background( - if (isError) errorContainerColor + if (!isFocused && text.isEmpty()) unfocusedHintColor else containerColor ) .padding(contentPadding), @@ -86,7 +94,7 @@ fun MissionMateTextField( ) { if(text.isBlank()){ Text( - text = hint, + text = hintId?.let { stringResource(id = it) } ?: "", style = hintStyle, color = hintColor ) @@ -103,12 +111,10 @@ fun MissionMateTextFieldGroup( text: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, - useTitle : Boolean = false, - useGuidance : Boolean = false, useMaxLength : Boolean = false, - title : String = "", - hint : String = "", - guidance : String = "", + @StringRes titleId : Int? = null, + @StringRes hintId : Int? = null, + @StringRes guidanceId : Int? = null, maxLength : Int = Int.MAX_VALUE, isError : Boolean = false, titleColor : Color = Color(0xFF4F505C), @@ -119,10 +125,10 @@ fun MissionMateTextFieldGroup( modifier = modifier, verticalArrangement = Arrangement.spacedBy(8.dp) ) { - if(useTitle){ + if(titleId != null){ Text( modifier = Modifier.padding(bottom = 4.dp), - text = title, + text = stringResource(id = titleId), style = MissionMateTypography.body_md_bold, color = titleColor ) @@ -131,12 +137,12 @@ fun MissionMateTextFieldGroup( text = text, onValueChange = onValueChange, modifier = Modifier.fillMaxWidth(), - hint = hint, + hintId = hintId, isError = isError ) - if(useGuidance){ + if(guidanceId != null){ Text( - text = guidance + if(useMaxLength) "(${text.length}/$maxLength)" else "", + text = stringResource(id = guidanceId) + if(useMaxLength) "(${text.length}/$maxLength)" else "", style = MissionMateTypography.body_md_regular, color = if(isError) errorColor else guidanceColor ) @@ -149,7 +155,8 @@ fun MissionMateTextFieldGroup( fun PreviewMissionMateTextField(){ MissionMateTextField( modifier = Modifier.fillMaxWidth(), - text = "Goalpanzi", + text = "", + hintId = R.string.app_name, onValueChange = {} ) } @@ -160,10 +167,8 @@ fun PreviewMissionMateTextFieldGroup(){ MissionMateTextFieldGroup( text = "Goalpanzi", onValueChange = {}, - useTitle = true, - useGuidance = true, - title = "Mission-Mate", - guidance = "4~10자, 한글, 영문 또는 숫자를 입력하세요." + titleId = R.string.app_name, + guidanceId = R.string.app_name, ) } @@ -173,10 +178,8 @@ fun PreviewMissionMateTextFieldGroupWithMaxLength(){ MissionMateTextFieldGroup( text = "Goalpanzi", onValueChange = {}, - useTitle = true, - useGuidance = true, - title = "Mission-Mate", - guidance = "4~12자 이내로 입력하세요. ", + titleId = R.string.app_name, + guidanceId = R.string.app_name, useMaxLength = true, maxLength = 12 ) @@ -188,10 +191,8 @@ fun PreviewMissionMateTextFieldGroupError(){ MissionMateTextFieldGroup( text = "Goalpanzi", onValueChange = {}, - useTitle = true, - useGuidance = true, - title = "Mission-Mate", - guidance = "중복된 닉네임이에요.", + titleId = R.string.app_name, + guidanceId = R.string.app_name, isError = true ) } From 6e1a91307dfadc454520d360c4fce3248f070b11 Mon Sep 17 00:00:00 2001 From: Jung SeokJoon Date: Thu, 1 Aug 2024 23:55:19 +0900 Subject: [PATCH 6/6] =?UTF-8?q?implement=20Button=20-=20enabled=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mission_mate/core/designsystem/component/Button.kt | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt index e50a18a9..fabe6d7c 100644 --- a/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt +++ b/core/designsystem/src/main/java/com/goalpanzi/mission_mate/core/designsystem/component/Button.kt @@ -38,13 +38,11 @@ fun MissionMateTextButton( modifier: Modifier = Modifier, buttonType: MissionMateButtonType = MissionMateButtonType.ACTIVE, textColor: Color = Color(0xFFFFFFFF), - textStyle: TextStyle = MissionMateTypography.body_lg_bold, - enabled: Boolean = true + textStyle: TextStyle = MissionMateTypography.body_lg_bold ) { MissionMateButton( modifier = modifier, buttonType = buttonType, - enabled = enabled, onClick = onClick ) { Text( @@ -60,14 +58,13 @@ fun MissionMateButton( onClick: () -> Unit, modifier: Modifier = Modifier, buttonType: MissionMateButtonType = MissionMateButtonType.ACTIVE, - enabled: Boolean = true, shape: Shape = RoundedCornerShape(30.dp), contentPadding: PaddingValues = PaddingValues(vertical = 18.dp, horizontal = 30.dp), content: @Composable () -> Unit ) { Button( modifier = modifier, - enabled = enabled, + enabled = buttonType != MissionMateButtonType.DISABLED, shape = shape, colors = ButtonColors( containerColor = buttonType.containerColor, @@ -110,7 +107,7 @@ fun PreviewTextButtonDisabled(){ MissionMateTextButton( modifier = Modifier.fillMaxWidth(), textId = R.string.app_name, - enabled = false, + buttonType = MissionMateButtonType.DISABLED, onClick = {} ) } \ No newline at end of file