THIP-407: 상호작용 버튼의 중복 실행 요청 방지 및 상태 일관성 개선

package.json

@@ -16,6 +16,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@tanstack/react-query": "^5.90.21",
     "@types/react-datepicker": "^7.0.0",
     "axios": "^1.11.0",
     "react": "^19.1.0",

src/components/common/Post/PostFooter.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import like from '../../../assets/feed/like.svg';
 import activeLike from '../../../assets/feed/activeLike.svg';
 import comment from '../../../assets/feed/comment.svg';
@@ -7,6 +7,7 @@ import activeSave from '../../../assets/feed/activeSave.svg';
 import lockIcon from '../../../assets/feed/lockIcon.svg';
 import { postSaveFeed } from '@/api/feeds/postSave';
 import { postFeedLike } from '@/api/feeds/postFeedLike';
+import { usePreventDoubleClick } from '@/hooks/usePreventDoubleClick';
 import { Container } from './PostFooter.styled';
 
 interface PostFooterProps {
@@ -36,39 +37,71 @@ const PostFooter = ({
   const [likeCount, setLikeCount] = useState<number>(initialLikeCount);
   const [saved, setSaved] = useState(isSaved);
 
-  const handleLike = async () => {
-    try {
-      const response = await postFeedLike(feedId, !liked);
+  const likedRef = useRef(isLiked);
+  const savedRef = useRef(isSaved);
+  const { isLoading: isLikeLoading, run: runLike } = usePreventDoubleClick();
+  const { isLoading: isSaveLoading, run: runSave } = usePreventDoubleClick();
 
-      if (response.isSuccess) {
-        setLiked(response.data.isLiked);
-        setLikeCount(prev => (response.data.isLiked ? prev + 1 : prev - 1));
-        console.log('좋아요 상태 변경 성공:', response.data.isLiked);
-      } else {
-        console.error('좋아요 상태 변경 실패:', response.message);
+  useEffect(() => {
+    setLiked(isLiked);
+    likedRef.current = isLiked;
+  }, [isLiked]);
+
+  useEffect(() => {
+    setSaved(isSaved);
+    savedRef.current = isSaved;
+  }, [isSaved]);
+
+  const handleLike = () => {
+    runLike(async () => {
+      const nextLiked = !likedRef.current;
+      likedRef.current = nextLiked;
+      setLiked(nextLiked);
+      setLikeCount(prev => (nextLiked ? prev + 1 : prev - 1));
+
+      try {
+        const response = await postFeedLike(feedId, nextLiked);
+        if (!response.isSuccess && likedRef.current === nextLiked) {
+          const rollbackState = !nextLiked;
+          likedRef.current = rollbackState;
+          setLiked(rollbackState);
+          setLikeCount(prev => (nextLiked ? prev - 1 : prev + 1));
+        }
+      } catch {
+        if (likedRef.current === nextLiked) {
+          const rollbackState = !nextLiked;
+          likedRef.current = rollbackState;
+          setLiked(rollbackState);
+          setLikeCount(prev => (nextLiked ? prev - 1 : prev + 1));
+        }
       }
-    } catch (error) {
-      console.error('좋아요 API 호출 실패:', error);
-    }
+    });
   };
 
-  const handleSave = async () => {
-    try {
-      const response = await postSaveFeed(feedId, !saved);
+  const handleSave = () => {
+    runSave(async () => {
+      const nextSaved = !savedRef.current;
+      savedRef.current = nextSaved;
+      setSaved(nextSaved);
+      onSaveToggle?.(feedId, nextSaved);
 
-      if (response.isSuccess) {
-        const newSaveState = response.data?.isSaved ?? !saved;
-        setSaved(newSaveState);
-        console.log('저장 상태 변경 성공:', newSaveState);
-        if (onSaveToggle) {
-          onSaveToggle(feedId, newSaveState);
+      try {
+        const response = await postSaveFeed(feedId, nextSaved);
+        if (!response.isSuccess && savedRef.current === nextSaved) {
+          const rollbackState = !nextSaved;
+          savedRef.current = rollbackState;
+          setSaved(rollbackState);
+          onSaveToggle?.(feedId, rollbackState);
+        }
+      } catch {
+        if (savedRef.current === nextSaved) {
+          const rollbackState = !nextSaved;
+          savedRef.current = rollbackState;
+          setSaved(rollbackState);
+          onSaveToggle?.(feedId, rollbackState);
         }
-      } else {
-        console.error('저장 상태 변경 실패:', response.message);
       }
-    } catch (error) {
-      console.error('저장 API 호출 실패:', error);
-    }
+    });
   };
 
   const handleComment = () => {
@@ -80,7 +113,7 @@ const PostFooter = ({
     <Container isDetail={isDetail}>
       <div className="left">
         <div className="count">
-          <img src={liked ? activeLike : like} onClick={handleLike} />
+          <img src={liked ? activeLike : like} onClick={handleLike} style={{ opacity: isLikeLoading ? 0.6 : 1 }} />
           <div>{likeCount}</div>
         </div>
         <div className="count comment">
@@ -96,7 +129,12 @@ const PostFooter = ({
             <img src={lockIcon} alt="비공개" />
           )
         ) : (
-          <img src={saved ? activeSave : save} onClick={handleSave} alt="저장" />
+          <img
+            src={saved ? activeSave : save}
+            onClick={handleSave}
+            alt="저장"
+            style={{ opacity: isSaveLoading ? 0.6 : 1 }}
+          />
         )}
       </div>
     </Container>

src/components/common/Post/Reply.tsx

@@ -1,10 +1,11 @@
-import { useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import PostHeader from './PostHeader';
 import type { CommentData } from '@/api/comments/getComments';
 import like from '../../../assets/feed/like.svg';
 import activeLike from '../../../assets/feed/activeLike.svg';
 import { useReplyActions } from '@/hooks/useReplyActions';
 import { usePopupActions } from '@/hooks/usePopupActions';
+import { usePreventDoubleClick } from '@/hooks/usePreventDoubleClick';
 import { postLike } from '@/api/comments/postLike';
 import { deleteComment } from '@/api/comments/deleteComment';
 import { DeletedContainer, Container, ReplySection } from './Reply.styled';
@@ -32,27 +33,46 @@ const Reply = ({
   const [liked, setLiked] = useState(isLike);
   const [likeCount, setLikeCount] = useState<number>(initialLikeCount);
   const containerRef = useRef<HTMLDivElement>(null);
+  const { isLoading: isLikeLoading, run: runLike } = usePreventDoubleClick();
 
   const { startReply } = useReplyActions();
   const { openMoreMenu, closePopup, openSnackbar } = usePopupActions();
 
-  const handleLike = async () => {
-    try {
-      const response = await postLike(commentId, !liked);
+  useEffect(() => {
+    setLiked(isLike);
+    setLikeCount(initialLikeCount);
+  }, [isLike, initialLikeCount]);
 
-      if (response.isSuccess) {
-        setLiked(response.data.isLiked);
-        setLikeCount(prev => (response.data.isLiked ? prev + 1 : prev - 1));
-      } else {
+  const handleLike = () => {
+    runLike(async () => {
+      const previousLiked = liked;
+      const previousLikeCount = likeCount;
+      const nextLiked = !liked;
+
+      setLiked(nextLiked);
+      setLikeCount(prev => (nextLiked ? prev + 1 : prev - 1));
+
+      try {
+        const response = await postLike(commentId, nextLiked);
+        if (!response.isSuccess) {
+          setLiked(previousLiked);
+          setLikeCount(previousLikeCount);
+          openSnackbar({
+            message: response.message || '좋아요 처리 중 오류가 발생했습니다.',
+            variant: 'top',
+            onClose: () => {},
+          });
+        }
+      } catch {
+        setLiked(previousLiked);
+        setLikeCount(previousLikeCount);
         openSnackbar({
-          message: response.message || '좋아요 처리 중 오류가 발생했습니다.',
+          message: '좋아요 처리 중 오류가 발생했습니다.',
           variant: 'top',
           onClose: () => {},
         });
       }
-    } catch (error) {
-      console.error('좋아요 상태 변경 실패:', error);
-    }
+    });
   };
 
   const handleReplyClick = () => {
@@ -163,6 +183,7 @@ const Reply = ({
               handleLike();
             }}
             alt="좋아요"
+            style={{ opacity: isLikeLoading ? 0.6 : 1 }}
           />
           <div className="count">{likeCount}</div>
         </div>

src/components/common/Post/SubReply.tsx

@@ -1,11 +1,12 @@
-import { useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import PostHeader from './PostHeader';
 import type { ReplyData } from '@/api/comments/getComments';
 import like from '../../../assets/feed/like.svg';
 import activeLike from '../../../assets/feed/activeLike.svg';
 import replyIcon from '../../../assets/feed/replyIcon.svg';
 import { useReplyActions } from '@/hooks/useReplyActions';
 import { usePopupActions } from '@/hooks/usePopupActions';
+import { usePreventDoubleClick } from '@/hooks/usePreventDoubleClick';
 import { postLike } from '@/api/comments/postLike';
 import { deleteComment } from '@/api/comments/deleteComment';
 import { DeletedContainer, Container, ReplyIcon, Content, ReplySection } from './SubReply.styled';
@@ -34,32 +35,50 @@ const SubReply = ({
   const [liked, setLiked] = useState<boolean>(isLike);
   const [currentLikeCount, setCurrentLikeCount] = useState<number>(likeCount);
   const containerRef = useRef<HTMLDivElement>(null);
+  const { isLoading: isLikeLoading, run: runLike } = usePreventDoubleClick();
 
   const { startReply } = useReplyActions();
   const { openMoreMenu, closePopup, openSnackbar } = usePopupActions();
 
+  useEffect(() => {
+    setLiked(isLike);
+    setCurrentLikeCount(likeCount);
+  }, [isLike, likeCount]);
+
   const handleReplyClick = () => {
     startReply(creatorNickname, commentId);
   };
 
-  const handleLike = async () => {
-    try {
-      const response = await postLike(commentId, !liked);
+  const handleLike = () => {
+    runLike(async () => {
+      const previousLiked = liked;
+      const previousLikeCount = currentLikeCount;
+      const nextLiked = !liked;
 
-      if (response.isSuccess) {
-        setLiked(response.data.isLiked);
-        setCurrentLikeCount(prev => (response.data.isLiked ? prev + 1 : prev - 1));
-      } else {
-        console.error('좋아요 상태 변경 실패:', response.message);
+      setLiked(nextLiked);
+      setCurrentLikeCount(prev => (nextLiked ? prev + 1 : prev - 1));
+
+      try {
+        const response = await postLike(commentId, nextLiked);
+        if (!response.isSuccess) {
+          setLiked(previousLiked);
+          setCurrentLikeCount(previousLikeCount);
+          openSnackbar({
+            message: response.message || '좋아요 처리 중 오류가 발생했습니다.',
+            variant: 'top',
+            onClose: () => {},
+          });
+        }
+      } catch {
+        setLiked(previousLiked);
+        setCurrentLikeCount(previousLikeCount);
         openSnackbar({
-          message: response.message || '좋아요 처리 중 오류가 발생했습니다.',
+          message: '좋아요 처리 중 오류가 발생했습니다.',
           variant: 'top',
           onClose: () => {},
         });
       }
-    } catch (error) {
-      console.error('좋아요 상태 변경 실패:', error);
-    }
+    });
   };
 
   const handleDelete = async () => {
@@ -170,6 +189,7 @@ const SubReply = ({
                 handleLike();
               }}
               alt="좋아요"
+              style={{ opacity: isLikeLoading ? 0.6 : 1 }}
             />
             <div className="count">{currentLikeCount}</div>
           </div>