goodchuck-utils 1.7.1 → 1.9.0

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

@@ -13,6 +13,28 @@ export type Props = {
     formState: FormState;
     /** 현재 폼 values (watch() 결과) */
     values?: Record<string, any>;
+    /** 초기값 (defaultValues 또는 reset()으로 설정한 원본 값, changedFields 계산에 사용) */
+    originalValues?: Record<string, any>;
+    /** Validation 스키마 정보 (zod, yup 등) - refine 조건 표시에 사용 */
+    validationSchema?: Record<string, any>;
+    /** react-hook-form의 reset 함수 (mock 데이터 생성 후 폼에 채우기 위해 필요) */
+    reset?: (values: Record<string, any>, options?: {
+        keepDirty?: boolean;
+        keepTouched?: boolean;
+    }) => void;
+    /** react-hook-form의 setValue 함수 (dirty 상태를 true로 만들기 위해 필요, 선택사항) */
+    setValue?: (name: string, value: any, options?: {
+        shouldDirty?: boolean;
+        shouldValidate?: boolean;
+    }) => void;
+    /** react-hook-form의 trigger 함수 (validation 실행을 위해 필요, 선택사항) */
+    trigger?: (name?: string | string[]) => Promise<boolean>;
+    /** Mock 데이터 생성 함수 (비동기 가능) */
+    generateMock?: (params: {
+        values?: Record<string, any>;
+        originalValues?: Record<string, any>;
+        validationSchema?: Record<string, any>;
+    }) => Promise<Record<string, any>> | Record<string, any>;
     /** 표시 위치 (기본값: 'bottom-left') */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** 패널 제목 (기본값: 'Form DevTools') */
@@ -29,29 +51,51 @@ export type Props = {
  * import { FormDevTools } from 'goodchuck-utils/components/dev';
  *
  * function MyForm() {
+ *   // 신규 폼: defaultValues 사용
+ *   const defaultValues = {
+ *     username: '',
+ *     email: '',
+ *     age: 0,
+ *   };
+ *
  *   const { register, handleSubmit, formState, watch } = useForm({
- *     defaultValues: {
- *       username: '',
- *       email: '',
- *       age: 0,
- *     }
+ *     defaultValues,
  *   });
  *
- *   const values = watch(); // 모든 값 watch
- *
- *   const onSubmit = (data) => {
- *     console.log(data);
- *   };
+ *   const values = watch();
  *
  *   return (
  *     <form onSubmit={handleSubmit(onSubmit)}>
- *       <input {...register('username', { required: 'Username is required' })} />
- *       <input {...register('email', { required: 'Email is required' })} />
- *       <input type="number" {...register('age', { min: 18 })} />
+ *       <input {...register('username')} />
+ *       <input {...register('email')} />
  *       <button type="submit">Submit</button>
  *
  *       {import.meta.env.DEV && (
- *         <FormDevTools formState={formState} values={values} />
+ *         <FormDevTools
+ *           formState={formState}
+ *           values={values}
+ *           originalValues={defaultValues}
+ *           reset={reset} // mock 데이터 생성 후 폼에 채우기 위해 필요
+ *           generateMock={async ({ values, validationSchema }) => {
+ *             // AI를 사용한 mock 데이터 생성 (예시)
+ *             const response = await fetch('https://api.openai.com/v1/chat/completions', {
+ *               method: 'POST',
+ *               headers: {
+ *                 'Content-Type': 'application/json',
+ *                 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
+ *               },
+ *               body: JSON.stringify({
+ *                 model: 'gpt-3.5-turbo',
+ *                 messages: [{
+ *                   role: 'user',
+ *                   content: `다음 폼 필드에 맞는 mock 데이터를 생성해주세요: ${JSON.stringify(values)}`
+ *                 }],
+ *               }),
+ *             });
+ *             const data = await response.json();
+ *             return JSON.parse(data.choices[0].message.content);
+ *           }}
+ *         />
  *       )}
  *     </form>
  *   );
@@ -60,16 +104,36 @@ export type Props = {
  *
  * @example
  * ```tsx
- * // Create React App 프로젝트
- * {process.env.NODE_ENV === 'development' && (
- *   <FormDevTools
- *     formState={formState}
- *     values={values}
- *     position="top-right"
- *     title="User Form Debug"
- *   />
- * )}
+ * // 수정 폼: reset()으로 초기값 설정
+ * function EditForm({ userData }) {
+ *   const { register, handleSubmit, formState, watch, reset } = useForm();
+ *
+ *   useEffect(() => {
+ *     // 서버에서 가져온 데이터로 폼 초기화
+ *     reset(userData);
+ *   }, [userData, reset]);
+ *
+ *   const values = watch();
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register('username')} />
+ *       <input {...register('email')} />
+ *       <button type="submit">Update</button>
+ *
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <FormDevTools
+ *           formState={formState}
+ *           values={values}
+ *           originalValues={userData} // reset()으로 설정한 원본 값
+ *           position="top-right"
+ *           title="Edit Form Debug"
+ *         />
+ *       )}
+ *     </form>
+ *   );
+ * }
  * ```
  */
-export default function FormDevTools({ formState, values, position, title }: Props): React.JSX.Element;
+export default function FormDevTools({ formState, values, originalValues, validationSchema, reset, setValue, trigger, generateMock, position, title }: Props): React.JSX.Element;
 //# sourceMappingURL=FormDevTools.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBA2MnH"}
+{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA0B3D,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,6DAA6D;IAC7D,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACxG,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7G,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzD,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACxC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAggB7L"}

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
+import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, tabContainerStyle, getTabStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
 /**
  * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
  * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
@@ -12,29 +12,51 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
  * import { FormDevTools } from 'goodchuck-utils/components/dev';
  *
  * function MyForm() {
+ *   // 신규 폼: defaultValues 사용
+ *   const defaultValues = {
+ *     username: '',
+ *     email: '',
+ *     age: 0,
+ *   };
+ *
  *   const { register, handleSubmit, formState, watch } = useForm({
- *     defaultValues: {
- *       username: '',
- *       email: '',
- *       age: 0,
- *     }
+ *     defaultValues,
  *   });
  *
- *   const values = watch(); // 모든 값 watch
- *
- *   const onSubmit = (data) => {
- *     console.log(data);
- *   };
+ *   const values = watch();
  *
  *   return (
  *     <form onSubmit={handleSubmit(onSubmit)}>
- *       <input {...register('username', { required: 'Username is required' })} />
- *       <input {...register('email', { required: 'Email is required' })} />
- *       <input type="number" {...register('age', { min: 18 })} />
+ *       <input {...register('username')} />
+ *       <input {...register('email')} />
  *       <button type="submit">Submit</button>
  *
  *       {import.meta.env.DEV && (
- *         <FormDevTools formState={formState} values={values} />
+ *         <FormDevTools
+ *           formState={formState}
+ *           values={values}
+ *           originalValues={defaultValues}
+ *           reset={reset} // mock 데이터 생성 후 폼에 채우기 위해 필요
+ *           generateMock={async ({ values, validationSchema }) => {
+ *             // AI를 사용한 mock 데이터 생성 (예시)
+ *             const response = await fetch('https://api.openai.com/v1/chat/completions', {
+ *               method: 'POST',
+ *               headers: {
+ *                 'Content-Type': 'application/json',
+ *                 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
+ *               },
+ *               body: JSON.stringify({
+ *                 model: 'gpt-3.5-turbo',
+ *                 messages: [{
+ *                   role: 'user',
+ *                   content: `다음 폼 필드에 맞는 mock 데이터를 생성해주세요: ${JSON.stringify(values)}`
+ *                 }],
+ *               }),
+ *             });
+ *             const data = await response.json();
+ *             return JSON.parse(data.choices[0].message.content);
+ *           }}
+ *         />
  *       )}
  *     </form>
  *   );
@@ -43,31 +65,55 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
  *
  * @example
  * ```tsx
- * // Create React App 프로젝트
- * {process.env.NODE_ENV === 'development' && (
- *   <FormDevTools
- *     formState={formState}
- *     values={values}
- *     position="top-right"
- *     title="User Form Debug"
- *   />
- * )}
+ * // 수정 폼: reset()으로 초기값 설정
+ * function EditForm({ userData }) {
+ *   const { register, handleSubmit, formState, watch, reset } = useForm();
+ *
+ *   useEffect(() => {
+ *     // 서버에서 가져온 데이터로 폼 초기화
+ *     reset(userData);
+ *   }, [userData, reset]);
+ *
+ *   const values = watch();
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register('username')} />
+ *       <input {...register('email')} />
+ *       <button type="submit">Update</button>
+ *
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <FormDevTools
+ *           formState={formState}
+ *           values={values}
+ *           originalValues={userData} // reset()으로 설정한 원본 값
+ *           position="top-right"
+ *           title="Edit Form Debug"
+ *         />
+ *       )}
+ *     </form>
+ *   );
+ * }
  * ```
  */
-export default function FormDevTools({ formState, values, position = 'bottom-left', title = 'Form DevTools' }) {
+export default function FormDevTools({ formState, values, originalValues, validationSchema, reset, setValue, trigger, generateMock, position = 'bottom-left', title = 'Form DevTools' }) {
     const [isOpen, setIsOpen] = useState(false);
+    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 panelRef = useRef(null);
     const { copy, copiedText } = useCopyToClipboard();
     const handleCopy = () => {
         const data = {
             values,
             errors: formState.errors,
+            changedFields,
             dirtyFields: formState.dirtyFields,
             touchedFields: formState.touchedFields,
             isValid: formState.isValid,
@@ -80,6 +126,40 @@ export default function FormDevTools({ formState, values, position = 'bottom-lef
     const errorCount = Object.keys(formState.errors || {}).length;
     const dirtyFieldsCount = Object.keys(formState.dirtyFields || {}).length;
     const touchedFieldsCount = Object.keys(formState.touchedFields || {}).length;
+    // Changed Fields 계산: dirtyFields를 기반으로 실제 변경된 값들을 추출
+    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) => {
@@ -147,6 +227,52 @@ export default function FormDevTools({ formState, values, position = 'bottom-lef
             React.createElement("div", { style: errorLabelStyle }, field),
             React.createElement("div", { style: errorMessageStyle }, error?.message || 'Invalid value'))));
     };
+    // Mock 데이터 생성 핸들러
+    const handleGenerateMock = async () => {
+        if (!reset) {
+            setGenerateError('reset 함수가 필요합니다');
+            return;
+        }
+        if (!generateMock) {
+            setGenerateError('generateMock 함수가 필요합니다');
+            return;
+        }
+        setIsGenerating(true);
+        setGenerateError(null);
+        try {
+            // 사용자가 제공한 generateMock 함수 사용
+            const mockData = await generateMock({
+                values,
+                originalValues,
+                validationSchema,
+            });
+            // reset으로 값 설정
+            // keepDirty: false는 reset 후 dirty를 초기화하는데, 
+            // 이후 setValue로 shouldDirty: true를 설정하면 dirty가 true가 됨
+            reset(mockData, { keepDirty: false, keepTouched: false });
+            // dirty와 validate를 true로 만들기 위해 setValue 사용
+            // reset 후에 setValue를 호출하면 dirty 상태가 true가 됨
+            if (setValue) {
+                // 모든 필드를 dirty로 만들고 validation 실행
+                Object.keys(mockData).forEach((key) => {
+                    setValue(key, mockData[key], {
+                        shouldDirty: true, // dirty를 true로 설정
+                        shouldValidate: true, // validation 실행
+                    });
+                });
+            }
+            // 전체 validation 실행
+            if (trigger) {
+                await trigger();
+            }
+        }
+        catch (error) {
+            setGenerateError(error.message || 'Mock 데이터 생성 실패');
+        }
+        finally {
+            setIsGenerating(false);
+        }
+    };
     return (React.createElement("div", { style: getContainerStyle(position) },
         React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: getToggleButtonStyle(formState.isValid), onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#dc2626' : '#7c3aed'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#ef4444' : '#8b5cf6') }, isOpen ? '✕' : '📝'),
         isOpen && (React.createElement("div", { ref: panelRef, style: getPanelStyle(position, panelPosition, panelSize, isDragging) },
@@ -156,41 +282,156 @@ export default function FormDevTools({ formState, values, position = 'bottom-lef
                         "\uD83D\uDCDD ",
                         title),
                     React.createElement("div", { style: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
-                React.createElement("button", { onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
-                        if (!isCopied)
-                            e.currentTarget.style.backgroundColor = '#2563eb';
+                React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+                    reset && generateMock && (React.createElement("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", { 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)),
+            React.createElement("div", { style: tabContainerStyle },
+                React.createElement("button", { onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all'), onMouseEnter: (e) => {
+                        if (activeTab !== 'all')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'all')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "All"),
+                React.createElement("button", { onClick: () => setActiveTab('values'), style: getTabStyle(activeTab === 'values'), onMouseEnter: (e) => {
+                        if (activeTab !== 'values')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'values')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "Values"),
+                React.createElement("button", { onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
+                        if (activeTab !== 'errors')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {
-                        if (!isCopied)
-                            e.currentTarget.style.backgroundColor = '#3b82f6';
-                    } }, isCopied ? '✓ Copied' : 'Copy All')),
+                        if (activeTab !== 'errors')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } },
+                    "Errors ",
+                    errorCount > 0 && `(${errorCount})`),
+                React.createElement("button", { onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed'), onMouseEnter: (e) => {
+                        if (activeTab !== 'changed')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'changed')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } },
+                    "Changed ",
+                    changedFieldsCount > 0 && `(${changedFieldsCount})`),
+                React.createElement("button", { onClick: () => setActiveTab('state'), style: getTabStyle(activeTab === 'state'), onMouseEnter: (e) => {
+                        if (activeTab !== 'state')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'state')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "State"),
+                validationSchema && (React.createElement("button", { onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation'), onMouseEnter: (e) => {
+                        if (activeTab !== 'validation')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'validation')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "Validation"))),
             React.createElement("div", { style: contentStyle },
-                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,
+                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' && (React.createElement(React.Fragment, null, 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", { style: { marginBottom: '8px' } }, "No form values"),
+                    React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Form values will appear here"))))),
+                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' && (React.createElement(React.Fragment, null, changedFieldsCount > 0 ? (React.createElement(React.Fragment, null,
                     React.createElement("div", { style: sectionTitleStyle },
-                        "Validation Errors (",
-                        errorCount,
+                        "Changed Fields (",
+                        changedFieldsCount,
                         ")"),
-                    renderErrors())),
-                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))))),
+                    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", { style: { marginBottom: '8px' } }, "No changed fields"),
+                    React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Fields will appear here when you modify form values"))))),
+                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/FormDevTools/styles.d.ts

@@ -28,6 +28,8 @@ export declare const headerStyle: CSSProperties;
 export declare const headerTitleStyle: CSSProperties;
 export declare const getStatusBadgeStyle: (isValid: boolean | undefined) => CSSProperties;
 export declare const getCopyButtonStyle: (isCopied: boolean) => CSSProperties;
+export declare const tabContainerStyle: CSSProperties;
+export declare const getTabStyle: (isActive: boolean) => CSSProperties;
 export declare const contentStyle: CSSProperties;
 export declare const sectionTitleStyle: CSSProperties;
 export declare const codeBlockStyle: CSSProperties;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,MAAM,CAAC,MAAM,EAAE,aAAa,CAK/D,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,aAQpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAclE,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,UAAU,MAAM,EAChB,eAAe;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACvC,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC5C,YAAY,OAAO,KAClB,aAoBF,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,aAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAUjE,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,UAAU,OAAO,KAAG,aAUrD,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,aAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAO/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAG/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAS/B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAUxC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,MAAM,CAAC,MAAM,EAAE,aAAa,CAK/D,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,aAQpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAclE,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,UAAU,MAAM,EAChB,eAAe;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACvC,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC5C,YAAY,OAAO,KAClB,aAoBF,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,aAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAUjE,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,UAAU,OAAO,KAAG,aAUrD,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,aAK/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,OAAO,KAAG,aAY9C,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,aAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAO/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAG/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAS/B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAUxC,CAAC"}

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

@@ -86,6 +86,25 @@ export const getCopyButtonStyle = (isCopied) => ({
     fontWeight: 600,
     transition: 'background-color 0.2s',
 });
+export const tabContainerStyle = {
+    display: 'flex',
+    borderBottom: '1px solid #e5e7eb',
+    backgroundColor: '#f9fafb',
+    overflowX: 'auto',
+};
+export const getTabStyle = (isActive) => ({
+    flex: '0 0 auto',
+    padding: '10px 16px',
+    border: 'none',
+    backgroundColor: isActive ? 'white' : 'transparent',
+    color: isActive ? '#8b5cf6' : '#6b7280',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: isActive ? 600 : 400,
+    borderBottom: isActive ? '2px solid #8b5cf6' : '2px solid transparent',
+    transition: 'all 0.15s',
+    whiteSpace: 'nowrap',
+});
 export const contentStyle = {
     flex: 1,
     minHeight: 0, // flexbox에서 스크롤이 제대로 작동하도록 필수
@@ -111,6 +130,8 @@ export const codeBlockStyle = {
     maxHeight: '300px',
     marginBottom: '16px',
     color: '#111827', // 검은색 텍스트
+    textAlign: 'left', // 왼쪽 정렬
+    whiteSpace: 'pre', // 공백과 줄바꿈 유지
 };
 export const errorItemStyle = {
     padding: '8px 12px',

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './date';
 export * from './form';
 export * from './string';
+export * from './number';
+export * from './mock';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,QAAQ,CAAC"}