Macbook
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { useLayoutEffect, useRef } from 'react';
|
|
|
|
/**
|
|
* 신호등+하단 %/문구(.vtd-sig-light-rail) 높이를 측정해
|
|
* 이퀄라이저 pane 눈금·막대 높이 CSS 변수와 동기화
|
|
*/
|
|
export function useSignalVisualRailHeight(
|
|
deps: unknown[] = [],
|
|
railHeightVar = '--vtd-sig-rail-height',
|
|
) {
|
|
const visualRef = useRef<HTMLDivElement>(null);
|
|
const lightRef = useRef<HTMLDivElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
const visual = visualRef.current;
|
|
const light = lightRef.current;
|
|
if (!visual || !light) return;
|
|
|
|
const sync = () => {
|
|
const h = Math.ceil(light.getBoundingClientRect().height);
|
|
if (h > 0) {
|
|
visual.style.setProperty(railHeightVar, `${h}px`);
|
|
}
|
|
};
|
|
|
|
sync();
|
|
const ro = new ResizeObserver(sync);
|
|
ro.observe(light);
|
|
window.addEventListener('resize', sync);
|
|
return () => {
|
|
ro.disconnect();
|
|
window.removeEventListener('resize', sync);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, deps);
|
|
|
|
return { visualRef, lightRef };
|
|
}
|