Skip to content

Commit a398eda

Browse files
HI-JIN2HI-JIN2
authored
[Feat] Snackbar, Dialog를 compose component로 만들어요 (#419)
* chore: color chart * chore: Dialog * feat: snack bar * chore: rename to snackbar * fix: Dialog 컴포넌트 누락된 icon 표시 및 취소 버튼 클릭 이벤트 수정 * fix: icon 미사용으로 삭제 * feat: snackbar에 icon 추가
1 parent c38355f commit a398eda

4 files changed

Lines changed: 464 additions & 0 deletions

File tree

‎core/design-system/build.gradle.kts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ android {
4040
}
4141

4242
dependencies {
43+
implementation(project(":core:common"))
4344

4445
implementation(libs.androidx.core.ktx)
4546
implementation(libs.androidx.appcompat)

‎core/design-system/src/main/java/com/eatssu/design_system/component/EatSsuDialog.kt‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
package com.eatssu.design_system.component
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.shape.RoundedCornerShape
9+
import androidx.compose.material3.BasicAlertDialog
10+
import androidx.compose.material3.Button
11+
import androidx.compose.material3.ButtonDefaults
12+
import androidx.compose.material3.ExperimentalMaterial3Api
13+
import androidx.compose.material3.MaterialTheme
14+
import androidx.compose.material3.Surface
15+
import androidx.compose.material3.Text
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.ui.Alignment
18+
import androidx.compose.ui.Modifier
19+
import androidx.compose.ui.graphics.Color
20+
import androidx.compose.ui.tooling.preview.Preview
21+
import androidx.compose.ui.unit.dp
22+
import com.eatssu.design_system.theme.Black
23+
import com.eatssu.design_system.theme.Danger
24+
import com.eatssu.design_system.theme.EatssuTheme
25+
import com.eatssu.design_system.theme.Gray200
26+
import com.eatssu.design_system.theme.Gray600
27+
import com.eatssu.design_system.theme.White
28+
29+
@OptIn(ExperimentalMaterial3Api::class)
30+
@Composable
31+
fun EatSsuDialog(
32+
title: String,
33+
description: String,
34+
confirmText: String,
35+
onConfirmClick: () -> Unit,
36+
onDismissRequest: () -> Unit,
37+
modifier: Modifier = Modifier,
38+
dismissText: String? = null,
39+
onDismissButtonClick: (() -> Unit)? = null,
40+
) {
41+
BasicAlertDialog(
42+
onDismissRequest = onDismissRequest,
43+
) {
44+
Surface(
45+
modifier = modifier,
46+
shape = RoundedCornerShape(28.dp),
47+
color = White
48+
) {
49+
Column(
50+
modifier = Modifier
51+
.padding(horizontal = 18.dp, vertical = 18.dp),
52+
verticalArrangement = Arrangement.spacedBy(16.dp),
53+
horizontalAlignment = Alignment.CenterHorizontally
54+
) {
55+
Column(
56+
verticalArrangement = Arrangement.spacedBy(8.dp),
57+
horizontalAlignment = Alignment.CenterHorizontally
58+
) {
59+
Text(
60+
text = title,
61+
style = EatssuTheme.typography.h2,
62+
color = MaterialTheme.colorScheme.onSurface
63+
)
64+
Text(
65+
text = description,
66+
style = EatssuTheme.typography.subtitle2,
67+
color = Gray600
68+
)
69+
}
70+
71+
Row(
72+
modifier = Modifier.fillMaxWidth(),
73+
horizontalArrangement = Arrangement.spacedBy(8.dp),
74+
verticalAlignment = Alignment.CenterVertically
75+
) {
76+
if (!dismissText.isNullOrBlank()) {
77+
Button(
78+
modifier = Modifier.weight(1f),
79+
onClick = { onDismissButtonClick?.invoke() ?: onDismissRequest() },
80+
shape = RoundedCornerShape(12.dp),
81+
colors = ButtonDefaults.buttonColors(
82+
containerColor = Gray200,
83+
contentColor = Black
84+
)
85+
) {
86+
Text(
87+
text = dismissText,
88+
style = EatssuTheme.typography.button2
89+
)
90+
}
91+
}
92+
93+
Button(
94+
modifier = Modifier.weight(1f),
95+
onClick = onConfirmClick,
96+
shape = RoundedCornerShape(12.dp),
97+
colors = ButtonDefaults.buttonColors(
98+
containerColor = MaterialTheme.colorScheme.primary,
99+
contentColor = Color.White
100+
)
101+
) {
102+
Text(
103+
text = confirmText,
104+
style = EatssuTheme.typography.button2
105+
)
106+
}
107+
}
108+
}
109+
}
110+
}
111+
}
112+
113+
@OptIn(ExperimentalMaterial3Api::class)
114+
@Composable
115+
fun EatSsuWarningDialog(
116+
title: String,
117+
description: String,
118+
confirmText: String,
119+
dismissText: String,
120+
onConfirmClick: () -> Unit,
121+
onDismissRequest: () -> Unit,
122+
modifier: Modifier = Modifier,
123+
onDismissButtonClick: (() -> Unit)? = null,
124+
) {
125+
BasicAlertDialog(
126+
onDismissRequest = onDismissRequest,
127+
) {
128+
Surface(
129+
modifier = modifier,
130+
shape = RoundedCornerShape(28.dp),
131+
color = White
132+
) {
133+
Column(
134+
modifier = Modifier
135+
.padding(horizontal = 18.dp, vertical = 18.dp),
136+
verticalArrangement = Arrangement.spacedBy(16.dp),
137+
horizontalAlignment = Alignment.CenterHorizontally
138+
) {
139+
Column(
140+
verticalArrangement = Arrangement.spacedBy(8.dp),
141+
horizontalAlignment = Alignment.CenterHorizontally
142+
) {
143+
Text(
144+
text = title,
145+
style = EatssuTheme.typography.h2,
146+
color = MaterialTheme.colorScheme.onSurface
147+
)
148+
Text(
149+
text = description,
150+
style = EatssuTheme.typography.subtitle2,
151+
color = Gray600
152+
)
153+
}
154+
155+
Row(
156+
modifier = Modifier.fillMaxWidth(),
157+
horizontalArrangement = Arrangement.spacedBy(8.dp),
158+
verticalAlignment = Alignment.CenterVertically
159+
) {
160+
Button(
161+
modifier = Modifier.weight(1f),
162+
onClick = onConfirmClick,
163+
shape = RoundedCornerShape(12.dp),
164+
colors = ButtonDefaults.buttonColors(
165+
containerColor = Danger,
166+
contentColor = White
167+
)
168+
) {
169+
Text(
170+
text = confirmText,
171+
style = EatssuTheme.typography.button2
172+
)
173+
}
174+
175+
Button(
176+
modifier = Modifier.weight(1f),
177+
onClick = { onDismissButtonClick?.invoke() ?: onDismissRequest() },
178+
shape = RoundedCornerShape(12.dp),
179+
colors = ButtonDefaults.buttonColors(
180+
containerColor = Gray200,
181+
contentColor = Black
182+
)
183+
) {
184+
Text(
185+
text = dismissText,
186+
style = EatssuTheme.typography.button2
187+
)
188+
}
189+
}
190+
}
191+
}
192+
}
193+
}
194+
195+
@Preview
196+
@Composable
197+
private fun EatSsuDialogPreview() {
198+
EatssuTheme {
199+
EatSsuDialog(
200+
title = "리뷰를 삭제하시겠어요?",
201+
description = "삭제한 리뷰는 다시 복구할 수 없습니다.",
202+
confirmText = "확인",
203+
dismissText = "취소",
204+
onConfirmClick = {},
205+
onDismissRequest = {}
206+
)
207+
}
208+
}
209+
210+
@Preview
211+
@Composable
212+
private fun EatSsuDialog1Preview() {
213+
EatssuTheme {
214+
EatSsuDialog(
215+
title = "리뷰를 삭제하시겠어요?",
216+
description = "삭제한 리뷰는 다시 복구할 수 없습니다.",
217+
confirmText = "확인",
218+
onConfirmClick = {},
219+
onDismissRequest = {}
220+
)
221+
}
222+
}
223+
224+
@Preview
225+
@Composable
226+
private fun EatSsuDangerDialogPreview() {
227+
EatssuTheme {
228+
EatSsuWarningDialog(
229+
title = "리뷰를 삭제하시겠어요?",
230+
description = "삭제한 리뷰는 다시 복구할 수 없습니다.",
231+
confirmText = "확인",
232+
dismissText = "취소",
233+
onConfirmClick = {},
234+
onDismissRequest = {}
235+
)
236+
}
237+
}

0 commit comments

Comments
 (0)