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

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

@@ -31,19 +31,21 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun GroupVoteButton(
+    modifier: Modifier = Modifier,
     options: List<String>,
-    voteResults: List<Int>
+    voteResults: List<Int>,
+    selectedIndex: Int?, // 외부에서 전달받은 선택 상태
+    onOptionSelected: (Int?) -> Unit // 클릭 시 선택 변경 콜백
 ) {
-    var selectedIndex by remember { mutableStateOf<Int?>(null) }
+    val hasVoted = selectedIndex != null
 
     Column(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth(),
-        verticalArrangement = Arrangement.spacedBy(12.dp)
+        verticalArrangement = Arrangement.spacedBy(10.dp)
     ) {
         options.forEachIndexed { index, option ->
             val isSelected = selectedIndex == index
-            val hasVoted = selectedIndex != null
             val votePercent = if (hasVoted) voteResults.getOrNull(index)?.coerceIn(0, 100) ?: 0 else 0
 
             val animatedPercent by animateFloatAsState(
@@ -72,10 +74,13 @@ fun GroupVoteButton(
                     .background(color = backgroundColor, shape = RoundedCornerShape(12.dp))
                     .height(44.dp)
                     .clickable {
-                        selectedIndex = if (isSelected) null else index
+                        if (isSelected) {
+                            onOptionSelected(null) // -1 → 취소 의미
+                        } else {
+                            onOptionSelected(index)
+                        }
                     }
             ) {
-                // 퍼센트 채우기
                 if (hasVoted) {
                     Box(
                         modifier = Modifier
@@ -102,7 +107,7 @@ fun GroupVoteButton(
                     )
                     if (hasVoted) {
                         Text(
-                            text = "${votePercent}%",
+                            text = "$votePercent%",
                             color = textColor,
                             style = fontStyle
                         )
@@ -118,13 +123,16 @@ fun GroupVoteButton(
 private fun GroupVoteButtonPreview() {
     val options = listOf("밥", "국수", "고기")
     val results = listOf(20, 30, 50)
+    var selected by remember { mutableStateOf<Int?>(null) }
 
     Column(
         modifier = Modifier.fillMaxSize()
     ) {
         GroupVoteButton(
             options = options,
-            voteResults = results
+            voteResults = results,
+            selectedIndex = selected,
+            onOptionSelected = { selected = it }
         )
     }
 }

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

@@ -0,0 +1,70 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.res.painterResource
+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.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardChat(
+    title: String,
+    subtitle: String,
+    onClick: () -> Unit = {},
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
+            .padding(vertical = 16.dp, horizontal = 12.dp)
+            .clickable { onClick() },
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = title,
+                style = typography.smalltitle_sb600_s16_h24,
+                color = colors.White,
+            )
+
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = "Chevron Icon",
+                tint = colors.Grey02,
+            )
+        }
+
+        Text(
+            text = subtitle,
+            style = typography.info_m500_s12,
+            color = colors.Grey,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CardChatPreview() {
+    CardChat(
+        title = "출석체크",
+        subtitle = "모임방 멤버들과 간단한 인사를 나눠보세요!",
+    ) {}
+}

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

@@ -0,0 +1,53 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.layout.Column
+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.material3.Text
+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.common.header.ProfileBarWithDate
+import com.texthip.thip.ui.group.room.mock.GroupRoomChatData
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardCommentGroup(
+    data: GroupRoomChatData
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        ProfileBarWithDate(
+            profileImage = data.profileImage,
+            nickname = data.nickname,
+            dateText = data.date
+        )
+        Spacer(Modifier.height(8.dp))
+        Text(
+            text = data.content,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.Grey
+
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CardCommentGroupPreview() {
+    CardCommentGroup(
+        data = GroupRoomChatData(
+            profileImage = null,
+            nickname = "user.01",
+            date = "11시간 전",
+            content = "이것은 그룹 채팅의 댓글입니다. 이곳에 댓글 내용을 작성할 수 있습니다. 여러 줄로 작성해도 됩니다."
+        )
+    )
+}

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

@@ -0,0 +1,104 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.background
+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.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.res.painterResource
+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.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardNote(
+    currentPage: Int,
+    percentage: Int,
+    onClick: () -> Unit = { }
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
+            .padding(vertical = 16.dp, horizontal = 12.dp)
+            .clickable { onClick() },
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = stringResource(R.string.record_book),
+                style = typography.smalltitle_sb600_s16_h24,
+                color = colors.White,
+            )
+
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = "Chevron Icon",
+                tint = colors.Grey02,
+            )
+        }
+
+        Text(
+            text = stringResource(R.string.current_page, currentPage),
+            style = typography.info_m500_s12,
+            color = colors.Grey,
+        )
+
+        Row(
+            verticalAlignment = Alignment.Bottom
+        ) {
+            Text(
+                text = percentage.toString(),
+                style = typography.smalltitle_sb600_s16_h20,
+                color = colors.Purple,
+            )
+            Text(
+                text = stringResource(R.string.percent),
+                style = typography.menu_sb600_s12,
+                color = colors.Purple,
+            )
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(8.dp)
+                .background(color = colors.Grey02, shape = RoundedCornerShape(12.dp))
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth(fraction = percentage / 100f)
+                    .fillMaxHeight()
+                    .background(color = colors.Purple, shape = RoundedCornerShape(12.dp))
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CardNotePreview() {
+    CardNote(
+        currentPage = 50,
+        percentage = 30,
+        onClick = { }
+    )
+}