2.[클라이언트] 마우스를 올릴 때 마다, 움직이는 버튼 [ animated.css ]

원리

1. state 를 마우스올릴때, 내릴때 변경시킨다.

2. state 에 따라, 삼항연산자로 애니메이션 스타일을 추가했다, 삭제했다 하며 변경한다.

 

필요

1. `${ }` 를 사용하여 모듈 css 스타일 넣기

2. `${ }` 를 사용하여, 글로벌 css 스타일 넣기

import "animate.css";

const HomePageMain = () => {
  const [bounce, setBounce] = useState<boolean>(false);
  let bouncStyle = `${styles.diary__lock} ${bounce ? "animate__animated animate__jello" : ""}`;	// 바운스스타일

  return (
  			...
      <div
        className={bouncStyle}
        onMouseOver={() => setBounce(true)}	// 마우스 올리면 state 에 의해, 클래스이름 변경
        onMouseLeave={() => setBounce(false)}	// 마우스 올리면 state 에 의해, 클래스이름 삭제
      >
      </div>