@ncds/ui-admin-mcp 1.0.0-alpha.16 → 1.0.0-alpha.18

package/data/block-header.json

@@ -0,0 +1,208 @@
+{
+  "name": "block-header",
+  "exportName": "BlockHeader",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "layout",
+  "description": "Block Header는 Block의 최상단에 위치하며, 블록의 목적과 실행 범위를 정의하는 영역입니다.",
+  "aliases": [
+    "Block Header",
+    "BlockHeader",
+    "블록헤더",
+    "Section Header",
+    "Title",
+    "Tooltip",
+    "Action",
+    "Tab",
+    "Collapsible",
+    "Grid Control",
+    "Sub Title",
+    "Required Notice",
+    "필수 안내",
+    "Divider",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "Block Header는 블록의 목적을 한눈에 전달하는 영역이다"
+  ],
+  "forbiddenRules": [
+    "Header에 두 줄 이상의 긴 설명 지양",
+    "Header Action에 `hierarchy=\"secondary-gray\" size=\"xs\"` 외 사용 금지",
+    "Header 내부에서 아이콘 남발 금지",
+    "Header 배경색 변경 금지",
+    "페이지 단위 탭과 블록 탭 혼용 금지",
+    "Grid Control을 별도 Block으로 분리 금지",
+    "필수 마커 없는 블록에 Required Notice 표시 금지",
+    "Required Notice 고정 문구 임의 변경 금지",
+    "Required Notice 2색 구성 임의 변경 금지"
+  ],
+  "seeAlso": [
+    "block-container",
+    "tooltip",
+    "tab",
+    "badge",
+    "radio-group",
+    "button",
+    "vertical-table"
+  ],
+  "htmlElement": "div",
+  "usageExamples": {
+    "basic": {
+      "title": "상품 기본 정보"
+    },
+    "withTooltip": {
+      "title": "배송 설정",
+      "tooltip": "배송 방법과 기본 설정을 입력하세요."
+    },
+    "withRequiredNotice": {
+      "title": "상품 기본 정보",
+      "showRequiredNotice": true
+    },
+    "collapsible": {
+      "title": "고급 설정",
+      "collapsible": {
+        "expanded": false,
+        "onToggle": "() => {}"
+      }
+    }
+  },
+  "props": {
+    "action": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "badge": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "collapsible": {
+      "type": "function",
+      "required": false
+    },
+    "controlStrip": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "description": {
+      "type": "string",
+      "required": false
+    },
+    "showDivider": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "showRequiredNotice": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "title": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "tooltip": {
+      "type": "string",
+      "required": false
+    }
+  },
+  "subComponents": {
+    "BlockHeader.SubTitle": {
+      "props": {
+        "action": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "description": {
+          "type": "string",
+          "required": false
+        },
+        "error": {
+          "type": "string",
+          "required": false
+        },
+        "required": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "showDivider": {
+          "type": "boolean",
+          "required": false,
+          "default": true
+        },
+        "showRequiredNotice": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "size": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "middle",
+            "sm",
+            "xs"
+          ],
+          "default": "sm"
+        },
+        "title": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "tooltip": {
+          "type": "string",
+          "required": false
+        }
+      }
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-block-header",
+    "ncua-block-header--column",
+    "ncua-block-header--has-control-strip",
+    "ncua-block-header--has-tab",
+    "ncua-block-header--is-required",
+    "ncua-block-header--no-divider",
+    "ncua-block-header__action-area",
+    "ncua-block-header__badge",
+    "ncua-block-header__collapsible-btn",
+    "ncua-block-header__control-strip",
+    "ncua-block-header__description",
+    "ncua-block-header__required-notice",
+    "ncua-block-header__required-notice--gray",
+    "ncua-block-header__required-notice--red",
+    "ncua-block-header__row",
+    "ncua-block-header__tabs",
+    "ncua-block-header__title",
+    "ncua-block-header__title-area",
+    "ncua-sub-title",
+    "ncua-sub-title__action",
+    "ncua-sub-title__description",
+    "ncua-sub-title__error",
+    "ncua-sub-title__required-marker",
+    "ncua-sub-title__title",
+    "ncua-sub-title__title-area",
+    "ncua-sub-title__title-row"
+  ],
+  "usage": {
+    "import": "import { BlockHeader } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<BlockHeader title=\"예시\" />"
+    }
+  }
+}

package/data/combo-box.json

@@ -40,8 +40,7 @@
     "Clear 버튼 없이 입력 유지 강제 금지"
   ],
   "seeAlso": [
-    "selectbox",
-    "select"
+    "button"
   ],
   "htmlElement": "div",
   "props": {

package/data/data-grid.json

@@ -4,7 +4,7 @@
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
   "category": "data-display",
-  "description": "DataGrid는 관리자 화면에서 대량의 데이터를 테이블 형태로 조회·관리하기 위한 핵심 컴포넌트입니다.",
+  "description": "DataGrid는 관리자 화면에서 대량의 데이터를 테이블 형태로 조회·관리하기 위한 핵심 컴포넌트입니다. 조회 결과 리스트, 일반 가로형·세로형 테이블로 구분되며, Header·데이터 필드·선택·액션·필터·정렬·페이지네이션·검색결과 영역 등으로 구성됩니다.",
   "aliases": [
     "DataGrid",
     "데이터그리드",
@@ -41,10 +41,29 @@
     "maxHeight",
     "hoverable",
     "selectable",
-    "NCDS"
+    "NCDS",
+    "가로스크롤",
+    "horizontal scroll",
+    "scrollX",
+    "overflow-x",
+    "column min-width",
+    "셀 최소 너비",
+    "셀 최소 글자수",
+    "1140",
+    "table min-width",
+    "줄바꿈",
+    "word-break",
+    "콘텐츠 타입별 차등",
+    "2단 wrapper",
+    "Portal",
+    "Floating UI",
+    "스크롤 컨테이너",
+    "scrollbar token",
+    "Modal DataGrid 예외"
   ],
   "hasChildren": true,
   "whenToUse": [
+    "DataGrid는 반드시 Block 또는 Tab 구조 내에 포함되어야 하며, Block > 세부항목 내부에 Table 구조를 중첩하는 것은 지양한다 (5개 이하 정보 제공 시에만 예외 허용)",
     "10개 이상 데이터 관리 화면에서 적용",
     "관리자가 데이터를 조작하는 화면",
     "대량 데이터 일괄 처리 화면"
@@ -57,14 +76,14 @@
     "프로젝트별 임의 컬럼 정렬 변경 금지"
   ],
   "seeAlso": [
-    "button",
+    "table",
     "checkbox",
     "radio",
     "pagination",
     "badge",
     "empty-state",
-    "block-container",
-    "table"
+    "button",
+    "block-container"
   ],
   "htmlElement": "div",
   "props": {
@@ -148,6 +167,10 @@
           "type": "boolean",
           "required": false
         },
+        "horizontalScroll": {
+          "type": "boolean",
+          "required": false
+        },
         "hoverable": {
           "type": "boolean",
           "required": false
@@ -157,6 +180,11 @@
           "required": false,
           "rawType": "string | number | undefined"
         },
+        "minWidth": {
+          "type": "string",
+          "required": false,
+          "rawType": "string | number | undefined"
+        },
         "selectable": {
           "type": "boolean",
           "required": false

package/data/dropdown.json

@@ -28,7 +28,12 @@
   "hasChildren": true,
   "whenToUse": [
     "Dropdown은 값 선택이 아닌 액션 실행 컴포넌트입니다",
-    "제한된 화면 공간에서 다수의 작업을 구조적으로 제공할 때 사용합니다"
+    "값을 선택하는 Selectbox와 달리, 메뉴 항목 선택 시 즉시 특정 기능이 실행됩니다",
+    "제한된 화면 공간에서 다수의 작업을 구조적으로 제공할 때 사용합니다",
+    "다수 액션 제공",
+    "사용자 계정 메뉴",
+    "관리/설정 메뉴",
+    "제한된 공간의 보조 액션"
   ],
   "forbiddenRules": [
     "메뉴명 말줄임 처리 금지",
@@ -227,6 +232,10 @@
         }
       }
     },
+    "usePortal": {
+      "type": "boolean",
+      "required": false
+    },
     "variant": {
       "type": "enum",
       "required": false,
@@ -261,6 +270,7 @@
     "ncua-dropdown__item-text-group",
     "ncua-dropdown__item-visibility",
     "ncua-dropdown__menu",
+    "ncua-dropdown__menu--portal",
     "ncua-dropdown__menu-items",
     "ncua-dropdown__trigger",
     "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",

package/data/file-input.json

@@ -4,12 +4,13 @@
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
   "category": "forms-and-input",
-  "description": "File Upload가 필요한 영역에서 공통 UI/UX를 적용하는 입력 컴포넌트입니다",
+  "description": "FileInput은 File Upload가 필요한 영역에서 공통 UI/UX를 적용하는 입력 컴포넌트입니다.",
   "aliases": [
     "파일인풋",
     "FileInput",
     "파일업로드",
     "파일첨부",
+    "컴포넌트",
     "파일찾기",
     "업로드",
     "accept",
@@ -24,9 +25,7 @@
   ],
   "hasChildren": false,
   "whenToUse": [
-    "제한 정책 안내문을 항상 노출하며 파일명 텍스트 중심 UI를 기본으로 하고 삭제 기능을 필수 제공해야 하는 경우",
-    "단일 파일 또는 다중 파일 업로드가 필요한 경우",
-    "이미지가 아닌 일반 파일 업로드 영역"
+    "FileInput은 제한 정책 안내문을 항상 노출하며, 파일명 텍스트 중심 UI를 기본으로 하고, 삭제 기능을 필수 제공합니다"
   ],
   "forbiddenRules": [
     "제한 정책 안내 없이 업로드 허용 금지",
@@ -36,7 +35,9 @@
     "삭제 기능 없는 업로드 UI 제공 금지"
   ],
   "seeAlso": [
-    "image-file-input"
+    "button",
+    "tag",
+    "tooltip"
   ],
   "props": {
     "accept": {

package/data/image-file-input.json

@@ -4,7 +4,7 @@
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
   "category": "forms-and-input",
-  "description": "상품 이미지 등 시각적으로 참조되어야 하는 이미지 업로드 영역에 사용되는 컴포넌트입니다",
+  "description": "ImageFileInput은 상품 이미지 등 시각적으로 참조되어야 하는 이미지 업로드 영역에 사용되는 컴포넌트입니다.",
   "aliases": [
     "이미지파일인풋",
     "ImageFileInput",
@@ -12,6 +12,7 @@
     "썸네일",
     "미리보기",
     "이미지첨부",
+    "컴포넌트",
     "파일찾기",
     "업로드",
     "accept",
@@ -26,9 +27,7 @@
   ],
   "hasChildren": false,
   "whenToUse": [
-    "썸네일 중심 UI를 기본으로 하며 이미지 비율 왜곡 없이 중앙 정렬하고 삭제는 Hover 시에만 노출해야 하는 경우",
-    "이미지 업로드와 미리보기가 필요한 경우",
-    "일반 파일이 아닌 이미지 전용 업로드 영역"
+    "ImageFileInput은 썸네일 중심 UI를 기본으로 하며, 이미지 비율 왜곡 없이 중앙 정렬하고, 삭제는 Hover 시에만 노출합니다"
   ],
   "forbiddenRules": [
     "단일 영역에서 다중 이미지 누적 금지",
@@ -39,7 +38,9 @@
     "제한 정책 안내 없이 업로드 허용 금지"
   ],
   "seeAlso": [
-    "file-input"
+    "file-input",
+    "button",
+    "tooltip"
   ],
   "props": {
     "accept": {

package/data/input-base.json

@@ -7,7 +7,7 @@
   "description": "Input은 사용자에게 텍스트 데이터를 입력받는 UI 요소로, 다양한 사이즈와 상태를 지원하며 입력 필드 앞뒤로 아이콘, 텍스트, 버튼 등의 요소를 배치할 수 있습니다.",
   "aliases": [
     "인풋",
-    "InputBase",
+    "Input",
     "InputBase",
     "PasswordInput",
     "텍스트입력",

package/data/modal.json

@@ -31,13 +31,16 @@
     "NCDS"
   ],
   "hasChildren": true,
-  "whenToUse": [],
+  "whenToUse": [
+    "Modal은 현재 흐름을 중단하고 사용자 집중을 요구하는 UI 패턴입니다",
+    "단순 알림이나 페이지 이동 대체용으로 남용해서는 안 되며, 정보 확인/입력/처리성 작업에만 한정하여 사용합니다"
+  ],
   "forbiddenRules": [
     "단순 알림에 과도한 Modal 사용 금지",
     "버튼 3개 이상 구성 금지",
     "페이지 이동 대체용 사용 금지",
     "화면 전환을 모두 Modal로 처리 금지",
-    "좌/우 스크롤 구조 금지",
+    "좌/우 스크롤 구조 금지 (Modal Content 자체)",
     "배경 스크롤 허용 금지"
   ],
   "seeAlso": [

package/data/notification.json

@@ -26,15 +26,19 @@
     "NCDS"
   ],
   "hasChildren": false,
-  "whenToUse": [],
+  "whenToUse": [
+    "Notification은 비차단(non-blocking) 알림 UI 컴포넌트이다",
+    "4가지 type(floating, full-width, message, callout)별 시각 토큰과 구현 규격을 정의한다"
+  ],
   "forbiddenRules": [
     "Toast에 Dim 처리 금지",
-    "Message type에 info 컬러 사용 금지"
+    "Message · floating type에 info 컬러 사용 금지"
   ],
   "seeAlso": [
+    "modal",
+    "button",
     "featured-icon",
-    "icon",
-    "modal"
+    "icon"
   ],
   "htmlElement": "div",
   "props": {
@@ -101,12 +105,13 @@
     },
     "title": {
       "type": "ReactNode",
-      "required": true
+      "required": false
     },
     "type": {
       "type": "enum",
       "required": false,
       "values": [
+        "callout",
         "floating",
         "full-width",
         "message"
@@ -116,15 +121,17 @@
   },
   "html": {},
   "bemClasses": [
+    "ncua-callout-notification",
+    "ncua-callout-notification--callout",
+    "ncua-callout-notification--error",
+    "ncua-callout-notification--floating",
+    "ncua-callout-notification--full-width",
+    "ncua-callout-notification--info",
+    "ncua-callout-notification--message",
+    "ncua-callout-notification--neutral",
+    "ncua-callout-notification--success",
+    "ncua-callout-notification--warning",
     "ncua-floating-notification",
-    "ncua-floating-notification--error",
-    "ncua-floating-notification--floating",
-    "ncua-floating-notification--full-width",
-    "ncua-floating-notification--info",
-    "ncua-floating-notification--message",
-    "ncua-floating-notification--neutral",
-    "ncua-floating-notification--success",
-    "ncua-floating-notification--warning",
     "ncua-floating-notification__actions",
     "ncua-floating-notification__close-button",
     "ncua-floating-notification__container",
@@ -165,15 +172,16 @@
   "usage": {
     "import": "import { Notification } from '@ncds/ui-admin';",
     "react": {
-      "default": "<Notification title=\"예시\" />",
-      "color:error": "<Notification color=\"error\" title=\"예시\" />",
-      "color:info": "<Notification color=\"info\" title=\"예시\" />",
-      "color:neutral": "<Notification color=\"neutral\" title=\"예시\" />",
-      "color:success": "<Notification color=\"success\" title=\"예시\" />",
-      "color:warning": "<Notification color=\"warning\" title=\"예시\" />",
-      "type:floating": "<Notification type=\"floating\" title=\"예시\" />",
-      "type:full-width": "<Notification type=\"full-width\" title=\"예시\" />",
-      "type:message": "<Notification type=\"message\" title=\"예시\" />"
+      "default": "<Notification />",
+      "color:error": "<Notification color=\"error\" />",
+      "color:info": "<Notification color=\"info\" />",
+      "color:neutral": "<Notification color=\"neutral\" />",
+      "color:success": "<Notification color=\"success\" />",
+      "color:warning": "<Notification color=\"warning\" />",
+      "type:callout": "<Notification type=\"callout\" />",
+      "type:floating": "<Notification type=\"floating\" />",
+      "type:full-width": "<Notification type=\"full-width\" />",
+      "type:message": "<Notification type=\"message\" />"
     }
   }
 }

package/data/number-input.json

@@ -34,7 +34,7 @@
     "Leading/Trailing 혼합 사용 금지"
   ],
   "seeAlso": [
-    "input",
+    "input-base",
     "slider",
     "tooltip",
     "label"

package/data/page-title.json

@@ -0,0 +1,135 @@
+{
+  "name": "page-title",
+  "exportName": "PageTitle",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "layout",
+  "description": "PageTitle은 페이지 최상단에 위치하며, 현재 페이지의 위치·목적·핵심 액션을 정의하는 영역입니다.",
+  "aliases": [
+    "PageTitle",
+    "Page Header",
+    "Page Title",
+    "페이지 타이틀",
+    "페이지 헤더",
+    "BreadCrumb",
+    "Back Button",
+    "Title",
+    "Action",
+    "Fixed Header",
+    "Tab Wrapper",
+    "탭 래퍼",
+    "페이지 탭",
+    "페이지 레벨 탭",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "PageTitle은 페이지의 목적과 위치를 한눈에 전달하고, 핵심 액션의 진입점이 되는 영역이다",
+    "일반 목록/설정 페이지",
+    "상세 조회/수정 페이지",
+    "스크롤 시 상단 고정",
+    "Block Header와 혼동 시"
+  ],
+  "forbiddenRules": [
+    "PageTitle에 Primary 버튼 2개 이상 배치 금지",
+    "PageTitle 배경색 변경 금지",
+    "Title에 두 줄 이상의 긴 텍스트 지양",
+    "Fixed Variant에서 BreadCrumb 노출 금지",
+    "Block Header와 PageTitle 스타일 혼용 금지",
+    "Back Button을 일반 페이지(Default)에서 사용 금지",
+    "Guide Button의 스타일 변경 금지",
+    "PageTitle 영역에 Form 요소 배치 금지",
+    "BreadCrumb 구분자에 텍스트 문자(`>`) 사용 금지",
+    "Action Button을 Title Row/Title Container 안에 배치 금지",
+    "NCDS 외부 아이콘 사용 금지",
+    "Default ↔ Fixed 전환 미구현 금지"
+  ],
+  "seeAlso": [
+    "bread-crumb",
+    "button",
+    "block-header",
+    "block-container",
+    "horizontal-tab"
+  ],
+  "htmlElement": "header",
+  "props": {
+    "breadcrumbItems": {
+      "type": "object",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/layout/page-title/PageTitle\").PageTitleBreadcrumbItem[] | undefined",
+      "properties": {
+        "label": {
+          "type": "string",
+          "required": true
+        },
+        "href": {
+          "type": "string",
+          "required": false
+        }
+      }
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "guideButton": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "onBack": {
+      "type": "function",
+      "required": false
+    },
+    "primaryAction": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "secondaryAction": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "title": {
+      "type": "string",
+      "required": true
+    },
+    "variant": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "default",
+        "detail",
+        "fixed",
+        "fixed-detail"
+      ],
+      "default": "default"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-page-title",
+    "ncua-page-title--fixed",
+    "ncua-page-title__actions",
+    "ncua-page-title__back-btn",
+    "ncua-page-title__breadcrumb",
+    "ncua-page-title__breadcrumb-current",
+    "ncua-page-title__breadcrumb-item",
+    "ncua-page-title__breadcrumb-separator",
+    "ncua-page-title__container",
+    "ncua-page-title__guide-btn",
+    "ncua-page-title__header",
+    "ncua-page-title__header--has-breadcrumb",
+    "ncua-page-title__page-header",
+    "ncua-page-title__title",
+    "ncua-page-title__title-row"
+  ],
+  "usage": {
+    "import": "import { PageTitle } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<PageTitle title=\"\" />",
+      "variant:default": "<PageTitle variant=\"default\" title=\"\" />",
+      "variant:detail": "<PageTitle variant=\"detail\" title=\"\" />",
+      "variant:fixed": "<PageTitle variant=\"fixed\" title=\"\" />",
+      "variant:fixed-detail": "<PageTitle variant=\"fixed-detail\" title=\"\" />"
+    }
+  }
+}