차트 설정 수정

frontend/src/components/ColorInput.tsx

@@ -12,9 +12,19 @@ export interface ColorInputProps {
   value: string;
   onChange: (v: string) => void;
   disabled?: boolean;
+  /** false — 인라인 네이티브 color input 숨김(설정 화면: OS 피커만 뜨는 문제 방지) */
+  showCompactNative?: boolean;
+  /** false — 바깥 클릭으로 닫지 않음(확인·✕·Esc 로만 닫기) */
+  closeOnClickOutside?: boolean;
 }
 
-const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = false }) => {
+const ColorInput: React.FC<ColorInputProps> = ({
+  value,
+  onChange,
+  disabled = false,
+  showCompactNative = true,
+  closeOnClickOutside = false,
+}) => {
   const { hex6, alpha } = parsePlotColor(value);
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -51,20 +61,19 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
   }, [open, updatePosition]);
 
   useEffect(() => {
-    if (!open) return;
+    if (!open || !closeOnClickOutside) return;
     const onDocPointer = (e: Event) => {
       const t = e.target as Node;
       if (anchorRef.current?.contains(t) || popoverRef.current?.contains(t)) return;
       setOpen(false);
     };
-    // 설정 모달 등이 bubble 단계에서 stopPropagation 하므로 capture 사용
     document.addEventListener('mousedown', onDocPointer, true);
     document.addEventListener('pointerdown', onDocPointer, true);
     return () => {
       document.removeEventListener('mousedown', onDocPointer, true);
       document.removeEventListener('pointerdown', onDocPointer, true);
     };
-  }, [open]);
+  }, [open, closeOnClickOutside]);
 
   const patchHex = (h: string) => onChange(formatPlotColor(h, alpha));
   const patchAlpha = (a: number) => onChange(formatPlotColor(hex6, a));
@@ -92,18 +101,25 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
           ✕
         </button>
       </div>
-      <div className="ism-color-popover-native">
-        <label className="ism-color-native-label">
-          <span className="ism-style-label">직접 선택</span>
-          <input
-            type="color"
-            className="ism-color-picker"
-            value={hex6}
-            onChange={e => patchHex(e.target.value)}
-          />
-        </label>
-      </div>
+      {showCompactNative && (
+        <div className="ism-color-popover-native">
+          <label className="ism-color-native-label">
+            <span className="ism-style-label">직접 선택</span>
+            <input
+              type="color"
+              className="ism-color-picker"
+              value={hex6}
+              onChange={e => patchHex(e.target.value)}
+            />
+          </label>
+        </div>
+      )}
       <ColorPickerPanel hex6={hex6} onHexChange={patchHex} />
+      <div className="ism-color-popover-footer">
+        <button type="button" className="plsp-popup-ok" onClick={closePopover}>
+          확인
+        </button>
+      </div>
     </div>
   ) : null;
 
@@ -123,14 +139,16 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
       >
         <span className="ism-color-swatch-preview" style={{ background: plotColorCss(value) }} />
       </button>
-      <input
-        type="color"
-        className="ism-color-picker ism-color-picker--compact"
-        value={hex6}
-        title="브라우저 색상 선택"
-        disabled={disabled}
-        onChange={e => patchHex(e.target.value)}
-      />
+      {showCompactNative && (
+        <input
+          type="color"
+          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}