Skip to content

Commit

Permalink
[FEAT/#20] IconChip, IconTag, LogoTag 가독성을 위한 함수화
Browse files Browse the repository at this point in the history
  • Loading branch information
@Roel4990
Roel4990 committed Jan 14, 2025
1 parent 76f4bc7 commit 2dc3010
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 80 deletions.
63 changes: 37 additions & 26 deletions app/src/main/java/com/spoony/spoony/core/designsystem/component/tag/IconChip.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.spoony.spoony.R
import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
import com.spoony.spoony.core.designsystem.theme.SpoonyColors
import com.spoony.spoony.core.designsystem.type.TagChipColor

@Composable
Expand All @@ -36,37 +37,15 @@ fun IconChip(
modifier: Modifier = Modifier,
icon: (@Composable (Color) -> Unit)? = null
) {
val spoonTypography = SpoonyAndroidTheme.typography
val spoonyColor = SpoonyAndroidTheme.colors
val (backgroundBrush, iconTextColor) = remember(tagColor) {
when (tagColor) {
TagChipColor.Black -> Brush.linearGradient(
colors = listOf(
spoonyColor.gray800,
spoonyColor.gray900,
spoonyColor.black
),
start = Offset(0f, Float.POSITIVE_INFINITY),
end = Offset(Float.POSITIVE_INFINITY, 0f)
) to spoonyColor.white
TagChipColor.White ->
SolidColor(spoonyColor.white) to
spoonyColor.gray600
TagChipColor.Main ->
SolidColor(spoonyColor.main400) to
spoonyColor.white
else ->
SolidColor(spoonyColor.white) to
spoonyColor.black
}
}
val (backgroundBrush, iconTextColor) = rememberChipStyle(tagColor)

Row(
modifier = modifier
.clip(RoundedCornerShape(12.dp))
.background(brush = backgroundBrush)
.clickable(onClick = onClick)
.padding(
horizontal = 16.dp,
horizontal = 14.dp,
vertical = 6.dp
),
verticalAlignment = Alignment.CenterVertically,
Expand All @@ -79,11 +58,43 @@ fun IconChip(
Text(
text = text,
color = iconTextColor,
style = spoonTypography.body2sb
style = SpoonyAndroidTheme.typography.body2sb
)
}
}

private fun getChipStyle(tagColor: TagChipColor, spoonyColor: SpoonyColors): Pair<Brush, Color> {
return when (tagColor) {
TagChipColor.Black -> Brush.linearGradient(
colors = listOf(
spoonyColor.gray800,
spoonyColor.gray900,
spoonyColor.black
),
start = Offset(0f, Float.POSITIVE_INFINITY),
end = Offset(Float.POSITIVE_INFINITY, 0f)
) to spoonyColor.white
TagChipColor.White ->
SolidColor(spoonyColor.white) to
spoonyColor.gray600
TagChipColor.Main ->
SolidColor(spoonyColor.main400) to
spoonyColor.white
else ->
SolidColor(spoonyColor.white) to
spoonyColor.black
}
}

@Composable
private fun rememberChipStyle(tagColor: TagChipColor): Pair<Brush, Color> {
val spoonyColor = SpoonyAndroidTheme.colors

return remember(tagColor) {
getChipStyle(tagColor, spoonyColor)
}
}

@Preview
@Composable
private fun IconChipPreview() {
Expand Down
67 changes: 39 additions & 28 deletions app/src/main/java/com/spoony/spoony/core/designsystem/component/tag/IconTag.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.spoony.spoony.R
import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
import com.spoony.spoony.core.designsystem.theme.SpoonyColors
import com.spoony.spoony.core.designsystem.type.TagChipColor

@Composable
Expand All @@ -33,33 +34,8 @@ fun IconTag(
modifier: Modifier = Modifier,
icon: (@Composable (Color) -> Unit)? = null
) {
val spoonTypography = SpoonyAndroidTheme.typography
val spoonyColor = SpoonyAndroidTheme.colors
val (backgroundColor, iconTextColor) = remember(tagColor) {
when (tagColor) {
TagChipColor.Main ->
spoonyColor.main0 to
spoonyColor.main400
TagChipColor.Orange ->
spoonyColor.orange100 to
spoonyColor.orange400
TagChipColor.Pink ->
spoonyColor.pink100 to
spoonyColor.pink400
TagChipColor.Green ->
spoonyColor.green100 to
spoonyColor.green400
TagChipColor.Blue ->
spoonyColor.blue100 to
spoonyColor.blue400
TagChipColor.Purple ->
spoonyColor.purple100 to
spoonyColor.purple400
else ->
spoonyColor.black to
spoonyColor.white
}
}
val (backgroundColor, iconTextColor) = rememberTagStyle(tagColor)

Row(
modifier = modifier
.clip(RoundedCornerShape(12.dp))
Expand All @@ -79,11 +55,46 @@ fun IconTag(
Text(
text = text,
color = iconTextColor,
style = spoonTypography.caption1m
style = SpoonyAndroidTheme.typography.caption1m
)
}
}

private fun getIconTagStyle(tagColor: TagChipColor, spoonyColor: SpoonyColors): Pair<Color, Color> {
return when (tagColor) {
TagChipColor.Main ->
spoonyColor.main0 to
spoonyColor.main400
TagChipColor.Orange ->
spoonyColor.orange100 to
spoonyColor.orange400
TagChipColor.Pink ->
spoonyColor.pink100 to
spoonyColor.pink400
TagChipColor.Green ->
spoonyColor.green100 to
spoonyColor.green400
TagChipColor.Blue ->
spoonyColor.blue100 to
spoonyColor.blue400
TagChipColor.Purple ->
spoonyColor.purple100 to
spoonyColor.purple400
else ->
spoonyColor.black to
spoonyColor.white
}
}

@Composable
private fun rememberTagStyle(tagColor: TagChipColor): Pair<Color, Color> {
val spoonyColor = SpoonyAndroidTheme.colors

return remember(tagColor) {
getIconTagStyle(tagColor, spoonyColor)
}
}

@Preview
@Composable
private fun IconTagPreview() {
Expand Down
53 changes: 27 additions & 26 deletions app/src/main/java/com/spoony/spoony/core/designsystem/component/tag/LogoTag.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,15 @@ import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.spoony.spoony.R
import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
import com.spoony.spoony.core.designsystem.theme.SpoonyTypography
import com.spoony.spoony.core.designsystem.type.TagSize

@Composable
Expand All @@ -36,37 +39,17 @@ fun LogoTag(
modifier: Modifier = Modifier
) {
val spoonTypography = SpoonyAndroidTheme.typography
val textSize = remember(tagSize) {
when (tagSize) {
TagSize.Large -> spoonTypography.body1sb
TagSize.Small -> spoonTypography.body2sb
}
val (betweenValues, paddingValues) = remember(tagSize) {
getLogoTagPaddingAndSpacing(tagSize)
}

val paddingValues = remember(tagSize) {
when (tagSize) {
TagSize.Large -> PaddingValues(start = 12.dp, end = 4.dp, top = 5.dp, bottom = 4.dp)
TagSize.Small -> PaddingValues(start = 8.dp, end = 2.dp, top = 4.dp, bottom = 4.dp)
}
}

val betweenPaddingValues = remember(tagSize) {
when (tagSize) {
TagSize.Large -> 6.dp
TagSize.Small -> 5.dp
}
}

val verticalAlignment = remember(tagSize) {
when (tagSize) {
TagSize.Large -> Alignment.Top
TagSize.Small -> Alignment.CenterVertically
}
val (textSize, verticalAlignment) = remember(tagSize) {
getLogoTagStyleAndAlignment(tagSize, spoonTypography)
}

Row(
modifier = modifier
.clip(RoundedCornerShape(999.dp))
.clip(RoundedCornerShape(20.dp))
.background(
Brush.linearGradient(
colors = listOf(
Expand All @@ -88,7 +71,7 @@ fun LogoTag(
style = textSize,
color = SpoonyAndroidTheme.colors.white
)
Spacer(modifier = Modifier.width(betweenPaddingValues))
Spacer(modifier = Modifier.width(betweenValues))
Icon(
painter = painterResource(id = R.drawable.ic_tag_spoon_20),
contentDescription = "Arrow Icon",
Expand All @@ -97,6 +80,24 @@ fun LogoTag(
}
}

private fun getLogoTagPaddingAndSpacing(tagSize: TagSize): Pair<Dp, PaddingValues> {
return when (tagSize) {
TagSize.Large ->
6.dp to PaddingValues(start = 12.dp, end = 4.dp, top = 5.dp, bottom = 4.dp)
TagSize.Small ->
5.dp to PaddingValues(start = 8.dp, end = 2.dp, top = 4.dp, bottom = 4.dp)
}
}

private fun getLogoTagStyleAndAlignment(tagSize: TagSize, spoonTypography: SpoonyTypography): Pair<TextStyle, Alignment.Vertical> {
return when (tagSize) {
TagSize.Large ->
spoonTypography.body1sb to Alignment.Top
TagSize.Small ->
spoonTypography.body2sb to Alignment.CenterVertically
}
}

class TagSizeProvider : PreviewParameterProvider<TagSize> {
override val values: Sequence<TagSize> = sequenceOf(
TagSize.Large,
Expand Down

0 comments on commit 2dc3010

Please sign in to comment.