byuckchon-frontend-cli 1.9.4 → 1.9.6

package/README.md

@@ -104,8 +104,8 @@ bc init
 # 1) Figma → Settings → Personal access tokens → "Generate new token"
 #    Read 권한만 있으면 충분 (file 읽기 / image export 둘 다 read 로 됨)
 
-# 2) 토큰을 .env 에 박기 (gitignore 됨)
-echo "FIGMA_TOKEN=figd_xxxxxxxxxxxxxxxx" >> .env
+# 2) bc init이 만든 .env의 FIGMA_TOKEN 값 채우기 (gitignore 됨)
+FIGMA_TOKEN=figd_xxxxxxxxxxxxxxxx
 
 # 3) bc.config.json 의 design.figma 에 파일/노드 URL 박기 (bc adopt 시점에 입력하거나 직접 편집)
 ```
@@ -250,8 +250,9 @@ bc adopt
 ```
 
 `package.json` 과 디렉터리를 스캔해서 **프레임워크/언어/스타일/라우팅/패키지 매니저** 를 자동 감지하고,
-Figma·OpenAPI URL 만 추가로 묻고 `bc.config.json` 만 떨궈줍니다.
-**소스 코드는 절대 건드리지 않습니다.**
+Figma·OpenAPI URL 만 추가로 묻고 `bc.config.json` 을 생성합니다.
+필수 의존성(`@tanstack/react-query`, `zod`, React 계열의 `axios`)이 없으면 감지한 패키지 매니저로
+자동 설치하며, 기존 소스 코드는 건드리지 않습니다.
 
 지원 감지: Next.js · Expo · Electron · Vite+React · Remix · CRA · 일반 React.
 
@@ -291,6 +292,8 @@ TTY 안에서 자동으로 ink 모드로 뜨고, 파이프/CI 같은 비-TTY 환
 | `/history`          | 이전 대화 선택 후 해당 컨텍스트 이어가기     |
 | `/retry`            | 마지막 사용자 요청 다시 실행                |
 | `/model [id]`       | 세션 모델 변경 (인자 없으면 목록)           |
+| `/figma-link <url\|off>` | 프로젝트 Figma 링크 변경 또는 해제       |
+| `/openapi-link <url\|off>` | 프로젝트 OpenAPI 링크 변경 또는 해제    |
 | `/cost`             | 누적 토큰/비용                              |
 | `/image <path>`     | 다음 메시지에 이미지 첨부 (Vision 모델 권장) |
 | `/paste`            | 클립보드 이미지 첨부 (macOS, `pngpaste` 필요) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byuckchon-frontend-cli",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "description": "Byuckchon Frontend Workbench — project starter + AI chat + codebase RAG + OpenAPI codegen",
   "type": "module",
   "engines": {

package/src/commands/adopt.js

@@ -11,12 +11,13 @@ import {
   apiRootForFramework,
   scaffoldApiConventionDoc,
 } from '../generators/apiConventionDoc.js';
+import { ensureRequiredDependencies } from '../utils/ensureRequiredDependencies.js';
 
 /**
  * `bc adopt`
  *
- * 기존 프로젝트(현재 디렉터리)에 bc.config.json 만 살포시 깔아준다.
- * 소스 코드는 절대 건드리지 않는다.
+ * 기존 프로젝트(현재 디렉터리)에 bc.config.json 과 필수 의존성을 추가한다.
+ * 기존 소스 코드는 건드리지 않는다.
  *
  * 흐름:
  *   1) 자동 감지(framework, styling, language, routing 등) 결과를 보여주고
@@ -145,6 +146,22 @@ export async function adoptCommand(opts = {}) {
   console.log(chalk.green(`\n  ✓ ${CONFIG_PATHS.projectFileName} 작성 완료.`));
   console.log(chalk.dim(`    ${targetFile}`));
 
+  const dependencies = await ensureRequiredDependencies({
+    cwd,
+    pkg: ctx.pkg,
+    framework: ctx.framework,
+    packageManager: ctx.packageManager,
+  });
+  if (dependencies.installed.length) {
+    console.log(
+      chalk.green(
+        `  ✓ 필수 의존성 설치 완료 (${dependencies.packageManager}): ${dependencies.installed.join(', ')}`,
+      ),
+    );
+  } else {
+    console.log(chalk.dim('  필수 의존성 유지 (이미 설치됨)'));
+  }
+
   // API 코드 컨벤션 .md 를 API 루트(src/api | src/lib/api)에 깐다 (이미 있으면 유지).
   try {
     const { relPath, written } = await scaffoldApiConventionDoc({

package/src/commands/chat.js

@@ -25,6 +25,7 @@ import {
 import { findLastRetryableUser, formatSessionList } from '../history/management.js';
 import { getCachedOpenApi } from '../openapi/cache.js';
 import { summarizeOpenApi } from '../openapi/summary.js';
+import { updateProjectLink } from '../config/projectLinks.js';
 
 /**
  * `bc chat`
@@ -330,7 +331,7 @@ async function runReadlineFallback({ cfg, resolved, system, session, openapiInfo
   }
   console.log(
     chalk.dim(
-      '  /history · /retry · /image <경로> · /paste · /clear-attach · /exit\n',
+      '  /history · /retry · /figma-link <url|off> · /openapi-link <url|off> · /image <경로> · /exit\n',
     ),
   );
 
@@ -425,6 +426,32 @@ async function runReadlineFallback({ cfg, resolved, system, session, openapiInfo
       ask();
       continue;
     }
+    if (/^\/(figma-link|openapi-link)(\s|$)/.test(line)) {
+      const isFigma = line === '/figma-link' || line.startsWith('/figma-link ');
+      const kind = isFigma ? 'figma' : 'openapi';
+      const label = isFigma ? 'Figma' : 'OpenAPI';
+      const command = line.match(/^\/(figma-link|openapi-link)/)[1];
+      const arg = line.slice(command.length + 1).trim();
+      if (!arg) {
+        const current = isFigma ? cfg.effective.design?.figma : cfg.effective.api?.openapi;
+        console.log(chalk.dim(`  현재 ${label}: ${current ?? '(미설정)'}`));
+        console.log(chalk.dim(`  사용법: /${kind} <url|off>`));
+        ask();
+        continue;
+      }
+      try {
+        cfg = await updateProjectLink(cfg, kind, arg);
+        const value = isFigma ? cfg.effective.design?.figma : cfg.effective.api?.openapi;
+        system += value
+          ? `\n\n[프로젝트 설정 변경] ${label} 소스는 ${value} 이다. 이전 ${label} 링크와 요약은 무시하고 이 값을 사용하라.`
+          : `\n\n[프로젝트 설정 변경] ${label} 링크가 해제되었다. 이전 ${label} 링크와 요약은 사용하지 마라.`;
+        console.log(chalk.green(`  ${label} 링크를 ${value ? '변경했습니다: ' + value : '해제했습니다.'}`));
+      } catch (err) {
+        console.log(chalk.red('  ' + err.message));
+      }
+      ask();
+      continue;
+    }
     let retryContent = null;
     if (line === '/retry') {
       const retry = findLastRetryableUser(history);

package/src/config/projectLinks.js

@@ -0,0 +1,49 @@
+import { parseFigmaUrl } from '../figma/url.js';
+import { saveProjectConfig } from './index.js';
+
+function normalizeUrl(raw, kind) {
+  const value = raw.trim();
+  if (['off', 'none', 'clear'].includes(value.toLowerCase())) return null;
+
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new Error(`${kind} 링크가 올바른 URL이 아닙니다.`);
+  }
+  if (!['http:', 'https:'].includes(url.protocol)) {
+    throw new Error(`${kind} 링크는 http 또는 https URL이어야 합니다.`);
+  }
+  if (kind === 'Figma' && !parseFigmaUrl(value)) {
+    throw new Error('지원하는 Figma file/design/proto 링크가 아닙니다.');
+  }
+  return value;
+}
+
+export async function updateProjectLink(cfg, kind, rawValue) {
+  if (!cfg.paths.projectFile) {
+    throw new Error('bc.config.json이 없습니다. 먼저 `bc adopt` 또는 `bc init`을 실행하세요.');
+  }
+
+  const value = normalizeUrl(rawValue, kind === 'figma' ? 'Figma' : 'OpenAPI');
+  const project = {
+    ...cfg.project,
+    design: { ...(cfg.project.design ?? {}) },
+    api: { ...(cfg.project.api ?? {}) },
+  };
+
+  if (kind === 'figma') project.design.figma = value;
+  else project.api.openapi = value;
+
+  await saveProjectConfig(cfg.paths.projectFile, project);
+
+  return {
+    ...cfg,
+    project,
+    effective: {
+      ...cfg.effective,
+      design: project.design,
+      api: project.api,
+    },
+  };
+}

package/src/generators/createBaseFiles.js

@@ -233,6 +233,9 @@ node_modules
 dist
 dist-ssr
 *.local
+*.md
+!README.md
+.bc/
 .env
 .env.production
 .history
@@ -704,6 +707,8 @@ declare module '*.webp' {
 // ─── 진입점 ───────────────────────────────────────────────────────────────────
 
 export async function createBaseFiles(rootDir, config) {
+  await write(path.join(rootDir, ".env"), "FIGMA_TOKEN=\n");
+
   if (config.framework === "react") {
     await createReactBaseFiles(rootDir, config);
   } else if (config.framework === "next") {

package/src/generators/createPackageJson.js

@@ -33,10 +33,10 @@ export async function createPackageJson(rootDir, config) {
       'react-dom': isReact ? versions['react-dom'] : versions['next-react-dom'],
       ...(isReact ? {} : { next: versions.next }),
       zustand: versions.zustand,
+      '@tanstack/react-query': versions['@tanstack/react-query'],
       ...(isReact
         ? {
             axios: versions.axios,
-            '@tanstack/react-query': versions['@tanstack/react-query'],
           }
         : {}),
       zod: versions.zod,

package/src/ui/ChatApp.js

@@ -16,6 +16,7 @@ import { searchIndex } from '../indexer/search.js';
 import { loadIndex, buildIndex } from '../indexer/store.js';
 import { listSessions } from '../history/store.js';
 import { findLastRetryableUser } from '../history/management.js';
+import { updateProjectLink } from '../config/projectLinks.js';
 
 const h = React.createElement;
 
@@ -292,6 +293,8 @@ const SLASH_COMMANDS = [
   { cmd: '/history', hint: '', desc: '프로젝트의 이전 대화 목록' },
   { cmd: '/retry', hint: '', desc: '마지막 사용자 요청 다시 실행' },
   { cmd: '/model', hint: '<id>', desc: '세션 모델 변경 (인자 없으면 목록)' },
+  { cmd: '/figma-link', hint: '<url|off>', desc: '프로젝트 Figma 링크 변경/해제' },
+  { cmd: '/openapi-link', hint: '<url|off>', desc: '프로젝트 OpenAPI 링크 변경/해제' },
   { cmd: '/cost', hint: '', desc: '누적 토큰/비용' },
   { cmd: '/image', hint: '<path>', desc: '이미지 첨부 (Finder 에서 끌어다 놔도 됨)' },
   { cmd: '/paste', hint: '', desc: '클립보드의 이미지(스크린샷)를 첨부 — macOS' },
@@ -422,6 +425,7 @@ export function ChatApp({
   const [indexProgress, setIndexProgress] = useState('');
   const [ragEnabled, setRagEnabled] = useState(true);
   const [menuIndex, setMenuIndex] = useState(0);
+  const [inputRevision, setInputRevision] = useState(0);
   const [historyItems, setHistoryItems] = useState([]);
   const [historyIndex, setHistoryIndex] = useState(0);
   const [historyDeleteId, setHistoryDeleteId] = useState(null);
@@ -438,6 +442,16 @@ export function ChatApp({
     setMenuIndex(0);
   }, [input]);
 
+  // showCursor=false인 ink-text-input은 외부에서 value가 바뀌어도 내부 cursorOffset을
+  // 갱신하지 않는다. 자동완성/초기화 때 재마운트해 커서를 새 문자열 끝으로 맞춘다.
+  const replaceInput = useCallback((value) => {
+    setInput(value);
+    setInputRevision((revision) => revision + 1);
+  }, []);
+  const completeSlash = useCallback((item) => {
+    replaceInput(expandSlash(item));
+  }, [replaceInput]);
+
   // 인덱스 빌드 헬퍼 — 자동/수동 양쪽에서 공유.
   const runIndexBuild = useCallback(
     async ({ rebuild = false, silent = false } = {}) => {
@@ -587,13 +601,13 @@ export function ChatApp({
       return;
     }
     if (key.escape) {
-      setInput('');
+      replaceInput('');
       return;
     }
     // Tab 자동완성 — ink-text-input 이 Tab 을 자체 처리하지 않아 충돌 없음.
     if (key.tab) {
       const sel = slashItems[Math.min(menuIndex, slashItems.length - 1)];
-      if (sel) setInput(expandSlash(sel));
+      if (sel) completeSlash(sel);
       return;
     }
   });
@@ -676,6 +690,27 @@ export function ChatApp({
       }
       return true;
     }
+    if (cmd === 'figma-link' || cmd === 'openapi-link') {
+      const kind = cmd === 'figma-link' ? 'figma' : 'openapi';
+      if (!arg) {
+        const current = kind === 'figma' ? cfg.effective.design?.figma : cfg.effective.api?.openapi;
+        pushSystemInfo(`현재 ${kind === 'figma' ? 'Figma' : 'OpenAPI'}: ${current ?? '(미설정)'}\n사용법: /${cmd} <url|off>`);
+        return true;
+      }
+      try {
+        const nextCfg = await updateProjectLink(cfg, kind, arg);
+        const label = kind === 'figma' ? 'Figma' : 'OpenAPI';
+        const value = kind === 'figma' ? nextCfg.effective.design?.figma : nextCfg.effective.api?.openapi;
+        const sessionRule = value
+          ? `\n\n[프로젝트 설정 변경] ${label} 소스는 ${value} 이다. 이전 ${label} 링크와 요약은 무시하고 이 값을 사용하라.`
+          : `\n\n[프로젝트 설정 변경] ${label} 링크가 해제되었다. 이전 ${label} 링크와 요약은 사용하지 마라.`;
+        setCfg({ ...nextCfg, system: cfg.system + sessionRule });
+        pushSystemInfo(`${label} 링크를 ${value ? '변경했습니다: ' + value : '해제했습니다.'}`);
+      } catch (err) {
+        pushSystemError(err.message);
+      }
+      return true;
+    }
     if (cmd === 'image') {
       if (!arg) {
         pushSystemError('사용법: /image <파일 경로>  (Finder 에서 입력창 위로 끌어다 놓으면 경로가 자동 입력됩니다.)');
@@ -1006,25 +1041,28 @@ export function ChatApp({
 
   const onSubmit = async (raw) => {
     const line = raw.trim();
+    const exactCommand = SLASH_COMMANDS.find((item) => item.cmd === line);
+
+    // 인자가 없는 명령은 메뉴 선택 상태와 관계없이 정확히 일치하면 즉시 실행한다.
+    if (exactCommand && !exactCommand.hint) {
+      replaceInput('');
+      await handleSlash(exactCommand.cmd);
+      return;
+    }
 
-    // 슬래시 메뉴가 열려 있으면 Enter 의 의미가 두 갈래:
-    //   1) input 이 메뉴의 아이템 cmd 와 정확히 일치 + 인자 필요 없는 명령 → 즉시 실행
-    //   2) 그 외 → 선택 항목으로 자동완성만 (실행은 Enter 한 번 더)
+    // 메뉴에서 선택한 명령도 인자가 없으면 즉시 실행하고, 인자가 필요할 때만 자동완성한다.
     if (slashOpen) {
       const sel = slashItems[Math.min(menuIndex, slashItems.length - 1)];
-      const exact = slashItems.find((it) => it.cmd === line);
-      if (exact && !exact.hint) {
-        // 정확히 매칭 + 인자 불필요 → 바로 실행
-        setInput('');
-        await handleSlash(exact.cmd);
+      if (sel && !sel.hint) {
+        replaceInput('');
+        await handleSlash(sel.cmd);
         return;
       }
-      // 자동완성만 하고 멈춤 — 사용자가 인자를 더 칠 수 있게.
-      if (sel) setInput(expandSlash(sel));
+      if (sel) completeSlash(sel);
       return;
     }
 
-    setInput('');
+    replaceInput('');
     if (!line) return;
 
     if (line.startsWith('/')) {
@@ -1077,6 +1115,7 @@ export function ChatApp({
       h(Text, { color: 'magenta', bold: true }, 'you › '),
       state === 'idle' && !historyOpen
         ? h(TextInput, {
+            key: inputRevision,
             value: input,
             onChange: setInput,
             onSubmit,

package/src/utils/ensureRequiredDependencies.js

@@ -0,0 +1,58 @@
+import { execFile as execFileCallback } from 'node:child_process';
+import { promisify } from 'node:util';
+
+import { versions } from '../constants/versions.js';
+
+const execFile = promisify(execFileCallback);
+
+const COMMON_DEPENDENCIES = ['@tanstack/react-query', 'zod'];
+
+const installCommands = {
+  npm: ['npm', ['install']],
+  pnpm: ['pnpm', ['add']],
+  yarn: ['yarn', ['add']],
+  bun: ['bun', ['add']],
+};
+
+export function hasDependency(pkg, packageName) {
+  return Boolean(
+    pkg?.dependencies?.[packageName] ||
+      pkg?.devDependencies?.[packageName] ||
+      pkg?.peerDependencies?.[packageName] ||
+      pkg?.optionalDependencies?.[packageName],
+  );
+}
+
+export function requiredDependenciesForFramework(framework) {
+  return framework === 'next'
+    ? COMMON_DEPENDENCIES
+    : [...COMMON_DEPENDENCIES, 'axios'];
+}
+
+export async function ensureRequiredDependencies({
+  cwd,
+  pkg,
+  framework,
+  packageManager,
+  run = execFile,
+}) {
+  const missing = requiredDependenciesForFramework(framework).filter(
+    (packageName) => !hasDependency(pkg, packageName),
+  );
+
+  if (!missing.length) {
+    return { installed: [], packageManager };
+  }
+
+  const selectedPackageManager = installCommands[packageManager]
+    ? packageManager
+    : 'npm';
+  const [command, baseArgs] = installCommands[selectedPackageManager];
+  const packageSpecs = missing.map(
+    (packageName) => `${packageName}@${versions[packageName]}`,
+  );
+
+  await run(command, [...baseArgs, ...packageSpecs], { cwd });
+
+  return { installed: missing, packageManager: selectedPackageManager };
+}