@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.5 → 1.0.7

package/build/components/examples/opsnow-common-popup-examples-data.js

@@ -130,6 +130,38 @@ export const PopupExamples = [
 </OpsnowCommonPopup>`,
         description: 'standard 타입, 작은 사이즈(sm)에서 커스텀 헤더와 푸터를 사용하는 예제입니다.'
     },
+    {
+        title: 'useCustomFooter + 버튼 추가',
+        code: `<OpsnowCommonPopup
+  open={showPopup}
+  title={\`결과 상세: \${popupTitle}\`}
+  size="lg"
+  onClose={() => setShowPopup(false)}
+  useCustomFooter
+  footerContent={
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: '8px',
+        marginRight: '43px',
+        marginBottom: '16px',
+        marginTop: '16px',
+      }}
+    >
+      <OpsnowCommonButton
+        label="닫기"
+        variant="contained"
+        color="primary"
+        onClick={() => setShowPopup(false)}
+      />
+    </div>
+  }
+>
+  <p>Popup content here</p>
+</OpsnowCommonPopup>`,
+        description: 'useCustomFooter를 사용하여 커스텀 버튼을 추가한 예제입니다.'
+    },
     {
         title: 'Standard 타입, hideFooter',
         code: `<OpsnowCommonPopup

package/build/components/opsnow-common-chart.js

@@ -17,7 +17,7 @@ const XyMultiChartSchema = z.object({
       ],
       "baseInterval": { // xAxis type이 'date'일 때 사용
         "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
-        "count": 1 // 간격 수
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
       },
       "gridHidden": true, // 격자선 표시 여부 (기본값: true)
       "startLocation": 1, // X축 시작 위치 (0~1 사이 값)
@@ -40,7 +40,6 @@ const XyMultiChartSchema = z.object({
         "fontSize": 12, // Y축 라벨 폰트 크기
         "color": "#666666" // Y축 라벨 색상
       },
-      "tooltip": {}, // Y축 툴팁 설정
       "numberFormatter": { // 숫자 포맷터 설정
         "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
         "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
@@ -72,7 +71,7 @@ const XyMultiChartSchema = z.object({
       "seriesTypes": [ // XY 멀티 차트용 시리즈 타입 설정
         {
           "type": "stack-line", // 시리즈 타입: 'line' | 'stack' | 'stack-line'
-          "categoryGroupName": "ondemand_cost", // 카테고리 그룹 이름
+          "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           "order": "front", // 시리즈 순서: 'front' | 'back'
           "connect": true, // 라인 연결 여부
           "lineType": "smoothedX", // 라인 스무딩 타입
@@ -108,7 +107,7 @@ const XyMultiChartSchema = z.object({
         },
         {
           "type": "stack", // 스택 타입
-          "categoryGroupName": "savings_cost", // 카테고리 그룹 이름
+          "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           "columns": {
             "width": "p50",
             "hover": {
@@ -118,7 +117,7 @@ const XyMultiChartSchema = z.object({
           }
         }
       ],
-      "tooltip": { // 툴팁 설정
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
         "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
         "withinArea": true, // 차트 영역 내에서만 툴팁 표시 여부
         "stopActionEnabled": false, // 툴팁 액션 중지 여부
@@ -133,11 +132,11 @@ const XyMultiChartSchema = z.object({
           // 또는 카테고리별로 다른 헤더를 표시하려면:
           // "name": [
           //   {
-          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹 이름
+          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           //     "value": "{l.cost}" // 헤더 값
           //   },
           //   {
-          //     "categoryGroupName": "savings_cost",
+          //     "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           //     "value": "{l.usage}" // 헤더 값
           //   }
           // ]
@@ -147,11 +146,11 @@ const XyMultiChartSchema = z.object({
           "name": "{name}", // 툴팁 바디 이름
           "value": [ // 툴팁 바디 값 (배열 형태로 카테고리별 설정 가능)
             {
-              "categoryGroupName": "ondemand_cost", // 카테고리 그룹 이름
+              "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
               "value": "{valueY.formatNumber('0,0')}({valueYPercent.formatNumber('0.0')}%)" // 바디 값
             },
             {
-              "categoryGroupName": "savings_cost",
+              "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
               "value": "{valueY.formatNumber('0,0')}"
             }
           ],
@@ -163,17 +162,17 @@ const XyMultiChartSchema = z.object({
           // 또는 카테고리별로 다른 푸터를 표시하려면:
           // "name": [
           //   {
-          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹 이름
+          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           //     "value": "{l.total}" // 푸터 이름
           //   }
           // ],
           // "value": [
           //   {
-          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹 이름
+          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           //     "value": "{valueYSum.formatNumber('0,0')}(100.0%)" // 푸터 값
           //   },
           //   {
-          //     "categoryGroupName": "savings_cost",
+          //     "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
           //     "value": "{valueYSum.formatNumber('0,0')}"
           //   }
           // ]
@@ -226,14 +225,14 @@ const XyMultiChartSchema = z.object({
   예시)
   [
     {
-      name: 'ondemand_cost', // 카테고리 그룹 이름
+      name: 'ondemand_cost',
       categories: [
-        'rds_ondemand_cost', // 카테고리 이름
-        'elasti_cache_ondemand_cost' // 카테고리 이름
+        'rds_ondemand_cost',
+        'elasti_cache_ondemand_cost'
       ]
     },
     {
-      name: 'savings_cost', // 카테고리 그룹 이름
+      name: 'savings_cost',
       categories: [
         'rds_savings_cost'
       ]
@@ -326,7 +325,7 @@ export const StackChartSchema = z.object({
     // X축 설정
     "xAxis": {
       "type": "date", // 축 타입: 'date' | 'value' | 'category' (바형 차트일 경우는 value 사용)
-      "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수)
+      "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
       "dateFormats": [ // xAxis type이 'date'일 때 사용
         {
           "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
@@ -335,7 +334,7 @@ export const StackChartSchema = z.object({
       ],
       "baseInterval": { // xAxis type이 'date'일 때 사용
         "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
-        "count": 1 // 간격 수
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
       },
       "gridHidden": true, // 격자선 표시 여부 (기본값: true)
       "renderer": { // 렌더러 설정
@@ -346,8 +345,9 @@ export const StackChartSchema = z.object({
     // Y축 설정
     "yAxis": {
       "type": "value", // Y축 타입: 'value' | 'date' | 'category' (컬럼형 차트일 경우는 value 사용)
-      "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수)
+      "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
       "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
+      "tooltip": {}, // Y축 툴팁 설정 (바형 차트일 경우 Y축 라벨 말줄임 사용시 필요)
       "numberFormatter": { // 숫자 포맷터 설정
         "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
         "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
@@ -371,8 +371,8 @@ export const StackChartSchema = z.object({
     
     // 시리즈 설정
     "series": {
-      "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수)
-      "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수)
+      "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
+      "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
       "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
         "dateFields": ["date"], // X축 값 필드
         "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
@@ -385,7 +385,7 @@ export const StackChartSchema = z.object({
           "grouped": true // 그룹 표시 여부
         }
       },
-      "tooltip": { // 툴팁 설정
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
         "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
         "header": { // 툴팁 헤더 설정
           "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
@@ -568,7 +568,7 @@ export const BarChartSchema = z.object({
     // X축 설정
     "xAxis": {
       "type": "date", // 축 타입: 'date' | 'value' | 'category' (바형 차트일 경우는 value 사용)
-      "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수)
+      "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
       "dateFormats": [ // xAxis type이 'date'일 때 사용
         {
           "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
@@ -577,7 +577,7 @@ export const BarChartSchema = z.object({
       ],
       "baseInterval": { // xAxis type이 'date'일 때 사용
         "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
-        "count": 1 // 간격 수
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
       },
       "gridHidden": true, // 격자선 표시 여부 (기본값: true)
       "renderer": { // 렌더러 설정
@@ -588,8 +588,9 @@ export const BarChartSchema = z.object({
     // Y축 설정
     "yAxis": {
       "type": "value", // Y축 타입: 'value' | 'date' | 'category' (컬럼형 차트일 경우는 value 사용)
-      "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수)
+      "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
       "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
+      "tooltip": {}, // Y축 툴팁 설정 (바형 차트일 경우 Y축 라벨 말줄임 사용시 필요)
       "numberFormatter": { // 숫자 포맷터 설정
         "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
         "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
@@ -613,8 +614,8 @@ export const BarChartSchema = z.object({
     
     // 시리즈 설정
     "series": {
-      "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수)
-      "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수)
+      "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
+      "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
       "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
         "dateFields": ["date"], // X축 값 필드
         "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
@@ -627,7 +628,7 @@ export const BarChartSchema = z.object({
           "grouped": true // 그룹 표시 여부
         }
       },
-      "tooltip": { // 툴팁 설정
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
         "type": "CI", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
         "header": { // 툴팁 헤더 설정
           "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
@@ -817,7 +818,7 @@ export const LineChartSchema = z.object({
       ],
       "baseInterval": { // xAxis type이 'date'일 때 사용
         "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
-        "count": 1 // 간격 수
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
       },
       "gridHidden": true, // 격자선 표시 여부 (기본값: true)
       "renderer": { // 렌더러 설정
@@ -873,7 +874,7 @@ export const LineChartSchema = z.object({
         "cursorOverStyle": "pointer", // 커서 오버 스타일, 클릭 대상이 true일 때 사용: "pointer" | "hand" (기본값: "pointer")
         "lineOnly": false // 라인만 표시 여부 (기본값: false)
       },
-      "tooltip": { // 툴팁 설정
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
         "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
         "header": { // 툴팁 헤더 설정
           "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
@@ -1055,7 +1056,7 @@ export const PieChartSchema = z.object({
     "series": {
       "valueField": "cost", // 값 필드명
       "categoryField": "ratioName", // 카테고리 필드명
-      "tooltip": { // 툴팁 설정
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
         "type": "CI", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
         "position": { // 툴팁 위치 설정
           "criteria": "left" // 위치 기준: 'left' | 'right'

package/build/components/opsnow-common-grid.js

@@ -10,7 +10,7 @@ const gridOptionsSchema = z.object({
     }).optional().describe('행 선택 옵션'),
     tooltipShowDelay: z.number().optional().describe('툴팁 표시 지연 시간'),
     domLayout: z.enum(['normal', 'autoHeight', 'print']).optional().describe('그리드 레이아웃 방식'),
-    suppressCellFocus: z.boolean().optional().describe('셀 포커스 비활성화'),
+    suppressCellFocus: z.boolean().optional().describe('셀 포커스 비활성화 (셀 클릭 이벤트 사용 시 필수: true)'),
     suppressPaginationPanel: z.boolean().optional().describe('페이지네이션 패널 숨김'),
     masterDetail: z.boolean().optional().describe('마스터/디테일 모드 사용'),
     detailCellRenderer: z.any().optional().describe('디테일 셀 렌더러'),
@@ -128,7 +128,7 @@ export const DataGridSchema = z.object({
     gridHeight: z.number().optional().describe('그리드 높이'),
     setClass: z.string().optional().describe('그리드 클래스명'),
     localRowClass: z.string().optional().describe('로컬 행 클래스명'),
-    pagination: z.boolean().optional().describe('페이지네이션 사용 여부'),
+    pagination: z.boolean().optional().describe('페이지네이션 사용 여부 (true로 설정 시 내부적으로 opsnow-common-pagination 컴포넌트 사용)'),
     paginationPageSize: z.number().optional().describe('페이지당 행 수'),
     textNoData: z.string().optional().describe('데이터 없음 텍스트'),
     noDataDescription: z.string().optional().describe('데이터 없음 설명'),
@@ -141,7 +141,7 @@ export const DataGridSchema = z.object({
     pagingFromServer: z.boolean().optional().describe('서버 페이징 사용 여부'),
     pageSizeList: z.array(z.number()).optional().describe('페이지 사이즈 리스트'),
     placeholderText: z.string().optional().describe('플레이스홀더 텍스트'),
-    usedRowClass: z.boolean().optional().describe('행 클래스 사용 여부'),
+    usedRowClass: z.boolean().optional().describe('행 클래스 사용 여부 (셀 클릭 이벤트 사용 시 필수: true)'),
     usedSearch: z.boolean().optional().describe('검색창 사용 여부'),
     usedSearchAndDropdown: z.boolean().optional().describe('검색+드롭다운 동시 사용'),
     useOpsnowUs: z.boolean().optional().describe('Opsnow US 스타일 사용'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "main": "index.js",
   "bin": {