create-vite-react-boot 1.0.20 → 1.0.21

package/bin/cli.js

@@ -3,335 +3,130 @@ import { fileURLToPath } from "url";
 import path from "path";
 import fs from "fs";
 import prompts from "prompts";
-import spawn from "cross-spawn";
+import spawn from "cross-spawn"; // 크로스플랫폼 스폰
 import { green, yellow, red, cyan, bold } from "kolorist";
 import { applyScaffold } from "../lib/apply.js";
-import readline from "node:readline";
 
-/*──────────────────────────────────────────────────────────────────────────────
-  기본 유틸
-──────────────────────────────────────────────────────────────────────────────*/
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const cwd = process.cwd();
 
-function detectPM() {
-  const ua = process.env.npm_config_user_agent || "";
-  if (ua.includes("pnpm")) return "pnpm";
-  if (ua.includes("yarn")) return "yarn";
-  return "npm";
-}
-function ensureDir(dir) {
-  fs.mkdirSync(dir, { recursive: true });
-}
-function write(p, content) {
-  ensureDir(path.dirname(p));
-  fs.writeFileSync(p, content);
-}
-function writeJSON(p, obj) {
-  write(p, JSON.stringify(obj, null, 2) + "\n");
-}
-function isEmptyDir(dir) {
-  return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0;
-}
-/** 조용 실행(출력 숨김) */
+/** 조용히 실행(로그 숨김) */
 function runQuiet(cmd, args = [], options = {}) {
-  const child = spawn.sync(cmd, args, { stdio: "pipe", shell: false, ...options });
-  const code = child.status ?? 0;
-  if (code !== 0) process.exit(code);
+    const child = spawn.sync(cmd, args, {
+        stdio: "pipe",          // ← 출력 숨김
+        shell: false,
+        ...options,
+    });
+    const code = child.status ?? 0;
+    if (code !== 0) process.exit(code);
 }
-/** 로그 노출 실행 */
+
+/** 로그를 보여주며 실행(서브프로세스 출력 노출) */
 function runPrint(cmd, args = [], options = {}) {
-  const child = spawn.sync(cmd, args, { stdio: "inherit", shell: false, ...options });
-  const code = child.status ?? 0;
-  if (code !== 0) process.exit(code);
+    const child = spawn.sync(cmd, args, {
+        stdio: "inherit",       // ← 출력 표시
+        shell: false,
+        ...options,
+    });
+    const code = child.status ?? 0;
+    if (code !== 0) process.exit(code);
 }
 
-/*──────────────────────────────────────────────────────────────────────────────
-  진행바/스피너 헬퍼
-──────────────────────────────────────────────────────────────────────────────*/
-function formatHMS(s) {
-  const m = Math.floor(s / 60).toString().padStart(2, "0");
-  const ss = Math.floor(s % 60).toString().padStart(2, "0");
-  return `${m}:${ss}`;
-}
-function termSize() {
-  const cols = process.stdout.columns || 80;
-  const rows = process.stdout.rows || 24;
-  return { cols, rows };
-}
-function barLine({ width, ratio }) {
-  const w = Math.max(10, width);
-  const r = Math.max(0, Math.min(1, ratio));
-  const filled = Math.round(w * r);
-  return `[${"#".repeat(filled)}${"-".repeat(w - filled)}]`;
+function detectPM() {
+    const ua = process.env.npm_config_user_agent || "";
+    if (ua.includes("pnpm")) return "pnpm";
+    if (ua.includes("yarn")) return "yarn";
+    return "npm";
 }
 
-/** 진행바 기반 실행 (yarn/pnpm은 이벤트 파싱, npm은 추정 진행) */
-async function runWithProgress(cmd, args = [], { cwd, env } = {}, label = "작업") {
-  const start = Date.now();
-  const cols = process.stdout.columns || 80;
-
-  // ── Windows/Git Bash 등에서 안전하게: 1줄 Compact 모드
-  const compact = process.platform === "win32" || process.env.PROGRESS_COMPACT === "1";
-
-  // 상태
-  let percent = null;          // 0..1 (yarn/pnpm 이벤트 기반)
-  let downloadedBytes = 0;     // 추정치(출력 길이 기반)
-  let totalHint = null;        // yarn/pnpm가 주면 총량 추정
-  let lastTick = Date.now();
-  let emaRate = 0;             // byte/s
-  const alpha = 0.15;
-
-  // 렌더 throttle & dedupe
-  let lastRender = 0;
-  let lastPrinted = "";
-
-  const mkLine = (brief = "") => {
-    const elapsed = (Date.now() - start) / 1000;
-    const ratio = percent != null
-      ? percent
-      : Math.min(0.95, Math.max(0.1, 1 - 1 / Math.max(2, elapsed / 3)));
-
-    const barWidth = Math.min(24, Math.max(10, Math.floor(cols * 0.25)));
-    const filled = Math.round(barWidth * Math.max(0, Math.min(1, ratio)));
-    const bar = `[${"#".repeat(filled)}${"-".repeat(barWidth - filled)}]`;
-
-    const eta = (() => {
-      if (percent != null && percent > 0 && totalHint) {
-        const remain = (1 - percent) * totalHint;
-        const rate = emaRate > 1 ? emaRate : null;
-        return rate ? formatHMS(remain / rate) : "--:--";
-      }
-      return emaRate > 50 ? formatHMS((totalHint ? Math.max(0, totalHint - downloadedBytes) : 0) / Math.max(1, emaRate)) : "--:--";
-    })();
-
-    const sizeText = totalHint
-      ? `${(downloadedBytes / 1048576).toFixed(1)}/${(totalHint / 1048576).toFixed(1)}MiB`
-      : `${(downloadedBytes / 1048576).toFixed(1)}MiB`;
-
-    const head = `${label} [${formatHMS(elapsed)}] ${sizeText} (eta:${eta})`;
-    const msg = brief ? ` ${brief}` : "";
-
-    // Compact 1줄로 잘라쓰기
-    let line = `${head} ${bar}${msg}`;
-    if (line.length > cols) line = line.slice(0, cols - 1);
-    return line;
-  };
-
-  const safeWrite = (line) => {
-    // 200ms 이하/동일 라인일 땐 스킵
-    const now = Date.now();
-    if (now - lastRender < 200) return;
-    if (line === lastPrinted) return;
-
-    lastRender = now;
-    lastPrinted = line;
-
-    // 1줄 덮어쓰기
-    readline.clearLine(process.stdout, 0);
-    readline.cursorTo(process.stdout, 0);
-    process.stdout.write(line);
-  };
-
-  const finishWrite = (ok = true) => {
-    readline.clearLine(process.stdout, 0);
-    readline.cursorTo(process.stdout, 0);
-    process.stdout.write((ok ? "… 완료" : "… 실패") + "\n");
-  };
-
-  // 커서 숨김 (종료 시 복구는 전역 핸들러에서)
-  process.stdout.write("\x1B[?25l");
-  // Compact 모드는 별도 빈줄 확보 없이 1줄만 사용
-  safeWrite(mkLine());
-
-  await new Promise((resolve, reject) => {
-    let a = args.slice();
-    const isYarn = /yarn/i.test(cmd);
-    const isPnpm = /pnpm/i.test(cmd);
-
-    if (isYarn && !a.includes("--json")) a.push("--json");
-    if (isPnpm && !a.includes("--reporter")) a.push("--reporter", "ndjson");
-
-    const child = spawn(cmd, a, {
-      stdio: ["ignore", "pipe", "pipe"],
-      cwd,
-      env: { ...process.env, ...env },
-      shell: false,
-    });
-
-    let lastMsg = "";
-    const handleJSONLine = (line) => {
-      try {
-        const j = JSON.parse(line);
-        if (j.type === "progressStart" && j.data && typeof j.data.total === "number") {
-          totalHint = j.data.total;
-        }
-        if (j.type === "progressTick" && j.data && typeof j.data.current === "number" && typeof j.data.total === "number") {
-          const p = j.data.current / j.data.total;
-          if (!Number.isNaN(p)) percent = Math.max(0, Math.min(1, p));
-          downloadedBytes += 64 * 1024; // 대략 보정
-        }
-        if (j.type === "step" && j.data) lastMsg = String(j.data);
-        if (j.msg) lastMsg = String(j.msg);
-      } catch { /* ignore */ }
-    };
-
-    const tickRate = (chunkLen) => {
-      const now = Date.now();
-      const dt = (now - lastTick) / 1000;
-      lastTick = now;
-      if (dt > 0) {
-        const inst = chunkLen / dt;
-        emaRate = emaRate ? (emaRate * (1 - alpha) + inst * alpha) : inst;
-      }
-    };
-
-    child.stdout.on("data", (b) => {
-      downloadedBytes += b.length;
-      tickRate(b.length);
-      const s = b.toString("utf8");
-      if (isYarn || isPnpm) {
-        for (const ln of s.split(/\r?\n/)) if (ln.trim()) handleJSONLine(ln);
-      } else {
-        lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
-      }
-      safeWrite(mkLine(lastMsg));
-    });
-    child.stderr.on("data", (b) => {
-      downloadedBytes += b.length;
-      tickRate(b.length);
-      const s = b.toString("utf8");
-      if (isYarn || isPnpm) {
-        for (const ln of s.split(/\r?\n/)) if (ln.trim() && ln.startsWith("{") && ln.endsWith("}")) handleJSONLine(ln);
-      } else {
-        lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
-      }
-      safeWrite(mkLine(lastMsg));
-    });
-
-    // 주기적 업데이트 (출력 없을 때도 500ms마다만 갱신)
-    const iv = setInterval(() => safeWrite(mkLine(lastMsg)), 500);
-
-    child.on("error", (e) => {
-      clearInterval(iv);
-      finishWrite(false);
-      reject(e);
-    });
-    child.on("close", (code) => {
-      clearInterval(iv);
-      finishWrite(code === 0);
-      if (code === 0) resolve(); else reject(Object.assign(new Error(`${cmd} exited ${code}`), { code }));
-    });
-  });
-
-  // 커서 복구는 전역 핸들러가 처리
+function ensureDir(dir) {
+    fs.mkdirSync(dir, { recursive: true });
 }
 
+function write(p, content) {
+    ensureDir(path.dirname(p));
+    fs.writeFileSync(p, content);
+}
 
-/** 경량 스피너 (applyScaffold 등 파일 생성용) */
-function makeSpinner(text = "") {
-  const frames = process.platform === "win32" ? ["-", "\\", "|", "/"] : ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-  let i = 0, timer = null;
-  const startTime = Date.now();
-  return {
-    start(msg = text) {
-      process.stdout.write("\x1B[?25l");
-      timer = setInterval(() => {
-        const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
-        readline.clearLine(process.stdout, 0);
-        readline.cursorTo(process.stdout, 0);
-        process.stdout.write(`${frames[i = (i + 1) % frames.length]} ${msg} ${bold(cyan(`${elapsed}s`))}`);
-      }, 80);
-    },
-    succeed(msg = text) {
-      if (timer) clearInterval(timer);
-      readline.clearLine(process.stdout, 0);
-      readline.cursorTo(process.stdout, 0);
-      process.stdout.write(`${green("✔")} ${msg}\n`);
-      process.stdout.write("\x1B[?25h");
-    },
-    fail(msg = text) {
-      if (timer) clearInterval(timer);
-      readline.clearLine(process.stdout, 0);
-      readline.cursorTo(process.stdout, 0);
-      process.stdout.write(`${red("✖")} ${msg}\n`);
-      process.stdout.write("\x1B[?25h");
-    }
-  };
+function writeJSON(p, obj) {
+    write(p, JSON.stringify(obj, null, 2) + "\n");
 }
 
-// 전역 커서 복구 (비정상 종료 포함)
-const showCursor = () => { try { process.stdout.write("\x1B[?25h"); } catch { } };
-process.on("exit", showCursor);
-process.on("SIGINT", () => { showCursor(); process.exit(1); });
-process.on("uncaughtException", () => { showCursor(); process.exit(1); });
-process.on("unhandledRejection", () => { showCursor(); process.exit(1); });
+function isEmptyDir(dir) {
+    return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0;
+}
 
-/*──────────────────────────────────────────────────────────────────────────────
-  메인
-──────────────────────────────────────────────────────────────────────────────*/
 (async function main() {
-  const argName = process.argv[2];
-
-  const { name } = await prompts(
-    [
-      {
-        type: argName ? null : "text",
-        name: "name",
-        message: "프로젝트 이름?",
-        initial: "myapp",
-        validate: (v) => !v || /[\\/:*?"<>|]/.test(v) ? "유효한 폴더명을 입력하세요." : true,
-      },
-    ],
-    { onCancel: () => process.exit(1) }
-  );
-
-  const appName = argName || name;
-  if (!appName) {
-    console.log(red("✖ 프로젝트 이름이 비어있습니다."));
-    process.exit(1);
-  }
-
-  const target = path.resolve(cwd, appName);
-  if (fs.existsSync(target) && !isEmptyDir(target)) {
-    console.log(red(`✖ 대상 폴더가 비어있지 않습니다: ${target}`));
-    process.exit(1);
-  }
+    const argName = process.argv[2];
+
+    const { name } = await prompts(
+        [
+            {
+                type: argName ? null : "text",
+                name: "name",
+                message: "프로젝트 이름?",
+                initial: "myapp",
+                validate: (v) =>
+                    !v || /[\\/:*?"<>|]/.test(v) ? "유효한 폴더명을 입력하세요." : true,
+            },
+        ],
+        { onCancel: () => process.exit(1) }
+    );
+
+    const appName = argName || name;
+    if (!appName) {
+        console.log(red("✖ 프로젝트 이름이 비어있습니다."));
+        process.exit(1);
+    }
 
-  const pm = detectPM();
+    const target = path.resolve(cwd, appName);
 
-  // 1) 기본 파일 생성
-  console.log(cyan(`\n▶ Vite + React + TypeScript 기본 파일 생성…`));
-  ensureDir(target);
+    // 같은 폴더에서 다시 실행 방지: 이미 뭔가 있으면 중단
+    if (fs.existsSync(target) && !isEmptyDir(target)) {
+        console.log(red(`✖ 대상 폴더가 비어있지 않습니다: ${target}`));
+        process.exit(1);
+    }
 
-  const pkgJson = {
-    name: appName,
-    private: true,
-    version: "0.0.0",
-    type: "module",
-    scripts: {
-      dev: "vite",
-      build: "tsc -b && vite build",
-      preview: "vite preview",
-    },
-    dependencies: {
-      react: "^18.3.1",
-      "react-dom": "^18.3.1",
-      "react-router-dom": "^6.26.1",
-      axios: "^1.7.7",
-    },
-    devDependencies: {
-      typescript: "^5.5.4",
-      vite: "^5.4.2",
-      "@vitejs/plugin-react": "^4.3.1",
-      tailwindcss: "^3.4.10",
-      postcss: "^8.4.47",
-      autoprefixer: "^10.4.20",
-    },
-  };
-  writeJSON(path.join(target, "package.json"), pkgJson);
+    const pm = detectPM();
+
+    // ─────────────────────────────────────────────
+    // 1) Vite + React + TS 기본 구조를 '직접' 생성 (무프롬프트)
+    // ─────────────────────────────────────────────
+    console.log(cyan(`\n▶ Vite + React + TypeScript 기본 파일 생성…`));
+    ensureDir(target);
+
+    // package.json
+    const pkgJson = {
+        name: appName,
+        private: true,
+        version: "0.0.0",
+        type: "module",
+        scripts: {
+            dev: "vite",
+            build: "tsc -b && vite build",
+            preview: "vite preview",
+        },
+        dependencies: {
+            react: "^18.3.1",
+            "react-dom": "^18.3.1",
+            "react-router-dom": "^6.26.1",
+            axios: "^1.7.7",
+        },
+        devDependencies: {
+            typescript: "^5.5.4",
+            vite: "^5.4.2",
+            "@vitejs/plugin-react": "^4.3.1",
+            tailwindcss: "^3.4.10",
+            postcss: "^8.4.47",
+            autoprefixer: "^10.4.20",
+        },
+    };
+    writeJSON(path.join(target, "package.json"), pkgJson);
 
-  write(path.join(target, "tsconfig.json"), `{
+    // tsconfig들
+    write(
+        path.join(target, "tsconfig.json"),
+        `{
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -346,8 +141,11 @@ process.on("unhandledRejection", () => { showCursor(); process.exit(1); });
   },
   "include": ["src"]
 }
-`);
-  write(path.join(target, "tsconfig.node.json"), `{
+`
+    );
+    write(
+        path.join(target, "tsconfig.node.json"),
+        `{
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
@@ -356,18 +154,33 @@ process.on("unhandledRejection", () => { showCursor(); process.exit(1); });
   },
   "include": ["vite.config.ts"]
 }
-`);
-  write(path.join(target, "vite.config.ts"), `import { defineConfig } from 'vite'
+`
+    );
+
+    // vite.config.ts
+    write(
+        path.join(target, "vite.config.ts"),
+        `import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 export default defineConfig({ plugins: [react()] })
-`);
-  write(path.join(target, ".gitignore"), `node_modules
+`
+    );
+
+    // .gitignore (Windows/Unix 공통)
+    write(
+        path.join(target, ".gitignore"),
+        `node_modules
 dist
 .cache
 .vscode
 .DS_Store
-`);
-  write(path.join(target, "index.html"), `<!doctype html>
+`
+    );
+
+    // index.html
+    write(
+        path.join(target, "index.html"),
+        `<!doctype html>
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
@@ -379,10 +192,18 @@ dist
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-`);
-  write(path.join(target, "postcss.config.js"), `export default { plugins: { tailwindcss: {}, autoprefixer: {} } }
-`);
-  write(path.join(target, "tailwind.config.ts"), `import type { Config } from 'tailwindcss'
+`
+    );
+
+    // Tailwind
+    write(
+        path.join(target, "postcss.config.js"),
+        `export default { plugins: { tailwindcss: {}, autoprefixer: {} } }
+`
+    );
+    write(
+        path.join(target, "tailwind.config.ts"),
+        `import type { Config } from 'tailwindcss'
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   theme: {
@@ -392,8 +213,13 @@ export default {
   },
   plugins: []
 } satisfies Config
-`);
-  write(path.join(target, "src", "index.css"), `@tailwind base;
+`
+    );
+
+    // src 엔트리
+    write(
+        path.join(target, "src", "index.css"),
+        `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -411,8 +237,11 @@ export default {
   .header{@apply sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-gray-200}
   .container{@apply max-w-5xl mx-auto px-4}
 }
-`);
-  write(path.join(target, "src", "main.tsx"), `import React from 'react'
+`
+    );
+    write(
+        path.join(target, "src", "main.tsx"),
+        `import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App'
@@ -428,8 +257,11 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     </AuthProvider>
   </React.StrictMode>
 )
-`);
-  write(path.join(target, "src", "App.tsx"), `import Header from './components/Header'
+`
+    );
+    write(
+        path.join(target, "src", "App.tsx"),
+        `import Header from './components/Header'
 import RoutesView from './routes/index'
 export default function App(){
   return <>
@@ -439,53 +271,40 @@ export default function App(){
     </main>
   </>
 }
-`);
-
-  // 2) 설치 (진행바 + TTY/ENV 폴백)
-  console.log(yellow(`\n▶ 의존성 설치 중입니다. 잠시만 기다려주세요…\n`));
-
-  const silentFlag =
-    pm === "npm" ? "--silent" :
-      pm === "yarn" ? "--silent" :
-        pm === "pnpm" ? "--silent" : "";
-
-  const isCI = process.env.CI === "true";
-  const args =
-    pm === "npm"
-      ? [isCI ? "ci" : "install", ...(silentFlag ? [silentFlag] : [])]
-      : ["install", ...(silentFlag ? [silentFlag] : [])];
-
-  const envExtra =
-    pm === "npm"
-      ? { npm_config_loglevel: "error", npm_config_fund: "false", npm_config_audit: "false" }
-      : {};
-
-  const progressMode = process.env.PROGRESS; // 'plain' | 'force' | undefined
-  const wantPlain = progressMode === "plain" || (!process.stdout.isTTY && progressMode !== "force");
-
-  if (wantPlain) {
-    runQuiet(pm, args, { cwd: target, env: { ...process.env, ...envExtra } });
-  } else {
-    await runWithProgress(pm, args, { cwd: target, env: envExtra }, "의존성 설치");
-  }
-
-  console.log(green("   → 의존성 설치 완료!\n"));
-
-  // 3) 추가 스캐폴딩 (경량 스피너)
-  const sp = makeSpinner("스캐폴딩 적용");
-  sp.start();
-  try {
+`
+    );
+
+    // ─────────────────────────────────────────────
+    // 2) 1회 설치 (조용히 설치: fund/audit 등 장황 로그 숨김)
+    // ─────────────────────────────────────────────
+    console.log(yellow(`\n▶ 의존성 설치 중입니다. 잠시만 기다려주세요…\n`));
+
+    // 패키지 매니저별 silent 옵션
+    const silentFlag =
+        pm === "npm" ? "--silent" :
+            pm === "yarn" ? "--silent" :
+                pm === "pnpm" ? "--silent" :
+                    "";
+
+    runQuiet(pm, ["install", ...(silentFlag ? [silentFlag] : [])], { cwd: target });
+    console.log(green("   → 의존성 설치 완료!\n"));
+
+    // ─────────────────────────────────────────────
+    // 3) 인증/라우팅/axios/Tailwind 추가 파일 (파일만 생성, 설치 없음)
+    // ─────────────────────────────────────────────
+    console.log(yellow("▶ 인증/라우팅/Tailwind/axios 스캐폴딩 적용…"));
     await applyScaffold({ root: target });
-    sp.succeed("스캐폴딩 적용");
-  } catch (e) {
-    sp.fail("스캐폴딩 실패");
-    throw e;
-  }
 
-  // 4) dev 서버 실행
-  console.log(green("\n✅ 프로젝트 준비 완료!\n"));
-  console.log(cyan("▶ 개발 서버를 시작합니다…\n"));
+    // ─────────────────────────────────────────────
+    // 4) 자동 cd + dev 서버 실행
+    // ─────────────────────────────────────────────
+    console.log(green("\n✅ 프로젝트 준비 완료!\n"));
+    console.log(cyan("▶ 개발 서버를 시작합니다…\n"));
+
+    // 작업 디렉토리 전환 후 dev 실행
+    process.chdir(target);
 
-  process.chdir(target);
-  runPrint(pm, ["run", "dev"], { cwd: target });
+    // npm / yarn / pnpm 공통: pm run dev
+    runPrint(pm, ["run", "dev"], { cwd: target });
 })();
+ 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-vite-react-boot",
-    "version": "1.0.20",
+    "version": "1.0.21",
     "description": "Create a Vite + React + TS app with Tailwind, axios, AuthContext, login/register, routing.",
     "type": "module",
     "bin": {