Merge pull request #17 from YAPP-Github/design/NDGL-53

[NDGL-53] 내 여행 템플릿 화면 UI/UX

Author: mj010504

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

@@ -0,0 +1,100 @@
+package com.yapp.ndgl.core.ui.designsystem
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yapp.ndgl.core.ui.theme.NDGLTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun NDGLBottomSheet(
+    modifier: Modifier = Modifier,
+    onDismissRequest: () -> Unit,
+    showDragHandle: Boolean = true,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+
+    ModalBottomSheet(
+        modifier = modifier,
+        onDismissRequest = onDismissRequest,
+        sheetState = sheetState,
+        dragHandle = if (showDragHandle) {
+            { BottomSheetDefaults.DragHandle() }
+        } else {
+            null
+        },
+        containerColor = NDGLTheme.colors.white,
+        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
+        content = content,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun NDGLBottomSheetWithHandlePreview() {
+    NDGLTheme {
+        NDGLBottomSheet(
+            onDismissRequest = {},
+            showDragHandle = true,
+        ) {
+            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,
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun NDGLBottomSheetWithoutHandlePreview() {
+    NDGLTheme {
+        NDGLBottomSheet(
+            onDismissRequest = {},
+            showDragHandle = false,
+        ) {
+            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,
+                )
+            }
+        }
+    }
+}

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

@@ -0,0 +1,72 @@
+package com.yapp.ndgl.core.ui.designsystem
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+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.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
+
+@Composable
+fun NDGLCheckbox(
+    checked: Boolean,
+    onClick: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .size(24.dp)
+            .clip(RoundedCornerShape(4.dp))
+            .background(
+                if (checked) NDGLTheme.colors.green500 else NDGLTheme.colors.white,
+            )
+            .border(
+                width = 1.25.dp,
+                color = if (checked) Color.Unspecified else NDGLTheme.colors.black400,
+                shape = RoundedCornerShape(4.dp),
+            )
+            .clickable { onClick() },
+        contentAlignment = Alignment.Center,
+    ) {
+        if (checked) {
+            Icon(
+                imageVector = ImageVector.vectorResource(R.drawable.ic_20_check),
+                contentDescription = null,
+                tint = NDGLTheme.colors.white,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun NDGLCheckboxPreview() {
+    NDGLTheme {
+        NDGLCheckbox(
+            checked = false,
+            onClick = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun NDGLCheckboxCheckedPreview() {
+    NDGLTheme {
+        NDGLCheckbox(
+            checked = true,
+            onClick = {},
+        )
+    }
+}