feat(creator): 후원 랭킹 레이아웃을 보정한다

app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/donation/ui/CreatorChannelDonationAdapter.kt

@@ -1,6 +1,9 @@
 package kr.co.vividnext.sodalive.v2.creator.channel.donation.ui
 
+import android.content.Context
+import android.graphics.Rect
 import android.view.LayoutInflater
+import android.view.View
 import android.view.ViewGroup
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
@@ -65,6 +68,9 @@ class CreatorChannelDonationAdapter(
 
         init {
             binding.rvCreatorChannelDonationRankingMembers.layoutManager = GridLayoutManager(itemView.context, 4)
+            binding.rvCreatorChannelDonationRankingMembers.addItemDecoration(
+                CreatorChannelDonationRankingItemDecoration(itemView.context, spanCount = 4)
+            )
             binding.rvCreatorChannelDonationRankingMembers.adapter = rankingAdapter
             binding.btnCreatorChannelDonationRankingAll.setOnClickListener { onRankingAllClick() }
         }
@@ -106,3 +112,21 @@ private sealed interface CreatorChannelDonationListItem {
     data class Ranking(val rankings: List<CreatorChannelDonationRankingUiModel>) : CreatorChannelDonationListItem
     data class Donation(val donation: CreatorChannelDonationUiModel) : CreatorChannelDonationListItem
 }
+
+private class CreatorChannelDonationRankingItemDecoration(
+    context: Context,
+    private val spanCount: Int
+) : RecyclerView.ItemDecoration() {
+
+    private val spacing: Int = (14 * context.resources.displayMetrics.density).toInt()
+
+    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
+        val position = parent.getChildAdapterPosition(view)
+        if (position == RecyclerView.NO_POSITION) return
+
+        val column = position % spanCount
+        outRect.left = column * spacing / spanCount
+        outRect.right = spacing - (column + 1) * spacing / spanCount
+        outRect.top = if (position >= spanCount) spacing else 0
+    }
+}

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

@@ -1,48 +1,73 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:gravity="center_horizontal"
+    android:clipChildren="false">
-    android:orientation="vertical"
-    android:paddingBottom="@dimen/spacing_14">
 
-    <FrameLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="75dp"
+        android:id="@+id/layout_creator_channel_donation_ranking_profile"
-        android:layout_height="75dp">
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:clipChildren="false"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
 
         <ImageView
             android:id="@+id/iv_creator_channel_donation_ranking_profile"
-            android:layout_width="75dp"
+            android:layout_width="0dp"
-            android:layout_height="75dp"
+            android:layout_height="0dp"
             android:contentDescription="@null"
             android:scaleType="centerCrop"
             android:src="@drawable/ic_placeholder_profile"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
             tools:src="@drawable/ic_placeholder_profile" />
 
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline_creator_channel_donation_ranking_rank_top"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintGuide_percent="0.63" />
+
         <TextView
             android:id="@+id/tv_creator_channel_donation_ranking_rank"
-            style="@style/Typography.Heading1"
+            android:layout_width="0dp"
-            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_gravity="bottom"
+            android:fontFamily="@font/pattaya_regular"
             android:gravity="center"
             android:includeFontPadding="false"
-            android:textColor="@color/gray_50"
+            android:shadowColor="#7A000000"
+            android:shadowDx="0"
+            android:shadowDy="0"
+            android:shadowRadius="4"
+            android:textColor="@color/white"
             android:textSize="28sp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@id/guideline_creator_channel_donation_ranking_rank_top"
             tools:text="1" />
-    </FrameLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
     <TextView
         android:id="@+id/tv_creator_channel_donation_ranking_nickname"
         style="@style/Typography.Body5"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/spacing_8"
+        android:layout_marginTop="6dp"
         android:ellipsize="end"
         android:gravity="center"
         android:includeFontPadding="false"
         android:maxLines="1"
         android:textColor="@color/white"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/layout_creator_channel_donation_ranking_profile"
         tools:text="팬 이름" />
-</LinearLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/test/java/kr/co/vividnext/sodalive/v2/creator/channel/donation/CreatorChannelDonationFragmentLayoutTest.kt

@@ -34,7 +34,6 @@ class CreatorChannelDonationFragmentLayoutTest {
         val emptyDonationButton = requireNotNull(root.findViewById<LinearLayout>(R.id.btn_creator_channel_donation_empty_write))
         val errorMessage = requireNotNull(root.findViewById<TextView>(R.id.tv_creator_channel_donation_error_message))
         val retryButton = requireNotNull(root.findViewById<TextView>(R.id.btn_creator_channel_donation_retry))
-        val donationButton = requireNotNull(root.findViewById<ImageView>(R.id.btn_creator_channel_donation_write))
 
         assertSame(root, countBar.parent)
         assertSame(root, donationList.parent)
@@ -43,9 +42,9 @@ class CreatorChannelDonationFragmentLayoutTest {
         assertSame(emptyContainer, emptyDonationButton.parent)
         assertSame(root, errorMessage.parent)
         assertSame(root, retryButton.parent)
-        assertSame(root, donationButton.parent)
         assertTrue(layout.contains("android:background=\"@color/black\""))
         assertTrue(layout.contains("tools:listitem=\"@layout/item_creator_channel_donation\""))
+        assertTrue(!layout.contains("btn_creator_channel_donation_write"))
         assertTrue(!layout.contains("creator_channel_donation_sort"))
     }
 
@@ -89,6 +88,9 @@ class CreatorChannelDonationFragmentLayoutTest {
     fun `후원 ranking item layout은 타이틀 grid 전체보기 button을 제공한다`() {
         val item = inflateView(R.layout.item_creator_channel_donation_ranking)
         val layout = projectFile("app/src/main/res/layout/item_creator_channel_donation_ranking.xml").readText()
+        val adapter = projectFile(
+            "app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/donation/ui/CreatorChannelDonationAdapter.kt"
+        ).readText()
 
         assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_donation_ranking_title))
         assertNotNull(item.findViewById<RecyclerView>(R.id.rv_creator_channel_donation_ranking_members))
@@ -97,15 +99,40 @@ class CreatorChannelDonationFragmentLayoutTest {
         assertTrue(layout.contains("android:text=\"@string/creator_channel_donation_ranking_all\""))
         assertTrue(layout.contains("android:layout_marginHorizontal=\"@dimen/spacing_14\""))
         assertTrue(layout.contains("android:background=\"@drawable/bg_creator_channel_donation_card\""))
+        assertTrue(layout.contains("android:layout_width=\"match_parent\""))
+        assertTrue(adapter.contains("GridLayoutManager(itemView.context, 4)"))
+        assertTrue(adapter.contains("CreatorChannelDonationRankingItemDecoration(itemView.context, spanCount = 4)"))
+        assertTrue(adapter.contains("column * spacing / spanCount"))
+        assertTrue(adapter.contains("spacing - (column + 1) * spacing / spanCount"))
     }
 
     @Test
     fun `후원 ranking member item layout은 프로필 닉네임 rank overlay를 제공한다`() {
         val item = inflateView(R.layout.item_creator_channel_donation_ranking_member)
+        val layout = projectFile("app/src/main/res/layout/item_creator_channel_donation_ranking_member.xml").readText()
 
         assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_donation_ranking_profile))
         assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_donation_ranking_rank))
         assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_donation_ranking_nickname))
+        assertTrue(layout.contains("@+id/layout_creator_channel_donation_ranking_profile"))
+        assertTrue(layout.contains("android:clipChildren=\"false\""))
+        assertTrue(layout.contains("app:layout_constraintDimensionRatio=\"1:1\""))
+        assertTrue(layout.contains("android:layout_marginTop=\"6dp\""))
+        assertTrue(layout.contains("android:fontFamily=\"@font/pattaya_regular\""))
+        assertTrue(layout.contains("android:textSize=\"28sp\""))
+        assertTrue(layout.contains("app:layout_constraintGuide_percent=\"0.63\""))
+        assertTrue(
+            layout.contains(
+                "app:layout_constraintTop_toTopOf=\"@id/guideline_creator_channel_donation_ranking_rank_top\""
+            )
+        )
+        assertTrue(
+            !layout.contains(
+                "app:layout_constraintBottom_toBottomOf=\"@id/iv_creator_channel_donation_ranking_profile\""
+            )
+        )
+        assertTrue(!layout.contains("android:translationY=\"@dimen/spacing_8\""))
+        assertTrue(!layout.contains("android:paddingBottom=\"@dimen/spacing_4\""))
     }
 
     @Test