[UI] #83 링크 리스트 관련 UI 수정 (#84)

* [UI] #83 링크 상세 bottomSheet UI 수정 - 링크 상세 bottomSheet에서 bottomSheet를 제거한 부분을 별도의 LinkDetailBottomSheetContent로 분리 * [FIX] #83 링크 리스트 아이템 클릭 이벤트 변경 - 케밥 버튼 클릭시 링크 상세 bottomSheet 표시 - 링크 클릭시 해당 링크 url로 이동 (웹 브라우져) * [UI] #83 링크 리스트 아이템 UI에 즐겨찾기, 체크박스, 메모 icn, 맴버 icn 추가 * [UI] #83 검색/포킷 상세 화면에서 링크 리스트 내 북마크 표시여부가 보여지도록 수정, 검색 화면에서 북마크 변경이 안되었던 문제 수정 * [CHORE] #83 ktlint 적용
YAPP-Github · Dec 1, 2024 · 464a6a3 · 464a6a3
1 parent 6f97dfd
commit 464a6a3
Show file tree

Hide file tree

Showing 23 changed files with 470 additions and 439 deletions.
diff --git a/core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/checkbox/PokitCheckbox.kt b/core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/checkbox/PokitCheckbox.kt
@@ -21,11 +21,12 @@ import pokitmons.pokit.core.ui.R
 import pokitmons.pokit.core.ui.components.atom.checkbox.attributes.PokitCheckboxShape
 import pokitmons.pokit.core.ui.components.atom.checkbox.attributes.PokitCheckboxStyle
 import pokitmons.pokit.core.ui.theme.PokitTheme
+import pokitmons.pokit.core.ui.utils.conditional
 
 @Composable
 fun PokitCheckbox(
     checked: Boolean,
-    onClick: (Boolean) -> Unit,
+    onClick: ((Boolean) -> Unit)? = null,
     style: PokitCheckboxStyle = PokitCheckboxStyle.STROKE,
     shape: PokitCheckboxShape = PokitCheckboxShape.RECTANGLE,
     enabled: Boolean = true,
@@ -44,14 +45,18 @@ fun PokitCheckbox(
             .clip(
                 shape = checkboxShape
             )
-            .clickable(
-                indication = null,
-                interactionSource = remember { MutableInteractionSource() },
-                enabled = enabled,
-                onClick = {
-                    onClick(!checked)
-                }
-            )
+            .conditional(
+                condition = (onClick != null)
+            ) {
+                clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() },
+                    enabled = enabled,
+                    onClick = {
+                        onClick?.invoke(!checked)
+                    }
+                )
+            }
             .background(
                 color = backgroundColor
             )

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
@@ -8,18 +8,22 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -30,6 +34,8 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.components.atom.checkbox.PokitCheckbox
+import pokitmons.pokit.core.ui.components.atom.checkbox.attributes.PokitCheckboxStyle
 import pokitmons.pokit.core.ui.theme.PokitTheme
 import pokitmons.pokit.core.ui.utils.noRippleClickable
 
@@ -44,6 +50,10 @@ fun<T> LinkCard(
     onClickKebab: (T) -> Unit,
     onClickItem: (T) -> Unit,
     modifier: Modifier = Modifier,
+    hasMemo: Boolean = false,
+    hasMember: Boolean = false,
+    bookmark: Boolean? = null,
+    checked: Boolean? = null,
 ) {
     Box(modifier = modifier) {
         Row(
@@ -65,6 +75,38 @@ fun<T> LinkCard(
                         .background(Color.Gray),
                     contentScale = ContentScale.Crop
                 )
+
+                checked?.let {
+                    Box(
+                        modifier = Modifier
+                            .offset(x = 8.dp, y = 8.dp)
+                            .size(24.dp),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        PokitCheckbox(
+                            checked = it,
+                            style = PokitCheckboxStyle.FILLED
+                        )
+                    }
+                }
+
+                bookmark?.let {
+                    Box(
+                        modifier = Modifier
+                            .offset(x = 8.dp, y = 54.dp)
+                            .size(32.dp)
+                            .clip(CircleShape)
+                            .background(PokitTheme.colors.backgroundBaseIcon),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Icon(
+                            modifier = Modifier.size(24.dp),
+                            painter = painterResource(id = R.drawable.icon_24_star),
+                            contentDescription = "bookmark",
+                            tint = if (it) PokitTheme.colors.brand else PokitTheme.colors.iconDisable
+                        )
+                    }
+                }
             }
 
             Spacer(modifier = Modifier.width(12.dp))
@@ -119,34 +161,72 @@ fun<T> LinkCard(
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.spacedBy(6.dp)
                 ) {
-                    badgeText?.let { badge ->
+                    if (notRead) {
                         Text(
-                            text = badge,
+                            text = stringResource(id = R.string.not_read),
                             modifier = Modifier
+                                .border(
+                                    width = 1.dp,
+                                    color = PokitTheme.colors.brand,
+                                    shape = RoundedCornerShape(4.dp)
+                                )
                                 .background(
-                                    color = PokitTheme.colors.backgroundPrimary,
+                                    color = PokitTheme.colors.backgroundBase,
                                     shape = RoundedCornerShape(4.dp)
                                 )
                                 .padding(horizontal = 8.dp, vertical = 4.dp),
-                            style = PokitTheme.typography.label4.copy(color = PokitTheme.colors.textTertiary)
+                            style = PokitTheme.typography.label4.copy(color = PokitTheme.colors.brand)
                         )
                     }
 
-                    if (notRead) {
-                        Text(
-                            text = stringResource(id = R.string.not_read),
+                    if (badgeText?.isNotBlank() == true) {
+                        Box(
+                            Modifier.weight(1f)
+                        ) {
+                            Text(
+                                text = badgeText,
+                                modifier = Modifier
+                                    .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 (hasMemo) {
+                        Icon(
                             modifier = Modifier
-                                .border(
-                                    width = 1.dp,
-                                    color = PokitTheme.colors.borderTertiary,
+                                .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.backgroundBase,
+                                    color = PokitTheme.colors.backgroundPrimary,
                                     shape = RoundedCornerShape(4.dp)
                                 )
-                                .padding(horizontal = 8.dp, vertical = 4.dp),
-                            style = PokitTheme.typography.label4.copy(color = PokitTheme.colors.textTertiary)
+                                .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
@@ -28,12 +28,15 @@ fun LinkCardPreview() {
             LinkCard(
                 title = "타이틀\n컴포스는 왜 이런가",
                 sub = "2024.06.25. youtube.comyoutube.comyoutube.comyoutube",
-                badgeText = "텍스트",
+                badgeText = "텍스트텍스트텍스트텍스트텍스트",
                 painter = painterResource(id = R.drawable.icon_24_link),
                 notRead = true,
                 item = 3,
                 onClickKebab = { value: Int -> },
-                onClickItem = { value: Int -> }
+                onClickItem = { value: Int -> },
+                bookmark = false,
+                hasMemo = true,
+                hasMember = true
             )
 
             LinkCard(
@@ -44,7 +47,8 @@ fun LinkCardPreview() {
                 notRead = true,
                 item = 3,
                 onClickKebab = { value: Int -> },
-                onClickItem = { value: Int -> }
+                onClickItem = { value: Int -> },
+                checked = true
             )
         }
     }

diff --git a/...et/subcomponents/ModifyBottomSheetItem.kt → ...ts/block/texticonbutton/TextIconButton.kt b/...et/subcomponents/ModifyBottomSheetItem.kt → ...ts/block/texticonbutton/TextIconButton.kt
@@ -1,4 +1,4 @@
-package pokitmons.pokit.core.ui.components.template.modifybottomsheet.subcomponents
+package pokitmons.pokit.core.ui.components.block.texticonbutton
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
@@ -10,16 +10,19 @@ 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.graphics.ColorFilter
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.theme.PokitTheme
 import pokitmons.pokit.core.ui.utils.noRippleClickable
 
 @Composable
-internal fun ModifyBottomSheetItem(
+internal fun TextIconButton(
     onClick: () -> Unit,
     title: String,
     painter: Painter,
+    tintColor: Color? = PokitTheme.colors.iconPrimary,
 ) {
     Row(
         modifier = Modifier
@@ -39,7 +42,8 @@ internal fun ModifyBottomSheetItem(
         Image(
             modifier = Modifier.size(24.dp),
             painter = painter,
-            contentDescription = null
+            contentDescription = null,
+            colorFilter = tintColor?.let { ColorFilter.tint(it) }
         )
     }
 }