@ncds/ui-admin 1.8.21-alpha.9 → 1.8.21

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 { BadgeColor, BadgeProps, BadgeSize, BadgeType };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

package/dist/types/src/components/overlays/notification/CalloutNotification.d.ts

@@ -1,9 +1,11 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { NotificationColor } from './Notification';
+type CalloutNotificationWidth = 'full' | 'fit';
 interface CalloutNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     color?: NotificationColor;
     title?: ReactNode;
+    width?: CalloutNotificationWidth;
 }
 declare const CalloutNotification: import("react").ForwardRefExoticComponent<CalloutNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
-export type { CalloutNotificationProps };
+export type { CalloutNotificationProps, CalloutNotificationWidth };
 export { CalloutNotification };

package/dist/types/src/components/overlays/notification/Notification.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { ColorTone } from '../../../../constant/color';
 import type { SlotIconComponent } from '../../../types/side-slot';
 import type { ButtonTheme } from '../../action/button';
-import { type CalloutNotificationProps } from './CalloutNotification';
+import { type CalloutNotificationProps, type CalloutNotificationWidth } from './CalloutNotification';
 type NotificationType = 'floating' | 'full-width' | 'message' | 'callout';
 type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 type NotificationSize = 'desktop' | 'mobile';
@@ -76,6 +76,16 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
      */
     hidePermanentlyLabel?: ReactNode;
+    /**
+     * supportingText 에 연결할 링크 URL (선택사항)
+     * full-width 타입에서 사용 가능
+     */
+    supportTextLink?: string;
+    /**
+     * 너비 동작 (선택사항)
+     * callout 타입에서만 사용 가능. 미지정 시 부모 너비를 채운다(100%). 'fit' 은 콘텐츠 너비에 맞춘다
+     */
+    width?: CalloutNotificationWidth;
     /**
      * Portal 마운트 여부. `floating` 타입에서만 동작한다.
      *
@@ -92,5 +102,5 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
 }
 declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
-export type { CalloutNotificationProps };
+export type { CalloutNotificationProps, CalloutNotificationWidth };
 export { Notification };

package/dist/types/src/components/overlays/notification/__tests__/CalloutNotification.test.d.ts

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

package/dist/types/src/components/overlays/notification/__tests__/Notification.test.d.ts

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

package/dist/types/src/components/overlays/postcode-search-modal/PostcodeSearchModal.d.ts

@@ -38,7 +38,7 @@ declare const PostcodeSearchModal: {
     displayName: string;
     Tip: {
         ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string; /** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
+        displayName: string;
     };
 };
 export { PostcodeSearchModal };

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

@@ -67,6 +67,9 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
+  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
+  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -323,7 +326,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-sm-focused-4px-primary-100);
+  box-shadow: var(--shadow-xs-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -369,7 +372,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-sm-focused-4px-gray-100);
+  box-shadow: var(--shadow-xs-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -955,7 +958,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1736,7 +1739,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1926,7 +1929,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -2257,33 +2260,35 @@ button {
   .ncua-modal:has(.ncua-postcode-search-modal) .ncua-postcode-search-modal__item .ncua-radio-input {
     display: none;
   }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__content {
+    padding-block-end: 20px;
+  }
+}
+
+.ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__header-divider {
+  margin: 0;
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
   display: flex;
   flex-direction: column;
-  padding-block-end: 91px;
+  padding-block-end: 32px;
   padding-inline: 0;
 }
 
 .ncua-postcode-search-modal {
   --padding-inline: 20px;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: var(--spacing-m);
 }
 
 .ncua-postcode-search-modal__search-area {
   position: sticky;
   top: 0;
   z-index: 1;
-  padding-inline: var(--padding-inline);
+  padding: 16px var(--padding-inline) 20px;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-s);
   background-color: var(--base-white);
-  padding-block-end: 12px;
 }
 .ncua-postcode-search-modal__search-area.is-fixed {
   border-block-end: 1px solid var(--gray-200);
@@ -2292,7 +2297,7 @@ button {
 .ncua-postcode-search-modal__search {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-s);
+  gap: var(--spacing-xs);
 }
 
 .ncua-postcode-search-modal__search-area .ncua-postcode-search-modal__result-title {
@@ -2322,7 +2327,8 @@ button {
 
 .ncua-postcode-search-modal__count {
   padding-inline: var(--padding-inline);
-  color: var(--gray-700);
+  margin-block-start: 12px;
+  color: var(--gray-500);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-2);
   line-height: var(--line-heights-xs);
@@ -2333,7 +2339,7 @@ button {
 
 .ncua-postcode-search-modal__list {
   padding-inline: var(--padding-inline);
-  margin-bottom: 0;
+  margin-block: 8px 0;
 }
 
 .ncua-postcode-search-modal__item {
@@ -2346,6 +2352,10 @@ button {
   align-items: center;
   width: 100%;
 }
+.ncua-postcode-search-modal__item .ncua-radio-field.has-text {
+  gap: 16px;
+  vertical-align: top;
+}
 .ncua-postcode-search-modal__item .ncua-radio-field__input + span {
   flex: 1;
 }
@@ -2398,6 +2408,7 @@ button {
 }
 
 .ncua-postcode-search-modal__tip {
+  margin-inline-start: 6px;
   padding-inline: var(--padding-inline);
   color: var(--gray-500);
   font-size: var(--font-size-xxs);
@@ -2415,6 +2426,7 @@ button {
 
 .ncua-postcode-search-modal__tip-icon {
   flex-shrink: 0;
+  color: var(--gray-400);
 }
 
 .ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
@@ -2444,18 +2456,17 @@ button {
 }
 
 .ncua-postcode-search-modal__tip-combination {
-  color: var(--gray-700);
+  font-weight: var(--font-weights-commerce-sans-1);
 }
 
 .ncua-postcode-search-modal__tip-example {
-  padding-left: var(--spacing-s);
+  font-weight: var(--font-weights-commerce-sans-0);
 }
 
 .ncua-postcode-search-modal__pagination {
   display: flex;
   justify-content: center;
-  margin-top: auto;
-  padding-top: var(--spacing-m);
+  margin-top: 20px;
   padding-inline: var(--padding-inline);
 }
 .ncua-postcode-search-modal__pagination .ncua-pagination--mo {
@@ -2889,6 +2900,7 @@ button {
   align-items: center;
   justify-content: space-between;
   gap: 24px;
+  flex-wrap: wrap;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__content {
@@ -2902,7 +2914,7 @@ button {
   display: flex;
   align-items: center;
   gap: 12px;
-  min-width: 0;
+  min-width: 160px;
 }
 .ncua-message-notification__icon {
   flex-shrink: 0;
@@ -2928,6 +2940,7 @@ button {
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
+  margin-left: auto;
   flex-wrap: wrap;
 }
 @media (max-width: 768px) {
@@ -3069,6 +3082,13 @@ button {
   line-height: var(--line-heights-md);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-callout-notification--full {
+  width: 100%;
+}
+.ncua-callout-notification--fit {
+  width: fit-content;
+  max-width: 100%;
+}
 .ncua-callout-notification--info {
   background-color: var(--blue-50);
   border-color: var(--blue-200);
@@ -3163,7 +3183,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3665,7 +3685,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -3987,7 +4007,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);
@@ -4095,17 +4115,17 @@ button {
   list-style: none;
 }
 .ncua-pagination__item + .ncua-pagination__item {
-  margin-inline-start: 4px;
+  margin-inline-start: 2px;
   margin-top: 0;
 }
 .ncua-pagination__page-num {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding-inline: 10px;
-  min-width: 32px;
+  padding-inline: 0;
+  width: 32px;
   height: 32px;
   border-radius: 8px;
   border: 0;
@@ -4152,6 +4172,7 @@ button {
   color: var(--gray-400);
 }
 .ncua-pagination--mo .ncua-pagination__current-num {
+  margin-inline-end: 5px;
   font-style: normal;
   color: var(--gray-700);
 }
@@ -5279,16 +5300,15 @@ 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 {
@@ -6550,7 +6570,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: var(--z-index-1);
+  z-index: 1;
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6695,7 +6715,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: var(--z-index-sticky);
+  z-index: 10;
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }

package/package.json

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