htlee
77efab8652
- 항공기 아이콘에 정수레벨 줌 기반 스케일 적용 (getZoomScale export) - 심볼 크기 조정: SymbolScaleContext + SymbolScalePanel (0.5~2.0x) - LayerPanel에 '심볼 크기' 섹션 추가 (선박/항공기 개별 조정) - localStorage 영속화 (mapSymbolScale) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { useSymbolScale } from '../../hooks/useSymbolScale';
|
|
import type { SymbolScaleConfig } from '../../contexts/symbolScaleState';
|
|
|
|
const LABELS: Record<keyof SymbolScaleConfig, string> = {
|
|
ship: '선박 심볼',
|
|
aircraft: '항공기 심볼',
|
|
};
|
|
|
|
export function SymbolScalePanel() {
|
|
const { symbolScale, setSymbolScale } = useSymbolScale();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const update = (key: keyof SymbolScaleConfig, val: number) => {
|
|
setSymbolScale({ ...symbolScale, [key]: Math.round(val * 10) / 10 });
|
|
};
|
|
|
|
return (
|
|
<div className="font-scale-section">
|
|
<button type="button" className="font-scale-toggle" onClick={() => setOpen(!open)}>
|
|
<span>◆ 심볼 크기</span>
|
|
<span>{open ? '▼' : '▶'}</span>
|
|
</button>
|
|
{open && (
|
|
<div className="font-scale-sliders">
|
|
{(Object.keys(LABELS) as (keyof SymbolScaleConfig)[]).map(key => (
|
|
<div key={key} className="font-scale-row">
|
|
<label>{LABELS[key]}</label>
|
|
<input type="range" min={0.5} max={2.0} step={0.1}
|
|
value={symbolScale[key]}
|
|
onChange={e => update(key, parseFloat(e.target.value))} />
|
|
<span>{symbolScale[key].toFixed(1)}</span>
|
|
</div>
|
|
))}
|
|
<button type="button" className="font-scale-reset"
|
|
onClick={() => setSymbolScale({ ship: 1.0, aircraft: 1.0 })}>
|
|
초기화
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|