@sellmate/design-system 1.28.0 → 1.31.0

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

@@ -3,8 +3,8 @@ import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 import { CONFIRM_MODAL_DEFAULT_BUTTON, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_ICON_MAP, SUB_BUTTON_PRESET, TITLE_ICON_SIZE, } from "./sd-confirm-modal.config";
 export class SdConfirmModal {
     el;
-    hasSlottedContent = false;
-    customContentRef;
+    hasTagSlot = false;
+    hasOptionSlot = false;
     slotObserver;
     /** 모달 타입 (아이콘·버튼 색상 결정) */
     type = 'positive';
@@ -22,14 +22,12 @@ export class SdConfirmModal {
     mainButtonLabel = '확인';
     /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
     subButtonLabel = '';
-    /** 콘텐츠 박스에 표시할 태그 프리셋 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
     tagPreset = 'square_sm_grey';
-    /** 콘텐츠 박스에 표시할 태그 레이블 */
+    /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
     tagLabel = '';
-    /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
+    /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
     slotLabel = '';
-    /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
-    tagContents;
     /** 닫기 버튼 클릭 시 발생합니다. */
     close;
     /** 취소 버튼 클릭 시 발생합니다. */
@@ -48,17 +46,6 @@ export class SdConfirmModal {
             characterData: true,
         });
     }
-    componentDidRender() {
-        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
-            if (typeof this.customContentRef.replaceChildren === 'function') {
-                this.customContentRef.replaceChildren(this.tagContents);
-            }
-            else {
-                this.customContentRef.innerHTML = '';
-                this.customContentRef.appendChild(this.tagContents);
-            }
-        }
-    }
     disconnectedCallback() {
         this.slotObserver?.disconnect();
     }
@@ -68,29 +55,39 @@ export class SdConfirmModal {
     get resolvedMainButton() {
         return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
     }
-    get hasTagContent() {
-        return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
-            (this.slotLabel !== undefined && this.slotLabel !== ''));
+    /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
+    get showTagBox() {
+        return this.tagLabel !== '' || this.hasTagSlot;
     }
-    get showContentBox() {
-        return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
+    /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
+    get showOption() {
+        return this.slotLabel !== '' || this.hasOptionSlot;
     }
+    /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
     syncHasSlottedContent() {
-        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
-            node.classList.contains('sd-confirm-modal')) &&
-            (node.nodeType === Node.ELEMENT_NODE ||
-                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
-        if (hasSlottedContent !== this.hasSlottedContent) {
-            this.hasSlottedContent = hasSlottedContent;
-        }
+        let hasTagSlot = false;
+        let hasOptionSlot = false;
+        Array.from(this.el.children).forEach(node => {
+            if (!(node instanceof HTMLElement))
+                return;
+            if (node.classList.contains('sd-confirm-modal'))
+                return;
+            const slot = node.getAttribute('slot');
+            if (slot === 'tag')
+                hasTagSlot = true;
+            else if (slot === 'option')
+                hasOptionSlot = true;
+        });
+        if (hasTagSlot !== this.hasTagSlot)
+            this.hasTagSlot = hasTagSlot;
+        if (hasOptionSlot !== this.hasOptionSlot)
+            this.hasOptionSlot = hasOptionSlot;
     }
     render() {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '396bef971efaab6638586fa1a067eae54c1897f4', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '4716168808371f4515bf763e77198386fc9fe7cf', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '1ab7ca2c5262374a0823a8e5c501758433c25051', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'a190f975d27153e4d928c95395f13ecd8ba0667a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'da7821097377b7a9781df87ae40b2439a103ff9b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'ced23315888ad43b3d91b8bb5388b77e517dd52a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '5bdbe145bdb6639ebe582e7295f413a4b1990c15', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
-                this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: '8d84d72de4a8194100a22c2f19190d35da8ad9d0', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '8d3c11e01819fc4b3a92ef2c00afab336b12a4d8', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'f5013d2753d946a46666c3fc4e7e5ec79ebb5bf3', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '88ca2b2d80ec9dfe06aa6d9ae4d65a9bf365e52e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'ab9ad0c312d4155a5d8985d43c31f4ab11fc9110', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '294bea4d946392e63ec152f4a109e75fd9c5a743', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (h("div", { key: '6ab23578df59a6c29718087fda729a256f32e725', class: "sd-confirm-modal__content-box" }, h("slot", { key: '48c21c001a4608d1b36c4a8feee99d7ee05422c7', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { key: 'fb227ba974fc9b176e90bfa906c212099c23c98b', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '665429ebae13b9c71e4eeaf372c45dbb98b71aa8', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (h("div", { key: '589d730c0952cd6370f96984f2d0e3c9a9fe50e6', class: "sd-confirm-modal__option" }, h("slot", { key: '23a57ca4663436aabd4f606246c80d3c3aec1ecf', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (h("span", { key: '6dead5dc544f4f1ed68a50d2619a6c10f438ea67', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), h("div", { key: '7156c27678f8f9a6de5afdbeed191a954420f1fa', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '02a6b6ffe4218e93ceef0dad349cd122587864df', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '6441fda6cebcc24fd48715ed85909b652725788f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {
@@ -293,7 +290,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uD504\uB9AC\uC14B"
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 tag \uC2AC\uB86F \uAE30\uBCF8 \uD0DC\uADF8 \uD504\uB9AC\uC14B (slot=\"tag\" \uBBF8\uC9C0\uC815 \uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +310,7 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD0DC\uADF8 \uB808\uC774\uBE14"
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 tag \uC2AC\uB86F \uAE30\uBCF8 \uD0DC\uADF8 \uB808\uC774\uBE14 (slot=\"tag\" \uBBF8\uC9C0\uC815 \uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,41 +330,20 @@ export class SdConfirmModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uD45C\uC2DC\uD560 \uD14D\uC2A4\uD2B8 (tagLabel \uC5C6\uC744 \uB54C \uC0AC\uC6A9)"
+                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4 option \uC2AC\uB86F \uAE30\uBCF8 \uD14D\uC2A4\uD2B8 (slot=\"option\" \uBBF8\uC9C0\uC815 \uC2DC)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "slot-label",
                 "defaultValue": "''"
-            },
-            "tagContents": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement | undefined",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCF58\uD150\uCE20 \uBC15\uC2A4\uC5D0 \uC9C1\uC811 \uC0BD\uC785\uD560 HTMLElement"
-                },
-                "getter": false,
-                "setter": false
             }
         };
     }
     static get states() {
         return {
-            "hasSlottedContent": {}
+            "hasTagSlot": {},
+            "hasOptionSlot": {}
         };
     }
     static get events() {

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -38,7 +38,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'b52c18bc057886ed8d6b1f5d145225a4c31f0035', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -46,7 +46,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '60e23369acd45ae6a74b076c08309644a10aceb3', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '5db37f4d71914215e4ae4236791dd3e0eda10c96', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'd653fa9a79c41b39e77a6a77afba2233a977ba29', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'e37f745bab9ea7ac1864ce0944ffd9d1d62eecd2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -33,6 +33,8 @@ export class SdDatePicker {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -116,9 +118,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'c3adbcb65f372a7c33350a747b29b5a35990c292', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'aac9b498321c4506a6979a17de4896c4521887a1', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '00a558ac1c9a5af666c62c15e18e240036e1bb34', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '142098d59d8a5df4054e7a39f4d93b0ddc06109b', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '319dc85ff9a41e8b04fdaecc1c7e9e01c953014b', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {
@@ -429,6 +431,25 @@ export class SdDatePicker {
                 "attribute": "error",
                 "defaultValue": "false"
             },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 error/rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.css

@@ -12,6 +12,9 @@ sd-date-range-picker-calendar .sd-date-range-picker-calendar {
   box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
   user-select: none;
 }
+sd-date-range-picker-calendar .sd-date-range-picker-calendar--with-time {
+  height: auto;
+}
 sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar {
   position: relative;
   display: flex;
@@ -181,4 +184,76 @@ sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty {
   visibility: hidden;
   pointer-events: none;
   background: transparent;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-divider {
+  width: 100%;
+  height: 1px;
+  background: var(--range-divider);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time {
+  display: flex;
+  flex-direction: row;
+  gap: var(--time-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: var(--time-section-gap);
+  padding: var(--time-padding-y) var(--time-padding-x);
+  border-radius: var(--time-radius);
+  background: var(--time-bg-default);
+  font-size: var(--time-font-size);
+  line-height: var(--time-line-height);
+  font-weight: var(--time-font-weight);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section--active {
+  background: var(--time-bg-selected);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-date {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--time-date-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-num {
+  color: var(--time-date-label);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-unit {
+  color: var(--time-date-unit);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--time-unit-gap);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input {
+  width: 40px;
+  height: var(--time-input-height);
+  padding: 0;
+  border: 1px solid var(--time-input-border);
+  border-radius: var(--time-input-radius);
+  background: var(--calendar-bg);
+  text-align: center;
+  font-size: var(--time-font-size);
+  line-height: var(--time-line-height);
+  font-weight: var(--time-font-weight);
+  color: var(--time-input-text);
+  box-sizing: border-box;
+  outline: none;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input::placeholder {
+  color: var(--time-input-placeholder);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:focus {
+  border-color: var(--time-input-border-focus);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:disabled {
+  cursor: not-allowed;
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-colon {
+  color: var(--time-date-label);
+}
+sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-suffix {
+  color: var(--time-date-unit);
 }

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js

@@ -1,7 +1,7 @@
 import { h, Fragment } from "@stencil/core";
 import { today, addDays } from "../../../utils/date";
 import { useDatePicker } from "../../../modules/useDatePicker";
-import { CALENDAR_LAYOUT, RANGE_LAYOUT, WEEK_LABELS } from "../sd-date-range-picker.config";
+import { CALENDAR_LAYOUT, RANGE_LAYOUT, TIME_LAYOUT, WEEK_LABELS, } from "../sd-date-range-picker.config";
 export class SdDateRangePickerCalendar {
     /** 선택된 날짜 범위 [시작일, 종료일] */
     value = null;
@@ -9,11 +9,20 @@ export class SdDateRangePickerCalendar {
     selectable;
     /** 최대 선택 가능 일 수 */
     maxRange;
+    /** 시간(시:분) 선택 푸터 사용 여부 */
+    useTimePicker = false;
     currentYear;
     currentMonth;
     pendingStart = '';
     hoverDate = '';
     displayValue = null;
+    // 시:분은 2자리 미만도 허용하기 위해 문자열로 관리하고 emit/blur 시 패딩한다
+    startHour = '00';
+    startMinute = '00';
+    endHour = '00';
+    endMinute = '00';
+    /** 직접 emit한 값이 value prop으로 되돌아오는 에코를 구분해 시간 입력 clobber를 막는다 */
+    lastEmitted = '';
     /** 날짜 범위 선택 시 발생합니다. */
     select;
     /** 달력 뷰가 변경될 때 발생합니다. */
@@ -26,13 +35,31 @@ export class SdDateRangePickerCalendar {
         this.syncFromValue();
     }
     syncFromValue() {
-        const base = this.value?.[0] || today;
+        // 자신이 emit한 값이 그대로 돌아온 경우(에코)에는 시간 입력 상태를 건드리지 않는다
+        if (this.useTimePicker && JSON.stringify(this.value) === this.lastEmitted)
+            return;
+        const start = this.splitDateTime(this.value?.[0]);
+        const end = this.splitDateTime(this.value?.[1]);
+        const base = start.date || today;
         const [year, month] = base.split('-').map(Number);
         this.currentYear = year;
         this.currentMonth = month;
         this.pendingStart = '';
         this.hoverDate = '';
-        this.displayValue = this.value ? [this.value[0], this.value[1]] : null;
+        // displayValue는 날짜 부분만 보관 — 캘린더 그리드 로직은 시간과 무관하게 동작한다
+        this.displayValue = this.value ? [start.date, end.date] : null;
+        this.startHour = start.hour;
+        this.startMinute = start.minute;
+        this.endHour = end.hour;
+        this.endMinute = end.minute;
+    }
+    /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DD"를 날짜/시/분으로 분리한다 */
+    splitDateTime(v) {
+        if (v == null || v === '')
+            return { date: '', hour: '00', minute: '00' };
+        const [date = '', time = ''] = v.split(' ');
+        const [hour = '00', minute = '00'] = time.split(':');
+        return { date, hour, minute };
     }
     get rightYear() {
         return this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear;
@@ -139,13 +166,69 @@ export class SdDateRangePickerCalendar {
             this.pendingStart = cell.date;
             this.displayValue = null;
             this.hoverDate = '';
+            // 새 범위 선택을 시작하면 시작=00:00, 종료=23:59(하루 전체)로 초기화한다
+            if (this.useTimePicker) {
+                this.startHour = '00';
+                this.startMinute = '00';
+                this.endHour = '23';
+                this.endMinute = '59';
+            }
             return;
         }
         const newRange = [this.pendingStart, cell.date];
         this.pendingStart = '';
         this.hoverDate = '';
         this.displayValue = newRange;
-        this.select.emit(newRange);
+        this.emitRange(newRange[0], newRange[1]);
+    }
+    /** 날짜 범위(+ useTimePicker면 시:분)를 결합해 sdSelect로 emit한다 */
+    emitRange(startDate, endDate) {
+        const range = this.useTimePicker
+            ? [
+                `${startDate} ${this.pad(this.startHour)}:${this.pad(this.startMinute)}`,
+                `${endDate} ${this.pad(this.endHour)}:${this.pad(this.endMinute)}`,
+            ]
+            : [startDate, endDate];
+        this.lastEmitted = JSON.stringify(range);
+        this.select.emit(range);
+    }
+    pad(v) {
+        return String(Number(v) || 0).padStart(2, '0');
+    }
+    /** 시:분 입력 — 숫자만/2자리로 제한하고 범위(시 0~23, 분 0~59)로 클램프한다 */
+    handleTimeInput(which, part, event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '').slice(0, 2);
+        const max = part === 'h' ? 23 : 59;
+        const next = digits !== '' && Number(digits) > max ? String(max) : digits;
+        input.value = next;
+        this.setTimePart(which, part, next);
+        // 범위가 확정된 상태면 실시간으로 재emit한다
+        if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
+            this.emitRange(this.displayValue[0], this.displayValue[1]);
+        }
+    }
+    handleTimeBlur(which, part) {
+        this.setTimePart(which, part, this.pad(this.getTimePart(which, part)));
+    }
+    getTimePart(which, part) {
+        if (which === 'start')
+            return part === 'h' ? this.startHour : this.startMinute;
+        return part === 'h' ? this.endHour : this.endMinute;
+    }
+    setTimePart(which, part, value) {
+        if (which === 'start') {
+            if (part === 'h')
+                this.startHour = value;
+            else
+                this.startMinute = value;
+        }
+        else {
+            if (part === 'h')
+                this.endHour = value;
+            else
+                this.endMinute = value;
+        }
     }
     handleDayHover(cell) {
         if (!cell.inCurrentMonth)
@@ -211,6 +294,22 @@ export class SdDateRangePickerCalendar {
                 }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => this.handleDayClick(cell), onMouseEnter: () => this.handleDayHover(cell) }, h("span", { class: "sd-date-range-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
         }))));
     }
+    renderTimeSection(which, date, suffix) {
+        const active = date !== '';
+        const [year = '', month = '', day = ''] = active ? date.split('-') : [];
+        const hour = which === 'start' ? this.startHour : this.endHour;
+        const minute = which === 'start' ? this.startMinute : this.endMinute;
+        const renderNum = (n, strip) => (h("span", { class: "sd-date-range-picker-calendar__time-num" }, active && n !== '' ? (strip ? String(Number(n)) : n) : '-'));
+        return (h("div", { class: {
+                'sd-date-range-picker-calendar__time-section': true,
+                'sd-date-range-picker-calendar__time-section--active': active,
+            } }, h("div", { class: "sd-date-range-picker-calendar__time-date" }, renderNum(year, false), h("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uB144"), renderNum(month, true), h("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uC6D4"), renderNum(day, true), h("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uC77C")), h("div", { class: "sd-date-range-picker-calendar__time-input-group" }, h("input", { type: "text", inputMode: "numeric", maxLength: 2, class: "sd-date-range-picker-calendar__time-input", placeholder: "--", "aria-label": `${suffix} 시`, disabled: !active, value: active ? hour : '', onInput: e => this.handleTimeInput(which, 'h', e), onBlur: () => this.handleTimeBlur(which, 'h') }), h("span", { class: "sd-date-range-picker-calendar__time-colon" }, ":"), h("input", { type: "text", inputMode: "numeric", maxLength: 2, class: "sd-date-range-picker-calendar__time-input", placeholder: "--", "aria-label": `${suffix} 분`, disabled: !active, value: active ? minute : '', onInput: e => this.handleTimeInput(which, 'm', e), onBlur: () => this.handleTimeBlur(which, 'm') })), h("span", { class: "sd-date-range-picker-calendar__time-suffix" }, suffix)));
+    }
+    renderTimeFooter() {
+        const startDate = this.pendingStart || this.displayValue?.[0] || '';
+        const endDate = this.displayValue?.[1] || '';
+        return (h(Fragment, null, h("span", { class: "sd-date-range-picker-calendar__time-divider", "aria-hidden": "true" }), h("div", { class: "sd-date-range-picker-calendar__time" }, this.renderTimeSection('start', startDate, '부터'), this.renderTimeSection('end', endDate, '까지'))));
+    }
     render() {
         const cssVars = {
             '--calendar-bg': CALENDAR_LAYOUT.bg,
@@ -243,8 +342,31 @@ export class SdDateRangePickerCalendar {
             '--range-height': `${RANGE_LAYOUT.height}px`,
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
+            '--time-bg-default': TIME_LAYOUT.bgDefault,
+            '--time-bg-selected': TIME_LAYOUT.bgSelected,
+            '--time-date-label': TIME_LAYOUT.dateLabel,
+            '--time-date-unit': TIME_LAYOUT.dateUnit,
+            '--time-date-gap': `${TIME_LAYOUT.dateGap}px`,
+            '--time-radius': `${TIME_LAYOUT.radius}px`,
+            '--time-padding-x': `${TIME_LAYOUT.paddingX}px`,
+            '--time-padding-y': `${TIME_LAYOUT.paddingY}px`,
+            '--time-gap': `${TIME_LAYOUT.gap}px`,
+            '--time-section-gap': `${TIME_LAYOUT.sectionGap}px`,
+            '--time-unit-gap': `${TIME_LAYOUT.unitGap}px`,
+            '--time-font-size': `${TIME_LAYOUT.fontSize}px`,
+            '--time-line-height': `${TIME_LAYOUT.lineHeight}px`,
+            '--time-font-weight': TIME_LAYOUT.fontWeight,
+            '--time-input-height': `${TIME_LAYOUT.input.height}px`,
+            '--time-input-radius': `${TIME_LAYOUT.input.radius}px`,
+            '--time-input-border': TIME_LAYOUT.input.border,
+            '--time-input-border-focus': TIME_LAYOUT.input.borderFocus,
+            '--time-input-text': TIME_LAYOUT.input.text,
+            '--time-input-placeholder': TIME_LAYOUT.input.placeholder,
         };
-        return (h(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, h("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '7d368d23f2c9d2b28c847a7fee5de474edc350f0' }, h("div", { key: '6d97bfa728eb65c46d21f53c3b046b1a0c7d2ff6', class: {
+                'sd-date-range-picker-calendar': true,
+                'sd-date-range-picker-calendar--with-time': this.useTimePicker,
+            }, style: cssVars }, this.renderYearNav(), h("div", { key: '45b4a2488f6e73814d3a6be9710d7c14fd2e8130', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'f1d741f8684ca213d30f559e7f6fc5a4388bbac1', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)), this.useTimePicker && this.renderTimeFooter())));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {
@@ -312,6 +434,26 @@ export class SdDateRangePickerCalendar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "max-range"
+            },
+            "useTimePicker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04(\uC2DC:\uBD84) \uC120\uD0DD \uD478\uD130 \uC0AC\uC6A9 \uC5EC\uBD80"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-time-picker",
+                "defaultValue": "false"
             }
         };
     }
@@ -321,7 +463,11 @@ export class SdDateRangePickerCalendar {
             "currentMonth": {},
             "pendingStart": {},
             "hoverDate": {},
-            "displayValue": {}
+            "displayValue": {},
+            "startHour": {},
+            "startMinute": {},
+            "endHour": {},
+            "endMinute": {}
         };
     }
     static get events() {

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.config.js

@@ -8,3 +8,30 @@ export const RANGE_LAYOUT = {
     panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
     divider: datepickerTokens.datepicker.calendar.range.divider,
 };
+const timeTokens = datepickerTokens.datepicker.calendar.time;
+/** 시간(시:분) 선택 푸터 레이아웃 토큰 */
+export const TIME_LAYOUT = {
+    bgDefault: timeTokens.bg.default,
+    bgSelected: timeTokens.bg.selected,
+    dateLabel: timeTokens.date.label,
+    dateUnit: timeTokens.date.unit,
+    dateGap: timeTokens.date.gap,
+    radius: timeTokens.radius,
+    paddingX: timeTokens.paddingX,
+    paddingY: timeTokens.paddingY,
+    gap: timeTokens.gap,
+    sectionGap: timeTokens.section.gap,
+    unitGap: timeTokens.unit.gap,
+    fontSize: timeTokens.typography.fontSize,
+    lineHeight: timeTokens.typography.lineHeight,
+    fontWeight: timeTokens.typography.fontWeight,
+    // 시:분 입력 박스는 datepicker 필드(sm) 토큰을 재사용한다
+    input: {
+        height: DATEPICKER_SIZE_MAP.sm.height,
+        radius: DATEPICKER_SIZE_MAP.sm.radius,
+        border: DATEPICKER_COLORS.border.default,
+        borderFocus: DATEPICKER_COLORS.border.focus,
+        text: DATEPICKER_COLORS.text.default,
+        placeholder: DATEPICKER_COLORS.text.disabled,
+    },
+};