aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

차트 설정 수정

Browse Source
This commit is contained in:
Macbook
2026-06-01 01:35:31 +09:00
parent 332019866a
commit f2208aab99
28 changed files with 546 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+7
View File
@@ -3196,6 +3196,13 @@ html.theme-blue {
padding-bottom: 10px;
border-bottom: 1px solid var(--sep);
}
.ism-color-popover-footer {
display: flex;
justify-content: flex-end;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--sep);
}
.ism-color-native-label {
display: flex;
align-items: center;
frontend/src/App.tsx
+29 -6
View File
@@ -84,6 +84,7 @@ import LiveStrategyPanel from './components/LiveStrategyPanel';
import { TradeNotificationProvider } from './contexts/TradeNotificationContext';
import { VerificationIssueNotificationProvider } from './contexts/VerificationIssueNotificationContext';
import { LiveSignalNotifier, type LiveSignalNotifierHandle } from './components/LiveSignalNotifier';
import type { LiveMarker } from './hooks/useLiveStrategyMarkers';
import { FormalLoginGate } from './components/FormalLoginGate';
import {
isFormalLogin,
@@ -999,13 +1000,18 @@ function App() {
// 전략 설정 화면에서 추가/수정된 전략이 즉시 반영되도록 한다.
const refreshLiveStrategies = useCallback(() => {
loadStrategiesForLive()
.then(list => setLiveStrategies(
list
.then(list => {
const rows = list
.filter(s => s.id != null)
.map(s => ({ id: s.id as number, name: s.name }))
))
.map(s => ({ id: s.id as number, name: s.name }));
setLiveStrategies(rows);
const sid = appDefaults.liveStrategyId;
if (sid != null && !rows.some(r => r.id === sid)) {
saveAppDef({ liveStrategyId: undefined, liveStrategyCheck: false });
}
})
.catch(() => {});
}, []);
}, [appDefaults.liveStrategyId, saveAppDef]);
useEffect(() => {
if (!formalLogin) {
@@ -1016,7 +1022,9 @@ function App() {
}, [menuPage, showLivePanel, formalLogin, refreshLiveStrategies]);
const liveNotifierRef = useRef<LiveSignalNotifierHandle>(null);
const liveMarkersRef = useRef<LiveMarker[]>([]);
const clearLiveMarkers = useCallback(() => {
liveMarkersRef.current = [];
liveNotifierRef.current?.clearMarkers();
managerRef.current?.clearLiveStrategyMarkers();
}, []);
@@ -1068,9 +1076,16 @@ function App() {
useEffect(() => {
if (!appSettingsLoaded) return;
const apply = () => {
managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
managerRef.current?.refreshPaneSeparatorOverlay();
slotRefs.current.forEach(slot => slot?.setPaneSeparatorOptions(chartPaneSeparator));
}, [appSettingsLoaded, chartPaneSeparator]);
};
apply();
if (menuPage !== 'chart') return;
const raf = requestAnimationFrame(() => requestAnimationFrame(apply));
return () => cancelAnimationFrame(raf);
}, [appSettingsLoaded, menuPage, chartPaneSeparator]);
// mainChartStyle 변경 → ChartManager 즉시 적용
useEffect(() => {
@@ -1112,6 +1127,12 @@ function App() {
};
}, [btMatchesChart, btSignals, btRunSeq, symbol, timeframe, appDefaults.btShowPrice, applyBacktestMarkersWhenReady, syncBacktestMarkers]);
// 금액 표시 토글 변경 시 실시간 시그널 마커 텍스트 재적용
useEffect(() => {
if (menuPage !== 'chart' || liveMarkersRef.current.length === 0) return;
managerRef.current?.setLiveStrategyMarkers(liveMarkersRef.current, appDefaults.btShowPrice);
}, [menuPage, appDefaults.btShowPrice]);
// ── 시뮬레이션 데이터 (Upbit 아닐 때) ──────────────────────────────────
const [simBars, setSimBars] = useState<OHLCVBar[]>(() =>
!isUpbitMarket(initial.symbol) ? generateBars(initial.symbol, initial.timeframe) : []
@@ -1751,6 +1772,7 @@ function App() {
popupEnabled={appDefaults.tradeAlertPopup ?? true}
chartMarkersActive={menuPage === 'chart'}
onMarkersChange={markers => {
liveMarkersRef.current = markers;
managerRef.current?.setLiveStrategyMarkers(markers, appDefaults.btShowPrice);
}}
/>
@@ -1989,6 +2011,7 @@ function App() {
onChartPaneSeparatorChange={opts => {
saveAppDef({ chartPaneSeparator: opts });
managerRef.current?.setPaneSeparatorOptions(opts);
managerRef.current?.refreshPaneSeparatorOverlay();
slotRefs.current.forEach(slot => slot?.setPaneSeparatorOptions(opts));
}}
paperTradingEnabled={paperTradingEnabled}
frontend/src/components/BacktestSettingsPanel.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ export const BacktestSettingsPanel: React.FC<BacktestSettingsPanelProps> = ({
</BtField>
<BtField
label="매수/매도 금액 표시"
desc="차트 마커에 체결 금액을 함께 표시합니다. ON: '매수 : 1,234,000' / OFF: '매수'만 표시."
desc="차트·백테스트 마커에 체결 금액을 함께 표시합니다. 차트 설정과 동일합니다. OFF: '매수'·'매도'만 표시."
>
<label className="stg-toggle">
<input type="checkbox" checked={btShowPrice} onChange={e => onBtShowPrice?.(e.target.checked)} />
frontend/src/components/ChartSlot.tsx
+1
View File
@@ -347,6 +347,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
},
setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => {
managerRef.current?.setPaneSeparatorOptions(opts);
managerRef.current?.refreshPaneSeparatorOverlay();
},
setChartTimeFormat: (format: string, tf?: Timeframe) => {
managerRef.current?.setChartTimeFormat(format);
frontend/src/components/ColorInput.tsx
+22 -4
View File
@@ -12,9 +12,19 @@ export interface ColorInputProps {
value: string;
onChange: (v: string) => void;
disabled?: boolean;
/** false — 인라인 네이티브 color input 숨김(설정 화면: OS 피커만 뜨는 문제 방지) */
showCompactNative?: boolean;
/** false — 바깥 클릭으로 닫지 않음(확인·✕·Esc 로만 닫기) */
closeOnClickOutside?: boolean;
}
const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = false }) => {
const ColorInput: React.FC<ColorInputProps> = ({
value,
onChange,
disabled = false,
showCompactNative = true,
closeOnClickOutside = false,
}) => {
const { hex6, alpha } = parsePlotColor(value);
const [open, setOpen] = useState(false);
const anchorRef = useRef<HTMLDivElement>(null);
@@ -51,20 +61,19 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
}, [open, updatePosition]);
useEffect(() => {
if (!open) return;
if (!open || !closeOnClickOutside) return;
const onDocPointer = (e: Event) => {
const t = e.target as Node;
if (anchorRef.current?.contains(t) || popoverRef.current?.contains(t)) return;
setOpen(false);
};
// 설정 모달 등이 bubble 단계에서 stopPropagation 하므로 capture 사용
document.addEventListener('mousedown', onDocPointer, true);
document.addEventListener('pointerdown', onDocPointer, true);
return () => {
document.removeEventListener('mousedown', onDocPointer, true);
document.removeEventListener('pointerdown', onDocPointer, true);
};
}, [open]);
}, [open, closeOnClickOutside]);
const patchHex = (h: string) => onChange(formatPlotColor(h, alpha));
const patchAlpha = (a: number) => onChange(formatPlotColor(hex6, a));
@@ -92,6 +101,7 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
✕
</button>
</div>
{showCompactNative && (
<div className="ism-color-popover-native">
<label className="ism-color-native-label">
<span className="ism-style-label">직접 선택</span>
@@ -103,7 +113,13 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
/>
</label>
</div>
)}
<ColorPickerPanel hex6={hex6} onHexChange={patchHex} />
<div className="ism-color-popover-footer">
<button type="button" className="plsp-popup-ok" onClick={closePopover}>
확인
</button>
</div>
</div>
) : null;
@@ -123,6 +139,7 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
>
<span className="ism-color-swatch-preview" style={{ background: plotColorCss(value) }} />
</button>
{showCompactNative && (
<input
type="color"
className="ism-color-picker ism-color-picker--compact"
@@ -131,6 +148,7 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
disabled={disabled}
onChange={e => patchHex(e.target.value)}
/>
)}
<NumericParamInput
className="ism-input ism-alpha-input"
value={alpha}
frontend/src/components/LiveStrategyPanel.tsx
+4 -5
View File
@@ -77,14 +77,13 @@ const LiveStrategyPanel: React.FC<LiveStrategyPanelProps> = ({
const prev = settings;
if (next.isLiveCheck && next.strategyId != null) {
const synced = await syncStrategyTimeframesFromLayoutIfNeeded(next.strategyId);
if (!synced) return;
if (!synced) {
window.alert('선택한 전략을 서버에서 찾을 수 없습니다. 전략 목록을 새로고침하거나 다른 전략을 선택해 주세요.');
return;
}
const ok = await warnStrategyTimeframeMismatch(next.strategyId);
if (!ok) return;
try {
await repairStrategyTimeframes(next.strategyId);
} catch {
/* repair optional */
}
}
onSettingsChange?.(next);
setSaving(true);
frontend/src/components/MarketSearchPanel.tsx
+6 -4
View File
@@ -67,7 +67,9 @@ interface MarketSearchPanelProps {
actionMode?: 'favorite' | 'add';
/** actionMode=add 일 때 + 클릭 콜백 (행 선택과 분리) */
onAdd?: (market: string, meta: { koreanName: string; englishName: string }) => void;
/** 이미 추가된 종목 (add 모드에서 + 비활성) */
/** actionMode=add 일 때 이미 추가된 종목 클릭 → 투자대상에서 제거 */
onRemove?: (market: string) => void;
/** 이미 추가된 종목 (add 모드에서 체크 표시·클릭 시 제거) */
addedMarkets?: Set<string>;
/** 투자대상 최대 개수에 도달 — 미등록 종목 추가 불가 */
maxTargetsReached?: boolean;
@@ -76,7 +78,7 @@ interface MarketSearchPanelProps {
export const MarketSearchPanel: React.FC<MarketSearchPanelProps> = ({
currentMarket, onSelect, onClose, anchorRect, anchorPlacement = 'slot', initialQuery = '',
variant = 'overlay', query: controlledQuery, onQueryChange,
actionMode = 'favorite', onAdd, addedMarkets, maxTargetsReached = false,
actionMode = 'favorite', onAdd, onRemove, addedMarkets, maxTargetsReached = false,
}) => {
const embedded = variant === 'embedded';
const isCompact = useIsCompactDevice();
@@ -405,10 +407,10 @@ export const MarketSearchPanel: React.FC<MarketSearchPanelProps> = ({
type="button"
className={`msp-add-btn${isAdded ? ' msp-add-btn--done' : ''}${addBlocked ? ' msp-add-btn--blocked' : ''}`}
onClick={e => handleAddClick(m.market, e)}
disabled={isAdded || addBlocked}
disabled={addBlocked}
title={
isAdded
? '이미 추가됨'
? '투자대상에서 제거'
: addBlocked
? '투자대상 최대 개수에 도달했습니다'
: '투자대상에 추가'
frontend/src/components/PaneSeparatorOverlay.tsx
+8 -3
View File
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useRef } from 'react';
import type { ChartManager } from '../utils/ChartManager';
import type { ChartPaneSeparatorOptions, PaneSeparatorStyle } from '../types/chartPaneSeparator';
import { classifyPaneBoundary } from '../types/chartPaneSeparator';
import { classifyPaneBoundary, paneSeparatorOptionsKey } from '../types/chartPaneSeparator';
import { plotColorCss } from '../utils/plotColorUtils';
interface Props {
@@ -34,6 +34,7 @@ function strokeBoundary(
const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const optionsKey = paneSeparatorOptionsKey(options);
const redraw = useCallback(() => {
const canvas = canvasRef.current;
@@ -72,7 +73,7 @@ const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
const y = lower.topY + lower.height;
strokeBoundary(ctx, cssW, y, style);
}
}, [manager, options]);
}, [manager, options, optionsKey]);
useEffect(() => {
redraw();
@@ -80,11 +81,15 @@ const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
const container = manager.getContainer();
const ro = new ResizeObserver(() => redraw());
if (container) ro.observe(container);
const raf1 = requestAnimationFrame(redraw);
const raf2 = requestAnimationFrame(() => requestAnimationFrame(redraw));
return () => {
unsub();
ro.disconnect();
cancelAnimationFrame(raf1);
cancelAnimationFrame(raf2);
};
}, [manager, redraw]);
}, [manager, redraw, optionsKey]);
return (
<canvas
frontend/src/components/SettingsPage.tsx
+36 -12
View File
@@ -39,6 +39,8 @@ import {
type ChartLegendVisibility,
} from '../types/chartLegend';
import type { ChartPaneSeparatorOptions, PaneSeparatorStyle } from '../types/chartPaneSeparator';
import { cloneChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
import ColorInput from './ColorInput';
import {
LINE_STYLE_LABELS,
LINE_STYLE_OPTIONS,
@@ -724,15 +726,11 @@ function PaneSeparatorStyleFields({
{style.visible && (
<>
<SettingRow label="선 색상">
<div className="stg-color-row">
<input
type="color"
className="stg-color"
value={style.color.startsWith('#') ? style.color.slice(0, 7) : '#2a2e3a'}
onChange={e => onChange({ ...style, color: e.target.value })}
<ColorInput
value={style.color}
onChange={color => onChange({ ...style, color })}
showCompactNative={false}
/>
<span className="stg-color-label">{style.color}</span>
</div>
</SettingRow>
<SettingRow label="선 굵기">
<select
@@ -789,6 +787,8 @@ interface ChartPanelProps {
onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
chartTimeFormat?: string;
onChartTimeFormatChange?: (format: string) => void;
btShowPrice?: boolean;
onBtShowPrice?: (v: boolean) => void;
}
const ChartPanel: React.FC<ChartPanelProps> = ({
@@ -811,6 +811,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
onChartPaneSeparatorChange,
chartTimeFormat = 'MM-dd HH:mm',
onChartTimeFormatChange,
btShowPrice = true,
onBtShowPrice,
}) => {
const [upColor, setUp] = useState('#26a69a');
const [downColor, setDown] = useState('#ef5350');
@@ -953,6 +955,22 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
</SettingRow>
</SettingSection>
<SettingSection title="매매 시그널">
<SettingRow
label="매수·매도 금액 표시"
desc="백테스트·실시간 전략 시그널 마커에 체결 금액을 함께 표시합니다. OFF이면 '매수'·'매도'만 표시합니다."
>
<label className="stg-toggle">
<input
type="checkbox"
checked={btShowPrice}
onChange={e => onBtShowPrice?.(e.target.checked)}
/>
<span className="stg-toggle-slider" />
</label>
</SettingRow>
</SettingSection>
{chartPaneSeparator && onChartPaneSeparatorChange && (
<SettingSection title="차트 영역 구분선">
<div className="stg-subsection-label">
@@ -961,10 +979,12 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
</div>
<PaneSeparatorStyleFields
style={chartPaneSeparator.mainToIndicator}
onChange={mainToIndicator => onChartPaneSeparatorChange({
onChange={mainToIndicator => onChartPaneSeparatorChange(
cloneChartPaneSeparatorOptions({
...chartPaneSeparator,
mainToIndicator,
})}
}),
)}
/>
<div className="stg-subsection-label stg-subsection-label--spaced">
보조지표 간
@@ -972,10 +992,12 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
</div>
<PaneSeparatorStyleFields
style={chartPaneSeparator.indicatorToIndicator}
onChange={indicatorToIndicator => onChartPaneSeparatorChange({
onChange={indicatorToIndicator => onChartPaneSeparatorChange(
cloneChartPaneSeparatorOptions({
...chartPaneSeparator,
indicatorToIndicator,
})}
}),
)}
/>
</SettingSection>
)}
@@ -1810,6 +1832,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
onChartPaneSeparatorChange={onChartPaneSeparatorChange}
chartTimeFormat={chartTimeFormat}
onChartTimeFormatChange={onChartTimeFormatChange}
btShowPrice={btShowPrice}
onBtShowPrice={onBtShowPrice}
/>
);
case 'indicators':
frontend/src/components/StrategyEditorPage.tsx
+6 -2
View File
@@ -515,7 +515,7 @@ export default function StrategyEditorPage({ theme }: Props) {
if (!hasRegisteredUser()) return;
loadStrategies().then(async list => {
if (list?.length) {
setStrategies(list.map(s => ({
const mapped = list.map(s => ({
id: s.id ?? Date.now(),
name: s.name,
description: s.description,
@@ -525,7 +525,11 @@ export default function StrategyEditorPage({ theme }: Props) {
enabled: s.enabled ?? true,
createdAt: s.createdAt,
updatedAt: s.updatedAt,
})));
}));
setStrategies(mapped);
setSelectedId(prev =>
prev != null && mapped.some(x => x.id === prev) ? prev : null,
);
} else {
const local = loadStratsLocal();
if (!local.length) return;
frontend/src/components/TradingChart.tsx
+35 -11
View File
@@ -337,7 +337,6 @@ const TradingChart: React.FC<TradingChartProps> = ({
const el = containerRef.current;
if (el && !panStateRef.current.active) {
el.style.cursor = canPanRef.current ? 'grab' : '';
el.style.touchAction = canPanRef.current ? 'none' : '';
}
}, [mode, drawingTool]);
@@ -365,6 +364,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
useEffect(() => {
if (!paneSeparatorOptions) return;
managerRef.current?.setPaneSeparatorOptions(paneSeparatorOptions);
managerRef.current?.refreshPaneSeparatorOverlay();
}, [paneSeparatorOptions]);
/**
@@ -913,15 +913,29 @@ const TradingChart: React.FC<TradingChartProps> = ({
};
container.addEventListener('contextmenu', onContextMenuCapture, { capture: true });
const wrapper = wrapperRef.current;
const isChartPlotPointer = (clientX: number, clientY: number) => {
const rect = container.getBoundingClientRect();
const chartX = clientX - rect.left;
const chartY = clientY - rect.top;
if (chartX < 0 || chartX > container.clientWidth) return null;
if (chartY < 0 || chartY > container.clientHeight) return null;
return { chartX, chartY };
};
const onPanPointerDown = (e: PointerEvent) => {
if (!canPanRef.current || e.button !== 0) return;
const rect = container.getBoundingClientRect();
const chartX = e.clientX - rect.left;
const chartY = e.clientY - rect.top;
if (mgr.isOnPriceAxis(chartX, chartY) || mgr.isOnTimeAxis(chartY)) return;
const originPaneIndex = mgr.getPaneIndexAtChartY(chartY);
const target = e.target as HTMLElement | null;
if (target?.closest('.chart-right-toolbar, .pane-legend-item, .pane-drag-handle, .pane-btn, .candle-pane-controls')) {
return;
}
const pt = isChartPlotPointer(e.clientX, e.clientY);
if (!pt) return;
if (mgr.isOnPriceAxis(pt.chartX, pt.chartY) || mgr.isOnTimeAxis(pt.chartY)) return;
const originPaneIndex = mgr.getPaneIndexAtChartY(pt.chartY);
const captureEl = wrapper ?? container;
try {
container.setPointerCapture(e.pointerId);
captureEl.setPointerCapture(e.pointerId);
} catch {
/* ignore */
}
@@ -953,8 +967,16 @@ const TradingChart: React.FC<TradingChartProps> = ({
});
};
const onPanPointerUp = () => {
const onPanPointerUp = (e: PointerEvent) => {
if (!panStateRef.current.active) return;
const captureEl = wrapper ?? container;
try {
if (captureEl.hasPointerCapture(e.pointerId)) {
captureEl.releasePointerCapture(e.pointerId);
}
} catch {
/* ignore */
}
if (panStateRef.current.moved) {
suppressClickRef.current = true;
managerRef.current?.notifyViewportChanged();
@@ -963,8 +985,10 @@ const TradingChart: React.FC<TradingChartProps> = ({
container.style.cursor = canPanRef.current ? 'grab' : '';
};
container.addEventListener('pointerdown', onPanPointerDown);
window.addEventListener('pointermove', onPanPointerMove);
const panCapture = true;
const panTarget = wrapper ?? container;
panTarget.addEventListener('pointerdown', onPanPointerDown, panCapture);
window.addEventListener('pointermove', onPanPointerMove, { passive: false });
window.addEventListener('pointerup', onPanPointerUp);
window.addEventListener('pointercancel', onPanPointerUp);
@@ -1122,7 +1146,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
container.removeEventListener('click', handleDrawingCapture, { capture: true });
container.removeEventListener('contextmenu', onContextMenuCapture, { capture: true });
container.removeEventListener('dblclick', onCandlePaneDblClick, { capture: true });
container.removeEventListener('pointerdown', onPanPointerDown);
panTarget.removeEventListener('pointerdown', onPanPointerDown, panCapture);
container.removeEventListener('wheel', onWheelCapture, { capture: true });
window.removeEventListener('pointermove', onPanPointerMove);
window.removeEventListener('pointerup', onPanPointerUp);
frontend/src/components/VirtualTradingPage.tsx
+20 -1
View File
@@ -114,7 +114,26 @@ const VirtualTradingPage: React.FC<Props> = ({
useEffect(() => {
void Promise.all([
loadStrategies().then(setStrategies).catch(() => setStrategies([])),
loadStrategies()
.then(list => {
setStrategies(list);
const validIds = new Set(
list.map(s => s.id).filter((id): id is number => id != null && id > 0),
);
setSession(prev =>
prev.globalStrategyId != null && !validIds.has(prev.globalStrategyId)
? { ...prev, globalStrategyId: null }
: prev,
);
setTargets(prev =>
prev.map(t =>
t.strategyId != null && !validIds.has(t.strategyId)
? { ...t, strategyId: null }
: t,
),
);
})
.catch(() => setStrategies([])),
loadPaperSummary().then(setSummary),
loadPaperTrades().then(setTrades),
]).finally(() => setLoading(false));
frontend/src/components/virtual/VirtualGridUnifiedHeader.tsx
+49 -113
View File
@@ -42,103 +42,65 @@ export const VirtualSessionHeaderControls: React.FC<SessionProps> = ({
onPaperAutoTradeEnabled,
paperTradingEnabled = true,
}) => (
<div className="vtd-header-session">
<div className="vtd-session-field">
<span className="vtd-session-label">투자전략</span>
<div className="vtd-header-session vtd-header-session--compact">
<select
className="vtd-session-select"
className="vtd-header-select vtd-header-select--strategy"
aria-label="투자전략"
value={session.globalStrategyId ?? ''}
onChange={e => {
const v = e.target.value;
onStrategyChange(v ? Number(v) : null);
}}
>
<option value="">— 선택 —</option>
<option value="">전략 선택</option>
{strategies.map(s => (
<option key={s.id} value={s.id}>{s.name}</option>
))}
</select>
</div>
<div className="vtd-session-field">
<span className="vtd-session-label">실행방식</span>
<div className="vtd-view-toggle" role="group" aria-label="실행방식">
<button
type="button"
className={`vtd-view-toggle-btn${session.executionType === 'CANDLE_CLOSE' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onExecutionTypeChange('CANDLE_CLOSE')}
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="실행방식"
value={session.executionType}
onChange={e => onExecutionTypeChange(e.target.value as VirtualSessionConfig['executionType'])}
>
봉 마감 직후
</button>
<button
type="button"
className={`vtd-view-toggle-btn${session.executionType === 'REALTIME_TICK' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onExecutionTypeChange('REALTIME_TICK')}
>
실시간 틱
</button>
</div>
</div>
<option value="CANDLE_CLOSE">봉 마감 직후</option>
<option value="REALTIME_TICK">실시간 틱</option>
</select>
<div className="vtd-session-field">
<span className="vtd-session-label">시그널 모드</span>
<div className="vtd-view-toggle" role="group" aria-label="시그널 모드">
<button
type="button"
className={`vtd-view-toggle-btn${session.positionMode === 'LONG_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onPositionModeChange('LONG_ONLY')}
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="시그널 모드"
value={session.positionMode}
onChange={e => onPositionModeChange(e.target.value as VirtualSessionConfig['positionMode'])}
>
보유 자산 기준
</button>
<button
type="button"
className={`vtd-view-toggle-btn${session.positionMode === 'SIGNAL_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onPositionModeChange('SIGNAL_ONLY')}
>
순수 지표 기준
</button>
</div>
</div>
<option value="LONG_ONLY">보유 자산 기준</option>
<option value="SIGNAL_ONLY">순수 지표 기준</option>
</select>
<div className="vtd-session-field">
<span className="vtd-session-label">자동매매</span>
<div
className="vtd-view-toggle"
role="group"
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="자동매매"
title={
!paperTradingEnabled
? '설정 › 가상투자에서 가상매매를 활성화하세요'
: paperAutoTradeEnabled
? 'Match 시 서버 자동 체결(모의·자동매매 ON, 화면 불필요)'
: '수동 주문만 가능'
: undefined
}
>
<button
type="button"
className={`vtd-view-toggle-btn${paperAutoTradeEnabled ? ' vtd-view-toggle-btn--on' : ''}`}
value={paperAutoTradeEnabled ? 'on' : 'off'}
disabled={!paperTradingEnabled || !onPaperAutoTradeEnabled}
onClick={() => onPaperAutoTradeEnabled?.(true)}
onChange={e => onPaperAutoTradeEnabled?.(e.target.value === 'on')}
>
ON
</button>
<button
type="button"
className={`vtd-view-toggle-btn${!paperAutoTradeEnabled ? ' vtd-view-toggle-btn--on' : ''}`}
disabled={!paperTradingEnabled || !onPaperAutoTradeEnabled}
onClick={() => onPaperAutoTradeEnabled?.(false)}
>
OFF
</button>
</div>
</div>
<option value="off">자동매매 OFF</option>
<option value="on">자동매매 ON</option>
</select>
<div className="vtd-session-actions">
<div className="vtd-session-actions vtd-session-actions--compact">
<button
type="button"
className="bps-btn vtd-session-btn vtd-session-btn--start"
disabled={session.running}
onClick={onStart}
title="가상투자 시작"
>
시작
</button>
@@ -147,6 +109,7 @@ export const VirtualSessionHeaderControls: React.FC<SessionProps> = ({
className="bps-btn bps-btn--danger vtd-session-btn"
disabled={!session.running}
onClick={onStop}
title="가상투자 종료"
>
종료
</button>
@@ -165,63 +128,36 @@ export const VirtualViewHeaderControls: React.FC<ViewProps> = ({
onGridPresetChange,
showGridLayoutPicker = true,
}) => (
<div className="vtd-header-view">
<div className="vtd-header-view vtd-header-view--compact">
{showGridLayoutPicker && onGridPresetChange && (
<>
<VirtualGridLayoutPicker
value={gridPreset}
onChange={onGridPresetChange}
disabled={!showSignalChartToggle}
/>
<span className="vtd-grid-head-divider" aria-hidden="true" />
</>
)}
{showSignalChartToggle && onGlobalDisplayModeChange && (
<>
<div className="vtd-grid-head-group" role="group" aria-label="전체 종목 신호·차트">
<div className="vtd-view-toggle">
<button
type="button"
className={`vtd-view-toggle-btn${globalDisplayMode === 'signal' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onGlobalDisplayModeChange('signal')}
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="신호 또는 차트"
value={globalDisplayMode}
onChange={e => onGlobalDisplayModeChange(e.target.value as VirtualCardDisplayMode)}
>
신호
</button>
<button
type="button"
className={`vtd-view-toggle-btn${globalDisplayMode === 'chart' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onGlobalDisplayModeChange('chart')}
>
차트
</button>
</div>
</div>
<span className="vtd-grid-head-divider" aria-hidden="true" />
</>
<option value="signal">신호</option>
<option value="chart">차트</option>
</select>
)}
<div className="vtd-grid-head-group" role="group" aria-label="카드 표시 방식">
<div className="vtd-view-toggle">
<button
type="button"
className={`vtd-view-toggle-btn${viewMode === 'summary' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onViewModeChange('summary')}
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="카드 표시 방식"
value={viewMode}
onChange={e => onViewModeChange(e.target.value as VirtualCardViewMode)}
>
요약표시
</button>
<button
type="button"
className={`vtd-view-toggle-btn${viewMode === 'detail' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onViewModeChange('detail')}
>
상세표시
</button>
</div>
</div>
<option value="summary">요약표시</option>
<option value="detail">상세표시</option>
</select>
{session.running && (
<>
<span className="vtd-grid-head-divider" aria-hidden="true" />
<span className="vtd-grid-live">실시간 갱신 3초</span>
</>
<span className="vtd-grid-live" title="3초마다 갱신">실시간</span>
)}
</div>
);
frontend/src/components/virtual/VirtualLeftTargetPanel.tsx
+2 -4
View File
@@ -88,8 +88,6 @@ const VirtualLeftTargetPanel: React.FC<Props> = ({
}, [addedSet, targets, globalStrategyId, onTargetsChange, onSelectMarket, virtualTargetMaxCount]);
const handleRemove = useCallback((market: string) => {
const item = targets.find(t => t.market === market);
if (item?.pinned) return;
onTargetsChange(targets.filter(t => t.market !== market));
}, [targets, onTargetsChange]);
@@ -119,6 +117,7 @@ const VirtualLeftTargetPanel: React.FC<Props> = ({
addedMarkets={addedSet}
maxTargetsReached={atTargetLimit}
onAdd={handleAdd}
onRemove={handleRemove}
onSelect={onSelectMarket}
onClose={closeDropdown}
/>
@@ -174,9 +173,8 @@ const VirtualLeftTargetPanel: React.FC<Props> = ({
<button
type="button"
className="vtd-target-remove"
title={item.pinned ? '고정된 종목은 삭제할 수 없습니다' : '목록에서 제거'}
title="목록에서 제거"
aria-label="목록에서 제거"
disabled={!!item.pinned}
onClick={e => { e.stopPropagation(); handleRemove(item.market); }}
>
✕
frontend/src/components/virtual/VirtualSessionToolbar.tsx
+22 -43
View File
@@ -12,6 +12,7 @@ interface Props {
onStop: () => void;
}
/** 레거시 — VirtualSessionHeaderControls 와 동일 드롭다운 레이아웃 */
const VirtualSessionToolbar: React.FC<Props> = ({
session,
strategies,
@@ -21,65 +22,43 @@ const VirtualSessionToolbar: React.FC<Props> = ({
onStart,
onStop,
}) => (
<div className="vtd-session-toolbar">
<div className="vtd-session-field">
<span className="vtd-session-label">투자전략</span>
<div className="vtd-session-toolbar vtd-header-session--compact">
<select
className="vtd-session-select"
className="vtd-header-select vtd-header-select--strategy"
aria-label="투자전략"
value={session.globalStrategyId ?? ''}
onChange={e => {
const v = e.target.value;
onStrategyChange(v ? Number(v) : null);
}}
>
<option value="">— 선택 —</option>
<option value="">전략 선택</option>
{strategies.map(s => (
<option key={s.id} value={s.id}>{s.name}</option>
))}
</select>
</div>
<div className="vtd-session-field">
<span className="vtd-session-label">실행방식</span>
<div className="vtd-view-toggle" role="group" aria-label="실행방식">
<button
type="button"
className={`vtd-view-toggle-btn${session.executionType === 'CANDLE_CLOSE' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onExecutionTypeChange('CANDLE_CLOSE')}
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="실행방식"
value={session.executionType}
onChange={e => onExecutionTypeChange(e.target.value as VirtualSessionConfig['executionType'])}
>
봉 마감 직후
</button>
<button
type="button"
className={`vtd-view-toggle-btn${session.executionType === 'REALTIME_TICK' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onExecutionTypeChange('REALTIME_TICK')}
>
실시간 틱
</button>
</div>
</div>
<option value="CANDLE_CLOSE">봉 마감 직후</option>
<option value="REALTIME_TICK">실시간 틱</option>
</select>
<div className="vtd-session-field">
<span className="vtd-session-label">시그널 모드</span>
<div className="vtd-view-toggle" role="group" aria-label="시그널 모드">
<button
type="button"
className={`vtd-view-toggle-btn${session.positionMode === 'LONG_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onPositionModeChange('LONG_ONLY')}
<select
className="vtd-header-select vtd-header-select--narrow"
aria-label="시그널 모드"
value={session.positionMode}
onChange={e => onPositionModeChange(e.target.value as VirtualSessionConfig['positionMode'])}
>
보유 자산 기준
</button>
<button
type="button"
className={`vtd-view-toggle-btn${session.positionMode === 'SIGNAL_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
onClick={() => onPositionModeChange('SIGNAL_ONLY')}
>
순수 지표 기준
</button>
</div>
</div>
<option value="LONG_ONLY">보유 자산 기준</option>
<option value="SIGNAL_ONLY">순수 지표 기준</option>
</select>
<div className="vtd-session-actions">
<div className="vtd-session-actions vtd-session-actions--compact">
<button
type="button"
className="bps-btn vtd-session-btn vtd-session-btn--start"
frontend/src/hooks/useVirtualTargetRegistry.ts
-4
View File
@@ -63,10 +63,6 @@ export function useVirtualTargetRegistry() {
const remove = useCallback(async (market: string) => {
if (!addedSet.has(market) || busyMarket === market) return;
if (targets.find(t => t.market === market)?.pinned) {
window.alert('고정된 종목은 투자대상에서 삭제할 수 없습니다.');
return;
}
setBusyMarket(market);
try {
const next = await removeVirtualTarget(market);
frontend/src/hooks/useVirtualTradingCore.ts
+20 -4
View File
@@ -117,7 +117,25 @@ export function useVirtualTradingCore(options: UseVirtualTradingCoreOptions = {}
preferencesHydratedRef.current = true;
}
await Promise.all([
loadStrategies().then(s => { if (!cancelled) setStrategies(s); }).catch(() => { if (!cancelled) setStrategies([]); }),
loadStrategies().then(s => {
if (cancelled) return;
setStrategies(s);
const validIds = new Set(
s.map(x => x.id).filter((id): id is number => id != null && id > 0),
);
setSession(prev =>
prev.globalStrategyId != null && !validIds.has(prev.globalStrategyId)
? { ...prev, globalStrategyId: null }
: prev,
);
setTargets(prev =>
prev.map(t =>
t.strategyId != null && !validIds.has(t.strategyId)
? { ...t, strategyId: null }
: t,
),
);
}).catch(() => { if (!cancelled) setStrategies([]); }),
loadPaperSummary().then(s => { if (!cancelled) setSummary(s); }),
loadPaperTrades().then(t => { if (!cancelled) setTrades(t); }),
]);
@@ -249,10 +267,8 @@ export function useVirtualTradingCore(options: UseVirtualTradingCoreOptions = {}
}, [targets, virtualTargetMaxCount]);
const handleRemoveTarget = useCallback((market: string) => {
const t = targets.find(x => x.market === market);
if (t?.pinned) return;
setTargets(prev => prev.filter(x => x.market !== market));
}, [targets]);
}, []);
const handleTogglePin = useCallback((market: string) => {
setTargets(prev => {
frontend/src/styles/builderPageShell.css
+6
View File
@@ -77,6 +77,12 @@
.bps-header--vtd .bps-header-actions {
justify-self: end;
flex-shrink: 0;
min-width: 0;
}
.bps-header--vtd .header-toolbar-divider {
height: 20px;
margin: 0 4px;
}
.bps-btn {
frontend/src/styles/virtualTradingDashboard.css
+85 -11
View File
@@ -1,6 +1,6 @@
/* 가상투자 대시보드 */
/* 타이틀바 — 세션 설정 (중앙 그리드 시작선) */
/* 타이틀바 — 세션 설정 (중앙, 드롭다운 한 줄) */
.vtd-header-session {
display: flex;
flex-wrap: wrap;
@@ -9,6 +9,19 @@
min-width: 0;
}
.vtd-header-session--compact {
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.vtd-header-session--compact::-webkit-scrollbar {
display: none;
}
.vtd-header-session .vtd-session-select {
min-width: 120px;
max-width: 160px;
@@ -18,7 +31,36 @@
margin-left: 0;
}
/* 타이틀바 — 뷰 옵션 (우측) */
.vtd-session-actions--compact {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 6px;
margin-left: 2px;
}
.vtd-header-select {
min-width: 0;
max-width: 148px;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid var(--se-border);
background: var(--se-panel-card-bg);
color: var(--se-text);
font-size: 11px;
line-height: 1.3;
flex-shrink: 0;
}
.vtd-header-select--strategy {
max-width: 132px;
}
.vtd-header-select--narrow {
max-width: 118px;
}
/* 타이틀바 — 뷰 옵션 (우측, 드롭다운·아이콘 한 줄) */
.vtd-header-view {
display: flex;
align-items: center;
@@ -27,6 +69,13 @@
gap: 0;
}
.vtd-header-view--compact {
flex-wrap: nowrap;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.bps-header--vtd .vtd-grid-live {
font-size: 11px;
white-space: nowrap;
@@ -38,17 +87,35 @@
@media (max-width: 1280px) {
.bps-header--vtd {
grid-template-columns: 1fr;
gap: 8px;
gap: 6px 8px;
padding: 6px 12px;
min-height: 44px;
}
.bps-header--vtd .bps-header-left .bps-subtitle {
display: none;
}
.bps-header--vtd .bps-header-center {
min-width: 0;
overflow: hidden;
}
.bps-header--vtd .bps-header-center,
.bps-header--vtd .bps-header-actions {
justify-self: stretch;
flex-shrink: 0;
}
.vtd-header-view {
justify-content: flex-start;
.vtd-header-select--strategy {
max-width: 108px;
}
.vtd-header-select--narrow {
max-width: 100px;
}
.vtd-session-btn {
padding: 4px 10px;
font-size: 0.75rem;
}
}
@@ -115,13 +182,14 @@
.vtd-session-toolbar {
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
align-items: center;
gap: 10px 16px;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid var(--se-border);
flex-shrink: 0;
background: var(--se-center-bg, var(--se-panel-card-bg));
overflow-x: auto;
}
.vtd-session-field {
@@ -2644,7 +2712,13 @@
background: color-mix(in srgb, var(--up, #26a69a) 12%, transparent);
border-color: color-mix(in srgb, var(--up, #26a69a) 45%, var(--se-border, #333));
color: var(--up, #26a69a);
cursor: default;
cursor: pointer;
}
.msp-add-btn--done:hover:not(:disabled) {
background: color-mix(in srgb, var(--down, #ef5350) 14%, transparent);
border-color: color-mix(in srgb, var(--down, #ef5350) 50%, var(--se-border, #333));
color: var(--down, #ef5350);
}
.msp-add-btn:disabled {
frontend/src/types/chartPaneSeparator.ts
+14
View File
@@ -103,6 +103,20 @@ export function classifyPaneBoundary(
}
/** LWC pane 구분선 — 커스텀 오버레이 사용 시 투명 처리 */
/** React·ChartManager 동기화용 불변 복제 */
export function cloneChartPaneSeparatorOptions(
opts: ChartPaneSeparatorOptions,
): ChartPaneSeparatorOptions {
return {
mainToIndicator: { ...opts.mainToIndicator },
indicatorToIndicator: { ...opts.indicatorToIndicator },
};
}
export function paneSeparatorOptionsKey(opts: ChartPaneSeparatorOptions): string {
return JSON.stringify(opts);
}
export function applyPaneSeparatorToChartOptions(_opts: ChartPaneSeparatorOptions) {
return {
layout: {
frontend/src/utils/ChartManager.ts
+13 -5
View File
@@ -63,6 +63,7 @@ import type { PlotDef, HLineStyle } from './indicatorRegistry';
import { mapHistogramSeriesData, histogramBarColor } from './plotColorUtils';
import {
applyPaneSeparatorToChartOptions,
cloneChartPaneSeparatorOptions,
resolveChartPaneSeparatorOptions,
type ChartPaneSeparatorOptions,
} from '../types/chartPaneSeparator';
@@ -311,7 +312,8 @@ export class ChartManager {
},
rightPriceScale: { borderColor: t.borderColor },
// pressedMouseMove: TradingChart 에서 커스텀 패닝 처리 (드로잉·클릭과 충돌 방지)
handleScroll: { mouseWheel: true, pressedMouseMove: false, horzTouchDrag: true, vertTouchDrag: false },
// horzTouchDrag: 보조 pane 터치 드래그가 메인 timeScale 과 어긋나는 현상 방지 — TradingChart 커스텀 패닝만 사용
handleScroll: { mouseWheel: true, pressedMouseMove: false, horzTouchDrag: false, vertTouchDrag: false },
handleScale: { axisPressedMouseMove: true, axisDoubleClickReset: true, mouseWheel: true, pinch: true },
});
@@ -595,8 +597,13 @@ export class ChartManager {
}
setPaneSeparatorOptions(opts: ChartPaneSeparatorOptions): void {
this._paneSeparatorOptions = opts;
this.chart.applyOptions(applyPaneSeparatorToChartOptions(opts));
this._paneSeparatorOptions = cloneChartPaneSeparatorOptions(opts);
this.chart.applyOptions(applyPaneSeparatorToChartOptions(this._paneSeparatorOptions));
this._notifyPaneLayout();
}
/** pane 구분선 오버레이 강제 재그리기 (설정 변경·탭 복귀) */
refreshPaneSeparatorOverlay(): void {
this._notifyPaneLayout();
}
@@ -1210,9 +1217,10 @@ export class ChartManager {
): void {
this.liveStrategyMarkers = markers.map(m => {
const buy = m.signal === 'BUY';
const label = buy ? '매수' : '매도';
const text = showPrice
? `실시간 ${buy ? '매수' : '매도'} : ${m.price.toLocaleString()}`
: `실시간 ${buy ? '매수' : '매도'}`;
? `${label} : ${m.price.toLocaleString()}`
: label;
return {
time: m.time,
position: buy ? ('belowBar' as const) : ('aboveBar' as const),
frontend/src/utils/backendApi.ts
+47 -7
View File
@@ -90,6 +90,18 @@ async function requestOrThrow<T>(path: string, init?: RequestInit): Promise<T> {
return JSON.parse(text) as T;
}
/** 서버에 없는 전략 ID — 삭제·만료 후 반복 404 방지 (태블릿·Safari 네트워크 로그 완화) */
const strategyMissingIds = new Set<number>();
export function isStrategyMissingOnServer(strategyId: number): boolean {
return strategyId > 0 && strategyMissingIds.has(strategyId);
}
function markStrategyMissingFromPath(pathOnly: string): void {
const m = pathOnly.match(/^\/strategies\/(\d+)(?:\/|$)/);
if (m) strategyMissingIds.add(Number(m[1]));
}
async function request<T>(path: string, init?: RequestInit): Promise<T | null> {
try {
const res = await fetch(`${API_BASE}${path}`, {
@@ -100,8 +112,16 @@ async function request<T>(path: string, init?: RequestInit): Promise<T | null> {
if (!res.ok) {
const method = init?.method ?? 'GET';
const guest403 = res.status === 403 && !hasRegisteredUser();
const missing404 = res.status === 404 && method === 'GET';
if (!guest403 && !missing404) {
const pathOnly = path.split('?')[0];
if (res.status === 404 && /^\/strategies\/\d+/.test(pathOnly)) {
markStrategyMissingFromPath(pathOnly);
}
const quiet404 = res.status === 404 && (
method === 'GET'
|| pathOnly.includes('/repair-timeframes')
|| /^\/strategies\/\d+/.test(pathOnly)
);
if (!guest403 && !quiet404) {
console.error(`[backendApi] ${method} ${path} → ${res.status}`);
}
return null;
@@ -1061,7 +1081,7 @@ export async function loadStrategies(): Promise<StrategyDto[]> {
/** 단일 전략 로드 */
export async function loadStrategy(id: number): Promise<StrategyDto | null> {
if (!hasRegisteredUser()) return null;
if (!hasRegisteredUser() || id <= 0 || strategyMissingIds.has(id)) return null;
return request<StrategyDto>(`/strategies/${id}`);
}
@@ -1401,10 +1421,30 @@ export async function loadStrategyTimeframes(strategyId: number): Promise<string
return list?.length ? list : ['1m'];
}
/** DB DSL TIMEFRAME 래핑 보정 (3분봉 전략이 1m으로 평가되는 레거시 수정) */
export async function repairStrategyTimeframes(strategyId: number): Promise<void> {
if (!hasRegisteredUser()) return;
await request(`/strategies/${strategyId}/repair-timeframes`, { method: 'POST' });
const repairSkipIds = new Set<number>();
const repairInflight = new Set<number>();
/** DB DSL TIMEFRAME 래핑 보정 — 전략 없으면 호출 안 함(404 방지) */
export async function repairStrategyTimeframes(strategyId: number): Promise<boolean> {
if (!hasRegisteredUser() || strategyId <= 0 || strategyMissingIds.has(strategyId)) return false;
if (repairSkipIds.has(strategyId) || repairInflight.has(strategyId)) return false;
repairInflight.add(strategyId);
try {
const exists = await loadStrategy(strategyId);
if (!exists) {
repairSkipIds.add(strategyId);
return false;
}
const ok = await request<StrategyDto>(
`/strategies/${strategyId}/repair-timeframes`,
{ method: 'POST' },
);
if (!ok) repairSkipIds.add(strategyId);
return ok != null;
} finally {
repairInflight.delete(strategyId);
}
}
/** 차트 실시간 파이프라인 pin (STOMP warm-up) */
frontend/src/utils/plotColorUtils.ts
+2
View File
@@ -35,6 +35,8 @@ export function formatPlotColor(hex6: string, alphaPercent: number): string {
}
export function plotColorCss(value: string): string {
const v = value.trim();
if (/^rgba?\(/i.test(v) || /^hsla?\(/i.test(v)) return v;
const { hex6, alpha } = parsePlotColor(value);
if (alpha >= 100) return hex6;
const r = parseInt(hex6.slice(1, 3), 16);
frontend/src/utils/strategyTimeframePin.ts
+2 -5
View File
@@ -7,12 +7,9 @@ export async function pinStrategyEvaluationTimeframes(
market: string,
strategyId: number,
): Promise<string[]> {
await syncStrategyTimeframesFromLayoutIfNeeded(strategyId);
try {
const synced = await syncStrategyTimeframesFromLayoutIfNeeded(strategyId);
if (!synced) return ['1m'];
await repairStrategyTimeframes(strategyId);
} catch {
/* 서버 미배포·권한 등 — timeframes 조회만 진행 */
}
const raw = await loadStrategyTimeframes(strategyId);
const timeframes = [...new Set(raw.map(tf => normalizeStartCandleType(tf)))];
if (timeframes.length === 0) timeframes.push('1m');
frontend/src/utils/strategyTimeframeSync.ts
+15 -10
View File
@@ -1,4 +1,11 @@
import { loadStrategy, loadStrategyTimeframes, repairStrategyTimeframes, saveStrategy, type StrategyDto } from './backendApi';
import {
isStrategyMissingOnServer,
loadStrategy,
loadStrategyTimeframes,
repairStrategyTimeframes,
saveStrategy,
type StrategyDto,
} from './backendApi';
import {
alignBuySellStartCandleTypesForSave,
collectDslBranches,
@@ -143,9 +150,10 @@ function buildEditorStateFromStrategy(
*/
export async function syncStrategyTimeframesFromLayoutIfNeeded(
strategyId: number,
strategy?: StrategyDto | null,
_strategy?: StrategyDto | null,
): Promise<boolean> {
const strat = (await loadStrategy(strategyId)) ?? strategy ?? null;
if (isStrategyMissingOnServer(strategyId)) return false;
const strat = await loadStrategy(strategyId);
if (!strat) return false;
const uiTfs = collectUiEvaluationTimeframes(strategyId, strat);
@@ -162,13 +170,10 @@ export async function syncStrategyTimeframesFromLayoutIfNeeded(
const layout = strat.flowLayout;
if (!layout) {
try {
await repairStrategyTimeframes(strategyId);
const repaired = await loadStrategyTimeframes(strategyId);
return evaluationTimeframesMatch(uiTfs, repaired);
} catch {
return false;
}
const repaired = await repairStrategyTimeframes(strategyId);
if (!repaired) return false;
const tfs = await loadStrategyTimeframes(strategyId);
return evaluationTimeframesMatch(uiTfs, tfs);
}
const buyState = buildEditorStateFromStrategy(strat, layout, 'buy');
frontend/src/utils/upbitWsBroker.ts
+24 -7
View File
@@ -15,11 +15,11 @@ interface Listener {
handler: RawHandler;
}
const INITIAL_DELAY = 80;
const RECONNECT_BASE = 2000;
const RECONNECT_MAX = 30_000;
const INITIAL_DELAY = 350;
const RECONNECT_BASE = 3000;
const RECONNECT_MAX = 45_000;
const PING_INTERVAL = 20_000;
const DISCONNECT_IDLE_MS = 5_000;
const DISCONNECT_IDLE_MS = 200;
const refCounts = new Map<UpbitWsChannel, Map<string, number>>();
const listeners = new Set<Listener>();
@@ -33,6 +33,7 @@ let pingTimer: ReturnType<typeof setInterval> | null = null;
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
let retryCount = 0;
let closingIntentionally = false;
let wsFailureLogged = false;
function getWsUrl(): string {
const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
@@ -175,6 +176,8 @@ function openSocket(): void {
if (listenerCount() === 0) return;
teardownSocket();
if (!mayOpenSocket()) return;
try {
const socket = new WebSocket(getWsUrl());
ws = socket;
@@ -182,6 +185,7 @@ function openSocket(): void {
socket.onopen = () => {
retryCount = 0;
wsFailureLogged = false;
notifyConnection(true);
sendSubscribe();
clearPing();
@@ -197,7 +201,13 @@ function openSocket(): void {
};
socket.onerror = () => {
console.warn('[upbitWsBroker] socket error');
if (!wsFailureLogged) {
wsFailureLogged = true;
console.warn(
'[upbitWsBroker] WebSocket 연결 실패 — 시세는 REST 폴링으로 대체됩니다. '
+ '서버 nginx에 /upbit-ws 프록시가 있는지 확인하세요.',
);
}
};
socket.onclose = () => {
@@ -207,7 +217,10 @@ function openSocket(): void {
if (!closingIntentionally && listenerCount() > 0) scheduleReconnect();
};
} catch (err) {
if (!wsFailureLogged) {
wsFailureLogged = true;
console.warn('[upbitWsBroker] connect failed', err);
}
scheduleReconnect();
}
}
@@ -274,8 +287,12 @@ export function subscribeUpbitWs(
return () => {
listeners.delete(entry);
normalized.forEach(code => bumpRef(channel, code, -1));
if (listenerCount() === 0) scheduleDisconnect();
else if (ws?.readyState === WebSocket.OPEN) sendSubscribe();
if (listenerCount() === 0) {
cancelPendingConnect();
scheduleDisconnect();
} else if (ws?.readyState === WebSocket.OPEN) {
sendSubscribe();
}
};
}
frontend/src/utils/virtualTargetMutations.ts
-1
View File
@@ -95,7 +95,6 @@ export async function removeVirtualTarget(market: string): Promise<VirtualTarget
const targets = loadVirtualTargets();
const item = targets.find(t => t.market === market);
if (!item) return targets;
if (item.pinned) return targets;
const session = loadVirtualSession();
const next = targets.filter(t => t.market !== market);
frontend/src/utils/virtualTradingStorage.ts
+1 -1
View File
@@ -13,7 +13,7 @@ export interface VirtualTargetItem {
strategyId: number | null;
koreanName?: string;
englishName?: string;
/** 투자대상 고정 — ON 이면 목록·추세검색에서 삭제 불가 (gc_live_strategy_settings.is_pinned) */
/** 투자대상 고정 — 추세검색 자동삭제 등에서 보호 (수동 삭제는 가능, gc_live_strategy_settings.is_pinned) */
pinned?: boolean;
}