O2F-595 [REFACTOR] 게시글 좋아요 토글 로직 변경

게시글 좋아요 개별 토글 -> 벌크 업데이트로 변경

src/apis/ootd/PostLikeService.ts

@@ -1,13 +1,15 @@
 import { authAxiosInstance } from '@/apis/utils'
-import type { PostPageResponse, PostResponse } from '@/apis/ootd/PostDto'
-import type { AxiosResponse } from 'axios'
 import { AxiosError } from 'axios'
 
 const SNS_SERVICE_PREFIX_PATH = '/sns-service'
 
-export const togglePostLike = async (postId: number): Promise<void> => {
+export const togglePostLike = async (postIds: Array<number>): Promise<void> => {
   try {
-    await authAxiosInstance.put(`/posts/${postId}/likes`)
+    await authAxiosInstance.put(`/posts/likes`, null, {
+      params: {
+        postIds: postIds.join(',')
+      }
+    })
   } catch (error) {
     if (error instanceof AxiosError) {
       if (error.response) {

src/components/ootd/MemberOOTDPostComponent.vue

@@ -45,10 +45,7 @@ onBeforeMount(async () => {
 })
 
 const onChangeSort = async (sort: string) => {
-  postLikes.forEach((postId: number) => {
-    togglePostLike(postId)
-  })
-  postLikes.clear()
+  await flushLikeStore()
 
   requestSort.value = sort
 }
@@ -63,10 +60,7 @@ watch(requestSort, async (afterSort, beforeSort) => {
 
 const onChangePage = async (page: number) => {
   if (page >= 0 && page < totalPages.value!) {
-    postLikes.forEach((postId: number) => {
-      togglePostLike(postId)
-    })
-    postLikes.clear()
+    await flushLikeStore()
 
     requestPage.value = page
   }
@@ -81,6 +75,15 @@ watch(requestPage, async (afterPage, beforePage) => {
   }
 })
 
+const flushLikeStore = async () => {
+  const postIds: number[] = []
+  postLikes.forEach((postLike) => {
+    postIds.push(postLike)
+  })
+  await togglePostLike(postIds)
+  postLikes.clear()
+}
+
 </script>
 
 <template>

src/components/ootd/OOTDPostCardComponent.vue

@@ -35,20 +35,23 @@ const likeButtonClickListener = (postId: number, isLike: boolean | undefined) =>
   }
 }
 
-// 페이지 이동 시 이벤트
-onBeforeRouteLeave(async (to, from) => {
-  postLikes.forEach((postId: number) => {
-    togglePostLike(postId)
+const flushLikeStore = async () => {
+  const postIds: number[] = []
+  postLikes.forEach((postLike) => {
+    postIds.push(postLike)
   })
+  await togglePostLike(postIds)
   postLikes.clear()
+}
+
+// 페이지 이동 시 이벤트
+onBeforeRouteLeave(async (to, from) => {
+  await flushLikeStore()
 })
 
 // 새로고침 or 브라우저 창 닫을 때 이벤트
 window.onbeforeunload = function() {
-  postLikes.forEach((postId: number) => {
-    togglePostLike(postId)
-  })
-  postLikes.clear()
+  flushLikeStore()
 }
 </script>
 
@@ -71,7 +74,8 @@ window.onbeforeunload = function() {
       </div>
       <div class='ootd-post-card-view-wrapper'>
         <div class='ootd-post-card-like-view-wrapper'>
-          <svg class='ootd-post-card-like-count-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15' fill='none'>
+          <svg class='ootd-post-card-like-count-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'
+               fill='none'>
             <path
               d='M8.82563 15L7.64035 13.921C3.43054 10.1035 0.651245 7.57766 0.651245 4.49591C0.651245 1.97003 2.62945 0 5.14716 0C6.5695 0 7.93462 0.662125 8.82563 1.70027C9.71664 0.662125 11.0818 0 12.5041 0C15.0218 0 17 1.97003 17 4.49591C17 7.57766 14.2207 10.1035 10.0109 13.921L8.82563 15Z'
               fill='#FF0000' />
@@ -80,7 +84,8 @@ window.onbeforeunload = function() {
           <div v-else class='ootd-post-card-like-view-count-text'>{{ post.likeCount }}+</div>
         </div>
         <div class='ootd-post-card-count-view-wrapper'>
-          <svg class='ootd-post-card-view-count-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15' fill='none'>
+          <svg class='ootd-post-card-view-count-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'
+               fill='none'>
             <path
               d='M11 4.5C10.2044 4.5 9.44129 4.81607 8.87868 5.37868C8.31607 5.94129 8 6.70435 8 7.5C8 8.29565 8.31607 9.05871 8.87868 9.62132C9.44129 10.1839 10.2044 10.5 11 10.5C11.7956 10.5 12.5587 10.1839 13.1213 9.62132C13.6839 9.05871 14 8.29565 14 7.5C14 6.70435 13.6839 5.94129 13.1213 5.37868C12.5587 4.81607 11.7956 4.5 11 4.5ZM11 12.5C9.67392 12.5 8.40215 11.9732 7.46447 11.0355C6.52678 10.0979 6 8.82608 6 7.5C6 6.17392 6.52678 4.90215 7.46447 3.96447C8.40215 3.02678 9.67392 2.5 11 2.5C12.3261 2.5 13.5979 3.02678 14.5355 3.96447C15.4732 4.90215 16 6.17392 16 7.5C16 8.82608 15.4732 10.0979 14.5355 11.0355C13.5979 11.9732 12.3261 12.5 11 12.5ZM11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0Z'
               fill='#C6C6C6' />

src/views/OOTDDetailView.vue

@@ -94,9 +94,11 @@ const flushFollowStore = async () => {
 }
 
 const flushLikeStore = async () => {
-  postLikes.forEach((postId: number) => {
-    togglePostLike(postId)
+  const postIds: number[] = []
+  postLikes.forEach((postLike) => {
+    postIds.push(postLike)
   })
+  await togglePostLike(postIds)
   postLikes.clear()
 }