@sonhoseong/mfa-lib 1.3.7 → 1.3.10

package/dist/components/page/LoginPage.js

@@ -1,14 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * LoginPage - KOMCA 패턴
  *
  * 공통 로그인 페이지 컴포넌트
  * Host/Remote 모두에서 사용 가능
+ * Supabase Auth 지원
  */
-import { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { getStore, setAccessToken, setUser } from '../../store/app-store';
+import { storage } from '../../utils/storage';
+import { getSupabase } from '../../network/supabase-client';
 import './LoginPage.css';
-export function LoginPage({ redirectPath = '/', onLoginSuccess, appName = 'MFA', logo, onGoogleLogin, showTestAccount = true, }) {
+/**
+ * Supabase User를 앱 User 타입으로 변환
+ */
+function mapSupabaseUser(supabaseUser) {
+    return {
+        id: supabaseUser.id,
+        email: supabaseUser.email || '',
+        name: supabaseUser.user_metadata?.name || supabaseUser.email?.split('@')[0] || '',
+        role: supabaseUser.user_metadata?.role || 'user',
+        avatar: supabaseUser.user_metadata?.avatar_url,
+    };
+}
+export function LoginPage({ redirectPath = '/', onLoginSuccess, appName = 'MFA', logo, onGoogleLogin, showTestAccount = false, useSupabase = true, }) {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');
@@ -25,8 +39,12 @@ export function LoginPage({ redirectPath = '/', onLoginSuccess, appName = 'MFA',
         setIsGoogleLoading(true);
         try {
             const { token, user } = await onGoogleLogin();
+            // Redux store에 저장
             store.dispatch(setAccessToken(token));
             store.dispatch(setUser(user));
+            // localStorage에도 저장 (페이지 새로고침 대비)
+            storage.setAccessToken(token);
+            storage.setUser(user);
             onLoginSuccess?.(user);
             // 페이지 이동
             window.location.href = redirectPath;
@@ -41,37 +59,144 @@ export function LoginPage({ redirectPath = '/', onLoginSuccess, appName = 'MFA',
             setIsGoogleLoading(false);
         }
     }, [onGoogleLogin, store, onLoginSuccess, redirectPath]);
+    // Supabase 로그인 핸들러
+    const handleSupabaseLogin = useCallback(async () => {
+        try {
+            const supabase = getSupabase();
+            const { data, error: authError } = await supabase.auth.signInWithPassword({
+                email,
+                password,
+            });
+            if (authError) {
+                // 에러 메시지 한글화
+                if (authError.message.includes('Invalid login credentials')) {
+                    throw new Error('이메일 또는 비밀번호가 올바르지 않습니다.');
+                }
+                throw new Error(authError.message);
+            }
+            if (!data.session || !data.user) {
+                throw new Error('로그인 응답이 올바르지 않습니다.');
+            }
+            const user = mapSupabaseUser(data.user);
+            // Redux store에 저장
+            store.dispatch(setAccessToken(data.session.access_token));
+            store.dispatch(setUser(user));
+            // localStorage에도 저장
+            storage.setAccessToken(data.session.access_token);
+            storage.setUser(user);
+            onLoginSuccess?.(user);
+            // 페이지 이동
+            window.location.href = redirectPath;
+        }
+        catch (err) {
+            throw err;
+        }
+    }, [email, password, store, onLoginSuccess, redirectPath]);
+    // Mock 로그인 핸들러 (테스트용)
+    const handleMockLogin = useCallback(async () => {
+        if (email === 'admin@test.com' && password === '1234') {
+            const mockToken = `mock-token-${Date.now()}`;
+            const user = {
+                id: '1',
+                name: '관리자',
+                email: email,
+                role: 'admin',
+            };
+            store.dispatch(setAccessToken(mockToken));
+            store.dispatch(setUser(user));
+            storage.setAccessToken(mockToken);
+            storage.setUser(user);
+            onLoginSuccess?.(user);
+            window.location.href = redirectPath;
+        }
+        else {
+            throw new Error('이메일 또는 비밀번호가 올바르지 않습니다.');
+        }
+    }, [email, password, store, onLoginSuccess, redirectPath]);
     const handleSubmit = useCallback(async (e) => {
         e.preventDefault();
         setError('');
         setIsSubmitting(true);
         try {
-            // 테스트 계정 체크
-            if (email === 'admin@test.com' && password === '1234') {
-                const mockToken = `mock-token-${Date.now()}`;
-                const user = {
-                    id: '1',
-                    name: '관리자',
-                    email: email,
-                    role: 'admin',
-                };
-                store.dispatch(setAccessToken(mockToken));
-                store.dispatch(setUser(user));
-                onLoginSuccess?.(user);
-                // 페이지 이동
-                window.location.href = redirectPath;
+            if (useSupabase) {
+                await handleSupabaseLogin();
             }
             else {
-                setError('이메일 또는 비밀번호가 올바르지 않습니다.');
+                await handleMockLogin();
             }
         }
         catch (err) {
-            setError('로그인 중 오류가 발생했습니다.');
+            setError(err.message || '로그인 중 오류가 발생했습니다.');
         }
         finally {
             setIsSubmitting(false);
         }
-    }, [email, password, store, onLoginSuccess, redirectPath]);
-    return (_jsxs("div", { className: "login-page", children: [_jsxs("div", { className: "login-bg", children: [_jsx("div", { className: "login-bg-gradient" }), [...Array(12)].map((_, i) => (_jsx("div", { className: `login-particle login-particle--${i + 1}` }, i)))] }), _jsxs("div", { className: "login-card", children: [_jsxs("div", { className: "login-header", children: [_jsx("a", { href: "/", className: "login-logo-link", children: logo || (_jsxs(_Fragment, { children: [_jsx("svg", { viewBox: "0 0 48 48", fill: "none", width: "28", height: "28", children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: "#1E3A5F", strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }), _jsxs("svg", { viewBox: "0 0 48 48", fill: "none", width: "48", height: "48", children: [_jsx("rect", { x: "20", y: "2", width: "8", height: "16", rx: "4", fill: "#0EA5E9" }), _jsx("rect", { x: "6", y: "16", width: "36", height: "6", rx: "3", fill: "#0EA5E9" }), _jsx("ellipse", { cx: "24", cy: "36", rx: "18", ry: "12", fill: "#0EA5E9" }), _jsx("ellipse", { cx: "17", cy: "36", rx: "4", ry: "6", fill: "#FFFFFF" }), _jsx("ellipse", { cx: "31", cy: "36", rx: "4", ry: "6", fill: "#FFFFFF" })] }), _jsx("svg", { viewBox: "0 0 48 48", fill: "none", width: "28", height: "28", children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: "#1E3A5F", strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })] })) }), _jsx("h1", { className: "login-title", children: "Welcome Back" }), _jsxs("p", { className: "login-subtitle", children: [appName, "\uC5D0 \uB85C\uADF8\uC778\uD558\uC138\uC694"] })] }), error && (_jsxs("div", { className: "login-error", children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }), error] })), onGoogleLogin && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "login-google", onClick: handleGoogleLogin, disabled: isGoogleLoading, children: isGoogleLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "login-spinner login-spinner--dark" }), "\uB85C\uADF8\uC778 \uC911..."] })) : (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), "Google\uB85C \uACC4\uC18D\uD558\uAE30"] })) }), _jsx("div", { className: "login-divider", children: _jsx("span", { children: "\uB610\uB294" }) })] })), _jsxs("form", { className: "login-form", onSubmit: handleSubmit, children: [_jsxs("div", { className: `login-input-group ${focusedField === 'email' ? 'focused' : ''}`, children: [_jsx("label", { className: "login-label", children: "\uC774\uBA54\uC77C" }), _jsxs("div", { className: "login-input-wrapper", children: [_jsxs("svg", { className: "login-input-icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }), _jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })] }), _jsx("input", { type: "email", className: "login-input", value: email, onChange: (e) => setEmail(e.target.value), onFocus: () => setFocusedField('email'), onBlur: () => setFocusedField(null), placeholder: "name@example.com", required: true })] })] }), _jsxs("div", { className: `login-input-group ${focusedField === 'password' ? 'focused' : ''}`, children: [_jsx("label", { className: "login-label", children: "\uBE44\uBC00\uBC88\uD638" }), _jsxs("div", { className: "login-input-wrapper", children: [_jsxs("svg", { className: "login-input-icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), _jsx("input", { type: "password", className: "login-input", value: password, onChange: (e) => setPassword(e.target.value), onFocus: () => setFocusedField('password'), onBlur: () => setFocusedField(null), placeholder: "\uBE44\uBC00\uBC88\uD638\uB97C \uC785\uB825\uD558\uC138\uC694", required: true })] })] }), _jsx("button", { type: "submit", className: "login-button", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "login-spinner" }), "\uB85C\uADF8\uC778 \uC911..."] })) : (_jsxs(_Fragment, { children: ["\uB85C\uADF8\uC778", _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })) })] }), showTestAccount && (_jsxs("div", { className: "login-test-info", children: [_jsxs("div", { className: "login-test-badge", children: [_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }), "\uD14C\uC2A4\uD2B8 \uACC4\uC815"] }), _jsx("span", { className: "login-test-credentials", children: "admin@test.com / 1234" })] }))] })] }));
+    }, [useSupabase, handleSupabaseLogin, handleMockLogin]);
+    return (React.createElement("div", { className: "login-page" },
+        React.createElement("div", { className: "login-bg" },
+            React.createElement("div", { className: "login-bg-gradient" }),
+            [...Array(12)].map((_, i) => (React.createElement("div", { key: i, className: `login-particle login-particle--${i + 1}` })))),
+        React.createElement("div", { className: "login-card" },
+            React.createElement("div", { className: "login-header" },
+                React.createElement("a", { href: "/", className: "login-logo-link" }, logo || (React.createElement(React.Fragment, null,
+                    React.createElement("svg", { viewBox: "0 0 48 48", fill: "none", width: "28", height: "28" },
+                        React.createElement("path", { d: "M 8 40 L 24 8 L 40 40", stroke: "#1E3A5F", strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })),
+                    React.createElement("svg", { viewBox: "0 0 48 48", fill: "none", width: "48", height: "48" },
+                        React.createElement("rect", { x: "20", y: "2", width: "8", height: "16", rx: "4", fill: "#0EA5E9" }),
+                        React.createElement("rect", { x: "6", y: "16", width: "36", height: "6", rx: "3", fill: "#0EA5E9" }),
+                        React.createElement("ellipse", { cx: "24", cy: "36", rx: "18", ry: "12", fill: "#0EA5E9" }),
+                        React.createElement("ellipse", { cx: "17", cy: "36", rx: "4", ry: "6", fill: "#FFFFFF" }),
+                        React.createElement("ellipse", { cx: "31", cy: "36", rx: "4", ry: "6", fill: "#FFFFFF" })),
+                    React.createElement("svg", { viewBox: "0 0 48 48", fill: "none", width: "28", height: "28" },
+                        React.createElement("path", { d: "M 8 40 L 24 8 L 40 40", stroke: "#1E3A5F", strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }))))),
+                React.createElement("h1", { className: "login-title" }, "Welcome Back"),
+                React.createElement("p", { className: "login-subtitle" },
+                    appName,
+                    "\uC5D0 \uB85C\uADF8\uC778\uD558\uC138\uC694")),
+            error && (React.createElement("div", { className: "login-error" },
+                React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                    React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                    React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })),
+                error)),
+            onGoogleLogin && (React.createElement(React.Fragment, null,
+                React.createElement("button", { type: "button", className: "login-google", onClick: handleGoogleLogin, disabled: isGoogleLoading }, isGoogleLoading ? (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "login-spinner login-spinner--dark" }),
+                    "\uB85C\uADF8\uC778 \uC911...")) : (React.createElement(React.Fragment, null,
+                    React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24" },
+                        React.createElement("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
+                        React.createElement("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
+                        React.createElement("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
+                        React.createElement("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })),
+                    "Google\uB85C \uACC4\uC18D\uD558\uAE30"))),
+                React.createElement("div", { className: "login-divider" },
+                    React.createElement("span", null, "\uB610\uB294")))),
+            React.createElement("form", { className: "login-form", onSubmit: handleSubmit },
+                React.createElement("div", { className: `login-input-group ${focusedField === 'email' ? 'focused' : ''}` },
+                    React.createElement("label", { className: "login-label" }, "\uC774\uBA54\uC77C"),
+                    React.createElement("div", { className: "login-input-wrapper" },
+                        React.createElement("svg", { className: "login-input-icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                            React.createElement("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+                            React.createElement("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })),
+                        React.createElement("input", { type: "email", className: "login-input", value: email, onChange: (e) => setEmail(e.target.value), onFocus: () => setFocusedField('email'), onBlur: () => setFocusedField(null), placeholder: "name@example.com", required: true }))),
+                React.createElement("div", { className: `login-input-group ${focusedField === 'password' ? 'focused' : ''}` },
+                    React.createElement("label", { className: "login-label" }, "\uBE44\uBC00\uBC88\uD638"),
+                    React.createElement("div", { className: "login-input-wrapper" },
+                        React.createElement("svg", { className: "login-input-icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                            React.createElement("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+                            React.createElement("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })),
+                        React.createElement("input", { type: "password", className: "login-input", value: password, onChange: (e) => setPassword(e.target.value), onFocus: () => setFocusedField('password'), onBlur: () => setFocusedField(null), placeholder: "\uBE44\uBC00\uBC88\uD638\uB97C \uC785\uB825\uD558\uC138\uC694", required: true }))),
+                React.createElement("button", { type: "submit", className: "login-button", disabled: isSubmitting }, isSubmitting ? (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "login-spinner" }),
+                    "\uB85C\uADF8\uC778 \uC911...")) : (React.createElement(React.Fragment, null,
+                    "\uB85C\uADF8\uC778",
+                    React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("path", { d: "M5 12h14M12 5l7 7-7 7" })))))),
+            showTestAccount && (React.createElement("div", { className: "login-test-info" },
+                React.createElement("div", { className: "login-test-badge" },
+                    React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })),
+                    "\uD14C\uC2A4\uD2B8 \uACC4\uC815"),
+                React.createElement("span", { className: "login-test-credentials" }, "admin@test.com / 1234"))))));
 }
 export default LoginPage;

package/dist/components/remote/RemoteErrorBoundary.d.ts

@@ -0,0 +1,28 @@
+/**
+ * RemoteErrorBoundary
+ * Remote 앱 로드 실패 시 에러를 캡처하고 Fallback UI 표시
+ */
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+export interface RemoteErrorBoundaryProps {
+    /** 자식 요소 (Remote 앱) */
+    children: ReactNode;
+    /** Remote 앱 이름 (Fallback UI에 표시) */
+    remoteName: string;
+    /** 커스텀 Fallback 컴포넌트 */
+    fallback?: ReactNode;
+    /** 에러 발생 시 콜백 */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface RemoteErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class RemoteErrorBoundary extends Component<RemoteErrorBoundaryProps, RemoteErrorBoundaryState> {
+    constructor(props: RemoteErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): RemoteErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+}
+export default RemoteErrorBoundary;
+//# sourceMappingURL=RemoteErrorBoundary.d.ts.map

package/dist/components/remote/RemoteErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/remote/RemoteErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,MAAM,WAAW,wBAAwB;IACvC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,UAAU,wBAAwB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,qBAAa,mBAAoB,SAAQ,SAAS,CAChD,wBAAwB,EACxB,wBAAwB,CACzB;gBACa,KAAK,EAAE,wBAAwB;IAQ3C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,wBAAwB;IAOvE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAQpD,WAAW,aAET;IAEF,MAAM;CAsBP;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/remote/RemoteErrorBoundary.js

@@ -0,0 +1,44 @@
+/**
+ * RemoteErrorBoundary
+ * Remote 앱 로드 실패 시 에러를 캡처하고 Fallback UI 표시
+ */
+import React, { Component } from 'react';
+import { RemoteErrorFallback } from './RemoteErrorFallback';
+export class RemoteErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.handleRetry = () => {
+            this.setState({ hasError: false, error: null });
+        };
+        this.state = {
+            hasError: false,
+            error: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(`[RemoteErrorBoundary] ${this.props.remoteName} 로드 실패:`, error);
+        console.error('Error Info:', errorInfo);
+        // 에러 콜백 실행
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        const { hasError, error } = this.state;
+        const { children, remoteName, fallback } = this.props;
+        if (hasError) {
+            // 커스텀 Fallback이 있으면 사용
+            if (fallback) {
+                return fallback;
+            }
+            // 기본 Fallback UI
+            return (React.createElement(RemoteErrorFallback, { remoteName: remoteName, error: error, onRetry: this.handleRetry }));
+        }
+        return children;
+    }
+}
+export default RemoteErrorBoundary;

package/dist/components/remote/RemoteErrorFallback.d.ts

@@ -0,0 +1,16 @@
+/**
+ * RemoteErrorFallback
+ * Remote 앱 로드 실패 시 표시되는 Fallback UI
+ */
+import React from 'react';
+export interface RemoteErrorFallbackProps {
+    /** Remote 앱 이름 (예: "이력서", "블로그") */
+    remoteName: string;
+    /** 재시도 콜백 */
+    onRetry?: () => void;
+    /** 에러 메시지 (개발 환경에서만 표시) */
+    error?: Error | null;
+}
+export declare function RemoteErrorFallback({ remoteName, onRetry, error }: RemoteErrorFallbackProps): React.JSX.Element;
+export default RemoteErrorFallback;
+//# sourceMappingURL=RemoteErrorFallback.d.ts.map

package/dist/components/remote/RemoteErrorFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/remote/RemoteErrorFallback.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,wBAAwB;IACvC,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,UAAU,EACV,OAAO,EACP,KAAK,EACN,EAAE,wBAAwB,qBAgH1B;AAED,eAAe,mBAAmB,CAAC"}

package/dist/components/remote/RemoteErrorFallback.js

@@ -0,0 +1,76 @@
+/**
+ * RemoteErrorFallback
+ * Remote 앱 로드 실패 시 표시되는 Fallback UI
+ */
+import React from 'react';
+export function RemoteErrorFallback({ remoteName, onRetry, error }) {
+    const isDev = process.env.NODE_ENV === 'development';
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '48px 24px',
+            textAlign: 'center',
+            minHeight: '300px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            margin: '24px',
+        } },
+        React.createElement("div", { style: {
+                fontSize: '48px',
+                marginBottom: '16px',
+                opacity: 0.5,
+            } }, "\u26A0\uFE0F"),
+        React.createElement("h2", { style: {
+                margin: '0 0 8px 0',
+                fontSize: '20px',
+                fontWeight: 600,
+                color: '#343a40',
+            } },
+            remoteName,
+            " \uC571\uC744 \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4"),
+        React.createElement("p", { style: {
+                margin: '0 0 24px 0',
+                fontSize: '14px',
+                color: '#6c757d',
+                maxWidth: '400px',
+            } },
+            "\uC11C\uBE44\uC2A4\uC5D0 \uC77C\uC2DC\uC801\uC778 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.",
+            React.createElement("br", null),
+            "\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694."),
+        onRetry && (React.createElement("button", { onClick: onRetry, style: {
+                padding: '10px 24px',
+                fontSize: '14px',
+                fontWeight: 500,
+                color: '#fff',
+                backgroundColor: '#007bff',
+                border: 'none',
+                borderRadius: '6px',
+                cursor: 'pointer',
+                transition: 'background-color 0.2s',
+            }, onMouseOver: (e) => {
+                e.currentTarget.style.backgroundColor = '#0056b3';
+            }, onMouseOut: (e) => {
+                e.currentTarget.style.backgroundColor = '#007bff';
+            } }, "\uB2E4\uC2DC \uC2DC\uB3C4")),
+        isDev && error && (React.createElement("details", { style: {
+                marginTop: '24px',
+                padding: '12px',
+                backgroundColor: '#fff3cd',
+                borderRadius: '4px',
+                fontSize: '12px',
+                color: '#856404',
+                maxWidth: '500px',
+                textAlign: 'left',
+            } },
+            React.createElement("summary", { style: { cursor: 'pointer', fontWeight: 500 } }, "\uAC1C\uBC1C\uC790 \uC815\uBCF4 (\uAC1C\uBC1C \uD658\uACBD\uC5D0\uC11C\uB9CC \uD45C\uC2DC)"),
+            React.createElement("pre", { style: {
+                    marginTop: '8px',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-all',
+                } },
+                error.message,
+                error.stack && `\n\n${error.stack}`)))));
+}
+export default RemoteErrorFallback;

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

@@ -0,0 +1,8 @@
+/**
+ * Remote 관련 컴포넌트
+ */
+export { RemoteErrorFallback } from './RemoteErrorFallback';
+export type { RemoteErrorFallbackProps } from './RemoteErrorFallback';
+export { RemoteErrorBoundary } from './RemoteErrorBoundary';
+export type { RemoteErrorBoundaryProps } from './RemoteErrorBoundary';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/remote/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/remote/index.js

@@ -0,0 +1,5 @@
+/**
+ * Remote 관련 컴포넌트
+ */
+export { RemoteErrorFallback } from './RemoteErrorFallback';
+export { RemoteErrorBoundary } from './RemoteErrorBoundary';

package/dist/components/router/BrowserRouter.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom BrowserRouter - KOMCA 패턴
+ * history 객체를 받아서 사용
+ */
+import React from 'react';
+import type { BrowserHistory } from 'history';
+interface BrowserRouterProps {
+    history: BrowserHistory;
+    children: React.ReactNode;
+}
+export declare const BrowserRouter: React.FC<BrowserRouterProps>;
+export default BrowserRouter;
+//# sourceMappingURL=BrowserRouter.d.ts.map

package/dist/components/router/BrowserRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserRouter.d.ts","sourceRoot":"","sources":["../../../src/components/router/BrowserRouter.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,UAAU,kBAAkB;IACxB,OAAO,EAAE,cAAc,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmBtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/components/router/BrowserRouter.js

@@ -0,0 +1,17 @@
+/**
+ * Custom BrowserRouter - KOMCA 패턴
+ * history 객체를 받아서 사용
+ */
+import React, { useLayoutEffect, useState } from 'react';
+import { Router } from 'react-router-dom';
+export const BrowserRouter = ({ history, children }) => {
+    const [state, setState] = useState({
+        action: history.action,
+        location: history.location,
+    });
+    useLayoutEffect(() => {
+        return history.listen(setState);
+    }, [history]);
+    return (React.createElement(Router, { location: state.location, navigationType: state.action, navigator: history }, children));
+};
+export default BrowserRouter;

package/dist/components/router/RouteGuard.d.ts

@@ -0,0 +1,79 @@
+/**
+ * 라우트 가드 컴포넌트
+ * 인증/권한 기반 라우팅 보호
+ */
+import React from 'react';
+export interface RouteGuardProps {
+    children: React.ReactNode;
+}
+export interface PrivateRouteProps extends RouteGuardProps {
+    /** 미인증 시 리다이렉트 경로 */
+    redirectTo?: string;
+    /** 필요한 역할 (roles 중 하나라도 있으면 통과) */
+    roles?: string[];
+    /** 권한 없음 시 리다이렉트 경로 */
+    forbiddenRedirectTo?: string;
+    /** 로딩 컴포넌트 */
+    fallback?: React.ReactNode;
+}
+export interface PublicRouteProps extends RouteGuardProps {
+    /** 인증된 경우 리다이렉트 경로 */
+    redirectTo?: string;
+    /** 인증 여부와 관계없이 접근 허용 */
+    restricted?: boolean;
+}
+/**
+ * PrivateRoute - 인증된 사용자만 접근 가능
+ *
+ * @example
+ * <PrivateRoute redirectTo="/login">
+ *   <Dashboard />
+ * </PrivateRoute>
+ *
+ * @example
+ * <PrivateRoute roles={['admin']} forbiddenRedirectTo="/forbidden">
+ *   <AdminPanel />
+ * </PrivateRoute>
+ */
+export declare const PrivateRoute: React.FC<PrivateRouteProps>;
+/**
+ * PublicRoute - 비인증 사용자만 접근 가능 (로그인, 회원가입 등)
+ *
+ * @example
+ * <PublicRoute redirectTo="/dashboard">
+ *   <LoginPage />
+ * </PublicRoute>
+ *
+ * @example
+ * // restricted=false: 인증 여부와 관계없이 접근 가능
+ * <PublicRoute restricted={false}>
+ *   <AboutPage />
+ * </PublicRoute>
+ */
+export declare const PublicRoute: React.FC<PublicRouteProps>;
+/**
+ * RoleRoute - 특정 역할만 접근 가능
+ *
+ * @example
+ * <RoleRoute roles={['admin', 'manager']}>
+ *   <AdminDashboard />
+ * </RoleRoute>
+ */
+export declare const RoleRoute: React.FC<{
+    children: React.ReactNode;
+    roles: string[];
+    fallback?: React.ReactNode;
+    redirectTo?: string;
+}>;
+declare const _default: {
+    PrivateRoute: React.FC<PrivateRouteProps>;
+    PublicRoute: React.FC<PublicRouteProps>;
+    RoleRoute: React.FC<{
+        children: React.ReactNode;
+        roles: string[];
+        fallback?: React.ReactNode;
+        redirectTo?: string;
+    }>;
+};
+export default _default;
+//# sourceMappingURL=RouteGuard.d.ts.map

package/dist/components/router/RouteGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteGuard.d.ts","sourceRoot":"","sources":["../../../src/components/router/RouteGuard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,qBAAqB;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,uBAAuB;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkCpD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAmBA,CAAC;;;;;kBAvBU,KAAK,CAAC,SAAS;eAClB,MAAM,EAAE;mBACJ,KAAK,CAAC,SAAS;qBACb,MAAM;;;AAsBrB,wBAAwD"}

package/dist/components/router/RouteGuard.js

@@ -0,0 +1,86 @@
+/**
+ * 라우트 가드 컴포넌트
+ * 인증/권한 기반 라우팅 보호
+ */
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { selectIsAuthenticated, selectUser } from '../../store/app-store';
+/**
+ * PrivateRoute - 인증된 사용자만 접근 가능
+ *
+ * @example
+ * <PrivateRoute redirectTo="/login">
+ *   <Dashboard />
+ * </PrivateRoute>
+ *
+ * @example
+ * <PrivateRoute roles={['admin']} forbiddenRedirectTo="/forbidden">
+ *   <AdminPanel />
+ * </PrivateRoute>
+ */
+export const PrivateRoute = ({ children, redirectTo = '/login', roles, forbiddenRedirectTo = '/forbidden', fallback = null, }) => {
+    const location = useLocation();
+    const isAuthenticated = useSelector(selectIsAuthenticated);
+    const user = useSelector(selectUser);
+    // 인증되지 않은 경우
+    if (!isAuthenticated) {
+        // 현재 경로를 state로 전달하여 로그인 후 복귀 가능하게
+        return (React.createElement(Navigate, { to: redirectTo, state: { from: location.pathname + location.search }, replace: true }));
+    }
+    // 역할 기반 권한 체크
+    if (roles && roles.length > 0) {
+        const userRole = user?.role;
+        const hasRequiredRole = userRole && roles.includes(userRole);
+        if (!hasRequiredRole) {
+            return React.createElement(Navigate, { to: forbiddenRedirectTo, replace: true });
+        }
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+/**
+ * PublicRoute - 비인증 사용자만 접근 가능 (로그인, 회원가입 등)
+ *
+ * @example
+ * <PublicRoute redirectTo="/dashboard">
+ *   <LoginPage />
+ * </PublicRoute>
+ *
+ * @example
+ * // restricted=false: 인증 여부와 관계없이 접근 가능
+ * <PublicRoute restricted={false}>
+ *   <AboutPage />
+ * </PublicRoute>
+ */
+export const PublicRoute = ({ children, redirectTo = '/', restricted = true, }) => {
+    const location = useLocation();
+    const isAuthenticated = useSelector(selectIsAuthenticated);
+    // restricted가 true이고 인증된 경우 리다이렉트
+    if (restricted && isAuthenticated) {
+        // 이전 페이지로 복귀하거나 기본 경로로 이동
+        const from = location.state?.from || redirectTo;
+        return React.createElement(Navigate, { to: from, replace: true });
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+/**
+ * RoleRoute - 특정 역할만 접근 가능
+ *
+ * @example
+ * <RoleRoute roles={['admin', 'manager']}>
+ *   <AdminDashboard />
+ * </RoleRoute>
+ */
+export const RoleRoute = ({ children, roles, fallback = null, redirectTo, }) => {
+    const user = useSelector(selectUser);
+    const userRole = user?.role;
+    const hasRole = userRole && roles.includes(userRole);
+    if (!hasRole) {
+        if (redirectTo) {
+            return React.createElement(Navigate, { to: redirectTo, replace: true });
+        }
+        return React.createElement(React.Fragment, null, fallback);
+    }
+    return React.createElement(React.Fragment, null, children);
+};
+export default { PrivateRoute, PublicRoute, RoleRoute };

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

@@ -0,0 +1,4 @@
+export * from './BrowserRouter';
+export { PrivateRoute, PublicRoute, RoleRoute } from './RouteGuard';
+export type { PrivateRouteProps, PublicRouteProps, RouteGuardProps } from './RouteGuard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/router/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/router/index.js

@@ -0,0 +1,2 @@
+export * from './BrowserRouter';
+export { PrivateRoute, PublicRoute, RoleRoute } from './RouteGuard';