@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.10

package/dist/cjs/assets/scripts/notification/FullWidthNotification.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullWidthNotification = void 0;
+var _notification = require("../../../constant/notification");
 var _sanitize = require("../utils/sanitize");
 var _const = require("./const");
 var _utils = require("./utils");
@@ -30,7 +31,8 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     } = this.options;
     const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FULL_WIDTH.BASE, color, className);
     const iconHtml = _const.FULL_WIDTH_ICON_MAP[color](_const.FULL_WIDTH_SIZES.ICON);
@@ -41,7 +43,8 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     }));
     return wrapper;
   }
@@ -53,7 +56,8 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     } = params;
     return `
       <div class="${_const.CLASS_NAMES.FULL_WIDTH.CONTAINER}">
@@ -67,18 +71,25 @@ class FullWidthNotification {
           </div>
           <div class="${_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
             ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
-            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
             ${this.renderCloseButton(onClose)}
           </div>
         </div>
       </div>
     `;
   }
-  renderHidePermanentlyButton(onHidePermanently) {
+  /**
+   * 다시보지 않기 버튼.
+   *
+   * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+   * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+   */
+  renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
     if (!onHidePermanently) return '';
+    const label = hidePermanentlyLabel ?? _notification.HIDE_PERMANENTLY_LABEL.fullWidth;
     return `
       <button type="button" class="ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link" data-hide-permanently="true">
-        다시보지 않기
+        ${label}
       </button>
     `;
   }

package/dist/cjs/assets/scripts/notification/MessageNotification.js

@@ -7,6 +7,7 @@ exports.MessageNotification = void 0;
 var _featuredIcon = require("../featuredIcon");
 var _sanitize = require("../utils/sanitize");
 var _const = require("./const");
+var _messageTemplate = require("./messageTemplate");
 var _utils = require("./utils");
 class MessageNotification {
   constructor(options) {
@@ -30,7 +31,8 @@ class MessageNotification {
       className,
       actions,
       onClose,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     } = this.options;
     // message 타입은 neutral, error, warning, success 4가지 색상만 지원
     let actualColor = color;
@@ -47,16 +49,20 @@ class MessageNotification {
         svgString: iconSvg,
         theme: 'light-circle',
         color: actualColor,
-        size: _const.MESSAGE_SIZES.FEATURED_ICON
+        size: _const.MESSAGE_SIZES.FEATURED_ICON,
+        // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
+        // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
+        className: _const.CLASS_NAMES.MESSAGE.ICON
       });
       featuredIconElement = this.featuredIcon.getElement();
     }
-    wrapper.innerHTML = (0, _sanitize.sanitizeHtml)(this.buildTemplate({
+    wrapper.innerHTML = (0, _sanitize.sanitizeHtml)((0, _messageTemplate.buildMessageTemplate)({
       title,
       supportingText,
       actions,
       onClose,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     }));
     // FeaturedIcon을 content-wrapper에 추가
     if (featuredIconElement) {
@@ -67,50 +73,6 @@ class MessageNotification {
     }
     return wrapper;
   }
-  buildTemplate(params) {
-    const {
-      title,
-      supportingText,
-      actions,
-      onClose,
-      onHidePermanently
-    } = params;
-    return `
-      <div class="${_const.CLASS_NAMES.MESSAGE.CONTAINER}">
-        <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT}">
-          <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
-            <div class="${_const.CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
-              <span class="${_const.CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
-              ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
-            </div>
-          </div>
-          <div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
-            ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.MESSAGE.ACTIONS) : ''}
-          </div>
-          <div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
-            ${this.renderHidePermanentlyButton(onHidePermanently)}
-            ${this.renderCloseButton(onClose)}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  renderHidePermanentlyButton(onHidePermanently) {
-    if (!onHidePermanently) return '';
-    return `
-      <button type="button" class="${_const.CLASS_NAMES.COMMON.ACTION_BUTTON} ${_const.CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${_const.CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
-        다시 보지 않기
-      </button>
-    `;
-  }
-  renderCloseButton(onClose) {
-    if (!onClose) return '';
-    return `
-      <button type="button" class="${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
-        ${_const.SVG_ICONS['x-close'](_const.MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
-      </button>
-    `;
-  }
   bindEvents() {
     (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, () => this.remove());
     // 다시보지 않기 버튼 이벤트 바인딩

package/dist/cjs/assets/scripts/notification/const/classNames.js

@@ -41,6 +41,9 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
     SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
     ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
     ACTIONS: 'ncua-message-notification__actions',
+    // 다시 보지 않기 + 닫기 그룹 전용 래퍼. ACTIONS_CONTAINER를 재사용하면
+    // 해당 클래스의 gap(12px)이 그룹 내부에도 적용되어 8px 규격이 깨진다.
+    FOOTER_CONTAINER: 'ncua-message-notification__footer-container',
     HIDE_LINK: 'ncua-message-notification__hide-link',
     CLOSE_BUTTON: 'ncua-message-notification__close-button'
   },

package/dist/cjs/assets/scripts/notification/const/index.js

@@ -81,7 +81,7 @@ Object.defineProperty(exports, "getSizes", {
     return _sizes.getSizes;
   }
 });
-var _icons = require("./icons");
 var _classNames = require("./classNames");
+var _icons = require("./icons");
 var _sizes = require("./sizes");
 var _types = require("./types");

package/dist/cjs/assets/scripts/notification/const/sizes.js

@@ -32,9 +32,11 @@ const FULL_WIDTH_SIZES = exports.FULL_WIDTH_SIZES = {
   CLOSE_BUTTON: '20'
 };
 // Message 알림 고정 사이즈
+// FEATURED_ICON(원 크기)과 ICON_PIXEL(내부 SVG 크기)은 항상 짝을 맞춰야 한다.
+// 'md' = 40px 원 / 20px 아이콘 (FeaturedIcon iconSizeMap 기준)
 const MESSAGE_SIZES = exports.MESSAGE_SIZES = {
-  FEATURED_ICON: 'lg',
-  ICON_PIXEL: '24',
+  FEATURED_ICON: 'md',
+  ICON_PIXEL: '20',
   CLOSE_BUTTON: '20'
 };
 // 사이즈 유틸리티 함수들

package/dist/cjs/assets/scripts/notification/messageTemplate.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildMessageTemplate = buildMessageTemplate;
+var _notification = require("../../../constant/notification");
+var _const = require("./const");
+var _utils = require("./utils");
+/**
+ * message 타입 액션 버튼 사이즈. TO-BE 규격 28px이며 React `<Button size="xs">`와 같다.
+ * floating / full-width는 이 값을 쓰지 않고 `renderActions`의 기본값('sm')을 유지한다.
+ */
+const ACTION_BUTTON_SIZE = 'xs';
+/**
+ * Message Notification의 마크업을 만든다.
+ * React 구현(`src/components/overlays/notification/MessageNotification.tsx`)과
+ * 동일한 클래스 트리를 산출해야 한다 — SCSS 한 벌을 두 구현이 공유한다.
+ */
+function buildMessageTemplate(params) {
+  const {
+    title,
+    supportingText,
+    actions,
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  } = params;
+  return `
+    <div class="${_const.CLASS_NAMES.MESSAGE.CONTAINER}">
+      <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT}">
+        <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
+          <div class="${_const.CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
+            <span class="${_const.CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
+            ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+          </div>
+        </div>
+        ${renderActionsContainer({
+    actions,
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  })}
+      </div>
+    </div>
+  `;
+}
+/**
+ * 액션 버튼 그룹과 닫기 그룹을 함께 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+function renderActionsContainer(params) {
+  const {
+    actions,
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  } = params;
+  const actionsHtml = (0, _utils.renderActions)(actions ?? [], _const.CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
+  const footerHtml = renderFooterContainer({
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  });
+  if (!actionsHtml && !footerHtml) return '';
+  return `<div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
+}
+/** 다시 보지 않기 + 닫기 그룹. 전용 래퍼를 쓰는 이유는 `CLASS_NAMES.MESSAGE.FOOTER_CONTAINER` 참조. */
+function renderFooterContainer(params) {
+  const {
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  } = params;
+  if (!onHidePermanently && !onClose) return '';
+  return `
+    <div class="${_const.CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
+      ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
+      ${renderCloseButton(onClose)}
+    </div>
+  `;
+}
+/**
+ * 다시 보지 않기 버튼.
+ *
+ * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+ * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+ */
+function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
+  if (!onHidePermanently) return '';
+  const label = hidePermanentlyLabel ?? _notification.HIDE_PERMANENTLY_LABEL.message;
+  return `
+    <button type="button" class="${_const.CLASS_NAMES.COMMON.ACTION_BUTTON} ${_const.CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
+      ${label}
+    </button>
+  `;
+}
+function renderCloseButton(onClose) {
+  if (!onClose) return '';
+  return `
+    <button type="button" class="${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
+      ${_const.SVG_ICONS['x-close'](_const.MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', 'stroke="#2F2F30"')}
+    </button>
+  `;
+}

package/dist/cjs/assets/scripts/notification/utils.js

@@ -9,6 +9,7 @@ exports.createWrapperElement = createWrapperElement;
 exports.isMobile = void 0;
 exports.renderActions = renderActions;
 exports.renderSupportingText = renderSupportingText;
+exports.resolveActionHierarchy = resolveActionHierarchy;
 exports.setupAutoClose = setupAutoClose;
 var _breakpoint = require("../../../src/constant/breakpoint");
 var _const = require("./const");
@@ -57,16 +58,51 @@ function renderSupportingText(supportingText, className, supportTextLink) {
   // unsafe URL이거나 link가 없으면 링크 없이 텍스트만 렌더링
   return `<span class="${className}">${supportingText}</span>`;
 }
+/** 액션 버튼 색상을 지정하지 않았을 때의 기본값. React `MessageNotificationParts`와 같다. */
+const DEFAULT_ACTION_HIERARCHY = 'text';
+/**
+ * 액션 버튼의 색상 수식자를 현행 어휘로 정규화한다.
+ *
+ * 구 어휘(`'link'` / `'link-gray'`)는 Link 컴포넌트의 색상 이름을 빌려 쓴 것이라
+ * `ncua-btn--link`에 대응하는 CSS가 존재하지 않았다. 기존 CDN 사용처를 깨지 않기 위해
+ * 타입에서 제거하는 대신 이 지점에서 실제 Button 테마로 매핑한다.
+ *
+ * 렌더(`renderActions`)와 이벤트 바인딩(`bindNotificationEvents`)이 이 함수를 함께 써야
+ * `data-action` 키가 어긋나지 않는다.
+ */
+function resolveActionHierarchy(hierarchy) {
+  switch (hierarchy) {
+    case undefined:
+      return DEFAULT_ACTION_HIERARCHY;
+    case 'link':
+      return 'text';
+    case 'link-gray':
+      return 'text-gray';
+    default:
+      return hierarchy;
+  }
+}
+/** 액션 버튼의 클릭 라우팅 키. 렌더와 바인딩이 같은 규칙으로 만들어야 한다. */
+function buildActionKey(action) {
+  return `${action.label}-${resolveActionHierarchy(action.hierarchy)}`;
+}
+/**
+ * 액션 버튼 그룹 HTML을 만든다.
+ *
+ * `size` 기본값 'sm'은 floating / full-width 타입의 기존 렌더링을 그대로 보존하기 위한 것이다.
+ * message 타입만 TO-BE 규격(28px)에 맞춰 'xs'를 넘긴다 — React `<Button size="xs">`와 동일.
+ */
 function renderActions(actions, wrapperClass) {
+  let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'sm';
   // 액션이 없으면 빈 문자열 반환
   if (!actions || actions.length === 0) {
     return '';
   }
   const buttonsHtml = actions.map(action => {
     const buttonHtml = `
-      <button 
-        class="ncua-btn ncua-btn--sm ncua-btn--${action.hierarchy || 'text'}"
-        data-action="${action.label}-${action.hierarchy}"
+      <button
+        class="ncua-btn ncua-btn--${size} ncua-btn--${resolveActionHierarchy(action.hierarchy)}"
+        data-action="${buildActionKey(action)}"
       >
         ${action.label}
       </button>`;
@@ -92,7 +128,7 @@ function bindNotificationEvents(element, actions, onClose, onRemove) {
       if (actionData) {
         let matchedAction = null;
         for (const action of actions) {
-          const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
+          const expectedDataAction = buildActionKey(action);
           if (actionData === expectedDataAction) {
             matchedAction = action;
             break;

package/dist/cjs/constant/notification.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HIDE_PERMANENTLY_LABEL = void 0;
+/**
+ * 다시보지 않기 버튼의 타입별 기본 문구.
+ *
+ * `hidePermanentlyLabel`을 지정하지 않았을 때 쓰인다.
+ * React(`src/components/overlays/notification/`)와 Vanilla(`assets/scripts/notification/`)
+ * 두 구현이 이 상수를 함께 참조한다 — 문구가 하드코딩으로 흩어져 서로 어긋나던 문제(#460)를
+ * 막기 위한 단일 출처다.
+ *
+ * `message`와 `fullWidth`의 띄어쓰기가 다른 것은 오타가 아니라 현행 유지다.
+ * 표기 통일은 별도 결정 사항이며, 결정되면 이 파일 한 곳만 고치면 된다.
+ */
+const HIDE_PERMANENTLY_LABEL = exports.HIDE_PERMANENTLY_LABEL = {
+  message: '다시 보지 않기',
+  fullWidth: '다시보지 않기'
+};

package/dist/cjs/src/components/forms-and-input/input-base/InputBase.js

@@ -39,27 +39,28 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     ...props
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
-  const [textCount, setTextCount] = (0, _react.useState)(0);
-  const [hasValue, setHasValue] = (0, _react.useState)(false);
-  // 값 유무는 DOM에서 읽는다 — props.value로 판정하면 uncontrolled Input에서 항상 빈 값으로 보인다.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled 값이 프로그래밍적으로 바뀔 때는 input 이벤트가 나지 않아 props.value로 재동기화해야 한다
+  // controlled 인풋은 props.value 로 길이를 알 수 있으므로 상태를 두지 않는다.
+  // 입력마다 setState 를 하면 조합 중(한글 IME)에 리렌더가 끼어들어 조합이 끊긴다.
+  const isControlled = props.value !== undefined;
+  const [uncontrolledLength, setUncontrolledLength] = (0, _react.useState)(0);
+  const valueLength = isControlled ? String(props.value ?? '').length : uncontrolledLength;
+  const hasValue = valueLength > 0;
+  const textCount = valueLength;
+  // uncontrolled 인풋만 DOM 값을 읽어 따라간다 — props.value 가 없어 길이를 알 방법이 이것뿐이다.
   (0, _react.useEffect)(() => {
+    if (isControlled) return;
     const input = inputRef.current;
     if (!input) return;
     const syncFromInput = () => {
-      const {
-        length
-      } = input.value;
-      setHasValue(length > 0);
-      setTextCount(length);
+      setUncontrolledLength(input.value.length);
     };
     syncFromInput();
     input.addEventListener('input', syncFromInput);
     return () => {
       input.removeEventListener('input', syncFromInput);
     };
-  }, [props.value]);
-  const renderOutsideSlot = slot => {
+  }, [isControlled]);
+  const renderOutsideSlot = (slot, position) => {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
     }
@@ -72,10 +73,15 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
           children: slot.label
         });
       case 'text':
-        return (0, _jsxRuntime.jsx)("span", {
-          className: (0, _classnames.default)('ncua-input__leading-text', `ncua-input__leading-text--${size}`),
-          children: slot.text
-        });
+        {
+          // 클래스명은 리터럴로 쓴다 — MCP 의 BEM 추출기가 `ncua-input__${position}-text` 형태의
+          // 템플릿 리터럴에서는 `ncua-input__` 조각만 읽어 완성된 클래스를 잡지 못한다.
+          const textClass = position === 'leading' ? 'ncua-input__leading-text' : 'ncua-input__trailing-text';
+          return (0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(textClass, `${textClass}--${size}`),
+            children: slot.text
+          });
+        }
       case 'custom':
         return slot.children;
       default:
@@ -90,7 +96,12 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
           return (0, _jsxRuntime.jsx)("div", {
             className: "ncua-input__icon-wrap",
             children: (0, _jsxRuntime.jsx)(SlotIcon, {
-              className: (0, _classnames.default)(`ncua-input__${position}-icon`, slot.className),
+              className: (0, _classnames.default)(`ncua-input__${position}-icon`,
+              // color 를 지정하지 않았을 때만 상태별 색(Placeholder/Filled/Focused/Disabled)을 CSS 에 맡긴다.
+              // 지정한 경우에는 이 클래스를 붙이지 않아 지정 색이 그대로 유지된다.
+              {
+                'ncua-input__slot-icon': !slot.color
+              }, slot.className),
               color: slot.color ? _color.COLOR[slot.color] : undefined,
               width: slot.size ?? iconSvgSize[size],
               height: slot.size ?? iconSvgSize[size]
@@ -162,13 +173,14 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
       'full-width': fullWidth,
       'ncua-input__trailing-button': trailingElement?.type === 'button',
       'ncua-input__leading-text-wrap': leadingElement?.type === 'text',
+      'ncua-input__trailing-text-wrap': trailingElement?.type === 'text',
       'has-value': hasValue
     }, className),
     children: [renderLabel(), (0, _jsxRuntime.jsxs)("div", {
       className: "ncua-input__content-wrap",
       children: [(0, _jsxRuntime.jsxs)("div", {
         className: "ncua-input__content",
-        children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", {
+        children: [leadingElement && renderOutsideSlot(leadingElement, 'leading'), (0, _jsxRuntime.jsxs)("div", {
           className: (0, _classnames.default)('ncua-input__field', `ncua-input__field--${size}`),
           children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", {
             ref: node => {
@@ -184,7 +196,7 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
             maxLength: maxLength,
             ...props
           }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
-        }), trailingElement && renderOutsideSlot(trailingElement)]
+        }), trailingElement && renderOutsideSlot(trailingElement, 'trailing')]
       }), showTextCount && maxLength && (0, _jsxRuntime.jsxs)("div", {
         className: "ncua-input__field-text-count",
         children: [(0, _jsxRuntime.jsx)("output", {

package/dist/cjs/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -5,6 +5,7 @@ var _react = require("react");
 var _client = require("react-dom/client");
 var _testUtils = require("react-dom/test-utils");
 var _vitest = require("vitest");
+var _color = require("../../../../../constant/color");
 var _InputBase = require("../InputBase");
 // @vitest-environment jsdom
 
@@ -133,6 +134,55 @@ function mountInputBase() {
     view.unmount();
   });
 });
+(0, _vitest.describe)('InputBase — 슬롯 아이콘 상태 색상', () => {
+  // 상태별 색은 CSS 가 결정한다. jsdom 에서는 스타일시트를 로드하지 않으므로
+  // "상태 규칙을 타는 클래스가 붙었는지" 와 "지정 색이 인라인으로 남았는지" 로 검증한다.
+  const leftIconOf = container => container.querySelector('.ncua-input__left-icon');
+  (0, _vitest.it)('color 를 지정하지 않으면 상태 색상 클래스가 붙는다', () => {
+    // Given/When: color 없이 슬롯 아이콘을 렌더하면
+    const view = mountInputBase({
+      leadingElement: {
+        type: 'icon',
+        icon: _uiAdminIcon.SearchLg
+      }
+    });
+    // Then: 상태 규칙을 타는 클래스가 붙고, 인라인 색은 지정되지 않는다
+    const icon = leftIconOf(view.container);
+    (0, _vitest.expect)(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    (0, _vitest.expect)(icon?.hasAttribute('color')).toBe(false);
+    view.unmount();
+  });
+  (0, _vitest.it)('color 를 지정하면 상태 색상 클래스가 붙지 않고 지정 색이 유지된다', () => {
+    // Given/When: color 를 지정해 렌더하면
+    const view = mountInputBase({
+      leadingElement: {
+        type: 'icon',
+        icon: _uiAdminIcon.SearchLg,
+        color: 'blue500'
+      }
+    });
+    // Then: 상태 규칙에서 제외되고 지정한 색이 그대로 남는다
+    const icon = leftIconOf(view.container);
+    (0, _vitest.expect)(icon?.classList.contains('ncua-input__slot-icon')).toBe(false);
+    (0, _vitest.expect)(icon?.getAttribute('color')).toBe(_color.COLOR.blue500);
+    view.unmount();
+  });
+  (0, _vitest.it)('slot.className 을 함께 주어도 상태 색상 클래스가 유지된다', () => {
+    // Given/When: className 을 추가로 넘기면
+    const view = mountInputBase({
+      leadingElement: {
+        type: 'icon',
+        icon: _uiAdminIcon.SearchLg,
+        className: 'my-icon'
+      }
+    });
+    // Then: 두 클래스가 모두 붙는다
+    const icon = leftIconOf(view.container);
+    (0, _vitest.expect)(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    (0, _vitest.expect)(icon?.classList.contains('my-icon')).toBe(true);
+    view.unmount();
+  });
+});
 (0, _vitest.describe)('InputBase — has-value 상태 클래스', () => {
   const typeInto = (container, text) => {
     const input = container.querySelector('input');
@@ -181,4 +231,70 @@ function mountInputBase() {
     (0, _vitest.expect)(view.container.querySelector('.ncua-input')?.classList.contains('has-value')).toBe(true);
     view.unmount();
   });
+});
+(0, _vitest.describe)('InputBase — 텍스트 슬롯', () => {
+  (0, _vitest.it)('leadingElement 텍스트는 leading 클래스와 wrap 클래스가 붙는다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      leadingElement: {
+        type: 'text',
+        text: 'https://'
+      }
+    });
+    const text = container.querySelector('.ncua-input__leading-text');
+    (0, _vitest.expect)(text?.textContent).toBe('https://');
+    (0, _vitest.expect)(container.querySelector('.ncua-input__leading-text-wrap')).not.toBeNull();
+    unmount();
+  });
+  (0, _vitest.it)('trailingElement 텍스트는 trailing 클래스와 wrap 클래스가 붙는다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      trailingElement: {
+        type: 'text',
+        text: 'px'
+      }
+    });
+    const text = container.querySelector('.ncua-input__trailing-text');
+    (0, _vitest.expect)(text?.textContent).toBe('px');
+    (0, _vitest.expect)(container.querySelector('.ncua-input__trailing-text-wrap')).not.toBeNull();
+    // leading 클래스가 섞이면 모서리·테두리 방향이 반대가 된다
+    (0, _vitest.expect)(container.querySelector('.ncua-input__leading-text')).toBeNull();
+    unmount();
+  });
+  (0, _vitest.it)('trailingElement 텍스트는 입력 필드 뒤에 온다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      trailingElement: {
+        type: 'text',
+        text: 'px'
+      }
+    });
+    const content = container.querySelector('.ncua-input__content');
+    const children = Array.from(content?.children ?? []);
+    const fieldIndex = children.findIndex(el => el.classList.contains('ncua-input__field'));
+    const textIndex = children.findIndex(el => el.classList.contains('ncua-input__trailing-text'));
+    (0, _vitest.expect)(fieldIndex).toBeGreaterThanOrEqual(0);
+    (0, _vitest.expect)(textIndex).toBeGreaterThan(fieldIndex);
+    unmount();
+  });
+  (0, _vitest.it)('사이즈 modifier 가 함께 붙는다', () => {
+    const {
+      container,
+      unmount
+    } = mountInputBase({
+      size: 'sm',
+      trailingElement: {
+        type: 'text',
+        text: 'px'
+      }
+    });
+    (0, _vitest.expect)(container.querySelector('.ncua-input__trailing-text--sm')).not.toBeNull();
+    unmount();
+  });
 });

package/dist/cjs/src/components/forms-and-input/password-input/PasswordInput.js

@@ -33,9 +33,9 @@ const PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
-      icon: _uiAdminIcon.Lock01,
-      // 색은 CSS가 결정한다 — 여기서 props.value로 판정하면 uncontrolled Input에서 영원히 빈 값 취급된다
-      className: 'ncua-input__password-lock-icon'
+      icon: _uiAdminIcon.Lock01
+      // color 를 넘기지 않아 슬롯 아이콘 공통 규칙(상태별 색)을 그대로 따른다.
+      // 여기서 props.value 로 판정하면 uncontrolled Input 에서 영원히 빈 값 취급된다.
     },
     trailingElement: {
       type: 'custom',