@sellmate/design-system 1.20.0 → 1.21.0

package/dist/collection/components/sd-loading-modal/sd-loading-modal.js

@@ -1,13 +1,21 @@
 import { Host, h } from "@stencil/core";
 import { LOADING_MODAL_BUTTON_PRESET, LOADING_MODAL_COLORS, LOADING_MODAL_DEFAULT_BUTTON_LABEL, LOADING_MODAL_DEFAULT_MESSAGE, LOADING_MODAL_LAYOUT, LOADING_MODAL_TYPOGRAPHY, } from "./sd-loading-modal.config";
 export class SdLoadingModal {
+    /** 모달 상태 (loading: 로딩 중, error: 에러) */
     state = 'loading';
+    /** 표시할 메시지 (배열이면 여러 줄로 렌더링) */
     message = '';
+    /** 하단 버튼 표시 여부 */
     useButton = false;
+    /** 버튼 레이블 (없으면 state에 따른 기본값 사용) */
     buttonLabel = '';
+    /** 모달 너비 */
     width;
+    /** 모달 높이 */
     height;
+    /** sd-circle-progress에 전달할 진행률 (0–100) */
     progress;
+    /** 버튼 클릭 시 발생합니다. */
     click;
     get resolvedState() {
         return this.state ?? 'loading';
@@ -46,7 +54,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: '12e8bb40871556dddad6bf3e9daa1703f3a29fc3', style: hostStyle }, h("div", { key: 'b1f0282746a8a4ceabd120a1c366b836edb805c1', class: "sd-loading-modal" }, h("div", { key: '496c034608b3d31557f154f77aa7cb7c2cb9558a', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'e0a57ee49f6fe46680a8e2393a00014edd76d36f', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'bd0c91c279a7cd4d58a18f7bfd6e8c345ae00fcf', class: "sd-loading-modal__button" }, h("sd-button", { key: '0d03006a668333de256b2142efc9d0c374bfef45', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '0f3719ca22408ff2739f3997e693fe0e17cb32ab', style: hostStyle }, h("div", { key: '25501b81a4514315bd3b408bf958f549b099c5a5', class: "sd-loading-modal" }, h("div", { key: 'f5e6cf6334454a8455f95544a934fc245bddbbe6', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '7629809572661e28f9564db1d06e882cb64580e8', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '36e1b978e1cc4ef56b8072d1d6dab83807eca951', class: "sd-loading-modal__button" }, h("sd-button", { key: '218cb045df7b0dafc49024fc905bd88c7b12fcff', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {
@@ -80,7 +88,7 @@ export class SdLoadingModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uC0C1\uD0DC (loading: \uB85C\uB529 \uC911, error: \uC5D0\uB7EC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -100,7 +108,7 @@ export class SdLoadingModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uBA54\uC2DC\uC9C0 (\uBC30\uC5F4\uC774\uBA74 \uC5EC\uB7EC \uC904\uB85C \uB80C\uB354\uB9C1)"
                 },
                 "getter": false,
                 "setter": false,
@@ -120,7 +128,7 @@ export class SdLoadingModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD558\uB2E8 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -140,7 +148,7 @@ export class SdLoadingModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uB808\uC774\uBE14 (\uC5C6\uC73C\uBA74 state\uC5D0 \uB530\uB978 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -160,7 +168,7 @@ export class SdLoadingModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -179,7 +187,7 @@ export class SdLoadingModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBAA8\uB2EC \uB192\uC774"
                 },
                 "getter": false,
                 "setter": false,
@@ -198,7 +206,7 @@ export class SdLoadingModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "sd-circle-progress\uC5D0 \uC804\uB2EC\uD560 \uC9C4\uD589\uB960 (0\u2013100)"
                 },
                 "getter": false,
                 "setter": false,
@@ -216,7 +224,7 @@ export class SdLoadingModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -2,11 +2,14 @@ import { h } from "@stencil/core";
 import { isTopInteractiveModal, registerModal, requestCloseForModal, setModalInteractive, unregisterModal, } from "../../utils/modal-stack";
 let modalIdCounter = 0;
 const ANIMATION_DURATION = 350;
+const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 export class SdModalContainer {
     el;
+    /** 마지막 모달이 닫힐 때 자신을 DOM에서 제거할지 여부 */
     autoRemove = false;
     entries = [];
     layerRefs = new Map();
+    /** 확인 모달을 열고 모달 ID를 반환합니다. */
     async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
@@ -21,6 +24,7 @@ export class SdModalContainer {
         });
         return id;
     }
+    /** 로딩 모달을 열고 모달 ID를 반환합니다. */
     async openLoading(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createLoadingModal(id, options);
@@ -35,6 +39,7 @@ export class SdModalContainer {
         });
         return id;
     }
+    /** 커스텀 엘리먼트를 모달로 등록하고 모달 ID를 반환합니다. */
     async createCustom(element, options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         element.setAttribute('data-modal-id', id);
@@ -68,6 +73,7 @@ export class SdModalContainer {
                         return;
                     this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
                     modalEl.classList.add('sd-modal-container__modal--visible');
+                    this.focusInitialElement(modalEl);
                 });
             });
         }
@@ -79,12 +85,14 @@ export class SdModalContainer {
             unregisterModal(entry.id);
         }
     }
+    /** 지정한 ID의 모달을 닫습니다. */
     async dismissById(id, reason) {
         const entry = this.entries.find(e => e.id === id);
         if (!entry)
             return;
         this.requestDismiss(id, reason);
     }
+    /** 열려있는 모달의 props를 동적으로 업데이트합니다. */
     async update(id, props) {
         const entry = this.entries.find(e => e.id === id && !e.closing);
         if (!entry)
@@ -97,7 +105,14 @@ export class SdModalContainer {
         this.applyProps(entry.modalEl, props);
     }
     mountEntry(entry) {
-        this.entries = [...(this.entries ?? []), entry];
+        const activeElement = typeof document !== 'undefined' ? document.activeElement : null;
+        this.entries = [
+            ...(this.entries ?? []),
+            {
+                ...entry,
+                previousActiveElement: activeElement,
+            },
+        ];
         registerModal({
             id: entry.id,
             persistent: entry.persistent,
@@ -155,6 +170,7 @@ export class SdModalContainer {
             clearTimeout(currentEntry.dismissTimerId);
         currentEntry.modalEl.remove();
         unregisterModal(id);
+        this.restoreFocus(currentEntry.previousActiveElement);
         currentEntry.modalRef._triggerDismissed();
         this.layerRefs.delete(id);
         this.entries = (this.entries ?? []).filter(e => e.id !== id);
@@ -240,6 +256,44 @@ export class SdModalContainer {
             return;
         requestCloseForModal(id);
     }
+    /**
+     * 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로
+     * 이동시킨다. 이를 하지 않으면 모달을 연 버튼이 계속 포커스를 가져,
+     * Enter 키를 누를 때마다 트리거가 재실행되어 모달이 중첩으로 쌓인다.
+     */
+    focusInitialElement(modalEl) {
+        const target = this.getInitialFocusTarget(modalEl);
+        target?.focus();
+    }
+    getInitialFocusTarget(modalEl) {
+        const explicit = modalEl.querySelector('[autofocus]');
+        if (explicit)
+            return explicit;
+        // 각 모달 타입의 메인(주요 액션) 버튼에 우선 포커스해 Enter 로 확정 가능하게 한다.
+        // confirm/action/loading 모두 대응한다.
+        const mainButton = modalEl.querySelector([
+            '.sd-confirm-modal__button sd-button:last-of-type button',
+            '.sd-action-modal__footer > sd-button button',
+            '.sd-loading-modal__button sd-button button',
+        ].join(','));
+        if (mainButton)
+            return mainButton;
+        // 그 외(커스텀 모달 등): 헤더의 닫기(X) 버튼을 제외한 첫 포커스 가능 요소.
+        const focusables = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTOR));
+        const preferred = focusables.find(el => !el.closest('.sd-action-modal__close, .sd-confirm-modal__close-button'));
+        if (focusables.length > 0)
+            return preferred ?? focusables[0];
+        if (!modalEl.hasAttribute('tabindex'))
+            modalEl.setAttribute('tabindex', '-1');
+        return modalEl;
+    }
+    restoreFocus(previousActiveElement) {
+        if (previousActiveElement &&
+            typeof previousActiveElement.focus === 'function' &&
+            previousActiveElement.isConnected) {
+            previousActiveElement.focus();
+        }
+    }
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
         modalEl.classList.remove(cls);
@@ -303,7 +357,7 @@ export class SdModalContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB9C8\uC9C0\uB9C9 \uBAA8\uB2EC\uC774 \uB2EB\uD790 \uB54C \uC790\uC2E0\uC744 DOM\uC5D0\uC11C \uC81C\uAC70\uD560\uC9C0 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +407,7 @@ export class SdModalContainer {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD655\uC778 \uBAA8\uB2EC\uC744 \uC5F4\uACE0 \uBAA8\uB2EC ID\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -390,7 +444,7 @@ export class SdModalContainer {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB85C\uB529 \uBAA8\uB2EC\uC744 \uC5F4\uACE0 \uBAA8\uB2EC ID\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -435,7 +489,7 @@ export class SdModalContainer {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uCEE4\uC2A4\uD140 \uC5D8\uB9AC\uBA3C\uD2B8\uB97C \uBAA8\uB2EC\uB85C \uB4F1\uB85D\uD558\uACE0 \uBAA8\uB2EC ID\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -460,7 +514,7 @@ export class SdModalContainer {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC9C0\uC815\uD55C ID\uC758 \uBAA8\uB2EC\uC744 \uB2EB\uC2B5\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -509,7 +563,7 @@ export class SdModalContainer {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC5F4\uB824\uC788\uB294 \uBAA8\uB2EC\uC758 props\uB97C \uB3D9\uC801\uC73C\uB85C \uC5C5\uB370\uC774\uD2B8\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }