goodchuck-utils 1.1.0 → 1.3.0

package/dist/form/helpers.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Form State Helpers
+ */
+/**
+ * 폼 에러가 있는지 확인
+ */
+export declare function hasFormErrors(errors: Record<string, any>): boolean;
+/**
+ * 변경된 필드만 추출
+ */
+export declare function getChangedFields<T extends Record<string, any>>(original: T, current: T): Partial<T>;
+/**
+ * 빈 값 제거 (null, undefined, 빈 문자열)
+ */
+export declare function removeEmptyValues<T extends Record<string, any>>(obj: T): Partial<T>;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/form/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/form/helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,OAAO,CAElE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC5D,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,GACT,OAAO,CAAC,CAAC,CAAC,CAUZ;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAWnF"}

package/dist/form/helpers.js

@@ -0,0 +1,34 @@
+/**
+ * Form State Helpers
+ */
+/**
+ * 폼 에러가 있는지 확인
+ */
+export function hasFormErrors(errors) {
+    return Object.keys(errors).length > 0;
+}
+/**
+ * 변경된 필드만 추출
+ */
+export function getChangedFields(original, current) {
+    const changed = {};
+    for (const key in current) {
+        if (current[key] !== original[key]) {
+            changed[key] = current[key];
+        }
+    }
+    return changed;
+}
+/**
+ * 빈 값 제거 (null, undefined, 빈 문자열)
+ */
+export function removeEmptyValues(obj) {
+    const result = {};
+    for (const key in obj) {
+        const value = obj[key];
+        if (value !== null && value !== undefined && value !== '') {
+            result[key] = value;
+        }
+    }
+    return result;
+}

package/dist/form/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Form Utilities
+ *
+ * This module provides utilities for form validation, formatting, and state management.
+ */
+export * from './validation';
+export * from './formatter';
+export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,aAAa,CAAC;AAG5B,cAAc,WAAW,CAAC"}

package/dist/form/index.js

@@ -0,0 +1,11 @@
+/**
+ * Form Utilities
+ *
+ * This module provides utilities for form validation, formatting, and state management.
+ */
+// Validation utilities
+export * from './validation';
+// Formatter utilities
+export * from './formatter';
+// Helper utilities
+export * from './helpers';

package/dist/form/validation.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Form Validation Utilities
+ */
+/**
+ * 이메일 형식 검증
+ */
+export declare function isEmail(value: string): boolean;
+/**
+ * 한국 전화번호 형식 검증
+ * 010-1234-5678, 01012345678, 02-1234-5678 등 허용
+ */
+export declare function isPhoneNumber(value: string): boolean;
+/**
+ * URL 형식 검증
+ */
+export declare function isUrl(value: string): boolean;
+/**
+ * 비밀번호 강도 검증
+ * @param value - 검증할 비밀번호
+ * @param options - 검증 옵션
+ */
+export declare function isStrongPassword(value: string, options?: {
+    minLength?: number;
+    requireUppercase?: boolean;
+    requireLowercase?: boolean;
+    requireNumbers?: boolean;
+    requireSpecialChars?: boolean;
+}): boolean;
+/**
+ * 한국 사업자등록번호 형식 검증 (10자리)
+ */
+export declare function isBusinessNumber(value: string): boolean;
+//# sourceMappingURL=validation.d.ts.map

package/dist/form/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/form/validation.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAG9C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAGpD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAO5C;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IACP,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC1B,GACL,OAAO,CAgBT;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAGvD"}

package/dist/form/validation.js

@@ -0,0 +1,56 @@
+/**
+ * Form Validation Utilities
+ */
+/**
+ * 이메일 형식 검증
+ */
+export function isEmail(value) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(value);
+}
+/**
+ * 한국 전화번호 형식 검증
+ * 010-1234-5678, 01012345678, 02-1234-5678 등 허용
+ */
+export function isPhoneNumber(value) {
+    const phoneRegex = /^(01[016789]|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/;
+    return phoneRegex.test(value.replace(/\s/g, ''));
+}
+/**
+ * URL 형식 검증
+ */
+export function isUrl(value) {
+    try {
+        new URL(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * 비밀번호 강도 검증
+ * @param value - 검증할 비밀번호
+ * @param options - 검증 옵션
+ */
+export function isStrongPassword(value, options = {}) {
+    const { minLength = 8, requireUppercase = true, requireLowercase = true, requireNumbers = true, requireSpecialChars = true, } = options;
+    if (value.length < minLength)
+        return false;
+    if (requireUppercase && !/[A-Z]/.test(value))
+        return false;
+    if (requireLowercase && !/[a-z]/.test(value))
+        return false;
+    if (requireNumbers && !/[0-9]/.test(value))
+        return false;
+    if (requireSpecialChars && !/[!@#$%^&*(),.?":{}|<>]/.test(value))
+        return false;
+    return true;
+}
+/**
+ * 한국 사업자등록번호 형식 검증 (10자리)
+ */
+export function isBusinessNumber(value) {
+    const cleaned = value.replace(/[^0-9]/g, '');
+    return cleaned.length === 10;
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React Hooks
+ *
+ * This module provides React hooks for common use cases.
+ * Note: Requires React as a peer dependency.
+ */
+export * from './useLocalStorage';
+export * from './useSessionStorage';
+export * from './useMediaQuery';
+export * from './useClickOutside';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/hooks/index.js

@@ -0,0 +1,12 @@
+/**
+ * React Hooks
+ *
+ * This module provides React hooks for common use cases.
+ * Note: Requires React as a peer dependency.
+ */
+// Storage hooks
+export * from './useLocalStorage';
+export * from './useSessionStorage';
+// UI/UX hooks
+export * from './useMediaQuery';
+export * from './useClickOutside';

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,49 @@
+import { RefObject } from 'react';
+/**
+ * 요소 외부 클릭을 감지하는 hook
+ *
+ * @param ref - 외부 클릭을 감지할 요소의 ref
+ * @param handler - 외부 클릭 시 실행할 콜백 함수
+ * @param enabled - hook 활성화 여부 (기본값: true)
+ *
+ * @example
+ * function Dropdown() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const dropdownRef = useRef<HTMLDivElement>(null);
+ *
+ *   useClickOutside(dropdownRef, () => setIsOpen(false));
+ *
+ *   return (
+ *     <div ref={dropdownRef}>
+ *       <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
+ *       {isOpen && <div>Dropdown Content</div>}
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 조건부 활성화
+ * useClickOutside(modalRef, handleClose, isModalOpen);
+ */
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+/**
+ * 여러 요소의 외부 클릭을 감지하는 hook
+ *
+ * @param refs - 외부 클릭을 감지할 요소들의 ref 배열
+ * @param handler - 외부 클릭 시 실행할 콜백 함수
+ * @param enabled - hook 활성화 여부 (기본값: true)
+ *
+ * @example
+ * function Modal() {
+ *   const modalRef = useRef<HTMLDivElement>(null);
+ *   const triggerRef = useRef<HTMLButtonElement>(null);
+ *
+ *   // 모달과 트리거 버튼 외부 클릭 시 닫기
+ *   useClickOutsideMultiple(
+ *     [modalRef, triggerRef],
+ *     () => setIsOpen(false)
+ *   );
+ * }
+ */
+export declare function useClickOutsideMultiple<T extends HTMLElement = HTMLElement>(refs: RefObject<T>[], handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+//# sourceMappingURL=useClickOutside.d.ts.map

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

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

@@ -0,0 +1,94 @@
+import { useEffect } from 'react';
+/**
+ * 요소 외부 클릭을 감지하는 hook
+ *
+ * @param ref - 외부 클릭을 감지할 요소의 ref
+ * @param handler - 외부 클릭 시 실행할 콜백 함수
+ * @param enabled - hook 활성화 여부 (기본값: true)
+ *
+ * @example
+ * function Dropdown() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const dropdownRef = useRef<HTMLDivElement>(null);
+ *
+ *   useClickOutside(dropdownRef, () => setIsOpen(false));
+ *
+ *   return (
+ *     <div ref={dropdownRef}>
+ *       <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
+ *       {isOpen && <div>Dropdown Content</div>}
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // 조건부 활성화
+ * useClickOutside(modalRef, handleClose, isModalOpen);
+ */
+export function useClickOutside(ref, handler, enabled = true) {
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const listener = (event) => {
+            const element = ref.current;
+            // ref가 없거나, 클릭한 요소가 ref 내부인 경우 무시
+            if (!element || element.contains(event.target)) {
+                return;
+            }
+            // 외부 클릭 시 handler 실행
+            handler(event);
+        };
+        // mousedown과 touchstart 이벤트 모두 처리 (모바일 지원)
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler, enabled]);
+}
+/**
+ * 여러 요소의 외부 클릭을 감지하는 hook
+ *
+ * @param refs - 외부 클릭을 감지할 요소들의 ref 배열
+ * @param handler - 외부 클릭 시 실행할 콜백 함수
+ * @param enabled - hook 활성화 여부 (기본값: true)
+ *
+ * @example
+ * function Modal() {
+ *   const modalRef = useRef<HTMLDivElement>(null);
+ *   const triggerRef = useRef<HTMLButtonElement>(null);
+ *
+ *   // 모달과 트리거 버튼 외부 클릭 시 닫기
+ *   useClickOutsideMultiple(
+ *     [modalRef, triggerRef],
+ *     () => setIsOpen(false)
+ *   );
+ * }
+ */
+export function useClickOutsideMultiple(refs, handler, enabled = true) {
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const listener = (event) => {
+            // 모든 ref를 확인하여 하나라도 내부 클릭이면 무시
+            const isInside = refs.some((ref) => {
+                const element = ref.current;
+                return element && element.contains(event.target);
+            });
+            if (isInside) {
+                return;
+            }
+            // 모든 요소 외부 클릭 시 handler 실행
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [refs, handler, enabled]);
+}

package/dist/hooks/useLocalStorage.d.ts

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

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

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

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

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