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

package/data/pagination.json

@@ -23,9 +23,12 @@
   ],
   "hasChildren": false,
   "whenToUse": [
-    "대량 데이터를 페이지 단위로 분할하여 순차적으로 탐색",
-    "20개 이상 데이터가 누적될 가능성이 있는 경우 필수 적용",
-    "10페이지 단위 그룹 이동과 첫/마지막 페이지 점프 지원"
+    "Pagination은 대량 데이터를 페이지 단위로 분할하여 순차적으로 탐색할 수 있게 하는 내비게이션입니다",
+    "20개 이상 데이터가 누적될 가능성이 있는 경우 필수 적용하며, 10페이지 단위 그룹 이동과 첫/마지막 페이지 점프를 지원합니다",
+    "20개 이상 데이터 누적 가능성",
+    "가로형 테이블",
+    "리스트 구조",
+    "검색 결과 목록"
   ],
   "forbiddenRules": [
     "10페이지 이하에서 이동 버튼 노출 금지",
@@ -34,7 +37,8 @@
     "세로형 테이블에서 사용 금지"
   ],
   "seeAlso": [
-    "table"
+    "table",
+    "select"
   ],
   "htmlElement": "button",
   "props": {

package/data/password-input.json

@@ -4,20 +4,30 @@
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
   "category": "forms-and-input",
-  "description": "비밀번호 전용 입력 필드로 마스킹 토글을 내장합니다",
+  "description": "Input은 사용자에게 텍스트 데이터를 입력받는 UI 요소로, 다양한 사이즈와 상태를 지원하며 입력 필드 앞뒤로 아이콘, 텍스트, 버튼 등의 요소를 배치할 수 있습니다.",
   "aliases": [
-    "비밀번호",
-    "비밀번호 입력",
-    "password",
-    "패스워드",
+    "인풋",
+    "Input",
+    "InputBase",
     "PasswordInput",
-    "비밀번호 변경",
-    "비밀번호 확인"
+    "텍스트입력",
+    "비밀번호",
+    "이메일",
+    "드롭다운",
+    "리딩텍스트",
+    "트레일링버튼",
+    "clearText",
+    "showTextCount",
+    "maxLength",
+    "leadingElement",
+    "trailingElement",
+    "validation",
+    "destructive",
+    "NCDS"
   ],
   "hasChildren": false,
   "whenToUse": [
-    "명확한 레이블과 입력 예시 Placeholder 및 유효성 안내 Helper Text와 함께 제공되어야 하는 경우",
-    "사용자가 입력 가능한 형식과 제한 조건을 입력 전에 인지할 수 있어야 하는 경우"
+    "Input은 명확한 레이블, 입력 예시(Placeholder), 유효성 안내(Helper Text)와 함께 제공되어야 하며, 사용자가 입력 가능한 형식과 제한 조건을 입력 전에 인지할 수 있어야 한다"
   ],
   "forbiddenRules": [
     "Label 없는 단독 Input 사용 금지",
@@ -27,7 +37,12 @@
     "Error 상태를 실시간 남용 금지"
   ],
   "seeAlso": [
-    "input"
+    "textarea",
+    "button",
+    "dropdown",
+    "tooltip",
+    "file-input",
+    "image-file-input"
   ],
   "props": {
     "clearText": {

package/data/progress-bar.json

@@ -23,19 +23,20 @@
   ],
   "hasChildren": false,
   "whenToUse": [
-    "진행 상태를 직관적인 막대 형태로 시각화",
-    "단일 값 표시뿐 아니라 다중 세그먼트를 통해 항목별 비율 분포도 표현"
+    "ProgressBar는 진행 상태를 직관적인 막대 형태로 시각화하여 사용자가 작업의 현재 상태와 남은 정도를 즉시 파악할 수 있도록 합니다",
+    "단일 값 표시뿐 아니라 다중 세그먼트를 통해 항목별 비율 분포도 표현할 수 있습니다"
   ],
   "forbiddenRules": [
-    "0-100 범위 이탈 금지",
-    "불확정 진행률에 사용 금지(Spinner 사용)",
+    "0–100 범위 이탈 금지",
+    "불확정 진행률에 사용 금지",
     "white/black 세그먼트 색상 금지",
     "세그먼트 최대 3개 제한",
     "장식 용도 금지"
   ],
   "seeAlso": [
     "progress-circle",
-    "spinner"
+    "spinner",
+    "skeleton"
   ],
   "props": {
     "label": {

package/data/progress-circle.json

@@ -22,20 +22,23 @@
   ],
   "hasChildren": false,
   "whenToUse": [
-    "시간 예측이 어려운 장시간 진행 작업의 진행률을 원형 그래프로 시각화",
-    "Overlay(Dim Layer)와 함께 사용되어 작업 중 사용자 인터랙션을 차단하고 이탈 불안감을 최소화"
+    "ProgressCircle은 시간 예측이 어려운 장시간 진행 작업의 진행률을 원형 그래프로 시각화하여 사용자에게 현재 상태와 남은 정도를 즉시 파악할 수 있도록 합니다",
+    "Overlay(Dim Layer)와 함께 사용되어 작업 중 사용자 인터랙션을 차단하고, 이탈 불안감을 최소화합니다"
   ],
   "forbiddenRules": [
     "% 없는 진행 Circle 금지",
     "100% 초과 값 표시 금지",
     "값 점프형 급격 변화 지양",
-    "완료 즉시 사라짐 금지(0.5~1초 유지)",
-    "불확정 진행률에 사용 금지(Spinner 사용)",
+    "완료 즉시 사라짐 금지",
+    "불확정 진행률에 사용 금지",
     "단순 대기(3초 이내)에 사용 금지"
   ],
   "seeAlso": [
     "progress-bar",
-    "spinner"
+    "spinner",
+    "skeleton",
+    "toast",
+    "alert"
   ],
   "props": {
     "label": {

package/data/radio.json

@@ -4,7 +4,7 @@
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
   "category": "forms-and-input",
-  "description": "Radio는 여러 옵션 중 하나만 선택할 수 있는 단일 선택(Single Selection) 컨트롤로, 텍스트 라벨과 보조 설명을 함께 제공할 수 있습니다.",
+  "description": "Radio는 여러 옵션 중 하나만 선택할 수 있는 단일 선택(Single Selection) 컨트롤로, 텍스트 레이블과 보조 설명을 함께 제공할 수 있습니다.",
   "aliases": [
     "라디오",
     "Radio",
@@ -26,7 +26,7 @@
   "forbiddenRules": [
     "Radio 단독 사용 금지",
     "기본 선택 없이 사용 지양",
-    "텍스트 라벨 없이 사용 지양",
+    "텍스트 레이블 없이 사용 지양",
     "Checkbox와 혼동 금지",
     "선택 해제 동작 구현 금지"
   ],
@@ -34,6 +34,7 @@
     "checkbox",
     "toggle",
     "select",
+    "dropdown",
     "label"
   ],
   "htmlElement": "input",

package/data/select-box.json

@@ -23,27 +23,29 @@
   ],
   "hasChildren": true,
   "whenToUse": [
-    "옵션 수 6개 이상 또는 공간 제약 시 사용",
-    "옵션 3~30개인 경우",
-    "테이블 내부 컴팩트 영역에서 옵션 선택 필요",
-    "상태/분류/정렬 단일 선택",
-    "팀 멤버/태그/필터 다중 선택"
+    "Selectbox는 옵션 수 6개 이상 또는 공간 제약 시 사용하며, 옵션 2개(180도 반대)는 Switch, 5개 이하+공간 충분은 Radio/Checkbox를 우선한다",
+    "다중 선택 시 '선택 완료' 버튼 필수",
+    "선택 가능한 옵션이 3~30개인 경우",
+    "화면 공간이 제한되어 Radio/Checkbox를 배치하기 어려운 경우",
+    "테이블 내부 등 컴팩트한 영역에서 옵션 선택이 필요한 경우",
+    "상태/분류/정렬 등 단일 선택이 필요한 경우",
+    "팀 멤버/태그/필터 등 다중 선택이 필요한 경우"
   ],
   "forbiddenRules": [
     "옵션 2개(180도 반대 의미)인데 Selectbox 사용 금지",
-    "옵션 수 5개 이하+공간 충분한데 Selectbox 남용 금지",
+    "옵션 수 5개 이하 & 공간 충분한데 Selectbox 남용 금지",
     "30개 이상 옵션을 일반 Selectbox로만 제공 금지",
-    "다중 선택형에서 선택 완료 없이 즉시 확정 UX 혼용 금지",
-    "말줄임 Chips에 Tooltip 미제공 금지",
+    "다중 선택형에서 '선택 완료' 없이 즉시 확정 UX 혼용 금지",
+    "말줄임 처리된 Chips에 Tooltip 미제공 금지",
     "Read only에서 레이어 열림 동작 제공 금지",
-    "Read only를 Disabled로 대체하여 값 가독성 저하 지양",
+    "Read only를 Disabled로 대체하여 값 가독성을 떨어뜨리는 구성 지양",
     "Disabled 상태에서 Tooltip/설명 없이 클릭 시도 유도 금지"
   ],
   "seeAlso": [
     "radio",
     "checkbox",
     "switch",
-    "input",
+    "input-base",
     "tooltip"
   ],
   "htmlElement": "div",
@@ -154,6 +156,10 @@
       ],
       "default": "default"
     },
+    "usePortal": {
+      "type": "boolean",
+      "required": false
+    },
     "value": {
       "type": "object",
       "required": false,
@@ -163,6 +169,7 @@
   "html": {},
   "bemClasses": [
     "ncua-hint-text",
+    "ncua-select-dropdown--portal",
     "ncua-selectbox",
     "ncua-selectbox--disabled",
     "ncua-selectbox--multiple",

package/data/step-guide.json

@@ -0,0 +1,130 @@
+{
+  "name": "step-guide",
+  "exportName": "stepGuide",
+  "importPath": "step-guide",
+  "jsRequired": true,
+  "category": "overlays",
+  "description": "vanilla JS 함수 기반 step-by-step 가이드 투어. 신규 기능 출시 온보딩 또는 관리자 페이지 인터랙티브 가이드용. CDN 로드 후 window.stepGuide({el, options}) 함수 호출로 시작. 외부 패키지(step-guide) — render_to_html 호출 시 외부 분기 모듈에서 응답 직접 조립.",
+  "aliases": [
+    "step-guide",
+    "stepguide",
+    "ncdsstepguide",
+    "step_guide",
+    "투어",
+    "온보딩",
+    "코치마크",
+    "coachmark",
+    "튜토리얼",
+    "tutorial"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "신규 기능 출시 시 사용자에게 단계별 안내가 필요한 경우",
+    "관리자 페이지의 복잡한 워크플로우를 단계별로 강조해야 하는 경우",
+    "온보딩 화면에서 주요 UI 요소를 순차적으로 지목해야 하는 경우"
+  ],
+  "forbiddenRules": [
+    "React 컴포넌트로 직접 사용 금지 — useEffect 내 window.stepGuide({el, options}) 호출 + cleanup 에서 instance.exit() 호출 필수",
+    "정적 HTML 미리보기 불가 — 런타임에 오버레이가 동작하므로 render_to_html 응답의 init 스니펫을 페이지에 붙여 동작 검증 필요",
+    "step.element 는 DOM 마운트 후에만 참조 가능 — 컴포넌트 mount 이후 stepGuide() 호출"
+  ],
+  "seeAlso": ["modal", "tooltip"],
+  "usageExamples": {
+    "default": {
+      "steps": [
+        {
+          "title": "1단계",
+          "description": "첫 번째 안내",
+          "element": "#step1",
+          "position": "bottom"
+        },
+        {
+          "title": "2단계",
+          "description": "두 번째 안내",
+          "element": "#step2",
+          "position": "bottom"
+        }
+      ]
+    },
+    "positionAll": {
+      "steps": [
+        { "title": "위쪽", "description": "위쪽 위치", "element": "#top", "position": "top" },
+        { "title": "오른쪽", "description": "오른쪽 위치", "element": "#right", "position": "right" },
+        { "title": "아래쪽", "description": "아래쪽 위치", "element": "#bottom", "position": "bottom" },
+        { "title": "왼쪽", "description": "왼쪽 위치", "element": "#left", "position": "left" }
+      ]
+    },
+    "withSkipBtn": {
+      "hideSkip": false,
+      "steps": [
+        {
+          "title": "스킵 가능",
+          "description": "사용자가 '나중에 하기' 로 건너뛸 수 있습니다",
+          "element": "#step1",
+          "position": "bottom"
+        }
+      ]
+    }
+  },
+  "props": {
+    "steps": {
+      "type": "Step[]",
+      "required": true,
+      "description": "단계 배열. 각 Step 은 { element?: string | null, title: string, description?: string, subText?: string, position?: 'top' | 'right' | 'bottom' | 'left', customStyle?: Record<string, string>, isFixed?: boolean }"
+    },
+    "useAnimation": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "애니메이션 사용 여부"
+    },
+    "buttonLabel": {
+      "type": "{ prev: string; next: string; done: string; skip: string }",
+      "required": false,
+      "description": "버튼 라벨 (v2 default: 이전 / 다음 / 완료 / 나중에 하기)"
+    },
+    "hideSkip": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "스킵(나중에 하기) 버튼 숨김 여부"
+    },
+    "hideStepCount": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "스텝 카운트(1 / N) 숨김 여부"
+    },
+    "hideStepPrefix": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "description": "STEP N prefix 숨김 여부. 단계 1개일 때는 옵션과 무관하게 자동 생략됨"
+    },
+    "exitOnOverlayClick": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "오버레이 클릭 시 종료 여부"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-coachmark-backdrop",
+    "ncua-coachmark-container",
+    "ncua-coachmark-overlay",
+    "ncua-coachmark-reference",
+    "ncua-coachmark-tooltip",
+    "ncua-coachmark-tooltip__title",
+    "ncua-coachmark-tooltip__title-step",
+    "ncua-coachmark-tooltip__description",
+    "ncua-coachmark-tooltip__sub-text",
+    "ncua-coachmark-tooltip__menu",
+    "ncua-coachmark-tooltip__count",
+    "ncua-coachmark-dummy"
+  ],
+  "usage": {
+    "import": "// CDN 로드 (npm import 미지원, vanilla JS only)\n<link rel=\"stylesheet\" href=\"https://fe-sdk.cdn-nhncommerce.com/@ncds/step-guide/2.0/step-guide.min.css\" />\n<script src=\"https://fe-sdk.cdn-nhncommerce.com/@ncds/step-guide/2.0/step-guide.min.js\"></script>",
+    "react": {}
+  }
+}

package/data/table.json

@@ -36,24 +36,44 @@
     "colSpan",
     "widths",
     "Pagination",
-    "NCDS"
+    "NCDS",
+    "가로스크롤",
+    "horizontal scroll",
+    "scrollX",
+    "overflow-x",
+    "column min-width",
+    "셀 최소 너비",
+    "셀 최소 글자수",
+    "1140",
+    "table min-width",
+    "줄바꿈",
+    "word-break",
+    "콘텐츠 타입별 차등",
+    "2단 wrapper",
+    "Portal",
+    "Floating UI",
+    "스크롤 컨테이너",
+    "scrollbar token"
   ],
   "hasChildren": true,
-  "whenToUse": [],
+  "whenToUse": [
+    "Table은 데이터를 일관된 구조로 전달하고, 정렬·선택·페이지네이션을 통해 효율적인 데이터 탐색을 지원하는 컴포넌트이다"
+  ],
   "forbiddenRules": [
     "컬러 토큰 외 임의 색상 사용 금지",
     "Row Height 임의 수정 금지",
     "텍스트 정렬 규칙 무시 금지",
     "프로젝트별 Padding 임의 변경 금지",
-    "정렬 아이콘 위치 변경 금지",
-    "Vertical Table을 Block에 배치 시 Block Body padding 0 override 금지",
-    "Vertical Table을 Block에 배치 시 Table [outer] 래퍼 생략 금지"
+    "정렬 아이콘 위치 변경 금지"
   ],
   "seeAlso": [
     "checkbox",
     "pagination",
     "badge",
-    "empty-state"
+    "empty-state",
+    "button",
+    "spinner",
+    "block-container"
   ],
   "htmlElement": "div",
   "props": {
@@ -66,6 +86,11 @@
       "required": false,
       "default": false
     },
+    "horizontalScroll": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
     "hoverable": {
       "type": "boolean",
       "required": false,
@@ -76,6 +101,11 @@
       "required": false,
       "rawType": "string | number | undefined"
     },
+    "minWidth": {
+      "type": "string",
+      "required": false,
+      "rawType": "string | number | undefined"
+    },
     "selectable": {
       "type": "boolean",
       "required": false,
@@ -134,6 +164,11 @@
     },
     "Table.HeaderCell": {
       "props": {
+        "minWidth": {
+          "type": "string",
+          "required": false,
+          "rawType": "string | number | undefined"
+        },
         "onSort": {
           "type": "function",
           "required": false
@@ -188,6 +223,11 @@
     },
     "Table.ColGroup": {
       "props": {
+        "minWidths": {
+          "type": "object",
+          "required": false,
+          "rawType": "(string | number)[] | undefined"
+        },
         "widths": {
           "type": "object",
           "required": true,
@@ -221,6 +261,10 @@
     "ncua-table__cell",
     "ncua-table__empty",
     "ncua-table__footer",
+    "ncua-table__h-scroll-container",
+    "ncua-table__h-scroll-inner",
+    "ncua-table__h-scrollbar",
+    "ncua-table__h-scrollbar-thumb",
     "ncua-table__header",
     "ncua-table__header-cell",
     "ncua-table__header-cell--sortable",

package/data/tag.json

@@ -24,19 +24,22 @@
   ],
   "hasChildren": true,
   "whenToUse": [
-    "정보 분류와 필터링을 위한 시각적 라벨",
-    "사용자가 콘텐츠를 빠르게 분류/식별/필터링할 수 있도록 지원"
+    "Tag는 정보 분류와 필터링을 위한 시각적 레이블로, 사용자가 콘텐츠를 빠르게 분류·식별·필터링할 수 있도록 합니다",
+    "작고 간결한 형태로 다양한 컨텍스트에서 사용되며, 아이콘·액션을 통해 의미를 전달합니다"
   ],
   "forbiddenRules": [
     "disabled 태그에 액션 제공 금지",
     "과도한 태그 나열 금지",
-    "텍스트 없는 태그 사용 금지"
+    "텍스트 없는 태그 사용 금지",
+    "상태·중요도 표시에 Tag 사용 금지"
   ],
   "seeAlso": [
     "badge",
     "badge-group",
     "checkbox",
-    "dot"
+    "icon",
+    "dot",
+    "tooltip"
   ],
   "props": {
     "children": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin-mcp",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
   "bin": {
     "ncua-mcp": "./bin/server.mjs"
@@ -19,9 +19,10 @@
     "extract:icons": "tsx scripts/extract-icons.ts",
     "extract:tokens": "tsx scripts/extract-design-tokens.ts",
     "generate:cdn-meta": "tsx scripts/generate-cdn-meta.ts",
+    "generate:version-ts": "tsx scripts/generate-version-ts.ts",
     "build:bundle": "tsx scripts/build-bundle.ts",
     "build:server": "mkdir -p bin && rm -rf bin/definitions && cp -r src/definitions bin/definitions && find bin/definitions -name '*.ts' -delete && tsc --project tsconfig.json",
-    "build": "pnpm extract && pnpm extract:icons && pnpm extract:tokens && pnpm generate:cdn-meta && pnpm build:bundle && pnpm build:server",
+    "build": "pnpm extract && pnpm extract:icons && pnpm extract:tokens && pnpm generate:cdn-meta && pnpm generate:version-ts && pnpm build:bundle && pnpm build:server",
     "check-meta": "tsx scripts/check-meta-coherence.ts",
     "test": "vitest run --config vitest.config.ts",
     "test:coverage": "vitest run --coverage --config vitest.config.ts",
@@ -43,20 +44,19 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
     "@modelcontextprotocol/sdk": "^1.27.1",
-    "@ncds/types-common": "^1.0.0",
-    "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.1.6",
-    "classnames": "^2.3.2",
+    "@ncds/ui-admin-icon": "0.1.9",
+    "classnames": "2.5.1",
+    "dompurify": "3.4.1",
     "flatpickr": "4.6.13",
     "jsdom": "^26.1.0",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "moment": "^2.30.1",
+    "lodash": "4.18.1",
+    "lodash-es": "4.18.1",
+    "moment": "2.30.1",
     "node-html-parser": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-flatpickr": "^4.0.10",
-    "swiper": "^11.1.1",
+    "react-flatpickr": "4.0.11",
+    "swiper": "12.1.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
@@ -66,6 +66,8 @@
     "@types/react": "^18.3.20",
     "esbuild": "^0.28.0",
     "ts-morph": "^27.0.2",
+    "tsx": "^4.21.0",
+    "typescript": "5.9.3",
     "vitest": "^4.1.4"
   }
 }