feature/#33: DetailModalBottomSheet Ui 구현

app/src/main/java/org/techtown/twosomeheart/presentation/detail/modal/component/DetailModalBottomSheet.kt

@@ -0,0 +1,147 @@
+package org.techtown.twosomeheart.presentation.detail.modal.component
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+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.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.techtown.twosomeheart.R
+import org.techtown.twosomeheart.ui.theme.Black
+import org.techtown.twosomeheart.ui.theme.TwosomeHeartTypography
+import org.techtown.twosomeheart.ui.theme.White
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun DetailModalBottomSheet(
+    menuName: String,
+    onStarButtonClick: () -> Unit,
+    onDismissRequest: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val sheetState = rememberModalBottomSheetState()
+
+    ModalBottomSheet(
+        onDismissRequest = {
+            onDismissRequest()
+        },
+        sheetState = sheetState,
+        shape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp),
+        containerColor = White,
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(
+                min = (0.78f * LocalConfiguration.current.screenHeightDp).dp,
+                max = (0.87f * LocalConfiguration.current.screenHeightDp).dp
+            ),
+        dragHandle = {
+            Icon(
+                imageVector = ImageVector.vectorResource(R.drawable.ic_modal_bar),
+                contentDescription = stringResource(R.string.menu_detail_modal_bar),
+                tint = Color.Unspecified,
+                modifier = Modifier.padding(vertical = 6.dp)
+            )
+
+        }
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+            ) {
+                stickyHeader {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .background(White)
+                    ) {
+                        Text(
+                            text = menuName,
+                            color = Black,
+                            style = TwosomeHeartTypography.body1B14,
+                            modifier = Modifier
+                                .align(Alignment.Center)
+                        )
+                    }
+                }
+
+                item {
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    TemperatureSelection(onClick = {
+
+                    })
+
+                    Spacer(Modifier.height(16.dp))
+
+                    SizeSelection(onClick = {
+
+                    })
+
+                    Spacer(Modifier.height(24.dp))
+
+                    CoffeeBeanSelection(onClick = {
+
+                    })
+
+                    Spacer(Modifier.height(24.dp))
+
+                    PickUpSelection(onClick = {
+
+                    })
+
+                    Spacer(Modifier.height(24.dp))
+
+                    PersonalOptionSelection(
+                        onClick = {},
+                        modifier = Modifier.padding(horizontal = 16.dp)
+                    )
+                }
+            }
+
+            DetailModalBottomBar(
+                price = "1,000원",
+                onQuantityButtonClick = {},
+                onStarButtonClick = { onStarButtonClick() },
+                isEnabled = true,
+                modifier = modifier
+                    .fillMaxWidth()
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun DetailModalBottomSheetPreview() {
+    DetailModalBottomSheet(
+        menuName = "바나나 샷 라떼",
+        onStarButtonClick = {},
+        onDismissRequest = {}
+    )
+}

app/src/main/res/drawable/ic_modal_bar.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="56dp"
+    android:height="12dp"
+    android:viewportWidth="56"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M6,6H50"
+      android:strokeWidth="3"
+      android:fillColor="#00000000"
+      android:strokeColor="#D5D5D5"
+      android:strokeLineCap="round"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -56,5 +56,6 @@
     <string name ="menu_detail_modal_personal_cup_caution">개인컵 사용 안내</string>
     <string name ="menu_detail_modal_personal_option">퍼스널 옵션</string>
     <string name ="menu_detail_modal_shop">장바구니</string>
+    <string name ="menu_detail_modal_bar">모달 바텀 버튼</string>
 
 </resources>