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

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

@@ -0,0 +1,141 @@
+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.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import kotlinx.coroutines.launch
+
+@Composable
+fun CustomBottomSheet(
+    onDismiss: () -> Unit,
+    content: @Composable ColumnScope.() -> 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)
+                )
+                .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()) {
+                content()
+            }
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun PreviewCustomBottomSheet() {
+    var showSheet by remember { mutableStateOf(true) }
+
+    ThipTheme {
+        Box(Modifier.fillMaxSize()) {
+            Text(
+                text = "Main Content Area",
+                color = Color.White,
+                modifier = Modifier
+                    .align(Alignment.Center)
+            )
+
+            if (showSheet) {
+                CustomBottomSheet(
+                    onDismiss = { showSheet = false }
+                ) {
+                    Text(
+                        "바텀 시트 예시",
+                        color = Color.White,
+                        modifier = Modifier.padding(bottom = 16.dp)
+                    )
+                    Button(
+                        onClick = { showSheet = false },
+                        modifier = Modifier.fillMaxWidth()
+                    ) {
+                        Text("닫기", color = Color.Black)
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/texthip/thip/ui/group/myroom/component/GenreChipRow.kt → app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipRow.kt

@@ -1,22 +1,21 @@
-package com.texthip.thip.ui.group.myroom.component
+package com.texthip.thip.ui.common.buttons
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import com.texthip.thip.ui.common.buttons.OptionChipButton
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun GenreChipRow(
+    modifier: Modifier = Modifier.width(4.dp),
     genres: List<String>,
     selectedIndex: Int,
     onSelect: (Int) -> Unit
 ) {
     Row(
-        Modifier.fillMaxWidth(),
-        horizontalArrangement = Arrangement.SpaceEvenly
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.Center
     ) {
         genres.forEachIndexed { idx, genre ->
             OptionChipButton(
@@ -25,6 +24,9 @@ fun GenreChipRow(
                 isSelected = selectedIndex == idx,
                 onClick = { onSelect(idx) }
             )
+            if (idx < genres.size - 1) {
+                Spacer(modifier = modifier)
+            }
         }
     }
 }
@@ -37,4 +39,4 @@ fun PreviewGenreChipRow() {
         selectedIndex = 0,
         onSelect = {}
     )
-}
+}

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

@@ -28,26 +28,16 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun CardBookSearch(
     modifier: Modifier = Modifier,
-    number: Int,
     title: String,
     imageRes: Int? = R.drawable.bookcover_sample, // 기본 이미지 리소스
     onClick: () -> Unit = {}
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .clickable { onClick() }
-            .padding(vertical = 8.dp),
+            .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {
-        // 넘버
-        Text(
-            text = "$number.",
-            style = typography.menu_m500_s16_h24,
-            color = colors.White,
-            modifier = Modifier.padding(end = 12.dp)
-        )
-
         // 이미지
         Box(
             modifier = Modifier
@@ -84,7 +74,6 @@ fun CardBookSearchPreview() {
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         CardBookSearch(
-            number = 1,
             title = "단 한번의 삶"
         )
     }

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

@@ -0,0 +1,105 @@
+package com.texthip.thip.ui.common.forms
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SearchBookTextField(
+    modifier: Modifier = Modifier,
+    hint: String,
+    onSearch: (String) -> Unit = {}
+) {
+    var text by rememberSaveable { mutableStateOf("") }
+    val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
+
+    Box(
+        modifier = modifier.height(48.dp)
+    ) {
+        OutlinedTextField(
+            value = text,
+            onValueChange = {
+                text = it
+            },
+            placeholder = {
+                Text(
+                    text = hint,
+                    color = colors.Grey02,
+                    style = myStyle
+                )
+            },
+            textStyle = myStyle,
+            modifier = Modifier.fillMaxSize(),
+            shape = RoundedCornerShape(12.dp),
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = colors.White,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                focusedContainerColor = colors.DarkGrey02,
+                unfocusedContainerColor = colors.DarkGrey02,
+                cursorColor = colors.NeonGreen
+            ),
+            trailingIcon = {
+                Row(
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_x_circle_grey),
+                        contentDescription = "Clear text",
+                        modifier = Modifier
+                            .clickable { text = "" },
+                        tint = Color.Unspecified
+                    )
+
+                    Spacer(Modifier.width(20.dp))
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_search),
+                        contentDescription = "Search",
+                        modifier = Modifier
+                            .clickable { onSearch(text) },
+                        tint = colors.White
+                    )
+                    Spacer(Modifier.width(8.dp))
+                }
+            },
+            singleLine = true
+        )
+    }
+}
+
+@Preview()
+@Composable
+private fun SearchBookTextFieldPreview() {
+    SearchBookTextField(
+        hint = "책 제목, 저자검색",
+        onSearch = { /* 검색 실행 */ }
+    )
+}