[UI] #86 LinkCard 세부 디자인 수정

YAPP-Github · Dec 10, 2024 · d6fd05e · d6fd05e
1 parent 530a4de
commit d6fd05e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 45 deletions.
diff --git a/core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkcard/LinkCard.kt b/core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkcard/LinkCard.kt
@@ -2,7 +2,6 @@ package pokitmons.pokit.core.ui.components.block.linkcard
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -163,73 +162,73 @@ fun<T> LinkCard(
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(6.dp)
                 ) {
-                    if (notRead) {
+                    if (badgeText?.isNotBlank() == true) {
                         Text(
-                            text = stringResource(id = R.string.not_read),
+                            text = badgeText,
                             modifier = Modifier
-                                .border(
-                                    width = 1.dp,
-                                    color = PokitTheme.colors.brand,
+                                .weight(1f, fill = false)
+                                .background(
+                                    color = PokitTheme.colors.backgroundPrimary,
                                     shape = RoundedCornerShape(4.dp)
                                 )
+                                .padding(horizontal = 8.dp, vertical = 4.dp),
+                            style = PokitTheme.typography.label4.copy(color = PokitTheme.colors.textTertiary),
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis
+                        )
+                    }
+
+                    if (notRead) {
+                        Text(
+                            text = stringResource(id = R.string.not_read),
+                            modifier = Modifier
                                 .background(
-                                    color = PokitTheme.colors.backgroundBase,
+                                    color = Color(0xFFFFF3EA),
                                     shape = RoundedCornerShape(4.dp)
                                 )
                                 .padding(horizontal = 8.dp, vertical = 4.dp),
                             style = PokitTheme.typography.label4.copy(color = PokitTheme.colors.brand)
                         )
                     }
 
-                    if (badgeText?.isNotBlank() == true) {
+                    if (hasMemo) {
                         Box(
-                            Modifier.weight(1f)
+                            modifier = Modifier.size(20.dp)
                         ) {
-                            Text(
-                                text = badgeText,
+                            Icon(
                                 modifier = Modifier
+                                    .height(20.dp)
+                                    .aspectRatio(1f)
                                     .background(
                                         color = PokitTheme.colors.backgroundPrimary,
                                         shape = RoundedCornerShape(4.dp)
                                     )
-                                    .padding(horizontal = 8.dp, vertical = 4.dp),
-                                style = PokitTheme.typography.label4.copy(color = PokitTheme.colors.textTertiary),
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
+                                    .padding(2.dp),
+                                painter = painterResource(id = R.drawable.icon_24_file),
+                                tint = PokitTheme.colors.iconSecondary,
+                                contentDescription = "hasMemo"
                             )
                         }
                     }
 
-                    if (hasMemo) {
-                        Icon(
-                            modifier = Modifier
-                                .height(20.dp)
-                                .aspectRatio(1f)
-                                .background(
-                                    color = PokitTheme.colors.backgroundPrimary,
-                                    shape = RoundedCornerShape(4.dp)
-                                )
-                                .padding(2.dp),
-                            painter = painterResource(id = R.drawable.icon_24_file),
-                            tint = PokitTheme.colors.iconSecondary,
-                            contentDescription = "hasMemo"
-                        )
-                    }
-
                     if (hasMember) {
-                        Icon(
-                            modifier = Modifier
-                                .height(20.dp)
-                                .aspectRatio(1f)
-                                .background(
-                                    color = PokitTheme.colors.backgroundPrimary,
-                                    shape = RoundedCornerShape(4.dp)
-                                )
-                                .padding(2.dp),
-                            painter = painterResource(id = R.drawable.icon_24_member),
-                            tint = PokitTheme.colors.iconSecondary,
-                            contentDescription = "hasMemo"
-                        )
+                        Box (
+                            modifier = Modifier.size(20.dp)
+                        ) {
+                            Icon(
+                                modifier = Modifier
+                                    .height(20.dp)
+                                    .aspectRatio(1f)
+                                    .background(
+                                        color = PokitTheme.colors.backgroundPrimary,
+                                        shape = RoundedCornerShape(4.dp)
+                                    )
+                                    .padding(2.dp),
+                                painter = painterResource(id = R.drawable.icon_24_member),
+                                tint = PokitTheme.colors.iconSecondary,
+                                contentDescription = "hasMemo"
+                            )
+                        }
                     }
                 }
             }

diff --git a/core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkcard/Preview.kt b/core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkcard/Preview.kt
@@ -21,7 +21,7 @@ fun LinkCardPreview() {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .background(Color.LightGray)
+                .background(Color.White)
                 .padding(12.dp),
             verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {