Skip to content

Commit

Permalink
[feature/review_star_view]: add Review detail
Browse files Browse the repository at this point in the history
  • Loading branch information
kez-lab committed Oct 11, 2023
1 parent 5bd7197 commit c502a01
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 8 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.everymeal.presentation.ui.review

import android.util.Log
import android.widget.Toast
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.PickVisualMediaRequest
import androidx.activity.result.contract.ActivityResultContracts
Expand Down Expand Up @@ -29,6 +30,7 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
Expand Down Expand Up @@ -59,9 +61,15 @@ fun ReviewScreen(
Log.d("ReviewScreen", "ReviewScreen: $it")
}
val viewState by viewModel.viewState.collectAsState()
val context = LocalContext.current
Scaffold(
topBar = {
ReviewTopBar()
ReviewTopBar(
title = stringResource(R.string.review_write),
onBackClicked = {

},
)
},
containerColor = Color.White
) { innerPadding ->
Expand Down Expand Up @@ -91,7 +99,11 @@ fun ReviewScreen(
viewModel.setEvent(ReviewEvent.OnReviewTextChanged(it))
},
onReviewRegisterClicked = {
// TODO 리뷰 등록
Toast.makeText(
context,
context.getString(R.string.register_review),
Toast.LENGTH_SHORT
).show()
},
onAddPhotoClicked = {
pickMultipleMedia.launch(
Expand Down Expand Up @@ -191,7 +203,7 @@ fun ReviewSearchBar(
fun StarRating(
modifier: Modifier = Modifier,
ratingStateList: List<State<Boolean>>,
starRatingClicked: (Int) -> Unit,
starRatingClicked: ((Int) -> Unit)? = null,
starSize: Dp = 40.dp,
) {
LazyRow(
Expand All @@ -204,7 +216,7 @@ fun StarRating(
.size(starSize)
.padding(horizontal = 1.dp)
.clickable {
starRatingClicked(index)
starRatingClicked?.invoke(index)
},
painter = if (active.value) {
painterResource(
Expand Down Expand Up @@ -235,21 +247,26 @@ fun ReviewGuideHeader(

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ReviewTopBar() {
fun ReviewTopBar(
modifier: Modifier = Modifier,
title: String,
onBackClicked: () -> Unit
) {
TopAppBar(
title = {
Text(
text = stringResource(R.string.review_write),
text = title,
style = Typography.bodySmall,
color = Grey9
)
},
actions = {
Icon(
modifier = Modifier
modifier = modifier
.size(48.dp)
.padding(12.dp)
.padding(end = 4.dp),
.padding(end = 4.dp)
.clickable(onClick = onBackClicked),
painter = painterResource(id = R.drawable.icon_x_mono),
contentDescription = null
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
package com.everymeal.presentation.ui.review.detail

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.everymeal.presentation.R
import com.everymeal.presentation.ui.review.ReviewTopBar
import com.everymeal.presentation.ui.review.StarRating
import com.everymeal.presentation.ui.theme.Gray800

@Composable
fun ReviewDetailScreen() {
val mockRatingList = remember {
listOf(
mutableStateOf(true),
mutableStateOf(true),
mutableStateOf(true),
mutableStateOf(true),
mutableStateOf(true)
)
}
Scaffold(
topBar = {
ReviewTopBar(
title = stringResource(R.string.review_title),
onBackClicked = {

},
)
}
) { innerPadding ->
Column(
modifier = Modifier.padding(innerPadding)
) {
UserProfileAppbar(
userName = "햄식이",
ratingList = mockRatingList
)
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.padding(top = 24.dp)
) {
Image(
modifier = Modifier.fillMaxSize(),
painter = painterResource(id = R.drawable.food_ex_2),
contentDescription = "more"
)
LocationButton(
modifier = Modifier
.align(Alignment.BottomStart)
.padding(
start = 16.dp,
bottom = 16.dp
)
)
PageInfo(
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(
end = 16.dp,
bottom = 16.dp
)
)
}
}
}
}

@Composable
private fun LocationButton(
modifier: Modifier = Modifier
) {
Surface(
modifier = modifier,
color = Color(0x99000000),
shape = RoundedCornerShape(size = 6.dp)
) {
Row(
modifier = Modifier.padding(
horizontal = 6.dp,
vertical = 4.dp
),
verticalAlignment = Alignment.CenterVertically
) {
Image(
modifier = Modifier.size(16.dp),
painter = painterResource(
id = R.drawable.icon_pin_location_mono
),
contentDescription = "location"
)
Spacer(modifier = Modifier.padding(4.dp))
Text(
text = "성신 이자카야",
fontSize = 14.sp,
fontWeight = FontWeight(500),
color = Color.White,
)
Image(
modifier = Modifier.size(16.dp),
painter = painterResource(id = R.drawable.icon_arrow_right),
contentDescription = null
)
}
}
}

@Composable
private fun PageInfo(
modifier: Modifier = Modifier
) {
Surface(
modifier = modifier,
color = Color(0x99000000),
shape = RoundedCornerShape(size = 20.dp)
) {
Text(
modifier = Modifier.padding(
horizontal = 8.dp,
vertical = 2.dp
),
text = "1/3",
fontSize = 14.sp,
fontWeight = FontWeight(400),
color = Color.White,
)
}
}

@Composable
private fun UserProfileAppbar(
userName: String,
userProfileUrl: String? = null,
ratingList: List<MutableState<Boolean>>
) {
Row {
Image(
modifier = Modifier.size(40.dp),
painter = painterResource(id = R.drawable.profile_ex_image),
contentDescription = "profile"
)
Column(modifier = Modifier.padding(start = 12.dp)) {
Text(
text = userName,
fontSize = 12.sp,
fontWeight = FontWeight(600),
color = Gray800,
)
Row(
verticalAlignment = Alignment.CenterVertically
) {
StarRating(
modifier = Modifier.padding(horizontal = 1.dp),
ratingStateList = ratingList,
starSize = 14.dp
)
// TODO 시간 계산 필요
Text(
modifier = Modifier.padding(start = 8.dp),
text = "3일전",
fontSize = 12.sp,
fontWeight = FontWeight(400),
color = Gray800,
)
}
}
Spacer(modifier = Modifier.weight(1f))
Image(
modifier = Modifier
.size(24.dp)
.padding(end = 20.dp),
painter = painterResource(id = R.drawable.icon_dots_mono),
contentDescription = "more"
)
}
}

@Composable
@Preview
fun PreviewReviewDetailScreen() {
ReviewDetailScreen()
}
2 changes: 2 additions & 0 deletions presentation/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@


<!-- 리뷰 화면 -->
<string name="review_title">리뷰</string>
<string name="review_text_placeholder">맛집에 대한 의견을 자세히 적어주시면 다른 사용자에게 도움이 돼요!</string>
<string name="review_guide_header">다녀온 맛집은\n어디인가요?</string>
<string name="review_write">리뷰 작성</string>
Expand Down Expand Up @@ -96,5 +97,6 @@
<string name="restaurant_share">공유하기</string>
<string name="restaurant_only_picture">사진만 올리기</string>
<string name="restaurant_review">리뷰 작성하기</string>
<string name="register_review">리뷰가 등록되었어요</string>

</resources>

0 comments on commit c502a01

Please sign in to comment.