diff --git a/app/src/main/java/com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreLocationDragHandle.kt b/app/src/main/java/com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreLocationDragHandle.kt new file mode 100644 index 0000000..8b48a05 --- /dev/null +++ b/app/src/main/java/com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreLocationDragHandle.kt @@ -0,0 +1,49 @@ +package com.spoony.spoony.presentation.explore.component.bottomsheet + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import com.spoony.spoony.R +import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme +import com.spoony.spoony.core.util.extension.noRippleClickable + +@Composable +fun ExploreLocationDragHandle( + onClick: () -> Unit +) { + Box( + contentAlignment = Alignment.CenterEnd, + modifier = Modifier + .padding(top = 12.dp) + ) { + Text( + text = "지역 선택", + style = SpoonyAndroidTheme.typography.body1b, + color = SpoonyAndroidTheme.colors.gray900, + textAlign = TextAlign.Center, + modifier = Modifier + .fillMaxWidth() + ) + Icon( + imageVector = ImageVector.vectorResource(R.drawable.ic_close_24), + contentDescription = null, + tint = SpoonyAndroidTheme.colors.gray400, + modifier = Modifier + .padding( + top = 4.dp, + bottom = 4.dp, + end = 20.dp + ) + .noRippleClickable(onClick = onClick) + ) + } +} diff --git a/app/src/main/java/com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreSortingBottomSheet.kt b/app/src/main/java/com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreSortingBottomSheet.kt new file mode 100644 index 0000000..63d67a6 --- /dev/null +++ b/app/src/main/java/com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreSortingBottomSheet.kt @@ -0,0 +1,122 @@ +package com.spoony.spoony.presentation.explore.component.bottomsheet + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.ExperimentalMaterial3Api +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.text.style.TextAlign +import androidx.compose.ui.unit.dp +import com.spoony.spoony.core.designsystem.component.bottomsheet.SpoonyBasicBottomSheet +import com.spoony.spoony.core.designsystem.component.button.SpoonyButton +import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme +import com.spoony.spoony.core.designsystem.type.ButtonSize +import com.spoony.spoony.core.designsystem.type.ButtonStyle +import com.spoony.spoony.core.util.extension.noRippleClickable + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun ExploreSortingBottomSheet( + onDismiss: () -> Unit, + onClick: (String) -> Unit, + currentSortingOption: String = "latest" +) { + val sheetState = rememberModalBottomSheetState( + confirmValueChange = { false } + ) + + SpoonyBasicBottomSheet( + onDismiss = onDismiss, + sheetState = sheetState + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding( + top = 16.dp, + bottom = 20.dp, + start = 20.dp, + end = 20.dp + ) + ) { + Text( + text = "최신순", + style = SpoonyAndroidTheme.typography.body2b, + color = if (currentSortingOption == "latest") { + SpoonyAndroidTheme.colors.gray900 + } else { + SpoonyAndroidTheme.colors.gray400 + }, + textAlign = TextAlign.Center, + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(8.dp)) + .noRippleClickable { + onClick("latest") + onDismiss() + } + .background( + if (currentSortingOption == "latest") { + SpoonyAndroidTheme.colors.gray0 + } else { + SpoonyAndroidTheme.colors.white + } + ) + .padding(vertical = 18.dp) + ) + + Spacer( + modifier = Modifier + .height(12.dp) + ) + + Text( + text = "인기순", + style = SpoonyAndroidTheme.typography.body2b, + color = if (currentSortingOption == "popularity") { + SpoonyAndroidTheme.colors.gray900 + } else { + SpoonyAndroidTheme.colors.gray400 + }, + textAlign = TextAlign.Center, + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(8.dp)) + .noRippleClickable { + onClick("popularity") + onDismiss() + } + .background( + if (currentSortingOption == "popularity") { + SpoonyAndroidTheme.colors.gray0 + } else { + SpoonyAndroidTheme.colors.white + } + ) + .padding(vertical = 18.dp) + ) + + Spacer( + modifier = Modifier + .height(12.dp) + ) + + SpoonyButton( + text = "취소", + style = ButtonStyle.Secondary, + size = ButtonSize.Xlarge, + onClick = onDismiss, + modifier = Modifier + .fillMaxWidth() + ) + } + } +}