Merge pull request #161 from boostcampwm-2024/feature/#54-edit-pick-list

[feature] 픽 목록 편집 모드

Author: meanjoo

app/src/main/java/com/squirtles/musicroad/common/DefaultTopAppBar.kt

@@ -1,5 +1,7 @@
 package com.squirtles.musicroad.common
 
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.CenterAlignedTopAppBar
@@ -10,6 +12,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
@@ -23,6 +26,7 @@ fun DefaultTopAppBar(
     title: String,
     titleStyle: TextStyle = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.Bold),
     onBackClick: () -> Unit,
+    actions: @Composable RowScope.() -> Unit = {},
 ) {
     CenterAlignedTopAppBar(
         title = {
@@ -31,6 +35,7 @@ fun DefaultTopAppBar(
                 style = titleStyle
             )
         },
+        modifier = Modifier.displayCutoutPadding(),
         navigationIcon = {
             IconButton(
                 onClick = onBackClick
@@ -42,6 +47,7 @@ fun DefaultTopAppBar(
                 )
             }
         },
+        actions = actions,
         colors = TopAppBarDefaults.centerAlignedTopAppBarColors().copy(
             containerColor = Color.Transparent,
             titleContentColor = White

app/src/main/java/com/squirtles/musicroad/pick/components/DeletePickDialog.kt renamed to app/src/main/java/com/squirtles/musicroad/common/MessageAlertDialog.kt

@@ -1,8 +1,9 @@
-package com.squirtles.musicroad.pick.components
+package com.squirtles.musicroad.common
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -22,18 +23,18 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.squirtles.musicroad.R
-import com.squirtles.musicroad.common.VerticalSpacer
-import com.squirtles.musicroad.common.HorizontalSpacer
 import com.squirtles.musicroad.ui.theme.Black
 import com.squirtles.musicroad.ui.theme.MusicRoadTheme
 import com.squirtles.musicroad.ui.theme.Primary
 import com.squirtles.musicroad.ui.theme.White
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun DeletePickDialog(
+internal fun MessageAlertDialog(
     onDismissRequest: () -> Unit,
-    onDeletion: () -> Unit
+    title: String,
+    body: String,
+    buttons: @Composable RowScope.() -> Unit,
 ) {
     BasicAlertDialog(
         onDismissRequest = { onDismissRequest() },
@@ -48,7 +49,7 @@ fun DeletePickDialog(
                 verticalArrangement = Arrangement.Center
             ) {
                 Text(
-                    text = stringResource(R.string.delete_pick_dialog_title),
+                    text = title,
                     color = Black,
                     fontWeight = FontWeight.Bold,
                     style = MaterialTheme.typography.bodyLarge
@@ -57,7 +58,7 @@ fun DeletePickDialog(
                 VerticalSpacer(8)
 
                 Text(
-                    text = stringResource(R.string.delete_pick_dialog_body),
+                    text = body,
                     color = Black,
                     style = MaterialTheme.typography.bodyLarge
                 )
@@ -67,45 +68,59 @@ fun DeletePickDialog(
                 Row(
                     modifier = Modifier.fillMaxWidth(),
                     horizontalArrangement = Arrangement.End,
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    TextButton(
-                        onClick = { onDismissRequest() },
-                        colors = ButtonDefaults.buttonColors().copy(
-                            containerColor = Color.Transparent,
-                            contentColor = Black
-                        )
-                    ) {
-                        Text(stringResource(R.string.delete_pick_dialog_cancel))
-                    }
-
-                    HorizontalSpacer(8)
-
-                    TextButton(
-                        onClick = { onDeletion() },
-                        colors = ButtonDefaults.buttonColors().copy(
-                            containerColor = Color.Transparent,
-                            contentColor = Primary
-                        )
-                    ) {
-                        Text(
-                            text = stringResource(R.string.delete_pick_dialog_delete),
-                            fontWeight = FontWeight.Bold
-                        )
-                    }
-                }
+                    verticalAlignment = Alignment.CenterVertically,
+                    content = buttons
+                )
             }
         }
     }
 }
 
+@Composable
+internal fun DialogTextButton(
+    onClick: () -> Unit,
+    text: String,
+    textColor: Color = Black,
+    buttonColor: Color = Color.Transparent,
+    fontWeight: FontWeight? = null,
+) {
+    TextButton(
+        onClick = onClick,
+        colors = ButtonDefaults.buttonColors().copy(
+            containerColor = buttonColor,
+            contentColor = textColor
+        )
+    ) {
+        Text(
+            text = text,
+            fontWeight = fontWeight,
+        )
+    }
+}
+
 @Preview(showBackground = true)
 @Composable
-fun DeletePickDialogPreview() {
+private fun DeletePickDialogPreview() {
     MusicRoadTheme {
-        DeletePickDialog(
+        MessageAlertDialog(
             onDismissRequest = {},
-            onDeletion = {}
+            title = stringResource(R.string.delete_pick_dialog_title),
+            body = stringResource(R.string.delete_pick_dialog_body),
+            buttons = {
+                DialogTextButton(
+                    onClick = {},
+                    text = "취소"
+                )
+
+                HorizontalSpacer(8)
+
+                DialogTextButton(
+                    onClick = {},
+                    text = "삭제하기",
+                    textColor = Primary,
+                    fontWeight = FontWeight.Bold
+                )
+            }
         )
     }
 }

app/src/main/java/com/squirtles/musicroad/common/PickInfoText.kt

@@ -69,9 +69,10 @@ fun CommentText(
 }
 
 @Composable
-fun TotalCountText(
-    modifier: Modifier = Modifier,
+fun CountText(
     totalCount: Int,
+    modifier: Modifier = Modifier,
+    countLabel: String = stringResource(R.string.total_count_text),
     defaultColor: Color = MaterialTheme.colorScheme.onSurface,
     pointColor: Color = MaterialTheme.colorScheme.primary,
     style: TextStyle = MaterialTheme.typography.titleMedium
@@ -84,7 +85,7 @@ fun TotalCountText(
                     fontWeight = FontWeight.Bold
                 )
             ) {
-                append("전체 ")
+                append("$countLabel ")
             }
             withStyle(
                 SpanStyle(

app/src/main/java/com/squirtles/musicroad/map/components/ClusterBottomSheet.kt

@@ -28,12 +28,12 @@ import com.squirtles.musicroad.common.AlbumImage
 import com.squirtles.musicroad.common.CommentText
 import com.squirtles.musicroad.common.Constants.DEFAULT_PADDING
 import com.squirtles.musicroad.common.Constants.REQUEST_IMAGE_SIZE_DEFAULT
+import com.squirtles.musicroad.common.CountText
 import com.squirtles.musicroad.common.CreatedByOtherUserText
 import com.squirtles.musicroad.common.CreatedBySelfText
 import com.squirtles.musicroad.common.FavoriteCountText
-import com.squirtles.musicroad.common.SongInfoText
-import com.squirtles.musicroad.common.TotalCountText
 import com.squirtles.musicroad.common.HorizontalSpacer
+import com.squirtles.musicroad.common.SongInfoText
 import com.squirtles.musicroad.common.VerticalSpacer
 import kotlinx.coroutines.launch
 
@@ -57,11 +57,11 @@ fun ClusterBottomSheet(
         containerColor = MaterialTheme.colorScheme.surface
     ) {
         clusterPickList?.let { pickList ->
-            TotalCountText(
+            CountText(
+                totalCount = pickList.size,
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(start = DEFAULT_PADDING),
-                totalCount = pickList.size
+                    .padding(start = DEFAULT_PADDING)
             )
 
             VerticalSpacer(height = 8)

app/src/main/java/com/squirtles/musicroad/pick/DetailPickScreen.kt

@@ -41,6 +41,8 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.lerp
@@ -53,19 +55,22 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.flowWithLifecycle
 import com.squirtles.domain.model.Pick
 import com.squirtles.musicroad.R
+import com.squirtles.musicroad.common.DialogTextButton
+import com.squirtles.musicroad.common.HorizontalSpacer
+import com.squirtles.musicroad.common.MessageAlertDialog
 import com.squirtles.musicroad.common.VerticalSpacer
 import com.squirtles.musicroad.media.PlayerServiceViewModel
 import com.squirtles.musicroad.pick.PickViewModel.Companion.DEFAULT_PICK
 import com.squirtles.musicroad.pick.components.CircleAlbumCover
 import com.squirtles.musicroad.pick.components.CommentText
-import com.squirtles.musicroad.pick.components.DeletePickDialog
 import com.squirtles.musicroad.pick.components.DetailPickTopAppBar
 import com.squirtles.musicroad.pick.components.MusicVideoKnob
 import com.squirtles.musicroad.pick.components.PickInformation
 import com.squirtles.musicroad.pick.components.SongInfo
 import com.squirtles.musicroad.pick.components.music.MusicPlayer
 import com.squirtles.musicroad.pick.components.music.visualizer.BaseVisualizer
 import com.squirtles.musicroad.ui.theme.Black
+import com.squirtles.musicroad.ui.theme.Primary
 import com.squirtles.musicroad.ui.theme.White
 import com.squirtles.musicroad.videoplayer.MusicVideoScreen
 import kotlinx.coroutines.launch
@@ -272,14 +277,32 @@ fun DetailPickScreen(
     }
 
     if (showDeletePickDialog) {
-        DeletePickDialog(
+        MessageAlertDialog(
             onDismissRequest = {
                 showDeletePickDialog = false
             },
-            onDeletion = {
-                showDeletePickDialog = false
-                pickViewModel.deletePick(pickId)
-            }
+            title = stringResource(R.string.delete_pick_dialog_title),
+            body = stringResource(R.string.delete_pick_dialog_body),
+            buttons = {
+                DialogTextButton(
+                    onClick = {
+                        showDeletePickDialog = false
+                    },
+                    text = stringResource(R.string.delete_pick_dialog_cancel)
+                )
+
+                HorizontalSpacer(8)
+
+                DialogTextButton(
+                    onClick = {
+                        showDeletePickDialog = false
+                        pickViewModel.deletePick(pickId)
+                    },
+                    text = stringResource(R.string.delete_pick_dialog_delete),
+                    textColor = Primary,
+                    fontWeight = FontWeight.Bold
+                )
+            },
         )
     }
 

app/src/main/java/com/squirtles/musicroad/picklist/DeleteSelectedPickDialog.kt

@@ -0,0 +1,45 @@
+package com.squirtles.musicroad.picklist
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import com.squirtles.musicroad.R
+import com.squirtles.musicroad.common.DialogTextButton
+import com.squirtles.musicroad.common.HorizontalSpacer
+import com.squirtles.musicroad.common.MessageAlertDialog
+import com.squirtles.musicroad.ui.theme.Primary
+
+@Composable
+internal fun DeleteSelectedPickDialog(
+    selectedPickCount: Int,
+    pickListType: PickListType,
+    onDismissRequest: () -> Unit,
+    onDeletePickClick: () -> Unit,
+) {
+    MessageAlertDialog(
+        onDismissRequest = onDismissRequest,
+        title = stringResource(R.string.delete_pick_dialog_title),
+        body = stringResource(
+            when (pickListType) {
+                PickListType.FAVORITE -> R.string.delete_selected_favorite_pick_dialog_body
+                PickListType.CREATED -> R.string.delete_selected_pick_dialog_body
+            },
+            selectedPickCount
+        ),
+        buttons = {
+            DialogTextButton(
+                onClick = onDismissRequest,
+                text = stringResource(R.string.delete_pick_dialog_cancel)
+            )
+
+            HorizontalSpacer(8)
+
+            DialogTextButton(
+                onClick = onDeletePickClick,
+                text = stringResource(R.string.delete_pick_dialog_delete),
+                textColor = Primary,
+                fontWeight = FontWeight.Bold
+            )
+        },
+    )
+}