[Fix] 문답, 문답 상세화면 유저 이미지 없어지는 오류 수정 (#125)

* [build] : cloudy 라이브러리 버전 업데이트 * [fix] : 문답 상세 - 소개 탭의 유저 이미지가 나오지 않는 오류 수정 * [fix] : 문답 - 문답 리스트의 유저 이미지가 나오지 않는 오류 수정
Nexters · Nov 1, 2024 · ae0052d · ae0052d
1 parent 66e14af
commit ae0052d
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 16 deletions.
diff --git a/...esign-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/Profile.kt b/...esign-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/Profile.kt
@@ -14,6 +14,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.layer.GraphicsLayer
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -78,24 +80,23 @@ fun BottlesProfile(
     modifier: Modifier = Modifier,
     imageUrl: String,
     profileImageType: ProfileImageType,
-    isBlur: Boolean = true
+    isBlur: Boolean = true,
+    graphicsLayer: GraphicsLayer = rememberGraphicsLayer()
 ) {
     CoilImage(
         modifier = modifier
             .size(size = profileImageType.size)
             .clip(shape = CircleShape)
-            .then(
-                if (isBlur) {
-                    Modifier.cloudy(radius = 5)
-                } else {
-                    Modifier
-                }
+            .cloudy(
+                enabled = isBlur,
+                radius = 5,
+                graphicsLayer = graphicsLayer
             ),
         imageModel = { imageUrl },
-        previewPlaceholder = painterResource(id = R.drawable.sample_image),
         imageOptions = ImageOptions(
             contentScale = ContentScale.Crop
         ),
+        previewPlaceholder = painterResource(id = R.drawable.sample_image),
         loading = {
             Box(
                 modifier = Modifier

diff --git a/...sign-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/UserInfo.kt b/...sign-system/src/main/kotlin/com/team/bottles/core/designsystem/components/etc/UserInfo.kt
@@ -9,6 +9,8 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.layer.GraphicsLayer
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -74,7 +76,8 @@ fun BottlesUserInfo(
     userName: String,
     userAge: Int,
     isBlur: Boolean = true,
-    profileImageType: ProfileImageType = ProfileImageType.LG
+    profileImageType: ProfileImageType = ProfileImageType.LG,
+    graphicsLayer: GraphicsLayer = rememberGraphicsLayer()
 ) {
     Column(
         modifier = modifier.fillMaxWidth(),
@@ -86,7 +89,8 @@ fun BottlesUserInfo(
         BottlesProfile(
             imageUrl = imageUrl,
             profileImageType = profileImageType,
-            isBlur = isBlur
+            isBlur = isBlur,
+            graphicsLayer = graphicsLayer
         )
 
         Row(
@@ -127,6 +131,7 @@ private fun UserInfoPreview() {
             imageUrl = "",
             userName = "냥냥이",
             userAge = 15,
+            graphicsLayer = rememberGraphicsLayer()
         )
     }
 }

diff --git a/core/ui/src/main/kotlin/com/team/bottles/core/ui/BottleItem.kt b/core/ui/src/main/kotlin/com/team/bottles/core/ui/BottleItem.kt
@@ -45,6 +45,7 @@ import com.team.bottles.core.ui.model.Bottle
 fun BottleItem(
     modifier: Modifier = Modifier,
     bottle: Bottle,
+    graphicsLayer: GraphicsLayer,
     onClickItem: () -> Unit,
 ) {
     Column(
@@ -126,7 +127,7 @@ fun BottleItem(
                     .clip(shape = CircleShape)
                     .cloudy(
                         radius = 5,
-                        graphicsLayer = rememberGraphicsLayer()
+                        graphicsLayer = graphicsLayer
                     ),
                 imageModel = { bottle.imageUrl },
                 previewPlaceholder = painterResource(id = R.drawable.sample_image),

diff --git a/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/components/BottleList.kt b/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/components/BottleList.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.tooling.preview.Preview
 import com.team.bottles.core.designsystem.theme.BottlesTheme
 import com.team.bottles.core.ui.BottleItem
@@ -18,8 +19,10 @@ import kotlinx.collections.immutable.toImmutableList
 fun BottleList(
     modifier: Modifier = Modifier,
     bottles: ImmutableList<Bottle>,
-    onClickItem: (Bottle) -> Unit
+    onClickItem: (Bottle) -> Unit,
 ) {
+    val graphicsLayer = rememberGraphicsLayer()
+
     LazyColumn(
         modifier = modifier.fillMaxSize(),
         contentPadding = PaddingValues(
@@ -38,8 +41,10 @@ fun BottleList(
         ) { bottle ->
             BottleItem(
                 bottle = bottle,
-                onClickItem = { onClickItem(bottle) },
-            )
+                graphicsLayer = graphicsLayer
+            ) {
+                onClickItem(bottle)
+            }
         }
     }
 }

diff --git a/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/detail/PingPongDetailScreen.kt b/feat/ping-pong/src/main/kotlin/com/team/bottles/feat/pingpong/detail/PingPongDetailScreen.kt
@@ -21,6 +21,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalFocusManager
@@ -128,6 +129,8 @@ internal fun PingPongDetailScreen(
                     .padding(innerPadding)
                     .nestedScroll(connection = pullRefreshState.nestedScrollConnection)
             ) {
+                val graphicsLayer = rememberGraphicsLayer()
+
                 LazyColumn(
                     modifier = Modifier.fillMaxSize(),
                     state = when (uiState.currentTab) {
@@ -151,6 +154,7 @@ internal fun PingPongDetailScreen(
                                 partnerLetter = uiState.partnerLetter,
                                 partnerKeyPoints = uiState.partnerKeyPoints,
                                 deleteAfterDay = uiState.deleteAfterDay,
+                                graphicsLayer = graphicsLayer
                             )
                         }
 

diff --git a/.../src/main/kotlin/com/team/bottles/feat/pingpong/detail/components/IntroductionContents.kt b/.../src/main/kotlin/com/team/bottles/feat/pingpong/detail/components/IntroductionContents.kt
@@ -10,6 +10,8 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.layer.GraphicsLayer
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.team.bottles.core.designsystem.R
@@ -27,14 +29,16 @@ internal fun LazyListScope.introductionContents(
     partnerProfile: UserProfile,
     partnerKeyPoints: List<UserKeyPoint>,
     partnerLetter: String,
+    graphicsLayer: GraphicsLayer
 ) {
     item(key = "Introduction Contents") {
         when (isStoppedPingPong) {
             false -> {
                 BottlesUserInfo(
                     imageUrl = partnerProfile.imageUrl,
                     userName = partnerProfile.userName,
-                    userAge = partnerProfile.age
+                    userAge = partnerProfile.age,
+                    graphicsLayer = graphicsLayer
                 )
 
                 Spacer(modifier = Modifier.height(height = BottlesTheme.spacing.extraLarge))
@@ -66,6 +70,7 @@ internal fun LazyListScope.introductionContents(
 @Composable
 private fun IntroductionContentsPreview() {
     BottlesTheme {
+        val graphicsLayer = rememberGraphicsLayer()
         LazyColumn(
             modifier = Modifier.fillMaxSize(),
             state = rememberLazyListState(),
@@ -80,6 +85,7 @@ private fun IntroductionContentsPreview() {
                 partnerProfile = UserProfile.sampleUserProfile(),
                 partnerKeyPoints = UserKeyPoint.exampleUerKeyPoints(),
                 partnerLetter = "편지내용입니다.",
+                graphicsLayer = graphicsLayer
             )
         }
     }

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -54,7 +54,7 @@ okHttp = "4.12.0"
 kotlinx-serialization-converter = "1.0.0"
 
 # blur-effect
-cloudy = "0.2.1"
+cloudy = "0.2.3"
 
 # coil
 landscapist-coil-compose = "2.3.6"