[UI] 기록장 화면에 필요한 컴포넌트

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

@@ -0,0 +1,179 @@
+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.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()
+                    }
+                }
+            }
+            .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
+                            }
+                        }
+                    )
+                }
+                .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()
+                                }
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MenuBottomSheetPreview() {
+    MenuBottomSheet(
+        items = listOf(
+            MenuBottomSheetItem(
+                text = stringResource(R.string.leave_room),
+                color = colors.White,
+                onClick = { }
+            ),
+            MenuBottomSheetItem(
+                text = stringResource(R.string.report_room),
+                color = colors.Red,
+                onClick = { }
+            ),
+            MenuBottomSheetItem(
+                text = stringResource(R.string.delete_room),
+                color = colors.Red,
+                onClick = { }
+            )
+        ),
+        onDismiss = {}
+    )
+}

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

@@ -0,0 +1,119 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun ActionBarButton(
+    modifier: Modifier = Modifier,
+    isLiked: Boolean,
+    likeCount: Int,
+    commentCount: Int,
+    isSaveVisible: Boolean = false,
+    isSaved: Boolean = false,
+    isPinVisible: Boolean = false,
+    onLikeClick: () -> Unit = {},
+    onCommentClick: () -> Unit = {},
+    onBookmarkClick: () -> Unit = {},
+    onPinClick: () -> Unit = {}
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Row(
+                modifier = Modifier.clickable { onLikeClick() },
+                horizontalArrangement = Arrangement.spacedBy(2.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(if (isLiked) R.drawable.ic_heart_filled else R.drawable.ic_heart),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+                Text(
+                    text = likeCount.toString(),
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.White,
+                )
+            }
+
+            Row(
+                modifier = Modifier.clickable { onCommentClick() },
+                horizontalArrangement = Arrangement.spacedBy(2.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_comment),
+                    contentDescription = null,
+                    tint = colors.White
+                )
+                Text(
+                    text = commentCount.toString(),
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.White,
+                )
+            }
+
+            if (isPinVisible) {
+                Icon(
+                    modifier = Modifier.clickable { onPinClick() },
+                    painter = painterResource(R.drawable.ic_pin),
+                    contentDescription = null,
+                    tint = Color.White
+                )
+            }
+        }
+
+        if (isSaveVisible) {
+            Icon(
+                modifier = Modifier.clickable { onBookmarkClick() },
+                painter = painterResource(if (isSaved) R.drawable.ic_save_filled else R.drawable.ic_save),
+                contentDescription = null,
+                tint = Color.Unspecified
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ActionBarButtonPreview() {
+    var isLiked by remember { mutableStateOf(false) }
+    var isSaved by remember { mutableStateOf(false) }
+
+    ActionBarButton(
+        isLiked = isLiked,
+        likeCount = 123,
+        commentCount = 45,
+        isSaveVisible = true,
+        isSaved = isSaved,
+        isPinVisible = true,
+        onLikeClick = { isLiked = !isLiked },
+        onCommentClick = {},
+        onBookmarkClick = { isSaved = !isSaved },
+        onPinClick = {}
+    )
+}

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

@@ -42,10 +42,12 @@ fun FilterButton(
 ) {
     var expanded by remember { mutableStateOf(false) }
 
-    Column(modifier = modifier) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.End
+    ) {
         Row(
             modifier = Modifier
-                .fillMaxWidth()
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     indication = null // 클릭 효과 제거