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

탭 지표 자동추가

Browse Source
This commit is contained in:
Macbook
2026-05-27 13:24:05 +09:00
parent f22abbdc19
commit f7aac535d8
7 changed files with 182 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+41
View File
@@ -966,6 +966,47 @@ html.theme-blue {
.tv-time-display { font-size: 12px; color: var(--text2); padding: 0 8px; white-space: nowrap; }
.tv-right-toggles { margin-left: 4px; }
/* 하단 바 — 지표 탭 빠른 적용 (전체 탭 제외) */
.tv-ind-tab-quick {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
margin-left: 6px;
padding-left: 8px;
border-left: 1px solid var(--border);
max-width: min(42vw, 420px);
overflow-x: auto;
scrollbar-width: thin;
}
.tv-ind-tab-quick-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 7px;
background: var(--bg3);
color: var(--text2);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.tv-ind-tab-quick-btn:hover {
background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.tv-ind-tab-quick-label {
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
}
/* 시간대 선택 (하단 바) */
.tz-picker { position: relative; flex-shrink: 0; }
.tz-picker-trigger {
frontend/src/App.tsx
+2
View File
@@ -2510,6 +2510,8 @@ function App() {
onAutoScale={() => managerRef.current?.autoScale()}
onFitContent={() => managerRef.current?.fitContent()}
onToggleGrid={() => setShowGrid(v => !v)}
onAddIndicators={handleAddIndicators}
onAddIndicator={handleAddIndicator}
/>
</div>{/* chart-screen */}
frontend/src/components/BottomBar.tsx
+6
View File
@@ -1,6 +1,7 @@
import React from 'react';
import type { Timeframe } from '../types';
import TimezonePicker from './TimezonePicker';
import IndicatorTabQuickButtons from './IndicatorTabQuickButtons';
interface BottomBarProps {
timeframe: Timeframe;
@@ -16,6 +17,8 @@ interface BottomBarProps {
onAutoScale: () => void;
onFitContent: () => void;
onToggleGrid: () => void;
onAddIndicators?: (types: string[]) => void;
onAddIndicator?: (type: string) => void;
}
const PERIODS: { label: string; tf: Timeframe }[] = [
@@ -55,6 +58,7 @@ const BottomBar: React.FC<BottomBarProps> = ({
timeframe, logScale, percentScale, showGrid, lastTime,
displayTimezone, onTimezoneChange,
onTimeframe, onLogScale, onPercentScale, onAutoScale, onFitContent, onToggleGrid,
onAddIndicators, onAddIndicator,
}) => {
return (
<div className="tv-bottom-bar">
@@ -72,6 +76,8 @@ const BottomBar: React.FC<BottomBarProps> = ({
<IcCalendar />
</button>
<IndicatorTabQuickButtons onAddMany={onAddIndicators} onAdd={onAddIndicator} />
<div className="tv-bottom-spacer" />
<TimezonePicker
frontend/src/components/IndicatorTabQuickButtons.tsx
+69
View File
@@ -0,0 +1,69 @@
import React, { useCallback, useEffect, useState } from 'react';
import { loadCustomTabs, type IndicatorCustomTab } from '../utils/indicatorCustomTabsStorage';
import { applyIndicatorTab } from '../utils/indicatorTabApply';
const IcApplyTab = () => (
<svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8">
<line x1="7" y1="2" x2="7" y2="12" />
<line x1="2" y1="7" x2="12" y2="7" />
</svg>
);
interface Props {
onAddMany?: (types: string[]) => void;
onAdd?: (type: string) => void;
}
const IndicatorTabQuickButtons: React.FC<Props> = ({ onAddMany, onAdd }) => {
const [customTabs, setCustomTabs] = useState<IndicatorCustomTab[]>(() => loadCustomTabs());
const refreshTabs = useCallback(() => {
setCustomTabs(loadCustomTabs());
}, []);
useEffect(() => {
refreshTabs();
window.addEventListener('gc-indicator-custom-tabs-changed', refreshTabs);
return () => window.removeEventListener('gc-indicator-custom-tabs-changed', refreshTabs);
}, [refreshTabs]);
if (!onAddMany && !onAdd) return null;
const applyMain = () => {
applyIndicatorTab({ kind: 'main' }, onAddMany, onAdd);
};
const applyCustom = (tab: IndicatorCustomTab) => {
applyIndicatorTab({ kind: 'custom', tab }, onAddMany, onAdd);
};
return (
<div className="tv-ind-tab-quick" role="group" aria-label="지표 탭 빠른 적용">
<button
type="button"
className="tv-ind-tab-quick-btn"
title="주요지표 탭 — 차트 보조지표 일괄 교체"
aria-label="주요지표 탭 일괄 적용"
onClick={applyMain}
>
<IcApplyTab />
<span className="tv-ind-tab-quick-label">주요</span>
</button>
{customTabs.map(tab => (
<button
key={tab.id}
type="button"
className="tv-ind-tab-quick-btn"
title={`${tab.name} 탭 — 차트 보조지표 일괄 교체`}
aria-label={`${tab.name} 탭 일괄 적용`}
onClick={() => applyCustom(tab)}
>
<IcApplyTab />
<span className="tv-ind-tab-quick-label">{tab.name}</span>
</button>
))}
</div>
);
};
export default IndicatorTabQuickButtons;
frontend/src/components/Toolbar.tsx
+7 -11
View File
@@ -10,6 +10,9 @@ import {
parseCustomTabKey,
type IndicatorTabKey,
} from '../utils/indicatorMainTab';
import {
confirmAndApplyIndicatorTab,
} from '../utils/indicatorTabApply';
import {
loadCustomTabs,
createCustomTab,
@@ -379,19 +382,12 @@ const IndDropdown: React.FC<IndDropdownProps> = ({
const handleAddAllInTab = () => {
if (!addAllContext || addAllContext.types.length === 0) return;
const validTypes = addAllContext.types.filter(
type => INDICATOR_REGISTRY.some(d => d.type === type),
);
if (validTypes.length === 0) {
window.alert('추가할 지표가 없습니다.');
if (category === 'Main') {
confirmAndApplyIndicatorTab({ kind: 'main' }, onAddMany, onAdd);
return;
}
const msg = `기존 보조지표를 모두 제거하고 ${addAllContext.label} 탭의 지표 ${validTypes.length}개로 교체하시겠습니까?`;
if (!window.confirm(msg)) return;
if (onAddMany) {
onAddMany(validTypes);
} else {
validTypes.forEach(type => onAdd(type));
if (isCustomTabKey(category) && selectedCustomTab) {
confirmAndApplyIndicatorTab({ kind: 'custom', tab: selectedCustomTab }, onAddMany, onAdd);
}
};
frontend/src/utils/indicatorCustomTabsStorage.ts
+1
View File
@@ -34,6 +34,7 @@ export function loadCustomTabs(): IndicatorCustomTab[] {
export function saveCustomTabs(tabs: IndicatorCustomTab[]): void {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tabs));
window.dispatchEvent(new CustomEvent('gc-indicator-custom-tabs-changed'));
}
export function createCustomTab(name: string, indicatorTypes: string[]): IndicatorCustomTab {
frontend/src/utils/indicatorTabApply.ts
+56
View File
@@ -0,0 +1,56 @@
import { INDICATOR_REGISTRY } from './indicatorRegistry';
import { MAIN_INDICATOR_TYPES } from './indicatorMainTab';
import type { IndicatorCustomTab } from './indicatorCustomTabsStorage';
export type IndicatorTabApplySource =
| { kind: 'main' }
| { kind: 'custom'; tab: IndicatorCustomTab };
export function resolveIndicatorTabApplyTypes(source: IndicatorTabApplySource): string[] {
if (source.kind === 'main') {
return [...MAIN_INDICATOR_TYPES].filter(
type => INDICATOR_REGISTRY.some(d => d.type === type),
);
}
return source.tab.indicatorTypes.filter(
type => INDICATOR_REGISTRY.some(d => d.type === type),
);
}
export function resolveIndicatorTabApplyLabel(source: IndicatorTabApplySource): string {
if (source.kind === 'main') return '주요지표';
return source.tab.name;
}
/** 지표 탭 전체 적용 — 기존 보조지표 제거 후 탭 지표만 추가 (확인 없음) */
export function applyIndicatorTab(
source: IndicatorTabApplySource,
onAddMany: ((types: string[]) => void) | undefined,
onAdd?: (type: string) => void,
): boolean {
const validTypes = resolveIndicatorTabApplyTypes(source);
if (validTypes.length === 0) return false;
if (onAddMany) {
onAddMany(validTypes);
} else {
validTypes.forEach(type => onAdd?.(type));
}
return true;
}
/** 지표 탭 전체 적용 — 확인 후 적용 (지표 추가 팝업용) */
export function confirmAndApplyIndicatorTab(
source: IndicatorTabApplySource,
onAddMany: ((types: string[]) => void) | undefined,
onAdd?: (type: string) => void,
): void {
const validTypes = resolveIndicatorTabApplyTypes(source);
if (validTypes.length === 0) {
window.alert('추가할 지표가 없습니다.');
return;
}
const label = resolveIndicatorTabApplyLabel(source);
const msg = `기존 보조지표를 모두 제거하고 ${label} 탭의 지표 ${validTypes.length}개로 교체하시겠습니까?`;
if (!window.confirm(msg)) return;
applyIndicatorTab(source, onAddMany, onAdd);
}