diff --git a/.gitignore b/.gitignore
index 64ef9d56..bbc1ecb0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,5 @@
 .externalNativeBuild
 .cxx
 local.properties
-.idea/deploymentTargetSelector.xml
\ No newline at end of file
+.idea/deploymentTargetSelector.xml
+.idea/misc.xml
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 38860e7c..62464c5c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CodeInsightWorkspaceSettings">
     <option name="optimizeImportsOnTheFly" value="true" />
diff --git a/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt
index 0c745866..6cc0aa71 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt
@@ -7,11 +7,24 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectVerticalDragGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -23,21 +36,26 @@ import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import kotlinx.coroutines.launch
 
+private const val BOTTOM_SHEET_HIDDEN_OFFSET = 300f
+private const val BOTTOM_SHEET_VISIBLE_OFFSET = 0f
+private const val BOTTOM_SHEET_DISMISS_THRESHOLD = 100f
+private const val ANIMATION_DURATION = 300
+
 @Composable
 fun CustomBottomSheet(
     onDismiss: () -> Unit,
     content: @Composable ColumnScope.() -> Unit
 ) {
     val scope = rememberCoroutineScope()
-    val animatableOffset = remember { Animatable(300f) }
-    var offsetY by remember { mutableFloatStateOf(0f) }
+    val animatableOffset = remember { Animatable(BOTTOM_SHEET_HIDDEN_OFFSET) } // 시작 위치 아래
+    var offsetY by remember { mutableFloatStateOf(BOTTOM_SHEET_VISIBLE_OFFSET) }
     var isDismissing by remember { mutableStateOf(false) }
 
     // 등장 애니메이션
     LaunchedEffect(Unit) {
         animatableOffset.animateTo(
-            targetValue = 0f,
-            animationSpec = tween(durationMillis = 300)
+            targetValue = BOTTOM_SHEET_VISIBLE_OFFSET,
+            animationSpec = tween(durationMillis = ANIMATION_DURATION)
         )
     }
 
@@ -52,7 +70,10 @@ fun CustomBottomSheet(
                 if (!isDismissing) {
                     isDismissing = true
                     scope.launch {
-                        animatableOffset.animateTo(300f, tween(300))
+                        animatableOffset.animateTo(
+                            BOTTOM_SHEET_HIDDEN_OFFSET,
+                            tween(ANIMATION_DURATION)
+                        )
                         onDismiss()
                     }
                 }
@@ -79,23 +100,26 @@ fun CustomBottomSheet(
                     detectVerticalDragGestures(
                         onVerticalDrag = { _, dragAmount ->
                             if (dragAmount > 0) {
-                                offsetY += dragAmount / 2
+                                offsetY += dragAmount / 2  // 아래로 드래그할 때만 적용
                             }
                         },
                         onDragEnd = {
-                            if (offsetY > 100f && !isDismissing) {
+                            if (offsetY > BOTTOM_SHEET_DISMISS_THRESHOLD && !isDismissing) {
                                 isDismissing = true
                                 scope.launch {
-                                    animatableOffset.animateTo(300f, tween(300))
+                                    animatableOffset.animateTo(
+                                        BOTTOM_SHEET_HIDDEN_OFFSET,
+                                        tween(ANIMATION_DURATION)
+                                    )
                                     onDismiss()
                                 }
                             } else {
-                                offsetY = 0f
+                                offsetY = BOTTOM_SHEET_VISIBLE_OFFSET
                             }
                         }
                     )
                 }
-                .clickable(enabled = true) {}
+                .clickable(enabled = true) {} // 내부 클릭 무시되지 않도록
         ) {
             Column(modifier = Modifier.fillMaxWidth()) {
                 content()
diff --git a/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt
index e4e5d71c..1a32c7bd 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt
@@ -1,153 +1,56 @@
 package com.texthip.thip.ui.common.bottomsheet
 
-import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.gestures.detectVerticalDragGestures
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 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.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableFloatStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import com.texthip.thip.R
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import kotlinx.coroutines.launch
-
-data class MenuBottomSheetItem(
-    val text: String,
-    val color: Color = Color.White,
-    val onClick: () -> Unit,
-)
 
 @Composable
 fun MenuBottomSheet(
     items: List<MenuBottomSheetItem>,
     onDismiss: () -> Unit
 ) {
-    val scope = rememberCoroutineScope()
-    val animatableOffset = remember { Animatable(300f) } // 시작 위치 아래
-    var offsetY by remember { mutableFloatStateOf(0f) }
-    var isDismissing by remember { mutableStateOf(false) }
-
-    // 등장 애니메이션
-    LaunchedEffect(Unit) {
-        animatableOffset.animateTo(
-            targetValue = 0f,
-            animationSpec = tween(durationMillis = 300)
-        )
-    }
-
-    // 바깥 클릭 감지
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .clickable(
-                indication = null,
-                interactionSource = remember { MutableInteractionSource() }
-            ) {
-                if (!isDismissing) {
-                    isDismissing = true
-                    scope.launch {
-                        animatableOffset.animateTo(300f, tween(300))
-                        onDismiss()
-                    }
-                }
+    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))
             }
-            .zIndex(1f) // 다른 컴포넌트 위에 뜨도록
-    )
 
-
-    // BottomSheet 본체
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .zIndex(2f), // 시트가 배경보다 위에 뜨도록
-        contentAlignment = Alignment.BottomCenter
-    ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .offset(y = (offsetY + animatableOffset.value).dp)
-                .background(
-                    color = colors.DarkGrey,
-                    shape = RoundedCornerShape(topEnd = 12.dp, topStart = 12.dp)
-                )
-                .padding(20.dp)
-                .pointerInput(Unit) {
-                    detectVerticalDragGestures(
-                        onVerticalDrag = { _, dragAmount ->
-                            if (dragAmount > 0) {
-                                offsetY += dragAmount / 2  // 아래로 드래그할 때만 적용
-                            }
-                        },
-                        onDragEnd = {
-                            if (offsetY > 100f && !isDismissing) {
-                                isDismissing = true
-                                scope.launch {
-                                    animatableOffset.animateTo(300f, tween(300))
-                                    onDismiss()
-                                }
-                            } else {
-                                offsetY = 0f
-                            }
+            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,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clickable {
+                            item.onClick()
+                            onDismiss()
                         }
-                    )
-                }
-                .clickable(enabled = true) {} // 내부 클릭 무시되지 않도록
-        ) {
-            Column(modifier = Modifier.fillMaxWidth()) {
-                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,
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .clickable {
-                                    item.onClick()
-                                    onDismiss()
-                                }
-                        )
-                    }
-                }
+                )
             }
         }
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt
index bb5e1710..f717013e 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt
@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 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
@@ -42,15 +43,32 @@ fun FilterButton(
 ) {
     var expanded by remember { mutableStateOf(false) }
 
-    Column(
-        modifier = modifier.fillMaxWidth(),
-        horizontalAlignment = Alignment.End
+    Box(
+        modifier = modifier
+            .fillMaxWidth(),
+        contentAlignment = Alignment.TopEnd
     ) {
+        // 바깥 클릭 감지(expanded 상태에서만 보이도록 함)
+        if (expanded) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null
+                    ) {
+                        expanded = false
+                    }
+            )
+        }
+
+        // 버튼 영역
         Row(
             modifier = Modifier
+                .height(36.dp)
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = null // 클릭 효과 제거
+                    indication = null
                 ) { expanded = !expanded },
             horizontalArrangement = Arrangement.End,
             verticalAlignment = Alignment.CenterVertically
@@ -68,46 +86,41 @@ fun FilterButton(
                 tint = colors.Grey02,
                 modifier = Modifier.size(24.dp)
             )
-
         }
 
-        // 드롭다운 애니메이션 박스
+        // 드롭다운
         AnimatedVisibility(
             visible = expanded,
             enter = fadeIn(),
             exit = fadeOut()
         ) {
-            Box(
-                modifier = Modifier.fillMaxWidth(),
-                contentAlignment = Alignment.TopEnd
+            Column(
+                modifier = Modifier
+                    .padding(top = 36.dp) // 버튼 아래로 띄우기
+                    .width(144.dp)
+                    .border(
+                        width = 1.dp,
+                        color = colors.Grey01,
+                        shape = RoundedCornerShape(16.dp)
+                    )
+                    .background(color = colors.Black, shape = RoundedCornerShape(16.dp))
+                    .padding(vertical = 20.dp, horizontal = 12.dp)
+                    .align(Alignment.TopEnd), // 오버레이 위치 고정
+                verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
-                Column(
-                    modifier = Modifier
-                        .padding(top = 8.dp)
-                        .width(144.dp)
-                        .border(
-                            width = 1.dp,
-                            color = colors.Grey01,
-                            shape = RoundedCornerShape(16.dp)
-                        )
-                        .background(color = colors.Black, shape = RoundedCornerShape(16.dp))
-                        .padding(vertical = 20.dp, horizontal = 12.dp),
-                    verticalArrangement = Arrangement.spacedBy(16.dp)
-                ) {
-                    options.forEach { option ->
-                        val isSelected = option == selectedOption
-                        Text(
-                            text = option,
-                            color = if (isSelected) colors.White else colors.Grey02,
-                            style = typography.feedcopy_r400_s14_h20,
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .clickable {
-                                    onOptionSelected(option)
-                                    expanded = false
-                                }
-                        )
-                    }
+                options.forEach { option ->
+                    val isSelected = option == selectedOption
+                    Text(
+                        text = option,
+                        color = if (isSelected) colors.White else colors.Grey02,
+                        style = typography.feedcopy_r400_s14_h20,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable {
+                                onOptionSelected(option)
+                                expanded = false
+                            }
+                    )
                 }
             }
         }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt
index 976ae34d..db153970 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt
@@ -24,13 +24,14 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
 fun FloatingButton(
+    modifier: Modifier = Modifier,
     icon: Painter,
     onClick: () -> Unit = { }
 ) {
     var expanded by remember { mutableStateOf(false) }
 
     Box(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize()
             .padding(end = 20.dp, bottom = 32.dp),
         contentAlignment = Alignment.BottomEnd
@@ -45,7 +46,6 @@ fun FloatingButton(
             contentColor = colors.NeonGreen,
             shape = CircleShape,
             modifier = Modifier
-                .padding(16.dp)
                 .size(56.dp)
                 .border(width = 2.dp, color = colors.NeonGreen50, shape = CircleShape)
         ) {
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt
index 08a5a6f0..4da40172 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.group.note.mock.VoteItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
@@ -32,21 +33,18 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun GroupVoteButton(
     modifier: Modifier = Modifier,
-    options: List<String>,
-    voteResults: List<Int>,
-    selectedIndex: Int?, // 외부에서 전달받은 선택 상태
-    onOptionSelected: (Int?) -> Unit // 클릭 시 선택 변경 콜백
+    voteItems: List<VoteItem>,
+    selectedIndex: Int?, // 선택한 인덱스
+    hasVoted: Boolean = false, // 투표 여부
+    onOptionSelected: (Int?) -> Unit
 ) {
-    val hasVoted = selectedIndex != null
-
     Column(
-        modifier = modifier
-            .fillMaxWidth(),
+        modifier = modifier.fillMaxWidth(),
         verticalArrangement = Arrangement.spacedBy(10.dp)
     ) {
-        options.forEachIndexed { index, option ->
+        voteItems.forEachIndexed { index, item ->
             val isSelected = selectedIndex == index
-            val votePercent = if (hasVoted) voteResults.getOrNull(index)?.coerceIn(0, 100) ?: 0 else 0
+            val votePercent = if (hasVoted) item.percentage.coerceIn(0, 100) else 0
 
             val animatedPercent by animateFloatAsState(
                 targetValue = votePercent / 100f,
@@ -75,7 +73,7 @@ fun GroupVoteButton(
                     .height(44.dp)
                     .clickable {
                         if (isSelected) {
-                            onOptionSelected(null) // -1 → 취소 의미
+                            onOptionSelected(null)
                         } else {
                             onOptionSelected(index)
                         }
@@ -101,13 +99,13 @@ fun GroupVoteButton(
                     horizontalArrangement = Arrangement.SpaceBetween
                 ) {
                     Text(
-                        text = "${index + 1}. $option",
+                        text = "${index + 1}. ${item.itemName}",
                         color = textColor,
                         style = fontStyle
                     )
                     if (hasVoted) {
                         Text(
-                            text = "$votePercent%",
+                            text = "${item.percentage}%",
                             color = textColor,
                             style = fontStyle
                         )
@@ -121,18 +119,37 @@ fun GroupVoteButton(
 @Preview
 @Composable
 private fun GroupVoteButtonPreview() {
-    val options = listOf("밥", "국수", "고기")
-    val results = listOf(20, 30, 50)
     var selected by remember { mutableStateOf<Int?>(null) }
+    var voteItems by remember {
+        mutableStateOf(
+            listOf(
+                VoteItem(1, "밥", 25, false),
+                VoteItem(2, "국수", 35, false),
+                VoteItem(3, "고기", 40, false)
+            )
+        )
+    }
 
-    Column(
-        modifier = Modifier.fillMaxSize()
-    ) {
+    val hasVoted = voteItems.any { it.isVoted }
+
+    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
         GroupVoteButton(
-            options = options,
-            voteResults = results,
+            voteItems = voteItems,
             selectedIndex = selected,
-            onOptionSelected = { selected = it }
+            hasVoted = hasVoted,
+            onOptionSelected = {
+                if (selected == it) {
+                    // ✅ 이미 선택한 항목을 다시 클릭한 경우: 취소 처리
+                    selected = null
+                    voteItems = voteItems.map { it.copy(isVoted = false) }
+                } else {
+                    // ✅ 새로운 항목 선택
+                    selected = it
+                    voteItems = voteItems.mapIndexed { index, item ->
+                        item.copy(isVoted = index == it)
+                    }
+                }
+            }
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt
index e8c7c5ec..12df707f 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt
@@ -16,6 +16,7 @@ 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.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -23,6 +24,7 @@ import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.GroupVoteButton
 import com.texthip.thip.ui.group.room.mock.VoteData
+import com.texthip.thip.ui.group.room.mock.mockVoteData
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
@@ -33,8 +35,11 @@ fun CardVote(
     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
@@ -50,29 +55,35 @@ fun CardVote(
             modifier = Modifier.padding(horizontal = 12.dp)
         )
 
-
         HorizontalPager(
             state = pagerState,
             modifier = Modifier.fillMaxWidth()
         ) { page ->
-            val item = voteData[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)
             ) {
                 Text(
-                    text = item.description,
+                    text = voteData[page].description,
                     style = typography.info_m500_s12,
                     color = colors.White,
                 )
 
                 GroupVoteButton(
-                    options = item.options,
-                    voteResults = item.votes,
+                    voteItems = voteItems,
                     selectedIndex = selectedIndex,
-                    onOptionSelected = { selectedIndexes[page] = it }
+                    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()
+                    }
                 )
             }
         }
@@ -98,23 +109,5 @@ fun CardVote(
 @Preview
 @Composable
 private fun CardVotePreview() {
-    val mockVoteData = listOf(
-        VoteData(
-            description = "투표 내용입니다...",
-            options = listOf("김땡땡", "이땡땡", "박땡땡", "최땡땡", "정땡땡"),
-            votes = listOf(50, 10, 20, 15, 5)
-        ),
-        VoteData(
-            description = "옆으로 넘긴 다른 투표 01",
-            options = listOf("어쩌구", "저쩌구", "삼번", "사번"),
-            votes = listOf(25, 45, 20, 10)
-        ),
-        VoteData(
-            description = "옆으로 넘긴 다른 투표 02",
-            options = listOf("투표 제목과 항목 버튼이 가로 스크롤되고", "아래 캐러셀 닷은", "위치 그대로, 강조점만 바뀌도록."),
-            votes = listOf(40, 35, 25)
-        )
-    )
-
     CardVote(voteData = mockVoteData)
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt
index f2806710..4c5bd43a 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt
@@ -36,12 +36,18 @@ fun PageTextField(
     ) {
         BasicTextField(
             value = text,
-            onValueChange = onTextChange,
+            onValueChange = { newText ->
+                // 숫자만 필터링
+                if (newText.all { it.isDigit() }) {
+                    onTextChange(newText)
+                }
+            },
             textStyle = typography.copy_r400_s14.copy(color = colors.White),
             keyboardOptions = KeyboardOptions.Default.copy(
                 keyboardType = KeyboardType.Number
             ),
             cursorBrush = SolidColor(colors.NeonGreen),
+            maxLines = 1,
         )
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
index 52009dd5..132889d2 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
@@ -46,7 +45,6 @@ fun ProfileBar(
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding( vertical = 12.dp)
             .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarFeed.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarFeed.kt
new file mode 100644
index 00000000..b74bb4d2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarFeed.kt
@@ -0,0 +1,95 @@
+package com.texthip.thip.ui.common.header
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+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 ProfileBarFeed(
+    profileImage: Painter?,
+    nickname: String,
+    genreName: String,
+    genreColor: Color = colors.NeonGreen,
+    date: String,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row {
+            if (profileImage != null) {
+                Image(
+                    painter = profileImage,
+                    contentDescription = "프로필 이미지",
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(CircleShape)
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(CircleShape)
+                        .background(colors.Grey)
+                )
+            }
+            Spacer(modifier = Modifier.width(4.dp))
+            Column {
+                Text(
+                    text = nickname,
+                    style = typography.menu_sb600_s12,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.height(2.dp))
+                Text(
+                    text = genreName,
+                    style = typography.timedate_r400_s11,
+                    color = genreColor
+                )
+            }
+        }
+
+        Text(
+            text = date,
+            style = typography.timedate_r400_s11,
+            color = colors.Grey01
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ProfileBarFeedPreview() {
+    ThipTheme {
+        ProfileBarFeed(
+            profileImage = null,
+            nickname = "user.01",
+            genreName = "칭호칭호",
+            genreColor = colors.Orange,
+            date = "2025.01.12"
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentBottomSheet.kt
new file mode 100644
index 00000000..b67589c5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentBottomSheet.kt
@@ -0,0 +1,85 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+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.common.bottomsheet.CustomBottomSheet
+import com.texthip.thip.ui.common.forms.CommentTextField
+import com.texthip.thip.ui.group.note.mock.CommentItem
+import com.texthip.thip.ui.group.note.mock.ReplyItem
+import com.texthip.thip.ui.group.note.mock.mockComment
+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 CommentBottomSheet(
+    commentResponse: List<CommentItem>,
+    onDismiss: () -> Unit,
+    onSendReply: (String, Int?, String?) -> Unit
+) {
+    var inputText by remember { mutableStateOf("") }
+    var replyingTo by remember { mutableStateOf<ReplyItem?>(null) }
+
+    CustomBottomSheet(onDismiss = onDismiss) {
+        Text(
+            text = stringResource(R.string.comments),
+            style = typography.title_b700_s20_h24,
+            color = colors.White,
+            modifier = Modifier.padding(start = 20.dp, top = 20.dp, end = 20.dp)
+        )
+
+        CommentList(
+            commentList = commentResponse,
+            onSendReply = { replyText, commentId, replyTo ->
+                onSendReply(replyText, commentId, replyTo)
+                inputText = ""
+            },
+            onReplyClick = { replyItem ->
+                replyingTo = replyItem
+            }
+        )
+
+        // 입력창
+        CommentTextField(
+            hint = stringResource(R.string.reply_to),
+            input = inputText,
+            onInputChange = { inputText = it },
+            onSendClick = {
+                onSendReply(
+                    inputText,
+                    replyingTo?.replyId,
+                    replyingTo?.nickName
+                )
+                inputText = ""
+                replyingTo = null
+            },
+            replyTo = replyingTo?.nickName,
+            onCancelReply = { replyingTo = null }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CommentBottomSheetPreview() {
+    ThipTheme {
+        var showSheet by remember { mutableStateOf(true) }
+        if (showSheet) {
+            CommentBottomSheet(
+                commentResponse = listOf(mockComment, mockComment, mockComment),
+                onDismiss = { showSheet = false },
+                onSendReply = { _, _, _ -> }
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentItem.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentItem.kt
new file mode 100644
index 00000000..6672518a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentItem.kt
@@ -0,0 +1,148 @@
+package com.texthip.thip.ui.group.note.component
+
+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.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+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.common.header.ProfileBarFeed
+import com.texthip.thip.ui.group.note.mock.CommentItem
+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 CommentItem(
+    modifier: Modifier = Modifier,
+    data: CommentItem,
+    onReplyClick: (String) -> Unit = { }
+) {
+    var isLiked by remember { mutableStateOf(data.isLiked) }
+
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        ProfileBarFeed(
+//            profileImage = data.profileImageUrl,
+            profileImage = painterResource(R.drawable.character_literature),
+            nickname = data.nickName,
+            genreName = data.genreName,
+            genreColor = colors.Orange,
+            date = data.postDate
+        )
+
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(20.dp)
+        ) {
+            Column(
+                modifier = Modifier
+                    .weight(1f),
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                Text(
+                    text = data.content,
+                    color = colors.Grey,
+                    style = typography.feedcopy_r400_s14_h20,
+                )
+                Text(
+                    modifier = Modifier.clickable(onClick = { onReplyClick(data.nickName) }),
+                    text = stringResource(R.string.write_reply),
+                    style = typography.menu_sb600_s12,
+                    color = colors.Grey02,
+                )
+            }
+
+            Column(
+                modifier = Modifier.clickable(onClick = { isLiked = !isLiked }),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(2.dp),
+            ) {
+                Icon(
+                    painter = painterResource(if (isLiked) R.drawable.ic_heart_center_filled else R.drawable.ic_heart_center),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+                Text(
+                    text = data.likeCount.toString(),
+                    style = typography.navi_m500_s10,
+                    color = colors.White,
+                )
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun CommentItemPreview() {
+    ThipTheme {
+        Column(
+            modifier = Modifier
+                .clickable { /* TODO: Handle click */ }
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            CommentItem(
+                data = CommentItem(
+                    commentId = 1,
+                    userId = 1,
+                    nickName = "user.01",
+                    genreName = "칭호칭호",
+                    profileImageUrl = "https://example.com/profile.jpg",
+                    content = "입력하세요. 댓글 내용을 입력하세요오. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. ",
+                    postDate = "2025.01.12",
+                    isWriter = false,
+                    isLiked = true,
+                    likeCount = 10,
+                )
+            )
+
+            CommentItem(
+                data = CommentItem(
+                    commentId = 1,
+                    userId = 1,
+                    nickName = "user.01",
+                    genreName = "칭호칭호",
+                    profileImageUrl = "https://example.com/profile.jpg",
+                    content = "입력하세요. 댓글 내용을 입력하세요오. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요.",
+                    postDate = "12시간 전",
+                    isWriter = false,
+                    isLiked = true,
+                    likeCount = 10
+                )
+            )
+
+            CommentItem(
+                data = CommentItem(
+                    commentId = 1,
+                    userId = 1,
+                    nickName = "user.01",
+                    genreName = "칭호칭호",
+                    profileImageUrl = "https://example.com/profile.jpg",
+                    content = "입력하세요.",
+                    postDate = "12시간 전",
+                    isWriter = false,
+                    isLiked = true,
+                    likeCount = 10
+                )
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentSection.kt
new file mode 100644
index 00000000..f7af2ee9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentSection.kt
@@ -0,0 +1,116 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.common.modal.drawVerticalScrollbar
+import com.texthip.thip.ui.group.note.mock.CommentItem
+import com.texthip.thip.ui.group.note.mock.ReplyItem
+import com.texthip.thip.ui.group.note.mock.mockComment
+import com.texthip.thip.ui.theme.ThipTheme
+
+@Composable
+fun CommentList(
+    commentList: List<CommentItem>,
+    onSendReply: (String, Int?, String?) -> Unit,
+    onReplyClick: (ReplyItem) -> Unit
+) {
+    val scrollState = rememberScrollState()
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(482.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .verticalScroll(scrollState)
+                .drawVerticalScrollbar(scrollState),
+        ) {
+            commentList.forEach { commentItem ->
+                CommentSection(
+                    commentItem = commentItem,
+                    onSendReply = onSendReply,
+                    onReplyClick = onReplyClick
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun CommentSection(
+    commentItem: CommentItem,
+    onSendReply: (String, Int?, String?) -> Unit,
+    onReplyClick: (ReplyItem) -> Unit
+) {
+    Box {
+        Column(
+            modifier = Modifier
+                .fillMaxHeight()
+                .padding(20.dp),
+            verticalArrangement = Arrangement.spacedBy(20.dp),
+            horizontalAlignment = Alignment.Start
+        ) {
+            CommentItem(
+                data = commentItem,
+                onReplyClick = {
+                    onReplyClick(
+                        ReplyItem(
+                            replyId = commentItem.commentId,
+                            userId = commentItem.userId,
+                            nickName = commentItem.nickName,
+                            parentNickname = "", // 댓글에는 parentNickname이 필요 없음
+                            genreName = commentItem.genreName,
+                            profileImageUrl = commentItem.profileImageUrl,
+                            content = commentItem.content,
+                            postDate = commentItem.postDate,
+                            isWriter = commentItem.isWriter,
+                            isLiked = commentItem.isLiked,
+                            likeCount = commentItem.likeCount
+                        )
+                    )
+                }
+            )
+
+            commentItem.replyList.forEach { reply ->
+                ReplyItem(
+                    data = reply,
+                    onReplyClick = {
+                        onReplyClick(reply)
+                    }
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CommentSectionPreview() {
+    ThipTheme {
+        Column {
+            CommentList(
+                commentList = listOf(
+                    mockComment, mockComment, mockComment
+                ),
+                onSendReply = { _, _, _ -> },
+                onReplyClick = { replyItem ->
+                    // Handle reply click
+                }
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt
index a2bba8dc..b1452684 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt
@@ -38,7 +38,7 @@ fun FilterHeaderSection(
     Box(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(20.dp),
+            .padding(horizontal = 20.dp),
         contentAlignment = Alignment.Center
     ) {
         Row(
@@ -61,7 +61,7 @@ fun FilterHeaderSection(
                 text = stringResource(R.string.view_by_all),
                 isFilled = true,
                 isSelected = isTotalSelected,
-                enabled = totalEnabled, // ✅ 추가된 enabled 인자
+                enabled = totalEnabled,
                 textStyle = typography.menu_r400_s14_h24,
                 onClick = onTotalToggle
             )
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
new file mode 100644
index 00000000..16353fee
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
@@ -0,0 +1,139 @@
+package com.texthip.thip.ui.group.note.component
+
+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.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.header.ProfileBarFeed
+import com.texthip.thip.ui.group.note.mock.ReplyItem
+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 ReplyItem(
+    modifier: Modifier = Modifier,
+    data: ReplyItem,
+    onReplyClick: (String) -> Unit = { }
+) {
+    var isLiked by remember { mutableStateOf(data.isLiked) }
+
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_reply),
+            contentDescription = null,
+            tint = Color.White
+        )
+
+        Column(
+            modifier = modifier,
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            ProfileBarFeed(
+//            profileImage = data.profileImageUrl,
+                profileImage = painterResource(R.drawable.character_literature),
+                nickname = data.nickName,
+                genreName = data.genreName,
+                genreColor = colors.Orange,
+                date = data.postDate
+            )
+
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(20.dp)
+            ) {
+                Column(
+                    modifier = Modifier
+                        .weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(12.dp)
+                ) {
+                    Text(
+                        text = buildAnnotatedString {
+                            withStyle(
+                                style = typography.copy_m500_s14_h20.copy(color = colors.White)
+                                    .toSpanStyle()
+                            ) {
+                                append(stringResource(R.string.annotation) + data.parentNickname + stringResource(R.string.space_bar))
+                            }
+                            append(data.content)
+                        },
+                        color = colors.Grey,
+                        style = typography.feedcopy_r400_s14_h20,
+                    )
+                    Text(
+                        modifier = Modifier.clickable(onClick = { onReplyClick(data.nickName) }),
+                        text = stringResource(R.string.write_reply),
+                        style = typography.menu_sb600_s12,
+                        color = colors.Grey02,
+                    )
+                }
+
+                Column(
+                    modifier = Modifier.clickable(onClick = { isLiked = !isLiked }),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(2.dp),
+                ) {
+                    Icon(
+                        painter = painterResource(if (isLiked) R.drawable.ic_heart_center_filled else R.drawable.ic_heart_center),
+                        contentDescription = null,
+                        tint = Color.Unspecified
+                    )
+                    Text(
+                        text = data.likeCount.toString(),
+                        style = typography.navi_m500_s10,
+                        color = colors.White,
+                    )
+                }
+            }
+        }
+    }
+
+}
+
+@Preview
+@Composable
+private fun ReplyItemPreview() {
+    ThipTheme {
+        Column(
+            modifier = Modifier
+                .clickable { /* TODO: Handle click */ }
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            ReplyItem(
+                data = ReplyItem(
+                    replyId = 1,
+                    userId = 1,
+                    nickName = "user.01",
+                    parentNickname = "사용자태그",
+                    genreName = "칭호칭호",
+                    profileImageUrl = "https://example.com/profile.jpg",
+                    content = "입력하세요. 댓글 내용을 입력하세요오. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. ",
+                    postDate = "12시간 전",
+                    isWriter = false,
+                    isLiked = true,
+                    likeCount = 10,
+                )
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt
index 913276f9..82a26e40 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt
@@ -2,12 +2,15 @@ package com.texthip.thip.ui.group.note.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -21,14 +24,20 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun TextCommentCard(
+    modifier: Modifier = Modifier,
     data: GroupNoteRecord,
+    onCommentClick: () -> Unit = {}
 ) {
     var isLiked by remember { mutableStateOf(data.isLiked) }
 
     Column(
+        modifier = modifier
+            .blur(if (data.isLocked) 5.dp else 0.dp)
+            .padding(vertical = 16.dp, horizontal = 20.dp),
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         ProfileBar(
+            modifier = Modifier.padding(0.dp),
 //            profileImage = data.profileImageUrl,
             profileImage = painterResource(R.drawable.character_literature),
             topText = data.nickName,
@@ -52,7 +61,7 @@ fun TextCommentCard(
             onLikeClick = {
                 isLiked = !isLiked
             },
-            onCommentClick = {  },
+            onCommentClick = { onCommentClick() },
         )
     }
 }
@@ -72,6 +81,7 @@ fun TextCommentCardPreview() {
             commentCount = 123,
             isLiked = true,
             isWriter = false,
+            isLocked = false,
             recordId = 1
         )
     )
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteCommentCard.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteCommentCard.kt
new file mode 100644
index 00000000..a4f24a11
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteCommentCard.kt
@@ -0,0 +1,116 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+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.common.buttons.ActionBarButton
+import com.texthip.thip.ui.common.buttons.GroupVoteButton
+import com.texthip.thip.ui.common.header.ProfileBar
+import com.texthip.thip.ui.group.note.mock.GroupNoteVote
+import com.texthip.thip.ui.group.note.mock.VoteItem
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun VoteCommentCard(
+    modifier: Modifier = Modifier,
+    data: GroupNoteVote,
+    onCommentClick: () -> Unit = {}
+) {
+    var isLiked by remember { mutableStateOf(data.isLiked) }
+    var selected by remember { mutableStateOf<Int?>(null) }
+    var voteItems by remember { mutableStateOf(data.voteItems) }
+    val hasVoted = voteItems.any { it.isVoted }
+
+    Column(
+        modifier = modifier
+            .blur(if (data.isLocked) 5.dp else 0.dp)
+            .padding(vertical = 16.dp, horizontal = 20.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        ProfileBar(
+//            profileImage = data.profileImageUrl,
+            profileImage = painterResource(R.drawable.character_literature),
+            topText = data.nickName,
+            bottomText = data.page.toString() + stringResource(R.string.page),
+            bottomTextColor = colors.Purple,
+            showSubscriberInfo = false,
+            hoursAgo = data.postDate
+        )
+
+        Column(
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Text(
+                text = data.content,
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.White,
+            )
+
+            GroupVoteButton(
+                voteItems = voteItems,
+                selectedIndex = selected,
+                hasVoted = hasVoted,
+                onOptionSelected = {
+                    if (selected == it) {
+                        selected = null
+                        voteItems = voteItems.map { it.copy(isVoted = false) }
+                    } else {
+                        selected = it
+                        voteItems = voteItems.mapIndexed { index, item ->
+                            item.copy(isVoted = index == it)
+                        }
+                    }
+                }
+            )
+        }
+
+        ActionBarButton(
+            isLiked = isLiked,
+            likeCount = data.likeCount,
+            commentCount = data.commentCount,
+            onLikeClick = {
+                isLiked = !isLiked
+            },
+            onCommentClick = { onCommentClick() },
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun VoteCommentCardPreview() {
+    VoteCommentCard(
+        data = GroupNoteVote(
+            postDate = 12,
+            page = 12,
+            userId = 1,
+            nickName = "user.01",
+            profileImageUrl = "https://example.com/profile.jpg",
+            content = "3연에 나오는 심장은 무엇을 의미하는 걸까요?",
+            likeCount = 123,
+            commentCount = 123,
+            isLiked = true,
+            isWriter = false,
+            isLocked = false,
+            voteId = 1,
+            voteItems = listOf(
+                VoteItem(1, "김땡땡", 90, false),
+                VoteItem(2, "김땡땡", 10, false),
+            )
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/mock/CommentData.kt b/app/src/main/java/com/texthip/thip/ui/group/note/mock/CommentData.kt
index 345cd846..6885b63b 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/note/mock/CommentData.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/mock/CommentData.kt
@@ -12,6 +12,7 @@ sealed class GroupNoteItem {
     abstract val commentCount: Int
     abstract val isLiked: Boolean
     abstract val isWriter: Boolean
+    abstract val isLocked: Boolean
 }
 
 data class GroupNoteRecord(
@@ -25,6 +26,7 @@ data class GroupNoteRecord(
     override val commentCount: Int,
     override val isLiked: Boolean,
     override val isWriter: Boolean,
+    override val isLocked: Boolean,
     val recordId: Int
 ) : GroupNoteItem()
 
@@ -40,6 +42,7 @@ data class GroupNoteVote(
     override val isLiked: Boolean,
     override val isWriter: Boolean,
     val voteId: Int,
+    override val isLocked: Boolean,
     val voteItems: List<VoteItem>
 ) : GroupNoteItem()
 
@@ -48,4 +51,71 @@ data class VoteItem(
     val itemName: String,
     val percentage: Int,
     val isVoted: Boolean
+)
+
+val mockGroupNoteItems: List<GroupNoteItem> = listOf(
+    GroupNoteRecord(
+        page = 132,
+        postDate = 12,
+        userId = 1,
+        nickName = "user.01",
+        profileImageUrl = "https://example.com/profile.jpg",
+        content = "내 생각에 이 부분이 가장 어려운 것 같다. 비유도 난해하고 잘 이해가 가지 않는데 다른 메이트들은 어떻게 읽었나요?",
+        likeCount = 123,
+        commentCount = 123,
+        isLiked = true,
+        isWriter = false,
+        isLocked = false,
+        recordId = 1
+    ),
+    GroupNoteVote(
+        page = 12,
+        postDate = 12,
+        userId = 1,
+        nickName = "user.01",
+        profileImageUrl = "https://example.com/profile.jpg",
+        content = "3연에 나오는 심장은 무엇을 의미하는 걸까요?",
+        likeCount = 123,
+        commentCount = 123,
+        isLiked = false,
+        isWriter = false,
+        isLocked = true,
+        voteId = 1,
+        voteItems = listOf(
+            VoteItem(1, "김땡땡", 90, false),
+            VoteItem(2, "김땡땡", 10, false)
+        )
+    ),
+    GroupNoteRecord(
+        page = 132,
+        postDate = 12,
+        userId = 1,
+        nickName = "user.01",
+        profileImageUrl = "https://example.com/profile.jpg",
+        content = "공백 포함 글자 입력입니다.",
+        likeCount = 123,
+        commentCount = 123,
+        isLiked = false,
+        isWriter = true,
+        isLocked = false,
+        recordId = 1
+    ),
+    GroupNoteVote(
+        page = 12,
+        postDate = 12,
+        userId = 1,
+        nickName = "user.01",
+        profileImageUrl = "https://example.com/profile.jpg",
+        content = "3연에 나오는 심장은 무엇을 의미하는 걸까요?",
+        likeCount = 123,
+        commentCount = 123,
+        isLiked = true,
+        isWriter = true,
+        isLocked = false,
+        voteId = 1,
+        voteItems = listOf(
+            VoteItem(1, "김땡땡", 90, false),
+            VoteItem(2, "김땡땡", 10, false)
+        )
+    )
 )
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/mock/ReplyData.kt b/app/src/main/java/com/texthip/thip/ui/group/note/mock/ReplyData.kt
new file mode 100644
index 00000000..f6d3cc6f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/mock/ReplyData.kt
@@ -0,0 +1,80 @@
+package com.texthip.thip.ui.group.note.mock
+
+data class CommentItem(
+    val commentId: Int,
+    val userId: Int,
+    val nickName: String,
+    val genreName: String,
+    val profileImageUrl: String,
+    val content: String,
+    val postDate: String,
+    val isWriter: Boolean,
+    val isLiked: Boolean,
+    val likeCount: Int,
+    val replyList: List<ReplyItem> = emptyList()
+)
+
+data class ReplyItem(
+    val replyId: Int,
+    val userId: Int,
+    val nickName: String,
+    val genreName: String,
+    val profileImageUrl: String,
+    val parentNickname: String,
+    val content: String,
+    val postDate: String,
+    val isWriter: Boolean,
+    val isLiked: Boolean,
+    val likeCount: Int
+)
+
+data class CommentResponse(
+    val commentData: List<CommentItem>
+)
+
+val mockComment = CommentItem(
+    commentId = 1,
+    userId = 1,
+    nickName = "user.01",
+    genreName = "칭호칭호",
+    profileImageUrl = "https://example.com/profile.jpg",
+    content = "입력하세요. 댓글 내용을 입력하세요오. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. 댓글 내용을 입력하세요. ",
+    postDate = "2025.01.12",
+    isWriter = false,
+    isLiked = true,
+    likeCount = 123,
+    replyList = listOf(
+        ReplyItem(
+            replyId = 1,
+            userId = 2,
+            nickName = "user.02",
+            genreName = "칭호칭호",
+            profileImageUrl = "https://example.com/profile2.jpg",
+            parentNickname = "user.01",
+            content = "답글 내용입니다.",
+            postDate = "12시간 전",
+            isWriter = false,
+            isLiked = false,
+            likeCount = 123
+        ),
+        ReplyItem(
+            replyId = 1,
+            userId = 2,
+            nickName = "user.02",
+            genreName = "칭호칭호",
+            profileImageUrl = "https://example.com/profile2.jpg",
+            parentNickname = "user.01",
+            content = "답글 내용입니다.",
+            postDate = "2025.01.13",
+            isWriter = false,
+            isLiked = false,
+            likeCount = 2
+        )
+    )
+)
+
+val mockCommentList = CommentResponse(
+    commentData = listOf(
+        mockComment, mockComment
+    )
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteScreen.kt
new file mode 100644
index 00000000..45bfde40
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteScreen.kt
@@ -0,0 +1,196 @@
+package com.texthip.thip.ui.group.note.screen
+
+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.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+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.common.buttons.FilterButton
+import com.texthip.thip.ui.common.buttons.FloatingButton
+import com.texthip.thip.ui.common.header.HeaderMenuBarTab
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.note.component.CommentBottomSheet
+import com.texthip.thip.ui.group.note.component.FilterHeaderSection
+import com.texthip.thip.ui.group.note.component.TextCommentCard
+import com.texthip.thip.ui.group.note.component.VoteCommentCard
+import com.texthip.thip.ui.group.note.mock.GroupNoteRecord
+import com.texthip.thip.ui.group.note.mock.GroupNoteVote
+import com.texthip.thip.ui.group.note.mock.mockComment
+import com.texthip.thip.ui.group.note.mock.mockGroupNoteItems
+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 GroupNoteScreen() {
+    val tabs = listOf(stringResource(R.string.group_record), stringResource(R.string.my_record))
+    var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }
+
+    var firstPage by rememberSaveable { mutableStateOf("") }
+    var lastPage by rememberSaveable { mutableStateOf("") }
+    var isTotalSelected by rememberSaveable { mutableStateOf(false) }
+    var totalEnabled by rememberSaveable { mutableStateOf(false) }
+
+    var selectedFilter by rememberSaveable { mutableStateOf("최신순") }
+    val filters = listOf("최신순", "인기순", "댓글 많은 순")
+
+    val filteredItems = when (selectedTabIndex) {
+        0 -> mockGroupNoteItems.filter { !it.isWriter } // 다른 사람 기록
+        1 -> mockGroupNoteItems.filter { it.isWriter } // 내 기록
+        else -> emptyList()
+    }
+
+    var isBottomSheetVisible by rememberSaveable { mutableStateOf(false) }
+    var selectedNoteRecord by remember { mutableStateOf<GroupNoteRecord?>(null) }
+    var selectedNoteVote by remember { mutableStateOf<GroupNoteVote?>(null) }
+
+    Box(
+        if (isBottomSheetVisible) {
+            Modifier
+                .fillMaxSize()
+                .blur(5.dp)
+        } else {
+            Modifier.fillMaxSize()
+        }
+    ) {
+        Column(modifier = Modifier.fillMaxSize()) {
+            DefaultTopAppBar(
+                title = stringResource(R.string.record_book),
+                onLeftClick = {}
+            )
+
+            HeaderMenuBarTab(
+                titles = tabs,
+                selectedTabIndex = selectedTabIndex,
+                onTabSelected = { selectedTabIndex = it },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 20.dp, bottom = 56.dp)
+            )
+
+            // 피드 리스트 영역
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(bottom = 82.dp),
+            ) {
+                item {
+                    Row(
+                        modifier = Modifier.padding(
+                            start = 20.dp,
+                            end = 20.dp,
+                            bottom = 16.dp,
+                            top = 20.dp
+                        ),
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    ) {
+                        Icon(
+                            painterResource(R.drawable.ic_information),
+                            contentDescription = null,
+                            tint = colors.White,
+                        )
+                        Text(
+                            text = stringResource(R.string.group_note_info),
+                            modifier = Modifier.padding(start = 8.dp),
+                            color = colors.Grey01,
+                            style = typography.info_r400_s12
+                        )
+                    }
+                }
+                items(filteredItems) { item ->
+                    when (item) {
+                        is GroupNoteRecord -> TextCommentCard(
+                            data = item,
+                            onCommentClick = {
+                                selectedNoteRecord = item
+                                isBottomSheetVisible = true
+                            }
+                        )
+
+                        is GroupNoteVote -> VoteCommentCard(
+                            data = item,
+                            onCommentClick = {
+                                selectedNoteVote = item
+                                isBottomSheetVisible = true
+                            }
+                        )
+                    }
+                }
+            }
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 136.dp),
+        ) {
+            FilterButton(
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .padding(end = 20.dp),
+                selectedOption = selectedFilter,
+                options = filters,
+                onOptionSelected = { selectedFilter = it }
+            )
+
+            FilterHeaderSection(
+                firstPage = firstPage,
+                lastPage = lastPage,
+                isTotalSelected = isTotalSelected,
+                totalEnabled = totalEnabled,
+                onFirstPageChange = { firstPage = it },
+                onLastPageChange = { lastPage = it },
+                onTotalToggle = { isTotalSelected = !isTotalSelected },
+            )
+        }
+
+        FloatingButton(
+            icon = painterResource(id = R.drawable.ic_plus),
+            onClick = { /* 새 글 작성 */ }
+        )
+    }
+
+    if (isBottomSheetVisible && (selectedNoteRecord != null || selectedNoteVote != null)) {
+        CommentBottomSheet(
+            commentResponse = listOf(mockComment, mockComment, mockComment),
+            onDismiss = {
+                isBottomSheetVisible = false
+                selectedNoteRecord = null
+                selectedNoteVote = null
+            },
+            onSendReply = { replyText, commentId, replyTo ->
+                // 댓글 전송 로직 구현
+            }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun GroupNoteScreenPreview() {
+    ThipTheme {
+        GroupNoteScreen()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt
index 0c37743e..9d8a2600 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt
@@ -14,7 +14,7 @@ import com.texthip.thip.ui.common.cards.CardChat
 import com.texthip.thip.ui.common.cards.CardNote
 import com.texthip.thip.ui.common.cards.CardVote
 import com.texthip.thip.ui.group.room.mock.GroupRoomBodyData
-import com.texthip.thip.ui.group.room.mock.VoteData
+import com.texthip.thip.ui.group.room.mock.mockVoteData
 
 @Composable
 fun GroupRoomBody(
@@ -49,24 +49,6 @@ fun GroupRoomBody(
 @Preview
 @Composable
 private fun GroupRoomBodyPreview() {
-    val mockVoteData = listOf(
-        VoteData(
-            description = "투표 내용입니다...",
-            options = listOf("김땡땡", "이땡땡", "박땡땡", "최땡땡", "정땡땡"),
-            votes = listOf(50, 10, 20, 15, 5)
-        ),
-        VoteData(
-            description = "옆으로 넘긴 다른 투표 01",
-            options = listOf("어쩌구", "저쩌구", "삼번", "사번"),
-            votes = listOf(25, 45, 20, 10)
-        ),
-        VoteData(
-            description = "옆으로 넘긴 다른 투표 02",
-            options = listOf("투표 제목과 항목 버튼이 가로 스크롤되고", "아래 캐러셀 닷은", "위치 그대로, 강조점만 바뀌도록."),
-            votes = listOf(40, 35, 25)
-        )
-    )
-
     GroupRoomBody(
         data = GroupRoomBodyData(
             bookTitle = "호르몬 체인지",
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/mock/MenuBottomSheetItem.kt b/app/src/main/java/com/texthip/thip/ui/group/room/mock/MenuBottomSheetItem.kt
new file mode 100644
index 00000000..59c61c41
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/mock/MenuBottomSheetItem.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.ui.group.room.mock
+
+import androidx.compose.ui.graphics.Color
+
+data class MenuBottomSheetItem(
+    val text: String,
+    val color: Color = Color.White,
+    val onClick: () -> Unit,
+)
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/mock/VoteData.kt b/app/src/main/java/com/texthip/thip/ui/group/room/mock/VoteData.kt
index 36f22a84..638cd8f7 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/room/mock/VoteData.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/mock/VoteData.kt
@@ -1,7 +1,38 @@
 package com.texthip.thip.ui.group.room.mock
 
+import com.texthip.thip.ui.group.note.mock.VoteItem
+
 data class VoteData(
     val description: String,
-    val options: List<String>,
-    val votes: List<Int>
+    val voteItems: List<VoteItem>
+)
+
+val mockVoteData = listOf(
+    VoteData(
+        description = "투표 내용입니다...",
+        voteItems = listOf(
+            VoteItem(1, "김땡땡", 50, false),
+            VoteItem(2, "이땡땡", 10, false),
+            VoteItem(3, "박땡땡", 20, false),
+            VoteItem(4, "최땡땡", 15, false),
+            VoteItem(5, "정땡땡", 5, false)
+        )
+    ),
+    VoteData(
+        description = "옆으로 넘긴 다른 투표 01",
+        voteItems = listOf(
+            VoteItem(1, "어쩌구", 25, false),
+            VoteItem(2, "저쩌구", 45, false),
+            VoteItem(3, "삼번", 20, false),
+            VoteItem(4, "사번", 10, false)
+        )
+    ),
+    VoteData(
+        description = "옆으로 넘긴 다른 투표 02",
+        voteItems = listOf(
+            VoteItem(1, "투표 제목과 항목 버튼이 가로 스크롤되고", 40, false),
+            VoteItem(2, "아래 캐러셀 닷은", 35, false),
+            VoteItem(3, "위치 그대로, 강조점만 바뀌도록.", 25, false)
+        )
+    )
 )
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt
index d9456c0e..92521fdd 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt
@@ -25,13 +25,13 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheet
-import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheetItem
 import com.texthip.thip.ui.common.topappbar.GradationTopAppBar
 import com.texthip.thip.ui.group.room.component.GroupRoomBody
 import com.texthip.thip.ui.group.room.component.GroupRoomHeader
 import com.texthip.thip.ui.group.room.mock.GroupRoomBodyData
 import com.texthip.thip.ui.group.room.mock.GroupRoomHeaderData
-import com.texthip.thip.ui.group.room.mock.VoteData
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
+import com.texthip.thip.ui.group.room.mock.mockVoteData
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
@@ -85,27 +85,7 @@ fun GroupRoomScreen() {
                         bookAuthor = "최정화",
                         currentPage = 100,
                         percentage = 50,
-                        voteList = listOf(
-                            VoteData(
-                                description = "투표 내용입니다...",
-                                options = listOf("김땡땡", "이땡땡", "박땡땡", "최땡땡", "정땡땡"),
-                                votes = listOf(50, 10, 20, 15, 5)
-                            ),
-                            VoteData(
-                                description = "옆으로 넘긴 다른 투표 01",
-                                options = listOf("어쩌구", "저쩌구", "삼번", "사번"),
-                                votes = listOf(25, 45, 20, 10)
-                            ),
-                            VoteData(
-                                description = "옆으로 넘긴 다른 투표 02",
-                                options = listOf(
-                                    "투표 제목과 항목 버튼이 가로 스크롤되고",
-                                    "아래 캐러셀 닷은",
-                                    "위치 그대로, 강조점만 바뀌도록."
-                                ),
-                                votes = listOf(40, 35, 25)
-                            )
-                        )
+                        voteList = mockVoteData
                     )
                 )
             }
diff --git a/app/src/main/res/drawable/ic_heart_center.xml b/app/src/main/res/drawable/ic_heart_center.xml
new file mode 100644
index 00000000..ed8d7c47
--- /dev/null
+++ b/app/src/main/res/drawable/ic_heart_center.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.284,3.75C19.777,3.75 21.838,5.84 21.838,8.481C21.838,11.225 20.456,13.615 17.909,16.008C16.714,17.131 15.286,18.22 14.146,19.034C13.579,19.44 13.087,19.774 12.738,20.006C12.684,20.042 12.631,20.075 12.584,20.107C12.533,20.073 12.477,20.038 12.418,19.999C12.06,19.764 11.559,19.427 10.985,19.02C9.832,18.201 8.409,17.115 7.275,16.016C4.983,13.792 3.338,11.204 3.338,8.481C3.338,5.848 5.399,3.75 7.892,3.75C9.631,3.75 11.149,4.768 11.919,6.282C12.047,6.534 12.306,6.693 12.588,6.693C12.87,6.693 13.129,6.534 13.257,6.282C14.026,4.768 15.545,3.75 17.284,3.75Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_heart_center_filled.xml b/app/src/main/res/drawable/ic_heart_center_filled.xml
new file mode 100644
index 00000000..6cad574d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_heart_center_filled.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.284,3C15.24,3 13.475,4.197 12.588,5.943C11.701,4.197 9.936,3 7.892,3C4.962,3 2.588,5.457 2.588,8.481C2.588,11.505 4.405,14.277 6.753,16.554C9.101,18.831 12.588,21 12.588,21C12.588,21 15.962,18.867 18.423,16.554C21.048,14.088 22.588,11.514 22.588,8.481C22.588,5.448 20.214,3 17.284,3Z"
+      android:fillColor="#6868FF"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_information.xml b/app/src/main/res/drawable/ic_information.xml
new file mode 100644
index 00000000..15fd3ffd
--- /dev/null
+++ b/app/src/main/res/drawable/ic_information.xml
@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10,18C14.418,18 18,14.418 18,10C18,5.582 14.418,2 10,2C5.582,2 2,5.582 2,10C2,14.418 5.582,18 10,18Z"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10,7V11"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10,13.333H10.008"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index a20fda5d..c2ab39ae 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -81,10 +81,8 @@
     <string name="edit_role">칭호 편집</string>
     <string name="role_description">장르는 칭호와 연결돼요.</string>
     <string name="choice_one">아래에서 하나를 선택해주세요.</string>
-
     <string name="ask_account_deletion">정말로 탈퇴하시겠어요?</string>
     <string name="delete_account_description">\'예\'를 누르면 모든 기록이 사라져요.</string>
-
     <string name="literature">문학</string>
     <string name="literary_person">문학가</string>
     <string name="science_it">과학·IT</string>
@@ -95,9 +93,7 @@
     <string name="artist">예술가</string>
     <string name="humanities">인문학</string>
     <string name="philosopher">철학자</string>
-
     <string name="logout_description">또 THIP 해주실거죠?</string>
-
     <string name="leave_thip">THIP 떠나기</string>
     <string name="leave_thip_notice_title">탈퇴 주의사항</string>
     <string name="leave_thip_notice_1">회원탈퇴 시 계정정보는 </string>
@@ -108,13 +104,10 @@
     <string name="leave_thip_agree">주의사항을 확인하였으며 이에 동의합니다.</string>
     <string name="delete_account_complete">탈퇴 완료</string>
     <string name="see_you_again">다음에 또 만나요!</string>
-
-
     <string name="push_notification">푸시 알림</string>
     <string name="notification_description">알림센터의 모든 알림을 포함해요</string>
     <string name="push_off">푸시 알림이 해제되었어요.</string>
     <string name="push_on">푸시 알림이 설정되었어요.</string>
-
     <string name="customer_center_email">texthip2025@gmail.com</string>
     <string name="customer_center_description">이메일로 닉네임과 문의사항을 보내주시면\n빠른 시일 내로 해결해 드릴게요!</string>
 
@@ -166,6 +159,11 @@
     <string name="my_record">내 기록</string>
     <string name="view_by_page">페이지별 보기</string>
     <string name="view_by_all">총평 보기</string>
+    <string name="group_note_info">내 진행도에 따라 일부 댓글은 블러처리됩니다.</string>
+    <string name="write_reply">답글작성</string>
+    <string name="annotation">\@</string>
+    <string name="space_bar">\ </string>
+    <string name="reply_to">00님에게 댓글을 남겨보세요.</string>
 
     <!--    alarm    -->
     <string name="alarm_feed">피드</string>
@@ -226,7 +224,6 @@
     <string name="signin_done">이제 Thip에서 활동할 준비를 모두 마쳤어요!</string>
     <string name="start_thip">지금 바로 Thip 시작하기</string>
 
-
     <!--    feed   -->
     <string name="my_subscription_list">내 구독 리스트</string>
     <string name="whole_num">전체 %d</string>
@@ -234,5 +231,4 @@
     <string name="toast_unsubscribe">%1$s 님을 구독취소했어요</string>
     <string name="subscribe_cancel">구독취소</string>
 
-
 </resources>
\ No newline at end of file