@ncds/ui-admin 1.8.25 → 1.8.26-alpha.0

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

@@ -31,6 +31,7 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
+      supportTextLinkTarget,
       onHidePermanently,
       hidePermanentlyLabel
     } = this.options;
@@ -46,6 +47,7 @@ class FullWidthNotification {
       onHidePermanently,
       hidePermanentlyLabel
     }));
+    (0, _utils.applySupportTextLinkTarget)(wrapper, _const.CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, _const.CLASS_NAMES.FULL_WIDTH.LINK, supportTextLinkTarget);
     return wrapper;
   }
   buildTemplate(params) {

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

@@ -32,38 +32,28 @@ class MessageNotification {
       actions,
       onClose,
       onHidePermanently,
-      hidePermanentlyLabel
+      hidePermanentlyLabel,
+      variant,
+      supportTextLink,
+      supportTextLinkTarget
     } = this.options;
-    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-    let actualColor = color;
-    if (color === 'info') {
-      actualColor = 'neutral';
-    }
-    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, className);
-    const iconFunction = _const.FLOATING_ICON_MAP[actualColor];
-    // FeaturedIcon 생성
-    let featuredIconElement = null;
-    if (iconFunction) {
-      const iconSvg = iconFunction(_const.MESSAGE_SIZES.ICON_PIXEL);
-      this.featuredIcon = _featuredIcon.FeaturedIcon.create({
-        svgString: iconSvg,
-        theme: 'light-circle',
-        color: actualColor,
-        size: _const.MESSAGE_SIZES.FEATURED_ICON,
-        // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
-        // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
-        className: _const.CLASS_NAMES.MESSAGE.ICON
-      });
-      featuredIconElement = this.featuredIcon.getElement();
-    }
+    const isBlock = variant === 'block';
+    // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
+    const actualColor = !isBlock && color === 'info' ? 'neutral' : color;
+    const wrapperClassName = [isBlock ? _const.CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
     wrapper.innerHTML = (0, _sanitize.sanitizeHtml)((0, _messageTemplate.buildMessageTemplate)({
       title,
       supportingText,
+      supportTextLink: isBlock ? supportTextLink : undefined,
+      color: actualColor,
       actions,
       onClose,
       onHidePermanently,
       hidePermanentlyLabel
     }));
+    (0, _utils.applySupportTextLinkTarget)(wrapper, _const.CLASS_NAMES.MESSAGE.TEXT_CONTAINER, _const.CLASS_NAMES.MESSAGE.LINK, supportTextLinkTarget);
     // FeaturedIcon을 content-wrapper에 추가
     if (featuredIconElement) {
       const contentWrapper = wrapper.querySelector(`.${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
@@ -73,6 +63,23 @@ class MessageNotification {
     }
     return wrapper;
   }
+  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+  createFeaturedIcon(color, isBlock) {
+    const iconFunction = _const.MESSAGE_ICON_MAP[color];
+    if (!iconFunction) return null;
+    const sizes = isBlock ? _const.MESSAGE_BLOCK_SIZES : _const.MESSAGE_SIZES;
+    this.featuredIcon = _featuredIcon.FeaturedIcon.create({
+      svgString: iconFunction(sizes.ICON_PIXEL),
+      theme: 'light-circle',
+      // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+      color: color === 'info' ? 'neutral' : color,
+      size: sizes.FEATURED_ICON,
+      // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
+      // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
+      className: _const.CLASS_NAMES.MESSAGE.ICON
+    });
+    return this.featuredIcon.getElement();
+  }
   bindEvents() {
     (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, () => this.remove());
     // 다시보지 않기 버튼 이벤트 바인딩

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

@@ -15,6 +15,7 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
     TEXT_CONTAINER: 'ncua-full-width-notification__text-container',
     TITLE: 'ncua-full-width-notification__title',
     SUPPORTING_TEXT: 'ncua-full-width-notification__supporting-text',
+    LINK: 'ncua-full-width-notification__link',
     ACTIONS_CONTAINER: 'ncua-full-width-notification__actions-container',
     ACTIONS: 'ncua-full-width-notification__actions',
     CLOSE_BUTTON: 'ncua-full-width-notification__close-button'
@@ -32,6 +33,7 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
   },
   MESSAGE: {
     BASE: 'ncua-message-notification',
+    BLOCK: 'ncua-message-notification--block',
     CONTAINER: 'ncua-message-notification__container',
     CONTENT: 'ncua-message-notification__content',
     CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
@@ -39,6 +41,7 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
     TEXT_CONTAINER: 'ncua-message-notification__text-container',
     TITLE: 'ncua-message-notification__title',
     SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
+    LINK: 'ncua-message-notification__link',
     ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
     ACTIONS: 'ncua-message-notification__actions',
     // 다시 보지 않기 + 닫기 그룹 전용 래퍼. ACTIONS_CONTAINER를 재사용하면

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SVG_ICONS = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
 // SVG 아이콘들 (크기는 동적으로 설정)
 const SVG_ICONS = exports.SVG_ICONS = {
   'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
@@ -28,4 +28,13 @@ const FULL_WIDTH_ICON_MAP = exports.FULL_WIDTH_ICON_MAP = {
   success: SVG_ICONS['check-circle'],
   info: SVG_ICONS['info-circle']
 };
-const ICON_MAP = exports.ICON_MAP = FULL_WIDTH_ICON_MAP;
+const ICON_MAP = exports.ICON_MAP = FULL_WIDTH_ICON_MAP;
+/**
+ * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
+ * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
+ * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+const MESSAGE_ICON_MAP = exports.MESSAGE_ICON_MAP = {
+  ...FLOATING_ICON_MAP,
+  info: size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`
+};

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

@@ -57,10 +57,16 @@ Object.defineProperty(exports, "ICON_PIXEL_SIZES", {
     return _sizes.ICON_PIXEL_SIZES;
   }
 });
-Object.defineProperty(exports, "MESSAGE_CLOSE_ICON_COLORS", {
+Object.defineProperty(exports, "MESSAGE_BLOCK_SIZES", {
   enumerable: true,
   get: function () {
-    return _types.MESSAGE_CLOSE_ICON_COLORS;
+    return _sizes.MESSAGE_BLOCK_SIZES;
+  }
+});
+Object.defineProperty(exports, "MESSAGE_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.MESSAGE_ICON_MAP;
   }
 });
 Object.defineProperty(exports, "MESSAGE_SIZES", {
@@ -83,5 +89,4 @@ Object.defineProperty(exports, "getSizes", {
 });
 var _classNames = require("./classNames");
 var _icons = require("./icons");
-var _sizes = require("./sizes");
-var _types = require("./types");
+var _sizes = require("./sizes");

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSizes = exports.MESSAGE_SIZES = exports.ICON_PIXEL_SIZES = exports.FULL_WIDTH_SIZES = exports.FEATURED_ICON_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SIZES = void 0;
+exports.getSizes = exports.MESSAGE_SIZES = exports.MESSAGE_BLOCK_SIZES = exports.ICON_PIXEL_SIZES = exports.FULL_WIDTH_SIZES = exports.FEATURED_ICON_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SIZES = void 0;
 // 알림 컴포넌트 사이즈 관련 상수들
 // FeaturedIcon 사이즈
 const FEATURED_ICON_SIZES = exports.FEATURED_ICON_SIZES = {
@@ -39,6 +39,11 @@ const MESSAGE_SIZES = exports.MESSAGE_SIZES = {
   ICON_PIXEL: '20',
   CLOSE_BUTTON: '20'
 };
+// Message 알림 Block 변형 사이즈. 'sm' = 32px 원 / 16px 아이콘. 닫기 버튼은 default 와 같다.
+const MESSAGE_BLOCK_SIZES = exports.MESSAGE_BLOCK_SIZES = {
+  FEATURED_ICON: 'sm',
+  ICON_PIXEL: '16'
+};
 // 사이즈 유틸리티 함수들
 const getSizes = exports.getSizes = {
   featuredIcon: isMobile => isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP,

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

@@ -2,13 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.MESSAGE_CLOSE_ICON_COLORS = void 0;
-// Message Notification 닫기 버튼 아이콘 색상 맵
-const MESSAGE_CLOSE_ICON_COLORS = exports.MESSAGE_CLOSE_ICON_COLORS = {
-  neutral: '#6B7280',
-  error: '#EF4444',
-  warning: '#F97316',
-  success: '#16A34A',
-  info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
-};
+});

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

@@ -9,7 +9,7 @@ var _const = require("./const");
 var _utils = require("./utils");
 /**
  * message 타입 액션 버튼 사이즈. TO-BE 규격 28px이며 React `<Button size="xs">`와 같다.
- * floating / full-width는 이 값을 쓰지 않고 `renderActions`의 기본값('sm')을 유지한다.
+ * `renderActions` 기본값도 'xs'(#535)지만 message 규격을 명시적으로 고정해 둔다.
  */
 const ACTION_BUTTON_SIZE = 'xs';
 /**
@@ -21,6 +21,8 @@ function buildMessageTemplate(params) {
   const {
     title,
     supportingText,
+    supportTextLink,
+    color,
     actions,
     onClose,
     onHidePermanently,
@@ -32,14 +34,15 @@ function buildMessageTemplate(params) {
         <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)}
+            ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT, supportTextLink, _const.CLASS_NAMES.MESSAGE.LINK)}
           </div>
         </div>
         ${renderActionsContainer({
     actions,
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   })}
       </div>
     </div>
@@ -55,13 +58,15 @@ function renderActionsContainer(params) {
     actions,
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   } = params;
   const actionsHtml = (0, _utils.renderActions)(actions ?? [], _const.CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
   const footerHtml = renderFooterContainer({
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   });
   if (!actionsHtml && !footerHtml) return '';
   return `<div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
@@ -71,13 +76,14 @@ function renderFooterContainer(params) {
   const {
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   } = params;
   if (!onHidePermanently && !onClose) return '';
   return `
     <div class="${_const.CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose)}
+      ${renderCloseButton(onClose, color)}
     </div>
   `;
 }
@@ -96,11 +102,17 @@ function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
     </button>
   `;
 }
+/**
+ * 닫기(X) 버튼. 아이콘 색은 React `<XClose color>`와 같이 svg 의 `color` 속성으로 주고
+ * path 는 `stroke="currentColor"`로 상속받는다 — 두 구현이 같은 마크업을 낸다.
+ */
 function renderCloseButton(onClose) {
+  let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'neutral';
   if (!onClose) return '';
+  const iconColor = _notification.MESSAGE_CLOSE_ICON_COLOR[color];
   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"')}
+      ${_const.SVG_ICONS['x-close'](_const.MESSAGE_SIZES.CLOSE_BUTTON).replace('<svg ', `<svg color="${iconColor}" `)}
     </button>
   `;
 }

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.applySupportTextLinkTarget = applySupportTextLinkTarget;
 exports.bindNotificationEvents = bindNotificationEvents;
 exports.buildClassName = buildClassName;
 exports.createWrapperElement = createWrapperElement;
@@ -12,6 +13,7 @@ exports.renderSupportingText = renderSupportingText;
 exports.resolveActionHierarchy = resolveActionHierarchy;
 exports.setupAutoClose = setupAutoClose;
 var _breakpoint = require("../../../src/constant/breakpoint");
+var _url = require("../../../src/utils/url");
 var _const = require("./const");
 // 공통 유틸리티 함수들
 function createWrapperElement(baseClass, color, className) {
@@ -27,18 +29,6 @@ function buildClassName(baseClass, color, className) {
   }
   return classes.join(' ');
 }
-/**
- * http/https 프로토콜만 허용한다.
- * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
- */
-function isSafeUrl(url) {
-  try {
-    const parsed = new URL(url, window.location.origin);
-    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
-  } catch {
-    return false;
-  }
-}
 /**
  * HTML 속성 값에 안전하게 삽입하기 위한 최소 이스케이프.
  * 본문(body)이 아닌 속성 컨텍스트에서의 따옴표 탈출(`" onclick="..."`)을 방지.
@@ -47,17 +37,32 @@ function escapeHtmlAttr(str) {
   return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
 }
 function renderSupportingText(supportingText, className, supportTextLink) {
+  let linkClassName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _const.CLASS_NAMES.FULL_WIDTH.LINK;
   if (!supportingText) return '';
   // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
   // 들어가기 전에 DOMPurify로 sanitize되므로 별도 이스케이프하지 않는다.
   // 이렇게 해야 <br>, <strong> 등 서식용 태그가 그대로 동작한다.
-  if (supportTextLink && isSafeUrl(supportTextLink)) {
+  if (supportTextLink && (0, _url.isSafeUrl)(supportTextLink)) {
     const safeLink = escapeHtmlAttr(supportTextLink);
-    return `<a href="${safeLink}" class="ncua-full-width-notification__link" rel="noopener noreferrer" target="_blank"><span class="${className}">${supportingText}</span></a>`;
+    return `<a href="${safeLink}" class="${linkClassName}"><span class="${className}">${supportingText}</span></a>`;
   }
   // unsafe URL이거나 link가 없으면 링크 없이 텍스트만 렌더링
   return `<span class="${className}">${supportingText}</span>`;
 }
+/**
+ * `supportTextLinkTarget`이 `'_blank'`이면 `renderSupportingText`가 만든 링크를 새 탭으로 연다.
+ *
+ * target 은 sanitize **이후** 우리가 만든 링크(텍스트 컨테이너의 직계 `<a>`)에만 지정한다.
+ * DOMPurify 에 target 을 전역 허용하면 사용자 입력 HTML 의 `<a target>`까지 rel 없이 통과하기 때문이다.
+ * 런타임 입력이므로 `'_blank'`가 아닌 값은 전부 `'_self'`(속성 미부여)로 취급한다.
+ */
+function applySupportTextLinkTarget(root, textContainerClassName, linkClassName, target) {
+  if (target !== '_blank') return;
+  const link = root.querySelector(`.${textContainerClassName} > a.${linkClassName}`);
+  if (!link) return;
+  link.setAttribute('target', '_blank');
+  link.setAttribute('rel', 'noopener noreferrer');
+}
 /** 액션 버튼 색상을 지정하지 않았을 때의 기본값. React `MessageNotificationParts`와 같다. */
 const DEFAULT_ACTION_HIERARCHY = 'text';
 /**
@@ -89,11 +94,10 @@ function buildActionKey(action) {
 /**
  * 액션 버튼 그룹 HTML을 만든다.
  *
- * `size` 기본값 'sm'은 floating / full-width 타입의 기존 렌더링을 그대로 보존하기 위한 것이다.
- * message 타입만 TO-BE 규격(28px)에 맞춰 'xs'를 넘긴다 — React `<Button size="xs">`와 동일.
+ * `size` 기본값 'xs'는 디자인 기준(#535 — 모든 type 액션 버튼 xs)이며 React `<Button size="xs">`와 같다.
  */
 function renderActions(actions, wrapperClass) {
-  let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'sm';
+  let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'xs';
   // 액션이 없으면 빈 문자열 반환
   if (!actions || actions.length === 0) {
     return '';

package/dist/cjs/constant/notification.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HIDE_PERMANENTLY_LABEL = void 0;
+exports.MESSAGE_CLOSE_ICON_COLOR = exports.HIDE_PERMANENTLY_LABEL = void 0;
+var _color = require("./color");
 /**
  * 다시보지 않기 버튼의 타입별 기본 문구.
  *
@@ -18,4 +19,17 @@ exports.HIDE_PERMANENTLY_LABEL = void 0;
 const HIDE_PERMANENTLY_LABEL = exports.HIDE_PERMANENTLY_LABEL = {
   message: '다시 보지 않기',
   fullWidth: '다시보지 않기'
+};
+/**
+ * message 타입 닫기(X) 아이콘의 color 별 색.
+ *
+ * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
+ * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
+ */
+const MESSAGE_CLOSE_ICON_COLOR = exports.MESSAGE_CLOSE_ICON_COLOR = {
+  neutral: _color.COLOR.gray700,
+  error: _color.COLOR.red500,
+  warning: _color.COLOR.orange500,
+  success: _color.COLOR.green600,
+  info: _color.COLOR.violet600
 };

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -16,7 +16,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 16
+  md: 14
 };
 const Badge = _ref => {
   let {

package/dist/cjs/src/components/forms-and-input/combo-box/ComboBox.js

@@ -30,112 +30,6 @@ const notifyFormChange = (register, multiple, newValue) => {
     });
   }
 };
-/** '' · undefined · null 이면 빈 값. 숫자 0은 빈 값이 아니다 */
-const isEmptyValue = value => value === '' || value == null;
-/** react-hook-form hidden input 값 — Tag 와 같은 빈 값 규칙(0은 값)을 따른다 */
-const toHiddenInputValue = (value, multiple) => {
-  if (multiple) return JSON.stringify(value || []);
-  return isEmptyValue(value) ? '' : String(value);
-};
-/** SelectDropdown 은 null 을 받지 않으므로 undefined 로 바꾼다 */
-const toDropdownValue = value => value ?? undefined;
-/** multiple 용 — 배열이 아니면(null · undefined 포함) 빈 배열 */
-const toIdArray = value => Array.isArray(value) ? value : [];
-/** 두 id 목록이 같은 id 들로 이루어졌는지 — 순서는 보지 않는다 (사용처가 onChange 값을 정렬해 돌려줘도 같은 값) */
-const isSameIds = (currentIds, nextIds) => currentIds.length === nextIds.length && currentIds.every(id => nextIds.includes(id));
-const isSameTags = (nextTags, prevTags) => nextTags.length === prevTags.length && nextTags.every((tag, index) => tag.id === prevTags[index].id && tag.label === prevTags[index].label);
-const findOption = (optionItems, id) => optionItems.find(option => option.id === id);
-/** 단일 모드 value 에 해당하는 옵션 — 빈 값·배열이면 없음 */
-const findSingleOption = (value, optionItems) => {
-  if (isEmptyValue(value) || Array.isArray(value)) return undefined;
-  return findOption(optionItems, value);
-};
-/**
- * 단일 모드 Tag — value 와 optionItems 에서 계산한다.
- * 검색 필터로 목록에서 빠진 경우에만, 같은 id 로 기억해 둔 Tag 를 대신 쓴다.
- */
-const resolveSingleTag = (value, optionItems, lastResolvedTag) => {
-  if (isEmptyValue(value) || Array.isArray(value)) return null;
-  const found = findOption(optionItems, value);
-  if (found) return {
-    id: found.id,
-    label: found.label
-  };
-  return lastResolvedTag?.id === value ? lastResolvedTag : null;
-};
-/** 단일 모드 Tag 목록 (0~1개). 목록에서 찾은 Tag 를 기억해 검색 필터 중에도 라벨을 유지한다 */
-const useSingleSelectedTags = (value, optionItems, enabled) => {
-  const [lastResolvedTag, setLastResolvedTag] = (0, _react.useState)(null);
-  const found = enabled ? findSingleOption(value, optionItems) : undefined;
-  const foundId = found?.id;
-  const foundLabel = found?.label;
-  (0, _react.useEffect)(() => {
-    if (foundId === undefined || foundLabel === undefined) return;
-    setLastResolvedTag({
-      id: foundId,
-      label: foundLabel
-    });
-  }, [foundId, foundLabel]);
-  const selectedTag = enabled ? resolveSingleTag(value, optionItems, lastResolvedTag) : null;
-  return selectedTag ? [selectedTag] : [];
-};
-/** multiple 모드 Tag — 목록에서 못 찾은 id 는 이미 표시 중인 Tag 의 라벨을 쓴다 */
-const resolveMultipleTags = (ids, optionItems, prevTags) => {
-  const nextTags = ids.map(id => {
-    const found = findOption(optionItems, id);
-    return found ? {
-      id: found.id,
-      label: found.label
-    } : prevTags.find(tag => tag.id === id);
-  }).filter(tag => tag !== undefined);
-  // 결과가 같으면 이전 배열을 그대로 돌려준다 — 새 배열로 바꾸면 effect 가 다시 렌더를 일으킨다
-  return isSameTags(nextTags, prevTags) ? prevTags : nextTags;
-};
-/**
- * multiple 모드 Tag — 「선택 완료」·X 클릭·외부 value 변경 때만 확정 id 를 바꾼다.
- * ComboBox 가 직접 onChange 로 내보낸 값은 markEmitted 로 기록해 두고, 그 값이 value 로 돌아오면 한 번만 무시한다(확정 아님).
- * 바깥 값이 들어오면 남아 있던 기록도 지운다 — 오래된 기록 때문에 이후 같은 바깥 값이 무시되지 않게 하기 위함.
- * optionItems 만 바뀌면 확정 id 는 그대로 두고 라벨만 다시 찾는다 — 「선택 완료」 전 검색으로 Tag 가 확정되지 않게 하기 위함.
- */
-const useMultipleSelectedTags = (value, optionItems, enabled) => {
-  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
-  const lastEmittedRef = (0, _react.useRef)(null);
-  const committedIdsRef = (0, _react.useRef)([]);
-  const prevValueIdsRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (!enabled) return;
-    const ids = toIdArray(value);
-    const isEcho = lastEmittedRef.current !== null && isSameIds(ids, lastEmittedRef.current);
-    const isValueChanged = prevValueIdsRef.current === null || !isSameIds(ids, prevValueIdsRef.current);
-    prevValueIdsRef.current = ids;
-    if (isEcho) {
-      lastEmittedRef.current = null;
-    } else if (isValueChanged) {
-      committedIdsRef.current = ids;
-      lastEmittedRef.current = null;
-    }
-    setSelectedTags(prev => resolveMultipleTags(committedIdsRef.current, optionItems, prev));
-  }, [enabled, value, optionItems]);
-  /** 「선택 완료」로 Tag 를 확정한다 */
-  const commitTags = ids => {
-    committedIdsRef.current = ids;
-    setSelectedTags(prev => resolveMultipleTags(ids, optionItems, prev));
-  };
-  /** X 클릭 — 확정 id 에서 그 id 만 뺀다. value 기준으로 계산하면 「선택 완료」 전에 클릭한 항목까지 확정된다 */
-  const removeCommittedTag = tagId => {
-    commitTags(committedIdsRef.current.filter(id => id !== tagId));
-  };
-  /** ComboBox 가 onChange 로 내보낸 값을 기록한다 — value 로 돌아왔을 때 확정으로 보지 않기 위함 */
-  const markEmitted = ids => {
-    lastEmittedRef.current = ids;
-  };
-  return {
-    selectedTags,
-    commitTags,
-    removeCommittedTag,
-    markEmitted
-  };
-};
 const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     placeholder = '검색하세요',
@@ -175,24 +69,22 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   } = (0, _usePortalState.usePortalState)(usePortal);
   const [inputValue, setInputValue] = (0, _react.useState)(searchValue);
   const [showAllItems, setShowAllItems] = (0, _react.useState)(false);
-  const singleTags = useSingleSelectedTags(value, optionItems, !multiple);
-  const {
-    selectedTags,
-    commitTags,
-    removeCommittedTag,
-    markEmitted
-  } = useMultipleSelectedTags(value, optionItems, multiple);
+  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
   const handleOptionSelect = option => {
     if (disabled) return;
     if (multiple) {
       const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
       if (newValue === null) return;
-      markEmitted(newValue);
       onChange?.(newValue);
       notifyFormChange(register, multiple, newValue);
       return;
     }
     const newValue = option.id;
+    const tag = {
+      id: option.id,
+      label: option.label
+    };
+    setSelectedTags([tag]);
     onChange?.(newValue);
     notifyFormChange(register, multiple, newValue);
   };
@@ -299,6 +191,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   const {
     buttonText: selectAllButtonText,
     toggleSelectAll,
+    getSelectedTagsData,
     removeTag,
     isMaxSelectionActive,
     tryToggle
@@ -308,7 +201,6 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
-    markEmitted(newSelectedValues);
     onChange(newSelectedValues);
   };
   const handleEdit = () => {
@@ -316,32 +208,30 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   };
   const handleComplete = completedValue => {
     if (!multiple) return;
-    commitTags(toIdArray(completedValue));
+    const tags = getSelectedTagsData();
+    setSelectedTags(tags);
     setInputValue('');
     closeDropdown();
     onComplete?.(completedValue);
   };
   const handleRemoveTag = tagId => {
-    // X 버튼은 disabled 에서 숨기지만, 다른 호출 경로가 생겨도 값이 지워지지 않게 함수에서도 막는다
-    if (disabled) return;
     if (!onChange) return;
     if (multiple) {
       const newSelectedValues = removeTag(tagId);
-      markEmitted(newSelectedValues);
       onChange(newSelectedValues);
-      removeCommittedTag(tagId);
+      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
       return;
     }
     onChange('');
+    setSelectedTags([]);
   };
   const comboboxId = `combobox-options-${id || 'default'}`;
   const hasVisibleOptions = showAllItems || inputValue;
   const displayedOptions = hasVisibleOptions ? optionItems : [];
   const showNoResults = !hasVisibleOptions || optionItems.length === 0;
   const showFooter = multiple || showFooterButtons;
-  const hiddenInputValue = toHiddenInputValue(value, multiple);
-  const tags = multiple ? selectedTags : singleTags;
-  const hasTags = tags.length > 0;
+  const hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
+  const hasTags = selectedTags.length > 0;
   const {
     className: portalPanelClassName,
     style: portalPanelStyle
@@ -352,7 +242,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     direction: dropdownDirection,
     size: size,
     options: displayedOptions,
-    value: toDropdownValue(value),
+    value: value,
     focusedIndex: focusedIndex,
     maxHeight: maxHeight,
     listboxId: comboboxId,
@@ -431,10 +321,10 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
       })]
     }), hasTags && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-combobox__tags",
-      children: tags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
+      children: selectedTags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
         text: tag.label,
         size: "sm",
-        close: !disabled,
+        close: true,
         onButtonClick: () => handleRemoveTag(tag.id)
       }, tag.id))
     })]

package/dist/cjs/src/components/forms-and-input/combo-box/__tests__/ComboBox.portal.test.js

@@ -476,7 +476,7 @@ const clickButtonByLabel = (scope, label) => {
     (0, _vitest.expect)(onSearch).toHaveBeenCalledWith('사');
     (0, _vitest.expect)(view.content.querySelectorAll('.ncua-select-dropdown__option')).toHaveLength(createOptions().length);
   });
-  (0, _vitest.it)('옵션을 선택하면 onChange 가 호출된다', () => {
+  (0, _vitest.it)('옵션을 선택하면 onChange 가 호출되고 선택 태그가 표시된다', () => {
     // Given: 옵션이 노출된 기본 모드 ComboBox 에서
     const onChange = _vitest.vi.fn();
     const view = mountComboBox({
@@ -489,9 +489,9 @@ const clickButtonByLabel = (scope, label) => {
     (0, _testUtils.act)(() => {
       requireElement(view.content, '.ncua-select-dropdown__option').click();
     });
-    // Then: onChange 가 선택 값으로 호출된다
-    // 선택 태그는 value 를 따르므로(#530) onChange 값을 value 로 돌려주는 경우의 태그 표시는 ComboBox.test.ts S-10 에서 검증한다
+    // Then: onChange 가 선택 값으로 호출되고 태그가 표시된다
     (0, _vitest.expect)(onChange).toHaveBeenCalledWith('apple');
+    (0, _vitest.expect)(view.container.querySelectorAll('.ncua-combobox__tags .ncua-tag')).toHaveLength(1);
   });
   (0, _vitest.it)('Escape 를 누르면 인라인 패널이 닫힌다', () => {
     // Given: 열려 있는 기본 모드 ComboBox 에서