feat: 알림 드롭다운 클릭 시 연계 페이지(linkUrl) 딥링크 이동 라우팅 연동

This commit is contained in:
pray4skylark
2026-09-30 17:23:14 +09:00
parent af4aeb8ae9
commit e6fbd40ac1
@@ -1,6 +1,7 @@
"use client"; "use client";
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { Bell, Check, AlertCircle, Info, AlertTriangle, XCircle } from 'lucide-react'; import { Bell, Check, AlertCircle, Info, AlertTriangle, XCircle } from 'lucide-react';
import { useNotificationStore } from '@/stores'; import { useNotificationStore } from '@/stores';
@@ -47,6 +48,7 @@ interface NotificationDropdownProps {
} }
const NotificationDropdown = ({ isOpen, onClose }: NotificationDropdownProps) => { const NotificationDropdown = ({ isOpen, onClose }: NotificationDropdownProps) => {
const router = useRouter();
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
const notifications = useNotificationStore((s) => s.notifications); const notifications = useNotificationStore((s) => s.notifications);
const markAsRead = useNotificationStore((s) => s.markAsRead); const markAsRead = useNotificationStore((s) => s.markAsRead);
@@ -69,8 +71,12 @@ const NotificationDropdown = ({ isOpen, onClose }: NotificationDropdownProps) =>
}; };
}, [isOpen, onClose, fetchNotifications]); }, [isOpen, onClose, fetchNotifications]);
const handleNotificationClick = async (id: number) => { const handleNotificationClick = async (notification: { notificationId: number; linkUrl?: string }) => {
await markAsRead(id); await markAsRead(notification.notificationId);
onClose();
if (notification.linkUrl) {
router.push(notification.linkUrl);
}
}; };
const handleMarkAllRead = async () => { const handleMarkAllRead = async () => {
@@ -115,7 +121,7 @@ const NotificationDropdown = ({ isOpen, onClose }: NotificationDropdownProps) =>
{notifications.map((notification) => ( {notifications.map((notification) => (
<li <li
key={notification.notificationId} key={notification.notificationId}
onClick={() => handleNotificationClick(notification.notificationId)} onClick={() => handleNotificationClick(notification)}
className={`px-4 py-3 cursor-pointer transition-colors hover:bg-gray-50 ${ className={`px-4 py-3 cursor-pointer transition-colors hover:bg-gray-50 ${
!notification.isRead ? 'bg-blue-50/50 hover:bg-blue-50' : '' !notification.isRead ? 'bg-blue-50/50 hover:bg-blue-50' : ''
}`} }`}