@designbasekorea/ui 0.2.32 → 0.2.34

package/dist/index.js

@@ -2477,56 +2477,57 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'm', radius, full
 });
 Button.displayName = 'Button';
 
-// 톤별 색상 팔레트
+// 톤별 색상 팔레트 (Light Tone은 더 밝은 색상만 사용)
 const colorPalettes = {
     primary: {
-        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
+        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'], // blue-50 ~ blue-300 (더 밝게, blue-400 제거)
         vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
         dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
     },
     secondary: {
-        light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8'], // slate-50 ~ slate-400 (더 밝게)
+        light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1'], // slate-50 ~ slate-300 (더 밝게, slate-400 제거)
         vivid: ['#6b7280', '#4b5563', '#374151', '#1f2937', '#111827'], // gray-500 ~ gray-900
         dark: ['#0f0f0f', '#1a1a1a', '#262626', '#404040', '#525252'], // neutral-950 ~ neutral-600 (더 어둡게)
     },
     success: {
-        light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80'], // green-50 ~ green-400 (더 밝게)
+        light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac'], // green-50 ~ green-300 (더 밝게, green-400 제거)
         vivid: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d'], // green-500 ~ green-900
         dark: ['#052e16', '#14532d', '#166534', '#15803d', '#16a34a'], // green-950 ~ green-600 (더 어둡게)
     },
     warning: {
-        light: ['#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24'], // amber-50 ~ amber-400 (더 밝게)
+        light: ['#fffbeb', '#fef3c7', '#fde68a'], // amber-50 ~ amber-200 (더 밝게, amber-300 이상 제거)
         vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'], // amber-600 ~ amber-900
         dark: ['#451a03', '#78350f', '#92400e', '#b45309', '#d97706'], // amber-950 ~ amber-600 (더 어둡게)
     },
     error: {
-        light: ['#fef2f2', '#fecaca', '#fca5a5', '#f87171', '#f56565'], // red-50 ~ red-400 (더 밝게)
+        light: ['#fef2f2', '#fecaca', '#fca5a5'], // red-50 ~ red-200 (더 밝게, red-300 이상 제거)
         vivid: ['#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d'], // red-500 ~ red-900
         dark: ['#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626'], // red-950 ~ red-600 (더 어둡게)
     },
     info: {
-        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
+        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'], // blue-50 ~ blue-300 (더 밝게, blue-400 제거)
         vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
         dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
     },
     purple: {
-        light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe', '#c084fc'], // purple-50 ~ purple-400 (더 밝게)
+        light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe'], // purple-50 ~ purple-300 (더 밝게, purple-400 제거)
         vivid: ['#a855f7', '#9333ea', '#7c3aed', '#6d28d9', '#5b21b6'], // purple-600 ~ purple-900
         dark: ['#3b0764', '#581c87', '#6b21a8', '#7c3aed', '#9333ea'], // purple-950 ~ purple-600 (더 어둡게)
     },
     ocean: {
-        light: ['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf'], // teal-50 ~ teal-400 (더 밝게)
+        light: ['#f0fdfa', '#ccfbf1', '#99f6e4'], // teal-50 ~ teal-200 (더 밝게, teal-300 이상 제거)
         vivid: ['#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a'], // teal-500 ~ teal-900
         dark: ['#042f2e', '#134e4a', '#115e59', '#0f766e', '#0d9488'], // teal-950 ~ teal-600 (더 어둡게)
     },
     sunset: {
-        light: ['#fff7ed', '#fed7aa', '#fdba74', '#fb923c', '#f97316'], // orange-50 ~ orange-500 (더 밝게)
+        light: ['#fff7ed', '#fed7aa', '#fdba74'], // orange-50 ~ orange-200 (더 밝게, orange-300 이상 제거)
         vivid: ['#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12'], // orange-600 ~ orange-900
         dark: ['#431407', '#7c2d12', '#9a3412', '#c2410c', '#ea580c'], // orange-950 ~ orange-600 (더 어둡게)
     },
 };
-const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
-    const [gradientStyle, setGradientStyle] = React.useState({});
+const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', height = '600px', blur = 80, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
+    // 블러 최소값 80으로 제한 (더 부드러운 그라데이션을 위해)
+    const minBlur = Math.max(80, blur);
     // 그라데이션 생성 함수
     const generateGradient = React.useMemo(() => {
         return () => {
@@ -2543,14 +2544,55 @@ const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', he
             const centerY = Math.random() * 100;
             return {
                 background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
-                filter: `blur(${blur}px)`,
-                transition: `all ${animationDuration}s ease-in-out`,
+                filter: `blur(${minBlur}px)`,
+                transition: animated ? `background ${animationDuration}s ease-in-out` : 'none', // 블러는 transition 적용 안 함
             };
         };
-    }, [scheme, tone, colorCount, blur, animationDuration]);
-    // 초기 그라데이션 및 애니메이션
+    }, [scheme, tone, colorCount, minBlur, animationDuration, animated]);
+    // 초기 그라데이션 생성 함수
+    const createInitialGradient = React.useCallback(() => {
+        const schemeColors = colorPalettes[scheme][tone];
+        const numColors = Math.min(6, Math.max(3, colorCount));
+        const colors = [];
+        for (let i = 0; i < numColors; i++) {
+            const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
+            colors.push(randomColor);
+        }
+        const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
+        const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
+        const centerX = Math.random() * 100;
+        const centerY = Math.random() * 100;
+        return {
+            background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
+            filter: `blur(${minBlur}px)`,
+            transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+        };
+    }, [scheme, tone, colorCount, minBlur, animated, animationDuration]);
+    // 초기 그라데이션을 즉시 계산하여 설정 (useState 초기값 함수 사용)
+    const [gradientStyle, setGradientStyle] = React.useState(() => {
+        const schemeColors = colorPalettes[scheme][tone];
+        const numColors = Math.min(6, Math.max(3, colorCount));
+        const colors = [];
+        for (let i = 0; i < numColors; i++) {
+            const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
+            colors.push(randomColor);
+        }
+        const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
+        const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
+        const centerX = Math.random() * 100;
+        const centerY = Math.random() * 100;
+        return {
+            background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
+            filter: `blur(${minBlur}px)`,
+            transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+        };
+    });
+    // props 변경 시 그라데이션 업데이트
+    React.useEffect(() => {
+        setGradientStyle(createInitialGradient());
+    }, [createInitialGradient]);
+    // 애니메이션 업데이트
     React.useEffect(() => {
-        setGradientStyle(generateGradient());
         if (animated) {
             const interval = setInterval(() => {
                 setGradientStyle(generateGradient());