@ncds/ui-admin 1.8.2 → 1.8.3

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

@@ -1219,6 +1219,7 @@ button {
 }
 
 .ncua-dropdown {
+  --ncua-dropdown-item-height: 36px;
   position: relative;
   display: inline-block;
 }
@@ -1333,6 +1334,9 @@ button {
   display: flex;
   flex-direction: column;
   width: 100%;
+  /* 36px × 7.5 = 270px + padding 4px = 274px */
+  max-height: calc(var(--ncua-dropdown-item-height) * 7.5 + 4px);
+  overflow-y: auto;
 }
 .ncua-dropdown__group {
   padding: 4px 0;
@@ -1346,18 +1350,17 @@ button {
   padding: 2px 6px;
   width: 100%;
   position: relative;
-}
-.ncua-dropdown__item-clickable-layer {
-  position: absolute;
-  top: 2px;
-  left: 6px;
-  right: 6px;
-  bottom: 2px;
-  border-radius: 6px;
-  background: transparent;
-  z-index: 1;
+  /* button reset (action variant uses native button) */
+  background: none;
+  border: none;
+  text-align: inherit;
+  font: inherit;
+  color: inherit;
+  display: flex;
+  align-items: center;
 }
 .ncua-dropdown__item-content {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1365,14 +1368,35 @@ button {
   padding: 7px 10px;
   border-radius: 6px;
 }
-.ncua-dropdown__item:hover .ncua-dropdown__item-content {
+.ncua-dropdown__item {
+  /* action variant: hover 시 안쪽 content가 회색 pill (기본 동작) */
+}
+.ncua-dropdown__item:not(.ncua-dropdown__item--config):hover .ncua-dropdown__item-content {
+  background-color: var(--gray-50);
+}
+.ncua-dropdown__item {
+  /* config variant: 외부 2px/6px를 margin으로 두어 hover 배경이 안쪽 pill에만 그려짐 */
+}
+.ncua-dropdown__item--config {
+  padding: 0;
+  margin: 2px 6px;
+  width: auto;
+  border-radius: 6px;
+}
+.ncua-dropdown__item--config:hover {
   background-color: var(--gray-50);
 }
+.ncua-dropdown__item {
+  /* config variant: drag handle 우측 패딩 제거에 맞춰 content 좌측 패딩을 4px로 축소 */
+}
+.ncua-dropdown__item--config .ncua-dropdown__item-content {
+  padding: 7px 10px 7px 4px;
+}
 .ncua-dropdown__item-text-group {
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   color: var(--gray-500);
 }
 .ncua-dropdown__item-icon {
@@ -1390,6 +1414,48 @@ button {
   color: var(--gray-400);
   line-height: var(--line-heights-xs);
 }
+.ncua-dropdown__item-drag-handle {
+  background: none;
+  border: none;
+  padding: 0 0 0 4px;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-300);
+}
+.ncua-dropdown__item-drag-handle svg {
+  width: 16px;
+  height: 16px;
+}
+.ncua-dropdown__item-drag-handle:active {
+  cursor: grabbing;
+}
+.ncua-dropdown__item-drag-handle:hover {
+  color: var(--gray-600);
+}
+.ncua-dropdown__item-visibility {
+  background: none;
+  border: none;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin-right: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-500);
+  border-radius: 4px;
+}
+.ncua-dropdown__item-visibility svg {
+  width: 16px;
+  height: 16px;
+}
+.ncua-dropdown__item-visibility:hover {
+  color: var(--gray-700);
+  background-color: var(--gray-100);
+}
 .ncua-dropdown__item.is-disabled {
   pointer-events: none;
   cursor: default;
@@ -1407,6 +1473,54 @@ button {
 .ncua-dropdown__item.is-danger svg {
   color: var(--primary-red-700);
 }
+.ncua-dropdown__item {
+  /* hidden state: draft.visibility[id] === false (사용자가 EyeOff로 토글한 row) */
+}
+.ncua-dropdown__item.is-hidden .ncua-dropdown__item-text,
+.ncua-dropdown__item.is-hidden .ncua-dropdown__item-visibility {
+  color: var(--gray-300);
+}
+.ncua-dropdown__item {
+  /* 드래그 중 원본 항목: 비어보이도록 흐리게 */
+}
+.ncua-dropdown__item.is-dragging {
+  opacity: 0.4;
+}
+.ncua-dropdown__item {
+  /* 커스텀 drag preview: 들어올린 듯한 그림자 + 둥근 모서리 + 흰 배경 */
+}
+.ncua-dropdown__item--drag-preview {
+  background-color: var(--base-white);
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+  pointer-events: none;
+}
+.ncua-dropdown__item {
+  /* 드롭 위치 indicator 라인 — boundary에 정확히 센터링하여 top/bottom edge 전환 시 점프 방지 */
+}
+.ncua-dropdown__item-drop-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--gray-600);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 2;
+  /* 정수 픽셀 위치로 인접 item 간 line이 동일한 픽셀 행에 그려짐 (점프 + sub-pixel blur 방지) */
+}
+.ncua-dropdown__item-drop-indicator--top {
+  top: 0;
+}
+.ncua-dropdown__item-drop-indicator--bottom {
+  bottom: -1px;
+}
+.ncua-dropdown__footer {
+  padding: 8px 12px;
+  border-top: 1px solid var(--gray-100);
+  display: flex;
+  justify-content: flex-end;
+}
 
 .ncua-hint-text {
   color: var(--gray-400);
@@ -3065,7 +3179,7 @@ button {
   padding-right: 36px;
 }
 .ncua-tooltip--short .ncua-tooltip__bg {
-  white-space: nowrap;
+  white-space: normal;
 }
 
 .ncua-tooltip-global-layer {
@@ -7011,24 +7125,16 @@ span.flatpickr-weekday {
   }
 }
 /**
- * Swiper 11.2.10
+ * Swiper 12.1.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2025 Vladimir Kharlampidi
+ * Copyright 2014-2026 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 28, 2025
+ * Released on: March 24, 2026
  */
-/* FONT_START */
-@font-face {
-  font-family: "swiper-icons";
-  src: url("data:application/font-woff;charset=utf-8;base64, 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");
-  font-weight: 400;
-  font-style: normal;
-}
-/* FONT_END */
 :root {
   --swiper-theme-color: #007aff;
   /*
@@ -7112,7 +7218,6 @@ span.flatpickr-weekday {
 
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 
@@ -7127,116 +7232,126 @@ span.flatpickr-weekday {
 
 .swiper-3d {
   perspective: 1200px;
-}
-
-.swiper-3d .swiper-slide,
-.swiper-3d .swiper-cube-shadow {
-  transform-style: preserve-3d;
+  .swiper-slide,
+  .swiper-cube-shadow {
+    transform-style: preserve-3d;
+  }
 }
 
 /* CSS Mode */
-.swiper-css-mode > .swiper-wrapper {
-  overflow: auto;
-  scrollbar-width: none;
-  /* For Firefox */
-  -ms-overflow-style: none;
-  /* For Internet Explorer and Edge */
-}
-
-.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.swiper-css-mode > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: start start;
-}
-
-.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
-  scroll-snap-type: x mandatory;
-}
-
-.swiper-css-mode.swiper-vertical > .swiper-wrapper {
-  scroll-snap-type: y mandatory;
-}
-
-.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
-  scroll-snap-type: none;
-}
-
-.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: none;
-}
-
-.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
-  content: "";
-  flex-shrink: 0;
-  order: 9999;
-}
-
-.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: center center;
-  scroll-snap-stop: always;
-}
-
-.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
-  margin-inline-start: var(--swiper-centered-offset-before);
-}
-
-.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
-  height: 100%;
-  min-height: 1px;
-  width: var(--swiper-centered-offset-after);
-}
-
-.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
-  margin-block-start: var(--swiper-centered-offset-before);
-}
-
-.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
-  width: 100%;
-  min-width: 1px;
-  height: var(--swiper-centered-offset-after);
+.swiper-css-mode {
+  > .swiper-wrapper {
+    overflow: auto;
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none; /* For Internet Explorer and Edge */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: start start;
+  }
+  &.swiper-horizontal {
+    > .swiper-wrapper {
+      scroll-snap-type: x mandatory;
+    }
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-slides-offset-before);
+      scroll-margin-inline-start: var(--swiper-slides-offset-before);
+    }
+    > .swiper-wrapper > .swiper-slide:last-child {
+      margin-inline-end: var(--swiper-slides-offset-after);
+    }
+  }
+  &.swiper-vertical {
+    > .swiper-wrapper {
+      scroll-snap-type: y mandatory;
+    }
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-slides-offset-before);
+      scroll-margin-block-start: var(--swiper-slides-offset-before);
+    }
+    > .swiper-wrapper > .swiper-slide:last-child {
+      margin-block-end: var(--swiper-slides-offset-after);
+    }
+  }
+  &.swiper-free-mode {
+    > .swiper-wrapper {
+      scroll-snap-type: none;
+    }
+    > .swiper-wrapper > .swiper-slide {
+      scroll-snap-align: none;
+    }
+  }
+  &.swiper-centered {
+    > .swiper-wrapper::before {
+      content: "";
+      flex-shrink: 0;
+      order: 9999;
+    }
+    > .swiper-wrapper > .swiper-slide {
+      scroll-snap-align: center center;
+      scroll-snap-stop: always;
+    }
+  }
+  &.swiper-centered.swiper-horizontal {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      height: 100%;
+      min-height: 1px;
+      width: var(--swiper-centered-offset-after);
+    }
+  }
+  &.swiper-centered.swiper-vertical {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      width: 100%;
+      min-width: 1px;
+      height: var(--swiper-centered-offset-after);
+    }
+  }
 }
 
 /* Slide styles start */
 /* 3D Shadows */
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom,
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.swiper-3d .swiper-slide-shadow {
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.swiper-3d .swiper-slide-shadow-left {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-right {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-top {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-bottom {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+.swiper-3d {
+  .swiper-slide-shadow,
+  .swiper-slide-shadow-left,
+  .swiper-slide-shadow-right,
+  .swiper-slide-shadow-top,
+  .swiper-slide-shadow-bottom,
+  .swiper-slide-shadow,
+  .swiper-slide-shadow-left,
+  .swiper-slide-shadow-right,
+  .swiper-slide-shadow-top,
+  .swiper-slide-shadow-bottom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .swiper-slide-shadow {
+    background: rgba(0, 0, 0, 0.15);
+  }
+  .swiper-slide-shadow-left {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+  .swiper-slide-shadow-right {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+  .swiper-slide-shadow-top {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+  .swiper-slide-shadow-bottom {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
 }
 
 .swiper-lazy-preloader {
@@ -7255,9 +7370,11 @@ span.flatpickr-weekday {
   border-top-color: transparent;
 }
 
-.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
-.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
-  animation: swiper-preloader-spin 1s infinite linear;
+.swiper:not(.swiper-watch-progress),
+.swiper-watch-progress .swiper-slide-visible {
+  .swiper-lazy-preloader {
+    animation: swiper-preloader-spin 1s infinite linear;
+  }
 }
 
 .swiper-lazy-preloader-white {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -66,14 +66,19 @@
   },
   "private": false,
   "dependencies": {
-    "@ncds/ui-admin-icon": "0.1.6",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
+    "@ncds/ui-admin-icon": "0.1.9",
     "classnames": "2.5.1",
+    "dompurify": "3.4.1",
     "flatpickr": "4.6.13",
-    "lodash": "4.17.23",
-    "lodash-es": "4.17.23",
+    "lodash": "4.18.1",
+    "lodash-es": "4.18.1",
     "moment": "2.30.1",
     "react-flatpickr": "4.0.11",
-    "swiper": "11.2.10"
+    "swiper": "12.1.3"
   },
   "devDependencies": {
     "@babel/cli": "7.28.6",
@@ -95,7 +100,7 @@
     "css-loader": "6.11.0",
     "css-minimizer-webpack-plugin": "7.0.4",
     "dotenv-webpack": "8.1.1",
-    "esbuild-loader": "3.2.0",
+    "esbuild-loader": "4.4.3",
     "eslint": "7.32.0",
     "eslint-config-react-app": "7.0.1",
     "file-loader": "6.2.0",
@@ -105,7 +110,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.72.0",
-    "react-scripts": "5.0.1",
     "sass": "1.98.0",
     "sass-loader": "13.3.3",
     "style-loader": "3.3.4",
@@ -116,6 +120,6 @@
     "vitest": "^4.1.4",
     "webpack": "5.105.4",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.2"
+    "webpack-dev-server": "5.2.3"
   }
 }