[Refactor/#107] 추천 루틴 화면 리다자인 변경 사항을 반영합니다.

data/src/main/java/com/threegap/bitnagil/data/recommendroutine/model/response/RecommendedRoutineDto.kt

@@ -1,5 +1,6 @@
 package com.threegap.bitnagil.data.recommendroutine.model.response
 
+import com.threegap.bitnagil.domain.recommendroutine.model.RecommendCategory
 import com.threegap.bitnagil.domain.recommendroutine.model.RecommendLevel
 import com.threegap.bitnagil.domain.recommendroutine.model.RecommendRoutine
 import kotlinx.serialization.SerialName
@@ -17,6 +18,8 @@ data class RecommendedRoutineDto(
     val recommendedRoutineLevel: String,
     @SerialName("executionTime")
     val executionTime: String,
+    @SerialName("recommendedRoutineType")
+    val recommendedRoutineType: String,
     @SerialName("recommendedSubRoutineSearchResult")
     val recommendedSubRoutineSearchResult: List<RecommendedSubRoutineDto>,
 )
@@ -28,5 +31,6 @@ fun RecommendedRoutineDto.toDomain(): RecommendRoutine =
         description = recommendedRoutineDescription,
         level = RecommendLevel.fromString(recommendedRoutineLevel),
         executionTime = executionTime,
+        recommendedRoutineType = RecommendCategory.fromString(recommendedRoutineType),
         recommendSubRoutines = recommendedSubRoutineSearchResult.map { it.toDomain() },
     )

domain/src/main/java/com/threegap/bitnagil/domain/recommendroutine/model/RecommendLevel.kt

@@ -9,6 +9,12 @@ enum class RecommendLevel(
     LEVEL3("LEVEL3", "의지를 다 잡고 할 수 있어요"),
     ;
 
+    fun toKoreanLevel() = when (this) {
+        LEVEL1 -> "하"
+        LEVEL2 -> "중"
+        LEVEL3 -> "상"
+    }
+
     companion object {
         fun fromString(levelName: String): RecommendLevel =
             entries.find { it.level == levelName } ?: LEVEL1

domain/src/main/java/com/threegap/bitnagil/domain/recommendroutine/model/RecommendRoutine.kt

@@ -6,5 +6,6 @@ data class RecommendRoutine(
     val description: String,
     val level: RecommendLevel,
     val executionTime: String,
+    val recommendedRoutineType: RecommendCategory,
     val recommendSubRoutines: List<RecommendSubRoutine>,
 )

presentation/src/main/java/com/threegap/bitnagil/presentation/recommendroutine/RecommendRoutineScreen.kt

@@ -16,8 +16,10 @@ import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -34,6 +36,7 @@ import com.threegap.bitnagil.domain.recommendroutine.model.RecommendCategory
 import com.threegap.bitnagil.presentation.recommendroutine.component.atom.RecommendCategoryChip
 import com.threegap.bitnagil.presentation.recommendroutine.component.block.EmotionRecommendRoutineButton
 import com.threegap.bitnagil.presentation.recommendroutine.component.block.RecommendRoutineItem
+import com.threegap.bitnagil.presentation.recommendroutine.component.template.EmptyRecommendRoutineView
 import com.threegap.bitnagil.presentation.recommendroutine.component.template.RecommendLevelBottomSheet
 import com.threegap.bitnagil.presentation.recommendroutine.model.RecommendRoutineIntent
 import com.threegap.bitnagil.presentation.recommendroutine.model.RecommendRoutineState
@@ -79,10 +82,18 @@ private fun RecommendRoutineScreen(
     onRecommendRoutineByEmotionClick: () -> Unit,
     onRegisterRoutineClick: (String) -> Unit,
 ) {
+    val listState = rememberLazyListState()
+
+    LaunchedEffect(uiState.selectedCategory) {
+        if (listState.firstVisibleItemIndex > 0 || listState.firstVisibleItemScrollOffset > 0) {
+            listState.animateScrollToItem(0)
+        }
+    }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(BitnagilTheme.colors.white)
+            .background(BitnagilTheme.colors.coolGray99)
             .statusBarsPadding(),
     ) {
         BitnagilTopBar(title = "추천 루틴")
@@ -107,7 +118,16 @@ private fun RecommendRoutineScreen(
             }
         }
 
-        Spacer(modifier = Modifier.height(18.dp))
+        if (uiState.shouldShowEmotionButton) {
+            Spacer(modifier = Modifier.height(20.dp))
+
+            EmotionRecommendRoutineButton(
+                onClick = onRecommendRoutineByEmotionClick,
+                modifier = Modifier.padding(horizontal = 16.dp),
+            )
+        }
+
+        Spacer(modifier = Modifier.height(20.dp))
 
         Row(
             verticalAlignment = Alignment.CenterVertically,
@@ -118,9 +138,9 @@ private fun RecommendRoutineScreen(
                 .padding(start = 16.dp),
         ) {
             Text(
-                text = "루틴 목록",
-                color = BitnagilTheme.colors.coolGray10,
-                style = BitnagilTheme.typography.body1SemiBold,
+                text = "추천 루틴리스트",
+                color = BitnagilTheme.colors.coolGray60,
+                style = BitnagilTheme.typography.body2SemiBold,
                 modifier = Modifier.weight(1f),
             )
 
@@ -132,15 +152,15 @@ private fun RecommendRoutineScreen(
                     .clickableWithoutRipple { onShowDifficultyBottomSheet() },
             ) {
                 Text(
-                    text = uiState.selectedRecommendLevel?.displayName ?: "난이도 선택",
-                    color = BitnagilTheme.colors.coolGray60,
+                    text = "난이도 ${uiState.selectedRecommendLevel?.toKoreanLevel() ?: "선택"}",
+                    color = BitnagilTheme.colors.coolGray40,
                     style = BitnagilTheme.typography.body2Medium,
                     modifier = Modifier.padding(start = 10.dp),
                 )
 
                 BitnagilIcon(
                     id = R.drawable.ic_down_arrow,
-                    tint = BitnagilTheme.colors.coolGray60,
+                    tint = BitnagilTheme.colors.coolGray40,
                     modifier = Modifier
                         .padding(end = 13.dp)
                         .size(16.dp),
@@ -150,27 +170,29 @@ private fun RecommendRoutineScreen(
 
         Spacer(modifier = Modifier.height(12.dp))
 
-        Column(
-            modifier = Modifier.padding(horizontal = 16.dp),
-        ) {
+        if (uiState.currentRoutines.isEmpty() && uiState.selectedRecommendLevel != null) {
+            EmptyRecommendRoutineView(
+                modifier = Modifier.fillMaxSize(),
+            )
+        } else {
             LazyColumn(
+                state = listState,
                 verticalArrangement = Arrangement.spacedBy(12.dp),
+                contentPadding = PaddingValues(bottom = 12.dp),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 16.dp),
             ) {
-                if (uiState.isDefaultCategory && uiState.emotionMarbleType == null) {
-                    item {
-                        EmotionRecommendRoutineButton(
-                            onClick = onRecommendRoutineByEmotionClick,
-                        )
-                    }
-                }
                 items(
                     items = uiState.currentRoutines,
-                    key = { "${it.id}_${it.name}" },
+                    key = { it.id },
                 ) { routine ->
                     RecommendRoutineItem(
-                        routineName = routine.name,
-                        routineDescription = routine.description,
-                        onAddRoutineClick = { onRegisterRoutineClick(routine.id.toString()) },
+                        routine = routine,
+                        onAddRoutineClick = {
+                            // todo 추천 카테고리 같이 넘겨주기
+                            onRegisterRoutineClick(routine.id.toString())
+                        },
                     )
                 }
             }

presentation/src/main/java/com/threegap/bitnagil/presentation/recommendroutine/component/atom/RecommendCategoryChip.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
@@ -26,19 +27,20 @@ fun RecommendCategoryChip(
         contentAlignment = Alignment.Center,
         modifier = modifier
             .background(
-                color = if (!isSelected) BitnagilTheme.colors.coolGray99 else BitnagilTheme.colors.navy500,
+                color = if (!isSelected) BitnagilTheme.colors.white else BitnagilTheme.colors.coolGray10,
                 shape = RoundedCornerShape(20.dp),
             )
+            .height(36.dp)
             .clickableWithoutRipple(onClick = onCategorySelected)
             .padding(
-                vertical = 9.dp,
+                vertical = 6.dp,
                 horizontal = 14.dp,
             ),
     ) {
         Text(
             text = categoryName,
-            color = if (!isSelected) BitnagilTheme.colors.navy100 else BitnagilTheme.colors.white,
-            style = if (!isSelected) BitnagilTheme.typography.caption1Regular else BitnagilTheme.typography.caption1SemiBold,
+            color = if (!isSelected) BitnagilTheme.colors.coolGray60 else BitnagilTheme.colors.white,
+            style = if (!isSelected) BitnagilTheme.typography.caption1Medium else BitnagilTheme.typography.caption1SemiBold,
         )
     }
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/recommendroutine/component/block/EmotionRecommendRoutineButton.kt

@@ -1,22 +1,24 @@
 package com.threegap.bitnagil.presentation.recommendroutine.component.block
 
+import androidx.compose.foundation.Image
 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.Row
+import androidx.compose.foundation.layout.Spacer
 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.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 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.threegap.bitnagil.designsystem.BitnagilTheme
 import com.threegap.bitnagil.designsystem.R
-import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
 import com.threegap.bitnagil.designsystem.modifier.clickableWithoutRipple
 
 @Composable
@@ -25,38 +27,51 @@ fun EmotionRecommendRoutineButton(
     modifier: Modifier = Modifier,
 ) {
     Row(
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.Start,
         modifier = modifier
             .fillMaxWidth()
-            .border(
-                width = 1.dp,
-                color = BitnagilTheme.colors.navy100,
-                shape = RoundedCornerShape(12.dp),
-            )
             .background(
-                color = BitnagilTheme.colors.white,
+                color = BitnagilTheme.colors.coolGray10,
                 shape = RoundedCornerShape(12.dp),
             )
-            .clickableWithoutRipple { onClick() }
             .padding(
-                vertical = 16.dp,
-                horizontal = 24.dp,
+                vertical = 14.dp,
+                horizontal = 16.dp,
             ),
+        verticalAlignment = Alignment.CenterVertically,
     ) {
-        BitnagilIcon(
-            id = R.drawable.ic_plus,
-            tint = BitnagilTheme.colors.navy400,
+        Image(
+            painter = painterResource(id = R.drawable.default_marble),
+            contentDescription = null,
             modifier = Modifier
                 .padding(end = 10.dp)
-                .size(20.dp),
+                .size(24.dp),
         )
 
         Text(
-            text = "오늘의 감정 루틴 추천 받기",
-            color = BitnagilTheme.colors.navy400,
-            style = BitnagilTheme.typography.body2Medium,
+            text = "내 기분에 맞는 루틴 추천받기",
+            color = BitnagilTheme.colors.white,
+            style = BitnagilTheme.typography.body2SemiBold,
         )
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Box(
+            modifier = Modifier
+                .background(
+                    color = BitnagilTheme.colors.orange500,
+                    shape = RoundedCornerShape(8.dp),
+                )
+                .height(38.dp)
+                .clickableWithoutRipple { onClick() }
+                .padding(vertical = 10.dp, horizontal = 16.dp),
+            contentAlignment = Alignment.Center,
+        ) {
+            Text(
+                text = "추천받기",
+                color = BitnagilTheme.colors.white,
+                style = BitnagilTheme.typography.caption1SemiBold,
+            )
+        }
     }
 }