[FEAT/#65] 탐색 지역선택 바텀시트 dragHandle 구현

SOPT-all · Jan 19, 2025 · d2aa30d · d2aa30d
1 parent bdcbcc2
commit d2aa30d
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 0 deletions.
diff --git a/...com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreLocationDragHandle.kt b/...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/...com/spoony/spoony/presentation/explore/component/bottomsheet/ExploreSortingBottomSheet.kt b/...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()
+            )
+        }
+    }
+}