htlee
44aa449b03
- FontScaleContext + FontScalePanel: 시설/선박/분석/지역 4그룹 × 0.5~2.0 범위 - LAYERS 패널 하단 슬라이더 UI, localStorage 영속화 - Korea static 14개 + Iran 4개 + 분석 3개 + KoreaMap 5개 TextLayer 적용 - MapLibre 선박 라벨/국가명 실시간 반영 - 모든 useMemo deps + updateTriggers에 fontScale 포함
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { useFontScale } from '../../hooks/useFontScale';
|
|
import type { FontScaleConfig } from '../../contexts/fontScaleState';
|
|
|
|
const LABELS: Record<keyof FontScaleConfig, string> = {
|
|
facility: '시설 라벨',
|
|
ship: '선박 이름',
|
|
analysis: '분석 라벨',
|
|
area: '지역/국가명',
|
|
};
|
|
|
|
export function FontScalePanel() {
|
|
const { fontScale, setFontScale } = useFontScale();
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const update = (key: keyof FontScaleConfig, val: number) => {
|
|
setFontScale({ ...fontScale, [key]: Math.round(val * 10) / 10 });
|
|
};
|
|
|
|
return (
|
|
<div className="font-scale-section">
|
|
<button type="button" className="font-scale-toggle" onClick={() => setOpen(!open)}>
|
|
<span>Aa 글꼴 크기</span>
|
|
<span>{open ? '▼' : '▶'}</span>
|
|
</button>
|
|
{open && (
|
|
<div className="font-scale-sliders">
|
|
{(Object.keys(LABELS) as (keyof FontScaleConfig)[]).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={fontScale[key]}
|
|
onChange={e => update(key, parseFloat(e.target.value))} />
|
|
<span>{fontScale[key].toFixed(1)}</span>
|
|
</div>
|
|
))}
|
|
<button type="button" className="font-scale-reset"
|
|
onClick={() => setFontScale({ facility: 1.0, ship: 1.0, analysis: 1.0, area: 1.0 })}>
|
|
초기화
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|