diff --git a/designsystem/src/main/java/net/deali/designsystem/component/Alert.kt b/designsystem/src/main/java/net/deali/designsystem/component/Alert.kt new file mode 100644 index 0000000..6f3cf01 --- /dev/null +++ b/designsystem/src/main/java/net/deali/designsystem/component/Alert.kt @@ -0,0 +1,695 @@ +package net.deali.designsystem.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.window.Dialog +import androidx.compose.ui.window.DialogProperties +import net.deali.designsystem.theme.DealiColor +import net.deali.designsystem.theme.DealiFont +import net.deali.designsystem.theme.DealiShape + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param title 팝업 타이틀. + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + title: String, + contentText: String, + leftButtonText: String, + rightButtonText: String, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + Alert( + title = title, + contentText = AnnotatedString(contentText), + leftButtonText = leftButtonText, + rightButtonText = rightButtonText, + onLeftButtonClick = onLeftButtonClick, + onRightButtonClick = onRightButtonClick, + onDismissRequest = onDismissRequest, + properties = properties, + ) +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param title 팝업 타이틀. + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param content 팝업 커스텀 컨텐츠 슬롯. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + title: String, + contentText: String, + leftButtonText: String, + rightButtonText: String, + content: @Composable () -> Unit, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + Alert( + title = title, + contentText = AnnotatedString(contentText), + leftButtonText = leftButtonText, + rightButtonText = rightButtonText, + content = content, + onLeftButtonClick = onLeftButtonClick, + onRightButtonClick = onRightButtonClick, + onDismissRequest = onDismissRequest, + properties = properties + ) +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param title 팝업 타이틀. + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + title: String, + contentText: AnnotatedString, + leftButtonText: String, + rightButtonText: String, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + ComposeAlert( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .defaultMinSize(minHeight = 60.dp) + ) { + Spacer(modifier = Modifier.height(24.dp)) + DealiText( + text = title, + style = DealiFont.sh2sb18, + color = DealiColor.g100 + ) + Spacer(modifier = Modifier.height(10.dp)) + } + Spacer(modifier = Modifier.height(4.dp)) + DealiText( + text = contentText, + style = DealiFont.b1r15, + color = DealiColor.g70 + ) + Spacer(modifier = Modifier.height(24.dp)) + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(8.dp) + ) { + btnOutlineMedium01( + modifier = Modifier.weight(1f), + text = leftButtonText, + enabled = true, + onClick = onLeftButtonClick + ) + btnFilledMedium01( + modifier = Modifier.weight(1f), + text = rightButtonText, + enabled = true, + onClick = onRightButtonClick + ) + } + Spacer(modifier = Modifier.height(20.dp)) + } +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param title 팝업 타이틀. + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param content 팝업 커스텀 컨텐츠 슬롯. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + title: String, + contentText: AnnotatedString, + leftButtonText: String, + rightButtonText: String, + content: @Composable () -> Unit, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + ComposeAlert( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .defaultMinSize(minHeight = 60.dp) + ) { + Spacer(modifier = Modifier.height(24.dp)) + DealiText( + text = title, + style = DealiFont.sh2sb18, + color = DealiColor.g100 + ) + Spacer(modifier = Modifier.height(10.dp)) + } + Spacer(modifier = Modifier.height(4.dp)) + DealiText( + text = contentText, + style = DealiFont.b1r15, + color = DealiColor.g70 + ) + Spacer(modifier = Modifier.height(16.dp)) + content() + Spacer(modifier = Modifier.height(24.dp)) + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(8.dp) + ) { + btnOutlineMedium01( + modifier = Modifier.weight(1f), + text = leftButtonText, + enabled = true, + onClick = onLeftButtonClick + ) + btnFilledMedium01( + modifier = Modifier.weight(1f), + text = rightButtonText, + enabled = true, + onClick = onRightButtonClick + ) + } + Spacer(modifier = Modifier.height(20.dp)) + } +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + contentText: String, + leftButtonText: String, + rightButtonText: String, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + Alert( + contentText = AnnotatedString(contentText), + leftButtonText = leftButtonText, + rightButtonText = rightButtonText, + onLeftButtonClick = onLeftButtonClick, + onRightButtonClick = onRightButtonClick, + onDismissRequest = onDismissRequest, + properties = properties + ) +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param content 팝업 커스텀 컨텐츠 슬롯. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + contentText: String, + leftButtonText: String, + rightButtonText: String, + content: @Composable () -> Unit, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + Alert( + contentText = AnnotatedString(contentText), + leftButtonText = leftButtonText, + rightButtonText = rightButtonText, + content = content, + onLeftButtonClick = onLeftButtonClick, + onRightButtonClick = onRightButtonClick, + onDismissRequest = onDismissRequest, + properties = properties + ) +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param content 팝업 커스텀 컨텐츠 슬롯. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + contentText: AnnotatedString, + leftButtonText: String, + rightButtonText: String, + content: @Composable () -> Unit, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + ComposeAlert( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Spacer(modifier = Modifier.height(28.dp)) + DealiText( + text = contentText, + style = DealiFont.b1r15, + color = DealiColor.g70 + ) + Spacer(modifier = Modifier.height(16.dp)) + content() + Spacer(modifier = Modifier.height(24.dp)) + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(8.dp) + ) { + btnOutlineMedium01( + modifier = Modifier.weight(1f), + text = leftButtonText, + enabled = true, + onClick = onLeftButtonClick + ) + btnFilledMedium01( + modifier = Modifier.weight(1f), + text = rightButtonText, + enabled = true, + onClick = onRightButtonClick + ) + } + Spacer(modifier = Modifier.height(20.dp)) + } +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param contentText 팝업 문구. + * @param leftButtonText 팝업의 왼쪽에 위치한 버튼 문구. 일반적으로 왼쪽에 위치한 버튼은 팝업의 부차적인 동작(취소 등)을 위한 버튼입니다. + * @param rightButtonText 팝업의 오른쪽에 위치한 버튼 문구. 일반적으로 오른쪽 버튼은 팝업이 유도 하고자 하는 동작(확인 등)을 위한 버튼입니다. + * @param onLeftButtonClick 팝업의 왼쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onRightButtonClick 팝업의 오른쪽에 위치한 버튼 클릭 시 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun Alert( + contentText: AnnotatedString, + leftButtonText: String, + rightButtonText: String, + onLeftButtonClick: () -> Unit, + onRightButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + ComposeAlert( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Spacer(modifier = Modifier.height(28.dp)) + DealiText( + text = contentText, + style = DealiFont.b1r15, + color = DealiColor.g70 + ) + Spacer(modifier = Modifier.height(24.dp)) + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(8.dp) + ) { + btnOutlineMedium01( + modifier = Modifier.weight(1f), + text = leftButtonText, + enabled = true, + onClick = onLeftButtonClick + ) + btnFilledMedium01( + modifier = Modifier.weight(1f), + text = rightButtonText, + enabled = true, + onClick = onRightButtonClick + ) + } + Spacer(modifier = Modifier.height(20.dp)) + } +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param title 팝업 타이틀. + * @param contentText 팝업 문구. + * @param buttonText 팝업의 버튼 문구. + * @param onButtonClick 팝업의 버튼 클릭 이벤트 콜백. + * @param onDismissRequest 버튼 외의 방법으로 팝업을 닫으려 할 때의 이벤트 콜백. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun AlertSingleButton( + title: String, + contentText: String, + buttonText: String, + onButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + AlertSingleButton( + title = title, + contentText = AnnotatedString(contentText), + buttonText = buttonText, + onButtonClick = onButtonClick, + onDismissRequest = onDismissRequest, + properties = properties + ) +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param title 팝업 타이틀. + * @param contentText 팝업 문구. + * @param buttonText 팝업의 버튼 문구. + * @param onButtonClick 팝업의 버튼 클릭 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun AlertSingleButton( + title: String, + contentText: AnnotatedString, + buttonText: String, + onButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + ComposeAlert( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .defaultMinSize(minHeight = 60.dp) + ) { + Spacer(modifier = Modifier.height(24.dp)) + DealiText( + text = title, + style = DealiFont.sh2sb18, + color = DealiColor.g100 + ) + Spacer(modifier = Modifier.height(10.dp)) + } + Spacer(modifier = Modifier.height(4.dp)) + DealiText( + text = contentText, + style = DealiFont.b1r15, + color = DealiColor.g70 + ) + Spacer(modifier = Modifier.height(24.dp)) + btnFilledMedium01( + modifier = Modifier.fillMaxWidth(), + text = buttonText, + enabled = true, + onClick = onButtonClick + ) + Spacer(modifier = Modifier.height(20.dp)) + } +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param contentText 팝업 문구. + * @param buttonText 팝업의 버튼 문구. + * @param onButtonClick 팝업의 버튼 클릭 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun AlertSingleButton( + contentText: String, + buttonText: String, + onButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + AlertSingleButton( + contentText = AnnotatedString(contentText), + buttonText = buttonText, + onButtonClick = onButtonClick, + onDismissRequest = onDismissRequest, + properties = properties + ) +} + +/** + * 신상마켓 디자인 시스템 팝업 컴포넌트. + * + * @param contentText 팝업 문구. + * @param buttonText 팝업의 버튼 문구. + * @param onButtonClick 팝업의 버튼 클릭 이벤트 콜백. + * @param onDismissRequest 팝업 외부나 백 버튼 클릭으로 인해 팝업 닫기가 요청되었을 때 실행되는 콜백. + * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. + * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. + */ +@Composable +fun AlertSingleButton( + contentText: AnnotatedString, + buttonText: String, + onButtonClick: () -> Unit, + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), +) { + ComposeAlert( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Spacer(modifier = Modifier.height(28.dp)) + DealiText( + text = contentText, + style = DealiFont.b1r15, + color = DealiColor.g70 + ) + Spacer(modifier = Modifier.height(24.dp)) + btnFilledMedium01( + modifier = Modifier.fillMaxWidth(), + text = buttonText, + enabled = true, + onClick = onButtonClick + ) + Spacer(modifier = Modifier.height(20.dp)) + } +} + +@Composable +private fun ComposeAlert( + onDismissRequest: () -> Unit, + properties: DialogProperties = DialogProperties(), + content: @Composable ColumnScope.() -> Unit +) { + Dialog( + onDismissRequest = onDismissRequest, + properties = properties + ) { + Column( + modifier = Modifier + .clip(DealiShape.radius10) + .background(DealiColor.primary04) + .width(280.dp) + .padding(horizontal = 20.dp), + content = content + ) + } +} + +@Composable +@Preview(showBackground = true, backgroundColor = 0XFFFFFF) +private fun AlertPreview() { + Alert( + title = "title", + contentText = "댓글을 삭제하시겠습니까?", + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = {}, + onRightButtonClick = {}, + onDismissRequest = {} + ) +} + +@Composable +@Preview(showBackground = true, backgroundColor = 0XFFFFFF) +private fun AlertContentPreview() { + var checked by remember { mutableStateOf(false) } + + Alert( + title = "title", + contentText = "해당 주문을 취소하시겠어요?", + content = { + CheckBox( + checked = checked, + text = "주문 취소 후 장바구니 담기", + onCheck = { + checked = !checked + } + ) + }, + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = {}, + onRightButtonClick = {}, + onDismissRequest = {} + ) +} + +@Composable +@Preview(showBackground = true, backgroundColor = 0XFFFFFF) +private fun AlertWithoutTitlePreview() { + Alert( + contentText = "댓글을 삭제하시겠습니까?", + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = {}, + onRightButtonClick = {}, + onDismissRequest = {} + ) +} + +@Composable +@Preview(showBackground = true, backgroundColor = 0XFFFFFF) +private fun AlertContentWithoutTitlePreview() { + var checked by remember { mutableStateOf(false) } + + Alert( + contentText = "해당 주문을 취소하시겠어요?", + content = { + CheckBox( + checked = checked, + text = "주문 취소 후 장바구니 담기", + onCheck = { + checked = !checked + } + ) + }, + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = {}, + onRightButtonClick = {}, + onDismissRequest = {} + ) +} + +@Composable +@Preview(showBackground = true, backgroundColor = 0XFFFFFF) +private fun AlertSingleButtonPreview() { + AlertSingleButton( + title = "title", + contentText = "댓글을 삭제하시겠습니까?", + buttonText = "확인", + onButtonClick = {}, + onDismissRequest = {} + ) +} + +@Composable +@Preview(showBackground = true, backgroundColor = 0XFFFFFF) +private fun AlertSingleButtonWithoutTitlePreview() { + AlertSingleButton( + contentText = "댓글을 삭제하시겠습니까?", + buttonText = "확인", + onButtonClick = {}, + onDismissRequest = {} + ) +} diff --git a/designsystem/src/main/java/net/deali/designsystem/component/Popup.kt b/designsystem/src/main/java/net/deali/designsystem/component/Popup.kt index 24165d5..716382c 100644 --- a/designsystem/src/main/java/net/deali/designsystem/component/Popup.kt +++ b/designsystem/src/main/java/net/deali/designsystem/component/Popup.kt @@ -36,6 +36,20 @@ import net.deali.designsystem.theme.DealiShape * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "Alert로 변경해 주세요.", + replaceWith = ReplaceWith("Alert(\n" + + "title = title,\n" + + "contentText = content,\n" + + "leftButtonText = leftButtonText,\n" + + "rightButtonText = rightButtonText,\n" + + "onLeftButtonClick = onLeftButtonClick,\n" + + "onRightButtonClick = onRightButtonClick,\n" + + "onDismissRequest = onDismissRequest,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun Popup( title: String, @@ -61,9 +75,9 @@ fun Popup( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("Popup(\n" + + replaceWith = ReplaceWith("Alert(\n" + "title = title,\n" + - "content = content,\n" + + "contentText = content,\n" + "leftButtonText = leftButtonText,\n" + "rightButtonText = rightButtonText,\n" + "onLeftButtonClick = onLeftButtonClick,\n" + @@ -110,6 +124,20 @@ fun Popup( * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "Alert로 변경해 주세요.", + replaceWith = ReplaceWith("Alert(\n" + + "title = title,\n" + + "contentText = content,\n" + + "leftButtonText = leftButtonText,\n" + + "rightButtonText = rightButtonText,\n" + + "onLeftButtonClick = onLeftButtonClick,\n" + + "onRightButtonClick = onRightButtonClick,\n" + + "onDismissRequest = onDismissRequest,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun Popup( title: String, @@ -168,9 +196,9 @@ fun Popup( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("Popup(\n" + + replaceWith = ReplaceWith("Alert(\n" + "title = title,\n" + - "content = content,\n" + + "contentText = content,\n" + "leftButtonText = leftButtonText,\n" + "rightButtonText = rightButtonText,\n" + "onLeftButtonClick = onLeftButtonClick,\n" + @@ -216,6 +244,19 @@ fun Popup( * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "Alert로 변경해 주세요.", + replaceWith = ReplaceWith("Alert(\n" + + "contentText = content,\n" + + "leftButtonText = leftButtonText,\n" + + "rightButtonText = rightButtonText,\n" + + "onLeftButtonClick = onLeftButtonClick,\n" + + "onRightButtonClick = onRightButtonClick,\n" + + "onDismissRequest = onDismissRequest,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun Popup( content: String, @@ -239,8 +280,8 @@ fun Popup( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("Popup(\n" + - "content = content,\n" + + replaceWith = ReplaceWith("Alert(\n" + + "contentText = content,\n" + "leftButtonText = leftButtonText,\n" + "rightButtonText = rightButtonText,\n" + "onLeftButtonClick = onLeftButtonClick,\n" + @@ -284,6 +325,19 @@ fun Popup( * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "Alert로 변경해 주세요.", + replaceWith = ReplaceWith("Alert(\n" + + "contentText = content,\n" + + "leftButtonText = leftButtonText,\n" + + "rightButtonText = rightButtonText,\n" + + "onLeftButtonClick = onLeftButtonClick,\n" + + "onRightButtonClick = onRightButtonClick,\n" + + "onDismissRequest = onDismissRequest,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun Popup( content: AnnotatedString, @@ -328,8 +382,8 @@ fun Popup( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("Popup(\n" + - "content = content,\n" + + replaceWith = ReplaceWith("Alert(\n" + + "contentText = content,\n" + "leftButtonText = leftButtonText,\n" + "rightButtonText = rightButtonText,\n" + "onLeftButtonClick = onLeftButtonClick,\n" + @@ -371,6 +425,18 @@ fun Popup( * @param onDismissRequest 버튼 외의 방법으로 팝업을 닫으려 할 때의 이벤트 콜백. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "AlertSingleButton으로 변경해 주세요.", + replaceWith = ReplaceWith("AlertSingleButton(\n" + + "title = title,\n" + + "contentText = content,\n" + + "buttonText = buttonText,\n" + + "onButtonClick = onButtonClick,\n" + + "onDismissRequest = onDismissRequest,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun PopupSingleButton( title: String, @@ -392,9 +458,9 @@ fun PopupSingleButton( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("PopupSingleButton(\n" + + replaceWith = ReplaceWith("AlertSingleButton(\n" + "title = title,\n" + - "content = content,\n" + + "contentText = content,\n" + "buttonText = buttonText,\n" + "onButtonClick = onButtonClick,\n" + "onDismissRequest = onDismiss,\n" + @@ -433,6 +499,18 @@ fun PopupSingleButton( * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "AlertSingleButton으로 변경해 주세요.", + replaceWith = ReplaceWith("AlertSingleButton(\n" + + "title = title,\n" + + "contentText = content,\n" + + "buttonText = buttonText,\n" + + "onButtonClick = onButtonClick,\n" + + "onDismissRequest = onDismiss,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun PopupSingleButton( title: String, @@ -478,9 +556,9 @@ fun PopupSingleButton( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("PopupSingleButton(\n" + + replaceWith = ReplaceWith("AlertSingleButton(\n" + "title = title,\n" + - "content = content,\n" + + "contentText = content,\n" + "buttonText = buttonText,\n" + "onButtonClick = onButtonClick,\n" + "onDismissRequest = onDismiss,\n" + @@ -518,6 +596,17 @@ fun PopupSingleButton( * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "AlertSingleButton으로 변경해 주세요.", + replaceWith = ReplaceWith("AlertSingleButton(\n" + + "contentText = content,\n" + + "buttonText = buttonText,\n" + + "onButtonClick = onButtonClick,\n" + + "onDismissRequest = onDismissRequest,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun PopupSingleButton( content: String, @@ -537,8 +626,8 @@ fun PopupSingleButton( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("PopupSingleButton(\n" + - "content = content,\n" + + replaceWith = ReplaceWith("AlertSingleButton(\n" + + "contentText = content,\n" + "buttonText = buttonText,\n" + "onButtonClick = onButtonClick,\n" + "onDismissRequest = onDismiss,\n" + @@ -574,6 +663,17 @@ fun PopupSingleButton( * [DialogProperties]에서 닫기가 비활성화 된 경우 호출하지 않습니다. * @param properties 팝업 다이얼로그의 동작을 정의하는 속성 객체. */ +@Deprecated( + message = "AlertSingleButton으로 변경해 주세요.", + replaceWith = ReplaceWith("AlertSingleButton(\n" + + "contentText = content,\n" + + "buttonText = buttonText,\n" + + "onButtonClick = onButtonClick,\n" + + "onDismissRequest = onDismiss,\n" + + "properties = properties\n" + + ")" + ), +) @Composable fun PopupSingleButton( content: AnnotatedString, @@ -605,8 +705,8 @@ fun PopupSingleButton( @Deprecated( message = "onDismiss 콜백을 onDismissRequest로 변경해 주세요.", - replaceWith = ReplaceWith("PopupSingleButton(\n" + - "content = content,\n" + + replaceWith = ReplaceWith("AlertSingleButton(\n" + + "contentText = content,\n" + "buttonText = buttonText,\n" + "onButtonClick = onButtonClick,\n" + "onDismissRequest = onDismiss,\n" + diff --git a/sample/src/main/java/net/deali/designsystem/sample/data/model/Screen.kt b/sample/src/main/java/net/deali/designsystem/sample/data/model/Screen.kt index 9babcd3..d6e709c 100644 --- a/sample/src/main/java/net/deali/designsystem/sample/data/model/Screen.kt +++ b/sample/src/main/java/net/deali/designsystem/sample/data/model/Screen.kt @@ -46,7 +46,7 @@ sealed class Screen( object TextInputWithButton : Screen("textInputWithButton") object TextAreaButton : Screen("textAreaButton") object SearchInputWithTag : Screen("searchInputWithTag") - object Popup : Screen("popup") + object Alert : Screen("alert") object Slider : Screen("slider") /** Undefined */ diff --git a/sample/src/main/java/net/deali/designsystem/sample/ui/Nav.kt b/sample/src/main/java/net/deali/designsystem/sample/ui/Nav.kt index d8c238c..fceaa11 100644 --- a/sample/src/main/java/net/deali/designsystem/sample/ui/Nav.kt +++ b/sample/src/main/java/net/deali/designsystem/sample/ui/Nav.kt @@ -11,9 +11,10 @@ import androidx.navigation.NavGraphBuilder import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController -import net.deali.designsystem.sample.data.model.Screen import net.deali.designsystem.sample.data.datastore.DataStoreUtil +import net.deali.designsystem.sample.data.model.Screen import net.deali.designsystem.sample.ui.main.MainScreen +import net.deali.designsystem.sample.ui.screen.AlertScreen import net.deali.designsystem.sample.ui.screen.BottomSheetScreen import net.deali.designsystem.sample.ui.screen.ButtonsScreen import net.deali.designsystem.sample.ui.screen.CheckBoxScreen @@ -27,7 +28,6 @@ import net.deali.designsystem.sample.ui.screen.DropdownScreen import net.deali.designsystem.sample.ui.screen.IconsScreen import net.deali.designsystem.sample.ui.screen.IndentationsScreen import net.deali.designsystem.sample.ui.screen.IndicatorScreen -import net.deali.designsystem.sample.ui.screen.PopupScreen import net.deali.designsystem.sample.ui.screen.RadioButtonScreen import net.deali.designsystem.sample.ui.screen.RatingScreen import net.deali.designsystem.sample.ui.screen.SearchInputScreen @@ -253,8 +253,8 @@ private fun NavGraphBuilder.moleculesGraph( composable(Screen.SearchInputWithTag.route) { SearchInputWithTagScreen(onBackPress = navController::popBackStack) } - composable(Screen.Popup.route) { - PopupScreen(onBackPress = navController::popBackStack) + composable(Screen.Alert.route) { + AlertScreen(onBackPress = navController::popBackStack) } composable(Screen.Slider.route) { SliderScreen(onBackPress = navController::popBackStack) diff --git a/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainActivity.kt b/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainActivity.kt index 9f09092..69646fb 100644 --- a/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainActivity.kt +++ b/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainActivity.kt @@ -76,7 +76,7 @@ class MainActivity : ComponentActivity() { Screen.TextInputWithButton, Screen.TextAreaButton, Screen.SearchInputWithTag, - Screen.Popup, + Screen.Alert, Screen.Slider, ) diff --git a/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainScreen.kt b/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainScreen.kt index 1d7309f..182ab0b 100644 --- a/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainScreen.kt +++ b/sample/src/main/java/net/deali/designsystem/sample/ui/main/MainScreen.kt @@ -184,7 +184,7 @@ private fun MainScreenPreview() { Screen.TextInputWithButton, Screen.TextAreaButton, Screen.SearchInputWithTag, - Screen.Popup, + Screen.Alert, Screen.Slider, ), others = listOf( diff --git a/sample/src/main/java/net/deali/designsystem/sample/ui/screen/AlertScreen.kt b/sample/src/main/java/net/deali/designsystem/sample/ui/screen/AlertScreen.kt new file mode 100644 index 0000000..f9aabb6 --- /dev/null +++ b/sample/src/main/java/net/deali/designsystem/sample/ui/screen/AlertScreen.kt @@ -0,0 +1,182 @@ +package net.deali.designsystem.sample.ui.screen + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import net.deali.designsystem.component.ActionBar +import net.deali.designsystem.component.Alert +import net.deali.designsystem.component.AlertSingleButton +import net.deali.designsystem.component.CheckBox +import net.deali.designsystem.component.btnFilledSmall01 +import net.deali.designsystem.sample.ui.NavigationContainer +import net.deali.designsystem.theme.DealiColor + +@Composable +fun AlertScreen( + onBackPress: () -> Unit +) { + NavigationContainer( + navigationBar = { + ActionBar( + title = "Alert", + onBack = onBackPress, + ) + } + ) { + var alertState1 by remember { mutableStateOf(false) } + var alertState2 by remember { mutableStateOf(false) } + var alertState3 by remember { mutableStateOf(false) } + var alertState4 by remember { mutableStateOf(false) } + var alertState5 by remember { mutableStateOf(false) } + var alertState6 by remember { mutableStateOf(false) } + + Column( + modifier = Modifier + .fillMaxSize() + .background(color = DealiColor.primary04) + .padding(10.dp), + verticalArrangement = Arrangement.spacedBy(10.dp) + ) { + btnFilledSmall01( + text = "Title, ContentText, 2 Buttons", + enabled = true, + onClick = { alertState1 = true }, + ) + + btnFilledSmall01( + text = "Title, ContentText, Content, 2 Buttons", + enabled = true, + onClick = { alertState2 = true }, + ) + + btnFilledSmall01( + text = "ContentText, 2 Buttons", + enabled = true, + onClick = { alertState3 = true }, + ) + + btnFilledSmall01( + text = "ContentText, Content, 2 Buttons", + enabled = true, + onClick = { alertState4 = true }, + ) + + btnFilledSmall01( + text = "Title, ContentText, 1 Button", + enabled = true, + onClick = { alertState5 = true }, + ) + + btnFilledSmall01( + text = "ContentText, 1 Button", + enabled = true, + onClick = { alertState6 = true }, + ) + } + + if (alertState1) { + Alert( + title = "title", + contentText = "댓글을 삭제하시겠습니까?", + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = { alertState1 = false }, + onRightButtonClick = { alertState1 = false }, + onDismissRequest = { alertState1 = false } + ) + } + + if (alertState2) { + var checked by remember { mutableStateOf(false) } + + Alert( + title = "title", + contentText = "해당 주문을 취소하시겠어요?", + content = { + CheckBox( + checked = checked, + text = "주문 취소 후 장바구니 담기", + onCheck = { + checked = !checked + } + ) + }, + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = { alertState2 = false }, + onRightButtonClick = { alertState2 = false }, + onDismissRequest = { alertState2 = false }, + ) + } + + if (alertState3) { + Alert( + contentText = "댓글을 삭제하시겠습니까?", + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = { alertState3 = false }, + onRightButtonClick = { alertState3 = false }, + onDismissRequest = { alertState3 = false } + ) + } + + if (alertState4) { + var checked by remember { mutableStateOf(false) } + + Alert( + contentText = "해당 주문을 취소하시겠어요?", + content = { + CheckBox( + checked = checked, + text = "주문 취소 후 장바구니 담기", + onCheck = { + checked = !checked + } + ) + }, + leftButtonText = "취소", + rightButtonText = "확인", + onLeftButtonClick = { alertState4 = false }, + onRightButtonClick = { alertState4 = false }, + onDismissRequest = { alertState4 = false }, + ) + } + + if (alertState5) { + AlertSingleButton( + title = "title", + contentText = "댓글을 삭제하시겠습니까?", + buttonText = "확인", + onButtonClick = { alertState5 = false }, + onDismissRequest = { alertState5 = false } + ) + } + + if (alertState6) { + AlertSingleButton( + contentText = "댓글을 삭제하시겠습니까?", + buttonText = "확인", + onButtonClick = { alertState6 = false }, + onDismissRequest = { alertState6 = false } + ) + } + } +} + +@Composable +@Preview +private fun AlertScreenPreview() { + AlertScreen( + onBackPress = {} + ) +} diff --git a/sample/src/main/java/net/deali/designsystem/sample/ui/screen/PopupScreen.kt b/sample/src/main/java/net/deali/designsystem/sample/ui/screen/PopupScreen.kt deleted file mode 100644 index d094b2c..0000000 --- a/sample/src/main/java/net/deali/designsystem/sample/ui/screen/PopupScreen.kt +++ /dev/null @@ -1,122 +0,0 @@ -package net.deali.designsystem.sample.ui.screen - -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.padding -import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue -import androidx.compose.ui.Modifier -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import net.deali.designsystem.component.ActionBar -import net.deali.designsystem.component.Popup -import net.deali.designsystem.component.PopupSingleButton -import net.deali.designsystem.component.btnFilledSmall01 -import net.deali.designsystem.sample.ui.NavigationContainer -import net.deali.designsystem.theme.DealiColor - -@Composable -fun PopupScreen( - onBackPress: () -> Unit -) { - NavigationContainer( - navigationBar = { - ActionBar( - title = "Popup", - onBack = onBackPress, - ) - } - ) { - var popupState1 by remember { mutableStateOf(false) } - var popupState2 by remember { mutableStateOf(false) } - var popupState3 by remember { mutableStateOf(false) } - var popupState4 by remember { mutableStateOf(false) } - - Column( - modifier = Modifier - .fillMaxSize() - .background(color = DealiColor.primary04) - .padding(10.dp), - verticalArrangement = Arrangement.spacedBy(10.dp) - ) { - btnFilledSmall01( - text = "Title, Content, 2 Buttons", - enabled = true, - onClick = { popupState1 = true }, - ) - - btnFilledSmall01( - text = "Content, 2 Buttons", - enabled = true, - onClick = { popupState2 = true }, - ) - - btnFilledSmall01( - text = "Title, Content, 1 Button", - enabled = true, - onClick = { popupState3 = true }, - ) - - btnFilledSmall01( - text = "Content, 1 Button", - enabled = true, - onClick = { popupState4 = true }, - ) - } - - if (popupState1) { - Popup( - title = "title", - content = "댓글을 삭제하시겠습니까?", - leftButtonText = "취소", - rightButtonText = "확인", - onLeftButtonClick = { popupState1 = false }, - onRightButtonClick = { popupState1 = false }, - onDismissRequest = { popupState1 = false } - ) - } - - if (popupState2) { - Popup( - content = "댓글을 삭제하시겠습니까?", - leftButtonText = "취소", - rightButtonText = "확인", - onLeftButtonClick = { popupState2 = false }, - onRightButtonClick = { popupState2 = false }, - onDismissRequest = { popupState2 = false }, - ) - } - - if (popupState3) { - PopupSingleButton( - title = "title", - content = "댓글을 삭제하시겠습니까?", - buttonText = "확인", - onButtonClick = { popupState3 = false }, - onDismissRequest = { popupState3 = false } - ) - } - - if (popupState4) { - PopupSingleButton( - content = "댓글을 삭제하시겠습니까?", - buttonText = "확인", - onButtonClick = { popupState4 = false }, - onDismissRequest = { popupState4 = false } - ) - } - } -} - -@Composable -@Preview -private fun PopupScreenPreview() { - PopupScreen( - onBackPress = {} - ) -}