Feat/#57-게시글 목록 조회 UI를 구현한다

build-logic/src/main/kotlin/convention.android.compose.gradle.kts

@@ -18,6 +18,7 @@ dependencies {
 
     "implementation"(libs.findLibrary("androidx.activity.compose").get())
     "implementation"(libs.findLibrary("androidx.compose.material3").get())
+    "implementation"(libs.findLibrary("androidx.constraintlayout").get())
     "implementation"(libs.findLibrary("androidx.compose.ui").get())
     "implementation"(libs.findLibrary("androidx.compose.ui.tooling.preview").get())
     "implementation"(libs.findLibrary("androidx.lifecycle.runtimeCompose").get())

core/designsystem/src/main/java/com/withpeace/withpeace/core/designsystem/ui/Card.kt

@@ -0,0 +1,41 @@
+package com.withpeace.withpeace.core.designsystem.ui
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
+
+@Composable
+fun WithpeaceCard(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(5.dp),
+        border = BorderStroke(width = 1.dp, color = WithpeaceTheme.colors.SystemGray2),
+        colors = CardDefaults.cardColors(
+            containerColor = WithpeaceTheme.colors.SystemWhite,
+        ),
+    ) {
+        content()
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun WithpeaceCardPreview() {
+    WithpeaceTheme {
+        WithpeaceCard {
+            Text("haha")
+        }
+    }
+}

core/ui/src/main/java/com/withpeace/withpeace/core/ui/LocalDateTimeUtil.kt

@@ -0,0 +1,37 @@
+package com.withpeace.withpeace.core.ui
+
+import android.content.Context
+import java.time.Duration
+import java.time.LocalDateTime
+import java.time.format.DateTimeFormatter
+
+fun LocalDateTime.toRelativeString(context: Context): String {
+    val currentTime = LocalDateTime.now()
+    val duration = Duration.between(this, currentTime)
+    return when {
+        duration.isLessThanOneMinute() -> context.getString(
+            R.string.second_format,
+            duration.seconds,
+        )
+
+        duration.isLessThanOneHour() -> context.getString(
+            R.string.minute_format,
+            duration.toMinutes(),
+        )
+
+        duration.isLessThanOneDay() -> context.getString(
+            R.string.hour_format,
+            duration.toHours(),
+        )
+
+        duration.isLessThanSevenDays() -> context.getString(R.string.day_format, duration.toDays())
+        else -> format(DateTimeFormatter.ofPattern(DATE_FORMAT))
+    }
+}
+
+private fun Duration.isLessThanOneMinute() = toMinutes() < 1
+private fun Duration.isLessThanOneHour() = toHours() < 1
+private fun Duration.isLessThanOneDay() = toDays() < 1
+private fun Duration.isLessThanSevenDays() = toDays() < 7
+
+private const val DATE_FORMAT = "MM월 DD일"

core/ui/src/main/res/values/strings.xml

@@ -6,4 +6,9 @@
     <string name="life">"생활"</string>
     <string name="hobby">"취미"</string>
     <string name="economy">"경제"</string>
+    <string name="second_format">%1$d초 전</string>
+    <string name="minute_format">%1$d분 전</string>
+    <string name="hour_format">%1$d시간 전</string>
+    <string name="day_format">%1$d일 전</string>
+
 </resources>

feature/postlist/build.gradle.kts

@@ -6,4 +6,7 @@ android {
     namespace = "com.withpeace.withpeace.feature.postlist"
 }
 
-dependencies {}
+dependencies {
+    implementation(libs.skydoves.landscapist.bom)
+    implementation(libs.skydoves.landscapist.glide)
+}

feature/postlist/src/main/java/com/withpeace/withpeace/feature/postlist/PostListScreen.kt

@@ -1,18 +1,37 @@
 package com.withpeace.withpeace.feature.postlist
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.skydoves.landscapist.glide.GlideImage
+import com.withpeace.withpeace.core.designsystem.theme.PretendardFont
 import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme
+import com.withpeace.withpeace.core.designsystem.ui.WithpeaceCard
 import com.withpeace.withpeace.core.domain.model.post.Post
 import com.withpeace.withpeace.core.domain.model.post.PostTopic
+import com.withpeace.withpeace.core.ui.R
+import com.withpeace.withpeace.core.ui.toRelativeString
 import java.time.LocalDateTime
 
 @Composable
@@ -35,13 +54,81 @@ fun PostListScreen(
     postList: List<Post>,
     onTopicChanged: (PostTopic) -> Unit = {},
 ) {
+    val context = LocalContext.current
     Column(modifier = Modifier.fillMaxSize()) {
         Spacer(modifier = Modifier.height(8.dp))
         TopicTabs(
             currentTopic = currentTopic,
             onClick = onTopicChanged,
             tabPosition = PostTopic.findIndex(currentTopic),
         )
+        LazyColumn(
+            contentPadding = PaddingValues(horizontal = 24.dp, vertical = 16.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            items(
+                items = postList,
+                key = {it.postId}
+            ) { post ->
+                WithpeaceCard(
+                    modifier = Modifier.fillMaxWidth(),
+                ) {
+                    ConstraintLayout(
+                        modifier = Modifier
+                            .padding(vertical = 15.dp, horizontal = 16.dp)
+                            .fillMaxWidth()
+                            .wrapContentHeight(),
+                    ) {
+                        val (column, image) = createRefs()
+                        Column(
+                            modifier = Modifier
+                                .padding(end = 8.dp)
+                                .constrainAs(column) {
+                                    top.linkTo(parent.top)
+                                    start.linkTo(parent.start)
+                                    end.linkTo(image.start)
+                                    width = Dimension.fillToConstraints
+                                },
+                        ) {
+                            Text(
+                                text = post.title,
+                                fontFamily = PretendardFont,
+                                fontWeight = FontWeight.Bold,
+                                fontSize = 16.sp,
+                                overflow = TextOverflow.Ellipsis,
+                                maxLines = 1,
+                            )
+                            Text(
+                                modifier = Modifier.padding(vertical = 8.dp),
+                                text = post.content,
+                                style = WithpeaceTheme.typography.caption,
+                                maxLines = 2,
+                                overflow = TextOverflow.Ellipsis,
+                            )
+                            Text(
+                                text = post.createDate.toRelativeString(context),
+                                fontFamily = PretendardFont,
+                                fontWeight = FontWeight.Normal,
+                                color = WithpeaceTheme.colors.SystemGray2,
+                                fontSize = 12.sp
+                            )
+                        }
+                        GlideImage(
+                            modifier = Modifier
+                                .constrainAs(image) {
+                                    top.linkTo(column.top)
+                                    bottom.linkTo(column.bottom)
+                                    end.linkTo(parent.end)
+                                    height = Dimension.fillToConstraints
+                                    width = Dimension.ratio("1:1")
+                                },
+                            imageModel = { post.postImageUrl },
+                            previewPlaceholder = R.drawable.ic_freedom,
+                        )
+                    }
+                }
+            }
+        }
     }
 }
 
@@ -55,7 +142,7 @@ private fun PostListScreenPreview() {
                 Post(
                     postId = 2049,
                     title = "periculis",
-                    content = "pellentesque",
+                    content = "pellentesq\nuehaha",
                     postTopic = PostTopic.INFORMATION,
                     createDate = LocalDateTime.now(),
                     postImageUrl = "https://duckduckgo.com/?q=verterem",

feature/postlist/src/main/java/com/withpeace/withpeace/feature/postlist/PostListViewModel.kt

@@ -31,9 +31,9 @@ class PostListViewModel @Inject constructor() : ViewModel() {
     // API 나오기 전까지 임시로 이렇게 하겠습니다!
     private fun getPost(postTopic: PostTopic) = List(10) {
         Post(
-            postId = 1746,
+            postId = it.toLong(),
             title = postTopic.toString(),
-            content = postTopic.toString(),
+            content = postTopic.toString()+"\n${postTopic.toString()}",
             postTopic = postTopic,
             createDate = LocalDateTime.of(LocalDate.of(2024, 3, 18), LocalTime.of(12, 0, 0)),
             postImageUrl = "http://withpeace.s3-website.kr.object.ncloudstorage.com/userProfile/1",

gradle/libs.versions.toml

@@ -12,6 +12,7 @@ androidxActivity = "1.8.2"
 coreSplashscreen = "1.0.1"
 hilt = "2.48"
 hiltNavigationCompose = "1.1.0"
+androidxConstraintlayout = "1.0.1"
 
 lifecycleRuntimeKtx = "2.7.0"
 okhttp = "4.11.0"
@@ -80,6 +81,7 @@ androidx-core-splashscreen = { module = "androidx.core:core-splashscreen", versi
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "androidxCore" }
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidxAppCompat" }
 
+androidx-constraintlayout = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "androidxConstraintlayout" }
 androidx-lifecycle-runtime-ktx = { module = "androidx.lifecycle:lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
 androidx-lifecycle-runtimeCompose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "androidxLifecycle" }
 androidx-lifecycle-viewModelCompose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "androidxLifecycle" }