diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx index 8a8c34c..6823087 100644 --- a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx +++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx @@ -17,6 +17,7 @@ import CheckIcon from '@mui/icons-material/Check'; import CloseIcon from '@mui/icons-material/Close'; import { DeleteReplyApi, PatchReplyLikeApi, putReplyApi } from '@/api/reply-api'; import { Dialog } from '@/components/Dialog/Dialog'; +import { enqueueSnackbar } from 'notistack'; export const ThumbnailArea = styled(Stack)({ width: '100%', @@ -123,13 +124,23 @@ function RepliesComponent({ const deleteReplyQuery = useMutation(DeleteReplyApi, { onSuccess() { - queryClient.invalidateQueries(['reply']); + queryClient.invalidateQueries(['replies']); }, }); - const deleteClick = () => { - deleteReplyQuery.mutate({ replyId: replyId}); + deleteReplyQuery.mutate( + { replyId: replyId }, + { + onSuccess: () => { + queryClient.invalidateQueries(['replies']); + enqueueSnackbar({ message: '댓글이 성공적으로 삭제되었습니다.', variant: 'success' }); + }, + onError: () => { + enqueueSnackbar({ message: '에러입니다.', variant: 'error' }); + }, + }, + ); }; const [isAccept, setIsAccept] = useState(Number); @@ -190,9 +201,15 @@ function RepliesComponent({ }, [introduceData]); return ( - + - + - {nickname} + {nickname} - - {likesCount} - - {isLiked ? ( - - - + {likesCount} + {isLiked ? ( + + + + ) : ( + + + + )} + + {who === 'me(author)' || who === 'me' ? ( + ) : ( - - - + <> )} - - {who === 'me(author)' || who === 'me' ? : <>} - - - {who === 'me(author)' || who === 'me' ? : <>} - - + + + {who === 'me(author)' || who === 'me' ? ( + + ) : ( + <> + )} + + - - - - + {message} - setPutReplyOpen(false)}> 수정하기 @@ -265,7 +284,6 @@ function RepliesComponent({ }} /> - {/* 댓글 상대방 introduction */} setIntroduceOpen(false)}>