@wishket/design-system 1.10.1 → 1.10.3

package/dist/Components/Base/Layouts/Box/Box.js

@@ -1 +1,29 @@
-"use strict";var e=require("../../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("tailwind-merge");const a=require("react").forwardRef((a,i)=>{var{className:t,children:c,as:l="div"}=a,a=e.__rest(a,["className","children","as"]);return r.jsx(l,Object.assign({ref:i,className:s.twMerge("box-border",t)},a,{children:c}))});a.displayName="Box",module.exports=a;
+'use strict';
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+var react = require('react');
+
+/**
+ * @param {Object} props
+ * @param {ReactNode} props.children - 박스 내부에 렌더링할 컨텐츠
+ * @param {ElementType} [props.as='div'] - 렌더링할 HTML 요소
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */ const Box = react.forwardRef((_a, ref)=>{
+    var { className, children, as: Component = 'div' } = _a, rest = _tslib.__rest(_a, [
+        "className",
+        "children",
+        "as"
+    ]);
+    return jsxRuntime.jsx(Component, Object.assign({
+        ref: ref,
+        className: tailwindMerge.twMerge('box-border', className)
+    }, rest, {
+        children: children
+    }));
+});
+Box.displayName = 'Box';
+var Box$1 = Box;
+
+module.exports = Box$1;

package/dist/Components/Base/Layouts/Box/index.js

@@ -1 +1,7 @@
-"use strict";var e=require("./Box.js");module.exports=e;
+'use strict';
+
+var Box = require('./Box.js');
+
+
+
+module.exports = Box;

package/dist/Components/Base/Layouts/Column/Column.js

@@ -1 +1,43 @@
-"use strict";var s=require("react/jsx-runtime"),e=require("tailwind-merge");const a=["col-span-1","col-span-2","col-span-3","col-span-4","col-span-5","col-span-6","col-span-7","col-span-8","col-span-9","col-span-10","col-span-11"];module.exports=({container:c=!1,size:n=1,className:l,children:o})=>{return c?s.jsx("div",{"data-testid":"design-system-column--container",className:e.twMerge("grid auto-cols-1fr grid-flow-col",l),children:o}):s.jsx("div",{"data-testid":"design-system-column",className:e.twMerge((c=n,a[c-1]),l),children:o})};
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+
+const COLUMN_SIZES = [
+    'col-span-1',
+    'col-span-2',
+    'col-span-3',
+    'col-span-4',
+    'col-span-5',
+    'col-span-6',
+    'col-span-7',
+    'col-span-8',
+    'col-span-9',
+    'col-span-10',
+    'col-span-11'
+];
+/**
+ * 그리드 시스템 기반의 컬럼 레이아웃 컴포넌트
+ * @param {Object} props
+ * @param {boolean} [props.container] - 컨테이너 여부
+ * @param {number} [props.size] - 컬럼 크기 (1-11)
+ * @param {number} [props.leftColumnSize] - 왼쪽 컬럼 크기
+ * @param {number} [props.centerColumnSize] - 가운데 컬럼 크기
+ * @param {number} [props.rightColumnSize] - 오른쪽 컬럼 크기
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */ const Column = ({ container = false, size = 1, className, children })=>{
+    if (container) return jsxRuntime.jsx("div", {
+        "data-testid": "design-system-column--container",
+        className: tailwindMerge.twMerge('grid auto-cols-1fr grid-flow-col', className),
+        children: children
+    });
+    const generateColumnSize = (size)=>COLUMN_SIZES[size - 1];
+    return jsxRuntime.jsx("div", {
+        "data-testid": "design-system-column",
+        className: tailwindMerge.twMerge(generateColumnSize(size), className),
+        children: children
+    });
+};
+var Column$1 = Column;
+
+module.exports = Column$1;

package/dist/Components/Base/Layouts/Column/index.js

@@ -1 +1,7 @@
-"use strict";var e=require("./Column.js");module.exports=e;
+'use strict';
+
+var Column = require('./Column.js');
+
+
+
+module.exports = Column;

package/dist/Components/Base/Layouts/FullBleed/FullBleed.js

@@ -1,2 +1,66 @@
 'use client';
-"use strict";var e=require("../../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("react"),d=require("tailwind-merge"),l=require("./FullBleed.utils.js");const i=t.forwardRef((i,s)=>{var{className:r,insideContainerClassName:n,maxWidth:c="1200px",paddingAdjustment:m=8.5,children:p}=i,i=e.__rest(i,["className","insideContainerClassName","maxWidth","paddingAdjustment","children"]);const[x,g]=t.useState(()=>l.calculateScrollbarWidth()),o=l.getPaddingFromClassName(n,"mobile"),u=l.getPaddingFromClassName(n,"tablet"),f=l.getPaddingFromClassName(n,"desktop");t.useEffect(()=>{g(l.calculateScrollbarWidth())},[]);c={"--dynamic-padding-left-tablet":`max(${u.left||u.x}px, ${o.left||o.x}px)`,"--dynamic-padding-right-tablet":`max(${u.right||u.x}px, ${o.right||o.x}px)`,"--dynamic-padding-left-desktop":`calc(max(calc((100dvw - ${c})/2 + ${o.left||o.x}px + ${m}px), ${f.x}px))`,"--dynamic-padding-right-desktop":`calc(max(calc((100dvw - ${c})/2 + ${o.right||o.x}px + ${m}px), ${f.x}px))`},m={"--dynamic-bleed-width":`calc(100dvw - ${x}px)`};return a.jsx("div",{"data-testid":"design-system-full-bleed",children:a.jsx("div",{"data-testid":"design-system-full-bleed--container",className:d.twMerge("relative left-1/2 top-0 h-full w-[var(--dynamic-bleed-width)] -translate-x-1/2",r),style:m,children:a.jsx("div",Object.assign({"data-testid":"design-system-full-bleed--container-inside",className:d.twMerge("flex w-full overflow-x-auto px-5 scrollbar-hide","tablet:pl-[var(--dynamic-padding-left-tablet)] tablet:pr-[var(--dynamic-padding-right-tablet)]","desktop:pl-[var(--dynamic-padding-left-desktop)] desktop:pr-[var(--dynamic-padding-right-desktop)]",n),style:c,ref:s},i,{children:p}))})})});i.displayName="FullBleed",module.exports=i;
+'use strict';
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var tailwindMerge = require('tailwind-merge');
+var FullBleed_utils = require('./FullBleed.utils.js');
+
+/**
+ * 화면 전체 너비를 활용하는 레이아웃 컴포넌트
+ * @param {Object} props
+ * @param {ReactNode} props.children - 내부 컨텐츠
+ * @param {string} [props.maxWidth] - 최대 너비 설정
+ * @param {string} [props.className] - 외부 컨테이너 클래스
+ * @param {string} [props.insideContainerClassName] - 내부 컨테이너 클래스
+ * @param {string | number} [props.paddingAdjustment] - 패딩 보정값(단위 : px)
+ */ const FullBleed = react.forwardRef((_a, ref)=>{
+    var { className, insideContainerClassName, maxWidth = '1200px', paddingAdjustment = 8.5, children } = _a, rest = _tslib.__rest(_a, [
+        "className",
+        "insideContainerClassName",
+        "maxWidth",
+        "paddingAdjustment",
+        "children"
+    ]);
+    // TODO: 스크롤바 너비를 제외한 viewport width 계산을 더 나은 방식으로 할 수 있도록 개선(layout shift 방지)
+    const [scrollBarWidth, setScrollBarWidth] = react.useState(()=>{
+        const calculatedScrollbarWidth = FullBleed_utils.calculateScrollbarWidth();
+        return calculatedScrollbarWidth;
+    });
+    const mobilePadding = FullBleed_utils.getPaddingFromClassName(insideContainerClassName, 'mobile');
+    const tabletPadding = FullBleed_utils.getPaddingFromClassName(insideContainerClassName, 'tablet');
+    const desktopPadding = FullBleed_utils.getPaddingFromClassName(insideContainerClassName, 'desktop');
+    react.useEffect(()=>{
+        setScrollBarWidth(FullBleed_utils.calculateScrollbarWidth());
+    }, []);
+    const dynamicStyle = {
+        '--dynamic-padding-left-tablet': `max(${tabletPadding.left || tabletPadding.x}px, ${mobilePadding.left || mobilePadding.x}px)`,
+        '--dynamic-padding-right-tablet': `max(${tabletPadding.right || tabletPadding.x}px, ${mobilePadding.right || mobilePadding.x}px)`,
+        '--dynamic-padding-left-desktop': `calc(max(calc((100dvw - ${maxWidth})/2 + ${mobilePadding.left || mobilePadding.x}px + ${paddingAdjustment}px), ${desktopPadding.x}px))`,
+        '--dynamic-padding-right-desktop': `calc(max(calc((100dvw - ${maxWidth})/2 + ${mobilePadding.right || mobilePadding.x}px + ${paddingAdjustment}px), ${desktopPadding.x}px))`
+    };
+    const dynamicViewportWidth = {
+        '--dynamic-bleed-width': `calc(100dvw - ${scrollBarWidth}px)`
+    };
+    return jsxRuntime.jsx("div", {
+        "data-testid": "design-system-full-bleed",
+        children: jsxRuntime.jsx("div", {
+            "data-testid": "design-system-full-bleed--container",
+            className: tailwindMerge.twMerge(`relative left-1/2 top-0 h-full w-[var(--dynamic-bleed-width)] -translate-x-1/2`, className),
+            style: dynamicViewportWidth,
+            children: jsxRuntime.jsx("div", Object.assign({
+                "data-testid": "design-system-full-bleed--container-inside",
+                className: tailwindMerge.twMerge('flex w-full overflow-x-auto px-5 scrollbar-hide', 'tablet:pl-[var(--dynamic-padding-left-tablet)] tablet:pr-[var(--dynamic-padding-right-tablet)]', 'desktop:pl-[var(--dynamic-padding-left-desktop)] desktop:pr-[var(--dynamic-padding-right-desktop)]', insideContainerClassName),
+                style: dynamicStyle,
+                ref: ref
+            }, rest, {
+                children: children
+            }))
+        })
+    });
+});
+FullBleed.displayName = 'FullBleed';
+var FullBleed$1 = FullBleed;
+
+module.exports = FullBleed$1;

package/dist/Components/Base/Layouts/FullBleed/FullBleed.utils.js

@@ -1 +1,77 @@
-"use strict";const t=(e,i="mobile")=>{var r={mobile:{x:20,left:0,right:0},tablet:{x:20,left:0,right:0},desktop:{x:36,left:0,right:0}};if(!e){if("tablet"!==i)return r[i];{const i=t(e,"mobile");return{x:i.x,left:i.left,right:i.right}}}const l=e.split(" "),s="mobile"===i?"":i+":";if(!l.some(t=>t.startsWith(s+"px-")||t.startsWith(s+"pl-")||t.startsWith(s+"pr-"))&&"tablet"===i)return t(e,"mobile");const n=Object.assign({},r[i]),o=l.find(t=>t===s+"px-"+n.x/4||t.startsWith(s+"px-"));if(o){const t=4*Number(o.replace(s,"").replace("px-",""));n.x=t}e=l.find(t=>t.startsWith(s+"pl-"));if(e){const t=4*Number(e.replace(s,"").replace("pl-",""));n.left=t}r=l.find(t=>t.startsWith(s+"pr-"));if(r){const t=4*Number(r.replace(s,"").replace("pr-",""));n.right=t}return n};exports.calculateScrollbarWidth=()=>{var t,e;return"undefined"!=typeof window&&window.innerHeight<document.documentElement.scrollHeight?((t=document.createElement("div")).style.visibility="hidden",t.style.overflow="scroll",document.body.appendChild(t),e=document.createElement("div"),t.appendChild(e),t.offsetWidth-e.offsetWidth):0},exports.getPaddingFromClassName=t;
+'use strict';
+
+const getPaddingFromClassName = (className, type = 'mobile')=>{
+    const BASE_PADDING = {
+        mobile: {
+            x: 20,
+            left: 0,
+            right: 0
+        },
+        tablet: {
+            x: 20,
+            left: 0,
+            right: 0
+        },
+        desktop: {
+            x: 36,
+            left: 0,
+            right: 0
+        }
+    };
+    if (!className) {
+        if (type === 'tablet') {
+            const mobileValues = getPaddingFromClassName(className, 'mobile');
+            return {
+                x: mobileValues.x,
+                left: mobileValues.left,
+                right: mobileValues.right
+            };
+        }
+        return BASE_PADDING[type];
+    }
+    const classes = className.split(' ');
+    const prefix = type === 'mobile' ? '' : `${type}:`;
+    // 현재 타입의 클래스가 없으면 이전 타입의 값을 사용
+    const hasCurrentTypeClass = classes.some((cls)=>cls.startsWith(prefix + 'px-') || cls.startsWith(prefix + 'pl-') || cls.startsWith(prefix + 'pr-'));
+    if (!hasCurrentTypeClass) {
+        if (type === 'tablet') return getPaddingFromClassName(className, 'mobile');
+    }
+    const result = Object.assign({}, BASE_PADDING[type]);
+    // px 처리
+    const pxClass = classes.find((cls)=>cls === `${prefix}px-${result.x / 4}` || cls.startsWith(`${prefix}px-`));
+    if (pxClass) {
+        const value = Number(pxClass.replace(prefix, '').replace('px-', '')) * 4;
+        result.x = value;
+    }
+    // pl 처리
+    const plClass = classes.find((cls)=>cls.startsWith(`${prefix}pl-`));
+    if (plClass) {
+        const value = Number(plClass.replace(prefix, '').replace('pl-', '')) * 4;
+        result.left = value;
+    }
+    // pr 처리
+    const prClass = classes.find((cls)=>cls.startsWith(`${prefix}pr-`));
+    if (prClass) {
+        const value = Number(prClass.replace(prefix, '').replace('pr-', '')) * 4;
+        result.right = value;
+    }
+    return result;
+};
+const calculateScrollbarWidth = ()=>{
+    if (typeof window === 'undefined') return 0;
+    const hasScrollbar = window.innerHeight < document.documentElement.scrollHeight;
+    if (!hasScrollbar) {
+        return 0;
+    }
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll';
+    document.body.appendChild(outer);
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+    return scrollbarWidth;
+};
+
+exports.calculateScrollbarWidth = calculateScrollbarWidth;
+exports.getPaddingFromClassName = getPaddingFromClassName;

package/dist/Components/Base/Layouts/FullBleed/index.js

@@ -1 +1,7 @@
-"use strict";var e=require("./FullBleed.js");module.exports=e;
+'use strict';
+
+var FullBleed = require('./FullBleed.js');
+
+
+
+module.exports = FullBleed;

package/dist/Components/Base/Layouts/GridLayout/GridLayout.js

@@ -1 +1,31 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");module.exports=({children:a,gridTemplateAreaClass:r,testId:d})=>{return e.jsx("div",{className:t.twMerge("mx-auto grid w-full max-w-container auto-cols-1fr gap-x-5 px-5 desktop:gap-x-6 desktop:px-9",r||"grid-areas-default-mobile tablet:grid-areas-default-tablet desktop:grid-areas-default-desktop"),"data-testid":d,children:a})};
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+
+/**
+ * GridLayout 컴포넌트는 그리드 시스템을 구현하는 레이아웃 컴포넌트입니다.
+ * 반응형 디자인을 지원하며 모바일, 태블릿, 데스크톱 환경에 따라 다른 그리드 영역을 적용할 수 있습니다.
+ * tailwind.config에 정의된 그리드 영역을 사용할 수 있습니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - 그리드 레이아웃 내부에 렌더링될 자식 요소
+ * @param {string} [props.gridTemplateAreaClass] - 커스텀 그리드 템플릿 영역을 정의하는 CSS 클래스
+ * @param {string} [props.testId] - 테스트를 위한 데이터 테스트 ID
+ *
+ * @example
+ * <GridLayout gridTemplateAreaClass="custom-grid-areas">
+ *   <div>Content</div>
+ * </GridLayout>
+ */ const GridLayout = ({ children, gridTemplateAreaClass, testId })=>{
+    const gridTemplateAreas = gridTemplateAreaClass || 'grid-areas-default-mobile tablet:grid-areas-default-tablet desktop:grid-areas-default-desktop';
+    return jsxRuntime.jsx("div", {
+        className: tailwindMerge.twMerge('mx-auto grid w-full max-w-container auto-cols-1fr gap-x-5 px-5 desktop:gap-x-6 desktop:px-9', gridTemplateAreas),
+        "data-testid": testId,
+        children: children
+    });
+};
+var GridLayout$1 = GridLayout;
+
+module.exports = GridLayout$1;

package/dist/Components/Base/Layouts/GridLayout/index.js

@@ -1 +1,7 @@
-"use strict";var r=require("./GridLayout.js");module.exports=r;
+'use strict';
+
+var GridLayout = require('./GridLayout.js');
+
+
+
+module.exports = GridLayout;

package/dist/Components/Base/Typography/Typography.js

@@ -1 +1,83 @@
-"use strict";var t=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),a=require("tailwind-merge");const e=[{name:"title1",class:"typo-title1"},{name:"title2",class:"typo-title2"},{name:"title3",class:"typo-title3"},{name:"subTitle1",class:"typo-subTitle1"},{name:"subTitle2",class:"typo-subTitle2"},{name:"contents1",class:"typo-contents1"},{name:"contents2",class:"typo-contents2"},{name:"body1",class:"typo-body1"},{name:"body2",class:"typo-body2"},{name:"body3",class:"typo-body3"},{name:"caption1",class:"typo-caption1"},{name:"caption2",class:"typo-caption2"}];module.exports=n=>{var{children:l,variant:i,className:c,as:o="span"}=n,n=t.__rest(n,["children","variant","className","as"]),o=o||"span",r="span"===o,p=(null==(p=e.find(t=>t.name===i))?void 0:p.class)||"";return s.jsx(o,Object.assign({className:a.twMerge("tracking-default",r&&"inline-block",p,c)},n,{children:l}))};
+'use strict';
+
+var _tslib = require('../../../_virtual/_tslib.js');
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+
+const VARIANTS = [
+    {
+        name: 'title1',
+        class: 'typo-title1'
+    },
+    {
+        name: 'title2',
+        class: 'typo-title2'
+    },
+    {
+        name: 'title3',
+        class: 'typo-title3'
+    },
+    {
+        name: 'subTitle1',
+        class: 'typo-subTitle1'
+    },
+    {
+        name: 'subTitle2',
+        class: 'typo-subTitle2'
+    },
+    {
+        name: 'contents1',
+        class: 'typo-contents1'
+    },
+    {
+        name: 'contents2',
+        class: 'typo-contents2'
+    },
+    {
+        name: 'body1',
+        class: 'typo-body1'
+    },
+    {
+        name: 'body2',
+        class: 'typo-body2'
+    },
+    {
+        name: 'body3',
+        class: 'typo-body3'
+    },
+    {
+        name: 'caption1',
+        class: 'typo-caption1'
+    },
+    {
+        name: 'caption2',
+        class: 'typo-caption2'
+    }
+];
+/**
+ * Typography
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Typography 내부에 들어갈 컨텐츠
+ * @param {string} props.variant - 텍스트 스타일 variant ('title1' | 'title2' | 'title3' | 'subTitle1' | 'subTitle2' | 'contents1' | 'contents2' | 'body1' | 'body2' | 'body3' | 'caption1' | 'caption2')
+ * @param {string} [props.className] - 추가적인 CSS 클래스 (span일 경우 inline-block 기본적용)
+ * @param {keyof JSX.IntrinsicElements} [props.as='span'] - 렌더링할 HTML 요소
+ */ const Typography = (_a)=>{
+    var _b;
+    var { children, variant, className, as = 'span' } = _a, rest = _tslib.__rest(_a, [
+        "children",
+        "variant",
+        "className",
+        "as"
+    ]);
+    const Component = as || 'span';
+    const isSpan = Component === 'span';
+    const matchedVariantClass = ((_b = VARIANTS.find((eachVariant)=>eachVariant.name === variant)) === null || _b === void 0 ? void 0 : _b.class) || '';
+    return jsxRuntime.jsx(Component, Object.assign({
+        className: tailwindMerge.twMerge('tracking-default', isSpan && 'inline-block', matchedVariantClass, className)
+    }, rest, {
+        children: children
+    }));
+};
+var Typography$1 = Typography;
+
+module.exports = Typography$1;

package/dist/Components/Base/Typography/index.js

@@ -1 +1,7 @@
-"use strict";var r=require("./Typography.js");module.exports=r;
+'use strict';
+
+var Typography = require('./Typography.js');
+
+
+
+module.exports = Typography;

package/dist/Components/DataDisplays/Avatar/Avatar.js

@@ -1,2 +1,112 @@
 'use client';
-"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),a=require("react"),s=require("../SystemIcon/SystemIcon.js"),r=require("../../Base/Typography/Typography.js"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");const n=({size:t="md",name:i,imgUrl:n,isMonogram:l,avatarStyle:o})=>{const[d,m]=a.useState(!1),c=null==i?void 0:i.slice(0,1);return n&&!d?e.jsx("img",{src:n,alt:"",width:80,height:80,className:"h-full w-full","data-testid":"design-system-avatar--image",onError:()=>m(!0)}):l?e.jsx(r,{variant:o[t].char,className:"cursor-default select-none text-w-white",children:c}):e.jsx(s,{name:"large_user_image_avatar",className:"h-full w-full",testId:"design-system-avatar--default-image"})};var l=a.memo(({size:a="md",name:r,imgUrl:l,isEditable:o=!1,onClick:d})=>{var m=!l&&!!r,c={sm:{container:"size-[22px]",char:"caption1",editButton:"hidden"},md:{container:"size-8",char:"body1",editButton:"size-4"},lg:{container:"size-12",char:"title3",editButton:"size-5"},xl:{container:"size-20",char:"title2",editButton:"size-6"}};return e.jsxs(i,{className:t.twMerge("relative z-0 h-fit w-fit",o&&"cursor-pointer"),onClick:d,children:[e.jsx(i,{"data-testid":"design-system-avatar--container",className:t.twMerge(c[a].container,"flex items-center justify-center overflow-hidden rounded-full border border-w-gray-200"),children:e.jsx(n,{size:a,name:r,imgUrl:l,isMonogram:m,avatarStyle:c})}),!m&&o&&e.jsx(i,{className:t.twMerge("absolute -right-0.5 bottom-0 z-10 flex items-center justify-center rounded-full bg-w-white shadow-graysmall",c[a].editButton),"data-testid":"design-system-avatar--edit-button",children:e.jsx(s,{name:"small_camera",solid:!0,className:t.twJoin("md"===a&&"size-3"),testId:"design-system-avatar--edit-button-icon"})})]})});module.exports=l;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+var react = require('react');
+var SystemIcon = require('../SystemIcon/SystemIcon.js');
+var Box = require('../../Base/Layouts/Box/Box.js');
+var Typography = require('../../Base/Typography/Typography.js');
+
+const AvatarContent = ({ size = 'md', name, imgUrl, isMonogram, avatarStyle })=>{
+    const [imageLoadError, setImageLoadError] = react.useState(false);
+    const firstChar = name === null || name === void 0 ? void 0 : name.slice(0, 1);
+    const handleImageError = ()=>setImageLoadError(true);
+    if (imgUrl && !imageLoadError) {
+        return jsxRuntime.jsx("img", {
+            src: imgUrl,
+            alt: "",
+            width: 80,
+            height: 80,
+            className: "h-full w-full",
+            "data-testid": "design-system-avatar--image",
+            onError: handleImageError
+        });
+    }
+    if (isMonogram) {
+        return jsxRuntime.jsx(Typography, {
+            variant: avatarStyle[size].char,
+            className: "cursor-default select-none text-w-white",
+            children: firstChar
+        });
+    }
+    return jsxRuntime.jsx(SystemIcon, {
+        name: "large_user_image_avatar",
+        className: "h-full w-full",
+        testId: "design-system-avatar--default-image"
+    });
+};
+/**
+ * Avatar 컴포넌트는 사용자의 프로필 이미지, 모노그램, 또는 기본 아이콘을 표시합니다.
+ * @component
+ * @param {Object} props
+ * @param {AvatarSize} [props.size='md'] - 아바타 크기 ('sm' | 'md' | 'lg' | 'xl')
+ * @param {string} [props.name] - 이미지가 없을 경우 표시할 사용자 이름 (이니셜로 표시됨)
+ * @param {string} [props.imgUrl] - 아바타 이미지 URL
+ * @param {boolean} [props.isEditable=false] - 아바타 수정 아이콘 여부
+ * @param {() => void} [props.onClick] - 아바타 클릭 시 실행될 콜백 함수
+ * @returns {JSX.Element} Avatar component
+ * @example
+ * // Basic usage
+ * <Avatar name="John Doe" size="md" />
+ *
+ * // With image
+ * <Avatar imgUrl="/path/to/image.jpg" size="lg" />
+ *
+ * // Editable avatar
+ * <Avatar name="John Doe" isEditable={true} onClick={() => handleEdit()} />
+ */ const Avatar = ({ size = 'md', name, imgUrl, isEditable = false, onClick })=>{
+    const isMonogram = !imgUrl && !!name;
+    const avatarStyle = {
+        sm: {
+            container: 'size-[22px]',
+            char: 'caption1',
+            editButton: 'hidden'
+        },
+        md: {
+            container: 'size-8',
+            char: 'body1',
+            editButton: 'size-4'
+        },
+        lg: {
+            container: 'size-12',
+            char: 'title3',
+            editButton: 'size-5'
+        },
+        xl: {
+            container: 'size-20',
+            char: 'title2',
+            editButton: 'size-6'
+        }
+    };
+    return jsxRuntime.jsxs(Box, {
+        className: tailwindMerge.twMerge('relative z-0 h-fit w-fit', isEditable && 'cursor-pointer'),
+        onClick: onClick,
+        children: [
+            jsxRuntime.jsx(Box, {
+                "data-testid": "design-system-avatar--container",
+                className: tailwindMerge.twMerge(avatarStyle[size].container, 'flex items-center justify-center overflow-hidden rounded-full border border-w-gray-200', isMonogram && 'bg-primary'),
+                children: jsxRuntime.jsx(AvatarContent, {
+                    size: size,
+                    name: name,
+                    imgUrl: imgUrl,
+                    isMonogram: isMonogram,
+                    avatarStyle: avatarStyle
+                })
+            }),
+            !isMonogram && isEditable && jsxRuntime.jsx(Box, {
+                className: tailwindMerge.twMerge('absolute -right-0.5 bottom-0 z-10 flex items-center justify-center rounded-full bg-w-white shadow-graysmall', avatarStyle[size].editButton),
+                "data-testid": "design-system-avatar--edit-button",
+                children: jsxRuntime.jsx(SystemIcon, {
+                    name: "small_camera",
+                    solid: true,
+                    className: tailwindMerge.twJoin(size === 'md' && 'size-3'),
+                    testId: "design-system-avatar--edit-button-icon"
+                })
+            })
+        ]
+    });
+};
+var Avatar$1 = react.memo(Avatar);
+
+module.exports = Avatar$1;

package/dist/Components/DataDisplays/Avatar/index.js

@@ -1 +1,7 @@
-"use strict";var r=require("./Avatar.js");module.exports=r;
+'use strict';
+
+var Avatar = require('./Avatar.js');
+
+
+
+module.exports = Avatar;

package/dist/Components/DataDisplays/CountBadge/CountBadge.js

@@ -1 +1,60 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("tailwind-merge");module.exports=({text:t,className:r,variant:s="primary",showZero:i=!1})=>{var i=!i&&0==t||""===t,t=99<Number(t)?"99+":t,n={baseClass:"absolute box-border flex min-h-4 w-fit min-w-4 select-none items-center justify-center rounded-full px-1 py-px text-[11px] font-normal tracking-normal leading-none",matchedVariantClass:null==(n=[{name:"primary",className:"text-w-white bg-primary"},{name:"white_primary",className:"text-primary bg-w-white"},{name:"white_gray",className:"text-w-gray-600 bg-w-white"},{name:"gray",className:"text-w-gray-600 bg-w-gray-200"}].find(e=>e.name===s))?void 0:n.className,hiddenClass:i&&"hidden"};return e.jsx("span",{"data-testid":"design-system-count-badge",className:a.twMerge(n.baseClass,n.matchedVariantClass,n.hiddenClass,r),children:t})};
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+
+/**
+ * 숫자를 표시하는 뱃지 컴포넌트
+ *
+ * @component
+ * @param {object} props
+ * @param {string | number} props.text - 뱃지에 표시될 텍스트 또는 숫자, 0을 보여줄 때에는 String이어야 함
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {'primary' | 'white_primary' | 'white_gray' | 'gray'} [props.variant='primary'] - 뱃지의 스타일 변형
+ * @param {boolean} [props.showZero=false] - 값이 0일 때 뱃지를 표시할지 여부
+ *
+ * @example
+ * // 기본 사용법
+ * <CountBadge text="5" />
+ *
+ * // 0 표시하기
+ * <CountBadge text="0" showZero={true} />
+ *
+ * // 다른 스타일 변형 사용
+ * <CountBadge text="10" variant="white_primary" />
+ */ const CountBadge = ({ text, className, variant = 'primary', showZero = false })=>{
+    var _a;
+    const isHiddenBadgeText = !showZero && text == 0 || text === '';
+    const badgeNumber = Number(text) > 99 ? '99+' : text;
+    const VARIANTS = [
+        {
+            name: 'primary',
+            className: 'text-w-white bg-primary'
+        },
+        {
+            name: 'white_primary',
+            className: 'text-primary bg-w-white'
+        },
+        {
+            name: 'white_gray',
+            className: 'text-w-gray-600 bg-w-white'
+        },
+        {
+            name: 'gray',
+            className: 'text-w-gray-600 bg-w-gray-200'
+        }
+    ];
+    const badgeClasses = {
+        baseClass: 'absolute box-border flex min-h-4 w-fit min-w-4 select-none items-center justify-center rounded-full px-1 py-px text-[11px] font-normal tracking-normal leading-none',
+        matchedVariantClass: (_a = VARIANTS.find((eachVariant)=>eachVariant.name === variant)) === null || _a === void 0 ? void 0 : _a.className,
+        hiddenClass: isHiddenBadgeText && 'hidden'
+    };
+    return jsxRuntime.jsx("span", {
+        "data-testid": "design-system-count-badge",
+        className: tailwindMerge.twMerge(badgeClasses.baseClass, badgeClasses.matchedVariantClass, badgeClasses.hiddenClass, className),
+        children: badgeNumber
+    });
+};
+var CountBadge$1 = CountBadge;
+
+module.exports = CountBadge$1;

package/dist/Components/DataDisplays/CountBadge/index.js

@@ -1 +1,7 @@
-"use strict";var e=require("./CountBadge.js");module.exports=e;
+'use strict';
+
+var CountBadge = require('./CountBadge.js');
+
+
+
+module.exports = CountBadge;

package/dist/Components/DataDisplays/Divider/Divider.js

@@ -1 +1,31 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge");module.exports=({isVertical:s=!1,isSub:i=!1,className:a})=>e.jsx("div",{"data-testid":"design-system-divider",className:r.twMerge("flex-shrink-0",s?"h-full w-px":"h-px w-full",i?"bg-w-gray-100":"bg-w-gray-200",a)});
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
+
+/**
+ * 콘텐츠 사이에 시각적 구분선을 생성하는 컴포넌트
+ * @param {Object} props
+ * @param {boolean} [props.isVertical=false] - true일 경우 세로 구분선, false일 경우 가로 구분선
+ * @param {boolean} [props.isSub=false] - true일 경우 연한 회색, false일 경우 진한 회색 사용
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @returns {JSX.Element} 구분선 요소
+ * @example
+ * // 가로 구분선
+ * <Divider />
+ *
+ * // 세로 구분선
+ * <Divider isVertical />
+ *
+ * // 연한 회색의 구분선
+ * <Divider isSub />
+ *
+ */ const Divider = ({ isVertical = false, isSub = false, className })=>{
+    return jsxRuntime.jsx("div", {
+        "data-testid": "design-system-divider",
+        className: tailwindMerge.twMerge('flex-shrink-0', isVertical ? 'h-full w-px' : 'h-px w-full', isSub ? 'bg-w-gray-100' : 'bg-w-gray-200', className)
+    });
+};
+var Divider$1 = Divider;
+
+module.exports = Divider$1;

package/dist/Components/DataDisplays/Divider/index.js

@@ -1 +1,7 @@
-"use strict";var e=require("./Divider.js");module.exports=e;
+'use strict';
+
+var Divider = require('./Divider.js');
+
+
+
+module.exports = Divider;