@sellmate/design-system 1.20.1 → 1.22.0

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -2,18 +2,27 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { TABLE_ID_ATTR } from "../constants";
 export class SdTd {
     el;
+    /** 데이터 필드명 (슬롯 이름 생성에 사용) */
     field;
+    /** 행 식별 키 */
     rowKey;
+    /** 셀 내용 정렬 */
     align;
+    /** 행 병합 수 */
     rowspan;
+    /** 열 병합 수 */
     colspan;
     // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
     // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
     // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
+    /** td에 병합할 사용자 클래스 */
     sdClass;
+    /** 좌측 구분선 표시 여부 */
     dividerLeft = false;
+    /** 우측 구분선 표시 여부 */
     dividerRight = false;
     // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
+    /** frame 레이아웃 사용 여부 */
     useFrame = false;
     handleFieldChange(_newField, oldField) {
         this.syncSlotName();
@@ -150,7 +159,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: 'ed5419d9190514381bb8fe43a8588c7d88983527', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '308d16388614375c94bd4c5efc8e173b56b4af2a' })));
+        return (h(Host, { key: 'd7cea28b006a4903fab00e7a709252e6009f911f', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '1d8695ff6c6890838e4b18ec4da1d7ff6a5c8858' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {
@@ -177,7 +186,7 @@ export class SdTd {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB370\uC774\uD130 \uD544\uB4DC\uBA85 (\uC2AC\uB86F \uC774\uB984 \uC0DD\uC131\uC5D0 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -196,7 +205,7 @@ export class SdTd {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uC2DD\uBCC4 \uD0A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -215,7 +224,7 @@ export class SdTd {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC140 \uB0B4\uC6A9 \uC815\uB82C"
                 },
                 "getter": false,
                 "setter": false,
@@ -234,7 +243,7 @@ export class SdTd {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uBCD1\uD569 \uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +262,7 @@ export class SdTd {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5F4 \uBCD1\uD569 \uC218"
                 },
                 "getter": false,
                 "setter": false,
@@ -272,7 +281,7 @@ export class SdTd {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "td\uC5D0 \uBCD1\uD569\uD560 \uC0AC\uC6A9\uC790 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -291,7 +300,7 @@ export class SdTd {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC88C\uCE21 \uAD6C\uBD84\uC120 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -311,7 +320,7 @@ export class SdTd {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC6B0\uCE21 \uAD6C\uBD84\uC120 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -331,7 +340,7 @@ export class SdTd {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "frame \uB808\uC774\uC544\uC6C3 \uC0AC\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-table/sd-thead/sd-thead.css

@@ -143,6 +143,27 @@ sd-thead * {
   background-color: var(--table-header-resizer-color, #CCCCCC);
 }
 
+.th__dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  border-radius: 2px;
+}
+.th__dropdown-trigger sd-icon {
+  transition: transform 0.15s ease;
+}
+.th__dropdown-trigger--open sd-icon {
+  transform: rotate(180deg);
+}
+
 .th__resizer {
   position: absolute;
   top: 50%;

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -3,15 +3,25 @@ import { TABLE_ID_ATTR, } from "../constants";
 import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, TABLE_SELECTABLE_COLUMN_WIDTH, } from "../sd-table.config";
 export class SdThead {
     el;
+    /** 테이블 컬럼 목록 */
     columns;
+    /** 행 선택 기능 사용 여부 */
     selectable;
+    /** 컬럼 너비 조절 가능 여부 */
     resizable;
+    /** 고정 컬럼 설정 */
     stickyColumn;
+    /** 헤더 고정 여부 */
     stickyHeader;
+    /** 좌측 스크롤 여부 */
     scrolledLeft;
+    /** 우측 스크롤 여부 */
     scrolledRight;
+    /** 전체 선택 체크박스용 행 데이터 */
     rows = [];
+    /** 컬럼 너비 목록 */
     columnWidths = [];
+    /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
     sdColumnSort;
     tableId = '';
     _columns = [];
@@ -21,14 +31,29 @@ export class SdThead {
     _stickyHeader = false;
     _scrolledLeft = false;
     _scrolledRight = false;
+    dropdownOpenMap = {};
     tableEl = null;
+    dropdownRefs = {};
+    dropdownThRefs = {};
+    dropdownPortals = {};
     handleColumnsChange(newCols) {
         if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
             this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
         }
     }
+    disconnectedCallback() {
+        const portals = this.dropdownPortals ?? {};
+        Object.values(portals).forEach(portal => {
+            if (portal?.parentNode != null)
+                portal.parentNode.removeChild(portal);
+        });
+    }
     componentWillLoad() {
         this.syncTableContext();
+        this.dropdownOpenMap = this.dropdownOpenMap ?? {};
+        this.dropdownRefs = this.dropdownRefs ?? {};
+        this.dropdownThRefs = this.dropdownThRefs ?? {};
+        this.dropdownPortals = this.dropdownPortals ?? {};
         this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
         this.resolveConfig();
         if ((this.columnWidths ?? []).length === 0) {
@@ -38,6 +63,36 @@ export class SdThead {
     componentDidLoad() {
         this.syncTableContext();
         this.resolveConfig();
+        this.initDropdownPortals();
+    }
+    // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
+    // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
+    initDropdownPortals() {
+        const cols = this._columns ?? [];
+        const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
+        if (hasDropdownCols.length === 0)
+            return;
+        for (const col of hasDropdownCols) {
+            const colName = col.name;
+            // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
+            if ((this.dropdownPortals ?? {})[colName] != null)
+                continue;
+            const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
+            if (slotContent == null)
+                continue;
+            // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
+            slotContent.removeAttribute('slot');
+            const portal = document.createElement('sd-portal');
+            portal.parentRef = this.dropdownThRefs[colName] ?? null;
+            portal.open = false;
+            // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
+            // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
+            portal.style.display = 'none';
+            portal.addEventListener('sdClose', () => this.closeDropdown(colName));
+            portal.appendChild(slotContent);
+            document.body.appendChild(portal);
+            this.dropdownPortals[colName] = portal;
+        }
     }
     syncTableContext() {
         // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
@@ -77,12 +132,16 @@ export class SdThead {
             this.columnWidths = [];
         }
     }
+    /** 테이블 설정을 다시 불러옵니다. */
     async refreshConfig() {
         this.resolveConfig();
+        this.initDropdownPortals();
     }
+    /** 컬럼 너비를 업데이트합니다. */
     async setColumnWidths(widths) {
         this.columnWidths = Array.isArray(widths) ? widths : [];
     }
+    /** 전체 선택 체크박스 상태를 갱신합니다. */
     async refreshSelection() {
         const checkbox = this.el.querySelector('sd-checkbox');
         if (checkbox) {
@@ -121,6 +180,28 @@ export class SdThead {
     handleColumnSort = (col) => {
         this.sdColumnSort.emit({ column: col });
     };
+    toggleDropdown(name) {
+        const isOpen = this.dropdownOpenMap[name] !== true;
+        const portals = this.dropdownPortals ?? {};
+        const newMap = { ...this.dropdownOpenMap };
+        // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
+        for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
+            const shouldBeOpen = col.name === name ? isOpen : false;
+            newMap[col.name] = shouldBeOpen;
+            const portal = portals[col.name];
+            if (portal != null)
+                portal.open = shouldBeOpen;
+        }
+        this.dropdownOpenMap = newMap;
+    }
+    closeDropdown(name) {
+        if (this.dropdownOpenMap[name] !== true)
+            return;
+        this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
+        const portal = (this.dropdownPortals ?? {})[name];
+        if (portal != null)
+            portal.open = false;
+    }
     handleSelectAll(checked) {
         const nextChecked = !!checked;
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
@@ -137,6 +218,8 @@ export class SdThead {
     }
     render() {
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
+        const dropdownOpenMap = this.dropdownOpenMap ?? {};
+        const dropdownRefs = this.dropdownRefs ?? {};
         const stickyLeftCount = this._stickyColumn.left || 0;
         const stickyRightCount = this._stickyColumn.right || 0;
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
@@ -158,22 +241,25 @@ export class SdThead {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: 'c25f6f9704c079d4cb93da7e65c8c15b6dedcb67', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'd91019378caafa2ec32dfa838eaa4d1fe815fb0d', class: {
+        return (h(Host, { key: '947f5e5b0e59e7e6f8a73e4fd44dbfa646cb630a', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '2e0ffbfe9d96528c6e0082d4883fa462a18831d6', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '84e581f5c564693d356f56525f57d6b1da211442', class: "tr" }, this._selectable && (h("th", { key: 'fb92e978229c32d560f46af4e90e0980c9c0a213', class: {
+            } }, h("tr", { key: '5843a18e1548bc6546e447d4c9213375116af0e9', class: "tr" }, this._selectable && (h("th", { key: '914024ca35874747e39f1819337cd4ad1cbe733d', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '157f59b56a4ef2a8529318c8beaf6f59b91e12f0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'b65e099ebe4940b26cc251961e66a375400f2379', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'e07232f1f5fa02589573ddaae53ebdadbdb97674', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: '08b504cfd4f420e76e91d649eed28c7068517044', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && idx !== lastColIdx && (
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
+                'th__dropdown-trigger': true,
+                'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
+            }, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
         // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
@@ -181,7 +267,10 @@ export class SdThead {
             return (h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && actualColIdx !== lastColIdx && (
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
+                    'th__dropdown-trigger': true,
+                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
+                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
@@ -193,7 +282,10 @@ export class SdThead {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
+                    'th__dropdown-trigger': true,
+                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
+                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
@@ -231,7 +323,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uC774\uBE14 \uCEEC\uB7FC \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false
@@ -248,7 +340,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uC120\uD0DD \uAE30\uB2A5 \uC0AC\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -267,7 +359,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCEEC\uB7FC \uB108\uBE44 \uC870\uC808 \uAC00\uB2A5 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -293,7 +385,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uACE0\uC815 \uCEEC\uB7FC \uC124\uC815"
                 },
                 "getter": false,
                 "setter": false
@@ -310,7 +402,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD5E4\uB354 \uACE0\uC815 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -329,7 +421,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC88C\uCE21 \uC2A4\uD06C\uB864 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -348,7 +440,7 @@ export class SdThead {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC6B0\uCE21 \uC2A4\uD06C\uB864 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -374,7 +466,7 @@ export class SdThead {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C\uBC15\uC2A4\uC6A9 \uD589 \uB370\uC774\uD130"
                 },
                 "getter": false,
                 "setter": false,
@@ -392,7 +484,7 @@ export class SdThead {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCEEC\uB7FC \uB108\uBE44 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -409,7 +501,8 @@ export class SdThead {
             "_stickyColumn": {},
             "_stickyHeader": {},
             "_scrolledLeft": {},
-            "_scrolledRight": {}
+            "_scrolledRight": {},
+            "dropdownOpenMap": {}
         };
     }
     static get events() {
@@ -421,7 +514,7 @@ export class SdThead {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCEEC\uB7FC \uC815\uB82C \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ column: SdTableColumn }",
@@ -452,7 +545,7 @@ export class SdThead {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD14C\uC774\uBE14 \uC124\uC815\uC744 \uB2E4\uC2DC \uBD88\uB7EC\uC635\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -473,7 +566,7 @@ export class SdThead {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uCEEC\uB7FC \uB108\uBE44\uB97C \uC5C5\uB370\uC774\uD2B8\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -490,7 +583,7 @@ export class SdThead {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C\uBC15\uC2A4 \uC0C1\uD0DC\uB97C \uAC31\uC2E0\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

package/dist/collection/components/sd-table/sd-tr/sd-tr.js

@@ -3,11 +3,17 @@ import { TABLE_ID_ATTR, } from "../constants";
 import { TABLE_BODY_LAYOUT, TABLE_BODY_TYPOGRAPHY, TABLE_BORDER, TABLE_SEPARATOR, } from "../sd-table.config";
 export class SdTr {
     el;
+    /** 테이블 컬럼 목록 */
     columns;
+    /** 행 선택 기능 사용 여부 */
     selectable;
+    /** 고정 컬럼 설정 */
     stickyColumn;
+    /** 행 식별 키 */
     rowKey = '';
+    /** 행 데이터 객체 */
     row = {};
+    /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
     separator = null;
     tableId = '';
     columnWidths = [];
@@ -60,12 +66,15 @@ export class SdTr {
             this.columnWidths = [...config.columnWidths];
         }
     }
+    /** 테이블 설정을 다시 불러옵니다. */
     async refreshConfig() {
         this.resolveConfig();
     }
+    /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
     async bumpSpansVersion() {
         this.spansVersion = this.spansVersion + 1;
     }
+    /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
     async updateVisibility() {
         this.updateVisibilitySync();
     }
@@ -78,9 +87,11 @@ export class SdTr {
         }
         this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
     }
+    /** 컬럼 너비를 업데이트합니다. */
     async setColumnWidths(widths) {
         this.columnWidths = widths;
     }
+    /** 체크박스 선택 상태를 갱신합니다. */
     async refreshSelection() {
         const checkbox = this.el.querySelector('sd-checkbox');
         if (checkbox) {
@@ -291,7 +302,7 @@ export class SdTr {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uC774\uBE14 \uCEEC\uB7FC \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false
@@ -308,7 +319,7 @@ export class SdTr {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uC120\uD0DD \uAE30\uB2A5 \uC0AC\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -334,7 +345,7 @@ export class SdTr {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uACE0\uC815 \uCEEC\uB7FC \uC124\uC815"
                 },
                 "getter": false,
                 "setter": false
@@ -351,7 +362,7 @@ export class SdTr {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uC2DD\uBCC4 \uD0A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -378,7 +389,7 @@ export class SdTr {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD589 \uB370\uC774\uD130 \uAC1D\uCCB4"
                 },
                 "getter": false,
                 "setter": false,
@@ -396,7 +407,7 @@ export class SdTr {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAD6C\uBD84\uC120 \uB192\uC774 (4 \uB610\uB294 6px, null\uC774\uBA74 \uC77C\uBC18 \uD589)"
                 },
                 "getter": false,
                 "setter": false,
@@ -435,7 +446,7 @@ export class SdTr {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD14C\uC774\uBE14 \uC124\uC815\uC744 \uB2E4\uC2DC \uBD88\uB7EC\uC635\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -452,7 +463,7 @@ export class SdTr {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC140 \uBCD1\uD569 \uBC84\uC804\uC744 \uAC31\uC2E0\uD574 td\uB97C \uC7AC\uB80C\uB354\uB9C1\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -469,7 +480,7 @@ export class SdTr {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD398\uC774\uC9C0\uB124\uC774\uC158\uC5D0 \uB530\uB978 \uD589 \uD45C\uC2DC \uC5EC\uBD80\uB97C \uAC31\uC2E0\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -490,7 +501,7 @@ export class SdTr {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uCEEC\uB7FC \uB108\uBE44\uB97C \uC5C5\uB370\uC774\uD2B8\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -507,7 +518,7 @@ export class SdTr {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uCCB4\uD06C\uBC15\uC2A4 \uC120\uD0DD \uC0C1\uD0DC\uB97C \uAC31\uC2E0\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }