2024.05.27 기록

포트폴리오 about 페이지 수정 (toggle)

toggle 버튼 컴포넌트 분리하기

toggleBtn.rsx

function ToggleBtn() {

    let [inOn, setIsOn] = useState(false);

    const toggleOn = () => {
        // console.log('click')
        setIsOn(!inOn)
        // console.log(inOn)
    }

    return (
        <>
            <div className='toggle' onClick={toggleOn}>
                <div className='toggleContainer' style={{ backgroundColor: inOn ? '#8b8b8b' : '#057FFE' }} />
                <div className={`toggleCircle ${inOn ? 'active' : ''}`} />
            </div>
        </>
    )
}

export default ToggleBtn;

토글이 클릭될때마다 useState 값이 true <-> false 변경

toggleBtn.scss

.toggle {
    display: inline-block;
    vertical-align: middle;

    position: relative;

    .toggleContainer {
        width: 80px;
        height: 40px;
        border-radius: 30px;
        background-color: #8b8b8b;
        transition: 0.5s;

    }

    .toggleCircle {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(20%, -50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #ffffff;
        transition: 0.5s;
    }

    .active {
        left: 37px;
    }
}

active 했을때 페이지에 효과를 넣어야하나 싶다
하지만 아이디어가 생각나지않는다.. 일단 keep...
반응형 먼저 해야겠다 :)