create-vite-react-boot 1.0.15 → 1.0.17

package/bin/cli.js

@@ -7,6 +7,187 @@ import spawn from "cross-spawn"; // 크로스플랫폼 스폰
 import { green, yellow, red, cyan, bold } from "kolorist";
 import { applyScaffold } from "../lib/apply.js";
 
+import readline from "node:readline";
+
+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 };
+}
+
+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줄
+
+  // 상태
+  let percent = null;          // 0..1 (정확 모드에서만)
+  let downloadedBytes = 0;     // 추정치(출력 길이 기반, npm fallback)
+  let totalHint = null;        // yarn/pnpm가 알려주면 총량
+  let lastTick = Date.now();
+  let emaRate = 0;             // 지수이동평균(바이트/초), ETA 추정용
+  const alpha = 0.15;
+
+  // 화면 세팅
+  const startTop = process.stdout.rows ? (process.stdout.rows - 1) : 0;
+  process.stdout.write("\x1B[?25l"); // 커서 숨김
+  const header = () => {
+    const elapsed = (Date.now() - start) / 1000;
+    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 `${label}  [${formatHMS(elapsed)}]  ${totalHint ? `${(downloadedBytes / 1048576).toFixed(1)} / ${(totalHint / 1048576).toFixed(1)} MiB` : `${(downloadedBytes / 1048576).toFixed(1)} MiB`}  (eta: ${eta})`;
+  };
+
+  // 렌더러
+  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));
+  }
+
+  // 프로세스 실행
+  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);
+
+    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 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 === "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;
+        }
+        // pnpm ndjson: msg에 Progress 문구가 섞임
+        if (j.msg) lastMsg = j.msg;
+      } catch { /* ignore non-json */ }
+    };
+
+    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) => {
+      const s = b.toString("utf8");
+      bufOut += s;
+      downloadedBytes += b.length;  // npm fallback 시 “대략 MiB”로 사용
+      tickRate(b.length);
+
+      // yarn/pnpm JSON 라인 파싱
+      if (isYarn || isPnpm) {
+        const lines = s.split(/\r?\n/);
+        for (const ln of lines) {
+          if (!ln.trim()) continue;
+          handleJSONLine(ln);
+        }
+      } else {
+        lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
+      }
+      render(lastMsg);
+    });
+    child.stderr.on("data", (b) => {
+      const s = b.toString("utf8");
+      bufErr += s;
+      downloadedBytes += b.length;
+      tickRate(b.length);
+
+      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);
+        }
+      } else {
+        lastMsg = s.trim().split(/\r?\n/).pop() || lastMsg;
+      }
+      render(lastMsg);
+    });
+
+    // 주기적 리렌더 (출력이 잠시 멎어도 바 갱신)
+    const iv = setInterval(() => render(lastMsg), 80);
+
+    child.on("error", (e) => {
+      clearInterval(iv);
+      // 마지막 화면 정리
+      render("에러 발생");
+      process.stdout.write("\x1B[?25h");
+      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 }));
+    });
+  });
+}
+
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const cwd = process.cwd();
 
@@ -277,7 +458,8 @@ export default function App(){
     // ─────────────────────────────────────────────
     // 2) 1회 설치 (조용히 설치: fund/audit 등 장황 로그 숨김)
     // ─────────────────────────────────────────────
-    console.log(yellow(`\n▶ 의존성 설치 중입니다. 잠시만 기다려주세요…\n`));
+  await runWithProgress(pm, args, { cwd: target }, "의존성 설치");
+
 
     // 패키지 매니저별 silent 옵션
     const silentFlag =

package/lib/apply.js

@@ -94,11 +94,175 @@ export default function ProtectedRoute({children}:{children:ReactNode}){
   return <>{children}</>
 }
 `,
-        home: `export default function Home(){
-  return <section className="card">
-    <h2 className="text-xl font-semibold">홈</h2>
-    <p className="mt-2 text-muted">Tailwind + axios + 로그인/회원가입/보호 라우트 기본 제공</p>
-  </section>
+      home: `import { useState } from "react";
+
+function CodeBlock({ children }: { children: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <div className="relative">
+      <pre className="mt-2 p-3 bg-gradient-to-br from-blue-50 to-teal-50 border border-pri/30 rounded-lg overflow-x-auto text-sm">
+{children}
+      </pre>
+      <button
+        className="absolute top-2 right-2 rounded-md border border-pri/40 px-2.5 py-1 text-xs text-white bg-pri hover:opacity-90 shadow-sm"
+        onClick={async () => {
+          await navigator.clipboard.writeText(children);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1200);
+        }}
+        aria-label="copy"
+        title="Copy"
+      >
+        {copied ? "Copied" : "Copy"}
+      </button>
+    </div>
+  );
+}
+
+function Pill({ label, tone = "blue" }: { label: string; tone?: "blue" | "emerald" | "indigo" | "violet" | "cyan" }) {
+  const toneMap: Record<string, string> = {
+    blue: "bg-blue-50 text-blue-700 border-blue-200",
+    emerald: "bg-emerald-50 text-emerald-700 border-emerald-200",
+    indigo: "bg-indigo-50 text-indigo-700 border-indigo-200",
+    violet: "bg-violet-50 text-violet-700 border-violet-200",
+    cyan: "bg-cyan-50 text-cyan-700 border-cyan-200",
+  };
+  return (
+    <span className={\`inline-flex items-center rounded-full px-2.5 py-1 text-xs border \${toneMap[tone]} whitespace-nowrap\`}>
+      {label}
+    </span>
+  );
+}
+
+export default function Home() {
+  return (
+    <section className="space-y-7">
+      {/* HERO */}
+      <div className="relative overflow-hidden rounded-2xl border border-pri/20">
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              "radial-gradient(700px 300px at -10% 0%, rgba(37,99,235,0.22), transparent 60%), radial-gradient(700px 300px at 110% 10%, rgba(16,185,129,0.20), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85))",
+          }}
+        />
+        <div className="relative p-6 md:p-9">
+          <div className="flex flex-wrap gap-2">
+            <Pill label="Vite" tone="blue" />
+            <Pill label="React 18" tone="indigo" />
+            <Pill label="TypeScript" tone="violet" />
+            <Pill label="Tailwind" tone="emerald" />
+            <Pill label="React Router" tone="cyan" />
+          </div>
+          <h1 className="mt-4 text-2xl md:text-3xl font-semibold tracking-tight text-pri">
+            create-vite-react-boot
+          </h1>
+          <p className="text-muted mt-2 max-w-2xl">
+            Vite + React + TypeScript + Tailwind 기반 스타터입니다. 로그인/회원가입은
+            <strong> localStorage</strong>만 사용하며 서버는 없습니다. 생성·설치·스캐폴딩·개발 서버 실행까지 한 번에 처리합니다.
+          </p>
+          <div className="mt-5 flex gap-10 text-sm">
+            <a href="/login" className="btn btn-primary">로그인</a>
+            <a href="/about" className="btn">About</a>
+          </div>
+        </div>
+        <div className="h-1 bg-gradient-to-r from-blue-500 via-cyan-400 to-emerald-500" />
+      </div>
+
+      {/* 사용자 안내 */}
+      <div className="card border-l-4 border-l-emerald-400">
+        <h2 className="text-lg font-semibold text-emerald-700">사용자 안내</h2>
+        <ul className="list-disc pl-5 mt-2 space-y-1 text-sm">
+          <li>계정 정보는 <code>localStorage</code>에 저장됩니다 (예: <code>session_v1</code>).</li>
+          <li>암호화/서버 검증이 없으므로 민감한 정보는 입력하지 마세요.</li>
+          <li>같은 브라우저에서만 유지됩니다. 시크릿 모드/브라우저 변경 시 사라질 수 있습니다.</li>
+          <li>초기화: 개발자 도구 → Application/저장소 → <code>localStorage</code> 키 삭제.</li>
+        </ul>
+      </div>
+
+      {/* 설치 & 실행 */}
+      <div className="card border-l-4 border-l-blue-500">
+        <h2 className="text-lg font-semibold text-blue-700">설치 & 실행</h2>
+
+        <div className="mt-3">
+          <div className="text-sm font-medium text-ink">1) 프로젝트 생성 (자동 설치/실행)</div>
+          <CodeBlock>{\`# npm
+npm create vite-react-boot@latest
+
+# pnpm
+pnpm dlx create-vite-react-boot@latest
+
+# yarn
+yarn create vite-react-boot\`}</CodeBlock>
+          <p className="text-xs text-muted mt-2">
+            프로젝트 이름 입력 후 설치/스캐폴딩이 완료되면 개발 서버가 자동 시작됩니다.
+          </p>
+        </div>
+
+        <div className="mt-4">
+          <div className="text-sm font-medium text-ink">2) 자동 실행이 안 된 경우</div>
+          <CodeBlock>{\`cd <프로젝트명>
+npm run dev   # 또는 pnpm dev / yarn dev\`}</CodeBlock>
+        </div>
+
+        <div className="mt-4">
+          <div className="text-sm font-medium text-ink">3) 수동 설치가 필요한 경우</div>
+          <CodeBlock>{\`cd <프로젝트명>
+npm install   # 또는 pnpm install / yarn install
+npm run dev\`}</CodeBlock>
+        </div>
+
+        <div className="mt-4">
+          <div className="text-sm font-medium text-ink">4) 빌드 & 프리뷰</div>
+          <CodeBlock>{\`npm run build
+npm run preview\`}</CodeBlock>
+        </div>
+      </div>
+
+      {/* 요약 */}
+      <div className="grid md:grid-cols-3 gap-4">
+        <div className="card border-t-2 border-t-blue-400">
+          <h3 className="font-medium text-blue-700">기능 요약</h3>
+          <ul className="list-disc pl-5 mt-2 space-y-1 text-sm">
+            <li>생성 → 설치(조용히) → 스캐폴딩 → 자동 실행</li>
+            <li>홈/로그인/About 기본 라우트</li>
+            <li>localStorage 세션 유지</li>
+            <li>기본 UI 유틸 클래스(.card, .btn, .input)</li>
+          </ul>
+        </div>
+
+        <div className="card border-t-2 border-t-violet-400">
+          <h3 className="font-medium text-violet-700">라우트</h3>
+          <ul className="list-disc pl-5 mt-2 space-y-1 text-sm">
+            <li><code>/</code> : 홈</li>
+            <li><code>/login</code> : 로그인</li>
+            <li><code>/about</code> : 소개</li>
+          </ul>
+          <p className="text-xs text-muted mt-2">
+            로그인 실패 시 서버 메시지는 숨기고 기본 안내 문구만 표시합니다.
+          </p>
+        </div>
+
+        <div className="card border-t-2 border-t-emerald-400">
+          <h3 className="font-medium text-emerald-700">스크립트 & 스택</h3>
+          <div className="mt-2 text-sm">
+            <div className="mb-2">
+              <div className="text-muted">scripts</div>
+              <pre className="mt-1 p-2 bg-emerald-50/60 border border-emerald-200 rounded text-xs overflow-x-auto">{\`"dev": "vite",
+"build": "tsc -b && vite build",
+"preview": "vite preview"\`}</pre>
+            </div>
+            <div>
+              <div className="text-muted">stack</div>
+              <p className="mt-1 text-sm text-muted">
+                Vite · React 18 · TypeScript · Tailwind · React Router
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 }
 `,
         login: `import { FormEvent, useState } from 'react'

package/package.json

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