라이브러리 없이 세련된 컬러 피커를 구현하는 【React】

소개

<input type="color" /> 를 사용하면 컬러 피커 (사용자에게 색상을 선택하게하는 UI)를 쉽게 구현할 수 있습니다. 외형이 너무 귀여워…

그렇게 생각해, 여러가지 시험해 디자인하는 방법을 짜내었으므로 남겨 둡니다.

결론

input 태그에 opacity: 0;를 설정하여 투명하게 만들고 div 태그로 둘러싸고 디자인합니다.

구현 예

React+TypeScript+TailwindCSS로 이번은 원형으로 디자인한 구현예입니다


color.tsx

const Color: React.VFC = () => {
  const [color, setColor] = useState<string>("#000000");

  return (
        <div
          className="w-8 h-8 rounded-full border border-gray-400"
          style={{ background: color }}
        >
          <input
            type="color"
            value={color}
            onChange={(e) => {
              setColor(e.target.value);
            }}
            className="w-full h-full opacity-0"
          />
        </div>
  );
};