[feat] Artworks(작품목록) 화면 구성 #15

app/build.gradle.kts

@@ -63,19 +63,16 @@ dependencies {
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.compose)
     implementation(libs.androidx.activity.compose)
-    implementation(platform(libs.androidx.compose.bom))
     implementation(libs.androidx.compose.ui)
     implementation(libs.androidx.compose.ui.graphics)
     implementation(libs.androidx.compose.ui.tooling.preview)
     implementation(libs.androidx.material3)
-    androidTestImplementation(platform(libs.androidx.compose.bom))
-    androidTestImplementation(libs.androidx.compose.ui.test.junit4)
     debugImplementation(libs.androidx.compose.ui.tooling)
-    debugImplementation(libs.androidx.compose.ui.test.manifest)
     implementation(libs.androidx.startup)
 
     implementation(libs.hilt)
     ksp(libs.hilt.compiler)
 
     implementation(libs.timber)
+    implementation(libs.coil.compose)
 }

app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
         android:name="com.nexters.ziine.android.ZiineApplication"
         android:allowBackup="true"

app/src/main/kotlin/com/nexters/ziine/android/ZiineApplication.kt

@@ -1,7 +1,24 @@
 package com.nexters.ziine.android
 
 import android.app.Application
+import coil.ImageLoader
+import coil.ImageLoaderFactory
+import coil.disk.DiskCache
+import coil.util.DebugLogger
 import dagger.hilt.android.HiltAndroidApp
 
 @HiltAndroidApp
-class ZiineApplication : Application()
+class ZiineApplication : Application(), ImageLoaderFactory {
+    override fun newImageLoader(): ImageLoader {
+        return ImageLoader.Builder(this)
+            .diskCache {
+                DiskCache.Builder()
+                    .directory(cacheDir.resolve("image_cache"))
+                    .maxSizeBytes(10 * 1024 * 1024)
+                    .build()
+            }
+            .logger(DebugLogger())
+            .respectCacheHeaders(false)
+            .build()
+    }
+}

data/src/main/java/com/nexters/ziine/android/data/di/RetrofitModule.kt

@@ -18,13 +18,13 @@ import javax.inject.Singleton
 @InstallIn(SingletonComponent::class)
 object RetrofitModule {
     @Provides
-    fun providesHttpLoggingInterceptor(): HttpLoggingInterceptor =
-        HttpLoggingInterceptor().apply { level = HttpLoggingInterceptor.Level.BODY }
+    fun providesHttpLoggingInterceptor(): HttpLoggingInterceptor = HttpLoggingInterceptor().apply { level = HttpLoggingInterceptor.Level.BODY }
 
     @Provides
-    fun providesAdjustMaxRequestPerHostOKHttpDispatcher(): Dispatcher = Dispatcher().apply {
-        maxRequestsPerHost = 10
-    }
+    fun providesAdjustMaxRequestPerHostOKHttpDispatcher(): Dispatcher =
+        Dispatcher().apply {
+            maxRequestsPerHost = 10
+        }
 
     @Provides
     fun providesOKHttpClient(
@@ -41,9 +41,7 @@ object RetrofitModule {
 
     @Provides
     @Singleton
-    fun providesTripDrawRetrofit(
-        okHttpClient: OkHttpClient,
-    ): Retrofit {
+    fun providesTripDrawRetrofit(okHttpClient: OkHttpClient): Retrofit {
         val contentType = "application/json".toMediaType()
         /** baseurl 추후 추가 예정 */
         return Retrofit.Builder()

gradle/libs.versions.toml

@@ -16,15 +16,14 @@ kotlinx-collections-immutable = "0.3.8"
 # android
 agp = "8.7.3"
 activity-compose = "1.10.0"
-androidx-compose-foundation = "1.8.0-beta01"
 androidx-lifecycle = "2.8.7"
 androidx-navigation = "2.8.6"
 androidx-core-splashscreen = "1.0.1"
 androidx-datastore = "1.1.2"
 androidx-core-ktx = "1.15.0"
 androidx-startup = "1.2.0"
 androidx-hilt-navigation-compose = "1.2.0"
-compose-bom = "2025.01.01"
+androidx-compose-material3 = "1.3.1"
 
 # google
 google-secrets = "2.0.1"
@@ -67,20 +66,17 @@ androidx-activity-compose = { group = "androidx.activity", name = "activity-comp
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "androidx-core-ktx" }
 androidx-core-splashscreen = { group = "androidx.core", name = "core-splashscreen", version.ref = "androidx-core-splashscreen" }
 androidx-compose-animation = { group = "androidx.compose.animation", name = "animation" }
-androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }
-androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "androidx-compose-foundation" }
+androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }
 androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout" }
 androidx-compose-material-iconsExtended = { group = "androidx.compose.material", name = "material-icons-extended" }
 androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime" }
 androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
 androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
-androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
-androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
 androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
 androidx-lifecycle-runtime-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
 androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "androidx-lifecycle" }
-androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "androidx-compose-material3" }
 androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "androidx-navigation" }
 androidx-datastore-preferences = { group = "androidx.datastore", name = "datastore-preferences", version.ref = "androidx-datastore" }
 androidx-startup = { group = "androidx.startup", name = "startup-runtime", version.ref = "androidx-startup" }
@@ -99,6 +95,7 @@ coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coi
 landscapist-bom = { group = "com.github.skydoves", name = "landscapist-bom", version.ref = "landscapist" }
 landscapist-coil = { group = "com.github.skydoves", name = "landscapist-coil" }
 landscapist-placeholder = { group = "com.github.skydoves", name = "landscapist-placeholder" }
+landscapist-animation = { group = "com.github.skydoves", name = "landscapist-animation" }
 timber = { group = "com.jakewharton.timber", name = "timber", version.ref = "timber" }
 firebase-bom = { group = "com.google.firebase", name = "firebase-bom", version.ref = "firebase-bom" }
 firebase-analytics = { group = "com.google.firebase", name = "firebase-analytics-ktx" }

presentation/build.gradle.kts

@@ -47,9 +47,9 @@ dependencies {
     implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.material3)
     implementation(libs.androidx.navigation.compose)
-    implementation(platform(libs.androidx.compose.bom))
     implementation(libs.bundles.compose)
     implementation(libs.androidx.hilt.navigation.compose)
+    debugImplementation(libs.androidx.compose.ui.tooling)
 
     implementation(libs.androidx.lifecycle.runtime.compose)
     implementation(libs.androidx.lifecycle.viewmodel.compose)
@@ -58,6 +58,12 @@ dependencies {
     implementation(libs.hilt)
     ksp(libs.hilt.compiler)
 
+    implementation(libs.coil.compose)
+    implementation(libs.landscapist.bom)
+    implementation(libs.landscapist.coil)
+    implementation(libs.landscapist.placeholder)
+    implementation(libs.landscapist.animation)
+
     implementation(libs.compose.system.ui.controller)
     implementation(libs.lottie.compose)
 }

presentation/src/main/AndroidManifest.xml

@@ -3,6 +3,8 @@
     xmlns:tools="http://schemas.android.com/tools"
     tools:ignore="DiscouragedApi">
 
+    <uses-permission android:name="android.permission.VIBRATE" />
+
     <application>
         <activity
             android:name=".splash.SplashActivity"

presentation/src/main/kotlin/com/nexters/ziine/android/presentation/MainActivity.kt

@@ -8,7 +8,9 @@ import androidx.compose.runtime.DisposableEffect
 import com.nexters.ziine.android.presentation.ui.theme.Gray900
 import com.nexters.ziine.android.presentation.ui.theme.ZiineTheme
 import tech.thdev.compose.exteions.system.ui.controller.rememberExSystemUiController
+import dagger.hilt.android.AndroidEntryPoint
 
+@AndroidEntryPoint
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)

presentation/src/main/kotlin/com/nexters/ziine/android/presentation/artworks/ArtworkItem.kt

@@ -0,0 +1,112 @@
+package com.nexters.ziine.android.presentation.artworks
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+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.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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.nexters.ziine.android.presentation.R
+import com.nexters.ziine.android.presentation.artworks.model.UiArtwork
+import com.nexters.ziine.android.presentation.component.NetworkImage
+import com.nexters.ziine.android.presentation.preview.ComponentPreview
+import com.nexters.ziine.android.presentation.ui.theme.Gray0
+import com.nexters.ziine.android.presentation.ui.theme.Heading4
+import com.nexters.ziine.android.presentation.ui.theme.Paragraph2
+import com.nexters.ziine.android.presentation.ui.theme.ZiineTheme
+
+@Composable
+internal fun ArtworkItem(
+    artwork: UiArtwork,
+    onArtworkItemSelect: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .heightIn(max = 900.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .clickable(onClick = onArtworkItemSelect),
+    ) {
+        NetworkImage(
+            imageUrl = artwork.imageUrl,
+            contentDescription = "Artwork by ${artwork.artistName}",
+            modifier = Modifier.fillMaxWidth(),
+            contentScale = ContentScale.FillWidth,
+        )
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 20.dp, start = 20.dp)
+                .align(Alignment.TopStart),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.placeholder),
+                contentDescription = "Profile picture of ${artwork.artistName}",
+                modifier = Modifier
+                    .size(28.dp)
+                    .clip(CircleShape),
+                contentScale = ContentScale.Crop,
+            )
+            Spacer(modifier = Modifier.width(6.dp))
+            Text(
+                text = artwork.artistName,
+                style = Paragraph2,
+                color = Gray0,
+                modifier = Modifier.weight(1f),
+            )
+        }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 20.dp, end = 20.dp, bottom = 20.dp)
+                .align(Alignment.BottomStart),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(
+                text = artwork.title,
+                color = Gray0,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
+                style = Heading4,
+            )
+        }
+    }
+}
+
+@ComponentPreview
+@Composable
+private fun ArtworkItemPreview() {
+    ZiineTheme {
+        ArtworkItem(
+            artwork = UiArtwork(
+                id = 1,
+                imageUrl = "https://example.com/artwork.jpg",
+                artistName = "Artist Name",
+                title = "Artwork Name",
+            ),
+            onArtworkItemSelect = {},
+        )
+    }
+}

presentation/src/main/kotlin/com/nexters/ziine/android/presentation/artworks/ArtworksNavigation.kt

@@ -1,6 +1,5 @@
 package com.nexters.ziine.android.presentation.artworks
 
-import androidx.compose.ui.Modifier
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -11,10 +10,8 @@ fun NavController.navigateToArtworks(navOptions: NavOptions) {
     navigate(MainTabRoute.Artworks, navOptions)
 }
 
-fun NavGraphBuilder.artworksScreen(modifier: Modifier = Modifier) {
+fun NavGraphBuilder.artworksScreen() {
     composable<MainTabRoute.Artworks> {
-        ArtworksRoute(
-            modifier = modifier,
-        )
+        ArtworksRoute()
     }
 }