@designbasekorea/ui 0.2.22 → 0.2.25

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, useLayoutEffect, forwardRef, useId, createContext } from 'react';
-import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, PaletteIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, FileBlankIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, CaretUpdownFilledIcon, DeleteIcon, WarningIcon, InfoIcon } from '@designbasekorea/icons';
+import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, EyedropperIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, FileBlankIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, CaretUpdownFilledIcon, DeleteIcon, WarningIcon, InfoIcon } from '@designbasekorea/icons';
 import { flushSync, createPortal } from 'react-dom';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -5277,247 +5277,366 @@ const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', delet
 };
 Chip.displayName = 'Chip';
 
-const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = false, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, className, }) => {
-    const [selectedColor, setSelectedColor] = useState(value || defaultValue);
+/** 유틸 */
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const hexToRgb = (hex) => {
+    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+    if (!m)
+        return null;
+    return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+};
+const rgbToHex = (r, g, b) => {
+    const toHex = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+};
+const rgbToHsv = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0));
+                break;
+            case g:
+                h = ((b - r) / d + 2);
+                break;
+            case b:
+                h = ((r - g) / d + 4);
+                break;
+        }
+        h *= 60;
+    }
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    return { h: Math.round(h * 100) / 100, s: Math.round(s * 10000) / 100, v: Math.round(v * 10000) / 100 };
+};
+const hsvToRgb = (h, s, v) => {
+    s /= 100;
+    v /= 100;
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+    let rp = 0, gp = 0, bp = 0;
+    if (h >= 0 && h < 60) {
+        rp = c;
+        gp = x;
+        bp = 0;
+    }
+    else if (h < 120) {
+        rp = x;
+        gp = c;
+        bp = 0;
+    }
+    else if (h < 180) {
+        rp = 0;
+        gp = c;
+        bp = x;
+    }
+    else if (h < 240) {
+        rp = 0;
+        gp = x;
+        bp = c;
+    }
+    else if (h < 300) {
+        rp = x;
+        gp = 0;
+        bp = c;
+    }
+    else {
+        rp = c;
+        gp = 0;
+        bp = x;
+    }
+    return { r: Math.round((rp + m) * 255), g: Math.round((gp + m) * 255), b: Math.round((bp + m) * 255) };
+};
+const rgbToHsl = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0));
+                break;
+            case g:
+                h = ((b - r) / d + 2);
+                break;
+            case b:
+                h = ((r - g) / d + 4);
+                break;
+        }
+        h *= 60;
+    }
+    return { h: Math.round(h * 100) / 100, s: Math.round(s * 10000) / 100, l: Math.round(l * 10000) / 100 };
+};
+const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, disabled = false, readonly = false, onChange, onApply, onCancel, className, }) => {
+    /** 내부 상태 (HSV + alpha%) */
+    const [h, setH] = useState(211);
+    const [s, setS] = useState(100);
+    const [v, setV] = useState(50);
+    const [a, setA] = useState(100);
     const [isOpen, setIsOpen] = useState(false);
-    const [hue, setHue] = useState(211);
-    const [saturation, setSaturation] = useState(100);
-    const [lightness, setLightness] = useState(50);
-    const [alpha, setAlpha] = useState(100);
-    const [colorFormat, setColorFormat] = useState('hex');
+    const [format, setFormat] = useState('hex');
     const [isCopied, setIsCopied] = useState(false);
-    const [inputValue, setInputValue] = useState(value || defaultValue);
+    // 하단 컬러 인풋(문자열), 알파 인풋(문자열) – 엔터로만 확정
+    const [colorInput, setColorInput] = useState('');
+    const [alphaInput, setAlphaInput] = useState('100');
+    // 모달용 임시 상태 (적용/취소 버튼용)
+    const [tempColor, setTempColor] = useState('');
     const pickerRef = useRef(null);
-    // 초기화: defaultValue가 있으면 HSL 값으로 변환
+    const areaRef = useRef(null);
+    const dragging = useRef(false);
+    /** 초기화 */
     useEffect(() => {
-        const initialColor = value || defaultValue;
-        if (initialColor) {
-            updateHSLFromHex(initialColor);
-            setInputValue(initialColor);
+        const initial = (value || defaultValue).toUpperCase();
+        const rgb = hexToRgb(initial);
+        if (rgb) {
+            const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
+            setH(h);
+            setS(s);
+            setV(v);
+            setColorInput(initial);
+            setAlphaInput('100');
         }
-    }, []); // 컴포넌트 마운트 시에만 실행
-    // value prop이 변경되면 업데이트
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    /** 외부 value 변화 */
     useEffect(() => {
-        if (value) {
-            setSelectedColor(value);
-            updateHSLFromHex(value);
-        }
-    }, [value]);
-    // HEX를 HSL로 변환
-    const updateHSLFromHex = (hex) => {
-        const rgb = hexToRgb(hex);
+        if (!value)
+            return;
+        const rgb = hexToRgb(value);
         if (rgb) {
-            const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
-            setHue(hsl.h);
-            setSaturation(hsl.s);
-            setLightness(hsl.l);
-        }
-    };
-    // HEX를 RGB로 변환
-    const hexToRgb = (hex) => {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : null;
-    };
-    // RGB를 HSL로 변환 (정밀도 개선)
-    const rgbToHsl = (r, g, b) => {
-        r /= 255;
-        g /= 255;
-        b /= 255;
-        const max = Math.max(r, g, b), min = Math.min(r, g, b);
-        let h = 0, s = 0, l = (max + min) / 2;
-        if (max !== min) {
-            const d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-            switch (max) {
-                case r:
-                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-                    break;
-                case g:
-                    h = ((b - r) / d + 2) / 6;
-                    break;
-                case b:
-                    h = ((r - g) / d + 4) / 6;
-                    break;
-            }
+            const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
+            setH(h);
+            setS(s);
+            setV(v);
         }
-        // 정밀도 개선: 반올림 대신 더 정확한 계산
-        return {
-            h: Math.round(h * 360 * 100) / 100,
-            s: Math.round(s * 100 * 100) / 100,
-            l: Math.round(l * 100 * 100) / 100
-        };
-    };
-    // HSL을 RGB로 변환 (정밀도 개선)
-    const hslToRgb = (h, s, l) => {
-        l /= 100;
-        const a = s * Math.min(l, 1 - l) / 100;
-        const f = (n) => {
-            const k = (n + h / 30) % 12;
-            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-            return Math.round(255 * color);
-        };
-        return { r: f(0), g: f(8), b: f(4) };
-    };
-    // HSL을 HEX로 변환 (정밀도 개선)
-    const hslToHex = (h, s, l) => {
-        const rgb = hslToRgb(h, s, l);
-        const toHex = (n) => {
-            // RGB 값을 0-255 범위로 제한하고 HEX로 변환
-            const clamped = Math.max(0, Math.min(255, Math.round(n)));
-            return clamped.toString(16).padStart(2, '0');
+    }, [value]);
+    /** 파생값 */
+    const rgb = useMemo(() => hsvToRgb(h, s, v), [h, s, v]);
+    const hex = useMemo(() => rgbToHex(rgb.r, rgb.g, rgb.b), [rgb]);
+    const hsl = useMemo(() => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb]);
+    /** 표시 문자열 */
+    const formatted = useMemo(() => {
+        const alpha = a / 100;
+        switch (format) {
+            case 'hex': return hex;
+            case 'rgb': return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+            case 'rgba': return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
+            case 'hsl': return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+            case 'hsla': return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`;
+            default: return hex;
+        }
+    }, [format, hex, rgb, hsl, a]);
+    /** 외부 onChange 및 인풋 동기화 */
+    useEffect(() => {
+        onChange?.(formatted);
+        setColorInput(formatted.toUpperCase());
+        setAlphaInput(String(a));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [formatted]);
+    /** 드롭다운 외부 클릭 닫기 */
+    useEffect(() => {
+        const handler = (e) => {
+            if (pickerRef.current && !pickerRef.current.contains(e.target))
+                setIsOpen(false);
         };
-        return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase();
-    };
-    // 현재 포맷에 따른 색상 문자열 반환
-    const getFormattedColor = () => {
-        const rgb = hslToRgb(hue, saturation, lightness);
-        const alphaValue = alpha / 100;
-        switch (colorFormat) {
-            case 'hex':
-                return hslToHex(hue, saturation, lightness);
-            case 'rgb':
-                return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-            case 'rgba':
-                return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaValue.toFixed(2)})`;
-            case 'hsl':
-                return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-            case 'hsla':
-                return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alphaValue.toFixed(2)})`;
-            default:
-                return hslToHex(hue, saturation, lightness);
-        }
-    };
-    // 색상 변경 핸들러
-    const handleColorChange = (newColor) => {
-        setSelectedColor(newColor);
-        onChange?.(newColor);
-    };
-    // Hue 슬라이더 변경
-    const handleHueChange = (e) => {
-        const newHue = parseInt(e.target.value);
-        setHue(newHue);
-        const newColor = hslToHex(newHue, saturation, lightness);
-        handleColorChange(newColor);
-    };
-    // Alpha 슬라이더 변경
-    const handleAlphaChange = (e) => {
-        const newAlpha = parseInt(e.target.value);
-        setAlpha(newAlpha);
-        const newColor = getFormattedColorWithAlpha(newAlpha);
-        handleColorChange(newColor);
-    };
-    // Alpha 값을 포함한 색상 문자열 반환
-    const getFormattedColorWithAlpha = (alphaVal) => {
-        const rgb = hslToRgb(hue, saturation, lightness);
-        const alphaValue = alphaVal / 100;
-        if (colorFormat === 'rgba') {
-            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alphaValue.toFixed(2)})`;
-        }
-        else if (colorFormat === 'hsla') {
-            return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alphaValue.toFixed(2)})`;
+        if (isOpen && type === 'dropdown')
+            document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [isOpen, type]);
+    /** 컬러 필드 핸들링 */
+    const updateFromArea = (clientX, clientY) => {
+        const el = areaRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const x = clamp(clientX - rect.left, 0, rect.width);
+        const y = clamp(clientY - rect.top, 0, rect.height);
+        const newS = Math.round((x / rect.width) * 100);
+        const newV = Math.round(100 - (y / rect.height) * 100);
+        setS(newS);
+        setV(newV);
+    };
+    const onAreaMouseDown = (e) => { dragging.current = true; updateFromArea(e.clientX, e.clientY); };
+    const onAreaMouseMove = (e) => { if (dragging.current)
+        updateFromArea(e.clientX, e.clientY); };
+    const onAreaMouseUp = () => { dragging.current = false; };
+    const onAreaLeave = () => { dragging.current = false; };
+    const onAreaTouchStart = (e) => { dragging.current = true; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
+    const onAreaTouchMove = (e) => { if (!dragging.current)
+        return; const t = e.touches[0]; updateFromArea(t.clientX, t.clientY); };
+    const onAreaTouchEnd = () => { dragging.current = false; };
+    /** 슬라이더 */
+    const onHueChange = (e) => setH(parseInt(e.target.value, 10));
+    const onAlphaChange = (e) => {
+        const newAlpha = parseInt(e.target.value, 10);
+        setA(newAlpha);
+        setAlphaInput(String(newAlpha)); // 실시간 동기화
+    };
+    /** 컬러 인풋: 엔터로만 확정 */
+    const tryCommitColorInput = () => {
+        const str = colorInput.trim();
+        // HEX
+        if (/^#([0-9A-Fa-f]{6})$/.test(str)) {
+            const rgb = hexToRgb(str);
+            const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+            setH(hsv.h);
+            setS(hsv.s);
+            setV(hsv.v);
+            return;
+        }
+        // rgb()
+        let m = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(str);
+        if (m) {
+            const r = clamp(parseInt(m[1], 10), 0, 255);
+            const g = clamp(parseInt(m[2], 10), 0, 255);
+            const b = clamp(parseInt(m[3], 10), 0, 255);
+            const hsv = rgbToHsv(r, g, b);
+            setH(hsv.h);
+            setS(hsv.s);
+            setV(hsv.v);
+            return;
+        }
+        // rgba()
+        m = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+)\s*\)$/i.exec(str);
+        if (m) {
+            const r = clamp(parseInt(m[1], 10), 0, 255);
+            const g = clamp(parseInt(m[2], 10), 0, 255);
+            const b = clamp(parseInt(m[3], 10), 0, 255);
+            const alpha = parseFloat(m[4]);
+            const hsv = rgbToHsv(r, g, b);
+            setH(hsv.h);
+            setS(hsv.s);
+            setV(hsv.v);
+            setA(Math.round(alpha * 100));
+            return;
+        }
+        // 실패 → 원래 값으로 복구
+        setColorInput(formatted.toUpperCase());
+    };
+    const onColorKeyDown = (e) => {
+        if (e.key === 'Enter')
+            tryCommitColorInput();
+    };
+    const onColorBlur = () => {
+        // 요구사항: 엔터로만 변경. 블러 시에는 값 복구만.
+        setColorInput(formatted.toUpperCase());
+    };
+    /** 알파 인풋: 엔터로만 확정 (0-100) */
+    const tryCommitAlphaInput = () => {
+        const n = Number(alphaInput.trim());
+        if (!Number.isNaN(n) && n >= 0 && n <= 100) {
+            setA(Math.round(n));
+            return;
+        }
+        // 실패 → 복구
+        setAlphaInput(String(a));
+    };
+    const onAlphaInputKeyDown = (e) => {
+        if (e.key === 'Enter')
+            tryCommitAlphaInput();
+    };
+    const onAlphaInputBlur = () => {
+        // 엔터로만 반영. 블러 시 복원.
+        setAlphaInput(String(a));
+    };
+    /** 복사 */
+    const onCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(formatted);
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 1600);
         }
-        return hslToHex(hue, saturation, lightness);
-    };
-    // 입력 필드 변경
-    const handleInputChange = (e) => {
-        const newValue = e.target.value.trim();
-        setInputValue(newValue);
-        // HEX 값이 유효하면 실시간으로 색상 업데이트
-        if (/^#[0-9A-F]{6}$/i.test(newValue)) {
-            const normalizedHex = newValue.toUpperCase();
-            handleColorChange(normalizedHex);
-            updateHSLFromHex(normalizedHex);
+        catch (e) {
+            console.error(e);
         }
     };
-    // 입력 필드에서 포커스 아웃 시 검증 및 적용
-    const handleInputBlur = () => {
-        let isValid = false;
-        // HEX 검증
-        if (/^#[0-9A-F]{6}$/i.test(inputValue)) {
-            handleColorChange(inputValue.toUpperCase());
-            updateHSLFromHex(inputValue);
-            isValid = true;
-        }
-        // RGB 검증
-        else if (/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.test(inputValue)) {
-            const match = inputValue.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-            if (match) {
-                const r = parseInt(match[1]);
-                const g = parseInt(match[2]);
-                const b = parseInt(match[3]);
-                if (r <= 255 && g <= 255 && b <= 255) {
-                    const hsl = rgbToHsl(r, g, b);
-                    setHue(hsl.h);
-                    setSaturation(hsl.s);
-                    setLightness(hsl.l);
-                    const hex = hslToHex(hsl.h, hsl.s, hsl.l);
-                    handleColorChange(hex);
-                    isValid = true;
-                }
+    /** EyeDropper */
+    const onEyedrop = async () => {
+        try {
+            if ('EyeDropper' in window) {
+                const eye = new window.EyeDropper();
+                const { sRGBHex } = await eye.open();
+                const rgb = hexToRgb(sRGBHex);
+                const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                setH(hsv.h);
+                setS(hsv.s);
+                setV(hsv.v);
             }
-        }
-        // RGBA 검증
-        else if (/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i.test(inputValue)) {
-            const match = inputValue.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i);
-            if (match) {
-                const r = parseInt(match[1]);
-                const g = parseInt(match[2]);
-                const b = parseInt(match[3]);
-                const a = parseFloat(match[4]);
-                if (r <= 255 && g <= 255 && b <= 255 && a >= 0 && a <= 1) {
-                    const hsl = rgbToHsl(r, g, b);
-                    setHue(hsl.h);
-                    setSaturation(hsl.s);
-                    setLightness(hsl.l);
-                    setAlpha(Math.round(a * 100));
-                    const hex = hslToHex(hsl.h, hsl.s, hsl.l);
-                    handleColorChange(hex);
-                    isValid = true;
-                }
+            else {
+                console.log('EyeDropper API is not supported');
             }
         }
-        // 유효하지 않으면 이전 값으로 복원
-        if (!isValid) {
-            setInputValue(getFormattedColor());
+        catch (e) {
+            console.error(e);
         }
     };
-    // 복사 기능
-    const handleCopy = async () => {
-        try {
-            await navigator.clipboard.writeText(getFormattedColor());
-            setIsCopied(true);
-            setTimeout(() => setIsCopied(false), 2000);
+    /** 모달용 핸들러 */
+    const handleModalOpen = () => {
+        if (type === 'modal') {
+            setTempColor(formatted);
         }
-        catch (err) {
-            console.error('Failed to copy:', err);
+        setIsOpen(true);
+    };
+    const handleModalApply = () => {
+        if (type === 'modal') {
+            onApply?.(formatted);
+            setIsOpen(false);
         }
     };
-    // 포맷 변경 시 inputValue 업데이트
-    useEffect(() => {
-        setInputValue(getFormattedColor());
-    }, [colorFormat, hue, saturation, lightness, alpha]);
-    // 외부 클릭 감지
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen && type === 'dropdown') {
-            document.addEventListener('mousedown', handleClickOutside);
+    const handleModalCancel = () => {
+        if (type === 'modal') {
+            // 원래 색상으로 복원
+            const rgb = hexToRgb(tempColor);
+            if (rgb) {
+                const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b);
+                setH(h);
+                setS(s);
+                setV(v);
+            }
+            onCancel?.();
+            setIsOpen(false);
         }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen, type]);
-    const togglePicker = () => {
-        if (disabled || readonly)
-            return;
-        setIsOpen(!isOpen);
+    };
+    /** 배경 스타일 */
+    const hueTrackStyle = {
+        background: `linear-gradient(to right,
+      hsl(0,100%,50%),
+      hsl(60,100%,50%),
+      hsl(120,100%,50%),
+      hsl(180,100%,50%),
+      hsl(240,100%,50%),
+      hsl(300,100%,50%),
+      hsl(360,100%,50%))`,
+    };
+    const areaBackground = {
+        backgroundImage: `
+      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),
+      linear-gradient(to right, #ffffff, hsl(${h}, 100%, 50%))
+    `,
+    };
+    /** ✔︎ 알파 트랙: 색상 무관, 고정 흑백 그라디언트 */
+    const alphaTrackStyle = {
+        backgroundImage: `
+      linear-gradient(45deg, var(--db-border-base) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--db-border-base) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--db-border-base) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--db-border-base) 75%),
+      linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1))
+    `,
+        backgroundSize: '8px 8px,8px 8px,8px 8px,8px 8px,100% 100%',
+        backgroundPosition: '0 0,0 4px,4px -4px,-4px 0,0 0',
+        backgroundColor: 'var(--db-surface-base)',
     };
     const classes = clsx('designbase-color-picker', `designbase-color-picker--${size}`, `designbase-color-picker--${position}`, {
         'designbase-color-picker--disabled': disabled,
@@ -5525,62 +5644,15 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         'designbase-color-picker--open': isOpen,
         'designbase-color-picker--no-input': !showInput,
     }, className);
-    // 메인 컬러 선택 영역 클릭 핸들러
-    const handleColorAreaClick = (e) => {
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        // 좌측은 채도 낮고, 우측은 채도 최대치
-        const saturation = Math.round((x / rect.width) * 100);
-        // 위로는 밝기 최대, 아래로는 밝기 어둡게
-        const lightness = Math.round(100 - (y / rect.height) * 100);
-        setSaturation(Math.max(0, Math.min(100, saturation)));
-        setLightness(Math.max(0, Math.min(100, lightness)));
-        const newColor = hslToHex(hue, saturation, lightness);
-        handleColorChange(newColor);
-    };
-    // 스포이드 기능 (색상 추출)
-    const handleEyedropperClick = async () => {
-        try {
-            // EyeDropper API 지원 확인
-            if ('EyeDropper' in window) {
-                const eyeDropper = new window.EyeDropper();
-                const result = await eyeDropper.open();
-                const hexColor = result.sRGBHex;
-                handleColorChange(hexColor);
-                updateHSLFromHex(hexColor);
-            }
-            else {
-                // EyeDropper API가 지원되지 않는 경우 대체 기능
-                console.log('EyeDropper API is not supported in this browser');
-                // 여기에 대체 기능을 구현할 수 있습니다
-            }
-        }
-        catch (err) {
-            console.error('EyeDropper failed:', err);
-        }
-    };
-    // 컬러 선택 UI
-    const renderColorSelector = () => (jsxs("div", { className: "designbase-color-picker__selector", children: [jsx("div", { className: "designbase-color-picker__color-area", children: jsx("div", { className: "designbase-color-picker__color-field", style: {
-                        background: `linear-gradient(to right, 
-                            hsl(${hue}, 0%, 50%), 
-                            hsl(${hue}, 100%, 50%)),
-                            linear-gradient(to bottom, 
-                            hsl(${hue}, 100%, 100%), 
-                            hsl(${hue}, 100%, 0%))`
-                    }, onClick: handleColorAreaClick, children: jsx("div", { className: "designbase-color-picker__color-pointer", style: {
-                            left: `${saturation}%`,
-                            top: `${100 - lightness}%`,
-                            backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`
-                        } }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", onClick: handleEyedropperClick, "aria-label": "Eyedropper tool", children: jsx(PaletteIcon, { size: 16 }) }), jsx("div", { className: "designbase-color-picker__hue-slider", children: jsx("input", { type: "range", min: "0", max: "360", value: hue, onChange: handleHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue" }) }), showAlpha && (jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsx("input", { type: "range", min: "0", max: "100", value: alpha, onChange: handleAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha" }) }))] }), jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsxs("select", { className: "designbase-color-picker__format-select", value: colorFormat, onChange: (e) => setColorFormat(e.target.value), children: [jsx("option", { value: "hex", children: "HEX" }), jsx("option", { value: "rgb", children: "RGB" }), jsx("option", { value: "rgba", children: "RGBA" }), jsx("option", { value: "hsl", children: "HSL" }), jsx("option", { value: "hsla", children: "HSLA" })] })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, className: "designbase-color-picker__value-input", placeholder: "#000000" }), showAlpha && (jsxs("span", { className: "designbase-color-picker__alpha-percent", children: [alpha, "%"] })), showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: handleCopy, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) }))] })] }));
-    return (jsxs("div", { ref: pickerRef, className: classes, children: [jsxs("div", { className: "designbase-color-picker__trigger", children: [jsx("div", { className: "designbase-color-picker__color-display", onClick: togglePicker, children: jsx("div", { className: "designbase-color-picker__color-box", style: {
-                                backgroundColor: showAlpha
-                                    ? `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
-                                    : `hsl(${hue}, ${saturation}%, ${lightness}%)`
-                            } }) }), showInput && (jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => {
-                            e.stopPropagation();
-                            handleCopy();
-                        }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) })), jsx("button", { type: "button", className: "designbase-color-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "Toggle color picker", children: jsx(ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-color-picker__dropdown", children: renderColorSelector() })), type === 'modal' && (jsx(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: renderColorSelector() }))] }));
+    const Trigger = (jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && handleModalOpen(), children: [jsx("div", { className: "designbase-color-picker__color-display", children: jsx("div", { className: "designbase-color-picker__color-box", style: { backgroundColor: showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})` : hex } }) }), showInput && (jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => { e.stopPropagation(); onCopy(); }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) })), jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsx(ChevronDownIcon, { size: 16 }) })] }));
+    const Selector = (jsxs("div", { className: "designbase-color-picker__selector", children: [jsx("div", { className: "designbase-color-picker__color-area", children: jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [jsx("button", { type: "button", className: "designbase-color-picker__eyedropper", onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsx(EyedropperIcon, { size: 16 }) }), jsx("div", { className: "designbase-color-picker__hue-slider", children: jsx("input", { type: "range", min: 0, max: 360, value: h, onChange: onHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue", style: hueTrackStyle }) }), showAlpha && (jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] }), jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
+                            { label: 'HEX', value: 'hex' },
+                            { label: 'RGB', value: 'rgb' },
+                            { label: 'RGBA', value: 'rgba' },
+                            { label: 'HSL', value: 'hsl' },
+                            { label: 'HSLA', value: 'hsla' },
+                        ], size: "s" })), jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, className: "designbase-color-picker__value-input", placeholder: "#000000" }), showAlpha && (jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsx("input", { type: "text", inputMode: "numeric", value: alphaInput, onChange: (e) => setAlphaInput(e.target.value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button", onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) }))] })] }));
+    return (jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [Selector, jsx(ModalFooter, { children: jsxs("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [jsx(Button, { variant: "secondary", size: "s", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "s", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
 };
 ColorPicker.displayName = 'ColorPicker';