[ui]: Feed - 내 구독 리스트 (구독취소시 구독으로 텍스트 변경되는 버전으로)(#37)

Author: JJUYAAA

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

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -23,6 +24,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -38,6 +40,7 @@ fun AuthorHeader(
     nickname: String,
     badgeText: String,
     buttonText: String,
+    buttonWidth: Dp? = null,
     onButtonClick: () -> Unit = {}
 ) {
     Row(
@@ -81,9 +84,15 @@ fun AuthorHeader(
         }
         OutlinedButton(
             modifier = Modifier
-                .size(width = 51.dp, height = 35.dp),
+                .then(
+                    if (buttonWidth != null)
+                        Modifier
+                            .width(buttonWidth)
+                            .height(33.dp)
+                    else Modifier
+                ),
             text = buttonText,
-            textStyle = typography.menu_m500_s14_h24,
+            textStyle = typography.view_m500_s14,
             onClick = onButtonClick
         )
     }
@@ -97,7 +106,8 @@ fun PreviewAuthorHeader() {
             profileImage = null,
             nickname = "열자자제한열열자제한",
             badgeText = "칭호칭호칭호",
-            buttonText = "구독"
+            buttonText = "구독",
+            buttonWidth = 60.dp
         )
     }
 }

app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt

@@ -25,7 +25,7 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun ToastWithDate(
     modifier: Modifier = Modifier,
     message: String,
-    date: String
+    date: String? = null
 ) {
     Box(
         modifier = modifier
@@ -41,18 +41,20 @@ fun ToastWithDate(
         Row(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween
+            horizontalArrangement = if (date != null) Arrangement.SpaceBetween else Arrangement.Start
         ) {
             Text(
                 text = message,
                 color = colors.White,
                 style = typography.view_m500_s12_h20
             )
-            Text(
-                text = date,
-                color = colors.Grey02,
-                style = typography.timedate_r400_s11
-            )
+            if (date != null) {
+                Text(
+                    text = date,
+                    color = colors.Grey02,
+                    style = typography.timedate_r400_s11
+                )
+            }
         }
     }
 }

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

@@ -0,0 +1,87 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun MySubscriptionList(
+    members: List<MySubscriptionData>,
+    onUnsubscribe: (String) -> Unit
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 20.dp)
+    ) {
+        members.forEachIndexed { index, member ->
+            AuthorHeader(
+                profileImage = member.profileImageUrl,
+                nickname = member.nickname,
+                badgeText = member.role,
+                buttonText = stringResource(if(member.isSubscribed) R.string.subscribe_cancel else R.string.subscribe),
+                buttonWidth = 73.dp,
+                onButtonClick = {
+                    onUnsubscribe(member.nickname)
+                }
+            )
+
+            if (index != members.lastIndex) {
+                HorizontalDivider(
+                    color = colors.DarkGrey02,
+                    thickness = 1.dp
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MySubscriptionListPrev() {
+    MySubscriptionList(
+        members = listOf(
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100,
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thipthip",
+                role = "공식 인플루언서",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 50
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thip01",
+                role = "작가",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 100
+            ),
+        ),
+        onUnsubscribe = {}
+    )
+}

app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt

@@ -0,0 +1,13 @@
+package com.texthip.thip.ui.feed.mock
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+
+data class MySubscriptionData(
+    val profileImageUrl: Painter? = null,
+    val nickname: String,
+    val role: String,
+    val roleColor: Color,
+    val subscriberCount: Int,
+    var isSubscribed: Boolean = true
+)

app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt

@@ -1,19 +1,42 @@
 package com.texthip.thip.ui.feed.screen
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
+import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
 fun FeedScreen(navController: NavController) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
     ) {
-        Text(text = "Feed Screen")
+        LogoTopAppBar(
+            leftIcon = painterResource(R.drawable.ic_plusfriend),
+            hasNotification = true,
+            onLeftClick = {},
+            onRightClick = {}
+        )
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxSize()
+        ) {
+
+        }
     }
 }