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

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

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../action/button';
+import { EmptyState } from '../../feedback-and-status/empty-state';
+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';
+/** 기획서 기준값 */
+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] = useState(false);
+  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] = useState(false);
+  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 = useRef(null);
+  // 선택 표시는 컴포넌트가 직접 들고 있는다. 사용처는 onSelect 로 값만 받으면 된다.
+  // 우편번호는 한 페이지에 중복될 수 있어 주소 전체를 키로 쓴다.
+  const [selectedKey, setSelectedKey] = useState();
+  // 검색이 실행된 검색어. 입력 중에는 갱신되지 않는다.
+  // 초기값은 마운트 시점의 searchQuery — 사용처가 검색어를 채운 채로 열면 그 검색은 이미 실행된 것으로 본다.
+  const [searchedQuery, setSearchedQuery] = useState(searchQuery);
+  // Modal 은 닫혀도 이 컴포넌트를 언마운트하지 않아 내부 상태가 다음 열기까지 남는다.
+  // 열리는 순간 이전 세션의 선택·검색 상태를 지운다.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: searchQuery 를 deps 에 넣으면 입력할 때마다 초기화된다
+  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 _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: () => {
+                  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
+          })
+        })]
+      })
+    })]
+  });
+};
+PostcodeSearchModal.displayName = 'PostcodeSearchModal';
+PostcodeSearchModal.Tip = Tip;
+export { PostcodeSearchModal };

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnnotationInfoFill } from '@ncds/ui-admin-icon';
+import classnames from 'classnames';
+const TIP_LABEL = 'Tip';
+/** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
+const 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 _jsxs("div", {
+    className: classnames('ncua-postcode-search-modal__tip', className),
+    children: [_jsxs("p", {
+      className: "ncua-postcode-search-modal__tip-label",
+      children: [_jsx(AnnotationInfoFill, {
+        className: "ncua-postcode-search-modal__tip-icon",
+        width: TIP_ICON_SIZE,
+        height: TIP_ICON_SIZE
+      }), TIP_LABEL]
+    }), _jsx("p", {
+      className: "ncua-postcode-search-modal__tip-title",
+      children: TIP_TITLE
+    }), _jsx("ul", {
+      className: "ncua-postcode-search-modal__tip-list",
+      children: TIP_ITEMS.map(_ref2 => {
+        let {
+          combination,
+          example
+        } = _ref2;
+        return _jsxs("li", {
+          className: "ncua-postcode-search-modal__tip-item",
+          children: [_jsx("span", {
+            className: "ncua-postcode-search-modal__tip-combination",
+            children: combination
+          }), _jsx("span", {
+            className: "ncua-postcode-search-modal__tip-example",
+            children: `${TIP_EXAMPLE_PREFIX} ${example}`
+          })]
+        }, combination);
+      })
+    })]
+  });
+};
+Tip.displayName = 'PostcodeSearchModal.Tip';
+export { Tip, TIP_TITLE };