From 961f66b369c00327ee881b573cd2a0364464b20d Mon Sep 17 00:00:00 2001
From: Doeunnkimm <doeunnkimm@gmail.com>
Date: Tue, 19 Mar 2024 12:45:48 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=EC=9D=B4=20=EC=9E=88=EB=8A=94=EC=A7=80=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/comment/CommentsBottomSheet.tsx  |  7 ++++++-
 .../detail/comment/AddCommentButton.tsx       | 15 ++++++++-------
 src/hooks/reactQuery/comment/index.ts         |  1 +
 src/hooks/reactQuery/comment/useGetComment.ts |  1 +
 .../reactQuery/comment/useGetHasNewComment.ts | 19 +++++++++++++++++++
 5 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 src/hooks/reactQuery/comment/useGetHasNewComment.ts

diff --git a/src/features/comment/CommentsBottomSheet.tsx b/src/features/comment/CommentsBottomSheet.tsx
index 6cd9f513..280ef6e0 100644
--- a/src/features/comment/CommentsBottomSheet.tsx
+++ b/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 }) => (
diff --git a/src/features/goal/components/detail/comment/AddCommentButton.tsx b/src/features/goal/components/detail/comment/AddCommentButton.tsx
index ba370a8e..5705e005 100644
--- a/src/features/goal/components/detail/comment/AddCommentButton.tsx
+++ b/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>
   );
 };
diff --git a/src/hooks/reactQuery/comment/index.ts b/src/hooks/reactQuery/comment/index.ts
index ae9e7fb1..450d1822 100644
--- a/src/hooks/reactQuery/comment/index.ts
+++ b/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';
diff --git a/src/hooks/reactQuery/comment/useGetComment.ts b/src/hooks/reactQuery/comment/useGetComment.ts
index 53f7701e..6d7c8f1f 100644
--- a/src/hooks/reactQuery/comment/useGetComment.ts
+++ b/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,
   });
 };
diff --git a/src/hooks/reactQuery/comment/useGetHasNewComment.ts b/src/hooks/reactQuery/comment/useGetHasNewComment.ts
new file mode 100644
index 00000000..cd4a9404
--- /dev/null
+++ b/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,
+  });
+};