Skip to content

Commit 1f3afae

Browse files
easyhoooneasyhooon
committed
[BOOK-188] feat: BookDetailUI 전체 컴포넌트 배치 구성
Button Trailing Icon이 작아지는 문제를 해결해야함
1 parent 629cf91 commit 1f3afae

5 files changed

Lines changed: 152 additions & 3 deletions

File tree

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

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,40 @@
11
package com.ninecraft.booket.feature.detail.book
22

3+
import android.R.attr.onClick
4+
import android.R.attr.text
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.foundation.layout.size
13+
import androidx.compose.foundation.layout.width
14+
import androidx.compose.foundation.shape.RoundedCornerShape
15+
import androidx.compose.material3.Icon
16+
import androidx.compose.material3.Text
17+
import androidx.compose.material3.VerticalDivider
318
import androidx.compose.runtime.Composable
19+
import androidx.compose.ui.Alignment
420
import androidx.compose.ui.Modifier
21+
import androidx.compose.ui.draw.clip
22+
import androidx.compose.ui.graphics.vector.ImageVector
23+
import androidx.compose.ui.res.painterResource
24+
import androidx.compose.ui.res.vectorResource
25+
import androidx.compose.ui.text.style.TextOverflow
26+
import androidx.compose.ui.unit.dp
527
import com.ninecraft.booket.core.designsystem.ComponentPreview
28+
import com.ninecraft.booket.core.designsystem.R as designR
29+
import com.ninecraft.booket.core.designsystem.component.NetworkImage
30+
import com.ninecraft.booket.core.designsystem.component.ReedDivider
31+
import com.ninecraft.booket.core.designsystem.component.button.ReedButton
32+
import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle
33+
import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle
634
import com.ninecraft.booket.core.designsystem.theme.ReedTheme
735
import com.ninecraft.booket.core.ui.component.ReedBackTopAppBar
836
import com.ninecraft.booket.core.ui.component.ReedFullScreen
37+
import com.ninecraft.booket.feature.detail.book.component.CollectedSeed
938
import com.ninecraft.booket.feature.screens.BookDetailScreen
1039
import com.slack.circuit.codegen.annotations.CircuitInject
1140
import dagger.hilt.android.components.ActivityRetainedComponent
@@ -37,7 +66,103 @@ internal fun BookDetailContent(
3766
state: BookDetailUiState,
3867
modifier: Modifier = Modifier,
3968
) {
40-
69+
Column {
70+
Row(
71+
modifier = modifier
72+
.fillMaxWidth()
73+
.padding(horizontal = ReedTheme.spacing.spacing5),
74+
) {
75+
NetworkImage(
76+
imageUrl = "",
77+
contentDescription = "Book CoverImage",
78+
modifier = Modifier
79+
.padding(end = ReedTheme.spacing.spacing4)
80+
.width(70.dp)
81+
.height(99.dp)
82+
.clip(RoundedCornerShape(size = ReedTheme.radius.xs)),
83+
placeholder = painterResource(designR.drawable.ic_placeholder),
84+
)
85+
Column(modifier = Modifier.weight(1f)) {
86+
Text(
87+
text = "여름은 오래 그곳에 남아",
88+
color = ReedTheme.colors.contentPrimary,
89+
overflow = TextOverflow.Ellipsis,
90+
maxLines = 2,
91+
style = ReedTheme.typography.headline1SemiBold,
92+
)
93+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
94+
Row(
95+
modifier = Modifier.fillMaxWidth(),
96+
verticalAlignment = Alignment.CenterVertically,
97+
) {
98+
Text(
99+
text = "미쓰이에 마사시",
100+
color = ReedTheme.colors.contentTertiary,
101+
overflow = TextOverflow.Ellipsis,
102+
maxLines = 1,
103+
style = ReedTheme.typography.label2Regular,
104+
modifier = Modifier.weight(0.7f, fill = false),
105+
)
106+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
107+
VerticalDivider(
108+
modifier = Modifier.height(14.dp),
109+
thickness = 1.dp,
110+
color = ReedTheme.colors.contentTertiary,
111+
)
112+
Spacer(Modifier.width(ReedTheme.spacing.spacing1))
113+
Text(
114+
text = "비채",
115+
color = ReedTheme.colors.contentTertiary,
116+
overflow = TextOverflow.Ellipsis,
117+
maxLines = 1,
118+
style = ReedTheme.typography.label2Regular,
119+
modifier = Modifier.weight(0.3f, fill = false),
120+
)
121+
}
122+
Spacer(Modifier.width(ReedTheme.spacing.spacing05))
123+
Text(
124+
text = "2024년",
125+
color = ReedTheme.colors.contentTertiary,
126+
overflow = TextOverflow.Ellipsis,
127+
maxLines = 1,
128+
style = ReedTheme.typography.label2Regular,
129+
)
130+
}
131+
}
132+
Spacer(Modifier.height(ReedTheme.spacing.spacing3))
133+
Spacer(Modifier.height(ReedTheme.spacing.spacing4))
134+
Row(
135+
modifier = Modifier
136+
.fillMaxWidth()
137+
.padding(horizontal = ReedTheme.spacing.spacing5),
138+
) {
139+
ReedButton(
140+
onClick = {},
141+
text = "읽는 중",
142+
sizeStyle = largeButtonStyle,
143+
colorStyle = ReedButtonColorStyle.SECONDARY,
144+
modifier = Modifier.weight(1f),
145+
trailingIcon = {
146+
Icon(
147+
imageVector = ImageVector.vectorResource(designR.drawable.ic_chevron_down),
148+
contentDescription = "Dropdown Icon",
149+
modifier = Modifier.size(22.dp),
150+
)
151+
},
152+
)
153+
Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing2))
154+
ReedButton(
155+
onClick = {},
156+
text = "독서 기록 추가",
157+
sizeStyle = largeButtonStyle,
158+
colorStyle = ReedButtonColorStyle.PRIMARY,
159+
modifier = Modifier.weight(2.34f),
160+
)
161+
}
162+
CollectedSeed(state = state)
163+
Spacer(Modifier.height(ReedTheme.spacing.spacing6))
164+
ReedDivider()
165+
}
41166
}
42167

43168
@ComponentPreview

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import com.ninecraft.booket.core.designsystem.R as designR
4242

4343
@OptIn(ExperimentalMaterial3Api::class)
4444
@Composable
45-
fun BookUpdateBottomSheet(
45+
internal fun BookUpdateBottomSheet(
4646
onDismissRequest: () -> Unit,
4747
sheetState: SheetState,
4848
onCloseButtonClick: () -> Unit,

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
package com.ninecraft.booket.feature.detail.book.component
2+
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.runtime.Composable
5+
import com.ninecraft.booket.feature.detail.book.BookDetailUiState
6+
7+
@Composable
8+
internal fun CollectedSeed(
9+
state: BookDetailUiState
10+
) {
11+
Box {}
12+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import com.ninecraft.booket.core.designsystem.R as designR
3535

3636
@OptIn(ExperimentalMaterial3Api::class)
3737
@Composable
38-
fun RecordSortBottomSheet(
38+
internal fun RecordSortBottomSheet(
3939
onDismissRequest: () -> Unit,
4040
sheetState: SheetState,
4141
onCloseButtonClick: () -> Unit,

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
package com.ninecraft.booket.feature.detail.book.component
2+
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.runtime.Composable
5+
import com.ninecraft.booket.feature.detail.book.BookDetailUiState
6+
7+
@Composable
8+
internal fun RecordsCollection(
9+
state: BookDetailUiState
10+
) {
11+
Box {}
12+
}

0 commit comments

Comments
 (0)