feat: 독서 기록 플로우 UI/UX 개편

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

@@ -34,3 +34,19 @@ val Emotion.graphicRes: Int
         Emotion.SAD -> R.drawable.img_emotion_sadness
         Emotion.INSIGHT -> R.drawable.img_emotion_insight
     }
+
+val Emotion.graphicResV2: Int
+    get() = when (this) {
+        Emotion.WARM -> R.drawable.img_category_warm
+        Emotion.JOY -> R.drawable.img_category_joy
+        Emotion.SAD -> R.drawable.img_category_sad
+        Emotion.INSIGHT -> R.drawable.img_category_insight
+    }
+
+val Emotion.descriptionRes: Int
+    get() = when (this) {
+        Emotion.WARM -> R.string.emotion_warm_description
+        Emotion.JOY -> R.string.emotion_joy_description
+        Emotion.SAD -> R.string.emotion_sad_description
+        Emotion.INSIGHT -> R.string.emotion_insight_description
+    }

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/chip/ChipSizeStyle.kt

@@ -0,0 +1,29 @@
+package com.ninecraft.booket.core.designsystem.component.chip
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.TextStyle
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+
+data class ChipSizeStyle(
+    val paddingValues: PaddingValues,
+    val textStyle: TextStyle,
+)
+
+val mediumChipStyle: ChipSizeStyle
+    @Composable get() = ChipSizeStyle(
+        paddingValues = PaddingValues(
+            horizontal = ReedTheme.spacing.spacing3,
+            vertical = ReedTheme.spacing.spacing2,
+        ),
+        textStyle = ReedTheme.typography.body2Medium,
+    )
+
+val smallChipStyle: ChipSizeStyle
+    @Composable get() = ChipSizeStyle(
+        paddingValues = PaddingValues(
+            horizontal = ReedTheme.spacing.spacing3,
+            vertical = ReedTheme.spacing.spacing15,
+        ),
+        textStyle = ReedTheme.typography.label1Medium,
+    )

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/chip/ReedRemovableChip.kt

@@ -0,0 +1,75 @@
+package com.ninecraft.booket.core.designsystem.component.chip
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.Icon
+import androidx.compose.material3.Text
+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.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+import com.ninecraft.booket.core.common.extensions.noRippleClickable
+import com.ninecraft.booket.core.designsystem.ComponentPreview
+import com.ninecraft.booket.core.designsystem.R
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+
+@Composable
+fun ReedRemovableChip(
+    label: String,
+    chipSizeStyle: ChipSizeStyle,
+    onRemove: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val cornerShape = RoundedCornerShape(ReedTheme.radius.full)
+
+    Row(
+        modifier = modifier
+            .clip(cornerShape)
+            .background(color = ReedTheme.colors.bgTertiary)
+            .border(
+                width = 1.dp,
+                color = ReedTheme.colors.borderBrand,
+                shape = cornerShape,
+            )
+            .padding(chipSizeStyle.paddingValues),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Text(
+            text = label,
+            color = ReedTheme.colors.contentBrand,
+            style = chipSizeStyle.textStyle,
+        )
+        Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing1))
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_close),
+            contentDescription = "Icon Close",
+            tint = ReedTheme.colors.contentBrand,
+            modifier = Modifier
+                .size(14.dp)
+                .noRippleClickable {
+                    onRemove()
+                },
+        )
+    }
+}
+
+@ComponentPreview
+@Composable
+private fun ReedRemovableChipPreview() {
+    ReedTheme {
+        ReedRemovableChip(
+            label = "text",
+            chipSizeStyle = mediumChipStyle,
+            onRemove = {},
+        )
+    }
+}

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/chip/ReedSelectableChip.kt

@@ -0,0 +1,89 @@
+package com.ninecraft.booket.core.designsystem.component.chip
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+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.draw.clip
+import androidx.compose.ui.unit.dp
+import com.ninecraft.booket.core.common.extensions.noRippleClickable
+import com.ninecraft.booket.core.designsystem.ComponentPreview
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+
+@Composable
+fun ReedSelectableChip(
+    label: String,
+    chipSizeStyle: ChipSizeStyle,
+    selected: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val cornerShape = RoundedCornerShape(ReedTheme.radius.full)
+    val backgroundColor = if (selected) ReedTheme.colors.bgTertiary else ReedTheme.colors.basePrimary
+    val borderColor = if (selected) ReedTheme.colors.borderBrand else ReedTheme.colors.borderPrimary
+    val textColor = if (selected) ReedTheme.colors.contentBrand else ReedTheme.colors.contentSecondary
+
+    Row(
+        modifier = modifier
+            .clip(cornerShape)
+            .background(color = backgroundColor)
+            .noRippleClickable {
+                onClick()
+            }
+            .border(
+                width = 1.dp,
+                color = borderColor,
+                shape = cornerShape,
+            )
+            .padding(chipSizeStyle.paddingValues),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Text(
+            text = label,
+            color = textColor,
+            style = chipSizeStyle.textStyle,
+        )
+    }
+}
+
+@ComponentPreview
+@Composable
+private fun ReedSelectableChipPreview() {
+    ReedTheme {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing1),
+        ) {
+            ReedSelectableChip(
+                label = "text",
+                chipSizeStyle = mediumChipStyle,
+                selected = false,
+                onClick = {},
+            )
+            ReedSelectableChip(
+                label = "text",
+                chipSizeStyle = mediumChipStyle,
+                selected = true,
+                onClick = {},
+            )
+            ReedSelectableChip(
+                label = "text",
+                chipSizeStyle = smallChipStyle,
+                selected = false,
+                onClick = {},
+            )
+            ReedSelectableChip(
+                label = "text",
+                chipSizeStyle = smallChipStyle,
+                selected = true,
+                onClick = {},
+            )
+        }
+    }
+}

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt

@@ -9,6 +9,7 @@ data class ReedSpacing(
     val spacing0: Dp = 0.dp,
     val spacing05: Dp = 2.dp,
     val spacing1: Dp = 4.dp,
+    val spacing15: Dp = 6.dp,
     val spacing2: Dp = 8.dp,
     val spacing3: Dp = 12.dp,
     val spacing4: Dp = 16.dp,

core/designsystem/src/main/res/values/strings.xml

@@ -4,4 +4,8 @@
     <string name="unknown_error_message">알 수 없는 오류가 발생하였습니다.</string>
     <string name="search_book_hint">도서 검색 후 내 서재에 담아보세요</string>
     <string name="login_required">로그인이 필요한 기능입니다</string>
+    <string name="emotion_warm_description">공감과 위로가 된 순간</string>
+    <string name="emotion_joy_description">흥미롭고 유쾌한 순간</string>
+    <string name="emotion_sad_description">눈물이 고인 순간</string>
+    <string name="emotion_insight_description">생각이 깊어지는 순간</string>
 </resources>

core/designsystem/stability/designsystem.stability

@@ -163,6 +163,39 @@ public fun com.ninecraft.booket.core.designsystem.component.checkbox.TickOnlyChe
     - onCheckedChange: STABLE (function type)
     - modifier: STABLE (marked @Stable or @Immutable)
 
+@Composable
+public fun com.ninecraft.booket.core.designsystem.component.chip.<get-mediumChipStyle>(): com.ninecraft.booket.core.designsystem.component.chip.ChipSizeStyle
+  skippable: true
+  restartable: true
+  params:
+
+@Composable
+public fun com.ninecraft.booket.core.designsystem.component.chip.<get-smallChipStyle>(): com.ninecraft.booket.core.designsystem.component.chip.ChipSizeStyle
+  skippable: true
+  restartable: true
+  params:
+
+@Composable
+public fun com.ninecraft.booket.core.designsystem.component.chip.ReedRemovableChip(label: kotlin.String, chipSizeStyle: com.ninecraft.booket.core.designsystem.component.chip.ChipSizeStyle, onRemove: kotlin.Function0<kotlin.Unit>, modifier: androidx.compose.ui.Modifier): kotlin.Unit
+  skippable: true
+  restartable: true
+  params:
+    - label: STABLE (String is immutable)
+    - chipSizeStyle: STABLE (class with no mutable properties)
+    - onRemove: STABLE (function type)
+    - modifier: STABLE (marked @Stable or @Immutable)
+
+@Composable
+public fun com.ninecraft.booket.core.designsystem.component.chip.ReedSelectableChip(label: kotlin.String, chipSizeStyle: com.ninecraft.booket.core.designsystem.component.chip.ChipSizeStyle, selected: kotlin.Boolean, onClick: kotlin.Function0<kotlin.Unit>, modifier: androidx.compose.ui.Modifier): kotlin.Unit
+  skippable: true
+  restartable: true
+  params:
+    - label: STABLE (String is immutable)
+    - chipSizeStyle: STABLE (class with no mutable properties)
+    - selected: STABLE (primitive type)
+    - onClick: STABLE (function type)
+    - modifier: STABLE (marked @Stable or @Immutable)
+
 @Composable
 public fun com.ninecraft.booket.core.designsystem.component.textfield.ReedRecordTextField(recordState: androidx.compose.foundation.text.input.TextFieldState, recordHintRes: kotlin.Int, modifier: androidx.compose.ui.Modifier, inputTransformation: androidx.compose.foundation.text.input.InputTransformation?, keyboardOptions: androidx.compose.foundation.text.KeyboardOptions, lineLimits: androidx.compose.foundation.text.input.TextFieldLineLimits, isError: kotlin.Boolean, errorMessage: kotlin.String, onClear: kotlin.Function0<kotlin.Unit>?, onNext: kotlin.Function0<kotlin.Unit>, backgroundColor: androidx.compose.ui.graphics.Color, textColor: androidx.compose.ui.graphics.Color, cornerShape: androidx.compose.foundation.shape.RoundedCornerShape, borderStroke: androidx.compose.foundation.BorderStroke): kotlin.Unit
   skippable: true