diff --git a/frontend/src/components/TradeNotificationListPage.tsx b/frontend/src/components/TradeNotificationListPage.tsx index 8d17361..db2ecb8 100644 --- a/frontend/src/components/TradeNotificationListPage.tsx +++ b/frontend/src/components/TradeNotificationListPage.tsx @@ -23,13 +23,18 @@ import TradeNotificationGridLayoutPicker from './tradeNotification/TradeNotifica import { loadTradeNotificationGridPreset, loadTradeNotificationListLayout, + loadTradeNotificationCandleFilter, loadTradeNotificationListSort, + saveTradeNotificationCandleFilter, saveTradeNotificationGridPreset, saveTradeNotificationListLayout, saveTradeNotificationListSort, + TRADE_NOTIFICATION_CANDLE_FILTER_OPTIONS, + type TradeNotificationCandleFilter, type TradeNotificationListLayout, type TradeNotificationListSort, } from '../utils/tradeNotificationListLayout'; +import { normalizeStartCandleType } from '../utils/strategyStartNodes'; import { getTradeNotificationGridPreset, type TradeNotificationGridPresetId, @@ -120,6 +125,9 @@ export const TradeNotificationListPage: React.FC = ({ const [listSort, setListSort] = useState( () => loadTradeNotificationListSort(), ); + const [candleFilter, setCandleFilter] = useState( + () => loadTradeNotificationCandleFilter(), + ); const [listLayout, setListLayout] = useState( () => loadTradeNotificationListLayout(), ); @@ -246,9 +254,17 @@ export const TradeNotificationListPage: React.FC = ({ else setFillSell(req); }, [selectedMarket]); - const filtered = filter === 'unread' - ? allNotifications.filter(n => !n.isRead) - : allNotifications; + const filtered = useMemo(() => { + let items = filter === 'unread' + ? allNotifications.filter(n => !n.isRead) + : allNotifications; + if (candleFilter) { + items = items.filter( + n => normalizeStartCandleType(n.candleType) === candleFilter, + ); + } + return items; + }, [allNotifications, filter, candleFilter]); const sorted = useMemo( () => sortNotifications(filtered, listSort), @@ -260,6 +276,11 @@ export const TradeNotificationListPage: React.FC = ({ saveTradeNotificationListSort(sort); }, []); + const handleCandleFilterChange = useCallback((value: TradeNotificationCandleFilter) => { + setCandleFilter(value); + saveTradeNotificationCandleFilter(value); + }, []); + const handleListLayoutChange = useCallback((layout: TradeNotificationListLayout) => { setListLayout(layout); saveTradeNotificationListLayout(layout); @@ -360,23 +381,35 @@ export const TradeNotificationListPage: React.FC = ({ 이전시간순 + +
+ + +
+