@blastlabs/utils 1.21.0 → 2.1.0

package/dist/components/dev/DevPanel.js

@@ -1,37 +1,47 @@
-import React, { useState, useRef } from 'react';
+'use client';
+import React, { useState, useEffect } from 'react';
 import { useWindowSize } from '../../hooks';
+import { useDevTools } from './DevToolsProvider';
+import FormDevToolsContent from './FormDevTools/FormDevToolsContent';
+import TimezoneDevToolsContent from './TimezoneDevTools/TimezoneDevToolsContent';
+import ZIndexDebugger from './ZIndexDebugger';
 /**
  * 개발자 도구 패널
- * 여러 개발용 도구를 하나의 패널에서 관리할 수 있습니다.
+ * Layout에 한 번만 배치하고, 페이지에서 hook으로 form을 주입받습니다.
  *
  * @example
  * ```tsx
- * // Vite 프로젝트
+ * // Layout.tsx (한 번만)
  * import { DevPanel } from '@blastlabs/utils/components/dev';
  *
- * function App() {
+ * function Layout() {
  *   return (
- *     <div>
- *       {import.meta.env.DEV && <DevPanel />}
- *     </div>
+ *     <>
+ *       <Outlet />
+ *       <DevPanel />
+ *     </>
  *   );
  * }
- * ```
  *
- * @example
- * ```tsx
- * // Create React App 프로젝트
- * {process.env.NODE_ENV === 'development' && <DevPanel position="top-left" />}
+ * // 페이지에서 form 주입
+ * import { useRegisterForm } from '@blastlabs/utils/components/dev';
+ *
+ * function MyPage() {
+ *   const form = useForm();
+ *   useRegisterForm(form);
+ *
+ *   return <form>...</form>;
+ * }
  * ```
  */
 export default function DevPanel({ position = 'bottom-right' }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [showWindowSize, setShowWindowSize] = useState(false);
-    const [showRenderCount, setShowRenderCount] = useState(false);
-    const renderCount = useRef(0);
+    const { tools, toggleTool, getForm, isMenuOpen, toggleMenu, showWindowOverlay, toggleWindowOverlay, showZIndexDebugger, toggleZIndexDebugger, } = useDevTools();
     const { width, height } = useWindowSize();
-    // 렌더 카운트 증가
-    renderCount.current += 1;
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const form = getForm();
     const positionStyles = {
         'top-left': { top: 16, left: 16 },
         'top-right': { top: 16, right: 16 },
@@ -118,79 +128,63 @@ export default function DevPanel({ position = 'bottom-right' }) {
         left: isOn ? '18px' : '2px',
         transition: 'left 0.2s',
     });
-    const overlayStyle = {
-        position: 'fixed',
-        padding: '8px 12px',
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        color: 'white',
-        fontSize: '14px',
-        fontFamily: 'monospace',
-        borderRadius: '8px',
-        zIndex: 99998,
-    };
-    const handleClearLocalStorage = () => {
-        if (confirm('LocalStorage를 모두 삭제하시겠습니까?')) {
-            localStorage.clear();
-            alert('LocalStorage가 삭제되었습니다.');
-        }
-    };
-    const handleClearSessionStorage = () => {
-        if (confirm('SessionStorage를 모두 삭제하시겠습니까?')) {
-            sessionStorage.clear();
-            alert('SessionStorage가 삭제되었습니다.');
-        }
+    const disabledItemStyle = {
+        ...toggleItemStyle,
+        opacity: 0.5,
+        cursor: 'not-allowed',
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: containerStyle },
-            React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: toggleButtonStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#2563eb'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = '#3b82f6') }, isOpen ? '✕' : '🛠'),
-            isOpen && (React.createElement("div", { style: panelStyle },
+            React.createElement("button", { onClick: () => toggleMenu(), style: toggleButtonStyle, onMouseEnter: e => (e.currentTarget.style.backgroundColor = '#2563eb'), onMouseLeave: e => (e.currentTarget.style.backgroundColor = '#3b82f6') }, isMenuOpen ? '✕' : '🛠'),
+            isMenuOpen && (React.createElement("div", { style: panelStyle },
                 React.createElement("div", { style: headerStyle }, "\u2699\uFE0F \uAC1C\uBC1C\uC790 \uB3C4\uAD6C"),
                 React.createElement("div", { style: contentStyle },
-                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => setShowWindowSize(!showWindowSize) },
-                        React.createElement("span", null, "\uC708\uB3C4\uC6B0 \uD06C\uAE30 \uD45C\uC2DC"),
-                        React.createElement("div", { style: getSwitchStyle(showWindowSize) },
-                            React.createElement("div", { style: getSwitchKnobStyle(showWindowSize) }))),
-                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => setShowRenderCount(!showRenderCount) },
-                        React.createElement("span", null, "\uB80C\uB354 \uCE74\uC6B4\uD2B8 \uD45C\uC2DC"),
-                        React.createElement("div", { style: getSwitchStyle(showRenderCount) },
-                            React.createElement("div", { style: getSwitchKnobStyle(showRenderCount) }))),
-                    React.createElement("div", { style: { height: '1px', backgroundColor: '#e5e7eb', margin: '8px 0' } }),
-                    React.createElement("button", { onClick: handleClearLocalStorage, style: {
-                            ...toggleItemStyle,
-                            border: '1px solid #e5e7eb',
-                            backgroundColor: 'white',
-                            color: '#dc2626',
-                            fontWeight: 500,
-                        }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#fef2f2'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'white') }, "\uD83D\uDDD1\uFE0F LocalStorage \uC0AD\uC81C"),
-                    React.createElement("button", { onClick: handleClearSessionStorage, style: {
-                            ...toggleItemStyle,
-                            border: '1px solid #e5e7eb',
-                            backgroundColor: 'white',
-                            color: '#dc2626',
-                            fontWeight: 500,
-                        }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#fef2f2'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'white') }, "\uD83D\uDDD1\uFE0F SessionStorage \uC0AD\uC81C"))))),
-        showWindowSize && (React.createElement("div", { style: {
-                ...overlayStyle,
+                    form ? (React.createElement("div", { style: toggleItemStyle, onMouseEnter: e => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: e => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => toggleTool('formDevTools') },
+                        React.createElement("span", null, "\uD83D\uDCDD Form DevTools"),
+                        React.createElement("div", { style: getSwitchStyle(tools.formDevTools) },
+                            React.createElement("div", { style: getSwitchKnobStyle(tools.formDevTools) })))) : (React.createElement("div", { style: disabledItemStyle },
+                        React.createElement("span", null, "\uD83D\uDCDD Form DevTools"),
+                        React.createElement("div", { style: getSwitchStyle(false) },
+                            React.createElement("div", { style: getSwitchKnobStyle(false) })))),
+                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: e => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: e => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => toggleTool('timezoneDevTools') },
+                        React.createElement("span", null, "\uD83C\uDF0D Timezone DevTools"),
+                        React.createElement("div", { style: getSwitchStyle(tools.timezoneDevTools) },
+                            React.createElement("div", { style: getSwitchKnobStyle(tools.timezoneDevTools) }))),
+                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: e => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: e => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => toggleWindowOverlay() },
+                        React.createElement("span", null, "\uD83D\uDCD0 Window Size"),
+                        React.createElement("div", { style: getSwitchStyle(showWindowOverlay) },
+                            React.createElement("div", { style: getSwitchKnobStyle(showWindowOverlay) }))),
+                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: e => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: e => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => toggleZIndexDebugger() },
+                        React.createElement("span", null, "\uD83D\uDD0D Z-Index Debugger"),
+                        React.createElement("div", { style: getSwitchStyle(showZIndexDebugger) },
+                            React.createElement("div", { style: getSwitchKnobStyle(showZIndexDebugger) }))))))),
+        tools.formDevTools && form && (React.createElement("div", { style: { position: 'fixed', top: 80, right: 16, zIndex: 99998 } },
+            React.createElement(FormDevToolsContent, { form: form }))),
+        tools.timezoneDevTools && (React.createElement("div", { style: { position: 'fixed', top: 80, left: 16, zIndex: 99998 } },
+            React.createElement(TimezoneDevToolsContent, null))),
+        showZIndexDebugger && (React.createElement("div", { style: { position: 'fixed', top: 80, right: 16, zIndex: 99997 } },
+            React.createElement(ZIndexDebugger, { position: "top-right" }))),
+        mounted && showWindowOverlay && (React.createElement("div", { "data-testid": "window-overlay", style: {
+                position: 'fixed',
+                padding: '8px 12px',
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                color: 'white',
+                fontSize: '14px',
+                fontFamily: 'monospace',
+                borderRadius: '8px',
+                zIndex: 99997,
                 top: 16,
                 left: 16,
             } },
             React.createElement("span", { style: { color: '#60a5fa' } }, "W:"),
-            ' ',
+            " ",
             React.createElement("span", { style: { fontWeight: 'bold' } },
                 width,
                 "px"),
             React.createElement("span", { style: { color: '#9ca3af', margin: '0 4px' } }, "\u00D7"),
             React.createElement("span", { style: { color: '#4ade80' } }, "H:"),
-            ' ',
+            " ",
             React.createElement("span", { style: { fontWeight: 'bold' } },
                 height,
-                "px"))),
-        showRenderCount && (React.createElement("div", { style: {
-                ...overlayStyle,
-                top: 16,
-                right: 16,
-            } },
-            React.createElement("span", { style: { color: '#fbbf24' } }, "Renders:"),
-            ' ',
-            React.createElement("span", { style: { fontWeight: 'bold' } }, renderCount.current)))));
+                "px")))));
 }

package/dist/components/dev/DevPanel.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DevPanel.test.d.ts.map

package/dist/components/dev/DevPanel.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevPanel.test.d.ts","sourceRoot":"","sources":["../../../src/components/dev/DevPanel.test.tsx"],"names":[],"mappings":""}

package/dist/components/dev/DevPanel.test.js

@@ -0,0 +1,194 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DevPanel from './DevPanel';
+import { DevToolsProvider, useRegisterForm } from './DevToolsProvider';
+// Mock useWindowSize
+vi.mock('../../hooks', () => ({
+    useWindowSize: () => ({ width: 1920, height: 1080 }),
+}));
+// Mock FormDevToolsContent and TimezoneDevToolsContent
+vi.mock('./FormDevTools/FormDevToolsContent', () => ({
+    default: () => React.createElement("div", { "data-testid": "form-devtools-panel" }, "Form DevTools Panel"),
+}));
+vi.mock('./TimezoneDevTools/TimezoneDevToolsContent', () => ({
+    default: () => React.createElement("div", { "data-testid": "timezone-devtools-panel" }, "Timezone DevTools Panel"),
+}));
+// Note: ZIndexDebugger is not mocked to test actual toggle behavior
+// Mock form
+const createMockForm = () => ({
+    formState: {
+        errors: {},
+        dirtyFields: {},
+        touchedFields: {},
+        isValid: true,
+        isSubmitting: false,
+        submitCount: 0,
+        defaultValues: { username: '', email: '' },
+    },
+    watch: vi.fn(() => ({ username: '', email: '' })),
+    setValue: vi.fn(),
+    trigger: vi.fn(),
+});
+function TestPage({ hasForm = true }) {
+    const form = createMockForm();
+    if (hasForm) {
+        useRegisterForm(form);
+    }
+    return React.createElement("div", null, "Test Page");
+}
+describe('DevPanel', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('기본 동작', () => {
+        it('메인 토글 버튼이 렌더링된다', () => {
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            expect(toggleButton).toBeTruthy();
+            expect(toggleButton.textContent).toBe('🛠');
+        });
+        it('메뉴가 닫혀있을 때는 메뉴 패널이 보이지 않는다', () => {
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            expect(screen.queryByText('⚙️ 개발자 도구')).toBeNull();
+        });
+        it('윈도우 사이즈가 항상 표시된다', () => {
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            expect(screen.getByText(/W:/)).toBeTruthy();
+            expect(screen.getByText(/H:/)).toBeTruthy();
+            expect(screen.getByText('1920px')).toBeTruthy();
+            expect(screen.getByText('1080px')).toBeTruthy();
+        });
+    });
+    describe('메뉴 토글', () => {
+        it('메인 버튼 클릭 시 메뉴가 열린다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            expect(toggleButton.textContent).toBe('🛠');
+            await user.click(toggleButton);
+            expect(screen.getByText('⚙️ 개발자 도구')).toBeTruthy();
+            expect(toggleButton.textContent).toBe('✕');
+        });
+        it('메인 버튼 다시 클릭 시 메뉴가 닫힌다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            // 메뉴 열기
+            await user.click(toggleButton);
+            expect(screen.getByText('⚙️ 개발자 도구')).toBeTruthy();
+            // 메뉴 닫기
+            await user.click(toggleButton);
+            expect(screen.queryByText('⚙️ 개발자 도구')).toBeNull();
+            expect(toggleButton.textContent).toBe('🛠');
+        });
+    });
+    describe('툴 토글', () => {
+        it('메뉴에서 Form DevTools 토글 클릭 시 패널이 표시된다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestPage, { hasForm: true }),
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            await user.click(toggleButton);
+            const formDevToolsToggle = screen.getByText('📝 Form DevTools');
+            await user.click(formDevToolsToggle);
+            expect(screen.getByTestId('form-devtools-panel')).toBeTruthy();
+        });
+        it('메뉴에서 Timezone DevTools 토글 클릭 시 패널이 표시된다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            await user.click(toggleButton);
+            const timezoneDevToolsToggle = screen.getByText('🌍 Timezone DevTools');
+            await user.click(timezoneDevToolsToggle);
+            expect(screen.getByTestId('timezone-devtools-panel')).toBeTruthy();
+        });
+    });
+    describe('독립적 토글 동작', () => {
+        it('메뉴를 닫아도 각 툴 패널은 유지된다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestPage, { hasForm: true }),
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            // 메뉴 열기
+            await user.click(toggleButton);
+            // Form DevTools 켜기
+            const formToggle = screen.getByText('📝 Form DevTools');
+            await user.click(formToggle);
+            // 메뉴 닫기
+            await user.click(toggleButton);
+            // 메뉴는 닫혀야 함
+            expect(screen.queryByText('⚙️ 개발자 도구')).toBeNull();
+            // Form DevTools 패널은 유지되어야 함
+            expect(screen.getByTestId('form-devtools-panel')).toBeTruthy();
+        });
+        it('각 툴이 독립적으로 토글된다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(TestPage, { hasForm: true }),
+                React.createElement(DevPanel, null)));
+            const toggleButton = screen.getByRole('button');
+            // 메뉴 열기
+            await user.click(toggleButton);
+            // Form DevTools만 켜기
+            const formToggle = screen.getByText('📝 Form DevTools');
+            await user.click(formToggle);
+            // 메뉴 닫기
+            await user.click(toggleButton);
+            // Form DevTools 패널만 있어야 함
+            expect(screen.getByTestId('form-devtools-panel')).toBeTruthy();
+            expect(screen.queryByTestId('timezone-devtools-panel')).toBeNull();
+            // 메뉴 다시 열기
+            await user.click(toggleButton);
+            // Timezone DevTools 켜기
+            const timezoneToggle = screen.getByText('🌍 Timezone DevTools');
+            await user.click(timezoneToggle);
+            // 메뉴 닫기
+            await user.click(toggleButton);
+            // 두 패널 모두 있어야 함
+            expect(screen.getByTestId('form-devtools-panel')).toBeTruthy();
+            expect(screen.getByTestId('timezone-devtools-panel')).toBeTruthy();
+        });
+    });
+    describe('패널 토글', () => {
+        it('Window Size Overlay 토글', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            // 윈도우 사이즈가 항상 표시됨
+            expect(screen.getByText(/W:/)).toBeTruthy();
+            expect(screen.getByText(/H:/)).toBeTruthy();
+            expect(screen.getByText('1920px')).toBeTruthy();
+            expect(screen.getByText('1080px')).toBeTruthy();
+            const toggleButton = screen.getByRole('button');
+            await user.click(toggleButton);
+            const windowToggle = screen.getByText('📐 Window Size');
+            await user.click(windowToggle);
+            // 숨겨졸 때 윈도우 사이즈가 사라짐
+            expect(screen.queryByText(/W:/)).toBeNull();
+            expect(screen.queryByText(/H:/)).toBeNull();
+        });
+        it('ZIndex Debugger 토글', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(DevToolsProvider, null,
+                React.createElement(DevPanel, null)));
+            // 초기 상태에서는 렌더링되지 않음
+            expect(screen.queryByTestId('zindex-debugger')).toBeNull();
+            const toggleButton = screen.getByRole('button');
+            await user.click(toggleButton);
+            const zIndexToggle = screen.getByText('🔍 Z-Index Debugger');
+            await user.click(zIndexToggle);
+            // 토글 후 ZIndexDebugger가 렌더링됨
+            expect(screen.getByTestId('zindex-debugger')).toBeTruthy();
+        });
+    });
+});

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

@@ -0,0 +1,97 @@
+import React, { ReactNode } from 'react';
+export type DevToolForm = {
+    form: {
+        formState: {
+            errors?: Record<string, any>;
+            dirtyFields?: Record<string, any>;
+            touchedFields?: Record<string, any>;
+            isValid?: boolean;
+            isSubmitting?: boolean;
+            submitCount?: number;
+            defaultValues?: Record<string, any>;
+        };
+        watch: () => any;
+        setValue: (name: any, value: any, options?: any) => void;
+        trigger?: () => Promise<boolean>;
+    };
+};
+type DevToolsContextType = {
+    forms: Map<string, DevToolForm['form']>;
+    registerForm: (form: DevToolForm['form']) => () => void;
+    getForm: () => DevToolForm['form'] | null;
+    tools: {
+        formDevTools: boolean;
+        timezoneDevTools: boolean;
+    };
+    toggleTool: (tool: 'formDevTools' | 'timezoneDevTools') => void;
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    showWindowOverlay: boolean;
+    toggleWindowOverlay: () => void;
+    showZIndexDebugger: boolean;
+    toggleZIndexDebugger: () => void;
+};
+type ProviderProps = {
+    children: ReactNode;
+};
+/**
+ * DevTools Provider 컴포넌트
+ * 앱 상단에서 한 번만 감싸면 됩니다.
+ *
+ * @example
+ * ```tsx
+ * import { DevToolsProvider } from '@blastlabs/utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <DevToolsProvider>
+ *       <YourApp />
+ *     </DevToolsProvider>
+ *   );
+ * }
+ * ```
+ */
+export default function DevToolsProvider({ children }: ProviderProps): React.JSX.Element;
+/**
+ * Form을 DevTools에 등록하는 Hook
+ * 페이지에서 form을 사용할 때 호출합니다.
+ *
+ * @example
+ * ```tsx
+ * import { useRegisterForm } from '@blastlabs/utils/components/dev';
+ *
+ * function MyPage() {
+ *   const form = useForm();
+ *
+ *   useRegisterForm(form);
+ *
+ *   return <form>...</form>;
+ * }
+ * ```
+ */
+export declare function useRegisterForm(form: DevToolForm['form']): void;
+/**
+ * DevTools 상태를 조회하는 Hook
+ */
+export declare function useDevTools(): DevToolsContextType | {
+    forms: Map<any, any>;
+    registerForm: () => () => void;
+    getForm: () => null;
+    tools: {
+        formDevTools: boolean;
+        timezoneDevTools: boolean;
+    };
+    toggleTool: () => void;
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    showWindowOverlay: boolean;
+    toggleWindowOverlay: () => void;
+    showZIndexDebugger: boolean;
+    toggleZIndexDebugger: () => void;
+};
+export {};
+//# sourceMappingURL=DevToolsProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/DevToolsProvider/DevToolsProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAuC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAGjG,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACpC,OAAO,CAAC,EAAE,OAAO,CAAC;YAClB,YAAY,CAAC,EAAE,OAAO,CAAC;YACvB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SACrC,CAAC;QACF,KAAK,EAAE,MAAM,GAAG,CAAC;QACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACzD,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAGF,KAAK,mBAAmB,GAAG;IAEzB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,MAAM,IAAI,CAAC;IACxD,OAAO,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAG1C,KAAK,EAAE;QACL,YAAY,EAAE,OAAO,CAAC;QACtB,gBAAgB,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,kBAAkB,KAAK,IAAI,CAAC;IAGhE,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IAGtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC,CAAC;AAKF,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,qBA4DnE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,QAYxD;AAED;;GAEG;AACH,wBAAgB,WAAW;;;;;;;;;;;;;;;;;EAsB1B"}

package/dist/components/dev/DevToolsProvider/DevToolsProvider.js

@@ -0,0 +1,122 @@
+'use client';
+import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
+const DevToolsContext = createContext(null);
+/**
+ * DevTools Provider 컴포넌트
+ * 앱 상단에서 한 번만 감싸면 됩니다.
+ *
+ * @example
+ * ```tsx
+ * import { DevToolsProvider } from '@blastlabs/utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <DevToolsProvider>
+ *       <YourApp />
+ *     </DevToolsProvider>
+ *   );
+ * }
+ * ```
+ */
+export default function DevToolsProvider({ children }) {
+    const formsRef = useRef(new Map());
+    const [tools, setTools] = useState({
+        formDevTools: false,
+        timezoneDevTools: false,
+    });
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [showWindowOverlay, setShowWindowOverlay] = useState(true);
+    const [showZIndexDebugger, setShowZIndexDebugger] = useState(false);
+    const registerForm = (form) => {
+        const id = `form-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        formsRef.current.set(id, form);
+        // 컴포넌트 unmount 시 정리
+        return () => {
+            formsRef.current.delete(id);
+        };
+    };
+    const getForm = () => {
+        if (formsRef.current.size === 0)
+            return null;
+        // 첫 번째 form 반환 (보통 페이지당 하나의 form)
+        const firstKey = formsRef.current.keys().next().value;
+        if (!firstKey)
+            return null;
+        return formsRef.current.get(firstKey) || null;
+    };
+    const toggleTool = (tool) => {
+        setTools(prev => ({ ...prev, [tool]: !prev[tool] }));
+    };
+    const toggleMenu = () => setIsMenuOpen(prev => !prev);
+    const openMenu = () => setIsMenuOpen(true);
+    const closeMenu = () => setIsMenuOpen(false);
+    const toggleWindowOverlay = () => setShowWindowOverlay(prev => !prev);
+    const toggleZIndexDebugger = () => setShowZIndexDebugger(prev => !prev);
+    return (React.createElement(DevToolsContext.Provider, { value: {
+            forms: formsRef.current,
+            registerForm,
+            getForm,
+            tools,
+            toggleTool,
+            isMenuOpen,
+            toggleMenu,
+            openMenu,
+            closeMenu,
+            showWindowOverlay,
+            toggleWindowOverlay,
+            showZIndexDebugger,
+            toggleZIndexDebugger,
+        } }, children));
+}
+/**
+ * Form을 DevTools에 등록하는 Hook
+ * 페이지에서 form을 사용할 때 호출합니다.
+ *
+ * @example
+ * ```tsx
+ * import { useRegisterForm } from '@blastlabs/utils/components/dev';
+ *
+ * function MyPage() {
+ *   const form = useForm();
+ *
+ *   useRegisterForm(form);
+ *
+ *   return <form>...</form>;
+ * }
+ * ```
+ */
+export function useRegisterForm(form) {
+    const context = useContext(DevToolsContext);
+    if (!context) {
+        console.warn('useRegisterForm must be used within DevToolsProvider');
+        return;
+    }
+    useEffect(() => {
+        const unregister = context.registerForm(form);
+        return unregister;
+    }, [form, context]);
+}
+/**
+ * DevTools 상태를 조회하는 Hook
+ */
+export function useDevTools() {
+    const context = useContext(DevToolsContext);
+    if (!context) {
+        return {
+            forms: new Map(),
+            registerForm: () => () => { },
+            getForm: () => null,
+            tools: { formDevTools: false, timezoneDevTools: false },
+            toggleTool: () => { },
+            isMenuOpen: false,
+            toggleMenu: () => { },
+            openMenu: () => { },
+            closeMenu: () => { },
+            showWindowOverlay: true,
+            toggleWindowOverlay: () => { },
+            showZIndexDebugger: false,
+            toggleZIndexDebugger: () => { },
+        };
+    }
+    return context;
+}

package/dist/components/dev/DevToolsProvider/DevToolsProvider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DevToolsProvider.test.d.ts.map

package/dist/components/dev/DevToolsProvider/DevToolsProvider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsProvider.test.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/DevToolsProvider/DevToolsProvider.test.tsx"],"names":[],"mappings":""}