Merge pull request #25 from apeun-gidaechi/feature/24-design-system-c…

…hattextfield

Feature/Design System Chat Textfield

designsystem/src/main/java/com/apeun/gidaechi/designsystem/component/textfield/ChatTextField.kt

@@ -0,0 +1,158 @@
+package com.apeun.gidaechi.designsystem.component.textfield
+
+import android.util.Log
+import androidx.compose.foundation.Image
+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
+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.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+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.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.apeun.gidaechi.designsystem.R
+import com.apeun.gidaechi.designsystem.component.modifier.DropShadowType
+import com.apeun.gidaechi.designsystem.component.modifier.dropShadow
+import com.apeun.gidaechi.designsystem.theme.Gray400
+import com.apeun.gidaechi.designsystem.theme.Gray500
+import com.apeun.gidaechi.designsystem.theme.Primary500
+import com.apeun.gidaechi.designsystem.theme.SeugiTheme
+import com.apeun.gidaechi.designsystem.theme.White
+
+/**
+ * Seugi Chat TextField
+ *
+ * @param modifier the Modifier to be applied to this text field
+ * @param value the means the value to be seen.
+ * @param placeholder the indicates the value to be displayed before the value is entered.
+ * @param onValueChange the event is forwarded when the value changes.
+ * @param onAddClick the event is click add icon.
+ * @param onSendClick the event is click send icon.
+ */
+@Composable
+fun SeugiChatTextField(
+    modifier: Modifier = Modifier,
+    value: String,
+    placeholder: String = "",
+    onValueChange: (String) -> Unit,
+    onAddClick: () -> Unit = {},
+    onSendClick: () -> Unit = {},
+) {
+    val valueIsEmpty = value.isEmpty()
+
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .dropShadow(DropShadowType.Ev1),
+        shape = RoundedCornerShape(12.dp),
+        color = White,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .heightIn(max = 200.dp)
+                .padding(
+                    horizontal = 16.dp,
+                    vertical = 14.dp,
+                ),
+            verticalAlignment = Alignment.Bottom,
+        ) {
+            Image(
+                modifier = Modifier
+                    .size(32.dp)
+                    .clip(CircleShape)
+                    .clickable(
+                        role = Role.Button,
+                        onClick = onAddClick,
+                    ),
+                painter = painterResource(id = R.drawable.ic_add_fill),
+                contentDescription = "add button",
+                colorFilter = ColorFilter.tint(Gray400),
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+            Column(
+                modifier = Modifier.weight(1f),
+            ) {
+                BasicTextField(
+                    modifier = Modifier.fillMaxWidth(),
+                    value = value,
+                    textStyle = MaterialTheme.typography.titleMedium,
+                    onValueChange = onValueChange,
+                    decorationBox = { innerTextField ->
+                        Box {
+                            if (valueIsEmpty) {
+                                Text(
+                                    text = placeholder,
+                                    color = Gray500,
+                                    style = MaterialTheme.typography.titleMedium,
+                                )
+                            }
+                            innerTextField()
+                        }
+                    },
+                )
+                Spacer(modifier = Modifier.height(5.5.dp))
+            }
+
+            Image(
+                modifier = Modifier
+                    .size(32.dp)
+                    .clip(CircleShape)
+                    .clickable(
+                        role = Role.Button,
+                        onClick = onSendClick,
+                        enabled = !valueIsEmpty,
+                    ),
+                painter = painterResource(id = R.drawable.ic_send_fill),
+                contentDescription = "send button",
+                colorFilter = ColorFilter.tint(if (valueIsEmpty) Gray400 else Primary500),
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewSeugiChatTextField() {
+    var value by remember { mutableStateOf("") }
+    SeugiTheme {
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            SeugiChatTextField(
+                value = value,
+                placeholder = "메세지 보내기",
+                onValueChange = {
+                    value = it
+                },
+                onAddClick = {
+                },
+                onSendClick = {
+                    Log.d("TAG", "PreviewSeugiChatTextField: qewwe")
+                },
+            )
+        }
+    }
+}

designsystem/src/main/res/drawable/ic_add_fill.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="25dp"
+    android:viewportWidth="24"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M5.636,18.728C9.151,22.243 14.849,22.243 18.364,18.728C21.879,15.213 21.879,9.515 18.364,6C14.849,2.485 9.151,2.485 5.636,6C2.121,9.515 2.121,15.213 5.636,18.728ZM7.05,11.364C6.498,11.364 6.05,11.812 6.05,12.364C6.05,12.916 6.498,13.364 7.05,13.364H11L11,17.314C11,17.866 11.448,18.314 12,18.314C12.552,18.314 13,17.866 13,17.314V13.364H16.95C17.502,13.364 17.95,12.916 17.95,12.364C17.95,11.812 17.502,11.364 16.95,11.364H13L13,7.414C13,6.862 12.552,6.414 12,6.414C11.448,6.414 11,6.862 11,7.414L11,11.364H7.05Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>

designsystem/src/main/res/drawable/ic_send_fill.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19.975,20.772C20.385,20.864 20.719,20.437 20.53,20.06L12.447,3.894C12.263,3.526 11.737,3.526 11.553,3.894L3.47,20.06C3.282,20.437 3.614,20.864 4.025,20.772L9.81,19.376C10.223,19.284 10.534,18.941 10.585,18.52L11.899,11.324C11.9,11.319 11.901,11.313 11.901,11.308C11.917,10.703 12.085,11.2 12.099,11.316L13.415,18.52C13.466,18.941 13.777,19.284 14.19,19.376L19.975,20.772Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>