ResizeObserver

window.addEventListener("resize", () => {
  // 브라우저 창 크기가 바뀔 때만 호출됨
});

// 1. Observer 생성
const observer = new ResizeObserver(callback);

// 2. 관찰할 요소 등록
observer.observe(targetElement);

// 3. 관찰 중지
observer.unobserve(targetElement);
observer.disconnect(); // 모든 요소 관찰 중지

const callback = (entries) => {
  entries.forEach((entry) => {
    const { width, height } = entry.contentRect;
    console.log(`크기 변경: ${width} x ${height}`);
  });
};

const observer = new ResizeObserver((entries) => {
  const { width, height } = entries[0].contentRect;
  canvas.width = width;
  canvas.height = height;
  redraw();
});

observer.observe(document.querySelector(".canvas-container"));

const observer = new ResizeObserver((entries) => {
  const { width, height } = entries[0].contentRect;
  chart.resize(width, height);
});

observer.observe(document.querySelector(".chart-container"));

const observer = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    const el = entry.target;
    const isOverflowing = el.scrollHeight > el.clientHeight;
    toggleShowMoreButton(el, isOverflowing);
  });
});

observer.observe(document.querySelector(".text-content"));

function useElementSize(ref: RefObject<HTMLElement | null>) {
  const [size, setSize] = useState<{ width: number; height: number } | null>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const observer = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect;
      setSize({ width, height });
    });

    observer.observe(element);
    return () => observer.disconnect();
  }, [ref.current]);

  return size;
}

function MyComponent() {
  const containerRef = useRef<HTMLDivElement>(null);
  const size = useElementSize(containerRef);

  return (
    <div ref={containerRef}>
      {size && <p>현재 크기: {size.width} x {size.height}</p>}
    </div>
  );
}