Merge pull request #135 from codeit-2team/feat/134

Feat/134 알림 클릭 시 예약 내역 페이지로 이동

Author: minimo-9

src/components/Notification/NotificationCard.tsx

@@ -4,6 +4,8 @@ import { useDeleteNotification } from '@/hooks/useDeleteNotification';
 import cn from '@/lib/cn';
 import relativeTime from '@/utils/relativeTime';
 import IconClose from '@assets/svg/close';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 
 type NotificationStatus = 'confirmed' | 'declined';
 
@@ -12,6 +14,7 @@ interface NotificationCardProps {
   id: number;
   createdAt: string;
   onDelete: (id: number) => void;
+  onCardClick?: () => void;
 }
 
 const statusColorMap: Record<
@@ -50,14 +53,16 @@ export default function NotificationCard({
   createdAt,
   id,
   onDelete,
+  onCardClick,
 }: NotificationCardProps) {
-  const { mutate: deleteNotification } = useDeleteNotification();
+  const { mutateAsync: deleteNotification } = useDeleteNotification();
+  const router = useRouter();
 
   const formattedContent = content.replace(/(\(\d{4}-\d{2}-\d{2})\s+/, '$1\n');
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
+    await deleteNotification(id);
     onDelete(id);
-    deleteNotification(id);
   };
 
   const keywordMatch = Object.entries(statusKeywordMap).find(([k]) =>
@@ -66,6 +71,19 @@ export default function NotificationCard({
 
   const status = keywordMatch?.[1];
 
+  const handleCardClick = async () => {
+    try {
+      await deleteNotification(id);
+      onDelete(id);
+      onCardClick?.();
+      router.push('/mypage/reservations');
+    } catch {
+      toast.error(
+        '알림 확인 중 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.',
+      );
+    }
+  };
+
   return (
     <div className='w-full rounded-[5px] border border-gray-400 bg-white px-12 py-16'>
       <div className='flex items-start justify-between'>
@@ -79,8 +97,8 @@ export default function NotificationCard({
         )}
         <button
           onClick={(e) => {
+            e.stopPropagation();
             setTimeout(() => {
-              e.stopPropagation();
               handleDelete();
             }, 0);
           }}
@@ -90,23 +108,25 @@ export default function NotificationCard({
         </button>
       </div>
 
-      <p className='text-md font-regular whitespace-pre-line text-black'>
-        {formattedContent.split(/(승인|거절)/).map((text, i) => {
-          const matchedStatus = statusKeywordMap[text];
-          return (
-            <span
-              key={i}
-              className={cn(
-                matchedStatus && statusColorMap[matchedStatus].text,
-              )}
-            >
-              {text}
-            </span>
-          );
-        })}
-      </p>
+      <div className='cursor-pointer' onClick={handleCardClick}>
+        <p className='text-md font-regular whitespace-pre-line text-black'>
+          {formattedContent.split(/(승인|거절)/).map((text, i) => {
+            const matchedStatus = statusKeywordMap[text];
+            return (
+              <span
+                key={i}
+                className={cn(
+                  matchedStatus && statusColorMap[matchedStatus].text,
+                )}
+              >
+                {text}
+              </span>
+            );
+          })}
+        </p>
 
-      <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p>
+        <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p>
+      </div>
     </div>
   );
 }

src/components/Notification/NotificationCardList.tsx

@@ -8,6 +8,7 @@ import { toast } from 'sonner';
 
 type NotificationCardListProps = {
   notification: Notification['notifications'];
+  onCardClick?: () => void;
 };
 
 /**
@@ -26,6 +27,7 @@ type NotificationCardListProps = {
  */
 export default function NotificationCardList({
   notification,
+  onCardClick,
 }: NotificationCardListProps) {
   // 현재 화면에 표시할 알림 목록 상태
   const [currentNotifications, setCurrentNotifications] =
@@ -143,6 +145,7 @@ export default function NotificationCardList({
               prev.filter((item) => item.id !== id),
             )
           }
+          onCardClick={onCardClick}
         />
       ))}
 

src/components/Notification/NotificationDropdown.tsx

@@ -68,7 +68,10 @@ export default function NotificationDropdown({
       )}
 
       {!isLoading && data && (
-        <NotificationCardList notification={data.notifications} />
+        <NotificationCardList
+          notification={data.notifications}
+          onCardClick={onClose}
+        />
       )}
     </div>
   );

src/hooks/useDeleteNotification.ts

@@ -1,5 +1,6 @@
 import { privateInstance } from '@/apis/privateInstance';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
 
 /**
  * 특정 알림을 삭제하는 비동기 함수입니다.
@@ -40,5 +41,9 @@ export const useDeleteNotification = () => {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['notifications'] });
     },
+
+    onError: () => {
+      toast.error('알림 삭제를 실패했습니다.');
+    },
   });
 };