🔀 :: (#251) 디테일 화면 디자인 V2 반영

app/src/main/java/com/idiotfrogs/memoryseal/MainActivity.kt

@@ -84,20 +84,12 @@ class MainActivity : ComponentActivity() {
                                 entry<Routes.Profile> { ProfileRoute() }
                                 entry<Routes.EditProfile> { EditProfileRoute() }
                                 entry<Routes.Setting> { SettingRoute() }
-                                entry<Routes.Detail> {
-                                    DetailRoute(
-                                        isVoteStart = false,
-                                        iSSeal = false,
-                                        capsuleId = it.id,
-                                    )
-                                }
+                                entry<Routes.Detail> { DetailRoute(it.id) }
                                 entry<Routes.Message> {
                                     // TODO 메시지 화면 퍼블리싱 후 추가하기
                                     it.id
                                 }
-                                entry<Routes.Friend> {
-                                    FriendRoute(it.id)
-                                }
+                                entry<Routes.Friend> { FriendRoute(it.id) }
                                 entry<Routes.Management> {
                                     ManagementRoute(
                                         capsuleId = it.id,

core/designsystem/src/main/java/com/idiotfrogs/designsystem/component/MSCalender.kt

@@ -35,6 +35,8 @@ import com.idiotfrogs.designsystem.util.wavyStroke
 import com.idiotfrogs.resource.R
 import kotlinx.datetime.LocalDateTime
 import kotlinx.datetime.TimeZone
+import kotlinx.datetime.DateTimeUnit
+import kotlinx.datetime.plus
 import kotlinx.datetime.todayIn
 import kotlinx.datetime.YearMonth
 import kotlinx.datetime.atTime
@@ -51,11 +53,21 @@ import kotlin.time.ExperimentalTime
 @OptIn(ExperimentalTime::class)
 @Composable
 fun MSCalender(
+    showSealDate: Boolean = false,
     onDateSelected: (LocalDateTime) -> Unit
 ) {
     val today = Clock.System.todayIn(TimeZone.currentSystemDefault())
-    val selectedDate = remember { mutableStateOf(today) }
-    var currentYearMonth by remember { mutableStateOf(YearMonth(today.year, today.month)) }
+    val initialSelectedDate = if (showSealDate) {
+        today.plus(1, DateTimeUnit.DAY)
+    } else {
+        today
+    }
+    val selectedDate = remember(showSealDate) {
+        mutableStateOf(initialSelectedDate)
+    }
+    var currentYearMonth by remember(showSealDate) {
+        mutableStateOf(YearMonth(initialSelectedDate.year, initialSelectedDate.month))
+    }
 
     val currentMonth = today.yearMonth
     val canGoToPrevMonth = currentYearMonth > currentMonth
@@ -164,29 +176,33 @@ fun MSCalender(
                 items(dates) { date ->
                     val isCurrentMonth = date.yearMonth == currentYearMonth
                     val isSelected = date == selectedDate.value
+                    val isSealDate = showSealDate && date == today
                     val isPast = date < today
+                    val isDisabled = !isCurrentMonth || isPast
 
                     Box(
                         modifier = Modifier
                             .aspectRatio(1f)
                             .then(
-                                if (isSelected) {
-                                    Modifier.wavyStroke(
-                                        color = MSTheme.color.primaryNormal,
-                                        fillColor = MSTheme.color.primaryNormal,
-                                        strokeWidth = 5.dp,
-                                        cornerRadius = 8.dp,
-                                        amplitude = 1.5.dp,
-                                        spacing = 4.dp,
-                                        contentPadding = 0.dp,
-                                        seed = date.day.toLong(),
-                                    )
-                                } else {
-                                    Modifier
+                                when {
+                                    isSelected -> {
+                                        Modifier.wavyStroke(
+                                            color = MSTheme.color.primaryNormal,
+                                            fillColor = MSTheme.color.primaryNormal,
+                                            strokeWidth = 5.dp,
+                                            cornerRadius = 8.dp,
+                                            amplitude = 1.dp,
+                                            spacing = 3.dp,
+                                            contentPadding = 0.dp,
+                                            seed = date.day.toLong(),
+                                        )
+                                    }
+
+                                    else -> Modifier
                                 }
                             )
                             .noRippleClickable {
-                                if (!isPast) {
+                                if (!isPast && !isSealDate) {
                                     selectedDate.value = date
 
                                     val selectedMonth = date.yearMonth
@@ -199,14 +215,32 @@ fun MSCalender(
                             },
                         contentAlignment = Alignment.Center
                     ) {
-                        MSText(
-                            text = date.day.toString(),
-                            color = when {
-                                isSelected -> MSTheme.color.white
-                                isCurrentMonth -> MSTheme.color.greyG5
-                                else -> MSTheme.color.greyG2
+                        if (isSealDate) {
+                            Column(
+                                horizontalAlignment = Alignment.CenterHorizontally,
+                                verticalArrangement = Arrangement.Center,
+                            ) {
+                                MSText(
+                                    text = date.day.toString(),
+                                    color = MSTheme.color.primaryDark,
+                                )
+                                MSText(
+                                    text = "봉인일",
+                                    fontSize = 11.dp,
+                                    fontWeight = FontWeight.SemiBold,
+                                    color = MSTheme.color.primaryDark,
+                                )
                             }
-                        )
+                        } else {
+                            MSText(
+                                text = date.day.toString(),
+                                color = when {
+                                    isSelected -> MSTheme.color.white
+                                    isDisabled -> MSTheme.color.greyG2
+                                    else -> MSTheme.color.greyG5
+                                }
+                            )
+                        }
                     }
                 }
             }
@@ -227,4 +261,4 @@ private fun MsCalenderPreview() {
     ) {
         MSCalender {}
     }
-}
+}

core/designsystem/src/main/java/com/idiotfrogs/designsystem/component/MSDashHorizontalDivider.kt

@@ -0,0 +1,44 @@
+package com.idiotfrogs.designsystem.component
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.idiotfrogs.designsystem.theme.MSTheme
+
+@Composable
+fun MSDashHorizontalDivider(
+    modifier: Modifier = Modifier,
+    color: Color = MSTheme.color.greyG1,
+    thickness: Dp = 1.dp,
+    dashWidth: Dp = 4.dp,
+    gapWidth: Dp = 4.dp,
+) {
+    val density = LocalDensity.current
+    val dashWidthPx = with(density) { dashWidth.toPx() }
+    val gapWidthPx = with(density) { gapWidth.toPx() }
+    val thicknessPx = with(density) { thickness.toPx() }
+
+    Canvas(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(thickness)
+    ) {
+        drawLine(
+            color = color,
+            start = Offset(0f, size.height / 2f),
+            end = Offset(size.width, size.height / 2f),
+            strokeWidth = thicknessPx,
+            pathEffect = PathEffect.dashPathEffect(
+                intervals = floatArrayOf(dashWidthPx, gapWidthPx),
+            ),
+        )
+    }
+}

core/designsystem/src/main/java/com/idiotfrogs/designsystem/component/MSDialog.kt

@@ -3,6 +3,7 @@ package com.idiotfrogs.designsystem.component
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -24,6 +25,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import com.idiotfrogs.designsystem.component.button.MSButton
 import com.idiotfrogs.designsystem.theme.MSTheme
+import com.idiotfrogs.designsystem.util.wavyStroke
 
 @Composable
 fun MSDialog(
@@ -101,6 +103,78 @@ fun MSDialog(
     }
 }
 
+@Composable
+fun MSTitleDialog(
+    title: String,
+    onConfirm: () -> Unit,
+    onCancel: () -> Unit,
+    modifier: Modifier = Modifier,
+    confirmText: String = "확인",
+    cancelText: String = "취소",
+    confirmButtonColor: Color = MSTheme.color.primaryNormal,
+    cancelButtonColor: Color = MSTheme.color.greyG1,
+    confirmTextColor: Color = MSTheme.color.white,
+    cancelTextColor: Color = MSTheme.color.greyG4,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Dialog(onDismissRequest = onCancel) {
+        Column(
+            modifier = modifier
+                .fillMaxWidth()
+                .wavyStroke(
+                    color = MSTheme.color.white,
+                    fillColor = MSTheme.color.white,
+                    contentPadding = 20.dp,
+                )
+        ) {
+            MSText(
+                text = title,
+                fontSize = 20.dp,
+            )
+            content()
+            Row(modifier = Modifier.fillMaxWidth()) {
+                MSButton(
+                    modifier = Modifier.weight(1f),
+                    onClick = onCancel,
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = cancelButtonColor
+                    ),
+                    pressColors = ButtonDefaults.buttonColors(
+                        containerColor = cancelButtonColor
+                    ),
+                    wavyStrokeColor = cancelButtonColor,
+                    contentPadding = PaddingValues(12.dp)
+                ) {
+                    MSText(
+                        text = cancelText,
+                        fontSize = 16.dp,
+                        color = cancelTextColor
+                    )
+                }
+                Spacer(Modifier.width(8.dp))
+                MSButton(
+                    modifier = Modifier.weight(1f),
+                    onClick = onConfirm,
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = confirmButtonColor
+                    ),
+                    pressColors = ButtonDefaults.buttonColors(
+                        containerColor = confirmButtonColor
+                    ),
+                    wavyStrokeColor = confirmButtonColor,
+                    contentPadding = PaddingValues(11.dp)
+                ) {
+                    MSText(
+                        text = confirmText,
+                        fontSize = 16.dp,
+                        color = confirmTextColor
+                    )
+                }
+            }
+        }
+    }
+}
+
 @Preview
 @Composable
 fun MSDialogPreview() {

core/designsystem/src/main/java/com/idiotfrogs/designsystem/util/WavyStroke.kt

@@ -501,8 +501,8 @@ private fun makeEdgeWavyBackgroundPath(
             }
 
             DrawType.BOTTOM -> {
-                lineTo(0f, 0f)
                 lineTo(width, 0f)
+                lineTo(0f, 0f)
             }
 
             DrawType.START -> {
@@ -542,4 +542,4 @@ private fun makeOpenSmoothPath(points: List<Offset>): Path {
         val last = points.last()
         lineTo(last.x, last.y)
     }
-}
+}