feat: 독서 기록 플로우 화면 - 입력 유효성 처리 및 세부 UX 개선

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt

@@ -7,11 +7,12 @@ import com.ninecraft.booket.core.designsystem.theme.Kakao
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 
 enum class ReedButtonColorStyle {
-    PRIMARY, SECONDARY, TERTIARY, STROKE, KAKAO;
+    PRIMARY, PRIMARY_INVERSE_TEXT, 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
@@ -21,6 +22,7 @@ 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
@@ -31,7 +33,7 @@ enum class ReedButtonColorStyle {
     fun disabledContainerColor() = ReedTheme.colors.bgDisabled
 
     @Composable
-    fun disabledContentColor() = ReedTheme.colors.contentDisabled
+    fun disabledContentColor() = if (this == PRIMARY_INVERSE_TEXT) ReedTheme.colors.contentInverse else ReedTheme.colors.contentDisabled
 
     @Composable
     fun borderStroke() = when (this) {

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/textfield/InputTransformation.kt

@@ -0,0 +1,18 @@
+package com.ninecraft.booket.core.designsystem.component.textfield
+
+import androidx.compose.foundation.text.input.TextFieldBuffer
+
+/**
+ * 숫자만 허용하고, 01, 00 같은 형식을 막는 InputTransformation
+ */
+val digitOnlyInputTransformation = { text: TextFieldBuffer ->
+    val filtered = text.toString().filter { it.isDigit() }
+
+    val transformed = when {
+        filtered.isEmpty() -> ""
+        filtered == "0" -> "0" // 0 하나만 허용
+        filtered.startsWith("0") -> filtered.trimStart('0') // 선행 0 제거
+        else -> filtered
+    }
+    text.replace(0, text.length, transformed)
+}

core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/textfield/ReedRecordTextField.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -15,6 +16,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.text.input.InputTransformation
 import androidx.compose.foundation.text.input.TextFieldLineLimits
 import androidx.compose.foundation.text.input.TextFieldState
 import androidx.compose.foundation.text.selection.LocalTextSelectionColors
@@ -41,11 +43,14 @@ fun ReedRecordTextField(
     recordState: TextFieldState,
     @StringRes recordHintRes: Int,
     modifier: Modifier = Modifier,
+    inputTransformation: InputTransformation? = null,
     keyboardOptions: KeyboardOptions = KeyboardOptions(
         keyboardType = KeyboardType.Text,
         imeAction = ImeAction.Done,
     ),
     lineLimits: TextFieldLineLimits = TextFieldLineLimits.MultiLine(),
+    isError: Boolean = false,
+    errorMessage: String = "",
     onClear: (() -> Unit)? = null,
     onNext: () -> Unit = {},
     backgroundColor: Color = ReedTheme.colors.baseSecondary,
@@ -54,58 +59,70 @@ fun ReedRecordTextField(
     borderStroke: BorderStroke = BorderStroke(width = 1.dp, color = ReedTheme.colors.baseSecondary),
 ) {
     val keyboardController = LocalSoftwareKeyboardController.current
+    val errorBorderStroke = BorderStroke(width = 1.dp, color = ReedTheme.colors.borderError)
 
     CompositionLocalProvider(LocalTextSelectionColors provides reedTextSelectionColors) {
-        BasicTextField(
-            state = recordState,
-            modifier = Modifier.fillMaxWidth(),
-            textStyle = ReedTheme.typography.body2Medium.copy(color = textColor),
-            keyboardOptions = keyboardOptions,
-            onKeyboardAction = {
-                if (keyboardOptions.imeAction == ImeAction.Next) {
-                    onNext()
-                } else {
-                    keyboardController?.hide()
-                }
-            },
-            lineLimits = lineLimits,
-            decorator = { innerTextField ->
-                Row(
-                    modifier = modifier
-                        .background(color = backgroundColor, shape = cornerShape)
-                        .border(
-                            border = borderStroke,
-                            shape = cornerShape,
-                        )
-                        .padding(vertical = ReedTheme.spacing.spacing3),
-                    verticalAlignment = if (lineLimits is TextFieldLineLimits.MultiLine) Alignment.Top else Alignment.CenterVertically,
-                ) {
-                    Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing4))
-                    Box(modifier = Modifier.weight(1f)) {
-                        if (recordState.text.isEmpty()) {
-                            Text(
-                                text = stringResource(id = recordHintRes),
-                                color = ReedTheme.colors.contentTertiary,
-                                style = ReedTheme.typography.body2Regular,
+        Column {
+            BasicTextField(
+                state = recordState,
+                modifier = modifier.fillMaxWidth(),
+                inputTransformation = inputTransformation,
+                textStyle = ReedTheme.typography.body2Medium.copy(color = textColor),
+                keyboardOptions = keyboardOptions,
+                onKeyboardAction = {
+                    if (keyboardOptions.imeAction == ImeAction.Next) {
+                        onNext()
+                    } else {
+                        keyboardController?.hide()
+                    }
+                },
+                lineLimits = lineLimits,
+                decorator = { innerTextField ->
+                    Row(
+                        modifier = modifier
+                            .background(color = backgroundColor, shape = cornerShape)
+                            .border(
+                                border = if (isError) errorBorderStroke else borderStroke,
+                                shape = cornerShape,
                             )
+                            .padding(vertical = ReedTheme.spacing.spacing3),
+                        verticalAlignment = if (lineLimits is TextFieldLineLimits.MultiLine) Alignment.Top else Alignment.CenterVertically,
+                    ) {
+                        Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing4))
+                        Box(modifier = Modifier.weight(1f)) {
+                            if (recordState.text.isEmpty()) {
+                                Text(
+                                    text = stringResource(id = recordHintRes),
+                                    color = ReedTheme.colors.contentTertiary,
+                                    style = ReedTheme.typography.body2Regular,
+                                )
+                            }
+                            innerTextField()
                         }
-                        innerTextField()
-                    }
-                    Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing2))
-                    if (recordState.text.toString().isNotEmpty() && onClear != null) {
-                        Icon(
-                            imageVector = ImageVector.vectorResource(R.drawable.ic_x_circle),
-                            contentDescription = "Clear Icon",
-                            modifier = Modifier.clickable {
-                                onClear()
-                            },
-                            tint = Color.Unspecified,
-                        )
+                        Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing2))
+                        if (recordState.text.toString().isNotEmpty() && onClear != null) {
+                            Icon(
+                                imageVector = ImageVector.vectorResource(R.drawable.ic_x_circle),
+                                contentDescription = "Clear Icon",
+                                modifier = Modifier.clickable {
+                                    onClear()
+                                },
+                                tint = Color.Unspecified,
+                            )
+                        }
+                        Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing4))
                     }
-                    Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing4))
-                }
-            },
-        )
+                },
+            )
+            if (isError) {
+                Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
+                Text(
+                    text = errorMessage,
+                    color = ReedTheme.colors.contentError,
+                    style = ReedTheme.typography.label2Regular,
+                )
+            }
+        }
     }
 }
 

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

@@ -64,6 +64,7 @@ val Blue800 = Color(0xFF1269EC)
 val Blue900 = Color(0xFF1F47CD)
 
 val Kakao = Color(0xFFFBD300)
+val Blank = Color(0xFFD6D6D6)
 val HomeBg = Color(0xFFF0F9E8)
 
 // Emotion Color

core/ui/src/main/kotlin/com/ninecraft/booket/core/ui/component/ReedFullScreen.kt

@@ -1,13 +1,17 @@
 package com.ninecraft.booket.core.ui.component
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
 import com.ninecraft.booket.core.designsystem.theme.White
 
 /**
@@ -22,11 +26,19 @@ fun ReedFullScreen(
     backgroundColor: Color = White,
     content: @Composable ColumnScope.() -> Unit,
 ) {
+    val focusManager = LocalFocusManager.current
+
     Column(
         modifier = modifier
             .fillMaxSize()
             .background(backgroundColor)
-            .systemBarsPadding(),
+            .systemBarsPadding()
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() },
+            ) {
+                focusManager.clearFocus()
+            },
     ) {
         content()
     }

feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/FilterChipGroup.kt

@@ -1,16 +1,18 @@
 package com.ninecraft.booket.feature.library.component
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import com.ninecraft.booket.core.designsystem.ComponentPreview
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
-import com.ninecraft.booket.feature.library.LibraryFilterOption
 import com.ninecraft.booket.feature.library.LibraryFilterChip
+import com.ninecraft.booket.feature.library.LibraryFilterOption
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toPersistentList
 
@@ -21,19 +23,18 @@ fun FilterChipGroup(
     onChipClick: (LibraryFilterOption) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Row(
+    LazyRow(
         modifier = modifier
             .fillMaxWidth()
             .padding(
-                start = ReedTheme.spacing.spacing5,
                 top = ReedTheme.spacing.spacing3,
-                end = ReedTheme.spacing.spacing5,
                 bottom = ReedTheme.spacing.spacing3,
             ),
+        contentPadding = PaddingValues(horizontal = ReedTheme.spacing.spacing5),
         horizontalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing2),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        filterList.forEach { item ->
+        items(filterList) { item ->
             FilterChip(
                 option = item.option,
                 count = item.count,