Merge pull request #103 from YAPP-Github/feature/TNT-249

[TNT-249] 피드백 빈 화면 UI 구현
YAPP-Github · Feb 13, 2025 · f80135b · f80135b
2 parents bd0b4c6 + 2789b4a
commit f80135b
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 28 deletions.
diff --git a/core/ui/src/main/java/co/kr/tnt/ui/component/TnTCountTopBar.kt b/core/ui/src/main/java/co/kr/tnt/ui/component/TnTCountTopBar.kt
@@ -0,0 +1,111 @@
+package co.kr.tnt.ui.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import co.kr.tnt.designsystem.theme.TnTTheme
+
+@Composable
+fun TnTCountTopBar(
+    title: String,
+    count: Int,
+    modifier: Modifier = Modifier,
+    trailingComponent: (@Composable () -> Unit)? = null,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp),
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .padding(vertical = 20.dp) // Text 를 기준으로 상하 패딩 부여
+                .weight(1f),
+        ) {
+            Text(
+                text = title,
+                color = TnTTheme.colors.neutralColors.Neutral900,
+                style = TnTTheme.typography.h2,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+                modifier = Modifier.weight(
+                    weight = 1f,
+                    fill = false,
+                ),
+            )
+            Spacer(Modifier.width(6.dp))
+            Text(
+                text = count.toString(),
+                color = TnTTheme.colors.redColors.Red500,
+                style = TnTTheme.typography.h2,
+            )
+        }
+        trailingComponent?.let { component ->
+            Spacer(Modifier.width(16.dp))
+            component()
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TnTCountTopBarPreview() {
+    TnTTheme {
+        TnTCountTopBar(
+            title = "연결된 회원 수를 확인해보세요",
+            count = 1,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TnTCountTopBarWithComponentPreview() {
+    TnTTheme {
+        TnTCountTopBar(
+            title = "연결된 회원 수를 확인해보세요",
+            count = 1,
+        ) {
+            Button(
+                onClick = { },
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = TnTTheme.colors.neutralColors.Neutral200,
+                    contentColor = TnTTheme.colors.neutralColors.Neutral50,
+                    disabledContainerColor = TnTTheme.colors.neutralColors.Neutral200,
+                    disabledContentColor = TnTTheme.colors.neutralColors.Neutral50,
+                ),
+                shape = RoundedCornerShape(8.dp),
+                contentPadding = PaddingValues(horizontal = 12.dp, vertical = 7.dp),
+                modifier = Modifier.defaultMinSize(
+                    minWidth = Dp.Hairline,
+                    minHeight = 32.dp,
+                ),
+            ) {
+                Text(
+                    text = "회원 초대하기",
+                    color = TnTTheme.colors.neutralColors.Neutral600,
+                    style = TnTTheme.typography.label2Medium,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 1,
+                )
+            }
+        }
+    }
+}
diff --git a/feature/trainer/feedback/src/main/java/co/kr/tnt/trainer/feedback/TrainerFeedbackScreen.kt b/feature/trainer/feedback/src/main/java/co/kr/tnt/trainer/feedback/TrainerFeedbackScreen.kt
@@ -1,12 +1,19 @@
 package co.kr.tnt.trainer.feedback
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
+import androidx.compose.foundation.layout.height
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
+import co.kr.tnt.designsystem.theme.TnTTheme
+import co.kr.tnt.ui.component.TnTCountTopBar
 
 @Composable
 @Suppress("UnusedParameter")
@@ -18,10 +25,36 @@ internal fun TrainerFeedbackRoute(
 
 @Composable
 private fun TrainerFeedbackScreen() {
-    Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(TnTTheme.colors.neutralColors.Neutral100),
+    ) {
+        TnTCountTopBar(
+            title = "피드백",
+            count = 0,
+        )
+        EmptyFeedback()
+    }
+}
+
+@Composable
+private fun EmptyFeedback() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Text(
+            text = "아직 등록된 기록이 없어요",
+            color = TnTTheme.colors.neutralColors.Neutral600,
+            style = TnTTheme.typography.body2Bold,
+        )
+        Spacer(modifier = Modifier.height(4.dp))
         Text(
-            text = "trainer feedback",
-            modifier = Modifier.padding(innerPadding),
+            text = "트레이니가 기록을 전송하면 여기에 표시돼요!",
+            color = TnTTheme.colors.neutralColors.Neutral400,
+            style = TnTTheme.typography.label1Medium,
         )
     }
 }
diff --git a/feature/trainer/members/src/main/java/co/kr/tnt/trainer/members/TrainerMembersScreen.kt b/feature/trainer/members/src/main/java/co/kr/tnt/trainer/members/TrainerMembersScreen.kt
@@ -4,14 +4,11 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
 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.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -35,6 +32,7 @@ import co.kr.tnt.designsystem.component.card.TnTMemberProfileCard
 import co.kr.tnt.designsystem.theme.TnTTheme
 import co.kr.tnt.domain.model.MemberInfo
 import co.kr.tnt.trainer.members.TrainerMemberContract.TrainerMemberUiState
+import co.kr.tnt.ui.component.TnTCountTopBar
 import coil.compose.rememberAsyncImagePainter
 import coil.request.ImageRequest
 
@@ -65,26 +63,13 @@ private fun TrainerMembersScreen(
             modifier = Modifier.fillMaxSize(),
         ) {
             item {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(20.dp),
-                ) {
-                    Text(
-                        text = "내 회원",
-                        color = TnTTheme.colors.neutralColors.Neutral900,
-                        style = TnTTheme.typography.h2,
-                    )
-                    Spacer(Modifier.width(6.dp))
-                    Text(
-                        text = state.memberList.size.toString(),
-                        color = TnTTheme.colors.redColors.Red500,
-                        style = TnTTheme.typography.h2,
-                    )
-                    Spacer(Modifier.weight(1f))
-                    MemberInviteButton(onClickInviteButton)
-                }
+                TnTCountTopBar(
+                    title = "내 회원",
+                    count = state.memberList.size,
+                    trailingComponent = {
+                        MemberInviteButton(onClickInviteButton)
+                    },
+                )
             }
             if (state.memberList.isNotEmpty()) {
                 items(state.memberList) { member ->