@blastlabs/utils 1.11.0

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 미디어 쿼리 매칭 여부를 반환하는 hook
+ *
+ * @param query - CSS 미디어 쿼리 문자열
+ * @returns 미디어 쿼리 매칭 여부
+ *
+ * @example
+ * // 모바일 체크
+ * const isMobile = useMediaQuery('(max-width: 768px)');
+ *
+ * @example
+ * // 태블릿 체크
+ * const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
+ *
+ * @example
+ * // 데스크톱 체크
+ * const isDesktop = useMediaQuery('(min-width: 1025px)');
+ *
+ * @example
+ * // 다크모드 체크
+ * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+ *
+ * @example
+ * // 가로 모드 체크
+ * const isLandscape = useMediaQuery('(orientation: landscape)');
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * 일반적인 브레이크포인트를 위한 헬퍼 hook들
+ */
+/**
+ * 모바일 디바이스 체크 (768px 이하)
+ * @example
+ * const isMobile = useIsMobile();
+ * if (isMobile) return <MobileView />;
+ */
+export declare function useIsMobile(): boolean;
+/**
+ * 태블릿 디바이스 체크 (769px ~ 1024px)
+ * @example
+ * const isTablet = useIsTablet();
+ */
+export declare function useIsTablet(): boolean;
+/**
+ * 데스크톱 디바이스 체크 (1025px 이상)
+ * @example
+ * const isDesktop = useIsDesktop();
+ */
+export declare function useIsDesktop(): boolean;
+/**
+ * 다크모드 체크
+ * @example
+ * const isDarkMode = useIsDarkMode();
+ */
+export declare function useIsDarkMode(): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

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

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

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react';
+/**
+ * 미디어 쿼리 매칭 여부를 반환하는 hook
+ *
+ * @param query - CSS 미디어 쿼리 문자열
+ * @returns 미디어 쿼리 매칭 여부
+ *
+ * @example
+ * // 모바일 체크
+ * const isMobile = useMediaQuery('(max-width: 768px)');
+ *
+ * @example
+ * // 태블릿 체크
+ * const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
+ *
+ * @example
+ * // 데스크톱 체크
+ * const isDesktop = useMediaQuery('(min-width: 1025px)');
+ *
+ * @example
+ * // 다크모드 체크
+ * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+ *
+ * @example
+ * // 가로 모드 체크
+ * const isLandscape = useMediaQuery('(orientation: landscape)');
+ */
+export function useMediaQuery(query) {
+    // SSR 안전성을 위한 초기값 설정
+    const getMatches = (query) => {
+        if (typeof window !== 'undefined') {
+            return window.matchMedia(query).matches;
+        }
+        return false;
+    };
+    const [matches, setMatches] = useState(getMatches(query));
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const mediaQuery = window.matchMedia(query);
+        // 초기 상태 설정
+        setMatches(mediaQuery.matches);
+        // 미디어 쿼리 변경 감지 (최신 API)
+        const handleChange = (event) => {
+            setMatches(event.matches);
+        };
+        // 이벤트 리스너 등록
+        // addEventListener를 지원하는 브라우저
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handleChange);
+        }
+        else {
+            // 구형 브라우저 지원 (deprecated)
+            mediaQuery.addListener(handleChange);
+        }
+        // 클린업
+        return () => {
+            if (mediaQuery.removeEventListener) {
+                mediaQuery.removeEventListener('change', handleChange);
+            }
+            else {
+                mediaQuery.removeListener(handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+/**
+ * 일반적인 브레이크포인트를 위한 헬퍼 hook들
+ */
+/**
+ * 모바일 디바이스 체크 (768px 이하)
+ * @example
+ * const isMobile = useIsMobile();
+ * if (isMobile) return <MobileView />;
+ */
+export function useIsMobile() {
+    return useMediaQuery('(max-width: 768px)');
+}
+/**
+ * 태블릿 디바이스 체크 (769px ~ 1024px)
+ * @example
+ * const isTablet = useIsTablet();
+ */
+export function useIsTablet() {
+    return useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
+}
+/**
+ * 데스크톱 디바이스 체크 (1025px 이상)
+ * @example
+ * const isDesktop = useIsDesktop();
+ */
+export function useIsDesktop() {
+    return useMediaQuery('(min-width: 1025px)');
+}
+/**
+ * 다크모드 체크
+ * @example
+ * const isDarkMode = useIsDarkMode();
+ */
+export function useIsDarkMode() {
+    return useMediaQuery('(prefers-color-scheme: dark)');
+}

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

package/dist/hooks/usePrevious.js

@@ -0,0 +1,67 @@
+import { useRef, useEffect } from 'react';
+/**
+ * 이전 렌더링의 값을 저장하는 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 function usePrevious(value) {
+    // ref는 리렌더링 간에 값을 유지
+    const ref = useRef(undefined);
+    // 렌더링 후에 현재 값을 ref에 저장
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    // 현재 렌더링에서는 이전 값을 반환
+    return ref.current;
+}

package/dist/hooks/useSessionStorage.d.ts

@@ -0,0 +1,19 @@
+import { Dispatch, SetStateAction } from 'react';
+/**
+ * sessionStorage와 동기화되는 state hook
+ *
+ * @param key - sessionStorage 키
+ * @param initialValue - 초기값
+ * @returns [storedValue, setValue, removeValue]
+ *
+ * @example
+ * const [token, setToken, removeToken] = useSessionStorage('auth-token', '');
+ *
+ * // 값 설정
+ * setToken('abc123');
+ *
+ * // 값 제거
+ * removeToken();
+ */
+export declare function useSessionStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>, () => void];
+//# sourceMappingURL=useSessionStorage.d.ts.map

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

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

package/dist/hooks/useSessionStorage.js

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from 'react';
+/**
+ * sessionStorage와 동기화되는 state hook
+ *
+ * @param key - sessionStorage 키
+ * @param initialValue - 초기값
+ * @returns [storedValue, setValue, removeValue]
+ *
+ * @example
+ * const [token, setToken, removeToken] = useSessionStorage('auth-token', '');
+ *
+ * // 값 설정
+ * setToken('abc123');
+ *
+ * // 값 제거
+ * removeToken();
+ */
+export function useSessionStorage(key, initialValue) {
+    // SSR 안전성 체크
+    const isBrowser = typeof window !== 'undefined';
+    // 초기값을 sessionStorage에서 가져오기
+    const readValue = useCallback(() => {
+        if (!isBrowser) {
+            return initialValue;
+        }
+        try {
+            const item = window.sessionStorage.getItem(key);
+            return item ? JSON.parse(item) : initialValue;
+        }
+        catch (error) {
+            console.warn(`Error reading sessionStorage key "${key}":`, error);
+            return initialValue;
+        }
+    }, [initialValue, key, isBrowser]);
+    const [storedValue, setStoredValue] = useState(readValue);
+    // 값 설정 함수
+    const setValue = useCallback((value) => {
+        if (!isBrowser) {
+            console.warn(`Tried setting sessionStorage key "${key}" even though environment is not a client`);
+            return;
+        }
+        try {
+            // useState와 동일하게 함수형 업데이트 지원
+            const newValue = value instanceof Function ? value(storedValue) : value;
+            // sessionStorage에 저장
+            window.sessionStorage.setItem(key, JSON.stringify(newValue));
+            // state 업데이트
+            setStoredValue(newValue);
+            // storage event 발생
+            window.dispatchEvent(new Event('session-storage'));
+        }
+        catch (error) {
+            console.warn(`Error setting sessionStorage key "${key}":`, error);
+        }
+    }, [key, storedValue, isBrowser]);
+    // 값 제거 함수
+    const removeValue = useCallback(() => {
+        if (!isBrowser) {
+            return;
+        }
+        try {
+            window.sessionStorage.removeItem(key);
+            setStoredValue(initialValue);
+            window.dispatchEvent(new Event('session-storage'));
+        }
+        catch (error) {
+            console.warn(`Error removing sessionStorage key "${key}":`, error);
+        }
+    }, [key, initialValue, isBrowser]);
+    // 같은 페이지 내의 변경사항 감지
+    useEffect(() => {
+        if (!isBrowser) {
+            return;
+        }
+        const handleStorageChange = () => {
+            setStoredValue(readValue());
+        };
+        // 같은 페이지 내의 변경사항
+        window.addEventListener('session-storage', handleStorageChange);
+        return () => {
+            window.removeEventListener('session-storage', handleStorageChange);
+        };
+    }, [key, readValue, isBrowser]);
+    return [storedValue, setValue, removeValue];
+}

package/dist/hooks/useThrottle.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 값의 업데이트를 일정 시간 간격으로 제한하는 hook
+ * debounce와 달리 일정 간격마다 최신 값을 업데이트합니다.
+ *
+ * @param value - throttle할 값
+ * @param interval - 업데이트 간격 (밀리초, 기본값: 500ms)
+ * @returns throttle된 값
+ *
+ * @example
+ * // 스크롤 위치 추적 최적화
+ * function ScrollTracker() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *   const throttledScrollY = useThrottle(scrollY, 200);
+ *
+ *   useEffect(() => {
+ *     const handleScroll = () => setScrollY(window.scrollY);
+ *     window.addEventListener('scroll', handleScroll);
+ *     return () => window.removeEventListener('scroll', handleScroll);
+ *   }, []);
+ *
+ *   return <div>Scroll position: {throttledScrollY}px</div>;
+ * }
+ *
+ * @example
+ * // 무한 스크롤
+ * function InfiniteScroll() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *   const throttledScrollY = useThrottle(scrollY, 300);
+ *
+ *   useEffect(() => {
+ *     const bottom = document.documentElement.scrollHeight - window.innerHeight;
+ *     if (throttledScrollY >= bottom - 100) {
+ *       loadMoreData();
+ *     }
+ *   }, [throttledScrollY]);
+ *
+ *   return <div>...</div>;
+ * }
+ *
+ * @example
+ * // 검색 입력 (실시간 검색에 적합)
+ * function LiveSearch() {
+ *   const [query, setQuery] = useState('');
+ *   const throttledQuery = useThrottle(query, 500);
+ *
+ *   useEffect(() => {
+ *     // 500ms마다 최대 한 번씩만 API 호출
+ *     if (throttledQuery) {
+ *       searchAPI(throttledQuery);
+ *     }
+ *   }, [throttledQuery]);
+ *
+ *   return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
+ * }
+ */
+export declare function useThrottle<T>(value: T, interval?: number): T;
+//# sourceMappingURL=useThrottle.d.ts.map

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

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

package/dist/hooks/useThrottle.js

@@ -0,0 +1,80 @@
+import { useState, useEffect, useRef } from 'react';
+/**
+ * 값의 업데이트를 일정 시간 간격으로 제한하는 hook
+ * debounce와 달리 일정 간격마다 최신 값을 업데이트합니다.
+ *
+ * @param value - throttle할 값
+ * @param interval - 업데이트 간격 (밀리초, 기본값: 500ms)
+ * @returns throttle된 값
+ *
+ * @example
+ * // 스크롤 위치 추적 최적화
+ * function ScrollTracker() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *   const throttledScrollY = useThrottle(scrollY, 200);
+ *
+ *   useEffect(() => {
+ *     const handleScroll = () => setScrollY(window.scrollY);
+ *     window.addEventListener('scroll', handleScroll);
+ *     return () => window.removeEventListener('scroll', handleScroll);
+ *   }, []);
+ *
+ *   return <div>Scroll position: {throttledScrollY}px</div>;
+ * }
+ *
+ * @example
+ * // 무한 스크롤
+ * function InfiniteScroll() {
+ *   const [scrollY, setScrollY] = useState(0);
+ *   const throttledScrollY = useThrottle(scrollY, 300);
+ *
+ *   useEffect(() => {
+ *     const bottom = document.documentElement.scrollHeight - window.innerHeight;
+ *     if (throttledScrollY >= bottom - 100) {
+ *       loadMoreData();
+ *     }
+ *   }, [throttledScrollY]);
+ *
+ *   return <div>...</div>;
+ * }
+ *
+ * @example
+ * // 검색 입력 (실시간 검색에 적합)
+ * function LiveSearch() {
+ *   const [query, setQuery] = useState('');
+ *   const throttledQuery = useThrottle(query, 500);
+ *
+ *   useEffect(() => {
+ *     // 500ms마다 최대 한 번씩만 API 호출
+ *     if (throttledQuery) {
+ *       searchAPI(throttledQuery);
+ *     }
+ *   }, [throttledQuery]);
+ *
+ *   return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
+ * }
+ */
+export function useThrottle(value, interval = 500) {
+    const [throttledValue, setThrottledValue] = useState(value);
+    const lastExecuted = useRef(Date.now());
+    useEffect(() => {
+        // 마지막 실행으로부터 경과된 시간
+        const timeSinceLastExecution = Date.now() - lastExecuted.current;
+        if (timeSinceLastExecution >= interval) {
+            // 간격이 지났으면 즉시 업데이트
+            setThrottledValue(value);
+            lastExecuted.current = Date.now();
+        }
+        else {
+            // 아직 간격이 안 지났으면 남은 시간 후에 업데이트
+            const timer = setTimeout(() => {
+                setThrottledValue(value);
+                lastExecuted.current = Date.now();
+            }, interval - timeSinceLastExecution);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    }, [value, interval]);
+    return throttledValue;
+}

package/dist/hooks/useToggle.d.ts

@@ -0,0 +1,49 @@
+/**
+ * boolean 상태를 쉽게 토글할 수 있는 hook
+ *
+ * @param initialValue - 초기값 (기본값: false)
+ * @returns [현재 값, 토글 함수, 값 설정 함수]
+ *
+ * @example
+ * // 기본 사용
+ * function Modal() {
+ *   const [isOpen, toggleOpen, setIsOpen] = useToggle(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={toggleOpen}>Toggle Modal</button>
+ *       <button onClick={() => setIsOpen(true)}>Open Modal</button>
+ *       <button onClick={() => setIsOpen(false)}>Close Modal</button>
+ *       {isOpen && <div>Modal Content</div>}
+ *     </>
+ *   );
+ * }
+ *
+ * @example
+ * // 다크모드 토글
+ * function ThemeToggle() {
+ *   const [isDark, toggleTheme] = useToggle(false);
+ *
+ *   return (
+ *     <button onClick={toggleTheme}>
+ *       {isDark ? '🌙 Dark' : '☀️ Light'}
+ *     </button>
+ *   );
+ * }
+ *
+ * @example
+ * // 메뉴 열기/닫기
+ * function Sidebar() {
+ *   const [isExpanded, toggleExpanded] = useToggle(true);
+ *
+ *   return (
+ *     <aside className={isExpanded ? 'expanded' : 'collapsed'}>
+ *       <button onClick={toggleExpanded}>
+ *         {isExpanded ? '◀' : '▶'}
+ *       </button>
+ *     </aside>
+ *   );
+ * }
+ */
+export declare function useToggle(initialValue?: boolean): [boolean, () => void, (value: boolean) => void];
+//# sourceMappingURL=useToggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useToggle.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,SAAS,CACvB,YAAY,GAAE,OAAe,GAC5B,CAAC,OAAO,EAAE,MAAM,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,CASjD"}

package/dist/hooks/useToggle.js

@@ -0,0 +1,56 @@
+import { useState, useCallback } from 'react';
+/**
+ * boolean 상태를 쉽게 토글할 수 있는 hook
+ *
+ * @param initialValue - 초기값 (기본값: false)
+ * @returns [현재 값, 토글 함수, 값 설정 함수]
+ *
+ * @example
+ * // 기본 사용
+ * function Modal() {
+ *   const [isOpen, toggleOpen, setIsOpen] = useToggle(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={toggleOpen}>Toggle Modal</button>
+ *       <button onClick={() => setIsOpen(true)}>Open Modal</button>
+ *       <button onClick={() => setIsOpen(false)}>Close Modal</button>
+ *       {isOpen && <div>Modal Content</div>}
+ *     </>
+ *   );
+ * }
+ *
+ * @example
+ * // 다크모드 토글
+ * function ThemeToggle() {
+ *   const [isDark, toggleTheme] = useToggle(false);
+ *
+ *   return (
+ *     <button onClick={toggleTheme}>
+ *       {isDark ? '🌙 Dark' : '☀️ Light'}
+ *     </button>
+ *   );
+ * }
+ *
+ * @example
+ * // 메뉴 열기/닫기
+ * function Sidebar() {
+ *   const [isExpanded, toggleExpanded] = useToggle(true);
+ *
+ *   return (
+ *     <aside className={isExpanded ? 'expanded' : 'collapsed'}>
+ *       <button onClick={toggleExpanded}>
+ *         {isExpanded ? '◀' : '▶'}
+ *       </button>
+ *     </aside>
+ *   );
+ * }
+ */
+export function useToggle(initialValue = false) {
+    const [value, setValue] = useState(initialValue);
+    // 토글 함수는 리렌더링 시에도 동일한 참조를 유지
+    const toggle = useCallback(() => {
+        setValue((prev) => !prev);
+    }, []);
+    return [value, toggle, setValue];
+}