From 939336246868f3607b0f49344c6651045d09683b Mon Sep 17 00:00:00 2001 From: jinukeu Date: Fri, 29 Dec 2023 19:55:04 +0900 Subject: [PATCH 01/24] =?UTF-8?q?refactor:=20BasicButton=20Icon=20Slot=20A?= =?UTF-8?q?pi=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/button/BasicButton.kt | 40 ++++++------------- .../component/button/SusuFilledButton.kt | 30 +++++++++----- .../component/button/SusuGhostButton.kt | 29 +++++++++----- .../component/button/SusuLinedButton.kt | 30 +++++++++----- 4 files changed, 72 insertions(+), 57 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt index 80bac04b..fea811d9 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt @@ -1,6 +1,5 @@ package com.susu.core.designsystem.component.button -import androidx.annotation.DrawableRes import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement @@ -10,7 +9,6 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentWidth -import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -19,7 +17,6 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp @@ -31,7 +28,7 @@ import com.susu.core.ui.extension.susuClickable fun BasicButton( modifier: Modifier = Modifier, shape: Shape = RectangleShape, - text: String = "", + text: String? = null, textStyle: TextStyle = TextStyle.Default, contentColor: Color = Color.Unspecified, rippleColor: Color = Color.Unspecified, @@ -39,10 +36,8 @@ fun BasicButton( borderWidth: Dp = 0.dp, backgroundColor: Color = Color.Unspecified, padding: PaddingValues = PaddingValues(0.dp), - @DrawableRes leftIcon: Int? = null, - leftIconContentDescription: String? = null, - @DrawableRes rightIcon: Int? = null, - rightIconContentDescription: String? = null, + leftIcon: (@Composable () -> Unit)? = null, + rightIcon: (@Composable () -> Unit)? = null, iconSpacing: Dp = 0.dp, isActive: Boolean = true, onClick: () -> Unit = {}, @@ -66,33 +61,22 @@ fun BasicButton( ) { Row( modifier + .height(textStyle.lineHeight.value.dp) .wrapContentWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(iconSpacing), ) { - leftIcon?.let { - Icon( - modifier = Modifier.height(textStyle.lineHeight.value.dp), - painter = painterResource(id = it), - contentDescription = leftIconContentDescription, - tint = contentColor, - ) - } + leftIcon?.invoke() - Text( - text = text, - style = textStyle, - color = contentColor, - ) - - rightIcon?.let { - Icon( - modifier = Modifier.height(textStyle.lineHeight.value.dp), - painter = painterResource(id = it), - contentDescription = rightIconContentDescription, - tint = contentColor, + text?.let { + Text( + text = it, + style = textStyle, + color = contentColor, ) } + + rightIcon?.invoke() } } } diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt index 0d9e67e6..3a14c73a 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt @@ -1,15 +1,17 @@ package com.susu.core.designsystem.component.button -import androidx.annotation.DrawableRes import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon 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.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -47,13 +49,11 @@ enum class FilledButtonColor( fun SusuFilledButton( modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(4.dp), - text: String = "", + text: String? = null, color: FilledButtonColor, style: @Composable () -> ButtonStyle, - @DrawableRes leftIcon: Int? = null, - leftIconContentDescription: String? = null, - @DrawableRes rightIcon: Int? = null, - rightIconContentDescription: String? = null, + leftIcon: (@Composable () -> Unit)? = null, + rightIcon: (@Composable () -> Unit)? = null, isActive: Boolean = true, onClick: () -> Unit = {}, ) { @@ -68,9 +68,7 @@ fun SusuFilledButton( rippleColor = rippleColor, backgroundColor = if (isActive) activeBackgroundColor else inactiveBackgroundColor, leftIcon = leftIcon, - leftIconContentDescription = leftIconContentDescription, rightIcon = rightIcon, - rightIconContentDescription = rightIconContentDescription, padding = paddingValues, iconSpacing = iconSpacing, isActive = isActive, @@ -181,8 +179,20 @@ private fun SusuFilledButtonPreview( style = large, color = color, text = "Button", - rightIcon = R.drawable.ic_arrow_left, - leftIcon = R.drawable.ic_arrow_left, + leftIcon = { + Icon( + modifier = Modifier.size(16.dp), + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "", tint = color.activeContentColor, + ) + }, + rightIcon = { + Icon( + modifier = Modifier.size(16.dp), + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "", tint = color.activeContentColor, + ) + } ) SusuFilledButton( diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt index b003883f..d7cf391f 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt @@ -5,11 +5,14 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon 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.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -47,13 +50,11 @@ enum class GhostButtonColor( fun SusuGhostButton( modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(4.dp), - text: String = "", + text: String? = null, color: GhostButtonColor, style: @Composable () -> ButtonStyle, - @DrawableRes leftIcon: Int? = null, - leftIconContentDescription: String? = null, - @DrawableRes rightIcon: Int? = null, - rightIconContentDescription: String? = null, + leftIcon: (@Composable () -> Unit)? = null, + rightIcon: (@Composable () -> Unit)? = null, isActive: Boolean = true, onClick: () -> Unit = {}, ) { @@ -68,9 +69,7 @@ fun SusuGhostButton( rippleColor = rippleColor, backgroundColor = if (isActive) activeBackgroundColor else inactiveBackgroundColor, leftIcon = leftIcon, - leftIconContentDescription = leftIconContentDescription, rightIcon = rightIcon, - rightIconContentDescription = rightIconContentDescription, padding = paddingValues, iconSpacing = iconSpacing, isActive = isActive, @@ -181,8 +180,20 @@ private fun SusuGhostButtonPreview( style = large, color = color, text = "Button", - rightIcon = R.drawable.ic_arrow_left, - leftIcon = R.drawable.ic_arrow_left, + leftIcon = { + Icon( + modifier = Modifier.size(16.dp), + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "", tint = color.activeContentColor, + ) + }, + rightIcon = { + Icon( + modifier = Modifier.size(16.dp), + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "", tint = color.activeContentColor, + ) + } ) SusuGhostButton( diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt index 906b92ae..34858875 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt @@ -1,15 +1,17 @@ package com.susu.core.designsystem.component.button -import androidx.annotation.DrawableRes import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon 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.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -54,13 +56,11 @@ enum class LinedButtonColor( fun SusuLinedButton( modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(4.dp), - text: String = "", + text: String? = null, color: LinedButtonColor, style: @Composable () -> ButtonStyle, - @DrawableRes leftIcon: Int? = null, - leftIconContentDescription: String? = null, - @DrawableRes rightIcon: Int? = null, - rightIconContentDescription: String? = null, + leftIcon: (@Composable () -> Unit)? = null, + rightIcon: (@Composable () -> Unit)? = null, isActive: Boolean = true, onClick: () -> Unit = {}, ) { @@ -77,9 +77,7 @@ fun SusuLinedButton( rippleColor = rippleColor, backgroundColor = if (isActive) activeBackgroundColor else inactiveBackgroundColor, leftIcon = leftIcon, - leftIconContentDescription = leftIconContentDescription, rightIcon = rightIcon, - rightIconContentDescription = rightIconContentDescription, padding = paddingValues, iconSpacing = iconSpacing, isActive = isActive, @@ -190,8 +188,20 @@ private fun SusuLinedButtonPreview( style = large, color = color, text = "Button", - rightIcon = R.drawable.ic_arrow_left, - leftIcon = R.drawable.ic_arrow_left, + leftIcon = { + Icon( + modifier = Modifier.size(16.dp), + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "", tint = color.activeContentColor, + ) + }, + rightIcon = { + Icon( + modifier = Modifier.size(16.dp), + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "", tint = color.activeContentColor, + ) + }, ) SusuLinedButton( From 21bbac03d5c488d474e7f555c2e99380c653c8ff Mon Sep 17 00:00:00 2001 From: jinukeu Date: Sat, 30 Dec 2023 00:00:11 +0900 Subject: [PATCH 02/24] =?UTF-8?q?feat:=20TextFieldButtonStyle=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../textfieldbutton/style/InnerButtonStyle.kt | 44 ++++ .../style/TextFieldButtonStyle.kt | 221 ++++++++++++++++++ .../susu/core/designsystem/theme/Spacing.kt | 3 + .../com/susu/core/designsystem/theme/Theme.kt | 2 + 4 files changed, 270 insertions(+) create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/InnerButtonStyle.kt create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/TextFieldButtonStyle.kt diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/InnerButtonStyle.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/InnerButtonStyle.kt new file mode 100644 index 00000000..63c8c69b --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/InnerButtonStyle.kt @@ -0,0 +1,44 @@ +package com.susu.core.designsystem.component.textfieldbutton.style + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.theme.SusuTheme + +data class InnerButtonStyle( + val paddingValues: PaddingValues = PaddingValues(0.dp), + val textStyle: TextStyle = TextStyle.Default, +) + +object XSmallInnerButtonStyle { + val height28: @Composable () -> InnerButtonStyle = { + InnerButtonStyle( + paddingValues = PaddingValues( + horizontal = SusuTheme.spacing.spacing_xxs, + vertical = SusuTheme.spacing.spacing_xxxxs, + ), + textStyle = SusuTheme.typography.title_xxxs, + ) + } + + val height24: @Composable () -> InnerButtonStyle = { + InnerButtonStyle( + paddingValues = PaddingValues( + horizontal = SusuTheme.spacing.spacing_xxs, + vertical = SusuTheme.spacing.spacing_xxxxxs, + ), + textStyle = SusuTheme.typography.title_xxxs, + ) + } + + val height20: @Composable () -> InnerButtonStyle = { + InnerButtonStyle( + paddingValues = PaddingValues( + horizontal = SusuTheme.spacing.spacing_xxs, + vertical = SusuTheme.spacing.spacing_xxxxxs, + ), + textStyle = SusuTheme.typography.title_xxxxs, + ) + } +} diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/TextFieldButtonStyle.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/TextFieldButtonStyle.kt new file mode 100644 index 00000000..eb9147c7 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/style/TextFieldButtonStyle.kt @@ -0,0 +1,221 @@ +package com.susu.core.designsystem.component.textfieldbutton.style + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.theme.SusuTheme + +data class TextFieldButtonStyle( + val paddingValues: PaddingValues = PaddingValues(0.dp), + val iconSpacing: Dp = 0.dp, + val textStyle: TextStyle = TextStyle.Default, + val innerButtonStyle: @Composable () -> InnerButtonStyle, + val clearIconSize: Dp = 0.dp, + val closeIconSize: Dp = 0.dp, +) + +object LargeTextFieldButtonStyle { + + val height62: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_xl, + end = SusuTheme.spacing.spacing_m, + top = SusuTheme.spacing.spacing_m, + bottom = SusuTheme.spacing.spacing_m, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_s, + innerButtonStyle = XSmallInnerButtonStyle.height28, + clearIconSize = 24.dp, + closeIconSize = 24.dp, + ) + } + + val height54: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_l, + end = SusuTheme.spacing.spacing_xm, + top = SusuTheme.spacing.spacing_s, + bottom = SusuTheme.spacing.spacing_s, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_s, + innerButtonStyle = XSmallInnerButtonStyle.height28, + clearIconSize = 24.dp, + closeIconSize = 24.dp, + ) + } + + val height46: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_s, + top = SusuTheme.spacing.spacing_xs, + bottom = SusuTheme.spacing.spacing_xs, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_s, + innerButtonStyle = XSmallInnerButtonStyle.height28, + clearIconSize = 24.dp, + closeIconSize = 24.dp, + ) + } +} + +object MediumTextFieldButtonStyle { + + val height60: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_xl, + end = SusuTheme.spacing.spacing_m, + top = SusuTheme.spacing.spacing_m, + bottom = SusuTheme.spacing.spacing_m, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xs, + innerButtonStyle = XSmallInnerButtonStyle.height28, + clearIconSize = 24.dp, + closeIconSize = 24.dp, + ) + } + + val height52: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_l, + end = SusuTheme.spacing.spacing_xm, + top = SusuTheme.spacing.spacing_s, + bottom = SusuTheme.spacing.spacing_s, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xs, + innerButtonStyle = XSmallInnerButtonStyle.height28, + clearIconSize = 24.dp, + closeIconSize = 24.dp, + ) + } + + val height44: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_s, + top = SusuTheme.spacing.spacing_xxs, + bottom = SusuTheme.spacing.spacing_xxs, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xs, + innerButtonStyle = XSmallInnerButtonStyle.height24, + clearIconSize = 20.dp, + closeIconSize = 20.dp, + ) + } +} + +object SmallTextFieldButtonStyle { + + val height48: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_s, + top = SusuTheme.spacing.spacing_s, + bottom = SusuTheme.spacing.spacing_s, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xxs, + innerButtonStyle = XSmallInnerButtonStyle.height24, + clearIconSize = 20.dp, + closeIconSize = 20.dp, + ) + } + + val height40: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_s, + end = SusuTheme.spacing.spacing_xxs, + top = SusuTheme.spacing.spacing_xxs, + bottom = SusuTheme.spacing.spacing_xxs, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xxs, + innerButtonStyle = XSmallInnerButtonStyle.height24, + clearIconSize = 20.dp, + closeIconSize = 20.dp, + ) + } + + val height32: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_xxs, + end = SusuTheme.spacing.spacing_xxs, + top = SusuTheme.spacing.spacing_xxxxs, + bottom = SusuTheme.spacing.spacing_xxxxs, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xxs, + innerButtonStyle = XSmallInnerButtonStyle.height20, + clearIconSize = 16.dp, + closeIconSize = 20.dp, + ) + } +} + +object XSmallTextFieldButtonStyle { + + val height44: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_m, + top = SusuTheme.spacing.spacing_s, + bottom = SusuTheme.spacing.spacing_s, + ), + iconSpacing = SusuTheme.spacing.spacing_xxs, + textStyle = SusuTheme.typography.title_xxxs, + innerButtonStyle = XSmallInnerButtonStyle.height20, + clearIconSize = 20.dp, + closeIconSize = 20.dp, + ) + } + + val height36: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_xxs, + end = SusuTheme.spacing.spacing_xxs, + top = SusuTheme.spacing.spacing_xxs, + bottom = SusuTheme.spacing.spacing_xxs, + ), + iconSpacing = SusuTheme.spacing.spacing_xxxs, + textStyle = SusuTheme.typography.title_xxxs, + innerButtonStyle = XSmallInnerButtonStyle.height20, + clearIconSize = 16.dp, + closeIconSize = 16.dp, + ) + } + + val height28: @Composable () -> TextFieldButtonStyle = { + TextFieldButtonStyle( + paddingValues = PaddingValues( + start = SusuTheme.spacing.spacing_xxs, + end = SusuTheme.spacing.spacing_xxxxs, + top = SusuTheme.spacing.spacing_xxxxs, + bottom = SusuTheme.spacing.spacing_xxxxs, + ), + iconSpacing = SusuTheme.spacing.spacing_xxxxs, + textStyle = SusuTheme.typography.title_xxxs, + innerButtonStyle = XSmallInnerButtonStyle.height20, + clearIconSize = 16.dp, + closeIconSize = 16.dp, + ) + } +} diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Spacing.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Spacing.kt index 3851b804..0b09b85f 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Spacing.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Spacing.kt @@ -12,6 +12,7 @@ internal val Spacing = SusuSpacing( spacing_xxs = 8.dp, spacing_xs = 10.dp, spacing_s = 12.dp, + spacing_xm = 14.dp, spacing_m = 16.dp, spacing_l = 20.dp, spacing_xl = 24.dp, @@ -30,6 +31,7 @@ data class SusuSpacing( val spacing_xs: Dp, val spacing_s: Dp, val spacing_m: Dp, + val spacing_xm: Dp, val spacing_l: Dp, val spacing_xl: Dp, val spacing_xxl: Dp, @@ -46,6 +48,7 @@ val LocalSpacing = staticCompositionLocalOf { spacing_xs = Dp.Unspecified, spacing_s = Dp.Unspecified, spacing_m = Dp.Unspecified, + spacing_xm = Dp.Unspecified, spacing_l = Dp.Unspecified, spacing_xl = Dp.Unspecified, spacing_xxl = Dp.Unspecified, diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Theme.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Theme.kt index 4ea4783d..57520bba 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Theme.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/theme/Theme.kt @@ -48,6 +48,8 @@ object SusuTheme { * * spacing_s = 12.dp, * + * spacing_xm = 14.dp, + * * spacing_m = 16.dp, * * spacing_l = 20.dp, From 5c3f84e2b0a1972049bf18d5841dc6695afaed84 Mon Sep 17 00:00:00 2001 From: jinukeu Date: Sat, 30 Dec 2023 18:50:26 +0900 Subject: [PATCH 03/24] =?UTF-8?q?feat:=20TextFieldButton=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../textfieldbutton/SusuTextFieldButton.kt | 367 ++++++++++++++++++ .../textfieldbutton/TextFieldButtonColor.kt | 49 +++ .../src/main/res/drawable/ic_clear.xml | 12 + .../src/main/res/drawable/ic_close.xml | 9 + .../src/main/res/values/strings.xml | 5 + .../com/susu/core/ui/extension/Modifier.kt | 14 + 6 files changed, 456 insertions(+) create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/TextFieldButtonColor.kt create mode 100644 core/designsystem/src/main/res/drawable/ic_clear.xml create mode 100644 core/designsystem/src/main/res/drawable/ic_close.xml create mode 100644 core/designsystem/src/main/res/values/strings.xml diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt new file mode 100644 index 00000000..9284c37d --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt @@ -0,0 +1,367 @@ +package com.susu.core.designsystem.component.textfieldbutton + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.widthIn +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +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.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.R +import com.susu.core.designsystem.component.textfieldbutton.style.InnerButtonStyle +import com.susu.core.designsystem.component.textfieldbutton.style.LargeTextFieldButtonStyle +import com.susu.core.designsystem.component.textfieldbutton.style.TextFieldButtonStyle +import com.susu.core.designsystem.theme.SusuTheme +import com.susu.core.ui.extension.disabledHorizontalPointerInputScroll +import com.susu.core.ui.extension.susuClickable + +@Composable +fun SusuTextFieldFillMaxButton( + modifier: Modifier = Modifier, + shape: Shape = RoundedCornerShape(4.dp), + text: String = "", + onTextChange: (String) -> Unit = {}, + placeholder: String = "", + maxLines: Int = 1, + minLines: Int = 1, + style: @Composable () -> TextFieldButtonStyle, + color: TextFieldButtonColor = TextFieldButtonColor.Black, + isSaved: Boolean = false, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + onClickClearIcon: () -> Unit = {}, + onClickCloseIcon: () -> Unit = {}, + onClickButton: () -> Unit = {}, +) { + val (backgroundColor, textColor) = with(color) { + if (isSaved) { + (savedBackgroundColor to savedTextColor) + } else { + (editBackgroundColor to editTextColor) + } + } + + with(style()) { + BasicTextField( + modifier = modifier + .fillMaxWidth(), + value = text, + onValueChange = onTextChange, + enabled = isSaved.not(), + singleLine = maxLines == 1, + maxLines = if (minLines > maxLines) minLines else maxLines, + minLines = minLines, + textStyle = textStyle.copy(textAlign = TextAlign.Center, color = textColor), + interactionSource = interactionSource, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + decorationBox = { innerTextField -> + Row( + modifier = Modifier + .clip(shape) + .background(backgroundColor) + .padding(paddingValues), + horizontalArrangement = Arrangement.spacedBy(iconSpacing), + verticalAlignment = Alignment.CenterVertically, + ) { + Box( + modifier = Modifier.weight(1f), + contentAlignment = Alignment.Center, + ) { + if (isSaved.not()) { + innerTextField() + } + + /** + * Problem : innerTextField 수정 중에 saved가 되면 underline이 생기는 현상. + * Solution : saved 상태에서는 Text 컴포저블 함수가 보이게 함. + */ + if (isSaved) { + Text( + text = text, + color = textColor, + style = textStyle, + textAlign = TextAlign.Start, + ) + } + + if (text.isEmpty()) { + Text( + text = placeholder, + color = color.placeholderColor, + style = textStyle, + textAlign = TextAlign.Center, + ) + } + } + + InnerButtons( + isSaved = isSaved, + isActive = text.isNotEmpty(), + color = color.buttonColor, + buttonStyle = innerButtonStyle, + onClickClearIcon = onClickClearIcon, + onClickCloseIcon = onClickCloseIcon, + onClickButton = onClickButton, + ) + } + }, + ) + } +} + +@Composable +fun SusuTextFieldWrapContentButton( + modifier: Modifier = Modifier, + shape: Shape = RoundedCornerShape(4.dp), + text: String = "", + onTextChange: (String) -> Unit = {}, + placeholder: String = "", + maxLines: Int = 1, + minLines: Int = 1, + style: @Composable () -> TextFieldButtonStyle, + color: TextFieldButtonColor = TextFieldButtonColor.Black, + isSaved: Boolean = false, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + onClickClearIcon: () -> Unit = {}, + onClickCloseIcon: () -> Unit = {}, + onClickButton: () -> Unit = {}, +) { + val (backgroundColor, textColor) = with(color) { + if (isSaved) { + (savedBackgroundColor to savedTextColor) + } else { + (editBackgroundColor to editTextColor) + } + } + + with(style()) { + Row( + modifier = modifier + .clip(shape) + .background(backgroundColor) + .padding(paddingValues), + horizontalArrangement = Arrangement.spacedBy(iconSpacing), + verticalAlignment = Alignment.CenterVertically, + ) { + Box( + contentAlignment = Alignment.Center, + ) { + BasicTextField( + modifier = Modifier + .disabledHorizontalPointerInputScroll() + .widthIn(min = 2.dp) + /** + * BasicTextField의 기본 width를 없애기 위해 IntrinsicSize.Min을 사용함. + * see -> https://stackoverflow.com/questions/67719981/resizeable-basictextfield-in-jetpack-compose + */ + .width(IntrinsicSize.Min), + value = text, + enabled = isSaved.not(), + onValueChange = onTextChange, + singleLine = maxLines == 1, + maxLines = if (minLines > maxLines) minLines else maxLines, + minLines = minLines, + textStyle = textStyle + .copy(color = Color.Transparent), + interactionSource = interactionSource, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + decorationBox = { innerTextField -> + /** + * Problem : 만약 커서가 맨 끝으로 가게 된다면 innerTextField의 텍스트가 짤리는 현상 발생. + * Why : IntrinsicSize.Min을 사용하게 되면 innerTextField의 width는 텍스트의 너비 만큼만 설정이 되었기 때문. (커서의 너비는 포함되지 않음.) + * Solution : + * innerTextField의 color를 Transparent로 설정해 텍스트가 짤리는 현상을 안보이게 함. + * 눈에 보이는 텍스트는 Text 컴포저블 함수로 보이게 함. + */ + Text( + text = text, + color = textColor, + style = textStyle, + textAlign = TextAlign.Center, + ) + innerTextField() + }, + ) + + if (text.isEmpty()) { + Text( + text = placeholder, + color = color.placeholderColor, + style = textStyle, + textAlign = TextAlign.Center, + ) + } + } + + InnerButtons( + isSaved = isSaved, + isActive = text.isNotEmpty(), + color = color.buttonColor, + buttonStyle = innerButtonStyle, + onClickClearIcon = onClickClearIcon, + onClickCloseIcon = onClickCloseIcon, + onClickButton = onClickButton, + ) + } + } +} + +@Composable +private fun InnerButtons( + modifier: Modifier = Modifier, + shape: Shape = RoundedCornerShape(4.dp), + isSaved: Boolean, + isActive: Boolean, + color: TextButtonInnerButtonColor, + buttonStyle: @Composable () -> InnerButtonStyle, + onClickClearIcon: () -> Unit = {}, + onClickCloseIcon: () -> Unit = {}, + onClickButton: () -> Unit = {}, +) { + val (innerButtonTextColor, innerButtonBackgroundColor) = with(color) { + if (isActive || isSaved) { + (activeContentColor to activeBackgroundColor) + } else { + (inactiveContentColor to inactiveBackgroundColor) + } + } + + if (isSaved.not()) { + Image( + modifier = Modifier + .clip(CircleShape) + .susuClickable(onClick = onClickClearIcon), + painter = painterResource(id = R.drawable.ic_clear), + contentDescription = "", + ) + } + + with(buttonStyle()) { + Box( + modifier = modifier + .clip(shape) + .background(innerButtonBackgroundColor) + .susuClickable( + runIf = isActive || isSaved, + rippleColor = color.rippleColor, + onClick = onClickButton, + ) + .padding(paddingValues), + ) { + Text( + text = if (isSaved) stringResource(R.string.word_edit) else stringResource(R.string.word_save), + style = textStyle, + color = innerButtonTextColor, + ) + } + } + + if (isSaved) { + Image( + modifier = Modifier + .clip(CircleShape) + .susuClickable(onClick = onClickCloseIcon), + painter = painterResource(id = R.drawable.ic_close), + contentDescription = "", + ) + } +} + +@Preview(showBackground = true, backgroundColor = 0x000000) +@Composable +fun TextFieldButtonPreview() { + SusuTheme { + var text by remember { + mutableStateOf("Button") + } + + var isSaved by remember { + mutableStateOf(false) + } + + Column( + verticalArrangement = Arrangement.spacedBy(10.dp), + ) { + SusuTextFieldWrapContentButton( + text = text, + onTextChange = { text = it }, + placeholder = "", + maxLines = 1, + minLines = 1, + style = LargeTextFieldButtonStyle.height46, + onClickButton = { isSaved = isSaved.not() }, + onClickClearIcon = { text = "" }, + isSaved = isSaved, + ) + + SusuTextFieldFillMaxButton( + text = text, + onTextChange = { text = it }, + placeholder = "Button", + maxLines = 1, + minLines = 1, + style = LargeTextFieldButtonStyle.height46, + onClickButton = { isSaved = isSaved.not() }, + onClickClearIcon = { text = "" }, + isSaved = isSaved.not(), + ) + + SusuTextFieldWrapContentButton( + text = text, + onTextChange = { text = it }, + placeholder = "Button", + maxLines = 1, + minLines = 1, + color = TextFieldButtonColor.Orange, + style = LargeTextFieldButtonStyle.height46, + onClickButton = { isSaved = isSaved.not() }, + onClickClearIcon = { text = "" }, + isSaved = isSaved, + ) + + SusuTextFieldFillMaxButton( + text = text, + onTextChange = { text = it }, + placeholder = "Button", + maxLines = 1, + minLines = 1, + color = TextFieldButtonColor.Orange, + style = LargeTextFieldButtonStyle.height46, + onClickButton = { isSaved = isSaved.not() }, + onClickClearIcon = { text = "" }, + isSaved = isSaved.not(), + ) + } + } +} diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/TextFieldButtonColor.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/TextFieldButtonColor.kt new file mode 100644 index 00000000..0426a23f --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/TextFieldButtonColor.kt @@ -0,0 +1,49 @@ +package com.susu.core.designsystem.component.textfieldbutton + +import androidx.compose.ui.graphics.Color +import com.susu.core.designsystem.theme.Gray10 +import com.susu.core.designsystem.theme.Gray100 +import com.susu.core.designsystem.theme.Gray30 +import com.susu.core.designsystem.theme.Orange60 + +enum class TextFieldButtonColor( + val buttonColor: TextButtonInnerButtonColor, + val savedBackgroundColor: Color, + val editBackgroundColor: Color, + val editTextColor: Color, + val savedTextColor: Color, + val placeholderColor: Color, +) { + Black( + buttonColor = TextButtonInnerButtonColor.Black, + savedBackgroundColor = Gray10, + editBackgroundColor = Gray10, + editTextColor = Gray100, + savedTextColor = Gray100, + placeholderColor = Gray30, + ), + Orange( + buttonColor = TextButtonInnerButtonColor.Black, + savedBackgroundColor = Orange60, + editBackgroundColor = Gray10, + editTextColor = Gray100, + savedTextColor = Gray10, + placeholderColor = Gray30, + ), +} + +enum class TextButtonInnerButtonColor( + val activeContentColor: Color, + val inactiveContentColor: Color, + val activeBackgroundColor: Color, + val inactiveBackgroundColor: Color, + val rippleColor: Color, +) { + Black( + activeContentColor = Gray10, + inactiveContentColor = Gray10, + activeBackgroundColor = Gray100, + inactiveBackgroundColor = Gray30, + rippleColor = Gray10, + ), +} diff --git a/core/designsystem/src/main/res/drawable/ic_clear.xml b/core/designsystem/src/main/res/drawable/ic_clear.xml new file mode 100644 index 00000000..fef3a2ae --- /dev/null +++ b/core/designsystem/src/main/res/drawable/ic_clear.xml @@ -0,0 +1,12 @@ + + + + diff --git a/core/designsystem/src/main/res/drawable/ic_close.xml b/core/designsystem/src/main/res/drawable/ic_close.xml new file mode 100644 index 00000000..bb21304f --- /dev/null +++ b/core/designsystem/src/main/res/drawable/ic_close.xml @@ -0,0 +1,9 @@ + + + diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml new file mode 100644 index 00000000..a0872b86 --- /dev/null +++ b/core/designsystem/src/main/res/values/strings.xml @@ -0,0 +1,5 @@ + + + 편집 + 저장 + diff --git a/core/ui/src/main/java/com/susu/core/ui/extension/Modifier.kt b/core/ui/src/main/java/com/susu/core/ui/extension/Modifier.kt index d0de0994..90e1690a 100644 --- a/core/ui/src/main/java/com/susu/core/ui/extension/Modifier.kt +++ b/core/ui/src/main/java/com/susu/core/ui/extension/Modifier.kt @@ -7,7 +7,12 @@ import androidx.compose.material.ripple.rememberRipple import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.composed +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color +import androidx.compose.ui.input.nestedscroll.NestedScrollConnection +import androidx.compose.ui.input.nestedscroll.NestedScrollSource +import androidx.compose.ui.input.nestedscroll.nestedScroll +import androidx.compose.ui.unit.Velocity import com.susu.core.ui.util.MultipleEventsCutter import com.susu.core.ui.util.get @@ -56,3 +61,12 @@ fun Modifier.susuClickable( ) } } + +// https://stackoverflow.com/questions/73309395/strange-scroll-in-the-basictextfield-with-intrinsicsize-min +fun Modifier.disabledHorizontalPointerInputScroll(disabled: Boolean = true) = + if (disabled) this.nestedScroll(HorizontalScrollConsumer) else this + +private val HorizontalScrollConsumer = object : NestedScrollConnection { + override fun onPreScroll(available: Offset, source: NestedScrollSource) = available.copy(y = 0f) + override suspend fun onPreFling(available: Velocity) = available.copy(y = 0f) +} From e48ce096f37b106b250b22e186b15b830983cd0f Mon Sep 17 00:00:00 2001 From: jinukeu Date: Sat, 30 Dec 2023 18:54:21 +0900 Subject: [PATCH 04/24] chore: ktlint format --- .../designsystem/component/button/SusuFilledButton.kt | 8 +++++--- .../designsystem/component/button/SusuGhostButton.kt | 9 +++++---- .../designsystem/component/button/SusuLinedButton.kt | 6 ++++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt index 3a14c73a..25028202 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt @@ -183,16 +183,18 @@ private fun SusuFilledButtonPreview( Icon( modifier = Modifier.size(16.dp), painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "", tint = color.activeContentColor, + contentDescription = "", + tint = color.activeContentColor, ) }, rightIcon = { Icon( modifier = Modifier.size(16.dp), painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "", tint = color.activeContentColor, + contentDescription = "", + tint = color.activeContentColor, ) - } + }, ) SusuFilledButton( diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt index d7cf391f..02f3bcf1 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt @@ -1,6 +1,5 @@ package com.susu.core.designsystem.component.button -import androidx.annotation.DrawableRes import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -184,16 +183,18 @@ private fun SusuGhostButtonPreview( Icon( modifier = Modifier.size(16.dp), painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "", tint = color.activeContentColor, + contentDescription = "", + tint = color.activeContentColor, ) }, rightIcon = { Icon( modifier = Modifier.size(16.dp), painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "", tint = color.activeContentColor, + contentDescription = "", + tint = color.activeContentColor, ) - } + }, ) SusuGhostButton( diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt index 34858875..8bf8ef3f 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt @@ -192,14 +192,16 @@ private fun SusuLinedButtonPreview( Icon( modifier = Modifier.size(16.dp), painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "", tint = color.activeContentColor, + contentDescription = "", + tint = color.activeContentColor, ) }, rightIcon = { Icon( modifier = Modifier.size(16.dp), painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "", tint = color.activeContentColor, + contentDescription = "", + tint = color.activeContentColor, ) }, ) From 84c52e0017d2f50986c437560e1eb256f83317b9 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:45:23 +0900 Subject: [PATCH 05/24] =?UTF-8?q?feat:=20BasicAppBar=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/BasicAppBar.kt | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt new file mode 100644 index 00000000..34c295dd --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt @@ -0,0 +1,90 @@ +package com.susu.core.designsystem.component.appbar + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Icon +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.R +import com.susu.core.designsystem.theme.Gray10 +import com.susu.core.designsystem.theme.Gray100 +import com.susu.core.ui.extension.susuClickable + +enum class LeftIconType { + LOGO, BACKBUTTON +} + +@Composable +fun BasicAppBar( + modifier: Modifier = Modifier, + containerHeight: Dp, + leftIconType: LeftIconType, + leftIconPadding: Dp = 10.dp, + @DrawableRes leftIcon: Int, + title: @Composable RowScope.() -> Unit, + actions: @Composable RowScope.() -> Unit = {}, + onClickBackButton: () -> Unit = {}, +) { + Box( + modifier = modifier + .fillMaxWidth() + .height(containerHeight) + .background(Gray10), + contentAlignment = Alignment.Center, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + when (leftIconType) { + LeftIconType.LOGO -> { + Image( + painter = painterResource(id = leftIcon), + contentDescription = stringResource(R.string.app_bar_app_logo), + modifier = modifier.padding(leftIconPadding), + ) + } + LeftIconType.BACKBUTTON -> { + Box( + modifier = modifier + .size(containerHeight) + .susuClickable( + rippleEnabled = false, + onClick = onClickBackButton, + ), + ) { + Icon( + painter = painterResource(id = leftIcon), + contentDescription = stringResource(R.string.app_bar_back_button), + tint = Gray100, + modifier = modifier.align(Alignment.Center), + ) + } + } + } + + Spacer(modifier = modifier.weight(1f)) + + Row(content = actions) + } + Row( + modifier = modifier.fillMaxWidth(), + content = title, + horizontalArrangement = Arrangement.Center, + ) + } +} From e4f232a43bd723e43c4e39411ac91bf72573b02c Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:47:36 +0900 Subject: [PATCH 06/24] =?UTF-8?q?feat:=20BasicAppBar=EC=97=90=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=EB=90=9C=20string=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/designsystem/src/main/res/values/strings.xml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 core/designsystem/src/main/res/values/strings.xml diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml new file mode 100644 index 00000000..87468250 --- /dev/null +++ b/core/designsystem/src/main/res/values/strings.xml @@ -0,0 +1,6 @@ + + + + Susu 앱 로고 + 뒤로가기 + From 9bacd4905f1bcfc7247824d252c95dcf8020e27a Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:48:45 +0900 Subject: [PATCH 07/24] =?UTF-8?q?feat:=20SusuDefaultAppBar=20=EC=84=B8?= =?UTF-8?q?=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuDefaultAppBar.kt | 250 ++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt new file mode 100644 index 00000000..1053d9e3 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -0,0 +1,250 @@ +package com.susu.core.designsystem.component.appbar + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +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.unit.dp +import com.susu.core.designsystem.R +import com.susu.core.designsystem.theme.Gray100 +import com.susu.core.designsystem.theme.Gray50 +import com.susu.core.designsystem.theme.SusuTheme +import com.susu.core.ui.extension.susuClickable + +enum class RightActionsType { + NONE, ICON, TEXT, +} + +@Composable +fun SusuDefaultAppBar( + modifier: Modifier = Modifier, + containerHeight: Dp = 44.dp, + leftIconType: LeftIconType, + @DrawableRes leftIcon: Int, + title: String? = null, + titleColor: Color = Gray100, + titleStyle: TextStyle = SusuTheme.typography.title_xs, + rightActionsType: RightActionsType = RightActionsType.NONE, + @DrawableRes rightStartIcon: Int? = null, + rightStartIconContentDescription: String? = null, + @DrawableRes rightEndIcon: Int? = null, + rightEndIconContentDescription: String? = null, + rightStartText: String? = null, + rightEndText: String? = null, + rightTextStyle: TextStyle = SusuTheme.typography.title_xxs, + rightStartItemColor: Color = Gray100, + rightEndItemColor: Color = Gray100, + rightTextPadding: Dp = 16.dp, + onClickBackButton: () -> Unit = {}, + onClickRightStartButton: () -> Unit = {}, + onClickRightEndButton: () -> Unit = {}, +) { + BasicAppBar( + modifier = modifier, + containerHeight = containerHeight, + leftIconType = leftIconType, + leftIcon = leftIcon, + title = { + title?.let { + Text( + text = title, + style = titleStyle, + color = titleColor, + textAlign = TextAlign.Center, + ) + } + }, + actions = { + when (rightActionsType) { + RightActionsType.ICON -> { + Box( + modifier = modifier + .size(containerHeight) + .susuClickable( + rippleEnabled = false, + onClick = onClickRightStartButton, + ), + contentAlignment = Alignment.Center + ) { + rightStartIcon?.let { + Icon( + painter = painterResource(id = it), + contentDescription = rightStartIconContentDescription, + tint = rightStartItemColor, + ) + } + } + Box( + modifier = modifier + .size(containerHeight) + .susuClickable( + rippleEnabled = false, + onClick = onClickRightEndButton, + ), + contentAlignment = Alignment.Center + ) { + rightEndIcon?.let { + Icon( + painter = painterResource(id = it), + contentDescription = rightEndIconContentDescription, + tint = rightEndItemColor, + ) + } + } + } + RightActionsType.TEXT -> { + rightStartText?.let { + Text( + text = rightStartText, + style = rightTextStyle, + color = rightStartItemColor, + modifier = modifier + .padding(end = rightTextPadding) + .susuClickable( + rippleEnabled = false, + onClick = onClickRightStartButton + ) + ) + } + rightEndText?.let { + Text( + text = rightEndText, + style = rightTextStyle, + color = rightEndItemColor, + modifier = modifier + .padding(end = rightTextPadding) + .susuClickable( + rippleEnabled = false, + onClick = onClickRightEndButton + ) + ) + } + } + RightActionsType.NONE -> {} + } + }, + onClickBackButton = { onClickBackButton }, + ) +} + +@Preview(showBackground = true) +@Composable +fun SusuDefaultAppBarPreview() { + SusuTheme { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + // 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 + SusuDefaultAppBar( + leftIconType = LeftIconType.LOGO, + leftIcon = R.drawable.ic_received_filled, + title = "타이틀", + rightActionsType = RightActionsType.ICON, + rightStartIcon = R.drawable.ic_community_filled, + rightStartIconContentDescription = "검색", + rightEndIcon = R.drawable.ic_statistics_filled, + rightEndIconContentDescription = "알림", + onClickRightStartButton = { /*TODO*/ }, + onClickRightEndButton = { /*TODO*/ } + ) + + // 왼쪽 로고 + 오른쪽 아이콘 2개 + SusuDefaultAppBar( + leftIconType = LeftIconType.LOGO, + leftIcon = R.drawable.ic_received_filled, + rightActionsType = RightActionsType.ICON, + rightStartIcon = R.drawable.ic_community_filled, + rightStartIconContentDescription = "검색", + rightEndIcon = R.drawable.ic_statistics_filled, + rightEndIconContentDescription = "알림", + onClickRightStartButton = { /*TODO*/ }, + onClickRightEndButton = { /*TODO*/ } + ) + + // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 2개 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + title = "타이틀", + rightActionsType = RightActionsType.ICON, + rightStartIcon = R.drawable.ic_community_filled, + rightStartIconContentDescription = "검색", + rightEndIcon = R.drawable.ic_statistics_filled, + rightEndIconContentDescription = "알림", + onClickRightStartButton = { /*TODO*/ }, + onClickRightEndButton = { /*TODO*/ } + ) + + // 왼쪽 뒤로가기 + 타이틀 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + title = "타이틀", + ) + + // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 1개 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + rightActionsType = RightActionsType.ICON, + title = "타이틀", + rightEndIcon = R.drawable.ic_statistics_filled, + rightEndItemColor = Gray50 + ) + + // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 1개 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + rightActionsType = RightActionsType.TEXT, + title = "타이틀", + rightEndText = "등록", + ) + + // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + title = "타이틀", + rightActionsType = RightActionsType.TEXT, + rightStartText = "편집", + rightEndText = "삭제" + ) + + // 왼쪽 뒤로가기 + 오른쪽 텍스트 2개 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + rightActionsType = RightActionsType.TEXT, + rightStartText = "편집", + rightEndText = "삭제" + ) + + // 왼쪽 뒤로가기 + SusuDefaultAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + onClickBackButton = { /*TODO*/ }, + ) + } + } +} From 7b15d0ae75718b2b87b77d4dd13ae66765e45465 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:51:07 +0900 Subject: [PATCH 08/24] =?UTF-8?q?feat:=20SusuProgressAppBar=20=EC=84=B8?= =?UTF-8?q?=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuProgressAppBar.kt | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt new file mode 100644 index 00000000..660251a4 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -0,0 +1,70 @@ +package com.susu.core.designsystem.component.appbar + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.size +import androidx.compose.material3.LinearProgressIndicator +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.StrokeCap +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.R +import com.susu.core.designsystem.theme.Orange30 +import com.susu.core.designsystem.theme.SusuTheme + +@Composable +fun SusuProgressBarAppBar( + modifier: Modifier = Modifier, + containerHeight: Dp = 44.dp, + leftIconType: LeftIconType, + @DrawableRes leftIcon: Int, + currentPercentage: Float, + progressBarColor: Color = SusuTheme.colorScheme.primary, + progressTrackColor: Color = Orange30, + progressBarWidth: Dp = 72.dp, + progressBarHeight: Dp = 4.dp, + progressBarStrokeCap: StrokeCap = StrokeCap.Round, + onClickBackButton: () -> Unit = {}, +) { + BasicAppBar( + containerHeight = containerHeight, + leftIconType = leftIconType, + leftIcon = leftIcon, + title = { + LinearProgressIndicator( + progress = { + currentPercentage + }, + color = progressBarColor, + trackColor = progressTrackColor, + modifier = modifier + .size( + width = progressBarWidth, + height = progressBarHeight, + ), + strokeCap = progressBarStrokeCap + ) + }, + onClickBackButton = { onClickBackButton }, + ) +} + +@Preview(showBackground = true) +@Composable +fun SusuProgressAppBarPreview() { + SusuTheme { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + SusuProgressBarAppBar( + leftIconType = LeftIconType.BACKBUTTON, + leftIcon = R.drawable.ic_arrow_left, + currentPercentage = 0.5f + ) + } + } +} From 67ece75aef51ef296610a25a148906f89fd42088 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:53:08 +0900 Subject: [PATCH 09/24] =?UTF-8?q?feat:=20SusuProgressAppBar=20Preview=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=ED=99=95=EC=9D=B8=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuProgressAppBar.kt | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 660251a4..8688a1a2 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -1,11 +1,21 @@ package com.susu.core.designsystem.component.appbar import androidx.annotation.DrawableRes +import androidx.compose.animation.core.FastOutSlowInEasing +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.size +import androidx.compose.material3.Button import androidx.compose.material3.LinearProgressIndicator +import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.StrokeCap @@ -56,6 +66,15 @@ fun SusuProgressBarAppBar( @Preview(showBackground = true) @Composable fun SusuProgressAppBarPreview() { + val currentPage = 6 + val increasePercent = 1f / currentPage + var progress by remember { mutableStateOf(increasePercent) } + + val progressAnimation by animateFloatAsState( + targetValue = progress, + animationSpec = tween(durationMillis = 1000, easing = FastOutSlowInEasing), label = "" + ) + SusuTheme { Column( verticalArrangement = Arrangement.spacedBy(20.dp), @@ -63,8 +82,20 @@ fun SusuProgressAppBarPreview() { SusuProgressBarAppBar( leftIconType = LeftIconType.BACKBUTTON, leftIcon = R.drawable.ic_arrow_left, - currentPercentage = 0.5f + currentPercentage = progressAnimation ) + + Button( + onClick = { + progress += increasePercent + } + ) { + Text(text = "다음") + } + + LaunchedEffect(progress) { + progress = progress + } } } } From 4c2afa196d5ecb9c7ec9ddfc61b90ff285f018be Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:55:51 +0900 Subject: [PATCH 10/24] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/susu/core/designsystem/component/appbar/BasicAppBar.kt | 3 ++- .../core/designsystem/component/appbar/SusuProgressAppBar.kt | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt index 34c295dd..8e5f76fe 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt @@ -44,12 +44,13 @@ fun BasicAppBar( modifier = modifier .fillMaxWidth() .height(containerHeight) - .background(Gray10), + .background(Gray10), // TODO: 디자인 시스템에서는 투명, Preview에서 확인하기 위해 설정 (지울 예정) contentAlignment = Alignment.Center, ) { Row( verticalAlignment = Alignment.CenterVertically, ) { + // TODO: AppBar의 왼쪽 영역은 거의 고정이라 생각되어 Basic으로 뺌 (지울 예정) when (leftIconType) { LeftIconType.LOGO -> { Image( diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 8688a1a2..5f4b3dc5 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -35,7 +35,7 @@ fun SusuProgressBarAppBar( currentPercentage: Float, progressBarColor: Color = SusuTheme.colorScheme.primary, progressTrackColor: Color = Orange30, - progressBarWidth: Dp = 72.dp, + progressBarWidth: Dp = 72.dp, // TODO: 디자인시스템과 최종시안이 다름, 현재 확인 중 (지울 예정) progressBarHeight: Dp = 4.dp, progressBarStrokeCap: StrokeCap = StrokeCap.Round, onClickBackButton: () -> Unit = {}, @@ -66,6 +66,7 @@ fun SusuProgressBarAppBar( @Preview(showBackground = true) @Composable fun SusuProgressAppBarPreview() { + // TODO: 애니메이션 부분 + 버튼은 단순히 확인 용으로 추가함 (지울 예정) val currentPage = 6 val increasePercent = 1f / currentPage var progress by remember { mutableStateOf(increasePercent) } From 916c5edf2534a3a824cf2ebf60c8c94439d6f06f Mon Sep 17 00:00:00 2001 From: syb8200 Date: Sun, 31 Dec 2023 00:59:42 +0900 Subject: [PATCH 11/24] =?UTF-8?q?chore:=20ktlintFormat=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/BasicAppBar.kt | 1 + .../component/appbar/SusuDefaultAppBar.kt | 28 ++++++++++--------- .../component/appbar/SusuProgressAppBar.kt | 9 +++--- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt index 8e5f76fe..3352f9de 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt @@ -59,6 +59,7 @@ fun BasicAppBar( modifier = modifier.padding(leftIconPadding), ) } + LeftIconType.BACKBUTTON -> { Box( modifier = modifier diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt index 1053d9e3..a91a860a 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -77,7 +77,7 @@ fun SusuDefaultAppBar( rippleEnabled = false, onClick = onClickRightStartButton, ), - contentAlignment = Alignment.Center + contentAlignment = Alignment.Center, ) { rightStartIcon?.let { Icon( @@ -94,7 +94,7 @@ fun SusuDefaultAppBar( rippleEnabled = false, onClick = onClickRightEndButton, ), - contentAlignment = Alignment.Center + contentAlignment = Alignment.Center, ) { rightEndIcon?.let { Icon( @@ -105,6 +105,7 @@ fun SusuDefaultAppBar( } } } + RightActionsType.TEXT -> { rightStartText?.let { Text( @@ -115,8 +116,8 @@ fun SusuDefaultAppBar( .padding(end = rightTextPadding) .susuClickable( rippleEnabled = false, - onClick = onClickRightStartButton - ) + onClick = onClickRightStartButton, + ), ) } rightEndText?.let { @@ -128,11 +129,12 @@ fun SusuDefaultAppBar( .padding(end = rightTextPadding) .susuClickable( rippleEnabled = false, - onClick = onClickRightEndButton - ) + onClick = onClickRightEndButton, + ), ) } } + RightActionsType.NONE -> {} } }, @@ -145,7 +147,7 @@ fun SusuDefaultAppBar( fun SusuDefaultAppBarPreview() { SusuTheme { Column( - verticalArrangement = Arrangement.spacedBy(20.dp) + verticalArrangement = Arrangement.spacedBy(20.dp), ) { // 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 SusuDefaultAppBar( @@ -158,7 +160,7 @@ fun SusuDefaultAppBarPreview() { rightEndIcon = R.drawable.ic_statistics_filled, rightEndIconContentDescription = "알림", onClickRightStartButton = { /*TODO*/ }, - onClickRightEndButton = { /*TODO*/ } + onClickRightEndButton = { /*TODO*/ }, ) // 왼쪽 로고 + 오른쪽 아이콘 2개 @@ -171,7 +173,7 @@ fun SusuDefaultAppBarPreview() { rightEndIcon = R.drawable.ic_statistics_filled, rightEndIconContentDescription = "알림", onClickRightStartButton = { /*TODO*/ }, - onClickRightEndButton = { /*TODO*/ } + onClickRightEndButton = { /*TODO*/ }, ) // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 2개 @@ -186,7 +188,7 @@ fun SusuDefaultAppBarPreview() { rightEndIcon = R.drawable.ic_statistics_filled, rightEndIconContentDescription = "알림", onClickRightStartButton = { /*TODO*/ }, - onClickRightEndButton = { /*TODO*/ } + onClickRightEndButton = { /*TODO*/ }, ) // 왼쪽 뒤로가기 + 타이틀 @@ -205,7 +207,7 @@ fun SusuDefaultAppBarPreview() { rightActionsType = RightActionsType.ICON, title = "타이틀", rightEndIcon = R.drawable.ic_statistics_filled, - rightEndItemColor = Gray50 + rightEndItemColor = Gray50, ) // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 1개 @@ -226,7 +228,7 @@ fun SusuDefaultAppBarPreview() { title = "타이틀", rightActionsType = RightActionsType.TEXT, rightStartText = "편집", - rightEndText = "삭제" + rightEndText = "삭제", ) // 왼쪽 뒤로가기 + 오른쪽 텍스트 2개 @@ -236,7 +238,7 @@ fun SusuDefaultAppBarPreview() { onClickBackButton = { /*TODO*/ }, rightActionsType = RightActionsType.TEXT, rightStartText = "편집", - rightEndText = "삭제" + rightEndText = "삭제", ) // 왼쪽 뒤로가기 diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 5f4b3dc5..1b07ee90 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -56,7 +56,7 @@ fun SusuProgressBarAppBar( width = progressBarWidth, height = progressBarHeight, ), - strokeCap = progressBarStrokeCap + strokeCap = progressBarStrokeCap, ) }, onClickBackButton = { onClickBackButton }, @@ -73,7 +73,8 @@ fun SusuProgressAppBarPreview() { val progressAnimation by animateFloatAsState( targetValue = progress, - animationSpec = tween(durationMillis = 1000, easing = FastOutSlowInEasing), label = "" + animationSpec = tween(durationMillis = 1000, easing = FastOutSlowInEasing), + label = "", ) SusuTheme { @@ -83,13 +84,13 @@ fun SusuProgressAppBarPreview() { SusuProgressBarAppBar( leftIconType = LeftIconType.BACKBUTTON, leftIcon = R.drawable.ic_arrow_left, - currentPercentage = progressAnimation + currentPercentage = progressAnimation, ) Button( onClick = { progress += increasePercent - } + }, ) { Text(text = "다음") } From 7579697c707ff199496cae5082bba328c179f1df Mon Sep 17 00:00:00 2001 From: jinukeu Date: Sun, 31 Dec 2023 19:36:33 +0900 Subject: [PATCH 12/24] =?UTF-8?q?feat:=20TextFieldButton=20-=20maxLines,?= =?UTF-8?q?=20minLines,=20textOverflow,=20icon=20visible=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../textfieldbutton/SusuTextFieldButton.kt | 73 +++++++++++++++---- 1 file changed, 58 insertions(+), 15 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt index 9284c37d..75bbfc24 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt @@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.CircleShape @@ -17,6 +18,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -31,6 +33,7 @@ import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -50,12 +53,15 @@ fun SusuTextFieldFillMaxButton( placeholder: String = "", maxLines: Int = 1, minLines: Int = 1, + overflow: TextOverflow = TextOverflow.Clip, style: @Composable () -> TextFieldButtonStyle, color: TextFieldButtonColor = TextFieldButtonColor.Black, isSaved: Boolean = false, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + showCloseIcon: Boolean = true, + showClearIcon: Boolean = true, onClickClearIcon: () -> Unit = {}, onClickCloseIcon: () -> Unit = {}, onClickButton: () -> Unit = {}, @@ -109,6 +115,9 @@ fun SusuTextFieldFillMaxButton( color = textColor, style = textStyle, textAlign = TextAlign.Start, + overflow = overflow, + maxLines = maxLines, + minLines = minLines, ) } @@ -118,11 +127,16 @@ fun SusuTextFieldFillMaxButton( color = color.placeholderColor, style = textStyle, textAlign = TextAlign.Center, + overflow = overflow, + maxLines = maxLines, + minLines = minLines, ) } } InnerButtons( + showCloseIcon = showCloseIcon, + showClearIcon = showClearIcon, isSaved = isSaved, isActive = text.isNotEmpty(), color = color.buttonColor, @@ -146,12 +160,15 @@ fun SusuTextFieldWrapContentButton( placeholder: String = "", maxLines: Int = 1, minLines: Int = 1, + overflow: TextOverflow = TextOverflow.Clip, style: @Composable () -> TextFieldButtonStyle, color: TextFieldButtonColor = TextFieldButtonColor.Black, isSaved: Boolean = false, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + showCloseIcon: Boolean = true, + showClearIcon: Boolean = true, onClickClearIcon: () -> Unit = {}, onClickCloseIcon: () -> Unit = {}, onClickButton: () -> Unit = {}, @@ -208,7 +225,9 @@ fun SusuTextFieldWrapContentButton( text = text, color = textColor, style = textStyle, - textAlign = TextAlign.Center, + overflow = overflow, + maxLines = maxLines, + minLines = minLines, ) innerTextField() }, @@ -220,11 +239,16 @@ fun SusuTextFieldWrapContentButton( color = color.placeholderColor, style = textStyle, textAlign = TextAlign.Center, + overflow = overflow, + maxLines = maxLines, + minLines = minLines, ) } } InnerButtons( + showCloseIcon = showCloseIcon, + showClearIcon = showClearIcon, isSaved = isSaved, isActive = text.isNotEmpty(), color = color.buttonColor, @@ -243,6 +267,8 @@ private fun InnerButtons( shape: Shape = RoundedCornerShape(4.dp), isSaved: Boolean, isActive: Boolean, + showCloseIcon: Boolean = true, + showClearIcon: Boolean = true, color: TextButtonInnerButtonColor, buttonStyle: @Composable () -> InnerButtonStyle, onClickClearIcon: () -> Unit = {}, @@ -258,13 +284,17 @@ private fun InnerButtons( } if (isSaved.not()) { - Image( - modifier = Modifier - .clip(CircleShape) - .susuClickable(onClick = onClickClearIcon), - painter = painterResource(id = R.drawable.ic_clear), - contentDescription = "", - ) + Box(modifier = Modifier.size(24.dp)) { + if (showClearIcon) { + Image( + modifier = Modifier + .clip(CircleShape) + .susuClickable(onClick = onClickClearIcon), + painter = painterResource(id = R.drawable.ic_clear), + contentDescription = "", + ) + } + } } with(buttonStyle()) { @@ -287,7 +317,7 @@ private fun InnerButtons( } } - if (isSaved) { + if (isSaved && showCloseIcon) { Image( modifier = Modifier .clip(CircleShape) @@ -313,35 +343,43 @@ fun TextFieldButtonPreview() { Column( verticalArrangement = Arrangement.spacedBy(10.dp), ) { + Text(text = "텍스트 길이에 딱 맞는 너비 (wrap)") SusuTextFieldWrapContentButton( text = text, onTextChange = { text = it }, placeholder = "", - maxLines = 1, + maxLines = 2, minLines = 1, + showClearIcon = true, style = LargeTextFieldButtonStyle.height46, onClickButton = { isSaved = isSaved.not() }, onClickClearIcon = { text = "" }, isSaved = isSaved, ) + HorizontalDivider() + + Text(text = "최대 너비 (fillMaxWidth)") SusuTextFieldFillMaxButton( text = text, onTextChange = { text = it }, placeholder = "Button", - maxLines = 1, + maxLines = 2, minLines = 1, style = LargeTextFieldButtonStyle.height46, onClickButton = { isSaved = isSaved.not() }, onClickClearIcon = { text = "" }, - isSaved = isSaved.not(), + isSaved = isSaved, ) + HorizontalDivider() + + Text(text = "텍스트가 없는 경우 : placeHolder 길이에 딱 맞는 너비\n텍스트가 있는 경우 : 텍스트가 차지하는 너비") SusuTextFieldWrapContentButton( text = text, onTextChange = { text = it }, placeholder = "Button", - maxLines = 1, + maxLines = 2, minLines = 1, color = TextFieldButtonColor.Orange, style = LargeTextFieldButtonStyle.height46, @@ -350,17 +388,22 @@ fun TextFieldButtonPreview() { isSaved = isSaved, ) + HorizontalDivider() + + Text(text = "고정된 너비 : 200dp") SusuTextFieldFillMaxButton( + modifier = Modifier.width(200.dp), text = text, + overflow = TextOverflow.Ellipsis, onTextChange = { text = it }, placeholder = "Button", - maxLines = 1, + maxLines = 2, minLines = 1, color = TextFieldButtonColor.Orange, style = LargeTextFieldButtonStyle.height46, onClickButton = { isSaved = isSaved.not() }, onClickClearIcon = { text = "" }, - isSaved = isSaved.not(), + isSaved = isSaved, ) } } From ca369a3d757e7702813b1d8f198b4419ca5f794a Mon Sep 17 00:00:00 2001 From: jinukeu Date: Sun, 31 Dec 2023 19:42:46 +0900 Subject: [PATCH 13/24] =?UTF-8?q?chore:=20TextAlign=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/textfieldbutton/SusuTextFieldButton.kt | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt index 75bbfc24..0690f835 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt @@ -114,7 +114,7 @@ fun SusuTextFieldFillMaxButton( text = text, color = textColor, style = textStyle, - textAlign = TextAlign.Start, + textAlign = TextAlign.Center, overflow = overflow, maxLines = maxLines, minLines = minLines, @@ -348,7 +348,7 @@ fun TextFieldButtonPreview() { text = text, onTextChange = { text = it }, placeholder = "", - maxLines = 2, + maxLines = 1, minLines = 1, showClearIcon = true, style = LargeTextFieldButtonStyle.height46, @@ -364,7 +364,7 @@ fun TextFieldButtonPreview() { text = text, onTextChange = { text = it }, placeholder = "Button", - maxLines = 2, + maxLines = 1, minLines = 1, style = LargeTextFieldButtonStyle.height46, onClickButton = { isSaved = isSaved.not() }, @@ -379,7 +379,7 @@ fun TextFieldButtonPreview() { text = text, onTextChange = { text = it }, placeholder = "Button", - maxLines = 2, + maxLines = 1, minLines = 1, color = TextFieldButtonColor.Orange, style = LargeTextFieldButtonStyle.height46, @@ -397,7 +397,7 @@ fun TextFieldButtonPreview() { overflow = TextOverflow.Ellipsis, onTextChange = { text = it }, placeholder = "Button", - maxLines = 2, + maxLines = 1, minLines = 1, color = TextFieldButtonColor.Orange, style = LargeTextFieldButtonStyle.height46, From f3bab736678dc8c37617c54a433b0a993fcf78b3 Mon Sep 17 00:00:00 2001 From: jinukeu Date: Sun, 31 Dec 2023 20:05:22 +0900 Subject: [PATCH 14/24] =?UTF-8?q?feat:=20TextFieldButton=20-=20Icon=20size?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../textfieldbutton/SusuTextFieldButton.kt | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt index 0690f835..a9fb2336 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt @@ -35,10 +35,12 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R import com.susu.core.designsystem.component.textfieldbutton.style.InnerButtonStyle import com.susu.core.designsystem.component.textfieldbutton.style.LargeTextFieldButtonStyle +import com.susu.core.designsystem.component.textfieldbutton.style.SmallTextFieldButtonStyle import com.susu.core.designsystem.component.textfieldbutton.style.TextFieldButtonStyle import com.susu.core.designsystem.theme.SusuTheme import com.susu.core.ui.extension.disabledHorizontalPointerInputScroll @@ -141,6 +143,8 @@ fun SusuTextFieldFillMaxButton( isActive = text.isNotEmpty(), color = color.buttonColor, buttonStyle = innerButtonStyle, + clearIconSize = clearIconSize, + closeIconSize = closeIconSize, onClickClearIcon = onClickClearIcon, onClickCloseIcon = onClickCloseIcon, onClickButton = onClickButton, @@ -253,6 +257,8 @@ fun SusuTextFieldWrapContentButton( isActive = text.isNotEmpty(), color = color.buttonColor, buttonStyle = innerButtonStyle, + clearIconSize = clearIconSize, + closeIconSize = closeIconSize, onClickClearIcon = onClickClearIcon, onClickCloseIcon = onClickCloseIcon, onClickButton = onClickButton, @@ -270,6 +276,8 @@ private fun InnerButtons( showCloseIcon: Boolean = true, showClearIcon: Boolean = true, color: TextButtonInnerButtonColor, + clearIconSize: Dp = 0.dp, + closeIconSize: Dp = 0.dp, buttonStyle: @Composable () -> InnerButtonStyle, onClickClearIcon: () -> Unit = {}, onClickCloseIcon: () -> Unit = {}, @@ -284,11 +292,12 @@ private fun InnerButtons( } if (isSaved.not()) { - Box(modifier = Modifier.size(24.dp)) { + Box(modifier = Modifier.size(clearIconSize)) { if (showClearIcon) { Image( modifier = Modifier .clip(CircleShape) + .size(clearIconSize) .susuClickable(onClick = onClickClearIcon), painter = painterResource(id = R.drawable.ic_clear), contentDescription = "", @@ -297,6 +306,10 @@ private fun InnerButtons( } } + if (isSaved && showCloseIcon.not()) { + Box(modifier = Modifier.size(closeIconSize)) + } + with(buttonStyle()) { Box( modifier = modifier @@ -321,6 +334,7 @@ private fun InnerButtons( Image( modifier = Modifier .clip(CircleShape) + .size(closeIconSize) .susuClickable(onClick = onClickCloseIcon), painter = painterResource(id = R.drawable.ic_close), contentDescription = "", @@ -381,6 +395,8 @@ fun TextFieldButtonPreview() { placeholder = "Button", maxLines = 1, minLines = 1, + showClearIcon = false, + showCloseIcon = false, color = TextFieldButtonColor.Orange, style = LargeTextFieldButtonStyle.height46, onClickButton = { isSaved = isSaved.not() }, @@ -400,7 +416,7 @@ fun TextFieldButtonPreview() { maxLines = 1, minLines = 1, color = TextFieldButtonColor.Orange, - style = LargeTextFieldButtonStyle.height46, + style = SmallTextFieldButtonStyle.height32, onClickButton = { isSaved = isSaved.not() }, onClickClearIcon = { text = "" }, isSaved = isSaved, From bc43d488e42cb122375f5d466d1df94c18abcd56 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 18:26:25 +0900 Subject: [PATCH 15/24] =?UTF-8?q?refactor:=20BasicAppBar=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/BasicAppBar.kt | 71 +++---------------- 1 file changed, 8 insertions(+), 63 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt index 3352f9de..85d81de8 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt @@ -1,92 +1,37 @@ package com.susu.core.designsystem.component.appbar -import androidx.annotation.DrawableRes -import androidx.compose.foundation.Image -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.material3.Icon import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import com.susu.core.designsystem.R -import com.susu.core.designsystem.theme.Gray10 -import com.susu.core.designsystem.theme.Gray100 -import com.susu.core.ui.extension.susuClickable - -enum class LeftIconType { - LOGO, BACKBUTTON -} @Composable fun BasicAppBar( modifier: Modifier = Modifier, - containerHeight: Dp, - leftIconType: LeftIconType, - leftIconPadding: Dp = 10.dp, - @DrawableRes leftIcon: Int, - title: @Composable RowScope.() -> Unit, - actions: @Composable RowScope.() -> Unit = {}, - onClickBackButton: () -> Unit = {}, + containerHeight: Dp = 44.dp, + leftIcon: @Composable () -> Unit, + title: @Composable () -> Unit, + actions: @Composable () -> Unit = {}, ) { Box( modifier = modifier .fillMaxWidth() - .height(containerHeight) - .background(Gray10), // TODO: 디자인 시스템에서는 투명, Preview에서 확인하기 위해 설정 (지울 예정) + .height(containerHeight), contentAlignment = Alignment.Center, ) { Row( verticalAlignment = Alignment.CenterVertically, ) { - // TODO: AppBar의 왼쪽 영역은 거의 고정이라 생각되어 Basic으로 뺌 (지울 예정) - when (leftIconType) { - LeftIconType.LOGO -> { - Image( - painter = painterResource(id = leftIcon), - contentDescription = stringResource(R.string.app_bar_app_logo), - modifier = modifier.padding(leftIconPadding), - ) - } - - LeftIconType.BACKBUTTON -> { - Box( - modifier = modifier - .size(containerHeight) - .susuClickable( - rippleEnabled = false, - onClick = onClickBackButton, - ), - ) { - Icon( - painter = painterResource(id = leftIcon), - contentDescription = stringResource(R.string.app_bar_back_button), - tint = Gray100, - modifier = modifier.align(Alignment.Center), - ) - } - } - } - + leftIcon() Spacer(modifier = modifier.weight(1f)) - - Row(content = actions) + actions() } - Row( - modifier = modifier.fillMaxWidth(), - content = title, - horizontalArrangement = Arrangement.Center, - ) + title() } } From c9d643d4b59b5f7603912cb935f89ebe1ee7609b Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 18:27:18 +0900 Subject: [PATCH 16/24] =?UTF-8?q?refactor:=20SusuDefaultAppBar=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuDefaultAppBar.kt | 327 +++++++----------- 1 file changed, 127 insertions(+), 200 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt index a91a860a..d3c6e73c 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -1,252 +1,179 @@ package com.susu.core.designsystem.component.appbar -import androidx.annotation.DrawableRes +import android.util.Log +import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource -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.unit.dp import com.susu.core.designsystem.R import com.susu.core.designsystem.theme.Gray100 -import com.susu.core.designsystem.theme.Gray50 import com.susu.core.designsystem.theme.SusuTheme import com.susu.core.ui.extension.susuClickable -enum class RightActionsType { - NONE, ICON, TEXT, -} - @Composable fun SusuDefaultAppBar( modifier: Modifier = Modifier, - containerHeight: Dp = 44.dp, - leftIconType: LeftIconType, - @DrawableRes leftIcon: Int, + leftIcon: @Composable () -> Unit, title: String? = null, - titleColor: Color = Gray100, - titleStyle: TextStyle = SusuTheme.typography.title_xs, - rightActionsType: RightActionsType = RightActionsType.NONE, - @DrawableRes rightStartIcon: Int? = null, - rightStartIconContentDescription: String? = null, - @DrawableRes rightEndIcon: Int? = null, - rightEndIconContentDescription: String? = null, - rightStartText: String? = null, - rightEndText: String? = null, - rightTextStyle: TextStyle = SusuTheme.typography.title_xxs, - rightStartItemColor: Color = Gray100, - rightEndItemColor: Color = Gray100, - rightTextPadding: Dp = 16.dp, - onClickBackButton: () -> Unit = {}, - onClickRightStartButton: () -> Unit = {}, - onClickRightEndButton: () -> Unit = {}, + actions: @Composable () -> Unit = {}, ) { BasicAppBar( modifier = modifier, - containerHeight = containerHeight, - leftIconType = leftIconType, leftIcon = leftIcon, title = { title?.let { Text( text = title, - style = titleStyle, - color = titleColor, + style = SusuTheme.typography.title_xs, + color = Gray100, textAlign = TextAlign.Center, ) } }, - actions = { - when (rightActionsType) { - RightActionsType.ICON -> { - Box( - modifier = modifier - .size(containerHeight) - .susuClickable( - rippleEnabled = false, - onClick = onClickRightStartButton, - ), - contentAlignment = Alignment.Center, - ) { - rightStartIcon?.let { - Icon( - painter = painterResource(id = it), - contentDescription = rightStartIconContentDescription, - tint = rightStartItemColor, - ) - } - } - Box( - modifier = modifier - .size(containerHeight) - .susuClickable( - rippleEnabled = false, - onClick = onClickRightEndButton, - ), - contentAlignment = Alignment.Center, - ) { - rightEndIcon?.let { - Icon( - painter = painterResource(id = it), - contentDescription = rightEndIconContentDescription, - tint = rightEndItemColor, - ) - } - } - } - - RightActionsType.TEXT -> { - rightStartText?.let { - Text( - text = rightStartText, - style = rightTextStyle, - color = rightStartItemColor, - modifier = modifier - .padding(end = rightTextPadding) - .susuClickable( - rippleEnabled = false, - onClick = onClickRightStartButton, - ), - ) - } - rightEndText?.let { - Text( - text = rightEndText, - style = rightTextStyle, - color = rightEndItemColor, - modifier = modifier - .padding(end = rightTextPadding) - .susuClickable( - rippleEnabled = false, - onClick = onClickRightEndButton, - ), - ) - } - } - - RightActionsType.NONE -> {} - } - }, - onClickBackButton = { onClickBackButton }, + actions = actions, ) } -@Preview(showBackground = true) +/** + * SusuDefaultAppBar의 경우의 수 + * 1. 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 + * 2. 왼쪽 로고 + 오른쪽 아이콘 2개 + * 3. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 2개 + * 4. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 1개 + * 5. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 + * 6. 왼쪽 뒤로가기 + 타이틀 + 오른족 텍스트 1개 + * 7. 왼쪽 뒤로가기 + 타이틀 + * 8. 왼쪽 뒤로가기 + 오른쪽 텍스트 2개 + * 9. 왼쪽 뒤로가기 + * */ + +@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) @Composable fun SusuDefaultAppBarPreview() { SusuTheme { Column( verticalArrangement = Arrangement.spacedBy(20.dp), ) { - // 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 - SusuDefaultAppBar( - leftIconType = LeftIconType.LOGO, - leftIcon = R.drawable.ic_received_filled, - title = "타이틀", - rightActionsType = RightActionsType.ICON, - rightStartIcon = R.drawable.ic_community_filled, - rightStartIconContentDescription = "검색", - rightEndIcon = R.drawable.ic_statistics_filled, - rightEndIconContentDescription = "알림", - onClickRightStartButton = { /*TODO*/ }, - onClickRightEndButton = { /*TODO*/ }, - ) + // 1. 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 + LogoWithTwoIconsPreview() - // 왼쪽 로고 + 오른쪽 아이콘 2개 - SusuDefaultAppBar( - leftIconType = LeftIconType.LOGO, - leftIcon = R.drawable.ic_received_filled, - rightActionsType = RightActionsType.ICON, - rightStartIcon = R.drawable.ic_community_filled, - rightStartIconContentDescription = "검색", - rightEndIcon = R.drawable.ic_statistics_filled, - rightEndIconContentDescription = "알림", - onClickRightStartButton = { /*TODO*/ }, - onClickRightEndButton = { /*TODO*/ }, - ) - - // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 2개 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, - title = "타이틀", - rightActionsType = RightActionsType.ICON, - rightStartIcon = R.drawable.ic_community_filled, - rightStartIconContentDescription = "검색", - rightEndIcon = R.drawable.ic_statistics_filled, - rightEndIconContentDescription = "알림", - onClickRightStartButton = { /*TODO*/ }, - onClickRightEndButton = { /*TODO*/ }, - ) - - // 왼쪽 뒤로가기 + 타이틀 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, - title = "타이틀", - ) - - // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 1개 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, - rightActionsType = RightActionsType.ICON, - title = "타이틀", - rightEndIcon = R.drawable.ic_statistics_filled, - rightEndItemColor = Gray50, - ) - - // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 1개 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, - rightActionsType = RightActionsType.TEXT, - title = "타이틀", - rightEndText = "등록", - ) + // 5. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 + BackBtnWithTwoTextPreview() + } + } +} - // 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, - title = "타이틀", - rightActionsType = RightActionsType.TEXT, - rightStartText = "편집", - rightEndText = "삭제", +@Composable +private fun LogoWithTwoIconsPreview( + modifier: Modifier = Modifier, + clickPadding: Dp = 10.dp, +) { + SusuDefaultAppBar( + leftIcon = { + Image( + painter = painterResource(id = R.drawable.ic_received_filled), + contentDescription = "로고", + modifier = modifier.padding(clickPadding), ) + }, + title = "타이틀", + actions = { + Box( + modifier = modifier + .susuClickable( + rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 + onClick = { + Log.d("확인", "오른쪽 버튼1 클릭") + }, + ) + .padding(clickPadding), + ) { + Icon( + painter = painterResource(id = R.drawable.ic_community_filled), + contentDescription = null, + ) + } + Box( + modifier = modifier + .susuClickable( + rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 + onClick = { + Log.d("확인", "오른쪽 버튼2 클릭") + }, + ) + .padding(clickPadding), + ) { + Icon( + painter = painterResource(id = R.drawable.ic_my_page_filled), + contentDescription = null, + ) + } + }, + ) +} - // 왼쪽 뒤로가기 + 오른쪽 텍스트 2개 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, - rightActionsType = RightActionsType.TEXT, - rightStartText = "편집", - rightEndText = "삭제", +@Composable +private fun BackBtnWithTwoTextPreview( + modifier: Modifier = Modifier, + clickPadding: Dp = 10.dp, + textPadding: Dp = 16.dp, +) { + SusuDefaultAppBar( + leftIcon = { + Box( + modifier = modifier + .susuClickable( + rippleEnabled = true, + onClick = { + Log.d("확인", "왼쪽 뒤로가기 클릭") + }, + ) + .padding(clickPadding), + ) { + Icon( + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "뒤로가기", + ) + } + }, + title = "타이틀", + actions = { + Text( + text = "편집", + style = SusuTheme.typography.title_xxs, + color = Gray100, + modifier = modifier + .padding(end = textPadding) + .susuClickable( + rippleEnabled = true, + onClick = { + Log.d("확인", "오른쪽 텍스트1 클릭") + }, + ), ) - - // 왼쪽 뒤로가기 - SusuDefaultAppBar( - leftIconType = LeftIconType.BACKBUTTON, - leftIcon = R.drawable.ic_arrow_left, - onClickBackButton = { /*TODO*/ }, + Text( + text = "삭제", + style = SusuTheme.typography.title_xxs, + color = Gray100, + modifier = modifier + .padding(end = textPadding) + .susuClickable( + rippleEnabled = true, + onClick = { + Log.d("확인", "오른쪽 텍스트2 클릭") + }, + ), ) - } - } + }, + ) } From 0f69482fd319faab20ddba73d11482323e879fc9 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 18:28:02 +0900 Subject: [PATCH 17/24] =?UTF-8?q?refactor:=20ProgressBarStyle=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/ProgressBarStyle.kt | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt new file mode 100644 index 00000000..91adc2c2 --- /dev/null +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt @@ -0,0 +1,24 @@ +package com.susu.core.designsystem.component.appbar + +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.StrokeCap +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.theme.Orange30 +import com.susu.core.designsystem.theme.Orange60 + +enum class ProgressBarStyle( + val progressBarColor: Color, + val progressBarTrackColor: Color, + val progressBarWidth: Dp, + val progressBarHeight: Dp, + val progressBarStrokeCap: StrokeCap, +) { + SusuProgressBar( + progressBarColor = Orange60, + progressBarTrackColor = Orange30, + progressBarWidth = 72.dp, + progressBarHeight = 4.dp, + progressBarStrokeCap = StrokeCap.Round, + ) +} From dce5048be7c9c09963dd76f47a7bef9b26866a5c Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 18:28:25 +0900 Subject: [PATCH 18/24] =?UTF-8?q?refactor:=20SusuProgressAppBar=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuProgressAppBar.kt | 101 +++++++++--------- 1 file changed, 51 insertions(+), 50 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 1b07ee90..612609e6 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -1,103 +1,104 @@ package com.susu.core.designsystem.component.appbar +import android.util.Log import androidx.annotation.DrawableRes -import androidx.compose.animation.core.FastOutSlowInEasing -import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.material3.Button +import androidx.compose.material3.Icon import androidx.compose.material3.LinearProgressIndicator import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect 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.graphics.Color -import androidx.compose.ui.graphics.StrokeCap +import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R -import com.susu.core.designsystem.theme.Orange30 import com.susu.core.designsystem.theme.SusuTheme +import com.susu.core.ui.extension.susuClickable @Composable -fun SusuProgressBarAppBar( +fun SusuProgressAppBar( modifier: Modifier = Modifier, - containerHeight: Dp = 44.dp, - leftIconType: LeftIconType, @DrawableRes leftIcon: Int, - currentPercentage: Float, - progressBarColor: Color = SusuTheme.colorScheme.primary, - progressTrackColor: Color = Orange30, - progressBarWidth: Dp = 72.dp, // TODO: 디자인시스템과 최종시안이 다름, 현재 확인 중 (지울 예정) - progressBarHeight: Dp = 4.dp, - progressBarStrokeCap: StrokeCap = StrokeCap.Round, - onClickBackButton: () -> Unit = {}, + leftIconContentDescription: String, + leftIconPadding: Dp = SusuTheme.spacing.spacing_xs, + currentStep: Int, + entireStep: Int, + progressBar: ProgressBarStyle = ProgressBarStyle.SusuProgressBar, + onClickBackButton: () -> Unit, ) { BasicAppBar( - containerHeight = containerHeight, - leftIconType = leftIconType, - leftIcon = leftIcon, + modifier = modifier, + leftIcon = { + Box( + modifier = modifier + .susuClickable( + rippleEnabled = false, + onClick = onClickBackButton, + ) + .padding(leftIconPadding), + contentAlignment = Alignment.Center, + ) { + Icon( + painter = painterResource(id = leftIcon), + contentDescription = leftIconContentDescription, + ) + } + }, title = { LinearProgressIndicator( - progress = { - currentPercentage - }, - color = progressBarColor, - trackColor = progressTrackColor, + progress = { currentStep / entireStep.toFloat() }, + color = progressBar.progressBarColor, + trackColor = progressBar.progressBarTrackColor, modifier = modifier .size( - width = progressBarWidth, - height = progressBarHeight, + width = progressBar.progressBarWidth, + height = progressBar.progressBarHeight, ), - strokeCap = progressBarStrokeCap, + strokeCap = progressBar.progressBarStrokeCap, ) }, - onClickBackButton = { onClickBackButton }, ) } -@Preview(showBackground = true) +@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) @Composable -fun SusuProgressAppBarPreview() { - // TODO: 애니메이션 부분 + 버튼은 단순히 확인 용으로 추가함 (지울 예정) - val currentPage = 6 - val increasePercent = 1f / currentPage - var progress by remember { mutableStateOf(increasePercent) } - - val progressAnimation by animateFloatAsState( - targetValue = progress, - animationSpec = tween(durationMillis = 1000, easing = FastOutSlowInEasing), - label = "", - ) +fun SusuProgressAppBarPreview( + modifier: Modifier = Modifier, +) { + val entireStep = 6 + var currentStep by remember { mutableStateOf(1) } SusuTheme { Column( verticalArrangement = Arrangement.spacedBy(20.dp), ) { - SusuProgressBarAppBar( - leftIconType = LeftIconType.BACKBUTTON, + SusuProgressAppBar( leftIcon = R.drawable.ic_arrow_left, - currentPercentage = progressAnimation, + leftIconContentDescription = "뒤로가기", + currentStep = currentStep, + entireStep = entireStep, + onClickBackButton = { + Log.d("확인", "왼쪽 뒤로가기 클릭") + }, ) - Button( onClick = { - progress += increasePercent + currentStep += 1 }, ) { Text(text = "다음") } - - LaunchedEffect(progress) { - progress = progress - } } } } From fe086f099f646d50cd3d040a9831704be64a3c16 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 18:28:55 +0900 Subject: [PATCH 19/24] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20string=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/designsystem/src/main/res/values/strings.xml | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 core/designsystem/src/main/res/values/strings.xml diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml deleted file mode 100644 index 87468250..00000000 --- a/core/designsystem/src/main/res/values/strings.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - Susu 앱 로고 - 뒤로가기 - From 105fbb8c4478fd31a0ff36a233278d66aecf74d8 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 18:31:04 +0900 Subject: [PATCH 20/24] =?UTF-8?q?chore:=20ktlintFormat=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../susu/core/designsystem/component/appbar/ProgressBarStyle.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt index 91adc2c2..43b86ffe 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt @@ -20,5 +20,5 @@ enum class ProgressBarStyle( progressBarWidth = 72.dp, progressBarHeight = 4.dp, progressBarStrokeCap = StrokeCap.Round, - ) + ), } From 00b65abfb9db7d6514fe6883ad97c1c8b142dd11 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 19:55:48 +0900 Subject: [PATCH 21/24] =?UTF-8?q?refactor:=20default=EA=B0=92=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95,=20modifier=20=EC=88=98=EC=A0=95,=20Box=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuDefaultAppBar.kt | 34 +++++++------------ .../component/appbar/SusuProgressAppBar.kt | 29 ++++++---------- .../src/main/res/values/strings.xml | 4 +++ 3 files changed, 26 insertions(+), 41 deletions(-) create mode 100644 core/designsystem/src/main/res/values/strings.xml diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt index d3c6e73c..4d31adbc 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -3,7 +3,6 @@ package com.susu.core.designsystem.component.appbar import android.util.Log import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.material3.Icon @@ -88,7 +87,9 @@ private fun LogoWithTwoIconsPreview( }, title = "타이틀", actions = { - Box( + Icon( + painter = painterResource(id = R.drawable.ic_community_filled), + contentDescription = null, modifier = modifier .susuClickable( rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 @@ -97,13 +98,10 @@ private fun LogoWithTwoIconsPreview( }, ) .padding(clickPadding), - ) { - Icon( - painter = painterResource(id = R.drawable.ic_community_filled), - contentDescription = null, - ) - } - Box( + ) + Icon( + painter = painterResource(id = R.drawable.ic_my_page_filled), + contentDescription = null, modifier = modifier .susuClickable( rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 @@ -112,12 +110,7 @@ private fun LogoWithTwoIconsPreview( }, ) .padding(clickPadding), - ) { - Icon( - painter = painterResource(id = R.drawable.ic_my_page_filled), - contentDescription = null, - ) - } + ) }, ) } @@ -130,7 +123,9 @@ private fun BackBtnWithTwoTextPreview( ) { SusuDefaultAppBar( leftIcon = { - Box( + Icon( + painter = painterResource(id = R.drawable.ic_arrow_left), + contentDescription = "뒤로가기", modifier = modifier .susuClickable( rippleEnabled = true, @@ -139,12 +134,7 @@ private fun BackBtnWithTwoTextPreview( }, ) .padding(clickPadding), - ) { - Icon( - painter = painterResource(id = R.drawable.ic_arrow_left), - contentDescription = "뒤로가기", - ) - } + ) }, title = "타이틀", actions = { diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 612609e6..81975e2f 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -3,7 +3,6 @@ package com.susu.core.designsystem.component.appbar import android.util.Log import androidx.annotation.DrawableRes import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -16,9 +15,9 @@ 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.res.painterResource +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -29,8 +28,8 @@ import com.susu.core.ui.extension.susuClickable @Composable fun SusuProgressAppBar( modifier: Modifier = Modifier, - @DrawableRes leftIcon: Int, - leftIconContentDescription: String, + @DrawableRes leftIcon: Int = R.drawable.ic_arrow_left, + leftIconContentDescription: String = stringResource(R.string.app_bar_back_button), leftIconPadding: Dp = SusuTheme.spacing.spacing_xs, currentStep: Int, entireStep: Int, @@ -38,22 +37,18 @@ fun SusuProgressAppBar( onClickBackButton: () -> Unit, ) { BasicAppBar( - modifier = modifier, + modifier = Modifier, leftIcon = { - Box( + Icon( + painter = painterResource(id = leftIcon), + contentDescription = leftIconContentDescription, modifier = modifier .susuClickable( - rippleEnabled = false, + rippleEnabled = true, onClick = onClickBackButton, ) .padding(leftIconPadding), - contentAlignment = Alignment.Center, - ) { - Icon( - painter = painterResource(id = leftIcon), - contentDescription = leftIconContentDescription, - ) - } + ) }, title = { LinearProgressIndicator( @@ -73,9 +68,7 @@ fun SusuProgressAppBar( @Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) @Composable -fun SusuProgressAppBarPreview( - modifier: Modifier = Modifier, -) { +fun SusuProgressAppBarPreview() { val entireStep = 6 var currentStep by remember { mutableStateOf(1) } @@ -84,8 +77,6 @@ fun SusuProgressAppBarPreview( verticalArrangement = Arrangement.spacedBy(20.dp), ) { SusuProgressAppBar( - leftIcon = R.drawable.ic_arrow_left, - leftIconContentDescription = "뒤로가기", currentStep = currentStep, entireStep = entireStep, onClickBackButton = { diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml new file mode 100644 index 00000000..2d389271 --- /dev/null +++ b/core/designsystem/src/main/res/values/strings.xml @@ -0,0 +1,4 @@ + + + 뒤로가기 + From 099a25b98c3f9609147841d8cf9768e8d5c8b89b Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 21:14:44 +0900 Subject: [PATCH 22/24] =?UTF-8?q?refactor:=20modifier=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/designsystem/component/appbar/SusuProgressAppBar.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 81975e2f..6a94f6e7 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -37,12 +37,12 @@ fun SusuProgressAppBar( onClickBackButton: () -> Unit, ) { BasicAppBar( - modifier = Modifier, + modifier = modifier, leftIcon = { Icon( painter = painterResource(id = leftIcon), contentDescription = leftIconContentDescription, - modifier = modifier + modifier = Modifier .susuClickable( rippleEnabled = true, onClick = onClickBackButton, From 6b5f0709409274be08d5224706b638d5d636ce55 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 21:31:23 +0900 Subject: [PATCH 23/24] =?UTF-8?q?chore:=20drawable=20=EB=A6=AC=EC=86=8C?= =?UTF-8?q?=EC=8A=A4=20=EC=A0=95=EB=A6=AC=20(core/designsystem=20=E2=86=92?= =?UTF-8?q?=20feature/navigator)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuDefaultAppBar.kt | 6 +++--- .../com/susu/feature/navigator/MainNavigationTab.kt | 11 +++++------ .../src/main/res/drawable/ic_community_filled.xml | 0 .../src/main/res/drawable/ic_community_outlined.xml | 0 .../src/main/res/drawable/ic_my_page_filled.xml | 0 .../src/main/res/drawable/ic_my_page_outlined.xml | 0 .../src/main/res/drawable/ic_received_filled.xml | 0 .../src/main/res/drawable/ic_received_outlined.xml | 0 .../src/main/res/drawable/ic_sent_filled.xml | 0 .../src/main/res/drawable/ic_sent_outlined.xml | 0 .../src/main/res/drawable/ic_statistics_filled.xml | 0 .../src/main/res/drawable/ic_statistics_outlined.xml | 0 12 files changed, 8 insertions(+), 9 deletions(-) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_community_filled.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_community_outlined.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_my_page_filled.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_my_page_outlined.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_received_filled.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_received_outlined.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_sent_filled.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_sent_outlined.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_statistics_filled.xml (100%) rename {core/designsystem => feature/navigator}/src/main/res/drawable/ic_statistics_outlined.xml (100%) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt index 4d31adbc..5c45c691 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -80,7 +80,7 @@ private fun LogoWithTwoIconsPreview( SusuDefaultAppBar( leftIcon = { Image( - painter = painterResource(id = R.drawable.ic_received_filled), + painter = painterResource(id = R.drawable.ic_arrow_left), contentDescription = "로고", modifier = modifier.padding(clickPadding), ) @@ -88,7 +88,7 @@ private fun LogoWithTwoIconsPreview( title = "타이틀", actions = { Icon( - painter = painterResource(id = R.drawable.ic_community_filled), + painter = painterResource(id = R.drawable.ic_arrow_left), contentDescription = null, modifier = modifier .susuClickable( @@ -100,7 +100,7 @@ private fun LogoWithTwoIconsPreview( .padding(clickPadding), ) Icon( - painter = painterResource(id = R.drawable.ic_my_page_filled), + painter = painterResource(id = R.drawable.ic_arrow_left), contentDescription = null, modifier = modifier .susuClickable( diff --git a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt index 6a6fba16..22b88f46 100644 --- a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt +++ b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigationTab.kt @@ -2,7 +2,6 @@ package com.susu.feature.navigator import androidx.annotation.DrawableRes import androidx.annotation.StringRes -import com.susu.core.designsystem.R import com.susu.feature.community.navigation.CommunityRoute import com.susu.feature.mypage.navigation.MyPageRoute import com.susu.feature.received.navigation.ReceivedRoute @@ -18,31 +17,31 @@ enum class MainNavigationTab( SENT( selectedIconId = R.drawable.ic_sent_filled, unselectedIconId = R.drawable.ic_sent_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_sent, + labelId = R.string.bottom_navigation_item_label_sent, route = SentRoute.route, ), RECEIVED( selectedIconId = R.drawable.ic_received_filled, unselectedIconId = R.drawable.ic_received_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_received, + labelId = R.string.bottom_navigation_item_label_received, route = ReceivedRoute.route, ), STATISTICS( selectedIconId = R.drawable.ic_statistics_filled, unselectedIconId = R.drawable.ic_statistics_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_statistics, + labelId = R.string.bottom_navigation_item_label_statistics, route = StatisticsRoute.route, ), COMMUNITY( selectedIconId = R.drawable.ic_community_filled, unselectedIconId = R.drawable.ic_community_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_community, + labelId = R.string.bottom_navigation_item_label_community, route = CommunityRoute.route, ), MY_PAGE( selectedIconId = R.drawable.ic_my_page_filled, unselectedIconId = R.drawable.ic_my_page_outlined, - labelId = com.susu.feature.navigator.R.string.bottom_navigation_item_label_my_page, + labelId = R.string.bottom_navigation_item_label_my_page, route = MyPageRoute.route, ), ; diff --git a/core/designsystem/src/main/res/drawable/ic_community_filled.xml b/feature/navigator/src/main/res/drawable/ic_community_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_community_filled.xml rename to feature/navigator/src/main/res/drawable/ic_community_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_community_outlined.xml b/feature/navigator/src/main/res/drawable/ic_community_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_community_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_community_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_my_page_filled.xml b/feature/navigator/src/main/res/drawable/ic_my_page_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_my_page_filled.xml rename to feature/navigator/src/main/res/drawable/ic_my_page_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_my_page_outlined.xml b/feature/navigator/src/main/res/drawable/ic_my_page_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_my_page_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_my_page_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_received_filled.xml b/feature/navigator/src/main/res/drawable/ic_received_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_received_filled.xml rename to feature/navigator/src/main/res/drawable/ic_received_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_received_outlined.xml b/feature/navigator/src/main/res/drawable/ic_received_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_received_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_received_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_sent_filled.xml b/feature/navigator/src/main/res/drawable/ic_sent_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_sent_filled.xml rename to feature/navigator/src/main/res/drawable/ic_sent_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_sent_outlined.xml b/feature/navigator/src/main/res/drawable/ic_sent_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_sent_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_sent_outlined.xml diff --git a/core/designsystem/src/main/res/drawable/ic_statistics_filled.xml b/feature/navigator/src/main/res/drawable/ic_statistics_filled.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_statistics_filled.xml rename to feature/navigator/src/main/res/drawable/ic_statistics_filled.xml diff --git a/core/designsystem/src/main/res/drawable/ic_statistics_outlined.xml b/feature/navigator/src/main/res/drawable/ic_statistics_outlined.xml similarity index 100% rename from core/designsystem/src/main/res/drawable/ic_statistics_outlined.xml rename to feature/navigator/src/main/res/drawable/ic_statistics_outlined.xml From 43793caca9cac9fba58bcf26b880484bc7b02f60 Mon Sep 17 00:00:00 2001 From: syb8200 Date: Mon, 1 Jan 2024 22:28:32 +0900 Subject: [PATCH 24/24] =?UTF-8?q?refactor:=20leftIcon=20=EC=97=86=EC=9D=84?= =?UTF-8?q?=20=EA=B2=BD=EC=9A=B0=20=EA=B3=A0=EB=A0=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/appbar/SusuDefaultAppBar.kt | 2 +- .../component/appbar/SusuProgressAppBar.kt | 29 ++++++++++--------- .../src/main/res/values/strings.xml | 4 --- 3 files changed, 17 insertions(+), 18 deletions(-) delete mode 100644 core/designsystem/src/main/res/values/strings.xml diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt index 5c45c691..0a80b1d1 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt @@ -22,7 +22,7 @@ import com.susu.core.ui.extension.susuClickable @Composable fun SusuDefaultAppBar( modifier: Modifier = Modifier, - leftIcon: @Composable () -> Unit, + leftIcon: @Composable () -> Unit = {}, title: String? = null, actions: @Composable () -> Unit = {}, ) { diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt index 6a94f6e7..458407c0 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt @@ -17,7 +17,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -28,8 +27,8 @@ import com.susu.core.ui.extension.susuClickable @Composable fun SusuProgressAppBar( modifier: Modifier = Modifier, - @DrawableRes leftIcon: Int = R.drawable.ic_arrow_left, - leftIconContentDescription: String = stringResource(R.string.app_bar_back_button), + @DrawableRes leftIcon: Int? = null, + leftIconContentDescription: String? = null, leftIconPadding: Dp = SusuTheme.spacing.spacing_xs, currentStep: Int, entireStep: Int, @@ -39,16 +38,18 @@ fun SusuProgressAppBar( BasicAppBar( modifier = modifier, leftIcon = { - Icon( - painter = painterResource(id = leftIcon), - contentDescription = leftIconContentDescription, - modifier = Modifier - .susuClickable( - rippleEnabled = true, - onClick = onClickBackButton, - ) - .padding(leftIconPadding), - ) + leftIcon?.let { + Icon( + painter = painterResource(id = leftIcon), + contentDescription = leftIconContentDescription, + modifier = Modifier + .susuClickable( + rippleEnabled = true, + onClick = onClickBackButton, + ) + .padding(leftIconPadding), + ) + } }, title = { LinearProgressIndicator( @@ -77,6 +78,8 @@ fun SusuProgressAppBarPreview() { verticalArrangement = Arrangement.spacedBy(20.dp), ) { SusuProgressAppBar( + leftIcon = R.drawable.ic_arrow_left, + leftIconContentDescription = "뒤로가기", currentStep = currentStep, entireStep = entireStep, onClickBackButton = { diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml deleted file mode 100644 index 2d389271..00000000 --- a/core/designsystem/src/main/res/values/strings.xml +++ /dev/null @@ -1,4 +0,0 @@ - - - 뒤로가기 -