React toggle switch 기능

프로젝트에서 다크모드를 적용 시킬 때 주로 사용하는 toggle switch 기능을 적용해보겠습니다.

저는 react와 styled-componets를 사용하여 toggle button을 구현했습니다.
제가 구현한 방법은 hook를 활용해 true/false의 상태에 따라 토글이 변환하도록 해주었습니다.
클릭 했을 시 배경색과 글자가 변경되고 토글 안에 있는 원은 애니메이션을 주어 이동하는 것처럼 보이게 했습니다.
구현하는 과정에서 배경색을 먼저 변경 시켜주어 배경은 쉽게 구현하였지만, 애니메이션 효과를 주는 것이 생각보다 어려웠습니다.
구글링을 해본 결과 클릭 했을 시 className을 추가하여 className이 일치하는 경우 토글이 움직이게 애니메이션을 주었습니다.
저는 styled-components를 사용하고 있기 때문에 className 대신 props로 전달해주었습니다.

function Toggle() {
  const [toggle, setToggle] = useState(false);
  const clickedToggle = () => {
    setToggle((prev) => !prev);
  };
  return (
 	<Wrapper>
      <Title>Toggle</Title>
      <ToggleBtn onClick={clickedToggle} toggle={toggle}>
        <Circle toggle={toggle} />
      </ToggleBtn>
      <h3>Toggle Switch {!toggle ? "OFF" : "ON"}</h3>
    </Wrapper>
  );
}

const ToggleBtn = styled.button`
  width: 130px;
  height: 50px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background-color: ${(props) => (!props.toggle ? "none" : "rgb(51,30,190)")};
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
`;
const Circle = styled.div`
  background-color: white;
  width: 38px;
  height: 38px;
  border-radius: 50px;
  position: absolute;
  left: 5%;
  transition: all 0.5s ease-in-out;
  ${(props) =>
    props.toggle &&
    css`
      transform: translate(80px, 0);
      transition: all 0.5s ease-in-out;
    `}
`;

다른 분의 toggle 구현 방법