✨ 게시글 하단 디자인 변경

Team-Walkie · Aug 1, 2024 · fadb7aa · fadb7aa
1 parent 314c251
commit fadb7aa
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 103 deletions.
diff --git a/presentation/src/main/java/com/whyranoid/presentation/component/community/PostContentItem.kt b/presentation/src/main/java/com/whyranoid/presentation/component/community/PostContentItem.kt
@@ -8,15 +8,21 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.FavoriteBorder
 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.graphicsLayer
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.whyranoid.domain.model.post.Post
-import com.whyranoid.presentation.icons.buttoniconpack.CommentButtonIcon
-import com.whyranoid.presentation.icons.buttoniconpack.HeartButtonIcon
+import com.whyranoid.presentation.R
+import com.whyranoid.presentation.component.text.ExpandableText
 import com.whyranoid.presentation.theme.WalkieColor
 import com.whyranoid.presentation.theme.WalkieTypography
 
@@ -39,42 +45,65 @@ fun PostContentItem(
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             Text(
-                text = "좋아요 ${post.likeCount}",
+                text = post.author.nickname,
                 style = WalkieTypography.Body1
             )
 
             Row {
 
                 Icon(
                     modifier = Modifier
-                        .size(20.dp)
+                        .size(28.dp)
+                        .clip(CircleShape)
                         .clickable {
                             onLikeClicked(post.id)
-                        },
-                    imageVector = HeartButtonIcon,
+                        }
+                        .padding(2.dp),
+                    imageVector = Icons.Outlined.FavoriteBorder,
                     contentDescription = "좋아요 버튼",
                     tint = if (post.isLiked) WalkieColor.Primary else WalkieColor.GrayBorder
                 )
 
-                Spacer(modifier = Modifier.size(16.dp))
+                Spacer(modifier = Modifier.size(2.dp))
+
+                Text(
+                    modifier = Modifier.align(Alignment.CenterVertically),
+                    text = post.likeCount.toString(),
+                    style = WalkieTypography.Body1_Normal,
+                    color = WalkieColor.GrayBorder
+                )
+
+
+                Spacer(modifier = Modifier.size(4.dp))
 
                 Icon(
                     modifier = Modifier
-                        .size(20.dp)
+                        .graphicsLayer(scaleX = -1f)
+                        .size(28.dp)
+                        .clip(CircleShape)
                         .clickable {
                             onCommentClicked(post)
-                        },
-                    imageVector = CommentButtonIcon,
+                        }
+                        .padding(3.dp),
+                    painter = painterResource(id = R.drawable.ic_comment_outlined_button),
                     contentDescription = "댓글 버튼",
+                    tint = WalkieColor.GrayBorder
+                )
+
+                Spacer(modifier = Modifier.size(2.dp))
+
+                Text(
+                    modifier = Modifier.align(Alignment.CenterVertically),
+                    text = "?", // todo replace real count
+                    style = WalkieTypography.Body1_Normal,
+                    color = WalkieColor.GrayBorder
                 )
             }
         }
 
         Spacer(modifier = Modifier.size(13.dp))
 
-        Text(
-            text = post.contents,
-            style = WalkieTypography.Body1_Normal
-        )
+        ExpandableText(text = post.contents, style = WalkieTypography.Body1_Normal)
     }
-}
+}
+
diff --git a/presentation/src/main/java/com/whyranoid/presentation/component/text/ExpandableText.kt b/presentation/src/main/java/com/whyranoid/presentation/component/text/ExpandableText.kt
@@ -0,0 +1,58 @@
+package com.whyranoid.presentation.component.text
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material.LocalTextStyle
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+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.Modifier
+import androidx.compose.ui.text.TextLayoutResult
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import com.whyranoid.presentation.theme.WalkieColor
+import com.whyranoid.presentation.theme.WalkieTypography
+
+@Composable
+fun ExpandableText(
+    modifier: Modifier = Modifier,
+    text: String,
+    style: TextStyle = LocalTextStyle.current,
+    maxLines: Int = 2
+) {
+    var isExpanded by remember { mutableStateOf(false) }
+    var needsButton by remember { mutableStateOf(false) }
+    val textLayoutResultState = remember { mutableStateOf<TextLayoutResult?>(null) }
+
+    Column {
+        Text(
+            modifier = modifier,
+            text = text,
+            style = style,
+            maxLines = if (isExpanded) Int.MAX_VALUE else maxLines,
+            onTextLayout = { textLayoutResult ->
+                if (!isExpanded && textLayoutResult.hasVisualOverflow) {
+                    needsButton = true
+                }
+                textLayoutResultState.value = textLayoutResult
+            }
+        )
+
+        if (needsButton) {
+            TextButton(
+                onClick = { isExpanded = isExpanded.not() }
+            ) {
+                Text(if (isExpanded.not()) "더보기" else "접어두기", color = WalkieColor.GrayDefault)
+            }
+        }
+    }
+}
+
+@Composable
+@Preview
+fun a() {
+    ExpandableText(text = "post.contents\npost.contents\npost.contents\npost.contents")
+}
diff --git a/...tation/src/main/java/com/whyranoid/presentation/icons/buttoniconpack/CommentButtonIcon.kt b/...tation/src/main/java/com/whyranoid/presentation/icons/buttoniconpack/CommentButtonIcon.kt
diff --git a/...entation/src/main/java/com/whyranoid/presentation/icons/buttoniconpack/HeartButtonIcon.kt b/...entation/src/main/java/com/whyranoid/presentation/icons/buttoniconpack/HeartButtonIcon.kt
diff --git a/presentation/src/main/res/drawable/ic_comment_outlined_button.xml b/presentation/src/main/res/drawable/ic_comment_outlined_button.xml
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="200" android:viewportWidth="200" android:width="24dp">
+
+    <path android:fillColor="#b7b3b3" android:pathData="M33.66,183.9c-2.31,0 -4.54,-0.69 -6.45,-1.99c-3.89,-2.66 -5.74,-7.34 -4.72,-11.94l6.39,-28.78c0.43,-1.93 -0.3,-3.96 -1.87,-5.18c-16.95,-13.19 -26.29,-30.41 -26.29,-48.5c0,-39.38 44.53,-71.42 99.27,-71.42c54.74,0 99.27,32.04 99.27,71.42c0,39.38 -44.53,71.42 -99.27,71.42c-6.61,0 -13.24,-0.48 -19.71,-1.41c-2.06,-0.29 -4.18,0.19 -5.91,1.35l-34.34,23.08C38.15,183.23 35.94,183.9 33.66,183.9zM100,28.53c-47.88,0 -86.84,26.46 -86.84,58.99c0,14.17 7.63,27.91 21.49,38.69c5.33,4.15 7.83,11.09 6.37,17.69l-5.86,26.35l32.28,-21.7c4.28,-2.88 9.52,-4.07 14.63,-3.34c5.89,0.85 11.92,1.28 17.93,1.28c47.88,0 86.84,-26.46 86.84,-58.98C186.84,54.99 147.88,28.53 100,28.53z"/>
+
+</vector>