rabbit apng 우선 적용 및 background paint 적용

core/designsystem/src/main/kotlin/com/chipichipi/dobedobe/core/designsystem/component/BottomSheetScaffold.kt

@@ -3,16 +3,22 @@ package com.chipichipi.dobedobe.core.designsystem.component
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.BottomSheetScaffoldState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Surface
 import androidx.compose.material3.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -22,7 +28,6 @@ fun DobeDobeBottomSheetScaffold(
     modifier: Modifier = Modifier,
     scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
     sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight,
-    sheetDragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
     topBar: @Composable (() -> Unit)? = null,
     snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
     content: @Composable (PaddingValues) -> Unit,
@@ -34,7 +39,9 @@ fun DobeDobeBottomSheetScaffold(
             sheetContent = sheetContent,
             scaffoldState = scaffoldState,
             sheetPeekHeight = sheetPeekHeight,
-            sheetDragHandle = sheetDragHandle,
+            sheetDragHandle = {
+                DobeDobeDragHandle()
+            },
             topBar = topBar,
             snackbarHost = snackbarHost,
             content = content,
@@ -43,3 +50,20 @@ fun DobeDobeBottomSheetScaffold(
         )
     }
 }
+
+@Composable
+private fun DobeDobeDragHandle(
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier
+            .padding(
+                top = 8.dp,
+                bottom = 12.dp,
+            ),
+        color = Color(0xFFD1D6DB),
+        shape = RoundedCornerShape(4.dp),
+    ) {
+        Box(Modifier.size(width = 48.dp, height = 4.dp))
+    }
+}

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/DashboardScreen.kt

@@ -7,7 +7,6 @@ import androidx.compose.animation.SharedTransitionLayout
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -30,15 +29,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.chipichipi.dobedobe.core.designsystem.component.DobeDobeBottomSheetScaffold
 import com.chipichipi.dobedobe.core.designsystem.component.DobeDobeDialog
-import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme
 import com.chipichipi.dobedobe.core.model.DashboardPhoto
 import com.chipichipi.dobedobe.feature.dashboard.component.DashboardEditMode
-import com.chipichipi.dobedobe.feature.dashboard.component.DashboardTopAppBar
 import com.chipichipi.dobedobe.feature.dashboard.component.DashboardViewMode
 import com.chipichipi.dobedobe.feature.dashboard.component.ExpandedPhotoFrame
 import com.chipichipi.dobedobe.feature.dashboard.model.DashboardModeState
@@ -176,7 +174,7 @@ private fun DashboardBody(
         }
 
         DobeDobeBottomSheetScaffold(
-            modifier = modifier
+            modifier = Modifier
                 .fillMaxSize()
                 .then(
                     if (isEditMode) {
@@ -192,29 +190,30 @@ private fun DashboardBody(
                     onGoalToggled = onGoalToggled,
                     onAddGoalClicked = navigateToAddGoal,
                     onGoalClicked = navigateToGoalDetail,
+                    modifier = Modifier
+                        .padding(top = 8.dp),
                 )
             },
             sheetPeekHeight = 380.dp,
-            topBar = {
-                DashboardTopAppBar(
-                    onEditClick = onToggleMode,
-                    navigateToSetting = navigateToSetting,
-                )
-            },
         ) { innerPadding ->
-            DashboardViewMode(
-                isViewMode = !isEditMode,
-                photoState = uiState.photoState,
-                bubbleTitle = uiState.bubbleTitle,
-                photoFramesState = photoFramesState,
-                onChangeBubble = onChangeBubble,
-                onToggleExpansion = onToggleExpansion,
-                onToggleMode = onToggleMode,
+            Box(
                 modifier = Modifier
                     .fillMaxSize()
-                    .background(DobeDobeTheme.colors.gray50)
-                    .padding(innerPadding),
-            )
+                    .padding(
+                        bottom = innerPadding.calculateBottomPadding() - 24.dp,
+                    ),
+            ) {
+                DashboardViewMode(
+                    isViewMode = !isEditMode,
+                    photoState = uiState.photoState,
+                    bubbleTitle = uiState.bubbleTitle,
+                    photoFramesState = photoFramesState,
+                    onChangeBubble = onChangeBubble,
+                    onToggleExpansion = onToggleExpansion,
+                    onToggleMode = onToggleMode,
+                    navigateToSetting = navigateToSetting,
+                )
+            }
         }
 
         ExpandedPhotoFrame(

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/GoalBottomSheet.kt

@@ -43,8 +43,11 @@ internal fun GoalBottomSheetContent(
     onGoalToggled: (Long) -> Unit,
     onGoalClicked: (Long) -> Unit,
     onAddGoalClicked: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
-    Column {
+    Column(
+        modifier = modifier,
+    ) {
         GoalBottomSheetHeader(onAddGoalClicked)
         Spacer(modifier = Modifier.height(15.dp))
         GoalBottomSheetBody(

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardCharacter.kt

@@ -35,13 +35,13 @@ internal fun DashboardCharacter(
         }
         .build()
 
-    var currentRaw by remember { mutableIntStateOf(R.raw.bird01) }
+    var currentRaw by remember { mutableIntStateOf(R.raw.rabbit01) }
     var isResetTrigger by remember { mutableStateOf(false) }
 
     LaunchedEffect(isResetTrigger) {
         if (isResetTrigger) {
             delay(4000)
-            currentRaw = R.raw.bird01
+            currentRaw = R.raw.rabbit01
             isResetTrigger = false
         }
     }
@@ -54,14 +54,14 @@ internal fun DashboardCharacter(
             model = currentRaw,
             contentDescription = "Character Image",
             imageLoader = imageLoader,
-            placeholder = painterResource(R.drawable.bird_placeholder),
+            placeholder = painterResource(R.drawable.rabbit_placeholder),
             modifier = Modifier
                 .size(180.dp, 225.dp)
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     indication = null,
                 ) {
-                    currentRaw = R.raw.bird02
+                    currentRaw = R.raw.rabbit02
                     isResetTrigger = true
                 },
         )

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardTopAppBar.kt

@@ -26,7 +26,7 @@ import com.chipichipi.dobedobe.feature.dashboard.R
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-internal fun DashboardTopAppBar(
+internal fun DashboardViewModeTopAppBar(
     onEditClick: () -> Unit,
     navigateToSetting: () -> Unit,
     modifier: Modifier = Modifier,
@@ -60,7 +60,7 @@ internal fun DashboardTopAppBar(
             }
         },
         colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = DobeDobeTheme.colors.gray50,
+            containerColor = Color.Transparent,
         ),
     )
 }
@@ -113,9 +113,9 @@ internal fun DashboardEditModeTopAppBar(
 
 @ThemePreviews
 @Composable
-private fun DashboardTopAppBarPreview() {
+private fun DashboardViewModeTopAppBarPreview() {
     DobeDobeTheme {
-        DashboardTopAppBar(
+        DashboardViewModeTopAppBar(
             onEditClick = {},
             navigateToSetting = {},
         )

feature/dashboard/src/main/kotlin/com/chipichipi/dobedobe/feature/dashboard/component/DashboardViewMode.kt

@@ -11,10 +11,14 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme
 import com.chipichipi.dobedobe.feature.dashboard.DashboardPhotoFramesState
+import com.chipichipi.dobedobe.feature.dashboard.R
 import com.chipichipi.dobedobe.feature.dashboard.model.DashboardPhotoState
 
 @OptIn(ExperimentalSharedTransitionApi::class)
@@ -27,46 +31,62 @@ internal fun SharedTransitionScope.DashboardViewMode(
     onChangeBubble: () -> Unit,
     onToggleExpansion: (Int) -> Unit,
     onToggleMode: () -> Unit,
+    navigateToSetting: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Box(
-        modifier = modifier,
-        contentAlignment = Alignment.Center,
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .paint(
+                painterResource(id = R.drawable.rabbit_sheet_content_background),
+                contentScale = ContentScale.FillBounds,
+            ),
+        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        photoState.forEach { photo ->
-            CollapsedPhotoFrame(
-                config = photo.config,
-                uri = photo.uri,
-                isExpanded = photoFramesState.isExpanded(photo.config.id),
-                rotation = photoFramesState.rotationMap[photo.config.id],
-                onToggleExpansion = onToggleExpansion,
-                onEmptyFrameClick = onToggleMode,
-                modifier = Modifier
-                    .fillMaxSize()
-                    .zIndex(0f),
-            )
-        }
+        DashboardViewModeTopAppBar(
+            onEditClick = onToggleMode,
+            navigateToSetting = navigateToSetting,
+        )
 
-        if (isViewMode) {
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-            ) {
-                Spacer(Modifier.height(13.dp))
-                DashboardBubble(
-                    title = bubbleTitle,
-                    textStyle = DobeDobeTheme.typography.body2,
-                    modifier = Modifier
-                        .background(
-                            color = DobeDobeTheme.colors.white,
-                        ),
-                    onClick = onChangeBubble,
-                )
-                DashboardCharacter(
+        Box(
+            modifier = modifier,
+            contentAlignment = Alignment.Center,
+        ) {
+            photoState.forEach { photo ->
+                CollapsedPhotoFrame(
+                    config = photo.config,
+                    uri = photo.uri,
+                    isExpanded = photoFramesState.isExpanded(photo.config.id),
+                    rotation = photoFramesState.rotationMap[photo.config.id],
+                    onToggleExpansion = onToggleExpansion,
+                    onEmptyFrameClick = onToggleMode,
                     modifier = Modifier
                         .fillMaxSize()
-                        .zIndex(0.5f),
+                        .zIndex(0f),
                 )
             }
+
+            if (isViewMode) {
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                    Spacer(Modifier.height(14.dp))
+                    DashboardBubble(
+                        title = bubbleTitle,
+                        textStyle = DobeDobeTheme.typography.body2,
+                        modifier = Modifier
+                            .background(
+                                color = DobeDobeTheme.colors.white,
+                            ),
+                        onClick = onChangeBubble,
+                    )
+                    DashboardCharacter(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .zIndex(0.5f),
+                    )
+                }
+            }
         }
     }
 }