[UI] 모임 페이지 (#25)

app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt

@@ -34,8 +34,9 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 
 @Composable
-fun NotificationCard(
+fun CardAlarm(
     modifier: Modifier = Modifier,
+    badgeText: String,
     title: String,
     message: String,
     timeAgo: String,
@@ -65,7 +66,6 @@ fun NotificationCard(
                 // 뱃지
                 Box(
                     modifier = Modifier
-                        .size(width = 40.dp, height = 24.dp)
                         .clip(RoundedCornerShape(13.dp))
                         .border(
                             width = 1.dp,
@@ -75,7 +75,9 @@ fun NotificationCard(
                     contentAlignment = Alignment.Center
                 ) {
                     Text(
-                        text = stringResource(R.string.group),
+                        modifier = Modifier
+                            .padding(horizontal = 10.dp, vertical = 2.dp),
+                        text = badgeText,
                         color = if (isRead) colors.Grey01 else colors.Grey,
                         style = typography.menu_sb600_s12_h20
                     )
@@ -147,8 +149,9 @@ fun PreviewNotificationCards() {
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         // 안읽은 알림
-        NotificationCard(
+        CardAlarm(
             title = "같이 읽기를 시작했어요!",
+            badgeText = "모임",
             message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
             timeAgo = "12",
             isRead = isRead
@@ -157,12 +160,37 @@ fun PreviewNotificationCards() {
         }
 
         // 읽은 알림
-        NotificationCard(
+        CardAlarm(
             title = "같이 읽기를 시작했어요!",
+            badgeText = "모임",
             message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
             timeAgo = "12",
             isRead = true
         )
+
+        CardAlarm(
+            title = "같이 읽기를 시작했어요!",
+            badgeText = "피드",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12",
+            isRead = false
+        )
+
+        CardAlarm(
+            title = "같이 읽기를 시작했어요!",
+            badgeText = "좋아요",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12",
+            isRead = isRead
+        )
+
+        CardAlarm(
+            title = "같이 읽기를 시작했어요!",
+            badgeText = "댓글",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12",
+            isRead = isRead
+        )
     }
 
 }

app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt

@@ -2,6 +2,9 @@ package com.texthip.thip.ui.common.forms
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -27,60 +30,103 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun FormTextFieldDefault(
     modifier: Modifier = Modifier,
-    hint: String
+    hint: String,
+    showLimit: Boolean = false,
+    limit: Int = 10,
+    showIcon: Boolean = true
 ) {
     var text by rememberSaveable { mutableStateOf("") }
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
 
-    OutlinedTextField(
-        value = text,
-        onValueChange = { text = it },
-        placeholder = {
-            Text(
-                text = hint,
-                color = colors.Grey02,
-                style = myStyle
-            )
-        },
-        textStyle = myStyle,
-        modifier = modifier.size(width = 320.dp, height = 48.dp),
-        shape = RoundedCornerShape(12.dp),
-        colors = TextFieldDefaults.colors(
-            focusedTextColor = colors.White,
-            focusedIndicatorColor = Color.Transparent,
-            unfocusedIndicatorColor = Color.Transparent,
-            focusedContainerColor = colors.Black,
-            unfocusedContainerColor = colors.Black,
-            cursorColor = colors.NeonGreen
-        ),
-        trailingIcon = {
-            if (text.isNotEmpty()) {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle_white),
-                    contentDescription = "Clear text",
-                    modifier = Modifier.clickable { text = "" },
-                    tint = Color.Unspecified
+    // 글자수 제한 적용
+    val displayText = if (showLimit && text.length > limit) text.substring(0, limit) else text
+
+    Box(modifier = modifier) {
+        OutlinedTextField(
+            value = displayText,
+            onValueChange = {
+                // 글자수 제한 적용
+                text = if (showLimit && it.length > limit) it.substring(0, limit) else it
+            },
+            placeholder = {
+                Text(
+                    text = hint,
+                    color = colors.Grey02,
+                    style = myStyle
                 )
-            } else {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle),
-                    contentDescription = "Clear text"
+            },
+            textStyle = myStyle,
+            modifier = Modifier
+                .size(width = 320.dp, height = 48.dp),
+            shape = RoundedCornerShape(12.dp),
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = colors.White,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                focusedContainerColor = colors.Black,
+                unfocusedContainerColor = colors.Black,
+                cursorColor = colors.NeonGreen
+            ),
+            trailingIcon = {
+                if (showIcon) {
+                    if (text.isNotEmpty()) {
+                        Icon(
+                            painter = painterResource(id = R.drawable.ic_x_circle_white),
+                            contentDescription = "Clear text",
+                            modifier = Modifier.clickable { text = "" },
+                            tint = Color.Unspecified
+                        )
+                    } else {
+                        Icon(
+                            painter = painterResource(id = R.drawable.ic_x_circle),
+                            contentDescription = "Clear text"
+                        )
+                    }
+                }
+            },
+            singleLine = true
+        )
+
+        // 글자수 제한 표시 (오른쪽 상단)
+        if (showLimit) {
+            Box(
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .padding(end = 14.dp)
+            ) {
+                Text(
+                    text = "${text.length}/$limit",
+                    color = colors.White,
+                    style = typography.info_r400_s12_h24
                 )
             }
-        },
-        singleLine = true
-    )
+        }
+    }
 }
 
+
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun FormTextFieldDefaultPreview() {
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
-        FormTextFieldDefault(
-            hint = "이곳에 텍스트를 입력하세요"
-        )
+        Column {
+            FormTextFieldDefault(
+                hint = "이곳에 텍스트를 입력하세요",
+                showLimit = true,
+                limit = 20,
+                showIcon = false
+            )
+            Spacer(modifier = Modifier.padding(vertical = 8.dp))
+
+            FormTextFieldDefault(
+                hint = "이곳에 텍스트를 입력하세요",
+                showLimit = false,
+                limit = 10,
+                showIcon = true
+            )
+        }
     }
 }

app/src/main/java/com/texthip/thip/ui/myPage/groupPage/GroupPageScreen.kt

@@ -19,7 +19,9 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
+import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.FloatingButton
+import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
 import com.texthip.thip.ui.myPage.viewModel.MyPageViewModel
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
@@ -47,7 +49,12 @@ fun GroupPageScreen(
         ) {
             // 상단바
             item {
-                MainTopAppBar()
+                LogoTopAppBar(
+                    leftIcon = painterResource(R.drawable.ic_done),
+                    hasNotification = false,
+                    onLeftClick = { },
+                    onRightClick = { }
+                )
                 Spacer(Modifier.height(16.dp))
             }
             // 검색창