fix(creator): 커뮤니티 썸네일 그리드를 보정한다

app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/community/CreatorChannelCommunityFragment.kt

@@ -3,6 +3,7 @@ package kr.co.vividnext.sodalive.v2.creator.channel.community
 import android.os.Bundle
 import android.view.View
 import android.widget.Toast
+import androidx.core.view.doOnLayout
 import androidx.core.view.isVisible
 import androidx.core.view.updatePadding
 import androidx.recyclerview.widget.GridLayoutManager
@@ -17,6 +18,7 @@ import kr.co.vividnext.sodalive.extensions.moneyFormat
 import kr.co.vividnext.sodalive.v2.creator.channel.community.model.CreatorChannelCommunityPostUiModel
 import kr.co.vividnext.sodalive.v2.creator.channel.community.model.CreatorChannelCommunityViewMode
 import kr.co.vividnext.sodalive.v2.creator.channel.community.ui.CreatorChannelCommunityGridAdapter
+import kr.co.vividnext.sodalive.v2.creator.channel.community.ui.calculateCreatorChannelCommunityGridItemSize
 import kr.co.vividnext.sodalive.v2.creator.channel.community.ui.CreatorChannelCommunityListAdapter
 import org.koin.androidx.viewmodel.ext.android.viewModel
 
@@ -162,6 +164,7 @@ class CreatorChannelCommunityFragment : BaseFragment<FragmentCreatorChannelCommu
                     layoutManager = LinearLayoutManager(requireContext())
                     adapter = listAdapter
                 }
+                applyCommunityListPadding()
                 listAdapter.submitItems(state.communityPosts)
             }
             CreatorChannelCommunityViewMode.Grid -> {
@@ -169,11 +172,33 @@ class CreatorChannelCommunityFragment : BaseFragment<FragmentCreatorChannelCommu
                     layoutManager = GridLayoutManager(requireContext(), 3)
                     adapter = gridAdapter
                 }
+                applyCommunityGridPadding()
+                updateGridItemSize()
+                doOnLayout { updateGridItemSize() }
                 gridAdapter.submitItems(state.communityPosts)
             }
         }
     }
 
+    private fun applyCommunityListPadding() = with(binding.rvCreatorChannelCommunity) {
+        updatePadding(
+            left = DEFAULT_LIST_HORIZONTAL_PADDING_DP.dpToPx().toInt(),
+            right = DEFAULT_LIST_HORIZONTAL_PADDING_DP.dpToPx().toInt()
+        )
+    }
+
+    private fun applyCommunityGridPadding() = with(binding.rvCreatorChannelCommunity) {
+        updatePadding(left = 0, right = 0)
+    }
+
+    private fun calculateGridItemSize(): Int = with(binding.rvCreatorChannelCommunity) {
+        return calculateCreatorChannelCommunityGridItemSize(width - paddingStart - paddingEnd)
+    }
+
+    private fun updateGridItemSize() {
+        gridAdapter.setItemSizePx(calculateGridItemSize())
+    }
+
     private fun notifyContentChangedIfLayoutChanged(state: CreatorChannelCommunityUiState.Content) {
         val contentLayoutKey = state.toContentLayoutKey()
         if (contentLayoutKey == lastContentLayoutKey) return
@@ -205,6 +230,7 @@ class CreatorChannelCommunityFragment : BaseFragment<FragmentCreatorChannelCommu
 
     companion object {
         private const val ARG_CREATOR_ID: String = "arg_creator_id"
+        private const val DEFAULT_LIST_HORIZONTAL_PADDING_DP = 14
         private const val DEFAULT_LIST_BOTTOM_PADDING_DP = 32
         private const val OWNER_CTA_LIST_BOTTOM_PADDING_DP = 132
 

app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/community/ui/CreatorChannelCommunityGridAdapter.kt

@@ -4,8 +4,11 @@ import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.core.view.isVisible
 import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.resource.bitmap.CenterCrop
+import com.bumptech.glide.request.RequestOptions
+import kr.co.vividnext.sodalive.R
 import kr.co.vividnext.sodalive.databinding.ItemCreatorChannelCommunityGridBinding
-import kr.co.vividnext.sodalive.extensions.loadUrl
 import kr.co.vividnext.sodalive.extensions.moneyFormat
 import kr.co.vividnext.sodalive.v2.creator.channel.community.model.CreatorChannelCommunityImageMode
 import kr.co.vividnext.sodalive.v2.creator.channel.community.model.CreatorChannelCommunityPostUiModel
@@ -13,18 +16,26 @@ import kr.co.vividnext.sodalive.v2.creator.channel.community.model.CreatorChanne
 class CreatorChannelCommunityGridAdapter : RecyclerView.Adapter<CreatorChannelCommunityGridAdapter.ViewHolder>() {
 
     private var items: List<CreatorChannelCommunityPostUiModel> = emptyList()
+    private var itemSizePx: Int = 0
 
     fun submitItems(items: List<CreatorChannelCommunityPostUiModel>) {
         this.items = items
         notifyDataSetChanged()
     }
 
+    fun setItemSizePx(itemSizePx: Int) {
+        if (this.itemSizePx == itemSizePx) return
+
+        this.itemSizePx = itemSizePx
+        notifyDataSetChanged()
+    }
+
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
         return ViewHolder(ItemCreatorChannelCommunityGridBinding.inflate(LayoutInflater.from(parent.context), parent, false))
     }
 
     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
-        holder.bind(items[position])
+        holder.bind(items[position], itemSizePx)
     }
 
     override fun getItemCount(): Int = items.size
@@ -33,49 +44,47 @@ class CreatorChannelCommunityGridAdapter : RecyclerView.Adapter<CreatorChannelCo
         private val binding: ItemCreatorChannelCommunityGridBinding
     ) : RecyclerView.ViewHolder(binding.root) {
 
-        fun bind(item: CreatorChannelCommunityPostUiModel) = with(binding) {
-            val squareSize = calculateSquareSize()
-            if (squareSize > 0) {
+        fun bind(item: CreatorChannelCommunityPostUiModel, itemSizePx: Int) = with(binding) {
+            if (itemSizePx > 0) {
                 root.layoutParams = root.layoutParams.apply {
-                    width = squareSize
-                    height = squareSize
+                    width = itemSizePx
+                    height = itemSizePx
                 }
             }
 
             val visibleImageUrl = item.imageUrl.takeIf { item.imageMode == CreatorChannelCommunityImageMode.Image }
             ivCreatorChannelCommunityGridImage.isVisible = visibleImageUrl != null
             if (visibleImageUrl != null) {
-                ivCreatorChannelCommunityGridImage.loadUrl(visibleImageUrl)
+                Glide.with(ivCreatorChannelCommunityGridImage)
+                    .asBitmap()
+                    .load(visibleImageUrl)
+                    .placeholder(R.drawable.ic_place_holder)
+                    .apply(communityImageRequestOptions())
+                    .into(ivCreatorChannelCommunityGridImage)
             } else {
+                Glide.with(ivCreatorChannelCommunityGridImage).clear(ivCreatorChannelCommunityGridImage)
                 ivCreatorChannelCommunityGridImage.setImageDrawable(null)
             }
-            tvCreatorChannelCommunityGridTextPreview.isVisible = item.imageMode != CreatorChannelCommunityImageMode.Image
+            tvCreatorChannelCommunityGridTextPreview.isVisible =
+                !item.isLocked && item.imageMode != CreatorChannelCommunityImageMode.Image
             tvCreatorChannelCommunityGridTextPreview.text = item.gridPreviewText
             layoutCreatorChannelCommunityGridLockedOverlay.isVisible = item.isLocked
             ivCreatorChannelCommunityGridLock.isVisible = item.isLocked
             tvCreatorChannelCommunityGridLockPrice.isVisible = item.isLocked
             tvCreatorChannelCommunityGridLockPrice.text = item.price.moneyFormat()
-            tvCreatorChannelCommunityGridNotice.isVisible = item.showNotice
+            ivCreatorChannelCommunityGridNotice.isVisible = item.showNotice
         }
 
-        private fun calculateSquareSize(): Int {
-            val parent = binding.root.parent as? RecyclerView ?: return 0
-            val availableWidth = parent.width - parent.paddingStart - parent.paddingEnd
-            if (availableWidth <= 0) return 0
-            val itemHorizontalMargins = (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)
-                ?.let {
-                    val leftMargin = it.leftMargin
-                    val rightMargin = it.rightMargin
-                    leftMargin + rightMargin
-                }
-                ?: 0
-            val totalHorizontalMargins = itemHorizontalMargins * GRID_SPAN_COUNT
-
-            return (availableWidth - totalHorizontalMargins).coerceAtLeast(0) / GRID_SPAN_COUNT
+        private fun communityImageRequestOptions(): RequestOptions {
+            return RequestOptions().transform(CenterCrop())
         }
     }
 
-    companion object {
-        private const val GRID_SPAN_COUNT = 3
+    internal companion object {
+        const val GRID_SPAN_COUNT = 3
     }
 }
+
+internal fun calculateCreatorChannelCommunityGridItemSize(availableWidth: Int): Int {
+    return availableWidth.coerceAtLeast(0) / CreatorChannelCommunityGridAdapter.GRID_SPAN_COUNT
+}

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

@@ -3,17 +3,15 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/layout_creator_channel_community_grid_root"
-    android:layout_width="match_parent"
-    android:layout_height="0dp"
-    android:layout_margin="@dimen/spacing_4"
-    android:background="@drawable/bg_feed_card"
-    app:layout_constraintDimensionRatio="1:1">
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:background="@color/gray_900">
 
     <ImageView
         android:id="@+id/iv_creator_channel_community_grid_image"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        android:background="@drawable/bg_feed_community_image"
+        android:background="@color/gray_900"
         android:contentDescription="@string/a11y_feed_content_image"
         android:scaleType="centerCrop"
         android:visibility="gone"
@@ -70,35 +68,33 @@
 
     <TextView
         android:id="@+id/tv_creator_channel_community_grid_lock_price"
-        style="@style/Typography.Caption2"
-        android:layout_width="wrap_content"
-        android:layout_height="32dp"
-        android:layout_marginBottom="@dimen/spacing_12"
+        style="@style/Typography.Body3"
+        android:layout_width="70dp"
+        android:layout_height="36dp"
+        android:layout_marginTop="@dimen/spacing_4"
         android:background="@drawable/bg_creator_channel_community_price"
         android:drawableStart="@drawable/ic_bar_cash"
-        android:drawablePadding="@dimen/spacing_4"
+        android:drawablePadding="@dimen/spacing_6"
         android:gravity="center"
         android:includeFontPadding="false"
-        android:paddingHorizontal="@dimen/spacing_8"
         android:textColor="@color/black"
         android:visibility="gone"
-        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/iv_creator_channel_community_grid_lock"
         tools:text="30"
         tools:visibility="visible" />
 
-    <TextView
-        android:id="@+id/tv_creator_channel_community_grid_notice"
-        style="@style/Typography.Caption2"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_margin="@dimen/spacing_8"
-        android:includeFontPadding="false"
-        android:text="@string/creator_channel_community_notice"
-        android:textColor="@color/soda_400"
+    <ImageView
+        android:id="@+id/iv_creator_channel_community_grid_notice"
+        android:layout_width="18dp"
+        android:layout_height="18dp"
+        android:layout_gravity="top|end"
+        android:layout_margin="6dp"
+        android:contentDescription="@null"
+        android:src="@drawable/ic_pin"
         android:visibility="gone"
-        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         tools:visibility="visible" />
 </androidx.constraintlayout.widget.ConstraintLayout>