Macbook
276 lines
8.0 KiB
TypeScript
276 lines
8.0 KiB
TypeScript
/**
|
||
* 그리드형 n×n 레이아웃 선택 (TradingView 스타일 팝업) — 알림 목록·가상매매 공용
|
||
*/
|
||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import {
|
||
gridPresetsByGroup,
|
||
getTradeNotificationGridPreset,
|
||
type TradeNotificationGridPreset,
|
||
type TradeNotificationGridPresetId,
|
||
} from '../../utils/tradeNotificationGridPresets';
|
||
|
||
export type GridLayoutPickerVariant = 'tnl' | 'vtd';
|
||
|
||
interface Props {
|
||
value: TradeNotificationGridPresetId;
|
||
onChange: (id: TradeNotificationGridPresetId) => void;
|
||
disabled?: boolean;
|
||
/** CSS 클래스 접두사 — tnl(알림목록) | vtd(가상매매) */
|
||
variant?: GridLayoutPickerVariant;
|
||
/** 팝업 정렬 (헤더 좌측 배치 시 left) */
|
||
popoverAlign?: 'left' | 'right';
|
||
}
|
||
|
||
function cls(variant: GridLayoutPickerVariant, suffix: string): string {
|
||
return `${variant}-grid-layout-${suffix}`;
|
||
}
|
||
|
||
/** 20×20 와이어프레임 아이콘 */
|
||
const LayoutIcon: React.FC<{ preset: TradeNotificationGridPreset }> = ({ preset }) => {
|
||
const s = 20;
|
||
const g = 1;
|
||
const cells: Array<{ x: number; y: number; w: number; h: number }> = [];
|
||
|
||
switch (preset.id) {
|
||
case '1x1':
|
||
cells.push({ x: 0, y: 0, w: s, h: s });
|
||
break;
|
||
case '2x1':
|
||
cells.push({ x: 0, y: 0, w: 9, h: s }, { x: 10, y: 0, w: 9, h: s });
|
||
break;
|
||
case '1x2':
|
||
cells.push({ x: 0, y: 0, w: s, h: 9 }, { x: 0, y: 10, w: s, h: 9 });
|
||
break;
|
||
case '3x1':
|
||
cells.push(
|
||
{ x: 0, y: 0, w: 6, h: s },
|
||
{ x: 7, y: 0, w: 6, h: s },
|
||
{ x: 14, y: 0, w: 6, h: s },
|
||
);
|
||
break;
|
||
case '1x3':
|
||
cells.push(
|
||
{ x: 0, y: 0, w: s, h: 6 },
|
||
{ x: 0, y: 7, w: s, h: 6 },
|
||
{ x: 0, y: 14, w: s, h: 6 },
|
||
);
|
||
break;
|
||
case '2x1-31':
|
||
cells.push({ x: 0, y: 0, w: 9, h: s }, { x: 10, y: 0, w: 9, h: 9 }, { x: 10, y: 10, w: 9, h: 9 });
|
||
break;
|
||
case '2x2':
|
||
cells.push(
|
||
{ x: 0, y: 0, w: 9, h: 9 },
|
||
{ x: 10, y: 0, w: 9, h: 9 },
|
||
{ x: 0, y: 10, w: 9, h: 9 },
|
||
{ x: 10, y: 10, w: 9, h: 9 },
|
||
);
|
||
break;
|
||
case '4x1':
|
||
for (let i = 0; i < 4; i++) cells.push({ x: i * 5, y: 0, w: 4, h: s });
|
||
break;
|
||
case '1x4':
|
||
for (let i = 0; i < 4; i++) cells.push({ x: 0, y: i * 5, w: s, h: 4 });
|
||
break;
|
||
case '2x1-211':
|
||
cells.push(
|
||
{ x: 0, y: 0, w: 9, h: 9 },
|
||
{ x: 10, y: 0, w: 9, h: 9 },
|
||
{ x: 0, y: 10, w: 9, h: 9 },
|
||
{ x: 10, y: 10, w: 9, h: 9 },
|
||
);
|
||
break;
|
||
case '5x1':
|
||
for (let i = 0; i < 5; i++) cells.push({ x: i * 4, y: 0, w: 3, h: s });
|
||
break;
|
||
case '3x2':
|
||
for (let c = 0; c < 3; c++) {
|
||
for (let r = 0; r < 2; r++) {
|
||
cells.push({ x: c * 7, y: r * 10, w: 6, h: 9 });
|
||
}
|
||
}
|
||
break;
|
||
case '2x3':
|
||
for (let c = 0; c < 2; c++) {
|
||
for (let r = 0; r < 3; r++) {
|
||
cells.push({ x: c * 10, y: r * 7, w: 9, h: 6 });
|
||
}
|
||
}
|
||
break;
|
||
case '4x2':
|
||
for (let c = 0; c < 4; c++) {
|
||
for (let r = 0; r < 2; r++) {
|
||
cells.push({ x: c * 5, y: r * 10, w: 4, h: 9 });
|
||
}
|
||
}
|
||
break;
|
||
case '2x4':
|
||
for (let c = 0; c < 2; c++) {
|
||
for (let r = 0; r < 4; r++) {
|
||
cells.push({ x: c * 10, y: r * 5, w: 9, h: 4 });
|
||
}
|
||
}
|
||
break;
|
||
default:
|
||
cells.push({ x: 0, y: 0, w: s, h: s });
|
||
}
|
||
|
||
return (
|
||
<svg width="22" height="22" viewBox="0 0 20 20" aria-hidden className="grid-preset-icon-svg">
|
||
{cells.map((c, i) => (
|
||
<rect
|
||
key={i}
|
||
x={c.x}
|
||
y={c.y}
|
||
width={c.w}
|
||
height={c.h}
|
||
rx={0.5}
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth={g}
|
||
/>
|
||
))}
|
||
</svg>
|
||
);
|
||
};
|
||
|
||
const POPOVER_WIDTH = 320;
|
||
|
||
const GridLayoutPicker: React.FC<Props> = ({
|
||
value,
|
||
onChange,
|
||
disabled = false,
|
||
variant = 'tnl',
|
||
popoverAlign = 'right',
|
||
}) => {
|
||
const [open, setOpen] = useState(false);
|
||
const [popoverPos, setPopoverPos] = useState<{ top: number; left: number } | null>(null);
|
||
const rootRef = useRef<HTMLDivElement>(null);
|
||
const popoverRef = useRef<HTMLDivElement>(null);
|
||
const active = getTradeNotificationGridPreset(value);
|
||
const groups = [...gridPresetsByGroup().entries()].sort((a, b) => a[0] - b[0]);
|
||
|
||
const updatePopoverPos = useCallback(() => {
|
||
const el = rootRef.current;
|
||
if (!el) return;
|
||
const rect = el.getBoundingClientRect();
|
||
const width = Math.min(POPOVER_WIDTH, window.innerWidth - 48);
|
||
const left = popoverAlign === 'left'
|
||
? rect.left
|
||
: rect.right - width;
|
||
setPopoverPos({
|
||
top: rect.bottom + 8,
|
||
left: Math.max(8, Math.min(left, window.innerWidth - width - 8)),
|
||
});
|
||
}, [popoverAlign]);
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
setPopoverPos(null);
|
||
return;
|
||
}
|
||
updatePopoverPos();
|
||
window.addEventListener('resize', updatePopoverPos);
|
||
window.addEventListener('scroll', updatePopoverPos, true);
|
||
return () => {
|
||
window.removeEventListener('resize', updatePopoverPos);
|
||
window.removeEventListener('scroll', updatePopoverPos, true);
|
||
};
|
||
}, [open, updatePopoverPos]);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const onDoc = (e: MouseEvent) => {
|
||
const t = e.target as Node;
|
||
if (rootRef.current?.contains(t) || popoverRef.current?.contains(t)) return;
|
||
setOpen(false);
|
||
};
|
||
const onKey = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') setOpen(false);
|
||
};
|
||
document.addEventListener('mousedown', onDoc);
|
||
document.addEventListener('keydown', onKey);
|
||
return () => {
|
||
document.removeEventListener('mousedown', onDoc);
|
||
document.removeEventListener('keydown', onKey);
|
||
};
|
||
}, [open]);
|
||
|
||
const popoverClass = [
|
||
cls(variant, 'popover'),
|
||
cls(variant, 'popover--portal'),
|
||
popoverAlign === 'left' ? cls(variant, 'popover--align-left') : '',
|
||
].filter(Boolean).join(' ');
|
||
|
||
const popover = open && popoverPos ? (
|
||
<div
|
||
ref={popoverRef}
|
||
className={popoverClass}
|
||
role="dialog"
|
||
aria-label="그리드 배치"
|
||
style={{
|
||
position: 'fixed',
|
||
top: popoverPos.top,
|
||
left: popoverPos.left,
|
||
right: 'auto',
|
||
zIndex: 10000,
|
||
width: Math.min(POPOVER_WIDTH, window.innerWidth - 48),
|
||
}}
|
||
>
|
||
<p className={cls(variant, 'popover-title')}>그리드 배치</p>
|
||
{groups.map(([group, presets]) => (
|
||
<div key={group} className={cls(variant, 'group')}>
|
||
<span className={cls(variant, 'group-lbl')}>{group}</span>
|
||
<div className={cls(variant, 'group-row')}>
|
||
{presets.map(preset => (
|
||
<button
|
||
key={preset.id}
|
||
type="button"
|
||
className={[
|
||
`${variant}-grid-preset-btn`,
|
||
value === preset.id ? `${variant}-grid-preset-btn--on` : '',
|
||
].filter(Boolean).join(' ')}
|
||
title={`${preset.label} (${preset.cols}열)`}
|
||
aria-label={`${preset.label} 배치`}
|
||
aria-pressed={value === preset.id}
|
||
onClick={() => {
|
||
onChange(preset.id);
|
||
setOpen(false);
|
||
}}
|
||
>
|
||
<LayoutIcon preset={preset} />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : null;
|
||
|
||
return (
|
||
<div className={cls(variant, 'picker')} ref={rootRef}>
|
||
<button
|
||
type="button"
|
||
className={[
|
||
cls(variant, 'trigger'),
|
||
open ? cls(variant, 'trigger--open') : '',
|
||
disabled ? cls(variant, 'trigger--disabled') : '',
|
||
].filter(Boolean).join(' ')}
|
||
title={`그리드 배치: ${active.label}`}
|
||
aria-label="그리드 배치 선택"
|
||
aria-expanded={open}
|
||
aria-haspopup="dialog"
|
||
disabled={disabled}
|
||
onClick={() => !disabled && setOpen(o => !o)}
|
||
>
|
||
<LayoutIcon preset={active} />
|
||
</button>
|
||
|
||
{popover && createPortal(popover, document.body)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default GridLayoutPicker;
|