Skip to content

Commit cc0f376

Browse files
committed
[refactor]: 책 데이터 Mock 추가 및 검색 초기 컴포넌트 구현 (#47)
1 parent 49f63ad commit cc0f376

3 files changed

Lines changed: 256 additions & 0 deletions

File tree

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
package com.texthip.thip.ui.booksearch.component
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.Spacer
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.layout.height
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.layout.width
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.res.stringResource
15+
import androidx.compose.ui.unit.dp
16+
import com.texthip.thip.R
17+
import com.texthip.thip.ui.common.buttons.ActionMediumButton
18+
import com.texthip.thip.ui.theme.ThipTheme.colors
19+
import com.texthip.thip.ui.theme.ThipTheme.typography
20+
21+
@Composable
22+
fun BookEmptyResult(
23+
mainText: String,
24+
subText: String,
25+
onRequestBook: () -> Unit
26+
) {
27+
Column(
28+
modifier = Modifier.fillMaxSize(),
29+
verticalArrangement = Arrangement.Center,
30+
horizontalAlignment = Alignment.CenterHorizontally
31+
) {
32+
Text(
33+
text = mainText,
34+
color = colors.White,
35+
style = typography.smalltitle_sb600_s18_h24
36+
)
37+
Text(
38+
text = subText,
39+
modifier = Modifier.padding(top = 8.dp),
40+
color = colors.Grey,
41+
style = typography.copy_r400_s14
42+
)
43+
Spacer(Modifier.height(20.dp))
44+
45+
ActionMediumButton(
46+
text = stringResource(R.string.group_register_book),
47+
contentColor = colors.White,
48+
backgroundColor = colors.Purple,
49+
modifier = Modifier
50+
.width(97.dp)
51+
.height(44.dp),
52+
onClick = { onRequestBook() },
53+
)
54+
}
55+
}
Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
package com.texthip.thip.ui.booksearch.component
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.Column
7+
import androidx.compose.foundation.layout.FlowRow
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.Spacer
10+
import androidx.compose.foundation.layout.fillMaxSize
11+
import androidx.compose.foundation.layout.fillMaxWidth
12+
import androidx.compose.foundation.layout.height
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.lazy.LazyColumn
15+
import androidx.compose.material3.Text
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.ui.Alignment
18+
import androidx.compose.ui.Modifier
19+
import androidx.compose.ui.res.stringResource
20+
import androidx.compose.ui.tooling.preview.Preview
21+
import androidx.compose.ui.unit.dp
22+
import com.texthip.thip.R
23+
import com.texthip.thip.ui.booksearch.mock.BookData
24+
import com.texthip.thip.ui.common.buttons.GenreChipButton
25+
import com.texthip.thip.ui.common.cards.CardBookSearch
26+
import com.texthip.thip.ui.theme.ThipTheme
27+
import com.texthip.thip.ui.theme.ThipTheme.colors
28+
import com.texthip.thip.ui.theme.ThipTheme.typography
29+
30+
@Composable
31+
fun BookRecentSearch(
32+
recentSearches: List<String>,
33+
popularBooks: List<BookData>,
34+
popularBookDate: String,
35+
onSearchClick: (String) -> Unit,
36+
onRemove: (String) -> Unit,
37+
onBookClick: (BookData) -> Unit
38+
) {
39+
Column(modifier = Modifier.fillMaxSize()) {
40+
// 최근 검색어
41+
Text(
42+
text = stringResource(R.string.group_recent_search),
43+
color = colors.White,
44+
style = typography.menu_r400_s14_h24
45+
)
46+
Spacer(modifier = Modifier.height(16.dp))
47+
48+
if (recentSearches.isEmpty()) {
49+
Text(
50+
text = stringResource(R.string.group_no_recent_search),
51+
color = colors.Grey01,
52+
style = typography.menu_r400_s14_h24
53+
)
54+
} else {
55+
FlowRow(
56+
verticalArrangement = Arrangement.spacedBy(12.dp),
57+
horizontalArrangement = Arrangement.spacedBy(16.dp),
58+
maxLines = 2,
59+
) {
60+
recentSearches.take(9).forEach { keyword ->
61+
GenreChipButton(
62+
text = keyword,
63+
onClick = { onSearchClick(keyword) },
64+
onCloseClick = { onRemove(keyword) }
65+
)
66+
}
67+
}
68+
}
69+
70+
Spacer(modifier = Modifier.height(32.dp))
71+
72+
// 가장 많이 검색된 책 헤더
73+
Row(
74+
modifier = Modifier.fillMaxWidth(),
75+
verticalAlignment = Alignment.CenterVertically,
76+
horizontalArrangement = Arrangement.SpaceBetween
77+
) {
78+
Text(
79+
text = stringResource(R.string.book_popular_search),
80+
color = colors.White,
81+
style = typography.menu_r400_s14_h24
82+
)
83+
Text(
84+
text = stringResource(R.string.book_search_date, popularBookDate),
85+
color = colors.Grey02,
86+
style = typography.timedate_r400_s11
87+
)
88+
}
89+
Spacer(modifier = Modifier.height(16.dp))
90+
91+
// 인기책 리스트만 LazyColumn, 나머지는 고정
92+
Box(modifier = Modifier
93+
.fillMaxWidth()
94+
.weight(1f, fill = true)
95+
) {
96+
if (popularBooks.isEmpty()) {
97+
Column(
98+
modifier = Modifier
99+
.fillMaxSize(),
100+
horizontalAlignment = Alignment.CenterHorizontally,
101+
verticalArrangement = Arrangement.Center
102+
) {
103+
Text(
104+
text = stringResource(R.string.book_no_most_search_result_comment_1),
105+
style = typography.smalltitle_sb600_s18_h24,
106+
color = colors.White
107+
)
108+
Spacer(modifier = Modifier.height(8.dp))
109+
Text(
110+
text = stringResource(R.string.book_no_most_search_result_comment_2),
111+
style = typography.copy_r400_s14,
112+
color = colors.Grey
113+
)
114+
}
115+
} else {
116+
LazyColumn(
117+
modifier = Modifier.fillMaxSize()
118+
) {
119+
items(popularBooks.size) { index ->
120+
val book = popularBooks[index]
121+
CardBookSearch(
122+
number = index + 1,
123+
title = book.title,
124+
imageRes = book.imageRes,
125+
onClick = { onBookClick(book) }
126+
)
127+
if (index < popularBooks.size - 1) {
128+
Spacer(
129+
modifier = Modifier
130+
.padding(top = 12.dp, bottom = 12.dp)
131+
.fillMaxWidth()
132+
.height(1.dp)
133+
.background(ThipTheme.colors.DarkGrey02)
134+
)
135+
}
136+
}
137+
}
138+
}
139+
}
140+
}
141+
}
142+
143+
144+
@Preview
145+
@Composable
146+
fun PreviewBookRecentSearch() {
147+
ThipTheme {
148+
BookRecentSearch(
149+
recentSearches = listOf("소설", "심리학", "철학", "역사", "과학", "에세이"),
150+
popularBooks = listOf(
151+
BookData(
152+
title = "이기적 유전자",
153+
author = "리처드 도킨스",
154+
publisher = "을유문화사",
155+
imageRes = R.drawable.bookcover_sample
156+
),
157+
BookData(
158+
title = "코스모스",
159+
author = "칼 세이건",
160+
publisher = "사이언스북스",
161+
imageRes = R.drawable.bookcover_sample
162+
),
163+
BookData(
164+
title = "총, 균, 쇠",
165+
author = "재레드 다이아몬드",
166+
publisher = "문학사상사",
167+
imageRes = R.drawable.bookcover_sample
168+
)
169+
),
170+
popularBookDate = "01.12",
171+
onSearchClick = {},
172+
onRemove = {},
173+
onBookClick = {}
174+
)
175+
}
176+
}
177+
178+
@Preview(showBackground = true)
179+
@Composable
180+
fun PreviewBookRecentSearch_EmptyPopular() {
181+
ThipTheme {
182+
BookRecentSearch(
183+
recentSearches = emptyList(),
184+
popularBooks = emptyList(),
185+
popularBookDate = "01.12.",
186+
onSearchClick = {},
187+
onRemove = {},
188+
onBookClick = {}
189+
)
190+
}
191+
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.texthip.thip.ui.booksearch.mock
2+
3+
import com.texthip.thip.R
4+
5+
data class BookData(
6+
val title: String,
7+
val author: String = "",
8+
val publisher: String = "",
9+
val imageRes: Int = R.drawable.bookcover_sample
10+
)

0 commit comments

Comments
 (0)