[UI] 데이터 없는 페이지들 구현

app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt

@@ -27,30 +27,32 @@ fun MenuBottomSheet(
     CustomBottomSheet(
         onDismiss = onDismiss,
     ) {
-        items.forEachIndexed { index, item ->
-            if (index > 0) {
-                Spacer(modifier = Modifier.height(8.dp))
-                HorizontalDivider(modifier = Modifier.height(1.dp), color = colors.Grey03)
-                Spacer(modifier = Modifier.height(8.dp))
-            }
+        Column(modifier = Modifier.padding(20.dp)) {
+            items.forEachIndexed { index, item ->
+                if (index > 0) {
+                    Spacer(modifier = Modifier.height(8.dp))
+                    HorizontalDivider(modifier = Modifier.height(1.dp), color = colors.Grey03)
+                    Spacer(modifier = Modifier.height(8.dp))
+                }
 
-            Column(
-                modifier = Modifier
-                    .height(50.dp)
-                    .padding(horizontal = 12.dp, vertical = 8.dp),
-                verticalArrangement = Arrangement.Center
-            ) {
-                Text(
-                    text = item.text,
-                    style = typography.menu_m500_s16_h24,
-                    color = item.color,
+                Column(
                     modifier = Modifier
-                        .fillMaxWidth()
-                        .clickable {
-                            item.onClick()
-                            onDismiss()
-                        }
-                )
+                        .height(50.dp)
+                        .padding(horizontal = 12.dp, vertical = 8.dp),
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = item.text,
+                        style = typography.menu_m500_s16_h24,
+                        color = item.color,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable {
+                                item.onClick()
+                                onDismiss()
+                            }
+                    )
+                }
             }
         }
     }

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

@@ -32,10 +32,11 @@ fun OptionChipButton(
     modifier: Modifier = Modifier,
     text: String,
     isFilled: Boolean = false,
-    isSelected: Boolean? = null,  // 추가
+    isSelected: Boolean? = null,
     enabled: Boolean = true,
     textStyle: TextStyle = typography.info_r400_s12,
     onClick: () -> Unit,
+    onDisabledClick: () -> Unit = { }
 ) {
     var isClicked by remember { mutableStateOf(false) }
     val checked = isSelected ?: isClicked
@@ -69,9 +70,13 @@ fun OptionChipButton(
                 color = borderColor,
                 shape = RoundedCornerShape(20.dp)
             )
-            .clickable(enabled = enabled) {
-                if (isSelected == null) isClicked = !isClicked
-                onClick()
+            .clickable {
+                if (enabled) {
+                    if (isSelected == null) isClicked = !isClicked
+                    onClick()
+                } else {
+                    onDisabledClick.invoke()
+                }
             }
             .height(30.dp)
             .padding(horizontal = 12.dp),

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

@@ -17,7 +17,8 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun CardCommentGroup(
-    data: GroupRoomChatData
+    data: GroupRoomChatData,
+    onMenuClick: () -> Unit
 ) {
     Column(
         modifier = Modifier
@@ -27,7 +28,8 @@ fun CardCommentGroup(
         ProfileBarWithDate(
             profileImage = data.profileImage,
             nickname = data.nickname,
-            dateText = data.date
+            dateText = data.date,
+            onMenuClick = onMenuClick
         )
         Spacer(Modifier.height(8.dp))
         Text(
@@ -47,7 +49,9 @@ private fun CardCommentGroupPreview() {
             profileImage = null,
             nickname = "user.01",
             date = "11시간 전",
-            content = "이것은 그룹 채팅의 댓글입니다. 이곳에 댓글 내용을 작성할 수 있습니다. 여러 줄로 작성해도 됩니다."
-        )
+            content = "이것은 그룹 채팅의 댓글입니다. 이곳에 댓글 내용을 작성할 수 있습니다. 여러 줄로 작성해도 됩니다.",
+            isMine = false
+        ),
+        onMenuClick = {}
     )
 }

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

@@ -1,11 +1,13 @@
 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.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.pager.HorizontalPager
@@ -14,9 +16,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateMapOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.toMutableStateList
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -30,17 +30,12 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun CardVote(
-    voteData: List<VoteData>
+    voteData: List<VoteData>,
+    onVoteClick: (VoteData) -> Unit = {}
 ) {
     val pageCount = voteData.size
     val pagerState = rememberPagerState(pageCount = { pageCount })
 
-    // 각 페이지별 상태 기억: 선택 인덱스, 선택 여부 포함한 voteItems
-    val selectedIndexes = remember { mutableStateMapOf<Int, Int?>() }
-    val voteItemStates = remember {
-        voteData.map { it.voteItems.toMutableStateList() }.toMutableStateList()
-    }
-
     Column(
         modifier = Modifier
             .fillMaxWidth()
@@ -55,52 +50,65 @@ fun CardVote(
             modifier = Modifier.padding(horizontal = 12.dp)
         )
 
-        HorizontalPager(
-            state = pagerState,
-            modifier = Modifier.fillMaxWidth()
-        ) { page ->
-            val voteItems = voteItemStates[page]
-            val selectedIndex = selectedIndexes[page]
-            val hasVoted = voteItems.any { it.isVoted }
-
-            Column(
-                modifier = Modifier.padding(horizontal = 12.dp),
-                verticalArrangement = Arrangement.spacedBy(10.dp)
+        if (voteData.isEmpty()) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 12.dp)
+                    .padding(vertical = 60.dp),
+                contentAlignment = Alignment.Center
             ) {
                 Text(
-                    text = voteData[page].description,
+                    text = stringResource(R.string.no_vote),
                     style = typography.info_m500_s12,
-                    color = colors.White,
-                )
-
-                GroupVoteButton(
-                    voteItems = voteItems,
-                    selectedIndex = selectedIndex,
-                    hasVoted = hasVoted,
-                    onOptionSelected = { index ->
-                        selectedIndexes[page] = if (selectedIndex == index) null else index
-
-                        voteItemStates[page] = voteItems.mapIndexed { i, item ->
-                            item.copy(isVoted = i == index && selectedIndex != index)
-                        }.toMutableStateList()
-                    }
+                    color = colors.Grey
                 )
             }
-        }
+        } else {
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier.fillMaxWidth()
+            ) { page ->
+                val vote = voteData[page]
+                val voteItems = vote.voteItems.take(3) // 최대 3개만
 
-        Row(
-            Modifier
-                .fillMaxWidth(),
-            horizontalArrangement = Arrangement.Center
-        ) {
-            repeat(pageCount) { iteration ->
-                val color = if (pagerState.currentPage == iteration) colors.White else colors.Grey02
-                Box(
+                Column(
                     modifier = Modifier
+                        .height(176.dp)
                         .padding(horizontal = 12.dp)
-                        .background(color, CircleShape)
-                        .size(4.dp)
-                )
+                        .clickable { onVoteClick(vote) }, // 전체 클릭 시 이동
+                    verticalArrangement = Arrangement.spacedBy(10.dp)
+                ) {
+                    Text(
+                        text = vote.description,
+                        style = typography.info_m500_s12,
+                        color = colors.White,
+                    )
+
+                    GroupVoteButton(
+                        voteItems = voteItems,
+                        selectedIndex = null, // 표시용이므로 선택 없음
+                        hasVoted = false, // 투표 상태 없음
+                        onOptionSelected = { onVoteClick(vote) } // 어떤 항목을 눌러도 이동
+                    )
+                }
+            }
+
+            Row(
+                Modifier
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.Center
+            ) {
+                repeat(pageCount) { iteration ->
+                    val color =
+                        if (pagerState.currentPage == iteration) colors.White else colors.Grey02
+                    Box(
+                        modifier = Modifier
+                            .padding(horizontal = 12.dp)
+                            .background(color, CircleShape)
+                            .size(4.dp)
+                    )
+                }
             }
         }
     }
@@ -109,5 +117,13 @@ fun CardVote(
 @Preview
 @Composable
 private fun CardVotePreview() {
-    CardVote(voteData = mockVoteData)
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        CardVote(voteData = mockVoteData)
+        CardVote(voteData = emptyList())
+    }
 }

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

@@ -6,11 +6,13 @@ 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.defaultMinSize
 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.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.material3.Icon
@@ -93,37 +95,41 @@ fun CommentTextField(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(horizontal = 20.dp, vertical = 10.dp)
-                .height(36.dp)
                 .background(colors.DarkGrey, shape = RoundedCornerShape(20.dp)),
             verticalAlignment = Alignment.CenterVertically
         ) {
             BasicTextField(
                 value = input,
                 onValueChange = onInputChange,
-                singleLine = true,
+                maxLines = 5,
                 textStyle = typography.menu_r400_s14_h24.copy(color = colors.White),
                 modifier = Modifier
                     .weight(1f)
-                    .padding(start = 12.dp),
+                    .padding(start = 12.dp, top = 4.dp, bottom = 4.dp, end = 12.dp)
+                    .defaultMinSize(minHeight = 36.dp)
+                    .wrapContentHeight(),  // 높이 자동 확장
                 cursorBrush = SolidColor(colors.NeonGreen),
                 decorationBox = { innerTextField ->
-                    if (input.isEmpty()) {
-                        Text(
-                            text = hint,
-                            color = colors.Grey02,
-                            style = typography.menu_r400_s14_h24
-                        )
+                    Box {
+                        if (input.isEmpty()) {
+                            Text(
+                                text = hint,
+                                color = colors.Grey02,
+                                style = typography.menu_r400_s14_h24
+                            )
+                        }
+                        innerTextField()
                     }
-                    innerTextField()
                 }
             )
 
             // 전송 버튼
             val isEnabled = input.isNotBlank()
             Box(
                 modifier = Modifier
-                    .padding(end = 4.dp)
+                    .padding(end = 8.dp, bottom = 8.dp)
                     .size(width = 42.dp, height = 28.dp)
+                    .align(Alignment.Bottom)
                     .background(
                         color = if (isEnabled) colors.Purple else colors.Grey02,
                         shape = RoundedCornerShape(20.dp)