[UI] 데이터 없는 화면, 사용자 찾기 화면 구현

app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt

@@ -1,6 +1,7 @@
 package com.texthip.thip.ui.common.header
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -41,7 +42,8 @@ fun AuthorHeader(
     showThipNum: Boolean = false,
     thipNum: Int? = null,
     profileImageSize: Dp = 54.dp,
-    onButtonClick: () -> Unit = {}
+    onButtonClick: () -> Unit = {},
+    onThipNumClick: () -> Unit = {}
 ) {
     Row(
         modifier = modifier
@@ -84,31 +86,31 @@ fun AuthorHeader(
         }
         if (showButton) {
             OutlinedButton(
-            modifier = Modifier
-                .then(
-                    if (buttonWidth != null)
-                        Modifier
-                            .width(buttonWidth)
-                            .height(33.dp)
-                    else Modifier
-                ),
-            text = buttonText,
-            textStyle = typography.view_m500_s14,
-            onClick = onButtonClick
+                modifier = Modifier
+                                .width(buttonWidth)
+                                .height(33.dp),
+                text = buttonText,
+                textStyle = typography.view_m500_s14,
+                onClick = onButtonClick
             )
         }
-        if(showThipNum && thipNum!=null){
-            Text(
-                text = stringResource(R.string.thip_num,thipNum),
-                style = typography.view_r400_s11_h20,
-                color = colors.White
-            )
-            Spacer(modifier = Modifier.width(18.dp))
-            Icon(
-                painter = painterResource(R.drawable.ic_chevron),
-                contentDescription = null,
-                tint = colors.White,
-            )
+        if (showThipNum && thipNum != null) {
+            Row(
+                modifier = Modifier.clickable(onClick = onThipNumClick),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(R.string.thip_num, thipNum)+ stringResource(R.string.thip_ing),
+                    style = typography.view_r400_s11_h20,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.width(18.dp))
+                Icon(
+                    painter = painterResource(R.drawable.ic_chevron),
+                    contentDescription = null,
+                    tint = colors.White,
+                )
+            }
         }
     }
 }
@@ -131,7 +133,10 @@ fun PreviewAuthorHeader() {
                 badgeText = "칭호칭호칭호",
                 showButton = false,
                 showThipNum = true,
-                thipNum = 10
+                thipNum = 10,
+                onThipNumClick = {
+
+                }
             )
         }
     }

app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
@@ -57,14 +58,13 @@ fun FeedSubscribeBarlist(
                         color = colors.White
                     )
                 ) {
-                    append("${followerProfileImageUrls.size}명")
-                }
+                    append(stringResource(R.string.thip_num, followerProfileImageUrls.size))                }
                 withStyle(
                     style = SpanStyle(
                         color = colors.Grey
                     )
                 ) {
-                    append("이 띱 하는중")
+                    append(stringResource(R.string.thip_ing))
                 }
             },
             style = typography.info_r400_s12,
@@ -74,25 +74,28 @@ fun FeedSubscribeBarlist(
         Row(
             verticalAlignment = Alignment.CenterVertically
         ) {
-            followerProfileImageUrls.take(5).reversed().forEachIndexed { index, imageUrl ->
-                AsyncImage(
-                    model = imageUrl,
+            if (followerProfileImageUrls.isNotEmpty()) {
+                val previewList = followerProfileImageUrls.take(5)
+                previewList.reversed().forEachIndexed { index, imageUrl ->
+                    AsyncImage(
+                        model = imageUrl,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .size(24.dp)
+                            .clip(CircleShape)
+                            .background(Color.LightGray)
+                    )
+
+                    val isLast = index == previewList.lastIndex
+                    Spacer(modifier = Modifier.width(if (isLast) 15.dp else 4.dp))
+                }
+
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_chevron),
                     contentDescription = null,
-                    modifier = Modifier
-                        .size(24.dp)
-                        .clip(CircleShape)
-                        .background(Color.LightGray)
+                    tint = colors.Grey
                 )
-
-                val isLast = index == followerProfileImageUrls.take(5).lastIndex
-                Spacer(modifier = Modifier.width(if (isLast) 15.dp else 4.dp))
             }
-
-            Icon(
-                painter = painterResource(id = R.drawable.ic_chevron),
-                contentDescription = null,
-                tint = colors.Grey
-            )
         }
     }
 }

app/src/main/java/com/texthip/thip/ui/feed/component/LiveSearchPeopleResult.kt

@@ -0,0 +1,90 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun SearchPeopleResult(
+    modifier: Modifier = Modifier,
+    peopleList: List<MySubscriptionData>,
+    onThipNumClick: (MySubscriptionData) -> Unit = {}
+) {
+    LazyColumn (modifier = modifier){
+        itemsIndexed(peopleList) { index, user ->
+            AuthorHeader(
+                profileImage = user.profileImageUrl,
+                nickname = user.nickname,
+                badgeText = user.role,
+                profileImageSize = 36.dp,
+                showButton = false,
+                showThipNum = true,
+                thipNum = user.subscriberCount,
+                onThipNumClick = { onThipNumClick(user) }
+            )
+            if (index < peopleList.size - 1) {
+                Spacer(
+                    modifier = Modifier
+                        .padding(vertical = 12.dp, horizontal = 20.dp)
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(colors.DarkGrey02)
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchPeopleResultPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            SearchPeopleResult(
+                peopleList = listOf(
+                    MySubscriptionData(
+                        profileImageUrl = null,
+                        nickname = "Thiper_Official",
+                        role = "공식 인플루언서",
+                        roleColor = colors.NeonGreen,
+                        subscriberCount = 50,
+                        isSubscribed = false
+                    ),
+                    MySubscriptionData(
+                        profileImageUrl = null,
+                        nickname = "Thiper_Writer",
+                        role = "작가",
+                        roleColor = colors.Yellow,
+                        subscriberCount = 120,
+                        isSubscribed = true
+                    ),
+                    MySubscriptionData(
+                        profileImageUrl = null,
+                        nickname = "Thiper_Newbie",
+                        role = "칭호칭호",
+                        roleColor = colors.White,
+                        subscriberCount = 0,
+                        isSubscribed = false
+                    )
+                )
+            )
+        }
+    }
+}