Skip to content

Commit fb64303

Browse files
sonmssonms
committed
chore/#90: 데이터에 따른 뷰 state 반영
1 parent 3514b24 commit fb64303

File tree

2 files changed

+93
-53
lines changed

2 files changed

+93
-53
lines changed

‎app/src/main/java/com/paw/key/core/designsystem/component/CourseDetail.kt‎

Lines changed: 78 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,36 @@ import coil.request.ImageRequest
3737
import com.paw.key.R
3838
import com.paw.key.core.designsystem.theme.PawKeyTheme
3939
import com.paw.key.core.designsystem.theme.Gray100
40+
import com.paw.key.domain.model.entity.walklist.CategoryTop3Entity
4041

4142
@Composable
4243
fun CourseDetail(
43-
title: String,
44-
petName: String,
45-
date: String,
46-
location: String,
47-
distance: String,
48-
time: String,
49-
option: List<String>,
50-
onImageClick: () -> Unit,
44+
title : String,
45+
petName : String,
46+
date : String,
47+
location : String,
48+
isLike : Boolean,
49+
content : String,
50+
petProfileImage : String,
51+
routeMapImageUrl : String,
52+
categorySummary : List<String>,
53+
categoryTop3 : List<CategoryTop3Entity>,
54+
totalReviewCount : Int,
55+
walkingImageUrls : List<String>,
56+
57+
58+
onImageClick: (String) -> Unit,
5159
modifier: Modifier = Modifier
5260
) {
61+
val isLiked = remember { mutableStateOf(false) }
62+
5363
Column(
5464
modifier = modifier
5565
.fillMaxWidth()
5666
) {
5767
AsyncImage(
5868
model = ImageRequest.Builder(LocalContext.current)
59-
.data("https://pawkey-server.com/image.jpg")
69+
.data(routeMapImageUrl)
6070
.crossfade(true)
6171
.build(),
6272
contentDescription = null,
@@ -65,6 +75,7 @@ fun CourseDetail(
6575
.fillMaxWidth()
6676
.height(244.dp)
6777
.background(color = Gray100)
78+
.background(Color.Gray)
6879
)
6980

7081
Column(
@@ -89,7 +100,6 @@ fun CourseDetail(
89100
style = PawKeyTheme.typography.head20Sb,
90101
color = PawKeyTheme.colors.black
91102
)
92-
val isLiked = remember { mutableStateOf(false) }
93103

94104
Icon(
95105
imageVector = if (isLiked.value) {
@@ -111,11 +121,16 @@ fun CourseDetail(
111121
.fillMaxWidth()
112122
.padding(vertical = 12.dp)
113123
) {
114-
Box(
124+
AsyncImage(
125+
model = ImageRequest.Builder(LocalContext.current)
126+
.data(petProfileImage)
127+
.crossfade(true)
128+
.build(),
129+
contentDescription = null,
115130
modifier = Modifier
116-
.size(40.dp)
117-
.background(Color.Gray, RoundedCornerShape(20.dp))
131+
.size(44.dp)
118132
)
133+
119134
Text(
120135
text = petName,
121136
style = PawKeyTheme.typography.body16Sb,
@@ -145,7 +160,7 @@ fun CourseDetail(
145160
)
146161
Spacer(modifier = Modifier.width(6.dp))
147162
Text(
148-
text = "$date | $time",
163+
text = date,
149164
style = PawKeyTheme.typography.body14M,
150165
color = PawKeyTheme.colors.gray400
151166
)
@@ -158,9 +173,11 @@ fun CourseDetail(
158173
modifier = Modifier
159174
.padding(vertical = 13.dp)
160175
) {
161-
SubChip(text = distance)
162-
SubChip(text = time)
163-
SubChip(text = location)
176+
categorySummary.forEach {
177+
SubChip(
178+
text = it
179+
)
180+
}
164181
}
165182

166183
Spacer(modifier = Modifier.height(12.dp))
@@ -171,19 +188,25 @@ fun CourseDetail(
171188
.padding(vertical = 12.dp),
172189
horizontalArrangement = Arrangement.spacedBy(8.dp)
173190
) {
174-
item {
175-
Box(
191+
items(walkingImageUrls.size) { index ->
192+
AsyncImage(
193+
model = ImageRequest.Builder(LocalContext.current)
194+
.data(walkingImageUrls[index])
195+
.crossfade(true)
196+
.build(),
197+
contentDescription = null,
176198
modifier = Modifier
177199
.width(100.dp)
178200
.height(100.dp)
179-
.background(Color.LightGray)
180-
.clickable { onImageClick() }
201+
.clip(RoundedCornerShape(8.dp))
202+
.clickable { onImageClick(walkingImageUrls[index]) },
203+
contentScale = ContentScale.Crop
181204
)
182205
}
183206
}
184207

185208
Text(
186-
text = "후기 글 본문 후기 글 본문 후기 글 본문",
209+
text = content,
187210
style = PawKeyTheme.typography.body14R
188211
)
189212
Spacer(modifier = Modifier.height(12.dp))
@@ -208,6 +231,8 @@ fun CourseDetail(
208231

209232
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
210233
Row(
234+
modifier = Modifier
235+
.fillMaxWidth(),
211236
verticalAlignment = Alignment.CenterVertically
212237
) {
213238
Text(
@@ -224,31 +249,27 @@ fun CourseDetail(
224249
)
225250
Spacer(modifier = Modifier.width(4.dp))
226251
Text(
227-
text = "후기숫자를 적으세요",
252+
text = totalReviewCount.toString(),
228253
style = PawKeyTheme.typography.caption12M,
229254
color = PawKeyTheme.colors.gray200,
230255
)
231256
}
232257

233-
if (option.isEmpty()) {
258+
if (categoryTop3.isEmpty()) {
234259
Text(
235260
text = "아직은 후기가 없어요.",
236261
style = PawKeyTheme.typography.body16Sb,
237-
color = PawKeyTheme.colors.gray400
262+
color = PawKeyTheme.colors.gray400,
263+
modifier = Modifier
264+
.align(Alignment.CenterHorizontally)
238265
)
239266
} else {
240-
option.forEachIndexed { index, tag ->
241-
val percentage = when (index) {
242-
0 -> 1f
243-
1 -> 0.8f
244-
2 -> 0.6f
245-
else -> 1f
246-
}
247-
248-
val backgroundColor = when (index) {
249-
0 -> PawKeyTheme.colors.green300
250-
1 -> PawKeyTheme.colors.green200
251-
2 -> PawKeyTheme.colors.green100
267+
categoryTop3.forEach { tag ->
268+
val fillRatio = (tag.percentage.coerceIn(0, 100)) / 100f
269+
val backgroundColor = when (tag.rank) {
270+
1 -> PawKeyTheme.colors.green300
271+
2 -> PawKeyTheme.colors.green200
272+
3 -> PawKeyTheme.colors.green100
252273
else -> PawKeyTheme.colors.green500
253274
}
254275

@@ -257,21 +278,21 @@ fun CourseDetail(
257278
.fillMaxWidth()
258279
.padding(vertical = 4.dp)
259280
.height(37.dp)
260-
.background(PawKeyTheme.colors.gray100, RoundedCornerShape(6.dp))
281+
.background(PawKeyTheme.colors.white2, RoundedCornerShape(6.dp))
261282
) {
262283
Box(
263284
modifier = Modifier
264-
.fillMaxWidth(percentage)
285+
.fillMaxWidth(fillRatio)
265286
.fillMaxHeight()
266287
.background(backgroundColor, RoundedCornerShape(6.dp))
267288
) {
268289
Text(
269-
text = tag,
270-
color = Color.Black,
290+
text = tag.optionText,
291+
color = PawKeyTheme.colors.black,
271292
modifier = Modifier
272293
.align(Alignment.CenterStart)
273294
.padding(horizontal = 16.dp),
274-
style = PawKeyTheme.typography.body16Sb
295+
style = PawKeyTheme.typography.caption12Sb2
275296
)
276297
}
277298
}
@@ -282,20 +303,28 @@ fun CourseDetail(
282303
}
283304

284305

285-
286306
@Preview(showBackground = true)
287307
@Composable
288308
fun CourseDetailPreview() {
289309
PawKeyTheme {
290310
CourseDetail(
291311
title = "홍대 주변 좋은 산책 코스",
292-
petName = "반려견 이름",
293-
date = "2025/05/17",
312+
petName = "핑구",
313+
date = "2025/06/30",
294314
location = "홍대입구역",
295-
distance = "3km",
296-
time = "1시간 소요",
297-
option = listOf("조용해요", "가로등 많아요", "산책로 깨끗해요"),
315+
isLike = true,
316+
content = "산책로가 깨끗하고 벚꽃이 예뻐요!",
317+
petProfileImage = "https://pawkey-server.com/image/profile.png",
318+
routeMapImageUrl = "https://pawkey-server.com/image/map.png",
319+
categoryTop3 = listOf(
320+
),
321+
totalReviewCount = 42,
322+
walkingImageUrls = listOf(
323+
"https://pawkey-server.com/image/walk1.jpg",
324+
"https://pawkey-server.com/image/walk2.jpg"
325+
),
326+
categorySummary = listOf("안전", "편리성"),
298327
onImageClick = {},
299328
)
300329
}
301-
}
330+
}

‎app/src/main/java/com/paw/key/presentation/ui/community/CommunityScreen.kt‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
package com.paw.key.presentation.ui.community
22

3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Column
35
import androidx.compose.foundation.layout.PaddingValues
6+
import androidx.compose.foundation.layout.fillMaxSize
47
import androidx.compose.material3.SnackbarHostState
58
import androidx.compose.material3.Text
69
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Alignment
711
import androidx.compose.ui.Modifier
812
import androidx.compose.ui.res.stringResource
913
import androidx.compose.ui.tooling.preview.Preview
@@ -34,10 +38,17 @@ fun CommunityScreen(
3438
snackBarHostState: SnackbarHostState,
3539
modifier: Modifier = Modifier,
3640
) {
37-
Text(
38-
text = stringResource(R.string.ic_community_description),
39-
modifier = modifier,
40-
)
41+
Column (
42+
modifier = modifier
43+
.fillMaxSize(),
44+
horizontalAlignment = Alignment.CenterHorizontally,
45+
verticalArrangement = Arrangement.Center
46+
){
47+
Text(
48+
text = stringResource(R.string.ic_community_description),
49+
modifier = modifier
50+
)
51+
}
4152
}
4253

4354
@Preview

0 commit comments

Comments
 (0)