goodchuck-utils 1.4.1 → 1.5.0

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

@@ -0,0 +1,41 @@
+import React from 'react';
+type LoginInfo = {
+    id: string;
+    pw: string;
+    memo: string;
+};
+type Props = {
+    onLogin: (email: string, password: string) => Promise<void>;
+    infos: LoginInfo[];
+};
+/**
+ * 개발용 로그인 shortcut 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * 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 />
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export default function IdSelector({ onLogin, infos }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=IdSelector.d.ts.map

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

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

package/dist/components/dev/IdSelector.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+/**
+ * 개발용 로그인 shortcut 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * 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 />
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export default function IdSelector({ onLogin, infos }) {
+    const [loading, setLoading] = useState(null);
+    const handleQuickLogin = async (info, index) => {
+        setLoading(index);
+        try {
+            await onLogin(info.id, info.pw);
+        }
+        finally {
+            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))))))));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Development Components
+ *
+ * 개발 환경에서 사용하는 유틸리티 컴포넌트들입니다.
+ * production 환경에서는 제외하는 것을 권장합니다.
+ */
+export { default as IdSelector } from './IdSelector';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dev/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/dev/index.js

@@ -0,0 +1,7 @@
+/**
+ * Development Components
+ *
+ * 개발 환경에서 사용하는 유틸리티 컴포넌트들입니다.
+ * production 환경에서는 제외하는 것을 권장합니다.
+ */
+export { default as IdSelector } from './IdSelector';

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React Components
+ *
+ * Note: Requires React and React DOM as peer dependencies.
+ * Note: Uses Tailwind CSS classes - ensure Tailwind is configured in your project.
+ */
+export * from './dev';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,OAAO,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,7 @@
+/**
+ * React Components
+ *
+ * Note: Requires React and React DOM as peer dependencies.
+ * Note: Uses Tailwind CSS classes - ensure Tailwind is configured in your project.
+ */
+export * from './dev';

package/dist/hooks/index.d.ts

@@ -8,4 +8,12 @@ export * from './useLocalStorage';
 export * from './useSessionStorage';
 export * from './useMediaQuery';
 export * from './useClickOutside';
+export * from './useDebounce';
+export * from './useToggle';
+export * from './useCopyToClipboard';
+export * from './useWindowSize';
+export * from './usePrevious';
+export * from './useThrottle';
+export * from './useIntersectionObserver';
+export * from './useEventListener';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAG9B,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,oBAAoB,CAAC"}

package/dist/hooks/index.js

@@ -10,3 +10,14 @@ export * from './useSessionStorage';
 // UI/UX hooks
 export * from './useMediaQuery';
 export * from './useClickOutside';
+// Utility hooks
+export * from './useDebounce';
+export * from './useToggle';
+export * from './useCopyToClipboard';
+export * from './useWindowSize';
+export * from './usePrevious';
+// Performance hooks
+export * from './useThrottle';
+export * from './useIntersectionObserver';
+// Event hooks
+export * from './useEventListener';

package/dist/hooks/useCopyToClipboard.d.ts

@@ -0,0 +1,67 @@
+/**
+ * useCopyToClipboard의 반환 타입
+ */
+export interface CopyToClipboardResult {
+    /** 복사된 값 (null이면 아직 복사 안됨) */
+    copiedText: string | null;
+    /** 클립보드에 복사하는 함수 */
+    copy: (text: string) => Promise<boolean>;
+    /** 복사 상태를 초기화하는 함수 */
+    reset: () => void;
+}
+/**
+ * 클립보드에 텍스트를 복사하는 hook
+ *
+ * @returns {CopyToClipboardResult} 복사된 텍스트, 복사 함수, 리셋 함수
+ *
+ * @example
+ * // 기본 사용
+ * function CopyButton() {
+ *   const { copiedText, copy } = useCopyToClipboard();
+ *
+ *   const handleCopy = () => {
+ *     copy('Hello, World!');
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleCopy}>
+ *       {copiedText ? 'Copied!' : 'Copy'}
+ *     </button>
+ *   );
+ * }
+ *
+ * @example
+ * // 코드 블록 복사
+ * function CodeBlock({ code }: { code: string }) {
+ *   const { copiedText, copy } = useCopyToClipboard();
+ *   const isCopied = copiedText === code;
+ *
+ *   return (
+ *     <div>
+ *       <pre>{code}</pre>
+ *       <button onClick={() => copy(code)}>
+ *         {isCopied ? '✓ Copied' : 'Copy Code'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 에러 처리
+ * function ShareLink({ url }: { url: string }) {
+ *   const { copy } = useCopyToClipboard();
+ *
+ *   const handleShare = async () => {
+ *     const success = await copy(url);
+ *     if (success) {
+ *       alert('Link copied!');
+ *     } else {
+ *       alert('Failed to copy');
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleShare}>Share</button>;
+ * }
+ */
+export declare function useCopyToClipboard(): CopyToClipboardResult;
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"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/useCopyToClipboard.js

@@ -0,0 +1,79 @@
+import { useState, useCallback } from 'react';
+/**
+ * 클립보드에 텍스트를 복사하는 hook
+ *
+ * @returns {CopyToClipboardResult} 복사된 텍스트, 복사 함수, 리셋 함수
+ *
+ * @example
+ * // 기본 사용
+ * function CopyButton() {
+ *   const { copiedText, copy } = useCopyToClipboard();
+ *
+ *   const handleCopy = () => {
+ *     copy('Hello, World!');
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleCopy}>
+ *       {copiedText ? 'Copied!' : 'Copy'}
+ *     </button>
+ *   );
+ * }
+ *
+ * @example
+ * // 코드 블록 복사
+ * function CodeBlock({ code }: { code: string }) {
+ *   const { copiedText, copy } = useCopyToClipboard();
+ *   const isCopied = copiedText === code;
+ *
+ *   return (
+ *     <div>
+ *       <pre>{code}</pre>
+ *       <button onClick={() => copy(code)}>
+ *         {isCopied ? '✓ Copied' : 'Copy Code'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 에러 처리
+ * function ShareLink({ url }: { url: string }) {
+ *   const { copy } = useCopyToClipboard();
+ *
+ *   const handleShare = async () => {
+ *     const success = await copy(url);
+ *     if (success) {
+ *       alert('Link copied!');
+ *     } else {
+ *       alert('Failed to copy');
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleShare}>Share</button>;
+ * }
+ */
+export function useCopyToClipboard() {
+    const [copiedText, setCopiedText] = useState(null);
+    const copy = useCallback(async (text) => {
+        // Clipboard API 지원 확인
+        if (!navigator?.clipboard) {
+            console.warn('Clipboard API not supported');
+            return false;
+        }
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopiedText(text);
+            return true;
+        }
+        catch (error) {
+            console.warn('Copy failed', error);
+            setCopiedText(null);
+            return false;
+        }
+    }, []);
+    const reset = useCallback(() => {
+        setCopiedText(null);
+    }, []);
+    return { copiedText, copy, reset };
+}

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 값의 업데이트를 지연시키는 hook
+ * 사용자 입력이 멈춘 후 일정 시간이 지나면 값을 업데이트합니다.
+ *
+ * @param value - debounce할 값
+ * @param delay - 지연 시간 (밀리초, 기본값: 500ms)
+ * @returns debounce된 값
+ *
+ * @example
+ * // 검색 입력 최적화
+ * function SearchComponent() {
+ *   const [searchTerm, setSearchTerm] = useState('');
+ *   const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ *
+ *   useEffect(() => {
+ *     if (debouncedSearchTerm) {
+ *       // API 호출은 사용자가 타이핑을 멈춘 후 500ms 뒤에 실행
+ *       searchAPI(debouncedSearchTerm);
+ *     }
+ *   }, [debouncedSearchTerm]);
+ *
+ *   return (
+ *     <input
+ *       value={searchTerm}
+ *       onChange={(e) => setSearchTerm(e.target.value)}
+ *       placeholder="Search..."
+ *     />
+ *   );
+ * }
+ *
+ * @example
+ * // 윈도우 리사이즈 최적화
+ * function ResponsiveComponent() {
+ *   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+ *   const debouncedWidth = useDebounce(windowWidth, 200);
+ *
+ *   useEffect(() => {
+ *     const handleResize = () => setWindowWidth(window.innerWidth);
+ *     window.addEventListener('resize', handleResize);
+ *     return () => window.removeEventListener('resize', handleResize);
+ *   }, []);
+ *
+ *   return <div>Debounced width: {debouncedWidth}px</div>;
+ * }
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;
+//# sourceMappingURL=useDebounce.d.ts.map

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

@@ -0,0 +1 @@
+{"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/useDebounce.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+/**
+ * 값의 업데이트를 지연시키는 hook
+ * 사용자 입력이 멈춘 후 일정 시간이 지나면 값을 업데이트합니다.
+ *
+ * @param value - debounce할 값
+ * @param delay - 지연 시간 (밀리초, 기본값: 500ms)
+ * @returns debounce된 값
+ *
+ * @example
+ * // 검색 입력 최적화
+ * function SearchComponent() {
+ *   const [searchTerm, setSearchTerm] = useState('');
+ *   const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ *
+ *   useEffect(() => {
+ *     if (debouncedSearchTerm) {
+ *       // API 호출은 사용자가 타이핑을 멈춘 후 500ms 뒤에 실행
+ *       searchAPI(debouncedSearchTerm);
+ *     }
+ *   }, [debouncedSearchTerm]);
+ *
+ *   return (
+ *     <input
+ *       value={searchTerm}
+ *       onChange={(e) => setSearchTerm(e.target.value)}
+ *       placeholder="Search..."
+ *     />
+ *   );
+ * }
+ *
+ * @example
+ * // 윈도우 리사이즈 최적화
+ * function ResponsiveComponent() {
+ *   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+ *   const debouncedWidth = useDebounce(windowWidth, 200);
+ *
+ *   useEffect(() => {
+ *     const handleResize = () => setWindowWidth(window.innerWidth);
+ *     window.addEventListener('resize', handleResize);
+ *     return () => window.removeEventListener('resize', handleResize);
+ *   }, []);
+ *
+ *   return <div>Debounced width: {debouncedWidth}px</div>;
+ * }
+ */
+export function useDebounce(value, delay = 500) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        // delay 후에 값을 업데이트하는 타이머 설정
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        // value나 delay가 변경되면 이전 타이머를 클리어
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/dist/hooks/useEventListener.d.ts

@@ -0,0 +1,79 @@
+import { RefObject } from 'react';
+/**
+ * DOM 이벤트 리스너를 안전하게 추가/제거하는 hook
+ * 클린업이 자동으로 처리되며, SSR 환경에서도 안전합니다.
+ *
+ * @param eventName - 이벤트 이름 (예: 'click', 'scroll', 'keydown')
+ * @param handler - 이벤트 핸들러 함수
+ * @param element - 이벤트를 등록할 요소 (기본값: window)
+ * @param options - addEventListener 옵션
+ *
+ * @example
+ * // Window 이벤트 리스너
+ * function ScrollIndicator() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *
+ *   useEventListener('scroll', () => {
+ *     setScrollY(window.scrollY);
+ *   });
+ *
+ *   return <div>Scroll position: {scrollY}px</div>;
+ * }
+ *
+ * @example
+ * // 특정 요소에 이벤트 리스너
+ * function CustomButton() {
+ *   const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ *   useEventListener('click', () => {
+ *     console.log('Button clicked!');
+ *   }, buttonRef);
+ *
+ *   return <button ref={buttonRef}>Click me</button>;
+ * }
+ *
+ * @example
+ * // Document 이벤트 리스너
+ * function KeyboardShortcuts() {
+ *   useEventListener('keydown', (e) => {
+ *     if (e.key === 'Escape') {
+ *       console.log('ESC pressed');
+ *     }
+ *   }, document);
+ *
+ *   return <div>Press ESC</div>;
+ * }
+ *
+ * @example
+ * // 이벤트 옵션 사용
+ * function PassiveScrollListener() {
+ *   useEventListener(
+ *     'scroll',
+ *     () => console.log('Scrolling...'),
+ *     window,
+ *     { passive: true } // 성능 최적화
+ *   );
+ *
+ *   return <div>Scroll me</div>;
+ * }
+ *
+ * @example
+ * // 여러 이벤트 처리
+ * function MultiEventHandler() {
+ *   const handleInput = (e: Event) => {
+ *     console.log('Input changed:', (e.target as HTMLInputElement).value);
+ *   };
+ *
+ *   const inputRef = useRef<HTMLInputElement>(null);
+ *
+ *   useEventListener('input', handleInput, inputRef);
+ *   useEventListener('focus', () => console.log('Focused'), inputRef);
+ *   useEventListener('blur', () => console.log('Blurred'), inputRef);
+ *
+ *   return <input ref={inputRef} />;
+ * }
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
+//# sourceMappingURL=useEventListener.d.ts.map

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

@@ -0,0 +1 @@
+{"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/useEventListener.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+export function useEventListener(eventName, handler, element, options) {
+    // handler를 ref에 저장하여 handler가 변경되어도 이벤트 리스너를 재등록하지 않도록 함
+    const savedHandler = useRef(handler);
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        // SSR 환경 체크
+        if (typeof window === 'undefined') {
+            return;
+        }
+        // 타겟 요소 결정
+        const targetElement = element instanceof Document
+            ? element
+            : (element && 'current' in element && element.current)
+                ? element.current
+                : window;
+        if (!targetElement?.addEventListener) {
+            return;
+        }
+        // 이벤트 핸들러 래퍼 (savedHandler.current를 호출)
+        const eventListener = (event) => {
+            savedHandler.current(event);
+        };
+        // 이벤트 리스너 등록
+        targetElement.addEventListener(eventName, eventListener, options);
+        // 클린업: 컴포넌트 언마운트 시 이벤트 리스너 제거
+        return () => {
+            targetElement.removeEventListener(eventName, eventListener, options);
+        };
+    }, [eventName, element, options]);
+}

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,109 @@
+import { RefObject } from 'react';
+/**
+ * Intersection Observer 옵션
+ */
+export interface UseIntersectionObserverOptions extends IntersectionObserverInit {
+    /** 한 번만 감지하고 observer를 해제할지 여부 (기본값: false) */
+    freezeOnceVisible?: boolean;
+}
+/**
+ * Intersection Observer를 사용하여 요소의 가시성을 감지하는 hook
+ *
+ * @param ref - 관찰할 요소의 ref
+ * @param options - Intersection Observer 옵션
+ * @returns IntersectionObserverEntry 또는 undefined
+ *
+ * @example
+ * // 기본 사용 - 요소가 화면에 보이는지 감지
+ * function LazyImage({ src }: { src: string }) {
+ *   const imageRef = useRef<HTMLImageElement>(null);
+ *   const entry = useIntersectionObserver(imageRef, {
+ *     threshold: 0.1,
+ *     freezeOnceVisible: true
+ *   });
+ *   const isVisible = entry?.isIntersecting;
+ *
+ *   return (
+ *     <img
+ *       ref={imageRef}
+ *       src={isVisible ? src : undefined}
+ *       alt="lazy loaded"
+ *     />
+ *   );
+ * }
+ *
+ * @example
+ * // 무한 스크롤
+ * function InfiniteScrollList() {
+ *   const loadMoreRef = useRef<HTMLDivElement>(null);
+ *   const entry = useIntersectionObserver(loadMoreRef, {
+ *     threshold: 1.0
+ *   });
+ *
+ *   useEffect(() => {
+ *     if (entry?.isIntersecting) {
+ *       loadMoreItems();
+ *     }
+ *   }, [entry?.isIntersecting]);
+ *
+ *   return (
+ *     <div>
+ *       {items.map(item => <Item key={item.id} {...item} />)}
+ *       <div ref={loadMoreRef}>Loading...</div>
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 애니메이션 트리거
+ * function AnimatedSection() {
+ *   const sectionRef = useRef<HTMLElement>(null);
+ *   const entry = useIntersectionObserver(sectionRef, {
+ *     threshold: 0.5,
+ *     freezeOnceVisible: true
+ *   });
+ *
+ *   return (
+ *     <section
+ *       ref={sectionRef}
+ *       className={entry?.isIntersecting ? 'fade-in' : 'fade-out'}
+ *     >
+ *       Content
+ *     </section>
+ *   );
+ * }
+ *
+ * @example
+ * // rootMargin 사용 (요소가 화면에 들어오기 전에 미리 감지)
+ * function PreloadImage({ src }: { src: string }) {
+ *   const imageRef = useRef<HTMLImageElement>(null);
+ *   const entry = useIntersectionObserver(imageRef, {
+ *     rootMargin: '200px', // 화면 기준 200px 전에 감지
+ *     freezeOnceVisible: true
+ *   });
+ *
+ *   return <img ref={imageRef} src={entry?.isIntersecting ? src : undefined} />;
+ * }
+ */
+export declare function useIntersectionObserver(ref: RefObject<Element>, options?: UseIntersectionObserverOptions): IntersectionObserverEntry | undefined;
+/**
+ * 요소가 화면에 보이는지 여부만 반환하는 간단한 버전
+ *
+ * @param ref - 관찰할 요소의 ref
+ * @param options - Intersection Observer 옵션
+ * @returns 요소가 화면에 보이는지 여부
+ *
+ * @example
+ * function Section() {
+ *   const ref = useRef<HTMLDivElement>(null);
+ *   const isVisible = useIsVisible(ref);
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       {isVisible ? 'I am visible!' : 'I am hidden'}
+ *     </div>
+ *   );
+ * }
+ */
+export declare function useIsVisible(ref: RefObject<Element>, options?: UseIntersectionObserverOptions): boolean;
+//# sourceMappingURL=useIntersectionObserver.d.ts.map

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

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