성능 최적화 - resize 이벤트 디바운스 누락

[SugarSyrup]

성능 최적화 - resize 이벤트 디바운스 누락

https://github.com/codeit-sprint-FESI-13/taskmate_fe/blob/1d7a06776d7f910a9247333d34086662278dcc37/src/hooks/useBreakpoint/index.ts#L16-L36

창 크기 변경 시 resize 이벤트가 초당 수십~수백 회 발생합니다. 매번 getBreakpoint + setState가 호출되면 불필요한 리렌더링이 발생합니다.

다음과 같이 수정하실 수도 있고, 혹은 lodash 라이브러리를 설치하여 적용하실 수도 있습니다.

useEffect(() => {
  let timeoutId: ReturnType<typeof setTimeout>;

  const handleResize = () => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      setBreakpoint(getBreakpoint(window.innerWidth));
    }, 150); // 150ms 디바운스 — 리사이즈가 멈춘 후에만 반영
  };

  window.addEventListener("resize", handleResize);
  handleResize();

  return () => {
    window.removeEventListener("resize", handleResize);
    clearTimeout(timeoutId);
  };
}, []);

Originally posted by @DevelopSoo in #136