@sonhoseong/mfa-lib 1.3.0 → 1.3.2

package/dist/components/navigation/AppSidebar.css

@@ -0,0 +1,356 @@
+/* ============================================
+   AppSidebar - KOMCA 패턴
+   사이드바 네비게이션 스타일
+   ============================================ */
+
+.app-sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 260px;
+    height: 100vh;
+    background: #ffffff;
+    border-right: 1px solid var(--color-border, #E2E8F0);
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    transition: width 0.3s ease, transform 0.3s ease;
+}
+
+/* Collapsed State */
+.app-sidebar.collapsed {
+    width: 72px;
+}
+
+/* Toggle Button (outside sidebar) */
+.sidebar-toggle {
+    position: fixed;
+    top: 16px;
+    left: 268px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+    border: 1px solid var(--color-border, #E2E8F0);
+    border-radius: 8px;
+    cursor: pointer;
+    z-index: 101;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.sidebar-toggle:hover {
+    background: var(--color-bg-secondary, #F8FAFC);
+    border-color: var(--color-accent, #0EA5E9);
+    color: var(--color-accent, #0EA5E9);
+}
+
+.sidebar-toggle.collapsed {
+    left: 80px;
+}
+
+.sidebar-toggle svg {
+    color: var(--color-text-secondary, #64748B);
+    transition: color 0.2s ease;
+}
+
+.sidebar-toggle:hover svg {
+    color: var(--color-accent, #0EA5E9);
+}
+
+/* Sidebar Header */
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--color-border, #E2E8F0);
+    transition: padding 0.3s ease;
+}
+
+.app-sidebar.collapsed .sidebar-header {
+    padding: 16px 12px;
+}
+
+.sidebar-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    background: transparent;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background 0.2s ease, padding 0.3s ease, justify-content 0.3s ease;
+    width: 100%;
+}
+
+.app-sidebar.collapsed .sidebar-logo {
+    padding: 8px;
+    justify-content: center;
+}
+
+.sidebar-logo:hover {
+    background: var(--color-bg-secondary, #F8FAFC);
+}
+
+.sidebar-app-name {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-primary, #1E3A5F);
+    white-space: nowrap;
+    overflow: hidden;
+    transition: opacity 0.2s ease, width 0.3s ease;
+}
+
+/* Sidebar Navigation */
+.sidebar-nav {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 12px;
+    transition: padding 0.3s ease;
+}
+
+.app-sidebar.collapsed .sidebar-nav {
+    padding: 16px 8px;
+}
+
+.sidebar-menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar-menu-item {
+    margin-bottom: 4px;
+}
+
+.sidebar-menu-btn {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 16px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-secondary, #64748B);
+    background: transparent;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+}
+
+.app-sidebar.collapsed .sidebar-menu-btn {
+    padding: 12px;
+    justify-content: center;
+}
+
+.sidebar-menu-btn:hover {
+    background: var(--color-bg-secondary, #F8FAFC);
+    color: var(--color-primary, #1E3A5F);
+}
+
+.sidebar-menu-btn.active {
+    background: rgba(14, 165, 233, 0.1);
+    color: var(--color-accent, #0EA5E9);
+}
+
+.sidebar-menu-btn.active .sidebar-menu-icon {
+    color: var(--color-accent, #0EA5E9);
+}
+
+.sidebar-menu-btn.child {
+    padding-left: 48px;
+    font-size: 13px;
+}
+
+.sidebar-menu-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-muted, #94A3B8);
+    transition: color 0.2s ease;
+}
+
+.sidebar-menu-btn:hover .sidebar-menu-icon {
+    color: var(--color-primary, #1E3A5F);
+}
+
+.sidebar-menu-title {
+    flex: 1;
+}
+
+.sidebar-menu-arrow {
+    color: var(--color-text-muted, #94A3B8);
+    transition: transform 0.2s ease;
+}
+
+.sidebar-menu-arrow.expanded {
+    transform: rotate(90deg);
+}
+
+/* Submenu */
+.sidebar-submenu {
+    list-style: none;
+    margin: 4px 0 0 0;
+    padding: 0;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+    padding: 16px;
+    border-top: 1px solid var(--color-border, #E2E8F0);
+    transition: padding 0.3s ease;
+}
+
+.app-sidebar.collapsed .sidebar-footer {
+    padding: 12px 8px;
+}
+
+.sidebar-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px;
+    background: var(--color-bg-secondary, #F8FAFC);
+    border-radius: 12px;
+    transition: justify-content 0.3s ease;
+}
+
+.sidebar-user.collapsed {
+    justify-content: center;
+    padding: 8px;
+}
+
+.sidebar-user-avatar {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--color-primary, #1E3A5F), var(--color-accent, #0EA5E9));
+    color: white;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 10px;
+    flex-shrink: 0;
+}
+
+.sidebar-user-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-user-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-primary, #1E3A5F);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sidebar-user-email {
+    font-size: 12px;
+    color: var(--color-text-muted, #94A3B8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sidebar-logout-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: var(--color-text-muted, #94A3B8);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.sidebar-logout-btn:hover {
+    background: #FEE2E2;
+    color: #DC2626;
+}
+
+.sidebar-login-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 12px;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+    background: var(--color-primary, #1E3A5F);
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.sidebar-login-btn:hover {
+    background: var(--color-accent, #0EA5E9);
+}
+
+.sidebar-login-btn.collapsed {
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 12px;
+}
+
+/* Layout with Sidebar */
+.has-sidebar {
+    margin-left: 260px;
+    transition: margin-left 0.3s ease;
+}
+
+.has-sidebar.collapsed {
+    margin-left: 72px;
+}
+
+.has-sidebar .main-content {
+    min-height: 100vh;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .app-sidebar {
+        transform: translateX(-100%);
+    }
+
+    .app-sidebar.open {
+        transform: translateX(0);
+    }
+
+    .has-sidebar {
+        margin-left: 0;
+    }
+
+    .has-sidebar.collapsed {
+        margin-left: 0;
+    }
+
+    .sidebar-toggle {
+        left: 16px;
+        top: 16px;
+    }
+
+    .sidebar-toggle.collapsed {
+        left: 16px;
+    }
+}

package/dist/components/navigation/AppSidebar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * AppSidebar - KOMCA 패턴
+ *
+ * 사이드바 네비게이션 컴포넌트
+ * Remote 앱 단독 실행 시 사용
+ */
+import React from 'react';
+export interface SidebarMenuItem {
+    id: string;
+    title: string;
+    path?: string;
+    icon?: React.ReactNode;
+    children?: SidebarMenuItem[];
+}
+export interface AppSidebarProps {
+    /** 앱 이름 */
+    appName?: string;
+    /** 로그인 여부 */
+    isAuthenticated?: boolean;
+    /** 사용자 이름 */
+    userName?: string;
+    /** 사용자 이메일 */
+    userEmail?: string;
+    /** 메뉴 아이템 */
+    menuItems?: SidebarMenuItem[];
+    /** 로그아웃 핸들러 */
+    onLogout?: () => void;
+    /** 네비게이션 핸들러 */
+    onNavigate?: (path: string) => void;
+    /** 현재 경로 */
+    currentPath?: string;
+    /** 커스텀 로고 */
+    logo?: React.ReactNode;
+    /** 접힌 상태 (외부 제어) */
+    collapsed?: boolean;
+    /** 접힘 상태 변경 콜백 */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export declare function AppSidebar({ appName, isAuthenticated, userName, userEmail, menuItems, onLogout, onNavigate, currentPath, logo, collapsed: controlledCollapsed, onCollapsedChange, }: AppSidebarProps): import("react/jsx-runtime").JSX.Element;
+export default AppSidebar;
+//# sourceMappingURL=AppSidebar.d.ts.map

package/dist/components/navigation/AppSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/AppSidebar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,eAAe;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC5B,WAAW;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa;IACb,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,eAAe;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,UAAU,CAAC,EACvB,OAAe,EACf,eAAuB,EACvB,QAAQ,EACR,SAAS,EACT,SAAc,EACd,QAAQ,EACR,UAAU,EACV,WAAiB,EACjB,IAAI,EACJ,SAAS,EAAE,mBAAmB,EAC9B,iBAAiB,GACpB,EAAE,eAAe,2CA4KjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/navigation/AppSidebar.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AppSidebar - KOMCA 패턴
+ *
+ * 사이드바 네비게이션 컴포넌트
+ * Remote 앱 단독 실행 시 사용
+ */
+import { useState, useCallback } from 'react';
+export function AppSidebar({ appName = 'MFA', isAuthenticated = false, userName, userEmail, menuItems = [], onLogout, onNavigate, currentPath = '/', logo, collapsed: controlledCollapsed, onCollapsedChange, }) {
+    const [expandedMenus, setExpandedMenus] = useState(new Set());
+    const [internalCollapsed, setInternalCollapsed] = useState(false);
+    // 외부 제어 또는 내부 상태 사용
+    const collapsed = controlledCollapsed ?? internalCollapsed;
+    const toggleCollapsed = useCallback(() => {
+        const newValue = !collapsed;
+        setInternalCollapsed(newValue);
+        onCollapsedChange?.(newValue);
+    }, [collapsed, onCollapsedChange]);
+    const toggleMenu = useCallback((menuId) => {
+        setExpandedMenus(prev => {
+            const next = new Set(prev);
+            if (next.has(menuId)) {
+                next.delete(menuId);
+            }
+            else {
+                next.add(menuId);
+            }
+            return next;
+        });
+    }, []);
+    const handleNavigate = useCallback((path) => {
+        onNavigate?.(path);
+    }, [onNavigate]);
+    const renderMenuItem = (item, depth = 0) => {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = expandedMenus.has(item.id);
+        const isActive = item.path === currentPath;
+        return (_jsxs("li", { className: "sidebar-menu-item", children: [_jsxs("button", { className: `sidebar-menu-btn ${isActive ? 'active' : ''} ${depth > 0 ? 'child' : ''}`, onClick: () => {
+                        if (hasChildren) {
+                            toggleMenu(item.id);
+                        }
+                        else if (item.path) {
+                            handleNavigate(item.path);
+                        }
+                    }, title: collapsed ? item.title : undefined, children: [item.icon && _jsx("span", { className: "sidebar-menu-icon", children: item.icon }), !collapsed && _jsx("span", { className: "sidebar-menu-title", children: item.title }), !collapsed && hasChildren && (_jsx("svg", { className: `sidebar-menu-arrow ${isExpanded ? 'expanded' : ''}`, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "m9 18 6-6-6-6" }) }))] }), !collapsed && hasChildren && isExpanded && (_jsx("ul", { className: "sidebar-submenu", children: item.children.map(child => renderMenuItem(child, depth + 1)) }))] }, item.id));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: `sidebar-toggle ${collapsed ? 'collapsed' : ''}`, onClick: toggleCollapsed, title: collapsed ? '메뉴 열기' : '메뉴 닫기', children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: collapsed ? (_jsx("path", { d: "M3 12h18M3 6h18M3 18h18" })) : (_jsx("path", { d: "M18 6L6 18M6 6l12 12" })) }) }), _jsxs("aside", { className: `app-sidebar ${collapsed ? 'collapsed' : ''}`, children: [_jsx("div", { className: "sidebar-header", children: _jsxs("button", { className: "sidebar-logo", onClick: () => handleNavigate('/'), children: [logo || (_jsxs("svg", { viewBox: "0 0 48 48", fill: "none", width: "32", height: "32", 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" })] })), !collapsed && _jsx("span", { className: "sidebar-app-name", children: appName })] }) }), _jsx("nav", { className: "sidebar-nav", children: menuItems.length > 0 ? (_jsx("ul", { className: "sidebar-menu", children: menuItems.map(item => renderMenuItem(item)) })) : (_jsx("ul", { className: "sidebar-menu", children: _jsx("li", { className: "sidebar-menu-item", children: _jsxs("button", { className: `sidebar-menu-btn ${currentPath === '/' ? 'active' : ''}`, onClick: () => handleNavigate('/'), title: collapsed ? '홈' : undefined, children: [_jsx("span", { className: "sidebar-menu-icon", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] }) }), !collapsed && _jsx("span", { className: "sidebar-menu-title", children: "\uD648" })] }) }) })) }), _jsx("div", { className: "sidebar-footer", children: isAuthenticated ? (_jsxs("div", { className: `sidebar-user ${collapsed ? 'collapsed' : ''}`, children: [_jsx("div", { className: "sidebar-user-avatar", title: collapsed ? userName : undefined, children: userName?.charAt(0).toUpperCase() || 'U' }), !collapsed && (_jsxs("div", { className: "sidebar-user-info", children: [_jsx("span", { className: "sidebar-user-name", children: userName || '사용자' }), userEmail && _jsx("span", { className: "sidebar-user-email", children: userEmail })] })), _jsx("button", { className: "sidebar-logout-btn", onClick: onLogout, title: "\uB85C\uADF8\uC544\uC6C3", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] }) })] })) : (_jsxs("button", { className: `sidebar-login-btn ${collapsed ? 'collapsed' : ''}`, onClick: () => handleNavigate('/login'), title: collapsed ? '로그인' : undefined, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }), _jsx("polyline", { points: "10 17 15 12 10 7" }), _jsx("line", { x1: "15", y1: "12", x2: "3", y2: "12" })] }), !collapsed && '로그인'] })) })] })] }));
+}
+export default AppSidebar;

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

@@ -1,3 +1,4 @@
 export * from './StickyNav';
 export * from './AppNavbar';
+export * from './AppSidebar';
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/navigation/index.js

@@ -1,2 +1,3 @@
 export * from './StickyNav';
 export * from './AppNavbar';
+export * from './AppSidebar';

package/package.json

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