palette-mcp 1.0.0 → 1.1.0

package/dist/requests/1762935954110-m7jb9m7/SomaComponent.tsx

@@ -0,0 +1,150 @@
+// 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
+
+import { Tab } from '@dealicious/design-system-react/src/components/ssm-tab';
+import { Button } from '@dealicious/design-system-react/src/components/ssm-button';
+import { Radio } from '@dealicious/design-system-react/src/components/ssm-radio';
+import { Text } from '@dealicious/design-system-react/src/components/ssm-text';
+import { LabeledText } from '@dealicious/design-system-react/src/components/ssm-labeled-text';
+import { Badge } from '@dealicious/design-system-react/src/components/ssm-badge';
+import { Chip } from '@dealicious/design-system-react/src/components/ssm-chip';
+import { Icon } from '@dealicious/design-system-react/src/components/ssm-icon';
+import { Tag } from '@dealicious/design-system-react/src/components/ssm-tag';
+import { TextLink } from '@dealicious/design-system-react/src/components/ssm-text-link';
+import { Accordion } from '@dealicious/design-system-react/src/components/ssm-accordion';
+
+import React from 'react';
+
+interface SomaComponentProps {
+  // Add your props here
+}
+
+const SomaComponent: React.FC<SomaComponentProps> = (props) => {
+  return (
+    <div>
+    <Tab>
+      <Button>
+        <Radio>
+          <Button size="large">
+            <Tab>
+              <Button size="medium">
+                <Chip size="large">
+                  주문상태
+                  <Button size="small">
+                  </Button>
+                  3개월
+                  <Button size="small">
+                  </Button>
+                  <Button size="small">
+                    <Button size="small">
+                    </Button>
+                  </Button>
+                </Chip>
+              </Button>
+              <Button size="small">
+                <LabeledText>
+                  <Text>
+                    거래완료 요청
+                  </Text>
+                  <Text>
+                    3
+                  </Text>
+                </LabeledText>
+              </Button>
+            </Tab>
+            <Tag size="small">
+              <Button size="small">
+                <Tag size="small">
+                  주문접수
+                </Tag>
+                <Tag size="small">
+                  사입사 방문
+                </Tag>
+                <Tag size="small">
+                  현장 결제
+                </Tag>
+              </Button>
+              <TextLink>
+                <Text>
+                  주문서 보기
+                </Text>
+                <Button size="small">
+                </Button>
+              </TextLink>
+            </Tag>
+            <Text>
+              신상플래닛
+            </Text>
+            <Text>
+              베스트 검정 니트
+            </Text>
+            <Text>
+              ₩30,000
+            </Text>
+            <TextLink>
+              <Button size="small">
+              </Button>
+              <Button size="small">
+              </Button>
+            </TextLink>
+            주문취소
+            <Tag size="small">
+              <Text>
+                포장완료
+              </Text>
+              <Text>
+                직접 수령
+              </Text>
+              <Text>
+                현장 결제
+              </Text>
+              <TextLink>
+                <Text>
+                  주문서 보기
+                </Text>
+                <Button size="small">
+                </Button>
+              </TextLink>
+            </Tag>
+            <Text>
+              신상랩
+            </Text>
+            <Text>
+              데일리 티셔츠 외 2건
+            </Text>
+            <Text>
+              ₩56,000
+            </Text>
+            <TextLink>
+              <Button size="small">
+              </Button>
+              <Button size="small">
+              </Button>
+            </TextLink>
+          </Button>
+        </Radio>
+        <LabeledText>
+          <Text>
+            거래완료 요청
+          </Text>
+          <Text>
+            3
+          </Text>
+        </LabeledText>
+      </Button>
+      <Accordion>
+      </Accordion>
+      <Accordion>
+      </Accordion>
+    </Tab>
+    </div>
+  );
+};
+
+export default SomaComponent;

package/dist/requests/1762935954110-m7jb9m7/metadata.json

@@ -0,0 +1,9 @@
+{
+  "requestId": "1762935954110-m7jb9m7",
+  "createdAt": "2025-11-12T08:25:54.122Z",
+  "files": [],
+  "type": "react",
+  "componentName": "SomaComponent",
+  "figmaUrl": "https://www.figma.com/design/akI7EwlWemAf8KJup9F2ZS/-%EC%86%8C%EB%A7%A4-%EB%8F%84%EB%A7%A4--%EC%8B%A0%EC%83%81%ED%86%A1?node-id=45733-99056&m=dev",
+  "nodeId": "45733-99056"
+}

package/dist/requests/1762936003095-0jnmlga/SomaComponent.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SomaComponent - 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>SomaComponent - React 컴포넌트 미리보기</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 = "// Design System Components from GitHub:\n// React: https://github.com/dealicious-inc/ssm-web/tree/master/packages/design-system-react\n// Vue: https://github.com/dealicious-inc/ssm-web/tree/master/packages/design-system\n// \n// To use these components, install the packages:\n// npm install @dealicious/design-system-react @dealicious/design-system\n// or\n// yarn add @dealicious/design-system-react @dealicious/design-system\n\nimport { Tab } from '@dealicious/design-system-react/src/components/ssm-tab';\nimport { Button } from '@dealicious/design-system-react/src/components/ssm-button';\nimport { Radio } from '@dealicious/design-system-react/src/components/ssm-radio';\nimport { Text } from '@dealicious/design-system-react/src/components/ssm-text';\nimport { LabeledText } from '@dealicious/design-system-react/src/components/ssm-labeled-text';\nimport { Badge } from '@dealicious/design-system-react/src/components/ssm-badge';\nimport { Chip } from '@dealicious/design-system-react/src/components/ssm-chip';\nimport { Icon } from '@dealicious/design-system-react/src/components/ssm-icon';\nimport { Tag } from '@dealicious/design-system-react/src/components/ssm-tag';\nimport { TextLink } from '@dealicious/design-system-react/src/components/ssm-text-link';\nimport { Accordion } from '@dealicious/design-system-react/src/components/ssm-accordion';\n\nimport React from 'react';\n\ninterface SomaComponentProps {\n  // Add your props here\n}\n\nconst SomaComponent: React.FC<SomaComponentProps> = (props) => {\n  return (\n    <div>\n    <Tab>\n      <Button>\n        <Radio>\n          <Button size=\"large\">\n            <Tab>\n              <Button size=\"medium\">\n                <Chip size=\"large\">\n                  주문상태\n                  <Button size=\"small\">\n                  </Button>\n                  3개월\n                  <Button size=\"small\">\n                  </Button>\n                  <Button size=\"small\">\n                    <Button size=\"small\">\n                    </Button>\n                  </Button>\n                </Chip>\n              </Button>\n              <Button size=\"small\">\n                <LabeledText>\n                  <Text>\n                    거래완료 요청\n                  </Text>\n                  <Text>\n                    3\n                  </Text>\n                </LabeledText>\n              </Button>\n            </Tab>\n            <Tag size=\"small\">\n              <Button size=\"small\">\n                <Tag size=\"small\">\n                  주문접수\n                </Tag>\n                <Tag size=\"small\">\n                  사입사 방문\n                </Tag>\n                <Tag size=\"small\">\n                  현장 결제\n                </Tag>\n              </Button>\n              <TextLink>\n                <Text>\n                  주문서 보기\n                </Text>\n                <Button size=\"small\">\n                </Button>\n              </TextLink>\n            </Tag>\n            <Text>\n              신상플래닛\n            </Text>\n            <Text>\n              베스트 검정 니트\n            </Text>\n            <Text>\n              ₩30,000\n            </Text>\n            <TextLink>\n              <Button size=\"small\">\n              </Button>\n              <Button size=\"small\">\n              </Button>\n            </TextLink>\n            주문취소\n            <Tag size=\"small\">\n              <Text>\n                포장완료\n              </Text>\n              <Text>\n                직접 수령\n              </Text>\n              <Text>\n                현장 결제\n              </Text>\n              <TextLink>\n                <Text>\n                  주문서 보기\n                </Text>\n                <Button size=\"small\">\n                </Button>\n              </TextLink>\n            </Tag>\n            <Text>\n              신상랩\n            </Text>\n            <Text>\n              데일리 티셔츠 외 2건\n            </Text>\n            <Text>\n              ₩56,000\n            </Text>\n            <TextLink>\n              <Button size=\"small\">\n              </Button>\n              <Button size=\"small\">\n              </Button>\n            </TextLink>\n          </Button>\n        </Radio>\n        <LabeledText>\n          <Text>\n            거래완료 요청\n          </Text>\n          <Text>\n            3\n          </Text>\n        </LabeledText>\n      </Button>\n      <Accordion>\n      </Accordion>\n      <Accordion>\n      </Accordion>\n    </Tab>\n    </div>\n  );\n};\n\nexport default SomaComponent;\n"
+      .replace(/import[^;]+;/g, '')
+      .replace(///[^\n]*/g, '')
+      .replace(/interface[^\{]*\{[^\}]*\}/g, '')
+      .replace(/React\.FC<[^>]*>/g, '')
+      .replace(/export default SomaComponent;/g, '')
+      .replace(new RegExp(`const SomaComponent:.*?=`, 'g'), `const SomaComponent = `)
+      // 문법 오류 수정: 잘못된 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(SomaComponent, {}));
+    } 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>

package/dist/requests/1762936003095-0jnmlga/SomaComponent.tsx

@@ -0,0 +1,150 @@
+// 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
+
+import { Tab } from '@dealicious/design-system-react/src/components/ssm-tab';
+import { Button } from '@dealicious/design-system-react/src/components/ssm-button';
+import { Radio } from '@dealicious/design-system-react/src/components/ssm-radio';
+import { Text } from '@dealicious/design-system-react/src/components/ssm-text';
+import { LabeledText } from '@dealicious/design-system-react/src/components/ssm-labeled-text';
+import { Badge } from '@dealicious/design-system-react/src/components/ssm-badge';
+import { Chip } from '@dealicious/design-system-react/src/components/ssm-chip';
+import { Icon } from '@dealicious/design-system-react/src/components/ssm-icon';
+import { Tag } from '@dealicious/design-system-react/src/components/ssm-tag';
+import { TextLink } from '@dealicious/design-system-react/src/components/ssm-text-link';
+import { Accordion } from '@dealicious/design-system-react/src/components/ssm-accordion';
+
+import React from 'react';
+
+interface SomaComponentProps {
+  // Add your props here
+}
+
+const SomaComponent: React.FC<SomaComponentProps> = (props) => {
+  return (
+    <div>
+    <Tab>
+      <Button>
+        <Radio>
+          <Button size="large">
+            <Tab>
+              <Button size="medium">
+                <Chip size="large">
+                  주문상태
+                  <Button size="small">
+                  </Button>
+                  3개월
+                  <Button size="small">
+                  </Button>
+                  <Button size="small">
+                    <Button size="small">
+                    </Button>
+                  </Button>
+                </Chip>
+              </Button>
+              <Button size="small">
+                <LabeledText>
+                  <Text>
+                    거래완료 요청
+                  </Text>
+                  <Text>
+                    3
+                  </Text>
+                </LabeledText>
+              </Button>
+            </Tab>
+            <Tag size="small">
+              <Button size="small">
+                <Tag size="small">
+                  주문접수
+                </Tag>
+                <Tag size="small">
+                  사입사 방문
+                </Tag>
+                <Tag size="small">
+                  현장 결제
+                </Tag>
+              </Button>
+              <TextLink>
+                <Text>
+                  주문서 보기
+                </Text>
+                <Button size="small">
+                </Button>
+              </TextLink>
+            </Tag>
+            <Text>
+              신상플래닛
+            </Text>
+            <Text>
+              베스트 검정 니트
+            </Text>
+            <Text>
+              ₩30,000
+            </Text>
+            <TextLink>
+              <Button size="small">
+              </Button>
+              <Button size="small">
+              </Button>
+            </TextLink>
+            주문취소
+            <Tag size="small">
+              <Text>
+                포장완료
+              </Text>
+              <Text>
+                직접 수령
+              </Text>
+              <Text>
+                현장 결제
+              </Text>
+              <TextLink>
+                <Text>
+                  주문서 보기
+                </Text>
+                <Button size="small">
+                </Button>
+              </TextLink>
+            </Tag>
+            <Text>
+              신상랩
+            </Text>
+            <Text>
+              데일리 티셔츠 외 2건
+            </Text>
+            <Text>
+              ₩56,000
+            </Text>
+            <TextLink>
+              <Button size="small">
+              </Button>
+              <Button size="small">
+              </Button>
+            </TextLink>
+          </Button>
+        </Radio>
+        <LabeledText>
+          <Text>
+            거래완료 요청
+          </Text>
+          <Text>
+            3
+          </Text>
+        </LabeledText>
+      </Button>
+      <Accordion>
+      </Accordion>
+      <Accordion>
+      </Accordion>
+    </Tab>
+    </div>
+  );
+};
+
+export default SomaComponent;

package/dist/requests/1762936003095-0jnmlga/metadata.json

@@ -0,0 +1,9 @@
+{
+  "requestId": "1762936003095-0jnmlga",
+  "createdAt": "2025-11-12T08:26:43.111Z",
+  "files": [],
+  "type": "react",
+  "componentName": "SomaComponent",
+  "figmaUrl": "https://www.figma.com/design/akI7EwlWemAf8KJup9F2ZS/-%EC%86%8C%EB%A7%A4-%EB%8F%84%EB%A7%A4--%EC%8B%A0%EC%83%81%ED%86%A1?node-id=45733-99056&m=dev",
+  "nodeId": "45733-99056"
+}