상세 화면 영화 썸네일 이미지에 따른 background gradient 효과 적용

jhg3410 · Sep 2, 2024 · 98358bc · 98358bc
1 parent f878f44
commit 98358bc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/core/designsystem/src/main/java/com/jik/core/designsystem/component/TopAppBar.kt b/core/designsystem/src/main/java/com/jik/core/designsystem/component/TopAppBar.kt
@@ -1,9 +1,18 @@
 package com.jik.core.designsystem.component
 
 import androidx.annotation.StringRes
-import androidx.compose.material3.*
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarColors
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 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
 import androidx.compose.ui.text.font.FontFamily
@@ -26,6 +35,7 @@ fun MovieTopAppBar(
     titleStyle: TextStyle = MaterialTheme.typography.titleLarge,
     titleWeight: FontWeight = FontWeight.Bold,
     canNavigateBack: Boolean = false,
+    backIconTint: Color = MaterialTheme.colorScheme.onBackground,
     navigateBack: () -> Unit = {}
 ) {
     TopAppBar(
@@ -47,7 +57,7 @@ fun MovieTopAppBar(
                     Icon(
                         imageVector = ArrowBackRounded,
                         contentDescription = "Back",
-                        tint = MaterialTheme.colorScheme.onBackground
+                        tint = backIconTint
                     )
                 }
             }

diff --git a/feature/detail/src/main/java/com/jik/feature/detail/DetailScreen.kt b/feature/detail/src/main/java/com/jik/feature/detail/DetailScreen.kt
@@ -1,5 +1,7 @@
 package com.jik.feature.detail
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -8,8 +10,14 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 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.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.Lifecycle
@@ -18,6 +26,7 @@ import com.jik.core.designsystem.component.LoadingWheel
 import com.jik.core.designsystem.component.PosterCard
 import com.jik.core.designsystem.component.Refresh
 import com.jik.core.model.MovieInfo
+import com.jik.core.ui.palette.ExtractRepresentativeColor
 import com.jik.core.ui.state.UiState
 import com.jik.feature.detail.component.DetailMovieInfo
 import com.jik.feature.detail.component.TopBar
@@ -33,6 +42,7 @@ fun DetailScreen(
     val detailUiState = viewModel.detailUiState.collectAsStateWithLifecycle(
         minActiveState = Lifecycle.State.CREATED
     ).value
+    val isDarkMode = isSystemInDarkTheme()
 
     when (detailUiState) {
         is UiState.Loading -> {
@@ -45,12 +55,25 @@ fun DetailScreen(
         }
 
         is UiState.Success -> {
-            Column(modifier = modifier) {
+            val movieInfo = detailUiState.data
+            var backgroundColor by remember { mutableStateOf(Color.Transparent) }
+            val colorStops = arrayOf(
+                0.0f to backgroundColor.copy(alpha = if (isDarkMode) 1f else 0.6f),
+                0.6f to Color.Transparent
+            )
+
+            ExtractRepresentativeColor(imageUrl = movieInfo.getBackdropUrl()) {
+                backgroundColor = it
+            }
+
+            Column(
+                modifier = modifier.background(brush = Brush.verticalGradient(colorStops = colorStops))
+            ) {
                 TopBar(
                     modifier = Modifier.fillMaxWidth(),
                     navigateUp = navigateUp
                 )
-                Content(movieInfo = detailUiState.data)
+                Content(movieInfo = movieInfo)
             }
         }
 

diff --git a/feature/detail/src/main/java/com/jik/feature/detail/component/DetailTopBar.kt b/feature/detail/src/main/java/com/jik/feature/detail/component/DetailTopBar.kt
@@ -1,8 +1,10 @@
 package com.jik.feature.detail.component
 
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import com.jik.core.designsystem.component.MovieTopAppBar
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -14,6 +16,7 @@ internal fun TopBar(
     MovieTopAppBar(
         titleRes = null,
         modifier = modifier,
+        colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent),
         canNavigateBack = true,
         navigateBack = navigateUp
     )