aidev
132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
/**
|
|
* MainChartSettingsModal
|
|
* 메인 차트(캔들스틱) 설정 다이얼로그 — TradingView Settings 와 유사.
|
|
* 탭: Symbol (캔들 색상) / 스타일 / 가시성 (미래 확장용)
|
|
*/
|
|
import React, { useState } from 'react';
|
|
import type { MainChartStyle } from '../types';
|
|
import { useDraggablePanel } from '../hooks/useDraggablePanel';
|
|
|
|
interface Props {
|
|
style: MainChartStyle;
|
|
onSave: (style: MainChartStyle) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
type Tab = 'symbol';
|
|
|
|
const TABS: { id: Tab; label: string }[] = [
|
|
{ id: 'symbol', label: '심볼 (Symbol)' },
|
|
];
|
|
|
|
const ColorSwatch: React.FC<{ value: string; onChange: (v: string) => void }> = ({ value, onChange }) => {
|
|
const hex6 = value.slice(0, 7);
|
|
return (
|
|
<label className="mcs-swatch" title={hex6}>
|
|
<input
|
|
type="color"
|
|
value={hex6}
|
|
onChange={e => onChange(e.target.value)}
|
|
/>
|
|
<span style={{ background: hex6 }} />
|
|
</label>
|
|
);
|
|
};
|
|
|
|
const MainChartSettingsModal: React.FC<Props> = ({ style, onSave, onCancel }) => {
|
|
const [tab, setTab] = useState<Tab>('symbol');
|
|
const [draft, setDraft] = useState<MainChartStyle>({ ...style });
|
|
|
|
const {
|
|
panelRef,
|
|
dragging,
|
|
onHeaderPointerDown, headerTouchStyle,
|
|
panelStyle,
|
|
headerCursor,
|
|
} = useDraggablePanel({ centerOnMount: true });
|
|
|
|
const set = (key: keyof MainChartStyle) => (v: string) =>
|
|
setDraft(prev => ({ ...prev, [key]: v }));
|
|
|
|
const handleOk = () => onSave(draft);
|
|
|
|
const handleDefaults = () => setDraft({
|
|
upColor: '#ff6b6b',
|
|
downColor: '#4dabf7',
|
|
borderUpColor: '#ff6b6b',
|
|
borderDownColor: '#4dabf7',
|
|
wickUpColor: '#ff6b6b',
|
|
wickDownColor: '#4dabf7',
|
|
});
|
|
|
|
return (
|
|
<div className="mcs-overlay" onMouseDown={e => e.target === e.currentTarget && onCancel()}>
|
|
<div
|
|
ref={panelRef}
|
|
className="mcs-dialog"
|
|
style={{
|
|
...panelStyle,
|
|
zIndex: 3001,
|
|
cursor: dragging ? 'grabbing' : undefined,
|
|
}}
|
|
onMouseDown={e => e.stopPropagation()}
|
|
>
|
|
<div
|
|
className="gc-popup-header"
|
|
onPointerDown={onHeaderPointerDown}
|
|
style={{ cursor: headerCursor, ...headerTouchStyle }}
|
|
>
|
|
<span className="gc-popup-title">차트 설정 (Settings)</span>
|
|
<button type="button" className="gc-popup-close" onClick={onCancel}>✕</button>
|
|
</div>
|
|
|
|
<div className="mcs-tabs">
|
|
{TABS.map(t => (
|
|
<button
|
|
key={t.id}
|
|
className={`mcs-tab${tab === t.id ? ' active' : ''}`}
|
|
onClick={() => setTab(t.id)}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mcs-body">
|
|
{tab === 'symbol' && (
|
|
<>
|
|
<div className="mcs-section-label">캔들 (CANDLES)</div>
|
|
<div className="mcs-row">
|
|
<span className="mcs-row-label">상승 (Up)</span>
|
|
<div className="mcs-row-colors">
|
|
<ColorSwatch value={draft.upColor} onChange={set('upColor')} />
|
|
<ColorSwatch value={draft.borderUpColor} onChange={set('borderUpColor')} />
|
|
<ColorSwatch value={draft.wickUpColor} onChange={set('wickUpColor')} />
|
|
</div>
|
|
</div>
|
|
<div className="mcs-row">
|
|
<span className="mcs-row-label">하락 (Down)</span>
|
|
<div className="mcs-row-colors">
|
|
<ColorSwatch value={draft.downColor} onChange={set('downColor')} />
|
|
<ColorSwatch value={draft.borderDownColor} onChange={set('borderDownColor')} />
|
|
<ColorSwatch value={draft.wickDownColor} onChange={set('wickDownColor')} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mcs-footer">
|
|
<button className="mcs-btn-defaults" onClick={handleDefaults}>기본값</button>
|
|
<div className="mcs-footer-right">
|
|
<button className="mcs-btn-cancel" onClick={onCancel}>취소</button>
|
|
<button className="mcs-btn-ok" onClick={handleOk}>확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MainChartSettingsModal;
|