[UI] 모임페이지 홈 추가 UI 구현

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

@@ -29,29 +29,30 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun GenreChipButton(
     modifier: Modifier = Modifier,
     text: String,
-    onClick: () -> Unit = { }
+    onClick: () -> Unit = {},
+    onCloseClick: () -> Unit = {}
 ) {
     Box(
         modifier = modifier
             .border(
                 width = 1.dp,
-                color = colors.White,
+                color = colors.Grey02,
                 shape = RoundedCornerShape(20.dp)
             )
             .background(color = Color.Transparent, shape = RoundedCornerShape(12.dp))
-            .padding(top = 4.dp, bottom = 4.dp, end = 8.dp, start = 12.dp)
+            .padding(top = 8.dp, bottom = 8.dp, end = 8.dp, start = 12.dp)
             .clickable {
                 onClick()
             },
         contentAlignment = Alignment.Center,
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(2.dp),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
         ) {
             Text(
                 text = text,
-                color = colors.White,
+                color = colors.Grey01,
                 style = typography.info_r400_s12,
             )
             Icon(
@@ -60,6 +61,9 @@ fun GenreChipButton(
                 tint = Color.Unspecified,
                 modifier = Modifier
                     .size(20.dp)
+                    .clickable {
+                        onCloseClick()
+                    }
             )
         }
     }

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

@@ -5,6 +5,7 @@ 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.theme.ThipTheme
 
 @Composable
 fun GenreChipRow(
@@ -22,7 +23,13 @@ fun GenreChipRow(
                 text = genre,
                 isFilled = true,
                 isSelected = selectedIndex == idx,
-                onClick = { onSelect(idx) }
+                onClick = {
+                    if (selectedIndex == idx) {
+                        onSelect(-1)
+                    } else {
+                        onSelect(idx)
+                    }
+                }
             )
             if (idx < genres.size - 1) {
                 Spacer(modifier = modifier)
@@ -31,12 +38,14 @@ fun GenreChipRow(
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360)
+@Preview()
 @Composable
 fun PreviewGenreChipRow() {
-    GenreChipRow(
-        genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술"),
-        selectedIndex = 0,
-        onSelect = {}
-    )
+    ThipTheme {
+        GenreChipRow(
+            genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술"),
+            selectedIndex = 0,
+            onSelect = {}
+        )
+    }
 }

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

@@ -41,7 +41,7 @@ fun CardItemRoom(
     participants: Int,
     maxParticipants: Int,
     isRecruiting: Boolean,
-    endDate: Int,
+    endDate: Int? = null,
     imageRes: Int? = R.drawable.bookcover_sample,
     hasBorder: Boolean = false,
     onClick: () -> Unit = {}
@@ -91,9 +91,11 @@ fun CardItemRoom(
                 Spacer(modifier = Modifier.width(16.dp))
 
                 Column(
-                    modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier
+                    .fillMaxWidth()
+                    .height(107.dp),
+                    verticalArrangement = Arrangement.Center
                 ) {
-                    Spacer(modifier = Modifier.height(16.dp))
                     Text(
                         text = title,
                         color = colors.White,
@@ -139,7 +141,10 @@ fun CardItemRoom(
                                 verticalAlignment = Alignment.CenterVertically
                             ) {
                                 Text(
-                                    text = stringResource(R.string.card_item_participant, participants),
+                                    text = stringResource(
+                                        R.string.card_item_participating_count,
+                                        participants
+                                    ),
                                     style = typography.menu_sb600_s12,
                                     color = colors.White
                                 )
@@ -153,20 +158,22 @@ fun CardItemRoom(
                             }
                         }
                     }
-                    Spacer(modifier = Modifier.height(5.dp))
+                    endDate?.let {
+                        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),
+                        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
-                    )
+                            color = if (isRecruiting) colors.Red else colors.Grey01,
+                            style = typography.menu_sb600_s12_h20,
+                            maxLines = 1
+                        )
+                    }
                 }
             }
         }
@@ -213,6 +220,14 @@ fun CardItemRoomPreview() {
                 imageRes = R.drawable.bookcover_sample,
                 hasBorder = true
             )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = false,
+                imageRes = R.drawable.bookcover_sample,
+                hasBorder = true
+            )
         }
     }
 }