@designbasekorea/ui 0.2.18 → 0.2.19

package/dist/index.esm.js

@@ -5286,8 +5286,16 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
     const [alpha, setAlpha] = useState(100);
     const [colorFormat, setColorFormat] = useState('hex');
     const [isCopied, setIsCopied] = useState(false);
-    const [inputValue, setInputValue] = useState(defaultValue);
+    const [inputValue, setInputValue] = useState(value || defaultValue);
     const pickerRef = useRef(null);
+    // 초기화: defaultValue가 있으면 HSL 값으로 변환
+    useEffect(() => {
+        const initialColor = value || defaultValue;
+        if (initialColor) {
+            updateHSLFromHex(initialColor);
+            setInputValue(initialColor);
+        }
+    }, []); // 컴포넌트 마운트 시에만 실행
     // value prop이 변경되면 업데이트
     useEffect(() => {
         if (value) {
@@ -5314,7 +5322,7 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
             b: parseInt(result[3], 16)
         } : null;
     };
-    // RGB를 HSL로 변환
+    // RGB를 HSL로 변환 (정밀도 개선)
     const rgbToHsl = (r, g, b) => {
         r /= 255;
         g /= 255;
@@ -5336,9 +5344,14 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
                     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;
@@ -5349,10 +5362,14 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         };
         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();
     };
     // 현재 포맷에 따른 색상 문자열 반환
@@ -5425,8 +5442,9 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
         setInputValue(newValue);
         // HEX 값이 유효하면 실시간으로 색상 업데이트
         if (/^#[0-9A-F]{6}$/i.test(newValue)) {
-            handleColorChange(newValue.toUpperCase());
-            updateHSLFromHex(newValue);
+            const normalizedHex = newValue.toUpperCase();
+            handleColorChange(normalizedHex);
+            updateHSLFromHex(normalizedHex);
         }
     };
     // 입력 필드에서 포커스 아웃 시 검증 및 적용