@sonhoseong/mfa-lib 1.1.2 → 1.2.1

package/dist/components/index.d.ts

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

package/dist/components/index.js

@@ -10,3 +10,5 @@ export * from './error';
 export * from './modal';
 // Navigation
 export * from './navigation';
+// Logo
+export * from './logo';

package/dist/components/logo/Logo.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface LogoProps {
+    /** 크기 프리셋 */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** 커스텀 크기 (중앙 아이콘 기준 px) */
+    customSize?: number;
+    /** ㅅ 색상 */
+    sideColor?: string;
+    /** ㅎ 색상 */
+    centerColor?: string;
+    /** 눈 색상 */
+    eyeColor?: string;
+    /** 호버 효과 활성화 */
+    interactive?: boolean;
+    /** 클릭 핸들러 */
+    onClick?: () => void;
+    /** 커스텀 클래스 */
+    className?: string;
+}
+export declare const Logo: React.FC<LogoProps>;
+export default Logo;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/components/logo/Logo.d.ts.map

@@ -0,0 +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;CACpB;AASD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgIpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/logo/Logo.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const sizeMap = {
+    sm: { main: 24, side: 14 },
+    md: { main: 40, side: 22 },
+    lg: { main: 56, side: 32 },
+    xl: { main: 72, side: 42 },
+};
+export const Logo = ({ size = 'md', customSize, sideColor = '#1E3A5F', centerColor = '#0EA5E9', eyeColor = '#FFFFFF', interactive = true, onClick, className = '', }) => {
+    const [sideHover, setSideHover] = useState(false);
+    const [centerHover, setCenterHover] = useState(false);
+    const dimensions = customSize
+        ? { main: customSize, side: Math.round(customSize * 0.58) }
+        : sizeMap[size];
+    const styles = {
+        container: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: Math.round(dimensions.main * 0.2),
+            cursor: onClick ? 'pointer' : 'default',
+        },
+        side: {
+            cursor: interactive ? 'pointer' : 'default',
+            transition: 'transform 0.2s ease',
+        },
+        center: {
+            cursor: interactive ? 'pointer' : 'default',
+        },
+    };
+    // 눈 위치 (호버시 위로 이동)
+    const eyeY = sideHover && interactive ? 33 : 36;
+    // 콧구멍 크기 (호버시 커짐)
+    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: [_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: "10", 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: "10", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })] }));
+};
+export default Logo;

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

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

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

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

package/dist/components/logo/index.js

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

package/package.json

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