palette-mcp 1.0.0 → 1.1.0

package/src/test-mcp-servers.ts

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+
+import dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import axios from 'axios';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+dotenv.config({ path: join(__dirname, '..', '.env') });
+
+/**
+ * HTTP 타입 MCP 서버 테스트
+ */
+async function testHttpMCPServer(name: string, url: string) {
+  console.log(`\n${'='.repeat(60)}`);
+  console.log(`🔍 ${name} MCP 서버 테스트`);
+  console.log(`URL: ${url}`);
+  console.log('='.repeat(60));
+  
+  try {
+    const client = axios.create({
+      baseURL: url,
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    // JSON-RPC 2.0 요청 생성
+    const request = {
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'tools/list',
+      params: {},
+    };
+
+    console.log('\n📤 요청 전송 중...');
+    const response = await client.post('', request);
+    
+    console.log('✅ 연결 성공!');
+    console.log('\n📥 응답 상태:', response.status);
+    console.log('📥 응답 데이터:', JSON.stringify(response.data, null, 2));
+    
+    if (response.data.error) {
+      console.error('❌ MCP 에러:', response.data.error);
+      return false;
+    }
+
+    const tools = response.data.result?.tools || [];
+    console.log(`\n📋 도구 개수: ${tools.length}`);
+    
+    if (tools.length > 0) {
+      console.log('\n📝 도구 목록:');
+      tools.forEach((tool: any, index: number) => {
+        console.log(`\n${index + 1}. ${tool.name}`);
+        if (tool.description) {
+          console.log(`   설명: ${tool.description}`);
+        }
+        if (tool.inputSchema?.properties) {
+          console.log(`   파라미터:`);
+          Object.entries(tool.inputSchema.properties).forEach(([key, value]: [string, any]) => {
+            console.log(`     - ${key}: ${value.type || 'any'}`);
+          });
+        }
+      });
+      return true;
+    } else {
+      console.log('⚠️  도구가 없습니다.');
+      return false;
+    }
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.code === 'ECONNREFUSED') {
+        console.error('❌ 연결 거부됨 - 서버가 실행 중이지 않습니다.');
+      } else if (error.code === 'ETIMEDOUT') {
+        console.error('❌ 타임아웃 - 서버가 응답하지 않습니다.');
+      } else if (error.response) {
+        console.error(`❌ HTTP 에러: ${error.response.status} ${error.response.statusText}`);
+        console.error('응답 데이터:', error.response.data);
+      } else {
+        console.error('❌ 연결 에러:', error.message);
+      }
+    } else {
+      console.error('❌ 예상치 못한 에러:', error);
+    }
+    return false;
+  }
+}
+
+/**
+ * stdio 타입 MCP 서버는 직접 테스트하기 어려우므로 정보만 출력
+ */
+function testStdioMCPServer(name: string, config: any) {
+  console.log(`\n${'='.repeat(60)}`);
+  console.log(`ℹ️  ${name} MCP 서버 정보`);
+  console.log('='.repeat(60));
+  console.log('타입: stdio');
+  console.log('명령:', config.command);
+  console.log('인자:', config.args?.join(' ') || '없음');
+  console.log('\n💡 stdio 타입 MCP 서버는 Cursor가 직접 관리합니다.');
+  console.log('   "Loading tools" 상태가 지속되면:');
+  console.log('   1. Cursor를 재시작해보세요');
+  console.log('   2. MCP 서버 설정을 확인하세요');
+  console.log('   3. 환경 변수가 올바르게 설정되었는지 확인하세요');
+  if (config.env) {
+    console.log('\n환경 변수:');
+    Object.keys(config.env).forEach(key => {
+      if (key.includes('TOKEN') || key.includes('KEY') || key.includes('SECRET')) {
+        console.log(`   ${key}: *** (보안상 숨김)`);
+      } else {
+        console.log(`   ${key}: ${config.env[key]}`);
+      }
+    });
+  }
+}
+
+async function main() {
+  console.log('🚀 MCP 서버 연결 테스트 시작\n');
+
+  // mcp.json 파일 읽기
+  const mcpConfigPath = join(process.env.HOME || '', '.cursor', 'mcp.json');
+  let mcpConfig: any = {};
+  
+  try {
+    const fs = await import('fs/promises');
+    const configContent = await fs.readFile(mcpConfigPath, 'utf-8');
+    mcpConfig = JSON.parse(configContent);
+    console.log(`✅ mcp.json 파일 로드 성공: ${mcpConfigPath}\n`);
+  } catch (error) {
+    console.error(`❌ mcp.json 파일을 읽을 수 없습니다: ${mcpConfigPath}`);
+    console.error('에러:', error);
+    process.exit(1);
+  }
+
+  if (!mcpConfig.mcpServers) {
+    console.error('❌ mcpServers 설정을 찾을 수 없습니다.');
+    process.exit(1);
+  }
+
+  const servers = mcpConfig.mcpServers;
+  const httpServers: Array<{ name: string; url: string }> = [];
+  const stdioServers: Array<{ name: string; config: any }> = [];
+
+  // 서버 분류
+  Object.entries(servers).forEach(([name, config]: [string, any]) => {
+    if (config.type === 'http' || config.url) {
+      httpServers.push({ name, url: config.url });
+    } else if (config.type === 'stdio' || config.command) {
+      stdioServers.push({ name, config });
+    }
+  });
+
+  // HTTP 타입 서버 테스트
+  if (httpServers.length > 0) {
+    console.log(`\n📡 HTTP 타입 MCP 서버 (${httpServers.length}개):`);
+    for (const server of httpServers) {
+      await testHttpMCPServer(server.name, server.url);
+    }
+  }
+
+  // stdio 타입 서버 정보 출력
+  if (stdioServers.length > 0) {
+    console.log(`\n\n📡 stdio 타입 MCP 서버 (${stdioServers.length}개):`);
+    for (const server of stdioServers) {
+      testStdioMCPServer(server.name, server.config);
+    }
+  }
+
+  console.log(`\n${'='.repeat(60)}`);
+  console.log('✅ 테스트 완료');
+  console.log('='.repeat(60));
+}
+
+main().catch((error) => {
+  console.error('❌ 치명적 오류:', error);
+  process.exit(1);
+});
+

package/src/test.ts

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+import { DesignSystemService } from './services/design-system.js';
+import { FigmaService } from './services/figma.js';
+import { CodeGenerator } from './services/code-generator.js';
+
+async function testServices() {
+  console.log('🧪 Testing Palette Services...\n');
+
+  // Test Design System Service
+  console.log('1. Testing Design System Service...');
+  const designSystemService = new DesignSystemService();
+  
+  const reactComponents = await designSystemService.getAvailableComponents('react');
+  console.log(`✅ Found ${reactComponents.length} React components`);
+  
+  const vueComponents = await designSystemService.getAvailableComponents('vue');
+  console.log(`✅ Found ${vueComponents.length} Vue components`);
+  
+  // Test component matching
+  const buttonMatch = designSystemService.findBestMatch('button', 'react');
+  console.log(`✅ Button match: ${buttonMatch?.name || 'Not found'}`);
+  
+  const inputMatch = designSystemService.findBestMatch('text-field', 'vue');
+  console.log(`✅ Input match: ${inputMatch?.name || 'Not found'}\n`);
+
+  // Test Figma Service (without actual API call)
+  console.log('2. Testing Figma Service...');
+  const figmaService = new FigmaService();
+  
+  // Test URL parsing
+  try {
+    const fileId = figmaService['extractFileId']('https://www.figma.com/file/abc123/Test-File');
+    console.log(`✅ URL parsing works: ${fileId}`);
+  } catch (error) {
+    console.log(`❌ URL parsing failed: ${error}`);
+  }
+
+  // Test Code Generator
+  console.log('3. Testing Code Generator...');
+  const codeGenerator = new CodeGenerator(designSystemService);
+  
+  // Mock Figma data
+  const mockFigmaData = {
+    document: {
+      id: 'root',
+      name: 'Test Component',
+      type: 'FRAME',
+      children: [
+        {
+          id: 'button-1',
+          name: 'Submit Button',
+          type: 'RECTANGLE',
+          characters: 'Submit',
+          absoluteBoundingBox: { x: 0, y: 0, width: 100, height: 40 },
+          cornerRadius: 8,
+          fills: [{
+            type: 'SOLID',
+            color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }
+          }]
+        }
+      ]
+    },
+    components: {},
+    styles: {},
+    name: 'Test File',
+    lastModified: '2024-01-01',
+    thumbnailUrl: ''
+  };
+
+  try {
+    const reactCode = await codeGenerator.generateReactComponent(mockFigmaData, 'TestComponent');
+    console.log('✅ React code generation works');
+    console.log('Generated React component preview:');
+    console.log(reactCode.split('\n').slice(0, 10).join('\n') + '...\n');
+
+    const vueCode = await codeGenerator.generateVueComponent(mockFigmaData, 'TestComponent');
+    console.log('✅ Vue code generation works');
+    console.log('Generated Vue component preview:');
+    console.log(vueCode.split('\n').slice(0, 10).join('\n') + '...\n');
+  } catch (error) {
+    console.log(`❌ Code generation failed: ${error}`);
+  }
+
+  console.log('🎉 All tests completed!');
+}
+
+// Run tests
+testServices().catch(console.error);

package/src/utils/figma-mcp-client.ts

@@ -0,0 +1,193 @@
+import axios, { AxiosInstance } from 'axios';
+
+/**
+ * Figma Desktop MCP 서버와 통신하는 클라이언트
+ * HTTP 기반 MCP 서버와 JSON-RPC 2.0 프로토콜로 통신
+ */
+export class FigmaMCPClient {
+  private client: AxiosInstance;
+  private baseUrl: string;
+  private requestId: number = 0;
+
+  constructor(baseUrl: string = 'http://127.0.0.1:3845/mcp') {
+    this.baseUrl = baseUrl;
+    this.client = axios.create({
+      baseURL: baseUrl,
+      timeout: 30000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  /**
+   * JSON-RPC 2.0 요청 생성
+   */
+  private createRequest(method: string, params?: any): any {
+    return {
+      jsonrpc: '2.0',
+      id: ++this.requestId,
+      method,
+      params: params || {},
+    };
+  }
+
+  /**
+   * MCP 서버에 요청 전송
+   * HTTP 기반 MCP 서버는 JSON-RPC 2.0 프로토콜을 사용
+   */
+  private async sendRequest(method: string, params?: any): Promise<any> {
+    try {
+      const request = this.createRequest(method, params);
+      
+      // HTTP 기반 MCP 서버에 POST 요청
+      const response = await this.client.post('', request);
+
+      if (response.data.error) {
+        throw new Error(
+          `MCP Error: ${response.data.error.message || 'Unknown error'}`
+        );
+      }
+
+      return response.data.result;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        // 연결 실패 시 null 반환 (폴백을 위해)
+        if (
+          error.code === 'ECONNREFUSED' ||
+          error.code === 'ETIMEDOUT' ||
+          error.response?.status === 404
+        ) {
+          console.warn(`Figma MCP 서버 연결 실패 (${error.code || error.response?.status}), REST API로 폴백합니다.`);
+          return null;
+        }
+        throw new Error(
+          `Figma MCP connection error: ${error.message}`
+        );
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * 사용 가능한 도구 목록 가져오기
+   */
+  async listTools(): Promise<any[]> {
+    const result = await this.sendRequest('tools/list');
+    return result?.tools || [];
+  }
+
+  /**
+   * MCP 도구 호출
+   */
+  private async callTool(toolName: string, args: any): Promise<any> {
+    try {
+      const result = await this.sendRequest('tools/call', {
+        name: toolName,
+        arguments: args,
+      });
+      return result;
+    } catch (error) {
+      console.warn(`Figma MCP 도구 ${toolName} 호출 실패:`, error);
+      return null;
+    }
+  }
+
+  /**
+   * Figma 파일 데이터 가져오기
+   * Figma MCP 서버의 도구를 사용하여 파일 정보 가져오기
+   */
+  async getFileData(fileId: string, nodeId?: string): Promise<any> {
+    try {
+      // 먼저 도구 목록을 확인
+      const tools = await this.listTools();
+      
+      if (!tools || tools.length === 0) {
+        return null;
+      }
+
+      // 파일 데이터를 가져오는 도구 찾기
+      // Figma Desktop MCP 서버가 제공하는 일반적인 도구 이름들 시도
+      const possibleToolNames = [
+        'get_file',
+        'getFile',
+        'fetch_file',
+        'fetchFile',
+        'get_figma_file',
+        'figma_get_file',
+      ];
+
+      for (const toolName of possibleToolNames) {
+        const tool = tools.find((t: any) => t.name === toolName);
+        if (tool) {
+          const params: any = { fileId };
+          if (nodeId) {
+            params.nodeId = nodeId;
+          }
+          const result = await this.callTool(toolName, params);
+          if (result) {
+            return result;
+          }
+        }
+      }
+
+      // 도구를 찾지 못한 경우 null 반환 (폴백 사용)
+      return null;
+    } catch (error) {
+      console.warn('Figma MCP 파일 데이터 가져오기 실패:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Figma 노드 정보 가져오기
+   */
+  async getNodeData(fileId: string, nodeId: string): Promise<any> {
+    try {
+      const tools = await this.listTools();
+      
+      if (!tools || tools.length === 0) {
+        return null;
+      }
+
+      // 노드 데이터를 가져오는 도구 찾기
+      const possibleToolNames = [
+        'get_node',
+        'getNode',
+        'fetch_node',
+        'fetchNode',
+        'get_figma_node',
+        'figma_get_node',
+      ];
+
+      for (const toolName of possibleToolNames) {
+        const tool = tools.find((t: any) => t.name === toolName);
+        if (tool) {
+          const result = await this.callTool(toolName, { fileId, nodeId });
+          if (result) {
+            return result;
+          }
+        }
+      }
+
+      // 노드 전용 도구가 없으면 파일 도구에 nodeId를 전달하여 시도
+      return await this.getFileData(fileId, nodeId);
+    } catch (error) {
+      console.warn('Figma MCP 노드 데이터 가져오기 실패:', error);
+      return null;
+    }
+  }
+
+  /**
+   * MCP 서버 연결 상태 확인
+   */
+  async isAvailable(): Promise<boolean> {
+    try {
+      await this.listTools();
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+}
+

package/src/utils/request-manager.ts

@@ -0,0 +1,101 @@
+import { mkdir, writeFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * 요청 ID 생성 (타임스탬프 + 랜덤 문자열)
+ */
+export function generateRequestId(): string {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).substring(2, 9);
+  return `${timestamp}-${random}`;
+}
+
+/**
+ * 요청별 폴더 경로 생성
+ */
+export function getRequestFolderPath(requestId: string): string {
+  const projectRoot = join(__dirname, '..', '..');
+  return join(projectRoot, 'dist', 'requests', requestId);
+}
+
+/**
+ * 요청 폴더 생성
+ */
+export async function createRequestFolder(requestId: string): Promise<string> {
+  const folderPath = getRequestFolderPath(requestId);
+  
+  if (!existsSync(folderPath)) {
+    await mkdir(folderPath, { recursive: true });
+  }
+  
+  return folderPath;
+}
+
+/**
+ * 파일 저장
+ */
+export async function saveFile(
+  requestId: string,
+  filename: string,
+  content: string
+): Promise<string> {
+  const folderPath = await createRequestFolder(requestId);
+  const filePath = join(folderPath, filename);
+  await writeFile(filePath, content, 'utf-8');
+  return filePath;
+}
+
+/**
+ * 바이너리 파일 저장 (이미지 등)
+ */
+export async function saveBinaryFile(
+  requestId: string,
+  filename: string,
+  content: Buffer
+): Promise<string> {
+  const folderPath = await createRequestFolder(requestId);
+  const filePath = join(folderPath, filename);
+  await writeFile(filePath, content);
+  return filePath;
+}
+
+/**
+ * 요청 메타데이터 저장
+ */
+export interface RequestMetadata {
+  requestId: string;
+  type: 'react' | 'vue';
+  componentName: string;
+  figmaUrl: string;
+  nodeId?: string;
+  createdAt: string;
+  files: Array<{
+    name: string;
+    path: string;
+  }>;
+}
+
+export async function saveMetadata(
+  requestId: string,
+  metadata: Omit<RequestMetadata, 'requestId' | 'createdAt' | 'files'>
+): Promise<string> {
+  const folderPath = await createRequestFolder(requestId);
+  const metadataPath = join(folderPath, 'metadata.json');
+  
+  const fullMetadata: RequestMetadata = {
+    requestId,
+    createdAt: new Date().toISOString(),
+    files: [],
+    ...metadata,
+  };
+  
+  await writeFile(metadataPath, JSON.stringify(fullMetadata, null, 2), 'utf-8');
+  return metadataPath;
+}
+