@sonhoseong/mfa-lib 1.3.7 → 1.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/components/logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,SAAS;IACxB,aAAa;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/components/logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,SAAS;IACxB,aAAa;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AASD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqIpC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -6,7 +6,7 @@ const sizeMap = {
|
|
|
6
6
|
lg: { main: 56, side: 32 },
|
|
7
7
|
xl: { main: 72, side: 42 },
|
|
8
8
|
};
|
|
9
|
-
export const Logo = ({ size = 'md', customSize, sideColor = '#1E3A5F', centerColor = '#0EA5E9', eyeColor = '#FFFFFF', interactive = true, onClick, className = '', }) => {
|
|
9
|
+
export const Logo = ({ size = 'md', customSize, sideColor = '#1E3A5F', centerColor = '#0EA5E9', eyeColor = '#FFFFFF', interactive = true, onClick, className = '', centerOnly = false, }) => {
|
|
10
10
|
const [sideHover, setSideHover] = useState(false);
|
|
11
11
|
const [centerHover, setCenterHover] = useState(false);
|
|
12
12
|
const dimensions = customSize
|
|
@@ -33,6 +33,6 @@ export const Logo = ({ size = 'md', customSize, sideColor = '#1E3A5F', centerCol
|
|
|
33
33
|
// 콧구멍 크기 (호버시 커짐)
|
|
34
34
|
const noseRx = centerHover && interactive ? 5.5 : 4;
|
|
35
35
|
const noseRy = centerHover && interactive ? 8 : 6;
|
|
36
|
-
return (_jsxs("div", { style: styles.container, className: `logo ${className}`, onClick: onClick, role: onClick ? 'button' : undefined, children: [_jsx("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: dimensions.side, height: dimensions.side, style: styles.side, onMouseEnter: () => setSideHover(true), onMouseLeave: () => setSideHover(false), children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: sideColor, strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }), _jsxs("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: dimensions.main, height: dimensions.main, style: styles.center, onMouseEnter: () => setCenterHover(true), onMouseLeave: () => setCenterHover(false), children: [_jsx("rect", { x: "20", y: "2", width: "8", height: "16", rx: "4", fill: centerColor }), _jsx("rect", { x: "6", y: "16", width: "36", height: "6", rx: "3", fill: centerColor }), _jsx("ellipse", { cx: "24", cy: "36", rx: "18", ry: "12", fill: centerColor }), _jsx("ellipse", { cx: "17", cy: eyeY, rx: noseRx, ry: noseRy, fill: eyeColor, style: { transition: 'all 0.2s ease' } }), _jsx("ellipse", { cx: "31", cy: eyeY, rx: noseRx, ry: noseRy, fill: eyeColor, style: { transition: 'all 0.2s ease' } })] }), _jsx("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: dimensions.side, height: dimensions.side, style: styles.side, onMouseEnter: () => setSideHover(true), onMouseLeave: () => setSideHover(false), children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: sideColor, strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })] }));
|
|
36
|
+
return (_jsxs("div", { style: styles.container, className: `logo ${className}`, onClick: onClick, role: onClick ? 'button' : undefined, children: [!centerOnly && (_jsx("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: dimensions.side, height: dimensions.side, style: styles.side, onMouseEnter: () => setSideHover(true), onMouseLeave: () => setSideHover(false), children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: sideColor, strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })), _jsxs("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: dimensions.main, height: dimensions.main, style: styles.center, onMouseEnter: () => setCenterHover(true), onMouseLeave: () => setCenterHover(false), children: [_jsx("rect", { x: "20", y: "2", width: "8", height: "16", rx: "4", fill: centerColor }), _jsx("rect", { x: "6", y: "16", width: "36", height: "6", rx: "3", fill: centerColor }), _jsx("ellipse", { cx: "24", cy: "36", rx: "18", ry: "12", fill: centerColor }), _jsx("ellipse", { cx: "17", cy: eyeY, rx: noseRx, ry: noseRy, fill: eyeColor, style: { transition: 'all 0.2s ease' } }), _jsx("ellipse", { cx: "31", cy: eyeY, rx: noseRx, ry: noseRy, fill: eyeColor, style: { transition: 'all 0.2s ease' } })] }), !centerOnly && (_jsx("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: dimensions.side, height: dimensions.side, style: styles.side, onMouseEnter: () => setSideHover(true), onMouseLeave: () => setSideHover(false), children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: sideColor, strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }))] }));
|
|
37
37
|
};
|
|
38
38
|
export default Logo;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lnb.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Lnb.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"Lnb.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Lnb.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,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,CAqHlC,CAAC;AAEF,eAAe,GAAG,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
4
4
|
*
|
|
5
5
|
* lnbItems만 받고 내부에서 navigate 처리
|
|
6
6
|
*/
|
|
7
|
-
import { useState } from 'react';
|
|
7
|
+
import { useState, isValidElement, cloneElement } from 'react';
|
|
8
8
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
9
9
|
import { useSelector, useDispatch } from 'react-redux';
|
|
10
10
|
import { logout } from '../../store/app-store';
|
|
@@ -33,6 +33,8 @@ export const Lnb = ({ lnbItems, title, appName, logo }) => {
|
|
|
33
33
|
return false;
|
|
34
34
|
return location.pathname === path || location.pathname.startsWith(path + '/');
|
|
35
35
|
};
|
|
36
|
-
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
|
|
36
|
+
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: isValidElement(logo)
|
|
37
|
+
? cloneElement(logo, { centerOnly: collapsed })
|
|
38
|
+
: (collapsed ? null : 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" })] }) })] }))] }));
|
|
37
39
|
};
|
|
38
40
|
export default Lnb;
|