aidev
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
/**
|
|
* 색상 선택 패널 — 기존 스와치 팔레트 + 하단 고급 색상 팔레트
|
|
*/
|
|
import React from 'react';
|
|
import { COLOR_PALETTE } from '../utils/plotColorUtils';
|
|
import AdvancedColorPicker from './AdvancedColorPicker';
|
|
|
|
export interface ColorPickerPanelProps {
|
|
hex6: string;
|
|
onHexChange: (hex6: string) => void;
|
|
/** false면 스와치 그리드만 숨김 (고급 팔레트만) */
|
|
showQuickPalette?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const ColorPickerPanel: React.FC<ColorPickerPanelProps> = ({
|
|
hex6,
|
|
onHexChange,
|
|
showQuickPalette = true,
|
|
className = '',
|
|
}) => (
|
|
<div className={`cpp-panel ${className}`.trim()}>
|
|
{showQuickPalette && (
|
|
<div className="cpp-quick-palette">
|
|
<div className="plsp-palette cpp-palette-grid">
|
|
{COLOR_PALETTE.map(c => (
|
|
<button
|
|
key={c}
|
|
type="button"
|
|
className={`plsp-color-cell${hex6.toUpperCase() === c.toUpperCase() ? ' selected' : ''}`}
|
|
style={{ background: c }}
|
|
title={c}
|
|
onClick={() => onHexChange(c)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="cpp-advanced-divider" aria-hidden />
|
|
<AdvancedColorPicker hex6={hex6} onChange={onHexChange} />
|
|
</div>
|
|
);
|
|
|
|
export default ColorPickerPanel;
|