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

package/dist/temp/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/temp/src/components/feedback-and-status/badge/Badge.js

@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
  */
 const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
-const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
     // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
     // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)

package/dist/temp/src/components/forms-and-input/input-base/InputBase.js

@@ -5,12 +5,18 @@ import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../../constant/color';
 import { HintText } from '../../shared/hintText/HintText';
 import { Label } from '../../shared/label/Label';
-// 슬롯 아이콘(leadingElement/trailingElement)과 상태 아이콘(clear·validation·destructive)은 같은 크기를 쓴다.
+// 슬롯 아이콘(leadingElement/trailingElement)은 인풋 크기에 맞춰 커진다.
 // slot.size 를 명시하면 그 값이 우선한다.
 const iconSvgSize = {
     xs: 14,
     sm: 20,
 };
+// 상태 아이콘(clear·validation·destructive)은 인풋 크기와 무관하게 16px 로 고정한다.
+// 슬롯 아이콘은 sm 에서 20px 로 커지므로 두 상수를 하나로 합치지 않는다.
+const statusIconSvgSize = {
+    xs: 14,
+    sm: 16,
+};
 const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, clearText, onClearText, className, ...props }, ref) => {
     const inputRef = useRef(null);
     // controlled 인풋은 props.value 로 길이를 알 수 있으므로 상태를 두지 않는다.
@@ -76,14 +82,14 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
     const renderClearButton = () => {
         if (!clearText)
             return null;
-        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: iconSvgSize[size], height: iconSvgSize[size] }) }));
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: statusIconSvgSize[size], height: statusIconSvgSize[size] }) }));
     };
     const renderStatusIcon = () => {
         if (destructive) {
-            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(InfoCircle, { className: "ncua-input__destructive-icon", width: iconSvgSize[size], height: iconSvgSize[size] }) }));
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(InfoCircle, { className: "ncua-input__destructive-icon", width: statusIconSvgSize[size], height: statusIconSvgSize[size] }) }));
         }
         if (validation) {
-            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(CheckCircle, { className: "ncua-input__validation-icon", width: iconSvgSize[size], height: iconSvgSize[size] }) }));
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(CheckCircle, { className: "ncua-input__validation-icon", width: statusIconSvgSize[size], height: statusIconSvgSize[size] }) }));
         }
         return null;
     };

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -64,11 +64,12 @@ describe('InputBase — 아이콘 사이즈', () => {
         const svg = container.querySelector(selector);
         return { width: svg?.getAttribute('width'), height: svg?.getAttribute('height') };
     };
-    // 슬롯 아이콘과 상태 아이콘은 같은 크기를 쓴다 — 과거 상태 아이콘만 sm=16으로 어긋나 있었다
+    // 슬롯 아이콘은 인풋 크기에 연동돼 sm 에서 20px 로 커지지만,
+    // 상태 아이콘(clear·validation·destructive)은 16px 로 고정한다.
     it.each([
-        ['xs', '14'],
-        ['sm', '20'],
-    ])('size=%s 일 때 슬롯 아이콘과 상태 아이콘이 모두 %spx로 렌더된다', (size, expected) => {
+        ['xs', '14', '14'],
+        ['sm', '20', '16'],
+    ])('size=%s 일 때 슬롯 아이콘은 %spx, 상태 아이콘은 %spx로 렌더된다', (size, slotExpected, statusExpected) => {
         // Given/When: 슬롯 아이콘과 clear 버튼, destructive 상태를 함께 렌더하면
         const view = mountInputBase({
             size,
@@ -77,20 +78,21 @@ describe('InputBase — 아이콘 사이즈', () => {
             onClearText: vi.fn(),
             leadingElement: { type: 'icon', icon: SearchLg },
         });
-        // Then: 슬롯·clear·destructive 아이콘의 크기가 서로 어긋나지 않는다
-        const expectedSize = { width: expected, height: expected };
-        expect(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(expectedSize);
-        expect(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(expectedSize);
-        expect(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(expectedSize);
+        // Then: 슬롯 아이콘만 인풋 크기를 따라가고, 상태 아이콘은 16px 을 넘지 않는다
+        const slotSize = { width: slotExpected, height: slotExpected };
+        const statusSize = { width: statusExpected, height: statusExpected };
+        expect(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(slotSize);
+        expect(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(statusSize);
+        expect(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(statusSize);
         view.unmount();
     });
     it.each([
         ['xs', '14'],
-        ['sm', '20'],
-    ])('size=%s 일 때 validation 아이콘도 %spx로 렌더된다', (size, expected) => {
+        ['sm', '16'],
+    ])('size=%s 일 때 validation 아이콘은 %spx로 렌더된다', (size, expected) => {
         // Given/When: validation 상태로 렌더하면
         const view = mountInputBase({ size, validation: true });
-        // Then: 다른 아이콘과 같은 크기다
+        // Then: 다른 상태 아이콘과 같은 크기다
         expect(iconSizeOf(view.container, '.ncua-input__validation-icon')).toEqual({
             width: expected,
             height: expected,

package/dist/temp/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/temp/src/components/overlays/notification/CalloutNotification.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-const CalloutNotification = forwardRef(({ color = 'neutral', className, title, ...rest }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, className), ...rest, children: title })));
+const WIDTH_CLASS = {
+    full: 'ncua-callout-notification--full',
+    fit: 'ncua-callout-notification--fit',
+};
+const CalloutNotification = forwardRef(({ color = 'neutral', className, title, width, ...rest }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, width && WIDTH_CLASS[width], className), ...rest, children: title })));
 CalloutNotification.displayName = 'CalloutNotification';
 export { CalloutNotification };

package/dist/temp/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/temp/src/components/overlays/notification/Notification.js

@@ -1,21 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CalloutNotification } from './CalloutNotification';
+import { CalloutNotification, } from './CalloutNotification';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 import { MessageNotification } from './MessageNotification';
-const Notification = forwardRef(({ type = 'floating', color = 'neutral', ...rest }, ref) => {
+const Notification = forwardRef(
+// 단일 type 에만 유효한 prop 은 rest 에서 분리해 해당 분기로만 명시 전달한다.
+// rest 에 남기면 다른 type 의 하위 컴포넌트가 div 로 스프레드해 DOM 속성으로 출력된다.
+({ type = 'floating', color = 'neutral', width, supportTextLink, ...rest }, ref) => {
     if (type === 'floating') {
         return _jsx(FloatingNotification, { color: color, ...rest, ref: ref });
     }
     if (type === 'full-width') {
-        return _jsx(FullWidthNotification, { color: color, ...rest, ref: ref });
+        return (_jsx(FullWidthNotification, { color: color, supportTextLink: supportTextLink, ...rest, ref: ref }));
     }
     if (type === 'message') {
         return _jsx(MessageNotification, { color: color, ...rest, ref: ref });
     }
     if (type === 'callout') {
-        return _jsx(CalloutNotification, { color: color, ...rest });
+        // 나머지 3개 type 이 공유하는 prop 은 callout 이 지원하지 않으므로 여기서 제외한다.
+        const { icon: _icon, supportingText: _supportingText, actions: _actions, autoClose: _autoClose, onClose: _onClose, onHidePermanently: _onHidePermanently, hidePermanentlyLabel: _hidePermanentlyLabel, portal: _portal, ...calloutProps } = rest;
+        return (_jsx(CalloutNotification, { color: color, width: width, ...calloutProps, ref: ref }));
     }
     return null;
 });

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

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

package/dist/temp/src/components/overlays/notification/__tests__/CalloutNotification.test.js

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { CalloutNotification } from '../CalloutNotification';
+import { Notification } from '../Notification';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BASE = 'ncua-callout-notification';
+let root = null;
+let container = null;
+const mount = (element) => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => {
+        root?.render(element);
+    });
+    const rendered = container.firstElementChild;
+    if (!(rendered instanceof HTMLElement))
+        throw new Error('callout 이 렌더되지 않았다');
+    return rendered;
+};
+const renderCallout = (props = {}) => mount(createElement(CalloutNotification, { title: '안내 문구', ...props }));
+const renderNotification = (props = {}) => mount(createElement(Notification, { type: 'callout', title: '안내 문구', ...props }));
+afterEach(() => {
+    act(() => {
+        root?.unmount();
+    });
+    container?.remove();
+    root = null;
+    container = null;
+});
+describe('CalloutNotification — width prop', () => {
+    it('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
+        const element = renderCallout();
+        expect(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+        expect(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+    });
+    it("width='full' 은 --full modifier 를 붙인다", () => {
+        const element = renderCallout({ width: 'full' });
+        expect(element.classList.contains('ncua-callout-notification--full')).toBe(true);
+        expect(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+    });
+    it("width='fit' 은 --fit modifier 를 붙인다", () => {
+        const element = renderCallout({ width: 'fit' });
+        expect(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+        expect(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+    });
+    it('width 는 DOM 속성으로 새지 않는다', () => {
+        const element = renderCallout({ width: 'fit' });
+        expect(element.hasAttribute('width')).toBe(false);
+    });
+    it('width 는 베이스/컬러 클래스와 외부 className 을 유지한 채 추가된다', () => {
+        const element = renderCallout({ width: 'fit', color: 'info', className: 'custom' });
+        expect(element.classList.contains(BASE)).toBe(true);
+        expect(element.classList.contains(`${BASE}--info`)).toBe(true);
+        expect(element.classList.contains('custom')).toBe(true);
+    });
+});
+describe('Notification type="callout" — 위임 계약', () => {
+    it('width 를 CalloutNotification 으로 전달한다', () => {
+        const element = renderNotification({ width: 'fit' });
+        expect(element.classList.contains(BASE)).toBe(true);
+        expect(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+    });
+    // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
+    it('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+        const element = renderNotification({
+            icon: () => null,
+            supportingText: '보조 문구',
+            supportTextLink: 'https://example.com',
+            actions: [{ label: '확인', onClick: () => undefined }],
+            autoClose: 3000,
+            portal: true,
+            onClose: () => undefined,
+            onHidePermanently: () => undefined,
+            hidePermanentlyLabel: '다시 보지 않기',
+        });
+        for (const attr of [
+            'icon',
+            'supportingtext',
+            'supporttextlink',
+            'actions',
+            'autoclose',
+            'portal',
+            'onclose',
+            'onhidepermanently',
+            'hidepermanentlylabel',
+        ]) {
+            expect(element.hasAttribute(attr), attr).toBe(false);
+        }
+        expect(element.textContent).toBe('안내 문구');
+    });
+    it('ref 를 callout 루트 엘리먼트로 전달한다', () => {
+        let captured = null;
+        mount(createElement(Notification, {
+            type: 'callout',
+            title: '안내 문구',
+            ref: (node) => {
+                captured = node;
+            },
+        }));
+        expect(captured).not.toBeNull();
+        expect(captured.classList.contains(BASE)).toBe(true);
+    });
+});

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

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

package/dist/temp/src/components/overlays/notification/__tests__/Notification.test.js

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { Notification } from '../Notification';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+beforeAll(() => {
+    // jsdom 미구현 API 보정 — FloatingNotification 의 모바일 리스너가 window.matchMedia 를 호출한다.
+    if (typeof window.matchMedia !== 'function') {
+        const stub = (query) => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addEventListener: () => undefined,
+            removeEventListener: () => undefined,
+            addListener: () => undefined,
+            removeListener: () => undefined,
+            dispatchEvent: () => false,
+        });
+        window.matchMedia = stub;
+    }
+});
+// 정의되지 않은 type 의 런타임 동작까지 고정하므로 props 를 넓게 받는다.
+const render = (props) => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => {
+        root?.render(createElement(Notification, { title: '안내 문구', ...props }));
+    });
+    const rendered = container.firstElementChild;
+    return rendered instanceof HTMLElement ? rendered : null;
+};
+afterEach(() => {
+    act(() => {
+        root?.unmount();
+    });
+    container?.remove();
+    root = null;
+    container = null;
+});
+describe('Notification — type 별 위임', () => {
+    it.each([
+        ['floating', 'ncua-floating-notification'],
+        ['full-width', 'ncua-full-width-notification'],
+        ['message', 'ncua-message-notification'],
+        ['callout', 'ncua-callout-notification'],
+    ])('type=%s 는 %s 를 렌더한다', (type, baseClass) => {
+        const element = render({ type });
+        expect(element?.classList.contains(baseClass)).toBe(true);
+    });
+    it('type 미지정은 floating 으로 렌더한다', () => {
+        const element = render({});
+        expect(element?.classList.contains('ncua-floating-notification')).toBe(true);
+    });
+    it.each(['floating', 'full-width', 'message'])('type=%s 에 callout 전용 width 를 주어도 DOM 속성으로 새지 않는다', (type) => {
+        const element = render({ type, width: 'fit' });
+        expect(element?.hasAttribute('width')).toBe(false);
+    });
+    it.each(['floating', 'message'])('type=%s 에 full-width 전용 supportTextLink 를 주어도 DOM 속성으로 새지 않는다', (type) => {
+        const element = render({ type, supportingText: '보조', supportTextLink: 'https://example.com' });
+        expect(element?.hasAttribute('supporttextlink')).toBe(false);
+    });
+    it('정의되지 않은 type 은 아무것도 렌더하지 않는다', () => {
+        const element = render({ type: 'banner' });
+        expect(element).toBeNull();
+    });
+});

package/dist/temp/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/temp/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js

@@ -7,11 +7,13 @@ import { InputBase } from '../../forms-and-input/input-base';
 import { Radio } from '../../forms-and-input/radio';
 import { Pagination } from '../../navigation/pagination';
 import { Modal } from '../modal';
-import { TIP_TITLE, Tip } from './PostcodeSearchModalTip';
+import { Tip } from './PostcodeSearchModalTip';
 /** 기획서 기준값 */
 const PAGE_SIZE = 15;
 /** 페이지 번호 그룹 크기 — 초과 시 Pagination 이 점프 버튼을 노출한다 */
 const PAGER_WINDOW = 10;
+/** 검색 조합 안내 문구를 띄우는 기준 — 결과가 이 수를 넘을 때만 노출한다 */
+const SEARCH_HINT_MIN_TOTAL_COUNT = 30;
 /** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
 const MOBILE_BREAKPOINT = 768;
 /** 본문 스크롤 컨테이너. Modal.Content 가 overflow-y:auto 를 갖는다. */
@@ -94,6 +96,8 @@ const PostcodeSearchModal = ({ open, onClose, zIndex, className, searchQuery, on
     }, [open]);
     const hasError = Boolean(errorCode);
     const hasResults = !hasError && results.length > 0;
+    // 결과가 적으면 굳이 검색 조합을 안내하지 않는다.
+    const showSearchHint = hasResults && totalCount > SEARCH_HINT_MIN_TOTAL_COUNT;
     // 검색을 실행한 검색어와 현재 입력값이 같을 때만 "결과 없음"으로 본다.
     // 입력 중에는 두 값이 달라지고, 응답을 기다리는 동안에는 loading 이 막는다.
     const showEmptyState = !hasError && !loading && results.length === 0 && searchQuery !== '' && searchQuery === searchedQuery;
@@ -115,7 +119,7 @@ const PostcodeSearchModal = ({ open, onClose, zIndex, className, searchQuery, on
     };
     return (_jsxs(Modal, { isOpen: open, onClose: onClose, size: "md", zIndex: zIndex, className: className, children: [_jsx(Modal.Header, { title: MODAL_TITLE, onClose: onClose, showDivider: true }), _jsx(Modal.Content, { children: _jsxs("div", { className: "ncua-postcode-search-modal", ref: rootRef, children: [_jsxs("div", { className: classnames('ncua-postcode-search-modal__search-area', {
                                 'is-fixed': hasResults && isContentScrolled,
-                            }), children: [_jsxs("div", { className: "ncua-postcode-search-modal__search", children: [_jsx(InputBase, { className: "ncua-postcode-search-modal__search-input", size: "sm", fullWidth: true, value: searchQuery, onChange: handleSearchQueryChange, onKeyDown: handleSearchKeyDown, placeholder: SEARCH_PLACEHOLDER, destructive: hasError, hintText: errorCode ? (ERROR_HINT[errorCode] ?? DEFAULT_ERROR_HINT) : undefined }), _jsx(Button, { className: "ncua-postcode-search-modal__search-button", label: SEARCH_BUTTON_LABEL, size: "sm", hierarchy: "secondary", onClick: handleSearch })] }), hasResults && (_jsxs("div", { children: [_jsx("p", { className: "ncua-postcode-search-modal__result-title", children: TIP_TITLE }), _jsx("p", { className: "ncua-postcode-search-modal__result-desc", children: "\uB3C4\uB85C\uBA85+\uAC74\uBB3C\uBC88\uD638, \uC9C0\uC5ED\uBA85+\uC9C0\uBC88, \uC9C0\uC5ED\uBA85+\uAC74\uBB3C\uBA85(\uC544\uD30C\uD2B8\uBA85)" })] }))] }), !hasResults && _jsx(PostcodeSearchModal.Tip, {}), hasResults && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "ncua-postcode-search-modal__count", children: ["\uAC80\uC0C9 ", _jsx("b", { children: totalCount }), "\uAC1C"] }), _jsx("ul", { className: "ncua-postcode-search-modal__list", children: results.map((result, index) => (_jsx("li", { className: "ncua-postcode-search-modal__item", children: _jsx(Radio, { name: RESULT_RADIO_NAME, value: result.zipCode, checked: selectedKey === resultKey(result), onChange: () => {
+                            }), children: [_jsxs("div", { className: "ncua-postcode-search-modal__search", children: [_jsx(InputBase, { className: "ncua-postcode-search-modal__search-input", size: "sm", fullWidth: true, value: searchQuery, clearText: !!searchQuery, onClearText: () => onSearchQueryChange(''), onChange: handleSearchQueryChange, onKeyDown: handleSearchKeyDown, placeholder: SEARCH_PLACEHOLDER, destructive: hasError, hintText: errorCode ? (ERROR_HINT[errorCode] ?? DEFAULT_ERROR_HINT) : undefined }), _jsx(Button, { className: "ncua-postcode-search-modal__search-button", label: SEARCH_BUTTON_LABEL, size: "sm", hierarchy: "secondary", onClick: handleSearch })] }), showSearchHint && (_jsxs("div", { children: [_jsx("p", { className: "ncua-postcode-search-modal__result-title", children: "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9 \uC2DC \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694." }), _jsx("p", { className: "ncua-postcode-search-modal__result-desc", children: "\uB3C4\uB85C\uBA85+\uAC74\uBB3C\uBC88\uD638, \uC9C0\uC5ED\uBA85+\uC9C0\uBC88, \uC9C0\uC5ED\uBA85+\uAC74\uBB3C\uBA85(\uC544\uD30C\uD2B8\uBA85)" })] }))] }), !hasResults && _jsx(PostcodeSearchModal.Tip, {}), hasResults && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "ncua-postcode-search-modal__count", children: ["\uAC80\uC0C9 ", _jsx("b", { children: totalCount }), "\uAC1C"] }), _jsx("ul", { className: "ncua-postcode-search-modal__list", children: results.map((result, index) => (_jsx("li", { className: "ncua-postcode-search-modal__item", children: _jsx(Radio, { name: RESULT_RADIO_NAME, value: result.zipCode, checked: selectedKey === resultKey(result), onChange: () => {
                                                 setSelectedKey(resultKey(result));
                                                 onSelect(result);
                                             }, text: _jsxs(_Fragment, { children: [_jsxs("span", { className: "ncua-postcode-search-modal__addr-line", children: [_jsx("span", { className: "ncua-postcode-search-modal__badge", children: ROAD_BADGE_LABEL }), _jsx("span", { className: "ncua-postcode-search-modal__item-road", children: result.roadAddress }), _jsx("span", { className: "ncua-postcode-search-modal__item-zip", children: result.zipCode })] }), _jsxs("span", { className: "ncua-postcode-search-modal__addr-line", children: [_jsx("span", { className: "ncua-postcode-search-modal__badge", children: JIBUN_BADGE_LABEL }), _jsx("span", { className: "ncua-postcode-search-modal__item-jibun", children: result.jibunAddress })] })] }) }) }, `${result.zipCode}-${index}`))) }), _jsx("div", { className: "ncua-postcode-search-modal__pagination", children: _jsx(Pagination, { totalCount: totalCount, itemCountPerPage: pageSize, pageCount: PAGER_WINDOW, currentPage: currentPage, breakPoint: isMobile ? 'mo' : 'pc', onPageChange: onPageChange }) })] })), showEmptyState && (_jsx("div", { className: "ncua-postcode-search-modal__empty", children: _jsx(EmptyState, { title: EMPTY_TITLE, description: EMPTY_DESCRIPTION }) }))] }) })] }));

package/dist/temp/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.test.js

@@ -250,7 +250,7 @@ describe('PostcodeSearchModal — Case 7: 결과 여러 페이지', () => {
         expect(countLabelOf(el)?.textContent).toBe(`검색 ${LARGE_RESULT_COUNT}개`);
         expect(itemsOf(el)).toHaveLength(PAGE_SIZE);
         expect(tipOf(el)).toBeNull();
-        expect(resultTitleOf(el)?.textContent).toBe('아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.');
+        expect(resultTitleOf(el)?.textContent).toBe('아래 조합으로 검색 시 주소를 더 쉽게 찾을 수 있어요.');
         expect(resultDescOf(el)?.textContent).toBe('도로명+건물번호, 지역명+지번, 지역명+건물명(아파트명)');
     });
     it('검색 인풋과 안내 문구가 같은 고정 영역 안에 묶이고 결과 목록은 그 밖에 있다', () => {