fix: 무한스크롤 패턴 전역 도입

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/CommentBottomSheet/GlobalCommentBottomSheet.styled.ts

@@ -50,6 +50,26 @@ export const Content = styled.div`
   flex: 1;
   overflow-y: auto;
   min-height: 0;
+
+  scrollbar-width: thin;
+  scrollbar-color: ${colors.grey[100]} transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${colors.grey[100]};
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${colors.white};
+  }
 `;
 
 export const LoadingState = styled.div`

src/components/common/CommentBottomSheet/GlobalCommentBottomSheet.tsx

@@ -1,8 +1,7 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import MessageInput from '@/components/today-words/MessageInput';
 import ReplyList from '@/components/common/Post/ReplyList';
-import { getComments, type CommentData } from '@/api/comments/getComments';
 import { postReply } from '@/api/comments/postReply';
 import { useReplyActions } from '@/hooks/useReplyActions';
 import { useReplyStore } from '@/stores/replyStore';
@@ -16,44 +15,23 @@ import {
   Header,
   Title,
   Content,
-  LoadingState,
   InputSection,
 } from './GlobalCommentBottomSheet.styled';
 
 const GlobalCommentBottomSheet = () => {
   const { roomId } = useParams<{ roomId: string }>();
   const { isOpen, postId, postType, closeCommentBottomSheet } = useCommentBottomSheetStore();
 
-  const [commentList, setCommentList] = useState<CommentData[]>([]);
   const [inputValue, setInputValue] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
   const [isSending, setIsSending] = useState(false);
   const [roomCompleted, setRoomCompleted] = useState(false);
+  const [replyReloadKey, setReplyReloadKey] = useState(0);
+  const contentRef = useRef<HTMLDivElement | null>(null);
 
   const { nickname, isReplying, cancelReply } = useReplyActions();
   const { parentId } = useReplyStore();
   const { openSnackbar } = usePopupActions();
 
-  const loadComments = useCallback(async () => {
-    if (!isOpen || !postId || !postType) return;
-
-    setIsLoading(true);
-    try {
-      const response = await getComments(postId, {
-        postType,
-        size: 20,
-      });
-
-      if (response.data) {
-        setCommentList(response.data.commentList);
-      }
-    } catch (error) {
-      console.error('댓글 로드 실패:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [isOpen, postId, postType]);
-
   const handleSendComment = async () => {
     if (!inputValue.trim() || isSending || !postId || !postType) return;
 
@@ -71,7 +49,7 @@ const GlobalCommentBottomSheet = () => {
       if (response.isSuccess) {
         setInputValue('');
         cancelReply();
-        await loadComments();
+        setReplyReloadKey(prev => prev + 1);
       } else {
         openSnackbar({
           message: response.message || '댓글 작성 중 오류가 발생했습니다.',
@@ -121,17 +99,11 @@ const GlobalCommentBottomSheet = () => {
     }
   }, [isOpen, roomId]);
 
-  useEffect(() => {
-    if (isOpen) {
-      loadComments();
-    }
-  }, [isOpen, postId, loadComments]);
-
   useEffect(() => {
     if (!isOpen) {
       setInputValue('');
       cancelReply();
-      setCommentList([]);
+      setReplyReloadKey(0);
     }
   }, [isOpen, cancelReply]);
 
@@ -144,12 +116,16 @@ const GlobalCommentBottomSheet = () => {
           <Title>댓글</Title>
         </Header>
 
-        <Content>
-          {isLoading ? (
-            <LoadingState>댓글을 불러오는 중...</LoadingState>
-          ) : (
-            <ReplyList commentList={commentList} onReload={loadComments} />
-          )}
+        <Content ref={contentRef}>
+          {postId && postType ? (
+            <ReplyList
+              postId={postId}
+              postType={postType}
+              reloadKey={`${replyReloadKey}-${isOpen ? 'open' : 'closed'}`}
+              rootRef={contentRef}
+              disableBottomMargin={true}
+            />
+          ) : null}
         </Content>
 
         {!roomCompleted && (

src/components/common/Post/PostBody.styled.ts

@@ -22,8 +22,9 @@ export const PostContent = styled.div<{ hasImage: boolean }>`
     font-weight: var(--string-weight-regular, 400);
     line-height: var(--string-lineheight-feedcontent_height20, 20px);
     cursor: pointer;
-    white-space: pre-wrap; // 개행문자 유지
-    /* word-wrap: break-word; // 긴 텍스트 줄바꿈 */
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
 
     display: -webkit-box;
     -webkit-box-orient: vertical;

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,75 @@ 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));
+
+      await new Promise(resolve => setTimeout(resolve, 300));
+
+      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);
+      await new Promise(resolve => setTimeout(resolve, 300));
+
+      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 +117,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 +133,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>