goodchuck-utils 1.5.0 → 1.6.0

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

@@ -13,6 +13,7 @@ type Props = {
  *
  * @example
  * ```tsx
+ * // Vite 프로젝트
  * import { IdSelector } from 'goodchuck-utils/components/dev';
  *
  * function LoginPage() {
@@ -28,13 +29,21 @@ type Props = {
  *   return (
  *     <div>
  *       <LoginForm />
- *       {process.env.NODE_ENV === 'development' && (
+ *       {import.meta.env.DEV && (
  *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
  *       )}
  *     </div>
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ * )}
+ * ```
  */
 export default function IdSelector({ onLogin, infos }: Props): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"IdSelector.d.ts","sourceRoot":"","sources":["../../../src/components/dev/IdSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,qBAyC3D"}
+{"version":3,"file":"IdSelector.d.ts","sourceRoot":"","sources":["../../../src/components/dev/IdSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,qBAuH3D"}

package/dist/components/dev/IdSelector.js

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
  *
  * @example
  * ```tsx
+ * // Vite 프로젝트
  * import { IdSelector } from 'goodchuck-utils/components/dev';
  *
  * function LoginPage() {
@@ -19,16 +20,26 @@ import React, { useState } from 'react';
  *   return (
  *     <div>
  *       <LoginForm />
- *       {process.env.NODE_ENV === 'development' && (
+ *       {import.meta.env.DEV && (
  *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
  *       )}
  *     </div>
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ * )}
+ * ```
  */
 export default function IdSelector({ onLogin, infos }) {
     const [loading, setLoading] = useState(null);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [hoveredButton, setHoveredButton] = useState(null);
     const handleQuickLogin = async (info, index) => {
         setLoading(index);
         try {
@@ -38,15 +49,81 @@ export default function IdSelector({ onLogin, infos }) {
             setLoading(null);
         }
     };
-    return (React.createElement("div", { className: "fixed top-1/2 right-4 -translate-y-1/2 flex flex-col gap-3 p-4 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 min-w-[280px] z-50" },
-        React.createElement("div", { className: "text-gray-900 dark:text-gray-100 text-sm font-bold pb-2 border-b border-gray-200 dark:border-gray-700" }, "\uD83D\uDE80 \uAC1C\uBC1C\uC6A9 \uBE60\uB978 \uB85C\uADF8\uC778"),
-        infos.map((info, index) => (React.createElement("div", { key: index, className: "flex flex-col gap-2 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-500 transition-all" },
-            React.createElement("button", { onClick: () => handleQuickLogin(info, index), disabled: loading === index, className: "w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors disabled:cursor-not-allowed" }, loading === index ? '로그인 중...' : info.memo),
-            React.createElement("div", { className: "flex flex-col gap-1 text-xs text-gray-600 dark:text-gray-400 px-1" },
-                React.createElement("div", { className: "flex items-center gap-2" },
-                    React.createElement("span", { className: "font-semibold min-w-[24px]" }, "ID"),
-                    React.createElement("span", { className: "font-mono text-gray-700 dark:text-gray-300" }, info.id)),
-                React.createElement("div", { className: "flex items-center gap-2" },
-                    React.createElement("span", { className: "font-semibold min-w-[24px]" }, "PW"),
-                    React.createElement("span", { className: "font-mono text-gray-700 dark:text-gray-300" }, info.pw))))))));
+    const containerStyle = {
+        position: 'fixed',
+        top: '50%',
+        right: '16px',
+        transform: 'translateY(-50%)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '16px',
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        border: '1px solid #e5e7eb',
+        minWidth: '280px',
+        zIndex: 9999,
+    };
+    const headerStyle = {
+        color: '#111827',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        paddingBottom: '8px',
+        borderBottom: '1px solid #e5e7eb',
+    };
+    const getCardStyle = (index) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        padding: '12px',
+        backgroundColor: '#f9fafb',
+        borderRadius: '8px',
+        border: hoveredIndex === index ? '1px solid #60a5fa' : '1px solid #e5e7eb',
+        transition: 'all 0.2s',
+    });
+    const getButtonStyle = (index) => ({
+        width: '100%',
+        padding: '8px 16px',
+        backgroundColor: loading === index ? '#9ca3af' : hoveredButton === index ? '#2563eb' : '#3b82f6',
+        color: 'white',
+        fontWeight: 600,
+        borderRadius: '8px',
+        border: 'none',
+        cursor: loading === index ? 'not-allowed' : 'pointer',
+        transition: 'background-color 0.2s',
+    });
+    const infoContainerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+        fontSize: '12px',
+        color: '#6b7280',
+        paddingLeft: '4px',
+        paddingRight: '4px',
+    };
+    const infoRowStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    };
+    const labelStyle = {
+        fontWeight: 600,
+        minWidth: '24px',
+    };
+    const valueStyle = {
+        fontFamily: 'monospace',
+        color: '#374151',
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("div", { style: headerStyle }, "\uD83D\uDE80 \uAC1C\uBC1C\uC6A9 \uBE60\uB978 \uB85C\uADF8\uC778"),
+        infos.map((info, index) => (React.createElement("div", { key: index, style: getCardStyle(index), onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null) },
+            React.createElement("button", { onClick: () => handleQuickLogin(info, index), disabled: loading === index, style: getButtonStyle(index), onMouseEnter: () => setHoveredButton(index), onMouseLeave: () => setHoveredButton(null) }, loading === index ? '로그인 중...' : info.memo),
+            React.createElement("div", { style: infoContainerStyle },
+                React.createElement("div", { style: infoRowStyle },
+                    React.createElement("span", { style: labelStyle }, "ID"),
+                    React.createElement("span", { style: valueStyle }, info.id)),
+                React.createElement("div", { style: infoRowStyle },
+                    React.createElement("span", { style: labelStyle }, "PW"),
+                    React.createElement("span", { style: valueStyle }, info.pw))))))));
 }

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

@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Props = {
+    /** 표시 위치 (기본값: 'bottom-right') */
+    position?: Position;
+    /** 커스텀 스타일 */
+    style?: CSSProperties;
+};
+/**
+ * 현재 윈도우 크기를 화면에 표시하는 개발용 컴포넌트
+ * 반응형 디버깅에 유용합니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { WindowSizeDisplay } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <WindowSizeDisplay />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <WindowSizeDisplay />}
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 커스텀 스타일 및 위치
+ * <WindowSizeDisplay
+ *   position="top-left"
+ *   style={{ backgroundColor: 'red', color: 'white' }}
+ * />
+ * ```
+ */
+export default function WindowSizeDisplay({ position, style }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=WindowSizeDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WindowSizeDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/dev/WindowSizeDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG7C,KAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE1E,KAAK,KAAK,GAAG;IACX,kCAAkC;IAClC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AASF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,QAAyB,EAAE,KAAK,EAAE,EAAE,KAAK,qBAmCpF"}

package/dist/components/dev/WindowSizeDisplay.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useWindowSize } from '../../hooks/useWindowSize';
+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 },
+};
+/**
+ * 현재 윈도우 크기를 화면에 표시하는 개발용 컴포넌트
+ * 반응형 디버깅에 유용합니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { WindowSizeDisplay } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <WindowSizeDisplay />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <WindowSizeDisplay />}
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 커스텀 스타일 및 위치
+ * <WindowSizeDisplay
+ *   position="top-left"
+ *   style={{ backgroundColor: 'red', color: 'white' }}
+ * />
+ * ```
+ */
+export default function WindowSizeDisplay({ position = 'bottom-right', style }) {
+    const { width, height } = useWindowSize();
+    const containerStyle = {
+        position: 'fixed',
+        ...positionStyles[position],
+        padding: '8px 12px',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        fontSize: '14px',
+        fontFamily: 'monospace',
+        borderRadius: '8px',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        zIndex: 9999,
+        backdropFilter: 'blur(4px)',
+        ...style,
+    };
+    const innerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("div", { style: innerStyle },
+            React.createElement("span", { style: { color: '#60a5fa' } }, "W:"),
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                width,
+                "px"),
+            React.createElement("span", { style: { color: '#9ca3af' } }, "\u00D7"),
+            React.createElement("span", { style: { color: '#4ade80' } }, "H:"),
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                height,
+                "px"))));
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+type Props = {
+    /** 표시 위치 (기본값: 'bottom-left') */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+/**
+ * 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 }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=ZIndexDebugger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZIndexDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/dev/ZIndexDebugger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,KAAK,KAAK,GAAG;IACX,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE,CAAC;AAUF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,QAAwB,EAAE,EAAE,KAAK,qBAsNzE"}

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.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
     "prepublishOnly": "npm run test:run && npm run build:tsc",
     "build": "npm run build",
     "build:tsc": "tsc",
+    "dev": "tsc --watch",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",