1. ColorPicker - 기본

ColorPicker 컴포넌트는 사용자가 색상을 선택하고 복사할 수 있도록 설계되었습니다.

미리 구성된 색상 팔레트를 사용하고싶다면 아래와 같이 사용하면 됩니다.

1.1. Import

import ColorPicker from "@components/ColorPicker/ColorPicker";

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import ColorPicker from "@components/ColorPicker/ColorPicker";

function Example() {
  return (
      <ColorPicker />
  );
}

export default Example;

2. ColorPickerUI - 커스터마이징

ColorPickerUI 컴포넌트는 사용자가 원하는 색상을 팔레트에 담은 후, 색상을 선택하고 복사할 수 있도록 설계되었습니다.

2.1. Import

import ColorPickerUI from '@components/ColorPicker/ColorPickerUI';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

import ColorPickerUI from '@components/ColorPicker/ColorPickerUI';

function Example() {
  return (
    <ColorPickerUI colors={["#ff0000", "#00ff00", "#0000ff"]} />
  );
}

export default Example;

2.3. Props

Prop	Description	Type	Default
`colors`	사용 가능한 색상 목록입니다. 지정하지 않고 싶다면 위의 colorpicker를 사용해야합니다.	`string[]`	필수
`selectColor`	색상이 선택되었을 때 호출되는 콜백 함수입니다.	`(color: string) => void`	None

3. GradientPicker

GradientPicker 컴포넌트는 그라데이션 색상을 선택하고 미리보기를 제공하며, 이를 복사할 수 있습니다.

3.1. Import

import GradientPicker from '@components/ColorPicker/GradientPicker';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

Preview

linear-gradient(to right, #ffffff, #000000)

import GradientPicker from '@components/ColorPicker/GradientPicker';

function Example() {
  return (
    <GradientPicker />
  );
}

export default Example;

3.3. Props

Prop	Description	Type	Default
`colors`	그라데이션의 시작과 끝 색상을 설정합니다.	`{ startColor: string; endColor: string; }`	{ startColor: "#ffffff", endColor: "#000000" }
`position`	그라데이션의 방향을 설정합니다.	`to right`,`to left`,`to bottom`,`to top`,`to bottom right`,`to bottom left`,`to top right`,`to top left`	`"to right"`

4. TwoPicker

TwoPicker 컴포넌트는 사용자가 ColorPicker와 GradientPicker 중 하나를 선택하여 사용할 수 있게 합니다.

4.1. Import

import TwoPicker from '@components/ColorPicker/TwoPicker';

4.2. Usage

기본 사용 예제는 아래와 같습니다:

Color

Gradient

import TwoPicker from '@components/ColorPicker/TwoPicker';

function Example() {
  return (
    <TwoPicker />
  );
}

export default Example;

4.3. Props

Prop	Description	Type	Default
`activePicker`	현재 활성화된 픽커를 설정합니다. "Color" 또는 "Gradient" 값을 가집니다.	`"Color" \| "Gradient"`	`"Color"`