@blastlabs/utils 1.11.0 → 1.12.0

package/dist/hooks/time/useInterval.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 일정 시간 간격으로 콜백을 실행하는 hook
+ * interval을 자동으로 관리하고 컴포넌트 언마운트 시 정리합니다.
+ *
+ * @param callback - 일정 간격으로 실행할 함수
+ * @param delay - 실행 간격 (밀리초)
+ *
+ * @example
+ * // 1초마다 카운터 증가
+ * function TimerComponent() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   useInterval(() => {
+ *     setCount(c => c + 1);
+ *   }, 1000);
+ *
+ *   return <div>Count: {count}</div>;
+ * }
+ *
+ * @example
+ * // delay 변경으로 interval 속도 조절
+ * function AdjustableTimer() {
+ *   const [count, setCount] = useState(0);
+ *   const [delay, setDelay] = useState(1000);
+ *
+ *   useInterval(() => {
+ *     setCount(c => c + 1);
+ *   }, delay);
+ *
+ *   return (
+ *     <div>
+ *       <div>Count: {count}</div>
+ *       <button onClick={() => setDelay(500)}>Speed up</button>
+ *       <button onClick={() => setDelay(2000)}>Slow down</button>
+ *     </div>
+ *   );
+ * }
+ */
+export declare function useInterval(callback: () => void, delay: number): void;
+//# sourceMappingURL=useInterval.d.ts.map

package/dist/hooks/time/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../../src/hooks/time/useInterval.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CA0BrE"}

package/dist/hooks/time/useInterval.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react';
+/**
+ * 일정 시간 간격으로 콜백을 실행하는 hook
+ * interval을 자동으로 관리하고 컴포넌트 언마운트 시 정리합니다.
+ *
+ * @param callback - 일정 간격으로 실행할 함수
+ * @param delay - 실행 간격 (밀리초)
+ *
+ * @example
+ * // 1초마다 카운터 증가
+ * function TimerComponent() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   useInterval(() => {
+ *     setCount(c => c + 1);
+ *   }, 1000);
+ *
+ *   return <div>Count: {count}</div>;
+ * }
+ *
+ * @example
+ * // delay 변경으로 interval 속도 조절
+ * function AdjustableTimer() {
+ *   const [count, setCount] = useState(0);
+ *   const [delay, setDelay] = useState(1000);
+ *
+ *   useInterval(() => {
+ *     setCount(c => c + 1);
+ *   }, delay);
+ *
+ *   return (
+ *     <div>
+ *       <div>Count: {count}</div>
+ *       <button onClick={() => setDelay(500)}>Speed up</button>
+ *       <button onClick={() => setDelay(2000)}>Slow down</button>
+ *     </div>
+ *   );
+ * }
+ */
+export function useInterval(callback, delay) {
+    const intervalRef = useRef(null);
+    const stopInterval = () => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+    };
+    const startInterval = (nextDelay) => {
+        stopInterval();
+        intervalRef.current = setInterval(() => {
+            callback();
+        }, nextDelay);
+    };
+    useEffect(() => {
+        startInterval(delay);
+    }, [delay]);
+    useEffect(() => {
+        return () => {
+            stopInterval();
+        };
+    }, []);
+}

package/dist/hooks/time/useStopwatch.d.ts

@@ -0,0 +1,142 @@
+export interface UseStopwatchOptions {
+    /** 업데이트 간격 (밀리초, 기본값: 10ms) */
+    interval?: number;
+    /** 자동 시작 여부 (기본값: false) */
+    autoStart?: boolean;
+}
+export interface UseStopwatchReturn {
+    /** 경과 시간 (밀리초) */
+    elapsed: number;
+    /** 경과 시간 (초) */
+    elapsedSeconds: number;
+    /** 스톱워치 시작 */
+    start: () => void;
+    /** 스톱워치 일시정지 */
+    pause: () => void;
+    /** 스톱워치 재개 */
+    resume: () => void;
+    /** 스톱워치 리셋 */
+    reset: () => void;
+    /** 스톱워치 실행 중 여부 */
+    isRunning: boolean;
+}
+/**
+ * 스톱워치 hook
+ *
+ * 경과 시간을 측정하는 스톱워치를 제공합니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * function Stopwatch() {
+ *   const { elapsed, elapsedSeconds, start, pause, reset, isRunning } = useStopwatch();
+ *
+ *   return (
+ *     <div>
+ *       <div>경과 시간: {elapsedSeconds.toFixed(2)}초</div>
+ *       <div>밀리초: {elapsed}ms</div>
+ *       <button onClick={start} disabled={isRunning}>시작</button>
+ *       <button onClick={pause} disabled={!isRunning}>일시정지</button>
+ *       <button onClick={reset}>리셋</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 포맷팅된 시간 표시
+ * function FormattedStopwatch() {
+ *   const { elapsed } = useStopwatch({ autoStart: true });
+ *
+ *   const formatTime = (ms: number) => {
+ *     const seconds = Math.floor(ms / 1000);
+ *     const minutes = Math.floor(seconds / 60);
+ *     const hours = Math.floor(minutes / 60);
+ *
+ *     const displaySeconds = seconds % 60;
+ *     const displayMinutes = minutes % 60;
+ *     const displayMs = ms % 1000;
+ *
+ *     return `${hours.toString().padStart(2, '0')}:${displayMinutes
+ *       .toString()
+ *       .padStart(2, '0')}:${displaySeconds.toString().padStart(2, '0')}.${Math.floor(
+ *       displayMs / 10
+ *     )
+ *       .toString()
+ *       .padStart(2, '0')}`;
+ *   };
+ *
+ *   return <div>{formatTime(elapsed)}</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 랩 타임 기록
+ * function LapTimer() {
+ *   const { elapsed, start, pause, reset, isRunning } = useStopwatch();
+ *   const [laps, setLaps] = useState<number[]>([]);
+ *
+ *   const handleLap = () => {
+ *     setLaps((prev) => [...prev, elapsed]);
+ *   };
+ *
+ *   const handleReset = () => {
+ *     reset();
+ *     setLaps([]);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <div>경과 시간: {(elapsed / 1000).toFixed(2)}초</div>
+ *       <button onClick={isRunning ? pause : start}>
+ *         {isRunning ? '일시정지' : '시작'}
+ *       </button>
+ *       <button onClick={handleLap} disabled={!isRunning}>
+ *         랩
+ *       </button>
+ *       <button onClick={handleReset}>리셋</button>
+ *
+ *       <div>
+ *         <h3>랩 타임</h3>
+ *         {laps.map((lap, index) => (
+ *           <div key={index}>
+ *             Lap {index + 1}: {(lap / 1000).toFixed(2)}초
+ *           </div>
+ *         ))}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 성능 측정
+ * function PerformanceTracker() {
+ *   const { elapsed, start, pause, reset } = useStopwatch();
+ *
+ *   const handleTaskStart = () => {
+ *     reset(); // 이전 측정 리셋
+ *     start(); // 새 측정 시작
+ *     // 작업 수행...
+ *   };
+ *
+ *   const handleTaskEnd = () => {
+ *     pause();
+ *     console.log(`작업 완료 시간: ${elapsed}ms`);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleTaskStart}>작업 시작</button>
+ *       <button onClick={handleTaskEnd}>작업 완료</button>
+ *       <div>측정 시간: {elapsed}ms</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useStopwatch(options?: UseStopwatchOptions): UseStopwatchReturn;
+//# sourceMappingURL=useStopwatch.d.ts.map

package/dist/hooks/time/useStopwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStopwatch.d.ts","sourceRoot":"","sources":["../../../src/hooks/time/useStopwatch.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,kBAAkB;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,gBAAgB;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc;IACd,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mBAAmB;IACnB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqHG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CAqElF"}

package/dist/hooks/time/useStopwatch.js

@@ -0,0 +1,179 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+/**
+ * 스톱워치 hook
+ *
+ * 경과 시간을 측정하는 스톱워치를 제공합니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * function Stopwatch() {
+ *   const { elapsed, elapsedSeconds, start, pause, reset, isRunning } = useStopwatch();
+ *
+ *   return (
+ *     <div>
+ *       <div>경과 시간: {elapsedSeconds.toFixed(2)}초</div>
+ *       <div>밀리초: {elapsed}ms</div>
+ *       <button onClick={start} disabled={isRunning}>시작</button>
+ *       <button onClick={pause} disabled={!isRunning}>일시정지</button>
+ *       <button onClick={reset}>리셋</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 포맷팅된 시간 표시
+ * function FormattedStopwatch() {
+ *   const { elapsed } = useStopwatch({ autoStart: true });
+ *
+ *   const formatTime = (ms: number) => {
+ *     const seconds = Math.floor(ms / 1000);
+ *     const minutes = Math.floor(seconds / 60);
+ *     const hours = Math.floor(minutes / 60);
+ *
+ *     const displaySeconds = seconds % 60;
+ *     const displayMinutes = minutes % 60;
+ *     const displayMs = ms % 1000;
+ *
+ *     return `${hours.toString().padStart(2, '0')}:${displayMinutes
+ *       .toString()
+ *       .padStart(2, '0')}:${displaySeconds.toString().padStart(2, '0')}.${Math.floor(
+ *       displayMs / 10
+ *     )
+ *       .toString()
+ *       .padStart(2, '0')}`;
+ *   };
+ *
+ *   return <div>{formatTime(elapsed)}</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 랩 타임 기록
+ * function LapTimer() {
+ *   const { elapsed, start, pause, reset, isRunning } = useStopwatch();
+ *   const [laps, setLaps] = useState<number[]>([]);
+ *
+ *   const handleLap = () => {
+ *     setLaps((prev) => [...prev, elapsed]);
+ *   };
+ *
+ *   const handleReset = () => {
+ *     reset();
+ *     setLaps([]);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <div>경과 시간: {(elapsed / 1000).toFixed(2)}초</div>
+ *       <button onClick={isRunning ? pause : start}>
+ *         {isRunning ? '일시정지' : '시작'}
+ *       </button>
+ *       <button onClick={handleLap} disabled={!isRunning}>
+ *         랩
+ *       </button>
+ *       <button onClick={handleReset}>리셋</button>
+ *
+ *       <div>
+ *         <h3>랩 타임</h3>
+ *         {laps.map((lap, index) => (
+ *           <div key={index}>
+ *             Lap {index + 1}: {(lap / 1000).toFixed(2)}초
+ *           </div>
+ *         ))}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 성능 측정
+ * function PerformanceTracker() {
+ *   const { elapsed, start, pause, reset } = useStopwatch();
+ *
+ *   const handleTaskStart = () => {
+ *     reset(); // 이전 측정 리셋
+ *     start(); // 새 측정 시작
+ *     // 작업 수행...
+ *   };
+ *
+ *   const handleTaskEnd = () => {
+ *     pause();
+ *     console.log(`작업 완료 시간: ${elapsed}ms`);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleTaskStart}>작업 시작</button>
+ *       <button onClick={handleTaskEnd}>작업 완료</button>
+ *       <div>측정 시간: {elapsed}ms</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useStopwatch(options = {}) {
+    const { interval = 10, autoStart = false } = options;
+    const [elapsed, setElapsed] = useState(0);
+    const [isRunning, setIsRunning] = useState(autoStart);
+    const intervalRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const previousElapsedRef = useRef(0);
+    const clear = useCallback(() => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    const start = useCallback(() => {
+        if (!isRunning) {
+            startTimeRef.current = Date.now() - previousElapsedRef.current;
+            setIsRunning(true);
+        }
+    }, [isRunning]);
+    const pause = useCallback(() => {
+        clear();
+        setIsRunning(false);
+        previousElapsedRef.current = elapsed;
+    }, [clear, elapsed]);
+    const resume = useCallback(() => {
+        if (!isRunning) {
+            startTimeRef.current = Date.now() - previousElapsedRef.current;
+            setIsRunning(true);
+        }
+    }, [isRunning]);
+    const reset = useCallback(() => {
+        clear();
+        setElapsed(0);
+        setIsRunning(false);
+        startTimeRef.current = null;
+        previousElapsedRef.current = 0;
+    }, [clear]);
+    useEffect(() => {
+        if (isRunning) {
+            if (startTimeRef.current === null) {
+                startTimeRef.current = Date.now() - previousElapsedRef.current;
+            }
+            intervalRef.current = setInterval(() => {
+                if (startTimeRef.current !== null) {
+                    setElapsed(Date.now() - startTimeRef.current);
+                }
+            }, interval);
+            return () => clear();
+        }
+    }, [isRunning, interval, clear]);
+    return {
+        elapsed,
+        elapsedSeconds: elapsed / 1000,
+        start,
+        pause,
+        resume,
+        reset,
+        isRunning,
+    };
+}

package/dist/hooks/ui/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * UI/UX Hooks
+ */
+export * from './useMediaQuery';
+export * from './useWindowSize';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/hooks/ui/index.js

@@ -0,0 +1,5 @@
+/**
+ * UI/UX Hooks
+ */
+export * from './useMediaQuery';
+export * from './useWindowSize';

package/dist/hooks/ui/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../src/hooks/ui/useMediaQuery.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CA8CpD;AAED;;GAEG;AAEH;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAEtC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,OAAO,CAEvC"}

package/dist/hooks/ui/useWindowSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../src/hooks/ui/useWindowSize.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAoC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blastlabs/utils",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   "scripts": {
     "prepare": "npm run build:tsc",
     "prepublishOnly": "npm run test:run && npm run clean && npm run build:tsc",
-    "build": "npm run build",
+    "build": "npm run clean && npm run build:tsc",
     "build:tsc": "tsc",
     "clean": "rm -rf dist",
     "dev": "tsc --watch",
@@ -62,15 +62,22 @@
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^25.0.6",
-    "typescript": "^5.9.3",
     "@types/react": "^19.2.8",
     "@vitest/ui": "^4.0.16",
+    "happy-dom": "^20.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-hook-form": "^7.71.1",
+    "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "react-hook-form": ">=7.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -78,6 +85,9 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
     }
   },
   "publishConfig": {

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

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

@@ -1,129 +0,0 @@
-import React, { useState } from 'react';
-/**
- * 개발용 로그인 shortcut 컴포넌트
- *
- * @example
- * ```tsx
- * // Vite 프로젝트
- * import { IdSelector } from 'goodchuck-utils/components/dev';
- *
- * function LoginPage() {
- *   const handleLogin = async (email: string, password: string) => {
- *     await loginAPI(email, password);
- *   };
- *
- *   const devAccounts = [
- *     { id: 'admin@test.com', pw: 'admin123', memo: '관리자' },
- *     { id: 'user@test.com', pw: 'user123', memo: '일반 사용자' },
- *   ];
- *
- *   return (
- *     <div>
- *       <LoginForm />
- *       {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 {
-            await onLogin(info.id, info.pw);
-        }
-        finally {
-            setLoading(null);
-        }
-    };
-    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/hooks/useClickOutside.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACjE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,EACjD,OAAO,GAAE,OAAc,GACtB,IAAI,CA2BN;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACzE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,EACpB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,EACjD,OAAO,GAAE,OAAc,GACtB,IAAI,CA6BN"}

package/dist/hooks/useCopyToClipboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopyToClipboard.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,8BAA8B;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,wBAAgB,kBAAkB,IAAI,qBAAqB,CA0B1D"}

package/dist/hooks/useDebounce.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDebounce.d.ts","sourceRoot":"","sources":["../../src/hooks/useDebounce.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,GAAE,MAAY,GAAG,CAAC,CAgB/D"}

package/dist/hooks/useEventListener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EAC7D,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3C,OAAO,CAAC,EAAE,SAAS,EACnB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,mBAAmB,EAAE,CAAC,SAAS,WAAW,GAAG,cAAc,EAC1G,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EAChD,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EACrB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/D,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7C,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC"}

package/dist/hooks/useIntersectionObserver.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EACvB,OAAO,GAAE,8BAAmC,GAC3C,yBAAyB,GAAG,SAAS,CAoCvC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EACvB,OAAO,CAAC,EAAE,8BAA8B,GACvC,OAAO,CAGT"}

package/dist/hooks/useLocalStorage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../src/hooks/useLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CA0F9C"}

package/dist/hooks/useMediaQuery.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CA8CpD;AAED;;GAEG;AAEH;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAEtC;AAED;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,OAAO,CAEvC"}

package/dist/hooks/usePrevious.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrevious.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAWtD"}

package/dist/hooks/useSessionStorage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSessionStorage.d.ts","sourceRoot":"","sources":["../../src/hooks/useSessionStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAoF9C"}