@blastlabs/utils 1.11.1 → 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

@@ -34,7 +34,7 @@ export declare function clearApiLogs(): void;
  * ```tsx
  * // Axios interceptor 사용 (가장 일반적)
  * import axios from 'axios';
- * import { ApiLogger, addApiLog } from 'goodchuck-utils/components/dev';
+ * import { ApiLogger, addApiLog } from '@blastlabs/utils/components/dev';
  *
  * // Request interceptor
  * axios.interceptors.request.use(
@@ -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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+import { useCopyToClipboard } from '../../hooks';
 // 전역 로그 저장소
 let globalLogs = [];
 let logListeners = [];
@@ -31,7 +31,7 @@ export function clearApiLogs() {
  * ```tsx
  * // Axios interceptor 사용 (가장 일반적)
  * import axios from 'axios';
- * import { ApiLogger, addApiLog } from 'goodchuck-utils/components/dev';
+ * import { ApiLogger, addApiLog } from '@blastlabs/utils/components/dev';
  *
  * // Request interceptor
  * axios.interceptors.request.use(
@@ -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/dev/DevPanel.d.ts

@@ -10,7 +10,7 @@ type Props = {
  * @example
  * ```tsx
  * // Vite 프로젝트
- * import { DevPanel } from 'goodchuck-utils/components/dev';
+ * import { DevPanel } from '@blastlabs/utils/components/dev';
  *
  * function App() {
  *   return (

package/dist/components/dev/DevPanel.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { useWindowSize } from '../../hooks/useWindowSize';
+import { useWindowSize } from '../../hooks';
 /**
  * 개발자 도구 패널
  * 여러 개발용 도구를 하나의 패널에서 관리할 수 있습니다.
@@ -7,7 +7,7 @@ import { useWindowSize } from '../../hooks/useWindowSize';
  * @example
  * ```tsx
  * // Vite 프로젝트
- * import { DevPanel } from 'goodchuck-utils/components/dev';
+ * import { DevPanel } from '@blastlabs/utils/components/dev';
  *
  * function App() {
  *   return (

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

@@ -45,7 +45,7 @@ export type Props = {
  * ```tsx
  * // Vite 프로젝트 - 간단한 사용법
  * 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({

package/dist/components/dev/FormDevTools/FormDevTools.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { useCopyToClipboard } from '../../../hooks';
 import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, tabContainerStyle, getTabStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
 /**
  * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
@@ -9,7 +9,7 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
  * ```tsx
  * // Vite 프로젝트 - 간단한 사용법
  * 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({

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

@@ -1,3 +1,3 @@
 export { default } from './FormDevTools';
-export type { Props as FormDevToolsProps, UseFormReturn } from './FormDevTools';
+export type { Props as FormDevToolsProps } from './FormDevTools';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/dev/{IdSelector.d.ts → IdSelector/IdSelector.d.ts}

@@ -1,10 +1,10 @@
 import React from 'react';
-type LoginInfo = {
+export type LoginInfo = {
     id: string;
     pw: string;
     memo: string;
 };
-type Props = {
+export type Props = {
     onLogin: (email: string, password: string) => Promise<void>;
     infos: LoginInfo[];
 };
@@ -14,7 +14,7 @@ type Props = {
  * @example
  * ```tsx
  * // Vite 프로젝트
- * import { IdSelector } from 'goodchuck-utils/components/dev';
+ * import { IdSelector } from '@blastlabs/utils/components/dev';
  *
  * function LoginPage() {
  *   const handleLogin = async (email: string, password: string) => {
@@ -46,5 +46,4 @@ type Props = {
  * ```
  */
 export default function IdSelector({ onLogin, infos }: Props): React.JSX.Element;
-export {};
 //# sourceMappingURL=IdSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IdSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/IdSelector/IdSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,qBAoC3D"}

package/dist/components/dev/IdSelector/IdSelector.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { LoginCard } from './LoginCard';
+import { getContainerStyle, getHeaderStyle } from './styles';
+/**
+ * 개발용 로그인 shortcut 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { IdSelector } from '@blastlabs/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 />
+ *       {import.meta.env.DEV && (
+ *         <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <IdSelector onLogin={handleLogin} infos={devAccounts} />
+ * )}
+ * ```
+ */
+export default function IdSelector({ onLogin, infos }) {
+    const [loading, setLoading] = useState(null);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [hoveredButton, setHoveredButton] = useState(null);
+    const handleQuickLogin = async (info, index) => {
+        setLoading(index);
+        try {
+            await onLogin(info.id, info.pw);
+        }
+        catch (error) {
+            // 에러는 무시하고 상태만 해제 (에러 처리는 onLogin 호출자가 담당)
+        }
+        finally {
+            setLoading(null);
+        }
+    };
+    return (React.createElement("div", { style: getContainerStyle() },
+        React.createElement("div", { style: getHeaderStyle() }, "\uD83D\uDE80 \uAC1C\uBC1C\uC6A9 \uBE60\uB978 \uB85C\uADF8\uC778"),
+        infos.map((info, index) => (React.createElement(LoginCard, { key: index, info: info, index: index, loading: loading, hoveredIndex: hoveredIndex, hoveredButton: hoveredButton, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onButtonMouseEnter: () => setHoveredButton(index), onButtonMouseLeave: () => setHoveredButton(null), onLogin: handleQuickLogin })))));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IdSelector.test.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/IdSelector/IdSelector.test.tsx"],"names":[],"mappings":""}