fix: 홈화면 1차 QA

app/src/main/java/com/into/websoso/ui/main/home/HomeViewModel.kt

@@ -5,6 +5,7 @@ import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import com.into.websoso.data.model.PopularFeedsEntity
 import com.into.websoso.data.model.PopularNovelsEntity
 import com.into.websoso.data.model.RecommendedNovelsByUserTasteEntity
 import com.into.websoso.data.model.TermsAgreementEntity
@@ -98,7 +99,7 @@ class HomeViewModel
                     loading = false,
                     error = false,
                     popularNovels = popularNovels.popularNovels,
-                    popularFeeds = popularFeeds.chunked(HOME_POPULAR_FEED_PAGE_SIZE),
+                    popularFeeds = popularFeeds.toHomePopularFeedPages(),
                     recommendedNovelsByUserTaste = recommendedNovels.tasteNovels,
                 )
             }
@@ -148,7 +149,7 @@ class HomeViewModel
                     loading = false,
                     error = false,
                     popularNovels = popularNovels.popularNovels,
-                    popularFeeds = popularFeeds.chunked(HOME_POPULAR_FEED_PAGE_SIZE),
+                    popularFeeds = popularFeeds.toHomePopularFeedPages(),
                 )
             }
         }
@@ -167,7 +168,7 @@ class HomeViewModel
                 }.onSuccess { popularFeeds ->
                     _uiState.value = uiState.value?.copy(
                         error = false,
-                        popularFeeds = popularFeeds.chunked(HOME_POPULAR_FEED_PAGE_SIZE),
+                        popularFeeds = popularFeeds.toHomePopularFeedPages(),
                     )
                 }.onFailure {
                     _uiState.value = uiState.value?.copy(error = true)
@@ -260,7 +261,11 @@ class HomeViewModel
             }
         }
 
+        private fun List<PopularFeedsEntity.PopularFeedEntity>.toHomePopularFeedPages(): List<List<PopularFeedsEntity.PopularFeedEntity>> =
+            take(HOME_POPULAR_FEED_MAX_COUNT).chunked(HOME_POPULAR_FEED_PAGE_SIZE)
+
         companion object {
+            private const val HOME_POPULAR_FEED_MAX_COUNT = 6
             private const val HOME_POPULAR_FEED_PAGE_SIZE = 2
         }
     }

app/src/main/java/com/into/websoso/ui/main/home/adpater/PopularFeedsViewHolder.kt

@@ -66,12 +66,19 @@ class PopularFeedsViewHolder(
             else -> itemView.getS3ImageUrl(this)
         }
 
-    private fun String.ellipsizeByLength(): String =
-        if (length > MAX_TITLE_LENGTH) {
-            take(MAX_TITLE_LENGTH) + "..."
-        } else {
-            this
+    private fun String.ellipsizeByLength(): String {
+        var titleLength = 0
+        val title = StringBuilder()
+
+        for (char in this) {
+            if (!char.isWhitespace()) {
+                if (titleLength == MAX_TITLE_LENGTH) return title.toString().trimEnd() + "…"
+                titleLength++
+            }
+            title.append(char)
         }
+        return this
+    }
 
     companion object {
         private const val MAX_TITLE_LENGTH = 16

app/src/main/java/com/into/websoso/ui/main/home/adpater/PopularNovelTextExtensions.kt

@@ -20,7 +20,13 @@ internal fun PopularNovelEntity.toPopularNovelTitle(titleView: TextView): String
         )
 
 internal fun PopularNovelEntity.toAuthorStatus(context: Context): String {
-    val authorName = author.take(MAX_AUTHOR_LENGTH)
+    val ellipsis = context.getString(home_popular_novel_title_ellipsis)
+    val authorName =
+        if (author.length > MAX_AUTHOR_LENGTH) {
+            author.take(MAX_AUTHOR_LENGTH).trimEnd() + ellipsis
+        } else {
+            author
+        }
     val status =
         context.getString(
             if (isNovelCompleted) {
@@ -46,12 +52,20 @@ private val TextView.textAreaWidth: Float
 private fun String.takeWithEllipsis(
     maxLength: Int,
     ellipsis: String,
-): String =
-    if (length > maxLength) {
-        take(maxLength) + ellipsis
+): String {
+    var visibleLength = 0
+    val truncatedTitle = takeWhile { character ->
+        if (character.isWhitespace()) return@takeWhile true
+        visibleLength++
+        visibleLength <= maxLength
+    }
+
+    return if (visibleLength > maxLength || truncatedTitle.length < length) {
+        truncatedTitle.trimEnd() + ellipsis
     } else {
         this
     }
+}
 
 private fun String.wrapByWord(
     textPaint: TextPaint,

app/src/main/res/drawable/bg_popular_novel_bottom_radius_14dp.xml

@@ -1,7 +1,19 @@
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="rectangle">
-    <solid android:color="#FCF8F6" />
-    <corners
-        android:bottomLeftRadius="14dp"
-        android:bottomRightRadius="14dp" />
-</shape>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="#F6F6F8" />
+            <corners
+                android:bottomLeftRadius="14dp"
+                android:bottomRightRadius="14dp" />
+        </shape>
+    </item>
+
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="#B2FFFFFF" />
+            <corners
+                android:bottomLeftRadius="14dp"
+                android:bottomRightRadius="14dp" />
+        </shape>
+    </item>
+</layer-list>

app/src/main/res/layout/item_popular_feed_slot.xml

@@ -10,12 +10,14 @@
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:paddingHorizontal="20dp"
-        android:paddingVertical="16dp">
+        android:paddingStart="20.5dp"
+        android:paddingTop="16dp"
+        android:paddingEnd="20.5dp"
+        android:paddingBottom="16dp">
 
         <TextView
             android:id="@+id/tv_popular_feed_title"
-            android:layout_width="195dp"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginTop="7dp"
             android:ellipsize="end"
@@ -30,9 +32,9 @@
 
         <TextView
             android:id="@+id/tv_popular_feed_content"
-            android:layout_width="195dp"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="4dp"
+            android:layout_marginTop="8dp"
             android:ellipsize="end"
             android:maxLines="3"
             android:textAppearance="@style/body5"
@@ -44,7 +46,7 @@
 
         <TextView
             android:id="@+id/tv_popular_feed_content_spoiler"
-            android:layout_width="195dp"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginTop="8dp"
             android:ellipsize="end"

app/src/main/res/layout/item_popular_novel.xml

@@ -18,7 +18,7 @@
         android:layout_width="292dp"
         android:layout_height="362dp"
         android:layout_marginHorizontal="5dp"
-        android:background="@drawable/bg_popular_novel_translucent_radius_14dp"
+        android:background="@drawable/bg_novel_detail_white_radius_14dp"
         android:onClick="@{() -> onClick.invoke(popularNovel.novelId)}">
 
         <androidx.constraintlayout.widget.ConstraintLayout
@@ -108,37 +108,45 @@
                     tools:text="라이벌/앙숙" />
             </LinearLayout>
 
-            <ImageView
+            <com.google.android.material.card.MaterialCardView
                 android:id="@+id/iv_popular_novel_novel_cover"
-                cornerRadius="@{5.65f}"
-                loadImageUrl="@{popularNovel.novelImage}"
                 android:layout_width="117dp"
                 android:layout_height="171dp"
                 android:layout_marginTop="33dp"
                 android:layout_marginEnd="22dp"
-                android:scaleType="centerCrop"
+                app:cardBackgroundColor="@android:color/transparent"
+                app:cardCornerRadius="5.65dp"
+                app:cardElevation="4dp"
+                app:cardPreventCornerOverlap="false"
+                app:cardUseCompatPadding="false"
                 app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintTop_toTopOf="parent"
-                tools:src="@drawable/img_loading_thumbnail" />
-
-            <ImageView
-                android:id="@+id/iv_popular_novel_genre_frame"
-                android:layout_width="56dp"
-                android:layout_height="56dp"
-                android:src="@drawable/ic_novel_detail_genre_frame"
-                app:layout_constraintBottom_toBottomOf="@id/iv_popular_novel_novel_cover"
-                app:layout_constraintEnd_toEndOf="@id/iv_popular_novel_novel_cover" />
+                app:layout_constraintTop_toTopOf="parent">
 
-            <ImageView
-                android:id="@+id/iv_popular_novel_genre"
-                android:layout_width="23dp"
-                android:layout_height="25dp"
-                android:layout_marginEnd="5dp"
-                android:layout_marginBottom="5dp"
-                android:scaleType="fitXY"
-                app:layout_constraintBottom_toBottomOf="@id/iv_popular_novel_novel_cover"
-                app:layout_constraintEnd_toEndOf="@id/iv_popular_novel_novel_cover"
-                tools:src="@drawable/ic_romance_fantasy" />
+                <ImageView
+                    android:id="@+id/iv_popular_novel_novel_cover_image"
+                    loadImageUrl="@{popularNovel.novelImage}"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:scaleType="centerCrop"
+                    tools:src="@drawable/img_loading_thumbnail" />
+
+                <ImageView
+                    android:id="@+id/iv_popular_novel_genre_frame"
+                    android:layout_width="56dp"
+                    android:layout_height="56dp"
+                    android:layout_gravity="end|bottom"
+                    android:src="@drawable/ic_novel_detail_genre_frame" />
+
+                <ImageView
+                    android:id="@+id/iv_popular_novel_genre"
+                    android:layout_width="23dp"
+                    android:layout_height="25dp"
+                    android:layout_gravity="end|bottom"
+                    android:layout_marginEnd="5dp"
+                    android:layout_marginBottom="5dp"
+                    android:scaleType="fitXY"
+                    tools:src="@drawable/ic_romance_fantasy" />
+            </com.google.android.material.card.MaterialCardView>
         </androidx.constraintlayout.widget.ConstraintLayout>
 
         <androidx.constraintlayout.widget.ConstraintLayout

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

@@ -245,7 +245,7 @@
     <string name="home_recommend_novel">이 웹소설은 어때요? (´ヮ`)ﾉ📚</string>
     <string name="home_popular_novel_nickname">%s님의 한마디</string>
     <string name="home_popular_novel_feed_title_null">작품 소개</string>
-    <string name="home_popular_novel_title_ellipsis">...</string>
+    <string name="home_popular_novel_title_ellipsis">…</string>
     <string name="home_popular_novel_author_status">%1$s · %2$s</string>
     <string name="home_popular_novel_status_serial">연재작</string>
     <string name="home_popular_novel_status_completed">완결작</string>