feat: 새로운 댓글이 있는지 조회하는 기능 추가

src/features/comment/CommentsBottomSheet.tsx

@@ -1,8 +1,11 @@
 import { useOverlay } from '@toss/use-overlay';
 import { AnimatePresence } from 'framer-motion';
+import { useAtomValue } from 'jotai';
 
 import { Comment } from '@/components';
-import { useGetComment } from '@/hooks/reactQuery/comment';
+import { useGetComment, useGetHasNewComment } from '@/hooks/reactQuery/comment';
+
+import { isMyGoalAtom } from '../goal/atoms';
 
 import { CommentBottomSheetLayout } from './CommentBottomSheetLayout';
 import { DeleteCommentBottomSheet } from './DeleteCommentBottomSheet';
@@ -15,8 +18,10 @@ interface CommentsBottomSheetProps {
 }
 
 export const CommentsBottomSheet = ({ goalId, ...props }: CommentsBottomSheetProps) => {
+  const isMyGoal = useAtomValue(isMyGoalAtom);
   const { open } = useOverlay();
   const { data } = useGetComment({ goalId });
+  useGetHasNewComment({ goalId, isMyGoal });
 
   const handleDelete = (commentId: number) => () => {
     open(({ isOpen, close }) => (

src/features/goal/components/detail/comment/AddCommentButton.tsx

@@ -4,15 +4,14 @@ import { useAtomValue } from 'jotai';
 
 import BlueCommentIcon from '@/assets/icons/blue-comment-icon.svg';
 import { CommentsBottomSheet } from '@/features/comment';
-import { goalIdAtom } from '@/features/goal/atoms';
+import { goalIdAtom, isMyGoalAtom } from '@/features/goal/atoms';
+import { useGetHasNewComment } from '@/hooks/reactQuery/comment';
 
-interface AddCommentButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  hasUnreadComments?: boolean;
-}
-
-export const AddCommentButton = ({ hasUnreadComments, ...props }: AddCommentButtonProps) => {
+export const AddCommentButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
   const { open } = useOverlay();
   const goalId = useAtomValue(goalIdAtom);
+  const isMyGoal = useAtomValue(isMyGoalAtom);
+  const { data: hasNewComments } = useGetHasNewComment({ goalId, isMyGoal });
 
   const handleOpenComments = () => {
     open(({ isOpen, close }) => <CommentsBottomSheet open={isOpen} onClose={close} goalId={goalId} />);
@@ -27,7 +26,9 @@ export const AddCommentButton = ({ hasUnreadComments, ...props }: AddCommentButt
       >
         <BlueCommentIcon />
       </button>
-      {hasUnreadComments && <span className="absolute top-0 right-0 w-[14px] h-[14px] rounded-full bg-red-30" />}
+      {isMyGoal && hasNewComments && (
+        <span className="absolute top-0 right-0 w-[14px] h-[14px] rounded-full bg-red-30" />
+      )}
     </div>
   );
 };

src/hooks/reactQuery/comment/index.ts

@@ -1,3 +1,4 @@
 export { useCreateComment } from './useCreateComment';
 export { useDeleteComment } from './useDeleteComment';
 export { useGetComment } from './useGetComment';
+export { useGetHasNewComment } from './useGetHasNewComment';

src/hooks/reactQuery/comment/useGetComment.ts

@@ -30,5 +30,6 @@ export const useGetComment = ({ goalId }: CommentRequestParams) => {
   return useQuery<CommentResponse>({
     queryKey: ['comment', goalId],
     queryFn: () => api.get<CommentResponse>(`/goal/${goalId}/comment`),
+    staleTime: 1000,
   });
 };

src/hooks/reactQuery/comment/useGetHasNewComment.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '@/apis';
+
+type CommentRequestParams = {
+  isMyGoal: boolean;
+  goalId: number;
+};
+
+type CommentResponse = boolean;
+
+export const useGetHasNewComment = ({ goalId, isMyGoal }: CommentRequestParams) => {
+  return useQuery<CommentResponse>({
+    queryKey: ['comment', 'new', goalId],
+    queryFn: () => api.get<CommentResponse>(`/goal/${goalId}/comment/new`),
+    enabled: goalId !== -1 || isMyGoal,
+    staleTime: 1000,
+  });
+};