ReviewFragment & MenuDetailFragment 리팩터링

app/build.gradle.kts

@@ -11,7 +11,7 @@ plugins {
     id("com.google.firebase.crashlytics") version "2.9.5"
     id("com.google.gms.google-services") version "4.3.15"
     id("org.jlleitschuh.gradle.ktlint") version "11.3.2"
-    id("androidx.navigation.safeargs") version "2.5.3"
+    id("androidx.navigation.safeargs.kotlin") version "2.5.3"
     id("com.google.firebase.appdistribution") version "4.0.0"
 }
 
@@ -116,6 +116,8 @@ dependencies {
     // Android arch lifecycle
     implementation("androidx.lifecycle:lifecycle-extensions:2.2.0")
     implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.6.2")
+    implementation("androidx.lifecycle:lifecycle-livedata-ktx:2.7.0")
+    implementation("androidx.lifecycle:lifecycle-runtime-compose:2.7.0")
 
     // Retrofit
     implementation("com.squareup.retrofit2:retrofit:2.9.0")
@@ -185,4 +187,13 @@ dependencies {
     implementation("androidx.paging:paging-compose:${Deps.Version.PagingCompose}")
     implementation("androidx.lifecycle:lifecycle-viewmodel-compose:${Deps.Version.ComposeViewModel}")
     implementation("androidx.hilt:hilt-navigation-compose:${Deps.Version.ComposeHiltNavigation}")
+    implementation("com.airbnb.android:lottie-compose:6.3.0")
+
+    // Coil
+    implementation("io.coil-kt:coil:2.5.0")
+    implementation("io.coil-kt:coil-compose:2.5.0")
+
+    // Paging
+    implementation("androidx.paging:paging-runtime-ktx:3.2.1")
+    implementation("androidx.paging:paging-compose:3.2.1")
 }

app/src/main/java/com/wafflestudio/siksha2/components/compose/ErrorPlaceHolder.kt

@@ -0,0 +1,42 @@
+package com.wafflestudio.siksha2.components.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.wafflestudio.siksha2.R
+import com.wafflestudio.siksha2.ui.SikshaColors
+import com.wafflestudio.siksha2.utils.dpToSp
+
+@Composable
+fun ErrorPlaceHolder(
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Image(
+            painter = painterResource(R.drawable.ic_warning),
+            contentDescription = null,
+            colorFilter = ColorFilter.tint(SikshaColors.Gray800),
+            modifier = Modifier.size(34.dp)
+        )
+        Text(
+            text = "네트워크 연결이 불안정합니다.",
+            fontSize = dpToSp(20.dp),
+            fontWeight = FontWeight.Light,
+            modifier = Modifier.padding(top = 20.dp)
+        )
+    }
+}

app/src/main/java/com/wafflestudio/siksha2/components/compose/LoadingPlaceHolder.kt

@@ -0,0 +1,32 @@
+package com.wafflestudio.siksha2.components.compose
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.animateLottieCompositionAsState
+import com.airbnb.lottie.compose.rememberLottieComposition
+import com.wafflestudio.siksha2.R
+
+@Composable
+fun LoadingPlaceHolder(
+    modifier: Modifier = Modifier
+) {
+    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.ani_loading))
+    val progress by animateLottieCompositionAsState(composition)
+    Box(
+        modifier = modifier,
+        contentAlignment = Alignment.Center
+    ) {
+        LottieAnimation(
+            composition = composition,
+            progress = { progress },
+            modifier = Modifier.size(70.dp)
+        )
+    }
+}

app/src/main/java/com/wafflestudio/siksha2/components/compose/menuDetail/LikeButton.kt

@@ -0,0 +1,27 @@
+package com.wafflestudio.siksha2.components.compose.menuDetail
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import com.wafflestudio.siksha2.R
+
+@Composable
+fun LikeButton(
+    isChecked: Boolean,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {}
+) {
+    Image(
+        painter = painterResource(
+            if (isChecked) {
+                R.drawable.ic_full_heart_small
+            } else {
+                R.drawable.ic_empty_heart_small
+            }
+        ),
+        contentDescription = "좋아요",
+        modifier = modifier.clickable { onClick() }
+    )
+}

app/src/main/java/com/wafflestudio/siksha2/components/compose/menuDetail/MenuRatingBars.kt

@@ -0,0 +1,92 @@
+package com.wafflestudio.siksha2.components.compose.menuDetail
+
+import androidx.compose.foundation.Image
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.wafflestudio.siksha2.R
+import com.wafflestudio.siksha2.ui.SikshaColors
+import com.wafflestudio.siksha2.utils.dpToSp
+import kotlin.math.max
+
+@Composable
+fun MenuRatingBar(
+    ratingIndex: Int,
+    ratio: Float,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = ratingIndex.toString(),
+            modifier = Modifier.padding(end = 3.dp),
+            fontSize = dpToSp(8.dp),
+            fontWeight = FontWeight.Bold,
+            color = SikshaColors.Gray500
+        )
+        Image(
+            painter = painterResource(R.drawable.ic_gray_star),
+            contentDescription = null,
+            modifier = Modifier
+                .padding(end = 9.dp)
+                .width(8.dp)
+                .height(8.dp)
+        )
+        if (ratio > 0.0f) {
+            Box(
+                modifier = Modifier
+                    .weight(ratio)
+                    .height(5.dp)
+                    .background(
+                        color = SikshaColors.OrangeMain,
+                        shape = RoundedCornerShape(
+                            topStart = CornerSize(0.dp),
+                            topEnd = CornerSize(2.dp),
+                            bottomEnd = CornerSize(2.dp),
+                            bottomStart = CornerSize(0.dp)
+                        )
+                    )
+            ) {}
+        }
+        if (ratio < 1.0f) {
+            Spacer(modifier = Modifier.weight(1.0f - ratio))
+        }
+    }
+}
+
+@Composable
+fun MenuRatingBars(
+    distributions: List<Long>,
+    modifier: Modifier = Modifier
+) {
+    val maxCount = max(distributions.max(), 1L)
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(5.dp)
+    ) {
+        distributions.reversed().forEachIndexed { index, cnt ->
+            MenuRatingBar(
+                ratingIndex = 5 - index,
+                ratio = cnt.toFloat() / maxCount.toFloat()
+            )
+        }
+    }
+}

app/src/main/java/com/wafflestudio/siksha2/components/compose/menuDetail/MenuRatingStars.kt

@@ -0,0 +1,55 @@
+package com.wafflestudio.siksha2.components.compose.menuDetail
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.wafflestudio.siksha2.R
+import kotlin.math.roundToInt
+
+@Composable
+private fun MenuReviewSingleStar(
+    modifier: Modifier = Modifier,
+    flag: Int
+) {
+    Image(
+        painter = painterResource(
+            when {
+                flag <= 0 -> R.drawable.ic_full_star
+                flag == 1 -> R.drawable.ic_half_star
+                else -> R.drawable.ic_empty_star
+            }
+        ),
+        contentDescription = null,
+        modifier = modifier.heightIn(max = 48.dp).fillMaxHeight().aspectRatio(1f)
+    )
+}
+
+@Composable
+fun MenuRatingStars(
+    rating: Float,
+    modifier: Modifier = Modifier.width(100.dp).height(18.dp),
+    dragEnabled: Boolean = false
+) {
+    val rounds = (rating * 2).roundToInt()
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        for (i in 1..5) {
+            MenuReviewSingleStar(
+                flag = i * 2 - rounds
+            )
+        }
+    }
+}