@blastlabs/utils 1.12.0 → 1.12.1

package/README.md

@@ -1,15 +1,17 @@
-# goodchuck-utils
+# @blastlabs/utils
+
+> **⚠️ 주의: 이 라이브러리는 사내 개발용이며, 현재 테스트 단계입니다.**
 
 React 프로젝트에서 자주 사용하는 유틸리티 훅(Hooks)과 개발용 컴포넌트 모음입니다.
 
 ## 설치
 
 ```bash
-npm install goodchuck-utils
+npm install @blastlabs/utils
 # or
-yarn add goodchuck-utils
+yarn add @blastlabs/utils
 # or
-pnpm add goodchuck-utils
+pnpm add @blastlabs/utils
 ```
 
 ## 기능
@@ -19,7 +21,7 @@ pnpm add goodchuck-utils
 프로젝트에서 자주 사용하는 커스텀 훅들을 제공합니다.
 
 ```typescript
-import { useDebounce, useToggle, useCopyToClipboard } from 'goodchuck-utils/hooks';
+import { useDebounce, useToggle, useCopyToClipboard } from '@blastlabs/utils/hooks';
 ```
 
 #### 사용 가능한 Hooks
@@ -38,7 +40,7 @@ import { useDebounce, useToggle, useCopyToClipboard } from 'goodchuck-utils/hook
 개발 환경에서만 사용하는 유틸리티 컴포넌트들입니다.
 
 ```typescript
-import { DevPanel, FormDevTools, ApiLogger } from 'goodchuck-utils/components/dev';
+import { DevPanel, FormDevTools, ApiLogger } from '@blastlabs/utils/components/dev';
 ```
 
 #### IdSelector
@@ -46,7 +48,7 @@ import { DevPanel, FormDevTools, ApiLogger } from 'goodchuck-utils/components/de
 개발 환경에서 여러 계정으로 빠르게 로그인할 수 있는 컴포넌트입니다.
 
 ```tsx
-import { IdSelector } from 'goodchuck-utils/components/dev';
+import { IdSelector } from '@blastlabs/utils/components/dev';
 
 const devAccounts = [
   { id: 'admin', pw: 'admin123', memo: '관리자' },
@@ -75,7 +77,7 @@ react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌
 
 ```tsx
 import { useForm } from 'react-hook-form';
-import { FormDevTools } from 'goodchuck-utils/components/dev';
+import { FormDevTools } from '@blastlabs/utils/components/dev';
 
 function MyForm() {
   const form = useForm({
@@ -112,7 +114,7 @@ API 요청/응답을 로깅하고 모니터링하는 컴포넌트입니다.
 
 ```tsx
 import axios from 'axios';
-import { ApiLogger, addApiLog } from 'goodchuck-utils/components/dev';
+import { ApiLogger, addApiLog } from '@blastlabs/utils/components/dev';
 
 // Axios interceptor 설정
 axios.interceptors.request.use(
@@ -178,7 +180,7 @@ function App() {
 여러 개발 도구를 하나의 패널에서 관리할 수 있는 통합 컴포넌트입니다.
 
 ```tsx
-import { DevPanel } from 'goodchuck-utils/components/dev';
+import { DevPanel } from '@blastlabs/utils/components/dev';
 
 function App() {
   return (
@@ -200,7 +202,7 @@ function App() {
 페이지의 모든 z-index 값을 시각화하고 디버깅하는 도구입니다.
 
 ```tsx
-import { ZIndexDebugger } from 'goodchuck-utils/components/dev';
+import { ZIndexDebugger } from '@blastlabs/utils/components/dev';
 
 function App() {
   return (
@@ -222,7 +224,7 @@ function App() {
 현재 윈도우 크기를 화면에 표시하는 간단한 컴포넌트입니다.
 
 ```tsx
-import { WindowSizeDisplay } from 'goodchuck-utils/components/dev';
+import { WindowSizeDisplay } from '@blastlabs/utils/components/dev';
 
 function App() {
   return (
@@ -250,7 +252,7 @@ function App() {
 모든 컴포넌트와 훅은 TypeScript로 작성되었으며, 타입 정의가 포함되어 있습니다.
 
 ```typescript
-import type { FormDevToolsProps, ApiLogEntry } from 'goodchuck-utils/components/dev';
+import type { FormDevToolsProps, ApiLogEntry } from '@blastlabs/utils/components/dev';
 ```
 
 ## 주의사항
@@ -258,6 +260,11 @@ import type { FormDevToolsProps, ApiLogEntry } from 'goodchuck-utils/components/
 - **개발용 컴포넌트(`components/dev`)는 프로덕션 환경에서 제외하는 것을 권장합니다.**
 - 개발 환경 구분을 위해 `import.meta.env.DEV` (Vite) 또는 `process.env.NODE_ENV === 'development'` (CRA)를 사용하세요.
 
+## 문의
+
+- goodchuck852@gmail.com
+- taehyunyang@blast-team.com
+
 ## 라이선스
 
 ISC

package/dist/components/auth/AuthGuard.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import { UseAuthOptions } from '../../hooks/auth';
+type AuthGuardProps = {
+    /** 인증된 경우 렌더링할 컴포넌트 */
+    children: ReactNode;
+    /** 로딩 중 표시할 컴포넌트 */
+    fallback?: ReactNode;
+    /** 인증되지 않은 경우 호출되는 콜백 (리다이렉트 로직 구현) */
+    onUnauthenticated?: () => void;
+    /** 로딩 완료 후 인증되지 않은 경우 렌더링할 컴포넌트 (onUnauthenticated가 없을 때) */
+    unauthenticatedFallback?: ReactNode;
+    /** useAuth 훅 옵션 (선택사항) */
+    authOptions?: UseAuthOptions;
+};
+/**
+ * 인증 가드 컴포넌트
+ * 인증이 필요한 페이지를 보호하는 컴포넌트
+ *
+ * 내부적으로 useAuth 훅을 호출하여 localStorage/sessionStorage에서 인증 상태를 확인합니다.
+ * 각 AuthGuard는 독립적으로 동작하며, storage를 통해 자동으로 동기화됩니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용 (localStorage 자동 로드)
+ * import { AuthGuard } from '@blastlabs/utils';
+ * import { useRouter } from 'next/navigation';
+ *
+ * function ProtectedPage() {
+ *   const router = useRouter();
+ *
+ *   return (
+ *     <AuthGuard
+ *       authOptions={{ autoLoadUser: true }}
+ *       onUnauthenticated={() => router.push('/login')}
+ *       fallback={<LoadingSpinner />}
+ *     >
+ *       <YourProtectedContent />
+ *     </AuthGuard>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // React Router에서 사용
+ * import { useNavigate } from 'react-router-dom';
+ *
+ * function ProtectedPage() {
+ *   const navigate = useNavigate();
+ *
+ *   return (
+ *     <AuthGuard
+ *       authOptions={{ autoLoadUser: true }}
+ *       onUnauthenticated={() => navigate('/login')}
+ *     >
+ *       <YourProtectedContent />
+ *     </AuthGuard>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 리다이렉트 없이 대체 UI 표시
+ * <AuthGuard
+ *   authOptions={{ autoLoadUser: true }}
+ *   unauthenticatedFallback={
+ *     <div>
+ *       <h1>로그인이 필요합니다</h1>
+ *       <Link to="/login">로그인 페이지로 이동</Link>
+ *     </div>
+ *   }
+ * >
+ *   <YourProtectedContent />
+ * </AuthGuard>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 여러 페이지에서 사용해도 storage로 자동 동기화
+ * // Page1.tsx
+ * <AuthGuard authOptions={{ autoLoadUser: true }} onUnauthenticated={...}>
+ *   <Page1Content />
+ * </AuthGuard>
+ *
+ * // Page2.tsx - 동일한 인증 상태 공유 (localStorage 사용)
+ * <AuthGuard authOptions={{ autoLoadUser: true }} onUnauthenticated={...}>
+ *   <Page2Content />
+ * </AuthGuard>
+ * ```
+ */
+export declare function AuthGuard({ children, fallback, onUnauthenticated, unauthenticatedFallback, authOptions, }: AuthGuardProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=AuthGuard.d.ts.map

package/dist/components/auth/AuthGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthGuard.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AuthGuard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0B,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE1E,KAAK,cAAc,GAAG;IACpB,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,6DAA6D;IAC7D,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,cAAc,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,uBAAuB,EACvB,WAAW,GACZ,EAAE,cAAc,4BA0BhB"}

package/dist/components/auth/AuthGuard.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { useAuth as useAuthHook } from '../../hooks/auth';
+/**
+ * 인증 가드 컴포넌트
+ * 인증이 필요한 페이지를 보호하는 컴포넌트
+ *
+ * 내부적으로 useAuth 훅을 호출하여 localStorage/sessionStorage에서 인증 상태를 확인합니다.
+ * 각 AuthGuard는 독립적으로 동작하며, storage를 통해 자동으로 동기화됩니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용 (localStorage 자동 로드)
+ * import { AuthGuard } from '@blastlabs/utils';
+ * import { useRouter } from 'next/navigation';
+ *
+ * function ProtectedPage() {
+ *   const router = useRouter();
+ *
+ *   return (
+ *     <AuthGuard
+ *       authOptions={{ autoLoadUser: true }}
+ *       onUnauthenticated={() => router.push('/login')}
+ *       fallback={<LoadingSpinner />}
+ *     >
+ *       <YourProtectedContent />
+ *     </AuthGuard>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // React Router에서 사용
+ * import { useNavigate } from 'react-router-dom';
+ *
+ * function ProtectedPage() {
+ *   const navigate = useNavigate();
+ *
+ *   return (
+ *     <AuthGuard
+ *       authOptions={{ autoLoadUser: true }}
+ *       onUnauthenticated={() => navigate('/login')}
+ *     >
+ *       <YourProtectedContent />
+ *     </AuthGuard>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 리다이렉트 없이 대체 UI 표시
+ * <AuthGuard
+ *   authOptions={{ autoLoadUser: true }}
+ *   unauthenticatedFallback={
+ *     <div>
+ *       <h1>로그인이 필요합니다</h1>
+ *       <Link to="/login">로그인 페이지로 이동</Link>
+ *     </div>
+ *   }
+ * >
+ *   <YourProtectedContent />
+ * </AuthGuard>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 여러 페이지에서 사용해도 storage로 자동 동기화
+ * // Page1.tsx
+ * <AuthGuard authOptions={{ autoLoadUser: true }} onUnauthenticated={...}>
+ *   <Page1Content />
+ * </AuthGuard>
+ *
+ * // Page2.tsx - 동일한 인증 상태 공유 (localStorage 사용)
+ * <AuthGuard authOptions={{ autoLoadUser: true }} onUnauthenticated={...}>
+ *   <Page2Content />
+ * </AuthGuard>
+ * ```
+ */
+export function AuthGuard({ children, fallback, onUnauthenticated, unauthenticatedFallback, authOptions, }) {
+    const { isAuthenticated, isLoading } = useAuthHook(authOptions);
+    useEffect(() => {
+        if (!isLoading && !isAuthenticated && onUnauthenticated) {
+            onUnauthenticated();
+        }
+    }, [isAuthenticated, isLoading, onUnauthenticated]);
+    // 로딩 중이면 fallback 표시
+    if (isLoading) {
+        return React.createElement(React.Fragment, null, fallback || null);
+    }
+    // 인증되지 않았으면
+    if (!isAuthenticated) {
+        // onUnauthenticated 콜백이 있으면 리다이렉트 중이므로 null
+        if (onUnauthenticated) {
+            return null;
+        }
+        // 콜백이 없으면 unauthenticatedFallback 표시
+        return React.createElement(React.Fragment, null, unauthenticatedFallback || null);
+    }
+    // 인증되었으면 자식 컴포넌트 렌더링
+    return React.createElement(React.Fragment, null, children);
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Authentication Components
+ */
+export * from './AuthGuard';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/auth/index.js

@@ -0,0 +1,4 @@
+/**
+ * Authentication Components
+ */
+export * from './AuthGuard';

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

@@ -92,7 +92,7 @@ export declare function clearApiLogs(): void;
  * @example
  * ```tsx
  * // fetch wrapper 사용
- * import { addApiLog } from 'goodchuck-utils/components/dev';
+ * import { addApiLog } from '@blastlabs/utils/components/dev';
  *
  * const originalFetch = window.fetch;
  * window.fetch = async (...args) => {

package/dist/components/dev/ApiLogger.js

@@ -89,7 +89,7 @@ export function clearApiLogs() {
  * @example
  * ```tsx
  * // fetch wrapper 사용
- * import { addApiLog } from 'goodchuck-utils/components/dev';
+ * import { addApiLog } from '@blastlabs/utils/components/dev';
  *
  * const originalFetch = window.fetch;
  * window.fetch = async (...args) => {

package/dist/components/index.d.ts

@@ -5,4 +5,5 @@
  * Note: Uses Tailwind CSS classes - ensure Tailwind is configured in your project.
  */
 export * from './dev';
+export * from './auth';
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/index.js

@@ -5,3 +5,4 @@
  * Note: Uses Tailwind CSS classes - ensure Tailwind is configured in your project.
  */
 export * from './dev';
+export * from './auth';

package/dist/hooks/auth/__tests__/useAuth.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useAuth.test.d.ts.map

package/dist/hooks/auth/__tests__/useAuth.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuth.test.d.ts","sourceRoot":"","sources":["../../../../src/hooks/auth/__tests__/useAuth.test.ts"],"names":[],"mappings":""}

package/dist/hooks/auth/__tests__/useAuth.test.js

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useAuth } from '../useAuth';
+describe('useAuth', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        sessionStorage.clear();
+        vi.clearAllMocks();
+    });
+    afterEach(() => {
+        localStorage.clear();
+        sessionStorage.clear();
+    });
+    describe('Initialization', () => {
+        it('should initialize with no user', () => {
+            const { result } = renderHook(() => useAuth({ autoLoadUser: false }));
+            expect(result.current.user).toBeNull();
+            expect(result.current.isAuthenticated).toBe(false);
+            expect(result.current.isLoading).toBe(false);
+            expect(result.current.token).toBeNull();
+        });
+        it('should load user from localStorage on mount', async () => {
+            const mockUser = { id: '1', name: 'Test User' };
+            localStorage.setItem('auth_token', 'test-token');
+            localStorage.setItem('auth_user', JSON.stringify(mockUser));
+            const { result } = renderHook(() => useAuth({ autoLoadUser: true }));
+            await waitFor(() => {
+                expect(result.current.user).toEqual(mockUser);
+                expect(result.current.isAuthenticated).toBe(true);
+            });
+        });
+    });
+    describe('Login', () => {
+        it('should login successfully', async () => {
+            const mockUser = { id: '1', name: 'Test User' };
+            const loginFn = vi.fn().mockResolvedValue({ user: mockUser, token: 'test-token' });
+            const onLoginSuccess = vi.fn();
+            const { result } = renderHook(() => useAuth({ loginFn, onLoginSuccess, autoLoadUser: false }));
+            await act(async () => {
+                await result.current.login({ email: 'test@example.com', password: 'password' });
+            });
+            expect(result.current.user).toEqual(mockUser);
+            expect(result.current.isAuthenticated).toBe(true);
+            expect(result.current.token).toBe('test-token');
+            expect(onLoginSuccess).toHaveBeenCalledWith(mockUser);
+            expect(localStorage.getItem('auth_token')).toBe('test-token');
+        });
+        it('should handle login error', async () => {
+            const loginError = new Error('Invalid credentials');
+            const loginFn = vi.fn().mockRejectedValue(loginError);
+            const onError = vi.fn();
+            const { result } = renderHook(() => useAuth({ loginFn, onError, autoLoadUser: false }));
+            let thrownError;
+            try {
+                await act(async () => {
+                    await result.current.login({ email: 'test@example.com', password: 'wrong' });
+                });
+            }
+            catch (error) {
+                thrownError = error;
+            }
+            expect(thrownError).toEqual(loginError);
+            expect(result.current.user).toBeNull();
+            expect(result.current.isAuthenticated).toBe(false);
+            expect(onError).toHaveBeenCalledWith(loginError, 'login');
+        });
+    });
+    describe('Logout', () => {
+        it('should logout successfully', async () => {
+            const mockUser = { id: '1', name: 'Test User' };
+            const loginFn = vi.fn().mockResolvedValue({ user: mockUser, token: 'test-token' });
+            const logoutFn = vi.fn().mockResolvedValue(undefined);
+            const onLogoutSuccess = vi.fn();
+            const { result } = renderHook(() => useAuth({ loginFn, logoutFn, onLogoutSuccess, autoLoadUser: false }));
+            await act(async () => {
+                await result.current.login({ email: 'test@example.com', password: 'password' });
+            });
+            expect(result.current.isAuthenticated).toBe(true);
+            await act(async () => {
+                await result.current.logout();
+            });
+            expect(result.current.user).toBeNull();
+            expect(result.current.isAuthenticated).toBe(false);
+            expect(result.current.token).toBeNull();
+            expect(onLogoutSuccess).toHaveBeenCalled();
+            expect(localStorage.getItem('auth_token')).toBeNull();
+        });
+    });
+    describe('Register', () => {
+        it('should register successfully', async () => {
+            const mockUser = { id: '1', name: 'New User' };
+            const registerFn = vi.fn().mockResolvedValue({ user: mockUser, token: 'new-token' });
+            const onRegisterSuccess = vi.fn();
+            const { result } = renderHook(() => useAuth({ registerFn, onRegisterSuccess, autoLoadUser: false }));
+            await act(async () => {
+                await result.current.register({ email: 'new@example.com', password: 'password', name: 'New User' });
+            });
+            expect(result.current.user).toEqual(mockUser);
+            expect(result.current.isAuthenticated).toBe(true);
+            expect(result.current.token).toBe('new-token');
+            expect(onRegisterSuccess).toHaveBeenCalledWith(mockUser);
+        });
+    });
+    describe('Token Management', () => {
+        it('should manually set token', async () => {
+            const { result } = renderHook(() => useAuth({ autoLoadUser: false }));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+            });
+            act(() => {
+                result.current.setToken('manual-token');
+            });
+            expect(result.current.token).toBe('manual-token');
+            expect(localStorage.getItem('auth_token')).toBe('manual-token');
+        });
+        it('should manually set user', async () => {
+            const mockUser = { id: '1', name: 'Manual User' };
+            const { result } = renderHook(() => useAuth({ autoLoadUser: false }));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+            });
+            act(() => {
+                result.current.setUser(mockUser);
+            });
+            expect(result.current.user).toEqual(mockUser);
+            expect(result.current.isAuthenticated).toBe(true);
+        });
+        it('should use sessionStorage when useSessionStorage is true', async () => {
+            const mockUser = { id: '1', name: 'Test User' };
+            const loginFn = vi.fn().mockResolvedValue({ user: mockUser, token: 'session-token' });
+            const { result } = renderHook(() => useAuth({ loginFn, useSessionStorage: true, autoLoadUser: false }));
+            await act(async () => {
+                await result.current.login({ email: 'test@example.com', password: 'password' });
+            });
+            expect(sessionStorage.getItem('auth_token')).toBe('session-token');
+            expect(localStorage.getItem('auth_token')).toBeNull();
+        });
+    });
+});

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

@@ -0,0 +1,5 @@
+/**
+ * Authentication Hooks
+ */
+export * from './useAuth';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/hooks/auth/index.js

@@ -0,0 +1,4 @@
+/**
+ * Authentication Hooks
+ */
+export * from './useAuth';