[feat] Bottom Sheet 컴포넌트 구현

app/src/main/java/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(),
+    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")
+            },
+        )
+    }
+}

app/src/main/java/org/android/bbangzip/presentation/component/bottomsheet/BbangZipDatePickerBottomSheet.kt

@@ -0,0 +1,79 @@
+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.SheetValue
+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.presentation.model.ExamDate
+import org.android.bbangzip.ui.theme.BbangZipTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BbangZipDatePickerBottomSheet(
+    isBottomSheetVisible: Boolean,
+    modifier: Modifier = Modifier,
+    bottomSheetTitle: String,
+    selectedDate: ExamDate? = null,
+    onSelectedDateChanged: (ExamDate) -> Unit = {},
+    onClickInputButton: (ExamDate) -> Unit = {},
+    onDismissRequest: () -> Unit = {},
+) {
+    BbangZipBasicModalBottomSheet(
+        modifier = modifier,
+        isBottomSheetVisible = isBottomSheetVisible,
+        onDismissRequest = onDismissRequest,
+        sheetState =
+            rememberModalBottomSheetState(
+                confirmValueChange = { newState ->
+                    newState == SheetValue.Hidden
+                },
+            ),
+        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 },
+    )
+}

app/src/main/java/org/android/bbangzip/presentation/component/bottomsheet/BbangZipListDefaultPickerBottomSheet.kt

@@ -0,0 +1,107 @@
+package org.android.bbangzip.presentation.component.bottomsheet
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.SheetValue
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+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.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,
+        sheetState =
+            rememberModalBottomSheetState(
+                confirmValueChange = { newState ->
+                    !(newState == SheetValue.Hidden && isBottomSheetVisible)
+                },
+            ),
+        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()
+                                // TODO focused 확장 clickable로 변경,
+                                .clickable { 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
+            },
+        )
+    }
+}

app/src/main/java/org/android/bbangzip/presentation/component/bottomsheet/BbangZipListPickerBottomSheet.kt

@@ -0,0 +1,112 @@
+package org.android.bbangzip.presentation.component.bottomsheet
+
+import androidx.compose.foundation.clickable
+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.SheetValue
+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.text.style.TextAlign
+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 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,
+        sheetState =
+            rememberModalBottomSheetState(
+                confirmValueChange = { newState ->
+                    !(newState == SheetValue.Hidden && isBottomSheetVisible)
+                },
+            ),
+        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)
+                                // TODO focused 확장 clickable로 변경
+                                .clickable { 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
+            },
+        )
+    }
+}