# Component/ColorPicker

> Props: component-colorpicker.props.txt

## Examples


### 기본

```tsx
{
  argTypes: {
    value: {
      control: {
        type: 'color'
      }
    },
    defaultValue: {
      control: {
        type: 'color'
      }
    },
    alpha: {
      control: {
        type: 'boolean'
      }
    },
    hueOnly: {
      control: {
        type: 'boolean'
      }
    }
  },
  render: args => {
    const [color, setColor] = useState<string | undefined>(args.value);
    useEffect(() => {
      setColor(args.value);
    }, [args.value]);
    return <Stack direction='column' gap={20}>
        <Stack direction='column'>
          <BaseText>기본(초기화) 색상: {args.defaultValue || '미지정'}</BaseText>
          <BaseText>선택된 색상: {color}</BaseText>
        </Stack>
        <Divider />
        <ColorPicker {...args} value={color} onChange={setColor} />
      </Stack>;
  },
  name: '기본',
  args: {
    alpha: true,
    hueOnly: false,
    preset: [{
      label: '색상 선택',
      colors: [{
        label: '와인',
        color: '#950000'
      }, {
        label: '다크레드',
        color: '#C10000'
      }, {
        label: '미디엄레드',
        color: '#E32424'
      }, {
        label: '레드',
        color: '#FF5252'
      }, {
        label: '라이트레드',
        color: '#FF7171'
      }, {
        label: '프러시안블루',
        color: '#0058FF'
      }, {
        label: '블루',
        color: '#3A7EFF'
      }, {
        label: '오션블루',
        color: '#2EACD3'
      }, {
        label: '소라',
        color: '#92BCFC'
      }, {
        label: '베이비블루',
        color: '#C9DEFF'
      }, {
        label: '그린',
        color: '#3CC75E'
      }, {
        label: '연두',
        color: '#9CE390'
      }, {
        label: '라임',
        color: '#C7FF50'
      }, {
        label: '민트',
        color: '#6EDFA9'
      }, {
        label: '카키',
        color: '#678E61'
      }, {
        label: '다크오렌지',
        color: '#EB5414'
      }, {
        label: '코랄',
        color: '#FF6E4F'
      }, {
        label: '오렌지',
        color: '#FF9635'
      }, {
        label: '라이트오렌지',
        color: '#FFA858'
      }, {
        label: '치즈',
        color: '#FFC48E'
      }, {
        label: '핫핑크',
        color: '#FF0099'
      }, {
        label: '핑크',
        color: '#FF74B6'
      }, {
        label: '베이비핑크',
        color: '#FFCFF2'
      }, {
        label: '피치',
        color: '#FF9399'
      }, {
        label: '인디핑크',
        color: '#FFC1C5'
      }, {
        label: '다크바이올렛',
        color: '#7111D1'
      }, {
        label: '바이올렛',
        color: '#A860F0'
      }, {
        label: '퍼플',
        color: '#A300EF'
      }, {
        label: '라이트퍼플',
        color: '#E497FF'
      }, {
        label: '라이트바이올렛',
        color: '#E4C9FF'
      }, {
        label: '다크네이비',
        color: '#00144A'
      }, {
        label: '오션네이비',
        color: '#00415E'
      }, {
        label: '미디엄네이비',
        color: '#16327E'
      }, {
        label: '네이비',
        color: '#29489D'
      }, {
        label: '라이트네이비',
        color: '#4D65A9'
      }, {
        label: '다크브라운',
        color: '#674D2F'
      }, {
        label: '브라운',
        color: '#9B7951'
      }, {
        label: '모카',
        color: '#9F6562'
      }, {
        label: '카멜',
        color: '#BB6A48'
      }, {
        label: '라이트브라운',
        color: '#BD8B75'
      }, {
        label: '다크베이지',
        color: '#E1CEA5'
      }, {
        label: '베이지',
        color: '#EFE3CA'
      }, {
        label: '아이보리',
        color: '#FDF5E5'
      }, {
        label: '크림',
        color: '#FFFBF4'
      }, {
        label: '오트밀',
        color: '#F5F2EB'
      }, {
        label: '머스타드',
        color: '#FFB800'
      }, {
        label: '미디엄옐로우',
        color: '#FFC700'
      }, {
        label: '옐로우',
        color: '#FFE249'
      }, {
        label: '라이트옐로우',
        color: '#FFF1A6'
      }, {
        label: '크림옐로우',
        color: '#FFF8D0'
      }, {
        label: '버터',
        color: '#FBEABA'
      }, {
        label: '라이트 스킨',
        color: '#FDE5D1'
      }]
    }, {
      label: '청바지',
      colors: [{
        label: '진청',
        color: '#1D4593'
      }, {
        label: '중청',
        color: '#5C88C9',
        disabled: true
      }, {
        label: '연청',
        color: '#B1C8EA'
      }, {
        label: '아이스청',
        color: '#E4ECF9'
      }, {
        label: '연그레이청',
        color: '#DEE2E6'
      }, {
        label: '진그레이청',
        color: '#94989C'
      }]
    }, {
      label: '주얼리',
      colors: [{
        label: '화이트 골드',
        color: '#F6F6F6',
        displayedColor: 'linear-gradient(180deg, #FFFFFF 0%, #D9D9D9 100%)'
      }, {
        label: '옐로우 골드',
        color: '#F0C072',
        displayedColor: 'linear-gradient(180deg, #FFDA9B 0%, #E2A94C 100%)'
      }, {
        label: '로즈 골드',
        color: '#E7B2A4',
        displayedColor: 'linear-gradient(180deg, #FFCBBD 0%, #D18E7C 100%)'
      }, {
        label: '샴페인 골드',
        color: '#E1C6A4',
        displayedColor: 'linear-gradient(180deg, #F8E0C2 0%, #D0AB7E 100%)'
      }, {
        label: '실버',
  
// ... (truncated)
```

### HueOnly

```tsx
{
  argTypes: {
    value: {
      control: { type: 'color' },
    },
    defaultValue: {
      control: { type: 'color' },
    },
    alpha: { control: { type: 'boolean' } },
    hueOnly: { control: { type: 'boolean' } },
  },
  render: (args) => {
    const [color, setColor] = useState<string | undefined>(args.value);

    useEffect(() => {
      setColor(args.value);
    }, [args.value]);

    return (
      <Stack direction='column' gap={20}>
        <Stack direction='column'>
          <BaseText>기본(초기화) 색상: {args.defaultValue || '미지정'}</BaseText>
          <BaseText>선택된 색상: {color}</BaseText>
        </Stack>
        <Divider />
        <ColorPicker {...args} value={color} onChange={setColor} />
      </Stack>
    );
  },
  name: '기본',
  args: {
    alpha: true,
    hueOnly: false,
    preset: [
      {
        label: '색상 선택',
        colors: [
          { label: '와인', color: '#950000' },
          { label: '다크레드', color: '#C10000' },
          { label: '미디엄레드', color: '#E32424' },
          { label: '레드', color: '#FF5252' },
          { label: '라이트레드', color: '#FF7171' },
          { label: '프러시안블루', color: '#0058FF' },
          { label: '블루', color: '#3A7EFF' },
          { label: '오션블루', color: '#2EACD3' },
          { label: '소라', color: '#92BCFC' },
          { label: '베이비블루', color: '#C9DEFF' },
          { label: '그린', color: '#3CC75E' },
          { label: '연두', color: '#9CE390' },
          { label: '라임', color: '#C7FF50' },
          { label: '민트', color: '#6EDFA9' },
          { label: '카키', color: '#678E61' },
          { label: '다크오렌지', color: '#EB5414' },
          { label: '코랄', color: '#FF6E4F' },
          { label: '오렌지', color: '#FF9635' },
          { label: '라이트오렌지', color: '#FFA858' },
          { label: '치즈', color: '#FFC48E' },
          { label: '핫핑크', color: '#FF0099' },
          { label: '핑크', color: '#FF74B6' },
          { label: '베이비핑크', color: '#FFCFF2' },
          { label: '피치', color: '#FF9399' },
          { label: '인디핑크', color: '#FFC1C5' },
          { label: '다크바이올렛', color: '#7111D1' },
          { label: '바이올렛', color: '#A860F0' },
          { label: '퍼플', color: '#A300EF' },
          { label: '라이트퍼플', color: '#E497FF' },
          { label: '라이트바이올렛', color: '#E4C9FF' },
          { label: '다크네이비', color: '#00144A' },
          { label: '오션네이비', color: '#00415E' },
          { label: '미디엄네이비', color: '#16327E' },
          { label: '네이비', color: '#29489D' },
          { label: '라이트네이비', color: '#4D65A9' },
          { label: '다크브라운', color: '#674D2F' },
          { label: '브라운', color: '#9B7951' },
          { label: '모카', color: '#9F6562' },
          { label: '카멜', color: '#BB6A48' },
          { label: '라이트브라운', color: '#BD8B75' },
          { label: '다크베이지', color: '#E1CEA5' },
          { label: '베이지', color: '#EFE3CA' },
          { label: '아이보리', color: '#FDF5E5' },
          { label: '크림', color: '#FFFBF4' },
          { label: '오트밀', color: '#F5F2EB' },
          { label: '머스타드', color: '#FFB800' },
          { label: '미디엄옐로우', color: '#FFC700' },
          { label: '옐로우', color: '#FFE249' },
          { label: '라이트옐로우', color: '#FFF1A6' },
          { label: '크림옐로우', color: '#FFF8D0' },
          { label: '버터', color: '#FBEABA' },
          { label: '라이트 스킨', color: '#FDE5D1' },
        ],
      },
      {
        label: '청바지',
        colors: [
          { label: '진청', color: '#1D4593' },
          { label: '중청', color: '#5C88C9', disabled: true },
          { label: '연청', color: '#B1C8EA' },
          { label: '아이스청', color: '#E4ECF9' },
          { label: '연그레이청', color: '#DEE2E6' },
          { label: '진그레이청', color: '#94989C' },
        ],
      },
      {
        label: '주얼리',
        colors: [
          {
            label: '화이트 골드',
            color: '#F6F6F6',
            displayedColor: 'linear-gradient(180deg, #FFFFFF 0%, #D9D9D9 100%)',
          },
          {
            label: '옐로우 골드',
            color: '#F0C072',
            displayedColor: 'linear-gradient(180deg, #FFDA9B 0%, #E2A94C 100%)',
          },
          {
            label: '로즈 골드',
            color: '#E7B2A4',
            displayedColor: 'linear-gradient(180deg, #FFCBBD 0%, #D18E7C 100%)',
          },
          {
            label: '샴페인 골드',
            color: '#E1C6A4',
            displayedColor: 'linear-gradient(180deg, #F8E0C2 0%, #D0AB7E 100%)',
          },
          { label: '실버', color: '#E1E1E1', displayedColor: 'linear-gradient(180deg, #F3F3F3 0%, #CACACA 100%)' },
        ],
      },
      {
        label: '알파',
        colors: [
          { label: '화이트 골드', color: '#F6F6F67a' },
          { label: '옐로우 골드', color: '#F0C0727a', disabled: true },
          { label: '로즈 골드', color: '#E7B2A47a' },
          { label: '샴페인 골드', color: '#E1C6A47a' },
          { label: '실버', color: '#E1E1E17a' },
        ],
      },
    ],
  },
  args: {
    hueOnly: true,
    defaultValue: '#0000FF',
    value: '#FF0000',
    alpha: true
  },
  name: 'HueOnly'
}
```

### Opener Trigger Event

```tsx
{
  render: () => {
    const [color, setColor] = useState<string>('#F400B5');
    return <Stack direction='column' gap={20}>
        <Stack direction='column' gap={12}>
          <BaseText>openerTriggerEvent: 기본 Click</BaseText>
          <ColorPicker value={color} onChange={setColor} />
        </Stack>
        <Stack direction='column' gap={12}>
          <BaseText>openerTriggerEvent: none</BaseText>
          <ColorPicker value={color} onChange={setColor} openerTriggerEvent='none' />
        </Stack>
      </Stack>;
  }
}
```

### 상태별 형태

```tsx
{
  render: () => {
    const [color, setColor] = useState<string>();
    const [color2, setColor2] = useState<string>('#F400B5');
    return <Stack direction='column' gap={20}>
        <Stack gap={12} align='center'>
          <ColorPicker value={color} onChange={setColor} />
          <ColorPicker size='xsmall' value={color} onChange={setColor} />
          <ColorPicker size='xxsmall' value={color} onChange={setColor} />
          <ColorPicker value={color2} onChange={setColor2} />
          <ColorPicker size='xsmall' value={color2} onChange={setColor2} />
          <ColorPicker size='xxsmall' value={color2} onChange={setColor2} />
        </Stack>
        <Stack gap={12} align='center'>
          <ColorPicker value={color} onChange={setColor} disabled />
          <ColorPicker size='xsmall' value={color} onChange={setColor} disabled />
          <ColorPicker size='xxsmall' value={color} onChange={setColor} disabled />
          <ColorPicker value={color2} onChange={setColor2} disabled />
          <ColorPicker size='xsmall' value={color2} onChange={setColor2} disabled />
          <ColorPicker size='xxsmall' value={color2} onChange={setColor2} disabled />
        </Stack>
        <Stack gap={12}></Stack>
      </Stack>;
  },
  name: '상태별 형태'
}
```