@ncds/ui-admin 1.8.21-alpha.8 → 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

@@ -1,3 +1,4 @@
+import { type PostcodeSearchModalTipProps } from './PostcodeSearchModalTip';
 /** 검색 결과 아이템 하나. */
 interface PostcodeSearchResult {
     /** 우편번호(5자리) */
@@ -32,16 +33,11 @@ interface PostcodeSearchModalProps {
     errorCode?: PostcodeSearchErrorCode;
     onSelect: (result: PostcodeSearchResult) => void;
 }
-interface PostcodeSearchModalTipProps {
-    /** 압축 모드 여부. 결과 30건 초과일 때 true */
-    compact?: boolean;
-    className?: string;
-}
 declare const PostcodeSearchModal: {
     ({ open, onClose, zIndex, className, searchQuery, onSearchQueryChange, onSearch, results, totalCount, currentPage, onPageChange, pageSize, loading, errorCode, onSelect, }: PostcodeSearchModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     Tip: {
-        ({ compact, className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
+        ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -0,0 +1,16 @@
+interface PostcodeSearchModalTipProps {
+    className?: string;
+}
+/** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
+declare const TIP_TITLE = "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9\uD558\uBA74 \uC6D0\uD558\uB294 \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694.";
+/**
+ * 검색어 조합을 안내하는 Tip 카드.
+ * 결과 목록이 없는 화면(초기·오류·결과 없음)에서만 노출된다.
+ * 결과가 있을 때는 모달이 안내 문구 한 줄만 검색 영역에 붙여 고정한다.
+ */
+declare const Tip: {
+    ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Tip, TIP_TITLE };
+export type { PostcodeSearchModalTipProps };

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 {
@@ -2254,25 +2257,63 @@ button {
   .ncua-modal:has(.ncua-postcode-search-modal) {
     height: 480px;
   }
+  .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;
+}
+
+.ncua-postcode-search-modal__search-area {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 16px var(--padding-inline) 20px;
   display: flex;
-  flex: 1;
   flex-direction: column;
-  gap: var(--spacing-m);
+  gap: var(--spacing-s);
+  background-color: var(--base-white);
+}
+.ncua-postcode-search-modal__search-area.is-fixed {
+  border-block-end: 1px solid var(--gray-200);
 }
 
 .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 {
+  margin: 0 0 2px;
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+}
+
+.ncua-postcode-search-modal__result-desc {
+  margin: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xxs);
 }
 
 .ncua-postcode-search-modal__search-input {
@@ -2285,7 +2326,9 @@ button {
 }
 
 .ncua-postcode-search-modal__count {
-  color: var(--gray-700);
+  padding-inline: var(--padding-inline);
+  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);
@@ -2295,8 +2338,8 @@ button {
 }
 
 .ncua-postcode-search-modal__list {
-  padding-left: 0;
-  margin-bottom: 0;
+  padding-inline: var(--padding-inline);
+  margin-block: 8px 0;
 }
 
 .ncua-postcode-search-modal__item {
@@ -2309,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;
 }
@@ -2361,6 +2408,8 @@ 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);
   line-height: var(--line-heights-xxs);
@@ -2377,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 {
@@ -2406,22 +2456,21 @@ 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);
-}
-
-.ncua-postcode-search-modal__tip-compact-text {
-  margin: 0;
+  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 {
+  flex: 1;
 }
 
 .ncua-postcode-search-modal__empty {
@@ -2851,6 +2900,7 @@ button {
   align-items: center;
   justify-content: space-between;
   gap: 24px;
+  flex-wrap: wrap;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__content {
@@ -2864,7 +2914,7 @@ button {
   display: flex;
   align-items: center;
   gap: 12px;
-  min-width: 0;
+  min-width: 160px;
 }
 .ncua-message-notification__icon {
   flex-shrink: 0;
@@ -2890,6 +2940,7 @@ button {
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
+  margin-left: auto;
   flex-wrap: wrap;
 }
 @media (max-width: 768px) {
@@ -3031,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);
@@ -3125,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 {
@@ -3627,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);
@@ -3949,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);
@@ -4057,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;
@@ -4114,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);
 }
@@ -5241,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 {
@@ -6512,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);
@@ -6657,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.8",
+  "version": "1.8.21",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",