[Setting] ConfirmButton 만들기 (#15)

dnd-side-project · Jan 25, 2024 · d18d9ee · d18d9ee
1 parent 57bfaff
commit d18d9ee
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 35 deletions.
diff --git a/...tion/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/ConfirmButton.kt b/...tion/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/ConfirmButton.kt
@@ -0,0 +1,102 @@
+package ac.dnd.bookkeeping.android.presentation.common.view
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun ConfirmButton(
+    text: String,
+    isMain: Boolean,
+    modifier: Modifier = Modifier,
+    isLoading: Boolean = false,
+    isEnabled: Boolean = true,
+    onClick: () -> Unit = {}
+) {
+    Button(
+        modifier = modifier,
+        shape = RoundedCornerShape(10.dp),
+        contentPadding = PaddingValues(top = 10.dp, start = 10.dp, end = 10.dp, bottom = 10.dp),
+        colors = ButtonDefaults.textButtonColors(
+            backgroundColor = if (isMain) Color.Cyan else Color.LightGray
+        ),
+        elevation = ButtonDefaults.elevation(0.dp, 0.dp, 0.dp, 0.dp, 0.dp),
+        onClick = onClick,
+        enabled = isEnabled && !isLoading
+    ) {
+        if (isLoading) {
+            CircularProgressIndicator()
+        } else {
+            Text(
+                text = text,
+                fontSize = 16.sp,
+                color = Color.Black,
+                textAlign = TextAlign.Center,
+                fontWeight = FontWeight.Medium
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun ConfirmButtonPreview1() {
+    ConfirmButton(
+        text = "확인",
+        isMain = true,
+        modifier = Modifier
+            .padding(20.dp)
+            .fillMaxWidth()
+    )
+}
+
+@Preview
+@Composable
+fun ConfirmButtonPreview2() {
+    ConfirmButton(
+        text = "취소",
+        isMain = false,
+        modifier = Modifier
+            .padding(20.dp)
+            .fillMaxWidth()
+    )
+}
+
+@Preview
+@Composable
+fun ConfirmButtonPreview3() {
+    ConfirmButton(
+        text = "다음",
+        isMain = true,
+        modifier = Modifier
+            .padding(20.dp)
+            .fillMaxWidth(),
+        isEnabled = false
+    )
+}
+
+@Preview
+@Composable
+fun ConfirmButtonPreview4() {
+    ConfirmButton(
+        text = "로딩",
+        isMain = true,
+        modifier = Modifier
+            .padding(20.dp)
+            .fillMaxWidth(),
+        isLoading = true
+    )
+}
diff --git a/...ation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt b/...ation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/DialogScreen.kt
@@ -1,7 +1,6 @@
 package ac.dnd.bookkeeping.android.presentation.common.view
 
 import ac.dnd.bookkeeping.android.presentation.R
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -10,10 +9,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Card
 import androidx.compose.material.Text
-import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -54,10 +51,8 @@ fun DialogScreen(
             }
         ) {
             Card(
-                modifier = Modifier.background(
-                    color = Color.White,
-                    shape = RoundedCornerShape(10.dp)
-                ),
+                backgroundColor = Color.White,
+                shape = RoundedCornerShape(10.dp)
             ) {
                 Column(
                     modifier = Modifier
@@ -67,7 +62,7 @@ fun DialogScreen(
                 ) {
                     Text(
                         text = title,
-                        fontSize = 16.sp,
+                        fontSize = 24.sp,
                         color = Color.Black
                     )
 
@@ -76,50 +71,38 @@ fun DialogScreen(
 
                         Text(
                             text = message,
-                            fontSize = 12.sp,
-                            color = Color.Black
+                            fontSize = 16.sp,
+                            color = Color.Black,
+                            textAlign = TextAlign.Center
                         )
                     }
 
                     Spacer(modifier = Modifier.height(20.dp))
 
                     Row(modifier = Modifier.wrapContentSize()) {
                         if (onCancel != null) {
-                            TextButton(
-                                modifier = Modifier
-                                    .weight(1f),
-                                shape = RoundedCornerShape(4.dp),
-                                colors = ButtonDefaults.textButtonColors(
-                                    backgroundColor = Color.Gray
-                                ),
+                            ConfirmButton(
+                                text = cancelMessage,
+                                isMain = false,
+                                modifier = Modifier.weight(1f),
                                 onClick = {
                                     onCancel()
                                     onDismissRequest()
-                                },
-                            ) {
-                                Text(text = cancelMessage)
-                            }
+                                }
+                            )
 
                             Spacer(modifier = Modifier.width(10.dp))
                         }
 
-                        TextButton(
-                            modifier = Modifier
-                                .weight(1f),
-                            shape = RoundedCornerShape(4.dp),
-                            colors = ButtonDefaults.textButtonColors(
-                                backgroundColor = Color.Gray
-                            ),
+                        ConfirmButton(
+                            text = confirmMessage,
+                            isMain = true,
+                            modifier = Modifier.weight(1f),
                             onClick = {
                                 onConfirm()
                                 onDismissRequest()
                             }
-                        ) {
-                            Text(
-                                text = confirmMessage,
-                                textAlign = TextAlign.Center
-                            )
-                        }
+                        )
                     }
                 }
             }
@@ -135,7 +118,7 @@ fun DialogScreenPreview1() {
     DialogScreen(
         isShowing = isShowing,
         title = "제목",
-        message = "내용",
+        message = "내용\n여러줄 넘어가면 이렇게 됨.\n가가가가가가가가가가가가가가가가가가가가가가가",
         onCancel = {},
         onDismissRequest = {
             isShowing = false

diff --git a/...main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt b/...main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/setting/SettingScreen.kt
@@ -87,6 +87,8 @@ fun SettingScreen(
     DialogScreen(
         isShowing = isDialogShowing,
         title = stringResource(R.string.setting_dialog_title),
+        message = stringResource(R.string.setting_dialog_message),
+        onCancel = {},
         onDismissRequest = { isDialogShowing = false }
     )
 }

diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml
@@ -8,5 +8,6 @@
     <string name="error_dialog_title">앗, 에러가 발생했어요!</string>
 
     <string name="setting_dialog_title">테스트</string>
+    <string name="setting_dialog_message">테스트내용\n앗, 에러가 발생했어요!\n이렇게 됩니다.</string>
 
 </resources>