두 가지 상태만을 가지고 있는 스위치
export const Toggle = () => {
const [isOn, setisOn] = useState(false);
const toggleHandler = () => {
setisOn((prev) => !prev);
};
return (
<>
<div
onClick={toggleHandler}
>
<div className={`toggle-container ${isOn ? 'checked' : ''}`} />
<div className={`toggle-circle ${isOn ? 'checked' : ''}`} />
</div>
</>
);
};
// toggle 관련 CSS
.toggle-container {
width: 50px;
height: 24px;
border-radius: 30px;
background-color: #8b8b8b;
// TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.
transition: 0.5s;
}
.toggle--checked {
background-color: lightblue;
transition: 0.5s;
}
.toggle-circle {
position: absolute;
top: 1px;
left: 1px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #ffffff;
transition: 0.5s;
}
.checked {
left: 27px;
transition: 0.5s;
}