create-vite-react-boot 1.0.18 → 1.0.20

package/bin/cli.js

@@ -3,84 +3,148 @@ 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"; // ← 진행바 렌더링용
+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);
+}
+/** 로그 노출 실행 */
+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);
+}
 
+/*──────────────────────────────────────────────────────────────────────────────
+  진행바/스피너 헬퍼
+──────────────────────────────────────────────────────────────────────────────*/
 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 barLine({ width, ratio }) {
-  const w = Math.max(10, width);
-  const filled = Math.round(w * Math.max(0, Math.min(1, ratio)));
-  return `[${"#".repeat(filled)}${"-".repeat(w - filled)}]`;
-}
-function writeLine(y, text) {
-  readline.cursorTo(process.stdout, 0, y);
-  readline.clearLine(process.stdout, 0);
-  process.stdout.write(text);
-}
 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)}]`;
+}
 
+/** 진행바 기반 실행 (yarn/pnpm은 이벤트 파싱, npm은 추정 진행) */
 async function runWithProgress(cmd, args = [], { cwd, env } = {}, label = "작업") {
   const start = Date.now();
-  const { cols } = termSize();
-  const barWidth = Math.min(40, Math.max(20, Math.floor(cols * 0.35)));
-  let linesReserved = 3; // 헤더 + 메인바 + 로그요약 1줄
+  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 (정확 모드에서만)
-  let downloadedBytes = 0;     // 추정치(출력 길이 기반, npm fallback)
-  let totalHint = null;        // yarn/pnpm가 알려주면 총량
+  let percent = null;          // 0..1 (yarn/pnpm 이벤트 기반)
+  let downloadedBytes = 0;     // 추정치(출력 길이 기반)
+  let totalHint = null;        // yarn/pnpm가 주면 총량 추정
   let lastTick = Date.now();
-  let emaRate = 0;             // 지수이동평균(바이트/초), ETA 추정용
+  let emaRate = 0;             // byte/s
   const alpha = 0.15;
 
-  // 화면 세팅
-  const startTop = process.stdout.rows ? (process.stdout.rows - 1) : 0;
-  process.stdout.write("\x1B[?25l"); // 커서 숨김
-  const header = () => {
+  // 렌더 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) : "--:--";
       }
-      if (emaRate > 100) {
-        const remainBytes = totalHint ? (totalHint - downloadedBytes) : null;
-        if (remainBytes && remainBytes > 0) return formatHMS(remainBytes / emaRate);
-      }
-      return "--:--";
+      return emaRate > 50 ? formatHMS((totalHint ? Math.max(0, totalHint - downloadedBytes) : 0) / Math.max(1, emaRate)) : "--:--";
     })();
-    return `${label}  [${formatHMS(elapsed)}]  ${totalHint ? `${(downloadedBytes / 1048576).toFixed(1)} / ${(totalHint / 1048576).toFixed(1)} MiB` : `${(downloadedBytes / 1048576).toFixed(1)} MiB`}  (eta: ${eta})`;
+
+    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;
   };
 
-  // 렌더러
-  function render(lastMsg = "") {
-    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 line0 = header();
-    const line1 = `${barLine({ width: barWidth, ratio })}`;
-    const line2 = lastMsg ? `… ${lastMsg.slice(0, cols - 4)}` : "";
-
-    // 위에서 3줄 확보해 덮어쓰기
-    writeLine(0, line0.padEnd(cols));
-    writeLine(1, line1.padEnd(cols));
-    writeLine(2, line2.padEnd(cols));
-  }
+  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) => {
-    // yarn/pnpm에선 JSON/ndjson 모드로 이벤트 파싱을 노려본다
     let a = args.slice();
     const isYarn = /yarn/i.test(cmd);
     const isPnpm = /pnpm/i.test(cmd);
@@ -95,28 +159,21 @@ async function runWithProgress(cmd, args = [], { cwd, env } = {}, label = "작
       shell: false,
     });
 
-    let bufOut = "", bufErr = "";
     let lastMsg = "";
-
     const handleJSONLine = (line) => {
       try {
         const j = JSON.parse(line);
-        // yarn classic: progressStart/progressTick/progressFinish
-        if (j.type === "progressStart" && j.data && typeof j.data.current === "number" && typeof j.data.total === "number") {
-          const total = j.data.total;
-          totalHint = total;       // 단위는 'tick'이지만 총량 힌트로 사용
+        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") {
-          percent = Math.max(0, Math.min(1, j.data.current / j.data.total));
-          // tick 기반으로도 바이트 추정치 보정
-          downloadedBytes += 64 * 1024; // 대략치
-        }
-        if (j.type === "step" && j.data) {
-          lastMsg = j.data;
+          const p = j.data.current / j.data.total;
+          if (!Number.isNaN(p)) percent = Math.max(0, Math.min(1, p));
+          downloadedBytes += 64 * 1024; // 대략 보정
         }
-        // pnpm ndjson: msg에 Progress 문구가 섞임
-        if (j.msg) lastMsg = j.msg;
-      } catch { /* ignore non-json */ }
+        if (j.type === "step" && j.data) lastMsg = String(j.data);
+        if (j.msg) lastMsg = String(j.msg);
+      } catch { /* ignore */ }
     };
 
     const tickRate = (chunkLen) => {
@@ -130,184 +187,151 @@ async function runWithProgress(cmd, args = [], { cwd, env } = {}, label = "작
     };
 
     child.stdout.on("data", (b) => {
-      const s = b.toString("utf8");
-      bufOut += s;
-      downloadedBytes += b.length;  // npm fallback 시 “대략 MiB”로 사용
+      downloadedBytes += b.length;
       tickRate(b.length);
-
-      // yarn/pnpm JSON 라인 파싱
+      const s = b.toString("utf8");
       if (isYarn || isPnpm) {
-        const lines = s.split(/\r?\n/);
-        for (const ln of lines) {
-          if (!ln.trim()) continue;
-          handleJSONLine(ln);
-        }
+        for (const ln of s.split(/\r?\n/)) if (ln.trim()) handleJSONLine(ln);
       } else {
         lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
       }
-      render(lastMsg);
+      safeWrite(mkLine(lastMsg));
     });
     child.stderr.on("data", (b) => {
-      const s = b.toString("utf8");
-      bufErr += s;
       downloadedBytes += b.length;
       tickRate(b.length);
-
+      const s = b.toString("utf8");
       if (isYarn || isPnpm) {
-        const lines = s.split(/\r?\n/);
-        for (const ln of lines) {
-          if (!ln.trim()) continue;
-          // 일부 PM은 stderr에도 json이 섞여온다
-          if ((ln.startsWith("{") && ln.endsWith("}"))) handleJSONLine(ln);
-        }
+        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;
       }
-      render(lastMsg);
+      safeWrite(mkLine(lastMsg));
     });
 
-    // 주기적 리렌더 (출력이 잠시 멎어도 바 갱신)
-    const iv = setInterval(() => render(lastMsg), 80);
+    // 주기적 업데이트 (출력 없을 때도 500ms마다만 갱신)
+    const iv = setInterval(() => safeWrite(mkLine(lastMsg)), 500);
 
     child.on("error", (e) => {
       clearInterval(iv);
-      // 마지막 화면 정리
-      render("에러 발생");
-      process.stdout.write("\x1B[?25h");
+      finishWrite(false);
       reject(e);
     });
     child.on("close", (code) => {
       clearInterval(iv);
-      percent = 1;
-      render("완료");
-      process.stdout.write("\n\x1B[?25h");
-      if (code === 0) resolve();
-      else reject(Object.assign(new Error(`${cmd} exited ${code}`), { code, stdout: bufOut, stderr: bufErr }));
+      finishWrite(code === 0);
+      if (code === 0) resolve(); else reject(Object.assign(new Error(`${cmd} exited ${code}`), { code }));
     });
   });
-}
-
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const cwd = process.cwd();
-
-/** 조용히 실행(로그 숨김) */
-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);
+  // 커서 복구는 전역 핸들러가 처리
 }
 
-/** 로그를 보여주며 실행(서브프로세스 출력 노출) */
-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);
-}
-
-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");
+/** 경량 스피너 (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 isEmptyDir(dir) {
-    return !fs.existsSync(dir) || fs.readdirSync(dir).length === 0;
-}
+// 전역 커서 복구 (비정상 종료 포함)
+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); });
 
+/*──────────────────────────────────────────────────────────────────────────────
+  메인
+──────────────────────────────────────────────────────────────────────────────*/
 (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);
+  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);
+  }
 
-    // 같은 폴더에서 다시 실행 방지: 이미 뭔가 있으면 중단
-    if (fs.existsSync(target) && !isEmptyDir(target)) {
-        console.log(red(`✖ 대상 폴더가 비어있지 않습니다: ${target}`));
-        process.exit(1);
-    }
+  const target = path.resolve(cwd, appName);
+  if (fs.existsSync(target) && !isEmptyDir(target)) {
+    console.log(red(`✖ 대상 폴더가 비어있지 않습니다: ${target}`));
+    process.exit(1);
+  }
 
-    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);
+  const pm = detectPM();
+
+  // 1) 기본 파일 생성
+  console.log(cyan(`\n▶ Vite + React + TypeScript 기본 파일 생성…`));
+  ensureDir(target);
+
+  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);
 
-    // tsconfig들
-    write(
-        path.join(target, "tsconfig.json"),
-        `{
+  write(path.join(target, "tsconfig.json"), `{
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -322,11 +346,8 @@ function isEmptyDir(dir) {
   },
   "include": ["src"]
 }
-`
-    );
-    write(
-        path.join(target, "tsconfig.node.json"),
-        `{
+`);
+  write(path.join(target, "tsconfig.node.json"), `{
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
@@ -335,33 +356,18 @@ function isEmptyDir(dir) {
   },
   "include": ["vite.config.ts"]
 }
-`
-    );
-
-    // vite.config.ts
-    write(
-        path.join(target, "vite.config.ts"),
-        `import { defineConfig } from 'vite'
+`);
+  write(path.join(target, "vite.config.ts"), `import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 export default defineConfig({ plugins: [react()] })
-`
-    );
-
-    // .gitignore (Windows/Unix 공통)
-    write(
-        path.join(target, ".gitignore"),
-        `node_modules
+`);
+  write(path.join(target, ".gitignore"), `node_modules
 dist
 .cache
 .vscode
 .DS_Store
-`
-    );
-
-    // index.html
-    write(
-        path.join(target, "index.html"),
-        `<!doctype html>
+`);
+  write(path.join(target, "index.html"), `<!doctype html>
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
@@ -373,18 +379,10 @@ dist
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-`
-    );
-
-    // 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'
+`);
+  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: {
@@ -394,13 +392,8 @@ export default {
   },
   plugins: []
 } satisfies Config
-`
-    );
-
-    // src 엔트리
-    write(
-        path.join(target, "src", "index.css"),
-        `@tailwind base;
+`);
+  write(path.join(target, "src", "index.css"), `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -418,11 +411,8 @@ 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'
@@ -438,11 +428,8 @@ 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 <>
@@ -452,48 +439,53 @@ export default function App(){
     </main>
   </>
 }
-`
-    );
+`);
 
-    // ─────────────────────────────────────────────
-    // 2) 1회 설치 (조용히 설치: fund/audit 등 장황 로그 숨김)
-  // ─────────────────────────────────────────────
+  // 2) 설치 (진행바 + TTY/ENV 폴백)
   console.log(yellow(`\n▶ 의존성 설치 중입니다. 잠시만 기다려주세요…\n`));
 
-
-    // 패키지 매니저별 silent 옵션
   const silentFlag =
     pm === "npm" ? "--silent" :
       pm === "yarn" ? "--silent" :
         pm === "pnpm" ? "--silent" : "";
 
-  // CI 환경이면 npm은 ci 사용, 아니면 install
   const isCI = process.env.CI === "true";
   const args =
     pm === "npm"
       ? [isCI ? "ci" : "install", ...(silentFlag ? [silentFlag] : [])]
       : ["install", ...(silentFlag ? [silentFlag] : [])];
-  
-  
-  await runWithProgress(pm, args, { cwd: target }, "의존성 설치");
+
+  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) 인증/라우팅/axios/Tailwind 추가 파일 (파일만 생성, 설치 없음)
-    // ─────────────────────────────────────────────
-    console.log(yellow("▶ 인증/라우팅/Tailwind/axios 스캐폴딩 적용…"));
-    await applyScaffold({ root: target });
 
-    // ─────────────────────────────────────────────
-    // 4) 자동 cd + dev 서버 실행
-    // ─────────────────────────────────────────────
-    console.log(green("\n✅ 프로젝트 준비 완료!\n"));
-    console.log(cyan("▶ 개발 서버를 시작합니다…\n"));
+  // 3) 추가 스캐폴딩 (경량 스피너)
+  const sp = makeSpinner("스캐폴딩 적용");
+  sp.start();
+  try {
+    await applyScaffold({ root: target });
+    sp.succeed("스캐폴딩 적용");
+  } catch (e) {
+    sp.fail("스캐폴딩 실패");
+    throw e;
+  }
 
-    // 작업 디렉토리 전환 후 dev 실행
-    process.chdir(target);
+  // 4) dev 서버 실행
+  console.log(green("\n✅ 프로젝트 준비 완료!\n"));
+  console.log(cyan("▶ 개발 서버를 시작합니다…\n"));
 
-    // npm / yarn / pnpm 공통: pm run dev
-    runPrint(pm, ["run", "dev"], { cwd: target });
+  process.chdir(target);
+  runPrint(pm, ["run", "dev"], { cwd: target });
 })();
- 

package/package.json

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