@sellmate/design-system 1.20.0 → 1.21.0

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -1,12 +1,19 @@
 import { h } from "@stencil/core";
 export class SdFloatingPopover {
     el;
+    /** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
     to = 'body';
+    /** 위치 기준이 되는 부모 엘리먼트 */
     parentRef = null;
+    /** [x, y] 오프셋 (px) */
     offset = [0, 0];
-    zIndex = 998;
+    /** z-index */
+    zIndex = 996;
+    /** 콘텐츠를 표시할 방향 */
     placement = 'bottom';
+    /** 표시 여부 */
     open = false;
+    /** 외부 클릭 등으로 닫힐 때 발생합니다. */
     close;
     container;
     wrapper;
@@ -61,11 +68,25 @@ export class SdFloatingPopover {
         const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
         return el instanceof HTMLElement ? el : document.body;
     }
+    /**
+     * 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
+     * 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
+     */
+    resolveZIndex() {
+        const base = this.zIndex ?? 996;
+        const layer = this.parentRef?.closest('.sd-modal-container__layer');
+        if (!layer)
+            return base;
+        const container = layer.closest('.sd-modal-container');
+        const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
+        const modalZIndex = Number.isFinite(z) ? z : 997;
+        return Math.max(base, modalZIndex + 1);
+    }
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'fixed',
-            zIndex: (this.zIndex ?? 998).toString(),
+            zIndex: this.resolveZIndex().toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -152,7 +173,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '77829bed54180a72d233738d1f82d9996ae29cae' });
+        return h("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {
@@ -184,7 +205,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uD0C8 \uCF58\uD150\uCE20\uB97C \uB9C8\uC6B4\uD2B8\uD560 \uB300\uC0C1 (CSS \uC120\uD0DD\uC790 \uB610\uB294 HTMLElement)"
                 },
                 "getter": false,
                 "setter": false,
@@ -209,7 +230,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC704\uCE58 \uAE30\uC900\uC774 \uB418\uB294 \uBD80\uBAA8 \uC5D8\uB9AC\uBA3C\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -227,7 +248,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "[x, y] \uC624\uD504\uC14B (px)"
                 },
                 "getter": false,
                 "setter": false,
@@ -245,13 +266,13 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "z-index"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "z-index",
-                "defaultValue": "998"
+                "defaultValue": "996"
             },
             "placement": {
                 "type": "string",
@@ -265,7 +286,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCF58\uD150\uCE20\uB97C \uD45C\uC2DC\uD560 \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -285,7 +306,7 @@ export class SdFloatingPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -304,7 +325,7 @@ export class SdFloatingPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC678\uBD80 \uD074\uB9AD \uB4F1\uC73C\uB85C \uB2EB\uD790 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/sd-form/sd-form.js

@@ -1,8 +1,11 @@
 import { h } from "@stencil/core";
 export class SdForm {
+    /** form 엘리먼트에 추가할 클래스 */
     formClass = '';
     fields = [];
+    /** 유효성 검사 통과 후 submit 시 발생합니다. */
     sdSubmit;
+    /** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
     sdValidationError;
     sortFieldsByDomOrder() {
         this.fields.sort((a, b) => {
@@ -20,6 +23,7 @@ export class SdForm {
             return 0;
         });
     }
+    /** 폼에 필드를 등록합니다. */
     async sdRegisterField(field) {
         if (field.name === '') {
             console.warn('[sd-form] field.name is required');
@@ -30,6 +34,7 @@ export class SdForm {
         this.fields.push(field);
         this.sortFieldsByDomOrder();
     }
+    /** 폼에서 필드를 제거합니다. */
     async sdUnregisterField(fieldOrName) {
         if (typeof fieldOrName === 'string') {
             const index = this.fields.findIndex(field => field.name === fieldOrName);
@@ -50,13 +55,16 @@ export class SdForm {
         }
         return { valid: invalidFields.length === 0, invalidFields };
     }
+    /** 모든 등록된 필드의 유효성 검사를 실행합니다. */
     async sdValidate() {
         const { valid } = await this.runValidation();
         return valid;
     }
+    /** 모든 필드의 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.fields.forEach(f => f.sdReset());
     }
+    /** 모든 필드의 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.fields.forEach(f => f.sdResetValidation());
     }
@@ -70,7 +78,7 @@ export class SdForm {
         this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: 'd64dc85bce08da6a18f7dac5038a89f8bd7b5f01', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'a0c6d177cc4c656369714ff0ebc5269255d2c2b5' })));
+        return (h("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {
@@ -87,7 +95,7 @@ export class SdForm {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "form \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -106,7 +114,7 @@ export class SdForm {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uD1B5\uACFC \uD6C4 submit \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -121,7 +129,7 @@ export class SdForm {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uC2E4\uD328 \uC2DC \uC2E4\uD328\uD55C \uD544\uB4DC name \uBAA9\uB85D\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ names: string[] }",
@@ -154,7 +162,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD3FC\uC5D0 \uD544\uB4DC\uB97C \uB4F1\uB85D\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -180,7 +188,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD3FC\uC5D0\uC11C \uD544\uB4DC\uB97C \uC81C\uAC70\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -197,7 +205,7 @@ export class SdForm {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uBAA8\uB4E0 \uB4F1\uB85D\uB41C \uD544\uB4DC\uC758 \uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -214,7 +222,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uBAA8\uB4E0 \uD544\uB4DC\uC758 \uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -231,7 +239,7 @@ export class SdForm {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uBAA8\uB4E0 \uD544\uB4DC\uC758 \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -1,14 +1,21 @@
 import { h } from "@stencil/core";
 import { GHOST_BUTTON_CONTENT_COLORS, GHOST_BUTTON_DISABLED_COLORS, GHOST_BUTTON_FOCUS_RING_COLOR, GHOST_BUTTON_HOVER_BG_COLORS, GHOST_BUTTON_HOVER_OPACITY, GHOST_BUTTON_RADIUS, GHOST_BUTTON_SIZES, } from "./sd-ghost-button.config";
 export class SdGhostButton {
+    /** 버튼에 표시할 아이콘명 */
     icon;
+    /** 버튼 크기 */
     size = 'sm';
+    /** 버튼 색상 의도 */
     intent = 'default';
+    /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
+    /** 비활성 상태 여부 */
     disabled = false;
     hostEl;
     isTooltipOpen = false;
+    /** 버튼 클릭 시 발생합니다. */
     click;
     hasWarnedMissingAriaLabel = false;
     componentWillLoad() {
@@ -23,10 +30,18 @@ export class SdGhostButton {
         }
         this.click.emit(event);
     };
-    handleMouseEnter = () => { this.isTooltipOpen = true; };
-    handleMouseLeave = () => { this.isTooltipOpen = false; };
-    handleFocus = () => { this.isTooltipOpen = true; };
-    handleBlur = () => { this.isTooltipOpen = false; };
+    handleMouseEnter = () => {
+        this.isTooltipOpen = true;
+    };
+    handleMouseLeave = () => {
+        this.isTooltipOpen = false;
+    };
+    handleFocus = () => {
+        this.isTooltipOpen = true;
+    };
+    handleBlur = () => {
+        this.isTooltipOpen = false;
+    };
     componentWillRender() {
         this.warnIfMissingAriaLabel();
     }
@@ -51,7 +66,7 @@ export class SdGhostButton {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (h("button", { key: '59b95275f6acd737d4b0d5c2187e1d40b3a6543f', class: {
+        return (h("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -60,7 +75,7 @@ export class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: 'd8ca94b6a931208c2c56eb2dbfee843935c6b666', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '450d5dc528ad4eeb4a2a0d2920fe4553ab3f91f8', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'cc25d0e2794d3d4dc418b0c0aa1a57e4b76b56e1', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'bf9bf8bcc779011635fd34566ec7320d76f8d16b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: '36ef78d79a99da1fd26c282ef68293b9fb9f87b1', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: 'a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'a263167142b891add0a32900504f541dcb3a4959', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'ba90e9b489b4f43577313052635db598e3d30037', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -92,7 +107,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC\uC5D0 \uD45C\uC2DC\uD560 \uC544\uC774\uCF58\uBA85"
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +133,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -145,7 +160,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uC0C9\uC0C1 \uC758\uB3C4"
                 },
                 "getter": false,
                 "setter": false,
@@ -165,7 +180,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC2A4\uD06C\uB9B0\uB9AC\uB354\uC6A9 \uC811\uADFC\uC131 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -185,7 +200,7 @@ export class SdGhostButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC2DC \uD45C\uC2DC\uD560 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -204,7 +219,7 @@ export class SdGhostButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -228,7 +243,7 @@ export class SdGhostButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "MouseEvent",

package/dist/collection/components/sd-guide/sd-guide.js

@@ -11,11 +11,17 @@ const ICON_BY_TYPE = {
 };
 export class SdGuide {
     el;
+    /** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
     type = 'tip';
+    /** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
     label = '';
+    /** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
     message = '';
+    /** notion 타입일 때 클릭 시 이동할 URL */
     url = '';
+    /** 팝업 제목 (없으면 type에 따른 기본값 사용) */
     popupTitle = '';
+    /** 팝업 너비 (px, 없으면 426px) */
     popupWidth;
     popupShow = false;
     guideRef;
@@ -77,10 +83,10 @@ export class SdGuide {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '94e12fa797748a02334b97e13c5012ab95bc2bce', class: "sd-guide__popup", style: {
+        return (h("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: '6fc71032016e7a3be0581508ef0ecc6772981185', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '385c0c18bc888be6a654525dc6f4359a56ad6de9', class: "sd-guide__popup__header" }, h("sd-icon", { key: '34624d2ac3397ba15b2dc7ba23dc460a87cb878b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'dd3527ec329698b0fd1ec82f2a7d0cf5865802c2', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '429357d0203acdf31177353ceb45d9ac41fadae7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            } }, h("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -128,7 +134,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC00\uC774\uB4DC \uD0C0\uC785 (tip: \uD31D\uC5C5, notion: \uC678\uBD80 \uB9C1\uD06C)"
                 },
                 "getter": false,
                 "setter": false,
@@ -148,7 +154,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC\uC5D0 \uD45C\uC2DC\uD560 \uB808\uC774\uBE14 (\uC5C6\uC73C\uBA74 type\uC5D0 \uB530\uB978 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -168,7 +174,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5\uC5D0 \uD45C\uC2DC\uD560 \uBA54\uC2DC\uC9C0 (\uBC30\uC5F4\uC774\uBA74 \uB9AC\uC2A4\uD2B8\uB85C \uB80C\uB354\uB9C1)"
                 },
                 "getter": false,
                 "setter": false,
@@ -188,7 +194,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "notion \uD0C0\uC785\uC77C \uB54C \uD074\uB9AD \uC2DC \uC774\uB3D9\uD560 URL"
                 },
                 "getter": false,
                 "setter": false,
@@ -208,7 +214,7 @@ export class SdGuide {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5 \uC81C\uBAA9 (\uC5C6\uC73C\uBA74 type\uC5D0 \uB530\uB978 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -228,7 +234,7 @@ export class SdGuide {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD31D\uC5C5 \uB108\uBE44 (px, \uC5C6\uC73C\uBA74 426px)"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-icon/sd-icon.js

@@ -12,6 +12,7 @@ export class SdIcon {
     rotate;
     /** 접근성을 위한 라벨 */
     label;
+    /** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
     iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];
@@ -161,7 +162,7 @@ export class SdIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC544\uC774\uCF58 i \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uC801\uC6A9\uD560 \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C"
                 },
                 "getter": false,
                 "setter": false,