Skip to content

Commit 21c99a4

Browse files
seoyoon513seoyoon513
authored
Merge pull request #236 from YAPP-Github/BOOK-477-feature/#235
feat: 독서 기록 플로우 UI/UX 개편
2 parents de8b84c + fa5db3f commit 21c99a4

19 files changed

Lines changed: 1157 additions & 24 deletions

File tree

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,19 @@ val Emotion.graphicRes: Int
3434
Emotion.SAD -> R.drawable.img_emotion_sadness
3535
Emotion.INSIGHT -> R.drawable.img_emotion_insight
3636
}
37+
38+
val Emotion.graphicResV2: Int
39+
get() = when (this) {
40+
Emotion.WARM -> R.drawable.img_category_warm
41+
Emotion.JOY -> R.drawable.img_category_joy
42+
Emotion.SAD -> R.drawable.img_category_sad
43+
Emotion.INSIGHT -> R.drawable.img_category_insight
44+
}
45+
46+
val Emotion.descriptionRes: Int
47+
get() = when (this) {
48+
Emotion.WARM -> R.string.emotion_warm_description
49+
Emotion.JOY -> R.string.emotion_joy_description
50+
Emotion.SAD -> R.string.emotion_sad_description
51+
Emotion.INSIGHT -> R.string.emotion_insight_description
52+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
package com.ninecraft.booket.core.designsystem.component.chip
2+
3+
import androidx.compose.foundation.layout.PaddingValues
4+
import androidx.compose.runtime.Composable
5+
import androidx.compose.ui.text.TextStyle
6+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
7+
8+
data class ChipSizeStyle(
9+
val paddingValues: PaddingValues,
10+
val textStyle: TextStyle,
11+
)
12+
13+
val mediumChipStyle: ChipSizeStyle
14+
@Composable get() = ChipSizeStyle(
15+
paddingValues = PaddingValues(
16+
horizontal = ReedTheme.spacing.spacing3,
17+
vertical = ReedTheme.spacing.spacing2,
18+
),
19+
textStyle = ReedTheme.typography.body2Medium,
20+
)
21+
22+
val smallChipStyle: ChipSizeStyle
23+
@Composable get() = ChipSizeStyle(
24+
paddingValues = PaddingValues(
25+
horizontal = ReedTheme.spacing.spacing3,
26+
vertical = ReedTheme.spacing.spacing15,
27+
),
28+
textStyle = ReedTheme.typography.label1Medium,
29+
)

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
package com.ninecraft.booket.core.designsystem.component.chip
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.Spacer
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.foundation.layout.width
10+
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.material3.Icon
12+
import androidx.compose.material3.Text
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.ui.Alignment
15+
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.draw.clip
17+
import androidx.compose.ui.graphics.vector.ImageVector
18+
import androidx.compose.ui.res.vectorResource
19+
import androidx.compose.ui.unit.dp
20+
import com.ninecraft.booket.core.common.extensions.noRippleClickable
21+
import com.ninecraft.booket.core.designsystem.ComponentPreview
22+
import com.ninecraft.booket.core.designsystem.R
23+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
24+
25+
@Composable
26+
fun ReedRemovableChip(
27+
label: String,
28+
chipSizeStyle: ChipSizeStyle,
29+
onRemove: () -> Unit,
30+
modifier: Modifier = Modifier,
31+
) {
32+
val cornerShape = RoundedCornerShape(ReedTheme.radius.full)
33+
34+
Row(
35+
modifier = modifier
36+
.clip(cornerShape)
37+
.background(color = ReedTheme.colors.bgTertiary)
38+
.border(
39+
width = 1.dp,
40+
color = ReedTheme.colors.borderBrand,
41+
shape = cornerShape,
42+
)
43+
.padding(chipSizeStyle.paddingValues),
44+
verticalAlignment = Alignment.CenterVertically,
45+
) {
46+
Text(
47+
text = label,
48+
color = ReedTheme.colors.contentBrand,
49+
style = chipSizeStyle.textStyle,
50+
)
51+
Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing1))
52+
Icon(
53+
imageVector = ImageVector.vectorResource(R.drawable.ic_close),
54+
contentDescription = "Icon Close",
55+
tint = ReedTheme.colors.contentBrand,
56+
modifier = Modifier
57+
.size(14.dp)
58+
.noRippleClickable {
59+
onRemove()
60+
},
61+
)
62+
}
63+
}
64+
65+
@ComponentPreview
66+
@Composable
67+
private fun ReedRemovableChipPreview() {
68+
ReedTheme {
69+
ReedRemovableChip(
70+
label = "text",
71+
chipSizeStyle = mediumChipStyle,
72+
onRemove = {},
73+
)
74+
}
75+
}

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
package com.ninecraft.booket.core.designsystem.component.chip
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.padding
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.unit.dp
16+
import com.ninecraft.booket.core.common.extensions.noRippleClickable
17+
import com.ninecraft.booket.core.designsystem.ComponentPreview
18+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
19+
20+
@Composable
21+
fun ReedSelectableChip(
22+
label: String,
23+
chipSizeStyle: ChipSizeStyle,
24+
selected: Boolean,
25+
onClick: () -> Unit,
26+
modifier: Modifier = Modifier,
27+
) {
28+
val cornerShape = RoundedCornerShape(ReedTheme.radius.full)
29+
val backgroundColor = if (selected) ReedTheme.colors.bgTertiary else ReedTheme.colors.basePrimary
30+
val borderColor = if (selected) ReedTheme.colors.borderBrand else ReedTheme.colors.borderPrimary
31+
val textColor = if (selected) ReedTheme.colors.contentBrand else ReedTheme.colors.contentSecondary
32+
33+
Row(
34+
modifier = modifier
35+
.clip(cornerShape)
36+
.background(color = backgroundColor)
37+
.noRippleClickable {
38+
onClick()
39+
}
40+
.border(
41+
width = 1.dp,
42+
color = borderColor,
43+
shape = cornerShape,
44+
)
45+
.padding(chipSizeStyle.paddingValues),
46+
verticalAlignment = Alignment.CenterVertically,
47+
) {
48+
Text(
49+
text = label,
50+
color = textColor,
51+
style = chipSizeStyle.textStyle,
52+
)
53+
}
54+
}
55+
56+
@ComponentPreview
57+
@Composable
58+
private fun ReedSelectableChipPreview() {
59+
ReedTheme {
60+
Column(
61+
verticalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing1),
62+
) {
63+
ReedSelectableChip(
64+
label = "text",
65+
chipSizeStyle = mediumChipStyle,
66+
selected = false,
67+
onClick = {},
68+
)
69+
ReedSelectableChip(
70+
label = "text",
71+
chipSizeStyle = mediumChipStyle,
72+
selected = true,
73+
onClick = {},
74+
)
75+
ReedSelectableChip(
76+
label = "text",
77+
chipSizeStyle = smallChipStyle,
78+
selected = false,
79+
onClick = {},
80+
)
81+
ReedSelectableChip(
82+
label = "text",
83+
chipSizeStyle = smallChipStyle,
84+
selected = true,
85+
onClick = {},
86+
)
87+
}
88+
}
89+
}

‎core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ data class ReedSpacing(
99
val spacing0: Dp = 0.dp,
1010
val spacing05: Dp = 2.dp,
1111
val spacing1: Dp = 4.dp,
12+
val spacing15: Dp = 6.dp,
1213
val spacing2: Dp = 8.dp,
1314
val spacing3: Dp = 12.dp,
1415
val spacing4: Dp = 16.dp,

‎core/designsystem/src/main/res/drawable/img_category_insight.webp‎

16 KB
Loading

‎core/designsystem/src/main/res/drawable/img_category_joy.webp‎

17.1 KB
Loading

‎core/designsystem/src/main/res/drawable/img_category_sad.webp‎

15.9 KB
Loading

‎core/designsystem/src/main/res/drawable/img_category_warm.webp‎

16.3 KB
Loading

‎core/designsystem/src/main/res/values/strings.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@
44
<string name="unknown_error_message">알 수 없는 오류가 발생하였습니다.</string>
55
<string name="search_book_hint">도서 검색 후 내 서재에 담아보세요</string>
66
<string name="login_required">로그인이 필요한 기능입니다</string>
7+
<string name="emotion_warm_description">공감과 위로가 된 순간</string>
8+
<string name="emotion_joy_description">흥미롭고 유쾌한 순간</string>
9+
<string name="emotion_sad_description">눈물이 고인 순간</string>
10+
<string name="emotion_insight_description">생각이 깊어지는 순간</string>
711
</resources>

0 commit comments

Comments
 (0)