@designbasekorea/ui 0.2.18 → 0.2.19

package/dist/index.umd.js

@@ -5287,8 +5287,16 @@
         const [alpha, setAlpha] = React.useState(100);
         const [colorFormat, setColorFormat] = React.useState('hex');
         const [isCopied, setIsCopied] = React.useState(false);
-        const [inputValue, setInputValue] = React.useState(defaultValue);
+        const [inputValue, setInputValue] = React.useState(value || defaultValue);
         const pickerRef = React.useRef(null);
+        // 초기화: defaultValue가 있으면 HSL 값으로 변환
+        React.useEffect(() => {
+            const initialColor = value || defaultValue;
+            if (initialColor) {
+                updateHSLFromHex(initialColor);
+                setInputValue(initialColor);
+            }
+        }, []); // 컴포넌트 마운트 시에만 실행
         // value prop이 변경되면 업데이트
         React.useEffect(() => {
             if (value) {
@@ -5315,7 +5323,7 @@
                 b: parseInt(result[3], 16)
             } : null;
         };
-        // RGB를 HSL로 변환
+        // RGB를 HSL로 변환 (정밀도 개선)
         const rgbToHsl = (r, g, b) => {
             r /= 255;
             g /= 255;
@@ -5337,9 +5345,14 @@
                         break;
                 }
             }
-            return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+            // 정밀도 개선: 반올림 대신 더 정확한 계산
+            return {
+                h: Math.round(h * 360 * 100) / 100,
+                s: Math.round(s * 100 * 100) / 100,
+                l: Math.round(l * 100 * 100) / 100
+            };
         };
-        // HSL을 RGB로 변환
+        // HSL을 RGB로 변환 (정밀도 개선)
         const hslToRgb = (h, s, l) => {
             l /= 100;
             const a = s * Math.min(l, 1 - l) / 100;
@@ -5350,10 +5363,14 @@
             };
             return { r: f(0), g: f(8), b: f(4) };
         };
-        // HSL을 HEX로 변환
+        // HSL을 HEX로 변환 (정밀도 개선)
         const hslToHex = (h, s, l) => {
             const rgb = hslToRgb(h, s, l);
-            const toHex = (n) => n.toString(16).padStart(2, '0');
+            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');
+            };
             return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`.toUpperCase();
         };
         // 현재 포맷에 따른 색상 문자열 반환
@@ -5426,8 +5443,9 @@
             setInputValue(newValue);
             // HEX 값이 유효하면 실시간으로 색상 업데이트
             if (/^#[0-9A-F]{6}$/i.test(newValue)) {
-                handleColorChange(newValue.toUpperCase());
-                updateHSLFromHex(newValue);
+                const normalizedHex = newValue.toUpperCase();
+                handleColorChange(normalizedHex);
+                updateHSLFromHex(normalizedHex);
             }
         };
         // 입력 필드에서 포커스 아웃 시 검증 및 적용