[YDS-#218] Atom - SuffixTextField 구현 (#268)

* feat : SuffixTextField 구현

* chore : SuffixTextField 수정

* chore : Preview 추가

* chore : versionName 2.5.10 -> 2.5.11

* fix : text, suffixLabel 기본값 제거

* fix : versionName 2.6.0으로 수정

* fix : isDisabled 네이밍 수정

* fix : 코드리뷰 반영

* fix : hintText 8dp로 수정

* fix : TextField의 hintText 8dp로 수정

compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt

@@ -106,7 +106,7 @@ fun PasswordTextField(
             Row(modifier = Modifier.padding(top = 8.dp)) {
                 Spacer(
                     modifier = Modifier
-                        .width(16.dp),
+                        .width(8.dp),
                 )
                 YdsText(
                     text = hintText,

compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt

@@ -88,7 +88,7 @@ fun SimpleTextField(
             Row(modifier = Modifier.padding(top = 8.dp)) {
                 Spacer(
                     modifier = Modifier
-                        .width(16.dp),
+                        .width(8.dp),
                 )
                 YdsText(
                     text = hintText,

compose/src/main/java/com/yourssu/design/system/compose/atom/SuffixTextField.kt

@@ -0,0 +1,141 @@
+package com.yourssu.design.system.compose.atom
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.design.system.compose.YdsTheme
+import com.yourssu.design.system.compose.base.YdsText
+
+@Composable
+fun SuffixTextField(
+    text: String,
+    suffixLabel: String,
+    modifier: Modifier = Modifier,
+    isError: Boolean = false,
+    isDisabled: Boolean = false,
+    placeHolder: String = "",
+    hintText: String = "",
+    onValueChange: (value: String) -> Unit,
+    keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
+) {
+    Column(modifier = modifier) {
+        OutlinedTextField(
+            value = text,
+            onValueChange = onValueChange,
+            modifier = Modifier.fillMaxWidth(),
+            shape = RoundedCornerShape(8.dp),
+            colors = TextFieldDefaults.outlinedTextFieldColors(
+                backgroundColor = YdsTheme.colors.inputFieldElevated,
+                cursorColor = YdsTheme.colors.textPointed,
+                errorBorderColor = YdsTheme.colors.textWarned,
+                unfocusedBorderColor = Color.Transparent,
+                focusedBorderColor = YdsTheme.colors.textPointed,
+                disabledTextColor = YdsTheme.colors.textDisabled,
+                disabledBorderColor = Color.Transparent,
+                textColor = YdsTheme.colors.textSecondary,
+            ),
+            isError = isError,
+            enabled = !isDisabled,
+            placeholder = {
+                YdsText(
+                    text = placeHolder,
+                    style = YdsTheme.typography.body1,
+                    color = YdsTheme.colors.textTertiary,
+                )
+            },
+            trailingIcon = {
+                YdsText(
+                    modifier = Modifier.padding(16.dp),
+                    text = suffixLabel,
+                    style = YdsTheme.typography.body1,
+                    color = YdsTheme.colors.textTertiary,
+                )
+            },
+            textStyle = YdsTheme.typography.body1.toTextStyle(),
+            keyboardOptions = keyboardOptions,
+            singleLine = true,
+        )
+        if (hintText.isNotEmpty()) {
+            Row(modifier = Modifier.padding(top = 8.dp)) {
+                Spacer(
+                    modifier = Modifier
+                        .width(8.dp),
+                )
+                YdsText(
+                    text = hintText,
+                    style = YdsTheme.typography.caption1,
+                    color = if (isError) {
+                        YdsTheme.colors.textWarned
+                    } else if (!isDisabled) {
+                        YdsTheme.colors.textDisabled
+                    } else {
+                        YdsTheme.colors.textTertiary
+                    },
+                )
+
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewSuffixTextField() {
+    var isError by remember { mutableStateOf(false) }
+    var text1 by rememberSaveable { mutableStateOf("") }
+    var text2 by rememberSaveable { mutableStateOf("") }
+    var text3 by rememberSaveable { mutableStateOf("") }
+
+    Column {
+        SuffixTextField(
+            text = text1,
+            isError = isError, isDisabled = false,
+            placeHolder = "플레이스 홀더",
+            onValueChange = { value ->
+                text1 = value
+            },
+            hintText = "힌트 텍스트",
+            modifier = Modifier.padding(10.dp),
+            suffixLabel = "@soongsil.ac.kr",
+        )
+
+        SuffixTextField(
+            text = text2,
+            isDisabled = true,
+            onValueChange = { value ->
+                text2 = value
+            },
+            hintText = "힌트 텍스트",
+            modifier = Modifier.padding(bottom = 10.dp),
+            suffixLabel = "@soongsil.ac.kr",
+        )
+
+        SuffixTextField(
+            text = text3,
+            isError = true,
+            hintText = "힌트 텍스트",
+            suffixLabel = "@soongsil.ac.kr",
+            onValueChange = { value ->
+                text3 = value
+            },
+        )
+    }
+}

version.properties

@@ -1,2 +1,2 @@
-versionName=2.5.10
+versionName=2.6.0
 #자동 배포를 위해서 버전은 여기 한 군데에서 관리하면 된다