[UI/#182] BottomSheet 상단 stroke 추가

Author: DongChyeon

core/ui/src/main/java/com/yapp/ui/component/OrbitBottomSheet.kt

@@ -1,7 +1,7 @@
 package com.yapp.ui.component
 
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -19,9 +19,14 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.PathMeasure
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.yapp.designsystem.theme.OrbitTheme
 import kotlinx.coroutines.launch
@@ -37,7 +42,9 @@ fun OrbitBottomSheet(
     onDismissRequest: () -> Unit = {},
     shape: Shape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp),
     containerColor: Color = OrbitTheme.colors.gray_800,
-    content: @Composable ColumnScope.() -> Unit,
+    strokeColor: Color = OrbitTheme.colors.gray_600,
+    strokeThickness: Dp = 2.dp,
+    content: @Composable () -> Unit,
 ) {
     val scope = rememberCoroutineScope()
     if (isSheetOpen) {
@@ -54,7 +61,76 @@ fun OrbitBottomSheet(
             containerColor = containerColor,
             dragHandle = null,
         ) {
-            content()
+            Box {
+                content()
+                BottomSheetTopRoundedStroke(
+                    strokeColor = strokeColor,
+                    strokeThickness = strokeThickness,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun BottomSheetTopRoundedStroke(
+    modifier: Modifier = Modifier,
+    strokeColor: Color,
+    strokeThickness: Dp = 1.dp,
+    radius: Dp = 30.dp,
+) {
+    Canvas(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(radius + strokeThickness), // Stroke 고려
+    ) {
+        val width = size.width
+        val height = size.height
+        val radiusPx = radius.toPx()
+        val fadeWidth = radiusPx // 양 끝에서 선이 얇아지는 범위
+
+        val path = Path().apply {
+            moveTo(0f, height) // 왼쪽 끝
+            arcTo(
+                rect = Rect(0f, 0f, radiusPx * 2, radiusPx * 2),
+                startAngleDegrees = 180f,
+                sweepAngleDegrees = 90f,
+                forceMoveTo = false,
+            )
+            lineTo(width - radiusPx, 0f)
+            arcTo(
+                rect = Rect(width - radiusPx * 2, 0f, width, radiusPx * 2),
+                startAngleDegrees = 270f,
+                sweepAngleDegrees = 90f,
+                forceMoveTo = false,
+            )
+        }
+
+        val pathMeasure = PathMeasure().apply { setPath(path, false) }
+        val totalLength = pathMeasure.length
+        val segmentCount = 100
+
+        for (i in 0 until segmentCount) {
+            val start = i * (totalLength / segmentCount)
+            val end = (i + 1) * (totalLength / segmentCount)
+
+            val segmentPath = Path()
+            if (pathMeasure.getSegment(start, end, segmentPath, true)) {
+                val minThickness = 0.dp.toPx()
+                val maxThickness = strokeThickness.toPx()
+
+                val thickness = when {
+                    start < fadeWidth -> minThickness + (maxThickness - minThickness) * (start / fadeWidth)
+                    start > totalLength - fadeWidth -> minThickness + (maxThickness - minThickness) * ((totalLength - start) / fadeWidth)
+                    else -> maxThickness
+                }
+
+                drawPath(
+                    path = segmentPath,
+                    color = strokeColor,
+                    style = Stroke(width = thickness),
+                )
+            }
         }
     }
 }

feature/home/src/main/java/com/yapp/home/component/bottomsheet/AlarmListBottomSheet.kt

@@ -51,6 +51,7 @@ import com.yapp.alarm.component.AlarmListItem
 import com.yapp.designsystem.theme.OrbitTheme
 import com.yapp.domain.model.Alarm
 import com.yapp.home.component.AlarmListDropDownMenu
+import com.yapp.ui.component.BottomSheetTopRoundedStroke
 import com.yapp.ui.component.checkbox.OrbitCheckBox
 import com.yapp.ui.utils.OnLoadMore
 import feature.home.R
@@ -195,66 +196,76 @@ internal fun AlarmBottomSheetContent(
         onLoadMore()
     }
 
-    Column(
-        modifier = modifier
-            .fillMaxSize()
-            .background(
-                color = OrbitTheme.colors.gray_900,
-                shape = RoundedCornerShape(topStart = cornerRadius, topEnd = cornerRadius),
-            ),
-        horizontalAlignment = Alignment.CenterHorizontally,
-    ) {
-        Spacer(modifier = Modifier.height(topPadding))
-
-        if (isSelectionMode) {
-            AlarmSelectionTopBar(
-                checked = isAllSelected,
-                onClickCheckAll = onClickCheckAll,
-                onClickClose = onClickClose,
-            )
-        } else {
-            AlarmListTopBar(
-                menuExpanded = menuExpanded,
-                onClickAdd = onClickAdd,
-                onClickMore = onClickMore,
-                onDismissRequest = onDismissRequest,
-                onClickEdit = onClickEdit,
-            )
-        }
-
-        LazyColumn(
-            state = listState,
+    Box {
+        Column(
+            modifier = modifier
+                .fillMaxSize()
+                .background(
+                    color = OrbitTheme.colors.gray_900,
+                    shape = RoundedCornerShape(topStart = cornerRadius, topEnd = cornerRadius),
+                ),
+            horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            itemsIndexed(alarms) { index, alarm ->
-                AlarmListItem(
-                    id = alarm.id,
-                    repeatDays = alarm.repeatDays,
-                    isHolidayAlarmOff = alarm.isHolidayAlarmOff,
-                    selectable = isSelectionMode,
-                    selected = selectedAlarmIds.contains(alarm.id),
-                    onClick = onClickAlarm,
-                    onToggleSelect = onToggleSelect,
-                    isAm = alarm.isAm,
-                    hour = alarm.hour,
-                    minute = alarm.minute,
-                    isActive = alarm.isAlarmActive,
-                    onToggleActive = onToggleActive,
+            Spacer(modifier = Modifier.height(topPadding))
+
+            if (isSelectionMode) {
+                AlarmSelectionTopBar(
+                    checked = isAllSelected,
+                    onClickCheckAll = onClickCheckAll,
+                    onClickClose = onClickClose,
                 )
-                if (index != alarms.size - 1) {
-                    Spacer(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .height(1.dp)
-                            .background(OrbitTheme.colors.gray_800)
-                            .padding(horizontal = 24.dp),
+            } else {
+                AlarmListTopBar(
+                    menuExpanded = menuExpanded,
+                    onClickAdd = onClickAdd,
+                    onClickMore = onClickMore,
+                    onDismissRequest = onDismissRequest,
+                    onClickEdit = onClickEdit,
+                )
+            }
+
+            LazyColumn(
+                state = listState,
+            ) {
+                itemsIndexed(alarms) { index, alarm ->
+                    AlarmListItem(
+                        id = alarm.id,
+                        repeatDays = alarm.repeatDays,
+                        isHolidayAlarmOff = alarm.isHolidayAlarmOff,
+                        selectable = isSelectionMode,
+                        selected = selectedAlarmIds.contains(alarm.id),
+                        onClick = onClickAlarm,
+                        onToggleSelect = onToggleSelect,
+                        isAm = alarm.isAm,
+                        hour = alarm.hour,
+                        minute = alarm.minute,
+                        isActive = alarm.isAlarmActive,
+                        onToggleActive = onToggleActive,
                     )
+                    if (index != alarms.size - 1) {
+                        Spacer(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .height(1.dp)
+                                .background(OrbitTheme.colors.gray_800)
+                                .padding(horizontal = 24.dp),
+                        )
+                    }
                 }
-            }
 
-            item {
-                Spacer(modifier = Modifier.height(104.dp))
+                item {
+                    Spacer(modifier = Modifier.height(104.dp))
+                }
             }
         }
+
+        if (cornerRadius > 0.dp) {
+            BottomSheetTopRoundedStroke(
+                strokeColor = OrbitTheme.colors.gray_600,
+                strokeThickness = 1.dp,
+                radius = cornerRadius,
+            )
+        }
     }
 }