@blastlabs/utils 1.11.0 → 1.12.0

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(

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(

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,MAAM,MAAM,aAAa,CAAC,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC1F,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,QAAQ,EAAE,CACR,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KACE,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,YAAY,CAAC;KAC9B,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,6CAA6C;IAC7C,IAAI,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAqgBtI"}
+{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,MAAM,MAAM,aAAa,CAAC,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC1F,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,QAAQ,EAAE,CACR,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KACE,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,YAAY,CAAC;KAC9B,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,6CAA6C;IAC7C,IAAI,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBA8gBtI"}

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({
@@ -279,7 +279,7 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
         }
     };
     return (React.createElement("div", { style: getContainerStyle(position) },
-        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: getToggleButtonStyle(formState.isValid), onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#dc2626' : '#7c3aed'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#ef4444' : '#8b5cf6') }, isOpen ? '✕' : '📝'),
+        React.createElement("button", { type: "button", onClick: () => setIsOpen(!isOpen), style: getToggleButtonStyle(formState.isValid), onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#dc2626' : '#7c3aed'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#ef4444' : '#8b5cf6') }, isOpen ? '✕' : '📝'),
         isOpen && (React.createElement("div", { ref: panelRef, style: getPanelStyle(position, panelPosition, panelSize, isDragging) },
             React.createElement("div", { style: headerStyle, onMouseDown: handleHeaderMouseDown },
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
@@ -288,7 +288,7 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
                         title),
                     React.createElement("div", { style: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
                 React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-                    generateMock && (React.createElement("button", { onClick: handleGenerateMock, disabled: isGenerating, style: {
+                    generateMock && (React.createElement("button", { type: "button", onClick: handleGenerateMock, disabled: isGenerating, style: {
                             ...getCopyButtonStyle(false),
                             backgroundColor: isGenerating ? '#9ca3af' : '#10b981',
                             opacity: isGenerating ? 0.6 : 1,
@@ -300,7 +300,7 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
                             if (!isGenerating)
                                 e.currentTarget.style.backgroundColor = '#10b981';
                         } }, isGenerating ? '⏳ Generating...' : '🤖 Generate Mock')),
-                    React.createElement("button", { onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
+                    React.createElement("button", { type: "button", onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
                             if (!isCopied)
                                 e.currentTarget.style.backgroundColor = '#2563eb';
                         }, onMouseLeave: (e) => {
@@ -315,21 +315,21 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
                     color: '#991b1b',
                 } }, generateError)),
             React.createElement("div", { style: tabContainerStyle },
-                React.createElement("button", { onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all'), onMouseEnter: (e) => {
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all'), onMouseEnter: (e) => {
                         if (activeTab !== 'all')
                             e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {
                         if (activeTab !== 'all')
                             e.currentTarget.style.backgroundColor = 'transparent';
                     } }, "All"),
-                React.createElement("button", { onClick: () => setActiveTab('values'), style: getTabStyle(activeTab === 'values'), onMouseEnter: (e) => {
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('values'), style: getTabStyle(activeTab === 'values'), onMouseEnter: (e) => {
                         if (activeTab !== 'values')
                             e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {
                         if (activeTab !== 'values')
                             e.currentTarget.style.backgroundColor = 'transparent';
                     } }, "Values"),
-                React.createElement("button", { onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
                         if (activeTab !== 'errors')
                             e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {
@@ -338,7 +338,7 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
                     } },
                     "Errors ",
                     errorCount > 0 && `(${errorCount})`),
-                React.createElement("button", { onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed'), onMouseEnter: (e) => {
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed'), onMouseEnter: (e) => {
                         if (activeTab !== 'changed')
                             e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {
@@ -347,14 +347,14 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
                     } },
                     "Changed ",
                     changedFieldsCount > 0 && `(${changedFieldsCount})`),
-                React.createElement("button", { onClick: () => setActiveTab('state'), style: getTabStyle(activeTab === 'state'), onMouseEnter: (e) => {
+                React.createElement("button", { type: "button", onClick: () => setActiveTab('state'), style: getTabStyle(activeTab === 'state'), onMouseEnter: (e) => {
                         if (activeTab !== 'state')
                             e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {
                         if (activeTab !== 'state')
                             e.currentTarget.style.backgroundColor = 'transparent';
                     } }, "State"),
-                validationSchema && (React.createElement("button", { onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation'), onMouseEnter: (e) => {
+                validationSchema && (React.createElement("button", { type: "button", onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation'), onMouseEnter: (e) => {
                         if (activeTab !== 'validation')
                             e.currentTarget.style.backgroundColor = '#f3f4f6';
                     }, onMouseLeave: (e) => {

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

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import IdSelector from './IdSelector';
+describe('IdSelector', () => {
+    const mockOnLogin = vi.fn();
+    const defaultInfos = [
+        { id: 'admin@test.com', pw: 'admin123', memo: '관리자' },
+        { id: 'user@test.com', pw: 'user123', memo: '일반 사용자' },
+    ];
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    describe('렌더링', () => {
+        it('컴포넌트가 정상적으로 렌더링된다', () => {
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            expect(screen.getByText('🚀 개발용 빠른 로그인')).toBeTruthy();
+        });
+        it('전달된 모든 로그인 정보를 렌더링한다', () => {
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            expect(screen.getByText('관리자')).toBeTruthy();
+            expect(screen.getByText('일반 사용자')).toBeTruthy();
+            expect(screen.getByText('admin@test.com')).toBeTruthy();
+            expect(screen.getByText('user@test.com')).toBeTruthy();
+        });
+        it('각 카드에 ID와 PW 정보를 표시한다', () => {
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            // ID와 PW는 여러 카드에 나타나므로 getAllByText 사용
+            const idLabels = screen.getAllByText('ID');
+            const pwLabels = screen.getAllByText('PW');
+            expect(idLabels).toHaveLength(2);
+            expect(pwLabels).toHaveLength(2);
+            defaultInfos.forEach((info) => {
+                expect(screen.getByText(info.id)).toBeTruthy();
+                expect(screen.getByText(info.pw)).toBeTruthy();
+            });
+        });
+        it('빈 배열이 전달되면 카드가 렌더링되지 않는다', () => {
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: [] }));
+            expect(screen.getByText('🚀 개발용 빠른 로그인')).toBeTruthy();
+            expect(screen.queryByRole('button')).toBeNull();
+        });
+    });
+    describe('로그인 기능', () => {
+        it('로그인 버튼 클릭 시 onLogin이 올바른 인자로 호출된다', async () => {
+            const user = userEvent.setup();
+            mockOnLogin.mockResolvedValue(undefined);
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            const adminButton = screen.getByRole('button', { name: '관리자' });
+            await user.click(adminButton);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('admin@test.com', 'admin123');
+                expect(mockOnLogin).toHaveBeenCalledTimes(1);
+            });
+        });
+        it('여러 버튼을 순차적으로 클릭하면 각각의 정보로 onLogin이 호출된다', async () => {
+            const user = userEvent.setup();
+            mockOnLogin.mockResolvedValue(undefined);
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            const adminButton = screen.getByRole('button', { name: '관리자' });
+            const userButton = screen.getByRole('button', { name: '일반 사용자' });
+            await user.click(adminButton);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('admin@test.com', 'admin123');
+            });
+            await user.click(userButton);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('user@test.com', 'user123');
+            });
+            expect(mockOnLogin).toHaveBeenCalledTimes(2);
+        });
+        it('로그인 중일 때 버튼이 비활성화되고 텍스트가 변경된다', async () => {
+            const user = userEvent.setup();
+            let resolveLogin;
+            const loginPromise = new Promise((resolve) => {
+                resolveLogin = resolve;
+            });
+            mockOnLogin.mockReturnValue(loginPromise);
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            const adminButton = screen.getByRole('button', { name: '관리자' });
+            await user.click(adminButton);
+            await waitFor(() => {
+                expect(screen.getByText('로그인 중...')).toBeTruthy();
+                expect(adminButton.disabled).toBe(true);
+            });
+            resolveLogin();
+            await waitFor(() => {
+                expect(screen.getByText('관리자')).toBeTruthy();
+                expect(adminButton.disabled).toBe(false);
+            });
+        });
+        it('로그인 실패 시에도 로딩 상태가 해제된다', async () => {
+            const user = userEvent.setup();
+            const error = new Error('로그인 실패');
+            mockOnLogin.mockRejectedValue(error);
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            const adminButton = screen.getByRole('button', { name: '관리자' });
+            // 에러가 발생하더라도 catch 블록에서 처리되고 finally에서 상태가 해제됨
+            await user.click(adminButton);
+            // 에러가 발생하더라도 catch 블록에서 처리되고 상태가 해제되므로 기다림
+            await waitFor(() => {
+                expect(screen.getByText('관리자')).toBeTruthy();
+                expect(adminButton.disabled).toBe(false);
+            }, { timeout: 3000 });
+            // 에러가 발생했는지 확인
+            expect(mockOnLogin).toHaveBeenCalled();
+        });
+        it('한 카드가 로딩 중일 때 다른 카드의 버튼도 클릭 가능하다', async () => {
+            const user = userEvent.setup();
+            let resolveFirstLogin;
+            const firstLoginPromise = new Promise((resolve) => {
+                resolveFirstLogin = resolve;
+            });
+            mockOnLogin.mockImplementation(async (id) => {
+                if (id === 'admin@test.com') {
+                    return firstLoginPromise;
+                }
+                return Promise.resolve();
+            });
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            const adminButton = screen.getByRole('button', { name: '관리자' });
+            const userButton = screen.getByRole('button', { name: '일반 사용자' });
+            await user.click(adminButton);
+            await waitFor(() => {
+                expect(adminButton.disabled).toBe(true);
+            });
+            // 다른 버튼은 여전히 클릭 가능해야 함
+            expect(userButton.disabled).toBe(false);
+            await user.click(userButton);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('user@test.com', 'user123');
+            });
+            resolveFirstLogin();
+        });
+    });
+    describe('호버 상태', () => {
+        it('카드에 마우스를 올리면 hover 상태가 적용된다', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: defaultInfos }));
+            const adminCard = screen.getByText('admin@test.com').closest('div[style*="border"]');
+            expect(adminCard).toBeTruthy();
+            // hover 이벤트는 CSS 스타일 변경이므로 스타일 속성을 직접 확인하기 어려움
+            // 대신 이벤트 핸들러가 정상 작동하는지 확인
+            const adminButton = screen.getByRole('button', { name: '관리자' });
+            await user.hover(adminButton);
+            // hover 이벤트가 발생했는지 확인 (에러가 없으면 성공)
+            expect(adminButton).toBeTruthy();
+        });
+    });
+    describe('에지 케이스', () => {
+        it('메모가 비어있는 경우에도 정상 동작한다', async () => {
+            const user = userEvent.setup();
+            mockOnLogin.mockResolvedValue(undefined);
+            const infosWithEmptyMemo = [
+                { id: 'test@test.com', pw: 'test123', memo: '' },
+            ];
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: infosWithEmptyMemo }));
+            const button = screen.getByRole('button');
+            expect(button).toBeTruthy();
+            expect(button.textContent).toBe('');
+            await user.click(button);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('test@test.com', 'test123');
+            });
+        });
+        it('동일한 ID가 여러 개 있어도 각각 독립적으로 동작한다', async () => {
+            const user = userEvent.setup();
+            mockOnLogin.mockResolvedValue(undefined);
+            const duplicateInfos = [
+                { id: 'same@test.com', pw: 'pw1', memo: '첫 번째' },
+                { id: 'same@test.com', pw: 'pw2', memo: '두 번째' },
+            ];
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: duplicateInfos }));
+            const firstButton = screen.getByRole('button', { name: '첫 번째' });
+            const secondButton = screen.getByRole('button', { name: '두 번째' });
+            await user.click(firstButton);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('same@test.com', 'pw1');
+            });
+            await user.click(secondButton);
+            await waitFor(() => {
+                expect(mockOnLogin).toHaveBeenCalledWith('same@test.com', 'pw2');
+            });
+        });
+        it('매우 긴 텍스트가 있어도 정상 렌더링된다', () => {
+            const longTextInfos = [
+                {
+                    id: 'verylongemailaddressthatmightoverflow@example.com',
+                    pw: 'verylongpasswordthatexceedsnormallimits123456789',
+                    memo: '매우 긴 메모 텍스트가 있는 계정입니다. 이 텍스트는 매우 길 수 있습니다.',
+                },
+            ];
+            render(React.createElement(IdSelector, { onLogin: mockOnLogin, infos: longTextInfos }));
+            expect(screen.getByText(/매우 긴 메모/)).toBeTruthy();
+            expect(screen.getByText(/verylongemail/)).toBeTruthy();
+            expect(screen.getByText(/verylongpassword/)).toBeTruthy();
+        });
+    });
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LoginInfo } from './IdSelector';
+type LoginCardProps = {
+    info: LoginInfo;
+    index: number;
+    loading: number | null;
+    hoveredIndex: number | null;
+    hoveredButton: number | null;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onButtonMouseEnter: () => void;
+    onButtonMouseLeave: () => void;
+    onLogin: (info: LoginInfo, index: number) => Promise<void>;
+};
+export declare const LoginCard: React.FC<LoginCardProps>;
+export {};
+//# sourceMappingURL=LoginCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginCard.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/IdSelector/LoginCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5D,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyC9C,CAAC"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getCardStyle, getButtonStyle, infoContainerStyle, infoRowStyle, labelStyle, valueStyle, } from './styles';
+export const LoginCard = ({ info, index, loading, hoveredIndex, hoveredButton, onMouseEnter, onMouseLeave, onButtonMouseEnter, onButtonMouseLeave, onLogin, }) => {
+    const handleClick = () => {
+        onLogin(info, index);
+    };
+    return (React.createElement("div", { style: getCardStyle(hoveredIndex, index), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+        React.createElement("button", { onClick: handleClick, disabled: loading === index, style: getButtonStyle(hoveredButton, loading, index), onMouseEnter: onButtonMouseEnter, onMouseLeave: onButtonMouseLeave }, loading === index ? '로그인 중...' : info.memo),
+        React.createElement("div", { style: infoContainerStyle },
+            React.createElement("div", { style: infoRowStyle },
+                React.createElement("span", { style: labelStyle }, "ID"),
+                React.createElement("span", { style: valueStyle }, info.id)),
+            React.createElement("div", { style: infoRowStyle },
+                React.createElement("span", { style: labelStyle }, "PW"),
+                React.createElement("span", { style: valueStyle }, info.pw)))));
+};

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

@@ -0,0 +1,3 @@
+export { default } from './IdSelector';
+export type { Props as IdSelectorProps, LoginInfo } from './IdSelector';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/IdSelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

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

@@ -0,0 +1 @@
+export { default } from './IdSelector';

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

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export type StyleProps = {
+    hoveredIndex: number | null;
+    hoveredButton: number | null;
+    loading: number | null;
+    index: number;
+};
+export declare const getContainerStyle: () => CSSProperties;
+export declare const getHeaderStyle: () => CSSProperties;
+export declare const getCardStyle: (hoveredIndex: number | null, index: number) => CSSProperties;
+export declare const getButtonStyle: (hoveredButton: number | null, loading: number | null, index: number) => CSSProperties;
+export declare const infoContainerStyle: CSSProperties;
+export declare const infoRowStyle: CSSProperties;
+export declare const labelStyle: CSSProperties;
+export declare const valueStyle: CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/IdSelector/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,aAenC,CAAC;AAEH,eAAO,MAAM,cAAc,QAAO,aAMhC,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,GAAG,IAAI,EAAE,OAAO,MAAM,KAAG,aASxE,CAAC;AAEH,eAAO,MAAM,cAAc,GACzB,eAAe,MAAM,GAAG,IAAI,EAC5B,SAAS,MAAM,GAAG,IAAI,EACtB,OAAO,MAAM,KACZ,aAUD,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,aAQhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,aAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,aAGxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,aAGxB,CAAC"}

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

@@ -0,0 +1,66 @@
+export const getContainerStyle = () => ({
+    position: 'fixed',
+    top: '50%',
+    right: '16px',
+    transform: 'translateY(-50%)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    padding: '16px',
+    backgroundColor: '#ffffff',
+    borderRadius: '12px',
+    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    border: '1px solid #e5e7eb',
+    minWidth: '280px',
+    zIndex: 9999,
+});
+export const getHeaderStyle = () => ({
+    color: '#111827',
+    fontSize: '14px',
+    fontWeight: 'bold',
+    paddingBottom: '8px',
+    borderBottom: '1px solid #e5e7eb',
+});
+export const getCardStyle = (hoveredIndex, index) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    padding: '12px',
+    backgroundColor: '#f9fafb',
+    borderRadius: '8px',
+    border: hoveredIndex === index ? '1px solid #60a5fa' : '1px solid #e5e7eb',
+    transition: 'all 0.2s',
+});
+export const getButtonStyle = (hoveredButton, loading, index) => ({
+    width: '100%',
+    padding: '8px 16px',
+    backgroundColor: loading === index ? '#9ca3af' : hoveredButton === index ? '#2563eb' : '#3b82f6',
+    color: 'white',
+    fontWeight: 600,
+    borderRadius: '8px',
+    border: 'none',
+    cursor: loading === index ? 'not-allowed' : 'pointer',
+    transition: 'background-color 0.2s',
+});
+export const infoContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    fontSize: '12px',
+    color: '#6b7280',
+    paddingLeft: '4px',
+    paddingRight: '4px',
+};
+export const infoRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+};
+export const labelStyle = {
+    fontWeight: 600,
+    minWidth: '24px',
+};
+export const valueStyle = {
+    fontFamily: 'monospace',
+    color: '#374151',
+};

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

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