Skip to content

Commit 49511ed

Browse files
seoyoon513seoyoon513
committed
[BOOK-214] fix: 작가 텍스트가 짧은 경우 출판사 영역 잘리는 문제 수정
BoxWithConstraints 사용하여 author 최대 너비 동적 제어
1 parent 3ae36bb commit 49511ed

File tree

5 files changed

+169
-136
lines changed

5 files changed

+169
-136
lines changed

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

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package com.ninecraft.booket.feature.detail.record
22

33
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.BoxWithConstraints
45
import androidx.compose.foundation.layout.Column
56
import androidx.compose.foundation.layout.Row
67
import androidx.compose.foundation.layout.Spacer
@@ -9,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
910
import androidx.compose.foundation.layout.height
1011
import androidx.compose.foundation.layout.padding
1112
import androidx.compose.foundation.layout.width
13+
import androidx.compose.foundation.layout.widthIn
1214
import androidx.compose.foundation.shape.RoundedCornerShape
1315
import androidx.compose.material3.Text
1416
import androidx.compose.material3.VerticalDivider
@@ -94,33 +96,37 @@ private fun ReviewDetailContent(state: RecordDetailUiState, modifier: Modifier =
9496
style = ReedTheme.typography.body1SemiBold,
9597
)
9698
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
97-
Row(
98-
modifier = Modifier.fillMaxWidth(),
99-
verticalAlignment = Alignment.CenterVertically,
100-
) {
101-
Text(
102-
text = state.recordDetailInfo.author,
103-
color = ReedTheme.colors.contentTertiary,
104-
overflow = TextOverflow.Ellipsis,
105-
maxLines = 1,
106-
style = ReedTheme.typography.label1Medium,
107-
modifier = Modifier.weight(0.7f, fill = false),
108-
)
109-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
110-
VerticalDivider(
111-
modifier = Modifier.height(14.dp),
112-
thickness = 1.dp,
113-
color = ReedTheme.colors.contentTertiary,
114-
)
115-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
116-
Text(
117-
text = state.recordDetailInfo.bookPublisher,
118-
color = ReedTheme.colors.contentTertiary,
119-
overflow = TextOverflow.Ellipsis,
120-
maxLines = 1,
121-
style = ReedTheme.typography.label1Medium,
122-
modifier = Modifier.weight(0.3f, fill = false),
123-
)
99+
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
100+
val authorMaxWidth = maxWidth * 0.7f
101+
102+
Row(
103+
modifier = Modifier.fillMaxWidth(),
104+
verticalAlignment = Alignment.CenterVertically,
105+
) {
106+
Text(
107+
text = state.recordDetailInfo.author,
108+
color = ReedTheme.colors.contentTertiary,
109+
overflow = TextOverflow.Ellipsis,
110+
maxLines = 1,
111+
style = ReedTheme.typography.label1Medium,
112+
modifier = Modifier.widthIn(max = authorMaxWidth),
113+
)
114+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
115+
VerticalDivider(
116+
modifier = Modifier.height(14.dp),
117+
thickness = 1.dp,
118+
color = ReedTheme.colors.contentTertiary,
119+
)
120+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
121+
Text(
122+
text = state.recordDetailInfo.bookPublisher,
123+
color = ReedTheme.colors.contentTertiary,
124+
overflow = TextOverflow.Ellipsis,
125+
maxLines = 1,
126+
style = ReedTheme.typography.label1Medium,
127+
modifier = Modifier.weight(1f, fill = false),
128+
)
129+
}
124130
}
125131
}
126132
}
@@ -174,9 +180,9 @@ private fun ReviewDetailPreview() {
174180
createdAt = "2023.10.10",
175181
updatedAt = "",
176182
bookTitle = "여름은 오래 그곳에 남아",
177-
bookPublisher = "비채",
183+
bookPublisher = "비채 비채 비채 비채",
178184
bookCoverImageUrl = "",
179-
author = "미쓰이에 마사시",
185+
author = "미쓰이에 마사시, 미쓰이에 마사시, 미쓰이에 마사시, 미쓰이에 마사시",
180186
),
181187
eventSink = {},
182188
),

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

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
44
import androidx.compose.foundation.border
55
import androidx.compose.foundation.layout.Arrangement
66
import androidx.compose.foundation.layout.Box
7+
import androidx.compose.foundation.layout.BoxWithConstraints
78
import androidx.compose.foundation.layout.Column
89
import androidx.compose.foundation.layout.Row
910
import androidx.compose.foundation.layout.Spacer
@@ -12,6 +13,7 @@ import androidx.compose.foundation.layout.height
1213
import androidx.compose.foundation.layout.padding
1314
import androidx.compose.foundation.layout.size
1415
import androidx.compose.foundation.layout.width
16+
import androidx.compose.foundation.layout.widthIn
1517
import androidx.compose.foundation.shape.RoundedCornerShape
1618
import androidx.compose.material3.Icon
1719
import androidx.compose.material3.Text
@@ -104,34 +106,41 @@ fun BookCard(
104106
style = ReedTheme.typography.headline1SemiBold,
105107
)
106108
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
107-
Row(
109+
BoxWithConstraints(
108110
modifier = Modifier.fillMaxWidth(),
109-
verticalAlignment = Alignment.CenterVertically,
110-
horizontalArrangement = Arrangement.Center,
111+
contentAlignment = Alignment.Center,
111112
) {
112-
Text(
113-
text = recentBookInfo.author,
114-
color = ReedTheme.colors.contentTertiary,
115-
overflow = TextOverflow.Ellipsis,
116-
maxLines = 1,
117-
style = ReedTheme.typography.label1Medium,
118-
modifier = Modifier.weight(0.7f, fill = false),
119-
)
120-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
121-
VerticalDivider(
122-
modifier = Modifier.height(14.dp),
123-
thickness = 1.dp,
124-
color = ReedTheme.colors.contentTertiary,
125-
)
126-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
127-
Text(
128-
text = recentBookInfo.publisher,
129-
color = ReedTheme.colors.contentTertiary,
130-
overflow = TextOverflow.Ellipsis,
131-
maxLines = 1,
132-
style = ReedTheme.typography.label1Medium,
133-
modifier = Modifier.weight(0.3f, fill = false),
134-
)
113+
val authorMaxWidth = maxWidth * 0.7f
114+
115+
Row(
116+
modifier = Modifier.fillMaxWidth(),
117+
verticalAlignment = Alignment.CenterVertically,
118+
horizontalArrangement = Arrangement.Center,
119+
) {
120+
Text(
121+
text = recentBookInfo.author,
122+
color = ReedTheme.colors.contentTertiary,
123+
overflow = TextOverflow.Ellipsis,
124+
maxLines = 1,
125+
style = ReedTheme.typography.label1Medium,
126+
modifier = Modifier.widthIn(max = authorMaxWidth),
127+
)
128+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
129+
VerticalDivider(
130+
modifier = Modifier.height(14.dp),
131+
thickness = 1.dp,
132+
color = ReedTheme.colors.contentTertiary,
133+
)
134+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
135+
Text(
136+
text = recentBookInfo.publisher,
137+
color = ReedTheme.colors.contentTertiary,
138+
overflow = TextOverflow.Ellipsis,
139+
maxLines = 1,
140+
style = ReedTheme.typography.label1Medium,
141+
modifier = Modifier.weight(1f, fill = false),
142+
)
143+
}
135144
}
136145
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
137146
}

‎feature/library/src/main/kotlin/com/ninecraft/booket/feature/library/component/LibraryBookItem.kt‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
package com.ninecraft.booket.feature.library.component
22

3+
import androidx.compose.foundation.layout.BoxWithConstraints
34
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.Row
56
import androidx.compose.foundation.layout.Spacer
67
import androidx.compose.foundation.layout.fillMaxWidth
78
import androidx.compose.foundation.layout.height
89
import androidx.compose.foundation.layout.padding
910
import androidx.compose.foundation.layout.width
11+
import androidx.compose.foundation.layout.widthIn
1012
import androidx.compose.foundation.shape.RoundedCornerShape
1113
import androidx.compose.material3.Text
1214
import androidx.compose.material3.VerticalDivider
@@ -62,33 +64,37 @@ fun LibraryBookItem(
6264
style = ReedTheme.typography.body1SemiBold,
6365
)
6466
Spacer(Modifier.height(ReedTheme.spacing.spacing1))
65-
Row(
66-
modifier = Modifier.fillMaxWidth(),
67-
verticalAlignment = Alignment.CenterVertically,
68-
) {
69-
Text(
70-
text = book.bookAuthor,
71-
color = ReedTheme.colors.contentTertiary,
72-
overflow = TextOverflow.Ellipsis,
73-
maxLines = 1,
74-
style = ReedTheme.typography.label1Medium,
75-
modifier = Modifier.weight(0.7f, fill = false),
76-
)
77-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
78-
VerticalDivider(
79-
modifier = Modifier.height(14.dp),
80-
thickness = 1.dp,
81-
color = ReedTheme.colors.contentTertiary,
82-
)
83-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
84-
Text(
85-
text = book.publisher,
86-
color = ReedTheme.colors.contentTertiary,
87-
overflow = TextOverflow.Ellipsis,
88-
maxLines = 1,
89-
style = ReedTheme.typography.label1Medium,
90-
modifier = Modifier.weight(0.3f, fill = false),
91-
)
67+
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
68+
val authorMaxWidth = maxWidth * 0.7f
69+
70+
Row(
71+
modifier = Modifier.fillMaxWidth(),
72+
verticalAlignment = Alignment.CenterVertically,
73+
) {
74+
Text(
75+
text = book.bookAuthor,
76+
color = ReedTheme.colors.contentTertiary,
77+
overflow = TextOverflow.Ellipsis,
78+
maxLines = 1,
79+
style = ReedTheme.typography.label1Medium,
80+
modifier = Modifier.widthIn(max = authorMaxWidth),
81+
)
82+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
83+
VerticalDivider(
84+
modifier = Modifier.height(14.dp),
85+
thickness = 1.dp,
86+
color = ReedTheme.colors.contentTertiary,
87+
)
88+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
89+
Text(
90+
text = book.publisher,
91+
color = ReedTheme.colors.contentTertiary,
92+
overflow = TextOverflow.Ellipsis,
93+
maxLines = 1,
94+
style = ReedTheme.typography.label1Medium,
95+
modifier = Modifier.weight(1f, fill = false),
96+
)
97+
}
9298
}
9399
Spacer(Modifier.height(ReedTheme.spacing.spacing4))
94100
Row(verticalAlignment = Alignment.CenterVertically) {

‎feature/search/src/main/kotlin/com/ninecraft/booket/feature/search/book/component/BookItem.kt‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ package com.ninecraft.booket.feature.search.book.component
33
import androidx.compose.foundation.background
44
import androidx.compose.foundation.clickable
55
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.BoxWithConstraints
67
import androidx.compose.foundation.layout.Column
78
import androidx.compose.foundation.layout.Row
89
import androidx.compose.foundation.layout.Spacer
910
import androidx.compose.foundation.layout.fillMaxWidth
1011
import androidx.compose.foundation.layout.height
1112
import androidx.compose.foundation.layout.padding
1213
import androidx.compose.foundation.layout.width
14+
import androidx.compose.foundation.layout.widthIn
1315
import androidx.compose.foundation.shape.RoundedCornerShape
1416
import androidx.compose.material3.Text
1517
import androidx.compose.material3.VerticalDivider
@@ -97,33 +99,37 @@ fun BookItem(
9799
style = ReedTheme.typography.body1SemiBold,
98100
)
99101
Spacer(Modifier.height(ReedTheme.spacing.spacing1))
100-
Row(
101-
modifier = Modifier.fillMaxWidth(),
102-
verticalAlignment = Alignment.CenterVertically,
103-
) {
104-
Text(
105-
text = book.author,
106-
color = authorColor,
107-
overflow = TextOverflow.Ellipsis,
108-
maxLines = 1,
109-
style = ReedTheme.typography.label1Medium,
110-
modifier = Modifier.weight(0.7f, fill = false),
111-
)
112-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
113-
VerticalDivider(
114-
modifier = Modifier.height(14.dp),
115-
thickness = 1.dp,
116-
color = ReedTheme.colors.contentTertiary,
117-
)
118-
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
119-
Text(
120-
text = book.publisher,
121-
color = authorColor,
122-
overflow = TextOverflow.Ellipsis,
123-
maxLines = 1,
124-
style = ReedTheme.typography.label1Medium,
125-
modifier = Modifier.weight(0.3f, fill = false),
126-
)
102+
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
103+
val authorMaxWidth = maxWidth * 0.7f
104+
105+
Row(
106+
modifier = Modifier.fillMaxWidth(),
107+
verticalAlignment = Alignment.CenterVertically,
108+
) {
109+
Text(
110+
text = book.author,
111+
color = authorColor,
112+
overflow = TextOverflow.Ellipsis,
113+
maxLines = 1,
114+
style = ReedTheme.typography.label1Medium,
115+
modifier = Modifier.widthIn(max = authorMaxWidth),
116+
)
117+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
118+
VerticalDivider(
119+
modifier = Modifier.height(14.dp),
120+
thickness = 1.dp,
121+
color = ReedTheme.colors.contentTertiary,
122+
)
123+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
124+
Text(
125+
text = book.publisher,
126+
color = authorColor,
127+
overflow = TextOverflow.Ellipsis,
128+
maxLines = 1,
129+
style = ReedTheme.typography.label1Medium,
130+
modifier = Modifier.weight(1f, fill = false),
131+
)
132+
}
127133
}
128134
}
129135
}

0 commit comments

Comments
 (0)