From aabd42e3c4d38ab3dae3fce248dea30b45c2f66d Mon Sep 17 00:00:00 2001 From: Nahyun Kim Date: Fri, 23 Jan 2026 07:55:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20TextField=20height=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EA=B4=80=EB=A0=A8=20=EC=BD=94=EB=93=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/textfield/FlintBasicTextField.kt | 10 +++++----- .../component/textfield/FlintLongTextField.kt | 17 ++++++++--------- .../component/textfield/FlintSearchTextField.kt | 4 ++-- .../collectioncreate/CollectionCreateScreen.kt | 7 ++++--- .../CollectionCreateContentItemList.kt | 10 ++-------- 5 files changed, 21 insertions(+), 27 deletions(-) diff --git a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintBasicTextField.kt b/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintBasicTextField.kt index 084038e2..e09ab2f9 100644 --- a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintBasicTextField.kt +++ b/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, ) diff --git a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt b/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt index 39565563..4acfb38d 100644 --- a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt +++ b/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt @@ -3,6 +3,7 @@ package com.flint.core.designsystem.component.textfield import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.Text @@ -14,12 +15,9 @@ 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 androidx.compose.ui.unit.dp import com.chattymin.pebble.graphemeLength import com.flint.core.designsystem.theme.FlintTheme -import kotlin.math.max -import kotlin.math.sin @Composable fun FlintLongTextField( @@ -29,25 +27,24 @@ fun FlintLongTextField( placeholder: String, modifier: Modifier = Modifier, singleLine: Boolean = false, + maxLines: Int = Int.MAX_VALUE, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, - keyboardActions: KeyboardActions = KeyboardActions.Default, - height: Dp = 120.dp + keyboardActions: KeyboardActions = KeyboardActions.Default ) { Column( verticalArrangement = Arrangement.spacedBy(8.dp), horizontalAlignment = Alignment.End, ) { FlintBasicTextField( - modifier = modifier, placeholder = placeholder, value = value, onValueChange = onValueChanged, maxLength = maxLength, singleLine = singleLine, - maxLines = 5, - height = height, + maxLines = maxLines, keyboardOptions = keyboardOptions, keyboardActions = keyboardActions, + modifier = modifier, ) Text( @@ -65,7 +62,9 @@ private fun FlintLongTextFieldPreview() { var text by remember { mutableStateOf("") } FlintLongTextField( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .heightIn(min = 100.dp), value = text, placeholder = "컬렉션의 주제를 작성해주세요.", onValueChanged = { text = it }, diff --git a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt b/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt index 08e7b406..ec9083f2 100644 --- a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt +++ b/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, diff --git a/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt b/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt index 869925d9..e96dd1fd 100644 --- a/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt +++ b/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 @@ -148,7 +149,6 @@ fun CollectionCreateScreen( singleLine = true, onValueChanged = onTitleChanged, maxLength = 20, - height = 40.dp, keyboardOptions = KeyboardOptions( imeAction = ImeAction.Next ) @@ -176,12 +176,13 @@ fun CollectionCreateScreen( Spacer(Modifier.height(16.dp)) FlintLongTextField( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .heightIn(min = 104.dp), value = uiState.description, placeholder = "컬렉션의 소개를 작성해주세요.", onValueChanged = onDescriptionChanged, maxLength = 200, - height = 104.dp, keyboardActions = KeyboardActions( onDone = {}, ), diff --git a/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt b/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt index bb59b344..4d53b69d 100644 --- a/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt +++ b/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt @@ -9,6 +9,7 @@ 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 @@ -16,10 +17,6 @@ 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 @@ -44,8 +41,6 @@ fun CollectionCreateContentItemList( selectedReason: String, onSelectedReasonChanged: (String) -> Unit = {}, ) { - - Column( modifier = Modifier.background(color = FlintTheme.colors.background), ) { @@ -111,8 +106,7 @@ fun CollectionCreateContentItemList( placeholder = "이 작품의 매력 포인트를 적어주세요.", value = selectedReason, onValueChange = onSelectedReasonChanged, - modifier = Modifier.fillMaxWidth(), - height = 108.dp, + modifier = Modifier.fillMaxWidth().heightIn(min = 108.dp), singleLine = false, maxLines = Int.MAX_VALUE, textStyle = FlintTheme.typography.body1R16, From 9172a65bdb2732c876c14013b66d9d34a0f1e338 Mon Sep 17 00:00:00 2001 From: Nahyun Kim Date: Fri, 23 Jan 2026 08:55:41 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20CollectionCreateTextField=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../textfield/CollectionInputTextField.kt | 124 ++++++++++++++++++ .../component/textfield/FlintLongTextField.kt | 74 ----------- .../CollectionCreateScreen.kt | 13 +- .../CollectionCreateContentItemList.kt | 23 ++-- 4 files changed, 142 insertions(+), 92 deletions(-) create mode 100644 app/src/main/java/com/flint/core/designsystem/component/textfield/CollectionInputTextField.kt delete mode 100644 app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt diff --git a/app/src/main/java/com/flint/core/designsystem/component/textfield/CollectionInputTextField.kt b/app/src/main/java/com/flint/core/designsystem/component/textfield/CollectionInputTextField.kt new file mode 100644 index 00000000..3ed3a42c --- /dev/null +++ b/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 + ) + } + } + } +} diff --git a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt b/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt deleted file mode 100644 index 4acfb38d..00000000 --- a/app/src/main/java/com/flint/core/designsystem/component/textfield/FlintLongTextField.kt +++ /dev/null @@ -1,74 +0,0 @@ -package com.flint.core.designsystem.component.textfield - -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.heightIn -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 FlintLongTextField( - value: String, - onValueChanged: (String) -> Unit, - maxLength: Int, - placeholder: String, - modifier: Modifier = Modifier, - singleLine: Boolean = false, - maxLines: Int = Int.MAX_VALUE, - 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, - ) - - Text( - text = "${value.graphemeLength}/$maxLength", - style = FlintTheme.typography.caption1M12, - color = FlintTheme.colors.white, - ) - } -} - -@Preview(showBackground = false) -@Composable -private fun FlintLongTextFieldPreview() { - FlintTheme { - var text by remember { mutableStateOf("") } - - FlintLongTextField( - modifier = Modifier - .fillMaxWidth() - .heightIn(min = 100.dp), - value = text, - placeholder = "컬렉션의 주제를 작성해주세요.", - onValueChanged = { text = it }, - maxLength = 200, - ) - } -} diff --git a/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt b/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt index e96dd1fd..ff186e00 100644 --- a/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt +++ b/app/src/main/java/com/flint/presentation/collectioncreate/CollectionCreateScreen.kt @@ -39,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 @@ -142,13 +142,15 @@ fun CollectionCreateScreen( Spacer(Modifier.height(16.dp)) - FlintLongTextField( + CollectionInputTextField( modifier = Modifier.fillMaxWidth(), value = uiState.title, placeholder = "컬렉션의 제목을 입력해주세요.", - singleLine = true, onValueChanged = onTitleChanged, maxLength = 20, + singleLine = true, + maxLines = 1, + isShowLengthTitle = true, keyboardOptions = KeyboardOptions( imeAction = ImeAction.Next ) @@ -175,7 +177,7 @@ fun CollectionCreateScreen( Spacer(Modifier.height(16.dp)) - FlintLongTextField( + CollectionInputTextField( modifier = Modifier .fillMaxWidth() .heightIn(min = 104.dp), @@ -183,6 +185,9 @@ fun CollectionCreateScreen( placeholder = "컬렉션의 소개를 작성해주세요.", onValueChanged = onDescriptionChanged, maxLength = 200, + singleLine = false, + maxLines = Int.MAX_VALUE, + isShowLengthTitle = true, keyboardActions = KeyboardActions( onDone = {}, ), diff --git a/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt b/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt index 4d53b69d..a2b275a6 100644 --- a/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt +++ b/app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateContentItemList.kt @@ -25,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 @@ -102,22 +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().heightIn(min = 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 ) } }