aidev
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
/**
|
|
* 전역 알림 UI — 모든 화면 위에 표시 (body 포털)
|
|
*/
|
|
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import TradeSignalSnackbar from './TradeSignalSnackbar';
|
|
import TradeAlertModal from './TradeAlertModal';
|
|
import { useTradeNotification } from '../contexts/TradeNotificationContext';
|
|
import {
|
|
normalizeTradeAlertGridCols,
|
|
normalizeTradeAlertPopupLayout,
|
|
normalizeTradeAlertPopupPosition,
|
|
} from '../utils/tradeAlertPopupLayout';
|
|
import type { MenuPage } from './TopMenuBar';
|
|
|
|
interface Props {
|
|
menuPage: MenuPage;
|
|
onPage: (page: MenuPage) => void;
|
|
onGoToChart: (market: string) => void;
|
|
tradingMode?: string;
|
|
hasUpbitKeys?: boolean;
|
|
paperTradingEnabled?: boolean;
|
|
liveAutoTradeBudgetPct?: number;
|
|
paperAutoTradeBudgetPct?: number;
|
|
tradeAlertPopupPosition?: string;
|
|
tradeAlertPopupLayout?: string;
|
|
tradeAlertPopupGridCols?: number;
|
|
onOrderDone?: () => void;
|
|
}
|
|
|
|
export const AppNotificationLayer: React.FC<Props> = ({
|
|
menuPage,
|
|
onPage,
|
|
onGoToChart,
|
|
tradingMode,
|
|
hasUpbitKeys,
|
|
paperTradingEnabled,
|
|
liveAutoTradeBudgetPct,
|
|
paperAutoTradeBudgetPct,
|
|
tradeAlertPopupPosition = 'right',
|
|
tradeAlertPopupLayout = 'stack',
|
|
tradeAlertPopupGridCols = 2,
|
|
onOrderDone,
|
|
}) => {
|
|
const { detailSignal, detailCentered, closeDetail } = useTradeNotification();
|
|
const popupPosition = normalizeTradeAlertPopupPosition(tradeAlertPopupPosition);
|
|
const popupLayout = normalizeTradeAlertPopupLayout(tradeAlertPopupLayout);
|
|
const gridCols = normalizeTradeAlertGridCols(tradeAlertPopupGridCols);
|
|
|
|
const content = (
|
|
<div className="app-notification-layer" aria-hidden={false}>
|
|
<TradeSignalSnackbar
|
|
onGoToChart={market => {
|
|
onGoToChart(market);
|
|
onPage('chart');
|
|
}}
|
|
onOpenList={() => onPage('notifications')}
|
|
popupPosition={popupPosition}
|
|
popupLayout={popupLayout}
|
|
gridCols={gridCols}
|
|
/>
|
|
{detailSignal && (
|
|
<TradeAlertModal
|
|
key={`${detailSignal.market}-${detailSignal.candleTime}-${detailSignal.signalType}`}
|
|
signal={detailSignal}
|
|
centered={detailCentered}
|
|
onClose={closeDetail}
|
|
tradingMode={tradingMode}
|
|
hasUpbitKeys={hasUpbitKeys}
|
|
paperTradingEnabled={paperTradingEnabled}
|
|
liveAutoTradeBudgetPct={liveAutoTradeBudgetPct}
|
|
paperAutoTradeBudgetPct={paperAutoTradeBudgetPct}
|
|
onOrderDone={onOrderDone}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (typeof document === 'undefined') return null;
|
|
return createPortal(content, document.body);
|
|
};
|
|
|
|
export default AppNotificationLayer;
|