[UI] 모임 페이지 구현 완료

app/build.gradle.kts

@@ -1,3 +1,5 @@
+import org.gradle.kotlin.dsl.implementation
+
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
@@ -50,6 +52,9 @@ dependencies {
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
     implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.navigation.runtime.android)
+    implementation(libs.accompanist.pager)
+    implementation(libs.accompanist.pager.indicators)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt

@@ -30,22 +30,24 @@ fun OptionChipButton(
     modifier: Modifier = Modifier,
     text: String,
     isFilled: Boolean = false,
+    isSelected: Boolean? = null,  // 추가
     onClick: () -> Unit,
 ) {
     var isClicked by remember { mutableStateOf(false) }
+    val checked = isSelected ?: isClicked
 
     val textColor = when {
         isFilled -> colors.White
-        isClicked -> colors.Purple
+        checked -> colors.Purple
         else -> colors.Grey01
     }
     val backgroundColor = when {
-        isFilled && isClicked -> colors.Purple
+        isFilled && checked -> colors.Purple
         isFilled -> colors.DarkGrey
         else -> Color.Transparent
     }
     val borderColor = when {
-        !isFilled && isClicked -> colors.Purple
+        !isFilled && checked -> colors.Purple
         !isFilled -> colors.Grey02
         else -> Color.Transparent
     }
@@ -62,7 +64,7 @@ fun OptionChipButton(
                 shape = RoundedCornerShape(20.dp)
             )
             .clickable {
-                isClicked = !isClicked
+                if (isSelected == null) isClicked = !isClicked
                 onClick()
             }
             .padding(vertical = 8.dp, horizontal = 12.dp),

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

@@ -1,5 +1,6 @@
 package com.texthip.thip.ui.common.cards
 
+import androidx.compose.ui.graphics.Color
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -34,20 +35,23 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 
 @Composable
-fun NotificationCard(
+fun CardAlarm(
     modifier: Modifier = Modifier,
+    badgeText: String,
     title: String,
     message: String,
     timeAgo: String,
     isRead: Boolean = false,
+    containerColorUnread: Color = colors.DarkGrey,  // 안읽음 상태의 배경색
+    containerColorRead: Color = colors.DarkGrey02, // 읽음 상태의 배경색
     onClick: () -> Unit = {}
 ) {
     Card(
         modifier = modifier
             .fillMaxWidth()
             .clickable { onClick() },
         colors = CardDefaults.cardColors(
-            containerColor = if (isRead) colors.DarkGrey else colors.DarkGrey02
+            containerColor = if (isRead) containerColorUnread else containerColorRead
         ),
         elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
         shape = RoundedCornerShape(12.dp)
@@ -65,7 +69,6 @@ fun NotificationCard(
                 // 뱃지
                 Box(
                     modifier = Modifier
-                        .size(width = 40.dp, height = 24.dp)
                         .clip(RoundedCornerShape(13.dp))
                         .border(
                             width = 1.dp,
@@ -75,7 +78,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 +152,9 @@ fun PreviewNotificationCards() {
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         // 안읽은 알림
-        NotificationCard(
+        CardAlarm(
             title = "같이 읽기를 시작했어요!",
+            badgeText = "모임",
             message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
             timeAgo = "12",
             isRead = isRead
@@ -157,12 +163,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/cards/CardInputBook.kt

@@ -74,7 +74,7 @@ fun CardInputBook(
             )
             Spacer(modifier = Modifier.height(8.dp))
             Text(
-                text = "$author 저",
+                text = stringResource(R.string.card_input_author, author),
                 style = typography.view_m500_s12_h20,
                 color = colors.Grey01
             )

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

@@ -0,0 +1,218 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+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.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardItemRoom(
+    modifier: Modifier = Modifier,
+    title: String,
+    participants: Int,
+    maxParticipants: Int,
+    isRecruiting: Boolean,
+    endDate: Int,
+    imageRes: Int? = R.drawable.bookcover_sample,
+    hasBorder: Boolean = false,
+    onClick: () -> Unit = {}
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .then(
+                if (hasBorder)
+                    Modifier
+                        .border(
+                            width = 1.dp,
+                            color = colors.Grey02,
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                else Modifier
+            )
+            .clickable { onClick() },
+        colors = CardDefaults.cardColors(
+            containerColor = colors.DarkGrey50
+        ),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp)
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                // 이미지
+                Box(
+                    modifier = Modifier
+                        .size(width = 80.dp, height = 107.dp)
+                ) {
+                    imageRes?.let {
+                        Image(
+                            painter = painterResource(id = it),
+                            contentDescription = null,
+                            modifier = Modifier.fillMaxSize(),
+                            contentScale = ContentScale.Crop
+                        )
+                    }
+                }
+
+                Spacer(modifier = Modifier.width(16.dp))
+
+                Column(
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Spacer(modifier = Modifier.height(16.dp))
+                    Text(
+                        text = title,
+                        color = colors.White,
+                        style = typography.smalltitle_sb600_s18_h24,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    Spacer(modifier = Modifier.height(8.dp))
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        Icon(
+                            modifier = Modifier.size(20.dp),
+                            painter = painterResource(id = R.drawable.ic_group),
+                            contentDescription = "그룹 아이콘",
+                            tint = Color.White
+                        )
+                        Spacer(modifier = Modifier.width(4.dp))
+
+                        if (isRecruiting) {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Text(
+                                    text = stringResource(
+                                        R.string.card_item_participant_count,
+                                        participants,
+                                    ),
+                                    style = typography.menu_sb600_s12,
+                                    color = colors.White
+                                )
+                                Spacer(modifier = Modifier.width(2.dp))
+
+                                Text(
+                                    text = stringResource(
+                                        R.string.card_item_participant_count_max,
+                                        maxParticipants
+                                    ),
+                                    style = typography.info_m500_s12,
+                                    color = colors.Grey
+                                )
+                            }
+                        } else {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Text(
+                                    text = stringResource(R.string.card_item_participant, participants),
+                                    style = typography.menu_sb600_s12,
+                                    color = colors.White
+                                )
+                                Spacer(modifier = Modifier.width(2.dp))
+
+                                Text(
+                                    text = stringResource(R.string.card_item_participant_string),
+                                    style = typography.info_m500_s12,
+                                    color = colors.Grey
+                                )
+                            }
+                        }
+                    }
+                    Spacer(modifier = Modifier.height(5.dp))
+
+                    Text(
+                        text = stringResource(
+                            R.string.card_item_end_date,
+                            endDate
+                        ) + if (isRecruiting) stringResource(
+                            R.string.card_item_end
+                        ) else stringResource(R.string.card_item_finish),
+
+                        color = if (isRecruiting) colors.Red else colors.Grey01,
+                        style = typography.menu_sb600_s12_h20,
+                        maxLines = 1
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun CardItemRoomPreview() {
+    ThipTheme {
+        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = true,
+                endDate = 3,
+                imageRes = R.drawable.bookcover_sample
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = false,
+                endDate = 3,
+                imageRes = R.drawable.bookcover_sample
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = true,
+                endDate = 3,
+                imageRes = R.drawable.bookcover_sample,
+                hasBorder = true
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = false,
+                endDate = 3,
+                imageRes = R.drawable.bookcover_sample,
+                hasBorder = true
+            )
+        }
+    }
+}