npm - @things-factory/board-ui - Versions diffs - 10.0.0-beta.21 → 10.0.0-beta.27 - Mend

@things-factory/board-ui 10.0.0-beta.21 → 10.0.0-beta.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist-client/board-list/board-tile-list.d.ts +6 -1
package/dist-client/board-list/board-tile-list.js +284 -38
package/dist-client/board-list/board-tile-list.js.map +1 -1
package/dist-client/graphql/board.d.ts +1 -0
package/dist-client/graphql/board.js +25 -0
package/dist-client/graphql/board.js.map +1 -1
package/dist-client/pages/board-list-page.d.ts +12 -0
package/dist-client/pages/board-list-page.js +90 -8
package/dist-client/pages/board-list-page.js.map +1 -1
package/dist-client/pages/play-list-page.js +2 -1
package/dist-client/pages/play-list-page.js.map +1 -1
package/dist-client/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -2

package/dist-client/board-list/board-tile-list.d.ts CHANGED Viewed

@@ -10,8 +10,13 @@ export declare class BoardTileList extends LitElement {
     creatable?: boolean;
     searchText?: string;
     reorderable: boolean;
-    private draggedItem;
+    updatedIds: string[];
+    private _draggedId;
+    private _dropTargetId;
+    private _dropSide;
     connectedCallback(): void;
+    private _clearDropIndicator;
+    private _resetDragState;
     render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
     onCreateBoard(e: any): void;

package/dist-client/board-list/board-tile-list.js CHANGED Viewed

@@ -4,7 +4,7 @@ import '@operato/board/ox-board-creation-card.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { keyed } from 'lit/directives/keyed.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { client } from '@operato/graphql';
 import { privileged } from '@things-factory/auth-base/dist-client/index.js';
 let BoardTileList = class BoardTileList extends LitElement {
@@ -15,6 +15,10 @@ let BoardTileList = class BoardTileList extends LitElement {
         this.groups = [];
         this.creatable = false;
         this.reorderable = false;
+        this.updatedIds = [];
+        this._draggedId = null;
+        this._dropTargetId = null;
+        this._dropSide = null;
     }
     static { this.styles = [
         css `
@@ -102,6 +106,107 @@ let BoardTileList = class BoardTileList extends LitElement {
       [draggable='true'] {
         cursor: grab;
+        transition: opacity 0.2s ease, transform 0.2s ease;
+      }
+      [card].dragging {
+        opacity: 0.3;
+        transform: scale(0.95);
+      }
+      [card].drop-before {
+        border-left: 3px solid var(--md-sys-color-primary);
+      }
+      [card].drop-after {
+        border-right: 3px solid var(--md-sys-color-primary);
+      }
+      [card].flip-moving {
+        transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
+      }
+      @keyframes drop-land {
+        0% {
+          opacity: 0;
+          transform: scale(0.9);
+        }
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+      [card].flip-dropped-hidden {
+        opacity: 0;
+      }
+      [card].flip-dropped {
+        animation: drop-land 0.5s cubic-bezier(0.22, 0.6, 0.36, 1);
+      }
+      @keyframes highlight-sweep {
+        0% {
+          background: linear-gradient(90deg, var(--md-sys-color-primary-container) 0%, transparent 0%);
+          box-shadow: 0 0 8px 2px var(--md-sys-color-primary);
+        }
+        50% {
+          background: linear-gradient(90deg, transparent 0%, var(--md-sys-color-primary-container) 50%, transparent 100%);
+          box-shadow: 0 0 12px 3px var(--md-sys-color-primary);
+        }
+        100% {
+          background: transparent;
+          box-shadow: none;
+        }
+      }
+      @keyframes border-pulse {
+        0%,
+        100% {
+          outline: 2px solid transparent;
+        }
+        25%,
+        75% {
+          outline: 2px solid var(--md-sys-color-primary);
+        }
+      }
+      @keyframes subtle-bounce {
+        0% {
+          transform: scale(1);
+        }
+        30% {
+          transform: scale(1.03);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+      @keyframes surface-flash {
+        0% {
+          background-color: var(--md-sys-color-primary-container);
+        }
+        100% {
+          background-color: transparent;
+        }
+      }
+      [card].anim-sweep {
+        animation: highlight-sweep 1.8s ease;
+        border-radius: 4px;
+      }
+      [card].anim-pulse {
+        animation: border-pulse 1.2s ease;
+      }
+      [card].anim-bounce {
+        animation: subtle-bounce 0.8s ease;
+      }
+      [card].anim-flash {
+        animation: surface-flash 1.5s ease-out;
       }
       @media screen and (max-width: 800px), screen and (max-height: 600px) {
@@ -115,41 +220,165 @@ let BoardTileList = class BoardTileList extends LitElement {
         super.connectedCallback();
         if (this.reorderable) {
             this.renderRoot.addEventListener('dragstart', (e) => {
-                const target = e.target;
-                this.draggedItem = target.closest('[card]');
-                e.dataTransfer?.setData('text/plain', target.innerHTML);
+                const target = e.target.closest('[card]');
+                if (!target?.id)
+                    return;
+                this._draggedId = target.id;
+                target.classList.add('dragging');
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer?.setData('text/plain', target.id);
             });
             this.renderRoot.addEventListener('dragover', (e) => {
                 e.preventDefault();
-                const target = e.target;
-                const targetItem = target.closest('[card]');
-                if (targetItem && targetItem !== this.draggedItem) {
-                    const targetRect = targetItem.getBoundingClientRect();
-                    const mousePos = e.clientX - targetRect.left;
-                    if (mousePos < targetRect.width / 2) {
-                        // 마우스 위치가 아이템 좌측 반절에 있을 때
-                        this.renderRoot.insertBefore(this.draggedItem, targetItem);
-                    }
-                    else {
-                        // 마우스 위치가 아이템 우측 반절에 있을 때
-                        this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling);
+                e.dataTransfer.dropEffect = 'move';
+                const target = e.target.closest('[card]');
+                if (!target?.id || target.id === this._draggedId)
+                    return;
+                const targetRect = target.getBoundingClientRect();
+                const mousePos = e.clientX - targetRect.left;
+                const side = mousePos < targetRect.width / 2 ? 'before' : 'after';
+                if (this._dropTargetId !== target.id || this._dropSide !== side) {
+                    this._clearDropIndicator();
+                    this._dropTargetId = target.id;
+                    this._dropSide = side;
+                    target.classList.add(side === 'before' ? 'drop-before' : 'drop-after');
+                }
+            });
+            this.renderRoot.addEventListener('dragleave', (e) => {
+                const target = e.target.closest('[card]');
+                if (target?.id === this._dropTargetId) {
+                    const related = e.relatedTarget;
+                    if (!related || !target.contains(related)) {
+                        this._clearDropIndicator();
                     }
                 }
             });
             this.renderRoot.addEventListener('drop', (e) => {
                 e.preventDefault();
-                const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))
-                    .map(board => board.getAttribute('id'))
-                    .filter(Boolean);
-                this.dispatchEvent(new CustomEvent('reordered', {
-                    detail: {
-                        groupId: this.group,
-                        boardIds
+                // drop 이벤트에서 직접 타겟과 방향을 계산 (dragleave가 먼저 발생해 상태를 지울 수 있으므로)
+                const dropTarget = e.target.closest('[card]');
+                let dropTargetId = this._dropTargetId;
+                let dropSide = this._dropSide;
+                if (dropTarget?.id && dropTarget.id !== this._draggedId) {
+                    dropTargetId = dropTarget.id;
+                    const rect = dropTarget.getBoundingClientRect();
+                    dropSide = e.clientX - rect.left < rect.width / 2 ? 'before' : 'after';
+                }
+                this._clearDropIndicator();
+                const draggedEl = this._draggedId ? this.renderRoot.querySelector(`[card][id="${this._draggedId}"]`) : null;
+                if (draggedEl) {
+                    draggedEl.classList.remove('dragging');
+                }
+                if (!this._draggedId || !dropTargetId || this._draggedId === dropTargetId) {
+                    this._resetDragState();
+                    return;
+                }
+                // 배열 재정렬
+                const boards = [...this.boards];
+                const draggedIndex = boards.findIndex(b => b.id === this._draggedId);
+                if (draggedIndex === -1) {
+                    this._resetDragState();
+                    return;
+                }
+                const draggedBoardId = this._draggedId;
+                const [dragged] = boards.splice(draggedIndex, 1);
+                let targetIndex = boards.findIndex(b => b.id === dropTargetId);
+                if (dropSide === 'after')
+                    targetIndex++;
+                boards.splice(targetIndex, 0, dragged);
+                this._resetDragState();
+                // FLIP 애니메이션: 이전 위치 기록
+                const cards = this.renderRoot.querySelectorAll('[card][id]');
+                const firstPositions = new Map();
+                cards.forEach(card => {
+                    firstPositions.set(card.id, card.getBoundingClientRect());
+                });
+                // optimistic update → Lit 렌더
+                this.boards = boards;
+                this.updateComplete.then(() => {
+                    const updatedCards = this.renderRoot.querySelectorAll('[card][id]');
+                    let droppedEl = null;
+                    updatedCards.forEach(card => {
+                        const first = firstPositions.get(card.id);
+                        if (!first)
+                            return;
+                        const last = card.getBoundingClientRect();
+                        const dx = first.left - last.left;
+                        const dy = first.top - last.top;
+                        const el = card;
+                        if (card.id === draggedBoardId) {
+                            // 드래그한 카드: 슬라이딩 완료 후 착지하도록 일단 숨김
+                            el.classList.add('flip-dropped-hidden');
+                            droppedEl = el;
+                        }
+                        else {
+                            // 밀려나는 카드: 이전 위치에서 새 위치로 슬라이딩
+                            if (dx === 0 && dy === 0)
+                                return;
+                            // Invert: 이전 위치로 되돌림
+                            el.style.transform = `translate(${dx}px, ${dy}px)`;
+                            el.style.transition = 'none';
+                            requestAnimationFrame(() => {
+                                el.classList.add('flip-moving');
+                                el.style.transform = '';
+                                el.style.transition = '';
+                                el.addEventListener('transitionend', () => {
+                                    el.classList.remove('flip-moving');
+                                }, { once: true });
+                            });
+                        }
+                    });
+                    // 밀려나는 카드 슬라이딩 완료 후 드래그한 카드 착지 → 착지 완료 후 이벤트 발송
+                    const boardIds = boards.map(b => b.id);
+                    const dispatchReordered = () => {
+                        this.dispatchEvent(new CustomEvent('reordered', {
+                            detail: {
+                                groupId: this.group,
+                                boardIds
+                            }
+                        }));
+                    };
+                    if (droppedEl) {
+                        setTimeout(() => {
+                            ;
+                            droppedEl.classList.remove('flip-dropped-hidden');
+                            droppedEl.classList.add('flip-dropped');
+                            droppedEl.addEventListener('animationend', () => {
+                                ;
+                                droppedEl.classList.remove('flip-dropped');
+                                dispatchReordered();
+                            }, { once: true });
+                        }, 500);
+                    }
+                    else {
+                        dispatchReordered();
                     }
-                }));
+                });
+            });
+            this.renderRoot.addEventListener('dragend', (e) => {
+                this._clearDropIndicator();
+                const target = e.target.closest('[card]');
+                if (target)
+                    target.classList.remove('dragging');
+                this._resetDragState();
             });
         }
     }
+    _clearDropIndicator() {
+        if (this._dropTargetId) {
+            const el = this.renderRoot.querySelector(`[card][id="${this._dropTargetId}"]`);
+            if (el) {
+                el.classList.remove('drop-before', 'drop-after');
+            }
+        }
+        this._dropTargetId = null;
+        this._dropSide = null;
+    }
+    _resetDragState() {
+        this._draggedId = null;
+        this._dropTargetId = null;
+        this._dropSide = null;
+    }
     render() {
         const boards = this.boards || [];
         return html `
@@ -164,28 +393,28 @@ let BoardTileList = class BoardTileList extends LitElement {
               ></ox-board-creation-card>
             `)
             : nothing}
-      ${keyed(Date.now(), boards.map(board => html `
-            <div card draggable="true" id=${board.id}>
-              <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
+      ${repeat(boards, board => board.id, board => html `
+          <div card draggable="true" id=${board.id}>
+            <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
-              <div name>${board.name}</div>
-              <!-- <div description>${board.description}</div> -->
+            <div name>${board.name}</div>
+            <!-- <div description>${board.description}</div> -->
-              <md-icon
-                iconBtn
-                info
-                @click=${e => {
+            <md-icon
+              iconBtn
+              info
+              @click=${e => {
             this.infoBoard(board);
             e.preventDefault();
         }}
-                >info</md-icon
-              >
+              >info</md-icon
+            >
-              ${(this.favorites || []).includes(board.id)
+            ${(this.favorites || []).includes(board.id)
             ? html ` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `
             : html ` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}
-            </div>
-          `))}
+          </div>
+        `)}
     `;
     }
     updated(changes) {
@@ -193,6 +422,19 @@ let BoardTileList = class BoardTileList extends LitElement {
         if (creationCard) {
             creationCard.reset();
         }
+        if (changes.has('updatedIds') && this.updatedIds.length > 0) {
+            const animClasses = ['anim-sweep', 'anim-pulse', 'anim-bounce', 'anim-flash'];
+            for (const id of this.updatedIds) {
+                const card = this.renderRoot.querySelector(`[card][id="${id}"]`);
+                if (!card)
+                    continue;
+                const animClass = animClasses[Math.floor(Math.random() * animClasses.length)];
+                card.classList.add(animClass);
+                card.addEventListener('animationend', () => {
+                    card.classList.remove(animClass);
+                }, { once: true });
+            }
+        }
     }
     onCreateBoard(e) {
         this.dispatchEvent(new CustomEvent('create-board', {
@@ -261,6 +503,10 @@ __decorate([
     property({ type: Boolean, attribute: 'reorderable' }),
     __metadata("design:type", Boolean)
 ], BoardTileList.prototype, "reorderable", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], BoardTileList.prototype, "updatedIds", void 0);
 BoardTileList = __decorate([
     customElement('board-tile-list')
 ], BoardTileList);

package/dist-client/board-list/board-tile-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\nimport { privileged } from '@things-factory/auth-base/dist-client/index.js'\n\n@customElement('board-tile-list')\nexport class BoardTileList extends LitElement {\n static styles = [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n background-color: var(--md-sys-color-background);\n\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n clip-path: border-box;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--spacing-small);\n width: calc(100% - 45px);\n color: var(--md-sys-color-on-background);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n flex: 1;\n object-fit: contain;\n }\n\n md-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n md-icon[info] {\n color: var(--md-sys-color-primary);\n }\n\n md-icon[iconBtn][favored],\n md-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dim-color);\n box-sizing: border-box;\n color: var(--card-list-color);\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n [draggable='true'] {\n cursor: grab;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) boards: any[] = []\n @property({ type: Array }) favorites: any[] = []\n @property({ type: Array }) groups: any[] = []\n @property({ type: String }) group?: string\n @property({ type: Boolean }) creatable?: boolean = false\n @property({ type: String, attribute: 'search-text' }) searchText?: string\n @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false\n\n private draggedItem\n\n connectedCallback() {\n super.connectedCallback()\n\n if (this.reorderable) {\n this.renderRoot.addEventListener('dragstart', (e: Event) => {\n const target = e.target! as HTMLElement\n this.draggedItem = target.closest('[card]')\n ;(e as DragEvent).dataTransfer?.setData('text/plain', target.innerHTML)\n })\n\n this.renderRoot.addEventListener('dragover', (e: Event) => {\n e.preventDefault()\n\n const target = e.target! as HTMLElement\n const targetItem = target.closest('[card]')\n if (targetItem && targetItem !== this.draggedItem) {\n const targetRect = targetItem.getBoundingClientRect()\n const mousePos = (e as DragEvent).clientX - targetRect.left\n\n if (mousePos < targetRect.width / 2) {\n // 마우스 위치가 아이템 좌측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem)\n } else {\n // 마우스 위치가 아이템 우측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)\n }\n }\n })\n\n this.renderRoot.addEventListener('drop', (e: Event) => {\n e.preventDefault()\n\n const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))\n .map(board => board.getAttribute('id'))\n .filter(Boolean)\n\n this.dispatchEvent(\n new CustomEvent('reordered', {\n detail: {\n groupId: this.group,\n boardIds\n }\n })\n )\n })\n }\n }\n\n render() {\n const boards = this.boards \|\| []\n\n return html`\n ${this.creatable\n ? privileged(\n { privilege: 'mutation', category: 'board' },\n html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n )\n : nothing}\n ${keyed(\n Date.now(),\n boards.map(\n board => html`\n <div card draggable=\"true\" id=${board.id}>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <md-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board)\n e.preventDefault()\n }}\n >info</md-icon\n >\n\n ${(this.favorites \|\| []).includes(board.id)\n ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `\n : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}\n </div>\n `\n )\n )}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any\n if (creationCard) {\n creationCard.reset()\n }\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(board) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: board\n })\n )\n }\n\n async removeFavorite(boardId) {\n await client.mutate({\n mutation: gql`\n mutation {\n deleteFavorite(routing: \"${boardId}\")\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await client.mutate({\n mutation: gql`\n mutation {\n createFavorite(favorite: {\n routing: \"${boardId}\"\n }) {\n id\n routing\n }\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n"]}
1	+ {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/board/ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { client } from '@operato/graphql'\n\nimport { privileged } from '@things-factory/auth-base/dist-client/index.js'\n\n@customElement('board-tile-list')\nexport class BoardTileList extends LitElement {\n static styles = [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n background-color: var(--md-sys-color-background);\n\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n clip-path: border-box;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--spacing-small);\n width: calc(100% - 45px);\n color: var(--md-sys-color-on-background);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n flex: 1;\n object-fit: contain;\n }\n\n md-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n md-icon[info] {\n color: var(--md-sys-color-primary);\n }\n\n md-icon[iconBtn][favored],\n md-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dim-color);\n box-sizing: border-box;\n color: var(--card-list-color);\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > :hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n [draggable='true'] {\n cursor: grab;\n transition: opacity 0.2s ease, transform 0.2s ease;\n }\n\n [card].dragging {\n opacity: 0.3;\n transform: scale(0.95);\n }\n\n [card].drop-before {\n border-left: 3px solid var(--md-sys-color-primary);\n }\n\n [card].drop-after {\n border-right: 3px solid var(--md-sys-color-primary);\n }\n\n [card].flip-moving {\n transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);\n }\n\n @keyframes drop-land {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n [card].flip-dropped-hidden {\n opacity: 0;\n }\n\n [card].flip-dropped {\n animation: drop-land 0.5s cubic-bezier(0.22, 0.6, 0.36, 1);\n }\n\n @keyframes highlight-sweep {\n 0% {\n background: linear-gradient(90deg, var(--md-sys-color-primary-container) 0%, transparent 0%);\n box-shadow: 0 0 8px 2px var(--md-sys-color-primary);\n }\n 50% {\n background: linear-gradient(90deg, transparent 0%, var(--md-sys-color-primary-container) 50%, transparent 100%);\n box-shadow: 0 0 12px 3px var(--md-sys-color-primary);\n }\n 100% {\n background: transparent;\n box-shadow: none;\n }\n }\n\n @keyframes border-pulse {\n 0%,\n 100% {\n outline: 2px solid transparent;\n }\n 25%,\n 75% {\n outline: 2px solid var(--md-sys-color-primary);\n }\n }\n\n @keyframes subtle-bounce {\n 0% {\n transform: scale(1);\n }\n 30% {\n transform: scale(1.03);\n }\n 100% {\n transform: scale(1);\n }\n }\n\n @keyframes surface-flash {\n 0% {\n background-color: var(--md-sys-color-primary-container);\n }\n 100% {\n background-color: transparent;\n }\n }\n\n [card].anim-sweep {\n animation: highlight-sweep 1.8s ease;\n border-radius: 4px;\n }\n\n [card].anim-pulse {\n animation: border-pulse 1.2s ease;\n }\n\n [card].anim-bounce {\n animation: subtle-bounce 0.8s ease;\n }\n\n [card].anim-flash {\n animation: surface-flash 1.5s ease-out;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Array }) boards: any[] = []\n @property({ type: Array }) favorites: any[] = []\n @property({ type: Array }) groups: any[] = []\n @property({ type: String }) group?: string\n @property({ type: Boolean }) creatable?: boolean = false\n @property({ type: String, attribute: 'search-text' }) searchText?: string\n @property({ type: Boolean, attribute: 'reorderable' }) reorderable: boolean = false\n @property({ type: Array }) updatedIds: string[] = []\n\n private _draggedId: string \| null = null\n private _dropTargetId: string \| null = null\n private _dropSide: 'before' \| 'after' \| null = null\n\n connectedCallback() {\n super.connectedCallback()\n\n if (this.reorderable) {\n this.renderRoot.addEventListener('dragstart', (e: Event) => {\n const target = (e.target as HTMLElement).closest('[card]') as HTMLElement \| null\n if (!target?.id) return\n\n this._draggedId = target.id\n target.classList.add('dragging')\n ;(e as DragEvent).dataTransfer!.effectAllowed = 'move'\n ;(e as DragEvent).dataTransfer?.setData('text/plain', target.id)\n })\n\n this.renderRoot.addEventListener('dragover', (e: Event) => {\n e.preventDefault()\n ;(e as DragEvent).dataTransfer!.dropEffect = 'move'\n\n const target = (e.target as HTMLElement).closest('[card]') as HTMLElement \| null\n if (!target?.id \|\| target.id === this._draggedId) return\n\n const targetRect = target.getBoundingClientRect()\n const mousePos = (e as DragEvent).clientX - targetRect.left\n const side = mousePos < targetRect.width / 2 ? 'before' : 'after'\n\n if (this._dropTargetId !== target.id \|\| this._dropSide !== side) {\n this._clearDropIndicator()\n this._dropTargetId = target.id\n this._dropSide = side\n target.classList.add(side === 'before' ? 'drop-before' : 'drop-after')\n }\n })\n\n this.renderRoot.addEventListener('dragleave', (e: Event) => {\n const target = (e.target as HTMLElement).closest('[card]') as HTMLElement \| null\n if (target?.id === this._dropTargetId) {\n const related = (e as DragEvent).relatedTarget as HTMLElement \| null\n if (!related \|\| !target.contains(related)) {\n this._clearDropIndicator()\n }\n }\n })\n\n this.renderRoot.addEventListener('drop', (e: Event) => {\n e.preventDefault()\n\n // drop 이벤트에서 직접 타겟과 방향을 계산 (dragleave가 먼저 발생해 상태를 지울 수 있으므로)\n const dropTarget = (e.target as HTMLElement).closest('[card]') as HTMLElement \| null\n let dropTargetId = this._dropTargetId\n let dropSide = this._dropSide\n\n if (dropTarget?.id && dropTarget.id !== this._draggedId) {\n dropTargetId = dropTarget.id\n const rect = dropTarget.getBoundingClientRect()\n dropSide = (e as DragEvent).clientX - rect.left < rect.width / 2 ? 'before' : 'after'\n }\n\n this._clearDropIndicator()\n\n const draggedEl = this._draggedId ? this.renderRoot.querySelector(`[card][id=\"${this._draggedId}\"]`) : null\n if (draggedEl) {\n draggedEl.classList.remove('dragging')\n }\n\n if (!this._draggedId \|\| !dropTargetId \|\| this._draggedId === dropTargetId) {\n this._resetDragState()\n return\n }\n\n // 배열 재정렬\n const boards = [...this.boards]\n const draggedIndex = boards.findIndex(b => b.id === this._draggedId)\n if (draggedIndex === -1) {\n this._resetDragState()\n return\n }\n\n const draggedBoardId = this._draggedId\n const [dragged] = boards.splice(draggedIndex, 1)\n let targetIndex = boards.findIndex(b => b.id === dropTargetId)\n if (dropSide === 'after') targetIndex++\n boards.splice(targetIndex, 0, dragged)\n\n this._resetDragState()\n\n // FLIP 애니메이션: 이전 위치 기록\n const cards = this.renderRoot.querySelectorAll('[card][id]')\n const firstPositions = new Map<string, DOMRect>()\n cards.forEach(card => {\n firstPositions.set(card.id, card.getBoundingClientRect())\n })\n\n // optimistic update → Lit 렌더\n this.boards = boards\n\n this.updateComplete.then(() => {\n const updatedCards = this.renderRoot.querySelectorAll('[card][id]')\n let droppedEl: HTMLElement \| null = null\n\n updatedCards.forEach(card => {\n const first = firstPositions.get(card.id)\n if (!first) return\n\n const last = card.getBoundingClientRect()\n const dx = first.left - last.left\n const dy = first.top - last.top\n\n const el = card as HTMLElement\n\n if (card.id === draggedBoardId) {\n // 드래그한 카드: 슬라이딩 완료 후 착지하도록 일단 숨김\n el.classList.add('flip-dropped-hidden')\n droppedEl = el\n } else {\n // 밀려나는 카드: 이전 위치에서 새 위치로 슬라이딩\n if (dx === 0 && dy === 0) return\n\n // Invert: 이전 위치로 되돌림\n el.style.transform = `translate(${dx}px, ${dy}px)`\n el.style.transition = 'none'\n\n requestAnimationFrame(() => {\n el.classList.add('flip-moving')\n el.style.transform = ''\n el.style.transition = ''\n\n el.addEventListener(\n 'transitionend',\n () => {\n el.classList.remove('flip-moving')\n },\n { once: true }\n )\n })\n }\n })\n\n // 밀려나는 카드 슬라이딩 완료 후 드래그한 카드 착지 → 착지 완료 후 이벤트 발송\n const boardIds = boards.map(b => b.id)\n const dispatchReordered = () => {\n this.dispatchEvent(\n new CustomEvent('reordered', {\n detail: {\n groupId: this.group,\n boardIds\n }\n })\n )\n }\n\n if (droppedEl) {\n setTimeout(() => {\n ;(droppedEl as HTMLElement).classList.remove('flip-dropped-hidden')\n ;(droppedEl as HTMLElement).classList.add('flip-dropped')\n ;(droppedEl as HTMLElement).addEventListener(\n 'animationend',\n () => {\n ;(droppedEl as HTMLElement).classList.remove('flip-dropped')\n dispatchReordered()\n },\n { once: true }\n )\n }, 500)\n } else {\n dispatchReordered()\n }\n })\n })\n\n this.renderRoot.addEventListener('dragend', (e: Event) => {\n this._clearDropIndicator()\n const target = (e.target as HTMLElement).closest('[card]')\n if (target) target.classList.remove('dragging')\n this._resetDragState()\n })\n }\n }\n\n private _clearDropIndicator() {\n if (this._dropTargetId) {\n const el = this.renderRoot.querySelector(`[card][id=\"${this._dropTargetId}\"]`)\n if (el) {\n el.classList.remove('drop-before', 'drop-after')\n }\n }\n this._dropTargetId = null\n this._dropSide = null\n }\n\n private _resetDragState() {\n this._draggedId = null\n this._dropTargetId = null\n this._dropSide = null\n }\n\n render() {\n const boards = this.boards \|\| []\n\n return html`\n ${this.creatable\n ? privileged(\n { privilege: 'mutation', category: 'board' },\n html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n )\n : nothing}\n ${repeat(\n boards,\n board => board.id,\n board => html`\n <div card draggable=\"true\" id=${board.id}>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <md-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board)\n e.preventDefault()\n }}\n >info</md-icon\n >\n\n ${(this.favorites \|\| []).includes(board.id)\n ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `\n : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}\n </div>\n `\n )}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const creationCard = this.renderRoot.querySelector('ox-board-creation-card') as any\n if (creationCard) {\n creationCard.reset()\n }\n\n if (changes.has('updatedIds') && this.updatedIds.length > 0) {\n const animClasses = ['anim-sweep', 'anim-pulse', 'anim-bounce', 'anim-flash']\n\n for (const id of this.updatedIds) {\n const card = this.renderRoot.querySelector(`[card][id=\"${id}\"]`)\n if (!card) continue\n\n const animClass = animClasses[Math.floor(Math.random() animClasses.length)]\n card.classList.add(animClass)\n card.addEventListener(\n 'animationend',\n () => {\n card.classList.remove(animClass)\n },\n { once: true }\n )\n }\n }\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(board) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: board\n })\n )\n }\n\n async removeFavorite(boardId) {\n await client.mutate({\n mutation: gql`\n mutation {\n deleteFavorite(routing: \"${boardId}\")\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await client.mutate({\n mutation: gql`\n mutation {\n createFavorite(favorite: {\n routing: \"${boardId}\"\n }) {\n id\n routing\n }\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n"]}

package/dist-client/graphql/board.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export declare function cloneBoard({ id, name, description, targetSubdomain, tar
 export declare function releaseBoard(board: any): Promise<any>;
 export declare function revertBoardVersion(id: any, version: any): Promise<any>;
 export declare function updateBoard(board: any): Promise<any>;
+export declare function fetchBoardsUpdatedSince(since: Date): Promise<any>;
 export declare function deleteBoard(id: any): Promise<any>;
 export declare function importBoards({ groupId, files, overwrite }: {
     groupId: string;

package/dist-client/graphql/board.js CHANGED Viewed

@@ -202,6 +202,31 @@ export async function updateBoard(board) {
     });
     return response.data;
 }
+export async function fetchBoardsUpdatedSince(since) {
+    const response = await client.query({
+        query: gql `
+      query BoardsUpdatedSince($since: DateTimeISO!) {
+        boardsUpdatedSince(since: $since) {
+          id
+          name
+          description
+          thumbnail
+          state
+          version
+          group {
+            id
+          }
+          createdAt
+          updatedAt
+          deletedAt
+        }
+      }
+    `,
+        variables: { since: since.toISOString() },
+        fetchPolicy: 'network-only'
+    });
+    return response.data.boardsUpdatedSince;
+}
 export async function deleteBoard(id) {
     const response = await client.mutate({
         mutation: gql `

package/dist-client/graphql/board.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"board.js","sourceRoot":"","sources":["../../client/graphql/board.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\nimport { gqlBuilder } from '@things-factory/utils'\n\nexport async function fetchBoardList(listParam = {}) {\n const response = await client.query({\n query: gql`\n {\n boards(${gqlBuilder.buildArgs(listParam)}) {\n items {\n id\n name\n description\n thumbnail\n state\n version\n createdAt\n updatedAt\n }\n total\n }\n }\n `\n })\n\n return response.data\n}\n\nexport async function fetchBoard(id) {\n const response = await client.query({\n query: gql`\n query FetchBoardById($id: String!) {\n board(id: $id) {\n id\n name\n description\n group {\n id\n name\n }\n thumbnail\n model\n createdAt\n creator {\n id\n name\n }\n state\n version\n updatedAt\n updater {\n id\n name\n }\n }\n }\n `,\n variables: { id }\n })\n\n return response.data\n}\n\nexport async function createBoard(board) {\n /\n input NewBoard {\n name : String!\n description : String\n model : String!\n type : String!\n groupId : String!\n }\n /\n\n board.model = JSON.stringify(board.model)\n\n const response = await client.mutate({\n mutation: gql`\n mutation CreateBoard($board: NewBoard!) {\n createBoard(board: $board) {\n id\n name\n description\n type\n model\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n board\n }\n })\n\n return response.data\n}\n\nexport async function cloneBoard({\n id,\n name,\n description,\n targetSubdomain,\n targetGroupId\n}: {\n id: string\n name: string\n description: string\n targetSubdomain: string\n targetGroupId: string\n}) {\n const response = await client.mutate({\n mutation: gql`\n mutation CloneBoard($id: String!, $patch: BoardPatch!, $targetSubdomain: String!, $targetGroupId: String) {\n cloneBoard(id: $id, patch: $patch, targetSubdomain: $targetSubdomain, targetGroupId: $targetGroupId) {\n id\n name\n description\n type\n model\n group {\n id\n name\n }\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n id,\n patch: { name, description },\n targetSubdomain,\n targetGroupId\n }\n })\n\n return response.data\n}\n\nexport async function releaseBoard(board) {\n const { id } = board\n\n const response = await client.mutate({\n mutation: gql`\n mutation ReleaseBoard($id: String!) {\n releaseBoard(id: $id) {\n id\n name\n description\n type\n model\n group {\n id\n name\n }\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n id\n }\n })\n\n return response.data\n}\n\nexport async function revertBoardVersion(id, version) {\n const response = await client.mutate({\n mutation: gql`\n mutation RevertBoardVersion($id: String!, $version: Float!) {\n revertBoardVersion(id: $id, version: $version) {\n name\n }\n }\n `,\n variables: {\n id,\n version\n }\n })\n\n return response.data.revertBoardVersion\n}\n\nexport async function updateBoard(board) {\n /\n input BoardPatch {\n name : String\n description : String\n model : String\n groupId : String\n type : String\n }\n /\n let { id, name, description, model, groupId, type } = board\n model = JSON.stringify(model)\n\n const response = await client.mutate({\n mutation: gql`\n mutation UpdateBoard($id: String!, $patch: BoardPatch!) {\n updateBoard(id: $id, patch: $patch) {\n id\n name\n description\n model\n group {\n id\n name\n }\n type\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n id,\n patch: { name, description, model, groupId, type }\n }\n })\n\n return response.data\n}\n\nexport async function deleteBoard(id) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteBoard(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n return response.data\n}\n\nexport async function importBoards({\n groupId,\n files,\n overwrite\n}: {\n groupId: string\n files: File[]\n overwrite: boolean\n}) {\n const response = await client.mutate({\n mutation: gql`\n mutation importBoards($groupId: String!, $files: [Upload!]!, $overwrite: Boolean!) {\n importBoards(groupId: $groupId, files: $files, overwrite: $overwrite) {\n id\n name\n description\n }\n }\n `,\n variables: {\n groupId,\n files,\n overwrite\n },\n context: { hasUpload: true }\n })\n\n return response.data\n}\n"]}
1	+ {"version":3,"file":"board.js","sourceRoot":"","sources":["../../client/graphql/board.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\nimport { gqlBuilder } from '@things-factory/utils'\n\nexport async function fetchBoardList(listParam = {}) {\n const response = await client.query({\n query: gql`\n {\n boards(${gqlBuilder.buildArgs(listParam)}) {\n items {\n id\n name\n description\n thumbnail\n state\n version\n createdAt\n updatedAt\n }\n total\n }\n }\n `\n })\n\n return response.data\n}\n\nexport async function fetchBoard(id) {\n const response = await client.query({\n query: gql`\n query FetchBoardById($id: String!) {\n board(id: $id) {\n id\n name\n description\n group {\n id\n name\n }\n thumbnail\n model\n createdAt\n creator {\n id\n name\n }\n state\n version\n updatedAt\n updater {\n id\n name\n }\n }\n }\n `,\n variables: { id }\n })\n\n return response.data\n}\n\nexport async function createBoard(board) {\n /\n input NewBoard {\n name : String!\n description : String\n model : String!\n type : String!\n groupId : String!\n }\n /\n\n board.model = JSON.stringify(board.model)\n\n const response = await client.mutate({\n mutation: gql`\n mutation CreateBoard($board: NewBoard!) {\n createBoard(board: $board) {\n id\n name\n description\n type\n model\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n board\n }\n })\n\n return response.data\n}\n\nexport async function cloneBoard({\n id,\n name,\n description,\n targetSubdomain,\n targetGroupId\n}: {\n id: string\n name: string\n description: string\n targetSubdomain: string\n targetGroupId: string\n}) {\n const response = await client.mutate({\n mutation: gql`\n mutation CloneBoard($id: String!, $patch: BoardPatch!, $targetSubdomain: String!, $targetGroupId: String) {\n cloneBoard(id: $id, patch: $patch, targetSubdomain: $targetSubdomain, targetGroupId: $targetGroupId) {\n id\n name\n description\n type\n model\n group {\n id\n name\n }\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n id,\n patch: { name, description },\n targetSubdomain,\n targetGroupId\n }\n })\n\n return response.data\n}\n\nexport async function releaseBoard(board) {\n const { id } = board\n\n const response = await client.mutate({\n mutation: gql`\n mutation ReleaseBoard($id: String!) {\n releaseBoard(id: $id) {\n id\n name\n description\n type\n model\n group {\n id\n name\n }\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n id\n }\n })\n\n return response.data\n}\n\nexport async function revertBoardVersion(id, version) {\n const response = await client.mutate({\n mutation: gql`\n mutation RevertBoardVersion($id: String!, $version: Float!) {\n revertBoardVersion(id: $id, version: $version) {\n name\n }\n }\n `,\n variables: {\n id,\n version\n }\n })\n\n return response.data.revertBoardVersion\n}\n\nexport async function updateBoard(board) {\n /\n input BoardPatch {\n name : String\n description : String\n model : String\n groupId : String\n type : String\n }\n /\n let { id, name, description, model, groupId, type } = board\n model = JSON.stringify(model)\n\n const response = await client.mutate({\n mutation: gql`\n mutation UpdateBoard($id: String!, $patch: BoardPatch!) {\n updateBoard(id: $id, patch: $patch) {\n id\n name\n description\n model\n group {\n id\n name\n }\n type\n state\n version\n createdAt\n updatedAt\n }\n }\n `,\n variables: {\n id,\n patch: { name, description, model, groupId, type }\n }\n })\n\n return response.data\n}\n\nexport async function fetchBoardsUpdatedSince(since: Date) {\n const response = await client.query({\n query: gql`\n query BoardsUpdatedSince($since: DateTimeISO!) {\n boardsUpdatedSince(since: $since) {\n id\n name\n description\n thumbnail\n state\n version\n group {\n id\n }\n createdAt\n updatedAt\n deletedAt\n }\n }\n `,\n variables: { since: since.toISOString() },\n fetchPolicy: 'network-only'\n })\n\n return response.data.boardsUpdatedSince\n}\n\nexport async function deleteBoard(id) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteBoard(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n return response.data\n}\n\nexport async function importBoards({\n groupId,\n files,\n overwrite\n}: {\n groupId: string\n files: File[]\n overwrite: boolean\n}) {\n const response = await client.mutate({\n mutation: gql`\n mutation importBoards($groupId: String!, $files: [Upload!]!, $overwrite: Boolean!) {\n importBoards(groupId: $groupId, files: $files, overwrite: $overwrite) {\n id\n name\n description\n }\n }\n `,\n variables: {\n groupId,\n files,\n overwrite\n },\n context: { hasUpload: true }\n })\n\n return response.data\n}\n"]}

package/dist-client/pages/board-list-page.d.ts CHANGED Viewed

@@ -16,6 +16,8 @@ export declare class BoardListPage extends BoardListPageBase {
     private _page;
     private _total;
     private page?;
+    private _lastFetchTime?;
+    private _updatedBoardIds;
     get context(): {
         title: {
             icon: string;
@@ -45,6 +47,16 @@ export declare class BoardListPage extends BoardListPageBase {
         limit?: any;
     }): Promise<any>;
     refreshBoards(): Promise<void>;
+    /**
+     * 컨텐츠가 스크롤 영역을 채우지 못하면 다음 페이지를 자동 로드한다.
+     */
+    private _filling;
+    private fillViewport;
+    /**
+     * 기존 목록을 유지하면서 변경된 보드만 갱신한다.
+     * 스크롤 위치가 보존된다.
+     */
+    incrementalRefresh(): Promise<void>;
     appendBoards(): Promise<void>;
     scrollAction(): Promise<void>;
     pageInitialized(): Promise<void>;