Merge pull request #114 from dnd-side-project/fix/#113/cd-api-ui

[fix] 채팅 총 갯수, 좋아요 API 연결 및 UI 수정사항 반영

Author: maylh

src/assets/icons/icn_cta_arrow.svg

@@ -47,5 +47,4 @@ export { default as BgCd } from './icn_bg_cd.svg?react'
 export { default as BgHeadphone } from './icn_bg_headphone.svg?react'
 export { default as BgMusic } from './icn_bg_music.svg?react'
 export { default as Volume } from './icn_volume.svg?react'
-export { default as CtaArrow } from './icn_cta_arrow.svg?react'
 export { default as LikeStroke } from './icn_like_stroke.svg?react'

src/assets/icons/icn_right_arrow.svg

@@ -1,4 +1,8 @@
-import type { ChatHistoryParams, ChatHistoryResponse } from '@/features/chat/types/chat'
+import type {
+  ChatCountResponse,
+  ChatHistoryParams,
+  ChatHistoryResponse,
+} from '@/features/chat/types/chat'
 import { api } from '@/shared/api/httpClient'
 
 export const getChatHistory = (roomId: string, params: ChatHistoryParams = {}) => {
@@ -10,3 +14,7 @@ export const getChatHistory = (roomId: string, params: ChatHistoryParams = {}) =
 export const deleteChatMessage = async (roomId: string, messageId: string) => {
   return api.delete(`/chat/rooms/${roomId}/messages/${messageId}`)
 }
+
+export const getChatCount = (roomId: string) => {
+  return api.get<ChatCountResponse>(`/chat/rooms/${roomId}/count/chat`)
+}

src/assets/icons/index.ts

@@ -1,11 +1,12 @@
 import {
   useInfiniteQuery,
   useMutation,
+  useQuery,
   useQueryClient,
   type InfiniteData,
 } from '@tanstack/react-query'
 
-import { deleteChatMessage, getChatHistory } from '@/features/chat/api/chat'
+import { deleteChatMessage, getChatCount, getChatHistory } from '@/features/chat/api/chat'
 import type { ChatHistoryResponse } from '@/features/chat/types/chat'
 
 export const useInfiniteChatHistory = (roomId: string, limit = 50) => {
@@ -36,3 +37,11 @@ export const useDeleteChatMessage = (roomId: string, removeMessage: (id: string)
     },
   })
 }
+
+export const useChatCount = (roomId: string) => {
+  return useQuery({
+    queryKey: ['chatCount', roomId],
+    queryFn: () => getChatCount(roomId),
+    staleTime: 0,
+  })
+}

src/assets/images/img_character_home.png

@@ -18,3 +18,7 @@ export interface ChatHistoryResponse {
   messages: ChatHistoryMessage[]
   nextCursor?: string
 }
+
+export interface ChatCountResponse {
+  totalCount: number
+}

src/features/chat/api/chat.ts

@@ -1,3 +1,4 @@
+import type { LikeStatusResponse } from '@/features/like/type/like'
 import { api } from '@/shared/api/httpClient'
 
 export const postLike = (playlistId: number) => {
@@ -9,5 +10,5 @@ export const deleteLike = (playlistId: number) => {
 }
 
 export const getLikeStatus = (playlistId: number) => {
-  return api.get(`/main/likes/${playlistId}`)
+  return api.get<LikeStatusResponse>(`/main/likes/${playlistId}`)
 }

src/features/chat/model/useChat.ts

@@ -1,30 +1,80 @@
-import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useAuthStore } from '@/features/auth/store/authStore'
 import { postLike, deleteLike, getLikeStatus } from '@/features/like/api/like'
+import type { LikeStatusResponse } from '@/features/like/type/like'
 
-const useLike = (playlistId: number, initialIsLiked: boolean) => {
+export const useLikeStatus = (playlistId: number, options?: { enabled?: boolean }) => {
+  return useQuery({
+    queryKey: ['likeStatus', playlistId],
+    queryFn: () => getLikeStatus(playlistId),
+    staleTime: 0,
+    enabled: playlistId !== undefined && (options?.enabled ?? true),
+  })
+}
+
+const useLike = (playlistId: number) => {
   const queryClient = useQueryClient()
-  const [isLiked, setIsLiked] = useState(initialIsLiked)
-  const navigate = useNavigate()
   const { isLogin } = useAuthStore()
+  const navigate = useNavigate()
+
+  const { data: statusData, isLoading } = useLikeStatus(playlistId, { enabled: isLogin })
+  const isLiked = statusData?.isLiked ?? false
 
   const likeMutation = useMutation({
-    mutationFn: (playlistId: number) => postLike(playlistId),
-    onSuccess: () => {
-      setIsLiked(true)
-      queryClient.invalidateQueries({ queryKey: ['playlistDetail', playlistId] })
+    mutationFn: () => postLike(playlistId),
+
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: ['likeStatus', playlistId] })
+      const previous = queryClient.getQueryData(['likeStatus', playlistId])
+
+      // 낙관적 업데이트
+      queryClient.setQueryData<LikeStatusResponse>(['likeStatus', playlistId], (old) => ({
+        ...(old ?? { isLiked: false }),
+        isLiked: true,
+      }))
+
+      return { previous }
+    },
+    onError: (_err, _vars, context) => {
+      // context는 onMutate의 return 값(previous)
+      if (context?.previous) {
+        // 실패 시 UI를 원래대로 돌림
+        queryClient.setQueryData(['likeStatus', playlistId], context.previous)
+      }
+    },
+
+    // 성공 실패 관계 없이 무조건 실행
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['likeStatus', playlistId] })
     },
   })
 
   const unlikeMutation = useMutation({
-    mutationFn: (playlistId: number) => deleteLike(playlistId),
-    onSuccess: () => {
-      setIsLiked(false)
-      queryClient.invalidateQueries({ queryKey: ['playlistDetail', playlistId] })
+    mutationFn: () => deleteLike(playlistId),
+
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: ['likeStatus', playlistId] })
+      const previous = queryClient.getQueryData(['likeStatus', playlistId])
+
+      queryClient.setQueryData<LikeStatusResponse>(['likeStatus', playlistId], (old) => ({
+        ...(old ?? { isLiked: false }),
+        isLiked: true,
+      }))
+
+      return { previous }
+    },
+
+    onError: (_err, _vars, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(['likeStatus', playlistId], context.previous)
+      }
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['likeStatus', playlistId] })
     },
   })
 
@@ -34,25 +84,11 @@ const useLike = (playlistId: number, initialIsLiked: boolean) => {
       return
     }
 
-    if (likeMutation.isPending || unlikeMutation.isPending) return
-
-    if (isLiked) {
-      unlikeMutation.mutate(playlistId)
-    } else {
-      likeMutation.mutate(playlistId)
-    }
+    if (isLiked) unlikeMutation.mutate()
+    else likeMutation.mutate()
   }
 
-  return { liked: isLiked, toggleLike, likeMutation, unlikeMutation }
+  return { liked: isLiked, toggleLike, isLoading }
 }
 
 export default useLike
-
-export const useLikeStatus = (playlistId: number, options?: { enabled?: boolean }) => {
-  return useQuery({
-    queryKey: ['likeStatus', playlistId],
-    queryFn: () => getLikeStatus(playlistId),
-    staleTime: 0,
-    enabled: playlistId !== undefined && (options?.enabled ?? true),
-  })
-}

src/features/chat/types/chat.ts

@@ -0,0 +1,3 @@
+export interface LikeStatusResponse {
+  isLiked: boolean
+}