@sonhoseong/mfa-lib 1.2.6 → 1.3.0

package/dist/components/index.d.ts

@@ -5,4 +5,5 @@ export * from './error';
 export * from './modal';
 export * from './navigation';
 export * from './logo';
+export * from './page';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC;AAG7B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC"}

package/dist/components/index.js

@@ -12,3 +12,5 @@ export * from './modal';
 export * from './navigation';
 // Logo
 export * from './logo';
+// Page (LoginPage 등)
+export * from './page';

package/dist/components/page/LoginPage.css

@@ -0,0 +1,414 @@
+/* ============================================
+   LoginPage - KOMCA 패턴
+   공통 로그인 페이지 스타일
+   ============================================ */
+
+.login-page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 40px 24px;
+    background: var(--color-bg, #FFFFFF);
+    overflow: hidden;
+}
+
+/* ===== Background ===== */
+.login-bg {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.login-bg-gradient {
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(ellipse at 30% 20%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
+        radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 50%, rgba(30, 58, 95, 0.03) 0%, transparent 60%);
+}
+
+/* Floating Particles */
+.login-particle {
+    position: absolute;
+    background: #0EA5E9;
+    border-radius: 50%;
+    box-shadow: 0 0 6px rgba(14, 165, 233, 0.5);
+    animation: floatParticle linear infinite;
+}
+
+.login-particle--1 { width: 6px; height: 6px; left: 10%; top: 20%; animation-duration: 20s; }
+.login-particle--2 { width: 10px; height: 10px; left: 20%; top: 60%; animation-duration: 25s; animation-delay: -5s; background: #3B82F6; }
+.login-particle--3 { width: 5px; height: 5px; left: 80%; top: 30%; animation-duration: 18s; animation-delay: -10s; }
+.login-particle--4 { width: 8px; height: 8px; left: 70%; top: 70%; animation-duration: 22s; animation-delay: -3s; background: #1E3A5F; }
+.login-particle--5 { width: 7px; height: 7px; left: 40%; top: 10%; animation-duration: 28s; animation-delay: -8s; }
+.login-particle--6 { width: 12px; height: 12px; left: 90%; top: 50%; animation-duration: 26s; animation-delay: -12s; }
+.login-particle--7 { width: 5px; height: 5px; left: 5%; top: 80%; animation-duration: 21s; animation-delay: -15s; }
+.login-particle--8 { width: 9px; height: 9px; left: 55%; top: 85%; animation-duration: 19s; animation-delay: -7s; background: #3B82F6; }
+.login-particle--9 { width: 6px; height: 6px; left: 30%; top: 40%; animation-duration: 24s; animation-delay: -18s; }
+.login-particle--10 { width: 10px; height: 10px; left: 85%; top: 15%; animation-duration: 20s; animation-delay: -2s; }
+.login-particle--11 { width: 5px; height: 5px; left: 15%; top: 45%; animation-duration: 27s; animation-delay: -20s; }
+.login-particle--12 { width: 8px; height: 8px; left: 60%; top: 25%; animation-duration: 23s; animation-delay: -11s; background: #1E3A5F; }
+
+@keyframes floatParticle {
+    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
+    5% { opacity: 1; }
+    50% { transform: translate(80px, -120px) rotate(180deg); opacity: 0.8; }
+    95% { opacity: 1; }
+    100% { transform: translate(160px, -240px) rotate(360deg); opacity: 0; }
+}
+
+/* ===== Logo ===== */
+.login-logo-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 24px;
+    padding: 12px 20px;
+    background: transparent;
+    border-radius: 9999px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    animation: logoPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
+    opacity: 0;
+    transform: scale(0.8);
+}
+
+@keyframes logoPop {
+    to { opacity: 1; transform: scale(1); }
+}
+
+.login-logo-link:hover {
+    transform: translateY(-4px) scale(1.05);
+}
+
+/* ===== Card ===== */
+.login-card {
+    position: relative;
+    width: 100%;
+    max-width: 420px;
+    background: white;
+    border-radius: 24px;
+    padding: 48px 40px;
+    box-shadow: 0 4px 24px rgba(30, 58, 95, 0.06), 0 0 0 1px rgba(30, 58, 95, 0.04);
+    animation: cardAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
+    opacity: 0;
+    transform: translateY(30px) scale(0.98);
+    z-index: 5;
+}
+
+@keyframes cardAppear {
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ===== Header ===== */
+.login-header {
+    text-align: center;
+    margin-bottom: 36px;
+}
+
+.login-title {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--color-primary, #1E3A5F);
+    margin: 0 0 8px;
+    letter-spacing: -0.02em;
+    animation: fadeUp 0.5s ease 0.4s forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.login-subtitle {
+    font-size: 15px;
+    color: var(--color-text-secondary, #64748B);
+    margin: 0;
+    animation: fadeUp 0.5s ease 0.45s forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+@keyframes fadeUp {
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===== Google Login ===== */
+.login-google {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    height: 52px;
+    font-family: inherit;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text, #1E3A5F);
+    background: white;
+    border: 1.5px solid var(--color-border, #E2E8F0);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    animation: fadeUp 0.5s ease 0.5s forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.login-google:hover {
+    background: var(--color-bg-secondary, #F8FAFC);
+    border-color: #cbd5e1;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
+}
+
+.login-google:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* ===== Divider ===== */
+.login-divider {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin: 24px 0;
+    animation: fadeUp 0.5s ease 0.55s forwards;
+    opacity: 0;
+}
+
+.login-divider::before,
+.login-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--color-border, #E2E8F0);
+}
+
+.login-divider span {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-muted, #94A3B8);
+}
+
+/* ===== Form ===== */
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.login-input-group {
+    animation: fadeUp 0.5s ease forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.login-input-group:nth-child(1) { animation-delay: 0.5s; }
+.login-input-group:nth-child(2) { animation-delay: 0.55s; }
+.login-input-group:nth-child(3) { animation-delay: 0.6s; }
+
+.login-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-secondary, #64748B);
+    margin-bottom: 8px;
+    transition: color 0.2s ease;
+}
+
+.login-input-group.focused .login-label {
+    color: var(--color-accent, #0EA5E9);
+}
+
+.login-input-wrapper {
+    position: relative;
+}
+
+.login-input-icon {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-muted, #94A3B8);
+    transition: color 0.2s ease;
+    pointer-events: none;
+}
+
+.login-input-group.focused .login-input-icon {
+    color: var(--color-accent, #0EA5E9);
+}
+
+.login-input {
+    width: 100%;
+    height: 52px;
+    padding: 0 16px 0 48px;
+    font-family: inherit;
+    font-size: 15px;
+    color: var(--color-text, #1E3A5F);
+    background: var(--color-bg-secondary, #F8FAFC);
+    border: 1.5px solid var(--color-border, #E2E8F0);
+    border-radius: 12px;
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.login-input::placeholder {
+    color: var(--color-text-muted, #94A3B8);
+}
+
+.login-input:hover {
+    border-color: #cbd5e1;
+}
+
+.login-input:focus {
+    background: white;
+    border-color: var(--color-accent, #0EA5E9);
+    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
+}
+
+/* ===== Error ===== */
+.login-error {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 16px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 12px;
+    color: #dc2626;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 16px;
+    animation: shake 0.4s ease, fadeUp 0.3s ease;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20%, 60% { transform: translateX(-4px); }
+    40%, 80% { transform: translateX(4px); }
+}
+
+/* ===== Button ===== */
+.login-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: 52px;
+    margin-top: 8px;
+    font-family: inherit;
+    font-size: 16px;
+    font-weight: 600;
+    color: white;
+    background: var(--color-primary, #1E3A5F);
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    animation: fadeUp 0.5s ease 0.65s forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.login-button:hover:not(:disabled) {
+    background: var(--color-accent, #0EA5E9);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
+}
+
+.login-button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.login-button svg {
+    transition: transform 0.2s ease;
+}
+
+.login-button:hover:not(:disabled) svg {
+    transform: translateX(4px);
+}
+
+/* ===== Spinner ===== */
+.login-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+}
+
+.login-spinner--dark {
+    border-color: rgba(30, 58, 95, 0.2);
+    border-top-color: var(--color-primary, #1E3A5F);
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ===== Test Account ===== */
+.login-test-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    margin-top: 28px;
+    padding-top: 24px;
+    border-top: 1px solid var(--color-border, #E2E8F0);
+    animation: fadeUp 0.5s ease 0.7s forwards;
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.login-test-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: linear-gradient(135deg, var(--color-primary, #1E3A5F), var(--color-accent, #0EA5E9));
+    border-radius: 9999px;
+    font-size: 11px;
+    font-weight: 600;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.login-test-credentials {
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 14px;
+    color: var(--color-text-secondary, #64748B);
+    background: var(--color-bg-secondary, #F8FAFC);
+    padding: 8px 16px;
+    border-radius: 8px;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 480px) {
+    .login-page {
+        padding: 24px 16px;
+    }
+
+    .login-card {
+        padding: 36px 24px;
+        border-radius: 20px;
+    }
+
+    .login-title {
+        font-size: 24px;
+    }
+
+    .login-input,
+    .login-button,
+    .login-google {
+        height: 48px;
+    }
+}

package/dist/components/page/LoginPage.d.ts

@@ -0,0 +1,29 @@
+/**
+ * LoginPage - KOMCA 패턴
+ *
+ * 공통 로그인 페이지 컴포넌트
+ * Host/Remote 모두에서 사용 가능
+ */
+import React from 'react';
+import { User } from '../../types';
+import './LoginPage.css';
+export interface LoginPageProps {
+    /** 로그인 성공 후 이동할 경로 (기본: /) */
+    redirectPath?: string;
+    /** 로그인 성공 콜백 */
+    onLoginSuccess?: (user: User) => void;
+    /** 앱 이름 (로고 옆에 표시) */
+    appName?: string;
+    /** 커스텀 로고 컴포넌트 */
+    logo?: React.ReactNode;
+    /** Google 로그인 핸들러 (Firebase 등) */
+    onGoogleLogin?: () => Promise<{
+        token: string;
+        user: User;
+    }>;
+    /** 테스트 계정 표시 여부 */
+    showTestAccount?: boolean;
+}
+export declare function LoginPage({ redirectPath, onLoginSuccess, appName, logo, onGoogleLogin, showTestAccount, }: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export default LoginPage;
+//# sourceMappingURL=LoginPage.d.ts.map

package/dist/components/page/LoginPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPage.d.ts","sourceRoot":"","sources":["../../../src/components/page/LoginPage.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc;IAC3B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB;IAChB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,sBAAsB;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IAC7D,mBAAmB;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,SAAS,CAAC,EACtB,YAAkB,EAClB,cAAc,EACd,OAAe,EACf,IAAI,EACJ,aAAa,EACb,eAAsB,GACzB,EAAE,cAAc,2CAgOhB;AAED,eAAe,SAAS,CAAC"}

package/dist/components/page/LoginPage.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * LoginPage - KOMCA 패턴
+ *
+ * 공통 로그인 페이지 컴포넌트
+ * Host/Remote 모두에서 사용 가능
+ */
+import { useState, useCallback } from 'react';
+import { getStore, setAccessToken, setUser } from '../../store/app-store';
+import './LoginPage.css';
+export function LoginPage({ redirectPath = '/', onLoginSuccess, appName = 'MFA', logo, onGoogleLogin, showTestAccount = true, }) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+    const [focusedField, setFocusedField] = useState(null);
+    const store = getStore();
+    const handleGoogleLogin = useCallback(async () => {
+        if (!onGoogleLogin) {
+            setError('Google 로그인이 설정되지 않았습니다.');
+            return;
+        }
+        setError('');
+        setIsGoogleLoading(true);
+        try {
+            const { token, user } = await onGoogleLogin();
+            store.dispatch(setAccessToken(token));
+            store.dispatch(setUser(user));
+            onLoginSuccess?.(user);
+            // 페이지 이동
+            window.location.href = redirectPath;
+        }
+        catch (err) {
+            if (err?.code === 'auth/popup-closed-by-user') {
+                return;
+            }
+            setError('Google 로그인에 실패했습니다.');
+        }
+        finally {
+            setIsGoogleLoading(false);
+        }
+    }, [onGoogleLogin, 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;
+            }
+            else {
+                setError('이메일 또는 비밀번호가 올바르지 않습니다.');
+            }
+        }
+        catch (err) {
+            setError('로그인 중 오류가 발생했습니다.');
+        }
+        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" })] }))] })] }));
+}
+export default LoginPage;

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

@@ -0,0 +1,2 @@
+export * from './LoginPage';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/page/index.js

@@ -0,0 +1 @@
+export * from './LoginPage';

package/dist/store/app-store.d.ts

@@ -0,0 +1,146 @@
+/**
+ * App Store - KOMCA 패턴
+ *
+ * Host/Remote 모두에서 사용할 수 있는 Store 설정
+ * - Host: 자체 store 생성 후 window.__REDUX_STORE__에 노출
+ * - Remote (standalone): 자체 store 생성
+ * - Remote (in Host): window.__REDUX_STORE__ 사용
+ */
+import { configureStore, PayloadAction, Reducer } from '@reduxjs/toolkit';
+import { User, AppState } from '../types';
+export declare const appSlice: import("@reduxjs/toolkit").Slice<AppState, {
+    setAccessToken: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }, action: PayloadAction<string>) => void;
+    setUser: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }, action: PayloadAction<User | null>) => void;
+    setLoading: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }, action: PayloadAction<boolean>) => void;
+    setGlobalLoadingTitle: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }, action: PayloadAction<string>) => void;
+    setService: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }, action: PayloadAction<string>) => void;
+    setSelectedGnb: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }, action: PayloadAction<string>) => void;
+    logout: (state: {
+        accessToken: string;
+        user: {
+            id: string;
+            name: string;
+            email: string;
+            role?: "admin" | "user" | undefined;
+        } | null;
+        isLoading: boolean;
+        globalLoadingTitle: string;
+        service: string;
+        selectedGnb: string;
+    }) => void;
+}, "app", "app", import("@reduxjs/toolkit").SliceSelectors<AppState>>;
+export declare const setAccessToken: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/setAccessToken">, setUser: import("@reduxjs/toolkit").ActionCreatorWithPayload<User | null, "app/setUser">, setLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "app/setLoading">, setGlobalLoadingTitle: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/setGlobalLoadingTitle">, setService: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/setService">, setSelectedGnb: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "app/setSelectedGnb">, logout: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"app/logout">;
+export declare const selectAccessToken: (state: {
+    app: AppState;
+}) => string;
+export declare const selectUser: (state: {
+    app: AppState;
+}) => User | null;
+export declare const selectIsLoading: (state: {
+    app: AppState;
+}) => boolean;
+export declare const selectIsAuthenticated: (state: {
+    app: AppState;
+}) => boolean;
+/**
+ * App Store 생성
+ * Host 또는 Remote 단독 실행 시 호출
+ */
+export declare const createAppStore: () => import("@reduxjs/toolkit").EnhancedStore<{
+    app: AppState;
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        app: AppState;
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
+/**
+ * Store 가져오기
+ * - Host App: 자신의 store 반환
+ * - Remote (standalone): 자신의 store 반환
+ * - Remote (in Host): window.__REDUX_STORE__ 반환
+ */
+export declare const getStore: () => import("../types").HostStore | import("redux").Store<unknown, import("redux").Action, unknown>;
+/**
+ * 동적 Reducer 주입
+ */
+export declare const injectReducer: (key: string, reducer: Reducer) => void;
+/**
+ * Store를 전역에 노출 (Host App용)
+ */
+export declare const exposeStore: (store: ReturnType<typeof configureStore>) => void;
+export type AppStore = ReturnType<typeof createAppStore>;
+export type RootState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];
+//# sourceMappingURL=app-store.d.ts.map

package/dist/store/app-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-store.d.ts","sourceRoot":"","sources":["../../src/store/app-store.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,cAAc,EAAgC,aAAa,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAExG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAe1C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;eAImB,aAAa,CAAC,MAAM,CAAC;;;;;;;;;;;;;eAK5B,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC;;;;;;;;;;;;;eAKvB,aAAa,CAAC,OAAO,CAAC;;;;;;;;;;;;;eAGX,aAAa,CAAC,MAAM,CAAC;;;;;;;;;;;;;eAGhC,aAAa,CAAC,MAAM,CAAC;;;;;;;;;;;;;eAGjB,aAAa,CAAC,MAAM,CAAC;;;;;;;;;;;;;;qEAS3D,CAAC;AAEH,eAAO,MACH,cAAc,qFACd,OAAO,mFACP,UAAU,kFACV,qBAAqB,4FACrB,UAAU,iFACV,cAAc,qFACd,MAAM,sEACU,CAAC;AAGrB,eAAO,MAAM,iBAAiB,GAAI,OAAO;IAAE,GAAG,EAAE,QAAQ,CAAA;CAAE,WAA0B,CAAC;AACrF,eAAO,MAAM,UAAU,GAAI,OAAO;IAAE,GAAG,EAAE,QAAQ,CAAA;CAAE,gBAAmB,CAAC;AACvE,eAAO,MAAM,eAAe,GAAI,OAAO;IAAE,GAAG,EAAE,QAAQ,CAAA;CAAE,YAAwB,CAAC;AACjF,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAAE,GAAG,EAAE,QAAQ,CAAA;CAAE,YAA4B,CAAC;AAuB3F;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;oCAmB1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,sGAkBpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,SAAS,OAAO,SAU1D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,UAAU,CAAC,OAAO,cAAc,CAAC,SAGnE,CAAC;AAGF,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC"}

package/dist/store/app-store.js

@@ -0,0 +1,140 @@
+/**
+ * App Store - KOMCA 패턴
+ *
+ * Host/Remote 모두에서 사용할 수 있는 Store 설정
+ * - Host: 자체 store 생성 후 window.__REDUX_STORE__에 노출
+ * - Remote (standalone): 자체 store 생성
+ * - Remote (in Host): window.__REDUX_STORE__ 사용
+ */
+import { configureStore, combineReducers, createSlice } from '@reduxjs/toolkit';
+import { storage } from '../utils/storage';
+// ============================================
+// App Slice (인증 상태 관리)
+// ============================================
+const initialAppState = {
+    accessToken: '',
+    user: null,
+    isLoading: false,
+    globalLoadingTitle: '',
+    service: '',
+    selectedGnb: '',
+};
+export const appSlice = createSlice({
+    name: 'app',
+    initialState: initialAppState,
+    reducers: {
+        setAccessToken: (state, action) => {
+            state.accessToken = action.payload;
+            // localStorage에도 저장
+            storage.setAccessToken(action.payload);
+        },
+        setUser: (state, action) => {
+            state.user = action.payload;
+            // localStorage에도 저장
+            storage.setUser(action.payload);
+        },
+        setLoading: (state, action) => {
+            state.isLoading = action.payload;
+        },
+        setGlobalLoadingTitle: (state, action) => {
+            state.globalLoadingTitle = action.payload;
+        },
+        setService: (state, action) => {
+            state.service = action.payload;
+        },
+        setSelectedGnb: (state, action) => {
+            state.selectedGnb = action.payload;
+        },
+        logout: (state) => {
+            state.accessToken = '';
+            state.user = null;
+            storage.clearAuth();
+        },
+    },
+});
+export const { setAccessToken, setUser, setLoading, setGlobalLoadingTitle, setService, setSelectedGnb, logout, } = appSlice.actions;
+// Selectors
+export const selectAccessToken = (state) => state.app.accessToken;
+export const selectUser = (state) => state.app.user;
+export const selectIsLoading = (state) => state.app.isLoading;
+export const selectIsAuthenticated = (state) => !!state.app.accessToken;
+// ============================================
+// Store 생성
+// ============================================
+// 동적 Reducer 저장소
+let dynamicReducers = {};
+// 기본 Reducer
+const staticReducers = {
+    app: appSlice.reducer,
+};
+// Root Reducer 생성
+const createRootReducer = () => combineReducers({
+    ...staticReducers,
+    ...dynamicReducers,
+});
+// Store 인스턴스 (단독 실행용)
+let storeInstance = null;
+/**
+ * App Store 생성
+ * Host 또는 Remote 단독 실행 시 호출
+ */
+export const createAppStore = () => {
+    const store = configureStore({
+        reducer: createRootReducer(),
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+            serializableCheck: false,
+        }),
+        // localStorage에서 초기 상태 복원
+        preloadedState: {
+            app: {
+                ...initialAppState,
+                accessToken: storage.getAccessToken(),
+                user: storage.getUser(),
+            },
+        },
+    });
+    storeInstance = store;
+    return store;
+};
+/**
+ * Store 가져오기
+ * - Host App: 자신의 store 반환
+ * - Remote (standalone): 자신의 store 반환
+ * - Remote (in Host): window.__REDUX_STORE__ 반환
+ */
+export const getStore = () => {
+    // Host App인 경우 window.__REDUX_STORE__ 사용
+    if (storage.isHostApp() && window.__REDUX_STORE__) {
+        return window.__REDUX_STORE__;
+    }
+    // Remote가 Host 내에서 실행중인 경우
+    if (window.__REDUX_STORE__) {
+        return window.__REDUX_STORE__;
+    }
+    // 단독 실행 (store가 이미 생성되어 있으면 반환)
+    if (storeInstance) {
+        return storeInstance;
+    }
+    // 아직 store가 없으면 생성
+    return createAppStore();
+};
+/**
+ * 동적 Reducer 주입
+ */
+export const injectReducer = (key, reducer) => {
+    if (dynamicReducers[key]) {
+        return;
+    }
+    dynamicReducers[key] = reducer;
+    const store = getStore();
+    if (store && 'replaceReducer' in store) {
+        store.replaceReducer(createRootReducer());
+    }
+};
+/**
+ * Store를 전역에 노출 (Host App용)
+ */
+export const exposeStore = (store) => {
+    storage.setHostApp();
+    window.__REDUX_STORE__ = store;
+};

package/dist/store/index.d.ts

@@ -1,2 +1,3 @@
 export * from './store-access';
+export * from './app-store';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}

package/dist/store/index.js

@@ -1 +1,2 @@
 export * from './store-access';
+export * from './app-store';

package/dist/utils/storage.d.ts

@@ -14,6 +14,7 @@ export declare const STORAGE_KEYS: {
  */
 export declare const storage: {
     setHostApp: () => void;
+    removeHostApp: () => void;
     isHostApp: () => boolean;
     getAccessToken: () => string;
     setAccessToken: (token: string) => void;

package/dist/utils/storage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../src/utils/storage.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY;;;;;CAKxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO;;;0BAWE,MAAM;4BAIF,MAAM;mBASjB,IAAI,GAAG,IAAI;oBASR,IAAI,GAAG,IAAI;yBASR,UAAU,EAAE;0BAST,UAAU,EAAE;;;CAiBnC,CAAC"}
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../src/utils/storage.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY;;;;;CAKxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO;;;;0BAeE,MAAM;4BAIF,MAAM;mBASjB,IAAI,GAAG,IAAI;oBASR,IAAI,GAAG,IAAI;yBASR,UAAU,EAAE;0BAST,UAAU,EAAE;;;CAiBnC,CAAC"}

package/dist/utils/storage.js

@@ -17,6 +17,9 @@ export const storage = {
     setHostApp: () => {
         sessionStorage.setItem(STORAGE_KEYS.IS_HOST_APP, 'true');
     },
+    removeHostApp: () => {
+        sessionStorage.removeItem(STORAGE_KEYS.IS_HOST_APP);
+    },
     isHostApp: () => {
         return sessionStorage.getItem(STORAGE_KEYS.IS_HOST_APP) === 'true';
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonhoseong/mfa-lib",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "MFA 공통 라이브러리 - KOMCA 패턴",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",