[Feat/#8] 필드 공통 검포넌트 구현

app/src/main/java/com/poti/android/core/common/extension/ModifierExt.kt

@@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Paint
@@ -136,3 +137,24 @@ fun Modifier.topRoundedBorder(
         style = Stroke(width = strokeWidthPx),
     )
 }
+
+fun Modifier.bottomBorder(
+    strokeWidth: Dp,
+    color: Color,
+    isVisible: Boolean = true,
+): Modifier {
+    if (!isVisible) return this
+
+    return this.drawBehind {
+        val strokeWidthPx = strokeWidth.toPx()
+        val width = size.width
+        val height = size.height - strokeWidthPx / 2
+
+        drawLine(
+            color = color,
+            start = Offset(x = 0f, y = height),
+            end = Offset(x = width, y = height),
+            strokeWidth = strokeWidthPx,
+        )
+    }
+}

app/src/main/java/com/poti/android/core/designsystem/component/field/FieldErrorMessage.kt

@@ -0,0 +1,28 @@
+package com.poti.android.core.designsystem.component.field
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.poti.android.core.designsystem.theme.PotiTheme
+
+// TODO: [도연] Display>ErrorMessage 병합 시 삭제
+@Composable
+fun FieldErrorMessage(
+    error: String,
+    modifier: Modifier = Modifier,
+) {
+    if (error.isNotEmpty()) {
+        Row(
+            modifier = modifier,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = error,
+                color = PotiTheme.colors.sementicRed,
+                style = PotiTheme.typography.body14m,
+            )
+        }
+    }
+}

app/src/main/java/com/poti/android/core/designsystem/component/field/FieldLabel.kt

@@ -0,0 +1,18 @@
+package com.poti.android.core.designsystem.component.field
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import com.poti.android.core.designsystem.theme.PotiTheme
+
+@Composable
+internal fun FieldLabel(
+    label: String,
+) {
+    if (label.isNotEmpty()) {
+        Text(
+            text = label,
+            color = PotiTheme.colors.black,
+            style = PotiTheme.typography.body14sb,
+        )
+    }
+}

app/src/main/java/com/poti/android/core/designsystem/component/field/PotiBasicField.kt

@@ -0,0 +1,135 @@
+package com.poti.android.core.designsystem.component.field
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.poti.android.core.common.extension.roundedBackgroundWithBorder
+import com.poti.android.core.designsystem.theme.PotiTheme
+
+@Composable
+internal fun PotiBasicField(
+    value: String,
+    onValueChanged: (String) -> Unit,
+    placeholder: String,
+    borderColor: Color,
+    backgroundColor: Color,
+    modifier: Modifier = Modifier,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    imeAction: ImeAction = ImeAction.Done,
+    onDoneAction: () -> Unit = {},
+    onNextAction: () -> Unit = {},
+    onSearchAction: () -> Unit = {},
+    onFocusChanged: (Boolean) -> Unit = {},
+    focusRequester: FocusRequester? = null,
+    singleLine: Boolean = true,
+    trailingIcon: @Composable () -> Unit = {},
+    enabled: Boolean = true,
+) {
+    var isFocused by remember { mutableStateOf(false) }
+    val requester = remember {
+        focusRequester ?: FocusRequester()
+    }
+
+    BasicTextField(
+        value = value,
+        onValueChange = onValueChanged,
+        modifier = modifier
+            .clip(RoundedCornerShape(8.dp))
+            .roundedBackgroundWithBorder(
+                cornerRadius = 8.dp,
+                backgroundColor = backgroundColor,
+                borderColor = borderColor,
+                borderWidth = 1.dp,
+            )
+            .focusRequester(requester)
+            .onFocusChanged { focusState ->
+                isFocused = focusState.isFocused
+                onFocusChanged(focusState.isFocused)
+            },
+        singleLine = singleLine,
+        keyboardOptions = KeyboardOptions(
+            keyboardType = keyboardType,
+            imeAction = imeAction,
+        ),
+        keyboardActions = KeyboardActions(
+            onDone = { onDoneAction() },
+            onSearch = { onSearchAction() },
+            onNext = { onNextAction() },
+        ),
+        enabled = enabled,
+        textStyle = PotiTheme.typography.body16m.copy(
+            color = PotiTheme.colors.black,
+        ),
+        decorationBox = { innerTextField ->
+            Row(
+                modifier = Modifier
+                    .padding(horizontal = 16.dp, vertical = 14.dp),
+                verticalAlignment = if (singleLine) Alignment.CenterVertically else Alignment.Top,
+            ) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f),
+                    contentAlignment = Alignment.CenterStart,
+                ) {
+                    innerTextField()
+
+                    if (value.isEmpty()) {
+                        Text(
+                            text = placeholder,
+                            color = PotiTheme.colors.gray700,
+                            style = PotiTheme.typography.body16m,
+                        )
+                    }
+
+                    if (singleLine && !isFocused && value.isNotEmpty()) {
+                        Text(
+                            text = value,
+                            modifier = Modifier
+                                .background(backgroundColor),
+                            color = PotiTheme.colors.black,
+                            style = PotiTheme.typography.body16m,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                }
+                trailingIcon()
+            }
+        },
+    )
+}
+
+enum class FieldStatus {
+    DEFAULT,
+    FOCUS,
+    ERROR,
+}
+
+val FieldStatus.borderColor: Color
+    @Composable get() = when (this) {
+        FieldStatus.DEFAULT -> PotiTheme.colors.gray300
+        FieldStatus.FOCUS -> PotiTheme.colors.gray700
+        FieldStatus.ERROR -> PotiTheme.colors.sementicRed
+    }

app/src/main/java/com/poti/android/core/designsystem/component/field/PotiCountField.kt

@@ -0,0 +1,143 @@
+package com.poti.android.core.designsystem.component.field
+
+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.layout.padding
+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.Modifier
+import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.poti.android.core.designsystem.theme.PotiTheme
+
+/**
+ * 우측에 글자 수 카운트가 표시되는 텍스트 필드입니다.
+ * 최대 한 줄로 노출되며, 길게 작성된 경우 포커스 아웃 시 말줄임 처리 됩니다.
+ * maxLength는 UI 표시 용이며, 내부에 글자 수를 제어하는 로직은 없으므로 글자 수 제한은 외부에서 제어해 value로 넣어줍니다.
+ *
+ * @param value 필드 입력값입니다.
+ * @param onValueChanged 필드에 입력된 값을 전달합니다.
+ * @param placeholder 입력값이 없을 때 표시됩니다.
+ * @param maxLength 최대 글자 수로 표시됩니다.
+ * @param modifier
+ * @param keyboardType 키보드 입력 타입으로, 기본값은 Text입니다.
+ * @param label 필드 상단에 표시됩니다.
+ * @param error 에러가 emptyString이 아닌 경우에만 필드 하단에 표시되며, borderColor가 red로 변경됩니다.
+ * @param imeAction 키보드 액션 타입으로, 기본값은 Done 입니다. Next로 변경 시 아래 위치한 필드로 포커스 이동시킬 수 있습니다.
+ * @param focusRequester 필드 포커스를 외부에서 제어하고 싶을 때 사용합니다.
+ * @param enabled 입력 및 포커스, 터치 이벤트 차단하고 싶다면 false로 설정합니다. 기본값 true입니다.
+ *
+ * @author 도연
+ * @sample PotiCountFieldWithLabelPreview
+ */
+@Composable
+fun PotiCountField(
+    value: String,
+    onValueChanged: (String) -> Unit,
+    placeholder: String,
+    maxLength: Int,
+    modifier: Modifier = Modifier,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    label: String = "",
+    error: String = "",
+    imeAction: ImeAction = ImeAction.Done,
+    focusRequester: FocusRequester? = null,
+    enabled: Boolean = true,
+) {
+    var isFocused by remember { mutableStateOf(false) }
+
+    val focusManager = LocalFocusManager.current
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    val status = when {
+        error.isNotEmpty() -> FieldStatus.ERROR
+        isFocused -> FieldStatus.FOCUS
+        else -> FieldStatus.DEFAULT
+    }
+
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        FieldLabel(label)
+
+        PotiBasicField(
+            value = value,
+            onValueChanged = onValueChanged,
+            placeholder = placeholder,
+            borderColor = status.borderColor,
+            backgroundColor = PotiTheme.colors.white,
+            modifier = Modifier
+                .fillMaxWidth()
+                .heightIn(52.dp),
+            keyboardType = keyboardType,
+            imeAction = imeAction,
+            onDoneAction = {
+                keyboardController?.hide()
+                focusManager.clearFocus()
+            },
+            onNextAction = {
+                focusManager.moveFocus(FocusDirection.Down)
+            },
+            onFocusChanged = { isFocused = it },
+            focusRequester = focusRequester,
+            singleLine = true,
+            trailingIcon = {
+                Text(
+                    text = "${value.length}/$maxLength",
+                    modifier = Modifier.padding(bottom = 3.dp),
+                    color = PotiTheme.colors.gray700,
+                    style = PotiTheme.typography.body14m,
+                )
+            },
+            enabled = enabled,
+        )
+
+        // TODO: [도연] Display>ErrorMessage으로 대체
+        FieldErrorMessage(error)
+    }
+}
+
+@Preview
+@Composable
+private fun PotiCountFieldWithErrorPreview() {
+    var text by remember { mutableStateOf("") }
+
+    PotiTheme {
+        PotiCountField(
+            value = text,
+            onValueChanged = { text = it },
+            placeholder = "플레이스홀더",
+            error = "에러 메시지",
+            maxLength = 10,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PotiCountFieldWithLabelPreview() {
+    var text by remember { mutableStateOf("") }
+
+    PotiTheme {
+        PotiCountField(
+            value = text,
+            onValueChanged = { text = it },
+            placeholder = "플레이스홀더",
+            label = "라벨",
+            maxLength = 10,
+        )
+    }
+}