Skip to content

Commit e872086

Browse files
easyhoooneasyhooon
authored
Merge pull request #130 from YAPP-Github/BOOK-247-fix/#129
feat: 앱내 전반적인 화면들에 대해 verticalScroll 적용하여 height가 작은 기기들 대응
2 parents 91b2d74 + f7c90d5 commit e872086

File tree

9 files changed

+315
-223
lines changed

9 files changed

+315
-223
lines changed

‎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
@@ -14,6 +14,7 @@ data class ReedSpacing(
1414
val spacing4: Dp = 16.dp,
1515
val spacing5: Dp = 20.dp,
1616
val spacing6: Dp = 24.dp,
17+
val spacing7: Dp = 28.dp,
1718
val spacing8: Dp = 32.dp,
1819
val spacing10: Dp = 40.dp,
1920
val spacing12: Dp = 48.dp,

‎feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ internal fun BookDetailContent(
167167
item {
168168
Column {
169169
BookItem(bookDetail = state.bookDetail)
170-
Spacer(Modifier.height(28.dp))
170+
Spacer(Modifier.height(ReedTheme.spacing.spacing7))
171171
Row(
172172
modifier = Modifier
173173
.fillMaxWidth()

‎feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/RecordDetailUi.kt‎

Lines changed: 120 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ package com.ninecraft.booket.feature.detail.record
33
import androidx.compose.foundation.layout.Box
44
import androidx.compose.foundation.layout.BoxWithConstraints
55
import androidx.compose.foundation.layout.Column
6-
import androidx.compose.foundation.layout.PaddingValues
76
import androidx.compose.foundation.layout.Row
87
import androidx.compose.foundation.layout.Spacer
98
import androidx.compose.foundation.layout.fillMaxSize
@@ -12,7 +11,9 @@ import androidx.compose.foundation.layout.height
1211
import androidx.compose.foundation.layout.padding
1312
import androidx.compose.foundation.layout.width
1413
import androidx.compose.foundation.layout.widthIn
14+
import androidx.compose.foundation.rememberScrollState
1515
import androidx.compose.foundation.shape.RoundedCornerShape
16+
import androidx.compose.foundation.verticalScroll
1617
import androidx.compose.material3.CircularProgressIndicator
1718
import androidx.compose.material3.Text
1819
import androidx.compose.material3.VerticalDivider
@@ -55,146 +56,144 @@ internal fun RecordDetailUi(
5556
modifier = modifier.fillMaxSize(),
5657
containerColor = White,
5758
) { innerPadding ->
58-
ReviewDetailContent(
59-
state = state,
60-
innerPadding = innerPadding,
61-
)
59+
Column(
60+
modifier = modifier
61+
.fillMaxSize()
62+
.padding(innerPadding)
63+
.verticalScroll(rememberScrollState()),
64+
) {
65+
ReedTopAppBar(
66+
title = stringResource(R.string.review_detail_title),
67+
startIconRes = designR.drawable.ic_close,
68+
startIconDescription = "Close Icon",
69+
startIconOnClick = {
70+
state.eventSink(RecordDetailUiEvent.OnCloseClicked)
71+
},
72+
)
73+
ReviewDetailContent(state = state)
74+
}
6275
}
6376
}
6477

6578
@Composable
6679
private fun ReviewDetailContent(
6780
state: RecordDetailUiState,
68-
innerPadding: PaddingValues,
6981
modifier: Modifier = Modifier,
7082
) {
71-
Column(
72-
modifier = modifier
73-
.fillMaxSize()
74-
.padding(innerPadding),
75-
) {
76-
ReedTopAppBar(
77-
title = stringResource(R.string.review_detail_title),
78-
startIconRes = designR.drawable.ic_close,
79-
startIconDescription = "Close Icon",
80-
startIconOnClick = {
81-
state.eventSink(RecordDetailUiEvent.OnCloseClicked)
82-
},
83-
)
84-
when (state.uiState) {
85-
is UiState.Idle -> {}
86-
is UiState.Loading -> {
87-
Box(
88-
modifier = Modifier.fillMaxSize(),
89-
contentAlignment = Alignment.Center,
90-
) {
91-
CircularProgressIndicator(color = ReedTheme.colors.contentBrand)
92-
}
83+
when (state.uiState) {
84+
is UiState.Idle -> {}
85+
is UiState.Loading -> {
86+
Box(
87+
modifier = Modifier.fillMaxSize(),
88+
contentAlignment = Alignment.Center,
89+
) {
90+
CircularProgressIndicator(color = ReedTheme.colors.contentBrand)
9391
}
92+
}
9493

95-
is UiState.Success -> {
96-
Row(
97-
modifier = modifier
98-
.fillMaxWidth()
99-
.padding(
100-
horizontal = ReedTheme.spacing.spacing5,
101-
vertical = ReedTheme.spacing.spacing4,
102-
),
103-
verticalAlignment = Alignment.CenterVertically,
104-
) {
105-
NetworkImage(
106-
imageUrl = state.recordDetailInfo.bookCoverImageUrl,
107-
contentDescription = "Book CoverImage",
108-
modifier = Modifier
109-
.padding(end = ReedTheme.spacing.spacing4)
110-
.width(46.dp)
111-
.height(68.dp)
112-
.clip(RoundedCornerShape(size = ReedTheme.radius.xs)),
113-
placeholder = painterResource(designR.drawable.ic_placeholder),
94+
is UiState.Success -> {
95+
Row(
96+
modifier = modifier
97+
.fillMaxWidth()
98+
.padding(
99+
horizontal = ReedTheme.spacing.spacing5,
100+
vertical = ReedTheme.spacing.spacing4,
101+
),
102+
verticalAlignment = Alignment.CenterVertically,
103+
) {
104+
NetworkImage(
105+
imageUrl = state.recordDetailInfo.bookCoverImageUrl,
106+
contentDescription = "Book CoverImage",
107+
modifier = Modifier
108+
.padding(end = ReedTheme.spacing.spacing4)
109+
.width(46.dp)
110+
.height(68.dp)
111+
.clip(RoundedCornerShape(size = ReedTheme.radius.xs)),
112+
placeholder = painterResource(designR.drawable.ic_placeholder),
113+
)
114+
Column(modifier = Modifier.weight(1f)) {
115+
Text(
116+
text = state.recordDetailInfo.bookTitle,
117+
color = ReedTheme.colors.contentPrimary,
118+
overflow = TextOverflow.Ellipsis,
119+
maxLines = 1,
120+
style = ReedTheme.typography.body1SemiBold,
114121
)
115-
Column(modifier = Modifier.weight(1f)) {
116-
Text(
117-
text = state.recordDetailInfo.bookTitle,
118-
color = ReedTheme.colors.contentPrimary,
119-
overflow = TextOverflow.Ellipsis,
120-
maxLines = 1,
121-
style = ReedTheme.typography.body1SemiBold,
122-
)
123-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
124-
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
125-
val authorMaxWidth = maxWidth * 0.7f
122+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
123+
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
124+
val authorMaxWidth = maxWidth * 0.7f
126125

127-
Row(
128-
modifier = Modifier.fillMaxWidth(),
129-
verticalAlignment = Alignment.CenterVertically,
130-
) {
131-
Text(
132-
text = state.recordDetailInfo.author,
133-
color = ReedTheme.colors.contentTertiary,
134-
overflow = TextOverflow.Ellipsis,
135-
maxLines = 1,
136-
style = ReedTheme.typography.label1Medium,
137-
modifier = Modifier.widthIn(max = authorMaxWidth),
138-
)
139-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
140-
VerticalDivider(
141-
modifier = Modifier.height(14.dp),
142-
thickness = 1.dp,
143-
color = ReedTheme.colors.contentTertiary,
144-
)
145-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
146-
Text(
147-
text = state.recordDetailInfo.bookPublisher,
148-
color = ReedTheme.colors.contentTertiary,
149-
overflow = TextOverflow.Ellipsis,
150-
maxLines = 1,
151-
style = ReedTheme.typography.label1Medium,
152-
modifier = Modifier.weight(1f, fill = false),
153-
)
154-
}
126+
Row(
127+
modifier = Modifier.fillMaxWidth(),
128+
verticalAlignment = Alignment.CenterVertically,
129+
) {
130+
Text(
131+
text = state.recordDetailInfo.author,
132+
color = ReedTheme.colors.contentTertiary,
133+
overflow = TextOverflow.Ellipsis,
134+
maxLines = 1,
135+
style = ReedTheme.typography.label1Medium,
136+
modifier = Modifier.widthIn(max = authorMaxWidth),
137+
)
138+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
139+
VerticalDivider(
140+
modifier = Modifier.height(14.dp),
141+
thickness = 1.dp,
142+
color = ReedTheme.colors.contentTertiary,
143+
)
144+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
145+
Text(
146+
text = state.recordDetailInfo.bookPublisher,
147+
color = ReedTheme.colors.contentTertiary,
148+
overflow = TextOverflow.Ellipsis,
149+
maxLines = 1,
150+
style = ReedTheme.typography.label1Medium,
151+
modifier = Modifier.weight(1f, fill = false),
152+
)
155153
}
156154
}
157155
}
156+
}
157+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
158+
ReedDivider()
159+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6))
160+
Column(
161+
modifier = Modifier
162+
.fillMaxSize()
163+
.padding(horizontal = ReedTheme.spacing.spacing5),
164+
) {
165+
Text(
166+
text = stringResource(R.string.review_detail_quote_label),
167+
color = ReedTheme.colors.contentPrimary,
168+
style = ReedTheme.typography.body1Medium,
169+
)
158170
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
159-
ReedDivider()
171+
QuoteBox(
172+
quote = state.recordDetailInfo.quote,
173+
page = state.recordDetailInfo.pageNumber,
174+
)
160175
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6))
161-
Column(
162-
modifier = Modifier
163-
.fillMaxSize()
164-
.padding(horizontal = ReedTheme.spacing.spacing5),
165-
) {
166-
Text(
167-
text = stringResource(R.string.review_detail_quote_label),
168-
color = ReedTheme.colors.contentPrimary,
169-
style = ReedTheme.typography.body1Medium,
170-
)
171-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
172-
QuoteBox(
173-
quote = state.recordDetailInfo.quote,
174-
page = state.recordDetailInfo.pageNumber,
175-
)
176-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6))
177-
Text(
178-
text = stringResource(R.string.review_detail_impression_label),
179-
color = ReedTheme.colors.contentPrimary,
180-
style = ReedTheme.typography.body1Medium,
181-
)
182-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
183-
ReviewBox(
184-
emotion = state.recordDetailInfo.emotionTags.getOrNull(0) ?: "",
185-
createdAt = state.recordDetailInfo.createdAt,
186-
review = state.recordDetailInfo.review,
187-
)
188-
}
189-
}
190-
191-
is UiState.Error -> {
192-
ReedErrorUi(
193-
exception = state.uiState.exception,
194-
onRetryClick = { },
176+
Text(
177+
text = stringResource(R.string.review_detail_impression_label),
178+
color = ReedTheme.colors.contentPrimary,
179+
style = ReedTheme.typography.body1Medium,
180+
)
181+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
182+
ReviewBox(
183+
emotion = state.recordDetailInfo.emotionTags.getOrNull(0) ?: "",
184+
createdAt = state.recordDetailInfo.createdAt,
185+
review = state.recordDetailInfo.review,
195186
)
187+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6))
196188
}
197189
}
190+
191+
is UiState.Error -> {
192+
ReedErrorUi(
193+
exception = state.uiState.exception,
194+
onRetryClick = { },
195+
)
196+
}
198197
}
199198
}
200199

‎feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import androidx.compose.foundation.layout.padding
1414
import androidx.compose.foundation.layout.size
1515
import androidx.compose.foundation.pager.HorizontalPager
1616
import androidx.compose.foundation.pager.rememberPagerState
17+
import androidx.compose.foundation.rememberScrollState
1718
import androidx.compose.foundation.shape.CircleShape
19+
import androidx.compose.foundation.verticalScroll
1820
import androidx.compose.material3.CircularProgressIndicator
1921
import androidx.compose.material3.Text
2022
import androidx.compose.runtime.Composable
@@ -105,7 +107,11 @@ internal fun HomeContent(
105107
}
106108

107109
is UiState.Success -> {
108-
Column(modifier = modifier.fillMaxSize()) {
110+
Column(
111+
modifier = modifier
112+
.fillMaxSize()
113+
.verticalScroll(rememberScrollState()),
114+
) {
109115
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6))
110116
Text(
111117
text = stringResource(R.string.home_content_label_reading_now),
@@ -163,6 +169,7 @@ internal fun HomeContent(
163169
)
164170
}
165171
}
172+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing7))
166173
}
167174
}
168175
}

‎feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUi.kt‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import androidx.compose.foundation.Image
55
import androidx.compose.foundation.layout.Column
66
import androidx.compose.foundation.layout.Spacer
77
import androidx.compose.foundation.layout.fillMaxSize
8-
import androidx.compose.foundation.layout.fillMaxWidth
98
import androidx.compose.foundation.layout.height
109
import androidx.compose.foundation.layout.padding
1110
import androidx.compose.material3.Scaffold
@@ -17,9 +16,6 @@ import androidx.compose.ui.unit.dp
1716
import com.ninecraft.booket.core.designsystem.DevicePreview
1817
import com.ninecraft.booket.core.designsystem.RecordStep
1918
import com.ninecraft.booket.core.designsystem.component.RecordProgressBar
20-
import com.ninecraft.booket.core.designsystem.component.button.ReedButton
21-
import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle
22-
import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle
2319
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
2420
import com.ninecraft.booket.core.designsystem.theme.White
2521
import com.ninecraft.booket.core.ui.component.ReedBackTopAppBar
@@ -76,21 +72,6 @@ internal fun RecordRegisterUi(
7672
ImpressionStep(state = state)
7773
}
7874
}
79-
Spacer(modifier = Modifier.weight(1f))
80-
ReedButton(
81-
onClick = {
82-
state.eventSink(RecordRegisterUiEvent.OnNextButtonClick)
83-
},
84-
colorStyle = ReedButtonColorStyle.PRIMARY,
85-
sizeStyle = largeButtonStyle,
86-
modifier = Modifier
87-
.fillMaxWidth()
88-
.padding(horizontal = ReedTheme.spacing.spacing5),
89-
enabled = state.isNextButtonEnabled,
90-
text = stringResource(R.string.record_next_button),
91-
multipleEventsCutterEnabled = state.currentStep == RecordStep.IMPRESSION,
92-
)
93-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing4))
9475
}
9576
}
9677

0 commit comments

Comments
 (0)