@ncds/ui-admin 1.8.18 → 1.8.19-alpha.1

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/input-base/InputBase.js

@@ -35,6 +35,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     showHelpIcon,
     maxLength,
     showTextCount,
+    clearText,
+    onClearText,
     className,
     ...props
   } = _ref;
@@ -100,11 +102,11 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     }
   };
   const renderClearButton = () => {
-    if (!props.clearText) return null;
+    if (!clearText) return null;
     return (0, _jsxRuntime.jsx)("button", {
       type: "button",
       className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: props.onClearText,
+      onClick: onClearText,
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _InputBase = require("../InputBase");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_InputBase.InputBase, props));
+  });
+  const unmount = () => {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+}
+(0, _vitest.describe)('InputBase — clearText prop DOM 누출', () => {
+  (0, _vitest.it)('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+    // Given: console.error를 감시하는 상태에서
+    const consoleErrorSpy = _vitest.vi.spyOn(console, 'error');
+    // When: clearText, onClearText를 전달해 렌더하면
+    const view = mountInputBase({
+      clearText: true,
+      onClearText: _vitest.vi.fn()
+    });
+    // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+    const input = view.container.querySelector('input');
+    (0, _vitest.expect)(input).not.toBeNull();
+    (0, _vitest.expect)(input?.hasAttribute('cleartext')).toBe(false);
+    (0, _vitest.expect)(consoleErrorSpy).not.toHaveBeenCalled();
+    consoleErrorSpy.mockRestore();
+    view.unmount();
+  });
+  (0, _vitest.it)('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+    // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+    const onClearText = _vitest.vi.fn();
+    const view = mountInputBase({
+      clearText: true,
+      onClearText
+    });
+    // When: clear 버튼을 찾아 클릭하면
+    const clearButton = view.container.querySelector('.ncua-input__clear');
+    (0, _vitest.expect)(clearButton).not.toBeNull();
+    (0, _testUtils.act)(() => {
+      clearButton?.click();
+    });
+    // Then: onClearText가 호출된다
+    (0, _vitest.expect)(onClearText).toHaveBeenCalledTimes(1);
+    view.unmount();
+  });
+  (0, _vitest.it)('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+    // Given/When: clearText 없이 렌더하면
+    const view = mountInputBase();
+    // Then: clear 버튼이 존재하지 않는다
+    (0, _vitest.expect)(view.container.querySelector('.ncua-input__clear')).toBeNull();
+    view.unmount();
+  });
+});

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

@@ -9,7 +9,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/esm/src/components/forms-and-input/input-base/InputBase.js

@@ -28,6 +28,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     showHelpIcon,
     maxLength,
     showTextCount,
+    clearText,
+    onClearText,
     className,
     ...props
   } = _ref;
@@ -93,11 +95,11 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   const renderClearButton = () => {
-    if (!props.clearText) return null;
+    if (!clearText) return null;
     return _jsx("button", {
       type: "button",
       className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: props.onClearText,
+      onClick: onClearText,
       children: _jsx(X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { InputBase } from '../InputBase';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/createElement(InputBase, props));
+  });
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+}
+describe('InputBase — clearText prop DOM 누출', () => {
+  it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+    // Given: console.error를 감시하는 상태에서
+    const consoleErrorSpy = vi.spyOn(console, 'error');
+    // When: clearText, onClearText를 전달해 렌더하면
+    const view = mountInputBase({
+      clearText: true,
+      onClearText: vi.fn()
+    });
+    // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+    const input = view.container.querySelector('input');
+    expect(input).not.toBeNull();
+    expect(input?.hasAttribute('cleartext')).toBe(false);
+    expect(consoleErrorSpy).not.toHaveBeenCalled();
+    consoleErrorSpy.mockRestore();
+    view.unmount();
+  });
+  it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+    // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+    const onClearText = vi.fn();
+    const view = mountInputBase({
+      clearText: true,
+      onClearText
+    });
+    // When: clear 버튼을 찾아 클릭하면
+    const clearButton = view.container.querySelector('.ncua-input__clear');
+    expect(clearButton).not.toBeNull();
+    act(() => {
+      clearButton?.click();
+    });
+    // Then: onClearText가 호출된다
+    expect(onClearText).toHaveBeenCalledTimes(1);
+    view.unmount();
+  });
+  it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+    // Given/When: clearText 없이 렌더하면
+    const view = mountInputBase();
+    // Then: clear 버튼이 존재하지 않는다
+    expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
+    view.unmount();
+  });
+});

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

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };

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

@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
  */
 const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
-const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
 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로 대체 불가한 전용 표시)

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

@@ -13,7 +13,7 @@ const generalSvgSize = {
     xs: 14,
     sm: 20,
 };
-const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, clearText, onClearText, className, ...props }, ref) => {
     const inputRef = useRef(null);
     const [textCount, setTextCount] = useState(0);
     useEffect(() => {
@@ -59,9 +59,9 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
         }
     };
     const renderClearButton = () => {
-        if (!props.clearText)
+        if (!clearText)
             return null;
-        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
     };
     const renderStatusIcon = () => {
         if (destructive) {

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { InputBase } from '../InputBase';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountInputBase(props = {}) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(InputBase, props));
+    });
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    };
+    return { container, unmount };
+}
+describe('InputBase — clearText prop DOM 누출', () => {
+    it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
+        // Given: console.error를 감시하는 상태에서
+        const consoleErrorSpy = vi.spyOn(console, 'error');
+        // When: clearText, onClearText를 전달해 렌더하면
+        const view = mountInputBase({ clearText: true, onClearText: vi.fn() });
+        // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
+        const input = view.container.querySelector('input');
+        expect(input).not.toBeNull();
+        expect(input?.hasAttribute('cleartext')).toBe(false);
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+        consoleErrorSpy.mockRestore();
+        view.unmount();
+    });
+    it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
+        // Given: clearText와 onClearText를 전달해 렌더한 상태에서
+        const onClearText = vi.fn();
+        const view = mountInputBase({ clearText: true, onClearText });
+        // When: clear 버튼을 찾아 클릭하면
+        const clearButton = view.container.querySelector('.ncua-input__clear');
+        expect(clearButton).not.toBeNull();
+        act(() => {
+            clearButton?.click();
+        });
+        // Then: onClearText가 호출된다
+        expect(onClearText).toHaveBeenCalledTimes(1);
+        view.unmount();
+    });
+    it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
+        // Given/When: clearText 없이 렌더하면
+        const view = mountInputBase();
+        // Then: clear 버튼이 존재하지 않는다
+        expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
+        view.unmount();
+    });
+});

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

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };

package/dist/types/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -5039,15 +5039,16 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
-  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
+  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
+  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6309,7 +6310,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6454,7 +6455,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: var(--z-index-sticky);
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }
@@ -6500,7 +6501,6 @@ button {
 .ncua-table--vertical .ncua-table__body > .ncua-table__row {
   height: 48px;
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child {
   width: 240px;
   min-width: 240px;
@@ -6520,19 +6520,16 @@ button {
   text-align: left;
   font-weight: var(--font-weights-commerce-sans-0);
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip),
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) {
   display: flex;
   align-items: center;
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip {
   display: inline-flex;
   align-items: center;
   line-height: 1;
   margin-left: var(--spacing-xs);
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip > .ncua-tooltip__icon,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip > .ncua-tooltip__icon {
   display: inline-flex;
   align-items: center;
@@ -6565,6 +6562,7 @@ button {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
+  color: var(--gray-700);
   text-align: center;
   background: var(--base-white);
   border-right: 1px solid var(--gray-100);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.18",
+  "version": "1.8.19-alpha.1",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",