Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX/#87] IconChip 구조 변경 #88

Merged
merged 7 commits into from
Jan 20, 2025
Merged

[FIX/#87] IconChip 구조 변경 #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d47bc77
[FIX/#87] IconChip 구조 변경
Roel4990 Jan 20, 2025
4306fd9
[FIX/#87] IconChip 구조 변경
Roel4990 Jan 20, 2025
46a7042
Merge remote-tracking branch 'origin/develop' into fix/#87-iconChip-mod
Roel4990 Jan 20, 2025
352327b
[FIX/#87] IconChip 변경에 의한 ExploreScreen 수정
Roel4990 Jan 20, 2025
943193f
[FIX/#87] AsyncImage UrlImage 컴포넌트로 구현
Roel4990 Jan 20, 2025
11dc02d
[FIX/#87] if -> when 으로 수정
Roel4990 Jan 20, 2025
7c5efb6
Merge remote-tracking branch 'origin/develop' into fix/#87-iconChip-mod
Roel4990 Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 40 additions & 66 deletions app/src/main/java/com/spoony/spoony/core/designsystem/component/chip/IconChip.kt
View file
Open in desktop
Copy link
Collaborator

@angryPodo angryPodo Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음,,,생각보다 구조적으로 변경이 필요해보입니다.
modifier를 내부에 넣게 되면 패딩이나 외부에서 수정자를 사용할 수 없는 이슈가 있을 것 같아요.
서버에서 오는 값을 보면

"categoryName": "로컬 수저",
"iconUrlNotSelected": "url_black_2",
"iconUrlSelected": "url_white_2"

이런 형식인데

IconChip(
    text:String,
    selectedIconUrl: String,
    unSelectedIconUrl: String,
    isGradient: Boolean = false
) {
    // isGradient = true일경우 그라디언트 배경 기본설정
    // else의 경우 backGroundColor = Solid Color
}

이 구조로 가는게 어떨까요? 텍스트의 경우는 셀렉,언셀렉의 경우 모두 동일하고 백그라운드 컬러 또한 그라디언트가 아닐경우엔 main400 고정으로 보입니다.
@Hyobeen-Park @chattymin

Copy link
Member

@chattymin chattymin Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋은 아이디어인 것 같습니다!
chip이 selected/unSelected 두 상태 모두 배경색과 텍스트 색은 고정이기 때문에 Icon에 해당하는 부분만 서버에서 받아오는게 좋은 방향일 것 같아요. 또한 디자인시스템을 확인해보니 Gradient가 있는 chip과 Soild한 색상의 chip 모두 selected의 background 색상을 제외하곤 전부 같은 상태임을 확인했습니다.

그렇기에 IsGradient라는 매개변수로 구분하여 selelcted일 때의 chip 색상을 결정하는 것은 좋은 아이디어 인 것 같습니다.
이와 관련된 확장함수의 경우 제가 오늘 중으로 구현하여 PR올리도록 하겠습니다 :)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 지금은 이 방법이 최선인 것 같아요..!! 다들 어떻게 생각하시나요~~??

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 좋다고 생각합니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 방식으로 수정했습니다!

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ package com.spoony.spoony.core.designsystem.component.chip

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
Expand All @@ -13,123 +12,98 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
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.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.spoony.spoony.core.designsystem.component.image.UrlImage
import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
import com.spoony.spoony.core.designsystem.theme.SpoonyColors
import com.spoony.spoony.core.designsystem.type.ChipColor
import com.spoony.spoony.core.util.extension.noRippleClickable

@Composable
fun IconChip(
text: String,
tagColor: ChipColor,
iconUrl: String,
selectedIconUrl: String,
unSelectedIconUrl: String,
onClick: () -> Unit,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
isSelected: Boolean = false,
isGradient: Boolean = false
) {
val (backgroundBrush, iconTextColor) = rememberChipStyle(tagColor)
val context = LocalContext.current

Row(
modifier = modifier
.noRippleClickable(onClick)
.clip(RoundedCornerShape(12.dp))
.background(brush = backgroundBrush)
.clickable(onClick = onClick)
.border(
width = 1.dp,
color = SpoonyAndroidTheme.colors.gray100,
shape = RoundedCornerShape(12.dp)
)
.then(
when {
isSelected && isGradient -> Modifier.background(color = SpoonyAndroidTheme.colors.black)
isSelected -> Modifier.background(color = SpoonyAndroidTheme.colors.main400)
else -> Modifier.background(color = SpoonyAndroidTheme.colors.gray0)
}
)
.padding(
horizontal = 14.dp,
vertical = 6.dp
),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
AsyncImage(
model = ImageRequest.Builder(context)
.data(iconUrl)
.crossfade(true)
.build(),
modifier = Modifier.size(16.dp),
contentScale = ContentScale.Crop,
contentDescription = null
UrlImage(
imageUrl = if (isSelected) selectedIconUrl else unSelectedIconUrl,
modifier = Modifier.size(16.dp)
)

Spacer(modifier = Modifier.width(4.dp))

Text(
text = text,
color = iconTextColor,
color = if (isSelected) SpoonyAndroidTheme.colors.white else SpoonyAndroidTheme.colors.gray600,
style = SpoonyAndroidTheme.typography.body2sb
)
}
}

private fun getChipStyle(tagColor: ChipColor, spoonyColor: SpoonyColors): Pair<Brush, Color> {
return when (tagColor) {
ChipColor.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
ChipColor.White ->
SolidColor(spoonyColor.gray0) to
spoonyColor.gray600
ChipColor.Main ->
SolidColor(spoonyColor.main400) to
spoonyColor.white
}
}

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

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

@Preview(showBackground = true)
@Composable
private fun IconChipPreview() {
var isSelected by remember { mutableStateOf(false) }
SpoonyAndroidTheme {
Column(
modifier = Modifier,
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
IconChip(
text = "chip",
tagColor = ChipColor.Black,
onClick = { },
iconUrl = "https://github.com/user-attachments/assets/c1752fb8-c771-4931-8a45-3d43a76209f8"
)
IconChip(
text = "chip",
tagColor = ChipColor.White,
onClick = { },
iconUrl = "https://github.com/user-attachments/assets/1e0bc0e5-a1c6-44e8-b6f4-f47aced44441"
onClick = {
isSelected = !isSelected
},
isGradient = true,
isSelected = isSelected,
unSelectedIconUrl = "https://github.com/user-attachments/assets/1e0bc0e5-a1c6-44e8-b6f4-f47aced44441",
selectedIconUrl = "https://github.com/user-attachments/assets/c1752fb8-c771-4931-8a45-3d43a76209f8"
)

IconChip(
text = "chip",
tagColor = ChipColor.Main,
onClick = { },
iconUrl = "https://github.com/user-attachments/assets/c3cd06c9-7771-48c3-a0ee-0128d14135fd"
onClick = {
isSelected = !isSelected
},
isSelected = isSelected,
unSelectedIconUrl = "https://github.com/user-attachments/assets/1e0bc0e5-a1c6-44e8-b6f4-f47aced44441",
selectedIconUrl = "https://github.com/user-attachments/assets/c1752fb8-c771-4931-8a45-3d43a76209f8"
)
}
}
Expand Down
6 changes: 3 additions & 3 deletions app/src/main/java/com/spoony/spoony/presentation/explore/ExploreScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.spoony.spoony.R
import com.spoony.spoony.core.designsystem.component.chip.IconChip
import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
import com.spoony.spoony.core.designsystem.type.ChipColor
import com.spoony.spoony.core.state.UiState
import com.spoony.spoony.core.util.extension.hexToColor
import com.spoony.spoony.core.util.extension.noRippleClickable
Expand Down Expand Up @@ -141,8 +140,9 @@ private fun ExploreScreen(
) { category ->
IconChip(
text = category.categoryName,
tagColor = if (selectedCategoryId == category.categoryId) ChipColor.Black else ChipColor.White,
iconUrl = category.iconUrl,
unSelectedIconUrl = category.unSelectedIconUrl ?: "",
selectedIconUrl = category.iconUrl,
isSelected = selectedCategoryId == category.categoryId,
onClick = { updateSelectedCategory(category.categoryId) }
)
}
Expand Down
Loading