@sonhoseong/mfa-lib 1.2.4 → 1.2.6

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

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface AppNavbarProps {
+    /** 앱 이름/타이틀 */
+    appName?: string;
+    /** 로고 클릭 시 이동할 경로 */
+    homePath?: string;
+    /** 관리 페이지 경로 */
+    adminPath?: string;
+    /** 로그인 페이지 경로 */
+    loginPath?: string;
+    /** 인증 상태 */
+    isAuthenticated: boolean;
+    /** 사용자 이름 */
+    userName?: string;
+    /** 로그아웃 핸들러 */
+    onLogout: () => void;
+    /** 네비게이션 함수 */
+    onNavigate: (path: string) => void;
+    /** 추가 네비게이션 링크 */
+    extraLinks?: Array<{
+        label: string;
+        path: string;
+        isActive?: boolean;
+    }>;
+}
+/**
+ * 공통 네비게이션 바 - KOMCA 패턴
+ * Remote 앱 단독 실행 시 사용
+ */
+export declare const AppNavbar: React.FC<AppNavbarProps>;
+export default AppNavbar;
+//# sourceMappingURL=AppNavbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/AppNavbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;CACJ;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkJ9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/navigation/AppNavbar.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 공통 네비게이션 바 - KOMCA 패턴
+ * Remote 앱 단독 실행 시 사용
+ */
+export const AppNavbar = ({ appName = '앱', homePath = '/', adminPath = '/admin', loginPath = '/login', isAuthenticated, userName, onLogout, onNavigate, extraLinks = [] }) => {
+    const styles = {
+        navbar: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            background: 'rgba(255, 255, 255, 0.95)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+            borderBottom: '1px solid #E2E8F0',
+        },
+        inner: {
+            maxWidth: '1100px',
+            margin: '0 auto',
+            padding: '16px 24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        },
+        logoLink: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            textDecoration: 'none',
+            color: '#1E3A5F',
+            fontWeight: 600,
+            fontSize: '16px',
+            cursor: 'pointer',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+        },
+        links: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+        },
+        link: {
+            padding: '8px 16px',
+            color: '#64748B',
+            textDecoration: 'none',
+            fontSize: '14px',
+            fontWeight: 500,
+            borderRadius: '8px',
+            transition: 'all 0.2s ease',
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            fontFamily: 'inherit',
+        },
+        linkActive: {
+            color: '#0EA5E9',
+            background: 'rgba(14, 165, 233, 0.1)',
+        },
+    };
+    return (_jsx("nav", { style: styles.navbar, children: _jsxs("div", { style: styles.inner, children: [_jsxs("button", { style: styles.logoLink, onClick: () => onNavigate(homePath), children: [_jsx("svg", { viewBox: "0 0 48 48", width: "24", height: "24", fill: "none", children: _jsx("path", { d: "M 8 40 L 24 8 L 40 40", stroke: "#1E3A5F", strokeWidth: "8", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }), _jsx("span", { children: appName })] }), _jsxs("div", { style: styles.links, children: [_jsx("button", { style: styles.link, onClick: () => onNavigate(homePath), onMouseOver: (e) => (e.currentTarget.style.background = '#F8FAFC'), onMouseOut: (e) => (e.currentTarget.style.background = 'transparent'), children: "\uD648" }), extraLinks.map((link) => (_jsx("button", { style: {
+                                ...styles.link,
+                                ...(link.isActive ? styles.linkActive : {}),
+                            }, onClick: () => onNavigate(link.path), children: link.label }, link.path))), isAuthenticated && (_jsx("button", { style: styles.link, onClick: () => onNavigate(adminPath), onMouseOver: (e) => (e.currentTarget.style.background = '#F8FAFC'), onMouseOut: (e) => (e.currentTarget.style.background = 'transparent'), children: "\uAD00\uB9AC" })), !isAuthenticated ? (_jsx("button", { style: {
+                                ...styles.link,
+                                background: '#1E3A5F',
+                                color: 'white',
+                            }, onClick: () => onNavigate(loginPath), onMouseOver: (e) => (e.currentTarget.style.background = '#0EA5E9'), onMouseOut: (e) => (e.currentTarget.style.background = '#1E3A5F'), children: "\uB85C\uADF8\uC778" })) : (_jsxs("button", { style: styles.link, onClick: onLogout, onMouseOver: (e) => (e.currentTarget.style.background = '#F8FAFC'), onMouseOut: (e) => (e.currentTarget.style.background = 'transparent'), children: ["\uB85C\uADF8\uC544\uC6C3 ", userName && `(${userName})`] }))] })] }) }));
+};
+export default AppNavbar;

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

@@ -18,6 +18,8 @@ export interface StickyNavProps {
     showLogo?: boolean;
     /** 커스텀 클래스 */
     className?: string;
+    /** URL hash 업데이트 여부 (기본 true) */
+    updateHash?: boolean;
 }
 export declare const StickyNav: React.FC<StickyNavProps>;
 export default StickyNav;

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/StickyNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmK9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StickyNav.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/StickyNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwM9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/navigation/StickyNav.js

@@ -1,9 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
-export const StickyNav = ({ sections, triggerPoint = 0.2, scrollOffset = 80, topPosition = 20, onLogoClick, showLogo = true, className = '' }) => {
+export const StickyNav = ({ sections, triggerPoint = 0.2, scrollOffset = 80, topPosition = 20, onLogoClick, showLogo = true, className = '', updateHash = true }) => {
     const [activeSection, setActiveSection] = useState('');
     const [hoveredSection, setHoveredSection] = useState(null);
-    // Scroll spy
+    // 초기 로드 시 hash가 있으면 해당 섹션으로 스크롤 + hashchange 이벤트 처리
+    useEffect(() => {
+        const scrollToHash = () => {
+            if (window.location.hash) {
+                const id = window.location.hash.slice(1);
+                const element = document.getElementById(id);
+                if (element) {
+                    const elementPosition = element.getBoundingClientRect().top;
+                    const offsetPosition = elementPosition + window.pageYOffset - scrollOffset;
+                    window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+                }
+            }
+        };
+        // 초기 로드
+        if (updateHash && window.location.hash) {
+            setTimeout(scrollToHash, 100);
+        }
+        // 브라우저 뒤로/앞으로 버튼 처리
+        if (updateHash) {
+            window.addEventListener('hashchange', scrollToHash);
+            return () => window.removeEventListener('hashchange', scrollToHash);
+        }
+    }, [updateHash, scrollOffset]);
+    // Scroll spy - 스크롤 시 active section 업데이트 + hash 업데이트
     useEffect(() => {
         const handleScroll = () => {
             const viewportHeight = window.innerHeight;
@@ -13,7 +36,13 @@ export const StickyNav = ({ sections, triggerPoint = 0.2, scrollOffset = 80, top
                 if (element) {
                     const rect = element.getBoundingClientRect();
                     if (rect.top <= trigger && rect.bottom > trigger) {
-                        setActiveSection(section.id);
+                        if (activeSection !== section.id) {
+                            setActiveSection(section.id);
+                            // 스크롤 시에도 hash 업데이트 (pushState로 히스토리 쌓지 않음)
+                            if (updateHash) {
+                                window.history.replaceState(null, '', `#${section.id}`);
+                            }
+                        }
                         break;
                     }
                 }
@@ -22,15 +51,19 @@ export const StickyNav = ({ sections, triggerPoint = 0.2, scrollOffset = 80, top
         window.addEventListener('scroll', handleScroll, { passive: true });
         handleScroll();
         return () => window.removeEventListener('scroll', handleScroll);
-    }, [sections, triggerPoint]);
+    }, [sections, triggerPoint, activeSection, updateHash]);
     const scrollToSection = useCallback((id) => {
         const element = document.getElementById(id);
         if (element) {
+            // URL hash 업데이트 (pushState로 히스토리에 추가)
+            if (updateHash) {
+                window.history.pushState(null, '', `#${id}`);
+            }
             const elementPosition = element.getBoundingClientRect().top;
             const offsetPosition = elementPosition + window.pageYOffset - scrollOffset;
             window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
         }
-    }, [scrollOffset]);
+    }, [scrollOffset, updateHash]);
     const handleLogoClick = useCallback(() => {
         if (onLogoClick) {
             onLogoClick();

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

@@ -1,2 +1,3 @@
 export * from './StickyNav';
+export * from './AppNavbar';
 //# 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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/dist/components/navigation/index.js

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

package/package.json

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