Skip to content

Commit 5f49de6

Browse files
seoyoon513seoyoon513
authored
Merge pull request #32 from YAPP-Github/BOOK-61-feature/#13
feat: DesignSystem 초기 구성
2 parents a2bacb3 + 75e676f commit 5f49de6

File tree

49 files changed

+1470
-280
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1470
-280
lines changed

‎core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/Button.kt‎

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

‎core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
package com.ninecraft.booket.core.designsystem.component.appbar
2+
3+
import androidx.annotation.DrawableRes
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxHeight
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.width
12+
import androidx.compose.material3.Icon
13+
import androidx.compose.material3.IconButton
14+
import androidx.compose.material3.Text
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.res.painterResource
19+
import androidx.compose.ui.text.style.TextAlign
20+
import androidx.compose.ui.tooling.preview.Preview
21+
import androidx.compose.ui.unit.dp
22+
import com.ninecraft.booket.core.designsystem.R
23+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
24+
import com.ninecraft.booket.core.designsystem.theme.White
25+
26+
@Composable
27+
fun ReedTopAppBar(
28+
modifier: Modifier = Modifier,
29+
title: String = "",
30+
@DrawableRes startIconRes: Int? = null,
31+
startIconDescription: String = "",
32+
startIconOnClick: () -> Unit = {},
33+
@DrawableRes endIconRes: Int? = null,
34+
endIconDescription: String = "",
35+
endIconOnClick: () -> Unit = {},
36+
) {
37+
Row(
38+
modifier = modifier
39+
.fillMaxWidth()
40+
.height(56.dp)
41+
.background(color = White),
42+
verticalAlignment = Alignment.CenterVertically,
43+
horizontalArrangement = Arrangement.Start,
44+
) {
45+
if (startIconRes != null) {
46+
IconButton(
47+
onClick = { startIconOnClick() },
48+
modifier = Modifier
49+
.fillMaxHeight()
50+
.width(72.dp),
51+
) {
52+
Icon(
53+
painter = painterResource(id = startIconRes),
54+
contentDescription = startIconDescription,
55+
)
56+
}
57+
} else {
58+
Spacer(modifier = Modifier.width(72.dp))
59+
}
60+
61+
Text(
62+
text = title,
63+
style = ReedTheme.typography.heading2SemiBold,
64+
modifier = Modifier.weight(1f),
65+
textAlign = TextAlign.Center,
66+
)
67+
68+
if (endIconRes != null) {
69+
IconButton(
70+
onClick = { endIconOnClick() },
71+
modifier = Modifier
72+
.fillMaxHeight()
73+
.width(72.dp),
74+
) {
75+
Icon(
76+
painter = painterResource(id = endIconRes),
77+
contentDescription = endIconDescription,
78+
)
79+
}
80+
} else {
81+
Spacer(modifier = Modifier.width(72.dp))
82+
}
83+
}
84+
}
85+
86+
@Composable
87+
fun ReedBackTopAppBar(
88+
modifier: Modifier = Modifier,
89+
title: String = "",
90+
onNavigateBack: () -> Unit = {},
91+
) {
92+
ReedTopAppBar(
93+
modifier = modifier,
94+
title = title,
95+
startIconRes = R.drawable.ic_chevron_left,
96+
startIconDescription = "Back",
97+
startIconOnClick = onNavigateBack,
98+
)
99+
}
100+
101+
@Composable
102+
fun ReedCloseTopAppBar(
103+
modifier: Modifier = Modifier,
104+
title: String = "",
105+
onClose: () -> Unit = {},
106+
) {
107+
ReedTopAppBar(
108+
modifier = modifier,
109+
title = title,
110+
endIconRes = R.drawable.ic_close,
111+
endIconDescription = "Close",
112+
endIconOnClick = onClose,
113+
)
114+
}
115+
116+
@Preview
117+
@Composable
118+
private fun ReedTopAppBarPreview() {
119+
ReedTheme {
120+
ReedTopAppBar(
121+
title = "title",
122+
)
123+
}
124+
}
125+
126+
@Preview
127+
@Composable
128+
private fun ReedBackTopAppBarPreview() {
129+
ReedTheme {
130+
ReedBackTopAppBar(
131+
title = "title",
132+
)
133+
}
134+
}
135+
136+
@Preview
137+
@Composable
138+
private fun ReedCloseTopAppBarPreview() {
139+
ReedTheme {
140+
ReedCloseTopAppBar(
141+
title = "title",
142+
)
143+
}
144+
}

‎core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
package com.ninecraft.booket.core.designsystem.component.bottomsheet
2+
3+
import androidx.compose.foundation.layout.fillMaxWidth
4+
import androidx.compose.foundation.layout.padding
5+
import androidx.compose.foundation.shape.RoundedCornerShape
6+
import androidx.compose.material3.ExperimentalMaterial3Api
7+
import androidx.compose.material3.ModalBottomSheet
8+
import androidx.compose.material3.SheetState
9+
import androidx.compose.material3.SheetValue
10+
import androidx.compose.material3.rememberModalBottomSheetState
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.tooling.preview.Preview
14+
import androidx.compose.ui.unit.dp
15+
import com.ninecraft.booket.core.designsystem.component.button.ReedButton
16+
import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle
17+
import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle
18+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
19+
import com.ninecraft.booket.core.designsystem.theme.White
20+
21+
@OptIn(ExperimentalMaterial3Api::class)
22+
@Composable
23+
fun ReedBottomSheet(
24+
onDismissRequest: () -> Unit,
25+
modifier: Modifier = Modifier,
26+
sheetState: SheetState = rememberModalBottomSheetState(),
27+
content: @Composable () -> Unit,
28+
) {
29+
ModalBottomSheet(
30+
onDismissRequest = onDismissRequest,
31+
modifier = modifier,
32+
sheetState = sheetState,
33+
sheetGesturesEnabled = false,
34+
shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
35+
dragHandle = null,
36+
containerColor = White,
37+
) {
38+
content()
39+
}
40+
}
41+
42+
@OptIn(ExperimentalMaterial3Api::class)
43+
@Preview(showBackground = true)
44+
@Composable
45+
private fun ReedBottomSheetPreview() {
46+
val sheetState = SheetState(
47+
skipPartiallyExpanded = true,
48+
initialValue = SheetValue.Expanded,
49+
positionalThreshold = { 0f },
50+
velocityThreshold = { 0f },
51+
)
52+
ReedTheme {
53+
ReedBottomSheet(
54+
sheetState = sheetState,
55+
onDismissRequest = {},
56+
) {
57+
ReedButton(
58+
onClick = {},
59+
modifier = Modifier.padding(10.dp).fillMaxWidth(),
60+
colorStyle = ReedButtonColorStyle.PRIMARY,
61+
sizeStyle = largeButtonStyle,
62+
text = "확인",
63+
)
64+
}
65+
}
66+
}

‎core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonColorStyle.kt‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
package com.ninecraft.booket.core.designsystem.component.button
2+
3+
import androidx.compose.runtime.Composable
4+
import com.ninecraft.booket.core.designsystem.theme.Kakao
5+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
6+
7+
enum class ReedButtonColorStyle {
8+
PRIMARY, SECONDARY, TERTIARY, KAKAO;
9+
10+
@Composable
11+
fun containerColor(isPressed: Boolean) = when (this) {
12+
PRIMARY -> if (isPressed) ReedTheme.colors.bgPrimaryPressed else ReedTheme.colors.bgPrimary
13+
SECONDARY -> if (isPressed) ReedTheme.colors.bgSecondaryPressed else ReedTheme.colors.bgSecondary
14+
TERTIARY -> if (isPressed) ReedTheme.colors.bgTertiaryPressed else ReedTheme.colors.bgTertiary
15+
KAKAO -> Kakao
16+
}
17+
18+
@Composable
19+
fun contentColor() = when (this) {
20+
PRIMARY -> ReedTheme.colors.contentInverse
21+
SECONDARY -> ReedTheme.colors.contentPrimary
22+
TERTIARY -> ReedTheme.colors.contentBrand
23+
KAKAO -> ReedTheme.colors.contentPrimary
24+
}
25+
26+
@Composable
27+
fun disabledContainerColor() = ReedTheme.colors.bgDisabled
28+
29+
@Composable
30+
fun disabledContentColor() = ReedTheme.colors.contentDisabled
31+
}

0 commit comments

Comments
 (0)