refactor: 게시글 좋아요 & 취소 api도 react-query를 사용해 구현

Author: gustn99

src/pages/Post/PostBase/index.tsx

@@ -1,15 +1,14 @@
 import { useEffect, useState, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import dayjs from 'dayjs';
-import { useRecoilState } from 'recoil';
-import 'dayjs/locale/ko';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import dayjs, { extend } from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import theme from '@styles/theme';
 
-import { getPostDetailApi } from '@apis/post';
+import { usePostDetail } from '@apis/post';
 import { togglePostLikeStatusApi } from '@apis/post-like';
-import { postIdAtom, userAtom, isPostRepresentativeAtom } from '@recoil/Post/PostAtom';
 
 import Left from '@assets/arrow/left.svg';
 import Message from '@assets/default/message.svg';
@@ -51,11 +50,7 @@ import {
 } from './styles';
 
 const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
-	const [, setPostId] = useRecoilState(postIdAtom);
-	const [post, setPost] = useState<GetPostDetailResponse['data']>();
-	const [user, setUser] = useRecoilState(userAtom);
-	const [, setIsPostRepresentative] = useRecoilState(isPostRepresentativeAtom);
-	const [timeAgo, setTimeAgo] = useState<string | null>();
+	extend(relativeTime);
 	const [isTextOverflowing, setIsTextOverflowing] = useState(false);
 	const [showFullText, setShowFullText] = useState(false);
 	const [isLikeCommentBottomSheetOpen, setIsLikeCommentBottomSheetOpen] = useState(false);
@@ -64,6 +59,12 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 	const { postId } = useParams<{ postId: string }>();
 	const contentRef = useRef<HTMLDivElement>(null);
 
+	const { data } = usePostDetail(Number(postId));
+	const queryClient = useQueryClient();
+	const post = data?.data;
+	const user = post?.user;
+	const timeAgo = dayjs(post?.createdAt).locale('ko').fromNow();
+
 	const nav = useNavigate();
 
 	const handleLikeCommentOpen = (tab: 'likes' | 'comments') => {
@@ -80,48 +81,26 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 	};
 
 	// 게시글 좋아요 누르기/취소하기 api
-	const togglePostLikeStatus = async () => {
-		if (!post || !postId) return;
-
-		const prevPost = { ...post }; // 현재 상태 저장
-		setPost({
-			...post,
-			isPostLike: !post.isPostLike,
-			postLikesCount: post.isPostLike ? post.postLikesCount - 1 : post.postLikesCount + 1,
-		}); //사용자가 좋아요를 누르면 먼저 클라이언트에서 post 상태를 변경(낙관적 업데이트)
-
-		try {
-			const response = await togglePostLikeStatusApi(Number(postId));
-			setPost({
-				...post,
-				isPostLike: response.data.isPostLike,
-				postLikesCount: response.data.postLikesCount,
-			}); // 서버로 요청 후 성공하면 그대로 유지
-		} catch (error) {
-			console.error('Error toggling like status:', error);
-			setPost(prevPost); // 실패하면 원래 상태로 롤백
-		}
-	};
-
-	useEffect(() => {
-		setPostId(Number(postId));
-
-		// 게시글 정보 가져오기
-		const getPost = async () => {
-			try {
-				const response = await getPostDetailApi(Number(postId));
-				const data = response.data;
-				setPost(data);
-				setUser(data.user);
-				setIsPostRepresentative(data.isRepresentative);
-				setTimeAgo(dayjs(data.createdAt).locale('ko').fromNow());
-			} catch (error) {
-				console.error('Error fetching post data:', error);
-			}
-		};
-
-		getPost();
-	}, [postId]);
+	const { mutate: togglePostLikeStatus } = useMutation({
+		mutationFn: () => togglePostLikeStatusApi(Number(postId)),
+		onSuccess: () => {
+			queryClient.setQueryData(['postDetail', Number(postId)], (oldData: GetPostDetailResponse | undefined) => {
+				if (!oldData) return oldData;
+
+				const newData = {
+					...oldData,
+					data: {
+						...oldData.data,
+						postLikesCount: oldData.data.postLikesCount + (oldData.data.isPostLike ? -1 : 1), // 기존 좋아요 개수를 토대로 증가/감소
+						isPostLike: !oldData.data.isPostLike, // 좋아요 상태 변경
+					},
+				};
+				console.log('newData', newData);
+
+				return newData;
+			});
+		},
+	});
 
 	useEffect(() => {
 		if (contentRef.current) {
@@ -160,7 +139,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 							$textTheme={{ style: 'body2-medium' }}
 							color={theme.colors.text.primary}
 						>
-							{user.nickname}
+							{user?.nickname ?? '알수없음'}
 						</UserName>
 						<StyledText
 							className="timeAgo"
@@ -186,7 +165,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 
 					<IconRow>
 						<IconWrapper>
-							<Icon onClick={togglePostLikeStatus}>
+							<Icon onClick={() => togglePostLikeStatus()}>
 								{post?.isPostLike ? <Like isFilled={true} color={theme.colors.brand.primary} /> : <Like />}
 							</Icon>
 							<span onClick={() => handleLikeCommentOpen('likes')}>{post?.postLikesCount ?? 0}</span>