@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.39 → 1.0.41

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

@@ -47,11 +47,10 @@ export const CircleProgressSchema = BaseProgressSchema.extend({
     loadingDots: z
         .object({
         dotSize: z.number().describe("도트 크기"),
-        dotIndex: z.number().describe("도트 인덱스"),
     })
         .partial()
         .optional()
-        .describe("도트 형태 일때 도트 속성(dotSize, dotIndex)"),
+        .describe("도트 형태 일때 도트 속성 (dotSize — 기본 8)"),
     open: z.boolean().default(false).describe("open, setOpen useState 사용 여부"),
     isFullScreen: z.boolean().default(false).describe("전체 화면 표시 여부"),
 }).describe("단일 진행률인 경우 사용");
@@ -64,8 +63,8 @@ export function createProgressComponent() {
       - 도트형태: 점(●)이 여러 개, 진행률 숫자/원형 바 없음(하나의 컴포넌트에 점 세개)
       - 원형: 하나의 원, 진행률 숫자/텍스트/원형 바가 있음(앙에 숫자/텍스트/원형 바가 있으면 무조건 원형)
       **주의사항:**
-      - 도트 형태를 사용하는 경우, <OpsnowCommonLoading loadingDots dotSize={8}/> 와 같이 loadingDots, dotSize, dotIndex와 한꺼번에 묶어서 사용하지 않음
-      - 금지 : isLoadingDots = { dotSize: 8, dotIndex: 0 } - 해당 예시처럼 사용 금지
+      - 도트 형태를 사용하는 경우, <OpsnowCommonLoading loadingDots dotSize={8}/> 와 같이 loadingDots, dotSize와 한꺼번에 묶어서 사용하지 않음
+      - 금지 : isLoadingDots = { dotSize: 8 } - 해당 예시처럼 사용 금지
        **import:**
       \`\`\`javascript
       import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
@@ -97,13 +96,11 @@ export function createProgressComponent() {
                 if (args.isFullScreen)
                     props.push(`isFullScreen`);
                 if (args.loadingDots) {
-                    if (args.loadingDots.dotSize || args.loadingDots.dotIndex) {
+                    if (args.loadingDots.dotSize) {
                         props.push("loadingDots");
                     }
                     if (args.loadingDots?.dotSize)
                         props.push(`dotSize={${args.loadingDots.dotSize}}`);
-                    if (args.loadingDots?.dotIndex)
-                        props.push(`index={${args.loadingDots.dotIndex}}`);
                 }
                 // 컴포넌트 코드 생성
                 let componentCode = `
@@ -125,10 +122,10 @@ export function createProgressComponent() {
             name: "createProgressLine",
             description: `진행률 컴포넌트 생성 - 단일 진행률(%)을 라인 형태로 표시를 위한 컴포넌트 생성(라인, 바 형태)
       **import:**
-      \`\`\`javascript클라
+      \`\`\`javascript
       import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
       const { OpsnowCommonProgress } = useCommonComponents();
-      `,
+      \`\`\``,
             parameters: LineProgressSchema,
             handler: async (args) => {
                 let functionDefinitions = ``;
@@ -142,18 +139,15 @@ export function createProgressComponent() {
                 }
                 let componentCode = "";
                 const props = [];
-                props.push(`value={${args.percent}}`);
                 if (args.variant)
                     props.push(`variant="${args.variant}"`);
-                if (args.percent && args.valueBuffer) {
-                    props.push(`value = {progress}`);
+                if (args.valueBuffer) {
+                    props.push(`value={progress}`);
                     props.push(`valueBuffer={buffer}`);
                 }
-                else if (args.percent) {
-                    props.push(`value=${args.percent}`);
+                else if (args.percent !== undefined) {
+                    props.push(`value={${args.percent}}`);
                 }
-                if (args.size)
-                    props.push(`size="${args.size}"`);
                 if (args.showInfo)
                     props.push(`label`);
                 if (args.strokeColor)

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

@@ -2,17 +2,18 @@ import { z } from "zod";
 // Select 컴포넌트 관련 스키마 정의
 export const SelectSchema = z.object({
     items: z.array(z.object({
-        value: z.string(),
+        value: z.union([z.string(), z.number()]),
         label: z.any(), // string | JSX 가능
-        disabled: z.boolean().optional().default(false)
-    })).describe("셀렉트 옵션 목록"),
+    })).describe("셀렉트 옵션 목록 [{ value, label }] — 항목별 disabled는 지원하지 않음(무시됨)."),
     value: z.any().optional().describe("선택된 값(단일/다중)"),
     multiple: z.boolean().optional().default(false).describe("다중 선택 가능 여부"),
     placeholder: z.string().optional().describe("플레이스홀더 텍스트"),
-    variant: z.enum(["standard", "outlined", "filled", "noLine"]).optional().describe("셀렉트 variant"),
+    label: z.string().optional().describe("선택값 앞에 '라벨:' 접두로 표시되는 라벨 텍스트"),
+    variant: z.enum(["standard", "outlined", "filled", "noLine", "emUnderline"]).optional().describe("셀렉트 variant"),
     size: z.enum(["small", "medium"]).optional().describe("셀렉트 크기"),
     error: z.boolean().optional().default(false).describe("에러 상태"),
-    disabled: z.boolean().optional().default(false).describe("비활성화 여부")
+    disabled: z.boolean().optional().default(false).describe("비활성화 여부"),
+    copilotId: z.string().optional().describe("Copilot 연동 ID — Copilot 매니페스트의 bind.copilotId와 매칭되어 AI가 이 컨트롤을 조작할 수 있게 함. useCommonComponents()로 받은 컴포넌트에서만 동작(로더 HOC가 소비 후 제거)"),
 });
 // Autocomplete Select 컴포넌트 관련 스키마 정의
 export const AutocompleteSelectSchema = z.object({
@@ -24,10 +25,13 @@ export const AutocompleteSelectSchema = z.object({
         disabled: z.boolean().optional().default(false)
     })).describe("오토컴플리트 옵션 목록"),
     value: z.any().optional().describe("선택된 값/값들 (단일/다중)"),
-    multiple: z.boolean().optional().default(false).describe("다중 선택 가능 여부"),
+    multiple: z.boolean().optional().default(false).describe("다중 선택 가능 여부 (실제 컴포넌트에선 필수 prop — 단일 선택도 multiple={false} 명시)"),
     useCheckboxOption: z.boolean().optional().default(false).describe("체크박스 옵션 사용 여부"),
     useSelectAll: z.boolean().optional().default(false).describe("전체 선택 옵션 사용 여부"),
-    disableCloseOnSelect: z.boolean().optional().default(false).describe("선택 시 닫힘 방지 여부"),
+    disableCloseOnSelect: z.boolean().optional().describe("선택 시 닫힘 방지 여부 (기본값: multiple 값과 같음 — 다중 선택은 기본으로 열린 채 유지)"),
+    noOptionsText: z.string().optional().describe("옵션이 없을 때 표시 텍스트"),
+    inputValue: z.string().optional().describe("입력 텍스트 상태 변수명 (제어형 검색어) — onInputChange와 함께"),
+    onInputChange: z.string().optional().describe("입력 텍스트 변경 핸들러 함수명 ((e, value, reason) => void)"),
     loading: z.boolean().optional().default(false).describe("로딩 상태 표시 여부"),
     label: z.string().optional().describe("라벨 텍스트"),
     placeholder: z.string().optional().describe("플레이스홀더 텍스트"),
@@ -42,7 +46,8 @@ export const AutocompleteSelectSchema = z.object({
     groupBy: z.string().optional().describe("옵션 그룹핑 함수명 또는 인라인 화살표 함수. (option) => string 형태로 각 옵션이 속할 그룹 라벨을 반환 (예: (option) => option.group). 기본값 없음(그룹핑 안 함)"),
     fitDropdownWidth: z.boolean().optional().describe("드롭다운 너비를 입력 필드 폭에 고정하고 긴 라벨은 줄바꿈 (boolean, 기본 false). false(기본)면 드롭다운이 옵션 라벨 폭에 맞게 확장되며, 화면 오른쪽 공간이 부족하면 잘리는 대신 왼쪽으로 이동. 좁은 레이아웃에서 드롭다운이 넓어지면 안 될 때 사용"),
     dropdownMaxWidth: z.number().optional().describe("확장 모드(fitDropdownWidth=false)에서 드롭다운 최대 너비(px, number). 미지정(기본) 시 고정 상한 없이 뷰포트 폭까지 확장하고 그보다 긴 라벨만 줄바꿈 (예: 360)"),
-    onChange: z.string().optional().describe("선택 값 변경 콜백 함수명. (value, event?, reason?, details?) => void 형태이며 value는 multiple 여부에 따라 배열 또는 단일 아이템(null 가능). 기본값 없음(미지정 시 생성 코드에 onChange={setValue} 사용)")
+    onChange: z.string().optional().describe("선택 값 변경 콜백 함수명. (value, event?, reason?, details?) => void 형태이며 value는 multiple 여부에 따라 배열 또는 단일 아이템(null 가능). 기본값 없음(미지정 시 생성 코드에 onChange={setValue} 사용)"),
+    copilotId: z.string().optional().describe("Copilot 연동 ID — Copilot 매니페스트의 bind.copilotId와 매칭되어 AI가 이 컨트롤을 조작할 수 있게 함. useCommonComponents()로 받은 컴포넌트에서만 동작(로더 HOC가 소비 후 제거)"),
 });
 // Select 컴포넌트 함수 - 배열 반환
 export function createSelectComponent() {
@@ -51,7 +56,7 @@ export function createSelectComponent() {
             name: "createSelect",
             description: `기본 셀렉트 컴포넌트 예제입니다.
 
-      - items: 옵션 배열 (value, label, disabled 등 지원)
+      - items: 옵션 배열 [{ value, label }] (항목별 disabled는 지원하지 않음 — 필요하면 Autocomplete)
       - multiple, placeholder, variant, size, error, disabled 등 다양한 props 지원
       - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
 
@@ -82,6 +87,8 @@ export function createSelectComponent() {
                     props.push(`multiple`);
                 if (args.placeholder)
                     props.push(`placeholder=\"${args.placeholder}\"`);
+                if (args.label)
+                    props.push(`label=\"${args.label}\"`);
                 if (args.variant)
                     props.push(`variant=\"${args.variant}\"`);
                 if (args.size)
@@ -133,14 +140,20 @@ export function createSelectComponent() {
                     props.push(`items={${JSON.stringify(args.items)}}`);
                 if (args.value !== undefined)
                     props.push(`value={value}`);
-                if (args.multiple)
-                    props.push(`multiple`);
+                // multiple은 d.ts상 필수 — 단일 선택도 명시
+                props.push(args.multiple ? `multiple` : `multiple={false}`);
                 if (args.useCheckboxOption)
                     props.push(`useCheckboxOption`);
                 if (args.useSelectAll)
                     props.push(`useSelectAll`);
-                if (args.disableCloseOnSelect)
-                    props.push(`disableCloseOnSelect`);
+                if (args.disableCloseOnSelect !== undefined)
+                    props.push(`disableCloseOnSelect={${args.disableCloseOnSelect}}`);
+                if (args.noOptionsText)
+                    props.push(`noOptionsText=\"${args.noOptionsText}\"`);
+                if (args.inputValue)
+                    props.push(`inputValue={${args.inputValue}}`);
+                if (args.onInputChange)
+                    props.push(`onInputChange={${args.onInputChange}}`);
                 if (args.loading)
                     props.push(`loading`);
                 if (args.label)

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

@@ -1,19 +1,20 @@
 import { z } from "zod";
+import { jsxAttrs, jsxTag, jsxResult } from "./opsnow-common-jsx-helper.js";
 // Stepper 컴포넌트 관련 스키마 정의 (예제 코드에 맞게 확장)
 export const StepperSchema = z.object({
     steps: z.array(z.object({
         label: z.string().describe("스텝 라벨"),
-        status: z.string().optional().describe("스텝 상태 (NotStarted, Completed, Error 등)"),
+        status: z.enum(["notStarted", "inProgress", "completed", "error", "warning", "info", "success"]).describe("스텝 상태 (실제 컴포넌트에선 필수, camelCase)"),
         optionalText: z.string().optional().describe("옵셔널 텍스트"),
-        description: z.string().optional(),
-        icon: z.string().optional(),
+        useCheckIcon: z.boolean().optional().describe("완료 스텝에 체크 아이콘 표시 (기본값: true)"),
+        completedStatus: z.boolean().optional().describe("완료 상태 강제 표시"),
         // slot은 StepContent에서만 사용
     })).describe("스텝 목록"),
     activeStep: z.number().optional().default(0).describe("현재 스텝 인덱스"),
     orientation: z.enum(["horizontal", "vertical"]).optional().default("horizontal").describe("스텝 방향"),
     align: z.enum(["left", "center", "right"]).optional().describe("스텝 정렬"),
     isSimpleView: z.boolean().optional().describe("심플 뷰 여부"),
-    connector: z.string().optional().describe("커스텀 커넥터 컴포넌트(JSX 문자열)"),
+    isStepCompact: z.boolean().optional().describe("스텝 간격을 좁게 표시"),
     onStepClick: z.string().optional().describe("스텝 클릭 핸들러 함수명"),
     contentPadding: z.string().optional().describe("컨텐츠 패딩 스타일"),
     contentHeight: z.string().optional().describe("컨텐츠 높이 스타일"),
@@ -21,6 +22,14 @@ export const StepperSchema = z.object({
     contentDependency: z.boolean().optional().describe("컨텐츠 의존성 여부"),
     setActiveStep: z.string().optional().describe("현재 스텝(activeStep) 상태를 변경하는 setter 함수명 (문자열, 예: 'setActiveStep'). (index: number) => void 시그니처로, 보통 useState의 setter 함수명을 그대로 전달. nonLinear 모드에서 스텝 클릭 이동 시 컴포넌트가 호출함. 스텝 클릭 동작은 nonLinear + onStepClick/setActiveStep으로만 제어됨")
 });
+export const StepButtonSchema = z.object({
+    prev: z.string().describe("이전 버튼 클릭 핸들러 함수명 (필수)"),
+    next: z.string().describe("다음 버튼 클릭 핸들러 함수명 (필수)"),
+    leftStepTitle: z.string().optional().describe("이전 버튼 텍스트 (기본값: 'left')"),
+    rightStepTitle: z.string().optional().describe("다음 버튼 텍스트 (기본값: 'right')"),
+    leftDisabled: z.boolean().optional().describe("이전 버튼 비활성화"),
+    rightDisabled: z.boolean().optional().describe("다음 버튼 비활성화"),
+});
 // Stepper 컴포넌트 함수 - 배열 반환
 export function createStepperComponent() {
     return [
@@ -35,7 +44,7 @@ export function createStepperComponent() {
       \`\`\``,
             parameters: StepperSchema,
             handler: async (args) => {
-                const { steps, activeStep = 0, orientation = "horizontal", align, isSimpleView, connector, onStepClick, contentPadding, contentHeight, nonLinear, contentDependency } = args;
+                const { steps, activeStep = 0, orientation = "horizontal", align, isSimpleView, isStepCompact, onStepClick, contentPadding, contentHeight, nonLinear, contentDependency } = args;
                 // 태그 props만 생성
                 const propList = [
                     `steps={steps}`,
@@ -43,7 +52,7 @@ export function createStepperComponent() {
                     `orientation=\"${orientation}\"`,
                     align ? `align=\"${align}\"` : '',
                     isSimpleView ? 'isSimpleView' : '',
-                    connector ? `connector={${connector}}` : '',
+                    isStepCompact ? 'isStepCompact' : '',
                     onStepClick ? `onStepClick={${onStepClick}}` : '',
                     contentPadding ? `contentPadding=\"${contentPadding}\"` : '',
                     contentHeight ? `contentHeight=\"${contentHeight}\"` : '',
@@ -64,6 +73,20 @@ export function createStepperComponent() {
                     ]
                 };
             }
-        }
+        },
+        {
+            name: "createStepButton",
+            description: `StepButton 컴포넌트 - Stepper(위자드) 하단의 이전/다음 버튼 쌍
+      leftStepTitle/rightStepTitle 기본값이 'left'/'right'라 실제 화면에서는 반드시 텍스트를 지정하세요.
+      ⚠️ 로더 2.0.21의 TypeScript 타입(useCommonComponents 반환 타입)에는 OpsnowCommonStepButton이 빠져 있습니다 — 런타임에는 있으므로 .tsx에서는 타입 단언이 필요할 수 있습니다.
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonStepButton } = useCommonComponents();
+      \`\`\``,
+            parameters: StepButtonSchema,
+            handler: async (args) => jsxResult(jsxTag("OpsnowCommonStepButton", jsxAttrs(args, { exprKeys: ["prev", "next"] }))),
+        },
     ];
 }

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

@@ -4,7 +4,7 @@ export const TabSchema = z.object({
     items: z
         .array(z.object({
         label: z.string().describe("탭 라벨 - icon이 들어가지 않음 icon 사용 시 반드시 iconName으로 사용"),
-        content: z.string().describe("각 탭에 들어가는 내용"),
+        content: z.string().optional().describe("각 탭에 들어가는 내용 (탭 아래 패널, 선택)"),
         disabled: z
             .boolean()
             .optional()
@@ -24,10 +24,12 @@ export const TabSchema = z.object({
     fullWidth: z.boolean().optional().describe("탭 전체 너비 사용 여부"),
     value: z
         .string()
-        .describe("선택되어 있는 탭 값 - state 변수명(변경했을때 반영가능하도록 useSate), 숫자 "),
+        .describe("선택된 탭 인덱스 상태 변수명 (필수) — 값은 숫자 인덱스(useState(0)). 패널은 이 인덱스로 매칭"),
     depth: z.number().min(1).max(3).optional().describe("탭 깊이 1~3"),
-    onChange: z.string().optional().describe("탭 변경 이벤트 핸들러 함수명"),
+    onChange: z.string().describe("탭 변경 핸들러 함수명 (필수) — (e, newIndex) => setValue(newIndex)"),
     color: z.enum(["primary", "secondary"]).optional().describe("탭 색상"),
+    copilotId: z.string().optional().describe("Copilot 연동 ID — Copilot 매니페스트의 bind.copilotId와 매칭되어 AI가 이 컨트롤을 조작할 수 있게 함. useCommonComponents()로 받은 컴포넌트에서만 동작(로더 HOC가 소비 후 제거)"),
+    copilotTabIds: z.array(z.union([z.string(), z.number()])).optional().describe("Copilot 연동용 탭 의미 ID 목록 — items 순서(value 인덱스)와 1:1 매핑. copilotId와 함께 사용"),
 }).describe("탭 컴포넌트 - createIconsComponent에서 iconName을 반드시 참조하여 string으로 입력");
 // Tab 컴포넌트 함수 - 배열 반환
 export function createTabComponent() {

package/build/components/opsnow-common-toast-popup.js

@@ -70,6 +70,7 @@ export function createToastPopupComponent() {
             description: `토스트 팝업 컴포넌트 - 버튼 클릭 시 간단한 알림 메시지 표시
       토스트 팝업 사용 시 버튼 컴포넌트의 onClick은 반드시 필요함. 
       버튼 컴포넌트 onClick 함수 내부에 showToast를 사용하여 토스트 팝업 표시
+      ⚠️ ToastProvider는 GlobalProvider에 이미 내장(동시 최대 5개) — Provider를 추가로 감싸지 말 것 (중복 시 토스트가 이중으로 쌓임)
 
       **import**:
       import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';

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

@@ -38,7 +38,7 @@ export const TooltipSchema = z.object({
             .describe("아이콘 이름 - iconProps.useIcon이 true일 경우 필수"),
         useIcon: z.boolean().optional().describe("아이콘 사용 여부 - iconName이 있을 경우 iconProps.useIcon은 true여야 함, useMuiIcon 과 동시에 true안됨"),
         useMuiIcon: z.boolean().optional().describe("MUI 아이콘 사용 여부 - useIcon 과 동시에 true 안됨"),
-        label: z.string().describe("툴팁 라벨"),
+        label: z.string().optional().describe("useMuiIcon일 때 표시할 MUI(Material) 아이콘 이름 (예: 'info'). 툴팁 문구가 아님 — 문구는 titleProps.title. 미지정 시 add_icon"),
         colorProps: z
             .object({
             commonColor: z.string().optional().describe("툴팁 색상"),
@@ -50,6 +50,7 @@ export const TooltipSchema = z.object({
                 "info",
                 "success",
                 "warning",
+                "inherit",
             ])
                 .optional()
                 .describe("툴팁 MUI 색상"),
@@ -60,27 +61,18 @@ export const TooltipSchema = z.object({
     })
         .optional()
         .describe("isIconTooltip이 true일 경우 추가 필드"),
-    onOpen: z.string().optional().describe("툴팁 열림 시 실행할 함수명"),
-    onClose: z.string().optional().describe("툴팁 닫힘 시 실행할 함수명"),
-    disableFocusListener: z.boolean().describe("포커스 리스너 비활성화 여부"),
-    disableHoverListener: z.boolean().describe("호버 리스너 비활성화 여부"),
-    disableTouchListener: z.boolean().describe("터치 리스너 비활성화 여부"),
-    disableInteractive: z.boolean().describe("대화형 컴포넌트 비활성화 여부"),
+    disableFocusListener: z.boolean().optional().describe("포커스 리스너 비활성화 여부"),
+    disableHoverListener: z.boolean().optional().describe("호버 리스너 비활성화 여부"),
+    disableTouchListener: z.boolean().optional().describe("터치 리스너 비활성화 여부"),
+    disableInteractive: z.boolean().optional().describe("대화형 컴포넌트 비활성화 여부"),
     enterDelay: z.number().optional().describe("툴팁 진입 지연 시간 (ms)"),
-    enterTouchDelay: z
-        .number()
-        .optional()
-        .describe("툴팁 진입 터치 지연 시간 (ms)"),
-    enterNextDelay: z
-        .number()
-        .optional()
-        .describe("툴팁 진입 다음 지연 시간 (ms)"),
+    enterTouchDelay: z.number().optional().describe("툴팁 진입 터치 지연 시간 (ms)"),
+    enterNextDelay: z.number().optional().describe("툴팁 진입 다음 지연 시간 (ms)"),
     leaveDelay: z.number().optional().describe("툴팁 이탈 지연 시간 (ms)"),
-    leaveNextDelay: z
-        .number()
-        .optional()
-        .describe("툴팁 이탈 다음 지연 시간 (ms)"),
-    open: z.boolean().describe("툴팁 열림 여부"),
+    leaveNextDelay: z.number().optional().describe("툴팁 이탈 다음 지연 시간 (ms)"),
+    open: z.boolean().optional().describe("툴팁 열림 여부 (IconTooltip에서는 무시됨)"),
+    onOpen: z.string().optional().describe("툴팁 열림 시 실행할 함수명 (IconTooltip에서는 무시됨)"),
+    onClose: z.string().optional().describe("툴팁 닫힘 시 실행할 함수명 (IconTooltip에서는 무시됨)"),
     tooltipFullWidth: z
         .boolean()
         .optional()
@@ -107,7 +99,8 @@ export function createTooltipComponent() {
             handler: async (args) => {
                 let code = "";
                 const props = [];
-                if (args.ref) {
+                // ref(openTooltip/closeTooltip)는 OpsnowCommonTooltip 전용
+                if (args.ref && !args.isIconTooltip) {
                     code += `const ${args.ref} = useRef(null);
           // ref 객체에는 openTooltip(), closeTooltip(), getOpenState() 메서드가 제공됨`;
                     props.push(`ref={${args.ref}}`);
@@ -116,14 +109,16 @@ export function createTooltipComponent() {
                     if (args.titleProps.title)
                         props.push(`title="${args.titleProps.title}"`);
                     else if (args.titleProps.imgSrc) {
-                        props.push(`title = {<img src="${args.titleProps.imgSrc}" ${args.titleProps.imgAlt ? "alt= " + args.titleProps.imgAlt : ""} />}`);
+                        props.push(`title = {<img src="${args.titleProps.imgSrc}" ${args.titleProps.imgAlt ? `alt="${args.titleProps.imgAlt}"` : ""} />}`);
                     }
                 }
+                if (args.placement)
+                    props.push(`placement="${args.placement}"`);
                 if (args.iconTooltipProps) {
                     if (args.iconTooltipProps.iconName)
                         props.push(`iconName={"${args.iconTooltipProps.iconName}"}`);
-                    if (args.placement)
-                        props.push(`placement="${args.placement}"`);
+                    if (args.iconTooltipProps.label)
+                        props.push(`label="${args.iconTooltipProps.label}"`);
                     if (args.iconTooltipProps.useIcon)
                         props.push(`useIcon={${args.iconTooltipProps.useIcon}}`);
                     if (args.iconTooltipProps.useMuiIcon)
@@ -137,26 +132,33 @@ export function createTooltipComponent() {
                     if (args.iconTooltipProps.size)
                         props.push(`size={${args.iconTooltipProps.size}}`);
                 }
-                if (args.disableFocusListener)
-                    props.push(`disableFocusListener`);
-                if (args.disableHoverListener)
-                    props.push(`disableHoverListener`);
-                if (args.disableTouchListener)
-                    props.push(`disableTouchListener`);
                 if (args.disableInteractive)
                     props.push(`disableInteractive`);
-                if (args.enterDelay)
-                    props.push(`enterDelay={${args.enterDelay}}`);
-                if (args.enterTouchDelay)
-                    props.push(`enterTouchDelay={${args.enterTouchDelay}}`);
-                if (args.enterNextDelay)
-                    props.push(`enterNextDelay={${args.enterNextDelay}}`);
-                if (args.leaveDelay)
-                    props.push(`leaveDelay={${args.leaveDelay}}`);
-                if (args.leaveNextDelay)
-                    props.push(`leaveNextDelay={${args.leaveNextDelay}}`);
-                if (args.open)
-                    props.push(`open={${args.open}}`);
+                // 리스너·딜레이·open 제어는 IconTooltip이 받지 않음
+                if (!args.isIconTooltip) {
+                    if (args.disableFocusListener)
+                        props.push(`disableFocusListener`);
+                    if (args.disableHoverListener)
+                        props.push(`disableHoverListener`);
+                    if (args.disableTouchListener)
+                        props.push(`disableTouchListener`);
+                    if (args.enterDelay)
+                        props.push(`enterDelay={${args.enterDelay}}`);
+                    if (args.enterTouchDelay)
+                        props.push(`enterTouchDelay={${args.enterTouchDelay}}`);
+                    if (args.enterNextDelay)
+                        props.push(`enterNextDelay={${args.enterNextDelay}}`);
+                    if (args.leaveDelay)
+                        props.push(`leaveDelay={${args.leaveDelay}}`);
+                    if (args.leaveNextDelay)
+                        props.push(`leaveNextDelay={${args.leaveNextDelay}}`);
+                    if (args.open !== undefined)
+                        props.push(`open={${args.open}}`);
+                    if (args.onOpen)
+                        props.push(`onOpen={${args.onOpen}}`);
+                    if (args.onClose)
+                        props.push(`onClose={${args.onClose}}`);
+                }
                 if (args.tooltipFullWidth)
                     props.push(`tooltipFullWidth={${args.tooltipFullWidth}}`);
                 if (args.tooltipPreview) {
@@ -165,10 +167,6 @@ export function createTooltipComponent() {
                     else
                         props.push(`useTooltipPreview={${args.tooltipPreview}}`);
                 }
-                if (args.onOpen)
-                    props.push(`onOpen={${args.onOpen}}`);
-                if (args.onClose)
-                    props.push(`onClose={${args.onClose}}`);
                 if (args.isIconTooltip) {
                     code += `
           <OpsnowCommonIconTooltip ${props.join(" ")}>

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

@@ -16,20 +16,25 @@ const variantList = [
 // z.enum에 [string, ...string[]] 타입으로 변환
 const variantListForEnum = variantList;
 // 1. CommonPalette 색상 그룹과 단계 정의
+// style 2.x 런타임 팔레트 기준 (pink 없음, gray만 0 단계 있음)
 const commonPaletteColors = [
-    'gray', 'darkblue', 'blue', 'skyblue', 'green', 'cyan', 'yellow', 'pink', 'purple', 'orange', 'red',
-    // 필요시 etc. 추가
+    'gray', 'darkblue', 'blue', 'skyblue', 'green', 'cyan', 'yellow', 'purple', 'orange', 'red',
 ];
 const commonPaletteDepths = [
-    '100', '200', '300', '400', '500', '600', '700', '800', '900',
+    '50', '100', '200', '300', '400', '500', '600', '700', '800', '900',
 ];
+const commonPaletteEtc = ['white', 'surface', 'shadow1', 'shadow2'];
 // 2. 모든 조합을 string literal union 타입으로 생성
-const commonPaletteList = commonPaletteColors.flatMap(color => commonPaletteDepths.map(depth => `commonPalette.${color}.${depth}`));
+const commonPaletteList = [
+    'commonPalette.gray.0',
+    ...commonPaletteColors.flatMap(color => commonPaletteDepths.map(depth => `commonPalette.${color}.${depth}`)),
+    ...commonPaletteEtc.map(key => `commonPalette.etc.${key}`),
+];
 const commonPaletteListForEnum = commonPaletteList;
 export const TypographySchema = z.object({
     text: z.string().describe("표시할 텍스트"),
     variant: z.enum(variantListForEnum).describe("타이포그래피 스타일(variant, e-r1~e-b13만 허용)"),
-    color: z.enum(commonPaletteListForEnum).optional().describe("텍스트 색상 또는 CommonPalette 팔레트 값만 허용 (예: commonPalette.green.300)"),
+    color: z.enum(commonPaletteListForEnum).optional().describe("CommonPalette 팔레트 경로 (예: commonPalette.green.300, commonPalette.gray.0, commonPalette.etc.white)"),
     theme: z.enum([
         "primary", "secondary", "warning", "success", "error", "info", "description", "disabled"
     ]).optional().describe("테마 색상"),
@@ -53,6 +58,7 @@ export function createTypographyComponent() {
       
       - variant: e-r1~e-b13만 허용
       - 예제 테이블 스타일에 맞는 Typography만 생성 가능
+      - sx·className은 적용되지 않음 (내부에서 덮어씀) — 여백 등은 바깥 <Box sx={{ ... }}>로 감싸서 적용. 색·굵기·크기는 color·fontWeight·fontSize prop 사용
 
       \`\`\`javascript
       import { OpsnowCommonTypography } from '@opsnow-common/opsnow-common-style'

package/build/index.js

@@ -112,10 +112,12 @@ Just like color tokens (theme.palette.commonPalette), all layout spacing uses th
    cardGap        16px        - gap between elements inside a card
    cardPadding    '16px 20px' - padding of a filter bar / card container
    pagePadding    24px        - page content padding
+   minTouchTarget 44px        - minimum size of touch targets (buttons/icons on mobile)
 
 Use theme in sx/styled: sx={theme => ({ gap: theme.commonSpacing.filterGap })} or sx={{ gap: theme => theme.commonSpacing.filterLabelGap }}.
 Pure CSS (no theme context): var(--opsnow-spacing-filter-gap), --opsnow-spacing-filter-label-gap, --opsnow-spacing-section-gap, --opsnow-spacing-card-gap, --opsnow-spacing-card-padding, --opsnow-spacing-page-padding, --opsnow-spacing-filter-row-gap.
 Outside theme context (constants/utils): import { commonSpacing } from '@opsnow-common/opsnow-common-style'; commonSpacing.filterGap // '24px'.
+Responsive (@opsnow-common/opsnow-common-style): useOpsnowBreakpoint() → { isMobile(<900), isTablet(900~1199), isDesktop(≥1200), isTabletUp, device } only when the render tree differs; for style-only changes use theme.breakpoints.down('md') or the media-query strings mobileOnly / tabletUp / desktopUp inside sx/styled (no re-render). Constants: OPSNOW_BREAKPOINT_VALUES, OPSNOW_MOBILE_MAX_WIDTH (767.95 — current header/grid mobile boundary), OPSNOW_DESKTOP_MIN_WIDTH (1200), OPSNOW_MIN_TOUCH_TARGET (44).
 Found hardcoded px spacing? You MUST replace it: (1) use the token for that purpose → (2) if none fits, use theme.spacing(n) for generic multiples (base 4px → theme.spacing(2) = 8px) → (3) still nothing? DO NOT keep px — ask to add a new token in the style package (one row).
 
 --- Filter layout (Select/Autocomplete/DatePicker/DataGrid search area) ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "type": "module",
   "main": "index.js",
   "bin": {
@@ -12,6 +12,7 @@
   "scripts": {
     "build": "tsc && node -e \"require('fs').chmodSync('build/index.js', '755')\"",
     "build:skill": "npx tsx scripts/build-skill.ts",
+    "sync:icons": "npx tsx scripts/sync-icon-names.ts",
     "build:skill:clean": "rm -rf skills/plugins/opsnow-common-ui-skill/skills && npm run build:skill",
     "build:all": "npm run build && npm run build:skill",
     "start": "node --loader ts-node/esm src/index.ts",