[feat] Button 컴포넌트 구현

app/src/main/java/org/sopt/dateroad/presentation/ui/component/button/DateRoadBasicButton.kt

@@ -0,0 +1,50 @@
+package org.sopt.dateroad.presentation.ui.component.button
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.sopt.dateroad.ui.theme.DATEROADTheme
+import org.sopt.dateroad.ui.theme.DateRoadTheme
+
+@Composable
+fun DateRoadBasicButton(
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+    textContent: String,
+    onClick: () -> Unit = {}
+) {
+    DateRoadFilledButton(
+        modifier = modifier.fillMaxWidth(),
+        isEnabled = isEnabled,
+        textContent = textContent,
+        textStyle = DateRoadTheme.typography.bodyBold15,
+        enabledBackgroundColor = DateRoadTheme.colors.deepPurple,
+        enabledTextColor = DateRoadTheme.colors.white,
+        disabledBackgroundColor = DateRoadTheme.colors.gray200,
+        disabledTextColor = DateRoadTheme.colors.gray400,
+        cornerRadius = 14.dp,
+        paddingHorizontal = 0.dp,
+        paddingVertical = 16.dp,
+        onClick = onClick
+    )
+}
+
+@Preview
+@Composable
+fun DateRoadBasicButtonPreview() {
+    DATEROADTheme {
+        Column {
+            DateRoadBasicButton(
+                isEnabled = true,
+                textContent = "프로필 등록하기"
+            )
+            DateRoadBasicButton(
+                isEnabled = false,
+                textContent = "프로필 등록하기"
+            )
+        }
+    }
+}

app/src/main/java/org/sopt/dateroad/presentation/ui/component/button/DateRoadButton.kt

@@ -0,0 +1,38 @@
+package org.sopt.dateroad.presentation.ui.component.button
+
+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.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun DateRoadButton(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color,
+    borderColor: Color = Color.Unspecified,
+    borderWidth: Dp = 0.dp,
+    cornerRadius: Dp = 0.dp,
+    paddingHorizontal: Dp = 0.dp,
+    paddingVertical: Dp = 0.dp,
+    onClick: () -> Unit,
+    content: @Composable () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .clip(RoundedCornerShape(cornerRadius))
+            .background(color = backgroundColor)
+            .clickable(onClick = onClick)
+            .border(width = borderWidth, color = borderColor, shape = RoundedCornerShape(cornerRadius))
+            .padding(horizontal = paddingHorizontal, vertical = paddingVertical)
+    ) {
+        content()
+    }
+}

app/src/main/java/org/sopt/dateroad/presentation/ui/component/button/DateRoadFilledButton.kt

@@ -0,0 +1,108 @@
+package org.sopt.dateroad.presentation.ui.component.button
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.sopt.dateroad.ui.theme.DATEROADTheme
+import org.sopt.dateroad.ui.theme.DateRoadTheme
+
+@Composable
+fun DateRoadFilledButton(
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false,
+    textContent: String,
+    textStyle: TextStyle,
+    enabledBackgroundColor: Color,
+    enabledTextColor: Color,
+    disabledBackgroundColor: Color,
+    disabledTextColor: Color,
+    cornerRadius: Dp,
+    paddingHorizontal: Dp,
+    paddingVertical: Dp,
+    onClick: () -> Unit
+) {
+    val backgroundColor = if (isEnabled) enabledBackgroundColor else disabledBackgroundColor
+    val textColor = if (isEnabled) enabledTextColor else disabledTextColor
+
+    DateRoadButton(
+        modifier = modifier,
+        backgroundColor = backgroundColor,
+        cornerRadius = cornerRadius,
+        paddingHorizontal = paddingHorizontal,
+        paddingVertical = paddingVertical,
+        onClick = onClick
+    ) {
+        Text(
+            text = textContent,
+            style = textStyle,
+            color = textColor
+        )
+    }
+}
+
+@Preview
+@Composable
+fun DateRoadFilledButtonPreview() {
+    DATEROADTheme {
+        Column {
+            DateRoadFilledButton(
+                isEnabled = true,
+                textContent = "중복확인",
+                onClick = {},
+                textStyle = DateRoadTheme.typography.bodyMed13,
+                enabledBackgroundColor = DateRoadTheme.colors.deepPurple,
+                enabledTextColor = DateRoadTheme.colors.white,
+                disabledBackgroundColor = DateRoadTheme.colors.gray200,
+                disabledTextColor = DateRoadTheme.colors.gray400,
+                cornerRadius = 10.dp,
+                paddingHorizontal = 14.dp,
+                paddingVertical = 6.dp
+            )
+            DateRoadFilledButton(
+                isEnabled = false,
+                textContent = "중복확인",
+                onClick = {},
+                textStyle = DateRoadTheme.typography.bodyMed13,
+                enabledBackgroundColor = DateRoadTheme.colors.deepPurple,
+                enabledTextColor = DateRoadTheme.colors.white,
+                disabledBackgroundColor = DateRoadTheme.colors.gray200,
+                disabledTextColor = DateRoadTheme.colors.gray400,
+                cornerRadius = 10.dp,
+                paddingHorizontal = 14.dp,
+                paddingVertical = 6.dp
+            )
+            DateRoadFilledButton(
+                isEnabled = true,
+                textContent = "불러오기",
+                onClick = {},
+                textStyle = DateRoadTheme.typography.bodyMed13,
+                enabledBackgroundColor = DateRoadTheme.colors.deepPurple,
+                enabledTextColor = DateRoadTheme.colors.white,
+                disabledBackgroundColor = DateRoadTheme.colors.gray200,
+                disabledTextColor = DateRoadTheme.colors.gray400,
+                cornerRadius = 20.dp,
+                paddingHorizontal = 10.dp,
+                paddingVertical = 5.dp
+            )
+            DateRoadFilledButton(
+                isEnabled = true,
+                textContent = "데이트 코스 받고 50P 받기",
+                onClick = {},
+                textStyle = DateRoadTheme.typography.bodyMed13,
+                enabledBackgroundColor = DateRoadTheme.colors.deepPurple,
+                enabledTextColor = DateRoadTheme.colors.white,
+                disabledBackgroundColor = DateRoadTheme.colors.gray200,
+                disabledTextColor = DateRoadTheme.colors.gray400,
+                cornerRadius = 10.dp,
+                paddingHorizontal = 20.dp,
+                paddingVertical = 10.dp
+            )
+        }
+    }
+}

app/src/main/java/org/sopt/dateroad/presentation/ui/component/button/DateRoadImageButton.kt

@@ -0,0 +1,84 @@
+package org.sopt.dateroad.presentation.ui.component.button
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.sopt.dateroad.R
+import org.sopt.dateroad.ui.theme.DATEROADTheme
+import org.sopt.dateroad.ui.theme.DateRoadTheme
+
+@Composable
+fun DateRoadImageButton(
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = false,
+    enabledBackgroundColor: Color = DateRoadTheme.colors.deepPurple,
+    enabledContentColor: Color = DateRoadTheme.colors.white,
+    disabledBackgroundColor: Color = DateRoadTheme.colors.gray200,
+    disabledContentColor: Color = DateRoadTheme.colors.gray400,
+    iconResId: Int = R.drawable.ic_all_plus_white,
+    cornerRadius: Dp,
+    paddingHorizontal: Dp,
+    paddingVertical: Dp,
+    onClick: () -> Unit
+) {
+    val backgroundColor = if (isEnabled) enabledBackgroundColor else disabledBackgroundColor
+    val contentColor = if (isEnabled) enabledContentColor else disabledContentColor
+
+    DateRoadButton(
+        modifier = modifier,
+        backgroundColor = backgroundColor,
+        cornerRadius = cornerRadius,
+        paddingHorizontal = paddingHorizontal,
+        paddingVertical = paddingVertical,
+        onClick = onClick
+    ) {
+        Icon(
+            painter = painterResource(id = iconResId),
+            contentDescription = null,
+            tint = contentColor
+        )
+    }
+}
+
+@Preview
+@Composable
+fun DateRoadImageButtonPreview() {
+    DATEROADTheme {
+        Column {
+            DateRoadImageButton(
+                isEnabled = true,
+                onClick = {},
+                cornerRadius = 14.dp,
+                paddingHorizontal = 16.dp,
+                paddingVertical = 8.dp
+            )
+            DateRoadImageButton(
+                isEnabled = true,
+                onClick = {},
+                cornerRadius = 14.dp,
+                paddingHorizontal = 12.dp,
+                paddingVertical = 12.dp
+            )
+            DateRoadImageButton(
+                isEnabled = false,
+                onClick = {},
+                cornerRadius = 14.dp,
+                paddingHorizontal = 12.dp,
+                paddingVertical = 12.dp
+            )
+            DateRoadImageButton(
+                isEnabled = true,
+                onClick = {},
+                cornerRadius = 44.dp,
+                paddingHorizontal = 12.dp,
+                paddingVertical = 12.dp
+            )
+        }
+    }
+}

app/src/main/java/org/sopt/dateroad/presentation/ui/component/button/DateRoadKakaoLoginButton.kt

@@ -0,0 +1,67 @@
+package org.sopt.dateroad.presentation.ui.component.button
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.dp
+import org.sopt.dateroad.R
+import org.sopt.dateroad.ui.theme.DATEROADTheme
+import org.sopt.dateroad.ui.theme.DateRoadTheme
+
+@Composable
+fun DateRoadKakaoLoginButton(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = DateRoadTheme.colors.kakao,
+    contentColor: Color = DateRoadTheme.colors.black,
+    onClick: () -> Unit = {}
+) {
+    DateRoadButton(
+        modifier = modifier.fillMaxWidth(),
+        backgroundColor = backgroundColor,
+        cornerRadius = 6.dp,
+        paddingVertical = 11.dp,
+        paddingHorizontal = 14.dp,
+        onClick = onClick
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.ic_kakao_logo),
+                contentDescription = null,
+                modifier = Modifier
+                    .clip(CircleShape)
+            )
+            Spacer(modifier = Modifier.size(5.dp))
+            Text(
+                text = "카카오 로그인",
+                style = DateRoadTheme.typography.bodyBold13,
+                color = contentColor,
+                textAlign = TextAlign.Center,
+                modifier = Modifier
+                    .align(Alignment.CenterVertically)
+                    .fillMaxWidth()
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun DateRoadKakaoLoginButtonPreview() {
+    DATEROADTheme {
+        DateRoadKakaoLoginButton()
+    }
+}