[BOOK-206] feat: EmotionStep에 감정 그래픽 적용

Author: seoyoon513

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/EmotionTag.kt

@@ -11,8 +11,8 @@ import com.ninecraft.booket.core.designsystem.theme.WarmthBgColor
 import com.ninecraft.booket.core.designsystem.theme.WarmthTextColor
 
 enum class EmotionTag(val label: String, val bgColor: Color, val textColor: Color, val graphic: Int) {
-    WARMTH("따뜻함", WarmthBgColor, WarmthTextColor, 0),
-    JOY("즐거움", JoyBgColor, JoyTextColor, 0),
-    TENSION("긴장감", TensionBgColor, TensionTextColor, 0),
-    SADNESS("슬픔", SadnessBgColor, SadnessTextColor, 0),
+    WARMTH("따뜻함", WarmthBgColor, WarmthTextColor, R.drawable.img_emotion_warmth),
+    JOY("즐거움", JoyBgColor, JoyTextColor, R.drawable.img_emotion_joy),
+    TENSION("긴장감", TensionBgColor, TensionTextColor, R.drawable.img_emotion_tension),
+    SADNESS("슬픔", SadnessBgColor, SadnessTextColor, R.drawable.img_emotion_sadness),
 }

core/designsystem/src/main/res/drawable/img_emotion_joy.png

@@ -1,10 +1,12 @@
 package com.ninecraft.booket.feature.record.step
 
 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.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -16,11 +18,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.ninecraft.booket.core.common.extensions.clickableSingle
 import com.ninecraft.booket.core.designsystem.ComponentPreview
 import com.ninecraft.booket.core.designsystem.EmotionTag
+import com.ninecraft.booket.core.designsystem.component.ResourceImage
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.core.designsystem.theme.White
 import com.ninecraft.booket.feature.record.R
@@ -75,22 +79,33 @@ private fun EmotionItem(
     onClick: () -> Unit,
     isSelected: Boolean,
 ) {
-    val bgColor = if (isSelected) ReedTheme.colors.bgTertiary else ReedTheme.colors.bgSecondary
-
     Box(
         modifier = Modifier
             .height(214.dp)
             .background(
-                color = bgColor,
+                color = ReedTheme.colors.bgTertiary,
                 shape = RoundedCornerShape(ReedTheme.radius.md),
             )
+            .then(
+                if (isSelected) Modifier.border(
+                    width = 2.dp,
+                    color = ReedTheme.colors.borderBrand,
+                    shape = RoundedCornerShape(ReedTheme.radius.md),
+                )
+                else Modifier,
+            )
             .clip(RoundedCornerShape(ReedTheme.radius.md))
             .clickableSingle {
                 onClick()
             },
         contentAlignment = Alignment.Center,
     ) {
-        Text(text = emotionTag.label)
+        ResourceImage(
+            imageRes = emotionTag.graphic,
+            contentDescription = "Emotion Image",
+            modifier = Modifier.fillMaxSize(),
+            contentScale = ContentScale.Crop,
+        )
     }
 }