aidev
93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
/**
|
|
* 모바일 차트 화면 하단 고정 도크 — 종목·매매·호가·그리기·차트 도구
|
|
*/
|
|
import React from 'react';
|
|
|
|
export type MobileDockPanel = 'none' | 'market' | 'trade' | 'orderbook';
|
|
|
|
interface Props {
|
|
marketOpen: boolean;
|
|
rightOpen: boolean;
|
|
rightTab: 'trade' | 'orderbook';
|
|
drawingTool: string;
|
|
onToggleMarket: () => void;
|
|
onOpenTrade: () => void;
|
|
onOpenOrderbook: () => void;
|
|
onClosePanels: () => void;
|
|
onTool: (tool: string) => void;
|
|
}
|
|
|
|
const MobileChartDock: React.FC<Props> = ({
|
|
marketOpen,
|
|
rightOpen,
|
|
rightTab,
|
|
drawingTool,
|
|
onToggleMarket,
|
|
onOpenTrade,
|
|
onOpenOrderbook,
|
|
onClosePanels,
|
|
onTool,
|
|
}) => {
|
|
const tradeActive = rightOpen && rightTab === 'trade';
|
|
const obActive = rightOpen && rightTab === 'orderbook';
|
|
|
|
return (
|
|
<nav className="mobile-chart-dock" aria-label="차트 모바일 메뉴">
|
|
<button
|
|
type="button"
|
|
className={`mcd-btn${marketOpen ? ' active' : ''}`}
|
|
onClick={onToggleMarket}
|
|
aria-pressed={marketOpen}
|
|
>
|
|
<span className="mcd-icon" aria-hidden>📋</span>
|
|
<span className="mcd-label">종목</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`mcd-btn${tradeActive ? ' active' : ''}`}
|
|
onClick={onOpenTrade}
|
|
aria-pressed={tradeActive}
|
|
>
|
|
<span className="mcd-icon" aria-hidden>💰</span>
|
|
<span className="mcd-label">매매</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`mcd-btn${obActive ? ' active' : ''}`}
|
|
onClick={onOpenOrderbook}
|
|
aria-pressed={obActive}
|
|
>
|
|
<span className="mcd-icon" aria-hidden>📊</span>
|
|
<span className="mcd-label">호가</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`mcd-btn${drawingTool === 'zoom' ? ' active' : ''}`}
|
|
onClick={() => {
|
|
onClosePanels();
|
|
onTool(drawingTool === 'zoom' ? 'cursor' : 'zoom');
|
|
}}
|
|
aria-pressed={drawingTool === 'zoom'}
|
|
title="영역 드래그로 차트 확대"
|
|
>
|
|
<span className="mcd-icon" aria-hidden>🔍</span>
|
|
<span className="mcd-label">확대</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`mcd-btn${drawingTool === 'cursor' ? ' active' : ''}`}
|
|
onClick={() => {
|
|
onClosePanels();
|
|
onTool('cursor');
|
|
}}
|
|
aria-pressed={drawingTool === 'cursor'}
|
|
>
|
|
<span className="mcd-icon" aria-hidden>👆</span>
|
|
<span className="mcd-label">이동</span>
|
|
</button>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default MobileChartDock;
|