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

package/dist/cjs/src/components/overlays/notification/__tests__/hidePermanentlyLabel.test.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _FullWidthNotification = require("../FullWidthNotification");
+var _MessageNotification = require("../MessageNotification");
+var _Notification = require("../Notification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const SELECTOR = {
+  /** message 타입 — 고도몰이 textContent 덮어쓰기에 쓰는 하위호환 계약 선택자. */
+  MESSAGE_HIDE_LINK: '.ncua-message-notification__hide-link',
+  /** full-width 타입 — 다시보지 않기 버튼. */
+  FULL_WIDTH_LINK: '.ncua-full-width-notification__link',
+  ACTION_BUTTON: '.ncua-notification__action-button'
+};
+/** 각 타입의 현행 기본 문구. 표기 통일은 별도 결정 사항이므로 서로 다른 값을 그대로 유지한다. */
+const DEFAULT_LABEL = {
+  MESSAGE: '다시 보지 않기',
+  FULL_WIDTH: '다시보지 않기'
+};
+const mounted = [];
+function render(element) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(element);
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+function renderMessage() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(/*#__PURE__*/(0, _react.createElement)(_MessageNotification.MessageNotification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+function renderFullWidth() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(/*#__PURE__*/(0, _react.createElement)(_FullWidthNotification.FullWidthNotification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+function renderNotification() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+});
+(0, _vitest.describe)('hidePermanentlyLabel (React) — message 타입', () => {
+  (0, _vitest.it)('R-1: prop 미지정 시 기본 문구 "다시 보지 않기"가 렌더된다', () => {
+    // Given: hidePermanentlyLabel 없이 onHidePermanently만 주어지고
+    // When: MessageNotification을 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn()
+    });
+    // Then: 현행 기본 문구가 그대로 노출된다 (시각적 변화 0)
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.textContent).toBe(DEFAULT_LABEL.MESSAGE);
+  });
+  (0, _vitest.it)('R-2: prop 지정 시 그 값이 렌더된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '30일간 보지 않기'
+    });
+    // Then: 하드코딩 문구 대신 전달한 값이 노출된다
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.textContent).toBe('30일간 보지 않기');
+  });
+  (0, _vitest.it)('R-3: ReactNode 라벨을 받아 엘리먼트로 렌더한다', () => {
+    // Given: 문자열이 아닌 ReactNode 라벨이 주어지고
+    const label = /*#__PURE__*/(0, _react.createElement)('span', {
+      className: 'custom-hide-label'
+    }, '커스텀 노드');
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: label
+    });
+    // Then: 노드가 hide-link 내부에 그대로 마운트된다
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.querySelector('.custom-hide-label')?.textContent).toBe('커스텀 노드');
+  });
+  (0, _vitest.it)('R-4: 라벨을 바꿔도 __hide-link 클래스 계약이 유지된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 고도몰의 textContent 덮어쓰기가 계속 동작하도록 기존 클래스가 모두 남는다
+    const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+    (0, _vitest.expect)(hideLink).not.toBeNull();
+    (0, _vitest.expect)(hideLink?.classList.contains('ncua-notification__action-button')).toBe(true);
+    (0, _vitest.expect)(hideLink?.classList.contains('ncua-message-notification__hide-link')).toBe(true);
+  });
+  (0, _vitest.it)('R-5: onHidePermanently 없이 라벨만 주면 버튼이 렌더되지 않는다', () => {
+    // Given: 핸들러 없이 라벨만 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 라벨만으로는 버튼이 생기지 않는다 (핸들러가 렌더 조건)
+    (0, _vitest.expect)(container.querySelector(SELECTOR.MESSAGE_HIDE_LINK)).toBeNull();
+  });
+  (0, _vitest.it)('R-6: 라벨이 DOM 속성으로 새어나가지 않는다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderMessage({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: rest 스프레드를 타고 루트 div의 속성으로 흘러들지 않는다
+    const root = container.querySelector('.ncua-message-notification');
+    (0, _vitest.expect)(root?.hasAttribute('hidepermanentlylabel')).toBe(false);
+  });
+});
+(0, _vitest.describe)('hidePermanentlyLabel (React) — full-width 타입', () => {
+  (0, _vitest.it)('R-7: prop 미지정 시 기본 문구 "다시보지 않기"가 렌더된다', () => {
+    // Given: hidePermanentlyLabel 없이 onHidePermanently만 주어지고
+    // When: FullWidthNotification을 렌더하면
+    const container = renderFullWidth({
+      onHidePermanently: _vitest.vi.fn()
+    });
+    // Then: message 타입과 다른 현행 문구가 그대로 유지된다 (표기 통일은 별도 결정)
+    const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+    (0, _vitest.expect)(hideButton?.textContent).toBe(DEFAULT_LABEL.FULL_WIDTH);
+  });
+  (0, _vitest.it)('R-8: prop 지정 시 그 값이 렌더된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderFullWidth({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '오늘 하루 보지 않기'
+    });
+    // Then: 전달한 값이 노출된다
+    const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+    (0, _vitest.expect)(hideButton?.textContent).toBe('오늘 하루 보지 않기');
+  });
+  (0, _vitest.it)('R-9: 라벨을 바꿔도 기존 클래스 계약이 유지된다', () => {
+    // Given: 커스텀 라벨이 주어지고
+    // When: 렌더하면
+    const container = renderFullWidth({
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 액션 버튼 클래스가 그대로 남는다
+    const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+    (0, _vitest.expect)(hideButton?.classList.contains('ncua-notification__action-button')).toBe(true);
+    (0, _vitest.expect)(hideButton?.classList.contains('ncua-notification__action-button--text')).toBe(true);
+  });
+  (0, _vitest.it)('R-10: onHidePermanently 없이 라벨만 주면 버튼이 렌더되지 않는다', () => {
+    // Given: 핸들러 없이 라벨만 주어지고
+    // When: 렌더하면
+    const container = renderFullWidth({
+      hidePermanentlyLabel: '커스텀'
+    });
+    // Then: 액션 버튼이 생기지 않는다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.ACTION_BUTTON)).toBeNull();
+  });
+});
+(0, _vitest.describe)('hidePermanentlyLabel (React) — Notification 공유 Props 경유', () => {
+  (0, _vitest.it)('R-11: type="message"에서 공유 Props의 라벨이 전달된다', () => {
+    // Given: 공유 Notification props로 라벨이 주어지고
+    // When: type="message"로 렌더하면
+    const container = renderNotification({
+      type: 'message',
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '공유 프롭 라벨'
+    });
+    // Then: message 구현까지 라벨이 도달한다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.MESSAGE_HIDE_LINK)?.textContent).toBe('공유 프롭 라벨');
+  });
+  (0, _vitest.it)('R-12: type="full-width"에서 공유 Props의 라벨이 전달된다', () => {
+    // Given: 공유 Notification props로 라벨이 주어지고
+    // When: type="full-width"로 렌더하면
+    const container = renderNotification({
+      type: 'full-width',
+      onHidePermanently: _vitest.vi.fn(),
+      hidePermanentlyLabel: '공유 프롭 라벨'
+    });
+    // Then: full-width 구현까지 라벨이 도달한다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.FULL_WIDTH_LINK)?.textContent).toBe('공유 프롭 라벨');
+  });
+});

package/dist/cjs/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js

@@ -0,0 +1,259 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PostcodeSearchModal = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _button = require("../../action/button");
+var _emptyState = require("../../feedback-and-status/empty-state");
+var _inputBase = require("../../forms-and-input/input-base");
+var _radio = require("../../forms-and-input/radio");
+var _pagination = require("../../navigation/pagination");
+var _modal = require("../modal");
+var _PostcodeSearchModalTip = require("./PostcodeSearchModalTip");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** 기획서 기준값 */
+const PAGE_SIZE = 15;
+/** 페이지 번호 그룹 크기 — 초과 시 Pagination 이 점프 버튼을 노출한다 */
+const PAGER_WINDOW = 10;
+/** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
+const MOBILE_BREAKPOINT = 768;
+/** 본문 스크롤 컨테이너. Modal.Content 가 overflow-y:auto 를 갖는다. */
+const SCROLL_CONTAINER_SELECTOR = '.ncua-modal__content';
+const MODAL_TITLE = '주소 찾기';
+const SEARCH_PLACEHOLDER = '도로명, 지번, 건물명 검색';
+const SEARCH_BUTTON_LABEL = '검색';
+const EMPTY_TITLE = '검색 결과가 없습니다.';
+const EMPTY_DESCRIPTION = '검색어를 다시 확인해 주세요.';
+const ROAD_BADGE_LABEL = '도로명';
+const JIBUN_BADGE_LABEL = '지번';
+// 라디오 그룹 이름. `ncua-` 로 시작하면 MCP 의 BEM 추출기가 CSS 클래스로 오인하므로 접두사를 뺀다.
+const RESULT_RADIO_NAME = 'postcode-search-modal-result';
+/** E0006·E0008 외 나머지 코드는 모두 같은 문구를 쓴다(기획서: E0009~E0013 통합). */
+const DEFAULT_ERROR_HINT = '검색어를 다시 입력해주세요.';
+const ERROR_HINT = {
+  E0006: '시도명으로는 검색이 불가합니다.',
+  E0008: '검색어를 두 글자 이상 입력해주세요.'
+};
+/** 선택 표시를 판정하는 키. 우편번호만으로는 같은 건물의 다른 지번을 구분하지 못한다. */
+const resultKey = _ref => {
+  let {
+    zipCode,
+    roadAddress,
+    jibunAddress
+  } = _ref;
+  return `${zipCode}|${roadAddress}|${jibunAddress}`;
+};
+/** SSR(도큐사우루스 등)에서는 초기값을 false(=PC)로 두고 mount 이후 갱신한다. */
+const useIsMobileViewport = () => {
+  const [isMobile, setIsMobile] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+    const sync = () => setIsMobile(mediaQuery.matches);
+    sync();
+    mediaQuery.addEventListener('change', sync);
+    return () => {
+      mediaQuery.removeEventListener('change', sync);
+    };
+  }, []);
+  return isMobile;
+};
+/**
+ * 본문이 위로 스크롤됐는지 여부.
+ * 고정된 검색 영역과 스크롤되는 결과 사이의 경계선을 스크롤 중에만 그리기 위해 쓴다.
+ * enabled 가 false 면 감시를 걸지 않고 항상 false 를 돌려준다.
+ */
+const useIsContentScrolled = (rootRef, enabled) => {
+  const [isScrolled, setIsScrolled] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!enabled) {
+      setIsScrolled(false);
+      return;
+    }
+    const scroller = rootRef.current?.closest(SCROLL_CONTAINER_SELECTOR);
+    if (!scroller) return;
+    const sync = () => setIsScrolled(scroller.scrollTop > 0);
+    // 결과가 바뀌어도 스크롤 위치는 남을 수 있어 구독 시점의 값으로 먼저 맞춘다.
+    sync();
+    scroller.addEventListener('scroll', sync, {
+      passive: true
+    });
+    return () => {
+      scroller.removeEventListener('scroll', sync);
+    };
+  }, [rootRef, enabled]);
+  return isScrolled;
+};
+const PostcodeSearchModal = _ref2 => {
+  let {
+    open,
+    onClose,
+    zIndex,
+    className,
+    searchQuery,
+    onSearchQueryChange,
+    onSearch,
+    results,
+    totalCount,
+    currentPage,
+    onPageChange,
+    pageSize = PAGE_SIZE,
+    loading = false,
+    errorCode,
+    onSelect
+  } = _ref2;
+  const isMobile = useIsMobileViewport();
+  const rootRef = (0, _react.useRef)(null);
+  // 선택 표시는 컴포넌트가 직접 들고 있는다. 사용처는 onSelect 로 값만 받으면 된다.
+  // 우편번호는 한 페이지에 중복될 수 있어 주소 전체를 키로 쓴다.
+  const [selectedKey, setSelectedKey] = (0, _react.useState)();
+  // 검색이 실행된 검색어. 입력 중에는 갱신되지 않는다.
+  // 초기값은 마운트 시점의 searchQuery — 사용처가 검색어를 채운 채로 열면 그 검색은 이미 실행된 것으로 본다.
+  const [searchedQuery, setSearchedQuery] = (0, _react.useState)(searchQuery);
+  // Modal 은 닫혀도 이 컴포넌트를 언마운트하지 않아 내부 상태가 다음 열기까지 남는다.
+  // 열리는 순간 이전 세션의 선택·검색 상태를 지운다.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: searchQuery 를 deps 에 넣으면 입력할 때마다 초기화된다
+  (0, _react.useEffect)(() => {
+    if (!open) return;
+    setSelectedKey(undefined);
+    setSearchedQuery(searchQuery);
+  }, [open]);
+  const hasError = Boolean(errorCode);
+  const hasResults = !hasError && results.length > 0;
+  // 검색을 실행한 검색어와 현재 입력값이 같을 때만 "결과 없음"으로 본다.
+  // 입력 중에는 두 값이 달라지고, 응답을 기다리는 동안에는 loading 이 막는다.
+  const showEmptyState = !hasError && !loading && results.length === 0 && searchQuery !== '' && searchQuery === searchedQuery;
+  // 결과 목록이 있을 때만 스크롤이 생기므로 그때만 감시한다.
+  const isContentScrolled = useIsContentScrolled(rootRef, open && hasResults);
+  const handleSearchQueryChange = event => {
+    onSearchQueryChange(event.target.value);
+  };
+  const handleSearch = () => {
+    setSearchedQuery(searchQuery);
+    onSearch();
+  };
+  const handleSearchKeyDown = event => {
+    // 한글 조합 중의 Enter 는 글자 확정이므로 검색으로 보지 않는다.
+    if (event.key !== 'Enter' || event.nativeEvent.isComposing) return;
+    event.preventDefault();
+    handleSearch();
+  };
+  return (0, _jsxRuntime.jsxs)(_modal.Modal, {
+    isOpen: open,
+    onClose: onClose,
+    size: "md",
+    zIndex: zIndex,
+    className: className,
+    children: [(0, _jsxRuntime.jsx)(_modal.Modal.Header, {
+      title: MODAL_TITLE,
+      onClose: onClose,
+      showDivider: true
+    }), (0, _jsxRuntime.jsx)(_modal.Modal.Content, {
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-postcode-search-modal",
+        ref: rootRef,
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)('ncua-postcode-search-modal__search-area', {
+            'is-fixed': hasResults && isContentScrolled
+          }),
+          children: [(0, _jsxRuntime.jsxs)("div", {
+            className: "ncua-postcode-search-modal__search",
+            children: [(0, _jsxRuntime.jsx)(_inputBase.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
+            }), (0, _jsxRuntime.jsx)(_button.Button, {
+              className: "ncua-postcode-search-modal__search-button",
+              label: SEARCH_BUTTON_LABEL,
+              size: "sm",
+              hierarchy: "secondary",
+              onClick: handleSearch
+            })]
+          }), hasResults && (0, _jsxRuntime.jsxs)("div", {
+            children: [(0, _jsxRuntime.jsx)("p", {
+              className: "ncua-postcode-search-modal__result-title",
+              children: _PostcodeSearchModalTip.TIP_TITLE
+            }), (0, _jsxRuntime.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 && (0, _jsxRuntime.jsx)(PostcodeSearchModal.Tip, {}), hasResults && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [(0, _jsxRuntime.jsxs)("p", {
+            className: "ncua-postcode-search-modal__count",
+            children: ["\uAC80\uC0C9 ", (0, _jsxRuntime.jsx)("b", {
+              children: totalCount
+            }), "\uAC1C"]
+          }), (0, _jsxRuntime.jsx)("ul", {
+            className: "ncua-postcode-search-modal__list",
+            children: results.map((result, index) => (0, _jsxRuntime.jsx)("li", {
+              className: "ncua-postcode-search-modal__item",
+              children: (0, _jsxRuntime.jsx)(_radio.Radio, {
+                name: RESULT_RADIO_NAME,
+                value: result.zipCode,
+                checked: selectedKey === resultKey(result),
+                onChange: () => {
+                  setSelectedKey(resultKey(result));
+                  onSelect(result);
+                },
+                text: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [(0, _jsxRuntime.jsxs)("span", {
+                    className: "ncua-postcode-search-modal__addr-line",
+                    children: [(0, _jsxRuntime.jsx)("span", {
+                      className: "ncua-postcode-search-modal__badge",
+                      children: ROAD_BADGE_LABEL
+                    }), (0, _jsxRuntime.jsx)("span", {
+                      className: "ncua-postcode-search-modal__item-road",
+                      children: result.roadAddress
+                    }), (0, _jsxRuntime.jsx)("span", {
+                      className: "ncua-postcode-search-modal__item-zip",
+                      children: result.zipCode
+                    })]
+                  }), (0, _jsxRuntime.jsxs)("span", {
+                    className: "ncua-postcode-search-modal__addr-line",
+                    children: [(0, _jsxRuntime.jsx)("span", {
+                      className: "ncua-postcode-search-modal__badge",
+                      children: JIBUN_BADGE_LABEL
+                    }), (0, _jsxRuntime.jsx)("span", {
+                      className: "ncua-postcode-search-modal__item-jibun",
+                      children: result.jibunAddress
+                    })]
+                  })]
+                })
+              })
+            }, `${result.zipCode}-${index}`))
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-postcode-search-modal__pagination",
+            children: (0, _jsxRuntime.jsx)(_pagination.Pagination, {
+              totalCount: totalCount,
+              itemCountPerPage: pageSize,
+              pageCount: PAGER_WINDOW,
+              currentPage: currentPage,
+              breakPoint: isMobile ? 'mo' : 'pc',
+              onPageChange: onPageChange
+            })
+          })]
+        }), showEmptyState && (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-postcode-search-modal__empty",
+          children: (0, _jsxRuntime.jsx)(_emptyState.EmptyState, {
+            title: EMPTY_TITLE,
+            description: EMPTY_DESCRIPTION
+          })
+        })]
+      })
+    })]
+  });
+};
+exports.PostcodeSearchModal = PostcodeSearchModal;
+PostcodeSearchModal.displayName = 'PostcodeSearchModal';
+PostcodeSearchModal.Tip = _PostcodeSearchModalTip.Tip;

package/dist/cjs/src/components/overlays/postcode-search-modal/PostcodeSearchModalTip.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tip = exports.TIP_TITLE = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TIP_LABEL = 'Tip';
+/** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
+const TIP_TITLE = exports.TIP_TITLE = '아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.';
+/** Tip 에 노출할 검색어 조합과 예시 주소 (기획서 TIPS.searchTips) */
+const TIP_ITEMS = [{
+  combination: '도로명 + 건물번호',
+  example: '디지털로26길 43'
+}, {
+  combination: '지역명(동·리) + 번지',
+  example: '구로동 235-3'
+}, {
+  combination: '지역명(동·리) + 건물명(아파트명)',
+  example: '구로동 대륭포스트타워8차'
+}];
+const TIP_EXAMPLE_PREFIX = '예)';
+const TIP_ICON_SIZE = 16;
+/**
+ * 검색어 조합을 안내하는 Tip 카드.
+ * 결과 목록이 없는 화면(초기·오류·결과 없음)에서만 노출된다.
+ * 결과가 있을 때는 모달이 안내 문구 한 줄만 검색 영역에 붙여 고정한다.
+ */
+const Tip = _ref => {
+  let {
+    className
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-postcode-search-modal__tip', className),
+    children: [(0, _jsxRuntime.jsxs)("p", {
+      className: "ncua-postcode-search-modal__tip-label",
+      children: [(0, _jsxRuntime.jsx)(_uiAdminIcon.AnnotationInfoFill, {
+        className: "ncua-postcode-search-modal__tip-icon",
+        width: TIP_ICON_SIZE,
+        height: TIP_ICON_SIZE
+      }), TIP_LABEL]
+    }), (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-postcode-search-modal__tip-title",
+      children: TIP_TITLE
+    }), (0, _jsxRuntime.jsx)("ul", {
+      className: "ncua-postcode-search-modal__tip-list",
+      children: TIP_ITEMS.map(_ref2 => {
+        let {
+          combination,
+          example
+        } = _ref2;
+        return (0, _jsxRuntime.jsxs)("li", {
+          className: "ncua-postcode-search-modal__tip-item",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-postcode-search-modal__tip-combination",
+            children: combination
+          }), (0, _jsxRuntime.jsx)("span", {
+            className: "ncua-postcode-search-modal__tip-example",
+            children: `${TIP_EXAMPLE_PREFIX} ${example}`
+          })]
+        }, combination);
+      })
+    })]
+  });
+};
+exports.Tip = Tip;
+Tip.displayName = 'PostcodeSearchModal.Tip';