[fix] NetworkImage 관련 문제 해결 (#15)

- 이미지 로드 실패시, 실패 이미지가 두개가 다른 비율로 로드되는 문제 해결 - 이미지가 사진의 비율에 따라 세로 크기가 변동되도록 구현(가로 크기 고정) - 작품목록 리스트 상하 padding 적용
Nexters · Feb 3, 2025 · d9f70b9 · d9f70b9
1 parent 3016b85
commit d9f70b9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 31 deletions.
diff --git a/presentation/src/main/kotlin/com/nexters/ziine/android/presentation/artworks/ArtworkItem.kt b/presentation/src/main/kotlin/com/nexters/ziine/android/presentation/artworks/ArtworkItem.kt
@@ -6,21 +6,19 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -43,6 +41,7 @@ fun ArtworkItem(
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = 16.dp)
+            .heightIn(max = 900.dp)
             .clip(RoundedCornerShape(16.dp))
             .clickable(
                 onClick = onArtworkItemSelect,
@@ -51,14 +50,7 @@ fun ArtworkItem(
         NetworkImage(
             imageUrl = artwork.imageUrl,
             contentDescription = "Artwork by ${artwork.artistName}",
-            modifier = Modifier
-                .fillMaxWidth()
-                .aspectRatio(
-                    ratio = LocalDensity.current.run {
-                        // 이미지 로드 후 실제 비율을 계산하여 적용
-                        remember(artwork.imageUrl) { 1f } // 기본값으로 1:1 비율 설정
-                    },
-                ),
+            modifier = Modifier.fillMaxWidth(),
             contentScale = ContentScale.FillWidth,
         )
 

diff --git a/...ntation/src/main/kotlin/com/nexters/ziine/android/presentation/artworks/ArtworksScreen.kt b/...ntation/src/main/kotlin/com/nexters/ziine/android/presentation/artworks/ArtworksScreen.kt
@@ -46,7 +46,7 @@ internal fun ArtworksScreen(
     ) {
         LazyColumn(
             modifier = Modifier.fillMaxSize(),
-            contentPadding = PaddingValues(top = 16.dp),
+            contentPadding = PaddingValues(vertical = 16.dp),
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
             items(

diff --git a/...ain/kotlin/com/nexters/ziine/android/presentation/artworks/viewmodel/ArtworksViewModel.kt b/...ain/kotlin/com/nexters/ziine/android/presentation/artworks/viewmodel/ArtworksViewModel.kt
@@ -43,37 +43,37 @@ class ArtworksViewModel
                             Artwork(
                                 id = 1,
                                 artistName = "Artist 1",
-                                imageUrl = "https://via.placeholder.com/150",
+                                imageUrl = "https://placehold.co/600x400/png",
                                 title = "Artwork 1",
                             ),
                             Artwork(
                                 id = 2,
                                 artistName = "Artist 2",
-                                imageUrl = "https://via.placeholder.com/150",
+                                imageUrl = "https://placehold.co/400x600/png",
                                 title = "Artwork 2",
                             ),
                             Artwork(
                                 id = 3,
                                 artistName = "Artist 3",
-                                imageUrl = "https://via.placeholder.com/150",
+                                imageUrl = "https://placehold.co/500x500/png",
                                 title = "Artwork 3",
                             ),
                             Artwork(
                                 id = 4,
                                 artistName = "Artist 4",
-                                imageUrl = "https://via.placeholder.com/150",
+                                imageUrl = "https://placehold.co/300x500/png",
                                 title = "Artwork 4",
                             ),
                             Artwork(
                                 id = 5,
                                 artistName = "Artist 5",
-                                imageUrl = "https://via.placeholder.com/150",
+                                imageUrl = "https://placehold.co/500x300/png",
                                 title = "Artwork 5",
                             ),
                             Artwork(
                                 id = 6,
                                 artistName = "Artist 6",
-                                imageUrl = "https://via.placeholder.com/150",
+                                imageUrl = "https://placehold.co/400x800/png",
                                 title = "Artwork 6",
                             ),
                         ),

diff --git a/...entation/src/main/kotlin/com/nexters/ziine/android/presentation/component/NetworkImage.kt b/...entation/src/main/kotlin/com/nexters/ziine/android/presentation/component/NetworkImage.kt
@@ -6,8 +6,12 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.painterResource
+import coil.ImageLoader
+import coil.memory.MemoryCache
+import coil.request.ImageRequest
 import com.nexters.ziine.android.presentation.R
 import com.nexters.ziine.android.presentation.preview.ComponentPreview
 import com.nexters.ziine.android.presentation.ui.theme.ZiineTheme
@@ -22,37 +26,42 @@ fun NetworkImage(
     imageUrl: String?,
     contentDescription: String?,
     modifier: Modifier = Modifier,
-    placeholder: Painter = painterResource(id = R.drawable.placeholder),
+    loadingImage: Painter = painterResource(id = R.drawable.placeholder),
     failureImage: Painter = painterResource(id = R.drawable.placeholder),
     contentScale: ContentScale = ContentScale.Crop,
 ) {
+    val context = LocalContext.current
+
     if (LocalInspectionMode.current) {
         Image(
-            painter = placeholder,
+            painter = loadingImage,
             contentDescription = "Example Image Icon",
             modifier = modifier,
         )
     } else {
         CoilImage(
-            imageModel = { imageUrl },
+            imageRequest = {
+                ImageRequest.Builder(context)
+                    .data(imageUrl)
+                    .build()
+            },
+            imageLoader = {
+                ImageLoader.Builder(context)
+                    .memoryCache { MemoryCache.Builder(context).maxSizePercent(0.25).build() }
+                    .build()
+            },
             modifier = modifier,
             component = rememberImageComponent {
                 +CrossfadePlugin(duration = 500)
-                +PlaceholderPlugin.Loading(placeholder)
-                +PlaceholderPlugin.Failure(placeholder)
+                // 사진이 어떻게 나오는지 확인하기 위해 개발용으로 넣어둠, API 연동 후 제거 예정
+                // +PlaceholderPlugin.Loading(loadingImage)
+                +PlaceholderPlugin.Failure(failureImage)
             },
             imageOptions = ImageOptions(
                 contentScale = contentScale,
-                alignment = Alignment.Center,
+                alignment = Alignment.TopCenter,
                 contentDescription = contentDescription,
             ),
-            failure = {
-                Image(
-                    painter = failureImage,
-                    contentDescription = "Failure Image",
-                    modifier = modifier,
-                )
-            },
         )
     }
 }