goodchuck-utils 1.5.0 → 1.7.0

package/dist/components/dev/ZIndexDebugger.js

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react';
+/**
+ * z-index 값을 시각화하는 개발용 컴포넌트
+ * 페이지의 모든 요소의 z-index를 하이라이트하고 목록으로 표시합니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { ZIndexDebugger } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <ZIndexDebugger />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <ZIndexDebugger position="top-right" />}
+ * ```
+ */
+export default function ZIndexDebugger({ position = 'bottom-left' }) {
+    const [isActive, setIsActive] = useState(false);
+    const [elements, setElements] = useState([]);
+    const [hoveredElement, setHoveredElement] = useState(null);
+    useEffect(() => {
+        if (!isActive) {
+            setElements([]);
+            setHoveredElement(null);
+            return;
+        }
+        const scanElements = () => {
+            const allElements = document.querySelectorAll('*');
+            const elementsWithZIndex = [];
+            allElements.forEach((el) => {
+                if (!(el instanceof HTMLElement))
+                    return;
+                const computedStyle = window.getComputedStyle(el);
+                const zIndex = computedStyle.zIndex;
+                // z-index가 설정된 요소만 수집 (auto가 아닌 경우)
+                if (zIndex !== 'auto' && zIndex !== '0') {
+                    elementsWithZIndex.push({
+                        element: el,
+                        zIndex,
+                        tagName: el.tagName.toLowerCase(),
+                        id: el.id || undefined,
+                        className: el.className || undefined,
+                    });
+                }
+            });
+            // z-index 값으로 정렬 (높은 순)
+            elementsWithZIndex.sort((a, b) => {
+                const zA = parseInt(a.zIndex) || 0;
+                const zB = parseInt(b.zIndex) || 0;
+                return zB - zA;
+            });
+            setElements(elementsWithZIndex);
+        };
+        scanElements();
+        // DOM 변경 감지
+        const observer = new MutationObserver(scanElements);
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+        });
+        return () => observer.disconnect();
+    }, [isActive]);
+    // 호버된 요소 하이라이트
+    useEffect(() => {
+        if (!hoveredElement)
+            return;
+        const originalOutline = hoveredElement.style.outline;
+        const originalOutlineOffset = hoveredElement.style.outlineOffset;
+        hoveredElement.style.outline = '3px solid #f59e0b';
+        hoveredElement.style.outlineOffset = '2px';
+        return () => {
+            hoveredElement.style.outline = originalOutline;
+            hoveredElement.style.outlineOffset = originalOutlineOffset;
+        };
+    }, [hoveredElement]);
+    const positionStyles = {
+        'top-left': { top: 16, left: 16 },
+        'top-right': { top: 16, right: 16 },
+        'bottom-left': { bottom: 16, left: 16 },
+        'bottom-right': { bottom: 16, right: 16 },
+    };
+    const containerStyle = {
+        position: 'fixed',
+        ...positionStyles[position],
+        zIndex: 999999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    };
+    const buttonStyle = {
+        padding: '8px 16px',
+        backgroundColor: isActive ? '#ef4444' : '#3b82f6',
+        color: 'white',
+        border: 'none',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: 600,
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        transition: 'background-color 0.2s',
+    };
+    const panelStyle = {
+        marginTop: '8px',
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        width: '320px',
+        maxHeight: '400px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+    };
+    const headerStyle = {
+        padding: '12px 16px',
+        borderBottom: '1px solid #e5e7eb',
+        fontWeight: 'bold',
+        fontSize: '14px',
+        color: '#111827',
+        backgroundColor: '#f9fafb',
+    };
+    const listContainerStyle = {
+        overflowY: 'auto',
+        maxHeight: '350px',
+    };
+    const itemStyle = (isHovered) => ({
+        padding: '10px 16px',
+        borderBottom: '1px solid #f3f4f6',
+        cursor: 'pointer',
+        backgroundColor: isHovered ? '#fef3c7' : 'white',
+        transition: 'background-color 0.15s',
+    });
+    const zIndexBadgeStyle = {
+        display: 'inline-block',
+        padding: '2px 8px',
+        backgroundColor: '#dbeafe',
+        color: '#1e40af',
+        borderRadius: '6px',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        fontFamily: 'monospace',
+        marginRight: '8px',
+    };
+    const tagStyle = {
+        fontSize: '12px',
+        color: '#6b7280',
+        fontFamily: 'monospace',
+    };
+    const getElementLabel = (info) => {
+        let label = info.tagName;
+        if (info.id)
+            label += `#${info.id}`;
+        if (info.className && typeof info.className === 'string') {
+            const classes = info.className.split(' ').filter(Boolean).slice(0, 2);
+            if (classes.length > 0) {
+                label += `.${classes.join('.')}`;
+            }
+        }
+        return label.length > 40 ? label.slice(0, 40) + '...' : label;
+    };
+    const handleElementClick = (element) => {
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("button", { onClick: () => setIsActive(!isActive), style: buttonStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = isActive ? '#dc2626' : '#2563eb'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = isActive ? '#ef4444' : '#3b82f6') }, isActive ? '🔴 Z-Index 디버거 종료' : '🔍 Z-Index 디버거'),
+        isActive && (React.createElement("div", { style: panelStyle },
+            React.createElement("div", { style: headerStyle },
+                "\uD83D\uDCCA Z-Index \uBAA9\uB85D (",
+                elements.length,
+                "\uAC1C)"),
+            React.createElement("div", { style: listContainerStyle }, elements.length === 0 ? (React.createElement("div", { style: { padding: '20px', textAlign: 'center', color: '#9ca3af', fontSize: '13px' } }, "z-index\uAC00 \uC124\uC815\uB41C \uC694\uC18C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.")) : (elements.map((info, index) => (React.createElement("div", { key: index, style: itemStyle(hoveredElement === info.element), onMouseEnter: () => setHoveredElement(info.element), onMouseLeave: () => setHoveredElement(null), onClick: () => handleElementClick(info.element) },
+                React.createElement("div", null,
+                    React.createElement("span", { style: zIndexBadgeStyle }, info.zIndex),
+                    React.createElement("span", { style: tagStyle }, getElementLabel(info))))))))))));
+}

package/dist/components/dev/index.d.ts

@@ -5,4 +5,11 @@
  * production 환경에서는 제외하는 것을 권장합니다.
  */
 export { default as IdSelector } from './IdSelector';
+export { default as WindowSizeDisplay } from './WindowSizeDisplay';
+export { default as DevPanel } from './DevPanel';
+export { default as ZIndexDebugger } from './ZIndexDebugger';
+export { default as ApiLogger, addApiLog, clearApiLogs } from './ApiLogger';
+export { default as FormDevTools } from './FormDevTools';
+export type { FormDevToolsProps, FormState as FormDevToolsFormState } from './FormDevTools';
+export type { ApiLogEntry } from './ApiLogger';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dev/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,SAAS,IAAI,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5F,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/dev/index.js

@@ -5,3 +5,8 @@
  * production 환경에서는 제외하는 것을 권장합니다.
  */
 export { default as IdSelector } from './IdSelector';
+export { default as WindowSizeDisplay } from './WindowSizeDisplay';
+export { default as DevPanel } from './DevPanel';
+export { default as ZIndexDebugger } from './ZIndexDebugger';
+export { default as ApiLogger, addApiLog, clearApiLogs } from './ApiLogger';
+export { default as FormDevTools } from './FormDevTools';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goodchuck-utils",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,11 @@
   ],
   "scripts": {
     "prepare": "npm run build:tsc",
-    "prepublishOnly": "npm run test:run && npm run build:tsc",
+    "prepublishOnly": "npm run test:run && npm run clean && npm run build:tsc",
     "build": "npm run build",
     "build:tsc": "tsc",
+    "clean": "rm -rf dist",
+    "dev": "tsc --watch",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",