TiTi Side Project | TdsDialog 컴포넌트 구현하기

TdsDialogInfo

일반적으로 Dialog에는 Alert Dialog와 Confirm Dialog가 있습니다. Alert Dialog는 사용자에게 특정 메시지를 전달해주는 경우, Confirm Dialog는 사용자에게 특정 메시지 전달과 동시에 해당 메시지에 응답할 것인지 여부를 확인하는 Dialog로 볼 수 있습니다.

sealed interface TdsDialogInfo {

    val title: String
    val message: String
    val cancelable: Boolean
    val onDismiss: (() -> Unit)?

    data class Confirm(
        override val title: String,
        override val message: String,
        override val cancelable: Boolean = false,
        override val onDismiss: (() -> Unit)? = null,
        val positiveText: String,
        val onPositive: () -> Unit,
        val negativeText: String,
        val onNegative: (() -> Unit)? = null
    ) : TdsDialogInfo

    data class Alert(
        override val title: String,
        override val message: String,
        override val cancelable: Boolean,
        override val onDismiss: (() -> Unit)?,
        val confirmText: String,
        val onConfirm: (() -> Unit)?
    ) : TdsDialogInfo

}

sealed interface를 사용하여 Dialog 유형을 Alert와 Confirm으로 한정지었습니다.

TdsDialog

Compose의 Dialog API를 이용하여 title, message를 표시할 뿐만 아니라 content가 드갈 수 있으므로 bodyContent를 중앙에 표시하고 TdsDialogInfo 유형에 따라 버튼을 그립니다.

@Composable
fun TdsDialog(
    tdsDialogInfo: TdsDialogInfo,
    onShowDialog: (Boolean) -> Unit,
    bodyContent: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = {
            tdsDialogInfo.onDismiss?.invoke()
            onShowDialog(false)
        },
        properties = DialogProperties(
            dismissOnBackPress = tdsDialogInfo.cancelable,
            dismissOnClickOutside = tdsDialogInfo.cancelable
        )
    ) {
        Surface(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
            shape = RoundedCornerShape(8.dp)
        ) {
            Column(
                modifier = Modifier.background(color = TdsColor.backgroundColor.getColor()),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Spacer(modifier = Modifier.height(24.dp))

                TdsText(
                    text = tdsDialogInfo.title,
                    textStyle = TdsTextStyle.extraBoldTextStyle,
                    fontSize = 20.sp,
                    color = TdsColor.labelColor
                )

                Spacer(modifier = Modifier.height(4.dp))

                TdsText(
                    text = tdsDialogInfo.message,
                    textStyle = TdsTextStyle.normalTextStyle,
                    fontSize = 16.sp,
                    color = TdsColor.labelColor
                )

                Spacer(modifier = Modifier.height(12.dp))

                bodyContent()

                Spacer(modifier = Modifier.height(12.dp))

                TdsDivider()

                when (tdsDialogInfo) {
                    is TdsDialogInfo.Confirm -> {
                        TdsConfirmDialogButtons(
                            tdsDialogInfo = tdsDialogInfo,
                            onShowDialog = onShowDialog
                        )
                    }

                    is TdsDialogInfo.Alert -> {
                        TdsAlertDialogButton(
                            tdsDialogInfo = tdsDialogInfo,
                            onShowDialog = onShowDialog
                        )
                    }
                }
            }
        }
    }
}

TdsDialogInfo 클래스를 사용하여 원하는 유형의 다이얼로그를 정의하고, TdsDialog Composable 함수를 활용하여 다이얼로그를 표시하고 상호작용할 수 있습니다.