1. 알아야 할 내용

---

• 토글을 클릭하여 상태가 변경될 경우 클래스명을 추가하여 토글 버튼이 이동하는 CSS가 적용되도록 했다.

2. 전체 코드

---

• 토글 버튼 구현 코드

export const Toggle = () => {
  const [isOn, setisOn] = useState(false);

  // isOn의 기본값이 false이고 버튼 클릭 시 isOn의 반대 상태 즉, true가 된다.
  const toggleHandler = () => {
    setisOn(!isOn)
  };

  return (
    <>
      <ToggleContainer onClick={toggleHandler}>
        {/* isOn 상태가 되면 'toggle--checked' 클래스명이 추가된다. */}
        <div className={`toggle-container ${isOn ? "toggle--checked" : null}`} />
        <div className={`toggle-circle ${isOn ? "toggle--checked" : null}`} />
      </ToggleContainer>
      {/* isOn 상태가 되면 텍스트가 'Toggle Switch ON'로 변경된다. */}
      {isOn ? <Desc>Toggle Switch ON</Desc> : <Desc>Toggle Switch OFF</Desc>}
    </>
  );
};

• CSS

const ToggleContainer = styled.div`
    position: relative;
    margin-top: 8rem;
    left: 47%;
    cursor: pointer;

    > .toggle-container {
        width: 50px;
        height: 24px;
        border-radius: 30px;
        background-color: #8b8b8b;
        transition: all .2s ease;
        // .toggle--checked 클래스가 활성화 되었을 경우의 CSS
        &.toggle--checked {
            background-color: #4000c7;
        }
    }

    > .toggle-circle {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: #fafafa;
        transition: all .25s ease;
        // .toggle--checked 클래스가 활성화 되었을 경우의 CSS
        &.toggle--checked {
            left: 27px;
        }
    }
`;

const Desc = styled.div`
  // 설명 부분의 CSS
  text-align: center;
  margin-top: 1rem;
`;