@sellmate/design-system 0.0.33 → 0.0.35

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

@@ -0,0 +1,2743 @@
+import { h, Host, } from "@stencil/core";
+export class SdTable {
+    el;
+    columns;
+    rows;
+    selected = new Set();
+    rowKey = 'id';
+    selectable = false;
+    resizable = false;
+    width;
+    height;
+    stickyHeader = false;
+    stickyColumn = { left: 0, right: 0 };
+    noDataLabel = '데이터가 없습니다.';
+    isLoading = false;
+    pagination;
+    bodyCellRenderer;
+    useInternalPagination = false;
+    useRowsPerPageSelect = false;
+    rowsPerPageOption = [
+        { label: '10개씩 보기', value: 10 },
+        { label: '25개씩 보기', value: 25 },
+        { label: '50개씩 보기', value: 50 },
+        { label: '100개씩 보기', value: 100 },
+    ];
+    sdSelectChange;
+    sdPageChange;
+    sdRowsPerPageChange;
+    currentPage = this.pagination?.page || 1;
+    innerRows = [];
+    innerSelected = new Set();
+    columnWidths = [];
+    scrolledLeft = false;
+    scrolledRight = false;
+    handleColumnsChange(newCols) {
+        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+    }
+    handleRowsChange(newRows) {
+        this.innerRows = [...newRows];
+    }
+    handleSelectedChange(newSelected) {
+        this.innerSelected = new Set(newSelected);
+    }
+    handlePaginationChange(newVal) {
+        if (newVal?.page && newVal.page !== this.currentPage)
+            this.currentPage = newVal.page;
+    }
+    componentWillLoad() {
+        this.innerRows = [...(this.rows || [])];
+        this.innerSelected = new Set(this.selected);
+        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+    }
+    componentDidLoad() {
+        // SSR 환경 체크
+        if (typeof window === 'undefined')
+            return;
+        const middle = this.el.querySelector('.sd-table__middle');
+        if (!middle)
+            return;
+        const onScroll = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = middle;
+            this.scrolledLeft = scrollLeft > 0;
+            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
+        };
+        middle.addEventListener('scroll', onScroll, { passive: true });
+        onScroll();
+    }
+    // ----- Derived getters -----
+    get visibleColumns() {
+        return this.columns.filter(col => col.visible !== false);
+    }
+    get paginatedRows() {
+        if (!this.pagination || !this.useInternalPagination)
+            return this.innerRows;
+        const { rowsPerPage = this.rows.length } = this.pagination || {};
+        const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
+        return result;
+    }
+    get lastPageNumber() {
+        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
+        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
+    }
+    get sdTableClasses() {
+        return [
+            'sd-table',
+            this.stickyHeader && 'sd-table--sticky-header',
+            this.selectable && 'sd-table--selectable',
+            this.resizable && 'sd-table--resizable',
+            !this.innerRows.length && 'sd-table--no-data',
+            ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
+                'sd-table--sticky-column',
+            this.scrolledLeft && 'sd-table--scrolled-left',
+            this.scrolledRight && 'sd-table--scrolled-right',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ----- Selection -----
+    isRowSelected(row) {
+        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+    }
+    updateRowSelect(row) {
+        const selectedArray = Array.from(this.innerSelected);
+        const exists = this.isRowSelected(row);
+        const newSelected = exists
+            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            : [...selectedArray, row];
+        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
+        if (newSelected.length === selectedArray.length)
+            return;
+        this.innerSelected = new Set(newSelected);
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
+    toggleSelectAll(checked) {
+        if (checked) {
+            const pageRows = new Set([...this.paginatedRows]);
+            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
+        }
+        else {
+            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
+            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+        }
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
+    get isAllChecked() {
+        const total = this.paginatedRows.length;
+        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        if (selectedCount === 0)
+            return false; // 아무것도 안 선택됨
+        if (selectedCount === total)
+            return true; // 전부 선택됨
+        return null; // 일부만 선택됨
+    }
+    // ----- Helpers -----
+    getStickyStyle(colIdx) {
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    handleResize(index, event) {
+        // SSR 환경 체크
+        if (typeof document === 'undefined')
+            return;
+        const startX = event.clientX;
+        const startWidth = this.columnWidths[index];
+        const handleMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
+            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    getCellValue(column, row) {
+        const { field, format, name } = column;
+        const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
+        return format ? format(value, row) : value;
+    }
+    // ----- Render -----
+    renderHeader() {
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
+                'sd-th': true,
+                'sd-th--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("th", { key: col.name, class: {
+                'sd-th': true,
+                [`${col.thClass}`]: Boolean(col.thClass),
+                'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
+                'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
+                'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
+                'sticky-right-edge': Boolean(this.stickyColumn.right &&
+                    colIdx === this.visibleColumns.length - this.stickyColumn.right),
+            }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
+    }
+    renderBody() {
+        return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), !this.paginatedRows.length ? (h("tr", null, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("slot", { name: "no-data" }, this.noDataLabel)))) : (this.paginatedRows.map((row, rowIdx) => (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (h("td", { class: {
+                'sd-td': true,
+                'sd-td--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
+            const rendered = this.bodyCellRenderer?.(column, row);
+            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
+                    'sd-td': true,
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
+                    'sticky-right': Boolean(this.stickyColumn.right &&
+                        colIdx >= this.visibleColumns.length - this.stickyColumn.right),
+                    'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
+                    'sticky-right-edge': Boolean(this.stickyColumn.right &&
+                        colIdx === this.visibleColumns.length - this.stickyColumn.right),
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        })))))));
+    }
+    render() {
+        return (h(Host, { key: '0ac0006dea3c0e4cde082f8b396513234ac60749' }, h("div", { key: '36aa811fed020945b72ab21c9318a03c3595d0d2', class: "sd-table__wrapper", style: {
+                '--table-width': this.width,
+                '--table-height': this.height,
+            } }, h("div", { key: 'd785153b7c08bbe1250dcb389b66c624382bdfd2', class: "sd-table__container" }, h("div", { key: '034db5c0eb677a87d6fa3a84d824c6e5078676ea', class: "sd-table__middle" }, h("table", { key: '43841e0ed748a887156b3ba80038602ddb8fd207', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: '391f134001037c03a39f1c428681053aa8004a11', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '73e38e427afc2ff69fd5adea0057d30351ade0fc', class: "sd-table__pagination" }, h("sd-pagination", { key: '61e9c37239109c493d03d731bd0643670325cf97', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+                if (!this.useInternalPagination) {
+                    this.sdPageChange.emit(e.detail);
+                }
+                else {
+                    this.currentPage = e.detail;
+                    this.sdPageChange.emit(this.currentPage);
+                }
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ce5ea8221b621ab7f67558a2be228f473c22cca6', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
+                if (!this.useInternalPagination) {
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+                else {
+                    const newRowsPerPage = Number(e.detail.value || 0);
+                    let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
+                    let newCurrentPage = this.currentPage;
+                    if (newCurrentPage > newLastPage) {
+                        newCurrentPage = newLastPage;
+                    }
+                    this.pagination = {
+                        page: newCurrentPage,
+                        rowsPerPage: newRowsPerPage,
+                        lastPage: newLastPage,
+                    };
+                    this.currentPage = newCurrentPage;
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+            } })))))));
+    }
+    static get is() { return "sd-table-backup"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTableColumn[]",
+                    "resolved": "SdTableColumn[]",
+                    "references": {
+                        "SdTableColumn": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table-backup.tsx",
+                            "id": "src/components/sd-table/sd-table-backup.tsx::SdTableColumn"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Row[]",
+                    "resolved": "Row[]",
+                    "references": {
+                        "Row": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table-backup.tsx",
+                            "id": "src/components/sd-table/sd-table-backup.tsx::Row"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selected": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Set<Row>",
+                    "resolved": "Set<Row>",
+                    "references": {
+                        "Set": {
+                            "location": "global",
+                            "id": "global::Set"
+                        },
+                        "Row": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table-backup.tsx",
+                            "id": "src/components/sd-table/sd-table-backup.tsx::Row"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new Set()"
+            },
+            "rowKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-key",
+                "defaultValue": "'id'"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "stickyHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-header",
+                "defaultValue": "false"
+            },
+            "stickyColumn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ left?: number; right?: number }",
+                    "resolved": "{ left?: number | undefined; right?: number | undefined; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ left: 0, right: 0 }"
+            },
+            "noDataLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-data-label",
+                "defaultValue": "'\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.'"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading",
+                "defaultValue": "false"
+            },
+            "pagination": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n  page: number;\n  rowsPerPage: number;\n  lastPage?: number;\n }",
+                    "resolved": "undefined | { page: number; rowsPerPage: number; lastPage?: number | undefined; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "bodyCellRenderer": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n  column: SdTableColumn,\n  row: Row,\n ) => HTMLElement | string | null | undefined",
+                    "resolved": "((column: SdTableColumn, row: Row) => string | HTMLElement | null | undefined) | undefined",
+                    "references": {
+                        "SdTableColumn": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table-backup.tsx",
+                            "id": "src/components/sd-table/sd-table-backup.tsx::SdTableColumn"
+                        },
+                        "Row": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table-backup.tsx",
+                            "id": "src/components/sd-table/sd-table-backup.tsx::Row"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "useInternalPagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-internal-pagination",
+                "defaultValue": "false"
+            },
+            "useRowsPerPageSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-rows-per-page-select",
+                "defaultValue": "false"
+            },
+            "rowsPerPageOption": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectOption[]",
+                    "resolved": "SelectOption[]",
+                    "references": {
+                        "SelectOption": {
+                            "location": "import",
+                            "path": "../sd-select/sd-select",
+                            "id": "src/components/sd-select/sd-select.tsx::SelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n  { label: '10\uAC1C\uC529 \uBCF4\uAE30', value: 10 },\n  { label: '25\uAC1C\uC529 \uBCF4\uAE30', value: 25 },\n  { label: '50\uAC1C\uC529 \uBCF4\uAE30', value: 50 },\n  { label: '100\uAC1C\uC529 \uBCF4\uAE30', value: 100 },\n ]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentPage": {},
+            "innerRows": {},
+            "innerSelected": {},
+            "columnWidths": {},
+            "scrolledLeft": {},
+            "scrolledRight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdSelectChange",
+                "name": "sdSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Row[]",
+                    "resolved": "Row[]",
+                    "references": {
+                        "Row": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-table/sd-table-backup.tsx",
+                            "id": "src/components/sd-table/sd-table-backup.tsx::Row"
+                        }
+                    }
+                }
+            }, {
+                "method": "sdPageChange",
+                "name": "sdPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "sdRowsPerPageChange",
+                "name": "sdRowsPerPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "handleColumnsChange"
+            }, {
+                "propName": "rows",
+                "methodName": "handleRowsChange"
+            }, {
+                "propName": "selected",
+                "methodName": "handleSelectedChange"
+            }, {
+                "propName": "pagination",
+                "methodName": "handlePaginationChange"
+            }];
+    }
+}
+// <div
+//  style="
+//   width: 100%;
+//   height: 600px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   gap: 40px;
+//   margin-top: 100px;
+//  "
+// >
+//  <sd-table id="sd-table-1" use-rows-per-page-select></sd-table>
+//  <button id="test">시작</button>
+// </div>
+// document.addEventListener('DOMContentLoaded', event => {
+//     const table = document.getElementById('sd-table-1');
+//     const test = document.getElementById('test');
+//     table.pagination = {
+//      page: 1,
+//      rowsPerPage: 50,
+//      totalItems: 0,
+//      lastPage: 1,
+//     };
+//     table.rows = [];
+//     const ROWS = [
+//      {
+//       'id': 1,
+//       'productInfo': {
+//        name: 'Oversized Wool Autumn Jacket',
+//        property: '블랙, OS',
+//        barcode: [{ code: '123456789013456789' }],
+//        code: 'OUTJK002BLKM',
+//        category: '의류 > 아우터 > 자켓',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 150000,
+//       'totalStock': 5200,
+//       'movingStock': 250,
+//       'unshippedStock': 100,
+//       '본사 창고': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//       '롯데 백화점 잠실점': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//      },
+//      {
+//       'id': 2,
+//       'productInfo': {
+//        name: 'Cotton Basic T-Shirt',
+//        property: '화이트, L',
+//        barcode: [{ code: '123456789013456780' }],
+//        code: 'TSHRT001WHTL',
+//        category: '의류 > 상의 > 티셔츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 25000,
+//       'totalStock': 8500,
+//       'movingStock': 400,
+//       'unshippedStock': 150,
+//       '본사 창고': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//       '롯데 백화점 잠실점': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//      },
+//      {
+//       'id': 3,
+//       'productInfo': {
+//        name: 'Denim Straight Jeans',
+//        property: '네이비, 30',
+//        barcode: [{ code: '123456789013456781' }],
+//        code: 'JEANS001NAVY30',
+//        category: '의류 > 하의 > 청바지',
+//        season: '2025 (F/W)',
+//        isDeleted: true,
+//       },
+//       'avgCost': 89000,
+//       'totalStock': 3200,
+//       'movingStock': 180,
+//       'unshippedStock': 80,
+//       '본사 창고': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//       'ABC 창고 (한솔 로지스틱스)': {
+//        total: 2000,
+//        scheduled: 100,
+//       },
+//       '롯데 백화점 잠실점': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//      },
+//      {
+//       'id': 4,
+//       'productInfo': {
+//        name: 'Leather Ankle Boots',
+//        property: '브라운, 250',
+//        barcode: [{ code: '123456789013456782' }],
+//        code: 'BOOTS001BRN250',
+//        category: '신발 > 부츠 > 앵클부츠',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 180000,
+//       'totalStock': 1800,
+//       'movingStock': 120,
+//       'unshippedStock': 60,
+//       '본사 창고': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//       '롯데 백화점 잠실점': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//      },
+//      {
+//       'id': 5,
+//       'productInfo': {
+//        name: 'Cashmere Wool Scarf',
+//        property: '그레이, OS',
+//        barcode: [{ code: '123456789013456783' }],
+//        code: 'SCARF001GRAY',
+//        category: '액세서리 > 머플러 > 캐시미어',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 75000,
+//       'totalStock': 2400,
+//       'movingStock': 140,
+//       'unshippedStock': 70,
+//       '본사 창고': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//       '롯데 백화점 잠실점': {
+//        total: 100000,
+//        scheduled: 5000,
+//       },
+//      },
+//      {
+//       'id': 6,
+//       'productInfo': {
+//        name: 'Minimalist Watch',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456784' }],
+//        code: 'WATCH001SLV',
+//        category: '액세서리 > 시계 > 손목시계',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 120000,
+//       'totalStock': 950,
+//       'movingStock': 85,
+//       'unshippedStock': 40,
+//       '본사 창고': {
+//        total: 65000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 7,
+//       'productInfo': {
+//        name: 'Sports Running Shoes',
+//        property: '블랙, 270',
+//        barcode: [{ code: '123456789013456785' }],
+//        code: 'SHOES001BLK270',
+//        category: '신발 > 운동화 > 러닝화',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 95000,
+//       'totalStock': 4200,
+//       'movingStock': 320,
+//       'unshippedStock': 160,
+//       '본사 창고': {
+//        total: 110000,
+//        scheduled: 5500,
+//       },
+//      },
+//      {
+//       'id': 8,
+//       'productInfo': {
+//        name: 'Silk Blouse',
+//        property: '크림, M',
+//        barcode: [{ code: '123456789013456786' }],
+//        code: 'BLOUSE001CRM',
+//        category: '의류 > 상의 > 블라우스',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 135000,
+//       'totalStock': 1600,
+//       'movingStock': 95,
+//       'unshippedStock': 45,
+//       '본사 창고': {
+//        total: 72000,
+//        scheduled: 3100,
+//       },
+//      },
+//      {
+//       'id': 9,
+//       'productInfo': {
+//        name: 'Canvas Tote Bag',
+//        property: '베이지, L',
+//        barcode: [{ code: '123456789013456787' }],
+//        code: 'BAG001BGEL',
+//        category: '가방 > 토트백 > 캔버스',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 45000,
+//       'totalStock': 3800,
+//       'movingStock': 280,
+//       'unshippedStock': 140,
+//       '본사 창고': {
+//        total: 88000,
+//        scheduled: 4800,
+//       },
+//      },
+//      {
+//       'id': 10,
+//       'productInfo': {
+//        name: 'Wool Knit Sweater',
+//        property: '차콜, XL',
+//        barcode: [{ code: '123456789013456788' }],
+//        code: 'KNIT001CHRXL',
+//        category: '의류 > 상의 > 니트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 98000,
+//       'totalStock': 2800,
+//       'movingStock': 190,
+//       'unshippedStock': 95,
+//       '본사 창고': {
+//        total: 76000,
+//        scheduled: 3800,
+//       },
+//      },
+//      {
+//       'id': 11,
+//       'productInfo': {
+//        name: 'Baseball Cap',
+//        property: '네이비, OS',
+//        barcode: [{ code: '123456789013456789' }],
+//        code: 'CAP001NAVY',
+//        category: '액세서리 > 모자 > 야구모자',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 35000,
+//       'totalStock': 5400,
+//       'movingStock': 380,
+//       'unshippedStock': 190,
+//       '본사 창고': {
+//        total: 125000,
+//        scheduled: 6200,
+//       },
+//      },
+//      {
+//       'id': 12,
+//       'productInfo': {
+//        name: 'Pleated Mini Skirt',
+//        property: '체크, S',
+//        barcode: [{ code: '123456789013456790' }],
+//        code: 'SKIRT001CHKS',
+//        category: '의류 > 하의 > 스커트',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 68000,
+//       'totalStock': 2200,
+//       'movingStock': 165,
+//       'unshippedStock': 82,
+//       '본사 창고': {
+//        total: 69000,
+//        scheduled: 3400,
+//       },
+//      },
+//      {
+//       'id': 13,
+//       'productInfo': {
+//        name: 'Leather Belt',
+//        property: '블랙, 95',
+//        barcode: [{ code: '123456789013456791' }],
+//        code: 'BELT001BLK95',
+//        category: '액세서리 > 벨트 > 가죽벨트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 55000,
+//       'totalStock': 1400,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 58000,
+//        scheduled: 2100,
+//       },
+//      },
+//      {
+//       'id': 14,
+//       'productInfo': {
+//        name: 'Hooded Sweatshirt',
+//        property: '그레이, L',
+//        barcode: [{ code: '123456789013456792' }],
+//        code: 'HOOD001GRAYL',
+//        category: '의류 > 상의 > 후디',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 78000,
+//       'totalStock': 3600,
+//       'movingStock': 245,
+//       'unshippedStock': 122,
+//       '본사 창고': {
+//        total: 92000,
+//        scheduled: 4500,
+//       },
+//      },
+//      {
+//       'id': 15,
+//       'productInfo': {
+//        name: 'Chain Necklace',
+//        property: '골드, OS',
+//        barcode: [{ code: '123456789013456793' }],
+//        code: 'NECK001GOLD',
+//        category: '액세서리 > 목걸이 > 체인',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 85000,
+//       'totalStock': 880,
+//       'movingStock': 55,
+//       'unshippedStock': 28,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1800,
+//       },
+//      },
+//      {
+//       'id': 16,
+//       'productInfo': {
+//        name: 'Chino Pants',
+//        property: '베이지, 32',
+//        barcode: [{ code: '123456789013456794' }],
+//        code: 'CHINO001BGE32',
+//        category: '의류 > 하의 > 치노팬츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 72000,
+//       'totalStock': 2600,
+//       'movingStock': 185,
+//       'unshippedStock': 92,
+//       '본사 창고': {
+//        total: 78000,
+//        scheduled: 3200,
+//       },
+//      },
+//      {
+//       'id': 17,
+//       'productInfo': {
+//        name: 'Crossbody Bag',
+//        property: '블랙, M',
+//        barcode: [{ code: '123456789013456795' }],
+//        code: 'XBAG001BLKM',
+//        category: '가방 > 크로스백 > 미니',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 125000,
+//       'totalStock': 1200,
+//       'movingStock': 75,
+//       'unshippedStock': 38,
+//       '본사 창고': {
+//        total: 55000,
+//        scheduled: 2400,
+//       },
+//      },
+//      {
+//       'id': 18,
+//       'productInfo': {
+//        name: 'Flannel Shirt',
+//        property: '레드체크, L',
+//        barcode: [{ code: '123456789013456796' }],
+//        code: 'SHIRT001REDL',
+//        category: '의류 > 상의 > 셔츠',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 65000,
+//       'totalStock': 2100,
+//       'movingStock': 155,
+//       'unshippedStock': 78,
+//       '본사 창고': {
+//        total: 67000,
+//        scheduled: 2900,
+//       },
+//      },
+//      {
+//       'id': 19,
+//       'productInfo': {
+//        name: 'Statement Earrings',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456797' }],
+//        code: 'EAR001SLV',
+//        category: '액세서리 > 귀걸이 > 드롭형',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 42000,
+//       'totalStock': 650,
+//       'movingStock': 45,
+//       'unshippedStock': 22,
+//       '본사 창고': {
+//        total: 35000,
+//        scheduled: 1500,
+//       },
+//      },
+//      {
+//       'id': 20,
+//       'productInfo': {
+//        name: 'Cargo Shorts',
+//        property: '카키, XL',
+//        barcode: [{ code: '123456789013456798' }],
+//        code: 'SHORT001KHIXL',
+//        category: '의류 > 하의 > 반바지',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 58000,
+//       'totalStock': 1800,
+//       'movingStock': 125,
+//       'unshippedStock': 62,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2600,
+//       },
+//      },
+//      {
+//       'id': 21,
+//       'productInfo': {
+//        name: 'Bomber Jacket',
+//        property: '올리브, M',
+//        barcode: [{ code: '123456789013456799' }],
+//        code: 'BOMB001OLVM',
+//        category: '의류 > 아우터 > 봄버재킷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 165000,
+//       'totalStock': 950,
+//       'movingStock': 68,
+//       'unshippedStock': 34,
+//       '본사 창고': {
+//        total: 48000,
+//        scheduled: 2100,
+//       },
+//      },
+//      {
+//       'id': 22,
+//       'productInfo': {
+//        name: 'Sunglasses',
+//        property: '블랙, OS',
+//        barcode: [{ code: '123456789013456800' }],
+//        code: 'SUN001BLK',
+//        category: '액세서리 > 선글라스 > 웨이파러',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 88000,
+//       'totalStock': 720,
+//       'movingStock': 52,
+//       'unshippedStock': 26,
+//       '본사 창고': {
+//        total: 38000,
+//        scheduled: 1700,
+//       },
+//      },
+//      {
+//       'id': 23,
+//       'productInfo': {
+//        name: 'Midi Dress',
+//        property: '플로럴, S',
+//        barcode: [{ code: '123456789013456801' }],
+//        code: 'DRESS001FLRS',
+//        category: '의류 > 원피스 > 미디원피스',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 145000,
+//       'totalStock': 1400,
+//       'movingStock': 95,
+//       'unshippedStock': 48,
+//       '본사 창고': {
+//        total: 58000,
+//        scheduled: 2300,
+//       },
+//      },
+//      {
+//       'id': 24,
+//       'productInfo': {
+//        name: 'Sneakers High-top',
+//        property: '화이트, 265',
+//        barcode: [{ code: '123456789013456802' }],
+//        code: 'SNEAK001WHT265',
+//        category: '신발 > 운동화 > 하이탑',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 112000,
+//       'totalStock': 2200,
+//       'movingStock': 165,
+//       'unshippedStock': 82,
+//       '본사 창고': {
+//        total: 72000,
+//        scheduled: 3100,
+//       },
+//      },
+//      {
+//       'id': 25,
+//       'productInfo': {
+//        name: 'Cardigan',
+//        property: '베이지, M',
+//        barcode: [{ code: '123456789013456803' }],
+//        code: 'CARD001BGEM',
+//        category: '의류 > 상의 > 가디건',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 92000,
+//       'totalStock': 1600,
+//       'movingStock': 115,
+//       'unshippedStock': 58,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2500,
+//       },
+//      },
+//      {
+//       'id': 26,
+//       'productInfo': {
+//        name: 'Bucket Hat',
+//        property: '데님, OS',
+//        barcode: [{ code: '123456789013456804' }],
+//        code: 'BUCK001DENIM',
+//        category: '액세서리 > 모자 > 버킷햇',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 38000,
+//       'totalStock': 3200,
+//       'movingStock': 245,
+//       'unshippedStock': 122,
+//       '본사 창고': {
+//        total: 85000,
+//        scheduled: 4200,
+//       },
+//      },
+//      {
+//       'id': 27,
+//       'productInfo': {
+//        name: 'Track Pants',
+//        property: '블랙, L',
+//        barcode: [{ code: '123456789013456805' }],
+//        code: 'TRACK001BLKL',
+//        category: '의류 > 하의 > 트랙팬츠',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 65000,
+//       'totalStock': 2800,
+//       'movingStock': 195,
+//       'unshippedStock': 98,
+//       '본사 창고': {
+//        total: 78000,
+//        scheduled: 3600,
+//       },
+//      },
+//      {
+//       'id': 28,
+//       'productInfo': {
+//        name: 'Leather Gloves',
+//        property: '브라운, M',
+//        barcode: [{ code: '123456789013456806' }],
+//        code: 'GLOVE001BRNM',
+//        category: '액세서리 > 장갑 > 가죽장갑',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 78000,
+//       'totalStock': 850,
+//       'movingStock': 58,
+//       'unshippedStock': 29,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1800,
+//       },
+//      },
+//      {
+//       'id': 29,
+//       'productInfo': {
+//        name: 'Polo Shirt',
+//        property: '네이비, L',
+//        barcode: [{ code: '123456789013456807' }],
+//        code: 'POLO001NAVL',
+//        category: '의류 > 상의 > 폴로셔츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 52000,
+//       'totalStock': 3400,
+//       'movingStock': 255,
+//       'unshippedStock': 128,
+//       '본사 창고': {
+//        total: 88000,
+//        scheduled: 4500,
+//       },
+//      },
+//      {
+//       'id': 30,
+//       'productInfo': {
+//        name: 'Ankle Socks',
+//        property: '화이트, OS',
+//        barcode: [{ code: '123456789013456808' }],
+//        code: 'SOCK001WHT',
+//        category: '의류 > 양말 > 발목양말',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 8000,
+//       'totalStock': 8500,
+//       'movingStock': 650,
+//       'unshippedStock': 325,
+//       '본사 창고': {
+//        total: 180000,
+//        scheduled: 9500,
+//       },
+//      },
+//      {
+//       'id': 31,
+//       'productInfo': {
+//        name: 'Puffer Vest',
+//        property: '블랙, XL',
+//        barcode: [{ code: '123456789013456809' }],
+//        code: 'VEST001BLKXL',
+//        category: '의류 > 아우터 > 패딩조끼',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 135000,
+//       'totalStock': 1200,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 52000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 32,
+//       'productInfo': {
+//        name: 'Ring Set',
+//        property: '골드, OS',
+//        barcode: [{ code: '123456789013456810' }],
+//        code: 'RING001GOLD',
+//        category: '액세서리 > 반지 > 세트',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 65000,
+//       'totalStock': 480,
+//       'movingStock': 35,
+//       'unshippedStock': 18,
+//       '본사 창고': {
+//        total: 28000,
+//        scheduled: 1200,
+//       },
+//      },
+//      {
+//       'id': 33,
+//       'productInfo': {
+//        name: 'Maxi Coat',
+//        property: '캐멀, M',
+//        barcode: [{ code: '123456789013456811' }],
+//        code: 'COAT001CAMLM',
+//        category: '의류 > 아우터 > 롱코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 285000,
+//       'totalStock': 650,
+//       'movingStock': 42,
+//       'unshippedStock': 21,
+//       '본사 창고': {
+//        total: 32000,
+//        scheduled: 1400,
+//       },
+//      },
+//      {
+//       'id': 34,
+//       'productInfo': {
+//        name: 'Oxford Shoes',
+//        property: '브라운, 270',
+//        barcode: [{ code: '123456789013456812' }],
+//        code: 'OX001BRN270',
+//        category: '신발 > 드레스화 > 옥스퍼드',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 195000,
+//       'totalStock': 850,
+//       'movingStock': 58,
+//       'unshippedStock': 29,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1700,
+//       },
+//      },
+//      {
+//       'id': 35,
+//       'productInfo': {
+//        name: 'Wrap Skirt',
+//        property: '올리브, S',
+//        barcode: [{ code: '123456789013456813' }],
+//        code: 'WRAP001OLVS',
+//        category: '의류 > 하의 > 랩스커트',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 78000,
+//       'totalStock': 1400,
+//       'movingStock': 95,
+//       'unshippedStock': 48,
+//       '본사 창고': {
+//        total: 58000,
+//        scheduled: 2300,
+//       },
+//      },
+//      {
+//       'id': 36,
+//       'productInfo': {
+//        name: 'Baseball Jacket',
+//        property: '네이비/화이트, L',
+//        barcode: [{ code: '123456789013456814' }],
+//        code: 'BASE001NWHL',
+//        category: '의류 > 아우터 > 야구점퍼',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 125000,
+//       'totalStock': 950,
+//       'movingStock': 68,
+//       'unshippedStock': 34,
+//       '본사 창고': {
+//        total: 48000,
+//        scheduled: 2100,
+//       },
+//      },
+//      {
+//       'id': 37,
+//       'productInfo': {
+//        name: 'Messenger Bag',
+//        property: '블랙, L',
+//        barcode: [{ code: '123456789013456815' }],
+//        code: 'MSG001BLKL',
+//        category: '가방 > 메신저백 > 대형',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 158000,
+//       'totalStock': 720,
+//       'movingStock': 52,
+//       'unshippedStock': 26,
+//       '본사 창고': {
+//        total: 38000,
+//        scheduled: 1600,
+//       },
+//      },
+//      {
+//       'id': 38,
+//       'productInfo': {
+//        name: 'Tank Top',
+//        property: '그레이, M',
+//        barcode: [{ code: '123456789013456816' }],
+//        code: 'TANK001GRAM',
+//        category: '의류 > 상의 > 나시',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 28000,
+//       'totalStock': 4200,
+//       'movingStock': 315,
+//       'unshippedStock': 158,
+//       '본사 창고': {
+//        total: 105000,
+//        scheduled: 5500,
+//       },
+//      },
+//      {
+//       'id': 39,
+//       'productInfo': {
+//        name: 'Beanie',
+//        property: '차콜, OS',
+//        barcode: [{ code: '123456789013456817' }],
+//        code: 'BEAN001CHR',
+//        category: '액세서리 > 모자 > 비니',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 32000,
+//       'totalStock': 2800,
+//       'movingStock': 205,
+//       'unshippedStock': 102,
+//       '본사 창고': {
+//        total: 78000,
+//        scheduled: 3800,
+//       },
+//      },
+//      {
+//       'id': 40,
+//       'productInfo': {
+//        name: 'Wide Leg Pants',
+//        property: '블랙, L',
+//        barcode: [{ code: '123456789013456818' }],
+//        code: 'WIDE001BLKL',
+//        category: '의류 > 하의 > 와이드팬츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 85000,
+//       'totalStock': 1800,
+//       'movingStock': 125,
+//       'unshippedStock': 62,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2600,
+//       },
+//      },
+//      {
+//       'id': 41,
+//       'productInfo': {
+//        name: 'Clutch Bag',
+//        property: '골드, M',
+//        barcode: [{ code: '123456789013456819' }],
+//        code: 'CLUTCH001GLDM',
+//        category: '가방 > 클러치백 > 이브닝',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 118000,
+//       'totalStock': 450,
+//       'movingStock': 32,
+//       'unshippedStock': 16,
+//       '본사 창고': {
+//        total: 25000,
+//        scheduled: 1100,
+//       },
+//      },
+//      {
+//       'id': 42,
+//       'productInfo': {
+//        name: 'Thermal Underwear',
+//        property: '화이트, L',
+//        barcode: [{ code: '123456789013456820' }],
+//        code: 'THERM001WHTL',
+//        category: '의류 > 언더웨어 > 보온속옷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 45000,
+//       'totalStock': 3200,
+//       'movingStock': 245,
+//       'unshippedStock': 122,
+//       '본사 창고': {
+//        total: 85000,
+//        scheduled: 4200,
+//       },
+//      },
+//      {
+//       'id': 43,
+//       'productInfo': {
+//        name: 'Pocket Watch',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456821' }],
+//        code: 'PWATCH001SLV',
+//        category: '액세서리 > 시계 > 포켓워치',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 165000,
+//       'totalStock': 280,
+//       'movingStock': 18,
+//       'unshippedStock': 9,
+//       '본사 창고': {
+//        total: 15000,
+//        scheduled: 650,
+//       },
+//      },
+//      {
+//       'id': 44,
+//       'productInfo': {
+//        name: 'Cropped Blazer',
+//        property: '핑크, S',
+//        barcode: [{ code: '123456789013456822' }],
+//        code: 'BLAZ001PNKS',
+//        category: '의류 > 아우터 > 블레이저',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 185000,
+//       'totalStock': 850,
+//       'movingStock': 58,
+//       'unshippedStock': 29,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1700,
+//       },
+//      },
+//      {
+//       'id': 45,
+//       'productInfo': {
+//        name: 'Loafers',
+//        property: '블랙, 255',
+//        barcode: [{ code: '123456789013456823' }],
+//        code: 'LOAF001BLK255',
+//        category: '신발 > 로퍼 > 클래식',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 145000,
+//       'totalStock': 1200,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 52000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 46,
+//       'productInfo': {
+//        name: 'Gym Shorts',
+//        property: '블랙, L',
+//        barcode: [{ code: '123456789013456824' }],
+//        code: 'GYM001BLKL',
+//        category: '의류 > 스포츠웨어 > 반바지',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 38000,
+//       'totalStock': 2800,
+//       'movingStock': 205,
+//       'unshippedStock': 102,
+//       '본사 창고': {
+//        total: 78000,
+//        scheduled: 3800,
+//       },
+//      },
+//      {
+//       'id': 47,
+//       'productInfo': {
+//        name: 'Hair Accessory Set',
+//        property: '골드, OS',
+//        barcode: [{ code: '123456789013456825' }],
+//        code: 'HAIR001GLD',
+//        category: '액세서리 > 헤어액세서리 > 세트',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 25000,
+//       'totalStock': 1400,
+//       'movingStock': 105,
+//       'unshippedStock': 52,
+//       '본사 창고': {
+//        total: 48000,
+//        scheduled: 2400,
+//       },
+//      },
+//      {
+//       'id': 48,
+//       'productInfo': {
+//        name: 'Pea Coat',
+//        property: '네이비, M',
+//        barcode: [{ code: '123456789013456826' }],
+//        code: 'PEA001NAVM',
+//        category: '의류 > 아우터 > 피코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 225000,
+//       'totalStock': 650,
+//       'movingStock': 42,
+//       'unshippedStock': 21,
+//       '본사 창고': {
+//        total: 32000,
+//        scheduled: 1400,
+//       },
+//      },
+//      {
+//       'id': 49,
+//       'productInfo': {
+//        name: 'Canvas Sneakers',
+//        property: '화이트, 260',
+//        barcode: [{ code: '123456789013456827' }],
+//        code: 'CANV001WHT260',
+//        category: '신발 > 캔버스화 > 로우탑',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 65000,
+//       'totalStock': 3200,
+//       'movingStock': 245,
+//       'unshippedStock': 122,
+//       '본사 창고': {
+//        total: 85000,
+//        scheduled: 4200,
+//       },
+//      },
+//      {
+//       'id': 50,
+//       'productInfo': {
+//        name: 'Yoga Leggings',
+//        property: '블랙, M',
+//        barcode: [{ code: '123456789013456828' }],
+//        code: 'YOGA001BLKM',
+//        category: '의류 > 스포츠웨어 > 레깅스',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 55000,
+//       'totalStock': 2400,
+//       'movingStock': 175,
+//       'unshippedStock': 88,
+//       '본사 창고': {
+//        total: 68000,
+//        scheduled: 3200,
+//       },
+//      },
+//      {
+//       'id': 51,
+//       'productInfo': {
+//        name: 'Bracelet',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456829' }],
+//        code: 'BRAC001SLV',
+//        category: '액세서리 > 팔찌 > 체인',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 48000,
+//       'totalStock': 950,
+//       'movingStock': 68,
+//       'unshippedStock': 34,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1800,
+//       },
+//      },
+//      {
+//       'id': 52,
+//       'productInfo': {
+//        name: 'Tweed Jacket',
+//        property: '그레이, L',
+//        barcode: [{ code: '123456789013456830' }],
+//        code: 'TWEED001GRAYL',
+//        category: '의류 > 아우터 > 트위드재킷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 195000,
+//       'totalStock': 750,
+//       'movingStock': 52,
+//       'unshippedStock': 26,
+//       '본사 창고': {
+//        total: 38000,
+//        scheduled: 1600,
+//       },
+//      },
+//      {
+//       'id': 53,
+//       'productInfo': {
+//        name: 'Platform Sandals',
+//        property: '베이지, 240',
+//        barcode: [{ code: '123456789013456831' }],
+//        code: 'PLAT001BGE240',
+//        category: '신발 > 샌들 > 플랫폼',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 88000,
+//       'totalStock': 1400,
+//       'movingStock': 95,
+//       'unshippedStock': 48,
+//       '본사 창고': {
+//        total: 58000,
+//        scheduled: 2300,
+//       },
+//      },
+//      {
+//       'id': 54,
+//       'productInfo': {
+//        name: 'Compression Shirt',
+//        property: '네이비, L',
+//        barcode: [{ code: '123456789013456832' }],
+//        code: 'COMP001NAVL',
+//        category: '의류 > 스포츠웨어 > 압박셔츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 42000,
+//       'totalStock': 1800,
+//       'movingStock': 125,
+//       'unshippedStock': 62,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2600,
+//       },
+//      },
+//      {
+//       'id': 55,
+//       'productInfo': {
+//        name: 'Fedora Hat',
+//        property: '브라운, OS',
+//        barcode: [{ code: '123456789013456833' }],
+//        code: 'FED001BRN',
+//        category: '액세서리 > 모자 > 페도라',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 85000,
+//       'totalStock': 480,
+//       'movingStock': 35,
+//       'unshippedStock': 18,
+//       '본사 창고': {
+//        total: 28000,
+//        scheduled: 1200,
+//       },
+//      },
+//      {
+//       'id': 56,
+//       'productInfo': {
+//        name: 'Bodycon Dress',
+//        property: '블랙, S',
+//        barcode: [{ code: '123456789013456834' }],
+//        code: 'BODY001BLKS',
+//        category: '의류 > 원피스 > 바디콘',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 92000,
+//       'totalStock': 1200,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 52000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 57,
+//       'productInfo': {
+//        name: 'Hiking Boots',
+//        property: '브라운, 275',
+//        barcode: [{ code: '123456789013456835' }],
+//        code: 'HIKE001BRN275',
+//        category: '신발 > 등산화 > 하이킹',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 165000,
+//       'totalStock': 850,
+//       'movingStock': 58,
+//       'unshippedStock': 29,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1700,
+//       },
+//      },
+//      {
+//       'id': 58,
+//       'productInfo': {
+//        name: 'Sweatpants',
+//        property: '그레이, XL',
+//        barcode: [{ code: '123456789013456836' }],
+//        code: 'SWEAT001GRAXL',
+//        category: '의류 > 하의 > 스웻팬츠',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 52000,
+//       'totalStock': 2400,
+//       'movingStock': 175,
+//       'unshippedStock': 88,
+//       '본사 창고': {
+//        total: 68000,
+//        scheduled: 3200,
+//       },
+//      },
+//      {
+//       'id': 59,
+//       'productInfo': {
+//        name: 'Brooch',
+//        property: '골드, OS',
+//        barcode: [{ code: '123456789013456837' }],
+//        code: 'BRO001GLD',
+//        category: '액세서리 > 브로치 > 클래식',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 68000,
+//       'totalStock': 320,
+//       'movingStock': 22,
+//       'unshippedStock': 11,
+//       '본사 창고': {
+//        total: 18000,
+//        scheduled: 850,
+//       },
+//      },
+//      {
+//       'id': 60,
+//       'productInfo': {
+//        name: 'Windbreaker',
+//        property: '네이비, L',
+//        barcode: [{ code: '123456789013456838' }],
+//        code: 'WIND001NAVL',
+//        category: '의류 > 아우터 > 윈드브레이커',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 78000,
+//       'totalStock': 1600,
+//       'movingStock': 115,
+//       'unshippedStock': 58,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2500,
+//       },
+//      },
+//      {
+//       'id': 61,
+//       'productInfo': {
+//        name: 'Ballet Flats',
+//        property: '베이지, 245',
+//        barcode: [{ code: '123456789013456839' }],
+//        code: 'BALL001BGE245',
+//        category: '신발 > 플랫슈즈 > 발레플랫',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 75000,
+//       'totalStock': 1800,
+//       'movingStock': 125,
+//       'unshippedStock': 62,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2600,
+//       },
+//      },
+//      {
+//       'id': 62,
+//       'productInfo': {
+//        name: 'Vest Top',
+//        property: '화이트, M',
+//        barcode: [{ code: '123456789013456840' }],
+//        code: 'VEST001WHTM',
+//        category: '의류 > 상의 > 베스트탑',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 32000,
+//       'totalStock': 3200,
+//       'movingStock': 245,
+//       'unshippedStock': 122,
+//       '본사 창고': {
+//        total: 85000,
+//        scheduled: 4200,
+//       },
+//      },
+//      {
+//       'id': 63,
+//       'productInfo': {
+//        name: 'Tie Clip',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456841' }],
+//        code: 'TIE001SLV',
+//        category: '액세서리 > 넥타이핀 > 클립형',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 45000,
+//       'totalStock': 280,
+//       'movingStock': 18,
+//       'unshippedStock': 9,
+//       '본사 창고': {
+//        total: 15000,
+//        scheduled: 650,
+//       },
+//      },
+//      {
+//       'id': 64,
+//       'productInfo': {
+//        name: 'Quilted Jacket',
+//        property: '올리브, L',
+//        barcode: [{ code: '123456789013456842' }],
+//        code: 'QUILT001OLVL',
+//        category: '의류 > 아우터 > 퀼팅재킷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 145000,
+//       'totalStock': 950,
+//       'movingStock': 68,
+//       'unshippedStock': 34,
+//       '본사 창고': {
+//        total: 48000,
+//        scheduled: 2100,
+//       },
+//      },
+//      {
+//       'id': 65,
+//       'productInfo': {
+//        name: 'Wedge Heels',
+//        property: '블랙, 250',
+//        barcode: [{ code: '123456789013456843' }],
+//        code: 'WEDGE001BLK250',
+//        category: '신발 > 하이힐 > 웨지힐',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 98000,
+//       'totalStock': 1200,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 52000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 66,
+//       'productInfo': {
+//        name: 'Sweat Shorts',
+//        property: '그레이, L',
+//        barcode: [{ code: '123456789013456844' }],
+//        code: 'SWSHORT001GRAL',
+//        category: '의류 > 스포츠웨어 > 스웻반바지',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 35000,
+//       'totalStock': 2800,
+//       'movingStock': 205,
+//       'unshippedStock': 102,
+//       '본사 창고': {
+//        total: 78000,
+//        scheduled: 3800,
+//       },
+//      },
+//      {
+//       'id': 67,
+//       'productInfo': {
+//        name: 'Cufflinks',
+//        property: '골드, OS',
+//        barcode: [{ code: '123456789013456845' }],
+//        code: 'CUFF001GLD',
+//        category: '액세서리 > 커프스 > 골드',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 125000,
+//       'totalStock': 180,
+//       'movingStock': 12,
+//       'unshippedStock': 6,
+//       '본사 창고': {
+//        total: 10000,
+//        scheduled: 450,
+//       },
+//      },
+//      {
+//       'id': 68,
+//       'productInfo': {
+//        name: 'Trench Coat',
+//        property: '베이지, M',
+//        barcode: [{ code: '123456789013456846' }],
+//        code: 'TRENCH001BGEM',
+//        category: '의류 > 아우터 > 트렌치코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 245000,
+//       'totalStock': 480,
+//       'movingStock': 32,
+//       'unshippedStock': 16,
+//       '본사 창고': {
+//        total: 25000,
+//        scheduled: 1100,
+//       },
+//      },
+//      {
+//       'id': 69,
+//       'productInfo': {
+//        name: 'Slip-on Shoes',
+//        property: '화이트, 265',
+//        barcode: [{ code: '123456789013456847' }],
+//        code: 'SLIP001WHT265',
+//        category: '신발 > 슬립온 > 캐주얼',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 68000,
+//       'totalStock': 1600,
+//       'movingStock': 115,
+//       'unshippedStock': 58,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2500,
+//       },
+//      },
+//      {
+//       'id': 70,
+//       'productInfo': {
+//        name: 'Crop Top',
+//        property: '핑크, S',
+//        barcode: [{ code: '123456789013456848' }],
+//        code: 'CROP001PNKS',
+//        category: '의류 > 상의 > 크롭탑',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 38000,
+//       'totalStock': 2400,
+//       'movingStock': 175,
+//       'unshippedStock': 88,
+//       '본사 창고': {
+//        total: 68000,
+//        scheduled: 3200,
+//       },
+//      },
+//      {
+//       'id': 71,
+//       'productInfo': {
+//        name: 'Wallet',
+//        property: '블랙, OS',
+//        barcode: [{ code: '123456789013456849' }],
+//        code: 'WALL001BLK',
+//        category: '액세서리 > 지갑 > 장지갑',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 85000,
+//       'totalStock': 950,
+//       'movingStock': 68,
+//       'unshippedStock': 34,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1800,
+//       },
+//      },
+//      {
+//       'id': 72,
+//       'productInfo': {
+//        name: 'Parka',
+//        property: '카키, XL',
+//        barcode: [{ code: '123456789013456850' }],
+//        code: 'PARK001KHIXL',
+//        category: '의류 > 아우터 > 파카',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 185000,
+//       'totalStock': 720,
+//       'movingStock': 52,
+//       'unshippedStock': 26,
+//       '본사 창고': {
+//        total: 38000,
+//        scheduled: 1600,
+//       },
+//      },
+//      {
+//       'id': 73,
+//       'productInfo': {
+//        name: 'Moccasins',
+//        property: '브라운, 270',
+//        barcode: [{ code: '123456789013456851' }],
+//        code: 'MOC001BRN270',
+//        category: '신발 > 모카신 > 가죽',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 125000,
+//       'totalStock': 850,
+//       'movingStock': 58,
+//       'unshippedStock': 29,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1700,
+//       },
+//      },
+//      {
+//       'id': 74,
+//       'productInfo': {
+//        name: 'Sports Bra',
+//        property: '블랙, M',
+//        barcode: [{ code: '123456789013456852' }],
+//        code: 'SBRA001BLKM',
+//        category: '의류 > 스포츠웨어 > 스포츠브라',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 45000,
+//       'totalStock': 1800,
+//       'movingStock': 125,
+//       'unshippedStock': 62,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2600,
+//       },
+//      },
+//      {
+//       'id': 75,
+//       'productInfo': {
+//        name: 'Keychain',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456853' }],
+//        code: 'KEY001SLV',
+//        category: '액세서리 > 키체인 > 메탈',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 18000,
+//       'totalStock': 2800,
+//       'movingStock': 205,
+//       'unshippedStock': 102,
+//       '본사 창고': {
+//        total: 78000,
+//        scheduled: 3800,
+//       },
+//      },
+//      {
+//       'id': 76,
+//       'productInfo': {
+//        name: 'Duffle Coat',
+//        property: '네이비, L',
+//        barcode: [{ code: '123456789013456854' }],
+//        code: 'DUFF001NAVL',
+//        category: '의류 > 아우터 > 더플코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 225000,
+//       'totalStock': 480,
+//       'movingStock': 32,
+//       'unshippedStock': 16,
+//       '본사 창고': {
+//        total: 25000,
+//        scheduled: 1100,
+//       },
+//      },
+//      {
+//       'id': 77,
+//       'productInfo': {
+//        name: 'High-top Sneakers',
+//        property: '레드, 260',
+//        barcode: [{ code: '123456789013456855' }],
+//        code: 'HSNEAK001RED260',
+//        category: '신발 > 운동화 > 하이탑스니커즈',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 95000,
+//       'totalStock': 1400,
+//       'movingStock': 95,
+//       'unshippedStock': 48,
+//       '본사 창고': {
+//        total: 58000,
+//        scheduled: 2300,
+//       },
+//      },
+//      {
+//       'id': 78,
+//       'productInfo': {
+//        name: 'Tube Top',
+//        property: '화이트, S',
+//        barcode: [{ code: '123456789013456856' }],
+//        code: 'TUBE001WHTS',
+//        category: '의류 > 상의 > 튜브톱',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 28000,
+//       'totalStock': 2200,
+//       'movingStock': 165,
+//       'unshippedStock': 82,
+//       '본사 창고': {
+//        total: 69000,
+//        scheduled: 3400,
+//       },
+//      },
+//      {
+//       'id': 79,
+//       'productInfo': {
+//        name: 'Phone Case',
+//        property: '블랙, OS',
+//        barcode: [{ code: '123456789013456857' }],
+//        code: 'PHONE001BLK',
+//        category: '액세서리 > 폰케이스 > 실리콘',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 15000,
+//       'totalStock': 4200,
+//       'movingStock': 315,
+//       'unshippedStock': 158,
+//       '본사 창고': {
+//        total: 105000,
+//        scheduled: 5500,
+//       },
+//      },
+//      {
+//       'id': 80,
+//       'productInfo': {
+//        name: 'Overcoat',
+//        property: '차콜, L',
+//        barcode: [{ code: '123456789013456858' }],
+//        code: 'OVER001CHRL',
+//        category: '의류 > 아우터 > 오버코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 285000,
+//       'totalStock': 350,
+//       'movingStock': 22,
+//       'unshippedStock': 11,
+//       '본사 창고': {
+//        total: 18000,
+//        scheduled: 850,
+//       },
+//      },
+//      {
+//       'id': 81,
+//       'productInfo': {
+//        name: 'Espadrilles',
+//        property: '베이지, 240',
+//        barcode: [{ code: '123456789013456859' }],
+//        code: 'ESP001BGE240',
+//        category: '신발 > 에스파드리유 > 캔버스',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 58000,
+//       'totalStock': 1200,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 52000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 82,
+//       'productInfo': {
+//        name: 'Tracksuit Set',
+//        property: '그레이, L',
+//        barcode: [{ code: '123456789013456860' }],
+//        code: 'TRACK001GRAL',
+//        category: '의류 > 스포츠웨어 > 트랙수트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 125000,
+//       'totalStock': 950,
+//       'movingStock': 68,
+//       'unshippedStock': 34,
+//       '본사 창고': {
+//        total: 48000,
+//        scheduled: 2100,
+//       },
+//      },
+//      {
+//       'id': 83,
+//       'productInfo': {
+//        name: 'Hair Band',
+//        property: '블랙, OS',
+//        barcode: [{ code: '123456789013456861' }],
+//        code: 'HBAND001BLK',
+//        category: '액세서리 > 헤어밴드 > 패브릭',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 12000,
+//       'totalStock': 3600,
+//       'movingStock': 275,
+//       'unshippedStock': 138,
+//       '본사 창고': {
+//        total: 95000,
+//        scheduled: 4800,
+//       },
+//      },
+//      {
+//       'id': 84,
+//       'productInfo': {
+//        name: 'Cape Coat',
+//        property: '와인, M',
+//        barcode: [{ code: '123456789013456862' }],
+//        code: 'CAPE001WINM',
+//        category: '의류 > 아우터 > 케이프코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 195000,
+//       'totalStock': 420,
+//       'movingStock': 28,
+//       'unshippedStock': 14,
+//       '본사 창고': {
+//        total: 22000,
+//        scheduled: 950,
+//       },
+//      },
+//      {
+//       'id': 85,
+//       'productInfo': {
+//        name: 'Boat Shoes',
+//        property: '브라운, 265',
+//        barcode: [{ code: '123456789013456863' }],
+//        code: 'BOAT001BRN265',
+//        category: '신발 > 보트슈즈 > 가죽',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 115000,
+//       'totalStock': 850,
+//       'movingStock': 58,
+//       'unshippedStock': 29,
+//       '본사 창고': {
+//        total: 42000,
+//        scheduled: 1700,
+//       },
+//      },
+//      {
+//       'id': 86,
+//       'productInfo': {
+//        name: 'Joggers',
+//        property: '블랙, XL',
+//        barcode: [{ code: '123456789013456864' }],
+//        code: 'JOG001BLKXL',
+//        category: '의류 > 하의 > 조거팬츠',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 65000,
+//       'totalStock': 1800,
+//       'movingStock': 125,
+//       'unshippedStock': 62,
+//       '본사 창고': {
+//        total: 62000,
+//        scheduled: 2600,
+//       },
+//      },
+//      {
+//       'id': 87,
+//       'productInfo': {
+//        name: 'Anklet',
+//        property: '실버, OS',
+//        barcode: [{ code: '123456789013456865' }],
+//        code: 'ANKL001SLV',
+//        category: '액세서리 > 발찌 > 체인',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 35000,
+//       'totalStock': 720,
+//       'movingStock': 52,
+//       'unshippedStock': 26,
+//       '본사 창고': {
+//        total: 38000,
+//        scheduled: 1600,
+//       },
+//      },
+//      {
+//       'id': 88,
+//       'productInfo': {
+//        name: 'Field Jacket',
+//        property: '올리브, L',
+//        barcode: [{ code: '123456789013456866' }],
+//        code: 'FIELD001OLVL',
+//        category: '의류 > 아우터 > 필드재킷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 155000,
+//       'totalStock': 680,
+//       'movingStock': 45,
+//       'unshippedStock': 22,
+//       '본사 창고': {
+//        total: 35000,
+//        scheduled: 1400,
+//       },
+//      },
+//      {
+//       'id': 89,
+//       'productInfo': {
+//        name: 'Mary Jane Shoes',
+//        property: '블랙, 245',
+//        barcode: [{ code: '123456789013456867' }],
+//        code: 'MARY001BLK245',
+//        category: '신발 > 메리제인 > 가죽',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 95000,
+//       'totalStock': 1200,
+//       'movingStock': 85,
+//       'unshippedStock': 42,
+//       '본사 창고': {
+//        total: 52000,
+//        scheduled: 2200,
+//       },
+//      },
+//      {
+//       'id': 90,
+//       'productInfo': {
+//        name: 'Skater Dress',
+//        property: '블랙, M',
+//        barcode: [{ code: '123456789013456868' }],
+//        code: 'DRESS001BLKM',
+//        category: '의류 > 원피스 > 스케이터드레스',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 95000,
+//       'totalStock': 900,
+//       'movingStock': 60,
+//       'unshippedStock': 30,
+//       '본사 창고': {
+//        total: 45000,
+//        scheduled: 2000,
+//       },
+//      },
+//      {
+//       'id': 91,
+//       'productInfo': {
+//        name: 'Pencil Skirt',
+//        property: '네이비, S',
+//        barcode: [{ code: '123456789013456869' }],
+//        code: 'SKIRT001NAVS',
+//        category: '의류 > 하의 > 펜슬스커트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 78000,
+//       'totalStock': 1100,
+//       'movingStock': 75,
+//       'unshippedStock': 37,
+//       '본사 창고': {
+//        total: 50000,
+//        scheduled: 2500,
+//       },
+//      },
+//      {
+//       'id': 92,
+//       'productInfo': {
+//        name: 'Harem Pants',
+//        property: '블랙, L',
+//        barcode: [{ code: '123456789013456870' }],
+//        code: 'PANTS001BLKL',
+//        category: '의류 > 하의 > 해리팬츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 68000,
+//       'totalStock': 1300,
+//       'movingStock': 90,
+//       'unshippedStock': 45,
+//       '본사 창고': {
+//        total: 55000,
+//        scheduled: 3000,
+//       },
+//      },
+//      {
+//       'id': 93,
+//       'productInfo': {
+//        name: 'Kimono Jacket',
+//        property: '플로럴, M',
+//        barcode: [{ code: '123456789013456871' }],
+//        code: 'JACKET001FLRM',
+//        category: '의류 > 아우터 > 기모노재킷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 135000,
+//       'totalStock': 700,
+//       'movingStock': 50,
+//       'unshippedStock': 25,
+//       '본사 창고': {
+//        total: 40000,
+//        scheduled: 1800,
+//       },
+//      },
+//      {
+//       'id': 94,
+//       'productInfo': {
+//        name: 'Puffer Jacket',
+//        property: '레드, L',
+//        barcode: [{ code: '123456789013456872' }],
+//        code: 'PUFFER001REDL',
+//        category: '의류 > 아우터 > 패딩자켓',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 198000,
+//       'totalStock': 600,
+//       'movingStock': 40,
+//       'unshippedStock': 20,
+//       '본사 창고': {
+//        total: 35000,
+//        scheduled: 1500,
+//       },
+//      },
+//      {
+//       'id': 95,
+//       'productInfo': {
+//        name: 'Turtleneck Sweater',
+//        property: '아이보리, M',
+//        barcode: [{ code: '123456789013456873' }],
+//        code: 'KNIT002IVRM',
+//        category: '의류 > 상의 > 터틀넥니트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 85000,
+//       'totalStock': 800,
+//       'movingStock': 55,
+//       'unshippedStock': 28,
+//       '본사 창고': {
+//        total: 45000,
+//        scheduled: 2000,
+//       },
+//      },
+//      {
+//       'id': 96,
+//       'productInfo': {
+//        name: 'Cargo Pants',
+//        property: '카키, XL',
+//        barcode: [{ code: '123456789013456874' }],
+//        code: 'PANTS002KHIXL',
+//        category: '의류 > 하의 > 카고팬츠',
+//        season: '2025 (S/S)',
+//       },
+//       'avgCost': 78000,
+//       'totalStock': 900,
+//       'movingStock': 60,
+//       'unshippedStock': 30,
+//       '본사 창고': {
+//        total: 50000,
+//        scheduled: 2500,
+//       },
+//      },
+//      {
+//       'id': 97,
+//       'productInfo': {
+//        name: 'Belted Coat',
+//        property: '브라운, M',
+//        barcode: [{ code: '123456789013456875' }],
+//        code: 'COAT002BRNM',
+//        category: '의류 > 아우터 > 벨트코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 198000,
+//       'totalStock': 550,
+//       'movingStock': 37,
+//       'unshippedStock': 18,
+//       '본사 창고': {
+//        total: 38000,
+//        scheduled: 1600,
+//       },
+//      },
+//      {
+//       'id': 98,
+//       'productInfo': {
+//        name: 'Double-breasted Blazer',
+//        property: '네이비, L',
+//        barcode: [{ code: '123456789013456876' }],
+//        code: 'BLAZ002NAVL',
+//        category: '의류 > 아우터 > 더블재킷',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 185000,
+//       'totalStock': 700,
+//       'movingStock': 45,
+//       'unshippedStock': 22,
+//       '본사 창고': {
+//        total: 40000,
+//        scheduled: 1800,
+//       },
+//      },
+//      {
+//       'id': 99,
+//       'productInfo': {
+//        name: 'Peacoat',
+//        property: '블랙, M',
+//        barcode: [{ code: '123456789013456877' }],
+//        code: 'PEA002BLKM',
+//        category: '의류 > 아우터 > 피코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 225000,
+//       'totalStock': 600,
+//       'movingStock': 40,
+//       'unshippedStock': 20,
+//       '본사 창고': {
+//        total: 35000,
+//        scheduled: 1500,
+//       },
+//      },
+//      {
+//       'id': 100,
+//       'productInfo': {
+//        name: 'Trench Coat',
+//        property: '베이지, L',
+//        barcode: [{ code: '123456789013456878' }],
+//        code: 'TRENCH002BGEL',
+//        category: '의류 > 아우터 > 트렌치코트',
+//        season: '2025 (F/W)',
+//       },
+//       'avgCost': 245000,
+//       'totalStock': 480,
+//       'movingStock': 32,
+//       'unshippedStock': 16,
+//       '본사 창고': {
+//        total: 25000,
+//        scheduled: 1100,
+//       },
+//      },
+//     ];
+//     table.columns = [
+//      {
+//       name: 'productInfo',
+//       label: '품목명 / 품목 속성',
+//       field: 'productInfo',
+//       align: 'left',
+//       width: '220',
+//      },
+//      {
+//       name: 'productCode',
+//       label: '품목 코드 / 품목 분류',
+//       field: 'email',
+//       align: 'center',
+//       width: '160',
+//      },
+//      {
+//       name: 'avgCost',
+//       label: '평균 원가',
+//       field: 'avgCost',
+//       align: 'center',
+//       width: '100',
+//       format: value => `${value.toLocaleString()} 원`,
+//      },
+//      {
+//       name: 'totalStock',
+//       label: '총 재고',
+//       field: 'totalStock',
+//       align: 'center',
+//       width: '100',
+//       format: value => `${value.toLocaleString()} 개`,
+//      },
+//      {
+//       name: 'movingStock',
+//       label: '이동 중',
+//       field: 'movingStock',
+//       align: 'center',
+//       width: '100',
+//       format: value => `${value.toLocaleString()} 개`,
+//       tooltip: [
+//        '이동 중 재고는 출발지에서 출고 되었으나,',
+//        '도착지로 아직 입고되지 않은 수량입니다.',
+//       ],
+//       tooltipOptions: { placement: 'bottom' },
+//      },
+//      {
+//       name: 'unshippedStock',
+//       label: '미발송',
+//       field: 'unshippedStock',
+//       align: 'center',
+//       width: '100',
+//       format: value => `${value.toLocaleString()} 개`,
+//      },
+//     ];
+//     table.height = '600px';
+//     function handlePagination(page) {
+//      const pagination = table.pagination || { page: 1, rowsPerPage: 10 };
+//      const res = getMockStockData(page, pagination.rowsPerPage);
+//      console.log(res);
+//      table.pagination = res.pagination;
+//      table.rows = res.data;
+//     }
+//     table.addEventListener('sdPageChange', event => {
+//      handlePagination(event.detail);
+//     });
+//     function getMockStockData(page = 1, rowsPerPage = 10) {
+//      const startIndex = (page - 1) * rowsPerPage;
+//      const endIndex = startIndex + rowsPerPage;
+//      const paginatedData = ROWS.slice(startIndex, endIndex);
+//      return {
+//       data: paginatedData,
+//       pagination: {
+//        page,
+//        rowsPerPage,
+//        totalItems: ROWS.length,
+//        lastPage: Math.ceil(ROWS.length / rowsPerPage),
+//       },
+//      };
+//     }
+//     function fetchData() {
+//      const pagination = table.pagination || { page: 1, rowsPerPage: 10 };
+//      const res = getMockStockData(pagination.page, pagination.rowsPerPage);
+//      console.log(res);
+//      table.pagination = res.pagination;
+//      table.rows = res.data;
+//     }
+//     test.addEventListener('click', () => {
+//      fetchData();
+//     });
+//    });
+//# sourceMappingURL=sd-table-backup.js.map