@ncds/ui-admin-mcp 1.0.0-alpha.2 → 1.0.0-alpha.21

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/nhn/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=\"\" />"
+    }
+  }
+}

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

@@ -3,21 +3,31 @@
   "exportName": "PasswordInput",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
-  "description": "비밀번호 전용 입력 필드로 마스킹 토글을 내장합니다",
+  "category": "forms-and-input",
+  "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,9 +37,236 @@
     "Error 상태를 실시간 남용 금지"
   ],
   "seeAlso": [
-    "input"
+    "textarea",
+    "button",
+    "dropdown",
+    "tooltip",
+    "file-input",
+    "image-file-input"
   ],
-  "props": {},
+  "props": {
+    "clearText": {
+      "type": "boolean",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "required": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "leadingElement": {
+      "type": "object",
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"text\""
+        },
+        "text": {
+          "type": "string",
+          "required": false
+        },
+        "icon": {
+          "type": "function",
+          "required": false,
+          "semantic": "icon-component"
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "black",
+            "blue500",
+            "blue600",
+            "currentColor",
+            "gray100",
+            "gray200",
+            "gray300",
+            "gray400",
+            "gray500",
+            "gray600",
+            "gray700",
+            "green500",
+            "green600",
+            "orange500",
+            "orange600",
+            "pink100",
+            "pink600",
+            "red500",
+            "red600",
+            "secondary-gray-blue-100",
+            "secondary-gray-blue-200",
+            "secondary-gray-blue-300",
+            "secondary-gray-blue-400",
+            "secondary-gray-blue-450",
+            "secondary-gray-blue-50",
+            "secondary-gray-blue-500",
+            "secondary-gray-blue-600",
+            "secondary-gray-blue-700",
+            "violet300",
+            "violet600",
+            "white",
+            "yellow600"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "placement": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "inside",
+            "outside"
+          ]
+        }
+      }
+    },
+    "maxLength": {
+      "type": "number",
+      "required": false
+    },
+    "onClearText": {
+      "type": "function",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false
+    },
+    "showHelpIcon": {
+      "type": "boolean",
+      "required": false
+    },
+    "showTextCount": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    },
+    "trailingElement": {
+      "type": "object",
+      "required": false,
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"icon\""
+        },
+        "icon": {
+          "type": "function",
+          "required": false,
+          "semantic": "icon-component"
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "black",
+            "blue500",
+            "blue600",
+            "currentColor",
+            "gray100",
+            "gray200",
+            "gray300",
+            "gray400",
+            "gray500",
+            "gray600",
+            "gray700",
+            "green500",
+            "green600",
+            "orange500",
+            "orange600",
+            "pink100",
+            "pink600",
+            "red500",
+            "red600",
+            "secondary-gray-blue-100",
+            "secondary-gray-blue-200",
+            "secondary-gray-blue-300",
+            "secondary-gray-blue-400",
+            "secondary-gray-blue-450",
+            "secondary-gray-blue-50",
+            "secondary-gray-blue-500",
+            "secondary-gray-blue-600",
+            "secondary-gray-blue-700",
+            "violet300",
+            "violet600",
+            "white",
+            "yellow600"
+          ]
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "placement": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "inside",
+            "outside"
+          ]
+        },
+        "label": {
+          "type": "string",
+          "required": false
+        },
+        "isSubmit": {
+          "type": "boolean",
+          "required": false
+        },
+        "onClick": {
+          "type": "function",
+          "required": false
+        }
+      }
+    },
+    "validation": {
+      "type": "boolean",
+      "required": false
+    }
+  },
   "html": {},
   "bemClasses": [
     "ncua-input__icon-wrap",
@@ -39,7 +276,9 @@
   "usage": {
     "import": "import { PasswordInput } from '@ncds/ui-admin';",
     "react": {
-      "default": "<PasswordInput />"
+      "default": "<PasswordInput />",
+      "size:sm": "<PasswordInput size=\"sm\" />",
+      "size:xs": "<PasswordInput size=\"xs\" />"
     }
   }
 }

package/data/progress-bar.json

@@ -3,7 +3,7 @@
   "exportName": "ProgressBar",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "ProgressBar는 작업 진행률, 로딩 프로세스, 완료율 등을 시각적으로 표시하여 사용자에게 진행 중인 작업의 정도를 퍼센트(%)로 보여주는 컴포넌트입니다.",
   "aliases": [
     "ProgressBar",
@@ -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": {
@@ -49,9 +50,28 @@
       ]
     },
     "segments": {
-      "type": "string",
+      "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/progress-bar/types\").ProgressSegment[] | undefined"
+      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/components/feedback-and-status/progress-bar/types\").ProgressSegment[] | undefined",
+      "properties": {
+        "value": {
+          "type": "number",
+          "required": true
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "blue",
+            "gray",
+            "green",
+            "orange",
+            "pink",
+            "red",
+            "violet"
+          ]
+        }
+      }
     },
     "showZeroLabel": {
       "type": "boolean",

package/data/progress-circle.json

@@ -3,7 +3,7 @@
   "exportName": "ProgressCircle",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "ProgressCircle은 작업 진행 상태를 원형의 수치(%)로 시각화하여 사용자에게 현재 진행 정도를 명확하게 전달하는 컴포넌트입니다.",
   "aliases": [
     "ProgressCircle",
@@ -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

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