feat: 알림 드롭다운 클릭 시 연계 페이지(linkUrl) 딥링크 이동 라우팅 연동
This commit is contained in:
@@ -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' : ''
|
||||||
}`}
|
}`}
|
||||||
|
|||||||
Reference in New Issue
Block a user