일목균형표 수정

frontend/src/components/ColorInput.tsx

@@ -11,9 +11,10 @@ import ColorPickerPanel from './ColorPickerPanel';
 export interface ColorInputProps {
   value: string;
   onChange: (v: string) => void;
+  disabled?: boolean;
 }
 
-const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
+const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = false }) => {
   const { hex6, alpha } = parsePlotColor(value);
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -88,13 +89,15 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
   ) : null;
 
   return (
-    <div className="ism-color-wrap" ref={anchorRef}>
+    <div className={`ism-color-wrap${disabled ? ' ism-color-wrap--disabled' : ''}`} ref={anchorRef}>
       <button
         type="button"
         className="ism-color-swatch-btn"
         title="색상 선택"
         aria-expanded={open}
+        disabled={disabled}
         onClick={() => {
+          if (disabled) return;
           setOpen(v => !v);
           if (!open) requestAnimationFrame(updatePosition);
         }}
@@ -106,12 +109,14 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
         className="ism-color-picker ism-color-picker--compact"
         value={hex6}
         title="브라우저 색상 선택"
+        disabled={disabled}
         onChange={e => patchHex(e.target.value)}
       />
       <NumericParamInput
         className="ism-input ism-alpha-input"
         value={alpha}
         spec={getOpacityPercentSpec(alpha)}
+        disabled={disabled}
         onChange={patchAlpha}
       />
       <span className="ism-alpha-label">%</span>