[feat] #62 content bottom sheet

lsakee · lsakee · commit 92cb9c4cfcdc · 2024-07-16T22:03:55.000+09:00
diff --git a/core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyChipButton.kt b/core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyChipButton.kt
@@ -19,7 +19,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.record.designsystem.theme.Black
 import com.record.designsystem.theme.Gray01
-import com.record.designsystem.theme.Gray04
 import com.record.designsystem.theme.Gray08
 import com.record.designsystem.theme.Gray09
 import com.record.designsystem.theme.Main
@@ -44,7 +43,7 @@ fun RecordyChipButton(
     val (borderLineColor, contentColor, backGroundColor) = if (isActive) {
         if (isCheckSmall) Triple(Gray01, Gray09, Gray01) else Triple(Main, Main, Gray08)
     } else {
-        Triple(Color.Transparent, Gray04, if (isCheckSmall) Gray09 else Gray08)
+        Triple(Color.Transparent, Gray01, if (isCheckSmall) Gray09 else Gray08)
     }
 
     val textStyle = when {
diff --git a/core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyMiddleButton.kt b/core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyMiddleButton.kt
@@ -4,7 +4,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
diff --git a/core/designsystem/src/main/res/drawable/ic_drag_handle.xml b/core/designsystem/src/main/res/drawable/ic_drag_handle.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="4dp"
+    android:viewportWidth="32"
+    android:viewportHeight="4">
+  <path
+      android:pathData="M2,0L30,0A2,2 0,0 1,32 2L32,2A2,2 0,0 1,30 4L2,4A2,2 0,0 1,0 2L0,2A2,2 0,0 1,2 0z"
+      android:fillColor="#79747E"/>
+</vector>
diff --git a/feature/navigator/src/main/java/com/record/navigator/MainScreen.kt b/feature/navigator/src/main/java/com/record/navigator/MainScreen.kt
@@ -87,7 +87,7 @@ internal fun MainScreen(
                 uploadNavGraph(
                     padding = innerPadding,
                     navigateSelectedVideo = navigator::navigateSelectedVideo,
-              )
+                )
 
                 videoNavGraph(
                     padding = innerPadding,
diff --git a/feature/upload/src/main/java/com/record/upload/SelectedVideoScreen.kt b/feature/upload/src/main/java/com/record/upload/SelectedVideoScreen.kt
@@ -30,8 +30,7 @@ fun SelectedVideoRoute(
 }
 
 @Composable
-fun SelectedVideoScreen(
-) {
+fun SelectedVideoScreen() {
     Log.d("images", "${getAllVideos(10, null, LocalContext.current)}")
     val a = getAllVideos(10, null, LocalContext.current)
 }
diff --git a/feature/upload/src/main/java/com/record/upload/UploadContract.kt b/feature/upload/src/main/java/com/record/upload/UploadContract.kt
@@ -6,6 +6,7 @@ import com.record.ui.base.UiState
 data class UploadState(
     val showShouldShowRationaleDialog: Boolean = false,
     val isSelectedVideoSheetOpen: Boolean = false,
+    val isSelectedDefinedContentSheetOpen: Boolean = false,
 ) : UiState
 
 sealed interface UploadSideEffect : SideEffect
diff --git a/feature/upload/src/main/java/com/record/upload/UploadViewModel.kt b/feature/upload/src/main/java/com/record/upload/UploadViewModel.kt
@@ -22,4 +22,11 @@ class UploadViewModel @Inject constructor() :
     fun hideIsSelectedVideoSheetOpen() = intent {
         copy(isSelectedVideoSheetOpen = false)
     }
+    fun showIsSelectedDefinedContentSheetOpen() = intent {
+        copy(isSelectedDefinedContentSheetOpen = true)
+    }
+
+    fun hideIsSelectedDefinedContentSheetOpen() = intent {
+        copy(isSelectedDefinedContentSheetOpen = false)
+    }
 }
diff --git a/feature/upload/src/main/java/com/record/upload/VideoPickerScreen.kt b/feature/upload/src/main/java/com/record/upload/VideoPickerScreen.kt
@@ -53,6 +53,7 @@ import com.record.designsystem.theme.Background
 import com.record.designsystem.theme.RecordyTheme
 import com.record.ui.extension.customClickable
 import com.record.ui.lifecycle.LaunchedEffectWithLifecycle
+import com.record.upload.component.bottomsheet.DefinedContentBottomSheet
 import com.record.upload.component.bottomsheet.SelectedVideoBottomSheet
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.launch
@@ -73,11 +74,12 @@ fun VideoPickerRoute(
 
     VideoPickerScreen(
         state = state,
-        onClickKeyword = {},
         showShouldShowRationaleDialog = viewModel::showShouldShowRationaleDialog,
         hideShouldShowRationaleDialog = viewModel::hideShouldShowRationaleDialog,
         showIsSelectedVideoSheetOpen = viewModel::showIsSelectedVideoSheetOpen,
         hideIsSelectedVideoSheetOpen = viewModel::hideIsSelectedVideoSheetOpen,
+        showIsSelectedDefinedContentSheetOpen = viewModel::showIsSelectedDefinedContentSheetOpen,
+        hideIsSelectedDefinedContentSheetOpen = viewModel::hideIsSelectedDefinedContentSheetOpen,
     )
 }
 
@@ -86,11 +88,12 @@ fun VideoPickerRoute(
 @Composable
 fun VideoPickerScreen(
     state: UploadState = UploadState(),
-    onClickKeyword: () -> Unit = {},
     showShouldShowRationaleDialog: () -> Unit = {},
     hideShouldShowRationaleDialog: () -> Unit = {},
     showIsSelectedVideoSheetOpen: () -> Unit = {},
     hideIsSelectedVideoSheetOpen: () -> Unit = {},
+    showIsSelectedDefinedContentSheetOpen: () -> Unit = {},
+    hideIsSelectedDefinedContentSheetOpen: () -> Unit = {},
 ) {
     val context = LocalContext.current
     val cameraPermissionState = rememberPermissionState(Manifest.permission.READ_MEDIA_VIDEO)
@@ -182,7 +185,7 @@ fun VideoPickerScreen(
                     .background(RecordyTheme.colors.gray08, shape = RoundedCornerShape(30.dp))
                     .padding(vertical = 8.dp)
                     .padding(start = 8.dp, end = 12.dp)
-                    .customClickable(onClick = onClickKeyword),
+                    .customClickable(onClick = showIsSelectedDefinedContentSheetOpen),
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.Center,
             ) {
@@ -249,6 +252,11 @@ fun VideoPickerScreen(
             onDismissRequest = hideIsSelectedVideoSheetOpen,
             galleyVideos = exampleVideoList,
         )
+        DefinedContentBottomSheet(
+            sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+            isSheetOpen = state.isSelectedDefinedContentSheetOpen,
+            onDismissRequest = hideIsSelectedDefinedContentSheetOpen,
+        )
     }
 }
 
diff --git a/feature/upload/src/main/java/com/record/upload/component/bottomsheet/DefinedContentBottomSheet.kt b/feature/upload/src/main/java/com/record/upload/component/bottomsheet/DefinedContentBottomSheet.kt
@@ -1,15 +1,96 @@
 package com.record.upload.component.bottomsheet
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SheetState
+import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.record.designsystem.R
+import com.record.designsystem.component.bottomsheet.RecordyBottomSheet
+import com.record.designsystem.component.button.RecordyChipButton
+import com.record.designsystem.component.button.RecordyMiddleButton
+import com.record.designsystem.theme.RecordyTheme
+import timber.log.Timber
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
 fun DefinedContentBottomSheet(
     sheetState: SheetState = rememberModalBottomSheetState(),
     isSheetOpen: Boolean,
     onDismissRequest: () -> Unit,
 ) {
+    RecordyBottomSheet(
+        isSheetOpen = isSheetOpen,
+        sheetState = sheetState,
+        onDismissRequest = onDismissRequest,
+        shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(RecordyTheme.colors.gray08)
+                .padding(horizontal = 16.dp),
+        ) {
+            Image(
+                modifier = Modifier
+                    .padding(vertical = 16.dp)
+                    .align(Alignment.CenterHorizontally),
+                painter = painterResource(id = R.drawable.ic_drag_handle),
+                contentDescription = null,
+            )
+            Text(
+                text = "키워드 선택",
+                style = RecordyTheme.typography.subtitle,
+                color = RecordyTheme.colors.gray01,
+                modifier = Modifier
+                    .align(Alignment.CenterHorizontally),
+            )
+            Text(
+                text = "해당 공간은\n" + "어떤 느낌인가요?",
+                style = RecordyTheme.typography.title1,
+                color = RecordyTheme.colors.gray01,
+                modifier = Modifier.padding(top = 22.dp, bottom = 11.dp),
+            )
+            Text(
+                text = "키워드 1~3개 선택 시, 프로필에서 취향을 분석해 드립니다.",
+                style = RecordyTheme.typography.caption1,
+                color = RecordyTheme.colors.gray03,
+            )
+            FlowRow(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 28.dp, bottom = 50.dp),
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+            ) {
+                val chips = listOf("asdsadasdasda", "asdasdb", "asdasdc", "dasd", "asdsadasdasda", "asdasdb", "asdasdc", "dasd", "asdsadasdasda", "asdasdb", "asdasdc", "dasd")
+                chips.forEach { chip ->
+                    RecordyChipButton(
+                        text = "$chip",
+                        isActive = false,
+                        onClick = { Timber.d("close key word") },
+                    )
+                }
+            }
+            RecordyMiddleButton(
+                modifier = Modifier.wrapContentWidth().padding(bottom = 44.dp).align(Alignment.CenterHorizontally),
+                text = "적용하기",
+                onClick = { },
+            )
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -30,8 +30,7 @@ fun SelectedVideoRoute(`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`@Composable`
`33`		`-fun SelectedVideoScreen(`
`34`		`-) {`
	`33`	`+fun SelectedVideoScreen() {`
`35`	`34`	`Log.d("images", "${getAllVideos(10, null, LocalContext.current)}")`
`36`	`35`	`val a = getAllVideos(10, null, LocalContext.current)`
`37`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,11 @@ class UploadViewModel @Inject constructor() :`
`22`	`22`	`fun hideIsSelectedVideoSheetOpen() = intent {`
`23`	`23`	`copy(isSelectedVideoSheetOpen = false)`
`24`	`24`	`}`
	`25`	`+ fun showIsSelectedDefinedContentSheetOpen() = intent {`
	`26`	`+ copy(isSelectedDefinedContentSheetOpen = true)`
	`27`	`+ }`
	`28`	`+`
	`29`	`+ fun hideIsSelectedDefinedContentSheetOpen() = intent {`
	`30`	`+ copy(isSelectedDefinedContentSheetOpen = false)`
	`31`	`+ }`
`25`	`32`	`}`