[Fix/#180] TextField 칸 높이 제한 수정

app/src/main/java/com/flint/core/designsystem/component/textfield/CollectionInputTextField.kt

@@ -0,0 +1,124 @@
+package com.flint.core.designsystem.component.textfield
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.chattymin.pebble.graphemeLength
+import com.flint.core.designsystem.theme.FlintTheme
+
+@Composable
+fun CollectionInputTextField(
+    value: String,
+    onValueChanged: (String) -> Unit,
+    maxLength: Int,
+    placeholder: String,
+    singleLine: Boolean,
+    maxLines: Int,
+    isShowLengthTitle: Boolean,
+    modifier: Modifier = Modifier,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    keyboardActions: KeyboardActions = KeyboardActions.Default
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalAlignment = Alignment.End,
+    ) {
+        FlintBasicTextField(
+            placeholder = placeholder,
+            value = value,
+            onValueChange = onValueChanged,
+            maxLength = maxLength,
+            singleLine = singleLine,
+            maxLines = maxLines,
+            keyboardOptions = keyboardOptions,
+            keyboardActions = keyboardActions,
+            modifier = modifier,
+        )
+
+        if (!isShowLengthTitle) return
+
+        Text(
+            text = "${value.graphemeLength}/$maxLength",
+            style = FlintTheme.typography.caption1M12,
+            color = FlintTheme.colors.white,
+        )
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xff000000)
+@Composable
+private fun CollectionInputTextFieldPreview() {
+    FlintTheme {
+        var text by remember { mutableStateOf("") }
+        var text2 by remember { mutableStateOf("") }
+        var text3 by remember { mutableStateOf("") }
+
+        LazyColumn(
+            verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
+            modifier = Modifier.fillMaxSize().padding(12.dp)
+        ) {
+            item {
+                CollectionInputTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(40.dp)
+                    ,
+                    value = text,
+                    placeholder = "컬렉션의 주제를 작성해주세요.",
+                    onValueChanged = { text = it },
+                    maxLength = 20,
+                    singleLine = true,
+                    maxLines = 1,
+                    isShowLengthTitle = true
+                )
+            }
+
+            item {
+                CollectionInputTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .heightIn(min = 104.dp),
+                    value = text2,
+                    placeholder = "컬렉션의 주제를 작성해주세요.",
+                    onValueChanged = { text2 = it },
+                    maxLength = 200,
+                    singleLine = false,
+                    maxLines = Int.MAX_VALUE,
+                    isShowLengthTitle = true
+                )
+            }
+
+            item {
+                CollectionInputTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .heightIn(min = 100.dp),
+                    value = text3,
+                    placeholder = "컬렉션의 주제를 작성해주세요.",
+                    onValueChanged = { text3 = it },
+                    singleLine = false,
+                    maxLength = Int.MAX_VALUE,
+                    maxLines = Int.MAX_VALUE,
+                    isShowLengthTitle = false
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/flint/core/designsystem/component/textfield/FlintBasicTextField.kt

@@ -43,7 +43,6 @@ fun FlintBasicTextField(
     singleLine: Boolean = true,
     maxLines: Int = 1,
     maxLength: Int = Int.MAX_VALUE,
-    height: Dp = 40.dp,
     radius: Dp = 8.dp,
     textStyle: TextStyle = FlintTheme.typography.body1R16,
     backgroundColor: Color = FlintTheme.colors.gray800,
@@ -59,7 +58,6 @@ fun FlintBasicTextField(
     Box(
         modifier =
             modifier
-                .height(height)
                 .clip(RoundedCornerShape(radius))
                 .background(backgroundColor)
                 .border(
@@ -123,7 +121,7 @@ private fun BasicTextFieldPreview() {
         var text by remember { mutableStateOf("") }
 
         FlintBasicTextField(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth().height(40.dp),
             placeholder = "PlaceHolder",
             value = text,
             onValueChange = { text = it },
@@ -138,14 +136,16 @@ private fun FlintTextFieldCounterPreview() {
         var text by remember { mutableStateOf("") }
 
         FlintBasicTextField(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(40.dp),
             placeholder = "닉네임",
             value = text,
             maxLength = 20,
             onValueChange = { text = it },
             trailingContent = {
                 Text(
-                    text = "${text.length}/20",
+                    text = "${text.graphemeLength}/20",
                     style = FlintTheme.typography.body2R14,
                     color = FlintTheme.colors.gray300,
                 )

app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt

@@ -3,6 +3,7 @@ package com.flint.core.designsystem.component.textfield
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.PaddingValues
 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.text.KeyboardActions
@@ -36,12 +37,11 @@ fun FlintSearchTextField(
     val keyboardController = LocalSoftwareKeyboardController.current
 
     FlintBasicTextField(
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier.fillMaxWidth().height(48.dp),
         placeholder = placeholder,
         value = value,
         onValueChange = onValueChanged,
         radius = 36.dp,
-        height = 44.dp,
         maxLines = 1,
         paddingValues = PaddingValues(start = 16.dp),
         keyboardOptions = keyboardOptions,

app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt

@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
@@ -38,7 +39,7 @@ import com.flint.core.common.util.UiState
 import com.flint.core.designsystem.component.button.FlintButtonState
 import com.flint.core.designsystem.component.button.FlintIconButton
 import com.flint.core.designsystem.component.button.FlintLargeButton
-import com.flint.core.designsystem.component.textfield.FlintLongTextField
+import com.flint.core.designsystem.component.textfield.CollectionInputTextField
 import com.flint.core.designsystem.component.topappbar.FlintBackTopAppbar
 import com.flint.core.designsystem.theme.FlintTheme
 import com.flint.domain.model.search.SearchContentItemModel
@@ -141,14 +142,15 @@ fun CollectionCreateScreen(
 
                     Spacer(Modifier.height(16.dp))
 
-                    FlintLongTextField(
+                    CollectionInputTextField(
                         modifier = Modifier.fillMaxWidth(),
                         value = uiState.title,
                         placeholder = "컬렉션의 제목을 입력해주세요.",
-                        singleLine = true,
                         onValueChanged = onTitleChanged,
                         maxLength = 20,
-                        height = 40.dp,
+                        singleLine = true,
+                        maxLines = 1,
+                        isShowLengthTitle = true,
                         keyboardOptions = KeyboardOptions(
                             imeAction = ImeAction.Next
                         )
@@ -175,13 +177,17 @@ fun CollectionCreateScreen(
 
                     Spacer(Modifier.height(16.dp))
 
-                    FlintLongTextField(
-                        modifier = Modifier.fillMaxWidth(),
+                    CollectionInputTextField(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .heightIn(min = 104.dp),
                         value = uiState.description,
                         placeholder = "컬렉션의 소개를 작성해주세요.",
                         onValueChanged = onDescriptionChanged,
                         maxLength = 200,
-                        height = 104.dp,
+                        singleLine = false,
+                        maxLines = Int.MAX_VALUE,
+                        isShowLengthTitle = true,
                         keyboardActions = KeyboardActions(
                             onDone = {},
                         ),

app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt

@@ -9,17 +9,14 @@ 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.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -28,7 +25,7 @@ import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.flint.R
-import com.flint.core.designsystem.component.textfield.FlintBasicTextField
+import com.flint.core.designsystem.component.textfield.CollectionInputTextField
 import com.flint.core.designsystem.component.toggle.FlintBasicToggle
 import com.flint.core.designsystem.theme.FlintTheme
 
@@ -44,8 +41,6 @@ fun CollectionCreateContentItemList(
     selectedReason: String,
     onSelectedReasonChanged: (String) -> Unit = {},
 ) {
-
-
     Column(
         modifier = Modifier.background(color = FlintTheme.colors.background),
     ) {
@@ -107,23 +102,17 @@ fun CollectionCreateContentItemList(
 
         Spacer(Modifier.height(4.dp))
 
-        FlintBasicTextField(
-            placeholder = "이 작품의 매력 포인트를 적어주세요.",
+        CollectionInputTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .heightIn(min = 104.dp),
             value = selectedReason,
-            onValueChange = onSelectedReasonChanged,
-            modifier = Modifier.fillMaxWidth(),
-            height = 108.dp,
+            placeholder = "이 작품의 매력 포인트를 적어주세요.",
+            onValueChanged = onSelectedReasonChanged,
             singleLine = false,
+            maxLength = Int.MAX_VALUE,
             maxLines = Int.MAX_VALUE,
-            textStyle = FlintTheme.typography.body1R16,
-            keyboardActions = KeyboardActions(
-                onDone = {},
-            ),
-            paddingValues =
-                PaddingValues(
-                    horizontal = 12.dp,
-                    vertical = 10.dp,
-                ),
+            isShowLengthTitle = false
         )
     }
 }