Feature/textfield component

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/dropdown/SuwikiDropDown.kt

@@ -0,0 +1,137 @@
+package com.suwiki.core.designsystem.component.dropdown
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+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.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.MaterialTheme
+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.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+
+@Composable
+fun SuwikiDropDownMenu(
+  label: String = "",
+  onClickLabel: () -> Unit = {},
+  onDismissRequest: () -> Unit = {},
+  expanded: Boolean = false,
+  content: @Composable ColumnScope.() -> Unit,
+) {
+  Column(
+    horizontalAlignment = Alignment.Start,
+  ) {
+    Row(
+      modifier = Modifier
+        .clip(RoundedCornerShape(10.dp))
+        .clickable(onClick = onClickLabel)
+        .background(Color.LightGray)
+        .padding(
+          horizontal = 9.dp,
+          vertical = 6.dp,
+        ),
+      verticalAlignment = Alignment.CenterVertically,
+    ) {
+      Text(
+        text = label,
+      )
+      Image(
+        painter = painterResource(id = R.drawable.ic_dropdown_arrow_down),
+        contentDescription = "",
+      )
+    }
+
+    MaterialTheme(
+      shapes = MaterialTheme.shapes.copy(extraSmall = RoundedCornerShape(10.dp)),
+    ) {
+      DropdownMenu(
+        modifier = Modifier
+          .width(106.dp)
+          .background(Color.White)
+          .padding(vertical = 8.dp)
+          .clip(RoundedCornerShape(20.dp)),
+        offset = DpOffset(x = 0.dp, y = 6.dp),
+        expanded = expanded,
+        onDismissRequest = onDismissRequest,
+        content = content,
+      )
+    }
+  }
+}
+
+@Preview(showSystemUi = true)
+@Composable
+fun SuwikiDropDownMenuPreview() {
+  var isSemesterDropDownExpanded by remember {
+    mutableStateOf(false)
+  }
+
+  var isExamDropdownExpanded by remember {
+    mutableStateOf(false)
+  }
+
+  Column {
+    SuwikiDropDownMenu(
+      label = "수강학기 선택",
+      expanded = isSemesterDropDownExpanded,
+      onClickLabel = { isSemesterDropDownExpanded = true },
+      onDismissRequest = { isSemesterDropDownExpanded = false },
+    ) {
+      repeat(4) {
+        SuwikiDropdownMenuItem(
+          text = "menu",
+        )
+      }
+    }
+
+    SuwikiDropDownMenu(
+      label = "시험유형 선택",
+      expanded = isExamDropdownExpanded,
+      onClickLabel = { isExamDropdownExpanded = true },
+      onDismissRequest = { isExamDropdownExpanded = false },
+    ) {
+      repeat(4) {
+        SuwikiDropdownMenuItem(
+          text = "menu",
+        )
+      }
+    }
+  }
+}
+
+@Composable
+fun SuwikiDropdownMenuItem(
+  onClick: () -> Unit = {},
+  text: String = "",
+) {
+  DropdownMenuItem(
+    modifier = Modifier.fillMaxWidth(),
+    onClick = onClick,
+    text = {
+      Text(
+        text = text,
+        textAlign = TextAlign.Start,
+      )
+    },
+  )
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBar.kt

@@ -0,0 +1,106 @@
+package com.suwiki.core.designsystem.component.searchbar
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+
+@Composable
+fun SuwikiSearchBar(
+  modifier: Modifier = Modifier,
+  hint: String = "",
+  value: String = "",
+  maxLines: Int = 1,
+  minLines: Int = 1,
+  onValueChange: (String) -> Unit = { _ -> },
+  onClickClearButton: () -> Unit = {},
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  Box(
+    Modifier
+      .background(Color.White)
+      .padding(vertical = 10.dp, horizontal = 24.dp),
+    contentAlignment = Alignment.Center,
+  ) {
+    BasicTextField(
+      value = value,
+      onValueChange = onValueChange,
+      modifier = modifier
+        .background(Color.LightGray, shape = RoundedCornerShape(10.dp))
+        .padding(8.dp),
+      singleLine = maxLines == 1,
+      maxLines = if (minLines > maxLines) minLines else maxLines,
+      minLines = minLines,
+      interactionSource = interactionSource,
+      cursorBrush = SolidColor(Color.Blue),
+      decorationBox = { innerText ->
+        Row(
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Image(painter = painterResource(id = R.drawable.ic_search), contentDescription = "")
+
+          Spacer(modifier = Modifier.size(5.dp))
+
+          Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            innerText()
+            if (value.isEmpty()) Text(text = hint, color = Color.Gray)
+          }
+
+          if (value.isNotEmpty()) {
+            Image(
+              modifier = Modifier
+                .clickable(onClick = onClickClearButton),
+              painter = painterResource(id = R.drawable.ic_textfield_clear),
+              contentDescription = "",
+            )
+          }
+        }
+      },
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiSearchBarPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiSearchBar(
+      hint = "Hinted search text",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+    )
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBarWithFilter.kt

@@ -0,0 +1,122 @@
+package com.suwiki.core.designsystem.component.searchbar
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+
+@Composable
+fun SuwikiSearchBarWithFilter(
+  modifier: Modifier = Modifier,
+  hint: String = "",
+  value: String = "",
+  maxLines: Int = 1,
+  minLines: Int = 1,
+  onValueChange: (String) -> Unit = { _ -> },
+  onClickClearButton: () -> Unit = {},
+  onClickFilterButton: () -> Unit = {},
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  Row(
+    Modifier
+      .background(Color.LightGray)
+      .padding(vertical = 10.dp, horizontal = 24.dp),
+    verticalAlignment = Alignment.CenterVertically,
+  ) {
+    BasicTextField(
+      value = value,
+      onValueChange = onValueChange,
+      modifier = modifier
+        .weight(1f)
+        .shadow(elevation = 10.dp) // TODO Custom Shadow로 변경해야함
+        .background(Color.White, shape = RoundedCornerShape(10.dp))
+        .padding(8.dp),
+      singleLine = maxLines == 1,
+      maxLines = if (minLines > maxLines) minLines else maxLines,
+      minLines = minLines,
+      interactionSource = interactionSource,
+      cursorBrush = SolidColor(Color.Blue),
+      decorationBox = { innerText ->
+        Row(
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Image(painter = painterResource(id = R.drawable.ic_search), contentDescription = "")
+
+          Spacer(modifier = Modifier.size(5.dp))
+
+          Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            innerText()
+            if (value.isEmpty()) Text(text = hint, color = Color.Gray)
+          }
+
+          if (value.isNotEmpty()) {
+            Image(
+              modifier = Modifier
+                .clickable(onClick = onClickClearButton),
+              painter = painterResource(id = R.drawable.ic_textfield_clear),
+              contentDescription = "",
+            )
+          }
+        }
+      },
+    )
+
+    Spacer(modifier = Modifier.size(4.dp))
+
+    Image(
+      modifier = Modifier
+        .shadow(elevation = 10.dp) // TODO Custom Shadow로 변경해야함
+        .background(Color.White, shape = RoundedCornerShape(10.dp))
+        .clickable(onClick = onClickFilterButton)
+        .padding(8.dp),
+      painter = painterResource(id = R.drawable.ic_filter),
+      contentDescription = "",
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiSearchBarWithFilterPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiSearchBarWithFilter(
+      hint = "Hinted search text",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+    )
+  }
+}