@ncds/ui-admin 1.8.21-alpha.0 → 1.8.21-alpha.10

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

@@ -1,8 +1,25 @@
-import type { NotificationAction, NotificationColor } from './const';
+import type { LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy } from './const';
 export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
 export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
 export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string): string;
-export declare function renderActions(actions: NotificationAction[], wrapperClass: string): string;
+/**
+ * 액션 버튼의 색상 수식자를 현행 어휘로 정규화한다.
+ *
+ * 구 어휘(`'link'` / `'link-gray'`)는 Link 컴포넌트의 색상 이름을 빌려 쓴 것이라
+ * `ncua-btn--link`에 대응하는 CSS가 존재하지 않았다. 기존 CDN 사용처를 깨지 않기 위해
+ * 타입에서 제거하는 대신 이 지점에서 실제 Button 테마로 매핑한다.
+ *
+ * 렌더(`renderActions`)와 이벤트 바인딩(`bindNotificationEvents`)이 이 함수를 함께 써야
+ * `data-action` 키가 어긋나지 않는다.
+ */
+export declare function resolveActionHierarchy(hierarchy?: NotificationHierarchy | LegacyNotificationHierarchy): NotificationHierarchy;
+/**
+ * 액션 버튼 그룹 HTML을 만든다.
+ *
+ * `size` 기본값 'sm'은 floating / full-width 타입의 기존 렌더링을 그대로 보존하기 위한 것이다.
+ * message 타입만 TO-BE 규격(28px)에 맞춰 'xs'를 넘긴다 — React `<Button size="xs">`와 동일.
+ */
+export declare function renderActions(actions: NotificationAction[], wrapperClass: string, size?: NotificationActionButtonSize): string;
 export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;
 export declare function setupAutoClose(autoClose: number, onClose?: () => void, onRemove?: () => void): number | undefined;
 export declare const isMobile: () => boolean;

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/forms-and-input/input-base/InputBase.d.ts

@@ -25,7 +25,7 @@ interface InputSideCustomSlot {
     placement?: 'inside' | 'outside';
 }
 type InputLeadingSlotType = InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
-type InputTrailingSlotType = InputSideButtonSlot | InputSideIconSlot | InputSideCustomSlot;
+type InputTrailingSlotType = InputSideButtonSlot | InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
 interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     required?: boolean;
     label?: string;

package/dist/types/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.d.ts

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

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

@@ -34,6 +34,7 @@ export * from './image-and-icons/featured-icon';
 export * from './layout/block-container';
 export * from './layout/block-header';
 export * from './layout/divider';
+export * from './layout/ncua-scope';
 export * from './layout/page-title';
 export * from './navigation/bread-crumb';
 export * from './navigation/context-tab';
@@ -43,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/layout/ncua-scope/NcuaScope.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+interface NcuaScopeProps {
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * NCUA 스타일을 이 엘리먼트 하위로 한정하는 경계.
+ *
+ * 다른 디자인 시스템을 전역 적용한 사용처에서 NCUA 컴포넌트를 이걸로 감싼다.
+ * 스타일을 직접 들고 있으므로 **CSS 파일을 따로 import 하지 않는다.**
+ *
+ * ```tsx
+ * import { NcuaScope, Button } from '@ncds/ui-admin';
+ *
+ * <NcuaScope>
+ *   <Button label="신청하기" hierarchy="primary" size="md" />
+ * </NcuaScope>
+ * ```
+ *
+ * `document.body` 로 portal 되는 컴포넌트(Modal · Tooltip · Dropdown · SelectBox ·
+ * Notification)는 이 경계 밖에 놓이지만, 스코프 스타일시트가 그 루트 클래스들을 함께
+ * 지정하므로 토큰을 받는다 (`base/_scope.scss` 의 `$roots`). portal 목적지는 바뀌지
+ * 않으므로 어드민에서의 기존 동작과 같다.
+ *
+ * 어드민처럼 `style.css` 를 전역 적용하는 사용처는 이 컴포넌트가 필요 없다.
+ *
+ * 중첩해서 써도 스타일은 한 번만 들어간다. React 19 에서는 형제로 여러 개를 써도
+ * href 기준으로 중복이 제거된다. React 18 에서는 형제마다 `<style>` 이 하나씩 생기므로,
+ * 스코프가 여러 곳에 필요하면 공통 조상 한 곳에서 감싸는 편이 낫다.
+ */
+export declare const NcuaScope: import("react").ForwardRefExoticComponent<NcuaScopeProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/src/components/layout/ncua-scope/index.d.ts

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

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import { type FeaturedIconColor } from '../../image-and-icons/featured-icon/FeaturedIcon';
+import type { NotificationAction } from './Notification';
+interface MessageNotificationContentProps {
+    title: ReactNode;
+    supportingText?: ReactNode;
+    icon?: SlotIconComponent;
+    iconColor: FeaturedIconColor;
+    showIcon: boolean;
+}
+/** 아이콘 + 제목/서포팅 텍스트 영역. */
+declare const MessageNotificationContent: ({ title, supportingText, icon, iconColor, showIcon, }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
+interface MessageNotificationActionsProps {
+    actions?: NotificationAction[];
+    onClose?: () => void;
+    onHidePermanently?: () => void;
+    hidePermanentlyLabel?: ReactNode;
+    closeIconColor: string;
+}
+/**
+ * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+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

@@ -16,9 +16,10 @@ interface NotificationAction {
      */
     onClick?: () => void;
     /**
-     * 액션 버튼 색상 (3가지만 지원)
+     * 액션 버튼 색상. `ButtonTheme` 중 알림에서 허용하는 4가지만 지원한다.
+     * @default 'text'
      */
-    hierarchy?: Extract<ButtonTheme, 'text' | 'text-gray'>;
+    hierarchy?: Extract<ButtonTheme, 'secondary' | 'secondary-gray' | 'text' | 'text-gray'>;
 }
 interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
@@ -67,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__/MessageNotification.test.d.ts

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

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,45 @@
+import { type PostcodeSearchModalTipProps } from './PostcodeSearchModalTip';
+/** 검색 결과 아이템 하나. */
+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;
+}
+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: {
+        ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string; /** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
+    };
+};
+export { PostcodeSearchModal };
+export type { PostcodeSearchErrorCode, PostcodeSearchModalProps, PostcodeSearchModalTipProps, PostcodeSearchResult };

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/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/types/src/generated/scoped-css.d.ts

@@ -0,0 +1 @@
+export declare const NCUA_SCOPED_CSS: string;