리액트 - Toggle Button 구현

Toggle Switch

 

// App.tsx

import { useState } from "react";

function App() {

  const [hide, setHide] = useState(false);
  
  const handleHideMode = (hide: boolean) => {
    setHide(() => !hide);
  };
  
  return (
    <>
      ...
      <HideCompletedToggleButton hide={hide} handleHideMode={handleHideMode} />
    </>
  );
}

// src/components/HideCompletedToggleButton.tsx

export default function HideCompletedToggleButton({
  hide,
  handleHideMode,
}: {
  hide: boolean;
  handleHideMode: (hide: boolean) => void;
}) {

  return (
    <div className="flex items-center gap-2">
      <p className="text-sm">완료 숨기기</p>
      <button
        onClick={() => handleHideMode(hide)}
        className={`relative w-12 h-6 rounded-full transition-colors duration-300 ${hide ? "bg-blue-500" : "bg-gray-300"}`}
      >
        {/* 토글 버튼 안에서 움직이는 동그라미 */}
        <div
          className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform duration-300
          ${hide ? "translate-x-7" : "translate-x-1"}`}
        />
      </button>
    </div>
  );
}

 

• duration-300
  • transition-duration: 300ms;
  • 애니메이션 시간을 0.3초로 설정
  • 스위치 내부의 동그라미가 0.3초 동안 부드럽게 이동
• ${hide ? "translate-x-7" : "translate-x-1"}
  • translate-x-7 === transform: translateX(1.75rem); 
  • --> x축으로 오른쪽으로 이동
  • 동그라미의 위치를 ON, OFF에 따라 지정

 

 

 

---