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

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

@@ -38,7 +38,7 @@ declare const PostcodeSearchModal: {
     displayName: string;
     Tip: {
         ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string; /** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
+        displayName: string;
     };
 };
 export { PostcodeSearchModal };

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

@@ -2257,21 +2257,20 @@ button {
   .ncua-modal:has(.ncua-postcode-search-modal) .ncua-postcode-search-modal__item .ncua-radio-input {
     display: none;
   }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__content {
+    padding-block-end: 20px;
+  }
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
   display: flex;
   flex-direction: column;
-  padding-block-end: 91px;
+  padding-block-end: 32px;
   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 {
@@ -2283,7 +2282,7 @@ button {
   flex-direction: column;
   gap: var(--spacing-s);
   background-color: var(--base-white);
-  padding-block-end: 12px;
+  padding-block-end: 20px;
 }
 .ncua-postcode-search-modal__search-area.is-fixed {
   border-block-end: 1px solid var(--gray-200);
@@ -2292,7 +2291,7 @@ button {
 .ncua-postcode-search-modal__search {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-s);
+  gap: var(--spacing-xs);
 }
 
 .ncua-postcode-search-modal__search-area .ncua-postcode-search-modal__result-title {
@@ -2322,7 +2321,8 @@ button {
 
 .ncua-postcode-search-modal__count {
   padding-inline: var(--padding-inline);
-  color: var(--gray-700);
+  margin-block-start: 12px;
+  color: var(--gray-500);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-2);
   line-height: var(--line-heights-xs);
@@ -2333,7 +2333,7 @@ button {
 
 .ncua-postcode-search-modal__list {
   padding-inline: var(--padding-inline);
-  margin-bottom: 0;
+  margin-block: var(--spacing-m) 0;
 }
 
 .ncua-postcode-search-modal__item {
@@ -2346,6 +2346,10 @@ button {
   align-items: center;
   width: 100%;
 }
+.ncua-postcode-search-modal__item .ncua-radio-field.has-text {
+  gap: 16px;
+  vertical-align: top;
+}
 .ncua-postcode-search-modal__item .ncua-radio-field__input + span {
   flex: 1;
 }
@@ -2415,6 +2419,7 @@ button {
 
 .ncua-postcode-search-modal__tip-icon {
   flex-shrink: 0;
+  color: var(--gray-400);
 }
 
 .ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
@@ -2443,19 +2448,10 @@ button {
   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__pagination {
   display: flex;
   justify-content: center;
-  margin-top: auto;
-  padding-top: var(--spacing-m);
+  margin-top: 20px;
   padding-inline: var(--padding-inline);
 }
 .ncua-postcode-search-modal__pagination .ncua-pagination--mo {
@@ -4099,8 +4095,8 @@ button {
   margin-top: 0;
 }
 .ncua-pagination__page-num {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -4152,6 +4148,7 @@ button {
   color: var(--gray-400);
 }
 .ncua-pagination--mo .ncua-pagination__current-num {
+  margin-inline-end: 5px;
   font-style: normal;
   color: var(--gray-700);
 }

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

@@ -2249,21 +2249,20 @@
   .ncua-modal:has(.ncua-postcode-search-modal) .ncua-postcode-search-modal__item .ncua-radio-input {
     display: none;
   }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__content {
+    padding-block-end: 20px;
+  }
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
   display: flex;
   flex-direction: column;
-  padding-block-end: 91px;
+  padding-block-end: 32px;
   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 {
@@ -2275,7 +2274,7 @@
   flex-direction: column;
   gap: var(--spacing-s);
   background-color: var(--base-white);
-  padding-block-end: 12px;
+  padding-block-end: 20px;
 }
 .ncua-postcode-search-modal__search-area.is-fixed {
   border-block-end: 1px solid var(--gray-200);
@@ -2284,7 +2283,7 @@
 .ncua-postcode-search-modal__search {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-s);
+  gap: var(--spacing-xs);
 }
 
 .ncua-postcode-search-modal__search-area .ncua-postcode-search-modal__result-title {
@@ -2314,7 +2313,8 @@
 
 .ncua-postcode-search-modal__count {
   padding-inline: var(--padding-inline);
-  color: var(--gray-700);
+  margin-block-start: 12px;
+  color: var(--gray-500);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-2);
   line-height: var(--line-heights-xs);
@@ -2325,7 +2325,7 @@
 
 .ncua-postcode-search-modal__list {
   padding-inline: var(--padding-inline);
-  margin-bottom: 0;
+  margin-block: var(--spacing-m) 0;
 }
 
 .ncua-postcode-search-modal__item {
@@ -2338,6 +2338,10 @@
   align-items: center;
   width: 100%;
 }
+.ncua-postcode-search-modal__item .ncua-radio-field.has-text {
+  gap: 16px;
+  vertical-align: top;
+}
 .ncua-postcode-search-modal__item .ncua-radio-field__input + span {
   flex: 1;
 }
@@ -2407,6 +2411,7 @@
 
 .ncua-postcode-search-modal__tip-icon {
   flex-shrink: 0;
+  color: var(--gray-400);
 }
 
 .ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
@@ -2435,19 +2440,10 @@
   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__pagination {
   display: flex;
   justify-content: center;
-  margin-top: auto;
-  padding-top: var(--spacing-m);
+  margin-top: 20px;
   padding-inline: var(--padding-inline);
 }
 .ncua-postcode-search-modal__pagination .ncua-pagination--mo {
@@ -4091,8 +4087,8 @@
   margin-top: 0;
 }
 .ncua-pagination__page-num {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -4144,6 +4140,7 @@
   color: var(--gray-400);
 }
 .ncua-pagination--mo .ncua-pagination__current-num {
+  margin-inline-end: 5px;
   font-style: normal;
   color: var(--gray-700);
 }

package/package.json

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