Feature/align filter component

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignButton.kt

@@ -0,0 +1,46 @@
+package com.suwiki.core.designsystem.component.align
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+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
+import com.suwiki.core.designsystem.theme.Gray6A
+import com.suwiki.core.designsystem.theme.White
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiAlignButton(
+  onClick: () -> Unit = {},
+) {
+  Icon(
+    painter = painterResource(id = R.drawable.ic_filter),
+    contentDescription = "",
+    modifier = Modifier
+      .shadow(elevation = 10.dp)
+      .clip(RoundedCornerShape(10.dp))
+      .suwikiClickable(onClick = onClick)
+      .background(White)
+      .padding(8.dp),
+    tint = Gray6A,
+  )
+}
+
+@Preview(widthDp = 400, heightDp = 400)
+@Composable
+fun SuwikiAlignButtonPreview() {
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiAlignButton()
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignContainer.kt

@@ -0,0 +1,86 @@
+package com.suwiki.core.designsystem.component.align
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+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.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.theme.Gray6A
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.designsystem.theme.White
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiAlignContainer(
+  text: String,
+  isChecked: Boolean = false,
+  onClick: () -> Unit = {},
+) {
+  val textColor = if (isChecked) Primary else Gray6A
+  Box(
+    modifier = Modifier
+      .background(White)
+      .fillMaxWidth()
+      .wrapContentHeight()
+      .suwikiClickable(
+        onClick = onClick,
+        rippleColor = Gray6A,
+      ),
+  ) {
+    Text(
+      text = text,
+      color = textColor,
+      style = SuwikiTheme.typography.body2,
+      modifier = Modifier
+        .align(Alignment.CenterStart)
+        .padding(top = 13.dp, bottom = 14.dp, start = 24.dp, end = 52.dp),
+    )
+    if (isChecked) {
+      Icon(
+        painter = painterResource(id = R.drawable.ic_align_checked),
+        contentDescription = "",
+        modifier = Modifier
+          .align(Alignment.CenterEnd)
+          .padding(end = 16.dp)
+          .size(24.dp),
+        tint = Primary,
+      )
+    }
+  }
+}
+
+@Preview(widthDp = 300, heightDp = 200)
+@Composable
+fun SuwikiAlignContainerPreview() {
+  var isChecked by remember { mutableStateOf(false) }
+
+  SuwikiTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiAlignContainer(
+        text = "메뉴",
+        isChecked = isChecked,
+        onClick = { isChecked = !isChecked },
+      )
+    }
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt

@@ -3,8 +3,8 @@ package com.suwiki.core.designsystem.component.chips
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -18,7 +18,14 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.suwiki.core.designsystem.theme.Blue10
+import com.suwiki.core.designsystem.theme.Blue100
+import com.suwiki.core.designsystem.theme.Green10
+import com.suwiki.core.designsystem.theme.Green100
+import com.suwiki.core.designsystem.theme.Orange10
+import com.suwiki.core.designsystem.theme.Orange100
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+
 enum class SuwikiChipType {
   ORANGE,
   BLUE,
@@ -34,9 +41,9 @@ fun SuwikiContainedChip(
 ) {
   val (backgroundColor, contentColor) = if (isChecked) {
     when (type) {
-      SuwikiChipType.ORANGE -> Color(0xFFFFF3EB) to Color(0xFFFD873B)
-      SuwikiChipType.BLUE -> Color(0xFFECEDFF) to Color(0xFF3D4EFB)
-      SuwikiChipType.GREEN -> Color(0xFFEAF8EC) to Color(0xFF2DB942)
+      SuwikiChipType.ORANGE -> Orange10 to Orange100
+      SuwikiChipType.BLUE -> Blue10 to Blue100
+      SuwikiChipType.GREEN -> Green10 to Green100
     }
   } else {
     Color(0xFFF6F6F6) to Color(0xFF959595)
@@ -47,20 +54,15 @@ fun SuwikiContainedChip(
       .clip(RoundedCornerShape(5.dp))
       .background(color = backgroundColor)
       .clickable(onClick = onClick)
-      .height(26.dp),
+      .wrapContentHeight()
+      .padding(vertical = 4.dp, horizontal = 6.dp),
   ) {
-    Box(
-      modifier = Modifier
-        .padding(vertical = 4.dp, horizontal = 6.dp)
-        .height(18.dp),
-    ) {
-      Text(
-        text = text,
-        color = contentColor,
-        fontSize = 12.sp,
-        modifier = Modifier.align(Alignment.Center),
-      )
-    }
+    Text(
+      text = text,
+      style = SuwikiTheme.typography.caption1,
+      color = contentColor,
+      modifier = Modifier.align(Alignment.Center),
+    )
   }
 }
 
@@ -69,10 +71,12 @@ fun SuwikiContainedChip(
 fun SuwikiContainedChipPreview() {
   var isChecked by remember { mutableStateOf(false) }
 
-  SuwikiContainedChip(
-    isChecked = isChecked,
-    onClick = { isChecked = !isChecked },
-    type = SuwikiChipType.GREEN,
-    text = "label",
-  )
+  SuwikiTheme {
+    SuwikiContainedChip(
+      isChecked = isChecked,
+      onClick = { isChecked = !isChecked },
+      type = SuwikiChipType.GREEN,
+      text = "label",
+    )
+  }
 }

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt

@@ -4,8 +4,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -16,10 +16,13 @@ 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.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.suwiki.core.designsystem.theme.Gray95
+import com.suwiki.core.designsystem.theme.GrayDA
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.designsystem.theme.White
 
 @Composable
 fun SuwikiOutlinedChip(
@@ -28,31 +31,27 @@ fun SuwikiOutlinedChip(
   onClick: () -> Unit = {},
 ) {
   val (borderLineColor, contentColor) = if (isChecked) {
-    Color(0xFFDADADA) to Color(0xFF959595)
+    Primary to Primary
   } else {
-    Color(0xFF346CFD) to Color(0xFF346CFD)
+    GrayDA to Gray95
   }
 
   Box(
     modifier = Modifier
       .clip(RoundedCornerShape(5.dp))
       .clickable(onClick = onClick)
-      .height(26.dp)
-      .background(color = Color(0xFFFFFFFF))
-      .border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp)),
+      .wrapContentHeight()
+      .background(color = White)
+      .border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp))
+      .padding(vertical = 4.dp, horizontal = 6.dp),
   ) {
-    Box(
+    Text(
+      text = text,
+      style = SuwikiTheme.typography.caption1,
+      color = contentColor,
       modifier = Modifier
-        .padding(vertical = 4.dp, horizontal = 6.dp)
-        .height(18.dp),
-    ) {
-      Text(
-        text = text,
-        color = contentColor,
-        fontSize = 12.sp,
-        modifier = Modifier.align(Alignment.Center),
-      )
-    }
+        .align(Alignment.Center),
+    )
   }
 }
 
@@ -61,9 +60,11 @@ fun SuwikiOutlinedChip(
 fun SuwikiOutlinedChipPreview() {
   var isChecked by remember { mutableStateOf(false) }
 
-  SuwikiOutlinedChip(
-    text = "label",
-    isChecked = isChecked,
-    onClick = { isChecked = !isChecked },
-  )
+  SuwikiTheme {
+    SuwikiOutlinedChip(
+      text = "label",
+      isChecked = isChecked,
+      onClick = { isChecked = !isChecked },
+    )
+  }
 }

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterButton.kt

@@ -0,0 +1,65 @@
+package com.suwiki.core.designsystem.component.filter
+
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+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
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiFilterButton(
+  text: String,
+  onClick: () -> Unit = {},
+) {
+  Box(
+    modifier = Modifier
+      .suwikiClickable(onClick = onClick)
+      .wrapContentHeight()
+      .padding(vertical = 4.dp, horizontal = 8.dp),
+  ) {
+    Row(
+      verticalAlignment = Alignment.CenterVertically,
+    ) {
+      Text(
+        text = text,
+        style = SuwikiTheme.typography.header6,
+        color = Primary,
+      )
+      Icon(
+        painter = painterResource(id = R.drawable.ic_filter_arrow_down),
+        contentDescription = "",
+        tint = Primary,
+        modifier = Modifier
+          .size(24.dp)
+          .padding(vertical = 9.dp, horizontal = 7.dp),
+      )
+    }
+  }
+}
+
+@Preview(widthDp = 400, heightDp = 50)
+@Composable
+fun SuwikiFilterButtonPreview() {
+  SuwikiTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiFilterButton(text = "학과필터")
+    }
+  }
+}