palette-mcp 1.0.0

package/dist/services/code-generator.js

@@ -0,0 +1,1073 @@
+import { saveFile, saveBinaryFile, saveMetadata, generateRequestId, getRequestFolderPath } from '../utils/request-manager.js';
+import puppeteer from 'puppeteer';
+export class CodeGenerator {
+    designSystemService;
+    constructor(designSystemService) {
+        this.designSystemService = designSystemService;
+    }
+    /**
+     * Figma 데이터에서 React 컴포넌트 생성
+     */
+    async generateReactComponent(figmaData, componentName) {
+        const imports = new Set();
+        const dependencies = new Set();
+        let componentCode = '';
+        // Figma 구조 분석 및 디자인 시스템 컴포넌트 매핑
+        const mappedComponents = this.mapFigmaToDesignSystem(figmaData.document, 'react');
+        // Generate imports
+        for (const mapping of mappedComponents) {
+            if (mapping.designSystemComponent) {
+                imports.add(`import { ${mapping.designSystemComponent.name} } from '${mapping.designSystemComponent.importPath}';`);
+                if (mapping.designSystemComponent.dependencies) {
+                    mapping.designSystemComponent.dependencies.forEach(dep => dependencies.add(dep));
+                }
+            }
+        }
+        // 컴포넌트 구조 생성
+        componentCode += this.generateReactComponentStructure(componentName, figmaData.document, mappedComponents);
+        // 최상단에 임포트 추가
+        const importsCode = Array.from(imports).join('\n');
+        const dependenciesCode = Array.from(dependencies).length > 0
+            ? `\n// Dependencies: ${Array.from(dependencies).join(', ')}`
+            : '';
+        // GitHub 저장소 정보 추가
+        const repositoryInfo = `// Design System Components from GitHub:
+// React: https://github.com/dealicious-inc/ssm-web/tree/master/packages/design-system-react
+// Vue: https://github.com/dealicious-inc/ssm-web/tree/master/packages/design-system
+// 
+// To use these components, install the packages:
+// npm install @dealicious/design-system-react @dealicious/design-system
+// or
+// yarn add @dealicious/design-system-react @dealicious/design-system
+`;
+        return `${repositoryInfo}\n${importsCode}${dependenciesCode}\n\n${componentCode}`;
+    }
+    /**
+     * HTML을 렌더링하여 이미지로 변환
+     */
+    async generateImagePreview(htmlContent, componentName, requestId) {
+        const browser = await puppeteer.launch({
+            headless: true,
+            args: ['--no-sandbox', '--disable-setuid-sandbox']
+        });
+        try {
+            const page = await browser.newPage();
+            // 뷰포트 설정
+            await page.setViewport({
+                width: 1200,
+                height: 800,
+                deviceScaleFactor: 2
+            });
+            // HTML 콘텐츠 설정
+            await page.setContent(htmlContent, {
+                waitUntil: 'networkidle0'
+            });
+            // 컴포넌트가 렌더링될 때까지 대기
+            await page.waitForSelector('#root', { timeout: 5000 }).catch(() => {
+                // root 요소가 없어도 계속 진행
+            });
+            // 추가 대기 (렌더링 완료를 위해)
+            await page.waitForTimeout(1000);
+            // 페이지 높이 계산
+            const bodyHeight = await page.evaluate(() => {
+                return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+            });
+            // 스크린샷 촬영
+            const screenshot = await page.screenshot({
+                type: 'png',
+                fullPage: true,
+                clip: {
+                    x: 0,
+                    y: 0,
+                    width: 1200,
+                    height: Math.min(bodyHeight, 8000) // 최대 8000px
+                }
+            });
+            // 이미지 파일 저장
+            const imageFile = await saveBinaryFile(requestId, `${componentName}.png`, screenshot);
+            return imageFile;
+        }
+        finally {
+            await browser.close();
+        }
+    }
+    /**
+     * React 컴포넌트 생성 및 파일 저장
+     */
+    async generateAndSaveReactComponent(figmaData, componentName, figmaUrl, nodeId, previewType = 'both') {
+        const requestId = generateRequestId();
+        const folderPath = getRequestFolderPath(requestId);
+        // React 컴포넌트 코드 생성
+        const reactCode = await this.generateReactComponent(figmaData, componentName);
+        // 컴포넌트 파일 저장
+        const componentFile = await saveFile(requestId, `${componentName}.tsx`, reactCode);
+        // HTML 미리보기 파일 생성
+        const htmlContent = this.generateHTMLPreview(reactCode, componentName);
+        let htmlFile;
+        let imageFile;
+        // 사용자 선택에 따라 파일 생성
+        if (previewType === 'html' || previewType === 'both') {
+            htmlFile = await saveFile(requestId, `${componentName}.html`, htmlContent);
+        }
+        if (previewType === 'image' || previewType === 'both') {
+            try {
+                imageFile = await this.generateImagePreview(htmlContent, componentName, requestId);
+            }
+            catch (error) {
+                console.warn('이미지 생성 실패:', error);
+                // 이미지 생성 실패 시에도 계속 진행
+            }
+        }
+        // 메타데이터 저장
+        const metadataFile = await saveMetadata(requestId, {
+            type: 'react',
+            componentName,
+            figmaUrl,
+            nodeId,
+        });
+        return {
+            requestId,
+            folderPath,
+            componentFile,
+            htmlFile,
+            imageFile,
+            metadataFile,
+        };
+    }
+    /**
+     * Figma 데이터에서 Vue 컴포넌트 생성
+     */
+    async generateVueComponent(figmaData, componentName) {
+        const imports = new Set();
+        const dependencies = new Set();
+        let componentCode = '';
+        // Figma 구조 분석 및 디자인 시스템 컴포넌트 매핑
+        const mappedComponents = this.mapFigmaToDesignSystem(figmaData.document, 'vue');
+        // Generate imports
+        for (const mapping of mappedComponents) {
+            if (mapping.designSystemComponent) {
+                // Vue는 default import 사용하는 것을 권장
+                imports.add(`import ${mapping.designSystemComponent.name} from '${mapping.designSystemComponent.importPath}';`);
+                if (mapping.designSystemComponent.dependencies) {
+                    mapping.designSystemComponent.dependencies.forEach(dep => dependencies.add(dep));
+                }
+            }
+        }
+        // 컴포넌트 구조 생성
+        componentCode += this.generateVueComponentStructure(componentName, figmaData.document, mappedComponents);
+        // 최상단에 임포트 추가
+        const importsCode = Array.from(imports).join('\n');
+        const dependenciesCode = Array.from(dependencies).length > 0
+            ? `\n// Dependencies: ${Array.from(dependencies).join(', ')}`
+            : '';
+        return `${importsCode}${dependenciesCode}\n\n${componentCode}`;
+    }
+    /**
+     * Vue 컴포넌트 생성 및 파일 저장
+     */
+    async generateAndSaveVueComponent(figmaData, componentName, figmaUrl, nodeId, previewType = 'both') {
+        const requestId = generateRequestId();
+        const folderPath = getRequestFolderPath(requestId);
+        // Vue 컴포넌트 코드 생성
+        const vueCode = await this.generateVueComponent(figmaData, componentName);
+        // 컴포넌트 파일 저장
+        const componentFile = await saveFile(requestId, `${componentName}.vue`, vueCode);
+        // HTML 미리보기 파일 생성
+        const htmlContent = this.generateHTMLPreview(vueCode, componentName, 'vue');
+        let htmlFile;
+        let imageFile;
+        // 사용자 선택에 따라 파일 생성
+        if (previewType === 'html' || previewType === 'both') {
+            htmlFile = await saveFile(requestId, `${componentName}.html`, htmlContent);
+        }
+        if (previewType === 'image' || previewType === 'both') {
+            try {
+                imageFile = await this.generateImagePreview(htmlContent, componentName, requestId);
+            }
+            catch (error) {
+                console.warn('이미지 생성 실패:', error);
+                // 이미지 생성 실패 시에도 계속 진행
+            }
+        }
+        // 메타데이터 저장
+        const metadataFile = await saveMetadata(requestId, {
+            type: 'vue',
+            componentName,
+            figmaUrl,
+            nodeId,
+        });
+        return {
+            requestId,
+            folderPath,
+            componentFile,
+            htmlFile,
+            imageFile,
+            metadataFile,
+        };
+    }
+    /**
+     * HTML 미리보기 파일 생성
+     */
+    generateHTMLPreview(componentCode, componentName, framework = 'react') {
+        const escapedCode = this.escapeHtml(componentCode);
+        return `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${componentName} - Preview</title>
+  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      background-color: #f5f5f5;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .preview {
+      margin-top: 30px;
+      padding: 20px;
+      border: 2px dashed #dee2e6;
+      border-radius: 4px;
+      background: #fff;
+      min-height: 200px;
+    }
+    .error {
+      color: red;
+      padding: 10px;
+      background: #ffe6e6;
+      border: 1px solid #ff9999;
+      border-radius: 4px;
+      margin: 10px 0;
+    }
+    .mock-button {
+      display: inline-block;
+      padding: 8px 16px;
+      margin: 4px;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .mock-button:hover {
+      background: #0056b3;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>${componentName} - ${framework === 'react' ? 'React' : 'Vue'} 컴포넌트 미리보기</h1>
+    <div class="preview">
+      <div id="root"></div>
+    </div>
+  </div>
+  <script type="text/babel">
+    // 모의 Design System 컴포넌트 정의
+    const Button = ({ children, size, ...props }) => {
+      const sizeStyle = size === 'small' ? { padding: '4px 8px', fontSize: '12px' } : 
+                       size === 'large' ? { padding: '12px 24px', fontSize: '16px' } : 
+                       { padding: '8px 16px', fontSize: '14px' };
+      return React.createElement('button', {
+        style: { ...sizeStyle, background: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', margin: '2px' },
+        ...props
+      }, children);
+    };
+    
+    const LayerPopup = ({ children, isOpen, onClose, ...props }) => {
+      if (!isOpen) return null;
+      return React.createElement('div', {
+        style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' },
+        onClick: onClose,
+        ...props
+      }, React.createElement('div', {
+        style: { background: 'white', padding: '20px', borderRadius: '8px', maxWidth: '90%', maxHeight: '90%', overflow: 'auto' },
+        onClick: (e) => e.stopPropagation()
+      }, children));
+    };
+    
+    const Tab = ({ children, tabs, activeTab, onTabChange, ...props }) => {
+      return React.createElement('div', { style: { borderBottom: '1px solid #ddd' }, ...props }, children);
+    };
+    
+    const Text = ({ children, variant, size, ...props }) => {
+      const style = {
+        fontSize: size === 'small' ? '12px' : size === 'large' ? '18px' : '14px',
+        fontWeight: variant === 'heading' ? 'bold' : 'normal',
+        ...props.style
+      };
+      return React.createElement('span', { style, ...props }, children);
+    };
+    
+    const LabeledText = ({ label, value, ...props }) => {
+      return React.createElement('div', { style: { margin: '4px 0' }, ...props },
+        React.createElement('span', { style: { fontWeight: 'bold', marginRight: '8px' } }, label + ':'),
+        React.createElement('span', {}, value || '')
+      );
+    };
+    
+    const Input = ({ placeholder, value, onChange, ...props }) => {
+      return React.createElement('input', {
+        type: 'text',
+        placeholder,
+        value: value || '',
+        onChange: onChange || (() => {}),
+        style: { padding: '8px', border: '1px solid #ddd', borderRadius: '4px', margin: '4px', width: '200px' },
+        ...props
+      });
+    };
+    
+    const Chip = ({ children, variant, size, onDelete, ...props }) => {
+      return React.createElement('span', {
+        style: {
+          display: 'inline-block',
+          padding: '4px 8px',
+          background: variant === 'filled' ? '#007bff' : '#f0f0f0',
+          color: variant === 'filled' ? 'white' : 'black',
+          borderRadius: '16px',
+          margin: '2px',
+          fontSize: size === 'small' ? '12px' : '14px'
+        },
+        ...props
+      }, children, onDelete && React.createElement('button', {
+        onClick: onDelete,
+        style: { marginLeft: '8px', background: 'none', border: 'none', cursor: 'pointer' }
+      }, '×'));
+    };
+    
+    const Switch = ({ checked, onChange, label, ...props }) => {
+      return React.createElement('label', { style: { display: 'flex', alignItems: 'center', margin: '4px' }, ...props },
+        React.createElement('input', {
+          type: 'checkbox',
+          checked: checked || false,
+          onChange: onChange || (() => {}),
+          style: { marginRight: '8px' }
+        }),
+        label && React.createElement('span', {}, label)
+      );
+    };
+    
+    const ArrowPagination = ({ currentPage, totalPages, onPageChange, children, ...props }) => {
+      return React.createElement('div', { style: { display: 'flex', alignItems: 'center', margin: '4px' }, ...props }, children);
+    };
+    
+    const Accordion = ({ title, children, defaultExpanded, disabled, ...props }) => {
+      const [expanded, setExpanded] = React.useState(defaultExpanded || false);
+      if (disabled) return null;
+      return React.createElement('div', { style: { border: '1px solid #ddd', borderRadius: '4px', margin: '4px' }, ...props },
+        React.createElement('div', {
+          onClick: () => setExpanded(!expanded),
+          style: { padding: '8px', cursor: 'pointer', background: '#f5f5f5', fontWeight: 'bold' }
+        }, title || 'Accordion'),
+        expanded && React.createElement('div', { style: { padding: '8px' } }, children)
+      );
+    };
+    
+    // 컴포넌트 코드 정리
+    const cleanCode = ${JSON.stringify(componentCode)}
+      .replace(/import[^;]+;/g, '')
+      .replace(/\/\/[^\\n]*/g, '')
+      .replace(/interface[^\\{]*\\{[^\\}]*\\}/g, '')
+      .replace(/React\\.FC<[^>]*>/g, '')
+      .replace(/export default ${componentName};/g, '')
+      .replace(new RegExp(\`const ${componentName}:.*?=\`, 'g'), \`const ${componentName} = \`)
+      // 문법 오류 수정: 잘못된 prop 형식 수정
+      .replace(/<Button\\s+>([^<]+)\\s+size="([^"]+)">/g, '<Button size="$2">$1</Button>')
+      .replace(/<Button\\s+>([^<]+)\\s+size="([^"]+)">/g, '<Button size="$2">$1</Button>')
+      // 빈 Button 태그 정리
+      .replace(/<Button\\s*><\\/Button>/g, '<Button></Button>')
+      .replace(/<Button\\s+size="([^"]+)"\\s*><\\/Button>/g, '<Button size="$1"></Button>');
+    
+    try {
+      const transformedCode = Babel.transform(cleanCode, { presets: ['react'] }).code;
+      eval(transformedCode);
+      const root = ReactDOM.createRoot(document.getElementById('root'));
+      root.render(React.createElement(${componentName}, {}));
+    } catch (error) {
+      console.error('렌더링 오류:', error);
+      const errorDiv = document.getElementById('root');
+      errorDiv.innerHTML = '<div class="error"><strong>렌더링 오류:</strong><br>' + 
+        error.message + '<br><br><strong>스택:</strong><br>' + 
+        (error.stack || '스택 정보 없음') + '</div>';
+    }
+  </script>
+</body>
+</html>`;
+    }
+    /**
+     * HTML 이스케이프
+     */
+    escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, (m) => map[m]);
+    }
+    /**
+     * Figma 노드를 디자인 시스템 컴포넌트에 매핑
+     */
+    mapFigmaToDesignSystem(node, framework) {
+        const mappings = [];
+        // 현재 노드 분석
+        const mapping = this.analyzeNode(node, framework);
+        mappings.push(mapping);
+        // 자식 노드 재귀적 분석
+        if (node.children) {
+            for (const child of node.children) {
+                mappings.push(...this.mapFigmaToDesignSystem(child, framework));
+            }
+        }
+        return mappings;
+    }
+    /**
+     * 단일 Figma 노드 분석 및 디자인 시스템 최적 매칭 찾기
+     * 항상 디자인 시스템 컴포넌트를 반환 - null이 아님
+     */
+    analyzeNode(node, framework) {
+        // 보이지 않는 노드 건너뛰기
+        if (node.visible === false) {
+            const defaultComponent = this.designSystemService.getComponent('Button', framework);
+            if (!defaultComponent) {
+                // Button은 항상 사용 가능하므로 이 경우는 절대 발생하지 않음
+                throw new Error('No Design System components available');
+            }
+            return {
+                figmaNode: node,
+                designSystemComponent: defaultComponent,
+                confidence: 0.1,
+            };
+        }
+        // 노드 속성에 따라 매칭 컴포넌트 찾기
+        let component = this.findComponentByNodeProperties(node, framework);
+        // 매칭 컴포넌트가 없으면 노드 유형에 따라 기본 컴포넌트 사용
+        if (!component) {
+            component = this.getDefaultComponentByType(node, framework);
+        }
+        // component가 null인 경우 (컨테이너 역할만 하는 경우) div로 처리하기 위해 특별한 컴포넌트 사용
+        // 실제로는 generateReactJSX에서 null 체크하여 div로 처리
+        if (!component) {
+            // div로 처리하기 위한 플레이스홀더 컴포넌트 생성
+            component = {
+                name: 'div',
+                description: 'Container div',
+                category: 'Layout',
+                importPath: '',
+                props: [],
+                examples: [],
+            };
+        }
+        return {
+            figmaNode: node,
+            designSystemComponent: component,
+            confidence: component.name === 'div' ? 0.5 : 0.8,
+        };
+    }
+    /**
+     * Figma 노드 속성에 따라 디자인 시스템 컴포넌트 찾기
+     * 노드 타입, 이름, 구조, 속성을 종합적으로 분석하여 적절한 컴포넌트 매핑
+     */
+    findComponentByNodeProperties(node, framework) {
+        const nodeName = node.name.toLowerCase();
+        const nodeType = node.type;
+        // 1. 직접 이름 매칭 (가장 정확한 매칭)
+        let component = this.designSystemService.findBestMatch(nodeName, framework);
+        if (component)
+            return component;
+        // 2. 노드 타입과 구조 기반 매칭
+        switch (nodeType) {
+            case 'TEXT':
+                // TEXT 노드는 Text 컴포넌트 사용
+                // 단, 버튼 레이블로 사용되는 경우는 제외
+                if (this.isButtonLabel(node)) {
+                    return this.designSystemService.getComponent('Button', framework);
+                }
+                // 링크 텍스트인지 확인
+                if (nodeName.includes('link') || nodeName.includes('href') || this.hasLinkParent(node)) {
+                    return this.designSystemService.getComponent('TextLink', framework);
+                }
+                // 기본 텍스트는 Text 컴포넌트 사용
+                return this.designSystemService.getComponent('Text', framework);
+            case 'FRAME':
+                // FRAME 노드는 자식 구조를 분석하여 적절한 컴포넌트 선택
+                return this.analyzeFrameNode(node, framework);
+            case 'COMPONENT':
+                // Component 인스턴스 - 이름 기반 매칭
+                component = this.designSystemService.findBestMatch(nodeName, framework);
+                if (component)
+                    return component;
+                // 컴포넌트 인스턴스는 자식 구조 분석
+                return this.analyzeFrameNode(node, framework);
+            case 'RECTANGLE':
+                // RECTANGLE 노드는 이름과 자식 구조 분석
+                if (nodeName.includes('button') || nodeName.includes('btn') || nodeName.includes('click')) {
+                    return this.designSystemService.getComponent('Button', framework);
+                }
+                if (nodeName.includes('input') || nodeName.includes('field')) {
+                    return this.designSystemService.getComponent('Input', framework);
+                }
+                if (nodeName.includes('badge') || nodeName.includes('tag') || nodeName.includes('label')) {
+                    const badgeComponent = this.designSystemService.getComponent('Badge', framework);
+                    if (badgeComponent)
+                        return badgeComponent;
+                    return this.designSystemService.getComponent('Tag', framework);
+                }
+                if (nodeName.includes('chip')) {
+                    return this.designSystemService.getComponent('Chip', framework);
+                }
+                // 사각형은 자식 구조 분석
+                return this.analyzeFrameNode(node, framework);
+            case 'GROUP':
+                // GROUP은 컨테이너 역할만 하므로 자식 구조 분석
+                return this.analyzeFrameNode(node, framework);
+            default:
+                // 알 수 없는 타입은 자식 구조 분석
+                return this.analyzeFrameNode(node, framework);
+        }
+    }
+    /**
+     * FRAME 노드 분석 - 자식 구조를 기반으로 적절한 컴포넌트 선택
+     */
+    analyzeFrameNode(node, framework) {
+        const nodeName = node.name.toLowerCase();
+        // 이름 기반 매칭 (우선순위 높음)
+        if (nodeName.includes('tab') || nodeName.includes('tabs')) {
+            return this.designSystemService.getComponent('Tab', framework);
+        }
+        if (nodeName.includes('accordion') || nodeName.includes('collapse')) {
+            return this.designSystemService.getComponent('Accordion', framework);
+        }
+        if (nodeName.includes('modal') || nodeName.includes('dialog') || nodeName.includes('popup')) {
+            return this.designSystemService.getComponent('Modal', framework);
+        }
+        if (nodeName.includes('button') || nodeName.includes('btn')) {
+            return this.designSystemService.getComponent('Button', framework);
+        }
+        if (nodeName.includes('badge')) {
+            return this.designSystemService.getComponent('Badge', framework);
+        }
+        if (nodeName.includes('tag')) {
+            return this.designSystemService.getComponent('Tag', framework);
+        }
+        if (nodeName.includes('chip')) {
+            return this.designSystemService.getComponent('Chip', framework);
+        }
+        if (nodeName.includes('labeled') || nodeName.includes('label-text')) {
+            return this.designSystemService.getComponent('LabeledText', framework);
+        }
+        if (nodeName.includes('text-link') || nodeName.includes('link')) {
+            return this.designSystemService.getComponent('TextLink', framework);
+        }
+        // 자식 노드 구조 분석
+        if (node.children && node.children.length > 0) {
+            // 자식이 모두 TEXT인 경우 - Text 또는 LabeledText
+            const allTextChildren = node.children.every(child => child.type === 'TEXT');
+            if (allTextChildren && node.children.length === 1) {
+                return this.designSystemService.getComponent('Text', framework);
+            }
+            if (allTextChildren && node.children.length === 2) {
+                // 라벨과 값이 있는 경우 LabeledText
+                return this.designSystemService.getComponent('LabeledText', framework);
+            }
+            // 자식에 Tab이 있는 경우 - Tab 컴포넌트
+            const hasTabChildren = node.children.some(child => child.name.toLowerCase().includes('tab') ||
+                child.type === 'COMPONENT' && child.name.toLowerCase().includes('tab'));
+            if (hasTabChildren) {
+                return this.designSystemService.getComponent('Tab', framework);
+            }
+            // 자식에 Accordion이 있는 경우
+            const hasAccordionChildren = node.children.some(child => child.name.toLowerCase().includes('accordion') ||
+                child.type === 'COMPONENT' && child.name.toLowerCase().includes('accordion'));
+            if (hasAccordionChildren) {
+                return this.designSystemService.getComponent('Accordion', framework);
+            }
+            // 레이아웃 모드가 있는 경우 (Auto Layout)
+            if (node.layoutMode === 'HORIZONTAL' || node.layoutMode === 'VERTICAL') {
+                // Auto Layout은 일반적으로 컨테이너 역할
+                // 자식이 버튼인 경우 Button 그룹으로 처리하지 않고 div로 처리
+                return null; // null을 반환하면 div로 처리
+            }
+        }
+        // 기본적으로 컨테이너 역할만 하는 경우 null 반환 (div로 처리)
+        return null;
+    }
+    /**
+     * 노드가 버튼 레이블인지 확인
+     */
+    isButtonLabel(node) {
+        // 부모 노드가 버튼인지 확인하는 로직은 현재 노드 구조로는 어려움
+        // 이름 기반으로 판단
+        const nodeName = node.name.toLowerCase();
+        return nodeName.includes('button') || nodeName.includes('btn') || nodeName.includes('click');
+    }
+    /**
+     * 노드가 링크의 일부인지 확인
+     */
+    hasLinkParent(node) {
+        // 현재 구현에서는 이름 기반으로 판단
+        const nodeName = node.name.toLowerCase();
+        return nodeName.includes('link') || nodeName.includes('href');
+    }
+    /**
+     * 기본 디자인 시스템 컴포넌트 가져오기
+     */
+    async getDefaultComponent(framework) {
+        // Button을 기본 컴포넌트로 사용 (항상 존재함)
+        const buttonComponent = this.designSystemService.getComponent('Button', framework);
+        if (buttonComponent)
+            return buttonComponent;
+        // Button이 없으면 첫 번째 사용 가능한 컴포넌트 사용
+        const components = await this.designSystemService.getAvailableComponents(framework);
+        if (components.length === 0) {
+            throw new Error('No Design System components available');
+        }
+        return components[0];
+    }
+    /**
+     * 노드 유형에 따라 기본 컴포넌트 가져오기
+     * findComponentByNodeProperties에서 매칭되지 않은 경우에만 사용
+     */
+    getDefaultComponentByType(node, framework) {
+        const nodeType = node.type;
+        const nodeName = node.name.toLowerCase();
+        // 노드 유형과 이름에 따라 스마트 기본값
+        switch (nodeType) {
+            case 'TEXT':
+                // Text 노드는 Text 컴포넌트 사용
+                const textComponent = this.designSystemService.getComponent('Text', framework);
+                if (textComponent)
+                    return textComponent;
+                break;
+            case 'RECTANGLE':
+                // Rectangle은 이름 기반으로 판단
+                if (nodeName.includes('button') || nodeName.includes('btn')) {
+                    const buttonComponent = this.designSystemService.getComponent('Button', framework);
+                    if (buttonComponent)
+                        return buttonComponent;
+                }
+                if (nodeName.includes('badge') || nodeName.includes('tag')) {
+                    const badgeComponent = this.designSystemService.getComponent('Badge', framework);
+                    if (badgeComponent)
+                        return badgeComponent;
+                }
+                // 기본적으로 div로 처리 (null 반환하면 div 사용)
+                break;
+            case 'FRAME':
+            case 'GROUP':
+                // Frame과 Group은 컨테이너 역할만 하므로 div 사용 (null 반환)
+                break;
+            default:
+                // 알 수 없는 타입은 div 사용
+                break;
+        }
+        // 최종 폴백 - Button 사용 (최후의 수단)
+        const finalButtonComponent = this.designSystemService.getComponent('Button', framework);
+        if (finalButtonComponent)
+            return finalButtonComponent;
+        // Button이 없으면 첫 번째 사용 가능한 컴포넌트 사용
+        const components = framework === 'react'
+            ? this.designSystemService['reactComponents']
+            : this.designSystemService['vueComponents'];
+        if (components && components.length > 0) {
+            return components[0];
+        }
+        throw new Error('No Design System components available');
+    }
+    /**
+     * React 컴포넌트 구조 생성
+     */
+    generateReactComponentStructure(componentName, rootNode, mappedComponents) {
+        let code = `import React from 'react';\n\n`;
+        code += `interface ${componentName}Props {\n`;
+        code += `  // Add your props here\n`;
+        code += `}\n\n`;
+        code += `const ${componentName}: React.FC<${componentName}Props> = (props) => {\n`;
+        code += `  return (\n`;
+        code += `    <div>\n`;
+        // 매핑된 컴포넌트에 따라 JSX 생성
+        code += this.generateReactJSX(rootNode, mappedComponents, 2);
+        code += `    </div>\n`;
+        code += `  );\n`;
+        code += `};\n\n`;
+        code += `export default ${componentName};\n`;
+        return code;
+    }
+    /**
+     * Vue 컴포넌트 구조 생성
+     */
+    generateVueComponentStructure(componentName, rootNode, mappedComponents) {
+        let code = `<template>\n`;
+        code += `  <div>\n`;
+        // 매핑된 컴포넌트에 따라 템플릿 생성
+        code += this.generateVueTemplate(rootNode, mappedComponents, 2);
+        code += `  </div>\n`;
+        code += `</template>\n\n`;
+        code += `<script setup lang="ts">\n`;
+        code += `// Add your reactive data and methods here\n`;
+        code += `</script>\n\n`;
+        code += `<style scoped>\n`;
+        code += `/* Add your styles here */\n`;
+        code += `</style>\n`;
+        return code;
+    }
+    /**
+     * Figma 노드에서 React JSX 생성
+     * 불필요한 중첩을 제거하여 깊이를 최소화
+     */
+    generateReactJSX(node, mappedComponents, indent = 0, parentComponent) {
+        const indentStr = '  '.repeat(indent);
+        let jsx = '';
+        // 보이지 않는 노드는 건너뛰기
+        if (node.visible === false) {
+            return '';
+        }
+        // 현재 노드에 대한 매핑 찾기
+        const mapping = mappedComponents.find(m => m.figmaNode.id === node.id);
+        if (mapping?.designSystemComponent) {
+            const component = mapping.designSystemComponent;
+            // 1. 같은 타입의 컴포넌트가 중첩되는 경우 부모를 건너뛰고 자식만 렌더링
+            if (parentComponent && parentComponent.name === component.name) {
+                // 같은 타입 중첩 방지 - 자식만 렌더링
+                if (node.children) {
+                    for (const child of node.children) {
+                        jsx += this.generateReactJSX(child, mappedComponents, indent, component);
+                    }
+                }
+                else if (node.characters) {
+                    // 텍스트만 있는 경우 직접 반환
+                    return `${indentStr}${node.characters}\n`;
+                }
+                return jsx;
+            }
+            // 2. div 컨테이너는 가능한 한 건너뛰기 (자식이 하나만 있는 경우)
+            if (component.name === 'div') {
+                // 빈 div 제거
+                if (!node.children && !node.characters) {
+                    return '';
+                }
+                // 자식이 하나만 있고 그 자식도 div가 아닌 경우 div를 건너뛰기
+                if (node.children && node.children.length === 1) {
+                    const singleChild = node.children[0];
+                    const childMapping = mappedComponents.find(m => m.figmaNode.id === singleChild.id);
+                    if (childMapping && childMapping.designSystemComponent.name !== 'div') {
+                        // div를 건너뛰고 자식만 렌더링
+                        return this.generateReactJSX(singleChild, mappedComponents, indent, component);
+                    }
+                }
+                // 여러 자식이 있거나 자식이 div인 경우에만 div 사용
+                // className은 추가하지 않음 (불필요한 className 방지)
+                const style = this.generateInlineStyle(node);
+                jsx += `${indentStr}<div${style}>\n`;
+                if (node.children) {
+                    for (const child of node.children) {
+                        jsx += this.generateReactJSX(child, mappedComponents, indent + 1, component);
+                    }
+                }
+                else if (node.characters) {
+                    jsx += `${indentStr}  ${node.characters}\n`;
+                }
+                jsx += `${indentStr}</div>\n`;
+                return jsx;
+            }
+            // 3. 빈 컴포넌트 제거
+            const hasChildren = node.children && node.children.length > 0;
+            const hasText = node.characters && node.characters.trim().length > 0;
+            if (!hasChildren && !hasText) {
+                if (['Button', 'Chip', 'Badge', 'Tag', 'Icon'].includes(component.name)) {
+                    return '';
+                }
+                if (component.name === 'Text' || component.name === 'TextLink') {
+                    return '';
+                }
+            }
+            // 4. 자식이 하나만 있고 같은 타입이 아닌 경우 중간 노드 건너뛰기 고려
+            // 단, Chip, Badge, Tag는 텍스트를 children으로 받으므로 예외
+            if (hasChildren && node.children && node.children.length === 1 && !hasText) {
+                const singleChild = node.children[0];
+                const childMapping = mappedComponents.find(m => m.figmaNode.id === singleChild.id);
+                // Chip, Badge, Tag는 텍스트를 children으로 받으므로 중간 노드 건너뛰지 않음
+                if (['Chip', 'Badge', 'Tag'].includes(component.name)) {
+                    // Chip/Badge/Tag 안에 Text가 있으면 Text를 children으로 사용
+                    if (childMapping && childMapping.designSystemComponent.name === 'Text' && singleChild.characters) {
+                        // Text 노드의 텍스트를 직접 children으로 사용
+                        const props = this.generateComponentProps(node, component);
+                        jsx += `${indentStr}<${component.name}${props}>\n`;
+                        jsx += `${indentStr}  ${singleChild.characters}\n`;
+                        jsx += `${indentStr}</${component.name}>\n`;
+                        return jsx;
+                    }
+                }
+                // 자식이 같은 타입이 아니고, 자식이 텍스트나 의미있는 컴포넌트인 경우
+                if (childMapping && childMapping.designSystemComponent.name !== component.name) {
+                    // 부모 컴포넌트의 props를 자식에 병합할 수 있는지 확인
+                    // 단순 컨테이너 역할만 하는 경우 자식만 렌더링
+                    if (this.isSimpleContainer(component, node)) {
+                        return this.generateReactJSX(singleChild, mappedComponents, indent, component);
+                    }
+                }
+            }
+            // 5. 디자인 시스템 컴포넌트 렌더링
+            const props = this.generateComponentProps(node, component);
+            // Chip, Badge, Tag는 자식이 Text인 경우 텍스트만 추출
+            // 또는 자식이 Button이고 그 안에 Text나 Tag가 있는 경우 Button을 제거
+            if (['Chip', 'Badge', 'Tag'].includes(component.name) && hasChildren && !hasText && node.children) {
+                // 자식이 모두 Button이고 그 안에 Text나 Tag가 있는 경우 Button 제거
+                const buttonChildren = node.children.filter(child => {
+                    const childMapping = mappedComponents.find(m => m.figmaNode.id === child.id);
+                    return childMapping && childMapping.designSystemComponent.name === 'Button';
+                });
+                if (buttonChildren.length === node.children.length && buttonChildren.length > 0) {
+                    // Button의 자식을 직접 사용
+                    const directChildren = [];
+                    for (const buttonChild of buttonChildren) {
+                        if (buttonChild.children) {
+                            directChildren.push(...buttonChild.children);
+                        }
+                    }
+                    // 직접 자식이 모두 Text나 Tag인 경우
+                    if (directChildren.length > 0) {
+                        const textOrTagChildren = directChildren.filter(child => {
+                            const childMapping = mappedComponents.find(m => m.figmaNode.id === child.id);
+                            return childMapping &&
+                                (childMapping.designSystemComponent.name === 'Text' ||
+                                    childMapping.designSystemComponent.name === 'Tag' ||
+                                    child.characters);
+                        });
+                        // Button을 제거하고 직접 자식만 사용
+                        if (textOrTagChildren.length > 0) {
+                            jsx += `${indentStr}<${component.name}${props}>\n`;
+                            for (const child of directChildren) {
+                                jsx += this.generateReactJSX(child, mappedComponents, indent + 1, component);
+                            }
+                            jsx += `${indentStr}</${component.name}>\n`;
+                            return jsx;
+                        }
+                    }
+                }
+                // 자식이 모두 Text인 경우 텍스트만 children으로 사용
+                const textChildren = node.children ? node.children.filter((child) => {
+                    const childMapping = mappedComponents.find(m => m.figmaNode.id === child.id);
+                    return childMapping &&
+                        (childMapping.designSystemComponent.name === 'Text' ||
+                            child.characters);
+                }) : [];
+                if (node.children && textChildren.length === node.children.length && textChildren.length > 0) {
+                    const textContent = textChildren
+                        .map((child) => child.characters || '')
+                        .filter((text) => text.trim().length > 0)
+                        .join(' ');
+                    if (textContent) {
+                        jsx += `${indentStr}<${component.name}${props}>\n`;
+                        jsx += `${indentStr}  ${textContent}\n`;
+                        jsx += `${indentStr}</${component.name}>\n`;
+                        return jsx;
+                    }
+                }
+            }
+            jsx += `${indentStr}<${component.name}${props}>\n`;
+            if (hasChildren && node.children) {
+                for (const child of node.children) {
+                    jsx += this.generateReactJSX(child, mappedComponents, indent + 1, component);
+                }
+            }
+            else if (hasText) {
+                jsx += `${indentStr}  ${node.characters}\n`;
+            }
+            jsx += `${indentStr}</${component.name}>\n`;
+        }
+        else {
+            // 매핑이 없는 경우 div로 처리
+            if (!node.children && !node.characters) {
+                return '';
+            }
+            // 자식이 하나만 있는 경우 div를 건너뛰기
+            if (node.children && node.children.length === 1 && !node.characters) {
+                return this.generateReactJSX(node.children[0], mappedComponents, indent, parentComponent);
+            }
+            // className은 추가하지 않음 (불필요한 className 방지)
+            const style = this.generateInlineStyle(node);
+            jsx += `${indentStr}<div${style}>\n`;
+            if (node.children) {
+                for (const child of node.children) {
+                    jsx += this.generateReactJSX(child, mappedComponents, indent + 1, parentComponent);
+                }
+            }
+            else if (node.characters) {
+                jsx += `${indentStr}  ${node.characters}\n`;
+            }
+            jsx += `${indentStr}</div>\n`;
+        }
+        return jsx;
+    }
+    /**
+     * 컴포넌트가 단순 컨테이너 역할만 하는지 확인
+     */
+    isSimpleContainer(component, node) {
+        // div는 항상 컨테이너
+        if (component.name === 'div')
+            return true;
+        // Button이 텍스트나 의미있는 자식 없이 자식만 있는 경우 컨테이너로 간주
+        if (component.name === 'Button' && !node.characters && node.children) {
+            // 자식이 모두 빈 노드가 아닌 경우에만 컨테이너로 간주
+            return true;
+        }
+        // Chip, Badge, Tag도 비슷하게 처리
+        if (['Chip', 'Badge', 'Tag'].includes(component.name) && !node.characters && node.children) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Figma 노드에서 Vue 템플릿 생성
+     */
+    generateVueTemplate(node, mappedComponents, indent = 0) {
+        const indentStr = '  '.repeat(indent);
+        let template = '';
+        // 현재 노드에 대한 매핑 찾기
+        const mapping = mappedComponents.find(m => m.figmaNode.id === node.id);
+        // 항상 디자인 시스템 컴포넌트 사용 - HTML로 폴백하지 않음
+        if (mapping?.designSystemComponent) {
+            const component = mapping.designSystemComponent;
+            const props = this.generateComponentProps(node, component);
+            template += `${indentStr}<${component.name}${props}>\n`;
+            if (node.children) {
+                for (const child of node.children) {
+                    template += this.generateVueTemplate(child, mappedComponents, indent + 1);
+                }
+            }
+            else if (node.characters) {
+                template += `${indentStr}  ${node.characters}\n`;
+            }
+            template += `${indentStr}</${component.name}>\n`;
+        }
+        else {
+            // 일반적인 패턴 기반 유사 매칭을 사용하므로 이 경우는 절대 발생하지 않음
+            console.warn(`No Design System component found for node ${node.id}, using Button as fallback`);
+            const fallbackComponent = this.designSystemService.getComponent('Button', 'vue');
+            if (fallbackComponent) {
+                template += `${indentStr}<${fallbackComponent.name}>\n`;
+                if (node.children) {
+                    for (const child of node.children) {
+                        template += this.generateVueTemplate(child, mappedComponents, indent + 1);
+                    }
+                }
+                else if (node.characters) {
+                    template += `${indentStr}  ${node.characters}\n`;
+                }
+                template += `${indentStr}</${fallbackComponent.name}>\n`;
+            }
+        }
+        return template;
+    }
+    /**
+     * Figma 노드와 디자인 시스템 컴포넌트에 따라 컴포넌트 속성 생성
+     */
+    generateComponentProps(node, component) {
+        const props = [];
+        // Input 컴포넌트의 경우 placeholder 추가
+        if (node.characters && component.name === 'Input') {
+            props.push(`placeholder="${node.characters}"`);
+        }
+        // Text 컴포넌트의 경우 children으로 텍스트 전달 (props가 아닌)
+        // Text 컴포넌트는 children으로 텍스트를 받으므로 props에 추가하지 않음
+        // 바운딩 박스에 따라 크기 속성 추가
+        if (node.absoluteBoundingBox) {
+            const { width, height } = node.absoluteBoundingBox;
+            if (component.name === 'Button') {
+                if (height < 32)
+                    props.push('size="small"');
+                else if (height > 48)
+                    props.push('size="large"');
+                else if (height >= 32)
+                    props.push('size="medium"');
+            }
+            // Chip, Badge, Tag도 크기 속성 지원하는 경우
+            if (component.name === 'Chip' || component.name === 'Badge' || component.name === 'Tag') {
+                if (height < 24)
+                    props.push('size="small"');
+                else if (height > 32)
+                    props.push('size="large"');
+            }
+        }
+        // Accordion의 경우 title prop 추가
+        if (component.name === 'Accordion' && node.children && node.children.length > 0) {
+            const firstTextChild = node.children.find(child => child.type === 'TEXT' || child.characters);
+            if (firstTextChild && firstTextChild.characters) {
+                props.push(`title="${firstTextChild.characters}"`);
+            }
+        }
+        return props.length > 0 ? ` ${props.join(' ')}` : '';
+    }
+    /**
+     * Figma 노드에 대한 적절한 HTML 태그 이름 가져오기
+     */
+    getHTMLTagName(node) {
+        switch (node.type) {
+            case 'TEXT':
+                return 'span';
+            case 'FRAME':
+                return 'div';
+            case 'RECTANGLE':
+                return 'div';
+            case 'ELLIPSE':
+                return 'div';
+            default:
+                return 'div';
+        }
+    }
+    /**
+     * Figma 노드에서 CSS 클래스 이름 생성
+     */
+    generateClassName(node) {
+        const name = node.name
+            .toLowerCase()
+            .replace(/[^a-z0-9]/g, '-')
+            .replace(/-+/g, '-')
+            .replace(/^-|-$/g, '');
+        return `${name}-${node.id.slice(-4)}`;
+    }
+    /**
+     * Figma 노드 속성에서 인라인 스타일 생성
+     */
+    generateInlineStyle(node) {
+        const styles = [];
+        if (node.absoluteBoundingBox) {
+            const { width, height } = node.absoluteBoundingBox;
+            styles.push(`width: ${width}px`);
+            styles.push(`height: ${height}px`);
+        }
+        if (node.cornerRadius) {
+            styles.push(`border-radius: ${node.cornerRadius}px`);
+        }
+        if (node.fills && node.fills.length > 0) {
+            const fill = node.fills[0];
+            if (fill.type === 'SOLID' && fill.color) {
+                const { r, g, b, a } = fill.color;
+                const alpha = a !== undefined ? a : 1;
+                styles.push(`background-color: rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`);
+            }
+        }
+        if (node.strokes && node.strokes.length > 0) {
+            const stroke = node.strokes[0];
+            if (stroke.type === 'SOLID' && stroke.color) {
+                const { r, g, b, a } = stroke.color;
+                const alpha = a !== undefined ? a : 1;
+                styles.push(`border: ${stroke.strokeWeight || 1}px solid rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`);
+            }
+        }
+        return styles.length > 0 ? ` style="${styles.join('; ')}"` : '';
+    }
+}