키워드리뷰 수정

app/src/main/java/com/wafflestudio/siksha2/compose/ui/menudetail/MenuDetailScreen.kt

@@ -30,9 +30,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.ColorFilter
+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
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.core.net.toUri
@@ -51,13 +53,16 @@ import kotlin.math.min
 import com.wafflestudio.siksha2.ui.KeywordFoodComposition
 import com.wafflestudio.siksha2.ui.KeywordPrice
 import com.wafflestudio.siksha2.ui.KeywordTaste
+import com.wafflestudio.siksha2.utils.showImageViewer
+import org.w3c.dom.Text
 import timber.log.Timber
 
 @Composable
 fun MenuDetailRoute(
     menuId: Long,
     vm: MenuDetailViewModel,
     onToggleLikeMenu: () -> Unit,
+    onToggleLikeReview: (Review) -> Unit,
     onClickLeaveReview: () -> Unit,
     onNavigateToReviewPhoto: (Long) -> Unit,
     modifier: Modifier = Modifier
@@ -77,7 +82,11 @@ fun MenuDetailRoute(
         imageReviews = imageReviews,
         keywordDist = keywordDist ?: KeywordDist.Empty,
         onToggleLikeMenu = onToggleLikeMenu,
-        onClickLeaveReview = onClickLeaveReview,
+        onToggleLikeReview = onToggleLikeReview,
+        onClickLeaveReview = {
+            vm.notifySendReviewWaiting()
+            onClickLeaveReview()
+        },
         onNavigateToReviewPhoto = { menu?.let { onNavigateToReviewPhoto(it.id) } },
         modifier = modifier
     )
@@ -90,6 +99,7 @@ fun MenuDetailScreen(
     imageReviews: LazyPagingItems<Review>,
     keywordDist: KeywordDist,
     onToggleLikeMenu: () -> Unit,
+    onToggleLikeReview: (Review) -> Unit,
     onClickLeaveReview: () -> Unit,
     onNavigateToReviewPhoto: () -> Unit,
     modifier: Modifier = Modifier
@@ -102,7 +112,8 @@ fun MenuDetailScreen(
     }
 
     LazyColumn(
-        modifier = modifier
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         item {
             Column(
@@ -149,6 +160,7 @@ fun MenuDetailScreen(
                     MenuKeywordStats(
                         keywordDist.keywords,
                         keywordDist.keywordCounts,
+                        keywordDist.keywordTotals,
                         keywordIcons = listOf(
                             { KeywordTaste() },
                             { KeywordPrice() },
@@ -176,11 +188,13 @@ fun MenuDetailScreen(
         item {
             Spacer(Modifier.height(10.dp).fillMaxWidth().background(SikshaTheme.colors.Gray100))
         }
-        item {
-            BriefImageReviews(
-                imageReviews = imageReviews,
-                onNavigateToReviewPhoto = onNavigateToReviewPhoto
-            )
+        if (imageReviews.itemCount > 0) {
+            item {
+                BriefImageReviews(
+                    imageReviews = imageReviews,
+                    onNavigateToReviewPhoto = onNavigateToReviewPhoto
+                )
+            }
         }
         item {
             Box(
@@ -197,22 +211,35 @@ fun MenuDetailScreen(
                 )
             }
         }
-        items(
-            reviews.itemCount,
-            key = reviews.itemKey { it.id }
-        ) { idx ->
-            val review = reviews[idx]
-            if (review != null) {
-                MenuReviewItem(
-                    userName = review.userId.toString(),
-                    menuRating = review.score.toFloat(),
-                    timeText = review.createdAt,
-                    reviewText = review.comment,
-                    isLiked = review.isLiked,
-                    likeCount = review.likeCount ?: 0L,
-                    keywords = review.keywordReviews.filterNotNull().filter { it.isNotBlank() },
-                    imageUris = review.etc.images?.map { it.toUri() } ?: listOf(),
-                    modifier = Modifier.padding(horizontal = 14.dp)
+        if (reviews.itemCount > 0) {
+            items(
+                reviews.itemCount,
+                key = reviews.itemKey { it.id }
+            ) { idx ->
+                val review = reviews[idx]
+                if (review != null) {
+                    MenuReviewItem(
+                        userName = review.userId.toString(),
+                        menuRating = review.score.toFloat(),
+                        timeText = review.createdAt,
+                        reviewText = review.comment,
+                        isLiked = review.isLiked,
+                        likeCount = review.likeCount,
+                        keywords = review.keywordReviews.filter { it != "" } as List<String>,
+                        onToggleLike = { onToggleLikeReview(review) },
+                        imageUris = review.etc.images?.map { it.toUri() } ?: listOf(),
+                        modifier = Modifier.padding(horizontal = 14.dp)
+                    )
+                }
+            }
+        } else {
+            item {
+                Text(
+                    text = stringResource(R.string.menu_detail_no_review),
+                    fontSize = 15.sp,
+                    color = SikshaTheme.colors.Black,
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier.padding(top = 30.dp)
                 )
             }
         }
@@ -226,6 +253,7 @@ fun BriefImageReviews(
     modifier: Modifier = Modifier
 ) {
     val imagePreviewScrollState = rememberScrollState()
+    val context = LocalContext.current
     Box(
         modifier = modifier
             .fillMaxWidth()
@@ -251,7 +279,7 @@ fun BriefImageReviews(
         )
     }
     Row(
-        modifier = Modifier
+        modifier = Modifier.fillMaxWidth()
             .padding(horizontal = 16.dp)
             .horizontalScroll(imagePreviewScrollState),
         horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -275,7 +303,10 @@ fun BriefImageReviews(
                         imageUri = it!!.toUri(),
                         modifier = Modifier
                             .size(120.dp)
-                            .clip(RoundedCornerShape(10.dp))
+                            .clip(RoundedCornerShape(10.dp)),
+                        onClick = {
+                            context.showImageViewer(listOf(it), 0)
+                        }
                     )
                 }
             } else {

app/src/main/java/com/wafflestudio/siksha2/compose/ui/menudetail/MenuKeywordStats.kt

@@ -2,9 +2,12 @@ package com.wafflestudio.siksha2.compose.ui.menudetail
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+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.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -24,47 +27,68 @@ import com.wafflestudio.siksha2.ui.SikshaTheme
 fun MenuKeywordStat(
     keywordString: String,
     keywordCount: Long,
+    keywordTotal: Long,
     keywordIcon: @Composable () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Row(
-        modifier = modifier.background(color = SikshaTheme.colors.Gray100, shape = RoundedCornerShape(8.dp))
-            .padding(top = 6.dp, bottom = 6.dp, start = 14.dp, end = 20.dp),
-        verticalAlignment = Alignment.CenterVertically
+    Box(
+        modifier = modifier.fillMaxWidth()
+            .background(color = SikshaTheme.colors.Gray100, shape = RoundedCornerShape(8.dp))
     ) {
-        keywordIcon()
-        Spacer(Modifier.width(6.dp))
-        Text(
-            text = keywordString,
-            fontSize = 13.sp,
-            fontWeight = FontWeight.Bold,
-            color = SikshaTheme.colors.Gray600,
-            modifier = Modifier.weight(1f)
-        )
-        Text(
-            text = keywordCount.toString(),
-            fontSize = 14.sp,
-            fontWeight = FontWeight.ExtraBold,
-            color = SikshaTheme.colors.Orange500
-        )
+        if (keywordCount > 0) {
+            Box(modifier = Modifier.matchParentSize()) {
+                Box(
+                    modifier = Modifier.fillMaxHeight()
+                        .fillMaxWidth(keywordCount.toFloat() / keywordTotal.toFloat())
+                        .align(Alignment.CenterStart)
+                        .background(color = SikshaTheme.colors.OrangeTint, shape = RoundedCornerShape(8.dp))
+                )
+            }
+        }
+        Row(
+            modifier = Modifier.fillMaxWidth()
+                .padding(top = 6.dp, bottom = 6.dp, start = 14.dp, end = 20.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            keywordIcon()
+            Spacer(Modifier.width(6.dp))
+            Text(
+                text = keywordString,
+                fontSize = 13.sp,
+                fontWeight = FontWeight.Bold,
+                color = if (keywordString in listOf("맛", "가격", "음식구성")) SikshaTheme.colors.Gray600 else SikshaTheme.colors.Gray800,
+                modifier = Modifier.weight(1f)
+            )
+            Text(
+                text = keywordCount.toString(),
+                fontSize = 14.sp,
+                fontWeight = FontWeight.ExtraBold,
+                color = SikshaTheme.colors.Orange500
+            )
+        }
     }
 }
 
 @Composable
 fun MenuKeywordStats(
     keywords: List<String>,
     keywordCounts: List<Long>,
+    keywordTotals: List<Long>,
     keywordIcons: List<@Composable () -> Unit>,
     modifier: Modifier = Modifier
 ) {
     Column(
         modifier = modifier,
         verticalArrangement = Arrangement.spacedBy(6.dp)
     ) {
+        // TODO: 빈 스트링일 때 처리
         for (i in keywords.ifEmpty { listOf("맛", "가격", "음식구성") }.indices) {
+            var keyword = keywords[i]
+            if (keyword == "") keyword = listOf("맛", "가격", "음식구성")[i]
             MenuKeywordStat(
-                keywordString = keywords.ifEmpty { listOf("맛", "가격", "음식구성") }[i],
+                keywordString = keyword,
                 keywordCount = keywordCounts.ifEmpty { listOf<Long>(0, 0, 0) }[i],
+                keywordTotal = keywordTotals.ifEmpty { listOf<Long>(0, 0, 0) }[i],
                 keywordIcon = keywordIcons[i]
             )
         }
@@ -76,12 +100,13 @@ fun MenuKeywordStats(
 fun MenuKeywordStatsPreview() {
     MenuKeywordStats(
         keywords = listOf("맛", "가격", "음식구성"),
-        keywordCounts = listOf(12, 3, 1),
+        keywordCounts = listOf(6, 2, 1),
+        keywordTotals = listOf(12, 3, 1),
         keywordIcons = listOf(
             { CancelIcon() },
             { CancelIcon() },
             { CancelIcon() }
         ),
-        modifier = Modifier.height(150.dp)
+        modifier = Modifier.height(300.dp)
     )
 }

app/src/main/java/com/wafflestudio/siksha2/compose/ui/reviews/LeaveReviewScreen.kt

@@ -1,12 +1,13 @@
 package com.wafflestudio.siksha2.compose.ui.reviews
 
-import android.content.Context
 import android.net.Uri
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
@@ -23,10 +24,10 @@ import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -50,7 +51,6 @@ import com.wafflestudio.siksha2.ui.SikshaTypography
 import com.wafflestudio.siksha2.ui.menuDetail.MenuDetailViewModel
 import com.wafflestudio.siksha2.utils.KeyboardUtil.keyboardAsState
 import com.wafflestudio.siksha2.utils.hasFinalConsInKr
-import kotlinx.coroutines.launch
 import kotlin.math.roundToInt
 
 @Composable
@@ -61,7 +61,8 @@ fun LeaveReviewRoute(
     onNavigateUp: () -> Unit,
     onAddImage: () -> Unit,
     onClickDetails: (Uri) -> Unit,
-    context: Context,
+    onSubmitReview: (Double, String) -> Unit,
+    onUploadSuccess: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     val menu by vm.menu.observeAsState()
@@ -73,15 +74,24 @@ fun LeaveReviewRoute(
 
     val keyboardState by keyboardAsState()
 
-    val scope = rememberCoroutineScope()
+    val reviewState by vm.leaveReviewState.observeAsState()
+    LaunchedEffect(reviewState) {
+        if (reviewState == MenuDetailViewModel.ReviewState.SUCCESS) {
+            onUploadSuccess()
+        }
+    }
 
     LeaveReviewScreen(
         menu = menu,
         rating = rating,
         submitEnabled = selectedKeywords.all { it != "" },
         keywordTitleList = keywordTitleList,
         keywordChoiceLists = keywordChoiceLists,
-        keywordIconList = listOf({ KeywordTaste() }, { KeywordPrice() }, { KeywordFoodComposition() }),
+        keywordIconList = listOf(
+            { KeywordTaste(sizePx = 22) },
+            { KeywordPrice(sizePx = 22) },
+            { KeywordFoodComposition(sizePx = 22) }
+        ),
         selectedKeywords = selectedKeywords,
         comment = comment,
         commentPlaceHolder = {
@@ -96,7 +106,7 @@ fun LeaveReviewRoute(
         imageUriList = imageUriList,
         onNavigateUp = onNavigateUp,
         onSubmitReview = {
-            scope.launch { vm.leaveReview(context) }
+            onSubmitReview(rating.toDouble(), comment.ifEmpty { commentHint!! })
         },
         onRatingChange = { rating -> vm.setReviewRating(rating) },
         onSelectKeyword = { idx, keyword -> vm.selectKeyword(idx, keyword) },
@@ -110,6 +120,7 @@ fun LeaveReviewRoute(
     )
 }
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun LeaveReviewScreen(
     menu: Menu?,
@@ -163,7 +174,7 @@ fun LeaveReviewScreen(
                     .padding(top = 40.dp, bottom = 20.dp),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Row {
+                FlowRow {
                     Text(
                         text = menu?.nameKr ?: "",
                         fontSize = 20.sp,
@@ -181,6 +192,13 @@ fun LeaveReviewScreen(
                         fontWeight = FontWeight.Bold,
                         color = SikshaTheme.colors.Gray700
                     )
+                    Spacer(Modifier.width(5.dp))
+                    Text(
+                        text = stringResource(R.string.leave_review_how_about),
+                        fontSize = 20.sp,
+                        fontWeight = FontWeight.Bold,
+                        color = SikshaTheme.colors.Gray700
+                    )
                 }
                 Spacer(Modifier.height(24.dp))
                 Text(