@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.0

package/README.md

@@ -0,0 +1,135 @@
+# OpsNow MCP Common UI Server
+
+## 소개
+OpsNow MCP Common UI는 AI를 활용하여 다양한 웹 UI 프로젝트의 코드를 자동으로 생성하고 관리할 수 있는 MCP(Model Context Protocol) 서버입니다. 반복적인 UI 개발을 자동화하고 표준화합니다.
+
+## 주요 기능
+- AI 기반 웹 UI 코드 및 컴포넌트 자동 생성
+- MCP 프로토콜을 통한 표준화된 인터페이스 제공
+- 18개의 공통 UI 컴포넌트 지원
+
+## 프로젝트 구조
+```
+src/
+├── index.ts                    # 메인 MCP 서버 진입점
+└── components/                 # 개별 컴포넌트 정의
+    ├── opsnow-common-calendar.ts
+    ├── opsnow-common-chart.ts
+    ├── opsnow-common-data-status.ts
+    ├── opsnow-common-dropdown.ts
+    ├── opsnow-common-file-upload.ts
+    ├── opsnow-common-forms.ts
+    ├── opsnow-common-grid.ts
+    ├── opsnow-common-icons.ts
+    ├── opsnow-common-notification.ts
+    ├── opsnow-common-pagination.ts
+    ├── opsnow-common-popup.ts
+    ├── opsnow-common-progress.ts
+    ├── opsnow-common-stepper.ts
+    ├── opsnow-common-storage.ts
+    ├── opsnow-common-tab.ts
+    ├── opsnow-common-tooltip.ts
+    ├── opsnow-finops-common-axios.ts
+    └── opsnow-finops-common-utils.ts
+```
+
+## 지원 컴포넌트
+### UI 컴포넌트
+- **opsnow-common-calendar**: 캘린더 컴포넌트 - 날짜 선택 및 이벤트 관리
+- **opsnow-common-chart**: 차트 컴포넌트 - 다양한 타입의 데이터 시각화
+- **opsnow-common-data-status**: 데이터 상태 컴포넌트 - 로딩, 성공, 에러, 빈 상태 표시
+- **opsnow-common-dropdown**: 드롭다운 컴포넌트 - 옵션 선택 인터페이스
+- **opsnow-common-file-upload**: 파일 업로드 컴포넌트 - 파일 선택 및 업로드 기능
+- **opsnow-common-forms**: 폼 컴포넌트 - 다양한 입력 필드와 유효성 검사
+- **opsnow-common-grid**: 그리드 컴포넌트 - 데이터 테이블 표시 및 관리
+- **opsnow-common-icons**: 아이콘 컴포넌트 - 다양한 아이콘 표시
+- **opsnow-common-notification**: 알림 컴포넌트 - 토스트 메시지 및 알림 표시
+- **opsnow-common-pagination**: 페이지네이션 컴포넌트 - 페이지 이동 및 크기 조절
+- **opsnow-common-popup**: 팝업 컴포넌트 - 모달 다이얼로그 표시
+- **opsnow-common-progress**: 진행률 컴포넌트 - 작업 진행 상황 표시
+- **opsnow-common-stepper**: 스텝퍼 컴포넌트 - 단계별 진행 상황 표시
+- **opsnow-common-storage**: 스토리지 컴포넌트 - 로컬/세션 스토리지 및 쿠키 관리
+- **opsnow-common-tab**: 탭 컴포넌트 - 탭 인터페이스 및 콘텐츠 관리
+- **opsnow-common-tooltip**: 툴팁 컴포넌트 - 요소에 대한 추가 정보 표시
+
+### FinOps 컴포넌트
+- **opsnow-finops-common-axios**: Axios 컴포넌트 - HTTP 요청 처리 및 응답 관리
+- **opsnow-finops-common-utils**: 유틸리티 컴포넌트 - 공통 유틸리티 함수들 (포맷팅, 검증, 생성 등)
+
+## 기술 스택
+- **Node.js**: 서버 런타임
+- **TypeScript**: 타입 안전성과 개발자 경험 향상
+- **MCP SDK**: Model Context Protocol 구현
+- **Zod**: 스키마 검증 및 타입 정의
+
+## 설치 및 시작 방법
+
+### 1. 저장소 클론
+```bash
+git clone <이 저장소 주소>
+cd opsnow-mcp-common-ui
+```
+
+### 2. 패키지 설치
+```bash
+npm install
+```
+
+### 3. MCP 서버 실행
+```bash
+npm start
+```
+
+
+### 5. 빌드 후 실행 테스트
+```bash
+npm run build && npm start
+```
+
+## MCP 도구 사용 예시
+각 컴포넌트는 MCP 도구로 등록되어 AI 어시스턴트가 직접 호출할 수 있습니다:
+
+- "캘린더 컴포넌트를 생성해줘"
+- "차트 컴포넌트로 데이터를 시각화해줘"
+- "폼 컴포넌트로 사용자 입력을 받아줘"
+- "그리드 컴포넌트로 데이터를 표시해줘"
+
+## 라이선스
+MIT License - 누구나 자유롭게 사용할 수 있습니다.
+
+## 기여하기
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## MCP 플랫폼에 서버 추가 방법
+
+### 1. 프로젝트 빌드
+```bash
+npm run build
+```
+
+### 2. MCP 설정에 서버 등록
+MCP 플랫폼의 설정 파일(예: `mcp.config.json` 또는 유사 파일)에 아래와 같이 서버를 추가하세요:
+
+```json
+{
+  "mcpServers": {
+    "opsnow-mcp-common-ui-server": {
+      "command": "node",
+      "args": [
+        "/Users/xxxx/myProject/opsnow-mcp-common-ui-server/build/index.js"
+      ]
+    }
+  }
+}
+```
+
+- `command`: MCP 서버를 실행할 명령어 (여기서는 node)
+- `args`: 빌드된 index.js의 절대 경로
+
+### 3. MCP 플랫폼에서 서버 인식 확인
+MCP 플랫폼을 재시작하거나 서버 목록을 새로고침하면, `opsnow-mcp-common-ui-server`가 정상적으로 등록되어야 합니다.
+

package/build/components/data/icon-names.js

@@ -0,0 +1,129 @@
+// 아이콘 카테고리 정의
+export const IconCategories = {
+    'AI/기술': ['AiBot', 'AiBrain', 'AiChip', 'CloudAi', 'ChipLine', 'ChipSparkLine', 'Code', 'BrowserCode'],
+    '알림/경고': [
+        'AlertBellNewalarmOutline', 'AlertBellOutline', 'AlertMessage', 'AlertWarningCircleFilled',
+        'WarningTriangleFilled', 'WarningTriangleOutline', 'InfoCircleFiller', 'InfoCircleOutline',
+        'DangerousZoneSign'
+    ],
+    '화살표': [
+        'ArrowBoth', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp',
+        'ArrowBothHorizontalCircleFiller', 'ArrowBothVerticalCircleOutline', 'ArrowCircle',
+        'ArrowDownDotCircle', 'ArrowLeftRightSquare', 'ArrowLeftWall', 'ArrowLogout',
+        'ArrowReceive', 'ArrowRecycle', 'ArrowRedo', 'ArrowReload', 'ArrowRightWall',
+        'ArrowTransfer', 'ArrowTwoSide', 'ArrowUndo', 'ArrowUpDotCircle',
+        'ArrowUpDownSquare', 'ArrowUpperRight', 'ArrowWall', 'ArrowWallUp',
+        'ChevronDown', 'ChevronLeft', 'ChevronRight', 'ChevronUp',
+        'ChevronDoubleDown', 'ChevronDoubleLeft', 'ChevronDoubleLeftSm',
+        'ChevronDoubleRight', 'ChevronDoubleRightSm', 'ChevronDoubleUp',
+        'ChevronDownSm', 'ChevronLeftRight', 'ChevronLeftSm', 'ChevronRightSm',
+        'ChevronRightUp'
+    ],
+    '문서/파일': [
+        'Document2', 'DocumentArrowDown', 'DocumentArrowUp', 'DocumentCheck',
+        'DocumentCopyFiles', 'DocumentPenText', 'DocumentPlus', 'DocumentSearch',
+        'DocumentSetting', 'DocumentText', 'DocumentTextAlignLeft1', 'DocumentTextAlignLeft2',
+        'DocumentX', 'DoucumentSquare', 'EnvelopeDocument', 'FolderDocument',
+        'FolderEmpty', 'FolderLine', 'FolderObject', 'FolderX'
+    ],
+    '사용자': [
+        'User', 'UserCircle', 'UserMembers', 'UserMultiOrgCircle', 'UserPlus',
+        'UserSecurity', 'UserStory', 'CustomerSupport'
+    ],
+    '클라우드/서버/DB': [
+        'Cloud', 'CloudLink', 'CloudPlus', 'CloudSecurity', 'CloudWarning',
+        'Db', 'DbCpuChip', 'DbHardDriveDisk', 'DbHardDriveDiskSdCard', 'DbNetwork',
+        'DbServer', 'DbServer2', 'DbSetting', 'CoinsDb', 'Webhook'
+    ],
+    '그래프/차트/데이터': [
+        'GraphArrowUp', 'GraphBar1', 'GraphBar2', 'GraphBarHorizontal', 'GraphBaseline',
+        'GraphCandle', 'GraphLine1', 'GraphLine2', 'GraphLineAverage', 'GraphScatter',
+        'GuageGraph', 'GuageScore', 'HealtyGraphHygiene', 'Asc', 'Desc'
+    ],
+    '로고': [
+        'LogoAndroid', 'LogoApple', 'LogoAws', 'LogoAws2', 'LogoAzure',
+        'LogoEmailOpsnow', 'LogoExcel', 'LogoFacebook1', 'LogoFacebook2',
+        'LogoGcp', 'LogoGoogle', 'LogoLinkedin', 'LogoOracle', 'LogoSymbolOpsnowbg',
+        'LogoUnity', 'LogoWindows', 'LogoYoutube'
+    ],
+    '금융/화폐': [
+        'MoneyBill', 'MoneyBill2', 'MoneyCircle', 'MoneyDocument',
+        'MoneyDocumentTwotone', 'MoneyDollar', 'DollarRotate', 'PocketMoney',
+        'CreditCard', 'CreditCardTwotone'
+    ],
+    '보안/인증': [
+        'Security', 'SecurityPhoneLock', 'SecurityShield1', 'SecurityShield2',
+        'Key2', 'KeySimple', 'PasswordCheck'
+    ],
+    '상태/표시': [
+        'Check1', 'Check2', 'CheckCircleArrrow', 'CheckCircleFiller',
+        'CloseLg', 'CloseSm', 'Plus', 'Minus', 'PlusCircleFilled', 'PlusCircleOutline',
+        'MinusCircleOutline', 'XCircleOutline', 'XClosedFilled', 'Loading',
+        'LoadingWaiting', 'InProgressLoading'
+    ],
+    '모듈/구성요소': [
+        'Module3shape', 'ModuleCheck', 'ModuleComponent', 'ModuleDashboard1',
+        'ModuleDashboard2', 'ModuleOrganization', 'BoardModuleHorizontal',
+        'BoardModuleVerticalFilled', 'BoardModuleVerticalOutline'
+    ],
+    '인터페이스/UI': [
+        'MenuHamburger', 'MenuKebab', 'SixDots', 'MoreCircleFilled', 'MoreCircleOutline',
+        'Setting', 'SettingRotate', 'SliderHorizontal', 'SliderVertical',
+        'ToggleConfigration', 'List', 'NoItem', 'None', 'Target', 'Speaker',
+        'CircleFocus', 'FocusScope', 'Lightbulb', 'Link', 'LinkBold'
+    ],
+    '편집/수정': [
+        'PenEditFilled', 'PenEditOutline', 'EditWrenchFix', 'DeleteBin1',
+        'DeleteBin2', 'DeleteBinFilled', 'DeleteSquare', 'UndoDeleteBin'
+    ],
+    '네비게이션/이동': [
+        'Stairs', 'StairsUp', 'SquareDown', 'SquareLayer', 'SquareMinusDrilldown',
+        'SquareMove', 'SquarePlusDrilldown', 'Square_downArrow', 'Square_upArrow',
+        'Square_upChevron', 'TriangleDown', 'TriangleRight', 'TriangleUp',
+        'TriangleUpdown'
+    ],
+    '시간/진행': [
+        'Clock', 'ClockLapse', 'Calendar', 'CalendarNumber', 'CalendarRetired',
+        'CalendarTwotone', 'Synch1', 'Synch2', 'RotateLeft', 'RotateRi',
+        'RotateRightCircle', 'RotateSp'
+    ],
+    '기타': [
+        'Battery', 'BookmarkFilled', 'BookmarkOutline', 'BubbleEmpty',
+        'BubbleQuestion', 'BubbleText', 'Building', 'BuyShoppingCart',
+        'BagBuyShopping', 'BagBuyShoppingCheck', 'Depth', 'Door', 'DotCircle',
+        'DotOne', 'Download', 'Equal', 'EyeClosed', 'EyeOpen', 'Filter',
+        'Filter2', 'FilterClear', 'Gauge', 'HealthHeart', 'Hierarchy',
+        'InfinityLoof', 'InventoryBox', 'Percent', 'PowerCircle', 'PowerTriangle',
+        'QuestionCircleOutline', 'Rocket', 'RulerMeasure', 'SearchMagnifier',
+        'SearchMagnifierChart', 'SendMessageAirplaneFilled', 'SendMessageAirplaneOutline',
+        'SquareDotline', 'Stamp', 'Star', 'StarScore', 'TableCenter', 'TableLeft',
+        'Tag', 'TagFilled', 'TagHalf', 'TagName', 'TagNo', 'TagValue',
+        'Temperature', 'WebEarth', 'WebMonitoring', 'Wifi'
+    ],
+    '감정/표정': [
+        'FaceBad', 'FaceBadFilled', 'FaceHappy', 'FaceHappyFilled',
+        'FaceSoso', 'FaceSosoFilled', 'FaceVeryBad', 'FaceVeryBadFilled',
+        'FaceVeryHappy', 'FaceVeryHappyFilled'
+    ]
+};
+// 모든 아이콘 이름을 포함하는 맵 생성
+export const IconNamesMap = Object.values(IconCategories).reduce((acc, icons) => {
+    icons.forEach(icon => {
+        acc[icon] = icon;
+    });
+    return acc;
+}, {});
+// 카테고리별 설명 생성 함수
+export function generateIconDescription(options = {}) {
+    const { format = 'flat', separator = ', ' } = options;
+    if (format === 'flat') {
+        return "아이콘 이름 (사용 가능한 아이콘 목록)\n" +
+            Object.entries(IconCategories)
+                .map(([category, icons]) => `- ${category}: ${icons.join(separator)}`)
+                .join('\n');
+    }
+    return "아이콘 이름 (카테고리별 사용 가능한 아이콘 목록)\n\n" +
+        Object.entries(IconCategories)
+            .map(([category, icons]) => `${category}:\n  - ${icons.join('\n  - ')}`)
+            .join('\n\n');
+}

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

@@ -0,0 +1,48 @@
+// Calendar 컴포넌트 예제 데이터
+export const CalendarExamples = [
+    {
+        title: "dateRange",
+        code: `<OpsnowCommonCalendar type="dateRange" />`,
+        description: "날짜 범위 선택이 가능한 달력 예제입니다.",
+    },
+    {
+        title: "date",
+        code: `<OpsnowCommonCalendar type="date" />`,
+        description: "단일 날짜 선택이 가능한 달력 예제입니다.",
+    },
+    {
+        title: "date-minDate-maxDate",
+        code: `<OpsnowCommonCalendar type="date" minDate={dayjs('YYYY-MM-DD')} maxDate={dayjs('YYYY-MM-DD')} />`,
+        description: "단일 날짜 선택이 가능한 달력 예제입니다. 최소 최대 날짜를 설정할 수 있습니다.",
+    },
+    {
+        title: "dateRange-minDate-maxDate",
+        code: `<OpsnowCommonCalendar type="dateRange" minDate={dayjs('YYYY-MM-DD')} maxDate={dayjs('YYYY-MM-DD')} />`,
+        description: "날짜 범위 선택이 가능한 달력 예제입니다. 최소 최대 날짜를 설정할 수 있습니다.",
+    },
+    {
+        title: "dateTimeRange",
+        code: `<OpsnowCommonCalendar type="dateTimeRange" />`,
+        description: "날짜 + 시간 조합으로 범위 선택이 가능한 달력 예제입니다.",
+    },
+    {
+        title: "dateTimeRange-useShortcuts",
+        code: `<OpsnowCommonCalendar type="dateTimeRange" useShortcuts/>`,
+        description: "날짜 범위 선택이 가능한 달력 예제입니다. 지난 3개월과 같은 기본 쇼트컷을 사용할 수 있습니다.",
+    },
+    {
+        title: "dateTimeRange-customShortcuts",
+        code: `<OpsnowCommonCalendar type="dateTimeRange" useShortcuts customShortcuts={customShortcuts} />`,
+        description: "날짜 범위 선택이 가능한 달력 예제입니다. 원하는 쇼트컷을 추가하여 사용할 수 있습니다.",
+    },
+    {
+        title: "dateTime",
+        code: `<OpsnowCommonCalendar type="dateTime" />`,
+        description: "단일 날짜 + 시간 조합으로 선택이 가능한 달력 예제입니다.",
+    },
+    {
+        title: "dateTime-minDate-maxDate",
+        code: `<OpsnowCommonCalendar type="dateTime" minDate={dayjs('YYYY-MM-DD')} maxDate={dayjs('YYYY-MM-DD')} />`,
+        description: "단일 날짜 + 시간 조합으로 선택이 가능한 달력 예제입니다. 최소 최대 날짜를 설정할 수 있습니다.",
+    },
+];