매매 시그널 알림 화면 수정
This commit is contained in:
Macbook
@@ -5,7 +5,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import type { Theme, TradeOrderFillRequest } from '../types';
|
||||
import type { TickerData } from '../hooks/useMarketTicker';
|
||||
import { useTradeNotification, type TradeNotificationItem } from '../contexts/TradeNotificationContext';
|
||||
import { buildSignalDetailRows, formatSignalPrice, getSignalHeadline } from '../utils/tradeSignalDisplay';
|
||||
import { loadPaperSummary, type PaperSummaryDto } from '../utils/backendApi';
|
||||
import { coerceFiniteNumber } from '../utils/safeFormat';
|
||||
import TradeOrderPanel from './TradeOrderPanel';
|
||||
@@ -14,6 +13,20 @@ import PaperSplitPanel from './paper/PaperSplitPanel';
|
||||
import { useUpbitOrderbook } from '../hooks/useUpbitOrderbook';
|
||||
import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
|
||||
import '../styles/virtualTradingDashboard.css';
|
||||
import '../styles/tradeNotificationList.css';
|
||||
import TradeNotificationListRow from './tradeNotification/TradeNotificationListRow';
|
||||
import TradeNotificationGridLayoutPicker from './tradeNotification/TradeNotificationGridLayoutPicker';
|
||||
import {
|
||||
loadTradeNotificationGridPreset,
|
||||
loadTradeNotificationListLayout,
|
||||
saveTradeNotificationGridPreset,
|
||||
saveTradeNotificationListLayout,
|
||||
type TradeNotificationListLayout,
|
||||
} from '../utils/tradeNotificationListLayout';
|
||||
import {
|
||||
getTradeNotificationGridPreset,
|
||||
type TradeNotificationGridPresetId,
|
||||
} from '../utils/tradeNotificationGridPresets';
|
||||
|
||||
type RightTab = 'trade' | 'orderbook';
|
||||
|
||||
@@ -69,6 +82,12 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
} = useTradeNotification();
|
||||
|
||||
const [filter, setFilter] = useState<'all' | 'unread'>('all');
|
||||
const [listLayout, setListLayout] = useState<TradeNotificationListLayout>(
|
||||
() => loadTradeNotificationListLayout(),
|
||||
);
|
||||
const [gridPreset, setGridPreset] = useState<TradeNotificationGridPresetId>(
|
||||
() => loadTradeNotificationGridPreset(),
|
||||
);
|
||||
const [selectedMarket, setSelectedMarket] = useState(defaultMarket);
|
||||
const [selectedNotifyId, setSelectedNotifyId] = useState<string | null>(null);
|
||||
const [rightTab, setRightTab] = useState<RightTab>('trade');
|
||||
@@ -172,15 +191,57 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
? allNotifications.filter(n => !n.isRead)
|
||||
: allNotifications;
|
||||
|
||||
const handleListLayoutChange = useCallback((layout: TradeNotificationListLayout) => {
|
||||
setListLayout(layout);
|
||||
saveTradeNotificationListLayout(layout);
|
||||
}, []);
|
||||
|
||||
const handleGridPresetChange = useCallback((preset: TradeNotificationGridPresetId) => {
|
||||
setGridPreset(preset);
|
||||
saveTradeNotificationGridPreset(preset);
|
||||
}, []);
|
||||
|
||||
const isListView = listLayout === 'list';
|
||||
const gridCols = getTradeNotificationGridPreset(gridPreset).cols;
|
||||
|
||||
return (
|
||||
<div className={`tnl-page tnl-page--with-right bps-page--vtd app ${theme}`}>
|
||||
<div className="tnl-body">
|
||||
<div className="tnl-main">
|
||||
<div className="tnl-main" style={{ containerType: 'inline-size', containerName: 'tnl-main' }}>
|
||||
<div className="tnl-header">
|
||||
<h1 className="tnl-title">매매 시그널 알림</h1>
|
||||
<p className="tnl-sub">
|
||||
알림을 선택하면 우측 매매 패널에 종목·가격이 자동 입력됩니다.
|
||||
</p>
|
||||
<div className="tnl-header-row">
|
||||
<div className="tnl-header-intro">
|
||||
<h1 className="tnl-title">매매 시그널 알림</h1>
|
||||
<p className="tnl-sub">
|
||||
{isListView
|
||||
? '각 알림 왼쪽은 요약, 오른쪽은 캔들·지표 차트입니다. 차트 영역은 가로 스크롤로 확인할 수 있습니다.'
|
||||
: `목록형과 동일한 알림 상세 카드를 ${getTradeNotificationGridPreset(gridPreset).label} 그리드로 표시합니다. 우측 아이콘으로 배치를 변경할 수 있습니다.`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="tnl-header-actions">
|
||||
<div className="tnl-layout-toggle vtd-view-toggle" role="group" aria-label="목록 표시 방식">
|
||||
<button
|
||||
type="button"
|
||||
className={`vtd-view-toggle-btn${isListView ? ' vtd-view-toggle-btn--on' : ''}`}
|
||||
onClick={() => handleListLayoutChange('list')}
|
||||
>
|
||||
목록형
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`vtd-view-toggle-btn${!isListView ? ' vtd-view-toggle-btn--on' : ''}`}
|
||||
onClick={() => handleListLayoutChange('grid')}
|
||||
>
|
||||
그리드형
|
||||
</button>
|
||||
</div>
|
||||
<TradeNotificationGridLayoutPicker
|
||||
value={gridPreset}
|
||||
onChange={handleGridPresetChange}
|
||||
disabled={isListView}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tnl-toolbar">
|
||||
<span className="tnl-chip tnl-chip--warn">미확인 {unreadCount}건</span>
|
||||
<div className="tnl-filter">
|
||||
@@ -231,76 +292,38 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tnl-list-wrap">
|
||||
<div className={['tnl-list-wrap', !isListView ? 'tnl-list-wrap--grid' : ''].filter(Boolean).join(' ')}>
|
||||
{filtered.length === 0 ? (
|
||||
<div className="tnl-empty">표시할 알림이 없습니다.</div>
|
||||
) : (
|
||||
<ul className="tnl-list">
|
||||
{filtered.map(item => {
|
||||
const isBuy = item.signalType === 'BUY';
|
||||
const detailRows = buildSignalDetailRows(item);
|
||||
const isSelected = selectedNotifyId === item.id;
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
className={`tnl-row ${!item.isRead ? 'tnl-row--unread' : ''}${isSelected ? ' tnl-row--selected' : ''}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="tnl-row-main"
|
||||
onClick={() => handleNotificationSelect(item)}
|
||||
>
|
||||
<span className={`tnl-signal ${isBuy ? 'tnl-signal--buy' : 'tnl-signal--sell'}`}>
|
||||
{item.signalType}
|
||||
</span>
|
||||
<span className="tnl-row-body">
|
||||
<span className="tnl-row-title">{getSignalHeadline(item)}</span>
|
||||
<span className="tnl-row-price">{formatSignalPrice(item.price)}</span>
|
||||
<span className="tnl-row-detail-grid">
|
||||
{detailRows.map(row => (
|
||||
<span key={row.label} className="tnl-row-detail-item">
|
||||
<span className="tnl-row-detail-lbl">{row.label}</span>
|
||||
<span className="tnl-row-detail-val">{row.value}</span>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</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"
|
||||
title="상세 보기"
|
||||
onClick={() => {
|
||||
if (!item.isRead) markAsRead(item.id);
|
||||
openDetail(item, { centered: true });
|
||||
}}
|
||||
>
|
||||
상세
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="tnl-row-chart"
|
||||
title="차트로 이동"
|
||||
onClick={() => {
|
||||
markAsRead(item.id);
|
||||
onGoToChart(item.market);
|
||||
}}
|
||||
>
|
||||
차트
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<ul
|
||||
className={[
|
||||
'tnl-list',
|
||||
isListView ? 'tnl-list--gallery' : 'tnl-list--grid',
|
||||
!isListView ? `tnl-grid--cols-${gridCols}` : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
style={!isListView ? { gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))` } : undefined}
|
||||
>
|
||||
{filtered.map(item => (
|
||||
<TradeNotificationListRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
theme={theme}
|
||||
layoutMode={listLayout}
|
||||
isSelected={selectedNotifyId === item.id}
|
||||
chartsEnabled={isListView}
|
||||
onSelect={() => handleNotificationSelect(item)}
|
||||
onDelete={e => void handleDeleteOne(item, e)}
|
||||
onDetail={() => {
|
||||
if (!item.isRead) markAsRead(item.id);
|
||||
openDetail(item, { centered: true });
|
||||
}}
|
||||
onGoToChart={() => {
|
||||
markAsRead(item.id);
|
||||
onGoToChart(item.market);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user