@ncds/ui-admin 1.8.8 → 1.8.9

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Badge = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,6 +13,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = {
+  sm: 12,
+  md: 16
+};
 const Badge = _ref => {
   let {
     label,
@@ -22,6 +28,19 @@ const Badge = _ref => {
     trailingIcon,
     size = 'xs'
   } = _ref;
+  // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+  // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+  if (type === 'new-badge') {
+    const newBadgeSize = size === 'md' ? 'md' : 'sm';
+    const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+    return (0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className),
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.New, {
+        width: iconSize,
+        height: iconSize
+      })
+    });
+  }
   return (0, _jsxRuntime.jsxs)("span", {
     className: (0, _classnames.default)('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className),
     children: [leadingIcon && (0, _utils.sideSlotRender)({

package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -14,6 +14,20 @@ var _shared = require("../../shared");
 var _FileInput = require("../file-input/FileInput");
 var _ImagePreview = require("./components/ImagePreview");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const toInvalidFile = (file, errorType) => ({
+  name: file.name,
+  size: file.size,
+  type: file.type,
+  lastModified: file.lastModified,
+  webkitRelativePath: file.webkitRelativePath,
+  arrayBuffer: () => file.arrayBuffer(),
+  stream: () => file.stream(),
+  text: () => file.text(),
+  slice: function () {
+    return file.slice(...arguments);
+  },
+  errorType
+});
 const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     size = 'sm',
@@ -81,25 +95,16 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
     const invalidFiles = [];
     for (const file of fileList) {
       if (files.some(f => f.name === file.name && f.size === file.size)) {
-        invalidFiles.push({
-          ...file,
-          errorType: _FileInput.FileInputErrorType.ALREADY_UPLOADED
-        });
+        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.ALREADY_UPLOADED));
         continue;
       }
       if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push({
-          ...file,
-          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE
-        });
+        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE));
         continue;
       }
       // Skip max count check if maxFileCount is 1 (allow replacement)
       if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push({
-          ...file,
-          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT
-        });
+        invalidFiles.push(toInvalidFile(file, _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT));
         continue;
       }
       validFiles.push(file);

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

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { New } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { sideSlotRender } from './utils';
 /**
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = {
+  sm: 12,
+  md: 16
+};
 const Badge = _ref => {
   let {
     label,
@@ -15,6 +21,19 @@ const Badge = _ref => {
     trailingIcon,
     size = 'xs'
   } = _ref;
+  // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+  // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+  if (type === 'new-badge') {
+    const newBadgeSize = size === 'md' ? 'md' : 'sm';
+    const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+    return _jsx("span", {
+      className: classNames('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className),
+      children: _jsx(New, {
+        width: iconSize,
+        height: iconSize
+      })
+    });
+  }
   return _jsxs("span", {
     className: classNames('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className),
     children: [leadingIcon && sideSlotRender({

package/dist/esm/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -7,6 +7,20 @@ import { Tooltip } from '../../overlays/tooltip';
 import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
 import { ImagePreview } from './components/ImagePreview';
+const toInvalidFile = (file, errorType) => ({
+  name: file.name,
+  size: file.size,
+  type: file.type,
+  lastModified: file.lastModified,
+  webkitRelativePath: file.webkitRelativePath,
+  arrayBuffer: () => file.arrayBuffer(),
+  stream: () => file.stream(),
+  text: () => file.text(),
+  slice: function () {
+    return file.slice(...arguments);
+  },
+  errorType
+});
 export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     size = 'sm',
@@ -74,25 +88,16 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     const invalidFiles = [];
     for (const file of fileList) {
       if (files.some(f => f.name === file.name && f.size === file.size)) {
-        invalidFiles.push({
-          ...file,
-          errorType: ImageFileInputErrorType.ALREADY_UPLOADED
-        });
+        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.ALREADY_UPLOADED));
         continue;
       }
       if (!!maxFileSize && file.size > maxFileSize) {
-        invalidFiles.push({
-          ...file,
-          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
-        });
+        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
         continue;
       }
       // Skip max count check if maxFileCount is 1 (allow replacement)
       if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-        invalidFiles.push({
-          ...file,
-          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT
-        });
+        invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT));
         continue;
       }
       validFiles.push(file);

package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import type { ColorTone } from '../../../../constant/color';
 import type { Size } from '../../../../constant/size';
 import type { SideSlotType } from '../../../types/side-slot';
-type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeType = 'pill-outline' | 'pill-dark-color' | 'new-badge';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 type BadgeProps = {
-    label: string;
+    /** new-badge 타입에서는 사용되지 않는다(무시됨). 그 외 타입에서는 필수로 전달한다. */
+    label?: string;
     type?: BadgeType;
     color?: BadgeColor;
     className?: string;

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

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { New } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { sideSlotRender } from './utils';
 /**
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
 const BADGE_ICON_SIZE = 12;
+/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
+    // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
+    // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
+    if (type === 'new-badge') {
+        const newBadgeSize = size === 'md' ? 'md' : 'sm';
+        const iconSize = NEW_BADGE_ICON_SIZE[newBadgeSize];
+        return (_jsx("span", { className: classNames('ncua-badge', 'ncua-badge--new-badge', `ncua-badge--new-badge-${newBadgeSize}`, className), children: _jsx(New, { width: iconSize, height: iconSize }) }));
+    }
     return (_jsxs("span", { className: classNames('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className), children: [leadingIcon && sideSlotRender({ slot: leadingIcon, defaultIconSize: BADGE_ICON_SIZE }), _jsx("span", { className: "ncua-badge__label", children: label }), trailingIcon && sideSlotRender({ slot: trailingIcon, defaultIconSize: BADGE_ICON_SIZE })] }));
 };
 export { Badge };

package/dist/temp/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -7,6 +7,18 @@ import { Tooltip } from '../../overlays/tooltip';
 import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
 import { ImagePreview } from './components/ImagePreview';
+const toInvalidFile = (file, errorType) => ({
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    webkitRelativePath: file.webkitRelativePath,
+    arrayBuffer: () => file.arrayBuffer(),
+    stream: () => file.stream(),
+    text: () => file.text(),
+    slice: (...args) => file.slice(...args),
+    errorType,
+});
 export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
     const fileInputRef = useRef(null);
     useImperativeHandle(ref, () => fileInputRef.current);
@@ -48,25 +60,16 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
         const invalidFiles = [];
         for (const file of fileList) {
             if (files.some((f) => f.name === file.name && f.size === file.size)) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.ALREADY_UPLOADED,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.ALREADY_UPLOADED));
                 continue;
             }
             if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE));
                 continue;
             }
             // Skip max count check if maxFileCount is 1 (allow replacement)
             if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT,
-                });
+                invalidFiles.push(toInvalidFile(file, ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT));
                 continue;
             }
             validFiles.push(file);

package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import type { ColorTone } from '../../../../constant/color';
 import type { Size } from '../../../../constant/size';
 import type { SideSlotType } from '../../../types/side-slot';
-type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeType = 'pill-outline' | 'pill-dark-color' | 'new-badge';
 type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
 type BadgeProps = {
-    label: string;
+    /** new-badge 타입에서는 사용되지 않는다(무시됨). 그 외 타입에서는 필수로 전달한다. */
+    label?: string;
     type?: BadgeType;
     color?: BadgeColor;
     className?: string;

package/dist/ui-admin/assets/styles/style.css

@@ -5017,6 +5017,20 @@ button {
   color: var(--gray-300);
   background-color: var(--gray-100);
 }
+.ncua-badge--new-badge {
+  justify-content: center;
+  color: var(--pink-600);
+  background-color: var(--pink-200);
+  border-radius: 5px;
+}
+.ncua-badge--new-badge-sm {
+  width: 16px;
+  height: 16px;
+}
+.ncua-badge--new-badge-md {
+  width: 20px;
+  height: 20px;
+}
 
 .ncua-badge-group {
   display: inline-flex;
@@ -5965,6 +5979,8 @@ button {
 }
 
 .ncua-table {
+  --ncua-table-header-height: 40px;
+  --ncua-table-default-min-width: 1140px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -6357,6 +6373,24 @@ button {
   align-items: center;
   line-height: 1;
 }
+.ncua-table--vertical .ncua-table .ncua-table__header > .ncua-table__row th:first-child {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  padding: 0 var(--spacing-m);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-500);
+  text-align: center;
+  background: var(--gray-100);
+  border-right: 1px solid var(--gray-200);
+}
+.ncua-table--vertical .ncua-table .ncua-table__header > .ncua-table__row th:last-child {
+  padding: 0 var(--spacing-m);
+  text-align: center;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:first-child {
   width: auto;
@@ -6501,7 +6535,15 @@ button {
   border: 1px solid var(--gray-100);
   border-radius: 12px;
   box-shadow: var(--shadow-sm);
-  overflow: hidden;
+}
+.ncua-block-container > *:first-child {
+  border-radius: 12px 12px 0 0;
+}
+.ncua-block-container > *:last-child {
+  border-radius: 0 0 12px 12px;
+}
+.ncua-block-container > *:only-child, .ncua-block-container > *:first-child:has(~ *:last-child[style*="display: none"]), .ncua-block-container > *:first-child:has(~ *:last-child[hidden]) {
+  border-radius: 12px;
 }
 .ncua-block-container__body {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -70,7 +70,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
-    "@ncds/ui-admin-icon": "0.1.9",
+    "@ncds/ui-admin-icon": "0.1.11",
     "classnames": "2.5.1",
     "dompurify": "3.4.1",
     "flatpickr": "4.6.13",