[feat] #151 프로필 갤러리에서 선택 및 완료 로직 추가

Team-Recordy · Jan 13, 2025 · 200ea80 · 200ea80
1 parent aba92b7
commit 200ea80
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/core/designsystem/src/main/res/drawable/img_selection.png b/core/designsystem/src/main/res/drawable/img_selection.png
diff --git a/core/designsystem/src/main/res/drawable/img_selection_check.png b/core/designsystem/src/main/res/drawable/img_selection_check.png
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
@@ -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,25 +23,30 @@ 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
 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<GalleryImage?>(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
@@ -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,
         )
     }