[ADD/#74] 좋아요 애니메이션 추가

presentation/src/main/java/co/orange/presentation/detail/DetailActivity.kt

@@ -13,6 +13,7 @@ import co.orange.core.base.BaseActivity
 import co.orange.core.extension.breakLines
 import co.orange.core.extension.setNumberForm
 import co.orange.core.extension.setOnSingleClickListener
+import co.orange.core.extension.setOnSingleClickShortListener
 import co.orange.core.extension.setOverThousand
 import co.orange.core.extension.stringOf
 import co.orange.core.extension.toast
@@ -22,6 +23,7 @@ import co.orange.presentation.auth.login.LoginActivity
 import co.orange.presentation.buy.confirm.BuyConfirmActivity
 import coil.load
 import dagger.hilt.android.AndroidEntryPoint
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
@@ -60,10 +62,10 @@ class DetailActivity : BaseActivity<ActivityDetailBinding>(R.layout.activity_det
     }
 
     private fun initLikeBtnListener() {
-        binding.btnLike.setOnSingleClickListener {
+        binding.btnLike.setOnSingleClickShortListener {
             if (!viewModel.getUserLogined()) {
                 startActivity(Intent(this, LoginActivity::class.java))
-                return@setOnSingleClickListener
+                return@setOnSingleClickShortListener
             }
             viewModel.setLikeStateWithServer()
         }
@@ -112,6 +114,7 @@ class DetailActivity : BaseActivity<ActivityDetailBinding>(R.layout.activity_det
             chipsDetailImminent.isVisible = item.isImminent
             tvDetailDiscountRate.text = item.discountRate.toString()
             tvDetailStockCount.text = item.stockCount.toString()
+            ivDetailLike.isEnabled = item.isInterested
             tvDetailLike.text = item.interestCount.setOverThousand()
             ivDetailProduct.load(item.imgUrl)
             tvDetailRealPrice.apply {
@@ -127,6 +130,12 @@ class DetailActivity : BaseActivity<ActivityDetailBinding>(R.layout.activity_det
             with(binding) {
                 ivDetailLike.isEnabled = isLiked
                 tvDetailLike.text = viewModel.interestCount.setOverThousand()
+                if (isLiked) {
+                    lottieLike.isVisible = true
+                    lottieLike.playAnimation()
+                    delay(500)
+                    lottieLike.isVisible = false
+                }
             }
         }.launchIn(lifecycleScope)
     }

presentation/src/main/java/co/orange/presentation/detail/DetailViewModel.kt

@@ -23,6 +23,7 @@ class DetailViewModel
         private val userRepository: UserRepository,
     ) : ViewModel() {
         var productId: String = ""
+        var isLiked = false
 
         var infoUrl: String = ""
         var interestCount: Int = 0
@@ -32,8 +33,7 @@ class DetailViewModel
             MutableStateFlow<UiState<ProductDetailModel>>(UiState.Empty)
         val getProductDetailState: StateFlow<UiState<ProductDetailModel>> = _getProductDetailState
 
-        private val _likeState =
-            MutableStateFlow<Boolean>(false)
+        private val _likeState = MutableStateFlow<Boolean>(false)
         val likeState: StateFlow<Boolean> = _likeState
 
         fun getProductDetailFromServer() {
@@ -43,7 +43,7 @@ class DetailViewModel
                         infoUrl = it.infoUrl
                         interestCount = it.interestCount
                         optionList = it.optionList
-                        _likeState.value = it.isInterested
+                        isLiked = it.isInterested
                         _getProductDetailState.value = UiState.Success(it)
                     }
                     .onFailure {
@@ -54,16 +54,18 @@ class DetailViewModel
 
         fun setLikeStateWithServer() {
             viewModelScope.launch {
-                if (likeState.value) {
+                if (isLiked) {
                     interestRepository.deleteInterest(productId)
                         .onSuccess {
                             interestCount -= 1
+                            isLiked = false
                             _likeState.value = false
                         }
                 } else {
                     interestRepository.postInterest(productId)
                         .onSuccess {
                             interestCount += 1
+                            isLiked = true
                             _likeState.value = true
                         }
                 }

presentation/src/main/java/co/orange/presentation/main/home/HomeFragment.kt

@@ -7,6 +7,7 @@ import android.view.View
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts.PickVisualMedia
+import androidx.core.view.isVisible
 import androidx.fragment.app.activityViewModels
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
@@ -22,6 +23,7 @@ import co.orange.presentation.detail.DetailActivity
 import co.orange.presentation.main.home.HomeAdapter.Companion.VIEW_TYPE_BANNER
 import co.orange.presentation.search.SearchActivity
 import dagger.hilt.android.AndroidEntryPoint
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
@@ -179,7 +181,6 @@ class HomeFragment() : BaseFragment<FragmentHomeBinding>(R.layout.fragment_home)
                 when (state) {
                     is UiState.Success -> {
                         adapter.addBannerItem(state.data.homeImgUrl)
-                        adapter.setItemList(listOf())
                         adapter.setItemList(state.data.productList)
                     }
 
@@ -209,7 +210,15 @@ class HomeFragment() : BaseFragment<FragmentHomeBinding>(R.layout.fragment_home)
         viewModel.itemLikePlusState.flowWithLifecycle(lifecycle).distinctUntilChanged()
             .onEach { state ->
                 when (state) {
-                    is UiState.Success -> adapter.plusItemLike(state.data)
+                    is UiState.Success -> {
+                        adapter.plusItemLike(state.data)
+                        with(binding) {
+                            lottieLike.isVisible = true
+                            lottieLike.playAnimation()
+                            delay(500)
+                            lottieLike.isVisible = false
+                        }
+                    }
                     is UiState.Failure -> toast(stringOf(R.string.error_msg))
                     else -> return@onEach
                 }

presentation/src/main/res/layout/activity_detail.xml

@@ -287,5 +287,18 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent" />
 
+        <com.airbnb.lottie.LottieAnimationView
+            android:id="@+id/lottie_like"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/lottie_like" />
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>

presentation/src/main/res/layout/fragment_home.xml

@@ -91,9 +91,22 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:paddingEnd="3dp"
-                android:text="@string/home_btn_sell"/>
+                android:text="@string/home_btn_sell" />
 
         </LinearLayout>
 
+        <com.airbnb.lottie.LottieAnimationView
+            android:id="@+id/lottie_like"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:lottie_autoPlay="false"
+            app:lottie_loop="false"
+            app:lottie_rawRes="@raw/lottie_like" />
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>

presentation/src/main/res/raw/lottie_like.json

@@ -0,0 +1 @@
+{"v":"5.0.0","fr":10,"ip":0,"op":12,"w":50,"h":50,"ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"nm":"Layer 2","ks":{"p":{"a":0,"k":[25,25]},"a":{"a":0,"k":[8.975,7.966,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}},"ao":0,"ip":0,"op":12,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[10.439,1.481],[12.633999999999999,0],[16.549,0.5260000000000001],[19.436,6.663],[10.524,15.702],[10.175999999999998,15.931],[9.88,15.927],[9.540000000000001,15.818],[2.458,8.635],[0.5140000000000002,3.454],[4.6530000000000005,0],[8.568999999999999,0.5260000000000001],[9.975,1.952]],"o":[[11.381,0.5260000000000001],[15.298,0],[19.436,3.454],[17.491,8.635],[10.373999999999999,15.855],[9.928999999999998,15.931],[9.681000000000001,15.889],[9.426,15.702],[0.5140000000000002,6.663],[3.4000000000000004,0.5260000000000001],[7.316000000000001,0],[9.511,1.481],[9.975,1.952]],"v":[[10.439,1.481],[13.966,0],[17.491,1.481],[17.491,8.635],[10.524,15.702],[9.979,15.931],[9.83,15.917],[9.426,15.702],[2.458,8.635],[2.458,1.481],[5.985,0],[9.511,1.481],[9.975,1.952]],"c":true},"nm":"Name","hd":false},"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.9176,0.0706,1]},"nm":"Stroke 1","o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":2,"lj":2,"ml":1,"_render":true},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":0,"k":[8.975,7.966]},"a":{"a":0,"k":[9.975,7.966]},"s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[100,100],"e":[20,20]},{"t":4}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":3,"s":[99],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":4}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"heartoutline","ln":"heartoutline","hd":false,"_render":true},{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[17.491,1.481],[19.436,6.663],[10.524,15.702],[10.175999999999998,15.931],[9.88,15.927],[9.540000000000001,15.818],[2.458,8.635],[0.5140000000000002,3.454],[4.6530000000000005,0],[8.568999999999999,0.5260000000000001],[9.975,1.952],[10.439,1.481],[12.633999999999999,0],[16.549,0.5260000000000001]],"o":[[19.436,3.454],[17.491,8.635],[10.373999999999999,15.855],[9.928999999999998,15.931],[9.681000000000001,15.889],[9.426,15.702],[0.5140000000000002,6.663],[3.4000000000000004,0.5260000000000001],[7.316000000000001,0],[9.511,1.481],[9.975,1.952],[11.381,0.5260000000000001],[15.298,0],[17.491,1.481]],"v":[[17.491,1.481],[17.491,8.635],[10.524,15.702],[9.979,15.931],[9.83,15.917],[9.426,15.702],[2.458,8.635],[2.458,1.481],[5.985,0],[9.511,1.481],[9.975,1.952],[10.439,1.481],[13.966,0],[17.491,1.481]],"c":true},"nm":"Name","hd":false},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":0,"k":[8.975,7.966]},"a":{"a":0,"k":[9.975,7.966]},"s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[100,100],"e":[80,80]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[80,80],"e":[140,140]},{"i":{"x":[0.58],"y":[1]},"o":{"x":[0],"y":[0]},"t":7,"s":[140,140],"e":[100,100]},{"i":{"x":[0.58],"y":[1]},"o":{"x":[0],"y":[0]},"t":8,"s":[100,100],"e":[110,110]},{"i":{"x":[0.58],"y":[1]},"o":{"x":[0],"y":[0]},"t":9,"s":[110,110],"e":[100,100]},{"t":10}]},"r":{"a":1,"k":[{"t":8,"s":[0],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[4]},{"t":9,"s":[4],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":10}]},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Object","hd":false,"_render":true}],"completed":true},{"ddd":0,"ind":1,"nm":"Layer 1","ks":{"p":{"a":0,"k":[24.536,25]},"a":{"a":0,"k":[21.498,21.498,0]},"s":{"a":0,"k":[100,100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":0,"s":[0],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[100]},{"t":3}]}},"ao":0,"ip":0,"op":12,"st":0,"bm":0,"sr":1,"ty":4,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[6.505,34.168]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-7","ln":"dot-7","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[36.505,34.168]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-8","ln":"dot-8","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[6.505,8.168]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-5","ln":"dot-5","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[36.505,8.168]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-6","ln":"dot-6","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[1.505,21.498]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-4","ln":"dot-4","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[41.492,21.498]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-3","ln":"dot-3","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[21.313,41.492]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot-2","ln":"dot-2","hd":false,"_render":true},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3.01,3.01]},"p":{"a":0,"k":[0,0]},"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.9267,0.12,1]},"nm":"Fill 1","hd":false,"o":{"a":0,"k":100},"r":1,"_render":true},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[21.498,22.498],"e":[21.498,1.505]},{"t":7}]},"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"t":4,"s":[60,60],"e":[30,30]},{"t":7}]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"t":7,"s":[100],"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"e":[0]},{"t":8}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"dot","ln":"dot","hd":false,"_render":true}],"completed":true}],"__complete":true}