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

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

@@ -2257,33 +2257,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 +2294,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 +2324,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 +2336,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 +2349,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 +2405,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 +2423,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 +2453,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 +2897,7 @@ button {
   align-items: center;
   justify-content: space-between;
   gap: 24px;
+  flex-wrap: wrap;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__content {
@@ -2902,7 +2911,7 @@ button {
   display: flex;
   align-items: center;
   gap: 12px;
-  min-width: 0;
+  min-width: 160px;
 }
 .ncua-message-notification__icon {
   flex-shrink: 0;
@@ -2928,6 +2937,7 @@ button {
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
+  margin-left: auto;
   flex-wrap: wrap;
 }
 @media (max-width: 768px) {
@@ -3069,6 +3079,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);
@@ -4095,17 +4112,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 +4169,7 @@ button {
   color: var(--gray-400);
 }
 .ncua-pagination--mo .ncua-pagination__current-num {
+  margin-inline-end: 5px;
   font-style: normal;
   color: var(--gray-700);
 }

package/package.json

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