알림목록 수정
This commit is contained in:
Macbook
@@ -1,11 +1,12 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useDraggablePanel } from '../hooks/useDraggablePanel';
|
||||
import { placePaperOrder, placeLiveOrder, loadLiveSummary } from '../utils/backendApi';
|
||||
import { placePaperOrder, placeLiveOrder, loadLiveSummary, loadStrategy, type StrategyDto } from '../utils/backendApi';
|
||||
import { formatSignalTime } from '../utils/tradeSignalDisplay';
|
||||
import { formatUpbitKrwPrice } from '../utils/safeFormat';
|
||||
import { TRADE_BUY_COLOR, TRADE_SELL_COLOR } from '../utils/tradeSignalColors';
|
||||
import { useTradeAlertTimeFormat } from '../utils/tradeAlertTimeFormat';
|
||||
import StrategyConditionView from './tradeNotification/StrategyConditionView';
|
||||
|
||||
export interface TradeSignalInfo {
|
||||
market: string;
|
||||
@@ -79,6 +80,19 @@ export const TradeAlertModal: React.FC<Props> = ({
|
||||
const [activePct, setActivePct] = useState<string | null>(null);
|
||||
const [ordering, setOrdering] = useState(false);
|
||||
|
||||
/* ── 전략 조건 — 마운트 즉시 로딩 ──────────────────────────── */
|
||||
const [strategy, setStrategy] = useState<StrategyDto | null>(null);
|
||||
const [stratLoading, setStratLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!signal.strategyId) return;
|
||||
setStratLoading(true);
|
||||
loadStrategy(signal.strategyId)
|
||||
.then(s => setStrategy(s))
|
||||
.catch(() => setStrategy(null))
|
||||
.finally(() => setStratLoading(false));
|
||||
}, [signal.strategyId]);
|
||||
|
||||
const {
|
||||
panelRef,
|
||||
dragging,
|
||||
@@ -187,6 +201,9 @@ export const TradeAlertModal: React.FC<Props> = ({
|
||||
<button className="tam-close" onClick={onClose} title="닫기">✕</button>
|
||||
</div>
|
||||
|
||||
{/* ── 스크롤 가능 본문 영역 ─────────────────────── */}
|
||||
<div className="tam-modal-body">
|
||||
|
||||
<div className="tam-price-section">
|
||||
<div className="tam-price-row">
|
||||
<span className="tam-market-name">{signal.market}</span>
|
||||
@@ -222,6 +239,27 @@ export const TradeAlertModal: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 전략 조건 섹션 ────────────────────────────── */}
|
||||
{signal.strategyId && (
|
||||
<div className="tam-condition-section">
|
||||
<div className="tam-condition-section-header">
|
||||
<span className="tam-condition-section-title">전략 조건</span>
|
||||
{stratLoading && <span className="tam-condition-section-loading">로딩 중…</span>}
|
||||
</div>
|
||||
<div className="tam-condition-panel">
|
||||
{stratLoading && (
|
||||
<div className="tam-condition-loading">전략 조건 로딩 중…</div>
|
||||
)}
|
||||
{!stratLoading && !strategy && (
|
||||
<div className="tam-condition-empty">전략 조건을 불러올 수 없습니다.</div>
|
||||
)}
|
||||
{!stratLoading && strategy && (
|
||||
<StrategyConditionView strategy={strategy} signalType={signal.signalType} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="tam-order-section">
|
||||
<div className="tam-field-row">
|
||||
<span className="tam-field-label">자산 비율</span>
|
||||
@@ -287,6 +325,8 @@ export const TradeAlertModal: React.FC<Props> = ({
|
||||
{!useLive && !usePaper && '※ 설정에서 모의투자 또는 API 키를 활성화하세요'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>{/* /.tam-modal-body */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -23,6 +23,7 @@ import '../styles/builderPageShell.css';
|
||||
import '../styles/tradeNotificationList.css';
|
||||
import TradeNotificationListRow from './tradeNotification/TradeNotificationListRow';
|
||||
import TradeNotificationGridLayoutPicker from './tradeNotification/TradeNotificationGridLayoutPicker';
|
||||
import FullscreenChartModal from './tradeNotification/FullscreenChartModal';
|
||||
import {
|
||||
loadTradeNotificationGridPreset,
|
||||
loadTradeNotificationListLayout,
|
||||
@@ -110,6 +111,9 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
refreshHistory,
|
||||
} = useTradeNotification();
|
||||
|
||||
const [query, setQuery] = useState('');
|
||||
const normalizedQuery = useMemo(() => query.trim().toLowerCase(), [query]);
|
||||
|
||||
const [filter, setFilter] = useState<TradeNotificationReadFilter>('all');
|
||||
const [listSort, setListSort] = useState<TradeNotificationListSort>(
|
||||
() => loadTradeNotificationListSort(),
|
||||
@@ -132,6 +136,7 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
const orderAnchorRef = useRef<HTMLDivElement>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [rightOpen, setRightOpen] = useState(() => readStoredBool(TNL_RIGHT_OPEN_KEY, true));
|
||||
const [fullscreenItem, setFullscreenItem] = useState<TradeNotificationItem | null>(null);
|
||||
const { settings: appSettings } = useAppSettings();
|
||||
const chartLiveReceiveHighlight = appSettings.chartLiveReceiveHighlight ?? true;
|
||||
|
||||
@@ -252,8 +257,22 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
n => normalizeStartCandleType(n.candleType) === candleFilter,
|
||||
);
|
||||
}
|
||||
if (normalizedQuery) {
|
||||
items = items.filter(n => {
|
||||
const mkt = n.market.toLowerCase();
|
||||
const sym = n.market.includes('-') ? n.market.split('-')[1].toLowerCase() : mkt;
|
||||
const strat = (n.strategyName ?? '').toLowerCase();
|
||||
const sigKo = n.signalType === 'BUY' ? '매수' : '매도';
|
||||
return (
|
||||
mkt.includes(normalizedQuery) ||
|
||||
sym.includes(normalizedQuery) ||
|
||||
strat.includes(normalizedQuery) ||
|
||||
sigKo.includes(normalizedQuery)
|
||||
);
|
||||
});
|
||||
}
|
||||
return items;
|
||||
}, [allNotifications, filter, candleFilter]);
|
||||
}, [allNotifications, filter, candleFilter, normalizedQuery]);
|
||||
|
||||
const sorted = useMemo(
|
||||
() => sortTradeNotifications(filtered, listSort),
|
||||
@@ -305,6 +324,14 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
const gridCols = getTradeNotificationGridPreset(gridPreset).cols;
|
||||
|
||||
return (
|
||||
<>
|
||||
{fullscreenItem && (
|
||||
<FullscreenChartModal
|
||||
item={fullscreenItem}
|
||||
theme={theme}
|
||||
onClose={() => setFullscreenItem(null)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={[
|
||||
'tnl-page',
|
||||
@@ -322,6 +349,32 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
<div className="tnl-header">
|
||||
<h1 className="tnl-title">매매 시그널 알림</h1>
|
||||
<div className="tnl-toolbar">
|
||||
{/* 검색란 */}
|
||||
<div className={`tnl-search-box${query ? ' tnl-search-box--active' : ''}`}>
|
||||
<svg className="tnl-search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
className="tnl-search-input"
|
||||
placeholder="종목·전략 검색"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
aria-label="알림 목록 검색"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
type="button"
|
||||
className="tnl-search-clear"
|
||||
onClick={() => setQuery('')}
|
||||
aria-label="검색어 초기화"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="tnl-chip tnl-chip--warn">미확인 {unreadCount}건</span>
|
||||
{selectedCount > 0 && (
|
||||
<span className="tnl-chip tnl-chip--selected">선택 {selectedCount}건</span>
|
||||
@@ -425,7 +478,9 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
|
||||
<div className={['tnl-list-wrap', !isListView ? 'tnl-list-wrap--grid' : ''].filter(Boolean).join(' ')}>
|
||||
{sorted.length === 0 ? (
|
||||
<div className="tnl-empty">표시할 알림이 없습니다.</div>
|
||||
<div className="tnl-empty">
|
||||
{normalizedQuery ? `"${query}" 에 해당하는 알림이 없습니다.` : '표시할 알림이 없습니다.'}
|
||||
</div>
|
||||
) : (
|
||||
<ul
|
||||
className={[
|
||||
@@ -452,7 +507,7 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
}}
|
||||
onGoToChart={() => {
|
||||
markAsRead(item.id);
|
||||
onGoToChart(item.market);
|
||||
setFullscreenItem(item);
|
||||
}}
|
||||
tickers={tickers}
|
||||
/>
|
||||
@@ -540,6 +595,7 @@ export const TradeNotificationListPage: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* 매매 시그널 알림 — 차트 전체화면 모달
|
||||
* 알림 아이템에 이미 표시된 캔들+보조지표 차트를 전체 화면으로 확대 표시
|
||||
*/
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import type { Theme } from '../../types';
|
||||
import type { TradeNotificationItem } from '../../contexts/TradeNotificationContext';
|
||||
import type { StrategyDto } from '../../utils/backendApi';
|
||||
import { loadStrategy } from '../../utils/backendApi';
|
||||
import { buildStrategyChartIndicators, candleTypeToTimeframe } from '../../utils/strategyToChartIndicators';
|
||||
import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
|
||||
import { formatStrategyCandleLabel } from '../../utils/strategyStartNodes';
|
||||
import TradeSignalMiniChart from './TradeSignalMiniChart';
|
||||
import { TRADE_BUY_COLOR, TRADE_SELL_COLOR } from '../../utils/tradeSignalColors';
|
||||
import { formatSignalTime } from '../../utils/tradeSignalDisplay';
|
||||
import { formatUpbitKrwPrice } from '../../utils/safeFormat';
|
||||
|
||||
const MAX_INDICATOR_CARDS = 8;
|
||||
|
||||
interface Props {
|
||||
item: TradeNotificationItem;
|
||||
theme: Theme;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const FullscreenChartModal: React.FC<Props> = ({ item, theme, onClose }) => {
|
||||
const { getParams, getVisualConfig } = useIndicatorSettings();
|
||||
const [strategy, setStrategy] = useState<StrategyDto | null>(null);
|
||||
|
||||
/* 전략 로딩 */
|
||||
useEffect(() => {
|
||||
if (!item.strategyId) return;
|
||||
loadStrategy(item.strategyId)
|
||||
.then(s => setStrategy(s))
|
||||
.catch(() => {});
|
||||
}, [item.strategyId]);
|
||||
|
||||
/* 보조지표 config */
|
||||
const allIndicatorConfigs = useMemo(() => {
|
||||
if (!strategy) return [];
|
||||
const all = buildStrategyChartIndicators(strategy, getParams, getVisualConfig);
|
||||
return all.slice(0, MAX_INDICATOR_CARDS);
|
||||
}, [strategy, getParams, getVisualConfig]);
|
||||
|
||||
const timeframe = candleTypeToTimeframe(item.candleType ?? '1m');
|
||||
const isBuy = item.signalType === 'BUY';
|
||||
const accentColor = isBuy ? TRADE_BUY_COLOR : TRADE_SELL_COLOR;
|
||||
const sym = item.market.replace(/^KRW-/, '');
|
||||
const tfLabel = formatStrategyCandleLabel(item.candleType ?? '1m');
|
||||
|
||||
/* ESC 키로 닫기 */
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [handleKeyDown]);
|
||||
|
||||
/* body 스크롤 막기 */
|
||||
useEffect(() => {
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = prev; };
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="tnl-chart-fs-overlay"
|
||||
onClick={onClose}
|
||||
role="dialog"
|
||||
aria-modal
|
||||
aria-label="차트 전체화면"
|
||||
>
|
||||
<div
|
||||
className="tnl-chart-fs-inner"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="tnl-chart-fs-header">
|
||||
<div className="tnl-chart-fs-title">
|
||||
<span
|
||||
className={`tnl-chart-fs-signal-badge${isBuy ? ' tnl-chart-fs-signal-badge--buy' : ' tnl-chart-fs-signal-badge--sell'}`}
|
||||
style={{ background: accentColor }}
|
||||
>
|
||||
{item.signalType}
|
||||
</span>
|
||||
<span className="tnl-chart-fs-market">{sym}</span>
|
||||
<span className="tnl-chart-fs-tf">{tfLabel}</span>
|
||||
<span className="tnl-chart-fs-price" style={{ color: accentColor }}>
|
||||
₩{formatUpbitKrwPrice(item.price)}
|
||||
</span>
|
||||
<span className="tnl-chart-fs-time">
|
||||
{formatSignalTime(item.candleTime)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="tnl-chart-fs-actions">
|
||||
{item.strategyName && (
|
||||
<span className="tnl-chart-fs-strategy">{item.strategyName}</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="tnl-chart-fs-close"
|
||||
onClick={onClose}
|
||||
aria-label="닫기 (ESC)"
|
||||
title="닫기 (ESC)"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 차트 바디 */}
|
||||
<div className="tnl-chart-fs-body">
|
||||
<TradeSignalMiniChart
|
||||
market={item.market}
|
||||
timeframe={timeframe}
|
||||
theme={theme}
|
||||
indicators={allIndicatorConfigs}
|
||||
enabled
|
||||
fillHeight
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FullscreenChartModal;
|
||||
@@ -0,0 +1,229 @@
|
||||
/**
|
||||
* 전략 조건 읽기전용 뷰 — TradeAlertModal 내 "전략 조건" 탭에 표시
|
||||
* LogicNode 트리를 전략 편집기와 유사한 카드 형태로 렌더링한다.
|
||||
*/
|
||||
import React from 'react';
|
||||
import type { LogicNode } from '../../utils/strategyTypes';
|
||||
import { CONDITION_LABEL } from '../../utils/strategyTypes';
|
||||
import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
|
||||
import { getIndicatorPaletteCategory } from '../strategyEditor/paletteCategories';
|
||||
import { nodeToText } from '../../utils/strategyEditorShared';
|
||||
import { formatStrategyCandleLabel } from '../../utils/strategyStartNodes';
|
||||
import type { StrategyDto } from '../../utils/backendApi';
|
||||
|
||||
/* ── nodeToText 출력에서 조건대상1 / 조건대상2 분리 ─────────────── */
|
||||
/** nodeToText 가 COND_OPTIONS 라벨로 출력하는 문자열 목록 (긴 것 우선으로 체크) */
|
||||
const COND_SEARCH = [
|
||||
'구름 상향 돌파', '구름 하향 돌파',
|
||||
'선행스팬1 상향돌파 선행스팬2', '선행스팬1 하향돌파 선행스팬2',
|
||||
'선행스팬1 > 선행스팬2', '선행스팬1 < 선행스팬2',
|
||||
'후행스팬 > 가격', '후행스팬 < 가격',
|
||||
'상향 돌파', '하향 돌파',
|
||||
'상승 기울기', '하락 기울기',
|
||||
'이상 (>=)', '이하 (<=)',
|
||||
'초과 (>)', '미만 (<)',
|
||||
'같음 (==)', '다름 (!=)',
|
||||
'차이 > 값', '차이 < 값',
|
||||
'N일 연속 유지',
|
||||
'구름 위', '구름 아래', '구름 안',
|
||||
];
|
||||
|
||||
function splitDescByCondType(descText: string): { left: string; right: string; mid: string } {
|
||||
for (const cond of COND_SEARCH) {
|
||||
const idx = descText.indexOf(cond);
|
||||
if (idx > 0) {
|
||||
return {
|
||||
left: descText.slice(0, idx).trim(),
|
||||
mid: cond,
|
||||
right: descText.slice(idx + cond.length).trim(),
|
||||
};
|
||||
}
|
||||
}
|
||||
return { left: descText, mid: '', right: '' };
|
||||
}
|
||||
|
||||
/* ── 개별 조건 카드 ────────────────────────────────────────────── */
|
||||
const ConditionCard: React.FC<{ node: LogicNode }> = ({ node }) => {
|
||||
const cond = node.condition;
|
||||
if (!cond) return null;
|
||||
|
||||
const indType = cond.indicatorType;
|
||||
const indLabel = getStrategyIndicatorDisplayName(indType);
|
||||
const cat = getIndicatorPaletteCategory(indType);
|
||||
const fullText = nodeToText(node);
|
||||
|
||||
const prefix = `${indLabel} - `;
|
||||
const descText = fullText.startsWith(prefix) ? fullText.slice(prefix.length) : fullText;
|
||||
const { left, mid: condStr, right } = splitDescByCondType(descText);
|
||||
|
||||
const candleRange = cond.candleRange != null && cond.candleRange > 0
|
||||
? `${cond.candleRange}캔들 전`
|
||||
: '현재 캔들';
|
||||
|
||||
const condLabelDisplay = CONDITION_LABEL[cond.conditionType] ?? (condStr || cond.conditionType);
|
||||
|
||||
return (
|
||||
<div className="scv-cond-card">
|
||||
<div className="scv-cond-header">
|
||||
<span className={`se-ind-chip se-ind-chip--${cat} scv-ind-chip`}>{indType}</span>
|
||||
<span className="scv-cond-title">{indLabel} - {descText}</span>
|
||||
</div>
|
||||
<div className="scv-cond-fields">
|
||||
<div className="scv-cond-field">
|
||||
<span className="scv-cond-field-lbl">캔들범위</span>
|
||||
<span className="scv-cond-field-val">{candleRange}</span>
|
||||
</div>
|
||||
{left && (
|
||||
<div className="scv-cond-field">
|
||||
<span className="scv-cond-field-lbl">조건대상1</span>
|
||||
<span className="scv-cond-field-val">{left}</span>
|
||||
</div>
|
||||
)}
|
||||
{right && (
|
||||
<div className="scv-cond-field">
|
||||
<span className="scv-cond-field-lbl">조건대상2</span>
|
||||
<span className="scv-cond-field-val">{right}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="scv-cond-field">
|
||||
<span className="scv-cond-field-lbl">조건</span>
|
||||
<span className="scv-cond-field-val">{condLabelDisplay}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/* ── 노드 트리 재귀 렌더러 ─────────────────────────────────────── */
|
||||
function renderNode(node: LogicNode): React.ReactNode {
|
||||
if (node.type === 'CONDITION') {
|
||||
return <ConditionCard key={node.id} node={node} />;
|
||||
}
|
||||
|
||||
if (node.type === 'AND' || node.type === 'OR') {
|
||||
const op = node.type as 'AND' | 'OR';
|
||||
const opKo = op === 'AND' ? 'AND (그리고)' : 'OR (또는)';
|
||||
const children = node.children ?? [];
|
||||
return (
|
||||
<div key={node.id} className={`scv-group scv-group--${op.toLowerCase()}`}>
|
||||
<div className="scv-group-header">
|
||||
<span className={`scv-group-badge scv-group-badge--${op.toLowerCase()}`}>{op}</span>
|
||||
<span className="scv-group-label">{opKo}</span>
|
||||
<div className="scv-group-op-toggle" aria-hidden>
|
||||
<span className={op === 'AND' ? 'scv-op-active' : 'scv-op-dim'}>AND</span>
|
||||
<span className={op === 'OR' ? 'scv-op-active' : 'scv-op-dim'}>OR</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="scv-group-body">
|
||||
{children.map(child => renderNode(child))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (node.type === 'NOT') {
|
||||
const inner = node.children?.[0];
|
||||
return (
|
||||
<div key={node.id} className="scv-group scv-group--not">
|
||||
<div className="scv-group-header">
|
||||
<span className="scv-group-badge scv-group-badge--not">NOT</span>
|
||||
<span className="scv-group-label">NOT (부정)</span>
|
||||
</div>
|
||||
<div className="scv-group-body">
|
||||
{inner ? renderNode(inner) : <span className="scv-empty">빈 NOT</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (node.type === 'TIMEFRAME') {
|
||||
const inner = node.children?.[0];
|
||||
const types = node.candleTypes?.length ? node.candleTypes : [node.candleType ?? '1m'];
|
||||
const tfLabel = types.map(formatStrategyCandleLabel).join(' · ');
|
||||
return (
|
||||
<div key={node.id} className="scv-timeframe">
|
||||
<div className="scv-timeframe-header">
|
||||
<span className="scv-timeframe-dot">●</span>
|
||||
<span>START</span>
|
||||
<span className="scv-timeframe-badge">{tfLabel}</span>
|
||||
</div>
|
||||
{inner
|
||||
? <div className="scv-timeframe-body">{renderNode(inner)}</div>
|
||||
: <span className="scv-empty">빈 조건</span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/* ── 매수/매도 조건 트리 ─────────────────────────────────────────── */
|
||||
const ConditionTree: React.FC<{ root: LogicNode | null | undefined }> = ({ root }) => {
|
||||
if (!root) return <p className="scv-empty">조건이 없습니다.</p>;
|
||||
return <div className="scv-tree">{renderNode(root)}</div>;
|
||||
};
|
||||
|
||||
/* ── 메인 컴포넌트 ───────────────────────────────────────────────── */
|
||||
interface Props {
|
||||
strategy: StrategyDto;
|
||||
/** 알림의 신호 타입으로 초기 탭 결정 */
|
||||
signalType?: 'BUY' | 'SELL';
|
||||
}
|
||||
|
||||
const StrategyConditionView: React.FC<Props> = ({ strategy, signalType }) => {
|
||||
const hasBuy = Boolean(strategy.buyCondition);
|
||||
const hasSell = Boolean(strategy.sellCondition);
|
||||
const showBoth = hasBuy && hasSell;
|
||||
|
||||
const [tab, setTab] = React.useState<'buy' | 'sell'>(
|
||||
signalType === 'SELL' && hasSell ? 'sell' : 'buy',
|
||||
);
|
||||
|
||||
const buyRoot = strategy.buyCondition as LogicNode | null | undefined;
|
||||
const sellRoot = strategy.sellCondition as LogicNode | null | undefined;
|
||||
|
||||
return (
|
||||
<div className="scv-root">
|
||||
{showBoth && (
|
||||
<div className="scv-signal-tabs">
|
||||
<button
|
||||
type="button"
|
||||
className={`scv-signal-tab${tab === 'buy' ? ' scv-signal-tab--active scv-signal-tab--buy' : ''}`}
|
||||
onClick={() => setTab('buy')}
|
||||
>
|
||||
매수 조건 (Entry)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`scv-signal-tab${tab === 'sell' ? ' scv-signal-tab--active scv-signal-tab--sell' : ''}`}
|
||||
onClick={() => setTab('sell')}
|
||||
>
|
||||
매도 조건 (Exit)
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!showBoth && hasBuy && (
|
||||
<div className="scv-signal-label scv-signal-label--buy">매수 조건 (Entry)</div>
|
||||
)}
|
||||
{!showBoth && hasSell && (
|
||||
<div className="scv-signal-label scv-signal-label--sell">매도 조건 (Exit)</div>
|
||||
)}
|
||||
|
||||
<div className="scv-body">
|
||||
{showBoth ? (
|
||||
tab === 'buy'
|
||||
? <ConditionTree root={buyRoot} />
|
||||
: <ConditionTree root={sellRoot} />
|
||||
) : hasBuy ? (
|
||||
<ConditionTree root={buyRoot} />
|
||||
) : (
|
||||
<ConditionTree root={sellRoot} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StrategyConditionView;
|
||||
@@ -142,6 +142,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
}));
|
||||
}, [strategy, getParams, getVisualConfig, isListLayout]);
|
||||
|
||||
/** 통합 차트용: 전략의 모든 보조지표를 하나의 차트에 넘긴다 */
|
||||
const allIndicatorConfigs = useMemo(
|
||||
() => indicatorCards.flatMap(c => c.config),
|
||||
[indicatorCards],
|
||||
);
|
||||
|
||||
const chartExpanded = isListLayout && expandedChartKey != null;
|
||||
const chartActive = isListLayout && chartsEnabled && panelActive;
|
||||
const signalCardEnabled = isListLayout && panelActive && !chartExpanded;
|
||||
@@ -218,6 +224,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 전략명 태그 — 헤더 바로 아래에 표시 */}
|
||||
<div className="tnl-summary-strategy-tag" title={strategyLabel} aria-label={`전략: ${strategyLabel}`}>
|
||||
<span className="tnl-summary-strategy-tag-ic" aria-hidden>⚡</span>
|
||||
<span className="tnl-summary-strategy-tag-name">{strategyLabel}</span>
|
||||
</div>
|
||||
|
||||
<div className="tnl-summary-quote" aria-label="시그널 가격">
|
||||
<div className="tnl-summary-quote-left">
|
||||
<span
|
||||
@@ -342,43 +354,22 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
</TradeNotificationHScrollPane>
|
||||
|
||||
{chartExpanded ? (
|
||||
<TradeNotificationHScrollPane
|
||||
className="tnl-row-gallery-indicators tnl-row-gallery-indicators--expanded"
|
||||
label="차트 전체보기"
|
||||
>
|
||||
<div className="tnl-charts-expanded-inner">
|
||||
{expandedChartKey === 'candle' && (
|
||||
/* 전체보기 — 통합 차트 (캔들 + 보조지표) 를 넓게 표시 */
|
||||
<div className="tnl-row-gallery-combined-chart tnl-row-gallery-combined-chart--expanded">
|
||||
<TradeSignalChartCard
|
||||
label="캔들"
|
||||
meta={candleKo}
|
||||
market={item.market}
|
||||
timeframe={chartTf}
|
||||
theme={theme}
|
||||
indicators={[]}
|
||||
indicators={allIndicatorConfigs}
|
||||
enabled={chartActive}
|
||||
expanded
|
||||
onExpand={() => setExpandedChartKey('candle')}
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
)}
|
||||
{expandedIndicator && (
|
||||
<TradeSignalChartCard
|
||||
label={expandedIndicator.label}
|
||||
meta={candleKo}
|
||||
market={item.market}
|
||||
timeframe={chartTf}
|
||||
theme={theme}
|
||||
indicators={expandedIndicator.config}
|
||||
enabled={chartActive}
|
||||
expanded
|
||||
onExpand={() => setExpandedChartKey(expandedIndicator.id)}
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</TradeNotificationHScrollPane>
|
||||
) : (
|
||||
<>
|
||||
<TradeNotificationHScrollPane
|
||||
@@ -402,55 +393,30 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
/>
|
||||
</TradeNotificationHScrollPane>
|
||||
|
||||
<div className="tnl-row-gallery-candle" aria-label="캔들 차트">
|
||||
{/* 통합 차트 — 캔들(상단) + 전략 보조지표(하단)
|
||||
key에 indicator ids를 포함하여 전략 로드 후 차트를 완전히 재마운트 */}
|
||||
<div
|
||||
className="tnl-row-gallery-combined-chart"
|
||||
aria-label="캔들 및 보조지표 차트"
|
||||
>
|
||||
<TradeSignalChartCard
|
||||
key={`combined-${item.market}-${chartTf}-${allIndicatorConfigs.map(c => c.id).join(',')}`}
|
||||
label="캔들"
|
||||
meta={candleKo}
|
||||
market={item.market}
|
||||
timeframe={chartTf}
|
||||
theme={theme}
|
||||
indicators={[]}
|
||||
indicators={allIndicatorConfigs}
|
||||
enabled={chartActive}
|
||||
expanded={false}
|
||||
onExpand={() => setExpandedChartKey('candle')}
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TradeNotificationHScrollPane
|
||||
className={[
|
||||
'tnl-row-gallery-indicators',
|
||||
indicatorScrollNeeded ? 'tnl-row-gallery-indicators--scroll' : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
label="보조지표"
|
||||
clipPeekLabels={indicatorScrollNeeded}
|
||||
>
|
||||
<div className="tnl-charts-track tnl-charts-track--indicators-only">
|
||||
{indicatorCards.map(card => (
|
||||
<TradeSignalChartCard
|
||||
key={card.id}
|
||||
label={card.label}
|
||||
meta={candleKo}
|
||||
market={item.market}
|
||||
timeframe={chartTf}
|
||||
theme={theme}
|
||||
indicators={card.config}
|
||||
enabled={chartActive}
|
||||
expanded={false}
|
||||
onExpand={() => setExpandedChartKey(card.id)}
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
))}
|
||||
|
||||
{indicatorPlaceholder && (
|
||||
<section className="tnl-chart-card tnl-chart-card--placeholder">
|
||||
<p className="tnl-muted">전략 지표 로딩 중…</p>
|
||||
</section>
|
||||
<div className="tnl-combined-chart-placeholder">전략 지표 로딩 중…</div>
|
||||
)}
|
||||
</div>
|
||||
</TradeNotificationHScrollPane>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,13 @@
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* tam-overlay 모달은 전략 조건 표시를 위해 더 넓게 */
|
||||
.tam-overlay > .tam-modal {
|
||||
width: 580px;
|
||||
min-width: 480px;
|
||||
max-height: 88vh;
|
||||
}
|
||||
|
||||
/* ── 셸 (모달 컨테이너) ── */
|
||||
.app-popup-shell,
|
||||
.tam-modal,
|
||||
@@ -352,3 +359,309 @@ html.theme-light .chart-ctx-menu,
|
||||
border-color: var(--border);
|
||||
box-shadow: var(--popup-shadow);
|
||||
}
|
||||
|
||||
/* ── TradeAlertModal 스크롤 본문 ─────────────────────────── */
|
||||
.tam-modal-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: color-mix(in srgb, var(--text3) 35%, transparent) transparent;
|
||||
}
|
||||
|
||||
/* ── 전략 조건 섹션 (인라인 표시) ─────────────────────────── */
|
||||
.tam-condition-section {
|
||||
border-top: 1px solid var(--se-border, var(--border));
|
||||
border-bottom: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg2) 60%, transparent);
|
||||
}
|
||||
|
||||
.tam-condition-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px 6px;
|
||||
}
|
||||
|
||||
.tam-condition-section-title {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
}
|
||||
|
||||
.tam-condition-section-loading {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
}
|
||||
|
||||
/* ── 전략 조건 패널 ─────────────────────────────────────────── */
|
||||
.tam-condition-panel {
|
||||
padding: 0 8px 10px;
|
||||
}
|
||||
|
||||
.tam-condition-loading,
|
||||
.tam-condition-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
}
|
||||
|
||||
/* ── StrategyConditionView 공통 ─────────────────────────────── */
|
||||
.scv-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.scv-signal-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.scv-signal-tab {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--text2);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.scv-signal-tab--active.scv-signal-tab--buy {
|
||||
background: color-mix(in srgb, var(--up, #ef5350) 15%, transparent);
|
||||
border-color: var(--up, #ef5350);
|
||||
color: var(--up, #ef5350);
|
||||
}
|
||||
|
||||
.scv-signal-tab--active.scv-signal-tab--sell {
|
||||
background: color-mix(in srgb, var(--down, #4dabf7) 15%, transparent);
|
||||
border-color: var(--down, #4dabf7);
|
||||
color: var(--down, #4dabf7);
|
||||
}
|
||||
|
||||
.scv-signal-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.scv-signal-label--buy {
|
||||
color: var(--up, #ef5350);
|
||||
background: color-mix(in srgb, var(--up, #ef5350) 12%, transparent);
|
||||
}
|
||||
|
||||
.scv-signal-label--sell {
|
||||
color: var(--down, #4dabf7);
|
||||
background: color-mix(in srgb, var(--down, #4dabf7) 12%, transparent);
|
||||
}
|
||||
|
||||
.scv-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.scv-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.scv-empty {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text3);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* ── AND/OR 그룹 ─────────────────────────────────────────────── */
|
||||
.scv-group {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scv-group--or {
|
||||
border-color: color-mix(in srgb, #f5a623 40%, var(--border));
|
||||
}
|
||||
|
||||
.scv-group--and {
|
||||
border-color: color-mix(in srgb, #7b5ea7 40%, var(--border));
|
||||
}
|
||||
|
||||
.scv-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 10px;
|
||||
background: color-mix(in srgb, var(--bg2) 60%, var(--bg));
|
||||
border-bottom: 1px solid var(--se-border, var(--border));
|
||||
}
|
||||
|
||||
.scv-group-badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 7px;
|
||||
border-radius: 5px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.scv-group-badge--or {
|
||||
background: color-mix(in srgb, #f5a623 25%, transparent);
|
||||
color: #f5a623;
|
||||
border: 1px solid color-mix(in srgb, #f5a623 50%, transparent);
|
||||
}
|
||||
|
||||
.scv-group-badge--and {
|
||||
background: color-mix(in srgb, #7b5ea7 25%, transparent);
|
||||
color: #b39ddb;
|
||||
border: 1px solid color-mix(in srgb, #7b5ea7 50%, transparent);
|
||||
}
|
||||
|
||||
.scv-group-badge--not {
|
||||
background: color-mix(in srgb, #f44336 20%, transparent);
|
||||
color: #ef9a9a;
|
||||
border: 1px solid color-mix(in srgb, #f44336 40%, transparent);
|
||||
}
|
||||
|
||||
.scv-group-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.scv-group-op-toggle {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scv-op-active {
|
||||
color: var(--text);
|
||||
background: var(--bg2);
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
}
|
||||
|
||||
.scv-op-dim {
|
||||
color: var(--text3);
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.scv-group-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* ── TIMEFRAME 섹션 ──────────────────────────────────────────── */
|
||||
.scv-timeframe {
|
||||
border-radius: 8px;
|
||||
border: 1px solid color-mix(in srgb, #f5a623 35%, var(--border));
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, #f5a623 5%, transparent);
|
||||
}
|
||||
|
||||
.scv-timeframe-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, #f5a623 12%, var(--bg2));
|
||||
border-bottom: 1px solid color-mix(in srgb, #f5a623 30%, var(--border));
|
||||
}
|
||||
|
||||
.scv-timeframe-dot {
|
||||
color: #f5a623;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.scv-timeframe-badge {
|
||||
background: color-mix(in srgb, #f5a623 20%, transparent);
|
||||
color: #f5a623;
|
||||
border: 1px solid color-mix(in srgb, #f5a623 45%, transparent);
|
||||
border-radius: 4px;
|
||||
padding: 1px 7px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.scv-timeframe-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* ── 개별 조건 카드 ──────────────────────────────────────────── */
|
||||
.scv-cond-card {
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg) 50%, var(--bg2));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scv-cond-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg2) 60%, var(--bg));
|
||||
}
|
||||
|
||||
.scv-ind-chip {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.63rem !important;
|
||||
padding: 2px 7px !important;
|
||||
}
|
||||
|
||||
.scv-cond-title {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
line-height: 1.35;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.scv-cond-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1px;
|
||||
background: var(--se-border, var(--border));
|
||||
}
|
||||
|
||||
.scv-cond-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 5px 8px;
|
||||
background: color-mix(in srgb, var(--bg) 60%, var(--bg2));
|
||||
}
|
||||
|
||||
.scv-cond-field-lbl {
|
||||
font-size: 0.63rem;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.scv-cond-field-val {
|
||||
font-size: 0.74rem;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -54,18 +54,19 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 목록 한 줄 = 알림상세 · 신호일치율 · 캔들 · 보조지표(1칸) — 가로 100% 꽉 참 */
|
||||
/* 목록 한 줄 = 알림상세 · 신호일치율 · 통합차트(캔들+보조지표) — 가로 100% 꽉 참 */
|
||||
.tnl-row-gallery {
|
||||
--tnl-summary-card-width: 260px;
|
||||
--tnl-signal-slot-width: 280px;
|
||||
--tnl-chart-card-width: 312px;
|
||||
--tnl-row-inner-h: 340px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
max-height: 320px;
|
||||
height: calc(var(--tnl-row-inner-h) + 20px);
|
||||
max-height: calc(var(--tnl-row-inner-h) + 20px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -83,8 +84,8 @@
|
||||
.tnl-row-gallery-candle {
|
||||
flex: 1.12 1 0;
|
||||
min-width: 0;
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
height: var(--tnl-row-inner-h, 420px);
|
||||
max-height: var(--tnl-row-inner-h, 420px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@@ -113,8 +114,62 @@
|
||||
|
||||
.tnl-row-gallery > .tnl-hscroll-pane,
|
||||
.tnl-row-gallery > .tnl-row-gallery-candle {
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
height: var(--tnl-row-inner-h, 420px);
|
||||
max-height: var(--tnl-row-inner-h, 420px);
|
||||
}
|
||||
|
||||
/* ── 통합 차트 영역 (캔들 위, 보조지표 아래) ───────────────────── */
|
||||
.tnl-row-gallery-combined-chart {
|
||||
flex: 2.24 1 0; /* 구 캔들(1.12) + 구 보조지표(1.12) 합산 */
|
||||
min-width: 0;
|
||||
height: var(--tnl-row-inner-h, 420px);
|
||||
max-height: var(--tnl-row-inner-h, 420px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg) 40%, var(--bg2));
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-combined-chart > .tnl-chart-card {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 전체보기 상태에서 통합 차트가 나머지 공간을 모두 차지 */
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-combined-chart {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: var(--tnl-row-inner-h, 420px);
|
||||
max-height: var(--tnl-row-inner-h, 420px);
|
||||
}
|
||||
|
||||
.tnl-row-gallery-combined-chart--expanded {
|
||||
flex: 1 1 0 !important;
|
||||
}
|
||||
|
||||
/* 지표 로딩 중 오버레이 */
|
||||
.tnl-combined-chart-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
background: color-mix(in srgb, var(--bg2) 65%, transparent);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tnl-row-gallery .tnl-chart-card {
|
||||
@@ -141,8 +196,8 @@
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
height: var(--tnl-row-inner-h, 420px);
|
||||
max-height: var(--tnl-row-inner-h, 420px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg) 40%, var(--bg2));
|
||||
@@ -436,7 +491,7 @@
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
padding: 14px 16px 12px;
|
||||
padding: 10px 14px 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
@@ -444,7 +499,8 @@
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 0;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -473,14 +529,13 @@
|
||||
}
|
||||
|
||||
.tnl-summary-ko {
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tnl-summary-sym {
|
||||
@@ -510,9 +565,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
padding: 4px 2px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.tnl-summary-quote-left {
|
||||
@@ -566,7 +621,7 @@
|
||||
}
|
||||
|
||||
.tnl-summary-price {
|
||||
font-size: 20px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
@@ -583,27 +638,25 @@
|
||||
|
||||
/* 3행+: 상세 정보 */
|
||||
.tnl-summary-meta {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
gap: 5px;
|
||||
overflow-y: visible;
|
||||
overflow-x: hidden;
|
||||
padding-right: 2px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.tnl-summary-info-row {
|
||||
display: grid;
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
grid-template-columns: 80px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 10px 14px;
|
||||
gap: 5px 10px;
|
||||
}
|
||||
|
||||
/* 캔들 시각 — 10분봉·15분봉 등 분봉 라벨이 다음 줄로 밀리지 않도록 */
|
||||
.tnl-summary-info-row--candle {
|
||||
grid-template-columns: 88px minmax(108px, 1fr);
|
||||
grid-template-columns: 80px minmax(100px, 1fr);
|
||||
}
|
||||
|
||||
.tnl-summary-info-val--candle {
|
||||
@@ -616,7 +669,7 @@
|
||||
}
|
||||
|
||||
.tnl-summary-info-lbl {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
line-height: 1.4;
|
||||
@@ -624,10 +677,10 @@
|
||||
}
|
||||
|
||||
.tnl-summary-info-val {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text2);
|
||||
line-height: 1.45;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -638,18 +691,56 @@
|
||||
}
|
||||
|
||||
/* 하단: 투자전략 (vtd-target-strategy-field) */
|
||||
/* ── 전략명 태그 (헤더 바로 아래) ──────────────────────────────── */
|
||||
.tnl-summary-strategy-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 5px;
|
||||
background: var(--bg2, rgba(255,255,255,0.06));
|
||||
border: 1px solid var(--border, rgba(255,255,255,0.1));
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-summary-strategy-tag-ic {
|
||||
font-size: 0.65rem;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.tnl-summary-strategy-tag-name {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--text2, var(--se-text-muted));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 그리드 레이아웃에서 전략 태그 약간 작게 */
|
||||
.tnl-summary-card--grid .tnl-summary-strategy-tag {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
.tnl-summary-card--grid .tnl-summary-strategy-tag-name {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.tnl-summary-strategy-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tnl-summary-strategy-lbl {
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
white-space: nowrap;
|
||||
@@ -659,12 +750,12 @@
|
||||
.tnl-summary-strategy-box {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: var(--bg, var(--bg3));
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
@@ -677,7 +768,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 10px;
|
||||
padding: 6px 10px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg3, var(--se-center-bg));
|
||||
flex-shrink: 0;
|
||||
@@ -956,6 +1047,72 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── 검색 박스 ─────────────────────────────────────────────── */
|
||||
.tnl-search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
border-radius: 8px;
|
||||
background: var(--bg2, var(--se-panel-card-bg));
|
||||
flex-shrink: 0;
|
||||
min-width: 180px;
|
||||
max-width: 240px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.tnl-search-box:focus-within,
|
||||
.tnl-search-box--active {
|
||||
border-color: var(--accent, #3f7ef5);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #3f7ef5) 25%, transparent);
|
||||
}
|
||||
|
||||
.tnl-search-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tnl-search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tnl-search-input::placeholder {
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tnl-search-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
border-radius: 50%;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.tnl-search-clear:hover {
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--text3) 15%, transparent);
|
||||
}
|
||||
|
||||
/* 툴바 — 좌: 필터·액션 · 우: 목록/그리드·배치·삭제 */
|
||||
.tnl-page--with-right .tnl-toolbar {
|
||||
display: flex;
|
||||
@@ -1298,3 +1455,146 @@ ul.tnl-list.tnl-list--grid {
|
||||
min-width: min(var(--tnl-signal-slot-width), 88vw);
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════
|
||||
차트 전체화면 모달 (tnl-chart-fs-*)
|
||||
══════════════════════════════════════════════════════════════ */
|
||||
.tnl-chart-fs-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9500;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: calc(100vw - 32px);
|
||||
max-height: calc(100vh - 32px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg, #131722);
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
/* ── 헤더 ─────────────────────────────────────────────────── */
|
||||
.tnl-chart-fs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--se-border, var(--border));
|
||||
flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--bg2) 60%, var(--bg));
|
||||
}
|
||||
|
||||
.tnl-chart-fs-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-signal-badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-market {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tnl-chart-fs-tf {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
border-radius: 5px;
|
||||
padding: 1px 7px;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-price {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-time {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text3, var(--se-text-muted));
|
||||
}
|
||||
|
||||
.tnl-chart-fs-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-strategy {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text2);
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
border-radius: 5px;
|
||||
padding: 2px 9px;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-close {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--text2);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-close:hover {
|
||||
background: color-mix(in srgb, var(--text3) 20%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── 차트 바디 ────────────────────────────────────────────── */
|
||||
.tnl-chart-fs-body {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-body .tnl-mini-chart-canvas {
|
||||
height: 100% !important;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.tnl-chart-fs-body .tnl-mini-chart-canvas--fill {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user