ColorPicker

색상 선택 팝업을 통해 색상을 지정하는 컴포넌트

개요

Cals ColorPicker는 Foundation ColorPicker 프리미티브를 합성하여 CALS 제품의 색상 선택 UI를 선언적으로 구현하는 컴포넌트입니다. 투명도 슬라이더, 사전 정의 색상 목록, 폼 레이블 연동 등을 prop으로 제공합니다.

주요 특징

• ✅ controlled / uncontrolled: value/onChange 또는 defaultValue로 값 관리
• ✅ 투명도 지원: showAlpha로 투명도 슬라이더 표시/숨김
• ✅ 사전 정의 색상: predefineColors로 자주 쓰는 색상 빠르게 선택
• ✅ FormItem 내장: label/required/description/error prop으로 폼 레이블 자동 래핑
• ✅ 라벨 도움말: labelTooltip으로 레이블 옆 도움말 아이콘 표시
• ✅ 가시성/포커스 제어: visible prop, ref.focus()/blur()/element
• ✅ 디자인 토큰: 조건부 토큰 오버라이드 (prop이 있을 때만 적용)

기본 사용

색상 트리거를 클릭하면 색상 선택 팝업이 열립니다.

<ColorPicker defaultValue="#3B82F6" />

크기

size prop으로 트리거 크기를 지정합니다. xs / sm / md / lg / xl을 지원합니다.

<ColorPicker defaultValue="#EF4444" size="xs" />
<ColorPicker defaultValue="#F59E0B" size="sm" />
<ColorPicker defaultValue="#10B981" size="md" />
<ColorPicker defaultValue="#3B82F6" size="lg" />
<ColorPicker defaultValue="#8B5CF6" size="xl" />

읽기 전용 / 비활성화

readOnly 또는 disabled를 설정하면 팝업을 열 수 없습니다.

<ColorPicker defaultValue="#3B82F6" readOnly />
<ColorPicker defaultValue="#3B82F6" disabled />

투명도

showAlpha를 true로 설정하면 알파 슬라이더가 표시됩니다.

<ColorPicker defaultValue="#3B82F680" showAlpha />

사전 정의 색상

predefineColors로 자주 사용하는 색상 목록을 제공할 수 있습니다. 팝업 하단에 색상 스와치로 표시됩니다.

<ColorPicker
  defaultValue="#3B82F6"
  predefineColors={[
    "#EF4444", "#F59E0B", "#10B981",
    "#3B82F6", "#8B5CF6", "#EC4899",
    "#000000", "#FFFFFF",
  ]}
/>

레이블

title 또는 label prop으로 폼 레이블을 표시합니다. orientation으로 레이블 위치를 제어합니다.

<ColorPicker title="배경색" defaultValue="#3B82F6" />
<ColorPicker title="테마색" defaultValue="#10B981" orientation="horizontal" />
<ColorPicker title="필수 색상" defaultValue="#EF4444" required />

API

Props

Events

Ref

접근성

권장 사항

• ✅ label 또는 aria-label로 색상 선택기의 목적을 명확히 제공하세요.
• ✅ 필수 입력은 required로 설정하여 스크린 리더에 전달하세요.
• ✅ 팝업 내 색상 선택은 키보드로 조작 가능합니다.

관련 컴포넌트

• Foundation ColorPicker: 기본 색상 선택 프리미티브
• FormItem: 폼 레이블 래퍼
• Cals Input: 텍스트 입력 컴포넌트