feat(RecipeRecommend): 레시피 추천 목록에서 좋아요와 재료 목록을 확인할 수 있다

Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeItem.kt

@@ -1,97 +1,172 @@
 package com.sundaegukbap.banchango.feature.recipe.recommend
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.focusModifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.imageResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight.Companion.Bold
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.TextUnitType
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.util.lerp
 import com.sundaegukbap.banchango.Recipe
 import com.sundaegukbap.banchango.core.designsystem.component.NetworkImage
 import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
+import com.sundaegukbap.banchango.feature.reciperecommend.R
 
 @Composable
 fun RecipeItem(
     recipeItemUiState: RecipeRecommendItemUiState,
+    pageOffset: Float,
     onRecipeClick: (Recipe) -> Unit = {},
     onRecipeLikeClick: (Recipe) -> Unit = {},
 ) {
     Box(
         modifier = Modifier
             .fillMaxSize()
-
+            .graphicsLayer {
+                scaleX = lerp(
+                    start = 0.9f,
+                    stop = 1f,
+                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
+                )
+                scaleY = lerp(
+                    start = 0.9f,
+                    stop = 1f,
+                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
+                )
+            }
+            .clip(shape = RoundedCornerShape(44.dp))
+            .clickable {
+                onRecipeClick(recipeItemUiState.recipe)
+            }
     ) {
         NetworkImage(
             modifier = Modifier
-                .clip(shape = RoundedCornerShape(32.dp))
-                .fillMaxSize()
-                .clickable {
-                    onRecipeClick(recipeItemUiState.recipe)
-                },
+                .fillMaxSize(),
             url = recipeItemUiState.recipe.image,
         )
         RecipeInfo(
             recipeItemUiState.recipe,
             modifier = Modifier.fillMaxSize(),
-            onLikeClick = { onRecipeLikeClick(recipeItemUiState.recipe) }
         )
+
+        RecipeIngredientCount(
+            modifier = Modifier
+                .align(Alignment.BottomStart),
+            have = recipeItemUiState.recipe.have.count(),
+            need = recipeItemUiState.recipe.need.count(),
+            imageSize = 95,
+        )
+
+        RecipeLikeButton(
+            modifier = Modifier
+                .align(Alignment.BottomEnd),
+            isLiked = recipeItemUiState.isLiked,
+            onLikeClick = { onRecipeLikeClick(recipeItemUiState.recipe) },
+        )
+
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(
+                    color = Color.Black.copy(
+                        alpha = lerp(
+                            start = 0.5f,
+                            stop = 0f,
+                            fraction = 1f - pageOffset.coerceIn(0f, 1f)
+                        )
+                    ),
+                )
+        ) {
+
+        }
     }
 }
 
 @Composable
 private fun RecipeInfo(
     recipe: Recipe,
     modifier: Modifier,
-    onLikeClick: () -> Unit,
 ) {
     Box(modifier = modifier) {
         Text(
             text = recipe.name,
             color = Color.White,
-            fontSize = 16.sp,
+            fontSize = 24.sp,
+            maxLines = 2,
+            minLines = 2,
             style = TextStyle(fontWeight = Bold),
             textAlign = TextAlign.Center,
             modifier = Modifier
-                .padding(horizontal = 24.dp, vertical = 12.dp)
-                .clip(shape = RoundedCornerShape(32.dp))
-                .background(Color.Black.copy(alpha = 0.5f))
+                .background(
+                    brush = Brush.verticalGradient(listOf(Color.Black, Color.Transparent)),
+                    alpha = 0.8f
+                )
                 .fillMaxWidth()
-                .padding(16.dp),
+                .padding(top = 40.dp, bottom = 40.dp),
         )
+    }
+}
 
-        Text(
-            text = "${recipe.have.count()} / ${recipe.need.count() + recipe.have.count()}",
-            modifier = Modifier
-                .align(Alignment.BottomStart)
-                .padding(start = 24.dp, bottom = 24.dp),
-            color = Color.White,
+@Composable
+fun RecipeLikeButton(
+    modifier: Modifier,
+    isLiked: Boolean,
+    onLikeClick: () -> Unit,
+) {
+    Box(
+        modifier = modifier
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() },
+                onClick = onLikeClick
+            )
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.img_btn_right),
+            contentDescription = null,
+            modifier = Modifier.size(95.dp),
         )
-        Button(
+        Image(
+            painter = painterResource(id = if (isLiked) R.drawable.ic_heart_filled else R.drawable.ic_heart),
+            contentDescription = null,
             modifier = Modifier
-                .align(Alignment.BottomEnd)
-                .padding(end = 24.dp, bottom = 12.dp),
-            onClick = onLikeClick,
-        ) {
-            Text("좋아요")
-        }
+                .size(32.dp)
+                .align(Alignment.Center)
+                .padding(top = 8.dp),
+        )
     }
 }
 
-@Preview(showBackground = true)
+@Preview(showBackground = false)
 @Composable
 fun RecipeItemPreview() {
     BanchangoTheme {
@@ -112,6 +187,43 @@ fun RecipeItemPreview() {
                 ),
                 isLiked = true,
             ),
+            pageOffset = 0f,
         )
     }
 }
+
+@Composable
+fun RecipeIngredientCount(
+    modifier: Modifier,
+    imageSize: Int,
+    have: Int,
+    need: Int,
+) {
+    Box(modifier = modifier) {
+        Image(
+            modifier = Modifier.size(imageSize.dp),
+            painter = painterResource(id = R.drawable.img_wave),
+            contentDescription = null,
+        )
+        Text(
+            text = "$have / ${need + have}",
+            modifier = Modifier
+                .padding(top = 32.dp)
+                .align(Alignment.Center),
+            color = Color.White,
+            style = TextStyle(
+                letterSpacing = 0.1.sp,
+                fontWeight = Bold,
+                fontSize = 20.sp
+            ),
+        )
+    }
+}
+
+@Preview(showBackground = false)
+@Composable
+fun RecipeIngredientCountPreview() {
+    BanchangoTheme {
+        RecipeIngredientCount(modifier = Modifier, have = 3, need = 7, imageSize = 120)
+    }
+}

Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeRecommendViewModel.kt

@@ -22,11 +22,12 @@ class RecipeRecommendViewModel @Inject constructor(
 
     init {
         viewModelScope.launch {
-            recipeRepository.getRecipeRecommendation().onSuccess { recipes ->
-                _uiState.value = RecipeRecommendUiState.Success(recipes.toUiState())
-            }.onFailure { throwable ->
-                throwable.printStackTrace()
-            }
+            recipeRepository.getRecipeRecommendation()
+                .onSuccess { recipes ->
+                    _uiState.value = RecipeRecommendUiState.Success(recipes.toUiState())
+                }.onFailure { throwable ->
+                    throwable.printStackTrace()
+                }
         }
     }
 
@@ -49,7 +50,7 @@ class RecipeRecommendViewModel @Inject constructor(
         val successUiState = _uiState.value as? RecipeRecommendUiState.Success ?: return
         val likedRecipeUiStates = successUiState.recipes.map { recipeUiState ->
             if (recipeUiState.recipe.id == recipe.id) {
-                recipeUiState.copy(isLiked = true)
+                recipeUiState.copy(isLiked = !recipeUiState.isLiked)
             } else {
                 recipeUiState
             }

Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipesRecommendScreen.kt

@@ -18,6 +18,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sundaegukbap.banchango.Recipe
 import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
+import kotlin.math.absoluteValue
 
 @Composable
 fun RecipeRecommendRoute(
@@ -92,10 +93,13 @@ private fun RecipeRecommendScreen(
         if (page >= recipeRecommends.size - 2) {
             onLastPageVisible()
         }
+        val pageOffset =
+            (pagerState.currentPage - page + pagerState.currentPageOffsetFraction).absoluteValue
         RecipeItem(
             recipeItemUiState = recipeRecommends[page],
             onRecipeClick = onRecipeClick,
             onRecipeLikeClick = onLikeClick,
+            pageOffset = pageOffset,
         )
     }
 }

Android/feature/recipe/src/main/res/drawable/ic_heart.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="36dp"
+    android:height="33dp"
+    android:viewportWidth="36"
+    android:viewportHeight="33">
+  <path
+      android:pathData="M18,3.366C16.614,1.989 14.736,0.713 12.524,0.216C10.84,-0.162 8.987,-0.078 7.109,0.743C5.249,1.556 3.486,3.039 1.859,5.262C-0.018,7.826 -0.337,10.69 0.297,13.461C0.914,16.159 2.429,18.789 4.253,21.166C7.905,25.925 13.198,30.185 16.868,32.66C17.216,32.895 17.611,33.005 18,33C18.389,33.005 18.784,32.895 19.132,32.66C22.802,30.185 28.095,25.925 31.747,21.166C33.571,18.789 35.086,16.159 35.703,13.461C36.337,10.69 36.018,7.826 34.141,5.262C32.514,3.039 30.75,1.556 28.891,0.743C27.013,-0.078 25.16,-0.162 23.476,0.216C21.264,0.713 19.386,1.989 18,3.366ZM18,10.82C17.351,10.827 16.711,8.166 16.322,7.582C15.384,6.176 13.613,4.586 11.657,4.146C10.729,3.938 9.742,3.979 8.696,4.437C7.631,4.902 6.387,5.852 5.069,7.654C3.999,9.115 3.766,10.727 4.185,12.556C4.62,14.459 5.76,16.554 7.408,18.701C10.368,22.558 14.64,26.167 18,28.56C21.36,26.167 25.632,22.558 28.592,18.701C30.24,16.554 31.38,14.459 31.815,12.556C32.234,10.727 32.001,9.115 30.931,7.654C29.613,5.852 28.369,4.902 27.304,4.437C26.258,3.979 25.271,3.938 24.343,4.146C22.387,4.586 20.616,6.176 19.678,7.582C19.289,8.166 18.649,10.827 18,10.82Z"
+      android:fillColor="#FF7A00"
+      android:fillType="evenOdd"/>
+</vector>

Android/feature/recipe/src/main/res/drawable/ic_heart_filled.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="36dp"
+    android:height="33dp"
+    android:viewportWidth="36"
+    android:viewportHeight="33">
+  <path
+      android:pathData="M18,3.366C16.614,1.989 14.736,0.713 12.524,0.216C10.84,-0.162 8.987,-0.078 7.109,0.743C5.249,1.556 3.486,3.039 1.859,5.262C-0.018,7.826 -0.337,10.69 0.297,13.461C0.914,16.159 2.429,18.789 4.253,21.166C7.905,25.925 13.198,30.185 16.868,32.66C17.216,32.895 17.611,33.005 18,33C18.389,33.005 18.784,32.895 19.132,32.66C22.802,30.185 28.095,25.925 31.747,21.166C33.571,18.789 35.086,16.159 35.703,13.461C36.337,10.69 36.018,7.826 34.141,5.262C32.514,3.039 30.75,1.556 28.891,0.743C27.013,-0.078 25.16,-0.162 23.476,0.216C21.264,0.713 19.386,1.989 18,3.366Z"
+      android:fillColor="#FF7A00"
+      android:fillType="evenOdd"/>
+</vector>

Android/feature/recipe/src/main/res/drawable/img_btn_right.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="95dp"
+    android:height="95dp"
+    android:viewportWidth="90"
+    android:viewportHeight="95">
+    <group>
+        <clip-path android:pathData="M60,-0C26.863,-0 0,26.863 0,60L0,94.631L49.651,94.631C71.742,94.631 89.65,76.723 89.65,54.631L89.65,-0L60,-0Z" />
+        <path
+            android:fillColor="#ffffff"
+            android:pathData="M-18.124,109.175C-18.124,74.643 -5.392,41.525 17.272,17.107C39.935,-7.311 70.674,-21.029 102.724,-21.029C134.775,-21.029 165.514,-7.311 188.177,17.107C210.841,41.525 223.573,74.643 223.573,109.175L102.724,109.175H-18.124Z" />
+
+    </group>
+</vector>

Android/feature/recipe/src/main/res/drawable/img_wave.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="95dp"
+    android:height="95dp"
+    android:viewportWidth="90"
+    android:viewportHeight="95">
+  <group>
+    <clip-path
+        android:pathData="M29.65,-0C62.787,-0 89.65,26.863 89.65,60L89.65,94.631L40,94.631C17.909,94.631 -0,76.723 -0,54.631L-0,-0L29.65,-0Z"/>
+    <path
+        android:pathData="M107.774,109.175C107.774,74.643 95.041,41.525 72.378,17.107C49.715,-7.311 18.976,-21.029 -13.075,-21.029C-45.125,-21.029 -75.864,-7.311 -98.527,17.107C-121.191,41.525 -133.923,74.643 -133.923,109.175L-13.075,109.175H107.774Z"
+        android:fillColor="#99FFFFFF"/>
+    <path
+        android:pathData="M-14.321,62.652C-12.285,46.232 1.846,18.34 42.087,38.134C83.949,58.726 95.631,23.841 94.23,9.519C91.804,5.548 90.816,3.44 91.928,3.987C93.134,4.58 93.948,6.631 94.23,9.519C107.481,31.208 163.638,108.477 154.881,112.283C144.52,116.786 62.516,166.579 45.816,153.031C32.456,142.192 0.158,88.262 -14.321,62.652Z"
+        android:fillColor="#FF7A00"/>
+  </group>
+</vector>