@sonhoseong/mfa-lib 1.3.5 → 1.3.7

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './toast';
 export * from './error';
 export * from './modal';
 export * from './navigation';
+export * from './layout';
 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;AAGvB,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,UAAU,CAAC;AAGzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC"}

package/dist/components/index.js

@@ -10,6 +10,8 @@ export * from './error';
 export * from './modal';
 // Navigation
 export * from './navigation';
+// Layout
+export * from './layout';
 // Logo
 export * from './logo';
 // Page (LoginPage 등)

package/dist/components/layout/Container.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Container Component - KOMCA 패턴
+ *
+ * 앱 전체를 감싸는 레이아웃 컨테이너
+ */
+import React from 'react';
+export interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Container: React.FC<ContainerProps>;
+export default Container;
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/layout/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Container.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/layout/Container.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Container = ({ children, className = '' }) => {
+    return (_jsx("div", { className: `app-container ${className}`, children: children }));
+};
+export default Container;

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

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

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

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

package/dist/components/layout/index.js

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

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

@@ -0,0 +1,19 @@
+/**
+ * Header Component - KOMCA 패턴
+ *
+ * gnbItems만 받고 내부에서 navigate, logout 처리
+ */
+import React from 'react';
+export interface GnbItem {
+    id: string;
+    title: string;
+    path: string;
+}
+export interface HeaderProps {
+    gnbItems: GnbItem[];
+    appName?: string;
+    logo?: React.ReactNode;
+}
+export declare const Header: React.FC<HeaderProps>;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Header.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4CxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/navigation/Header.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { logout } from '../../store/app-store';
+export const Header = ({ gnbItems, appName = '앱', logo }) => {
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const user = useSelector((state) => state.app?.user);
+    const handleNavigate = (path) => {
+        navigate(path);
+    };
+    const handleLogout = () => {
+        dispatch(logout());
+        navigate('/');
+    };
+    return (_jsx("header", { className: "app-header", children: _jsxs("div", { className: "app-header-inner", children: [_jsx("div", { className: "app-header-logo", onClick: () => handleNavigate('/'), children: logo || appName }), _jsx("nav", { className: "app-header-nav", children: gnbItems.map((item) => (_jsx("button", { className: "app-header-nav-item", onClick: () => handleNavigate(item.path), children: item.title }, item.id))) }), _jsx("div", { className: "app-header-user", children: user && (_jsxs(_Fragment, { children: [_jsx("span", { className: "app-header-user-name", children: user.name || user.email }), _jsx("button", { className: "app-header-logout", onClick: handleLogout, children: "\uB85C\uADF8\uC544\uC6C3" })] })) })] }) }));
+};
+export default Header;

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

@@ -0,0 +1,22 @@
+/**
+ * Lnb (Left Navigation Bar) Component - KOMCA 패턴
+ *
+ * lnbItems만 받고 내부에서 navigate 처리
+ */
+import React from 'react';
+export interface LnbMenuItem {
+    id: string;
+    title: string;
+    path?: string;
+    icon?: React.ReactNode;
+    children?: Omit<LnbMenuItem, 'icon' | 'children'>[];
+}
+export interface LnbProps {
+    lnbItems: LnbMenuItem[];
+    title?: string;
+    appName?: string;
+    logo?: React.ReactNode;
+}
+export declare const Lnb: React.FC<LnbProps>;
+export default Lnb;
+//# sourceMappingURL=Lnb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lnb.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Lnb.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,WAAW;IAC1B,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,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,EAAE,CAAC;CACrD;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAkHlC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/components/navigation/Lnb.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Lnb (Left Navigation Bar) Component - KOMCA 패턴
+ *
+ * lnbItems만 받고 내부에서 navigate 처리
+ */
+import { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { logout } from '../../store/app-store';
+export const Lnb = ({ lnbItems, title, appName, logo }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const dispatch = useDispatch();
+    const [expandedItems, setExpandedItems] = useState([]);
+    const [collapsed, setCollapsed] = useState(false);
+    const user = useSelector((state) => state.app?.user);
+    const isAuthenticated = useSelector((state) => !!state.app?.accessToken);
+    const handleNavigate = (path) => {
+        navigate(path);
+    };
+    const handleLogout = () => {
+        dispatch(logout());
+        navigate('/');
+    };
+    const toggleExpand = (itemId) => {
+        setExpandedItems((prev) => prev.includes(itemId)
+            ? prev.filter((id) => id !== itemId)
+            : [...prev, itemId]);
+    };
+    const isActive = (path) => {
+        if (!path)
+            return false;
+        return location.pathname === path || location.pathname.startsWith(path + '/');
+    };
+    return (_jsxs("aside", { className: `app-lnb ${collapsed ? 'collapsed' : ''}`, children: [_jsxs("div", { className: "app-lnb-header", children: [(logo || appName) && (_jsx("div", { className: "app-lnb-logo", onClick: () => handleNavigate('/'), children: logo || appName })), title && !collapsed && _jsx("div", { className: "app-lnb-title", children: title }), _jsx("button", { className: "app-lnb-toggle", onClick: () => setCollapsed(!collapsed), children: collapsed ? '›' : '‹' })] }), _jsx("nav", { className: "app-lnb-nav", children: lnbItems.map((item) => (_jsx("div", { className: "app-lnb-item", children: item.children ? (_jsxs(_Fragment, { children: [_jsxs("button", { className: `app-lnb-item-btn ${expandedItems.includes(item.id) ? 'expanded' : ''}`, onClick: () => toggleExpand(item.id), children: [item.icon && _jsx("span", { className: "app-lnb-icon", children: item.icon }), !collapsed && _jsx("span", { className: "app-lnb-text", children: item.title }), !collapsed && (_jsx("span", { className: "app-lnb-arrow", children: expandedItems.includes(item.id) ? '▼' : '▶' }))] }), expandedItems.includes(item.id) && !collapsed && (_jsx("div", { className: "app-lnb-subitems", children: item.children.map((child) => (_jsx("button", { className: `app-lnb-subitem ${isActive(child.path) ? 'active' : ''}`, onClick: () => child.path && handleNavigate(child.path), children: child.title }, child.id))) }))] })) : (_jsxs("button", { className: `app-lnb-item-btn ${isActive(item.path) ? 'active' : ''}`, onClick: () => item.path && handleNavigate(item.path), children: [item.icon && _jsx("span", { className: "app-lnb-icon", children: item.icon }), !collapsed && _jsx("span", { className: "app-lnb-text", children: item.title })] })) }, item.id))) }), isAuthenticated && (_jsxs("div", { className: `app-lnb-footer ${collapsed ? 'collapsed' : ''}`, children: [_jsxs("div", { className: "app-lnb-user-section", children: [_jsx("div", { className: "app-lnb-avatar", children: user?.name?.charAt(0) || user?.email?.charAt(0) || '?' }), !collapsed && user && (_jsx("span", { className: "app-lnb-user-name", children: user.name || user.email }))] }), _jsx("button", { className: "app-lnb-logout-icon", onClick: handleLogout, 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" })] }) })] }))] }));
+};
+export default Lnb;

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

@@ -1,4 +1,6 @@
 export * from './StickyNav';
 export * from './AppNavbar';
 export * from './AppSidebar';
+export * from './Header';
+export * from './Lnb';
 //# 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;AAC5B,cAAc,cAAc,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;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC"}

package/dist/components/navigation/index.js

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

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@sonhoseong/mfa-lib",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "MFA 공통 라이브러리 - KOMCA 패턴",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist", "README.md"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "tsc",
     "watch": "tsc --watch"
@@ -24,4 +27,4 @@
     "react-redux": "^9.0.0",
     "react-router-dom": "^7.0.0"
   }
-}
+}