Merge pull request #96 from YAPP-Github/BOOK-206-feature/#95

seoyoon513 · web-flow · commit adb8e0bd9cea · 2025-08-02T01:01:12.000+09:00
feat: 그래픽 및 UI/UX 변경사항 적용
diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/EmotionTag.kt b/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),
 }
diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt
@@ -7,12 +7,11 @@ import com.ninecraft.booket.core.designsystem.theme.Kakao
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 
 enum class ReedButtonColorStyle {
-    PRIMARY, PRIMARY_INVERSE_TEXT, SECONDARY, TERTIARY, STROKE, KAKAO;
+    PRIMARY, SECONDARY, TERTIARY, STROKE, KAKAO;
 
     @Composable
     fun containerColor(isPressed: Boolean) = when (this) {
         PRIMARY -> if (isPressed) ReedTheme.colors.bgPrimaryPressed else ReedTheme.colors.bgPrimary
-        PRIMARY_INVERSE_TEXT -> if (isPressed) ReedTheme.colors.bgPrimaryPressed else ReedTheme.colors.bgPrimary
         SECONDARY -> if (isPressed) ReedTheme.colors.bgSecondaryPressed else ReedTheme.colors.bgSecondary
         TERTIARY -> if (isPressed) ReedTheme.colors.bgTertiaryPressed else ReedTheme.colors.bgTertiary
         STROKE -> if (isPressed) ReedTheme.colors.basePrimary else ReedTheme.colors.basePrimary
@@ -22,7 +21,6 @@ enum class ReedButtonColorStyle {
     @Composable
     fun contentColor() = when (this) {
         PRIMARY -> ReedTheme.colors.contentInverse
-        PRIMARY_INVERSE_TEXT -> ReedTheme.colors.contentInverse
         SECONDARY -> ReedTheme.colors.contentPrimary
         TERTIARY -> ReedTheme.colors.contentBrand
         STROKE -> ReedTheme.colors.contentBrand
@@ -33,7 +31,7 @@ enum class ReedButtonColorStyle {
     fun disabledContainerColor() = ReedTheme.colors.bgDisabled
 
     @Composable
-    fun disabledContentColor() = if (this == PRIMARY_INVERSE_TEXT) ReedTheme.colors.contentInverse else ReedTheme.colors.contentDisabled
+    fun disabledContentColor() = ReedTheme.colors.contentDisabled
 
     @Composable
     fun borderStroke() = when (this) {
diff --git a/core/designsystem/src/main/res/drawable/img_emotion_joy.png b/core/designsystem/src/main/res/drawable/img_emotion_joy.png
diff --git a/core/designsystem/src/main/res/drawable/img_emotion_sadness.png b/core/designsystem/src/main/res/drawable/img_emotion_sadness.png
diff --git a/core/designsystem/src/main/res/drawable/img_emotion_tension.png b/core/designsystem/src/main/res/drawable/img_emotion_tension.png
diff --git a/core/designsystem/src/main/res/drawable/img_emotion_warmth.png b/core/designsystem/src/main/res/drawable/img_emotion_warmth.png
diff --git a/feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt b/feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt
@@ -19,6 +19,7 @@ import androidx.compose.ui.res.vectorResource
 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.component.ResourceImage
 import com.ninecraft.booket.core.designsystem.R as designR
 import com.ninecraft.booket.core.designsystem.theme.HomeBg
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
@@ -65,6 +66,12 @@ fun HomeBanner(
                 )
             }
         }
+        ResourceImage(
+            imageRes = R.drawable.img_home_seed,
+            contentDescription = "Home Seed Image",
+            modifier = Modifier
+                .align(Alignment.BottomEnd),
+        )
     }
 }
 
diff --git a/feature/home/src/main/res/drawable/img_home_seed.png b/feature/home/src/main/res/drawable/img_home_seed.png
diff --git a/feature/main/src/main/res/drawable/ic_library.xml b/feature/main/src/main/res/drawable/ic_library.xml
@@ -4,6 +4,6 @@
     android:viewportWidth="25"
     android:viewportHeight="24">
   <path
-      android:pathData="M2.25,6.143V16.857C2.25,18.041 3.245,19 4.472,19H20.028C21.255,19 22.25,18.041 22.25,16.857V8.286C22.25,7.102 21.255,6.143 20.028,6.143H13.361L11.139,4H4.472C3.245,4 2.25,4.959 2.25,6.143Z"
+      android:pathData="M13.15,21.384C14.649,20.349 16.428,19.797 18.25,19.8C19.08,19.799 19.906,19.913 20.705,20.138C20.839,20.176 20.98,20.183 21.117,20.157C21.253,20.131 21.382,20.074 21.493,19.99C21.604,19.906 21.694,19.798 21.756,19.673C21.818,19.548 21.85,19.411 21.85,19.272V6.072C21.85,5.876 21.786,5.686 21.667,5.53C21.549,5.373 21.383,5.26 21.195,5.207C20.237,4.936 19.246,4.799 18.25,4.8C16.471,4.797 14.718,5.237 13.15,6.078V21.384ZM11.35,6.078C9.782,5.237 8.03,4.797 6.25,4.8C5.254,4.799 4.263,4.936 3.305,5.207C3.117,5.26 2.951,5.373 2.833,5.53C2.714,5.686 2.65,5.876 2.65,6.072V19.272C2.65,19.411 2.682,19.548 2.744,19.673C2.806,19.797 2.896,19.905 3.007,19.989C3.118,20.073 3.247,20.13 3.384,20.156C3.52,20.181 3.661,20.175 3.795,20.137C4.594,19.912 5.42,19.799 6.25,19.8C8.145,19.8 9.9,20.384 11.35,21.384V6.078Z"
       android:fillColor="#E5E5E5"/>
 </vector>
diff --git a/feature/main/src/main/res/drawable/ic_selected_library.xml b/feature/main/src/main/res/drawable/ic_selected_library.xml
@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="25dp"
+    android:width="24dp"
     android:height="24dp"
-    android:viewportWidth="25"
+    android:viewportWidth="24"
     android:viewportHeight="24">
   <path
-      android:pathData="M2.25,6.143V16.857C2.25,18.041 3.245,19 4.472,19H20.028C21.255,19 22.25,18.041 22.25,16.857V8.286C22.25,7.102 21.255,6.143 20.028,6.143H13.361L11.139,4H4.472C3.245,4 2.25,4.959 2.25,6.143Z"
-      android:fillColor="#262626"/>
+      android:pathData="M12.9,21.384C14.399,20.349 16.178,19.797 18,19.8C18.83,19.799 19.656,19.913 20.455,20.138C20.589,20.176 20.73,20.183 20.867,20.157C21.003,20.131 21.132,20.074 21.243,19.99C21.354,19.906 21.444,19.798 21.506,19.673C21.568,19.548 21.6,19.411 21.6,19.272V6.072C21.6,5.876 21.536,5.686 21.417,5.53C21.299,5.373 21.133,5.26 20.945,5.207C19.987,4.936 18.996,4.799 18,4.8C16.221,4.797 14.468,5.237 12.9,6.078V21.384ZM11.1,6.078C9.532,5.237 7.78,4.797 6,4.8C5.004,4.799 4.013,4.936 3.055,5.207C2.867,5.26 2.701,5.373 2.583,5.53C2.464,5.686 2.4,5.876 2.4,6.072V19.272C2.4,19.411 2.432,19.548 2.494,19.673C2.556,19.797 2.646,19.905 2.757,19.989C2.868,20.073 2.997,20.13 3.134,20.156C3.27,20.181 3.411,20.175 3.545,20.137C4.344,19.912 5.17,19.799 6,19.8C7.895,19.8 9.65,20.384 11.1,21.384V6.078Z"
+      android:fillColor="#181D27"/>
 </vector>
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/component/ImpressionGuideBottomSheet.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/component/ImpressionGuideBottomSheet.kt
@@ -45,11 +45,6 @@ fun ImpressionGuideBottomSheet(
     onCloseButtonClick: () -> Unit,
     onSelectionConfirmButtonClick: () -> Unit,
 ) {
-    val isImpressionEmpty = impressionState.text.isEmpty()
-
-    val description = if (isImpressionEmpty) R.string.impression_guide_description else R.string.impression_guide_warning
-    val descriptionColor = if (isImpressionEmpty) ReedTheme.colors.contentSecondary else ReedTheme.colors.contentError
-
     ReedBottomSheet(
         onDismissRequest = {
             onDismissRequest()
@@ -85,9 +80,9 @@ fun ImpressionGuideBottomSheet(
             }
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
             Text(
-                text = stringResource(description),
+                text = stringResource(R.string.impression_guide_description),
                 modifier = Modifier.fillMaxWidth(),
-                color = descriptionColor,
+                color = ReedTheme.colors.contentSecondary,
                 style = ReedTheme.typography.label1Medium,
             )
             Column(
@@ -107,29 +102,21 @@ fun ImpressionGuideBottomSheet(
                 }
             }
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing4))
-            if (impressionState.text.isEmpty()) {
-                ReedButton(
-                    onClick = {
-                        onSelectionConfirmButtonClick()
-                    },
-                    sizeStyle = largeButtonStyle,
-                    colorStyle = ReedButtonColorStyle.PRIMARY,
-                    modifier = Modifier.fillMaxWidth(),
-                    enabled = selectedImpressionGuide.isNotEmpty(),
-                    text = stringResource(R.string.impression_guide_selection_done),
-                )
+            val isButtonEnabled = if (impressionState.text.isEmpty()) {
+                selectedImpressionGuide.isNotEmpty()
             } else {
-                ReedButton(
-                    onClick = {
-                        onSelectionConfirmButtonClick()
-                    },
-                    sizeStyle = largeButtonStyle,
-                    colorStyle = ReedButtonColorStyle.PRIMARY_INVERSE_TEXT,
-                    modifier = Modifier.fillMaxWidth(),
-                    enabled = beforeSelectedImpressionGuide != selectedImpressionGuide,
-                    text = stringResource(R.string.impression_guide_change_done),
-                )
+                beforeSelectedImpressionGuide != selectedImpressionGuide
             }
+            ReedButton(
+                onClick = {
+                    onSelectionConfirmButtonClick()
+                },
+                sizeStyle = largeButtonStyle,
+                colorStyle = ReedButtonColorStyle.PRIMARY,
+                modifier = Modifier.fillMaxWidth(),
+                enabled = isButtonEnabled,
+                text = stringResource(R.string.impression_guide_selection_done),
+            )
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing4))
         }
     }
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterPresenter.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterPresenter.kt
@@ -185,11 +185,24 @@ class RecordRegisterPresenter @AssistedInject constructor(
                 }
 
                 is RecordRegisterUiEvent.OnImpressionGuideConfirmed -> {
-                    impressionState.edit {
-                        replace(0, length, "")
-                        append(selectedImpressionGuide)
-                        this.selection = TextRange(0) // 커서를 문장 맨 앞에 위치
+                    val currentImpressionText = impressionState.text.toString()
+
+                    if (currentImpressionText.isNotEmpty()) {
+                        // 이미 작성된 감상문이 있는 경우 줄바꿈해서 추가
+                        val startIndex = currentImpressionText.length
+
+                        impressionState.edit {
+                            replace(0, length, currentImpressionText + "\n" + selectedImpressionGuide)
+                            this.selection = TextRange(startIndex + 1) // 줄바꿈한 문장 맨 앞에 커서 위치
+                        }
+                    } else {
+                        impressionState.edit {
+                            replace(0, length, "")
+                            append(selectedImpressionGuide)
+                            this.selection = TextRange(0) // 커서를 문장 맨 앞에 위치
+                        }
                     }
+
                     isImpressionGuideBottomSheetVisible = false
                 }
 
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt
@@ -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,
+        )
     }
 }
 
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt
@@ -6,6 +6,7 @@ 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.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -22,6 +23,8 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import com.ninecraft.booket.core.designsystem.ComponentPreview
 import com.ninecraft.booket.core.designsystem.component.button.ReedButton
@@ -30,6 +33,7 @@ import com.ninecraft.booket.core.designsystem.component.button.smallRoundedButto
 import com.ninecraft.booket.core.designsystem.component.textfield.ReedRecordTextField
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.core.designsystem.theme.White
+import com.ninecraft.booket.core.designsystem.R as designR
 import com.ninecraft.booket.feature.record.R
 import com.ninecraft.booket.feature.record.component.ImpressionGuideBottomSheet
 import com.ninecraft.booket.feature.record.register.RecordRegisterUiEvent
@@ -80,6 +84,10 @@ fun ImpressionStep(
                 .fillMaxWidth()
                 .focusRequester(focusRequester)
                 .height(140.dp),
+            keyboardOptions = KeyboardOptions(
+                keyboardType = KeyboardType.Text,
+                imeAction = ImeAction.Default,
+            ),
         )
         Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
         ReedButton(
@@ -92,7 +100,7 @@ fun ImpressionStep(
             text = stringResource(R.string.impression_step_guide),
             leadingIcon = {
                 Icon(
-                    imageVector = ImageVector.vectorResource(com.ninecraft.booket.core.designsystem.R.drawable.ic_book_open),
+                    imageVector = ImageVector.vectorResource(designR.drawable.ic_book_open),
                     contentDescription = "Impression Guide Icon",
                 )
             },
diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt
@@ -20,6 +20,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import com.ninecraft.booket.core.designsystem.ComponentPreview
@@ -92,6 +93,10 @@ internal fun QuoteStep(
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(140.dp),
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Text,
+                    imeAction = ImeAction.Default,
+                ),
             )
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
             Row(
diff --git a/feature/record/src/main/res/values/strings.xml b/feature/record/src/main/res/values/strings.xml
@@ -30,7 +30,6 @@
     <string name="impression_step_hint">내용을 입력해주세요.</string>
     <string name="impression_step_guide">감상평 가이드</string>
     <string name="impression_guide_description">아래 문장 중 하나를 선택해 이어서 감상을 적어보세요</string>
-    <string name="impression_guide_warning">새로운 가이드를 선택하면 기존 내용은 사라져요</string>
     <string name="impression_guide_selection_done">선택 완료</string>
     <string name="impression_guide_change_done">변경 완료</string>
     <string name="impression_guide_blank">______</string>

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ import androidx.compose.ui.res.vectorResource`
`19`	`19`	`import androidx.compose.ui.unit.dp`
`20`	`20`	`import com.ninecraft.booket.core.common.extensions.clickableSingle`
`21`	`21`	`import com.ninecraft.booket.core.designsystem.ComponentPreview`
	`22`	`+import com.ninecraft.booket.core.designsystem.component.ResourceImage`
`22`	`23`	`import com.ninecraft.booket.core.designsystem.R as designR`
`23`	`24`	`import com.ninecraft.booket.core.designsystem.theme.HomeBg`
`24`	`25`	`import com.ninecraft.booket.core.designsystem.theme.ReedTheme`
`@@ -65,6 +66,12 @@ fun HomeBanner(`
`65`	`66`	`)`
`66`	`67`	`}`
`67`	`68`	`}`
	`69`	`+ ResourceImage(`
	`70`	`+ imageRes = R.drawable.img_home_seed,`
	`71`	`+ contentDescription = "Home Seed Image",`
	`72`	`+ modifier = Modifier`
	`73`	`+ .align(Alignment.BottomEnd),`
	`74`	`+ )`
`68`	`75`	`}`
`69`	`76`	`}`
`70`	`77`