@ncds/ui-admin 1.8.21-alpha.5 → 1.8.21-alpha.7

package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts

@@ -9,6 +9,12 @@ export declare class FullWidthNotification {
     constructor(options: FullWidthNotificationOptions);
     private createElement;
     private buildTemplate;
+    /**
+     * 다시보지 않기 버튼.
+     *
+     * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+     * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+     */
     private renderHidePermanentlyButton;
     private renderCloseButton;
     private bindEvents;

package/dist/types/assets/scripts/notification/const/types.d.ts

@@ -33,5 +33,15 @@ export interface BaseNotificationOptions {
     autoClose?: number;
     supportTextLink?: string;
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨. full-width, message 타입에서 사용 가능하며
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     *
+     * 값은 HTML에 삽입되기 전 `sanitizeHtml`을 거친다.
+     */
+    hidePermanentlyLabel?: string;
 }
 export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

package/dist/types/assets/scripts/notification/messageTemplate.d.ts

@@ -5,6 +5,7 @@ export interface MessageTemplateParams {
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;
+    hidePermanentlyLabel?: string;
 }
 /**
  * Message Notification의 마크업을 만든다.

package/dist/types/constant/notification.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 다시보지 않기 버튼의 타입별 기본 문구.
+ *
+ * `hidePermanentlyLabel`을 지정하지 않았을 때 쓰인다.
+ * React(`src/components/overlays/notification/`)와 Vanilla(`assets/scripts/notification/`)
+ * 두 구현이 이 상수를 함께 참조한다 — 문구가 하드코딩으로 흩어져 서로 어긋나던 문제(#460)를
+ * 막기 위한 단일 출처다.
+ *
+ * `message`와 `fullWidth`의 띄어쓰기가 다른 것은 오타가 아니라 현행 유지다.
+ * 표기 통일은 별도 결정 사항이며, 결정되면 이 파일 한 곳만 고치면 된다.
+ */
+export declare const HIDE_PERMANENTLY_LABEL: {
+    readonly message: "다시 보지 않기";
+    readonly fullWidth: "다시보지 않기";
+};

package/dist/types/src/components/index.d.ts

@@ -44,6 +44,7 @@ export * from './navigation/vertical-tab';
 export * from './overlays/dropdown';
 export * from './overlays/modal';
 export * from './overlays/notification';
+export * from './overlays/postcode-search-modal';
 export * from './overlays/tooltip';
 export * from './select-dropdown';
 export * from './shared';

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

@@ -40,6 +40,12 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FullWidthNotificationProps };

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

@@ -35,6 +35,12 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시 보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { MessageNotificationProps };

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

@@ -15,6 +15,7 @@ interface MessageNotificationActionsProps {
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;
+    hidePermanentlyLabel?: ReactNode;
     closeIconColor: string;
 }
 /**
@@ -22,6 +23,6 @@ interface MessageNotificationActionsProps {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
 export type { MessageNotificationActionsProps, MessageNotificationContentProps };
 export { MessageNotificationActions, MessageNotificationContent };

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

@@ -68,6 +68,14 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * message, full-width 타입에서 사용 가능
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * message, full-width 타입에서 사용 가능하며 `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     */
+    hidePermanentlyLabel?: ReactNode;
     /**
      * Portal 마운트 여부. `floating` 타입에서만 동작한다.
      *

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

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

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

@@ -0,0 +1,49 @@
+/** 검색 결과 아이템 하나. */
+interface PostcodeSearchResult {
+    /** 우편번호(5자리) */
+    zipCode: string;
+    /** 도로명주소(도로명 + 건물번호 + 참고항목 등) */
+    roadAddress: string;
+    /** 지번주소 */
+    jibunAddress: string;
+}
+/**
+ * 컴포넌트가 표시할 수 있는 에러코드(행정안전부 도로명주소 API 기준).
+ * 기획서에 직접 적힌 코드는 E0006·E0008·E0009·E0012·E0013 이고,
+ * E0010·E0011 은 기획서의 "E0009~E0013 통합" 범위 표기에서 채운 값이다.
+ */
+type PostcodeSearchErrorCode = 'E0006' | 'E0008' | 'E0009' | 'E0010' | 'E0011' | 'E0012' | 'E0013';
+interface PostcodeSearchModalProps {
+    open: boolean;
+    onClose: () => void;
+    zIndex?: number;
+    className?: string;
+    searchQuery: string;
+    onSearchQueryChange: (value: string) => void;
+    onSearch: () => void;
+    results: PostcodeSearchResult[];
+    totalCount: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    /** 페이지당 아이템 수. 기획서 기본값 15 */
+    pageSize?: number;
+    /** 검색 API 응답을 기다리는 중인지 여부. 응답 전에 "결과 없음" 이 먼저 뜨는 것을 막는다. */
+    loading?: boolean;
+    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;
+        displayName: string;
+    };
+};
+export { PostcodeSearchModal };
+export type { PostcodeSearchErrorCode, PostcodeSearchModalProps, PostcodeSearchModalTipProps, PostcodeSearchResult };

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

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

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

@@ -0,0 +1 @@
+export * from './PostcodeSearchModal';

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

@@ -2246,6 +2246,192 @@ button {
   }
 }
 
+.ncua-modal:has(.ncua-postcode-search-modal) {
+  padding-block-end: 0;
+  height: 640px;
+}
+@media (max-width: 768px) {
+  .ncua-modal:has(.ncua-postcode-search-modal) {
+    height: 480px;
+  }
+}
+
+.ncua-modal__content:has(.ncua-postcode-search-modal) {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 91px;
+}
+
+.ncua-postcode-search-modal {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__search {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__search-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.ncua-postcode-search-modal__search-button {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__count {
+  color: var(--gray-700);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-xs);
+}
+.ncua-postcode-search-modal__count b {
+  color: var(--primary-red-450);
+}
+
+.ncua-postcode-search-modal__list {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.ncua-postcode-search-modal__item {
+  padding: 12px 16px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field {
+  align-items: center;
+  width: 100%;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field__input + span {
+  flex: 1;
+}
+.ncua-postcode-search-modal__item + .ncua-postcode-search-modal__item {
+  margin-block-start: 8px;
+}
+.ncua-postcode-search-modal__item:hover {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--gray-50);
+}
+.ncua-postcode-search-modal__item:has(:checked) {
+  border-color: var(--gray-400);
+}
+
+.ncua-postcode-search-modal__addr-line {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  font-size: var(--font-size-xs);
+}
+.ncua-postcode-search-modal__addr-line + .ncua-postcode-search-modal__addr-line {
+  margin-block-start: 8px;
+}
+
+.ncua-postcode-search-modal__badge {
+  padding: 1px 4px;
+  width: 41px;
+  height: 18px;
+  border-radius: 4px;
+  color: var(--gray-600);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  text-align: center;
+  background-color: var(--gray-100);
+}
+
+.ncua-postcode-search-modal__item-road {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__item-zip {
+  flex-shrink: 0;
+  color: var(--gray-500);
+}
+
+.ncua-postcode-search-modal__item-jibun {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__tip {
+  color: var(--gray-500);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block-end: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-icon {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
+  margin: 0 0 4px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin: 0;
+  list-style: disc;
+  padding-left: 0;
+}
+
+.ncua-postcode-search-modal__tip-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 16px;
+}
+.ncua-postcode-search-modal__tip-item::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+}
+
+.ncua-postcode-search-modal__tip-combination {
+  color: var(--gray-700);
+}
+
+.ncua-postcode-search-modal__tip-example {
+  padding-left: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__tip-compact-text {
+  margin: 0;
+}
+
+.ncua-postcode-search-modal__pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl) 0;
+}
+
 /* ------------------------------------------------------------------
  * Floating Notification Host
  *
@@ -2759,9 +2945,6 @@ button {
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
@@ -2781,9 +2964,6 @@ button {
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
@@ -2803,9 +2983,6 @@ button {
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
@@ -2825,9 +3002,6 @@ button {
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2840,7 +3014,8 @@ button {
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-message-notification__hide-link.ncua-notification__action-button {
+.ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 

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

@@ -2238,6 +2238,192 @@
   }
 }
 
+.ncua-modal:has(.ncua-postcode-search-modal) {
+  padding-block-end: 0;
+  height: 640px;
+}
+@media (max-width: 768px) {
+  .ncua-modal:has(.ncua-postcode-search-modal) {
+    height: 480px;
+  }
+}
+
+.ncua-modal__content:has(.ncua-postcode-search-modal) {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 91px;
+}
+
+.ncua-postcode-search-modal {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__search {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__search-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.ncua-postcode-search-modal__search-button {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__count {
+  color: var(--gray-700);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-xs);
+}
+.ncua-postcode-search-modal__count b {
+  color: var(--primary-red-450);
+}
+
+.ncua-postcode-search-modal__list {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.ncua-postcode-search-modal__item {
+  padding: 12px 16px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field {
+  align-items: center;
+  width: 100%;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field__input + span {
+  flex: 1;
+}
+.ncua-postcode-search-modal__item + .ncua-postcode-search-modal__item {
+  margin-block-start: 8px;
+}
+.ncua-postcode-search-modal__item:hover {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--gray-50);
+}
+.ncua-postcode-search-modal__item:has(:checked) {
+  border-color: var(--gray-400);
+}
+
+.ncua-postcode-search-modal__addr-line {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  font-size: var(--font-size-xs);
+}
+.ncua-postcode-search-modal__addr-line + .ncua-postcode-search-modal__addr-line {
+  margin-block-start: 8px;
+}
+
+.ncua-postcode-search-modal__badge {
+  padding: 1px 4px;
+  width: 41px;
+  height: 18px;
+  border-radius: 4px;
+  color: var(--gray-600);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  text-align: center;
+  background-color: var(--gray-100);
+}
+
+.ncua-postcode-search-modal__item-road {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__item-zip {
+  flex-shrink: 0;
+  color: var(--gray-500);
+}
+
+.ncua-postcode-search-modal__item-jibun {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__tip {
+  color: var(--gray-500);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block-end: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-icon {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
+  margin: 0 0 4px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin: 0;
+  list-style: disc;
+  padding-left: 0;
+}
+
+.ncua-postcode-search-modal__tip-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 16px;
+}
+.ncua-postcode-search-modal__tip-item::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+}
+
+.ncua-postcode-search-modal__tip-combination {
+  color: var(--gray-700);
+}
+
+.ncua-postcode-search-modal__tip-example {
+  padding-left: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__tip-compact-text {
+  margin: 0;
+}
+
+.ncua-postcode-search-modal__pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl) 0;
+}
+
 /* ------------------------------------------------------------------
  * Floating Notification Host
  *
@@ -2751,9 +2937,6 @@
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
@@ -2773,9 +2956,6 @@
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
@@ -2795,9 +2975,6 @@
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
@@ -2817,9 +2994,6 @@
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2832,7 +3006,8 @@
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-message-notification__hide-link.ncua-notification__action-button {
+.ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 

package/package.json

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