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

package/dist/types/src/components/index.d.ts

@@ -44,6 +44,7 @@ export * from './navigation/vertical-tab';
 export * from './overlays/dropdown';
 export * from './overlays/modal';
 export * from './overlays/notification';
+export * from './overlays/postcode-search-modal';
 export * from './overlays/tooltip';
 export * from './select-dropdown';
 export * from './shared';

package/dist/types/src/components/overlays/postcode-search-modal/PostcodeSearchModal.d.ts

@@ -0,0 +1,49 @@
+/** 검색 결과 아이템 하나. */
+interface PostcodeSearchResult {
+    /** 우편번호(5자리) */
+    zipCode: string;
+    /** 도로명주소(도로명 + 건물번호 + 참고항목 등) */
+    roadAddress: string;
+    /** 지번주소 */
+    jibunAddress: string;
+}
+/**
+ * 컴포넌트가 표시할 수 있는 에러코드(행정안전부 도로명주소 API 기준).
+ * 기획서에 직접 적힌 코드는 E0006·E0008·E0009·E0012·E0013 이고,
+ * E0010·E0011 은 기획서의 "E0009~E0013 통합" 범위 표기에서 채운 값이다.
+ */
+type PostcodeSearchErrorCode = 'E0006' | 'E0008' | 'E0009' | 'E0010' | 'E0011' | 'E0012' | 'E0013';
+interface PostcodeSearchModalProps {
+    open: boolean;
+    onClose: () => void;
+    zIndex?: number;
+    className?: string;
+    searchQuery: string;
+    onSearchQueryChange: (value: string) => void;
+    onSearch: () => void;
+    results: PostcodeSearchResult[];
+    totalCount: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    /** 페이지당 아이템 수. 기획서 기본값 15 */
+    pageSize?: number;
+    /** 검색 API 응답을 기다리는 중인지 여부. 응답 전에 "결과 없음" 이 먼저 뜨는 것을 막는다. */
+    loading?: boolean;
+    errorCode?: PostcodeSearchErrorCode;
+    onSelect: (result: PostcodeSearchResult) => void;
+}
+interface PostcodeSearchModalTipProps {
+    /** 압축 모드 여부. 결과 30건 초과일 때 true */
+    compact?: boolean;
+    className?: string;
+}
+declare const PostcodeSearchModal: {
+    ({ open, onClose, zIndex, className, searchQuery, onSearchQueryChange, onSearch, results, totalCount, currentPage, onPageChange, pageSize, loading, errorCode, onSelect, }: PostcodeSearchModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Tip: {
+        ({ compact, className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { PostcodeSearchModal };
+export type { PostcodeSearchErrorCode, PostcodeSearchModalProps, PostcodeSearchModalTipProps, PostcodeSearchResult };

package/dist/types/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.test.d.ts

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

package/dist/types/src/components/overlays/postcode-search-modal/index.d.ts

@@ -0,0 +1 @@
+export * from './PostcodeSearchModal';

package/dist/ui-admin/assets/styles/style.css

@@ -2246,6 +2246,192 @@ button {
   }
 }
 
+.ncua-modal:has(.ncua-postcode-search-modal) {
+  padding-block-end: 0;
+  height: 640px;
+}
+@media (max-width: 768px) {
+  .ncua-modal:has(.ncua-postcode-search-modal) {
+    height: 480px;
+  }
+}
+
+.ncua-modal__content:has(.ncua-postcode-search-modal) {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 91px;
+}
+
+.ncua-postcode-search-modal {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__search {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__search-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.ncua-postcode-search-modal__search-button {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__count {
+  color: var(--gray-700);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-xs);
+}
+.ncua-postcode-search-modal__count b {
+  color: var(--primary-red-450);
+}
+
+.ncua-postcode-search-modal__list {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.ncua-postcode-search-modal__item {
+  padding: 12px 16px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field {
+  align-items: center;
+  width: 100%;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field__input + span {
+  flex: 1;
+}
+.ncua-postcode-search-modal__item + .ncua-postcode-search-modal__item {
+  margin-block-start: 8px;
+}
+.ncua-postcode-search-modal__item:hover {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--gray-50);
+}
+.ncua-postcode-search-modal__item:has(:checked) {
+  border-color: var(--gray-400);
+}
+
+.ncua-postcode-search-modal__addr-line {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  font-size: var(--font-size-xs);
+}
+.ncua-postcode-search-modal__addr-line + .ncua-postcode-search-modal__addr-line {
+  margin-block-start: 8px;
+}
+
+.ncua-postcode-search-modal__badge {
+  padding: 1px 4px;
+  width: 41px;
+  height: 18px;
+  border-radius: 4px;
+  color: var(--gray-600);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  text-align: center;
+  background-color: var(--gray-100);
+}
+
+.ncua-postcode-search-modal__item-road {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__item-zip {
+  flex-shrink: 0;
+  color: var(--gray-500);
+}
+
+.ncua-postcode-search-modal__item-jibun {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__tip {
+  color: var(--gray-500);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block-end: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-icon {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
+  margin: 0 0 4px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin: 0;
+  list-style: disc;
+  padding-left: 0;
+}
+
+.ncua-postcode-search-modal__tip-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 16px;
+}
+.ncua-postcode-search-modal__tip-item::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+}
+
+.ncua-postcode-search-modal__tip-combination {
+  color: var(--gray-700);
+}
+
+.ncua-postcode-search-modal__tip-example {
+  padding-left: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__tip-compact-text {
+  margin: 0;
+}
+
+.ncua-postcode-search-modal__pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl) 0;
+}
+
 /* ------------------------------------------------------------------
  * Floating Notification Host
  *

package/dist/ui-admin/assets/styles/style.scoped.css

@@ -2238,6 +2238,192 @@
   }
 }
 
+.ncua-modal:has(.ncua-postcode-search-modal) {
+  padding-block-end: 0;
+  height: 640px;
+}
+@media (max-width: 768px) {
+  .ncua-modal:has(.ncua-postcode-search-modal) {
+    height: 480px;
+  }
+}
+
+.ncua-modal__content:has(.ncua-postcode-search-modal) {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 91px;
+}
+
+.ncua-postcode-search-modal {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__search {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__search-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.ncua-postcode-search-modal__search-button {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__count {
+  color: var(--gray-700);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-xs);
+}
+.ncua-postcode-search-modal__count b {
+  color: var(--primary-red-450);
+}
+
+.ncua-postcode-search-modal__list {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.ncua-postcode-search-modal__item {
+  padding: 12px 16px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field {
+  align-items: center;
+  width: 100%;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field__input + span {
+  flex: 1;
+}
+.ncua-postcode-search-modal__item + .ncua-postcode-search-modal__item {
+  margin-block-start: 8px;
+}
+.ncua-postcode-search-modal__item:hover {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--gray-50);
+}
+.ncua-postcode-search-modal__item:has(:checked) {
+  border-color: var(--gray-400);
+}
+
+.ncua-postcode-search-modal__addr-line {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  font-size: var(--font-size-xs);
+}
+.ncua-postcode-search-modal__addr-line + .ncua-postcode-search-modal__addr-line {
+  margin-block-start: 8px;
+}
+
+.ncua-postcode-search-modal__badge {
+  padding: 1px 4px;
+  width: 41px;
+  height: 18px;
+  border-radius: 4px;
+  color: var(--gray-600);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  text-align: center;
+  background-color: var(--gray-100);
+}
+
+.ncua-postcode-search-modal__item-road {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__item-zip {
+  flex-shrink: 0;
+  color: var(--gray-500);
+}
+
+.ncua-postcode-search-modal__item-jibun {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__tip {
+  color: var(--gray-500);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block-end: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-icon {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
+  margin: 0 0 4px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin: 0;
+  list-style: disc;
+  padding-left: 0;
+}
+
+.ncua-postcode-search-modal__tip-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 16px;
+}
+.ncua-postcode-search-modal__tip-item::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+}
+
+.ncua-postcode-search-modal__tip-combination {
+  color: var(--gray-700);
+}
+
+.ncua-postcode-search-modal__tip-example {
+  padding-left: var(--spacing-s);
+}
+
+.ncua-postcode-search-modal__tip-compact-text {
+  margin: 0;
+}
+
+.ncua-postcode-search-modal__pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: auto;
+  padding-top: var(--spacing-m);
+}
+
+.ncua-postcode-search-modal__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl) 0;
+}
+
 /* ------------------------------------------------------------------
  * Floating Notification Host
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.21-alpha.6",
+  "version": "1.8.21-alpha.7",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",