goodchuck-utils 1.4.2 → 1.6.0

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

@@ -0,0 +1,50 @@
+import React from 'react';
+type LoginInfo = {
+    id: string;
+    pw: string;
+    memo: string;
+};
+type Props = {
+    onLogin: (email: string, password: string) => Promise<void>;
+    infos: LoginInfo[];
+};
+/**
+ * 개발용 로그인 shortcut 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { IdSelector } from 'goodchuck-utils/components/dev';
+ *
+ * function LoginPage() {
+ *   const handleLogin = async (email: string, password: string) => {
+ *     await loginAPI(email, password);
+ *   };
+ *
+ *   const devAccounts = [
+ *     { id: 'admin@test.com', pw: 'admin123', memo: '관리자' },
+ *     { id: 'user@test.com', pw: 'user123', memo: '일반 사용자' },
+ *   ];
+ *
+ *   return (
+ *     <div>
+ *       <LoginForm />
+ *       {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 {};
+//# sourceMappingURL=IdSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+/**
+ * 개발용 로그인 shortcut 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { IdSelector } from 'goodchuck-utils/components/dev';
+ *
+ * function LoginPage() {
+ *   const handleLogin = async (email: string, password: string) => {
+ *     await loginAPI(email, password);
+ *   };
+ *
+ *   const devAccounts = [
+ *     { id: 'admin@test.com', pw: 'admin123', memo: '관리자' },
+ *     { id: 'user@test.com', pw: 'user123', memo: '일반 사용자' },
+ *   ];
+ *
+ *   return (
+ *     <div>
+ *       <LoginForm />
+ *       {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 {
+            await onLogin(info.id, info.pw);
+        }
+        finally {
+            setLoading(null);
+        }
+    };
+    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

@@ -0,0 +1,15 @@
+/**
+ * Development Components
+ *
+ * 개발 환경에서 사용하는 유틸리티 컴포넌트들입니다.
+ * 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

@@ -0,0 +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;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

@@ -0,0 +1,12 @@
+/**
+ * Development Components
+ *
+ * 개발 환경에서 사용하는 유틸리티 컴포넌트들입니다.
+ * 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/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React Components
+ *
+ * Note: Requires React and React DOM as peer dependencies.
+ * Note: Uses Tailwind CSS classes - ensure Tailwind is configured in your project.
+ */
+export * from './dev';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,OAAO,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,7 @@
+/**
+ * React Components
+ *
+ * Note: Requires React and React DOM as peer dependencies.
+ * Note: Uses Tailwind CSS classes - ensure Tailwind is configured in your project.
+ */
+export * from './dev';

package/dist/hooks/index.d.ts

@@ -8,4 +8,12 @@ export * from './useLocalStorage';
 export * from './useSessionStorage';
 export * from './useMediaQuery';
 export * from './useClickOutside';
+export * from './useDebounce';
+export * from './useToggle';
+export * from './useCopyToClipboard';
+export * from './useWindowSize';
+export * from './usePrevious';
+export * from './useThrottle';
+export * from './useIntersectionObserver';
+export * from './useEventListener';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAG9B,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,oBAAoB,CAAC"}

package/dist/hooks/index.js

@@ -10,3 +10,14 @@ export * from './useSessionStorage';
 // UI/UX hooks
 export * from './useMediaQuery';
 export * from './useClickOutside';
+// Utility hooks
+export * from './useDebounce';
+export * from './useToggle';
+export * from './useCopyToClipboard';
+export * from './useWindowSize';
+export * from './usePrevious';
+// Performance hooks
+export * from './useThrottle';
+export * from './useIntersectionObserver';
+// Event hooks
+export * from './useEventListener';