Skip to content

Commit 140d054

Browse files
chanho0908chanho0908
authored
Merge pull request #125 from YAPP-Github/refactor/#124-photolog-qa
인증샷 화면 QA 1차 반영
2 parents 5555f62 + 082ae06 commit 140d054

File tree

32 files changed

+832
-539
lines changed

32 files changed

+832
-539
lines changed

‎core/design-system/src/main/java/com/twix/designsystem/components/button/AppRoundButton.kt‎

Lines changed: 120 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ package com.twix.designsystem.components.button
33
import androidx.compose.foundation.background
44
import androidx.compose.foundation.border
55
import androidx.compose.foundation.layout.Box
6-
import androidx.compose.foundation.layout.Column
7-
import androidx.compose.foundation.layout.Spacer
8-
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.fillMaxWidth
97
import androidx.compose.foundation.layout.height
108
import androidx.compose.foundation.layout.offset
119
import androidx.compose.foundation.layout.width
@@ -14,8 +12,11 @@ import androidx.compose.runtime.Composable
1412
import androidx.compose.ui.Alignment
1513
import androidx.compose.ui.Modifier
1614
import androidx.compose.ui.graphics.Color
15+
import androidx.compose.ui.res.stringResource
1716
import androidx.compose.ui.tooling.preview.Preview
17+
import androidx.compose.ui.unit.Dp
1818
import androidx.compose.ui.unit.dp
19+
import com.twix.designsystem.R
1920
import com.twix.designsystem.components.text.AppText
2021
import com.twix.designsystem.theme.CommonColor
2122
import com.twix.designsystem.theme.GrayColor
@@ -24,85 +25,141 @@ import com.twix.domain.model.enums.AppTextStyle
2425

2526
@Composable
2627
fun AppRoundButton(
27-
text: String,
28-
textColor: Color,
29-
backgroundColor: Color,
30-
modifier: Modifier = Modifier,
31-
textStyle: AppTextStyle = AppTextStyle.T2,
32-
borderColor: Color = GrayColor.C500,
33-
hasBorder: Boolean = true,
28+
contentHeight: Dp,
29+
contentColor: Color,
30+
contentBorderColor: Color,
31+
contentBorderWidth: Dp,
32+
shadowHeight: Dp,
33+
shadowOffset: Dp,
34+
modifier: Modifier,
35+
content: @Composable () -> Unit,
3436
) {
35-
Box(
36-
modifier = modifier,
37-
) {
38-
if (hasBorder) {
39-
Box(
40-
modifier =
41-
Modifier
42-
.fillMaxSize()
43-
.offset(y = 4.dp)
44-
.background(
45-
color = borderColor,
46-
shape = RoundedCornerShape(100),
47-
),
48-
)
49-
}
37+
val shape = RoundedCornerShape(999.dp)
38+
39+
Box(modifier = modifier) {
40+
Box(
41+
modifier =
42+
Modifier
43+
.fillMaxWidth()
44+
.height(shadowHeight)
45+
.offset(y = shadowOffset)
46+
.background(color = contentBorderColor, shape = shape),
47+
)
5048

5149
Box(
5250
modifier =
5351
Modifier
54-
.fillMaxSize()
55-
.background(
56-
color = backgroundColor,
57-
shape = RoundedCornerShape(100),
58-
).then(
59-
if (hasBorder) {
60-
Modifier.border(
61-
width = 1.dp,
62-
color = borderColor,
63-
shape = RoundedCornerShape(100),
64-
)
65-
} else {
66-
Modifier
67-
},
52+
.fillMaxWidth()
53+
.height(contentHeight)
54+
.background(color = contentColor, shape = shape)
55+
.border(
56+
color = contentBorderColor,
57+
shape = shape,
58+
width = contentBorderWidth,
6859
),
6960
contentAlignment = Alignment.Center,
61+
) {
62+
content()
63+
}
64+
}
65+
}
66+
67+
@Preview(showBackground = true)
68+
@Composable
69+
private fun WhiteAppRoundButtonPreview() {
70+
TwixTheme {
71+
AppRoundButton(
72+
modifier =
73+
Modifier
74+
.width(150.dp)
75+
.height(74.dp),
76+
contentColor = CommonColor.White,
77+
contentHeight = 68.dp,
78+
contentBorderColor = GrayColor.C500,
79+
contentBorderWidth = 1.6.dp,
80+
shadowHeight = 70.dp,
81+
shadowOffset = 4.dp,
7082
) {
7183
AppText(
72-
style = textStyle,
73-
color = textColor,
74-
text = text,
84+
style = AppTextStyle.T2,
85+
color = GrayColor.C500,
86+
text = "버튼 이름",
7587
)
7688
}
7789
}
7890
}
7991

8092
@Preview(showBackground = true)
8193
@Composable
82-
fun AppRoundButtonPreview() {
94+
private fun PokeAppRoundButtonPreview() {
95+
TwixTheme {
96+
AppRoundButton(
97+
modifier =
98+
Modifier
99+
.width(64.dp)
100+
.height(32.dp),
101+
contentColor = CommonColor.White,
102+
contentHeight = 28.dp,
103+
contentBorderColor = GrayColor.C500,
104+
contentBorderWidth = 1.dp,
105+
shadowHeight = 31.dp,
106+
shadowOffset = 1.dp,
107+
) {
108+
AppText(
109+
style = AppTextStyle.C2,
110+
color = GrayColor.C500,
111+
text = "찌르기!",
112+
)
113+
}
114+
}
115+
}
116+
117+
@Preview(showBackground = true, backgroundColor = 0xFF000000)
118+
@Composable
119+
private fun BlackAppRoundButtonPreview() {
83120
TwixTheme {
84-
Column {
85-
AppRoundButton(
86-
modifier =
87-
Modifier
88-
.width(330.dp)
89-
.height(68.dp),
90-
text = "버튼임니다",
91-
textColor = GrayColor.C500,
92-
backgroundColor = CommonColor.White,
121+
AppRoundButton(
122+
modifier =
123+
Modifier
124+
.width(150.dp)
125+
.height(74.dp),
126+
contentColor = GrayColor.C500,
127+
contentHeight = 68.dp,
128+
contentBorderColor = CommonColor.White,
129+
contentBorderWidth = 1.6.dp,
130+
shadowHeight = 70.dp,
131+
shadowOffset = 4.dp,
132+
) {
133+
AppText(
134+
style = AppTextStyle.T2,
135+
color = CommonColor.White,
136+
text = "버튼 이름",
93137
)
94-
Spacer(modifier = Modifier.height(10.dp))
95-
AppRoundButton(
96-
modifier =
97-
Modifier
98-
.width(330.dp)
99-
.height(68.dp),
100-
text = "버튼임니다",
101-
textColor = CommonColor.White,
102-
backgroundColor = GrayColor.C500,
103-
hasBorder = false,
138+
}
139+
}
140+
}
141+
142+
@Preview(showBackground = true)
143+
@Composable
144+
private fun LongAppRoundButtonPreview() {
145+
TwixTheme {
146+
AppRoundButton(
147+
modifier =
148+
Modifier
149+
.width(330.dp)
150+
.height(70.dp),
151+
contentColor = CommonColor.White,
152+
contentHeight = 68.dp,
153+
contentBorderColor = GrayColor.C500,
154+
contentBorderWidth = 1.6.dp,
155+
shadowHeight = 70.dp,
156+
shadowOffset = 4.dp,
157+
) {
158+
AppText(
159+
style = AppTextStyle.T2,
160+
color = GrayColor.C500,
161+
text = stringResource(R.string.photolog_editor_retake),
104162
)
105-
Spacer(modifier = Modifier.height(10.dp))
106163
}
107164
}
108165
}

0 commit comments

Comments
 (0)