Skip to content

Commit 65134ac

Browse files
OjongseokOjongseok
authored
Merge pull request #109 from YAPP-Github/design/#108-dialog
[design] #108 아이콘 노출 여부에 대한 다이어로그 컴포넌트 분리
2 parents fc58136 + 232e0f0 commit 65134ac

20 files changed

Lines changed: 420 additions & 210 deletions

File tree

‎core/designsystem/src/main/java/com/neki/android/core/designsystem/dialog/DoubleButtonAlertDialog.kt‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
package com.neki.android.core.designsystem.dialog
22

3+
import androidx.compose.foundation.Image
34
import androidx.compose.foundation.background
45
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.Row
78
import androidx.compose.foundation.layout.fillMaxWidth
89
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.layout.size
911
import androidx.compose.foundation.layout.widthIn
1012
import androidx.compose.foundation.shape.RoundedCornerShape
11-
import androidx.compose.material3.Icon
1213
import androidx.compose.material3.Text
1314
import androidx.compose.runtime.Composable
1415
import androidx.compose.ui.Alignment
1516
import androidx.compose.ui.Modifier
1617
import androidx.compose.ui.draw.clip
17-
import androidx.compose.ui.graphics.Color
18-
import androidx.compose.ui.graphics.vector.ImageVector
19-
import androidx.compose.ui.res.vectorResource
18+
import androidx.compose.ui.res.painterResource
2019
import androidx.compose.ui.text.style.TextAlign
2120
import androidx.compose.ui.unit.dp
2221
import androidx.compose.ui.window.Dialog
@@ -56,9 +55,9 @@ fun DoubleButtonAlertDialog(
5655
horizontalAlignment = Alignment.CenterHorizontally,
5756
verticalArrangement = Arrangement.spacedBy(12.dp),
5857
) {
59-
Icon(
60-
imageVector = ImageVector.vectorResource(R.drawable.icon_dialog_alert),
61-
tint = Color.Unspecified,
58+
Image(
59+
modifier = Modifier.size(64.dp),
60+
painter = painterResource(R.drawable.image_dialog_alert),
6261
contentDescription = null,
6362
)
6463
Column(

‎core/designsystem/src/main/java/com/neki/android/core/designsystem/dialog/DoubleButtonDialog.kt‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
package com.neki.android.core.designsystem.dialog
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.widthIn
10+
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.material3.Text
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.draw.clip
16+
import androidx.compose.ui.text.style.TextAlign
17+
import androidx.compose.ui.unit.dp
18+
import androidx.compose.ui.window.Dialog
19+
import androidx.compose.ui.window.DialogProperties
20+
import com.neki.android.core.designsystem.ComponentPreview
21+
import com.neki.android.core.designsystem.button.CTAButtonGray
22+
import com.neki.android.core.designsystem.button.CTAButtonPrimary
23+
import com.neki.android.core.designsystem.ui.theme.NekiTheme
24+
25+
@Composable
26+
fun DoubleButtonDialog(
27+
title: String,
28+
content: String,
29+
grayButtonText: String,
30+
primaryButtonText: String,
31+
onDismissRequest: () -> Unit,
32+
onClickPrimaryButton: () -> Unit,
33+
onClickGrayButton: () -> Unit,
34+
modifier: Modifier = Modifier,
35+
properties: DialogProperties = DialogProperties(
36+
usePlatformDefaultWidth = false,
37+
),
38+
) {
39+
Dialog(
40+
onDismissRequest = onDismissRequest,
41+
properties = properties,
42+
) {
43+
Column(
44+
modifier = modifier
45+
.fillMaxWidth()
46+
.padding(horizontal = 20.dp)
47+
.widthIn(max = 400.dp)
48+
.clip(RoundedCornerShape(20.dp))
49+
.background(NekiTheme.colorScheme.white)
50+
.padding(top = 20.dp),
51+
horizontalAlignment = Alignment.CenterHorizontally,
52+
verticalArrangement = Arrangement.spacedBy(12.dp),
53+
) {
54+
Column(
55+
modifier = Modifier.padding(horizontal = 24.dp),
56+
verticalArrangement = Arrangement.spacedBy(4.dp),
57+
horizontalAlignment = Alignment.CenterHorizontally,
58+
) {
59+
Text(
60+
text = title,
61+
style = NekiTheme.typography.title18Bold,
62+
color = NekiTheme.colorScheme.gray900,
63+
textAlign = TextAlign.Center,
64+
)
65+
Text(
66+
text = content,
67+
style = NekiTheme.typography.body14Regular,
68+
color = NekiTheme.colorScheme.gray500,
69+
textAlign = TextAlign.Center,
70+
)
71+
}
72+
Row(
73+
modifier = Modifier
74+
.fillMaxWidth()
75+
.padding(12.dp),
76+
horizontalArrangement = Arrangement.spacedBy(10.dp),
77+
) {
78+
CTAButtonGray(
79+
text = grayButtonText,
80+
onClick = onClickGrayButton,
81+
modifier = Modifier.weight(1f),
82+
)
83+
CTAButtonPrimary(
84+
text = primaryButtonText,
85+
onClick = onClickPrimaryButton,
86+
modifier = Modifier.weight(1f),
87+
)
88+
}
89+
}
90+
}
91+
}
92+
93+
@ComponentPreview
94+
@Composable
95+
private fun DoubleButtonDialogPreview() {
96+
NekiTheme {
97+
DoubleButtonDialog(
98+
title = "메인 텍스트가 들어가는 곳",
99+
content = "보조 설명 텍스트가 들어가는 공간입니다",
100+
grayButtonText = "텍스트",
101+
primaryButtonText = "텍스트",
102+
onDismissRequest = {},
103+
onClickPrimaryButton = {},
104+
onClickGrayButton = {},
105+
)
106+
}
107+
}

‎core/designsystem/src/main/java/com/neki/android/core/designsystem/dialog/SingleButtonAlertDialog.kt‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
package com.neki.android.core.designsystem.dialog
22

3+
import androidx.compose.foundation.Image
34
import androidx.compose.foundation.background
45
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.fillMaxWidth
78
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.size
810
import androidx.compose.foundation.layout.widthIn
911
import androidx.compose.foundation.shape.RoundedCornerShape
10-
import androidx.compose.material3.Icon
1112
import androidx.compose.material3.Text
1213
import androidx.compose.runtime.Composable
1314
import androidx.compose.ui.Alignment
1415
import androidx.compose.ui.Modifier
1516
import androidx.compose.ui.draw.clip
16-
import androidx.compose.ui.graphics.Color
17-
import androidx.compose.ui.graphics.vector.ImageVector
18-
import androidx.compose.ui.res.vectorResource
17+
import androidx.compose.ui.res.painterResource
1918
import androidx.compose.ui.text.style.TextAlign
2019
import androidx.compose.ui.unit.dp
2120
import androidx.compose.ui.window.Dialog
@@ -54,9 +53,9 @@ fun SingleButtonAlertDialog(
5453
horizontalAlignment = Alignment.CenterHorizontally,
5554
verticalArrangement = Arrangement.spacedBy(12.dp),
5655
) {
57-
Icon(
58-
imageVector = ImageVector.vectorResource(R.drawable.icon_dialog_alert),
59-
tint = Color.Unspecified,
56+
Image(
57+
modifier = Modifier.size(64.dp),
58+
painter = painterResource(R.drawable.image_dialog_alert),
6059
contentDescription = null,
6160
)
6261
Column(

‎core/designsystem/src/main/java/com/neki/android/core/designsystem/dialog/SingleButtonDialog.kt‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
package com.neki.android.core.designsystem.dialog
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.widthIn
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.material3.Text
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Alignment
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.draw.clip
15+
import androidx.compose.ui.text.style.TextAlign
16+
import androidx.compose.ui.unit.dp
17+
import androidx.compose.ui.window.Dialog
18+
import androidx.compose.ui.window.DialogProperties
19+
import com.neki.android.core.designsystem.ComponentPreview
20+
import com.neki.android.core.designsystem.button.CTAButtonPrimary
21+
import com.neki.android.core.designsystem.ui.theme.NekiTheme
22+
23+
@Composable
24+
fun SingleButtonDialog(
25+
title: String,
26+
content: String,
27+
buttonText: String,
28+
onDismissRequest: () -> Unit,
29+
onClick: () -> Unit,
30+
enabled: Boolean = true,
31+
properties: DialogProperties = DialogProperties(
32+
usePlatformDefaultWidth = false,
33+
dismissOnBackPress = false,
34+
dismissOnClickOutside = false,
35+
),
36+
) {
37+
Dialog(
38+
onDismissRequest = onDismissRequest,
39+
properties = properties,
40+
) {
41+
Column(
42+
modifier = Modifier
43+
.fillMaxWidth()
44+
.padding(horizontal = 20.dp)
45+
.widthIn(max = 400.dp)
46+
.clip(RoundedCornerShape(20.dp))
47+
.background(NekiTheme.colorScheme.white)
48+
.padding(top = 20.dp),
49+
horizontalAlignment = Alignment.CenterHorizontally,
50+
verticalArrangement = Arrangement.spacedBy(12.dp),
51+
) {
52+
Column(
53+
modifier = Modifier.padding(horizontal = 24.dp),
54+
verticalArrangement = Arrangement.spacedBy(4.dp),
55+
horizontalAlignment = Alignment.CenterHorizontally,
56+
) {
57+
Text(
58+
text = title,
59+
style = NekiTheme.typography.title18Bold,
60+
color = NekiTheme.colorScheme.gray900,
61+
textAlign = TextAlign.Center,
62+
)
63+
Text(
64+
text = content,
65+
style = NekiTheme.typography.body14Regular,
66+
color = NekiTheme.colorScheme.gray500,
67+
textAlign = TextAlign.Center,
68+
)
69+
}
70+
CTAButtonPrimary(
71+
text = buttonText,
72+
onClick = onClick,
73+
modifier = Modifier
74+
.fillMaxWidth()
75+
.padding(12.dp),
76+
enabled = enabled,
77+
)
78+
}
79+
}
80+
}
81+
82+
@ComponentPreview
83+
@Composable
84+
private fun SingleButtonDialogPreview() {
85+
NekiTheme {
86+
SingleButtonDialog(
87+
title = "메인 텍스트가 들어가는 곳",
88+
content = "보조 설명 텍스트가 들어가는 공간입니다",
89+
buttonText = "텍스트",
90+
onDismissRequest = {},
91+
onClick = {},
92+
)
93+
}
94+
}

‎core/designsystem/src/main/java/com/neki/android/core/designsystem/dialog/SingleButtonWithTextButtonAlertDialog.kt‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
package com.neki.android.core.designsystem.dialog
22

3+
import androidx.compose.foundation.Image
34
import androidx.compose.foundation.background
45
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.fillMaxWidth
78
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.size
810
import androidx.compose.foundation.layout.widthIn
911
import androidx.compose.foundation.shape.RoundedCornerShape
10-
import androidx.compose.material3.Icon
1112
import androidx.compose.material3.Text
1213
import androidx.compose.runtime.Composable
1314
import androidx.compose.ui.Alignment
1415
import androidx.compose.ui.Modifier
1516
import androidx.compose.ui.draw.clip
16-
import androidx.compose.ui.graphics.Color
17-
import androidx.compose.ui.graphics.vector.ImageVector
18-
import androidx.compose.ui.res.vectorResource
17+
import androidx.compose.ui.res.painterResource
1918
import androidx.compose.ui.text.style.TextAlign
2019
import androidx.compose.ui.text.style.TextDecoration
2120
import androidx.compose.ui.unit.dp
@@ -58,9 +57,9 @@ fun SingleButtonWithTextButtonAlertDialog(
5857
horizontalAlignment = Alignment.CenterHorizontally,
5958
verticalArrangement = Arrangement.spacedBy(12.dp),
6059
) {
61-
Icon(
62-
imageVector = ImageVector.vectorResource(R.drawable.icon_dialog_alert),
63-
tint = Color.Unspecified,
60+
Image(
61+
modifier = Modifier.size(64.dp),
62+
painter = painterResource(R.drawable.image_dialog_alert),
6463
contentDescription = null,
6564
)
6665
Column(
@@ -84,7 +83,7 @@ fun SingleButtonWithTextButtonAlertDialog(
8483
Column(
8584
modifier = Modifier.padding(vertical = 12.dp),
8685
horizontalAlignment = Alignment.CenterHorizontally,
87-
verticalArrangement = Arrangement.spacedBy(8.dp),
86+
verticalArrangement = Arrangement.spacedBy(4.dp),
8887
) {
8988
CTAButtonPrimary(
9089
text = buttonText,
@@ -96,11 +95,11 @@ fun SingleButtonWithTextButtonAlertDialog(
9695
)
9796
Text(
9897
modifier = Modifier
98+
.clickableSingle(onClick = onTextButtonClick)
9999
.padding(
100100
vertical = 4.dp,
101101
horizontal = 56.dp,
102-
)
103-
.clickableSingle(onClick = onTextButtonClick),
102+
),
104103
text = textButtonText,
105104
style = NekiTheme.typography.body14Regular,
106105
color = NekiTheme.colorScheme.primary600,

‎core/designsystem/src/main/java/com/neki/android/core/designsystem/dialog/WarningDialog.kt‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.neki.android.core.designsystem.dialog
22

3+
import androidx.compose.foundation.Image
34
import androidx.compose.foundation.background
45
import androidx.compose.foundation.layout.Arrangement
56
import androidx.compose.foundation.layout.Box
@@ -14,8 +15,8 @@ import androidx.compose.runtime.Composable
1415
import androidx.compose.ui.Alignment
1516
import androidx.compose.ui.Modifier
1617
import androidx.compose.ui.draw.clip
17-
import androidx.compose.ui.graphics.Color
1818
import androidx.compose.ui.graphics.vector.ImageVector
19+
import androidx.compose.ui.res.painterResource
1920
import androidx.compose.ui.res.vectorResource
2021
import androidx.compose.ui.text.style.TextAlign
2122
import androidx.compose.ui.unit.dp
@@ -62,12 +63,11 @@ fun WarningDialog(
6263
horizontalAlignment = Alignment.CenterHorizontally,
6364
verticalArrangement = Arrangement.spacedBy(12.dp),
6465
) {
65-
Icon(
66-
imageVector = ImageVector.vectorResource(R.drawable.icon_dialog_alert),
67-
tint = Color.Unspecified,
66+
Image(
67+
modifier = Modifier.size(64.dp),
68+
painter = painterResource(R.drawable.image_dialog_alert),
6869
contentDescription = null,
6970
)
70-
7171
Text(
7272
text = content,
7373
style = NekiTheme.typography.body14Regular,

‎core/designsystem/src/main/res/drawable/icon_dialog_alert.xml‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎core/designsystem/src/main/res/drawable/image_dialog_alert.png‎

14.1 KB
Loading

0 commit comments

Comments
 (0)