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

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

@@ -1,3 +1,4 @@
+import { type PostcodeSearchModalTipProps } from './PostcodeSearchModalTip';
 /** 검색 결과 아이템 하나. */
 interface PostcodeSearchResult {
     /** 우편번호(5자리) */
@@ -32,17 +33,12 @@ interface PostcodeSearchModalProps {
     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;
+        ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string; /** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
     };
 };
 export { PostcodeSearchModal };

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

@@ -0,0 +1,16 @@
+interface PostcodeSearchModalTipProps {
+    className?: string;
+}
+/** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
+declare const TIP_TITLE = "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9\uD558\uBA74 \uC6D0\uD558\uB294 \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694.";
+/**
+ * 검색어 조합을 안내하는 Tip 카드.
+ * 결과 목록이 없는 화면(초기·오류·결과 없음)에서만 노출된다.
+ * 결과가 있을 때는 모달이 안내 문구 한 줄만 검색 영역에 붙여 고정한다.
+ */
+declare const Tip: {
+    ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Tip, TIP_TITLE };
+export type { PostcodeSearchModalTipProps };

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

@@ -2254,27 +2254,63 @@ button {
   .ncua-modal:has(.ncua-postcode-search-modal) {
     height: 480px;
   }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-postcode-search-modal__item .ncua-radio-input {
+    display: none;
+  }
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
   display: flex;
   flex-direction: column;
   padding-block-end: 91px;
+  padding-inline: 0;
 }
 
 .ncua-postcode-search-modal {
+  --padding-inline: 20px;
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--spacing-m);
 }
 
+.ncua-postcode-search-modal__search-area {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-inline: var(--padding-inline);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  background-color: var(--base-white);
+  padding-block-end: 12px;
+}
+.ncua-postcode-search-modal__search-area.is-fixed {
+  border-block-end: 1px solid var(--gray-200);
+}
+
 .ncua-postcode-search-modal__search {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-s);
 }
 
+.ncua-postcode-search-modal__search-area .ncua-postcode-search-modal__result-title {
+  margin: 0 0 2px;
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+}
+
+.ncua-postcode-search-modal__result-desc {
+  margin: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xxs);
+}
+
 .ncua-postcode-search-modal__search-input {
   flex: 1;
   min-width: 0;
@@ -2285,6 +2321,7 @@ button {
 }
 
 .ncua-postcode-search-modal__count {
+  padding-inline: var(--padding-inline);
   color: var(--gray-700);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-2);
@@ -2295,7 +2332,7 @@ button {
 }
 
 .ncua-postcode-search-modal__list {
-  padding-left: 0;
+  padding-inline: var(--padding-inline);
   margin-bottom: 0;
 }
 
@@ -2361,6 +2398,7 @@ button {
 }
 
 .ncua-postcode-search-modal__tip {
+  padding-inline: var(--padding-inline);
   color: var(--gray-500);
   font-size: var(--font-size-xxs);
   line-height: var(--line-heights-xxs);
@@ -2413,15 +2451,15 @@ button {
   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);
+  padding-inline: var(--padding-inline);
+}
+.ncua-postcode-search-modal__pagination .ncua-pagination--mo {
+  flex: 1;
 }
 
 .ncua-postcode-search-modal__empty {

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

@@ -2246,27 +2246,63 @@
   .ncua-modal:has(.ncua-postcode-search-modal) {
     height: 480px;
   }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-postcode-search-modal__item .ncua-radio-input {
+    display: none;
+  }
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
   display: flex;
   flex-direction: column;
   padding-block-end: 91px;
+  padding-inline: 0;
 }
 
 .ncua-postcode-search-modal {
+  --padding-inline: 20px;
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--spacing-m);
 }
 
+.ncua-postcode-search-modal__search-area {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-inline: var(--padding-inline);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  background-color: var(--base-white);
+  padding-block-end: 12px;
+}
+.ncua-postcode-search-modal__search-area.is-fixed {
+  border-block-end: 1px solid var(--gray-200);
+}
+
 .ncua-postcode-search-modal__search {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-s);
 }
 
+.ncua-postcode-search-modal__search-area .ncua-postcode-search-modal__result-title {
+  margin: 0 0 2px;
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+}
+
+.ncua-postcode-search-modal__result-desc {
+  margin: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xxs);
+}
+
 .ncua-postcode-search-modal__search-input {
   flex: 1;
   min-width: 0;
@@ -2277,6 +2313,7 @@
 }
 
 .ncua-postcode-search-modal__count {
+  padding-inline: var(--padding-inline);
   color: var(--gray-700);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-2);
@@ -2287,7 +2324,7 @@
 }
 
 .ncua-postcode-search-modal__list {
-  padding-left: 0;
+  padding-inline: var(--padding-inline);
   margin-bottom: 0;
 }
 
@@ -2353,6 +2390,7 @@
 }
 
 .ncua-postcode-search-modal__tip {
+  padding-inline: var(--padding-inline);
   color: var(--gray-500);
   font-size: var(--font-size-xxs);
   line-height: var(--line-heights-xxs);
@@ -2405,15 +2443,15 @@
   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);
+  padding-inline: var(--padding-inline);
+}
+.ncua-postcode-search-modal__pagination .ncua-pagination--mo {
+  flex: 1;
 }
 
 .ncua-postcode-search-modal__empty {

package/package.json

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