[NDGL-86] design: NDGLBottomSheet 수정

Author: mj010504

core/ui/src/main/java/com/yapp/ndgl/core/ui/designsystem/NDGLBottomSheet.kt

@@ -1,19 +1,29 @@
 package com.yapp.ndgl.core.ui.designsystem
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
+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.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BottomSheetDefaults
 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.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.yapp.ndgl.core.ui.R
 import com.yapp.ndgl.core.ui.theme.NDGLTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -22,6 +32,7 @@ fun NDGLBottomSheet(
     modifier: Modifier = Modifier,
     onDismissRequest: () -> Unit,
     showDragHandle: Boolean = true,
+    title: String? = null,
     content: @Composable ColumnScope.() -> Unit,
 ) {
     val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
@@ -37,8 +48,31 @@ fun NDGLBottomSheet(
         },
         containerColor = NDGLTheme.colors.white,
         shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
-        content = content,
-    )
+    ) {
+        title?.let { title ->
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 18.dp, horizontal = 24.dp),
+            ) {
+                Text(title, color = NDGLTheme.colors.black400, style = NDGLTheme.typography.bodyLgMedium)
+                Spacer(Modifier.weight(1f))
+                Icon(
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_24_close),
+                    contentDescription = null,
+                    tint = NDGLTheme.colors.black600,
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(shape = CircleShape)
+                        .clickable {
+                            onDismissRequest()
+                        },
+                )
+            }
+        }
+
+        content()
+    }
 }
 
 @Preview(showBackground = true)
@@ -48,20 +82,15 @@ private fun NDGLBottomSheetWithHandlePreview() {
         NDGLBottomSheet(
             onDismissRequest = {},
             showDragHandle = true,
+            title = "바텀시트 제목",
         ) {
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(24.dp),
             ) {
-                Text(
-                    text = "바텀시트 제목",
-                    style = NDGLTheme.typography.subtitleLgSemiBold,
-                    color = NDGLTheme.colors.black900,
-                )
                 Text(
                     text = "바텀시트 내용입니다.",
-                    modifier = Modifier.padding(top = 16.dp),
                     style = NDGLTheme.typography.bodyLgMedium,
                     color = NDGLTheme.colors.black500,
                 )
@@ -77,20 +106,15 @@ private fun NDGLBottomSheetWithoutHandlePreview() {
         NDGLBottomSheet(
             onDismissRequest = {},
             showDragHandle = false,
+            title = "바텀시트 제목",
         ) {
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(24.dp),
             ) {
-                Text(
-                    text = "바텀시트 제목",
-                    style = NDGLTheme.typography.subtitleLgSemiBold,
-                    color = NDGLTheme.colors.black900,
-                )
                 Text(
                     text = "바텀시트 내용입니다.",
-                    modifier = Modifier.padding(top = 16.dp),
                     style = NDGLTheme.typography.bodyLgMedium,
                     color = NDGLTheme.colors.black500,
                 )

feature/travel/src/main/java/com/yapp/ndgl/feature/travel/traveldetail/TravelDetailScreen.kt

@@ -495,11 +495,11 @@ private fun TravelDetailScreen(
             NDGLBottomSheet(
                 onDismissRequest = dismissTimelineBottomSheet,
                 showDragHandle = false,
+                title = stringResource(R.string.schedule_setting_title),
             ) {
                 TimelineContent(
                     startTime = state.startTime ?: 8.hours,
                     totalDuration = state.itineraries.getOrNull(state.selectedDay - 1)?.totalDuration ?: 0.hours,
-                    onDismissRequest = dismissTimelineBottomSheet,
                     onConfirm = confirmTimelineSetting,
                 )
             }

feature/travel/src/main/java/com/yapp/ndgl/feature/travel/traveldetail/component/TimelineContent.kt

@@ -56,7 +56,6 @@ import kotlin.time.Duration.Companion.minutes
 internal fun TimelineContent(
     startTime: Duration,
     totalDuration: Duration,
-    onDismissRequest: () -> Unit,
     onConfirm: (Duration) -> Unit,
 ) {
     var isSettingStartTime by remember { mutableStateOf(false) }
@@ -68,33 +67,6 @@ internal fun TimelineContent(
             .fillMaxWidth()
             .padding(24.dp),
     ) {
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Text(
-                text = stringResource(R.string.schedule_setting_title),
-                color = NDGLTheme.colors.black900,
-                style = NDGLTheme.typography.titleMdSemiBold,
-            )
-            Spacer(Modifier.weight(1f))
-            Box(
-                modifier = Modifier
-                    .size(32.dp)
-                    .clip(RoundedCornerShape(8.dp))
-                    .background(NDGLTheme.colors.black50)
-                    .clickable { onDismissRequest() }
-                    .padding(8.dp),
-            ) {
-                Icon(
-                    imageVector = ImageVector.vectorResource(R.drawable.ic_24_close),
-                    contentDescription = null,
-                    tint = NDGLTheme.colors.black900,
-                )
-            }
-        }
-        Spacer(Modifier.height(32.dp))
-
         if (isSettingStartTime) {
             val hourItems = remember { (0..23).toList() }
             val minuteItems = remember { (0..55 step 5).toList() }
@@ -323,7 +295,6 @@ private fun TimelineContentPreview() {
         TimelineContent(
             startTime = 9.hours,
             totalDuration = 16.hours,
-            onDismissRequest = {},
             onConfirm = {},
         )
     }