ColorPicker

색상을 선택하고 다양한 포맷으로 출력하는 컴포넌트 (레이블 지원)

개요

iCignal ColorPicker는 Foundation ColorPicker를 확장하여 FormItem 래핑을 통해 레이블, 필수 표시, 설명, 에러 메시지를 제공합니다.

주요 특징

• ✅ 레이블 제공: label, labelWidth, orientation으로 레이블 배치
• ✅ 필수 표시: required로 필수 입력 표시
• ✅ 에러 메시지: error로 유효성 검증 메시지 표시
• ✅ 설명 텍스트: description으로 필드 설명 추가
• ✅ 색상 선택: 팔레트에서 마우스로 색상 선택
• ✅ 색상 코드 입력: HEX, RGB, HSL, OKLCH 코드 직접 입력
• ✅ 트리거 값 표시: 선택된 색상이 outputFormat 기반으로 트리거에 표시
• ✅ 투명도 조절: Alpha 채널 조절 지원
• ✅ EyeDropper: 화면에서 색상 추출

사용 예시

레이블 제공

<ColorPicker
  label="테마 색상"
  labelWidth={120}
  defaultValue="#3b82f6"
  placeholder="색상 선택"
/>
<ColorPicker
  label="Primary"
  labelWidth={120}
  required
  defaultValue="#8b5cf6"
/>

에러 및 설명

<ColorPicker
  label="배경색"
  labelWidth={120}
  description="페이지 배경 색상을 선택하세요."
  defaultValue="#f8fafc"
/>
<ColorPicker
  label="강조색"
  labelWidth={120}
  required
  error="색상을 선택해주세요."
/>

트리거에 값 표시

색상이 선택되면 트리거에 outputFormat 기반으로 포맷된 색상 값이 표시됩니다.

<ColorPicker label="HEX" labelWidth={120} defaultValue="#3b82f6" outputFormat="hex" />
<ColorPicker label="RGB" labelWidth={120} defaultValue="#ef4444" outputFormat="rgb" />

투명도 조절

<ColorPicker
  label="투명도 포함"
  labelWidth={120}
  defaultValue="#ef4444"
  showAlpha={true}
/>
<ColorPicker
  label="투명도 없음"
  labelWidth={120}
  defaultValue="#22c55e"
  showAlpha={false}
/>

API Reference

Props

Foundation ColorPicker의 모든 Props를 상속하며, FormItem Props가 추가됩니다.

Events

기본 사용법

import { ColorPicker } from "@vortex/ui-icignal"
 
<ColorPicker label="테마 색상" labelWidth={120} defaultValue="#3b82f6" />
<ColorPicker
  label="배경색"
  labelWidth={120}
  required
  description="페이지 배경 색상"
  defaultValue="#f8fafc"
/>

접근성

권장 사항

• ✅ label을 통해 입력 목적 전달
• ✅ 키보드: Tab으로 컨트롤 이동, Enter로 Popover 열기/닫기
• ✅ 색상 코드 직접 입력으로 정확한 값 지정 가능
• ❌ 색상만으로 정보를 전달하지 않도록 주의

관련 컴포넌트

• Input: 텍스트 입력
• Select: 드롭다운 선택