Merge pull request #51 from Project-Unifest/feature/dialog

[feat] [#50] 앱에서 사용하는 Dialog 구현
Project-Unifest · Apr 8, 2024 · 57b2e90 · 57b2e90
2 parents 531d9eb + ffbb2cb
commit 57b2e90
Show file tree

Hide file tree

Showing 4 changed files with 230 additions and 0 deletions.
diff --git a/core/designsystem/src/main/kotlin/com/unifest/android/core/designsystem/component/Dialog.kt b/core/designsystem/src/main/kotlin/com/unifest/android/core/designsystem/component/Dialog.kt
@@ -0,0 +1,199 @@
+package com.unifest.android.core.designsystem.component
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BasicAlertDialog
+import androidx.compose.material3.ExperimentalMaterial3Api
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+import com.unifest.android.core.designsystem.ComponentPreview
+import com.unifest.android.core.designsystem.R
+import com.unifest.android.core.designsystem.theme.BoothLocation
+import com.unifest.android.core.designsystem.theme.Title2
+import com.unifest.android.core.designsystem.theme.Title5
+import com.unifest.android.core.designsystem.theme.UnifestTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun UnifestDialog(
+ @StringRes titleResId: Int,
+ iconResId: Int?,
+ iconDescription: String?,
+ @StringRes descriptionResId: Int,
+ cancelTextResId: Int?,
+ confirmTextResId: Int,
+ onCancelClick: () -> Unit,
+ onConfirmClick: () -> Unit,
+ modifier: Modifier = Modifier,
+) {
+ BasicAlertDialog(
+ onDismissRequest = onCancelClick,
+ modifier = modifier,
+ ) {
+ Column(
+ modifier = Modifier
+ .fillMaxWidth()
+ .clip(RoundedCornerShape(10.dp))
+ .background(color = Color.White),
+ horizontalAlignment = Alignment.CenterHorizontally,
+ ) {
+ Spacer(modifier = Modifier.height(27.dp))
+ if (iconResId != null && iconDescription != null) {
+ Icon(
+ imageVector = ImageVector.vectorResource(iconResId),
+ contentDescription = iconDescription,
+ tint = Color.Unspecified,
+ )
+ }
+ Spacer(modifier = Modifier.height(18.dp))
+ Text(
+ text = stringResource(id = titleResId),
+ style = Title2,
+ color = Color.Black,
+ )
+ Spacer(modifier = Modifier.height(8.dp))
+ Text(
+ text = stringResource(id = descriptionResId),
+ color = Color(0xFF545454),
+ style = BoothLocation,
+ )
+ Spacer(modifier = Modifier.height(24.dp))
+ Row(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 15.dp),
+ ) {
+ UnifestButton(
+ onClick = onConfirmClick,
+ modifier = Modifier
+ .weight(1f)
+ .height(45.dp)
+ .then(
+ if (cancelTextResId != null) {
+ Modifier.padding(end = 4.dp)
+ } else {
+ Modifier
+ },
+ ),
+ containerColor = Color(0xFFF5687E),
+ contentColor = Color.White,
+ ) {
+ Text(
+ text = stringResource(id = confirmTextResId),
+ color = Color.White,
+ style = Title5,
+ )
+ }
+ if (cancelTextResId != null) {
+ UnifestButton(
+ onClick = onCancelClick,
+ modifier = Modifier
+ .weight(1f)
+ .height(45.dp)
+ .padding(start = 4.dp),
+ containerColor = Color(0xFFD2D2D2),
+ contentColor = Color.Black,
+ ) {
+ Text(
+ text = stringResource(id = cancelTextResId),
+ style = Title5,
+ )
+ }
+ }
+ }
+ Spacer(modifier = Modifier.height(16.dp))
+ }
+ }
+}
+
+@Composable
+fun ServerErrorDialog(
+ onRetryClick: () -> Unit,
+) {
+ UnifestDialog(
+ titleResId = R.string.server_error_title,
+ iconResId = R.drawable.ic_caution,
+ iconDescription = "Caution Icon",
+ descriptionResId = R.string.server_error_description,
+ confirmTextResId = R.string.retry,
+ cancelTextResId = null,
+ onCancelClick = {},
+ onConfirmClick = onRetryClick,
+ )
+}
+
+@Composable
+fun NetworkErrorDialog(
+ onRetryClick: () -> Unit,
+) {
+ UnifestDialog(
+ titleResId = R.string.network_error_title,
+ iconResId = R.drawable.ic_network,
+ iconDescription = "Network Error Icon",
+ descriptionResId = R.string.network_error_description,
+ confirmTextResId = R.string.retry,
+ cancelTextResId = null,
+ onCancelClick = {},
+ onConfirmClick = onRetryClick,
+ )
+}
+
+@Composable
+fun InterestedSchoolDeleteDialog(
+ onCancelClick: () -> Unit,
+ onConfirmClick: () -> Unit,
+) {
+ UnifestDialog(
+ titleResId = R.string.interested_school_delete_title,
+ iconResId = R.drawable.ic_caution,
+ iconDescription = "Caution Icon",
+ descriptionResId = R.string.interested_school_delete_description,
+ confirmTextResId = R.string.confirm,
+ cancelTextResId = R.string.cancel,
+ onCancelClick = onCancelClick,
+ onConfirmClick = onConfirmClick,
+ )
+}
+
+@ComponentPreview
+@Composable
+fun ServerErrorDialogPreview() {
+ UnifestTheme {
+ ServerErrorDialog(onRetryClick = {})
+ }
+}
+
+@ComponentPreview
+@Composable
+fun NetworkErrorDialogPreview() {
+ UnifestTheme {
+ NetworkErrorDialog(onRetryClick = {})
+ }
+}
+
+@ComponentPreview
+@Composable
+fun InterestedSchoolDeleteDialogPreview() {
+ UnifestTheme {
+ InterestedSchoolDeleteDialog(
+ onCancelClick = {},
+ onConfirmClick = {},
+ )
+ }
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_caution.xml b/core/designsystem/src/main/res/drawable/ic_caution.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http:https://schemas.android.com/apk/res/android"
+ android:width="22dp"
+ android:height="18dp"
+ android:viewportWidth="22"
+ android:viewportHeight="18">
+ <path
+ android:pathData="M0.869,16.499C0.483,17.166 0.964,18 1.734,18H20.266C21.036,18 21.517,17.166 21.131,16.499L11.865,0.495C11.48,-0.17 10.52,-0.17 10.135,0.495L0.869,16.499ZM12,14C12,14.552 11.552,15 11,15C10.448,15 10,14.552 10,14C10,13.448 10.448,13 11,13C11.552,13 12,13.448 12,14ZM12,10C12,10.552 11.552,11 11,11C10.448,11 10,10.552 10,10V8C10,7.448 10.448,7 11,7C11.552,7 12,7.448 12,8V10Z"
+ android:fillColor="#FF0000"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_network.xml b/core/designsystem/src/main/res/drawable/ic_network.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http:https://schemas.android.com/apk/res/android"
+ android:width="28dp"
+ android:height="20dp"
+ android:viewportWidth="28"
+ android:viewportHeight="20">
+ <path
+ android:strokeWidth="1"
+ android:pathData="M1.052,6.207C0.855,6.007 0.868,5.705 1.052,5.537C8.396,-1.179 19.617,-1.179 26.949,5.537C27.132,5.705 27.146,6.007 26.948,6.206L25.81,7.356C25.62,7.549 25.286,7.564 25.055,7.357C18.753,1.725 9.247,1.725 2.945,7.357C2.714,7.564 2.38,7.549 2.19,7.356L1.052,6.207ZM11.233,16.494C11.135,16.394 11.091,16.269 11.094,16.161C11.097,16.058 11.14,15.974 11.224,15.915C12.894,14.75 15.118,14.75 16.779,15.914C16.863,15.973 16.905,16.057 16.908,16.159C16.91,16.268 16.867,16.392 16.769,16.492L14.355,18.93C14.16,19.128 13.84,19.128 13.645,18.93L11.233,16.494ZM6.143,11.351C5.943,11.148 5.966,10.853 6.143,10.7C10.662,6.8 17.351,6.801 21.859,10.7C22.035,10.853 22.058,11.148 21.858,11.35L20.719,12.5C20.532,12.689 20.189,12.714 19.929,12.503C16.472,9.71 11.528,9.71 8.071,12.503C7.811,12.714 7.468,12.689 7.281,12.5L6.143,11.351Z"
+ android:fillColor="#000000"
+ android:strokeColor="#000000"/>
+</vector>
diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml
@@ -36,4 +36,15 @@
  <!-- Map -->
  <string name="map_search_text_field_hint"> 부스 / 주점을 검색해보세요.</string>
 
+ <!-- Dialog-->
+ <string name="server_error_title">서버 문제 발생</string>
+ <string name="server_error_description">개발자에 문의 바랍니다</string>
+ <string name="retry">다시 시도</string>
+ <string name="network_error_title">네트워크 문제</string>
+ <string name="network_error_description">와이파이와 데이터 접속을 확인해주세요</string>
+ <string name="interested_school_delete_title">관심 축제를 삭제합니다</string>
+ <string name="interested_school_delete_description">정말 삭제하실 건가요?</string>
+ <string name="confirm">확인</string>
+ <string name="cancel">취소</string>
+
 </resources>