@sonhoseong/mfa-lib 1.3.8 → 1.3.10

package/dist/components/button/ScrollTopButton.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 const ScrollTopButton = ({ className = '', variant = 'primary', size = 'md', threshold = 100, title = '맨 위로', }) => {
     const [isVisible, setIsVisible] = useState(false);
     useEffect(() => {
@@ -23,6 +22,9 @@ const ScrollTopButton = ({ className = '', variant = 'primary', size = 'md', thr
         secondary: 'scroll-top-btn--secondary',
         ghost: 'scroll-top-btn--ghost',
     };
-    return (_jsx("button", { type: "button", className: `scroll-top-btn ${sizeClasses[size]} ${variantClasses[variant]} ${isVisible ? 'visible' : ''} ${className}`, onClick: scrollToTop, title: title, "aria-label": title, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "17 11 12 6 7 11" }), _jsx("polyline", { points: "17 18 12 13 7 18" })] }) }));
+    return (React.createElement("button", { type: "button", className: `scroll-top-btn ${sizeClasses[size]} ${variantClasses[variant]} ${isVisible ? 'visible' : ''} ${className}`, onClick: scrollToTop, title: title, "aria-label": title },
+        React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" },
+            React.createElement("polyline", { points: "17 11 12 6 7 11" }),
+            React.createElement("polyline", { points: "17 18 12 13 7 18" }))));
 };
 export { ScrollTopButton };

package/dist/components/error/ErrorBoundary.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ErrorBoundary - KOMCA 패턴
  * 에러 발생 시 Fallback UI 표시
  */
-import { Component } from 'react';
+import React, { Component } from 'react';
 class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
@@ -29,7 +28,18 @@ class ErrorBoundary extends Component {
                 return this.props.fallback;
             }
             // 기본 fallback UI
-            return (_jsxs("div", { className: "error-boundary-fallback", children: [_jsxs("div", { className: "error-boundary-content", children: [_jsx("div", { className: "error-boundary-icon", children: "\u26A0\uFE0F" }), _jsx("h2", { className: "error-boundary-title", children: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }), _jsx("p", { className: "error-boundary-message", children: this.state.error.message || '알 수 없는 오류가 발생했습니다.' }), _jsxs("div", { className: "error-boundary-actions", children: [_jsx("button", { className: "error-boundary-button primary", onClick: this.resetError, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }), _jsx("button", { className: "error-boundary-button secondary", onClick: () => window.location.reload(), children: "\uC0C8\uB85C\uACE0\uCE68" })] }), process.env.NODE_ENV === 'development' && (_jsxs("details", { className: "error-boundary-details", children: [_jsx("summary", { children: "\uC0C1\uC138 \uC815\uBCF4" }), _jsx("pre", { children: this.state.error.stack })] }))] }), _jsx("style", { children: `
+            return (React.createElement("div", { className: "error-boundary-fallback" },
+                React.createElement("div", { className: "error-boundary-content" },
+                    React.createElement("div", { className: "error-boundary-icon" }, "\u26A0\uFE0F"),
+                    React.createElement("h2", { className: "error-boundary-title" }, "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4"),
+                    React.createElement("p", { className: "error-boundary-message" }, this.state.error.message || '알 수 없는 오류가 발생했습니다.'),
+                    React.createElement("div", { className: "error-boundary-actions" },
+                        React.createElement("button", { className: "error-boundary-button primary", onClick: this.resetError }, "\uB2E4\uC2DC \uC2DC\uB3C4"),
+                        React.createElement("button", { className: "error-boundary-button secondary", onClick: () => window.location.reload() }, "\uC0C8\uB85C\uACE0\uCE68")),
+                    process.env.NODE_ENV === 'development' && (React.createElement("details", { className: "error-boundary-details" },
+                        React.createElement("summary", null, "\uC0C1\uC138 \uC815\uBCF4"),
+                        React.createElement("pre", null, this.state.error.stack)))),
+                React.createElement("style", null, `
                         .error-boundary-fallback {
                             display: flex;
                             align-items: center;
@@ -122,7 +132,7 @@ class ErrorBoundary extends Component {
                             overflow-x: auto;
                             color: #ef4444;
                         }
-                    ` })] }));
+                    `)));
         }
         return this.props.children;
     }

package/dist/components/error/NotFound.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 404 NotFound 컴포넌트
+ * 존재하지 않는 페이지 접근 시 표시
+ */
+import React from 'react';
+export interface NotFoundProps {
+    /** 커스텀 타이틀 */
+    title?: string;
+    /** 커스텀 메시지 */
+    message?: string;
+    /** 홈 경로 */
+    homePath?: string;
+    /** 뒤로가기 버튼 표시 여부 */
+    showBackButton?: boolean;
+    /** 홈 버튼 표시 여부 */
+    showHomeButton?: boolean;
+}
+export declare const NotFound: React.FC<NotFoundProps>;
+export default NotFound;
+//# sourceMappingURL=NotFound.d.ts.map

package/dist/components/error/NotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../src/components/error/NotFound.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwD5C,CAAC;AAuDF,eAAe,QAAQ,CAAC"}

package/dist/components/error/NotFound.js

@@ -0,0 +1,84 @@
+/**
+ * 404 NotFound 컴포넌트
+ * 존재하지 않는 페이지 접근 시 표시
+ */
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+export const NotFound = ({ title = '페이지를 찾을 수 없습니다', message = '요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.', homePath = '/', showBackButton = true, showHomeButton = true, }) => {
+    const navigate = useNavigate();
+    const handleGoBack = () => {
+        navigate(-1);
+    };
+    const handleGoHome = () => {
+        navigate(homePath);
+    };
+    return (React.createElement("div", { style: styles.container },
+        React.createElement("div", { style: styles.content },
+            React.createElement("div", { style: styles.errorCode }, "404"),
+            React.createElement("h1", { style: styles.title }, title),
+            React.createElement("p", { style: styles.message }, message),
+            React.createElement("div", { style: styles.buttonContainer },
+                showBackButton && (React.createElement("button", { onClick: handleGoBack, style: styles.button, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = '#5a6268';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = '#6c757d';
+                    } }, "\uC774\uC804 \uD398\uC774\uC9C0")),
+                showHomeButton && (React.createElement("button", { onClick: handleGoHome, style: { ...styles.button, ...styles.primaryButton }, onMouseEnter: (e) => {
+                        e.currentTarget.style.backgroundColor = '#0056b3';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = '#007bff';
+                    } }, "\uD648\uC73C\uB85C"))))));
+};
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        backgroundColor: '#f8f9fa',
+        padding: '20px',
+    },
+    content: {
+        textAlign: 'center',
+        maxWidth: '500px',
+    },
+    errorCode: {
+        fontSize: '120px',
+        fontWeight: 'bold',
+        color: '#dee2e6',
+        lineHeight: 1,
+        marginBottom: '20px',
+    },
+    title: {
+        fontSize: '24px',
+        fontWeight: 600,
+        color: '#343a40',
+        marginBottom: '12px',
+    },
+    message: {
+        fontSize: '16px',
+        color: '#6c757d',
+        marginBottom: '32px',
+        lineHeight: 1.5,
+    },
+    buttonContainer: {
+        display: 'flex',
+        gap: '12px',
+        justifyContent: 'center',
+    },
+    button: {
+        padding: '12px 24px',
+        fontSize: '14px',
+        fontWeight: 500,
+        border: 'none',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        backgroundColor: '#6c757d',
+        color: '#fff',
+        transition: 'background-color 0.2s',
+    },
+    primaryButton: {
+        backgroundColor: '#007bff',
+    },
+};
+export default NotFound;

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

@@ -1,2 +1,4 @@
 export { default as ErrorBoundary } from './ErrorBoundary';
+export { NotFound } from './NotFound';
+export type { NotFoundProps } from './NotFound';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/error/index.js

@@ -1 +1,2 @@
 export { default as ErrorBoundary } from './ErrorBoundary';
+export { NotFound } from './NotFound';

package/dist/components/icons/Icons.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 공통 아이콘 컴포넌트
+ * SVG 아이콘을 React 컴포넌트로 제공
+ */
+import React from 'react';
+export interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+/** 대시보드 아이콘 */
+export declare const DashboardIcon: React.FC<IconProps>;
+/** 문서/이력서 아이콘 */
+export declare const DocumentIcon: React.FC<IconProps>;
+/** 블로그/펜 아이콘 */
+export declare const BlogIcon: React.FC<IconProps>;
+/** 홈 아이콘 */
+export declare const HomeIcon: React.FC<IconProps>;
+/** 설정 아이콘 */
+export declare const SettingsIcon: React.FC<IconProps>;
+/** 사용자 아이콘 */
+export declare const UserIcon: React.FC<IconProps>;
+/** 로그인 아이콘 */
+export declare const LoginIcon: React.FC<IconProps>;
+/** 로그아웃 아이콘 */
+export declare const LogoutIcon: React.FC<IconProps>;
+/** 검색 아이콘 */
+export declare const SearchIcon: React.FC<IconProps>;
+/** 플러스 아이콘 */
+export declare const PlusIcon: React.FC<IconProps>;
+/** 편집 아이콘 */
+export declare const EditIcon: React.FC<IconProps>;
+/** 삭제 아이콘 */
+export declare const TrashIcon: React.FC<IconProps>;
+/** 메뉴 아이콘 */
+export declare const MenuIcon: React.FC<IconProps>;
+/** 닫기 아이콘 */
+export declare const CloseIcon: React.FC<IconProps>;
+/** 체크 아이콘 */
+export declare const CheckIcon: React.FC<IconProps>;
+/** 경고 아이콘 */
+export declare const AlertIcon: React.FC<IconProps>;
+/** 정보 아이콘 */
+export declare const InfoIcon: React.FC<IconProps>;
+/** 화살표 왼쪽 아이콘 */
+export declare const ArrowLeftIcon: React.FC<IconProps>;
+/** 화살표 오른쪽 아이콘 */
+export declare const ArrowRightIcon: React.FC<IconProps>;
+/** 포트폴리오 아이콘 */
+export declare const PortfolioIcon: React.FC<IconProps>;
+//# sourceMappingURL=Icons.d.ts.map

package/dist/components/icons/Icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,eAAe;AACf,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAO7C,CAAC;AAEF,iBAAiB;AACjB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAQ5C,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOxC,CAAC;AAEF,YAAY;AACZ,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKxC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAK5C,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKxC,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMzC,CAAC;AAEF,eAAe;AACf,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAM1C,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAK1C,CAAC;AAEF,cAAc;AACd,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKxC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKxC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKzC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMxC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKzC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIzC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMzC,CAAC;AAEF,aAAa;AACb,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMxC,CAAC;AAEF,iBAAiB;AACjB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAK7C,CAAC;AAEF,kBAAkB;AAClB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAK9C,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAK7C,CAAC"}

package/dist/components/icons/Icons.js

@@ -0,0 +1,100 @@
+/**
+ * 공통 아이콘 컴포넌트
+ * SVG 아이콘을 React 컴포넌트로 제공
+ */
+import React from 'react';
+const defaultProps = {
+    size: 20,
+    color: 'currentColor',
+};
+/** 대시보드 아이콘 */
+export const DashboardIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("rect", { x: "3", y: "3", width: "7", height: "7" }),
+    React.createElement("rect", { x: "14", y: "3", width: "7", height: "7" }),
+    React.createElement("rect", { x: "14", y: "14", width: "7", height: "7" }),
+    React.createElement("rect", { x: "3", y: "14", width: "7", height: "7" })));
+/** 문서/이력서 아이콘 */
+export const DocumentIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    React.createElement("polyline", { points: "14 2 14 8 20 8" }),
+    React.createElement("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    React.createElement("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+    React.createElement("polyline", { points: "10 9 9 9 8 9" })));
+/** 블로그/펜 아이콘 */
+export const BlogIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "M12 19l7-7 3 3-7 7-3-3z" }),
+    React.createElement("path", { d: "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" }),
+    React.createElement("path", { d: "M2 2l7.586 7.586" }),
+    React.createElement("circle", { cx: "11", cy: "11", r: "2" })));
+/** 홈 아이콘 */
+export const HomeIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    React.createElement("polyline", { points: "9 22 9 12 15 12 15 22" })));
+/** 설정 아이콘 */
+export const SettingsIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("circle", { cx: "12", cy: "12", r: "3" }),
+    React.createElement("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })));
+/** 사용자 아이콘 */
+export const UserIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+    React.createElement("circle", { cx: "12", cy: "7", r: "4" })));
+/** 로그인 아이콘 */
+export const LoginIcon = ({ size = 18, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }),
+    React.createElement("polyline", { points: "10 17 15 12 10 7" }),
+    React.createElement("line", { x1: "15", y1: "12", x2: "3", y2: "12" })));
+/** 로그아웃 아이콘 */
+export const LogoutIcon = ({ size = 18, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    React.createElement("polyline", { points: "16 17 21 12 16 7" }),
+    React.createElement("line", { x1: "21", y1: "12", x2: "9", y2: "12" })));
+/** 검색 아이콘 */
+export const SearchIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    React.createElement("path", { d: "m21 21-4.35-4.35" })));
+/** 플러스 아이콘 */
+export const PlusIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    React.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })));
+/** 편집 아이콘 */
+export const EditIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+    React.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })));
+/** 삭제 아이콘 */
+export const TrashIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("polyline", { points: "3 6 5 6 21 6" }),
+    React.createElement("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })));
+/** 메뉴 아이콘 */
+export const MenuIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    React.createElement("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    React.createElement("line", { x1: "3", y1: "18", x2: "21", y2: "18" })));
+/** 닫기 아이콘 */
+export const CloseIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+/** 체크 아이콘 */
+export const CheckIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("polyline", { points: "20 6 9 17 4 12" })));
+/** 경고 아이콘 */
+export const AlertIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
+/** 정보 아이콘 */
+export const InfoIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    React.createElement("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    React.createElement("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })));
+/** 화살표 왼쪽 아이콘 */
+export const ArrowLeftIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+    React.createElement("polyline", { points: "12 19 5 12 12 5" })));
+/** 화살표 오른쪽 아이콘 */
+export const ArrowRightIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+    React.createElement("polyline", { points: "12 5 19 12 12 19" })));
+/** 포트폴리오 아이콘 */
+export const PortfolioIcon = ({ size = 20, color = 'currentColor', className }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", className: className },
+    React.createElement("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2", ry: "2" }),
+    React.createElement("path", { d: "M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" })));

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

@@ -0,0 +1,5 @@
+/**
+ * Icons 모듈
+ */
+export * from './Icons';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/icons/index.js

@@ -0,0 +1,4 @@
+/**
+ * Icons 모듈
+ */
+export * from './Icons';

package/dist/components/index.d.ts

@@ -7,4 +7,7 @@ export * from './navigation';
 export * from './layout';
 export * from './logo';
 export * from './page';
+export * from './router';
+export * from './remote';
+export * from './icons';
 //# 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,UAAU,CAAC;AAGzB,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;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAEzB,cAAc,SAAS,CAAC"}

package/dist/components/index.js

@@ -16,3 +16,9 @@ export * from './layout';
 export * from './logo';
 // Page (LoginPage 등)
 export * from './page';
+// Router
+export * from './router';
+// Remote (MFA 관련)
+export * from './remote';
+// Icons
+export * from './icons';

package/dist/components/layout/Container.js

@@ -1,5 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Container Component - KOMCA 패턴
+ *
+ * 앱 전체를 감싸는 레이아웃 컨테이너
+ */
+import React from 'react';
 export const Container = ({ children, className = '' }) => {
-    return (_jsx("div", { className: `app-container ${className}`, children: children }));
+    return (React.createElement("div", { className: `app-container ${className}` }, children));
 };
 export default Container;

package/dist/components/loading/DeferredComponent.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+interface DeferredComponentProps {
+    children: ReactNode;
+    /** 지연 시간 (ms), 기본값 200ms */
+    delay?: number;
+}
+/**
+ * 지연된 렌더링 컴포넌트
+ * - 느린 네트워크: 즉시 children 렌더링
+ * - 빠른 네트워크: delay ms 후 children 렌더링
+ *
+ * 사용 예:
+ * <Suspense fallback={<DeferredComponent><Skeleton /></DeferredComponent>}>
+ *   <AsyncComponent />
+ * </Suspense>
+ */
+declare const DeferredComponent: React.FC<DeferredComponentProps>;
+export default DeferredComponent;
+//# sourceMappingURL=DeferredComponent.d.ts.map

package/dist/components/loading/DeferredComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeferredComponent.d.ts","sourceRoot":"","sources":["../../../src/components/loading/DeferredComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyBvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/loading/DeferredComponent.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import useNetworkStatus from '../../hooks/use-network-status';
+/**
+ * 지연된 렌더링 컴포넌트
+ * - 느린 네트워크: 즉시 children 렌더링
+ * - 빠른 네트워크: delay ms 후 children 렌더링
+ *
+ * 사용 예:
+ * <Suspense fallback={<DeferredComponent><Skeleton /></DeferredComponent>}>
+ *   <AsyncComponent />
+ * </Suspense>
+ */
+const DeferredComponent = ({ children, delay = 200 }) => {
+    const { isSlowNetwork } = useNetworkStatus();
+    const [shouldRender, setShouldRender] = useState(false);
+    useEffect(() => {
+        // 느린 네트워크면 즉시 표시
+        if (isSlowNetwork) {
+            setShouldRender(true);
+            return;
+        }
+        // 빠른 네트워크면 delay 후 표시
+        const timeoutId = setTimeout(() => {
+            setShouldRender(true);
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [isSlowNetwork, delay]);
+    if (!shouldRender)
+        return null;
+    return React.createElement(React.Fragment, null, children);
+};
+export default DeferredComponent;

package/dist/components/loading/GlobalLoading.js

@@ -1,4 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * GlobalLoading Component - KOMCA 패턴
+ * 전역 로딩 스피너 UI
+ */
+import React from 'react';
 import { useSelector } from 'react-redux';
 const GlobalLoading = ({ message }) => {
     const isLoading = useSelector((state) => state.app?.isLoading);
@@ -6,7 +10,14 @@ const GlobalLoading = ({ message }) => {
     if (!isLoading)
         return null;
     const displayMessage = message || globalLoadingTitle || '로딩 중...';
-    return (_jsxs("div", { className: "global-loading-overlay", children: [_jsxs("div", { className: "global-loading-content", children: [_jsxs("div", { className: "global-loading-spinner", children: [_jsx("div", { className: "spinner-ring" }), _jsx("div", { className: "spinner-ring" }), _jsx("div", { className: "spinner-ring" })] }), displayMessage && (_jsx("p", { className: "global-loading-message", children: displayMessage }))] }), _jsx("style", { children: `
+    return (React.createElement("div", { className: "global-loading-overlay" },
+        React.createElement("div", { className: "global-loading-content" },
+            React.createElement("div", { className: "global-loading-spinner" },
+                React.createElement("div", { className: "spinner-ring" }),
+                React.createElement("div", { className: "spinner-ring" }),
+                React.createElement("div", { className: "spinner-ring" })),
+            displayMessage && (React.createElement("p", { className: "global-loading-message" }, displayMessage))),
+        React.createElement("style", null, `
                 .global-loading-overlay {
                     position: fixed;
                     top: 0;
@@ -79,6 +90,6 @@ const GlobalLoading = ({ message }) => {
                     color: #374151;
                     font-weight: 500;
                 }
-            ` })] }));
+            `)));
 };
 export default GlobalLoading;

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

@@ -1,2 +1,3 @@
 export { default as GlobalLoading } from './GlobalLoading';
+export { default as DeferredComponent } from './DeferredComponent';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/loading/index.js

@@ -1 +1,2 @@
 export { default as GlobalLoading } from './GlobalLoading';
+export { default as DeferredComponent } from './DeferredComponent';

package/dist/components/logo/Logo.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 const sizeMap = {
     sm: { main: 24, side: 14 },
     md: { main: 40, side: 22 },
@@ -33,6 +32,16 @@ export const Logo = ({ size = 'md', customSize, sideColor = '#1E3A5F', centerCol
     // 콧구멍 크기 (호버시 커짐)
     const noseRx = centerHover && interactive ? 5.5 : 4;
     const noseRy = centerHover && interactive ? 8 : 6;
-    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" }) }))] }));
+    return (React.createElement("div", { style: styles.container, className: `logo ${className}`, onClick: onClick, role: onClick ? 'button' : undefined },
+        !centerOnly && (React.createElement("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) },
+            React.createElement("path", { d: "M 8 40 L 24 8 L 40 40", stroke: sideColor, strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }))),
+        React.createElement("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) },
+            React.createElement("rect", { x: "20", y: "2", width: "8", height: "16", rx: "4", fill: centerColor }),
+            React.createElement("rect", { x: "6", y: "16", width: "36", height: "6", rx: "3", fill: centerColor }),
+            React.createElement("ellipse", { cx: "24", cy: "36", rx: "18", ry: "12", fill: centerColor }),
+            React.createElement("ellipse", { cx: "17", cy: eyeY, rx: noseRx, ry: noseRy, fill: eyeColor, style: { transition: 'all 0.2s ease' } }),
+            React.createElement("ellipse", { cx: "31", cy: eyeY, rx: noseRx, ry: noseRy, fill: eyeColor, style: { transition: 'all 0.2s ease' } })),
+        !centerOnly && (React.createElement("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) },
+            React.createElement("path", { d: "M 8 40 L 24 8 L 40 40", stroke: sideColor, strokeWidth: "14", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })))));
 };
 export default Logo;

package/dist/components/modal/ModalContainer.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Modal Container - KOMCA 패턴
  * 모달 UI 렌더링
  */
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useModalContext } from './ModalContext';
 const ModalContainer = () => {
     const { modals, closeModal } = useModalContext();
@@ -47,11 +46,21 @@ const ModalContainer = () => {
         modal.onCancel?.();
         closeModal(modal.id, false);
     };
-    return (_jsxs(_Fragment, { children: [modals.map((modal, index) => (_jsx("div", { className: "modal-overlay", style: { zIndex: 10000 + index }, onClick: () => handleOverlayClick(modal), children: _jsx("div", { className: "modal-container", onClick: (e) => e.stopPropagation(), children: modal.content ? (
-                    // 커스텀 컨텐츠
-                    modal.content) : (
-                    // 기본 Alert/Confirm UI
-                    _jsxs(_Fragment, { children: [modal.title && (_jsx("div", { className: "modal-header", children: _jsx("h3", { className: "modal-title", children: modal.title }) })), _jsx("div", { className: "modal-body", children: _jsx("p", { className: "modal-message", children: modal.message }) }), _jsxs("div", { className: "modal-footer", children: [modal.type === 'confirm' && modal.cancelText && (_jsx("button", { className: "modal-button secondary", onClick: () => handleCancel(modal), children: modal.cancelText })), _jsx("button", { className: "modal-button primary", onClick: () => handleConfirm(modal), children: modal.confirmText || '확인' })] })] })) }) }, modal.id))), _jsx("style", { children: `
+    return (React.createElement(React.Fragment, null,
+        modals.map((modal, index) => (React.createElement("div", { key: modal.id, className: "modal-overlay", style: { zIndex: 10000 + index }, onClick: () => handleOverlayClick(modal) },
+            React.createElement("div", { className: "modal-container", onClick: (e) => e.stopPropagation() }, modal.content ? (
+            // 커스텀 컨텐츠
+            modal.content) : (
+            // 기본 Alert/Confirm UI
+            React.createElement(React.Fragment, null,
+                modal.title && (React.createElement("div", { className: "modal-header" },
+                    React.createElement("h3", { className: "modal-title" }, modal.title))),
+                React.createElement("div", { className: "modal-body" },
+                    React.createElement("p", { className: "modal-message" }, modal.message)),
+                React.createElement("div", { className: "modal-footer" },
+                    modal.type === 'confirm' && modal.cancelText && (React.createElement("button", { className: "modal-button secondary", onClick: () => handleCancel(modal) }, modal.cancelText)),
+                    React.createElement("button", { className: "modal-button primary", onClick: () => handleConfirm(modal) }, modal.confirmText || '확인')))))))),
+        React.createElement("style", null, `
                 .modal-overlay {
                     position: fixed;
                     top: 0;
@@ -156,6 +165,6 @@ const ModalContainer = () => {
                 .modal-button.secondary:hover {
                     background: #f3f4f6;
                 }
-            ` })] }));
+            `)));
 };
 export default ModalContainer;

package/dist/components/modal/ModalContext.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Modal Context - KOMCA 패턴
  * 전역 모달 상태 관리
  */
-import { createContext, useContext, useCallback, useState } from 'react';
+import React, { createContext, useContext, useCallback, useState } from 'react';
 const ModalContext = createContext(null);
 /**
  * Modal Provider
@@ -63,7 +62,7 @@ export const ModalProvider = ({ children }) => {
             ]);
         });
     }, []);
-    return (_jsx(ModalContext.Provider, { value: { modals, alert, confirm, openModal, closeModal, closeAll }, children: children }));
+    return (React.createElement(ModalContext.Provider, { value: { modals, alert, confirm, openModal, closeModal, closeAll } }, children));
 };
 /**
  * useModal Hook