From fa72fdeb0e6ad94df48173c9e36ad7e651d3a1e8 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Wed, 11 Dec 2024 15:09:41 +0900 Subject: [PATCH 01/14] add: dialog --- .../com/yourssu/handy/compose/Dialog.kt | 142 ++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt new file mode 100644 index 0000000..bdc2ac2 --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -0,0 +1,142 @@ +package com.yourssu.handy.compose + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +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 com.yourssu.handy.compose.button.BoxButton +import com.yourssu.handy.compose.button.BoxButtonSize +import com.yourssu.handy.compose.foundation.HandyTypography +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Close + + +/** + * BaseButton : ripple 효과가 없는 Composable 함수 입니다. + * + * BoxButton, TextButton의 베이스가 됩니다. + * + * @param title Dialog 제목 text + * @param description Dialog 안의 설명 text (optional) + * @param subDescription Dialog 안의 추가 설명 text (optional) + * @param positiveText 확인 버튼 text + * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수 + **/ +@Composable +fun OneButtonDialog( + title: String, + positiveText: String, + onPositiveClick: () -> Unit, + onDismiss: () -> Unit, + modifier: Modifier = Modifier, + description: String = "", + subDescription: String = "", +) { + Box( + modifier = modifier + .background(color = HandyTheme.colors.bgBasicDefault) +// .width(196.dp) + .padding(20.dp) + ) { + Column { + Row { + Text( + text = title, + style = HandyTypography.T1Sb20, + color = HandyTheme.colors.textBasicPrimary + ) + + Spacer(modifier = modifier.weight(1f)) + + Icon(HandyIcons.Filled.Close, modifier.clickable { onDismiss }) + + } + Spacer(modifier = modifier.height(16.dp)) + + Text(text = description) + + Spacer(modifier = modifier.height(20.dp)) + + if (subDescription.isNotEmpty()) { + Text(text = subDescription) + Spacer(modifier = modifier.height(20.dp)) + } + + BoxButton( + text = positiveText, onClick = onPositiveClick, + sizeType = BoxButtonSize.XL, + ) + } + + } + +} + + +/** + * BaseButton : ripple 효과가 없는 Composable 함수 입니다. + * + * BoxButton, TextButton의 베이스가 됩니다. + * + * @param title Dialog 제목 text + * @param description Dialog 안의 설명 text + * @param positiveText 확인 버튼 text + * @param negativeText 취소 버튼 text + * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수 + * @param onNegativeClick 취소 버튼 클릭 시 실행되는 함수 + **/ +@Composable +fun TwoButtonDialog( + title: String, + description: String, + positiveText: String, + negativeText: String, + onPositiveClick: () -> Unit, + onNegativeClick: () -> Unit, + modifier: Modifier = Modifier, +) { + +} + +@Preview +@Composable +private fun DialogPreview() { + + var showDialog by remember { mutableStateOf(true) } + + HandyTheme { + Column { + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false } // 다이얼로그 닫기 + ) + + Spacer(modifier = Modifier.height(16.dp)) + + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + subDescription = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false } // 다이얼로그 닫기 + ) + } + + } +} \ No newline at end of file From 8d19973cbb3ba8ca40e67a42c01fbe8a6533d40d Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Wed, 11 Dec 2024 17:11:01 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20OneButtonDialog=20content,=20boxb?= =?UTF-8?q?utton=20fillMaxWidth=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/compose/Dialog.kt | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index bdc2ac2..c2a384a 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -6,13 +6,16 @@ import androidx.compose.foundation.layout.Box 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.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.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -24,15 +27,14 @@ import com.yourssu.handy.compose.icons.filled.Close /** - * BaseButton : ripple 효과가 없는 Composable 함수 입니다. - * - * BoxButton, TextButton의 베이스가 됩니다. + * OneButtonDialog : 선택 버튼이 하나 있는 Dialog 입니다. * * @param title Dialog 제목 text * @param description Dialog 안의 설명 text (optional) - * @param subDescription Dialog 안의 추가 설명 text (optional) + * @param content Dialog 안의 content. 주로 이미지가 들어감(optional) * @param positiveText 확인 버튼 text * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수 + * @param onDismiss 닫기(X) 버튼 클릭시 실행되는 함수 **/ @Composable fun OneButtonDialog( @@ -42,16 +44,17 @@ fun OneButtonDialog( onDismiss: () -> Unit, modifier: Modifier = Modifier, description: String = "", - subDescription: String = "", + content: @Composable (() -> Unit)? = null, ) { Box( modifier = modifier - .background(color = HandyTheme.colors.bgBasicDefault) -// .width(196.dp) - .padding(20.dp) + .padding(16.dp) + .background(color = HandyTheme.colors.bgBasicDefault, shape = RoundedCornerShape(16.dp)) + .fillMaxWidth() + .padding(20.dp), ) { Column { - Row { + Row(modifier.align(Alignment.CenterHorizontally)) { Text( text = title, style = HandyTypography.T1Sb20, @@ -69,26 +72,23 @@ fun OneButtonDialog( Spacer(modifier = modifier.height(20.dp)) - if (subDescription.isNotEmpty()) { - Text(text = subDescription) + if (content != null) { + content() Spacer(modifier = modifier.height(20.dp)) } BoxButton( + modifier = modifier.fillMaxWidth(), text = positiveText, onClick = onPositiveClick, - sizeType = BoxButtonSize.XL, + sizeType = BoxButtonSize.L, ) } - } - } /** - * BaseButton : ripple 효과가 없는 Composable 함수 입니다. - * - * BoxButton, TextButton의 베이스가 됩니다. + * TwoButtonDialog : 버튼이 두개 았는 다이알로그 입니다. * * @param title Dialog 제목 text * @param description Dialog 안의 설명 text @@ -96,6 +96,7 @@ fun OneButtonDialog( * @param negativeText 취소 버튼 text * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수 * @param onNegativeClick 취소 버튼 클릭 시 실행되는 함수 + * @param onDismiss 닫기(X) 버튼 클릭시 실행되는 함수 **/ @Composable fun TwoButtonDialog( @@ -105,6 +106,7 @@ fun TwoButtonDialog( negativeText: String, onPositiveClick: () -> Unit, onNegativeClick: () -> Unit, + onDismiss: () -> Unit, modifier: Modifier = Modifier, ) { @@ -131,7 +133,6 @@ private fun DialogPreview() { OneButtonDialog( title = "제목이 들어갑니다", description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - subDescription = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼", onPositiveClick = {}, onDismiss = { showDialog = false } // 다이얼로그 닫기 From f89173692c20bab98f28abb8404f335b845e55ca Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Wed, 11 Dec 2024 18:55:04 +0900 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20Dialog=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/compose/Dialog.kt | 150 ++++++++++++++++-- 1 file changed, 137 insertions(+), 13 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index c2a384a..8cec19b 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -2,6 +2,7 @@ package com.yourssu.handy.compose import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -9,6 +10,7 @@ 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.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -19,10 +21,16 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.DialogDefaults.dialogInsidePadding +import com.yourssu.handy.compose.DialogDefaults.dialogPadding +import com.yourssu.handy.compose.DialogDefaults.dialogTwoButtonInsidePadding +import com.yourssu.handy.compose.DialogDefaults.dialogWidth import com.yourssu.handy.compose.button.BoxButton import com.yourssu.handy.compose.button.BoxButtonSize +import com.yourssu.handy.compose.button.BoxButtonType import com.yourssu.handy.compose.foundation.HandyTypography import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Add import com.yourssu.handy.compose.icons.filled.Close @@ -48,13 +56,18 @@ fun OneButtonDialog( ) { Box( modifier = modifier - .padding(16.dp) - .background(color = HandyTheme.colors.bgBasicDefault, shape = RoundedCornerShape(16.dp)) - .fillMaxWidth() - .padding(20.dp), + .background( + color = HandyTheme.colors.bgBasicDefault, + shape = RoundedCornerShape(16.dp) //todo Radius.XL 어떻게 활용하는지 모르겠음 + ) + .width(dialogWidth) + .padding(dialogPadding), ) { Column { - Row(modifier.align(Alignment.CenterHorizontally)) { + Row( + modifier = modifier.fillMaxWidth(), // Row가 부모의 가로 너비를 가득 채움 + horizontalArrangement = Arrangement.Center // 가로축 가운데 정렬 + ) { Text( text = title, style = HandyTypography.T1Sb20, @@ -63,18 +76,22 @@ fun OneButtonDialog( Spacer(modifier = modifier.weight(1f)) - Icon(HandyIcons.Filled.Close, modifier.clickable { onDismiss }) + Icon(HandyIcons.Filled.Close, modifier.clickable { onDismiss() }) } - Spacer(modifier = modifier.height(16.dp)) + Spacer(modifier = modifier.height(dialogInsidePadding)) Text(text = description) - Spacer(modifier = modifier.height(20.dp)) + Spacer(modifier = modifier.height(dialogPadding)) if (content != null) { - content() - Spacer(modifier = modifier.height(20.dp)) + Box( + modifier.align(Alignment.CenterHorizontally) + ) { + content() + Spacer(modifier = modifier.height(dialogPadding)) + } } BoxButton( @@ -108,13 +125,75 @@ fun TwoButtonDialog( onNegativeClick: () -> Unit, onDismiss: () -> Unit, modifier: Modifier = Modifier, + content: @Composable (() -> Unit)? = null, ) { + Box( + modifier = modifier + .background( + color = HandyTheme.colors.bgBasicDefault, + shape = RoundedCornerShape(16.dp) + ) //todo Radius.XL 어떻게 활용하는지 모르겠음 + .width(dialogWidth) + .padding(dialogPadding), + ) { + Column { + Row( + modifier = modifier.fillMaxWidth(), // Row가 부모의 가로 너비를 가득 채움 + horizontalArrangement = Arrangement.Center // 가로축 가운데 정렬 + ) { + Text( + text = title, + style = HandyTypography.T1Sb20, + color = HandyTheme.colors.textBasicPrimary + ) + + Spacer(modifier = modifier.weight(1f)) + + Icon(HandyIcons.Filled.Close, modifier.clickable { onDismiss }) + + } + Spacer(modifier = modifier.height(dialogInsidePadding)) + + Text(text = description) + + Spacer(modifier = modifier.height(dialogPadding)) + if (content != null) { + Box( + modifier.align(Alignment.CenterHorizontally) + ) { + content() + Spacer(modifier = modifier.height(dialogPadding)) + } + } + + Row( + modifier = modifier.align(Alignment.CenterHorizontally) + ) { + BoxButton( + modifier = modifier.weight(1f), // 버튼이 균등한 너비를 차지하도록 설정 + text = positiveText, + onClick = onPositiveClick, + sizeType = BoxButtonSize.L, + buttonType = BoxButtonType.Secondary + ) + + Spacer(modifier = modifier.width(dialogTwoButtonInsidePadding)) + + BoxButton( + modifier = modifier.weight(1f), // 버튼이 균등한 너비를 차지하도록 설정 + text = negativeText, + onClick = onNegativeClick, + sizeType = BoxButtonSize.L, + ) + } + } + } } @Preview @Composable -private fun DialogPreview() { +private fun OneButtonDialogPreview() { var showDialog by remember { mutableStateOf(true) } @@ -128,16 +207,61 @@ private fun DialogPreview() { onDismiss = { showDialog = false } // 다이얼로그 닫기 ) - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(10.dp)) OneButtonDialog( title = "제목이 들어갑니다", description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼", onPositiveClick = {}, - onDismiss = { showDialog = false } // 다이얼로그 닫기 + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + content = { Icon(HandyIcons.Filled.Add) } + ) + } + + } +} + +@Preview +@Composable +private fun TwoButtonDialogPreview() { + + var showDialog by remember { mutableStateOf(true) } + + HandyTheme { + Column { + + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + negativeText = "버튼", + onNegativeClick = {}, ) + + Spacer(modifier = Modifier.height(10.dp)) + + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + negativeText = "버튼", + onNegativeClick = {}, + content = { Icon(HandyIcons.Filled.Add) } + ) + } } +} + +object DialogDefaults { + val dialogWidth = 296.dp + val dialogPadding = 20.dp + val dialogInsidePadding = 16.dp + val dialogTwoButtonInsidePadding = 8.dp } \ No newline at end of file From 50a100ac9882be79a43ce56728a06be5186f9362 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Wed, 11 Dec 2024 18:57:41 +0900 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20content=20padding=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/kotlin/com/yourssu/handy/compose/Dialog.kt | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index 8cec19b..6b7c6f4 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -87,10 +87,11 @@ fun OneButtonDialog( if (content != null) { Box( - modifier.align(Alignment.CenterHorizontally) + modifier + .align(Alignment.CenterHorizontally) + .padding(bottom = dialogPadding) ) { content() - Spacer(modifier = modifier.height(dialogPadding)) } } @@ -160,10 +161,11 @@ fun TwoButtonDialog( if (content != null) { Box( - modifier.align(Alignment.CenterHorizontally) + modifier + .align(Alignment.CenterHorizontally) + .padding(bottom = dialogPadding) ) { content() - Spacer(modifier = modifier.height(dialogPadding)) } } From f84932f781176b45302e10de6782b7e4ddc8329e Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Wed, 11 Dec 2024 19:02:01 +0900 Subject: [PATCH 05/14] =?UTF-8?q?chore:=20=ED=94=84=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/demo/DialogPreview.kt | 83 +++++++++++++++++++ .../com/yourssu/handy/compose/Dialog.kt | 74 ----------------- 2 files changed, 83 insertions(+), 74 deletions(-) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt new file mode 100644 index 0000000..81ccb6e --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt @@ -0,0 +1,83 @@ +package com.yourssu.handy.demo + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +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 com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.OneButtonDialog +import com.yourssu.handy.compose.TwoButtonDialog +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.filled.Add + +@Preview +@Composable +private fun OneButtonDialogPreview() { + + var showDialog by remember { mutableStateOf(true) } + + HandyTheme { + Column { + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false } // 다이얼로그 닫기 + ) + + Spacer(modifier = Modifier.height(10.dp)) + + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + content = { Icon(HandyIcons.Filled.Add) } + ) + } + } +} + +@Preview +@Composable +private fun TwoButtonDialogPreview() { + + var showDialog by remember { mutableStateOf(true) } + + HandyTheme { + Column { + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + negativeText = "버튼", + onNegativeClick = {}, + ) + + Spacer(modifier = Modifier.height(10.dp)) + + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + negativeText = "버튼", + onNegativeClick = {}, + content = { Icon(HandyIcons.Filled.Add) } + ) + } + } +} \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index 6b7c6f4..6e3b7c0 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -13,13 +13,8 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape 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.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.DialogDefaults.dialogInsidePadding import com.yourssu.handy.compose.DialogDefaults.dialogPadding @@ -30,7 +25,6 @@ import com.yourssu.handy.compose.button.BoxButtonSize import com.yourssu.handy.compose.button.BoxButtonType import com.yourssu.handy.compose.foundation.HandyTypography import com.yourssu.handy.compose.icons.HandyIcons -import com.yourssu.handy.compose.icons.filled.Add import com.yourssu.handy.compose.icons.filled.Close @@ -193,74 +187,6 @@ fun TwoButtonDialog( } } -@Preview -@Composable -private fun OneButtonDialogPreview() { - - var showDialog by remember { mutableStateOf(true) } - - HandyTheme { - Column { - OneButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false } // 다이얼로그 닫기 - ) - - Spacer(modifier = Modifier.height(10.dp)) - - OneButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - content = { Icon(HandyIcons.Filled.Add) } - ) - } - - } -} - -@Preview -@Composable -private fun TwoButtonDialogPreview() { - - var showDialog by remember { mutableStateOf(true) } - - HandyTheme { - Column { - - TwoButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼", - onNegativeClick = {}, - ) - - Spacer(modifier = Modifier.height(10.dp)) - - TwoButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼", - onNegativeClick = {}, - content = { Icon(HandyIcons.Filled.Add) } - ) - - } - - } -} - object DialogDefaults { val dialogWidth = 296.dp val dialogPadding = 20.dp From a69fbb1d485674af0e3e67e7d70c02ca7bea8e94 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Wed, 11 Dec 2024 19:06:05 +0900 Subject: [PATCH 06/14] =?UTF-8?q?chore:=20=EC=83=81=EC=88=98=EA=B0=92=20?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index 6e3b7c0..99a1f4b 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -16,9 +16,9 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.DialogDefaults.dialogButtonSpacing import com.yourssu.handy.compose.DialogDefaults.dialogInsidePadding import com.yourssu.handy.compose.DialogDefaults.dialogPadding -import com.yourssu.handy.compose.DialogDefaults.dialogTwoButtonInsidePadding import com.yourssu.handy.compose.DialogDefaults.dialogWidth import com.yourssu.handy.compose.button.BoxButton import com.yourssu.handy.compose.button.BoxButtonSize @@ -174,7 +174,7 @@ fun TwoButtonDialog( buttonType = BoxButtonType.Secondary ) - Spacer(modifier = modifier.width(dialogTwoButtonInsidePadding)) + Spacer(modifier = modifier.width(dialogButtonSpacing)) BoxButton( modifier = modifier.weight(1f), // 버튼이 균등한 너비를 차지하도록 설정 @@ -191,5 +191,5 @@ object DialogDefaults { val dialogWidth = 296.dp val dialogPadding = 20.dp val dialogInsidePadding = 16.dp - val dialogTwoButtonInsidePadding = 8.dp + val dialogButtonSpacing = 8.dp } \ No newline at end of file From c72aeb9bff540676b9eb8339869feab2821cee7c Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Thu, 12 Dec 2024 12:34:29 +0900 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20headline=EA=B3=BC=20X=20=EC=97=AC?= =?UTF-8?q?=EB=B0=B1=208dp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/demo/DialogPreview.kt | 30 +++++++++-- .../com/yourssu/handy/compose/Dialog.kt | 51 +++++++++++-------- 2 files changed, 56 insertions(+), 25 deletions(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt index 81ccb6e..b0fbd04 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt @@ -36,6 +36,16 @@ private fun OneButtonDialogPreview() { Spacer(modifier = Modifier.height(10.dp)) + OneButtonDialog( + title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { showDialog = false } // 다이얼로그 닫기 + ) + + Spacer(modifier = Modifier.height(10.dp)) + OneButtonDialog( title = "제목이 들어갑니다", description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", @@ -59,10 +69,22 @@ private fun TwoButtonDialogPreview() { TwoButtonDialog( title = "제목이 들어갑니다", description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", + positiveText = "버튼2", onPositiveClick = {}, onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼", + negativeText = "버튼1", + onNegativeClick = {}, + ) + + Spacer(modifier = Modifier.height(10.dp)) + + TwoButtonDialog( + title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼2", + onPositiveClick = {}, + onDismiss = { showDialog = false }, // 다이얼로그 닫기 + negativeText = "버튼1", onNegativeClick = {}, ) @@ -71,10 +93,10 @@ private fun TwoButtonDialogPreview() { TwoButtonDialog( title = "제목이 들어갑니다", description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", + positiveText = "버튼2", onPositiveClick = {}, onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼", + negativeText = "버튼1", onNegativeClick = {}, content = { Icon(HandyIcons.Filled.Add) } ) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index 99a1f4b..035e4a9 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -2,7 +2,6 @@ package com.yourssu.handy.compose import androidx.compose.foundation.background import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -59,20 +58,25 @@ fun OneButtonDialog( ) { Column { Row( - modifier = modifier.fillMaxWidth(), // Row가 부모의 가로 너비를 가득 채움 - horizontalArrangement = Arrangement.Center // 가로축 가운데 정렬 + modifier = modifier.fillMaxWidth(), ) { Text( text = title, style = HandyTypography.T1Sb20, - color = HandyTheme.colors.textBasicPrimary + color = HandyTheme.colors.textBasicPrimary, + maxLines = 3, + modifier = Modifier + .weight(1f) + .padding(end = dialogButtonSpacing) ) - Spacer(modifier = modifier.weight(1f)) - - Icon(HandyIcons.Filled.Close, modifier.clickable { onDismiss() }) - + Icon( + imageVector = HandyIcons.Filled.Close, + contentDescription = "Close", + modifier = modifier.clickable { onDismiss() } + ) } + Spacer(modifier = modifier.height(dialogInsidePadding)) Text(text = description) @@ -133,20 +137,25 @@ fun TwoButtonDialog( ) { Column { Row( - modifier = modifier.fillMaxWidth(), // Row가 부모의 가로 너비를 가득 채움 - horizontalArrangement = Arrangement.Center // 가로축 가운데 정렬 + modifier = modifier.fillMaxWidth(), ) { Text( text = title, style = HandyTypography.T1Sb20, - color = HandyTheme.colors.textBasicPrimary + color = HandyTheme.colors.textBasicPrimary, + maxLines = 3, + modifier = Modifier + .weight(1f) + .padding(end = dialogButtonSpacing) ) - Spacer(modifier = modifier.weight(1f)) - - Icon(HandyIcons.Filled.Close, modifier.clickable { onDismiss }) - + Icon( + imageVector = HandyIcons.Filled.Close, + contentDescription = "Close", + modifier = modifier.clickable { onDismiss() } + ) } + Spacer(modifier = modifier.height(dialogInsidePadding)) Text(text = description) @@ -167,9 +176,9 @@ fun TwoButtonDialog( modifier = modifier.align(Alignment.CenterHorizontally) ) { BoxButton( - modifier = modifier.weight(1f), // 버튼이 균등한 너비를 차지하도록 설정 - text = positiveText, - onClick = onPositiveClick, + modifier = modifier.weight(1f), + text = negativeText, + onClick = onNegativeClick, sizeType = BoxButtonSize.L, buttonType = BoxButtonType.Secondary ) @@ -177,9 +186,9 @@ fun TwoButtonDialog( Spacer(modifier = modifier.width(dialogButtonSpacing)) BoxButton( - modifier = modifier.weight(1f), // 버튼이 균등한 너비를 차지하도록 설정 - text = negativeText, - onClick = onNegativeClick, + modifier = modifier.weight(1f), + text = positiveText, + onClick = onPositiveClick, sizeType = BoxButtonSize.L, ) } From 57da396952a5574038e5281fe634e44838f4ec03 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Fri, 13 Dec 2024 16:22:07 +0900 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20scrim=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/compose/Dialog.kt | 241 ++++++++++-------- .../compose/foundation/PrimitiveColors.kt | 3 + 2 files changed, 140 insertions(+), 104 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index 035e4a9..aea21ac 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -2,16 +2,19 @@ package com.yourssu.handy.compose import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize 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.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp @@ -22,6 +25,7 @@ import com.yourssu.handy.compose.DialogDefaults.dialogWidth import com.yourssu.handy.compose.button.BoxButton import com.yourssu.handy.compose.button.BoxButtonSize import com.yourssu.handy.compose.button.BoxButtonType +import com.yourssu.handy.compose.foundation.ColorGray070 import com.yourssu.handy.compose.foundation.HandyTypography import com.yourssu.handy.compose.icons.HandyIcons import com.yourssu.handy.compose.icons.filled.Close @@ -31,11 +35,11 @@ import com.yourssu.handy.compose.icons.filled.Close * OneButtonDialog : 선택 버튼이 하나 있는 Dialog 입니다. * * @param title Dialog 제목 text - * @param description Dialog 안의 설명 text (optional) - * @param content Dialog 안의 content. 주로 이미지가 들어감(optional) * @param positiveText 확인 버튼 text * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수 * @param onDismiss 닫기(X) 버튼 클릭시 실행되는 함수 + * @param description Dialog 안의 설명 text (optional) + * @param content Dialog 안의 content. 주로 이미지가 들어감(optional) **/ @Composable fun OneButtonDialog( @@ -47,151 +51,180 @@ fun OneButtonDialog( description: String = "", content: @Composable (() -> Unit)? = null, ) { + // Scrim Box( - modifier = modifier - .background( - color = HandyTheme.colors.bgBasicDefault, - shape = RoundedCornerShape(16.dp) //todo Radius.XL 어떻게 활용하는지 모르겠음 - ) - .width(dialogWidth) - .padding(dialogPadding), + modifier = Modifier + .fillMaxSize() + .background(color = ColorGray070) + .clickable( + onClick = onDismiss, + indication = null, + interactionSource = remember { MutableInteractionSource() } + ), // 배경 클릭 시 닫기 처리 + contentAlignment = Alignment.Center // 중앙 정렬 ) { - Column { - Row( - modifier = modifier.fillMaxWidth(), - ) { - Text( - text = title, - style = HandyTypography.T1Sb20, - color = HandyTheme.colors.textBasicPrimary, - maxLines = 3, - modifier = Modifier - .weight(1f) - .padding(end = dialogButtonSpacing) - ) - - Icon( - imageVector = HandyIcons.Filled.Close, - contentDescription = "Close", - modifier = modifier.clickable { onDismiss() } - ) - } + Box( + modifier = modifier + .background( + color = HandyTheme.colors.bgBasicDefault, + shape = RoundedCornerShape(16.dp) + ) //todo Radius.XL 어떻게 활용하는지 모르겠음 + .width(dialogWidth) + .padding(dialogPadding), + ) { + Column { + Row( + modifier = Modifier.fillMaxWidth(), + ) { + Text( + text = title, + style = HandyTypography.T1Sb20, + color = HandyTheme.colors.textBasicPrimary, + maxLines = 3, + modifier = Modifier + .weight(1f) + .padding(end = dialogButtonSpacing) + ) + + Icon( + imageVector = HandyIcons.Filled.Close, + contentDescription = "Close", + modifier = Modifier.clickable { onDismiss() } + ) + } - Spacer(modifier = modifier.height(dialogInsidePadding)) + Spacer(modifier = Modifier.height(dialogInsidePadding)) - Text(text = description) + Text(text = description) - Spacer(modifier = modifier.height(dialogPadding)) + Spacer(modifier = Modifier.height(dialogPadding)) - if (content != null) { - Box( - modifier - .align(Alignment.CenterHorizontally) - .padding(bottom = dialogPadding) - ) { - content() + if (content != null) { + Box( + modifier = Modifier + .align(Alignment.CenterHorizontally) + .padding(bottom = dialogPadding) + ) { + content() + } } - } - BoxButton( - modifier = modifier.fillMaxWidth(), - text = positiveText, onClick = onPositiveClick, - sizeType = BoxButtonSize.L, - ) + BoxButton( + modifier = Modifier.fillMaxWidth(), + text = positiveText, + onClick = { onPositiveClick() }, + sizeType = BoxButtonSize.L, + ) + } } } } + /** - * TwoButtonDialog : 버튼이 두개 았는 다이알로그 입니다. + * TwoButtonDialog : 버튼이 두개 있는 다이알로그 입니다. * * @param title Dialog 제목 text - * @param description Dialog 안의 설명 text * @param positiveText 확인 버튼 text * @param negativeText 취소 버튼 text * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수 * @param onNegativeClick 취소 버튼 클릭 시 실행되는 함수 * @param onDismiss 닫기(X) 버튼 클릭시 실행되는 함수 + * @param description Dialog 안의 설명 text (optional) + * @param content Dialog 안의 content. 주로 이미지가 들어감(optional) **/ @Composable fun TwoButtonDialog( title: String, - description: String, positiveText: String, negativeText: String, onPositiveClick: () -> Unit, onNegativeClick: () -> Unit, onDismiss: () -> Unit, modifier: Modifier = Modifier, + description: String = "", content: @Composable (() -> Unit)? = null, ) { + // Scrim Box( - modifier = modifier - .background( - color = HandyTheme.colors.bgBasicDefault, - shape = RoundedCornerShape(16.dp) - ) //todo Radius.XL 어떻게 활용하는지 모르겠음 - .width(dialogWidth) - .padding(dialogPadding), + modifier = Modifier + .fillMaxSize() + .background(color = ColorGray070) + .clickable( + onClick = onDismiss, + indication = null, + interactionSource = remember { MutableInteractionSource() } + ), // 배경 클릭 시 닫기 처리 + contentAlignment = Alignment.Center // 중앙 정렬 ) { - Column { - Row( - modifier = modifier.fillMaxWidth(), - ) { - Text( - text = title, - style = HandyTypography.T1Sb20, - color = HandyTheme.colors.textBasicPrimary, - maxLines = 3, - modifier = Modifier - .weight(1f) - .padding(end = dialogButtonSpacing) - ) + Box( + modifier = modifier + .background( + color = HandyTheme.colors.bgBasicDefault, + shape = RoundedCornerShape(16.dp) + ) //todo Radius.XL 어떻게 활용하는지 모르겠음 + .width(dialogWidth) + .padding(dialogPadding), + ) { + Column { + Row( + modifier = modifier.fillMaxWidth(), + ) { + Text( + text = title, + style = HandyTypography.T1Sb20, + color = HandyTheme.colors.textBasicPrimary, + maxLines = 3, + modifier = Modifier + .weight(1f) + .padding(end = dialogButtonSpacing) + ) + + Icon( + imageVector = HandyIcons.Filled.Close, + contentDescription = "Close", + modifier = modifier.clickable { onDismiss() } + ) + } - Icon( - imageVector = HandyIcons.Filled.Close, - contentDescription = "Close", - modifier = modifier.clickable { onDismiss() } - ) - } + Spacer(modifier = modifier.height(dialogInsidePadding)) - Spacer(modifier = modifier.height(dialogInsidePadding)) + Text(text = description) - Text(text = description) + Spacer(modifier = modifier.height(dialogPadding)) - Spacer(modifier = modifier.height(dialogPadding)) + if (content != null) { + Box( + modifier + .align(Alignment.CenterHorizontally) + .padding(bottom = dialogPadding) + ) { + content() + } + } - if (content != null) { - Box( - modifier - .align(Alignment.CenterHorizontally) - .padding(bottom = dialogPadding) + Row( + modifier = modifier.align(Alignment.CenterHorizontally) ) { - content() + BoxButton( + modifier = modifier.weight(1f), + text = negativeText, + onClick = { onNegativeClick() }, + sizeType = BoxButtonSize.L, + buttonType = BoxButtonType.Secondary + ) + + Spacer(modifier = modifier.width(dialogButtonSpacing)) + + BoxButton( + modifier = modifier.weight(1f), + text = positiveText, + onClick = { onPositiveClick() }, + sizeType = BoxButtonSize.L, + ) } } - - Row( - modifier = modifier.align(Alignment.CenterHorizontally) - ) { - BoxButton( - modifier = modifier.weight(1f), - text = negativeText, - onClick = onNegativeClick, - sizeType = BoxButtonSize.L, - buttonType = BoxButtonType.Secondary - ) - - Spacer(modifier = modifier.width(dialogButtonSpacing)) - - BoxButton( - modifier = modifier.weight(1f), - text = positiveText, - onClick = onPositiveClick, - sizeType = BoxButtonSize.L, - ) - } } } } diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt index 5739e77..3cee078 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt @@ -30,6 +30,9 @@ internal val ColorGray800 = Color(0xFF3F434D) internal val ColorGray900 = Color(0xFF373A43) internal val ColorGray950 = Color(0xFF25262C) +// Opacity/gray/070 +internal val ColorGray070 = Color(0xFF25262C).copy(alpha = 0.65f) + // Neutral internal val ColorNeutralBlack = Color(0xFF25262C) internal val ColorNeutralWhite = Color(0xFFFFFFFF) From b2d474750e7e3aac5c0f5c62957c0a13b315c5cb Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Fri, 13 Dec 2024 16:22:30 +0900 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20screen=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EB=9D=84=EC=9A=B0=EB=8A=94=20preview=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/demo/DialogPreview.kt | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt index b0fbd04..84d9e76 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt @@ -1,13 +1,17 @@ package com.yourssu.handy.demo +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height 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.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -15,6 +19,7 @@ import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.Icon import com.yourssu.handy.compose.OneButtonDialog import com.yourssu.handy.compose.TwoButtonDialog +import com.yourssu.handy.compose.button.BoxButton import com.yourssu.handy.compose.icons.HandyIcons import com.yourssu.handy.compose.icons.filled.Add @@ -102,4 +107,46 @@ private fun TwoButtonDialogPreview() { ) } } +} + +@Preview +@Composable +private fun OneButtonDialogOnScreenPreview() { + + var showOneButtonDialog by remember { mutableStateOf(false) } + var showTwoButtonDialog by remember { mutableStateOf(false) } + + HandyTheme { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier + .fillMaxWidth() + .fillMaxHeight() + ) { + BoxButton(text = "원버튼 다이알로그", onClick = { showOneButtonDialog = true }) + Spacer(modifier = Modifier.height(10.dp)) + BoxButton(text = "투버튼 다이알로그", onClick = { showTwoButtonDialog = true }) + } + + if (showOneButtonDialog) { + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용", + positiveText = "버튼", + onPositiveClick = { showOneButtonDialog = false }, + onDismiss = { showOneButtonDialog = false } + ) + } else if (showTwoButtonDialog) { + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용", + positiveText = "버튼", + onPositiveClick = { showTwoButtonDialog = false }, + onDismiss = { showTwoButtonDialog = false }, + negativeText = "버튼", + onNegativeClick = { showTwoButtonDialog = false } + ) + } + } } \ No newline at end of file From 280c97125c734290748a6c5e140b4dcb0e1e2652 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Fri, 13 Dec 2024 16:23:27 +0900 Subject: [PATCH 10/14] =?UTF-8?q?chore:=20=ED=95=A8=EC=88=98=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt index 84d9e76..5218367 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt @@ -111,7 +111,7 @@ private fun TwoButtonDialogPreview() { @Preview @Composable -private fun OneButtonDialogOnScreenPreview() { +private fun DialogOnScreenPreview() { var showOneButtonDialog by remember { mutableStateOf(false) } var showTwoButtonDialog by remember { mutableStateOf(false) } From 49d8fed50e08fc839972e3b673c02bdbb948291a Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Mon, 16 Dec 2024 10:56:28 +0900 Subject: [PATCH 11/14] =?UTF-8?q?refactor:=20Radius=20enum=20=ED=99=9C?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/kotlin/com/yourssu/handy/compose/Dialog.kt | 9 +++++---- .../com/yourssu/handy/compose/foundation/Radius.kt | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index aea21ac..299836c 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -27,6 +27,7 @@ import com.yourssu.handy.compose.button.BoxButtonSize import com.yourssu.handy.compose.button.BoxButtonType import com.yourssu.handy.compose.foundation.ColorGray070 import com.yourssu.handy.compose.foundation.HandyTypography +import com.yourssu.handy.compose.foundation.Radius import com.yourssu.handy.compose.icons.HandyIcons import com.yourssu.handy.compose.icons.filled.Close @@ -67,8 +68,8 @@ fun OneButtonDialog( modifier = modifier .background( color = HandyTheme.colors.bgBasicDefault, - shape = RoundedCornerShape(16.dp) - ) //todo Radius.XL 어떻게 활용하는지 모르겠음 + shape = RoundedCornerShape(Radius.XL.dp) + ) .width(dialogWidth) .padding(dialogPadding), ) { @@ -162,8 +163,8 @@ fun TwoButtonDialog( modifier = modifier .background( color = HandyTheme.colors.bgBasicDefault, - shape = RoundedCornerShape(16.dp) - ) //todo Radius.XL 어떻게 활용하는지 모르겠음 + shape = RoundedCornerShape(Radius.XL.dp) + ) .width(dialogWidth) .padding(dialogPadding), ) { diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt index 4625cba..ad3e8cd 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt @@ -3,7 +3,7 @@ package com.yourssu.handy.compose.foundation import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -enum class Radius(dp: Dp) { +enum class Radius(val dp: Dp) { XS(8.dp), S(10.dp), M(12.dp), From 3cb74cf3351672bf171b36634b0b642f15dc242f Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Mon, 16 Dec 2024 10:57:38 +0900 Subject: [PATCH 12/14] =?UTF-8?q?chore:=20Modifier=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/compose/Dialog.kt | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt index 299836c..33e8fce 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt @@ -54,7 +54,7 @@ fun OneButtonDialog( ) { // Scrim Box( - modifier = Modifier + modifier = modifier .fillMaxSize() .background(color = ColorGray070) .clickable( @@ -65,7 +65,7 @@ fun OneButtonDialog( contentAlignment = Alignment.Center // 중앙 정렬 ) { Box( - modifier = modifier + modifier = Modifier .background( color = HandyTheme.colors.bgBasicDefault, shape = RoundedCornerShape(Radius.XL.dp) @@ -149,7 +149,7 @@ fun TwoButtonDialog( ) { // Scrim Box( - modifier = Modifier + modifier = modifier .fillMaxSize() .background(color = ColorGray070) .clickable( @@ -160,7 +160,7 @@ fun TwoButtonDialog( contentAlignment = Alignment.Center // 중앙 정렬 ) { Box( - modifier = modifier + modifier = Modifier .background( color = HandyTheme.colors.bgBasicDefault, shape = RoundedCornerShape(Radius.XL.dp) @@ -170,7 +170,7 @@ fun TwoButtonDialog( ) { Column { Row( - modifier = modifier.fillMaxWidth(), + modifier = Modifier.fillMaxWidth(), ) { Text( text = title, @@ -185,19 +185,19 @@ fun TwoButtonDialog( Icon( imageVector = HandyIcons.Filled.Close, contentDescription = "Close", - modifier = modifier.clickable { onDismiss() } + modifier = Modifier.clickable { onDismiss() } ) } - Spacer(modifier = modifier.height(dialogInsidePadding)) + Spacer(modifier = Modifier.height(dialogInsidePadding)) Text(text = description) - Spacer(modifier = modifier.height(dialogPadding)) + Spacer(modifier = Modifier.height(dialogPadding)) if (content != null) { Box( - modifier + Modifier .align(Alignment.CenterHorizontally) .padding(bottom = dialogPadding) ) { @@ -206,20 +206,20 @@ fun TwoButtonDialog( } Row( - modifier = modifier.align(Alignment.CenterHorizontally) + modifier = Modifier.align(Alignment.CenterHorizontally) ) { BoxButton( - modifier = modifier.weight(1f), + modifier = Modifier.weight(1f), text = negativeText, onClick = { onNegativeClick() }, sizeType = BoxButtonSize.L, buttonType = BoxButtonType.Secondary ) - Spacer(modifier = modifier.width(dialogButtonSpacing)) + Spacer(modifier = Modifier.width(dialogButtonSpacing)) BoxButton( - modifier = modifier.weight(1f), + modifier = Modifier.weight(1f), text = positiveText, onClick = { onPositiveClick() }, sizeType = BoxButtonSize.L, From ea7e50f564991427fc911267f09cafb333122216 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Mon, 16 Dec 2024 13:16:42 +0900 Subject: [PATCH 13/14] =?UTF-8?q?chore:=20=ED=94=84=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/demo/DialogPreview.kt | 146 +++++++++--------- 1 file changed, 76 insertions(+), 70 deletions(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt index 5218367..cb80e22 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt @@ -25,87 +25,93 @@ import com.yourssu.handy.compose.icons.filled.Add @Preview @Composable -private fun OneButtonDialogPreview() { - - var showDialog by remember { mutableStateOf(true) } - +private fun OneButtonDialogPreview1() { HandyTheme { - Column { - OneButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false } // 다이얼로그 닫기 - ) - - Spacer(modifier = Modifier.height(10.dp)) - - OneButtonDialog( - title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false } // 다이얼로그 닫기 - ) - - Spacer(modifier = Modifier.height(10.dp)) - - OneButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - content = { Icon(HandyIcons.Filled.Add) } - ) - } + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { } + ) } } @Preview @Composable -private fun TwoButtonDialogPreview() { - - var showDialog by remember { mutableStateOf(true) } - +private fun OneButtonDialogPreview2() { HandyTheme { - Column { - TwoButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼2", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼1", - onNegativeClick = {}, - ) + OneButtonDialog( + title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { } + ) + } +} - Spacer(modifier = Modifier.height(10.dp)) +@Preview +@Composable +private fun OneButtonDialogPreview3() { + HandyTheme { + OneButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼", + onPositiveClick = {}, + onDismiss = { }, + content = { Icon(HandyIcons.Filled.Add) } + ) + } +} - TwoButtonDialog( - title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼2", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼1", - onNegativeClick = {}, - ) +@Preview +@Composable +private fun TwoButtonDialogPreview1() { + HandyTheme { + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼2", + onPositiveClick = {}, + onDismiss = { }, + negativeText = "버튼1", + onNegativeClick = {}, + ) + } +} - Spacer(modifier = Modifier.height(10.dp)) +@Preview +@Composable +private fun TwoButtonDialogPreview2() { + HandyTheme { + TwoButtonDialog( + title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼2", + onPositiveClick = {}, + onDismiss = { }, + negativeText = "버튼1", + onNegativeClick = {}, + ) + } +} - TwoButtonDialog( - title = "제목이 들어갑니다", - description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", - positiveText = "버튼2", - onPositiveClick = {}, - onDismiss = { showDialog = false }, // 다이얼로그 닫기 - negativeText = "버튼1", - onNegativeClick = {}, - content = { Icon(HandyIcons.Filled.Add) } - ) - } +@Preview +@Composable +private fun TwoButtonDialogPreview3() { + HandyTheme { + TwoButtonDialog( + title = "제목이 들어갑니다", + description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", + positiveText = "버튼2", + onPositiveClick = {}, + onDismiss = {}, + negativeText = "버튼1", + onNegativeClick = {}, + content = { Icon(HandyIcons.Filled.Add) } + ) } } From 049bfaf99b96bd4aea2df0d520b1b6caaa586158 Mon Sep 17 00:00:00 2001 From: Yu Jin Date: Mon, 16 Dec 2024 13:17:53 +0900 Subject: [PATCH 14/14] =?UTF-8?q?chore:=20{}=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kotlin/com/yourssu/handy/demo/DialogPreview.kt | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt index cb80e22..fe7c059 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt @@ -32,7 +32,7 @@ private fun OneButtonDialogPreview1() { description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼", onPositiveClick = {}, - onDismiss = { } + onDismiss = {} ) } } @@ -46,7 +46,7 @@ private fun OneButtonDialogPreview2() { description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼", onPositiveClick = {}, - onDismiss = { } + onDismiss = {} ) } } @@ -60,7 +60,7 @@ private fun OneButtonDialogPreview3() { description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼", onPositiveClick = {}, - onDismiss = { }, + onDismiss = {}, content = { Icon(HandyIcons.Filled.Add) } ) } @@ -75,7 +75,7 @@ private fun TwoButtonDialogPreview1() { description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼2", onPositiveClick = {}, - onDismiss = { }, + onDismiss = {}, negativeText = "버튼1", onNegativeClick = {}, ) @@ -91,7 +91,7 @@ private fun TwoButtonDialogPreview2() { description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다", positiveText = "버튼2", onPositiveClick = {}, - onDismiss = { }, + onDismiss = {}, negativeText = "버튼1", onNegativeClick = {}, )