From 38df6577fdcec6105b387e6023ed268e9275b67f Mon Sep 17 00:00:00 2001
From: Dongmin <pdm001125@naver.com>
Date: Mon, 23 Sep 2024 14:36:23 +0900
Subject: [PATCH] feature #866: feat CircleShapeBorderButton

---
 .../component/CircleShapeBorderButton.kt      | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 feature/fortune/src/main/java/org/sopt/official/feature/fortune/component/CircleShapeBorderButton.kt

diff --git a/feature/fortune/src/main/java/org/sopt/official/feature/fortune/component/CircleShapeBorderButton.kt b/feature/fortune/src/main/java/org/sopt/official/feature/fortune/component/CircleShapeBorderButton.kt
new file mode 100644
index 000000000..d4deee8cd
--- /dev/null
+++ b/feature/fortune/src/main/java/org/sopt/official/feature/fortune/component/CircleShapeBorderButton.kt
@@ -0,0 +1,57 @@
+package org.sopt.official.feature.fortune.component
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.padding
+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.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.sopt.official.designsystem.SoptTheme
+
+@Composable
+fun CircleShapeBorderButton(
+    content: @Composable BoxScope.() -> Unit,
+    modifier: Modifier = Modifier,
+    borderWidth: Dp = 1.dp,
+    borderColor: Color = SoptTheme.colors.primary,
+    contentAlignment: Alignment = Alignment.Center,
+    onClick: () -> Unit = {},
+) {
+    Box(
+        modifier = modifier
+            .border(
+                width = borderWidth,
+                color = borderColor,
+                shape = CircleShape
+            )
+            .clickable(onClick = onClick),
+        contentAlignment = contentAlignment
+    ) {
+        content()
+    }
+}
+
+@Preview
+@Composable
+fun RoundedCornerButtonPreview() {
+    SoptTheme {
+        CircleShapeBorderButton(
+            content = {
+                Text(
+                    text = "홈으로 돌아가기",
+                    style = SoptTheme.typography.label18SB,
+                    color = SoptTheme.colors.onBackground,
+                    modifier = Modifier.padding(horizontal = 20.dp, vertical = 12.dp)
+                )
+            }
+        ) { }
+    }
+}
\ No newline at end of file