커스텀 훅 useMovePointByWidth

useMovePointByWidth.js

const useMovePointByWidth = () => {
  const containerRef = useRef<HTMLDivElement | null>(null); // 기준이 될 DOM 요소

  const [width, setWidth] = useState(0);
  const [prevWidth, setPrevWidth] = useState(0);
  const { points, setPoints } = useGraphStore();

  useEffect(() => {
    if (!containerRef.current) return;

    const updateWidth = () => {
      if (containerRef.current) {
        setWidth(containerRef.current.clientWidth);
      }
    };

    const debouncedUpdateWidth = debounce(updateWidth, 200);

    const observer = new ResizeObserver(debouncedUpdateWidth);
    observer.observe(containerRef.current);

    updateWidth();

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    // 이미 저장된 points x좌표 조정
    if (width !== prevWidth && prevWidth !== 0) {
      const newPoints: PointData[] = points.map((point) => ({ ...point, x: point.x * (width / prevWidth) }));
      setPoints(newPoints);
    }
    setPrevWidth(width);
  }, [width, points, prevWidth]);

  return { width, points, containerRef };
};

export default useMovePointByWidth;