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

package/dist/cjs/src/components/navigation/pagination/Pagination.js

@@ -26,7 +26,9 @@ const Pagination = _ref => {
   const [start, setStart] = (0, _react.useState)(1);
   const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
   const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
-  const showJumpPageButton = totalPage > pageCount;
+  // mo 는 CSS 가 페이지 번호 목록과 first/last 를 숨겨 prev/next 만 남는다.
+  // pc 기준(totalPage > pageCount)을 그대로 쓰면 페이지가 적을 때 이동 수단이 하나도 없다.
+  const showJumpPageButton = breakPoint === 'mo' ? totalPage > 1 : totalPage > pageCount;
   const handleClickButton = pageNum => {
     if ((0, _lodashEs.isFunction)(onPageChange)) {
       onPageChange(pageNum);

package/dist/cjs/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -15,6 +15,12 @@ const CURRENT_PAGE = 91; // 100페이지 기준 마지막 그룹(91~100)을 보
 const GROUP_START_100_PAGES = 91; // currentPage=91 일 때의 그룹 시작
 const GROUP_START_50_PAGES = 41; // totalPage=50 으로 줄었을 때의 마지막 그룹 시작
 const LAST_PAGE_50 = 50;
+/** 페이지 그룹 크기(10) 이하로 나뉘는 건수 — 3페이지 */
+const TOTAL_COUNT_3_PAGES = 30;
+/** TOTAL_COUNT_3_PAGES 기준 총 페이지 수 = 마지막 페이지 번호 */
+const LAST_PAGE_3 = 3;
+/** 페이지가 하나뿐인 건수 */
+const TOTAL_COUNT_1_PAGE = 8;
 let root = null;
 let container = null;
 function render(props) {
@@ -37,6 +43,8 @@ function render(props) {
   container = null;
 });
 const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map(b => Number(b.textContent));
+const prevOf = el => el.querySelector('.ncua-pagination__before');
+const nextOf = el => el.querySelector('.ncua-pagination__next');
 (0, _vitest.describe)('#332 Pagination — totalPage 축소 시 start 보정', () => {
   (0, _vitest.it)('totalPage 가 줄면 start 를 마지막 그룹으로 보정하고 범위 밖 페이지 버튼을 표시하지 않는다', () => {
     // 1) 100 페이지에서 91 페이지 보는 중 → 91~100 그룹 표시
@@ -59,4 +67,70 @@ const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-nu
     (0, _vitest.expect)(nums[0]).toBe(GROUP_START_50_PAGES);
     (0, _vitest.expect)(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
   });
+});
+(0, _vitest.describe)('Pagination — mo 모드 이전/다음 버튼 노출', () => {
+  (0, _vitest.it)('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {
+    // Given/When: 3페이지(그룹 크기 10 이하) 분량을 mo 로 렌더하면
+    const el = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'mo'
+    });
+    // Then: mo 는 페이지 번호 목록이 CSS 로 숨겨지므로 이전·다음 버튼이 있어야 이동할 수 있다
+    (0, _vitest.expect)(prevOf(el)).not.toBeNull();
+    (0, _vitest.expect)(nextOf(el)).not.toBeNull();
+  });
+  (0, _vitest.it)('첫 페이지에서는 이전 버튼이, 마지막 페이지에서는 다음 버튼이 비활성이다', () => {
+    // Given/When: 3페이지 중 첫 페이지를 mo 로 렌더하면
+    const first = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'mo'
+    });
+    // Then: 이전만 막히고 다음은 누를 수 있다
+    (0, _vitest.expect)(prevOf(first)?.disabled).toBe(true);
+    (0, _vitest.expect)(nextOf(first)?.disabled).toBe(false);
+    // When: 마지막 페이지로 이동하면
+    const last = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: LAST_PAGE_3,
+      breakPoint: 'mo'
+    });
+    // Then: 반대로 다음이 막힌다
+    (0, _vitest.expect)(prevOf(last)?.disabled).toBe(false);
+    (0, _vitest.expect)(nextOf(last)?.disabled).toBe(true);
+  });
+  (0, _vitest.it)('페이지가 하나뿐이면 mo 에서도 이전·다음 버튼을 내보내지 않는다', () => {
+    // Given/When: 1페이지 분량을 mo 로 렌더하면
+    const el = render({
+      totalCount: TOTAL_COUNT_1_PAGE,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'mo'
+    });
+    // Then: 이동할 곳이 없으므로 버튼도 없다
+    (0, _vitest.expect)(prevOf(el)).toBeNull();
+    (0, _vitest.expect)(nextOf(el)).toBeNull();
+  });
+  (0, _vitest.it)('pc 는 기존대로 페이지 그룹을 넘길 때만 점프 버튼을 노출한다', () => {
+    // Given/When: 3페이지 분량을 pc 로 렌더하면
+    const el = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'pc'
+    });
+    // Then: 페이지 번호로 직접 이동하므로 점프 버튼은 나오지 않는다
+    (0, _vitest.expect)(prevOf(el)).toBeNull();
+    (0, _vitest.expect)(nextOf(el)).toBeNull();
+    (0, _vitest.expect)(pageNums(el)).toHaveLength(LAST_PAGE_3);
+  });
 });

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PostcodeSearchModal = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _button = require("../../action/button");
@@ -14,15 +13,16 @@ 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;
-/** 이 건수를 넘으면 Tip 을 압축 버전으로 전환한다 (기획서 기준) */
-const TIP_COMPACT_THRESHOLD = 30;
 /** 반응형 전환 기준 — 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 = '검색';
@@ -30,7 +30,6 @@ const EMPTY_TITLE = '검색 결과가 없습니다.';
 const EMPTY_DESCRIPTION = '검색어를 다시 확인해 주세요.';
 const ROAD_BADGE_LABEL = '도로명';
 const JIBUN_BADGE_LABEL = '지번';
-const TIP_LABEL = 'Tip';
 // 라디오 그룹 이름. `ncua-` 로 시작하면 MCP 의 BEM 추출기가 CSS 클래스로 오인하므로 접두사를 뺀다.
 const RESULT_RADIO_NAME = 'postcode-search-modal-result';
 /** E0006·E0008 외 나머지 코드는 모두 같은 문구를 쓴다(기획서: E0009~E0013 통합). */
@@ -39,23 +38,6 @@ const ERROR_HINT = {
   E0006: '시도명으로는 검색이 불가합니다.',
   E0008: '검색어를 두 글자 이상 입력해주세요.'
 };
-/** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
-const TIP_TITLE = '아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.';
-/** Tip 상세 버전에 노출할 검색어 조합과 예시 주소 (기획서 TIPS.searchTips) */
-const TIP_ITEMS = [{
-  combination: '도로명 + 건물번호',
-  example: '디지털로26길 43'
-}, {
-  combination: '지역명(동·리) + 번지',
-  example: '구로동 235-3'
-}, {
-  combination: '지역명(동·리) + 건물명(아파트명)',
-  example: '구로동 대륭포스트타워8차'
-}];
-/** Tip 압축 버전 문구 — 예시 주소를 빼고 조합만 한 줄로 (기획서 TIPS.searchTipsCompact) */
-const TIP_COMPACT_TEXT = "'도로명+건물번호', '지역명+지번', '지역명+건물명(아파트명)'";
-const TIP_EXAMPLE_PREFIX = '예)';
-const TIP_ICON_SIZE = 16;
 /** 선택 표시를 판정하는 키. 우편번호만으로는 같은 건물의 다른 지번을 구분하지 못한다. */
 const resultKey = _ref => {
   let {
@@ -65,10 +47,6 @@ const resultKey = _ref => {
   } = _ref;
   return `${zipCode}|${roadAddress}|${jibunAddress}`;
 };
-const resolveTipVariant = (hasResults, totalCount) => {
-  if (!hasResults) return 'detail';
-  return totalCount > TIP_COMPACT_THRESHOLD ? 'compact' : null;
-};
 /** SSR(도큐사우루스 등)에서는 초기값을 false(=PC)로 두고 mount 이후 갱신한다. */
 const useIsMobileViewport = () => {
   const [isMobile, setIsMobile] = (0, _react.useState)(false);
@@ -84,49 +62,33 @@ const useIsMobileViewport = () => {
   }, []);
   return isMobile;
 };
-const Tip = _ref2 => {
-  let {
-    compact = false,
-    className
-  } = _ref2;
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('ncua-postcode-search-modal__tip', className),
-    children: [!compact && (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
-    }), compact ? (0, _jsxRuntime.jsx)("p", {
-      className: "ncua-postcode-search-modal__tip-compact-text",
-      children: TIP_COMPACT_TEXT
-    }) : (0, _jsxRuntime.jsx)("ul", {
-      className: "ncua-postcode-search-modal__tip-list",
-      children: TIP_ITEMS.map(_ref3 => {
-        let {
-          combination,
-          example
-        } = _ref3;
-        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);
-      })
-    })]
-  });
+/**
+ * 본문이 위로 스크롤됐는지 여부.
+ * 고정된 검색 영역과 스크롤되는 결과 사이의 경계선을 스크롤 중에만 그리기 위해 쓴다.
+ * 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;
 };
-Tip.displayName = 'PostcodeSearchModal.Tip';
-const PostcodeSearchModal = _ref4 => {
+const PostcodeSearchModal = _ref2 => {
   let {
     open,
     onClose,
@@ -143,8 +105,9 @@ const PostcodeSearchModal = _ref4 => {
     loading = false,
     errorCode,
     onSelect
-  } = _ref4;
+  } = _ref2;
   const isMobile = useIsMobileViewport();
+  const rootRef = (0, _react.useRef)(null);
   // 선택 표시는 컴포넌트가 직접 들고 있는다. 사용처는 onSelect 로 값만 받으면 된다.
   // 우편번호는 한 페이지에 중복될 수 있어 주소 전체를 키로 쓴다.
   const [selectedKey, setSelectedKey] = (0, _react.useState)();
@@ -164,7 +127,8 @@ const PostcodeSearchModal = _ref4 => {
   // 검색을 실행한 검색어와 현재 입력값이 같을 때만 "결과 없음"으로 본다.
   // 입력 중에는 두 값이 달라지고, 응답을 기다리는 동안에는 loading 이 막는다.
   const showEmptyState = !hasError && !loading && results.length === 0 && searchQuery !== '' && searchQuery === searchedQuery;
-  const tipVariant = resolveTipVariant(hasResults, totalCount);
+  // 결과 목록이 있을 때만 스크롤이 생기므로 그때만 감시한다.
+  const isContentScrolled = useIsContentScrolled(rootRef, open && hasResults);
   const handleSearchQueryChange = event => {
     onSearchQueryChange(event.target.value);
   };
@@ -191,28 +155,40 @@ const PostcodeSearchModal = _ref4 => {
     }), (0, _jsxRuntime.jsx)(_modal.Modal.Content, {
       children: (0, _jsxRuntime.jsxs)("div", {
         className: "ncua-postcode-search-modal",
+        ref: rootRef,
         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
+          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)"
+            })]
           })]
-        }), tipVariant && (0, _jsxRuntime.jsx)(PostcodeSearchModal.Tip, {
-          compact: tipVariant === 'compact'
-        }), hasResults && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), !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", {
@@ -280,4 +256,4 @@ const PostcodeSearchModal = _ref4 => {
 };
 exports.PostcodeSearchModal = PostcodeSearchModal;
 PostcodeSearchModal.displayName = 'PostcodeSearchModal';
-PostcodeSearchModal.Tip = Tip;
+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';