goodchuck-utils 1.5.0 → 1.7.0

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

@@ -0,0 +1,176 @@
+export const getPositionStyles = () => ({
+    'top-left': { top: 16, left: 16 },
+    'top-right': { top: 16, right: 16 },
+    'bottom-left': { bottom: 16, left: 16 },
+    'bottom-right': { bottom: 16, right: 16 },
+});
+export const getContainerStyle = (position) => {
+    const positionStyles = getPositionStyles();
+    return {
+        position: 'fixed',
+        ...positionStyles[position],
+        zIndex: 99999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    };
+};
+export const getToggleButtonStyle = (isValid) => ({
+    width: '48px',
+    height: '48px',
+    borderRadius: '50%',
+    backgroundColor: isValid === false ? '#ef4444' : '#8b5cf6',
+    color: 'white',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: '20px',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'background-color 0.2s',
+});
+export const getPanelStyle = (position, panelPosition, panelSize, isDragging) => {
+    const maxHeight = typeof window !== 'undefined' ? window.innerHeight * 0.85 : 600;
+    return {
+        position: 'fixed',
+        top: panelPosition.y || (position.includes('top') ? 60 : undefined),
+        bottom: !panelPosition.y && position.includes('bottom') ? 60 : undefined,
+        left: panelPosition.x || (position.includes('left') ? 0 : undefined),
+        right: !panelPosition.x && position.includes('right') ? 0 : undefined,
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        width: `${panelSize.width}px`,
+        height: `${Math.min(panelSize.height, maxHeight)}px`,
+        maxHeight: `${maxHeight}px`,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        cursor: isDragging ? 'grabbing' : 'default',
+    };
+};
+export const headerStyle = {
+    padding: '12px 16px',
+    borderBottom: '1px solid #e5e7eb',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#f9fafb',
+    cursor: 'grab',
+    userSelect: 'none',
+};
+export const headerTitleStyle = {
+    fontWeight: 'bold',
+    fontSize: '14px',
+    color: '#111827',
+};
+export const getStatusBadgeStyle = (isValid) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4px',
+    padding: '4px 8px',
+    backgroundColor: isValid ? '#dcfce7' : '#fee2e2',
+    color: isValid ? '#166534' : '#991b1b',
+    borderRadius: '6px',
+    fontSize: '11px',
+    fontWeight: 600,
+});
+export const getCopyButtonStyle = (isCopied) => ({
+    padding: '4px 12px',
+    backgroundColor: isCopied ? '#10b981' : '#3b82f6',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '11px',
+    fontWeight: 600,
+    transition: 'background-color 0.2s',
+});
+export const contentStyle = {
+    flex: 1,
+    minHeight: 0, // flexbox에서 스크롤이 제대로 작동하도록 필수
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    padding: '16px',
+};
+export const sectionTitleStyle = {
+    fontSize: '12px',
+    fontWeight: 'bold',
+    color: '#6b7280',
+    marginBottom: '8px',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+};
+export const codeBlockStyle = {
+    backgroundColor: '#f3f4f6',
+    borderRadius: '6px',
+    padding: '12px',
+    fontSize: '12px',
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: '300px',
+    marginBottom: '16px',
+    color: '#111827', // 검은색 텍스트
+};
+export const errorItemStyle = {
+    padding: '8px 12px',
+    backgroundColor: '#fef2f2',
+    border: '1px solid #fecaca',
+    borderRadius: '6px',
+    marginBottom: '8px',
+};
+export const errorLabelStyle = {
+    fontSize: '12px',
+    fontWeight: 600,
+    color: '#991b1b',
+    marginBottom: '4px',
+};
+export const errorMessageStyle = {
+    fontSize: '11px',
+    color: '#7f1d1d',
+};
+export const statsContainerStyle = {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '12px',
+    marginBottom: '16px',
+};
+export const statCardStyle = {
+    padding: '12px',
+    backgroundColor: '#f9fafb',
+    borderRadius: '8px',
+    border: '1px solid #e5e7eb',
+};
+export const statLabelStyle = {
+    fontSize: '11px',
+    color: '#6b7280',
+    marginBottom: '4px',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+};
+export const statValueStyle = {
+    fontSize: '18px',
+    fontWeight: 'bold',
+    color: '#111827',
+};
+export const resizeHandleStyle = {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: '20px',
+    height: '20px',
+    cursor: 'nwse-resize',
+    backgroundColor: 'transparent',
+    zIndex: 1,
+};
+export const resizeHandleIndicatorStyle = {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: '12px',
+    height: '12px',
+    cursor: 'nwse-resize',
+    borderRight: '3px solid #9ca3af',
+    borderBottom: '3px solid #9ca3af',
+    borderRadius: '0 0 12px 0',
+};

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

@@ -13,6 +13,7 @@ type Props = {
  *
  * @example
  * ```tsx
+ * // Vite 프로젝트
  * import { IdSelector } from 'goodchuck-utils/components/dev';
  *
  * function LoginPage() {
@@ -28,13 +29,21 @@ type Props = {
  *   return (
  *     <div>
  *       <LoginForm />
- *       {process.env.NODE_ENV === 'development' && (
+ *       {import.meta.env.DEV && (
  *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
  *       )}
  *     </div>
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ * )}
+ * ```
  */
 export default function IdSelector({ onLogin, infos }: Props): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"IdSelector.d.ts","sourceRoot":"","sources":["../../../src/components/dev/IdSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,qBAyC3D"}
+{"version":3,"file":"IdSelector.d.ts","sourceRoot":"","sources":["../../../src/components/dev/IdSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,qBAuH3D"}

package/dist/components/dev/IdSelector.js

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
  *
  * @example
  * ```tsx
+ * // Vite 프로젝트
  * import { IdSelector } from 'goodchuck-utils/components/dev';
  *
  * function LoginPage() {
@@ -19,16 +20,26 @@ import React, { useState } from 'react';
  *   return (
  *     <div>
  *       <LoginForm />
- *       {process.env.NODE_ENV === 'development' && (
+ *       {import.meta.env.DEV && (
  *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
  *       )}
  *     </div>
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ * )}
+ * ```
  */
 export default function IdSelector({ onLogin, infos }) {
     const [loading, setLoading] = useState(null);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [hoveredButton, setHoveredButton] = useState(null);
     const handleQuickLogin = async (info, index) => {
         setLoading(index);
         try {
@@ -38,15 +49,81 @@ export default function IdSelector({ onLogin, infos }) {
             setLoading(null);
         }
     };
-    return (React.createElement("div", { className: "fixed top-1/2 right-4 -translate-y-1/2 flex flex-col gap-3 p-4 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 min-w-[280px] z-50" },
-        React.createElement("div", { className: "text-gray-900 dark:text-gray-100 text-sm font-bold pb-2 border-b border-gray-200 dark:border-gray-700" }, "\uD83D\uDE80 \uAC1C\uBC1C\uC6A9 \uBE60\uB978 \uB85C\uADF8\uC778"),
-        infos.map((info, index) => (React.createElement("div", { key: index, className: "flex flex-col gap-2 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-500 transition-all" },
-            React.createElement("button", { onClick: () => handleQuickLogin(info, index), disabled: loading === index, className: "w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors disabled:cursor-not-allowed" }, loading === index ? '로그인 중...' : info.memo),
-            React.createElement("div", { className: "flex flex-col gap-1 text-xs text-gray-600 dark:text-gray-400 px-1" },
-                React.createElement("div", { className: "flex items-center gap-2" },
-                    React.createElement("span", { className: "font-semibold min-w-[24px]" }, "ID"),
-                    React.createElement("span", { className: "font-mono text-gray-700 dark:text-gray-300" }, info.id)),
-                React.createElement("div", { className: "flex items-center gap-2" },
-                    React.createElement("span", { className: "font-semibold min-w-[24px]" }, "PW"),
-                    React.createElement("span", { className: "font-mono text-gray-700 dark:text-gray-300" }, info.pw))))))));
+    const containerStyle = {
+        position: 'fixed',
+        top: '50%',
+        right: '16px',
+        transform: 'translateY(-50%)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        padding: '16px',
+        backgroundColor: '#ffffff',
+        borderRadius: '12px',
+        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        border: '1px solid #e5e7eb',
+        minWidth: '280px',
+        zIndex: 9999,
+    };
+    const headerStyle = {
+        color: '#111827',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        paddingBottom: '8px',
+        borderBottom: '1px solid #e5e7eb',
+    };
+    const getCardStyle = (index) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        padding: '12px',
+        backgroundColor: '#f9fafb',
+        borderRadius: '8px',
+        border: hoveredIndex === index ? '1px solid #60a5fa' : '1px solid #e5e7eb',
+        transition: 'all 0.2s',
+    });
+    const getButtonStyle = (index) => ({
+        width: '100%',
+        padding: '8px 16px',
+        backgroundColor: loading === index ? '#9ca3af' : hoveredButton === index ? '#2563eb' : '#3b82f6',
+        color: 'white',
+        fontWeight: 600,
+        borderRadius: '8px',
+        border: 'none',
+        cursor: loading === index ? 'not-allowed' : 'pointer',
+        transition: 'background-color 0.2s',
+    });
+    const infoContainerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+        fontSize: '12px',
+        color: '#6b7280',
+        paddingLeft: '4px',
+        paddingRight: '4px',
+    };
+    const infoRowStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    };
+    const labelStyle = {
+        fontWeight: 600,
+        minWidth: '24px',
+    };
+    const valueStyle = {
+        fontFamily: 'monospace',
+        color: '#374151',
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("div", { style: headerStyle }, "\uD83D\uDE80 \uAC1C\uBC1C\uC6A9 \uBE60\uB978 \uB85C\uADF8\uC778"),
+        infos.map((info, index) => (React.createElement("div", { key: index, style: getCardStyle(index), onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null) },
+            React.createElement("button", { onClick: () => handleQuickLogin(info, index), disabled: loading === index, style: getButtonStyle(index), onMouseEnter: () => setHoveredButton(index), onMouseLeave: () => setHoveredButton(null) }, loading === index ? '로그인 중...' : info.memo),
+            React.createElement("div", { style: infoContainerStyle },
+                React.createElement("div", { style: infoRowStyle },
+                    React.createElement("span", { style: labelStyle }, "ID"),
+                    React.createElement("span", { style: valueStyle }, info.id)),
+                React.createElement("div", { style: infoRowStyle },
+                    React.createElement("span", { style: labelStyle }, "PW"),
+                    React.createElement("span", { style: valueStyle }, info.pw))))))));
 }

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

@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Props = {
+    /** 표시 위치 (기본값: 'bottom-right') */
+    position?: Position;
+    /** 커스텀 스타일 */
+    style?: CSSProperties;
+};
+/**
+ * 현재 윈도우 크기를 화면에 표시하는 개발용 컴포넌트
+ * 반응형 디버깅에 유용합니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { WindowSizeDisplay } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <WindowSizeDisplay />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <WindowSizeDisplay />}
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 커스텀 스타일 및 위치
+ * <WindowSizeDisplay
+ *   position="top-left"
+ *   style={{ backgroundColor: 'red', color: 'white' }}
+ * />
+ * ```
+ */
+export default function WindowSizeDisplay({ position, style }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=WindowSizeDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WindowSizeDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/dev/WindowSizeDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG7C,KAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE1E,KAAK,KAAK,GAAG;IACX,kCAAkC;IAClC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AASF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,QAAyB,EAAE,KAAK,EAAE,EAAE,KAAK,qBAmCpF"}

package/dist/components/dev/WindowSizeDisplay.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useWindowSize } from '../../hooks/useWindowSize';
+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 },
+};
+/**
+ * 현재 윈도우 크기를 화면에 표시하는 개발용 컴포넌트
+ * 반응형 디버깅에 유용합니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { WindowSizeDisplay } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <WindowSizeDisplay />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <WindowSizeDisplay />}
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 커스텀 스타일 및 위치
+ * <WindowSizeDisplay
+ *   position="top-left"
+ *   style={{ backgroundColor: 'red', color: 'white' }}
+ * />
+ * ```
+ */
+export default function WindowSizeDisplay({ position = 'bottom-right', style }) {
+    const { width, height } = useWindowSize();
+    const containerStyle = {
+        position: 'fixed',
+        ...positionStyles[position],
+        padding: '8px 12px',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        fontSize: '14px',
+        fontFamily: 'monospace',
+        borderRadius: '8px',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+        zIndex: 9999,
+        backdropFilter: 'blur(4px)',
+        ...style,
+    };
+    const innerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("div", { style: innerStyle },
+            React.createElement("span", { style: { color: '#60a5fa' } }, "W:"),
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                width,
+                "px"),
+            React.createElement("span", { style: { color: '#9ca3af' } }, "\u00D7"),
+            React.createElement("span", { style: { color: '#4ade80' } }, "H:"),
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                height,
+                "px"))));
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+type Props = {
+    /** 표시 위치 (기본값: 'bottom-left') */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+/**
+ * z-index 값을 시각화하는 개발용 컴포넌트
+ * 페이지의 모든 요소의 z-index를 하이라이트하고 목록으로 표시합니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { ZIndexDebugger } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <ZIndexDebugger />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <ZIndexDebugger position="top-right" />}
+ * ```
+ */
+export default function ZIndexDebugger({ position }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=ZIndexDebugger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ZIndexDebugger.d.ts","sourceRoot":"","sources":["../../../src/components/dev/ZIndexDebugger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,KAAK,KAAK,GAAG;IACX,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CACtE,CAAC;AAUF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,QAAwB,EAAE,EAAE,KAAK,qBAsNzE"}