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

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

@@ -39,26 +39,27 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     ...props
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
-  const [textCount, setTextCount] = (0, _react.useState)(0);
-  const [hasValue, setHasValue] = (0, _react.useState)(false);
-  // 값 유무는 DOM에서 읽는다 — props.value로 판정하면 uncontrolled Input에서 항상 빈 값으로 보인다.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled 값이 프로그래밍적으로 바뀔 때는 input 이벤트가 나지 않아 props.value로 재동기화해야 한다
+  // controlled 인풋은 props.value 로 길이를 알 수 있으므로 상태를 두지 않는다.
+  // 입력마다 setState 를 하면 조합 중(한글 IME)에 리렌더가 끼어들어 조합이 끊긴다.
+  const isControlled = props.value !== undefined;
+  const [uncontrolledLength, setUncontrolledLength] = (0, _react.useState)(0);
+  const valueLength = isControlled ? String(props.value ?? '').length : uncontrolledLength;
+  const hasValue = valueLength > 0;
+  const textCount = valueLength;
+  // uncontrolled 인풋만 DOM 값을 읽어 따라간다 — props.value 가 없어 길이를 알 방법이 이것뿐이다.
   (0, _react.useEffect)(() => {
+    if (isControlled) return;
     const input = inputRef.current;
     if (!input) return;
     const syncFromInput = () => {
-      const {
-        length
-      } = input.value;
-      setHasValue(length > 0);
-      setTextCount(length);
+      setUncontrolledLength(input.value.length);
     };
     syncFromInput();
     input.addEventListener('input', syncFromInput);
     return () => {
       input.removeEventListener('input', syncFromInput);
     };
-  }, [props.value]);
+  }, [isControlled]);
   const renderOutsideSlot = (slot, position) => {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
@@ -72,10 +73,15 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
           children: slot.label
         });
       case 'text':
-        return (0, _jsxRuntime.jsx)("span", {
-          className: (0, _classnames.default)(`ncua-input__${position}-text`, `ncua-input__${position}-text--${size}`),
-          children: slot.text
-        });
+        {
+          // 클래스명은 리터럴로 쓴다 — MCP 의 BEM 추출기가 `ncua-input__${position}-text` 형태의
+          // 템플릿 리터럴에서는 `ncua-input__` 조각만 읽어 완성된 클래스를 잡지 못한다.
+          const textClass = position === 'leading' ? 'ncua-input__leading-text' : 'ncua-input__trailing-text';
+          return (0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(textClass, `${textClass}--${size}`),
+            children: slot.text
+          });
+        }
       case 'custom':
         return slot.children;
       default:

package/dist/cjs/src/components/index.js

@@ -498,6 +498,17 @@ Object.keys(_notification).forEach(function (key) {
     }
   });
 });
+var _postcodeSearchModal = require("./overlays/postcode-search-modal");
+Object.keys(_postcodeSearchModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _postcodeSearchModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _postcodeSearchModal[key];
+    }
+  });
+});
 var _tooltip = require("./overlays/tooltip");
 Object.keys(_tooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,283 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+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");
+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;
+const MODAL_TITLE = '주소 찾기';
+const SEARCH_PLACEHOLDER = '도로명, 지번, 건물명 검색';
+const SEARCH_BUTTON_LABEL = '검색';
+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 통합). */
+const DEFAULT_ERROR_HINT = '검색어를 다시 입력해주세요.';
+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 {
+    zipCode,
+    roadAddress,
+    jibunAddress
+  } = _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);
+  (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;
+};
+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);
+      })
+    })]
+  });
+};
+Tip.displayName = 'PostcodeSearchModal.Tip';
+const PostcodeSearchModal = _ref4 => {
+  let {
+    open,
+    onClose,
+    zIndex,
+    className,
+    searchQuery,
+    onSearchQueryChange,
+    onSearch,
+    results,
+    totalCount,
+    currentPage,
+    onPageChange,
+    pageSize = PAGE_SIZE,
+    loading = false,
+    errorCode,
+    onSelect
+  } = _ref4;
+  const isMobile = useIsMobileViewport();
+  // 선택 표시는 컴포넌트가 직접 들고 있는다. 사용처는 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 tipVariant = resolveTipVariant(hasResults, totalCount);
+  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",
+        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
+          })]
+        }), tipVariant && (0, _jsxRuntime.jsx)(PostcodeSearchModal.Tip, {
+          compact: tipVariant === 'compact'
+        }), 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 = Tip;