goodchuck-utils 1.4.2 → 1.6.0

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"}

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+/**
+ * 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 function useIntersectionObserver(ref, options = {}) {
+    const { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false } = options;
+    const [entry, setEntry] = useState();
+    const frozen = entry?.isIntersecting && freezeOnceVisible;
+    useEffect(() => {
+        const element = ref.current;
+        // 요소가 없거나, 이미 frozen 상태면 observer 생성하지 않음
+        if (!element || frozen) {
+            return;
+        }
+        // Intersection Observer가 지원되지 않는 환경 체크
+        if (!window.IntersectionObserver) {
+            console.warn('IntersectionObserver is not supported in this browser');
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            setEntry(entry);
+        }, { threshold, root, rootMargin });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, threshold, root, rootMargin, frozen]);
+    return entry;
+}
+/**
+ * 요소가 화면에 보이는지 여부만 반환하는 간단한 버전
+ *
+ * @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 function useIsVisible(ref, options) {
+    const entry = useIntersectionObserver(ref, options);
+    return entry?.isIntersecting ?? false;
+}

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 이전 렌더링의 값을 저장하는 hook
+ *
+ * @param value - 추적할 값
+ * @returns 이전 렌더링의 값 (첫 렌더링에서는 undefined)
+ *
+ * @example
+ * // 값 변경 감지
+ * function Counter() {
+ *   const [count, setCount] = useState(0);
+ *   const prevCount = usePrevious(count);
+ *
+ *   return (
+ *     <div>
+ *       <p>Current: {count}</p>
+ *       <p>Previous: {prevCount}</p>
+ *       <p>Changed: {count !== prevCount ? 'Yes' : 'No'}</p>
+ *       <button onClick={() => setCount(count + 1)}>Increment</button>
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 증가/감소 방향 표시
+ * function PriceDisplay({ price }: { price: number }) {
+ *   const prevPrice = usePrevious(price);
+ *
+ *   const trend = prevPrice === undefined
+ *     ? null
+ *     : price > prevPrice
+ *     ? '📈 Up'
+ *     : price < prevPrice
+ *     ? '📉 Down'
+ *     : '➡️ Same';
+ *
+ *   return (
+ *     <div>
+ *       <span>${price}</span>
+ *       {trend && <span>{trend}</span>}
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 애니메이션 방향 결정
+ * function AnimatedList({ items }: { items: string[] }) {
+ *   const prevItems = usePrevious(items);
+ *   const isAdding = prevItems && items.length > prevItems.length;
+ *
+ *   return (
+ *     <ul className={isAdding ? 'slide-in' : 'slide-out'}>
+ *       {items.map(item => <li key={item}>{item}</li>)}
+ *     </ul>
+ *   );
+ * }
+ */
+export declare function usePrevious<T>(value: T): T | undefined;
+//# sourceMappingURL=usePrevious.d.ts.map

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

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