@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/esm/src/components/input/InputBase.js

@@ -19,7 +19,7 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
 import { HintText } from '../shared/hintText/HintText';
 import { Label } from '../shared/label/Label';
@@ -43,7 +43,27 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     leadingElement = _a.leadingElement,
     trailingElement = _a.trailingElement,
     showHelpIcon = _a.showHelpIcon,
-    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon"]);
+    maxLength = _a.maxLength,
+    showTextCount = _a.showTextCount,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon", "maxLength", "showTextCount"]);
+  var inputRef = useRef(null);
+  var _c = useState(0),
+    textCount = _c[0],
+    setTextCount = _c[1];
+  useEffect(function () {
+    if (inputRef.current && showTextCount) {
+      setTextCount(inputRef.current.value.length);
+      var handleInput_1 = function () {
+        var _a, _b;
+        setTextCount((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0);
+      };
+      inputRef.current.addEventListener('input', handleInput_1);
+      return function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
+      };
+    }
+  }, [showTextCount]);
   var renderOutsideSlot = function (slot) {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
@@ -156,17 +176,41 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     })
   }, {
     children: [renderLabel(), _jsxs("div", __assign({
-      className: "ncua-input__content"
+      className: "ncua-input__content-wrap"
     }, {
-      children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", __assign({
-        className: classNames('ncua-input__field', "ncua-input__field--".concat(size))
+      children: [_jsxs("div", __assign({
+        className: "ncua-input__content"
+      }, {
+        children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", __assign({
+          className: classNames('ncua-input__field', "ncua-input__field--".concat(size))
+        }, {
+          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({
+            ref: function (node) {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore - ref assignment is needed for internal tracking
+              inputRef.current = node;
+            },
+            type: "text",
+            disabled: disabled,
+            maxLength: maxLength
+          }, props)), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
+        })), trailingElement && renderOutsideSlot(trailingElement)]
+      })), showTextCount && maxLength && _jsxs("div", __assign({
+        className: "ncua-input__field-text-count"
       }, {
-        children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({
-          ref: ref,
-          type: "text",
-          disabled: disabled
-        }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
-      })), trailingElement && renderOutsideSlot(trailingElement)]
+        children: [_jsx("output", __assign({
+          className: "ncua-input__field-text-count-current"
+        }, {
+          children: textCount
+        })), _jsxs("span", {
+          children: ["/", maxLength]
+        })]
+      }))]
     })), hintText && _jsx(HintText, __assign({
       className: "ncua-input__hint-text",
       destructive: destructive

package/dist/esm/src/components/input/NumberInput.js

@@ -0,0 +1,124 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from 'react';
+import { useMergeRefs } from '../../hooks';
+import { ButtonStepper } from '../button';
+import { InputBase } from './InputBase';
+export var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b,
+    minValue = _a.minValue,
+    maxValue = _a.maxValue,
+    _c = _a.step,
+    step = _c === void 0 ? 1 : _c,
+    stepperPosition = _a.stepperPosition,
+    disabled = _a.disabled,
+    props = __rest(_a, ["size", "minValue", "maxValue", "step", "stepperPosition", "disabled"]);
+  var inputRef = useRef(null);
+  var mergedRef = useMergeRefs([ref, inputRef]);
+  var getCurrentValue = useCallback(function () {
+    var _a;
+    var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+    return value ? parseFloat(value) : 0;
+  }, []);
+  var updateValue = useCallback(function (newValue) {
+    if (!inputRef.current) return;
+    // min/max 범위 체크
+    var clampedValue = newValue;
+    if (minValue !== undefined && clampedValue < minValue) {
+      clampedValue = minValue;
+    }
+    if (maxValue !== undefined && clampedValue > maxValue) {
+      clampedValue = maxValue;
+    }
+    inputRef.current.value = clampedValue.toString();
+    // onChange 이벤트 트리거
+    var event = new Event('input', {
+      bubbles: true
+    });
+    inputRef.current.dispatchEvent(event);
+  }, [minValue, maxValue]);
+  var handleIncrement = useCallback(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue + step;
+    if (maxValue === undefined || newValue <= maxValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, maxValue, updateValue]);
+  var handleDecrement = useCallback(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue - step;
+    if (minValue === undefined || newValue >= minValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, minValue, updateValue]);
+  var handleKeyDown = useCallback(function (event) {
+    var _a;
+    if (disabled) return;
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      handleIncrement();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      handleDecrement();
+    }
+    // 기존 onKeyDown prop이 있으면 호출
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  }, [disabled, handleIncrement, handleDecrement, props]);
+  var renderStepperButtonGroup = function (position) {
+    if (position !== stepperPosition) {
+      return null;
+    }
+    return _jsxs("div", __assign({
+      className: "ncua-input__stepper-button-group"
+    }, {
+      children: [_jsx(ButtonStepper, {
+        size: size,
+        direction: "up",
+        onClick: handleIncrement,
+        disabled: disabled
+      }), _jsx(ButtonStepper, {
+        size: size,
+        direction: "down",
+        onClick: handleDecrement,
+        disabled: disabled
+      })]
+    }));
+  };
+  return _jsx(InputBase, __assign({
+    type: "number",
+    leadingElement: renderStepperButtonGroup('leading') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('leading')
+    } : props.leadingElement,
+    trailingElement: renderStepperButtonGroup('trailing') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('trailing')
+    } : props.trailingElement,
+    ref: mergedRef,
+    size: size,
+    disabled: disabled,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onKeyDown: handleKeyDown,
+    className: "ncua-input__number"
+  }, props));
+});

package/dist/esm/src/components/input/Textarea.js

@@ -63,26 +63,18 @@ export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
       isRequired: required
     }, {
       children: label
-    })), _jsx("div", __assign({
-      className: "ncua-input__content"
-    }, {
-      children: _jsx("div", __assign({
-        className: "ncua-input__field"
-      }, {
-        children: _jsx("textarea", __assign({
-          ref: function (node) {
-            if (typeof ref === 'function') {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-            textareaRef.current = node;
-          },
-          className: "ncua-input__textarea",
-          disabled: disabled
-        }, props))
-      }))
-    })), shouldShowHintArea && _jsxs("div", __assign({
+    })), _jsx("textarea", __assign({
+      ref: function (node) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        textareaRef.current = node;
+      },
+      className: "ncua-input__textarea",
+      disabled: disabled
+    }, props)), shouldShowHintArea && _jsxs("div", __assign({
       className: "ncua-input__text-count-wrap"
     }, {
       children: [hintText && _jsx(HintText, __assign({

package/dist/esm/src/components/input/index.js

@@ -1,4 +1,4 @@
 export * from './InputBase';
+export * from './NumberInput';
 export * from './PasswordInput';
-export * from './Textarea';
-export * from './FileInput';
+export * from './Textarea';

package/dist/esm/src/components/modal/Modal.js

@@ -29,11 +29,12 @@ export var Modal = function (_a) {
     _b = _a.size,
     size = _b === void 0 ? 'md' : _b,
     _c = _a.closeOnBackdropClick,
-    closeOnBackdropClick = _c === void 0 ? true : _c,
+    closeOnBackdropClick = _c === void 0 ? false : _c,
     _d = _a.closeOnEsc,
     closeOnEsc = _d === void 0 ? true : _d,
     className = _a.className,
-    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className"]);
+    zIndex = _a.zIndex,
+    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className", "zIndex"]);
   var modalRef = useRef(null);
   var handleBackdropClick = function (e) {
     if (closeOnBackdropClick && e.target === e.currentTarget) {
@@ -59,7 +60,10 @@ export var Modal = function (_a) {
   var modalContent = _jsx("div", __assign({
     className: classnames('ncua-modal-backdrop', className),
     onClick: handleBackdropClick,
-    ref: modalRef
+    ref: modalRef,
+    style: zIndex ? {
+      zIndex: zIndex
+    } : undefined
   }, restProps, {
     children: _jsx("div", __assign({
       className: classnames('ncua-modal', "ncua-modal--".concat(size))

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -18,7 +18,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { MEDIA_QUERY } from '../../constant/breakpoint';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { Button } from '../button';
@@ -29,6 +29,7 @@ var iconNameMap = {
   error: 'alert-triangle',
   warning: 'alert-circle',
   success: 'check-circle'
+  // info는 floating에서는 지원하지 않음
 };
 export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
@@ -38,10 +39,15 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+    _c = _a.autoClose,
+    autoClose = _c === void 0 ? 0 : _c,
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose"]);
+  var _d = useState(false),
+    shouldRemove = _d[0],
+    setShouldRemove = _d[1];
   var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[color],
+    name: iconNameMap[color] || 'pin-02',
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
@@ -49,6 +55,31 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
+  // autoClose 타이머 관리
+  var timerRef = useRef(null);
+  useEffect(function () {
+    // autoClose가 0보다 크면 무조건 타이머 설정
+    if (autoClose > 0) {
+      timerRef.current = setTimeout(function () {
+        if (onClose) {
+          onClose();
+        }
+        // DOM에서 바로 제거
+        setShouldRemove(true);
+      }, autoClose);
+    }
+    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    return function () {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [autoClose, onClose]);
+  // DOM에서 완전히 제거
+  if (shouldRemove) {
+    return null;
+  }
   return _jsxs("div", __assign({
     ref: ref,
     className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
@@ -83,7 +114,7 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: actions.map(function (action) {
               return _jsx(Button, {
                 size: "xs",
-                hierarchy: action.hierarchy || 'link',
+                hierarchy: action.hierarchy || 'text',
                 label: action.label,
                 onClick: action === null || action === void 0 ? void 0 : action.onClick
               }, "".concat(action.label, "-").concat(action.hierarchy));

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -19,19 +19,21 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
 var iconNameMap = {
   neutral: 'message-chat-square',
   error: 'alert-triangle',
   warning: 'alert-triangle',
-  success: 'check-circle'
+  success: 'check-circle',
+  info: 'info-circle'
 };
 var iconColorMap = {
   neutral: 'gray700',
   error: 'red500',
   warning: 'orange500',
-  success: 'green600'
+  success: 'green600',
+  info: 'violet600'
 };
 export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
@@ -41,11 +43,43 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+    _c = _a.autoClose,
+    autoClose = _c === void 0 ? 0 : _c,
+    supportTextLink = _a.supportTextLink,
+    onHidePermanently = _a.onHidePermanently,
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose", "supportTextLink", "onHidePermanently"]);
+  var _d = useState(false),
+    shouldRemove = _d[0],
+    setShouldRemove = _d[1];
   var closeIconSize = {
     width: 20,
     height: 20
   };
+  // autoClose 타이머 관리
+  var timerRef = useRef(null);
+  useEffect(function () {
+    // autoClose가 0보다 크면 무조건 타이머 설정
+    if (autoClose > 0) {
+      timerRef.current = setTimeout(function () {
+        if (onClose) {
+          onClose();
+        }
+        // DOM에서 바로 제거
+        setShouldRemove(true);
+      }, autoClose);
+    }
+    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    return function () {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [autoClose, onClose]);
+  // DOM에서 완전히 제거
+  if (shouldRemove) {
+    return null;
+  }
   return _jsx("div", __assign({
     ref: ref,
     className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
@@ -73,10 +107,19 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
               className: "ncua-full-width-notification__title"
             }, {
               children: title
-            })), supportingText && _jsx("span", __assign({
+            })), !supportTextLink && supportingText && _jsx("span", __assign({
               className: "ncua-full-width-notification__supporting-text"
             }, {
               children: supportingText
+            })), supportTextLink && supportingText && _jsx("a", __assign({
+              href: supportTextLink,
+              className: "ncua-full-width-notification__link"
+            }, {
+              children: _jsx("span", __assign({
+                className: "ncua-full-width-notification__supporting-text"
+              }, {
+                children: supportingText
+              }))
             }))]
           }))]
         })), _jsxs("div", __assign({
@@ -88,11 +131,17 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: actions.map(function (action) {
               return _jsx("button", __assign({
                 onClick: action.onClick,
-                className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link'))
+                className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'text'))
               }, {
                 children: action.label
               }), "".concat(action.label, "-").concat(action.hierarchy));
             })
+          })), onHidePermanently && _jsx("button", __assign({
+            type: "button",
+            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
+            onClick: onHidePermanently
+          }, {
+            children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
           })), onClose && _jsx("button", __assign({
             type: "button",
             className: "ncua-full-width-notification__close-button",

package/dist/esm/src/components/notification/MessageNotification.js

@@ -0,0 +1,130 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon/dynamic';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Button } from '../button';
+import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+var iconNameMap = {
+  neutral: 'pin-02',
+  error: 'alert-triangle',
+  warning: 'alert-circle',
+  success: 'check-circle'
+};
+var iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var title = _a.title,
+    supportingText = _a.supportingText,
+    icon = _a.icon,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
+    onClose = _a.onClose,
+    className = _a.className,
+    actions = _a.actions,
+    onHidePermanently = _a.onHidePermanently,
+    rest = __rest(_a, ["title", "supportingText", "icon", "color", "onClose", "className", "actions", "onHidePermanently"]);
+  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+  var validColor = color === 'info' ? 'neutral' : color;
+  var iconColor = validColor;
+  var featuredIconProps = {
+    name: icon || iconNameMap[validColor] || 'pin-02',
+    size: 'lg',
+    color: iconColor,
+    theme: 'light-circle'
+  };
+  var closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
+  return _jsx("div", __assign({
+    ref: ref,
+    className: classNames('ncua-message-notification', "ncua-message-notification--".concat(validColor), className),
+    role: "alert"
+  }, rest, {
+    children: _jsx("div", __assign({
+      className: "ncua-message-notification__container"
+    }, {
+      children: _jsxs("div", __assign({
+        className: "ncua-message-notification__content"
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-message-notification__content-wrapper"
+        }, {
+          children: [iconNameMap[validColor] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+            className: "ncua-message-notification__icon"
+          })), _jsxs("div", __assign({
+            className: "ncua-message-notification__text-container"
+          }, {
+            children: [_jsx("span", __assign({
+              className: "ncua-message-notification__title"
+            }, {
+              children: title
+            })), supportingText && _jsx("span", __assign({
+              className: "ncua-message-notification__supporting-text"
+            }, {
+              children: supportingText
+            }))]
+          }))]
+        })), _jsx("div", __assign({
+          className: "ncua-message-notification__actions-container"
+        }, {
+          children: actions && _jsx("div", __assign({
+            className: "ncua-message-notification__actions"
+          }, {
+            children: actions.map(function (action) {
+              return _jsx(Button, {
+                size: "xs",
+                hierarchy: action.hierarchy || 'text',
+                label: action.label,
+                onClick: action === null || action === void 0 ? void 0 : action.onClick
+              }, "".concat(action.label, "-").concat(action.hierarchy));
+            })
+          }))
+        })), _jsxs("div", __assign({
+          className: "ncua-message-notification__footer-container"
+        }, {
+          children: [onHidePermanently && _jsx("button", __assign({
+            type: "button",
+            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
+            onClick: onHidePermanently
+          }, {
+            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
+          })), onClose && _jsx("button", __assign({
+            type: "button",
+            className: "ncua-message-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+          }, {
+            children: _jsx(Icon, {
+              name: "x-close",
+              width: 20,
+              height: 20,
+              color: closeIconColor
+            })
+          }))]
+        }))]
+      }))
+    }))
+  }));
+});
+MessageNotification.displayName = 'MessageNotification';

package/dist/esm/src/components/notification/Notification.js

@@ -20,20 +20,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
+import { MessageNotification } from './MessageNotification';
 export var Notification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.type,
     type = _b === void 0 ? 'floating' : _b,
     _c = _a.color,
     color = _c === void 0 ? 'neutral' : _c,
     rest = __rest(_a, ["type", "color"]);
-  return type === 'floating' ? _jsx(FloatingNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  })) : _jsx(FullWidthNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  }));
+  if (type === 'floating') {
+    return _jsx(FloatingNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'full-width') {
+    return _jsx(FullWidthNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'message') {
+    return _jsx(MessageNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  return null;
 });
 Notification.displayName = 'Notification';

package/dist/esm/src/components/notification/index.js

@@ -1,3 +1,4 @@
 export * from './Notification';
 export * from './FloatingNotification';
-export * from './FullWidthNotification';
+export * from './FullWidthNotification';
+export * from './MessageNotification';