diff --git a/core/designsystem/src/main/res/drawable/img_selection.png b/core/designsystem/src/main/res/drawable/img_selection.png new file mode 100644 index 00000000..16071219 Binary files /dev/null and b/core/designsystem/src/main/res/drawable/img_selection.png differ diff --git a/core/designsystem/src/main/res/drawable/img_selection_check.png b/core/designsystem/src/main/res/drawable/img_selection_check.png new file mode 100644 index 00000000..725fe4a0 Binary files /dev/null and b/core/designsystem/src/main/res/drawable/img_selection_check.png differ diff --git a/feature/setting/src/main/java/com/record/setting/component/SelectedImageBottomSheet.kt b/feature/setting/src/main/java/com/record/setting/component/SelectedImageBottomSheet.kt index fdc19371..aa834154 100644 --- a/feature/setting/src/main/java/com/record/setting/component/SelectedImageBottomSheet.kt +++ b/feature/setting/src/main/java/com/record/setting/component/SelectedImageBottomSheet.kt @@ -1,13 +1,18 @@ package com.record.setting.component +import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid @@ -18,13 +23,17 @@ 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.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import coil.ImageLoader @@ -32,11 +41,12 @@ import coil.compose.AsyncImage import coil.decode.VideoFrameDecoder import coil.request.CachePolicy import coil.request.ImageRequest +import com.record.designsystem.R import com.record.designsystem.component.bottomsheet.RecordyBottomSheet -import com.record.designsystem.component.navbar.TopNavigationBar import com.record.designsystem.theme.Background import com.record.designsystem.theme.Gray03 import com.record.designsystem.theme.RecordyTheme +import com.record.designsystem.theme.White import com.record.ui.extension.customClickable import com.record.ui.scroll.OnBottomReached import com.record.upload.model.GalleryImage @@ -54,6 +64,7 @@ fun SelectedImageBottomSheet( isLoading: Boolean, ) { val lazyGridState = rememberLazyGridState() + var selectedImage by remember { mutableStateOf(null) } lazyGridState.OnBottomReached { if (!isLoading) { @@ -74,7 +85,40 @@ fun SelectedImageBottomSheet( modifier = Modifier .align(Alignment.TopCenter), ) { - TopNavigationBar(title = "사진 선택", enableGradation = true) + Row(modifier = Modifier.fillMaxWidth()) { + Box( + modifier = Modifier + .background(RecordyTheme.colors.background) + .fillMaxWidth() + .padding( + top = 45.dp, + bottom = 15.dp, + ), + ) { + Text( + modifier = Modifier.align(Alignment.Center), + text = "사진 선택", + color = RecordyTheme.colors.gray01, + style = RecordyTheme.typography.title3, + ) + Row( + modifier = Modifier.align(Alignment.CenterEnd), + ) { + Text( + modifier = Modifier.customClickable { + if (selectedImage != null) { + onDismissRequest() + isSelectedImage(selectedImage!!) + } + }, + text = "완료", + color = if (selectedImage == null) RecordyTheme.colors.gray08 else RecordyTheme.colors.gray01, + style = RecordyTheme.typography.title3, + ) + Spacer(modifier = Modifier.width(16.dp)) + } + } + } Text( text = "사진을 선택해주세요.", color = Gray03, @@ -94,9 +138,9 @@ fun SelectedImageBottomSheet( items(galleyImages) { image -> VideoThumbnail( video = image, + isSelected = selectedImage == image, onVideoSelected = { - onDismissRequest() - isSelectedImage(image) + selectedImage = if (selectedImage == image) null else image }, ) } @@ -109,6 +153,7 @@ fun SelectedImageBottomSheet( @Composable fun VideoThumbnail( video: GalleryImage, + isSelected: Boolean, onVideoSelected: (GalleryImage) -> Unit, ) { val context = LocalContext.current @@ -135,8 +180,14 @@ fun VideoThumbnail( Box( modifier = Modifier .width(100.dp) - .height(100.dp), - ) { + .height(100.dp) + .border( + width = if (isSelected) 2.dp else 0.dp, + color = if (isSelected) RecordyTheme.colors.viskitYellow200 else androidx.compose.ui.graphics.Color.Transparent, + shape = RectangleShape, + ), + + ) { AsyncImage( model = request, imageLoader = imageLoader, @@ -147,5 +198,13 @@ fun VideoThumbnail( .clip(RectangleShape) .customClickable { onVideoSelected(video) }, ) + Image( + painter = painterResource(if (isSelected) R.drawable.img_selection_check else R.drawable.img_selection), + contentDescription = "Selected Icon", + modifier = Modifier + .align(Alignment.TopEnd) + .padding(top = 6.dp, end = 6.dp) + .size(16.dp), + ) } } diff --git a/feature/setting/src/main/java/com/record/setting/profileedit/ProfileEditViewModel.kt b/feature/setting/src/main/java/com/record/setting/profileedit/ProfileEditViewModel.kt index 4a810e3b..c97449d7 100644 --- a/feature/setting/src/main/java/com/record/setting/profileedit/ProfileEditViewModel.kt +++ b/feature/setting/src/main/java/com/record/setting/profileedit/ProfileEditViewModel.kt @@ -146,7 +146,9 @@ class ProfileEditViewModel @Inject constructor( fun hideImageDialog() = intent { copy( selectInfo = selectInfo.copy(showDialog = false), - btnEnable = true + btnEnable = true, + isSelected = true, + image = null, ) }