@blastlabs/utils 1.22.0 → 2.1.0

package/README.md

@@ -74,25 +74,64 @@ function App() {
 #### FormDevTools
 
 react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트입니다.
+DevPanel과 통합하거나 별도로 사용할 수 있습니다.
 
+**DevPanel과 함께 사용 (권장):**
 ```tsx
+import { DevToolsProvider, DevPanel, useRegisterForm } from '@blastlabs/utils/components/dev';
 import { useForm } from 'react-hook-form';
+
+// Layout.tsx - Provider로 감싸기
+function Layout() {
+  return (
+    <DevToolsProvider>
+      <YourApp />
+    </DevToolsProvider>
+  );
+}
+
+// 페이지에서 form 등록
+function MyFormPage() {
+  const form = useForm({
+    defaultValues: { username: '', email: '' }
+  });
+
+  // form을 DevPanel에 등록
+  useRegisterForm(form);
+
+  return (
+    <form>
+      <input {...form.register('username')} />
+      <input {...form.register('email')} />
+      <button>Submit</button>
+    </form>
+  );
+}
+
+// App.tsx - DevPanel 렌더링
+function App() {
+  return (
+    <div>
+      {import.meta.env.DEV && <DevPanel />}
+    </div>
+  );
+}
+```
+
+**별도 사용:**
+```tsx
 import { FormDevTools } from '@blastlabs/utils/components/dev';
 
 function MyForm() {
   const form = useForm({
-    defaultValues: {
-      username: '',
-      email: '',
-      age: 0,
-    }
+    defaultValues: { username: '', email: '' }
   });
 
   return (
-    <form onSubmit={form.handleSubmit(onSubmit)}>
+    <form>
       <input {...form.register('username')} />
       <input {...form.register('email')} />
-      <button type="submit">Submit</button>
+      <button>Submit</button>
 
       {import.meta.env.DEV && <FormDevTools form={form} />}
     </form>
@@ -105,9 +144,64 @@ function MyForm() {
 - 에러(errors) 상태 확인
 - 변경된 필드(dirtyFields) 추적
 - 터치된 필드(touchedFields) 확인
-- Mock 데이터 생성 기능
 - 드래그 & 리사이즈 가능한 패널
 
+#### DevPanel
+
+여러 개발 도구를 하나의 패널에서 통합 관리하는 컴포넌트입니다.
+
+```tsx
+import { DevToolsProvider, DevPanel, useRegisterForm } from '@blastlabs/utils/components/dev';
+
+// Layout.tsx - 앱 상단에서 한 번만 감싸기
+function Layout() {
+  return (
+    <DevToolsProvider>
+      <YourApp />
+    </DevToolsProvider>
+  );
+}
+
+// 페이지에서 form 등록
+function MyFormPage() {
+  const form = useForm({
+    defaultValues: { username: '', email: '' }
+  });
+
+  // Form DevTools 사용을 위해 form 등록
+  useRegisterForm(form);
+
+  return (
+    <form>
+      <input {...form.register('username')} />
+      <input {...form.register('email')} />
+      <button>Submit</button>
+    </form>
+  );
+}
+
+// App.tsx - DevPanel 렌더링
+function App() {
+  return (
+    <div>
+      {import.meta.env.DEV && <DevPanel />}
+    </div>
+  );
+}
+```
+
+**주요 기능:**
+- 📝 Form DevTools - react-hook-form 상태 시각화 (form 등록 필요)
+- 🌍 Timezone DevTools - 타임존 정보 확인
+- 📐 Window Size - 윈도우 크기 표시 (토글 가능)
+- 🔍 Z-Index Debugger - z-index 값 시각화 (토글 가능)
+- 각 도구 독립적 토글
+- 드래그 & 리사이즈 가능한 패널
+
+**주의사항:**
+- DevPanel을 사용하려면 앱 상단에서 DevToolsProvider로 감싸야 합니다
+- Form DevTools를 사용하려면 페이지에서 useRegisterForm로 form을 등록해야 합니다
+
 #### ApiLogger
 
 API 요청/응답을 로깅하고 모니터링하는 컴포넌트입니다.

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

@@ -5,26 +5,31 @@ type Props = {
 };
 /**
  * 개발자 도구 패널
- * 여러 개발용 도구를 하나의 패널에서 관리할 수 있습니다.
+ * 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 }: Props): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"DevPanel.d.ts","sourceRoot":"","sources":["../../../src/components/dev/DevPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,QAAyB,EAAE,EAAE,KAAK,qBA6OpE"}
+{"version":3,"file":"DevPanel.d.ts","sourceRoot":"","sources":["../../../src/components/dev/DevPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAOlE,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,QAAyB,EAAE,EAAE,KAAK,qBAkPpE"}

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();
+        });
+    });
+});