알림삭제 기능 추가

frontend/src/components/TradeNotificationListPage.tsx

@@ -17,6 +17,15 @@ import '../styles/virtualTradingDashboard.css';
 
 type RightTab = 'trade' | 'orderbook';
 
+const IcTrash = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    <line x1="10" y1="11" x2="10" y2="17" />
+    <line x1="14" y1="11" x2="14" y2="17" />
+  </svg>
+);
+
 interface Props {
   theme: Theme;
   onGoToChart: (market: string) => void;
@@ -52,6 +61,9 @@ export const TradeNotificationListPage: React.FC<Props> = ({
     unreadCount,
     markAsRead,
     markAllAsRead,
+    deleteNotification,
+    deleteUnreadNotifications,
+    deleteAllNotifications,
     openDetail,
     refreshHistory,
   } = useTradeNotification();
@@ -127,6 +139,27 @@ export const TradeNotificationListPage: React.FC<Props> = ({
     setRightTab('trade');
   }, [markAsRead, handleSelectMarket]);
 
+  const handleDeleteOne = useCallback(async (item: TradeNotificationItem, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!window.confirm('이 알림을 삭제하시겠습니까?')) return;
+    await deleteNotification(item.id);
+    if (selectedNotifyId === item.id) setSelectedNotifyId(null);
+  }, [deleteNotification, selectedNotifyId]);
+
+  const handleDeleteUnread = useCallback(async () => {
+    if (unreadCount === 0) return;
+    if (!window.confirm(`읽지 않은 알림 ${unreadCount}건을 삭제하시겠습니까?`)) return;
+    await deleteUnreadNotifications();
+    setSelectedNotifyId(null);
+  }, [unreadCount, deleteUnreadNotifications]);
+
+  const handleDeleteAll = useCallback(async () => {
+    if (allNotifications.length === 0) return;
+    if (!window.confirm(`알림 ${allNotifications.length}건을 모두 삭제하시겠습니까?`)) return;
+    await deleteAllNotifications();
+    setSelectedNotifyId(null);
+  }, [allNotifications.length, deleteAllNotifications]);
+
   const handleOrderbookRowClick = useCallback((price: number, rowType: 'ask' | 'bid') => {
     setRightTab('trade');
     const side = rowType === 'bid' ? 'buy' : 'sell';
@@ -174,6 +207,27 @@ export const TradeNotificationListPage: React.FC<Props> = ({
                   모두 읽음
                 </button>
               )}
+              <span className="tnl-toolbar-divider" aria-hidden="true" />
+              <button
+                type="button"
+                className="tnl-icon-btn"
+                title="미확인 알림 삭제"
+                aria-label="미확인 알림 삭제"
+                disabled={unreadCount === 0}
+                onClick={() => void handleDeleteUnread()}
+              >
+                <IcTrash />
+              </button>
+              <button
+                type="button"
+                className="tnl-icon-btn tnl-icon-btn--danger"
+                title="모두 삭제"
+                aria-label="모두 삭제"
+                disabled={allNotifications.length === 0}
+                onClick={() => void handleDeleteAll()}
+              >
+                <IcTrash />
+              </button>
             </div>
           </div>
 
@@ -213,6 +267,15 @@ export const TradeNotificationListPage: React.FC<Props> = ({
                         </span>
                         {!item.isRead && <span className="tnl-dot" aria-hidden />}
                       </button>
+                      <button
+                        type="button"
+                        className="tnl-row-icon-btn"
+                        title="삭제"
+                        aria-label="알림 삭제"
+                        onClick={e => void handleDeleteOne(item, e)}
+                      >
+                        <IcTrash />
+                      </button>
                       <button
                         type="button"
                         className="tnl-row-action"