@blastlabs/utils 1.11.0

package/dist/components/dev/ApiLogger.js

@@ -0,0 +1,408 @@
+import React, { useState, useEffect } from 'react';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+// 전역 로그 저장소
+let globalLogs = [];
+let logListeners = [];
+/**
+ * API 로그를 추가하는 함수
+ * fetch나 axios interceptor에서 호출하여 사용합니다.
+ */
+export function addApiLog(log) {
+    const newLog = {
+        ...log,
+        id: `${Date.now()}-${Math.random()}`,
+        timestamp: new Date(),
+    };
+    globalLogs = [newLog, ...globalLogs].slice(0, 100);
+    logListeners.forEach((listener) => listener([...globalLogs]));
+}
+/**
+ * 모든 API 로그를 초기화하는 함수
+ */
+export function clearApiLogs() {
+    globalLogs = [];
+    logListeners.forEach((listener) => listener([]));
+}
+/**
+ * API 요청/응답을 로깅하는 개발용 컴포넌트
+ * Axios interceptor 또는 fetch wrapper와 함께 사용하여 API 호출을 모니터링합니다.
+ *
+ * @example
+ * ```tsx
+ * // Axios interceptor 사용 (가장 일반적)
+ * import axios from 'axios';
+ * import { ApiLogger, addApiLog } from 'goodchuck-utils/components/dev';
+ *
+ * // Request interceptor
+ * axios.interceptors.request.use(
+ *   (config) => {
+ *     config.metadata = { startTime: Date.now() };
+ *     return config;
+ *   },
+ *   (error) => Promise.reject(error)
+ * );
+ *
+ * // Response interceptor
+ * axios.interceptors.response.use(
+ *   (response) => {
+ *     const duration = Date.now() - response.config.metadata?.startTime;
+ *
+ *     addApiLog({
+ *       method: response.config.method?.toUpperCase() || 'GET',
+ *       url: response.config.url || '',
+ *       status: response.status,
+ *       statusText: response.statusText,
+ *       duration,
+ *       requestBody: response.config.data,
+ *       responseBody: response.data,
+ *     });
+ *
+ *     return response;
+ *   },
+ *   (error) => {
+ *     const duration = Date.now() - error.config?.metadata?.startTime;
+ *
+ *     addApiLog({
+ *       method: error.config?.method?.toUpperCase() || 'GET',
+ *       url: error.config?.url || '',
+ *       status: error.response?.status,
+ *       statusText: error.response?.statusText,
+ *       duration,
+ *       requestBody: error.config?.data,
+ *       responseBody: error.response?.data,
+ *       error: error.message,
+ *     });
+ *
+ *     return Promise.reject(error);
+ *   }
+ * );
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <ApiLogger />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // fetch wrapper 사용
+ * import { addApiLog } from 'goodchuck-utils/components/dev';
+ *
+ * const originalFetch = window.fetch;
+ * window.fetch = async (...args) => {
+ *   const startTime = Date.now();
+ *   const [url, options] = args;
+ *
+ *   try {
+ *     const response = await originalFetch(...args);
+ *     const duration = Date.now() - startTime;
+ *
+ *     addApiLog({
+ *       method: options?.method || 'GET',
+ *       url: url.toString(),
+ *       status: response.status,
+ *       statusText: response.statusText,
+ *       duration,
+ *       requestBody: options?.body,
+ *     });
+ *
+ *     return response;
+ *   } catch (error) {
+ *     addApiLog({
+ *       method: options?.method || 'GET',
+ *       url: url.toString(),
+ *       error: (error as Error).message,
+ *       duration: Date.now() - startTime,
+ *     });
+ *     throw error;
+ *   }
+ * };
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <ApiLogger position="bottom-left" />}
+ * ```
+ */
+export default function ApiLogger({ position = 'bottom-right', maxLogs = 50 }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [logs, setLogs] = useState([]);
+    const [selectedLog, setSelectedLog] = useState(null);
+    const { copy, copiedText } = useCopyToClipboard();
+    useEffect(() => {
+        const listener = (newLogs) => {
+            setLogs(newLogs.slice(0, maxLogs));
+        };
+        logListeners.push(listener);
+        listener([...globalLogs]);
+        return () => {
+            logListeners = logListeners.filter((l) => l !== listener);
+        };
+    }, [maxLogs]);
+    const handleClearLogs = () => {
+        if (confirm('모든 API 로그를 삭제하시겠습니까?')) {
+            clearApiLogs();
+            setSelectedLog(null);
+        }
+    };
+    const handleCopyLog = (log) => {
+        const logText = JSON.stringify(log, null, 2);
+        copy(logText);
+    };
+    const isCopied = copiedText !== null;
+    const getStatusColor = (status) => {
+        if (!status)
+            return '#6b7280';
+        if (status >= 200 && status < 300)
+            return '#10b981';
+        if (status >= 300 && status < 400)
+            return '#3b82f6';
+        if (status >= 400 && status < 500)
+            return '#f59e0b';
+        return '#ef4444';
+    };
+    const getMethodColor = (method) => {
+        switch (method.toUpperCase()) {
+            case 'GET':
+                return '#10b981';
+            case 'POST':
+                return '#3b82f6';
+            case 'PUT':
+                return '#f59e0b';
+            case 'PATCH':
+                return '#8b5cf6';
+            case 'DELETE':
+                return '#ef4444';
+            default:
+                return '#6b7280';
+        }
+    };
+    const formatTime = (date) => {
+        return date.toLocaleTimeString('ko-KR', { hour12: false });
+    };
+    const formatUrl = (url) => {
+        try {
+            const urlObj = new URL(url);
+            return urlObj.pathname + urlObj.search;
+        }
+        catch {
+            return url;
+        }
+    };
+    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: 99999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    };
+    const toggleButtonStyle = {
+        width: '48px',
+        height: '48px',
+        borderRadius: '50%',
+        backgroundColor: logs.length > 0 ? '#10b981' : '#6b7280',
+        color: 'white',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '20px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        transition: 'background-color 0.2s',
+    };
+    const badgeStyle = {
+        position: 'absolute',
+        top: '-4px',
+        right: '-4px',
+        backgroundColor: '#ef4444',
+        color: 'white',
+        borderRadius: '10px',
+        padding: '2px 6px',
+        fontSize: '11px',
+        fontWeight: 'bold',
+        minWidth: '20px',
+        textAlign: 'center',
+    };
+    const panelStyle = {
+        position: 'absolute',
+        bottom: position.includes('bottom') ? '60px' : undefined,
+        top: position.includes('top') ? '60px' : undefined,
+        right: position.includes('right') ? '0' : undefined,
+        left: position.includes('left') ? '0' : undefined,
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        width: '600px',
+        maxHeight: '500px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+    };
+    const headerStyle = {
+        padding: '12px 16px',
+        borderBottom: '1px solid #e5e7eb',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: '#f9fafb',
+    };
+    const headerTitleStyle = {
+        fontWeight: 'bold',
+        fontSize: '14px',
+        color: '#111827',
+    };
+    const clearButtonStyle = {
+        padding: '4px 12px',
+        backgroundColor: 'white',
+        color: '#ef4444',
+        border: '1px solid #fecaca',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        fontSize: '12px',
+        fontWeight: 600,
+        transition: 'background-color 0.15s',
+    };
+    const contentStyle = {
+        display: 'flex',
+        flex: 1,
+        overflow: 'hidden',
+    };
+    const logListStyle = {
+        flex: selectedLog ? '0 0 300px' : '1',
+        overflowY: 'auto',
+        borderRight: selectedLog ? '1px solid #e5e7eb' : 'none',
+    };
+    const logItemStyle = (isSelected) => ({
+        padding: '12px 16px',
+        borderBottom: '1px solid #f3f4f6',
+        cursor: 'pointer',
+        backgroundColor: isSelected ? '#eff6ff' : 'white',
+        transition: 'background-color 0.15s',
+    });
+    const detailStyle = {
+        flex: 1,
+        overflowY: 'auto',
+        padding: '16px',
+        fontSize: '13px',
+    };
+    const methodBadgeStyle = (method) => ({
+        display: 'inline-block',
+        padding: '2px 6px',
+        backgroundColor: getMethodColor(method),
+        color: 'white',
+        borderRadius: '4px',
+        fontSize: '11px',
+        fontWeight: 'bold',
+        marginRight: '8px',
+    });
+    const statusBadgeStyle = (status) => ({
+        display: 'inline-block',
+        padding: '2px 6px',
+        backgroundColor: getStatusColor(status),
+        color: 'white',
+        borderRadius: '4px',
+        fontSize: '11px',
+        fontWeight: 'bold',
+        marginLeft: '8px',
+    });
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: toggleButtonStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = logs.length > 0 ? '#059669' : '#4b5563'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = logs.length > 0 ? '#10b981' : '#6b7280') },
+            isOpen ? '✕' : '📡',
+            logs.length > 0 && React.createElement("div", { style: badgeStyle }, logs.length)),
+        isOpen && (React.createElement("div", { style: panelStyle },
+            React.createElement("div", { style: headerStyle },
+                React.createElement("div", { style: headerTitleStyle },
+                    "\uD83D\uDCE1 API Logger (",
+                    logs.length,
+                    ")"),
+                React.createElement("button", { onClick: handleClearLogs, style: clearButtonStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#fef2f2'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'white') }, "Clear")),
+            React.createElement("div", { style: contentStyle },
+                React.createElement("div", { style: logListStyle }, logs.length === 0 ? (React.createElement("div", { style: { padding: '20px', textAlign: 'center', color: '#9ca3af', fontSize: '13px' } }, "API \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.")) : (logs.map((log) => (React.createElement("div", { key: log.id, style: logItemStyle(selectedLog?.id === log.id), onClick: () => setSelectedLog(log), onMouseEnter: (e) => {
+                        if (selectedLog?.id !== log.id) {
+                            e.currentTarget.style.backgroundColor = '#f9fafb';
+                        }
+                    }, onMouseLeave: (e) => {
+                        if (selectedLog?.id !== log.id) {
+                            e.currentTarget.style.backgroundColor = 'white';
+                        }
+                    } },
+                    React.createElement("div", { style: { fontSize: '11px', color: '#6b7280', marginBottom: '4px' } },
+                        formatTime(log.timestamp),
+                        log.duration && React.createElement("span", { style: { marginLeft: '8px' } },
+                            log.duration,
+                            "ms")),
+                    React.createElement("div", null,
+                        React.createElement("span", { style: methodBadgeStyle(log.method) }, log.method),
+                        log.status && React.createElement("span", { style: statusBadgeStyle(log.status) }, log.status)),
+                    React.createElement("div", { style: {
+                            fontSize: '12px',
+                            color: '#374151',
+                            marginTop: '4px',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        } }, formatUrl(log.url)),
+                    log.error && (React.createElement("div", { style: { fontSize: '11px', color: '#ef4444', marginTop: '4px' } },
+                        "Error: ",
+                        log.error))))))),
+                selectedLog && (React.createElement("div", { style: detailStyle },
+                    React.createElement("div", { style: { marginBottom: '16px', display: 'flex', justifyContent: 'space-between' } },
+                        React.createElement("h3", { style: { margin: 0, fontSize: '14px', fontWeight: 'bold' } }, "\uC0C1\uC138 \uC815\uBCF4"),
+                        React.createElement("button", { onClick: () => handleCopyLog(selectedLog), style: {
+                                padding: '4px 8px',
+                                backgroundColor: isCopied ? '#10b981' : '#3b82f6',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                                fontSize: '11px',
+                                transition: 'background-color 0.2s',
+                            } }, isCopied ? '✓ Copied' : 'Copy JSON')),
+                    React.createElement("div", { style: { marginBottom: '12px' } },
+                        React.createElement("strong", null, "URL:"),
+                        React.createElement("div", { style: {
+                                marginTop: '4px',
+                                padding: '8px',
+                                backgroundColor: '#f3f4f6',
+                                borderRadius: '6px',
+                                fontSize: '12px',
+                                fontFamily: 'monospace',
+                                wordBreak: 'break-all',
+                            } }, selectedLog.url)),
+                    selectedLog.requestBody !== undefined && (React.createElement("div", { style: { marginBottom: '12px' } },
+                        React.createElement("strong", null, "Request Body:"),
+                        React.createElement("pre", { style: {
+                                marginTop: '4px',
+                                padding: '8px',
+                                backgroundColor: '#f3f4f6',
+                                borderRadius: '6px',
+                                fontSize: '11px',
+                                fontFamily: 'monospace',
+                                overflow: 'auto',
+                                maxHeight: '150px',
+                            } }, JSON.stringify(selectedLog.requestBody, null, 2)))),
+                    selectedLog.responseBody !== undefined && (React.createElement("div", { style: { marginBottom: '12px' } },
+                        React.createElement("strong", null, "Response Body:"),
+                        React.createElement("pre", { style: {
+                                marginTop: '4px',
+                                padding: '8px',
+                                backgroundColor: '#f3f4f6',
+                                borderRadius: '6px',
+                                fontSize: '11px',
+                                fontFamily: 'monospace',
+                                overflow: 'auto',
+                                maxHeight: '150px',
+                            } }, JSON.stringify(selectedLog.responseBody, null, 2)))))))))));
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+type Props = {
+    /** 패널 초기 위치 (기본값: 'bottom-right') */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+/**
+ * 개발자 도구 패널
+ * 여러 개발용 도구를 하나의 패널에서 관리할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { DevPanel } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <DevPanel />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <DevPanel position="top-left" />}
+ * ```
+ */
+export default function DevPanel({ position }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=DevPanel.d.ts.map

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

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

package/dist/components/dev/DevPanel.js

@@ -0,0 +1,196 @@
+import React, { useState, useRef } from 'react';
+import { useWindowSize } from '../../hooks/useWindowSize';
+/**
+ * 개발자 도구 패널
+ * 여러 개발용 도구를 하나의 패널에서 관리할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { DevPanel } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <DevPanel />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <DevPanel position="top-left" />}
+ * ```
+ */
+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 { width, height } = useWindowSize();
+    // 렌더 카운트 증가
+    renderCount.current += 1;
+    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: 99999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    };
+    const toggleButtonStyle = {
+        width: '48px',
+        height: '48px',
+        borderRadius: '50%',
+        backgroundColor: '#3b82f6',
+        color: 'white',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '20px',
+        fontWeight: 'bold',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.2s',
+    };
+    const panelStyle = {
+        position: 'absolute',
+        bottom: position.includes('bottom') ? '60px' : undefined,
+        top: position.includes('top') ? '60px' : undefined,
+        right: position.includes('right') ? '0' : undefined,
+        left: position.includes('left') ? '0' : undefined,
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        minWidth: '280px',
+        overflow: 'hidden',
+        color: '#111827',
+    };
+    const headerStyle = {
+        padding: '12px 16px',
+        borderBottom: '1px solid #e5e7eb',
+        fontWeight: 'bold',
+        fontSize: '14px',
+        color: '#111827',
+        backgroundColor: '#f9fafb',
+    };
+    const contentStyle = {
+        padding: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+    };
+    const toggleItemStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 12px',
+        borderRadius: '6px',
+        fontSize: '13px',
+        cursor: 'pointer',
+        transition: 'background-color 0.15s',
+        backgroundColor: 'transparent',
+    };
+    const getSwitchStyle = (isOn) => ({
+        width: '36px',
+        height: '20px',
+        backgroundColor: isOn ? '#3b82f6' : '#d1d5db',
+        borderRadius: '10px',
+        position: 'relative',
+        transition: 'background-color 0.2s',
+        cursor: 'pointer',
+    });
+    const getSwitchKnobStyle = (isOn) => ({
+        width: '16px',
+        height: '16px',
+        backgroundColor: 'white',
+        borderRadius: '50%',
+        position: 'absolute',
+        top: '2px',
+        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가 삭제되었습니다.');
+        }
+    };
+    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("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,
+                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)))));
+}