[Feature/mypage_ui] add VIEW_TYPE_EMPTY (#89)

* [feat/store]: chore remove blank

* [feat/mypage]: add ic_empty_feed.png

* [feat/mypage]: UI remove profile bottom margin

* [feat/mypage]: refactor adapter add Empty viewHolder

* [feat/mypage]: add custom GridSpacingCustomDeco

* [feat/mypage]: refactor to MultiViewType Rv

* [feat/mypage]: chore align code style

* [feat/mypage]: chore code style

* [feat/mypage]: UI edit margin bottom to item_profile

* [feat/mypage]: UI edit margin top to item_empty

app/src/main/java/com/teampophory/pophory/feature/home/mypage/MyPageDisplayItem.kt

@@ -6,8 +6,8 @@ sealed class MyPageDisplayItem {
         val nickname: String,
         val photoCount: Int
     ) : MyPageDisplayItem()
-
     data class Photo(val photo: MyPageInfo.Photo) : MyPageDisplayItem()
+    object Empty : MyPageDisplayItem()
 }
 
 data class MyPageInfo(

app/src/main/java/com/teampophory/pophory/feature/home/mypage/MyPageFragment.kt

@@ -11,11 +11,14 @@ import androidx.recyclerview.widget.GridLayoutManager
 import com.teampophory.pophory.R
 import com.teampophory.pophory.common.fragment.toast
 import com.teampophory.pophory.common.view.GridSpacingItemDecoration
+import com.teampophory.pophory.common.view.dp
 import com.teampophory.pophory.common.view.viewBinding
 import com.teampophory.pophory.databinding.FragmentMypageBinding
 import com.teampophory.pophory.feature.home.mypage.adapter.MyPageAdapter
+import com.teampophory.pophory.feature.home.mypage.adapter.MyPageAdapter.Companion.VIEW_TYPE_EMPTY
 import com.teampophory.pophory.feature.home.mypage.adapter.MyPageAdapter.Companion.VIEW_TYPE_PHOTO
 import com.teampophory.pophory.feature.home.mypage.adapter.MyPageAdapter.Companion.VIEW_TYPE_PROFILE
+import com.teampophory.pophory.feature.home.mypage.util.GridSpacingCustomDecoration
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -59,18 +62,22 @@ class MyPageFragment : Fragment() {
                     val photoItems =
                         myPageInfoState.data.filterIsInstance<MyPageDisplayItem.Photo>()
                     val isEmpty = photoItems.isEmpty()
-                    val myPageInfoData = myPageInfoState.data
-                    val profileItem =
-                        myPageInfoState.data.firstOrNull { it is MyPageDisplayItem.Profile } as? MyPageDisplayItem.Profile
+
+                    val myPageInfoData = if (isEmpty) {
+                        myPageInfoState.data.toMutableList().also { it.add(MyPageDisplayItem.Empty) }
+                    } else {
+                        myPageInfoState.data
+                    }
 
                     with(binding) {
+                        val profileItem =
+                            myPageInfoState.data.firstOrNull { it is MyPageDisplayItem.Profile } as? MyPageDisplayItem.Profile
                         tvMypageToolbarNickname.text = "@${profileItem?.nickname}"
                         myPageAdapter?.submitList(myPageInfoData)
-                        ivMypageFeedEmpty.isVisible = isEmpty
-                        tvMypageFeedEmpty.isVisible = isEmpty
                     }
                 }
 
+
                 is MyPageInfoState.Error -> {}
                 else -> {}
             }
@@ -91,9 +98,10 @@ class MyPageFragment : Fragment() {
 
         gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
             override fun getSpanSize(position: Int): Int {
-                return when (position) {
+                return when (myPageAdapter?.getItemViewType(position)) {
                     VIEW_TYPE_PROFILE -> 3
                     VIEW_TYPE_PHOTO -> 1
+                    VIEW_TYPE_EMPTY -> 3
                     else -> 1
                 }
             }
@@ -103,7 +111,7 @@ class MyPageFragment : Fragment() {
             layoutManager = gridLayoutManager
             adapter = myPageAdapter
             isNestedScrollingEnabled = false
-        }.addItemDecoration(GridSpacingItemDecoration(3, 2, false))
+        }.addItemDecoration(GridSpacingCustomDecoration(3, 2.dp, false))
     }
 
     private fun setOnClickListener() {

app/src/main/java/com/teampophory/pophory/feature/home/mypage/adapter/MyPageAdapter.kt

@@ -12,27 +12,30 @@ import androidx.recyclerview.widget.RecyclerView
 import coil.load
 import com.teampophory.pophory.R
 import com.teampophory.pophory.common.view.ItemDiffCallback
+import com.teampophory.pophory.databinding.ItemMypageEmptyBinding
 import com.teampophory.pophory.databinding.ItemMypageFeedBinding
 import com.teampophory.pophory.databinding.ItemMypageProfileBinding
 import com.teampophory.pophory.feature.home.mypage.MyPageDisplayItem
 
 class MyPageAdapter(
-    private val onItemClicked: (MyPageDisplayItem.Photo) -> Unit
+        private val onItemClicked: (MyPageDisplayItem.Photo) -> Unit
 ) : ListAdapter<MyPageDisplayItem, RecyclerView.ViewHolder>(
-    ItemDiffCallback<MyPageDisplayItem>(
-        onItemsTheSame = { old, new -> old == new },
-        onContentsTheSame = { old, new -> old == new }
-    )
+        ItemDiffCallback<MyPageDisplayItem>(
+            onItemsTheSame = { old, new -> old == new },
+            onContentsTheSame = { old, new -> old == new }
+        )
 ) {
     companion object {
         const val VIEW_TYPE_PROFILE = 0
         const val VIEW_TYPE_PHOTO = 1
+        const val VIEW_TYPE_EMPTY = 2
     }
 
     override fun getItemViewType(position: Int): Int {
         return when (getItem(position)) {
             is MyPageDisplayItem.Profile -> VIEW_TYPE_PROFILE
             is MyPageDisplayItem.Photo -> VIEW_TYPE_PHOTO
+            is MyPageDisplayItem.Empty -> VIEW_TYPE_EMPTY
         }
     }
 
@@ -51,10 +54,17 @@ class MyPageAdapter(
                 PhotoViewHolder(binding, onItemClicked)
             }
 
+            VIEW_TYPE_EMPTY -> {
+                val binding =
+                    ItemMypageEmptyBinding.inflate(LayoutInflater.from(context), parent, false)
+                EmptyViewHolder(binding)
+            }
+
             else -> throw IllegalArgumentException("Invalid view type")
         }
     }
 
+
     override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
         when (val item = getItem(position)) {
             is MyPageDisplayItem.Profile -> {
@@ -64,6 +74,8 @@ class MyPageAdapter(
             is MyPageDisplayItem.Photo -> {
                 (holder as PhotoViewHolder).bind(item)
             }
+
+            else -> {}
         }
     }
 
@@ -115,5 +127,9 @@ class MyPageAdapter(
             return spannableStringBuilder
         }
     }
+
+    class EmptyViewHolder(private val binding: ItemMypageEmptyBinding) :
+        RecyclerView.ViewHolder(binding.root) {
+    }
 }
 

app/src/main/java/com/teampophory/pophory/feature/home/mypage/util/GridSpacingCustomDecoration.kt

@@ -0,0 +1,34 @@
+package com.teampophory.pophory.feature.home.mypage.util
+
+import android.graphics.Rect
+import android.view.View
+import androidx.recyclerview.widget.RecyclerView
+
+class GridSpacingCustomDecoration(private val spanCount: Int, private val spacing: Int, private val includeEdge: Boolean) : RecyclerView.ItemDecoration() {
+
+    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
+        val position = parent.getChildAdapterPosition(view) -1 // item position
+        val column = position % spanCount // item column
+
+        // If it's the first item (position 0), skip decoration
+        if (position == -1) {
+            return
+        }
+
+        if (!includeEdge) {
+            outRect.left = spacing - column * spacing / spanCount // spacing - column * ((1f / spanCount) * spacing)
+            outRect.right = (column + 1) * spacing / spanCount // (column + 1) * ((1f / spanCount) * spacing)
+
+            if (position < spanCount) { // top edge
+                outRect.top = spacing
+            }
+            outRect.bottom = spacing // item bottom
+        } else {
+            outRect.left = column * spacing / spanCount // column * ((1f / spanCount) * spacing)
+            outRect.right = spacing - (column + 1) * spacing / spanCount // spacing - (column + 1) * ((1f / spanCount) * spacing)
+            if (position >= spanCount) {
+                outRect.top = spacing // item top
+            }
+        }
+    }
+}

app/src/main/java/com/teampophory/pophory/feature/home/store/apdater/StoreAdapter.kt

@@ -33,9 +33,6 @@ class StoreAdapter(
                 onItemClicked(albumItem)
                 onPageChangedListener.onPageChanged(albumItem)
             }
-            with(binding) {
-
-            }
         }
     }
 

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

@@ -68,31 +68,4 @@
         tools:listitem="@layout/item_mypage_feed"
         tools:visibility="visible" />
 
-    <ImageView
-        android:id="@+id/iv_mypage_feed_empty"
-        android:layout_width="0dp"
-        android:layout_height="180dp"
-        android:layout_marginHorizontal="40dp"
-        android:layout_marginBottom="16dp"
-        android:src="@drawable/ic_empty_feed"
-        android:visibility="gone"
-        app:layout_constraintBottom_toTopOf="@id/tv_mypage_feed_empty"
-        app:layout_constraintDimensionRatio="1:1"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <TextView
-        android:id="@+id/tv_mypage_feed_empty"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginBottom="56dp"
-        android:text="@string/mypage_feed_empty"
-        android:textAppearance="?textAppearanceHeadlineSmall"
-        android:textColor="?colorOnSurface100"
-        android:textSize="18sp"
-        android:visibility="gone"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
-
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <ImageView
+        android:id="@+id/iv_mypage_feed_empty"
+        android:layout_width="0dp"
+        android:layout_height="180dp"
+        android:layout_marginHorizontal="40dp"
+        android:layout_marginTop="7dp"
+        android:src="@drawable/ic_empty_feed"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_mypage_feed_empty"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:text="@string/mypage_feed_empty"
+        android:textAppearance="?textAppearanceHeadlineSmall"
+        android:textColor="?colorOnSurface50"
+        android:textSize="18sp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/iv_mypage_feed_empty" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -55,7 +55,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="26dp"
-        android:layout_marginBottom="20dp"
+        android:layout_marginBottom="10dp"
         android:text="@string/mypage_feed_title"
         android:textAppearance="?textAppearanceHeadlineMedium"
         android:textColor="?colorOnSurface100"