Skip to content

Commit 9eea60e

Browse files
easyhoooneasyhooon
committed
[BOOK-183] refactor: OnboardingPage 컴포넌트화
반복되는 코드 컴포넌트로 빼냄 step -> page로 네이밍 통일 code style check success
1 parent e6d095c commit 9eea60e

File tree

8 files changed

+98
-101
lines changed

8 files changed

+98
-101
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ fun ResourceImage(
4444
private fun ResourceImagePreview() {
4545
ReedTheme {
4646
ResourceImage(
47-
imageRes = 0,
47+
imageRes = R.drawable.ic_placeholder,
4848
contentDescription = "",
4949
placeholder = painterResource(R.drawable.ic_placeholder),
5050
)

‎feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementUi.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ package com.ninecraft.booket.feature.termsagreement
22

33
import androidx.compose.foundation.background
44
import androidx.compose.foundation.border
5-
import androidx.compose.foundation.clickable
65
import androidx.compose.foundation.layout.Column
76
import androidx.compose.foundation.layout.Row
87
import androidx.compose.foundation.layout.Spacer

‎feature/onboarding/src/main/kotlin/com/ninecraft/booket/feature/onboarding/OnboardingPresenter.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ class OnboardingPresenter @AssistedInject constructor(
3131
fun handleEvent(event: OnboardingUiEvent) {
3232
when (event) {
3333
is OnboardingUiEvent.OnNextButtonClick -> {
34-
if (event.currentStep == 2) {
34+
if (event.currentPage == 2) {
3535
scope.launch {
3636
repository.setOnboardingCompleted(true)
3737
navigator.resetRoot(HomeScreen)
3838
}
3939
} else {
4040
pagerState.let { state ->
4141
scope.launch {
42-
state.animateScrollToPage(event.currentStep + 1)
42+
state.animateScrollToPage(event.currentPage + 1)
4343
}
4444
}
4545
}

‎feature/onboarding/src/main/kotlin/com/ninecraft/booket/feature/onboarding/OnboardingUi.kt‎

Lines changed: 19 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,18 @@ import androidx.compose.foundation.layout.height
88
import androidx.compose.foundation.layout.padding
99
import androidx.compose.foundation.pager.HorizontalPager
1010
import androidx.compose.foundation.pager.rememberPagerState
11-
import androidx.compose.material3.Text
1211
import androidx.compose.runtime.Composable
1312
import androidx.compose.ui.Alignment
1413
import androidx.compose.ui.Modifier
1514
import androidx.compose.ui.res.stringResource
16-
import androidx.compose.ui.text.style.TextAlign
1715
import androidx.compose.ui.unit.dp
18-
import com.ninecraft.booket.core.common.utils.HighlightedText
1916
import com.ninecraft.booket.core.designsystem.DevicePreview
20-
import com.ninecraft.booket.core.designsystem.component.ResourceImage
2117
import com.ninecraft.booket.core.designsystem.component.button.ReedButton
2218
import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle
2319
import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle
24-
import com.ninecraft.booket.core.designsystem.theme.Black
2520
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
2621
import com.ninecraft.booket.core.ui.component.ReedFullScreen
22+
import com.ninecraft.booket.feature.onboarding.component.OnboardingPage
2723
import com.ninecraft.booket.feature.onboarding.component.PagerIndicator
2824
import com.ninecraft.booket.feature.screens.OnboardingScreen
2925
import com.slack.circuit.codegen.annotations.CircuitInject
@@ -46,96 +42,30 @@ internal fun OnboardingUi(
4642
) { page ->
4743
when (page) {
4844
0 -> {
49-
Column(
50-
modifier = Modifier.fillMaxSize(),
51-
horizontalAlignment = Alignment.CenterHorizontally,
52-
) {
53-
Spacer(modifier = Modifier.weight(1f))
54-
ResourceImage(
55-
imageRes = R.drawable.img_onboarding_second_graphic,
56-
contentDescription = "Onboarding First Graphic",
57-
)
58-
Text(
59-
text = HighlightedText(
60-
fullText = stringResource(R.string.onboarding_first_step_title),
61-
highlightText = stringResource(R.string.onboarding_first_highlight_text),
62-
highlightColor = ReedTheme.colors.bgPrimary,
63-
),
64-
color = Black,
65-
textAlign = TextAlign.Center,
66-
style = ReedTheme.typography.heading1Bold,
67-
)
68-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
69-
Text(
70-
text = stringResource(R.string.onboarding_first_step_description),
71-
color = ReedTheme.colors.contentTertiary,
72-
textAlign = TextAlign.Center,
73-
style = ReedTheme.typography.body2Medium,
74-
)
75-
Spacer(modifier = Modifier.weight(1f))
76-
}
45+
OnboardingPage(
46+
imageRes = R.drawable.img_onboarding_second_graphic,
47+
titleRes = R.string.onboarding_first_page_title,
48+
highlightTextRes = R.string.onboarding_first_highlight_text,
49+
descriptionRes = R.string.onboarding_first_page_description,
50+
)
7751
}
7852

7953
1 -> {
80-
Column(
81-
modifier = Modifier.fillMaxSize(),
82-
horizontalAlignment = Alignment.CenterHorizontally,
83-
) {
84-
Spacer(modifier = Modifier.weight(1f))
85-
ResourceImage(
86-
imageRes = R.drawable.img_onboarding_second_graphic,
87-
contentDescription = "Onboarding Second Graphic",
88-
)
89-
Text(
90-
text = HighlightedText(
91-
fullText = stringResource(R.string.onboarding_second_step_title),
92-
highlightText = stringResource(R.string.onboarding_second_highlight_text),
93-
highlightColor = ReedTheme.colors.bgPrimary,
94-
),
95-
color = Black,
96-
textAlign = TextAlign.Center,
97-
style = ReedTheme.typography.heading1Bold,
98-
)
99-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
100-
Text(
101-
text = stringResource(R.string.onboarding_second_step_description),
102-
color = ReedTheme.colors.contentTertiary,
103-
textAlign = TextAlign.Center,
104-
style = ReedTheme.typography.body2Medium,
105-
)
106-
Spacer(modifier = Modifier.weight(1f, fill = false))
107-
}
54+
OnboardingPage(
55+
imageRes = R.drawable.img_onboarding_second_graphic,
56+
titleRes = R.string.onboarding_second_page_title,
57+
highlightTextRes = R.string.onboarding_second_highlight_text,
58+
descriptionRes = R.string.onboarding_second_page_description,
59+
)
10860
}
10961

11062
2 -> {
111-
Column(
112-
modifier = Modifier.fillMaxSize(),
113-
horizontalAlignment = Alignment.CenterHorizontally,
114-
) {
115-
Spacer(modifier = Modifier.weight(1f))
116-
ResourceImage(
117-
imageRes = R.drawable.img_onboarding_second_graphic,
118-
contentDescription = "Onboarding Third Graphic",
119-
)
120-
Text(
121-
text = HighlightedText(
122-
fullText = stringResource(R.string.onboarding_third_step_title),
123-
highlightText = stringResource(R.string.onboarding_third_highlight_text),
124-
highlightColor = ReedTheme.colors.bgPrimary,
125-
),
126-
color = Black,
127-
textAlign = TextAlign.Center,
128-
style = ReedTheme.typography.heading1Bold,
129-
)
130-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
131-
Text(
132-
text = stringResource(R.string.onboarding_third_step_description),
133-
color = ReedTheme.colors.contentTertiary,
134-
textAlign = TextAlign.Center,
135-
style = ReedTheme.typography.body2Medium,
136-
)
137-
Spacer(modifier = Modifier.weight(1f))
138-
}
63+
OnboardingPage(
64+
imageRes = R.drawable.img_onboarding_second_graphic,
65+
titleRes = R.string.onboarding_third_page_title,
66+
highlightTextRes = R.string.onboarding_third_highlight_text,
67+
descriptionRes = R.string.onboarding_third_page_description,
68+
)
13969
}
14070
}
14171
}

‎feature/onboarding/src/main/kotlin/com/ninecraft/booket/feature/onboarding/OnboardingUiState.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ data class OnboardingUiState(
1010
) : CircuitUiState
1111

1212
sealed interface OnboardingUiEvent : CircuitUiEvent {
13-
data class OnNextButtonClick(val currentStep: Int) : OnboardingUiEvent
13+
data class OnNextButtonClick(val currentPage: Int) : OnboardingUiEvent
1414
}

‎feature/onboarding/src/main/kotlin/com/ninecraft/booket/feature/onboarding/component/OnboardingPage.kt‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
package com.ninecraft.booket.feature.onboarding.component
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.Spacer
5+
import androidx.compose.foundation.layout.fillMaxSize
6+
import androidx.compose.foundation.layout.height
7+
import androidx.compose.material3.Text
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Alignment
10+
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.res.stringResource
12+
import androidx.compose.ui.text.style.TextAlign
13+
import com.ninecraft.booket.core.common.utils.HighlightedText
14+
import com.ninecraft.booket.core.designsystem.ComponentPreview
15+
import com.ninecraft.booket.core.designsystem.component.ResourceImage
16+
import com.ninecraft.booket.core.designsystem.theme.Black
17+
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
18+
import com.ninecraft.booket.feature.onboarding.R
19+
20+
@Composable
21+
internal fun OnboardingPage(
22+
imageRes: Int,
23+
titleRes: Int,
24+
highlightTextRes: Int,
25+
descriptionRes: Int,
26+
) {
27+
Column(
28+
modifier = Modifier.fillMaxSize(),
29+
horizontalAlignment = Alignment.CenterHorizontally,
30+
) {
31+
Spacer(modifier = Modifier.weight(1f))
32+
ResourceImage(
33+
imageRes = imageRes,
34+
contentDescription = "Onboarding Second Graphic",
35+
)
36+
Text(
37+
text = HighlightedText(
38+
fullText = stringResource(titleRes),
39+
highlightText = stringResource(highlightTextRes),
40+
highlightColor = ReedTheme.colors.bgPrimary,
41+
),
42+
color = Black,
43+
textAlign = TextAlign.Center,
44+
style = ReedTheme.typography.heading1Bold,
45+
)
46+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
47+
Text(
48+
text = stringResource(descriptionRes),
49+
color = ReedTheme.colors.contentTertiary,
50+
textAlign = TextAlign.Center,
51+
style = ReedTheme.typography.body2Medium,
52+
)
53+
Spacer(modifier = Modifier.weight(1f, fill = false))
54+
}
55+
}
56+
57+
@ComponentPreview
58+
@Composable
59+
private fun OnboardingPagePreview() {
60+
ReedTheme {
61+
OnboardingPage(
62+
imageRes = R.drawable.img_onboarding_second_graphic,
63+
titleRes = R.string.onboarding_first_page_title,
64+
highlightTextRes = R.string.onboarding_first_highlight_text,
65+
descriptionRes = R.string.onboarding_first_page_description,
66+
)
67+
}
68+
}

‎feature/onboarding/src/main/kotlin/com/ninecraft/booket/feature/onboarding/component/PagerIndicator.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ private fun PagerIndicatorPreview() {
5656

5757
ReedTheme {
5858
PagerIndicator(
59-
pageCount = 2,
59+
pageCount = pageCount,
6060
pagerState = pagerState,
6161
)
6262
}

‎feature/onboarding/src/main/res/values/strings.xml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
33
<string name="next">다음</string>
4-
<string name="onboarding_first_step_title">읽고 있는 책을 등록하고\n바로 기록해보세요</string>
5-
<string name="onboarding_first_step_description">책을 덮기 전, 마음에 남은 문장과\n감정을 간편하게 남길 수 있어요</string>
6-
<string name="onboarding_second_step_title">어떻게 쓸지 막막할땐,\n감상평 가이드가 도와드려요</string>
7-
<string name="onboarding_second_step_description">감정과 생각을 이끌어주는\n문장들이 기록을 자연스럽게 도와줘요</string>
8-
<string name="onboarding_third_step_title">독서 중 느낀 감정은\n씨앗으로 남겨보세요</string>
9-
<string name="onboarding_third_step_description">책마다 쌓인 감정들은\n나만의 독서에 흔적이 됩니다</string>
4+
<string name="onboarding_first_page_title">읽고 있는 책을 등록하고\n바로 기록해보세요</string>
5+
<string name="onboarding_first_page_description">책을 덮기 전, 마음에 남은 문장과\n감정을 간편하게 남길 수 있어요</string>
6+
<string name="onboarding_second_page_title">어떻게 쓸지 막막할땐,\n감상평 가이드가 도와드려요</string>
7+
<string name="onboarding_second_page_description">감정과 생각을 이끌어주는\n문장들이 기록을 자연스럽게 도와줘요</string>
8+
<string name="onboarding_third_page_title">독서 중 느낀 감정은\n씨앗으로 남겨보세요</string>
9+
<string name="onboarding_third_page_description">책마다 쌓인 감정들은\n나만의 독서에 흔적이 됩니다</string>
1010
<string name="onboarding_first_highlight_text">기록</string>
1111
<string name="onboarding_second_highlight_text">감상평 가이드</string>
1212
<string name="onboarding_third_highlight_text">씨앗</string>

0 commit comments

Comments
 (0)