Merge pull request #13 from hyunjung-choi/feature/latest-images-card

Feature/latest images card

Author: hyunjung-choi

README.md

@@ -15,7 +15,7 @@
 ## 📸 ScreenShots
 
 <p>
-  <img src="https://github.com/user-attachments/assets/565fe6dc-0cd1-4c8a-ab1e-817fadd7985d", width="300" />
+  <img src="https://github.com/user-attachments/assets/7709b133-f468-459a-947a-39ddcdddf047", width="300" />
   <img src="https://github.com/user-attachments/assets/f8ede8da-ee70-431f-9f80-a31bf58421f6", width="300" />
 </p>
 

app/src/main/java/com/prography/android/test/hyunjung/ui/component/ImageItem.kt

@@ -1,45 +1,97 @@
 package com.prography.android.test.hyunjung.ui.component
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
+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.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color.Companion.Transparent
+import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
 import com.prography.android.test.hyunjung.data.model.Photo
+import com.prography.android.test.hyunjung.ui.theme.Black
+import com.prography.android.test.hyunjung.ui.theme.Typography
+import com.prography.android.test.hyunjung.ui.theme.White
 
 @Composable
-fun ImageItem(photo: Photo, onClick: () -> Unit) {
+fun ImageItem(
+    photo: Photo,
+    onClick: () -> Unit,
+    showOverlay: Boolean = false
+) {
     Card(
         modifier = Modifier
             .padding(5.dp)
             .fillMaxWidth()
             .clickable { onClick() },
         shape = RoundedCornerShape(10.dp),
     ) {
-        Column {
-            AsyncImage(
-                model = photo.urls.regular,
-                contentDescription = null,
-                modifier = Modifier
-                    .height(150.dp)
-                    .fillMaxWidth()
-                    .clip(RoundedCornerShape(10.dp)),
-                contentScale = ContentScale.Crop
-            )
+        Box {
+            if (showOverlay) {
+                AsyncImage(
+                    model = photo.urls.regular,
+                    contentDescription = null,
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(10.dp)),
+                    contentScale = ContentScale.Crop
+                )
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.BottomStart)
+                        .background(
+                            Brush.verticalGradient(
+                                colors = listOf(Transparent, Black.copy(alpha = 0.3f)),
+                                startY = 100f
+                            )
+                        )
+                ) {
+                    Text(
+                        text = "titletitletitle\n" +
+                                "타이틀은최대2줄까지",
+                        modifier = Modifier
+                            .align(Alignment.BottomStart)
+                            .padding(top = 12.dp, bottom = 8.dp, start = 8.dp, end = 8.dp),
+                        style = Typography.labelSmall.copy(
+                            shadow = Shadow(
+                                color = Black.copy(alpha = 0.25f),
+                                offset = Offset(0f, 2f),
+                                blurRadius = 4f
+                            )
+                        ),
+                        maxLines = 2,
+                        color = White,
+                        fontSize = 13.sp,
+                        fontWeight = FontWeight.Bold,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                }
+            } else {
+                AsyncImage(
+                    model = photo.urls.regular,
+                    contentDescription = null,
+                    modifier = Modifier
+                        .height(128.dp)
+                        .clip(RoundedCornerShape(10.dp)),
+                    contentScale = ContentScale.Crop
+                )
+            }
         }
     }
-}
-
-@Preview
-@Composable
-private fun ImageItemPreview() {
 }

app/src/main/java/com/prography/android/test/hyunjung/ui/home/HomeScreen.kt

@@ -100,7 +100,7 @@ fun HomeScreen(viewModel: HomeViewModel = hiltViewModel()) {
             items(
                 photos.distinctBy { it.id },
                 key = { photo -> photo.id }) { photo ->
-                ImageItem(photo, onClick = { viewModel.toggleBookmark(photo) })
+                ImageItem(photo, onClick = { viewModel.toggleBookmark(photo) }, showOverlay = true)
             }
 
             item {

app/src/main/java/com/prography/android/test/hyunjung/ui/theme/Theme.kt

@@ -1,6 +1,5 @@
 package com.prography.android.test.hyunjung.ui.theme
 
-import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme

app/src/main/java/com/prography/android/test/hyunjung/ui/theme/Type.kt

@@ -1,6 +1,7 @@
 package com.prography.android.test.hyunjung.ui.theme
 
 import androidx.compose.material3.Typography
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -14,21 +15,21 @@ val Typography = Typography(
         fontSize = 16.sp,
         lineHeight = 24.sp,
         letterSpacing = 0.5.sp
-    )
-    /* Other default text styles to override
+    ),
+
     titleLarge = TextStyle(
         fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 22.sp,
+        fontWeight = FontWeight.Bold,
+        fontSize = 20.sp,
         lineHeight = 28.sp,
-        letterSpacing = 0.sp
+        letterSpacing = (-0.3).sp
     ),
+
     labelSmall = TextStyle(
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
+        fontSize = 13.sp,
         lineHeight = 16.sp,
-        letterSpacing = 0.5.sp
+        letterSpacing = (-0.3).sp
     )
-    */
 )