Merge pull request #27 from SOPT-all/feat/component-bottom-sheet

[feat] Bottom Sheet 컴포넌트 구현
SOPT-all · Jan 18, 2025 · 37fe8de · 37fe8de
2 parents e063e11 + e95a652
commit 37fe8de
Show file tree

Hide file tree

Showing 7 changed files with 522 additions and 0 deletions.
diff --git a/.../org/android/bbangzip/presentation/component/bottomsheet/BbangZipBasicModalBottomSheet.kt b/.../org/android/bbangzip/presentation/component/bottomsheet/BbangZipBasicModalBottomSheet.kt
@@ -0,0 +1,86 @@
+package org.android.bbangzip.presentation.component.bottomsheet
+
+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.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetState
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.ui.theme.BBANGZIPTheme
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BbangZipBasicModalBottomSheet(
+    isBottomSheetVisible: Boolean,
+    onDismissRequest: () -> Unit,
+    modifier: Modifier = Modifier,
+    sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+    title: @Composable (ColumnScope.() -> Unit) = {},
+    content: @Composable (ColumnScope.() -> Unit) = {},
+    interactButton: @Composable (ColumnScope.() -> Unit) = {},
+    cancelButton: @Composable (ColumnScope.() -> Unit) = {},
+) {
+    if (isBottomSheetVisible) {
+        ModalBottomSheet(
+            onDismissRequest = onDismissRequest,
+            sheetState = sheetState,
+            shape = RoundedCornerShape(topStart = 48.dp, topEnd = 48.dp),
+            containerColor = BbangZipTheme.colors.backgroundNormal_FFFFFF,
+            scrimColor = BbangZipTheme.colors.materialDimmer_282119_52,
+        ) {
+            Column(
+                modifier =
+                    modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 16.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                title()
+                content()
+                interactButton()
+                cancelButton()
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun BasicModalBottomSheetPreview() {
+    BBANGZIPTheme {
+        var isBottomSheetVisible by rememberSaveable { mutableStateOf(true) }
+
+        BbangZipBasicModalBottomSheet(
+            modifier = Modifier.padding(horizontal = 14.dp),
+            isBottomSheetVisible = isBottomSheetVisible,
+            onDismissRequest = { isBottomSheetVisible = !isBottomSheetVisible },
+            title = {
+                Text(
+                    text = "BbangZip Basic Modal Bottom Sheet Title",
+                    modifier =
+                        Modifier
+                            .align(Alignment.CenterHorizontally)
+                            .padding(vertical = 15.dp),
+                )
+            },
+            content = {
+                Text(text = "BbangZip Basic Modal Bottom Sheet Content")
+            },
+        )
+    }
+}
diff --git a/.../org/android/bbangzip/presentation/component/bottomsheet/BbangZipDatePickerBottomSheet.kt b/.../org/android/bbangzip/presentation/component/bottomsheet/BbangZipDatePickerBottomSheet.kt
@@ -0,0 +1,71 @@
+package org.android.bbangzip.presentation.component.bottomsheet
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.presentation.model.Date
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BbangZipDatePickerBottomSheet(
+    isBottomSheetVisible: Boolean,
+    modifier: Modifier = Modifier,
+    bottomSheetTitle: String,
+    selectedDate: Date? = null,
+    onSelectedDateChanged: (Date) -> Unit = {},
+    onClickInputButton: (Date) -> Unit = {},
+    onDismissRequest: () -> Unit = {},
+) {
+    BbangZipBasicModalBottomSheet(
+        modifier = modifier,
+        isBottomSheetVisible = isBottomSheetVisible,
+        onDismissRequest = onDismissRequest,
+        title = {
+            Text(
+                text = bottomSheetTitle,
+                modifier =
+                    Modifier
+                        .align(Alignment.CenterHorizontally)
+                        .padding(vertical = 15.dp),
+                style = BbangZipTheme.typography.headline1Bold,
+                color = BbangZipTheme.colors.labelNeutral_282119_88,
+            )
+        },
+        content = {
+            Spacer(modifier = Modifier.height(24.dp))
+
+            // TODO Picker 넣기, padding horizontal 24 넣기
+
+            Spacer(modifier = Modifier.height(24.dp))
+        },
+        interactButton = {
+            // TODO Button 넣기, Button 클릭 시에 onClickInputButton() 전달
+
+            Spacer(modifier = Modifier.height(16.dp))
+        },
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BbangZipDatePickerBottomSheetPreview() {
+    var isBottomSheetVisible by rememberSaveable { mutableStateOf(true) }
+
+    BbangZipDatePickerBottomSheet(
+        isBottomSheetVisible = isBottomSheetVisible,
+        bottomSheetTitle = "언제까지 공부할까요?",
+        onDismissRequest = { isBottomSheetVisible = !isBottomSheetVisible },
+    )
+}
diff --git a/...droid/bbangzip/presentation/component/bottomsheet/BbangZipListDefaultPickerBottomSheet.kt b/...droid/bbangzip/presentation/component/bottomsheet/BbangZipListDefaultPickerBottomSheet.kt
@@ -0,0 +1,98 @@
+package org.android.bbangzip.presentation.component.bottomsheet
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+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.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.presentation.util.modifier.applyFilterOnClick
+import org.android.bbangzip.ui.theme.BBANGZIPTheme
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BbangZipListDefaultPickerBottomSheet(
+    isBottomSheetVisible: Boolean,
+    itemList: List<String>,
+    modifier: Modifier = Modifier,
+    title: @Composable (ColumnScope.() -> Unit) = {},
+    selectedItem: Int = 0,
+    onSelectedItemChanged: (Int) -> Unit = {},
+    onDismissRequest: () -> Unit = {},
+) {
+    BbangZipBasicModalBottomSheet(
+        modifier = modifier,
+        isBottomSheetVisible = isBottomSheetVisible,
+        onDismissRequest = onDismissRequest,
+        title = { title() },
+        content = {
+            LazyColumn(
+                modifier = Modifier.padding(top = 8.dp, bottom = 24.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                itemsIndexed(
+                    itemList,
+                    key = { _, item -> item },
+                ) { index, item ->
+                    Text(
+                        text = itemList[index],
+                        modifier =
+                            Modifier
+                                .fillMaxWidth()
+                                .applyFilterOnClick { onSelectedItemChanged(index) }
+                                .background(
+                                    color = if (index != selectedItem) BbangZipTheme.colors.staticWhite_FFFFFF else BbangZipTheme.colors.fillStrong_68645E_16,
+                                    shape = RoundedCornerShape(16.dp),
+                                )
+                                .padding(vertical = 8.dp),
+                        textAlign = TextAlign.Center,
+                        style = BbangZipTheme.typography.body1Bold,
+                        color = BbangZipTheme.colors.labelNormal_282119,
+                    )
+                }
+            }
+        },
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BbangZipListDefaultPickerBottomSheetPreview() {
+    var isBottomSheetVisible by rememberSaveable { mutableStateOf(true) }
+    var selectedSort by rememberSaveable { mutableIntStateOf(0) }
+
+    BBANGZIPTheme {
+        BbangZipListDefaultPickerBottomSheet(
+            isBottomSheetVisible = isBottomSheetVisible,
+            onDismissRequest = { isBottomSheetVisible = !isBottomSheetVisible },
+            itemList =
+                listOf(
+                    "최근 등록 순",
+                    "분량 적은 순",
+                    "마감 기한 빠른 순",
+                ),
+            selectedItem = 1,
+            onSelectedItemChanged = { index ->
+                selectedSort = index
+                isBottomSheetVisible = !isBottomSheetVisible
+            },
+        )
+    }
+}
diff --git a/.../org/android/bbangzip/presentation/component/bottomsheet/BbangZipListPickerBottomSheet.kt b/.../org/android/bbangzip/presentation/component/bottomsheet/BbangZipListPickerBottomSheet.kt
@@ -0,0 +1,103 @@
+package org.android.bbangzip.presentation.component.bottomsheet
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+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.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.android.bbangzip.presentation.util.modifier.applyFilterOnClick
+import org.android.bbangzip.ui.theme.BBANGZIPTheme
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BbangZipListPickerBottomSheet(
+    isBottomSheetVisible: Boolean,
+    itemList: List<String>,
+    modifier: Modifier = Modifier,
+    title: @Composable (ColumnScope.() -> Unit) = {},
+    onSelectedItemChanged: (Int) -> Unit = {},
+    onDismissRequest: () -> Unit = {},
+) {
+    BbangZipBasicModalBottomSheet(
+        modifier = modifier,
+        isBottomSheetVisible = isBottomSheetVisible,
+        onDismissRequest = onDismissRequest,
+        title = { title() },
+        content = {
+            LazyColumn(
+                modifier = Modifier.padding(vertical = 24.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                itemsIndexed(
+                    itemList,
+                    key = { _, item -> item },
+                ) { index, item ->
+                    Text(
+                        text = itemList[index],
+                        modifier =
+                            Modifier
+                                .fillMaxWidth()
+                                .padding(vertical = 8.dp)
+                                .applyFilterOnClick { onSelectedItemChanged(index) },
+                        textAlign = TextAlign.Center,
+                        style = BbangZipTheme.typography.body1Bold,
+                        color = BbangZipTheme.colors.labelNormal_282119,
+                    )
+                }
+            }
+        },
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BbangZipListPickerBottomSheetPreview() {
+    var isBottomSheetVisible by rememberSaveable { mutableStateOf(true) }
+    var selectedPiece by rememberSaveable { mutableStateOf<Int?>(null) }
+
+    BBANGZIPTheme {
+        BbangZipListPickerBottomSheet(
+            isBottomSheetVisible = isBottomSheetVisible,
+            title = {
+                Text(
+                    text = "몇 조각으로 쪼개서 공부할까요?",
+                    modifier =
+                        Modifier
+                            .align(Alignment.CenterHorizontally)
+                            .padding(vertical = 15.dp),
+                    style = BbangZipTheme.typography.headline1Bold,
+                    color = BbangZipTheme.colors.labelNeutral_282119_88,
+                )
+            },
+            onDismissRequest = { isBottomSheetVisible = !isBottomSheetVisible },
+            itemList =
+                listOf(
+                    "1조각",
+                    "2조각",
+                    "3조각",
+                    "4조각",
+                    "5조각",
+                    "6조각",
+                ),
+            onSelectedItemChanged = { index ->
+                selectedPiece = index
+                isBottomSheetVisible = !isBottomSheetVisible
+            },
+        )
+    }
+}