@ncds/ui-admin 1.8.13 → 1.8.14

package/dist/temp/src/utils/__tests__/date-picker.test.js

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import { describe, expect, it } from 'vitest';
+import { convertToMomentFormat } from '../date-picker';
+describe('convertToMomentFormat', () => {
+    it('날짜 전용 포맷을 moment 토큰으로 변환한다 (기존 동작 보존)', () => {
+        expect(convertToMomentFormat('Y-m-d')).toBe('YYYY-MM-DD');
+    });
+    it('2자리 연도(y)를 YY로 변환한다', () => {
+        expect(convertToMomentFormat('y-m-d')).toBe('YY-MM-DD');
+    });
+    it('시간 포함 포맷의 H/i/S를 모두 변환한다 (버그 수정 지점)', () => {
+        expect(convertToMomentFormat('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+        expect(convertToMomentFormat('Y-m-d H:i:S')).toBe('YYYY-MM-DD HH:mm:ss');
+    });
+    it('월(m)과 분(i)이 함께 있어도 서로 침범하지 않는다', () => {
+        // m -> MM(월) 먼저, i -> mm(분) 나중 순서가 지켜져야 함
+        expect(convertToMomentFormat('Y-m-d H:i')).not.toContain('i');
+        expect(convertToMomentFormat('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+    });
+    it('실제 moment 출력이 의도한 문자열과 일치한다 (회귀 핵심)', () => {
+        const date = moment('2024-03-20 14:30:05', 'YYYY-MM-DD HH:mm:ss').toDate();
+        expect(moment(date).format(convertToMomentFormat('Y-m-d'))).toBe('2024-03-20');
+        expect(moment(date).format(convertToMomentFormat('Y-m-d H:i'))).toBe('2024-03-20 14:30');
+        expect(moment(date).format(convertToMomentFormat('Y-m-d H:i:S'))).toBe('2024-03-20 14:30:05');
+    });
+});

package/dist/temp/src/utils/date-picker.d.ts

@@ -6,6 +6,8 @@ export declare function getSubtractDate({ date, period, unit, }: {
     period: DurationInputArg1;
     unit: DurationInputArg2;
 }): Date;
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export declare const convertToMomentFormat: (format: string) => string;
 export declare const formatDateInput: (input: string) => string;
 export declare const formatHourInput: (input: string) => string;
 export declare const formatMinuteInput: (input: string) => string;

package/dist/temp/src/utils/date-picker.js

@@ -15,6 +15,19 @@ export function getToday() {
 export function getSubtractDate({ date = getToday(), period, unit, }) {
     return moment(date).subtract(period, unit).toDate();
 }
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export const convertToMomentFormat = (format) => {
+    const tokenMap = {
+        Y: 'YYYY',
+        y: 'YY',
+        m: 'MM',
+        d: 'DD',
+        H: 'HH',
+        i: 'mm',
+        S: 'ss',
+    };
+    return format.replace(/[YymdHiS]/g, (matched) => tokenMap[matched] || matched);
+};
 export const formatDateInput = (input) => {
     const dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
     if (dateRegex.test(input)) {

package/dist/types/src/components/forms-and-input/date-picker/__tests__/DatePicker.memo.test.d.ts

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

package/dist/types/src/components/forms-and-input/date-picker/__tests__/DatePicker.test.d.ts

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

package/dist/types/src/components/forms-and-input/select/Select.d.ts

@@ -7,6 +7,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size
     disabledPlaceholder?: boolean;
     hintText?: string;
     destructive?: boolean;
+    readOnly?: boolean;
     size?: Extract<Size, 'xs' | 'sm' | 'md'>;
     optionItems?: OptionType[];
     register?: UseFormRegisterReturn;

package/dist/types/src/components/forms-and-input/select-box/SelectBox.d.ts

@@ -16,6 +16,7 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
     value?: OptionValue;
     onChange?: OptionChangeHandler;
     disabled?: boolean;
+    readOnly?: boolean;
     register?: UseFormRegisterReturn;
     maxHeight?: number;
     multiple?: boolean;

package/dist/types/src/utils/__tests__/date-picker.test.d.ts

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

package/dist/types/src/utils/date-picker.d.ts

@@ -6,6 +6,8 @@ export declare function getSubtractDate({ date, period, unit, }: {
     period: DurationInputArg1;
     unit: DurationInputArg2;
 }): Date;
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export declare const convertToMomentFormat: (format: string) => string;
 export declare const formatDateInput: (input: string) => string;
 export declare const formatHourInput: (input: string) => string;
 export declare const formatMinuteInput: (input: string) => string;

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

@@ -3415,6 +3415,12 @@ button {
 .ncua-select__content:has(.ncua-select__tag:disabled) {
   border-color: var(--gray-200);
 }
+.ncua-select--readonly .ncua-select__tag {
+  pointer-events: none;
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23a4a5a8' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
 .ncua-select.destructive .ncua-select__content {
   border-color: var(--primary-red-600);
 }
@@ -3644,7 +3650,7 @@ button {
   cursor: pointer;
   transition: all 0.15s ease-in-out;
 }
-.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content) {
+.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content):not(.ncua-selectbox--readonly .ncua-selectbox__content) {
   border-color: var(--gray-300);
 }
 .ncua-selectbox__content:focus {
@@ -3727,6 +3733,16 @@ button {
 .ncua-selectbox--disabled .ncua-selectbox__arrow {
   color: var(--gray-300);
 }
+.ncua-selectbox--readonly .ncua-selectbox__content {
+  background-color: var(--gray-50);
+  cursor: default;
+}
+.ncua-selectbox--readonly .ncua-selectbox__value {
+  color: var(--gray-700);
+}
+.ncua-selectbox--readonly .ncua-selectbox__arrow {
+  color: var(--gray-300);
+}
 .ncua-selectbox.destructive .ncua-selectbox__content {
   border-color: var(--primary-red-600);
 }
@@ -3791,7 +3807,7 @@ button {
   border: 0;
   background-color: transparent;
 }
-.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content) {
+.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content):not(.ncua-selectbox--readonly .ncua-selectbox--simple .ncua-selectbox__content) {
   border-color: transparent;
 }
 .ncua-selectbox--simple .ncua-selectbox__content:focus {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.13",
+  "version": "1.8.14",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -105,6 +105,7 @@
     "eslint-config-react-app": "7.0.1",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.6.6",
+    "jsdom": "26.1.0",
     "mini-css-extract-plugin": "2.10.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",