버튼에 hover하면 모든 에디터 내용이 리페인트 되는 문제

화면 기록 2025-01-20 오후 2.03.56.mov

현재 페이지 컨트롤 버튼에 마우스를 hover할 때마다 블록의 내용 전체가 리페인트되는 문제가 발생하고 있습니다. 에디터와 페이지 컨트롤 버튼은 페이지 내부의 형제 컴포넌트고 연관된게 없는것 같은데 이런 문제가 왜 발생하는지 찾아보았습니다.

export const pageControlContainer = css({
  display: "flex",
  gap: "sm",
  _hover: {
    "& svg": {
      transform: "scale(1)", // 추가 효과
      opacity: 1,
    },
  },
});

현재 페이지 컨트롤 버튼의 pandaCSS 코드입니다. 마우스를 hover할 경우 각 버튼의 svg파일에 scale(1) 속성을 부여했는데 이 부분에서 문제가 발생했습니다.

Transform 속성이란?

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

MDN에서 설명하고 있는 Transform의 정의입니다. transform 속성을 통해 해당 요소를 회전 rotate , 크기 조절 scale , 위치 이동 translate , 기울이기 skew 를 적용할 수 있습니다.

장점

단점