podo-ui 0.4.3 → 0.5.0

package/README.ko.md

@@ -37,10 +37,11 @@ import 'podo-ui/vite-fonts.scss'; // Vite 사용 시
 
 ```tsx
 // Named imports로 개별 컴포넌트 가져오기
-import { Input, Textarea, Editor, EditorView, Field, Pagination } from 'podo-ui';
+import { Input, Textarea, Editor, EditorView, Avatar, Field, Pagination } from 'podo-ui';
 
 // 또는 개별 컴포넌트 직접 import (레거시 방식)
 import Input from 'podo-ui/react/atom/input';
+import Avatar from 'podo-ui/react/atom/avatar';
 import Field from 'podo-ui/react/molecule/field';
 ```
 
@@ -49,7 +50,7 @@ import Field from 'podo-ui/react/molecule/field';
 - CSS 클래스 기반 디자인 시스템
 - 반응형 그리드 시스템 (PC 12, Tablet 6, Mobile 4)
 - 색상 시스템 및 다크 모드 지원
-- React 컴포넌트 제공 (Input, Textarea, Editor, Field)
+- React 컴포넌트 제공 (Avatar, Input, Textarea, Editor, Field)
 
 ## 문서
 

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import Input from './react/atom/input';
 import Textarea from './react/atom/textarea';
 import Editor from './react/atom/editor';
 import EditorView from './react/atom/editor-view';
+import Avatar from './react/atom/avatar';
 import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
 declare const Form: {
@@ -12,5 +13,5 @@ declare const Form: {
     Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: import("./react/molecule/field").FieldProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Pagination, Field };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,QAAA,MAAM,IAAI;;;;;;CAMT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,QAAA,MAAM,IAAI;;;;;;CAMT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}

package/dist/index.js

@@ -2,6 +2,7 @@ import Input from './react/atom/input';
 import Textarea from './react/atom/textarea';
 import Editor from './react/atom/editor';
 import EditorView from './react/atom/editor-view';
+import Avatar from './react/atom/avatar';
 import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
 const Form = {
@@ -12,4 +13,4 @@ const Form = {
     Field,
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Pagination, Field };

package/dist/react/atom/avatar.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export interface AvatarProps {
+    /**
+     * Avatar type
+     * - image: Display user uploaded image
+     * - icon: Display system provided icon with background
+     * - text: Display user name or initials with background
+     */
+    type?: 'image' | 'icon' | 'text';
+    /**
+     * Image source URL (for type='image')
+     */
+    src?: string;
+    /**
+     * Icon class name (for type='icon')
+     * @default 'icon-user'
+     */
+    icon?: string;
+    /**
+     * Text content (for type='text')
+     * Will display first 2 characters if longer
+     * @example 'AB' or '보라'
+     */
+    text?: string;
+    /**
+     * Avatar size in pixels
+     * @default 56
+     */
+    size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56;
+    /**
+     * Show activity ring (indicates user is active)
+     * @default false
+     */
+    activityRing?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Alt text for image
+     */
+    alt?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/react/atom/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../react/atom/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAElD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmFjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/react/atom/avatar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './avatar.module.scss';
+const Avatar = ({ type = 'icon', src, icon = 'icon-user', text, size = 56, activityRing = false, className = '', alt = 'Avatar', onClick, }) => {
+    const wrapperClasses = [
+        styles.wrapper,
+        activityRing && styles.activityRing,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const avatarClasses = [
+        styles.avatar,
+        styles[`size-${size}`],
+        styles[`type-${type}`],
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Calculate wrapper size for activity ring
+    const wrapperSize = activityRing ? size + 10 : size;
+    // Format text to show only first 2 characters
+    const displayText = text ? text.slice(0, 2) : '';
+    // Calculate font size based on avatar size and type
+    const getFontSize = (contentType) => {
+        if (contentType === 'icon') {
+            // 아이콘: size={56}일 때 44px 기준 (약 78.5%)
+            const iconRatio = 0.785;
+            return Math.round(size * iconRatio);
+        }
+        else {
+            // 텍스트: size={56}일 때 display6(24px) 기준 (약 43%)
+            const textRatio = 0.43;
+            return Math.round(size * textRatio);
+        }
+    };
+    const renderContent = () => {
+        if (type === 'image' && src) {
+            return _jsx("img", { src: src, alt: alt, className: styles.image });
+        }
+        if (type === 'icon') {
+            return _jsx("i", { className: icon, style: { fontSize: getFontSize('icon') } });
+        }
+        if (type === 'text' && displayText) {
+            return _jsx("span", { style: { fontSize: getFontSize('text') }, children: displayText });
+        }
+        // Fallback to icon
+        return _jsx("i", { className: icon, style: { fontSize: getFontSize('icon') } });
+    };
+    return (_jsx("div", { className: wrapperClasses, style: { width: wrapperSize, height: wrapperSize }, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: _jsx("div", { className: avatarClasses, style: {
+                width: size,
+                height: size,
+                fontSize: type === 'text' ? getFontSize('text') : getFontSize('icon')
+            }, children: renderContent() }) }));
+};
+export default Avatar;

package/dist/react/atom/avatar.module.scss

@@ -0,0 +1,85 @@
+@use '../../../mixin' as *;
+
+.wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &[role="button"] {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
+
+.activityRing {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 3px solid color('primary');
+    border-radius: r(full);
+    pointer-events: none;
+  }
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: r(full);
+  overflow: hidden;
+  position: relative;
+  font-weight: 600;
+  user-select: none;
+
+  // Type variations
+  &.type-image {
+    background-color: transparent;
+  }
+
+  &.type-icon,
+  &.type-text {
+    background-color: color('border');
+    color: color('text-sub');
+  }
+
+  // Image inside avatar
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  // Icon styling
+  i[class^='icon-'],
+  i[class*=' icon-'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0 !important; // 전역 아이콘 margin 제거
+    font-size: inherit; // 부모로부터 font-size 상속
+
+    &::before {
+      font-size: inherit !important; // 전역 아이콘 font-size 오버라이드
+      line-height: 1;
+    }
+  }
+
+  // Text styling
+  span {
+    text-transform: uppercase;
+    line-height: 1;
+    font-size: inherit; // 부모로부터 font-size 상속
+  }
+}
+
+// Size classes for potential future use
+// Font sizes are now calculated dynamically in JavaScript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",

package/{README.md → readme.md}

@@ -37,10 +37,11 @@ import 'podo-ui/vite-fonts.scss'; // When using Vite
 
 ```tsx
 // Import individual components using named imports
-import { Input, Textarea, Editor, EditorView, Field, Pagination } from 'podo-ui';
+import { Input, Textarea, Editor, EditorView, Avatar, Field, Pagination } from 'podo-ui';
 
 // Or import components directly (legacy method)
 import Input from 'podo-ui/react/atom/input';
+import Avatar from 'podo-ui/react/atom/avatar';
 import Field from 'podo-ui/react/molecule/field';
 ```
 
@@ -49,7 +50,7 @@ import Field from 'podo-ui/react/molecule/field';
 - CSS class-based design system
 - Responsive grid system (PC 12, Tablet 6, Mobile 4)
 - Color system with dark mode support
-- React components (Input, Textarea, Editor, Field)
+- React components (Avatar, Input, Textarea, Editor, Field)
 
 ## Documentation