@sonhoseong/mfa-lib 1.0.0 → 1.1.1

package/dist/components/index.d.ts

@@ -3,4 +3,5 @@ export * from './loading';
 export * from './toast';
 export * from './error';
 export * from './modal';
+export * from './navigation';
 //# 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"}
+{"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"}

package/dist/components/index.js

@@ -8,3 +8,5 @@ export * from './toast';
 export * from './error';
 // Modal
 export * from './modal';
+// Navigation
+export * from './navigation';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface NavSection {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface StickyNavProps {
+    sections: NavSection[];
+    /** 스크롤 트리거 위치 (0-1, 기본 0.2) */
+    triggerPoint?: number;
+    /** 스크롤 오프셋 (기본 80) */
+    scrollOffset?: number;
+    /** 상단 고정 위치 (기본 20) */
+    topPosition?: number;
+    /** 로고 클릭 시 콜백 */
+    onLogoClick?: () => void;
+    /** 로고 표시 여부 */
+    showLogo?: boolean;
+    /** 커스텀 클래스 */
+    className?: string;
+}
+export declare const StickyNav: React.FC<StickyNavProps>;
+export default StickyNav;
+//# sourceMappingURL=StickyNav.d.ts.map

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

@@ -0,0 +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,CAoK9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/navigation/StickyNav.js

@@ -0,0 +1,121 @@
+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 = '' }) => {
+    const [activeSection, setActiveSection] = useState('');
+    const [hoveredSection, setHoveredSection] = useState(null);
+    // Scroll spy
+    useEffect(() => {
+        const handleScroll = () => {
+            const viewportHeight = window.innerHeight;
+            const trigger = viewportHeight * triggerPoint;
+            for (const section of sections) {
+                const element = document.getElementById(section.id);
+                if (element) {
+                    const rect = element.getBoundingClientRect();
+                    if (rect.top <= trigger && rect.bottom > trigger) {
+                        setActiveSection(section.id);
+                        break;
+                    }
+                }
+            }
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        handleScroll();
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [sections, triggerPoint]);
+    const scrollToSection = useCallback((id) => {
+        const element = document.getElementById(id);
+        if (element) {
+            const elementPosition = element.getBoundingClientRect().top;
+            const offsetPosition = elementPosition + window.pageYOffset - scrollOffset;
+            window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+        }
+    }, [scrollOffset]);
+    const handleLogoClick = useCallback(() => {
+        if (onLogoClick) {
+            onLogoClick();
+        }
+        else {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [onLogoClick]);
+    const styles = {
+        wrapper: {
+            position: 'sticky',
+            top: topPosition,
+            zIndex: 1000,
+            display: 'flex',
+            justifyContent: 'center',
+            padding: '0 24px',
+            marginBottom: '40px',
+        },
+        nav: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            padding: '6px',
+            background: 'rgba(255, 255, 255, 0.85)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+            borderRadius: '50px',
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)',
+            border: '1px solid rgba(0, 0, 0, 0.06)',
+        },
+        logoButton: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '5px',
+            padding: '8px 12px',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            borderRadius: '50px',
+            transition: 'background 0.2s',
+        },
+        dot: {
+            width: '10px',
+            height: '10px',
+            borderRadius: '50%',
+            transition: 'transform 0.2s',
+        },
+        pillList: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2px',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+        },
+        pill: {
+            padding: '10px 18px',
+            fontSize: '14px',
+            fontWeight: 500,
+            color: '#64748b',
+            background: 'transparent',
+            border: 'none',
+            borderRadius: '50px',
+            cursor: 'pointer',
+            whiteSpace: 'nowrap',
+            transition: 'all 0.2s ease',
+        },
+        pillHover: {
+            color: '#1E3A5F',
+            background: 'rgba(30, 58, 95, 0.08)',
+        },
+        pillActive: {
+            color: '#ffffff',
+            background: '#1E3A5F',
+            boxShadow: '0 2px 8px rgba(30, 58, 95, 0.25)',
+        },
+    };
+    return (_jsx("div", { style: styles.wrapper, className: `sticky-nav-wrapper ${className}`, children: _jsxs("nav", { style: styles.nav, className: "sticky-nav", children: [showLogo && (_jsxs("button", { style: styles.logoButton, onClick: handleLogoClick, className: "nav-logo-dots", "aria-label": "\uB9E8 \uC704\uB85C", children: [_jsx("span", { style: { ...styles.dot, background: '#3B82F6' }, className: "dot blue" }), _jsx("span", { style: { ...styles.dot, background: '#22C55E' }, className: "dot green" }), _jsx("span", { style: { ...styles.dot, background: '#F59E0B' }, className: "dot yellow" })] })), _jsx("ul", { style: styles.pillList, className: "nav-pills", children: sections.map((section) => {
+                        const isActive = activeSection === section.id;
+                        const isHovered = hoveredSection === section.id && !isActive;
+                        return (_jsx("li", { children: _jsxs("button", { style: {
+                                    ...styles.pill,
+                                    ...(isHovered ? styles.pillHover : {}),
+                                    ...(isActive ? styles.pillActive : {}),
+                                }, className: `nav-pill ${isActive ? 'active' : ''}`, onClick: () => scrollToSection(section.id), onMouseEnter: () => setHoveredSection(section.id), onMouseLeave: () => setHoveredSection(null), children: [section.icon && _jsx("span", { style: { marginRight: '6px' }, children: section.icon }), section.label] }) }, section.id));
+                    }) })] }) }));
+};
+export default StickyNav;

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

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

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

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

package/dist/components/navigation/index.js

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

package/dist/hooks/use-modal.d.ts

@@ -2,7 +2,7 @@
  * Modal Hooks - KOMCA 패턴
  * Alert, Confirm 모달 관리
  */
-export interface ModalHookOptions {
+export interface SimpleModalOptions {
     title?: string;
     message: string;
     confirmText?: string;
@@ -10,14 +10,14 @@ export interface ModalHookOptions {
 }
 export interface AlertModalResult {
     isOpen: boolean;
-    options: ModalHookOptions | null;
-    show: (options: ModalHookOptions | string) => Promise<void>;
+    options: SimpleModalOptions | null;
+    show: (options: SimpleModalOptions | string) => Promise<void>;
     close: () => void;
 }
 export interface ConfirmModalResult {
     isOpen: boolean;
-    options: ModalHookOptions | null;
-    show: (options: ModalHookOptions | string) => Promise<boolean>;
+    options: SimpleModalOptions | null;
+    show: (options: SimpleModalOptions | string) => Promise<boolean>;
     close: (confirmed: boolean) => void;
 }
 /**

package/dist/hooks/use-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../../src/hooks/use-modal.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAGD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/D,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,gBAAgB,CA4BhD;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,kBAAkB,CA4BpD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,cACH,MAAM,UAAU,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC,CAOpE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,cACL,MAAM,UAAU,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC,CAOvE"}
+{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../../src/hooks/use-modal.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAGD,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,IAAI,EAAE,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAGD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,IAAI,EAAE,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACjE,KAAK,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,gBAAgB,CA4BhD;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,kBAAkB,CA4BpD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,cACH,MAAM,UAAU,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC,CAOpE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,cACL,MAAM,UAAU,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC,CAOvE"}

package/package.json

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