fix: 알림 히트박스 변경 및 Store 댓글 삭제 안 됨 버그 수정

src/components/common/post-template/CommentTemplate.tsx

@@ -42,7 +42,10 @@ export default function CommentTemplate({ postId }: CommentTemplateProps) {
         <span className="text-mainGreen">{commentList.length}</span>
       </header>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
+      <form
+        onSubmit={handleSubmit(data => onSubmit({ ...data, rate: -1 }))}
+        className="flex flex-col"
+      >
         <textarea
           {...register('content')}
           className="mb-3 mt-2.5 w-full resize-none rounded-lg border border-solid border-mainGray p-[15px] outline-none"
@@ -108,7 +111,7 @@ export default function CommentTemplate({ postId }: CommentTemplateProps) {
                 isEditingComment.commentId === id ? (
                   <form
                     onSubmit={handleSubmit(({ editedContent }) =>
-                      onEditSubmit({ editedContent, commentId: id }),
+                      onEditSubmit({ editedContent, commentId: id, rate: -1 }),
                     )}
                     className="flex flex-col"
                   >

src/components/notification/NotificationContent.tsx

@@ -14,6 +14,7 @@ import CardContent from '@/components/notification/CardContent';
 
 export default function NotificationContent() {
   const isNotificationOpen = useAtomValue(notificationOpenAtom);
+  const { setNotificationAsRead } = useNotification();
   const { data: notificationList, refetch } = useGetNotificationList();
   const { deleteAllNotification, setAllNotificationAsRead } = useNotification();
 
@@ -51,7 +52,18 @@ export default function NotificationContent() {
               key={item.id}
               className={`relative flex flex-col rounded-lg border border-mainGray bg-white pb-6 pl-[22px] pr-4 pt-8 ${
                 item.isRead && 'opacity-50'
-              }`}
+              } cursor-pointer`}
+              onClick={() => {
+                if (!item.isRead) setNotificationAsRead(item.id);
+              }}
+              tabIndex={0}
+              role="button"
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  if (!item.isRead) setNotificationAsRead(item.id);
+                }
+              }}
             >
               <div
                 className="absolute left-0 top-0 h-full w-[7px] rounded-l-lg"

src/hooks/post/useHandleComment.ts

@@ -68,11 +68,17 @@ export const useHandleComment = ({ postId, reset }: UseHandleCommentProps) => {
     }));
   };
 
-  const onSubmit = async ({ content }: { content: string }) => {
-    if (content === '') return;
+  const onSubmit = async ({
+    content,
+    rate,
+  }: {
+    content: string;
+    rate: number;
+  }) => {
+    if (content === '' || rate === undefined) return;
 
     try {
-      await postComment({ imgUrl, content });
+      await postComment({ imgUrl, content, rate });
       showToast('댓글을 등록했어요!');
       reset();
     } catch (err) {
@@ -83,14 +89,22 @@ export const useHandleComment = ({ postId, reset }: UseHandleCommentProps) => {
   const onEditSubmit = async ({
     editedContent,
     commentId,
+    rate,
   }: {
     editedContent: string;
     commentId: number;
+    rate: number;
   }) => {
-    if (editedContent === '') return;
+    if (editedContent === '' || rate === undefined) return;
 
     try {
-      await editComment({ commentId, postId, imgUrl, content: editedContent });
+      await editComment({
+        commentId,
+        postId,
+        imgUrl,
+        content: editedContent,
+        rate,
+      });
       showToast('댓글을 수정했어요!');
       toggleEditingComment();
       reset();

src/services/comment/commentMutations.ts

@@ -9,15 +9,20 @@ export const usePostComment = (
   options?: UseMutationOptions<
     unknown,
     Error,
-    { imgUrl: string; content: string }
+    { imgUrl: string; content: string; rate: number }
   >,
 ) => {
-  return useMutation<unknown, AxiosError, { imgUrl: string; content: string }>({
-    mutationFn: async ({ content, imgUrl }) => {
+  return useMutation<
+    unknown,
+    AxiosError,
+    { imgUrl: string; content: string; rate: number }
+  >({
+    mutationFn: async ({ content, imgUrl, rate }) => {
       const { data } = await axiosInstance.post(`/comments`, {
         postId,
         content,
         imgUrl,
+        rate,
       });
       return data;
     },
@@ -29,7 +34,13 @@ export const usePatchComment = (
   options?: UseMutationOptions<
     unknown,
     Error,
-    { commentId: number; postId: number; content: string; imgUrl: string }
+    {
+      commentId: number;
+      postId: number;
+      content: string;
+      imgUrl: string;
+      rate: number;
+    }
   >,
 ) => {
   return useMutation({