From 3b6c36259039d9bc04be4c6b15577ce2a25f3bb3 Mon Sep 17 00:00:00 2001
From: Choi SeongHoon <108349655+SeongHoonC@users.noreply.github.com>
Date: Sun, 28 Jul 2024 23:49:21 +0900
Subject: [PATCH] =?UTF-8?q?[Android]=20feat:=20=EB=A0=88=EC=8B=9C=ED=94=BC?=
 =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84(#21)=20(#22)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(reciperecommend): 레시피 추천 화면 하단 로딩바

* refactor(data): RecipeRepository 코드 정리

* feat: 화면에 따라 상태 바를 다른 색으로 변경할 수 있다.

* refactor: 사용하지 않는 코드 제거

* feat: 레시피 상세 화면 뼈대 작성

* feat(Stars): 별 개수에 따라 별이 그려지는 Composable 구현

* feat(RecipeDifficult): 레시피는 요리 난이도를 가진다

* feat(RecipeDifficult): 레시피 추천 난이도 화면을 그린다

* refactor: Recipe 상세 이동 버튼 분리

* feat: 레시피 상세 TopBar 생성

* feat: 좋아요 표시할 수 있는 레시피 객체 정의

* feat(RecipeRepository): RecipeRepository 에 좋아요를 요청할 수 있다

* feat(RecipeDetailCard): 레시피 상세 정보를 레시피 상세 전체 화면에서에서 분리한다

* feat(statusBarColor): systemBar 변경에서 statusBar 변경으로 바꾼다

* feat(RecipeDetailScreen): LikableRecipe 로 화면을 보여준다.

* feat(RecipeDetailScreen): 상단까지 스크롤 하면 색깔이 변경되는 TopBar 를 구현한다

* feat(RecipeDetailScreen): Recipe 이미지에 그림자 그라데이션을 넣는다.

* feat(RecipeDetailScreen): 보여주는 화면 크기를 네비게이션 바 전까지로 한다

* chore: gitIgnore 추가
---
 Android/.gitignore                            |   1 +
 Android/.idea/deploymentTargetSelector.xml    |  11 +-
 .../data/repository/api/RecipeRepository.kt   |   9 +-
 .../api/model/RecipeRecommendResponseItem.kt  |   1 -
 .../core/data/di/RepositoryModule.kt          |   1 +
 .../core/data/mapper/RecipeMapper.kt          |  10 +-
 .../repository/DefaultRecipeRepository.kt     |  56 +++--
 .../data/repository/FakeRecipeRepository.kt   | 114 ++++-----
 .../core/designsystem/theme/Color.kt          |   2 +-
 .../sundaegukbap/banchango/LikableRecipe.kt   |   6 +
 .../java/com/sundaegukbap/banchango/Recipe.kt |   5 +-
 .../banchango/RecipeDifficulty.kt             |   9 +
 .../banchango/feature/home/HomeScreen.kt      |   6 +-
 .../feature/home/navigation/HomeNavigator.kt  |   8 +-
 .../banchango/feature/main/MainActivity.kt    |  18 +-
 .../banchango/feature/main/MainScreen.kt      |  10 +-
 .../feature/recipe/detail/BtnMoveToRecipe.kt  |  45 ++++
 .../feature/recipe/detail/RecipeDetailCard.kt | 168 +++++++++++++
 .../feature/recipe/detail/RecipeDetailInfo.kt | 126 ++++++++++
 .../recipe/detail/RecipeDetailScreen.kt       | 232 ++++++++++++++++++
 .../recipe/detail/RecipeDetailUiState.kt      |  15 ++
 .../recipe/detail/RecipeDetailViewModel.kt    |  47 ++++
 .../feature/recipe/detail/RecipeTopbar.kt     |  67 +++++
 .../feature/recipe/difficulty/Stars.kt        |  57 +++++
 .../recipe/navigation/RecipeNavigation.kt     |  16 +-
 .../feature/recipe/recommend/RecipeItem.kt    |  19 +-
 .../recommend/RecipeRecommendViewModel.kt     |  22 +-
 .../recommend/RecipesRecommendScreen.kt       |  72 +++---
 .../src/main/res/drawable/ic_star_filled.xml  |   5 +
 .../src/main/res/drawable/ic_star_outline.xml |  12 +
 30 files changed, 992 insertions(+), 178 deletions(-)
 create mode 100644 Android/core/model/src/main/java/com/sundaegukbap/banchango/LikableRecipe.kt
 create mode 100644 Android/core/model/src/main/java/com/sundaegukbap/banchango/RecipeDifficulty.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/BtnMoveToRecipe.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailCard.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailInfo.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailScreen.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailUiState.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailViewModel.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeTopbar.kt
 create mode 100644 Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/difficulty/Stars.kt
 create mode 100644 Android/feature/recipe/src/main/res/drawable/ic_star_filled.xml
 create mode 100644 Android/feature/recipe/src/main/res/drawable/ic_star_outline.xml

diff --git a/Android/.gitignore b/Android/.gitignore
index aa724b7..226d61c 100644
--- a/Android/.gitignore
+++ b/Android/.gitignore
@@ -7,6 +7,7 @@
 /.idea/workspace.xml
 /.idea/navEditor.xml
 /.idea/assetWizardSettings.xml
+/.idea/deploymentTargetSelector.xml
 .DS_Store
 /build
 /captures
diff --git a/Android/.idea/deploymentTargetSelector.xml b/Android/.idea/deploymentTargetSelector.xml
index c4abe25..da5007a 100644
--- a/Android/.idea/deploymentTargetSelector.xml
+++ b/Android/.idea/deploymentTargetSelector.xml
@@ -4,9 +4,14 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-      </SelectionState>
-      <SelectionState runConfigName="MainActivity">
-        <option name="selectionMode" value="DROPDOWN" />
+        <DropdownSelection timestamp="2024-06-15T07:16:38.418079Z">
+          <Target type="DEFAULT_BOOT">
+            <handle>
+              <DeviceId pluginId="LocalEmulator" identifier="path=/Users/choeseonghun/.android/avd/Galaxy_S23_API_34.avd" />
+            </handle>
+          </Target>
+        </DropdownSelection>
+        <DialogSelection />
       </SelectionState>
       <SelectionState runConfigName="RecipeCardPreview">
         <option name="selectionMode" value="DROPDOWN" />
diff --git a/Android/core/data-api/src/main/java/com/sundaegukbap/banchango/core/data/repository/api/RecipeRepository.kt b/Android/core/data-api/src/main/java/com/sundaegukbap/banchango/core/data/repository/api/RecipeRepository.kt
index 84340ad..b42e230 100644
--- a/Android/core/data-api/src/main/java/com/sundaegukbap/banchango/core/data/repository/api/RecipeRepository.kt
+++ b/Android/core/data-api/src/main/java/com/sundaegukbap/banchango/core/data/repository/api/RecipeRepository.kt
@@ -1,8 +1,15 @@
 package com.sundaegukbap.banchango.core.data.repository.api
 
+import com.sundaegukbap.banchango.LikableRecipe
 import com.sundaegukbap.banchango.Recipe
 
 interface RecipeRepository {
     suspend fun getRecipeRecommendation(): Result<List<Recipe>>
-    suspend fun getRecipeDetail(id: Long): Result<Recipe>
+
+    suspend fun getRecipeDetail(id: Long): Result<LikableRecipe>
+
+    suspend fun likeRecipe(
+        id: Long,
+        isLiked: Boolean,
+    ): Result<Unit>
 }
diff --git a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/api/model/RecipeRecommendResponseItem.kt b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/api/model/RecipeRecommendResponseItem.kt
index 7189032..b0d0e17 100644
--- a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/api/model/RecipeRecommendResponseItem.kt
+++ b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/api/model/RecipeRecommendResponseItem.kt
@@ -13,6 +13,5 @@ data class RecipeRecommendResponse(
     val need: List<String>,
     val servings: Int,
     val cookingTime: Int,
-    val isBookmarked: Boolean,
     val difficulty: String
 )
diff --git a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/di/RepositoryModule.kt b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/di/RepositoryModule.kt
index 323553a..358075f 100644
--- a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/di/RepositoryModule.kt
+++ b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/di/RepositoryModule.kt
@@ -1,5 +1,6 @@
 package com.sundaegukbap.banchango.core.data.di
 
+import com.sundaegukbap.banchango.core.data.repository.DefaultRecipeRepository
 import com.sundaegukbap.banchango.core.data.repository.FakeRecipeRepository
 import com.sundaegukbap.banchango.core.data.repository.api.RecipeRepository
 import dagger.Binds
diff --git a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/mapper/RecipeMapper.kt b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/mapper/RecipeMapper.kt
index 54be7dd..582323a 100644
--- a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/mapper/RecipeMapper.kt
+++ b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/mapper/RecipeMapper.kt
@@ -1,11 +1,20 @@
 package com.sundaegukbap.banchango.core.data.mapper
 
 import com.sundaegukbap.banchango.Recipe
+import com.sundaegukbap.banchango.RecipeDifficulty
 import com.sundaegukbap.banchango.core.data.api.model.RecipeRecommendResponse
 
 internal fun List<RecipeRecommendResponse>.toData(): List<Recipe> = map { it.toData() }
 
 internal fun RecipeRecommendResponse.toData(): Recipe {
+    val difficulty = when (difficulty) {
+        "아무나" -> RecipeDifficulty.ANYONE
+        "초보" -> RecipeDifficulty.BEGINNER
+        "중급" -> RecipeDifficulty.INTERMEDIATE
+        "고급" -> RecipeDifficulty.ADVANCED
+        "신의경지" -> RecipeDifficulty.GODLIKE
+        else -> RecipeDifficulty.ANYONE
+    }
     return Recipe(
         id = id,
         name = name,
@@ -16,7 +25,6 @@ internal fun RecipeRecommendResponse.toData(): Recipe {
         need = need,
         servings = servings,
         cookingTime = cookingTime,
-        isBookmarked = isBookmarked,
         difficulty = difficulty,
     )
 }
diff --git a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/DefaultRecipeRepository.kt b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/DefaultRecipeRepository.kt
index 6383f53..8a734e4 100644
--- a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/DefaultRecipeRepository.kt
+++ b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/DefaultRecipeRepository.kt
@@ -1,39 +1,47 @@
 package com.sundaegukbap.banchango.core.data.repository
 
+import com.sundaegukbap.banchango.LikableRecipe
 import com.sundaegukbap.banchango.Recipe
 import com.sundaegukbap.banchango.core.data.api.RecipeApi
 import com.sundaegukbap.banchango.core.data.mapper.toData
 import com.sundaegukbap.banchango.core.data.repository.api.RecipeRepository
 import javax.inject.Inject
 
-internal class DefaultRecipeRepository @Inject constructor(
-    private val recipeApi: RecipeApi,
-) : RecipeRepository {
-    override suspend fun getRecipeRecommendation(): Result<List<Recipe>> {
-        return runCatching {
-            val response = recipeApi.getRecipeRecommendation(1)
-            if (response.isSuccessful) {
-                if (response.body() == null) {
-                    throw IllegalStateException("Response body is null")
+internal class DefaultRecipeRepository
+    @Inject
+    constructor(
+        private val recipeApi: RecipeApi,
+    ) : RecipeRepository {
+        override suspend fun getRecipeRecommendation(): Result<List<Recipe>> =
+            runCatching {
+                val response = recipeApi.getRecipeRecommendation(1)
+                if (response.isSuccessful) {
+                    if (response.body() == null) {
+                        throw IllegalStateException("Response body is null")
+                    }
+                    response.body()!!.toData()
+                } else {
+                    throw IllegalStateException("Response is not successful")
                 }
-                response.body()!!.toData()
-            } else {
-                throw IllegalStateException("Response is not successful")
             }
-        }
-    }
 
-    override suspend fun getRecipeDetail(id: Long): Result<Recipe> {
-        return runCatching {
-            val response = recipeApi.getRecipeDetail(1, id.toLong())
-            if (response.isSuccessful) {
-                if (response.body() == null) {
-                    throw IllegalStateException("Response body is null")
+        override suspend fun getRecipeDetail(id: Long): Result<LikableRecipe> =
+            runCatching {
+                val response = recipeApi.getRecipeDetail(1, id)
+                if (response.isSuccessful) {
+                    if (response.body() == null) {
+                        throw IllegalStateException("Response body is null")
+                    }
+                    LikableRecipe(response.body()!!.toData(), false)
+                } else {
+                    throw IllegalStateException("Response is not successful")
                 }
-                response.body()!!.toData()
-            } else {
-                throw IllegalStateException("Response is not successful")
             }
+
+        override suspend fun likeRecipe(
+            id: Long,
+            isLiked: Boolean,
+        ): Result<Unit> {
+            TODO("호감 기능 추가시 구현")
         }
     }
-}
diff --git a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/FakeRecipeRepository.kt b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/FakeRecipeRepository.kt
index c7b26d3..22e81e5 100644
--- a/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/FakeRecipeRepository.kt
+++ b/Android/core/data/src/main/java/com/sundaegukbap/banchango/core/data/repository/FakeRecipeRepository.kt
@@ -1,72 +1,64 @@
 package com.sundaegukbap.banchango.core.data.repository
 
+import com.sundaegukbap.banchango.LikableRecipe
 import com.sundaegukbap.banchango.Recipe
+import com.sundaegukbap.banchango.RecipeDifficulty
 import com.sundaegukbap.banchango.core.data.repository.api.RecipeRepository
 import javax.inject.Inject
 
-class FakeRecipeRepository @Inject constructor() : RecipeRepository {
-    override suspend fun getRecipeRecommendation(): Result<List<Recipe>> {
-        return Result.success(
-            listOf(
-                Recipe(
-                    id = 1,
-                    name = "간장계란볶음밥",
-                    introduction = "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요.",
-                    image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
-                    link = "https://www.10000recipe.com/recipe/6889616",
-                    cookingTime = 10,
-                    servings = 2,
-                    difficulty = "Easy",
-                    have = listOf(""),
-                    need = listOf(""),
-                    isBookmarked = false,
-                ),
-                Recipe(
-                    id = 2,
-                    name = "간장계란볶음밥",
-                    introduction = "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요.",
-                    image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
-                    link = "https://www.10000recipe.com/recipe/6889616",
-                    cookingTime = 10,
-                    servings = 2,
-                    difficulty = "Easy",
-                    have = listOf(""),
-                    need = listOf(""),
-                    isBookmarked = false,
-                ),
+class FakeRecipeRepository
+    @Inject
+    constructor() : RecipeRepository {
+        override suspend fun getRecipeRecommendation(): Result<List<Recipe>> =
+            Result.success(
+                List(3) {
+                    Recipe(
+                        id = (it + 1).toLong(),
+                        name = "간장계란볶음밥",
+                        introduction = "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요.",
+                        image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
+                        link = "https://www.10000recipe.com/recipe/6889616",
+                        cookingTime = 10,
+                        servings = 2,
+                        difficulty = RecipeDifficulty.BEGINNER,
+                        have = listOf("계란", "간장"),
+                        need = listOf("식초", "당근", "감자"),
+                    )
+                },
+            )
 
-                Recipe(
-                    id = 3,
-                    name = "간장계란볶음밥",
-                    introduction = "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요.",
-                    image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
-                    link = "https://www.10000recipe.com/recipe/6889616",
-                    cookingTime = 10,
-                    servings = 2,
-                    difficulty = "Easy",
-                    have = listOf(""),
-                    need = listOf(""),
-                    isBookmarked = false,
+        override suspend fun getRecipeDetail(id: Long): Result<LikableRecipe> =
+            Result.success(
+                LikableRecipe(
+                    recipe =
+                        Recipe(
+                            id = id,
+                            name = "간장계란볶음밥",
+                            introduction =
+                                "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요." +
+                                    "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. \n " +
+                                    "아이들이 더 좋아할거예요. \n" +
+                                    "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요.\n" +
+                                    "  아이들이 더 좋아할거예요.\n" +
+                                    " 아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요.\n 아이들이 더 좋아할거예요.\n " +
+                                    "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요.\n 아이들이 더 좋아할거예요.\n " +
+                                    "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요.\n 아이들이 더 좋아할거예요.\n" +
+                                    " 아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요.\n 아이들이 더 좋아할거예요.\n " +
+                                    "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요.\n 아이들이 더 좋아할거예요.\n",
+                            image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
+                            link = "https://www.10000recipe.com/recipe/6889616",
+                            cookingTime = 10,
+                            servings = 2,
+                            difficulty = RecipeDifficulty.BEGINNER,
+                            have = listOf("계란", "간장"),
+                            need = listOf("식초", "당근", "감자"),
+                        ),
+                    isLiked = false,
                 ),
             )
-        )
-    }
 
-    override suspend fun getRecipeDetail(id: Long): Result<Recipe> {
-        return Result.success(
-            Recipe(
-                id = id,
-                name = "간장계란볶음밥",
-                introduction = "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요.",
-                image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
-                link = "https://www.10000recipe.com/recipe/6889616",
-                cookingTime = 10,
-                servings = 2,
-                difficulty = "Easy",
-                have = listOf(""),
-                need = listOf(""),
-                isBookmarked = false,
-            )
-        )
+        override suspend fun likeRecipe(
+            id: Long,
+            isLiked: Boolean,
+        ): Result<Unit> = Result.success(Unit)
     }
-}
diff --git a/Android/core/designsystem/src/main/java/com/sundaegukbap/banchango/core/designsystem/theme/Color.kt b/Android/core/designsystem/src/main/java/com/sundaegukbap/banchango/core/designsystem/theme/Color.kt
index 4eb5ca2..d3bac00 100644
--- a/Android/core/designsystem/src/main/java/com/sundaegukbap/banchango/core/designsystem/theme/Color.kt
+++ b/Android/core/designsystem/src/main/java/com/sundaegukbap/banchango/core/designsystem/theme/Color.kt
@@ -11,7 +11,7 @@ val PurpleGrey40 = Color(0xFF625b71)
 val Pink40 = Color(0xFF7D5260)
 
 val Orange = Color(0xFFFF7A00)
-val LightBeige = Color(0xFFF5EB)
+val LightOrange = Color(0xFFFFC085)
 val White = Color(0xFFFFFFFF)
 val Black = Color(0xFF000000)
 
diff --git a/Android/core/model/src/main/java/com/sundaegukbap/banchango/LikableRecipe.kt b/Android/core/model/src/main/java/com/sundaegukbap/banchango/LikableRecipe.kt
new file mode 100644
index 0000000..da3a214
--- /dev/null
+++ b/Android/core/model/src/main/java/com/sundaegukbap/banchango/LikableRecipe.kt
@@ -0,0 +1,6 @@
+package com.sundaegukbap.banchango
+
+data class LikableRecipe(
+    val recipe: Recipe,
+    val isLiked: Boolean,
+)
diff --git a/Android/core/model/src/main/java/com/sundaegukbap/banchango/Recipe.kt b/Android/core/model/src/main/java/com/sundaegukbap/banchango/Recipe.kt
index 4ff188b..c6a7c43 100644
--- a/Android/core/model/src/main/java/com/sundaegukbap/banchango/Recipe.kt
+++ b/Android/core/model/src/main/java/com/sundaegukbap/banchango/Recipe.kt
@@ -8,8 +8,7 @@ data class Recipe(
     val link: String,
     val cookingTime: Int,
     val servings: Int,
-    val difficulty: String,
-    val isBookmarked: Boolean,
+    val difficulty: RecipeDifficulty,
     val have: List<String>,
-    val need: List<String>
+    val need: List<String>,
 )
diff --git a/Android/core/model/src/main/java/com/sundaegukbap/banchango/RecipeDifficulty.kt b/Android/core/model/src/main/java/com/sundaegukbap/banchango/RecipeDifficulty.kt
new file mode 100644
index 0000000..af00a06
--- /dev/null
+++ b/Android/core/model/src/main/java/com/sundaegukbap/banchango/RecipeDifficulty.kt
@@ -0,0 +1,9 @@
+package com.sundaegukbap.banchango
+
+enum class RecipeDifficulty(val level: Int, val explain: String) {
+    ANYONE(1, "아무나"),
+    BEGINNER(2, "초보"),
+    INTERMEDIATE(3, "중급"),
+    ADVANCED(4, "고급"),
+    GODLIKE(5, "신의 경지"),
+}
diff --git a/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/HomeScreen.kt b/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/HomeScreen.kt
index 90a166d..0e4b374 100644
--- a/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/HomeScreen.kt
+++ b/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/HomeScreen.kt
@@ -2,7 +2,11 @@ package com.sundaegukbap.banchango.feature.home
 
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 
 @Composable
-fun HomeScreen(padding: PaddingValues) {
+fun HomeScreen(
+    padding: PaddingValues,
+    onChangeStatusBarColor: (color: Color, darkIcons: Boolean) -> Unit,
+) {
 }
diff --git a/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/navigation/HomeNavigator.kt b/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/navigation/HomeNavigator.kt
index e26aeac..9b3f838 100644
--- a/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/navigation/HomeNavigator.kt
+++ b/Android/feature/home/src/main/java/com/sundaegukbap/banchango/feature/home/navigation/HomeNavigator.kt
@@ -1,6 +1,7 @@
 package com.sundaegukbap.banchango.feature.home.navigation
 
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.ui.graphics.Color
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -12,8 +13,11 @@ fun NavController.navigateHome(navOptions: NavOptions) {
     navigate(MainTabRoute.Home, navOptions)
 }
 
-fun NavGraphBuilder.homeNavGraph(padding: PaddingValues) {
+fun NavGraphBuilder.homeNavGraph(
+    padding: PaddingValues,
+    onChangeStatusBarColor: (color: Color, darkIcons: Boolean) -> Unit,
+) {
     composable<MainTabRoute.Home> {
-        HomeScreen(padding)
+        HomeScreen(padding, onChangeStatusBarColor)
     }
 }
diff --git a/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainActivity.kt b/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainActivity.kt
index 48fe228..bb7c901 100644
--- a/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainActivity.kt
+++ b/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainActivity.kt
@@ -5,30 +5,30 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.ui.graphics.Color
+import com.google.accompanist.systemuicontroller.SystemUiController
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
 import dagger.hilt.android.AndroidEntryPoint
 
-
 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {
+    private lateinit var systemUiController: SystemUiController
 
     override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
         enableEdgeToEdge()
+        super.onCreate(savedInstanceState)
         setContent {
             BanchangoTheme {
                 val navController = rememberMainNavigator()
-
-                val systemUiController = rememberSystemUiController()
-                systemUiController.setSystemBarsColor(color = Color(0xBFFFFFFF), darkIcons = true)
-                systemUiController.setNavigationBarColor(
-                    color = Color(0xFFFFFFFF)
-                )
+                systemUiController = rememberSystemUiController()
+                systemUiController.setNavigationBarColor(color = Color(0xFFFFFFFF))
 
                 MainScreen(
                     navigator = navController,
-                    onChangeDarkTheme = {}
+                    onChangeDarkTheme = {},
+                    onChangeStatusBarColor = { color, darkIcons ->
+                        systemUiController.setStatusBarColor(color = color, darkIcons = darkIcons,)
+                    },
                 )
             }
         }
diff --git a/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainScreen.kt b/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainScreen.kt
index c0f88f7..ca4bee1 100644
--- a/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainScreen.kt
+++ b/Android/feature/main/src/main/java/com/sundaegukbap/banchango/feature/main/MainScreen.kt
@@ -7,6 +7,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.navigation.compose.NavHost
 import com.sundaegukbap.banchango.feature.home.navigation.homeNavGraph
 import com.sundaegukbap.banchango.feature.recipe.navigation.recipeNavGraph
@@ -16,6 +17,7 @@ import kotlinx.collections.immutable.toPersistentList
 internal fun MainScreen(
     navigator: MainNavigator = rememberMainNavigator(),
     onChangeDarkTheme: (Boolean) -> Unit,
+    onChangeStatusBarColor: (color: Color, darkIcons: Boolean) -> Unit
 ) {
     Scaffold(
         content = { padding ->
@@ -28,10 +30,14 @@ internal fun MainScreen(
                     navController = navigator.navController,
                     startDestination = navigator.startDestination
                 ) {
-                    homeNavGraph(padding = padding)
+                    homeNavGraph(
+                        padding = padding,
+                        onChangeStatusBarColor = onChangeStatusBarColor
+                    )
                     recipeNavGraph(
                         padding = padding,
-                        onRecipeClick = { navigator.navigateRecipeDetail(it.id) }
+                        onRecipeClick = { navigator.navigateRecipeDetail(it.id) },
+                        onChangeStatusBarColor = onChangeStatusBarColor
                     )
                 }
             }
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/BtnMoveToRecipe.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/BtnMoveToRecipe.kt
new file mode 100644
index 0000000..e548b0b
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/BtnMoveToRecipe.kt
@@ -0,0 +1,45 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import android.content.Intent
+import android.net.Uri
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import com.sundaegukbap.banchango.core.designsystem.theme.LightOrange
+import com.sundaegukbap.banchango.core.designsystem.theme.Orange
+
+@Composable
+fun BtnMoveToRecipe(
+    recipeLink: String,
+    modifier: Modifier = Modifier,
+) {
+    val context = LocalContext.current
+    Button(
+        modifier = modifier,
+        colors =
+            ButtonColors(
+                containerColor = Orange,
+                contentColor = Color.White,
+                disabledContainerColor = LightOrange,
+                disabledContentColor = Color.White,
+            ),
+        onClick = {
+            context.startActivity(
+                Intent(Intent.ACTION_VIEW, Uri.parse(recipeLink)),
+            )
+        },
+    ) {
+        Text(text = "레시피 이동하기")
+    }
+}
+
+@Composable
+@Preview
+fun PreviewBtnMoveToRecipe() {
+    BtnMoveToRecipe(recipeLink = "https://www.google.com")
+}
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailCard.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailCard.kt
new file mode 100644
index 0000000..5c7c8b5
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailCard.kt
@@ -0,0 +1,168 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.sundaegukbap.banchango.Recipe
+import com.sundaegukbap.banchango.RecipeDifficulty
+import com.sundaegukbap.banchango.core.designsystem.theme.LightOrange
+import com.sundaegukbap.banchango.core.designsystem.theme.Orange
+
+@Composable
+fun RecipeDetailCard(
+    recipe: Recipe,
+    modifier: Modifier = Modifier,
+) {
+    LazyColumn(
+        modifier = modifier,
+    ) {
+        item {
+            RecipeDetailInfo(
+                difficulty = recipe.difficulty,
+                serving = recipe.servings,
+                cookingTime = recipe.cookingTime,
+                modifier =
+                    Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 12.dp),
+                paddingHorizontal = 32,
+            )
+        }
+        item {
+            Text(
+                modifier = Modifier.padding(top = 20.dp, start = 12.dp, end = 12.dp),
+                text = recipe.name,
+                fontSize = 20.sp,
+                fontWeight = FontWeight.Bold,
+            )
+        }
+
+        item {
+            Text(
+                text = recipe.introduction,
+                fontSize = 12.sp,
+                modifier = Modifier.padding(top = 12.dp, start = 12.dp, end = 12.dp),
+            )
+        }
+
+        item {
+            Ingredients(title = "핵심 재료", have = recipe.have, need = recipe.need)
+        }
+        item {
+            Ingredients("식자재", recipe.have, recipe.need)
+        }
+    }
+}
+
+@Composable
+private fun Ingredients(
+    title: String,
+    have: List<String>,
+    need: List<String>,
+) {
+    Box(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .padding(top = 20.dp, start = 12.dp, end = 12.dp),
+    ) {
+        Text(
+            text = title,
+            fontSize = 12.sp,
+            fontWeight = FontWeight.Bold,
+        )
+        Text(
+            text = "${have.size}/${have.size + need.size}",
+            color = Color.White,
+            fontSize = 12.sp,
+            fontWeight = FontWeight.Bold,
+            modifier =
+                Modifier
+                    .background(color = Orange, shape = CircleShape)
+                    .padding(horizontal = 8.dp)
+                    .align(Alignment.CenterEnd),
+        )
+    }
+
+    HorizontalDivider(
+        modifier = Modifier.padding(top = 12.dp, start = 12.dp, end = 12.dp),
+        color = Orange,
+    )
+
+    LazyRow(
+        modifier = Modifier.padding(top = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        val ingredients =
+            have.map { ItemIngredient(it, true) } + need.map { ItemIngredient(it, false) }
+        itemsIndexed(ingredients) { index, it ->
+            if (index == 0) {
+                IngredientCard(it, modifier = Modifier.padding(start = 12.dp))
+            } else {
+                IngredientCard(it)
+            }
+        }
+    }
+}
+
+@Composable
+private fun IngredientCard(
+    itemIngredient: ItemIngredient,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier =
+            modifier
+                .border(1.dp, color = Orange, shape = CircleShape)
+                .background(
+                    color = if (itemIngredient.has) Color.White else LightOrange,
+                    shape = CircleShape,
+                ),
+    ) {
+        Text(modifier = Modifier.padding(16.dp), text = itemIngredient.name)
+    }
+}
+
+data class ItemIngredient(
+    val name: String,
+    val has: Boolean,
+)
+
+@Preview(showBackground = true)
+@Composable
+fun RecipeDetailCardPreview() {
+    RecipeDetailCard(
+        recipe =
+            Recipe(
+                id = 1,
+                name = "간장계란볶음밥",
+                introduction =
+                    "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. \n " +
+                        "아이들이 더 좋아할거예요. \n",
+                image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
+                link = "https://www.10000recipe.com/recipe/6889616",
+                cookingTime = 10,
+                servings = 2,
+                difficulty = RecipeDifficulty.BEGINNER,
+                have = listOf("계란", "간장"),
+                need = listOf("식초", "당근", "감자", "깨소금", "밥"),
+            ),
+    )
+}
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailInfo.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailInfo.kt
new file mode 100644
index 0000000..6a441af
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailInfo.kt
@@ -0,0 +1,126 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+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.dp
+import androidx.compose.ui.unit.sp
+import com.sundaegukbap.banchango.RecipeDifficulty
+import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
+import com.sundaegukbap.banchango.core.designsystem.theme.LightOrange
+import com.sundaegukbap.banchango.core.designsystem.theme.Orange
+import com.sundaegukbap.banchango.feature.recipe.difficulty.Stars
+
+@Composable
+fun RecipeDetailInfo(
+    difficulty: RecipeDifficulty,
+    serving: Int,
+    cookingTime: Int,
+    paddingHorizontal: Int,
+    modifier: Modifier = Modifier
+) {
+    Row(modifier = modifier.fillMaxWidth()) {
+        RecipeDetailDifficulty(
+            modifier = Modifier
+                .wrapContentSize()
+                .align(Alignment.CenterVertically)
+                .padding(horizontal = paddingHorizontal.dp),
+            difficulty = difficulty
+        )
+
+        RecipeLine(alignment = Alignment.CenterVertically)
+
+        DetailText(
+            modifier = Modifier.align(Alignment.CenterVertically),
+            text = "${serving}인분",
+            paddingHorizontal = paddingHorizontal
+        )
+
+        RecipeLine(alignment = Alignment.CenterVertically)
+
+        DetailText(
+            modifier = Modifier.align(Alignment.CenterVertically),
+            text = "${cookingTime}m",
+            paddingHorizontal = paddingHorizontal
+        )
+    }
+}
+
+@Composable
+private fun RecipeDetailDifficulty(
+    modifier: Modifier = Modifier,
+    difficulty: RecipeDifficulty
+) {
+    Column(modifier = modifier) {
+        Stars(
+            modifier = Modifier.wrapContentSize(),
+            starSize = 14,
+            filledCount = difficulty.level
+        )
+        Text(
+            modifier = Modifier
+                .wrapContentSize()
+                .align(Alignment.CenterHorizontally),
+            text = difficulty.explain,
+            fontSize = 12.sp,
+            fontWeight = Bold,
+            color = Orange,
+        )
+    }
+}
+
+@Composable
+private fun RowScope.RecipeLine(alignment: Alignment.Vertical) {
+    VerticalDivider(
+        modifier = Modifier
+            .height(52.dp)
+            .align(alignment),
+        color = LightOrange,
+        thickness = 2.dp
+    )
+}
+
+@Composable
+private fun RowScope.DetailText(
+    modifier: Modifier = Modifier,
+    paddingHorizontal: Int,
+    text: String
+) {
+    Text(
+        modifier = modifier
+            .wrapContentSize()
+            .padding(horizontal = paddingHorizontal.dp)
+            .align(Alignment.CenterVertically),
+        text = text,
+        fontSize = 12.sp,
+        fontWeight = Bold,
+        color = Orange,
+        textAlign = TextAlign.Center
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun RecipeDetailInfoPreview() {
+    BanchangoTheme {
+        RecipeDetailInfo(
+            difficulty = RecipeDifficulty.ADVANCED,
+            serving = 2,
+            cookingTime = 30,
+            20,
+        )
+    }
+}
+
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailScreen.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailScreen.kt
new file mode 100644
index 0000000..b226b83
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailScreen.kt
@@ -0,0 +1,232 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.material3.rememberStandardBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+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.platform.LocalConfiguration
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.sundaegukbap.banchango.LikableRecipe
+import com.sundaegukbap.banchango.Recipe
+import com.sundaegukbap.banchango.RecipeDifficulty
+import com.sundaegukbap.banchango.core.designsystem.component.NetworkImage
+
+@Composable
+fun RecipeDetailRoute(
+    recipeId: Long,
+    modifier: Modifier = Modifier,
+    onChangeSystemBarsColor: (color: Color, darkIcons: Boolean) -> Unit,
+    viewModel: RecipeDetailViewModel = hiltViewModel(),
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    LaunchedEffect(Unit) {
+        viewModel.getRecipeDetail(recipeId)
+    }
+
+    RecipeDetailContent(
+        uiState = uiState,
+        onChangeSystemBarsColor = onChangeSystemBarsColor,
+        modifier = modifier,
+    ) { likableRecipe ->
+        viewModel.likeRecipe(likableRecipe.recipe.id, !likableRecipe.isLiked)
+    }
+}
+
+@Composable
+fun RecipeDetailContent(
+    modifier: Modifier = Modifier,
+    uiState: RecipeDetailUiState,
+    onShowErrorSnackBar: (throwable: Throwable?) -> Unit = {},
+    onChangeSystemBarsColor: (color: Color, darkIcons: Boolean) -> Unit,
+    onLikeCLick: (likableRecipe: LikableRecipe) -> Unit,
+) {
+    when (uiState) {
+        is RecipeDetailUiState.Loading -> {
+            RecipeDetailLoading()
+        }
+
+        is RecipeDetailUiState.Success -> {
+            onChangeSystemBarsColor(Color.Transparent, false)
+            RecipeDetailScreen(
+                likableRecipe = uiState.likableRecipe,
+                modifier = modifier,
+                onLikeCLick = { onLikeCLick(uiState.likableRecipe) },
+                onChangeSystemBarsColor = onChangeSystemBarsColor,
+            )
+        }
+
+        is RecipeDetailUiState.Error -> {
+            onShowErrorSnackBar(uiState.throwable)
+        }
+    }
+}
+
+@Composable
+private fun RecipeDetailLoading() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        CircularProgressIndicator()
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun RecipeDetailScreen(
+    likableRecipe: LikableRecipe,
+    modifier: Modifier = Modifier,
+    onChangeSystemBarsColor: (color: Color, darkIcons: Boolean) -> Unit,
+    onLikeCLick: () -> Unit,
+) {
+    val scaffoldState =
+        rememberBottomSheetScaffoldState(
+            rememberStandardBottomSheetState(initialValue = SheetValue.PartiallyExpanded),
+        )
+
+    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
+    val onBackPressedDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher
+
+    var topBarIconColor by remember { mutableStateOf(Color.White) } // 초기 아이콘 색상 설정
+    var topBarBackgroundColor by remember { mutableStateOf(Color.Transparent) }
+
+    LaunchedEffect(scaffoldState.bottomSheetState) {
+        snapshotFlow { scaffoldState.bottomSheetState.requireOffset() }
+            .collect { offsetValue ->
+                if (offsetValue.dp >= (screenHeight * 0.4f)) {
+                    topBarBackgroundColor = Color.Transparent
+                    topBarIconColor = Color.White
+                    onChangeSystemBarsColor(Color.Transparent, false)
+                } else {
+                    topBarBackgroundColor = Color.White
+                    topBarIconColor = Color.Gray
+                    onChangeSystemBarsColor(Color.White, true)
+                }
+            }
+    }
+
+    Box(
+        modifier =
+        modifier
+            .windowInsetsPadding(WindowInsets.navigationBars)
+            .fillMaxSize(),
+    ) {
+        RecipeImage(
+            imageUrl = likableRecipe.recipe.image,
+            modifier =
+            Modifier
+                .fillMaxWidth()
+                .height(screenHeight * 0.5f)
+                .align(Alignment.TopCenter),
+        )
+        BottomSheetScaffold(
+            scaffoldState = scaffoldState,
+            sheetContent = {
+                RecipeDetailCard(
+                    likableRecipe.recipe,
+                    Modifier.height(screenHeight * 0.98f),
+                )
+            },
+            sheetContainerColor = Color.White,
+            sheetPeekHeight = screenHeight * 0.7f,
+        ) {}
+
+        RecipeTobBar(
+            backgroundColor = topBarBackgroundColor,
+            navigationIconColor = topBarIconColor,
+            actionIconColor = topBarIconColor,
+            onBackClick = { onBackPressedDispatcher?.onBackPressed() },
+            onLikeClick = onLikeCLick,
+        )
+
+        BtnMoveToRecipe(
+            likableRecipe.recipe.link,
+            modifier =
+            Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 60.dp),
+        )
+    }
+}
+
+@Composable
+private fun RecipeImage(
+    imageUrl: String,
+    modifier: Modifier,
+) {
+    Box(modifier = modifier) {
+        NetworkImage(
+            url = imageUrl,
+            modifier = Modifier.fillMaxSize(),
+        )
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(
+                    brush =
+                    Brush.verticalGradient(
+                        colors =
+                        listOf(
+                            Color.Black.copy(alpha = 0.3f),
+                            Color.Transparent,
+                        ),
+                        startY = 0f,
+                        endY = Float.POSITIVE_INFINITY,
+                    ),
+                ),
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun RecipeDetailScreenPreview() {
+    RecipeDetailScreen(
+        likableRecipe =
+            LikableRecipe(
+                recipe =
+                    Recipe(
+                        id = 1,
+                        name = "간장계란볶음밥",
+                        introduction = "아주 간단하면서 맛있는 계란간장볶음밥으로 한끼식사 만들어보세요. 아이들이 더 좋아할거예요.",
+                        image = "https://recipe1.ezmember.co.kr/cache/recipe/2018/05/26/d0c6701bc673ac5c18183b47212a58571.jpg",
+                        link = "https://www.10000recipe.com/recipe/6889616",
+                        cookingTime = 10,
+                        servings = 2,
+                        difficulty = RecipeDifficulty.BEGINNER,
+                        have = listOf("계란", "간장"),
+                        need = listOf("식초", "당근", "감자"),
+                    ),
+                isLiked = false,
+            ),
+        onLikeCLick = {},
+        onChangeSystemBarsColor = { color, darkIcons -> },
+    )
+}
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailUiState.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailUiState.kt
new file mode 100644
index 0000000..5585a80
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailUiState.kt
@@ -0,0 +1,15 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import com.sundaegukbap.banchango.LikableRecipe
+
+sealed interface RecipeDetailUiState {
+    data object Loading : RecipeDetailUiState
+
+    data class Success(
+        val likableRecipe: LikableRecipe,
+    ) : RecipeDetailUiState
+
+    data class Error(
+        val throwable: Throwable,
+    ) : RecipeDetailUiState
+}
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailViewModel.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailViewModel.kt
new file mode 100644
index 0000000..031412e
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeDetailViewModel.kt
@@ -0,0 +1,47 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.sundaegukbap.banchango.core.data.repository.api.RecipeRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class RecipeDetailViewModel
+    @Inject
+    constructor(
+        private val recipeRepository: RecipeRepository,
+    ) : ViewModel() {
+        private val _uiState: MutableStateFlow<RecipeDetailUiState> =
+            MutableStateFlow(RecipeDetailUiState.Loading)
+        val uiState: StateFlow<RecipeDetailUiState> = _uiState.asStateFlow()
+
+        fun getRecipeDetail(recipeId: Long) {
+            viewModelScope.launch {
+                recipeRepository
+                    .getRecipeDetail(recipeId)
+                    .onSuccess { likableRecipe ->
+                        _uiState.value =
+                            RecipeDetailUiState.Success(likableRecipe)
+                    }.onFailure { throwable ->
+                        _uiState.value = RecipeDetailUiState.Error(throwable)
+                    }
+            }
+        }
+
+        fun likeRecipe(
+            recipeId: Long,
+            isLiked: Boolean,
+        ) {
+            val successUiState = uiState.value as? RecipeDetailUiState.Success ?: return
+            viewModelScope.launch {
+                recipeRepository.likeRecipe(recipeId, isLiked)
+                _uiState.value =
+                    RecipeDetailUiState.Success(successUiState.likableRecipe.copy(isLiked = isLiked))
+            }
+        }
+    }
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeTopbar.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeTopbar.kt
new file mode 100644
index 0000000..0cebdef
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/detail/RecipeTopbar.kt
@@ -0,0 +1,67 @@
+package com.sundaegukbap.banchango.feature.recipe.detail
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sundaegukbap.banchango.feature.reciperecommend.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun RecipeTobBar(
+    backgroundColor: Color,
+    navigationIconColor: Color,
+    actionIconColor: Color,
+    onBackClick: () -> Unit,
+    onLikeClick: () -> Unit,
+) {
+    TopAppBar(
+        modifier = Modifier.background(Color.Transparent),
+        title = {},
+        navigationIcon = {
+            IconButton(onClick = onBackClick) {
+                Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
+            }
+        },
+        actions = {
+            IconButton(onClick = onLikeClick, modifier = Modifier) {
+                Icon(
+                    ImageVector.vectorResource(R.drawable.ic_heart_filled),
+                    contentDescription = "Like",
+                    modifier = Modifier.size(20.dp),
+                )
+            }
+        },
+        colors =
+            TopAppBarDefaults.topAppBarColors(
+                containerColor = backgroundColor,
+                scrolledContainerColor = backgroundColor,
+                navigationIconContentColor = navigationIconColor,
+                actionIconContentColor = actionIconColor,
+            ),
+    )
+}
+
+@Preview(showBackground = false)
+@Composable
+fun PreviewRecipeTopBar() {
+    RecipeTobBar(
+        backgroundColor = Color.White,
+        onBackClick = {},
+        onLikeClick = {},
+        navigationIconColor = Color.Black,
+        actionIconColor = Color.Black,
+    )
+}
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/difficulty/Stars.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/difficulty/Stars.kt
new file mode 100644
index 0000000..c4bccd5
--- /dev/null
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/difficulty/Stars.kt
@@ -0,0 +1,57 @@
+package com.sundaegukbap.banchango.feature.recipe.difficulty
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
+import com.sundaegukbap.banchango.feature.reciperecommend.R
+
+@Composable
+fun Stars(
+    modifier: Modifier = Modifier,
+    starSize: Int,
+    filledCount: Int,
+) {
+    Row(modifier = modifier) {
+        repeat(filledCount) {
+            Star(modifier = Modifier.size(starSize.dp), isFilled = true)
+        }
+        repeat(5 - filledCount) {
+            Star(modifier = Modifier.size(starSize.dp), isFilled = false)
+        }
+    }
+}
+
+@Composable
+fun Star(modifier: Modifier, isFilled: Boolean) {
+    Image(
+        modifier = modifier,
+        painter = painterResource(id = if (isFilled) R.drawable.ic_star_filled else R.drawable.ic_star_outline),
+        contentDescription = null,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun StarPreview() {
+    BanchangoTheme {
+        Row {
+            Star(modifier = Modifier.size(40.dp), isFilled = true)
+            Star(modifier = Modifier.size(40.dp), isFilled = false)
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DifficultyStarPreview() {
+    BanchangoTheme {
+        Stars(modifier = Modifier.wrapContentSize(), starSize = 24, filledCount = 3)
+    }
+}
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/navigation/RecipeNavigation.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/navigation/RecipeNavigation.kt
index 6c43b22..aac8219 100644
--- a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/navigation/RecipeNavigation.kt
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/navigation/RecipeNavigation.kt
@@ -1,16 +1,14 @@
 package com.sundaegukbap.banchango.feature.recipe.navigation
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Text
-import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
 import androidx.navigation.toRoute
 import com.sundaegukbap.banchango.Recipe
+import com.sundaegukbap.banchango.feature.recipe.detail.RecipeDetailRoute
 import com.sundaegukbap.banchango.feature.recipe.recommend.RecipeRecommendRoute
 import com.sundaegukbap.banchango.navigation.MainTabRoute
 import com.sundaegukbap.banchango.navigation.Route
@@ -26,19 +24,19 @@ fun NavController.navigateRecipeDetail(recipeId: Long) {
 
 fun NavGraphBuilder.recipeNavGraph(
     padding: PaddingValues,
-    onRecipeClick: (Recipe) -> Unit
+    onRecipeClick: (Recipe) -> Unit,
+    onChangeStatusBarColor: (color: Color, darkIcons: Boolean) -> Unit
 ) {
     composable<MainTabRoute.RecipeRecommend> {
         RecipeRecommendRoute(
             padding = padding,
-            onRecipeClick = onRecipeClick
+            onRecipeClick = onRecipeClick,
+            onChangeStatusBarColor = onChangeStatusBarColor
         )
     }
 
     composable<Route.RecipeDetail> { navBackStackEntry ->
         val recipeId = navBackStackEntry.toRoute<Route.RecipeDetail>().recipeId
-        Box(modifier = Modifier.fillMaxSize()) {
-            Text(text = "하이 $recipeId")
-        }
+        RecipeDetailRoute(recipeId = recipeId, onChangeSystemBarsColor = onChangeStatusBarColor)
     }
 }
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeItem.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeItem.kt
index 18e95e3..607081c 100644
--- a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeItem.kt
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeItem.kt
@@ -7,36 +7,28 @@ 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.RecipeDifficulty
 import com.sundaegukbap.banchango.core.designsystem.component.NetworkImage
 import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
 import com.sundaegukbap.banchango.feature.reciperecommend.R
@@ -105,9 +97,7 @@ fun RecipeItem(
                         )
                     ),
                 )
-        ) {
-
-        }
+        )
     }
 }
 
@@ -131,7 +121,7 @@ private fun RecipeInfo(
                     alpha = 0.8f
                 )
                 .fillMaxWidth()
-                .padding(top = 40.dp, bottom = 40.dp),
+                .padding(vertical = 40.dp, horizontal = 16.dp),
         )
     }
 }
@@ -180,10 +170,9 @@ fun RecipeItemPreview() {
                     link = "https://www.10000recipe.com/recipe/6889616",
                     cookingTime = 10,
                     servings = 2,
-                    difficulty = "Easy",
+                    difficulty = RecipeDifficulty.BEGINNER,
                     have = listOf(""),
                     need = listOf(""),
-                    isBookmarked = false,
                 ),
                 isLiked = true,
             ),
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeRecommendViewModel.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeRecommendViewModel.kt
index c0efaba..9a31afd 100644
--- a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeRecommendViewModel.kt
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipeRecommendViewModel.kt
@@ -5,6 +5,7 @@ import androidx.lifecycle.viewModelScope
 import com.sundaegukbap.banchango.Recipe
 import com.sundaegukbap.banchango.core.data.repository.api.RecipeRepository
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -20,25 +21,15 @@ class RecipeRecommendViewModel @Inject constructor(
         MutableStateFlow(RecipeRecommendUiState.Loading)
     val uiState: StateFlow<RecipeRecommendUiState> = _uiState.asStateFlow()
 
-    init {
-        viewModelScope.launch {
-            recipeRepository.getRecipeRecommendation()
-                .onSuccess { recipes ->
-                    _uiState.value = RecipeRecommendUiState.Success(recipes.toUiState())
-                }.onFailure { throwable ->
-                    throwable.printStackTrace()
-                }
-        }
-    }
 
     fun getRecipeRecommendation() {
-        val successUiState = _uiState.value as? RecipeRecommendUiState.Success ?: return
+        val remainRecipes = (_uiState.value as? RecipeRecommendUiState.Success)?.recipes ?: listOf()
 
         viewModelScope.launch {
             recipeRepository.getRecipeRecommendation()
                 .onSuccess { recipes ->
                     _uiState.value = RecipeRecommendUiState.Success(
-                        successUiState.recipes + recipes.toUiState()
+                        remainRecipes + recipes.toUiState()
                     )
                 }.onFailure { throwable ->
                     throwable.printStackTrace()
@@ -59,11 +50,8 @@ class RecipeRecommendViewModel @Inject constructor(
     }
 
     private fun List<Recipe>.toUiState(): List<RecipeRecommendItemUiState> {
-        return mapIndexed { index, recipe ->
-            RecipeRecommendItemUiState(
-                recipe = recipe.copy(name = recipe.name + index.toString()),
-                isLiked = false,
-            )
+        return map { recipe ->
+            RecipeRecommendItemUiState(recipe = recipe, isLiked = false)
         }
     }
 }
diff --git a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipesRecommendScreen.kt b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipesRecommendScreen.kt
index 463b29d..df1b2d3 100644
--- a/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipesRecommendScreen.kt
+++ b/Android/feature/recipe/src/main/java/com/sundaegukbap/banchango/feature/recipe/recommend/RecipesRecommendScreen.kt
@@ -12,11 +12,13 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sundaegukbap.banchango.Recipe
+import com.sundaegukbap.banchango.RecipeDifficulty
 import com.sundaegukbap.banchango.core.designsystem.theme.BanchangoTheme
 import kotlin.math.absoluteValue
 
@@ -25,11 +27,13 @@ fun RecipeRecommendRoute(
     padding: PaddingValues,
     viewModel: RecipeRecommendViewModel = hiltViewModel(),
     onRecipeClick: (Recipe) -> Unit,
+    onChangeStatusBarColor: (color: Color, darkIcons: Boolean) -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 
     LaunchedEffect(Unit) {
-        viewModel.getRecipeRecommendation()
+        if (uiState is RecipeRecommendUiState.Loading)
+            viewModel.getRecipeRecommendation()
     }
 
     RecipeRecommendContent(
@@ -37,7 +41,8 @@ fun RecipeRecommendRoute(
         uiState = uiState,
         onLikeClick = { viewModel.likeRecipe(it) },
         onLastPageVisible = { viewModel.getRecipeRecommendation() },
-        onRecipeClick = onRecipeClick
+        onRecipeClick = onRecipeClick,
+        onChangeSystemBarsColor = onChangeStatusBarColor
     )
 }
 
@@ -48,10 +53,14 @@ fun RecipeRecommendContent(
     onLikeClick: (Recipe) -> Unit,
     onLastPageVisible: () -> Unit,
     onRecipeClick: (Recipe) -> Unit,
+    onChangeSystemBarsColor: (color: Color, darkIcons: Boolean) -> Unit,
 ) {
     when (uiState) {
         is RecipeRecommendUiState.Loading -> {
-            RecipeRecommendLoading()
+            RecipeRecommendLoading(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            )
         }
 
         is RecipeRecommendUiState.Success -> {
@@ -67,8 +76,8 @@ fun RecipeRecommendContent(
 }
 
 @Composable
-fun RecipeRecommendLoading() {
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+fun RecipeRecommendLoading(modifier: Modifier, contentAlignment: Alignment) {
+    Box(modifier = modifier, contentAlignment = contentAlignment) {
         CircularProgressIndicator()
     }
 }
@@ -81,26 +90,35 @@ private fun RecipeRecommendScreen(
     onRecipeClick: (Recipe) -> Unit,
     onLastPageVisible: () -> Unit,
 ) {
-    val pagerState = rememberPagerState(pageCount = { recipeRecommends.size })
+    val pagerState = rememberPagerState(pageCount = { recipeRecommends.size + 1 })
 
-    VerticalPager(
-        modifier = Modifier.padding(padding),
-        state = pagerState,
-        contentPadding = PaddingValues(vertical = 136.dp, horizontal = 32.dp),
-        pageSpacing = 24.dp,
-    ) { page ->
+    Box(modifier = Modifier.fillMaxSize()) {
+        VerticalPager(
+            modifier = Modifier.padding(padding),
+            state = pagerState,
+            contentPadding = PaddingValues(vertical = 136.dp, horizontal = 32.dp),
+            pageSpacing = 24.dp,
+        ) { page ->
+            if (page >= recipeRecommends.size - 2) {
+                onLastPageVisible()
+            }
+            val pageOffset =
+                (pagerState.currentPage - page + pagerState.currentPageOffsetFraction).absoluteValue
 
-        if (page >= recipeRecommends.size - 2) {
-            onLastPageVisible()
+            if (page == pagerState.pageCount - 1) {
+                RecipeRecommendLoading(
+                    modifier = Modifier.fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                )
+            } else {
+                RecipeItem(
+                    recipeItemUiState = recipeRecommends[page],
+                    onRecipeClick = onRecipeClick,
+                    onRecipeLikeClick = onLikeClick,
+                    pageOffset = pageOffset,
+                )
+            }
         }
-        val pageOffset =
-            (pagerState.currentPage - page + pagerState.currentPageOffsetFraction).absoluteValue
-        RecipeItem(
-            recipeItemUiState = recipeRecommends[page],
-            onRecipeClick = onRecipeClick,
-            onRecipeLikeClick = onLikeClick,
-            pageOffset = pageOffset,
-        )
     }
 }
 
@@ -113,6 +131,7 @@ fun RecipePagePreview() {
             onLikeClick = {},
             onLastPageVisible = {},
             onRecipeClick = {},
+            onChangeSystemBarsColor = { _, _ -> },
             uiState = RecipeRecommendUiState.Success(
                 listOf(
                     RecipeRecommendItemUiState(
@@ -124,10 +143,9 @@ fun RecipePagePreview() {
                             link = "https://www.10000recipe.com/recipe/6889616",
                             cookingTime = 10,
                             servings = 2,
-                            difficulty = "Easy",
+                            difficulty = RecipeDifficulty.BEGINNER,
                             have = listOf(""),
                             need = listOf(""),
-                            isBookmarked = false,
                         ),
                         isLiked = false
                     ),
@@ -140,10 +158,9 @@ fun RecipePagePreview() {
                             link = "https://www.10000recipe.com/recipe/6889616",
                             cookingTime = 10,
                             servings = 2,
-                            difficulty = "Easy",
+                            difficulty = RecipeDifficulty.BEGINNER,
                             have = listOf(""),
                             need = listOf(""),
-                            isBookmarked = false,
                         ),
                         isLiked = false
                     ),
@@ -156,10 +173,9 @@ fun RecipePagePreview() {
                             link = "https://www.10000recipe.com/recipe/6889616",
                             cookingTime = 10,
                             servings = 2,
-                            difficulty = "Easy",
+                            difficulty = RecipeDifficulty.BEGINNER,
                             have = listOf(""),
                             need = listOf(""),
-                            isBookmarked = false,
                         ),
                         isLiked = false
                     ),
diff --git a/Android/feature/recipe/src/main/res/drawable/ic_star_filled.xml b/Android/feature/recipe/src/main/res/drawable/ic_star_filled.xml
new file mode 100644
index 0000000..1bcb71e
--- /dev/null
+++ b/Android/feature/recipe/src/main/res/drawable/ic_star_filled.xml
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="14.933333dp" android:viewportHeight="14" android:viewportWidth="15" android:width="16dp">
+      
+    <path android:fillColor="#FF7A00" android:pathData="M8.045,0.845C7.978,0.639 7.786,0.5 7.569,0.5C7.353,0.5 7.161,0.639 7.094,0.845L5.731,5.039L1.322,5.039C1.105,5.039 0.913,5.179 0.846,5.385C0.779,5.591 0.852,5.816 1.028,5.944L4.595,8.536L3.232,12.729C3.166,12.936 3.239,13.161 3.414,13.289C3.589,13.416 3.827,13.416 4.002,13.289L7.569,10.697L11.137,13.289C11.312,13.416 11.549,13.416 11.725,13.289C11.9,13.161 11.973,12.936 11.906,12.729L10.544,8.536L14.111,5.944C14.286,5.816 14.36,5.591 14.293,5.385C14.226,5.179 14.034,5.039 13.817,5.039L9.408,5.039L8.045,0.845Z" android:strokeColor="#FF7A00" android:strokeLineJoin="round" android:strokeWidth="1"/>
+    
+</vector>
diff --git a/Android/feature/recipe/src/main/res/drawable/ic_star_outline.xml b/Android/feature/recipe/src/main/res/drawable/ic_star_outline.xml
new file mode 100644
index 0000000..d81354e
--- /dev/null
+++ b/Android/feature/recipe/src/main/res/drawable/ic_star_outline.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="15dp"
+    android:height="14dp"
+    android:viewportWidth="15"
+    android:viewportHeight="14">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M7.76,0.845C7.693,0.639 7.501,0.5 7.285,0.5C7.068,0.5 6.876,0.639 6.809,0.845L5.446,5.039L1.037,5.039C0.82,5.039 0.628,5.179 0.561,5.385C0.494,5.591 0.568,5.816 0.743,5.944L4.31,8.536L2.948,12.729C2.881,12.936 2.954,13.161 3.129,13.289C3.305,13.416 3.542,13.416 3.717,13.289L7.285,10.697L10.852,13.289C11.027,13.416 11.265,13.416 11.44,13.289C11.615,13.161 11.689,12.936 11.622,12.729L10.259,8.536L13.826,5.944C14.002,5.816 14.075,5.591 14.008,5.385C13.941,5.179 13.749,5.039 13.533,5.039L9.123,5.039L7.76,0.845Z"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FF7A00"/>
+</vector>