@blastlabs/utils 1.21.0 → 2.1.0

package/dist/components/dev/FormDevTools/FormDevToolsContent.js

@@ -0,0 +1,298 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useCopyToClipboard } from '../../../hooks';
+import { getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, tabContainerStyle, getTabStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
+export default function FormDevToolsContent({ form, validationSchema, generateMock, title = 'Form DevTools' }) {
+    const { formState, watch, setValue, trigger } = form;
+    const values = watch();
+    const originalValues = formState.defaultValues;
+    const [activeTab, setActiveTab] = useState('all');
+    const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
+    const [panelSize, setPanelSize] = useState({ width: 500, height: 400 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [generateError, setGenerateError] = useState(null);
+    const [mounted, setMounted] = useState(false);
+    const panelRef = useRef(null);
+    const { copy, copiedText } = useCopyToClipboard();
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const handleCopy = () => {
+        const data = {
+            values,
+            errors: formState.errors,
+            changedFields,
+            dirtyFields: formState.dirtyFields,
+            touchedFields: formState.touchedFields,
+            isValid: formState.isValid,
+            isSubmitting: formState.isSubmitting,
+            submitCount: formState.submitCount,
+        };
+        copy(JSON.stringify(data, null, 2));
+    };
+    const isCopied = copiedText !== null;
+    const errorCount = Object.keys(formState.errors || {}).length;
+    const dirtyFieldsCount = Object.keys(formState.dirtyFields || {}).length;
+    const touchedFieldsCount = Object.keys(formState.touchedFields || {}).length;
+    const getChangedFields = () => {
+        if (!formState.dirtyFields || !values)
+            return {};
+        const changed = {};
+        const getNestedValue = (obj, path) => {
+            return path.split('.').reduce((acc, key) => acc?.[key], obj);
+        };
+        const processDirtyFields = (dirty, prefix = '') => {
+            Object.keys(dirty).forEach((key) => {
+                const fullPath = prefix ? `${prefix}.${key}` : key;
+                const dirtyValue = dirty[key];
+                if (dirtyValue === true) {
+                    const currentValue = getNestedValue(values, fullPath);
+                    const originalValue = originalValues ? getNestedValue(originalValues, fullPath) : undefined;
+                    if (JSON.stringify(currentValue) !== JSON.stringify(originalValue)) {
+                        changed[fullPath] = {
+                            from: originalValue,
+                            to: currentValue,
+                        };
+                    }
+                }
+                else if (typeof dirtyValue === 'object' && dirtyValue !== null) {
+                    processDirtyFields(dirtyValue, fullPath);
+                }
+            });
+        };
+        processDirtyFields(formState.dirtyFields);
+        return changed;
+    };
+    const changedFields = getChangedFields();
+    const changedFieldsCount = Object.keys(changedFields).length;
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const deltaX = e.clientX - dragStart.x;
+                const deltaY = e.clientY - dragStart.y;
+                setPanelPosition((prev) => ({
+                    x: prev.x + deltaX,
+                    y: prev.y + deltaY,
+                }));
+                setDragStart({ x: e.clientX, y: e.clientY });
+            }
+            if (isResizing) {
+                const deltaX = e.clientX - resizeStart.x;
+                const deltaY = e.clientY - resizeStart.y;
+                const maxHeight = window.innerHeight * 0.85;
+                setPanelSize({
+                    width: Math.max(300, resizeStart.width + deltaX),
+                    height: Math.min(maxHeight, Math.max(200, resizeStart.height + deltaY)),
+                });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setIsResizing(false);
+        };
+        if (isDragging || isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, isResizing, dragStart, resizeStart]);
+    const handleHeaderMouseDown = (e) => {
+        if (panelRef.current) {
+            const rect = panelRef.current.getBoundingClientRect();
+            setIsDragging(true);
+            setDragStart({
+                x: e.clientX,
+                y: e.clientY,
+            });
+            setPanelPosition({
+                x: rect.left,
+                y: rect.top,
+            });
+        }
+    };
+    const handleResizeMouseDown = (e) => {
+        e.stopPropagation();
+        setIsResizing(true);
+        setResizeStart({
+            x: e.clientX,
+            y: e.clientY,
+            width: panelSize.width,
+            height: panelSize.height,
+        });
+    };
+    const renderErrors = () => {
+        if (!formState.errors || Object.keys(formState.errors).length === 0) {
+            return (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors"));
+        }
+        return Object.entries(formState.errors).map(([field, error]) => (React.createElement("div", { key: field, style: errorItemStyle },
+            React.createElement("div", { style: errorLabelStyle }, field),
+            React.createElement("div", { style: errorMessageStyle }, error?.message || 'Invalid value'))));
+    };
+    const handleGenerateMock = async () => {
+        if (!generateMock) {
+            setGenerateError('generateMock 함수가 필요합니다');
+            return;
+        }
+        setIsGenerating(true);
+        setGenerateError(null);
+        try {
+            const mockData = await generateMock({
+                values,
+                originalValues,
+            });
+            const setNestedValue = (data, prefix = '') => {
+                Object.keys(data).forEach((key) => {
+                    const fullPath = prefix ? `${prefix}.${key}` : key;
+                    const value = data[key];
+                    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+                        setNestedValue(value, fullPath);
+                    }
+                    else {
+                        setValue(fullPath, value, {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                        });
+                    }
+                });
+            };
+            setNestedValue(mockData);
+            if (trigger) {
+                await trigger();
+            }
+        }
+        catch (error) {
+            setGenerateError(error.message || 'Mock 데이터 생성 실패');
+        }
+        finally {
+            setIsGenerating(false);
+        }
+    };
+    return (React.createElement("div", { ref: panelRef, style: getPanelStyle('bottom-right', panelPosition, panelSize, isDragging) },
+        React.createElement("div", { style: headerStyle, onMouseDown: handleHeaderMouseDown },
+            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                React.createElement("div", { style: headerTitleStyle },
+                    "\uD83D\uDCDD ",
+                    title),
+                React.createElement("div", { style: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
+            React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+                generateMock && (React.createElement("button", { type: "button", onClick: handleGenerateMock, disabled: isGenerating, style: {
+                        ...getCopyButtonStyle(false),
+                        backgroundColor: isGenerating ? '#9ca3af' : '#10b981',
+                        opacity: isGenerating ? 0.6 : 1,
+                        cursor: isGenerating ? 'not-allowed' : 'pointer',
+                    }, onMouseEnter: (e) => {
+                        if (!isGenerating)
+                            e.currentTarget.style.backgroundColor = '#059669';
+                    }, onMouseLeave: (e) => {
+                        if (!isGenerating)
+                            e.currentTarget.style.backgroundColor = '#10b981';
+                    } }, isGenerating ? '⏳ Generating...' : '🤖 Generate Mock')),
+                React.createElement("button", { type: "button", onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
+                        if (!isCopied)
+                            e.currentTarget.style.backgroundColor = '#2563eb';
+                    }, onMouseLeave: (e) => {
+                        if (!isCopied)
+                            e.currentTarget.style.backgroundColor = '#3b82f6';
+                    } }, isCopied ? '✓ Copied' : 'Copy All'))),
+        generateError && (React.createElement("div", { style: {
+                padding: '8px 16px',
+                backgroundColor: '#fef2f2',
+                borderBottom: '1px solid #fecaca',
+                fontSize: '12px',
+                color: '#991b1b',
+            } }, generateError)),
+        mounted && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: tabContainerStyle },
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all') }, "All"),
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('values'), style: getTabStyle(activeTab === 'values') }, "Values"),
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors') },
+                    "Errors ",
+                    errorCount > 0 && `(${errorCount})`),
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed') },
+                    "Changed ",
+                    changedFieldsCount > 0 && `(${changedFieldsCount})`),
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('state'), style: getTabStyle(activeTab === 'state') }, "State"),
+                validationSchema && React.createElement("button", { type: "button", onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation') }, "Validation")),
+            React.createElement("div", { style: contentStyle },
+                activeTab === 'all' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: statsContainerStyle },
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
+                            React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
+                            React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submit Count"),
+                            React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submitting"),
+                            React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
+                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values || {}, null, 2)),
+                    errorCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle },
+                            "Validation Errors (",
+                            errorCount,
+                            ")"),
+                        renderErrors())),
+                    changedFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle },
+                            "Changed Fields (",
+                            changedFieldsCount,
+                            ")"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))),
+                    dirtyFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)))),
+                    touchedFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2)))))),
+                activeTab === 'values' && (values && Object.keys(values).length > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
+                    React.createElement("div", null, "No form values")))),
+                activeTab === 'errors' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle },
+                        "Validation Errors ",
+                        errorCount > 0 && `(${errorCount})`),
+                    errorCount > 0 ? renderErrors() : React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors"))),
+                activeTab === 'changed' && (changedFieldsCount > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle },
+                        "Changed Fields (",
+                        changedFieldsCount,
+                        ")"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
+                    React.createElement("div", null, "No changed fields")))),
+                activeTab === 'state' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: statsContainerStyle },
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
+                            React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
+                            React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submit Count"),
+                            React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submitting"),
+                            React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
+                    dirtyFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)))),
+                    touchedFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2)))))),
+                activeTab === 'validation' && validationSchema && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle }, "Validation Schema"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(validationSchema, null, 2))))))),
+        React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleStyle }),
+        React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleIndicatorStyle })));
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import 'dayjs/locale/ko';
+export type Props = {
+    /** 패널 초기 위치 (기본값: 'bottom-right') */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+/**
+ * 타임존 개발용 도구 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * import { DevToolsPanel } from '@blastlabs/utils/components/dev';
+ * import { TimezoneDevTools } from '@blastlabs/utils/components/dev';
+ *
+ * function MyPage() {
+ *   return (
+ *     <>
+ *       <YourContent />
+ *
+ *       <DevToolsPanel>
+ *         <TimezoneDevTools />
+ *       </DevToolsPanel>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export default function TimezoneDevTools({ position }: Props): React.JSX.Element;
+//# sourceMappingURL=TimezoneDevTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimezoneDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/TimezoneDevTools/TimezoneDevTools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,iBAAiB,CAAC;AAuCzB,MAAM,MAAM,KAAK,GAAG;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAyB,EAAE,EAAE,KAAK,qBAwG5E"}

package/dist/components/dev/TimezoneDevTools/TimezoneDevTools.js

@@ -0,0 +1,122 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import 'dayjs/locale/ko';
+import { getUserTimezone, getTimezoneOffset } from '../../../date';
+import { headerStyle, contentStyle, sectionTitleStyle, cardStyle, cityNameStyle, timezoneStyle, timeStyle, offsetStyle, highlightStyle, } from './styles';
+import { getPanelStyle } from '../FormDevTools/styles';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const CITIES = [
+    { name: '서울', timezone: 'Asia/Seoul', flag: '🇰🇷' },
+    { name: '뉴욕', timezone: 'America/New_York', flag: '🇺🇸' },
+    { name: '런던', timezone: 'Europe/London', flag: '🇬🇧' },
+    { name: '도쿄', timezone: 'Asia/Tokyo', flag: '🇯🇵' },
+    { name: '파리', timezone: 'Europe/Paris', flag: '🇫🇷' },
+    { name: '시드니', timezone: 'Australia/Sydney', flag: '🇦🇺' },
+    { name: '베를린', timezone: 'Europe/Berlin', flag: '🇩🇪' },
+    { name: '상하이', timezone: 'Asia/Shanghai', flag: '🇨🇳' },
+];
+/**
+ * 타임존 개발용 도구 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * import { DevToolsPanel } from '@blastlabs/utils/components/dev';
+ * import { TimezoneDevTools } from '@blastlabs/utils/components/dev';
+ *
+ * function MyPage() {
+ *   return (
+ *     <>
+ *       <YourContent />
+ *
+ *       <DevToolsPanel>
+ *         <TimezoneDevTools />
+ *       </DevToolsPanel>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export default function TimezoneDevTools({ position = 'bottom-right' }) {
+    const [selectedTimezone, setSelectedTimezone] = useState('');
+    const [userTimezone, setUserTimezone] = useState('');
+    const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [now, setNow] = useState(dayjs());
+    useEffect(() => {
+        const tz = getUserTimezone();
+        setUserTimezone(tz);
+        setSelectedTimezone(tz);
+        setNow(dayjs());
+    }, []);
+    const handleMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        setIsDragging(true);
+        setDragStart({ x: e.clientX - panelPosition.x, y: e.clientY - panelPosition.y });
+    };
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isDragging)
+                return;
+            setPanelPosition({
+                x: e.clientX - dragStart.x,
+                y: e.clientY - dragStart.y,
+            });
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, dragStart]);
+    return (
+    // <DevTool icon="🌍" title="Timezone DevTools">
+    React.createElement("div", { style: getPanelStyle(position, panelPosition, { width: 360, height: 500 }, isDragging), onMouseDown: handleMouseDown },
+        React.createElement("div", { style: headerStyle },
+            React.createElement("span", { style: { fontWeight: 'bold', color: '#111827' } }, "\uD83C\uDF0D \uD0C0\uC784\uC874 \uB3C4\uAD6C")),
+        React.createElement("div", { style: contentStyle },
+            React.createElement("div", { style: { marginBottom: '16px' } },
+                React.createElement("div", { style: sectionTitleStyle }, "\uD83D\uDCCD \uB0B4 \uD0C0\uC784\uC874"),
+                React.createElement("div", { style: cardStyle },
+                    React.createElement("div", null,
+                        React.createElement("div", { style: cityNameStyle }, userTimezone),
+                        React.createElement("div", { style: timezoneStyle },
+                            "UTC",
+                            getTimezoneOffset(userTimezone))),
+                    React.createElement("div", { style: timeStyle }, now.tz(userTimezone).format('HH:mm:ss')))),
+            React.createElement("div", null,
+                React.createElement("div", { style: sectionTitleStyle }, "\uD83C\uDF06 \uC8FC\uC694 \uB3C4\uC2DC \uD604\uC9C0 \uC2DC\uAC04"),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } }, CITIES.map(city => {
+                    const isSelected = city.timezone === selectedTimezone;
+                    const cityTime = now.tz(city.timezone);
+                    const offset = getTimezoneOffset(city.timezone);
+                    return (React.createElement("div", { key: city.timezone, style: { ...cardStyle, ...(isSelected ? highlightStyle : {}) } },
+                        React.createElement("div", null,
+                            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                                React.createElement("span", { style: { fontSize: '18px' } }, city.flag),
+                                React.createElement("div", null,
+                                    React.createElement("div", { style: cityNameStyle }, city.name),
+                                    React.createElement("div", { style: timezoneStyle },
+                                        city.timezone,
+                                        React.createElement("span", { style: offsetStyle },
+                                            "UTC",
+                                            offset))))),
+                        React.createElement("div", { style: timeStyle }, cityTime.format('HH:mm:ss'))));
+                }))),
+            React.createElement("div", { style: { marginTop: '16px', padding: '12px', backgroundColor: '#f3f4f6', borderRadius: '8px' } },
+                React.createElement("div", { style: { fontSize: '11px', color: '#6b7280', marginBottom: '4px' } }, "UTC \uAE30\uC900"),
+                React.createElement("div", { style: { fontSize: '20px', fontWeight: 'bold', color: '#111827', fontFamily: 'monospace' } }, now.utc().format('YYYY-MM-DD HH:mm:ss')))))
+    // </DevTool>
+    );
+}

package/dist/components/dev/TimezoneDevTools/TimezoneDevToolsContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import 'dayjs/locale/ko';
+export default function TimezoneDevToolsContent(): React.JSX.Element;
+//# sourceMappingURL=TimezoneDevToolsContent.d.ts.map

package/dist/components/dev/TimezoneDevTools/TimezoneDevToolsContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimezoneDevToolsContent.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/TimezoneDevTools/TimezoneDevToolsContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,iBAAiB,CAAC;AAuCzB,MAAM,CAAC,OAAO,UAAU,uBAAuB,sBAoI9C"}

package/dist/components/dev/TimezoneDevTools/TimezoneDevToolsContent.js

@@ -0,0 +1,121 @@
+'use client';
+import React, { useState, useEffect, useRef } from 'react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import 'dayjs/locale/ko';
+import { getUserTimezone, getTimezoneOffset } from '../../../date';
+import { headerStyle, contentStyle, sectionTitleStyle, cardStyle, cityNameStyle, timezoneStyle, timeStyle, offsetStyle, highlightStyle, } from './styles';
+import { getPanelStyle } from '../FormDevTools/styles';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const CITIES = [
+    { name: '서울', timezone: 'Asia/Seoul', flag: '🇰🇷' },
+    { name: '뉴욕', timezone: 'America/New_York', flag: '🇺🇸' },
+    { name: '런던', timezone: 'Europe/London', flag: '🇬🇧' },
+    { name: '도쿄', timezone: 'Asia/Tokyo', flag: '🇯🇵' },
+    { name: '파리', timezone: 'Europe/Paris', flag: '🇫🇷' },
+    { name: '시드니', timezone: 'Australia/Sydney', flag: '🇦🇺' },
+    { name: '베를린', timezone: 'Europe/Berlin', flag: '🇩🇪' },
+    { name: '상하이', timezone: 'Asia/Shanghai', flag: '🇨🇳' },
+];
+export default function TimezoneDevToolsContent() {
+    const [selectedTimezone, setSelectedTimezone] = useState('');
+    const [userTimezone, setUserTimezone] = useState('');
+    const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [now, setNow] = useState(dayjs('2000-01-01T00:00:00Z')); // 고정된 초기값
+    const [mounted, setMounted] = useState(false);
+    const panelRef = useRef(null);
+    useEffect(() => {
+        const tz = getUserTimezone();
+        setUserTimezone(tz);
+        setSelectedTimezone(tz);
+        setNow(dayjs()); // 클라이언트에서만 실제 시간 설정
+        setMounted(true);
+    }, []);
+    // 1초마다 시간 업데이트 (클라이언트 사이드에서만)
+    useEffect(() => {
+        if (!mounted)
+            return;
+        const timer = setInterval(() => {
+            setNow(dayjs());
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [mounted]);
+    // 드래그 핸들러 (FormDevTools와 동일한 방식)
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const deltaX = e.clientX - dragStart.x;
+                const deltaY = e.clientY - dragStart.y;
+                setPanelPosition((prev) => ({
+                    x: prev.x + deltaX,
+                    y: prev.y + deltaY,
+                }));
+                setDragStart({ x: e.clientX, y: e.clientY });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, dragStart]);
+    const handleMouseDown = (e) => {
+        if (panelRef.current) {
+            const rect = panelRef.current.getBoundingClientRect();
+            setIsDragging(true);
+            setDragStart({
+                x: e.clientX,
+                y: e.clientY,
+            });
+            setPanelPosition({
+                x: rect.left,
+                y: rect.top,
+            });
+        }
+    };
+    return (React.createElement("div", { ref: panelRef, style: getPanelStyle('bottom-right', panelPosition, { width: 360, height: 500 }, isDragging), onMouseDown: handleMouseDown },
+        React.createElement("div", { style: headerStyle },
+            React.createElement("span", { style: { fontWeight: 'bold', color: '#111827' } }, "\uD83C\uDF0D \uD0C0\uC784\uC874 \uB3C4\uAD6C")),
+        mounted && (React.createElement("div", { style: contentStyle },
+            React.createElement("div", { style: { marginBottom: '16px' } },
+                React.createElement("div", { style: sectionTitleStyle }, "\uD83D\uDCCD \uB0B4 \uD0C0\uC784\uC874"),
+                React.createElement("div", { style: cardStyle },
+                    React.createElement("div", null,
+                        React.createElement("div", { style: cityNameStyle }, userTimezone),
+                        React.createElement("div", { style: timezoneStyle },
+                            "UTC",
+                            getTimezoneOffset(userTimezone))),
+                    React.createElement("div", { style: timeStyle }, userTimezone ? now.tz(userTimezone).format('HH:mm:ss') : '--:--:--'))),
+            React.createElement("div", null,
+                React.createElement("div", { style: sectionTitleStyle }, "\uD83C\uDF06 \uC8FC\uC694 \uB3C4\uC2DC \uD604\uC9C0 \uC2DC\uAC04"),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } }, CITIES.map(city => {
+                    const isSelected = city.timezone === selectedTimezone;
+                    const cityTime = now.tz(city.timezone);
+                    const offset = getTimezoneOffset(city.timezone);
+                    return (React.createElement("div", { key: city.timezone, style: { ...cardStyle, ...(isSelected ? highlightStyle : {}) } },
+                        React.createElement("div", null,
+                            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                                React.createElement("span", { style: { fontSize: '18px' } }, city.flag),
+                                React.createElement("div", null,
+                                    React.createElement("div", { style: cityNameStyle }, city.name),
+                                    React.createElement("div", { style: timezoneStyle },
+                                        city.timezone,
+                                        React.createElement("span", { style: offsetStyle },
+                                            "UTC",
+                                            offset))))),
+                        React.createElement("div", { style: timeStyle }, cityTime.format('HH:mm:ss'))));
+                }))),
+            React.createElement("div", { style: { marginTop: '16px', padding: '12px', backgroundColor: '#f3f4f6', borderRadius: '8px' } },
+                React.createElement("div", { style: { fontSize: '11px', color: '#6b7280', marginBottom: '4px' } }, "UTC \uAE30\uC900"),
+                React.createElement("div", { style: { fontSize: '20px', fontWeight: 'bold', color: '#111827', fontFamily: 'monospace' } }, now.utc().format('YYYY-MM-DD HH:mm:ss')))))));
+}

package/dist/components/dev/TimezoneDevTools/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './TimezoneDevTools';
+export type { Props as TimezoneDevToolsProps } from './TimezoneDevTools';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/TimezoneDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,KAAK,IAAI,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/dev/TimezoneDevTools/index.js

@@ -0,0 +1 @@
+export { default } from './TimezoneDevTools';

package/dist/components/dev/TimezoneDevTools/styles.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export declare const containerStyle: CSSProperties;
+export declare const headerStyle: CSSProperties;
+export declare const contentStyle: CSSProperties;
+export declare const sectionTitleStyle: CSSProperties;
+export declare const cardStyle: CSSProperties;
+export declare const cityNameStyle: CSSProperties;
+export declare const timezoneStyle: CSSProperties;
+export declare const timeStyle: CSSProperties;
+export declare const offsetStyle: CSSProperties;
+export declare const highlightStyle: CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/dev/TimezoneDevTools/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/TimezoneDevTools/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aAOzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAO/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAQvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAG3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAI3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,aAKvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aAMzB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAG5B,CAAC"}