디자이너를 돕는 피그마(figma)플러그인 만들기

// SVG Export 및 정리
const svgBytes = await exportNode.exportAsync({
  format: 'SVG',
  svgOutlineText: true,
  svgIdAttribute: false,
  svgSimplifyStroke: true,
});

// 불필요한 요소 제거
const cleanSvgString = svgString
  .replace(/<g[^>]*>/g, '')
  .replace(/<\/g>/g, '')
  .replace(/<defs>[\s\S]*?<\/defs>/g, '')
  .replace(/clip-path="[^"]*"/g, '');

// React 컴포넌트 템플릿 생성
const reactComponent = `
import { Colors } from '../../colors';
import { Svg } from '../../utils/IconBase';
import { IconProps } from '../../utils/icon';

const ${componentName} = ({ width = 24, height = 24, fill = Colors.gray900, ...props }: IconProps) => {
  return (
    <Svg width={width} height={height} viewBox="${viewBox}" fill="none" {...props}>
      <path d="${pathData}" fill={fill} />
    </Svg>
  );
};

export default ${componentName};
`;

// 1. 브랜치 생성
const createBranchRes = await fetch(
  `https://api.github.com/repos/${owner}/${repo}/git/refs`,
  {
    method: 'POST',
    headers: {
      Authorization: `token ${githubToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ ref: `refs/heads/${branchName}`, sha: baseSha }),
  }
);

// 2. 파일 업로드 및 커밋
const treeRes = await fetch(
  `https://api.github.com/repos/${owner}/${repo}/git/trees`,
  {
    method: 'POST',
    body: JSON.stringify({
      base_tree: baseSha,
      tree: [
        {
          path: componentPath,
          mode: '100644',
          type: 'blob',
          sha: compBlob.sha,
        },
        { path: indexPath, mode: '100644', type: 'blob', sha: idxBlob.sha },
      ],
    }),
  }
);

// 3. PR 생성
const prRes = await fetch(
  `https://api.github.com/repos/${owner}/${repo}/pulls`,
  {
    method: 'POST',
    body: JSON.stringify({
      title: `[🤖] feat: add icon component ${pascalName}`,
      head: branchName,
      base: baseBranch,
      body: `Add new icon component: ${pascalName}`,
    }),
  }
);

function notifyUI(msg: string) {
  figma.ui.postMessage({ type: 'github-upload-status', message: msg });
}

// 진행 단계별 상태 업데이트
const steps = [
  '브랜치 정보 조회 중...',
  '새 브랜치 생성 중...',
  'index.tsx 읽기 중...',
  'tree 생성 중...',
  '커밋 생성 중...',
  '브랜치(ref) 업데이트 중...',
];

steps.forEach((step, index) => {
  notifyUI(`${index + 1}/${steps.length}: ${step}`);
});

function getAllTextNodes(node: SceneNode | PageNode): TextNode[] {
  let result: TextNode[] = [];

  // 숨겨진 요소 제외
  if ('visible' in node && node.visible === false) return result;

  if (node.type === 'TEXT') {
    result.push(node);
  } else if ('children' in node) {
    for (const child of node.children) {
      result = result.concat(getAllTextNodes(child));
    }
  }

  return result;
}

// UI에서 검증 요청 (ui.tsx)
async function checkSpelling(text: string, promptString?: string): Promise<SpellCheckResponse> {
  return new Promise((resolve) => {

    function handler(event: MessageEvent) {
      const msg = event.data.pluginMessage;
      if (msg?.type === 'SPELL_CHECK_RESULT') {
        window.removeEventListener('message', handler);
        resolve(msg.result);
      }
    }

    window.addEventListener('message', handler);
    parent.postMessage({
      pluginMessage: { type: 'PROXY_SPELL_CHECK', text, promptString }
    }, '*');
  });
}

// API 호출 (code.ts)
  if (msg.type === 'PROXY_SPELL_CHECK') {
    const { text, promptString } = msg;

    try {
      const res = await fetch(
        API_URL,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'x-cors-token': process.env.REACT_APP_CORS_TOKEN,
          },
          body: JSON.stringify({
            text,
            prompt: promptString || '',
          }),
        }
      );

      const result = await res.json();
      figma.ui.postMessage({ type: 'SPELL_CHECK_RESULT', result });
    } catch (e) {
      figma.ui.postMessage({
        type: 'SPELL_CHECK_RESULT',
        result: { error: true, message: e?.message || String(e) },
      });
    }
  }

// Figma 전용 접근 제한
function isFigmaRequest(req: NextApiRequest): boolean {
  const userAgent = req.headers['user-agent'] || '';
  return userAgent.includes('Figma');
}

// 토큰 기반 인증
const allowedToken = process.env.FIGMA_CORS_TOKEN;
const requestToken =
  req.headers['x-cors-token'] || req.headers['authorization'];

if (!requestToken || requestToken !== allowedToken) {
  return res.status(401).json({
    error: {
      message: 'Unauthorized. Valid token required.',
      type: 'unauthorized',
    },
  });
}

function setCorsHeaders(req: NextApiRequest, res: NextApiResponse) {
  const requestToken =
    req.headers['x-cors-token'] || req.headers['authorization'];

  // 토큰이 일치할 때만 CORS 허용
  if (
    req.method === 'OPTIONS' ||
    (requestToken && allowedToken && requestToken === allowedToken)
  ) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader(
      'Access-Control-Allow-Methods',
      'GET, POST, PUT, DELETE, OPTIONS'
    );
    res.setHeader(
      'Access-Control-Allow-Headers',
      'Content-Type, Authorization, x-cors-token'
    );
  }
}

async function checkTexts(texts: string, customPrompt: string | undefined, openaiApiKey: string): Promise<string> {
  const defaultPrompt = `다음 한국어 텍스트들의 맞춤법과 문법을 검토하고 수정해주세요.`;
  const prompt = customPrompt || defaultPrompt;

  const openaiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${openaiApiKey}`,
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [
        { role: 'system', content: prompt },
        { role: 'user', content: `다음 문장들을 다시 작성해 주세요:\n${texts}` },
      ],
      temperature: 0.1, // 일관성을 위한 낮은 온도 설정
      max_tokens: 4096,
    }),
  });

  const openaiData = await openaiResponse.json();
  return openaiData.choices[0]?.message?.content;
}