create-vite-react-boot 1.0.14 → 1.0.16

package/lib/apply.js

@@ -24,7 +24,6 @@ export async function applyScaffold({ root /*, template*/ }) {
     write(path.join(root, "src", "pages", "Dashboard.tsx"), files.dashboard);
     write(path.join(root, "src", "lib", "storage.ts"), files.storage);
     write(path.join(root, "src", "lib", "auth.tsx"), files.authCtx);
-    write(path.join(root, "src", "api", "auth.ts"), files.axiosAuthApi);
 
     // 3) 끝 (App.tsx / main.tsx는 이미 cli에서 생성)
 }
@@ -95,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'
@@ -285,17 +448,6 @@ export function useAuth() {
   if (!ctx) throw new Error('useAuth must be used within AuthProvider')
   return ctx
 }
-`,
-        axiosAuthApi: `import { api } from './client'
-type Session = { id:string; email:string; name:string }
-export async function register(email:string, name:string, password:string):Promise<Session>{
-  const { data } = await api.post('/register', { email, name, password })
-  return data
-}
-export async function login(email:string, password:string):Promise<Session>{
-  const { data } = await api.post('/login', { email, password })
-  return data
-}
 `,
     };
 }

package/lib/files.js

@@ -258,17 +258,6 @@ api.interceptors.request.use(cfg=>{
   }
   return cfg
 })
-`,
-    axiosAuthApi: `import { api } from './client'
-type Session = { id:string; email:string; name:string }
-export async function register(email:string, name:string, password:string):Promise<Session>{
-  const { data } = await api.post('/register', { email, name, password })
-  return data
-}
-export async function login(email:string, password:string):Promise<Session>{
-  const { data } = await api.post('/login', { email, password })
-  return data
-}
 `,
     mainTsx: `import React from 'react'
 import ReactDOM from 'react-dom/client'

package/package.json

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