create-vite-react-boot 1.0.9

package/bin/cli.js

@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+import { fileURLToPath } from "url";
+import path from "path";
+import fs from "fs";
+import prompts from "prompts";
+import spawn from "cross-spawn"; // ← 크로스플랫폼 스폰
+import { green, yellow, red, cyan, bold } from "kolorist";
+import { applyScaffold } from "../lib/apply.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const cwd = process.cwd();
+
+function run(cmd, args = [], options = {}) {
+    // cross-spawn은 Windows에서 .cmd/.ps1 자동 해결. shell:false로 충분.
+    const child = spawn(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");
+}
+
+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);
+
+    // 같은 폴더에서 다시 실행 방지: 이미 Vite 구조면 중단
+    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);
+
+    // tsconfig들
+    write(
+        path.join(target, "tsconfig.json"),
+        `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}
+`
+    );
+    write(
+        path.join(target, "tsconfig.node.json"),
+        `{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+`
+    );
+
+    // 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()] })
+`
+    );
+
+    // .gitignore (Windows/Unix 공통)
+    write(
+        path.join(target, ".gitignore"),
+        `node_modules
+dist
+.cache
+.vscode
+.DS_Store
+`
+    );
+
+    // index.html
+    write(
+        path.join(target, "index.html"),
+        `<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>${appName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <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'
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: { ink:'#0b1220', muted:'#667085', bg:'#f8fafc', pri:'#2563eb' }
+    }
+  },
+  plugins: []
+} satisfies Config
+`
+    );
+
+    // src 엔트리
+    write(
+        path.join(target, "src", "index.css"),
+        `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,body,#root{height:100%}
+  body{font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
+  body{@apply bg-bg text-ink antialiased}
+  a{@apply text-pri}
+}
+@layer components {
+  .card{@apply bg-white border border-gray-200 rounded-xl p-5 shadow-sm}
+  .btn{@apply inline-flex items-center justify-center rounded-lg border px-3.5 py-2.5 text-sm font-medium}
+  .btn-primary{@apply bg-pri text-white border-pri hover:opacity-90}
+  .input{@apply w-full rounded-lg border border-gray-200 px-3.5 py-2.5 text-sm outline-none focus:ring-2 focus:ring-pri/20}
+  .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'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+import { AuthProvider } from './lib/auth'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <AuthProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </AuthProvider>
+  </React.StrictMode>
+)
+`
+    );
+    write(
+        path.join(target, "src", "App.tsx"),
+        `import Header from './components/Header'
+import RoutesView from './routes/index'
+export default function App(){
+  return <>
+    <Header />
+    <main className="container py-6">
+      <RoutesView />
+    </main>
+  </>
+}
+`
+    );
+
+    // ─────────────────────────────────────────────
+    // 2) 1회 설치 (cross-spawn으로 PM별 자동 처리)
+    // ─────────────────────────────────────────────
+    console.log(yellow(`\n▶ 의존성 설치 (${pm} install)…`));
+    run(pm, ["install"], { cwd: target });
+
+    // ─────────────────────────────────────────────
+    // 3) 인증/라우팅/axios/Tailwind 추가 파일 (파일만 생성, 설치 없음)
+    // ─────────────────────────────────────────────
+    console.log(yellow("\n▶ 인증/라우팅/Tailwind/axios 스캐폴딩 적용…"));
+    await applyScaffold({ root: target });
+
+    console.log(green("\n✅ 완료!\n"));
+    console.log(`${bold("다음 명령을 실행하세요:")}
+  cd ${appName}
+  ${pm} run dev
+`);
+})();

package/lib/apply.js

@@ -0,0 +1,314 @@
+import path from "path";
+import fs from "fs";
+
+function ensureDir(d) {
+    fs.mkdirSync(d, { recursive: true });
+}
+function write(p, content) {
+    ensureDir(path.dirname(p));
+    fs.writeFileSync(p, content);
+}
+
+export async function applyScaffold({ root /*, template*/ }) {
+    // 1) tsconfig 별칭 설정 제거 (아무 것도 안 함)
+
+    // 2) 소스 파일 생성
+    const files = getFiles();
+
+    write(path.join(root, "src", "routes", "index.tsx"), files.routesIndex);
+    write(path.join(root, "src", "components", "Header.tsx"), files.header);
+    write(path.join(root, "src", "components", "ProtectedRoute.tsx"), files.protectedRoute);
+    write(path.join(root, "src", "pages", "Home.tsx"), files.home);
+    write(path.join(root, "src", "pages", "Login.tsx"), files.login);
+    write(path.join(root, "src", "pages", "Register.tsx"), files.register);
+    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", "client.ts"), files.axiosClient);
+    write(path.join(root, "src", "api", "auth.ts"), files.axiosAuthApi);
+
+    // 3) 끝 (App.tsx / main.tsx는 이미 cli에서 생성)
+}
+
+function getFiles() {
+    return {
+        routesIndex: `import { Routes, Route } from 'react-router-dom'
+ import Home from "../pages/Home"
+ import Login from "../pages/Login"
+ import Register from "../pages/Register"
+ import Dashboard from "../pages/Dashboard"
+ import ProtectedRoute from "../components/ProtectedRoute"
+
+export default function RoutesView(){
+  return (
+    <Routes>
+      <Route path="/" element={<Home/>} />
+      <Route path="/login" element={<Login/>} />
+      <Route path="/register" element={<Register/>} />
+      <Route path="/dashboard" element={
+        <ProtectedRoute><Dashboard/></ProtectedRoute>
+      } />
+      <Route path="*" element={<Home/>} />
+    </Routes>
+  )
+}
+`,
+        header: `import { Link, useNavigate } from 'react-router-dom'
+import { useAuth } from "../lib/auth"
+
+export default function Header(){
+  const { user, logout } = useAuth()
+  const nav = useNavigate()
+  return (
+    <header className="header">
+      <div className="container flex h-14 items-center gap-4">
+        <Link to="/" className="font-semibold">MyApp</Link>
+        <nav className="hidden md:flex items-center gap-4 text-sm">
+          <Link to="/">Home</Link>
+          {user && <Link to="/dashboard">Dashboard</Link>}
+        </nav>
+        <div className="ml-auto flex items-center gap-2">
+          {user ? (
+            <>
+              <span className="text-sm text-muted">{user.name}님</span>
+              <button className="btn" onClick={()=>{logout(); nav('/')}}>Logout</button>
+            </>
+          ) : (
+            <>
+              <Link className="btn" to="/login">Login</Link>
+              <Link className="btn btn-primary" to="/register">Sign up</Link>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}
+`,
+        protectedRoute: `import { ReactNode } from 'react'
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from "../lib/auth"
+
+export default function ProtectedRoute({children}:{children:ReactNode}){
+  const { user } = useAuth()
+  const loc = useLocation()
+  if(!user) return <Navigate to="/login" replace state={{ from: loc }} />
+  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>
+}
+`,
+        login: `import { FormEvent, useState } from 'react'
+import { useAuth } from '../lib/auth'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
+
+export default function Login(){
+  const { login, loading, error } = useAuth()
+  const [email,setEmail] = useState('')
+  const [password,setPassword] = useState('')
+  const nav = useNavigate()
+  const loc = useLocation() as any
+  const from = loc.state?.from?.pathname || '/dashboard'
+
+  async function onSubmit(e:FormEvent){
+    e.preventDefault()
+    await login(email, password)
+    nav(from, { replace:true })
+  }
+
+  return <div className="mx-auto max-w-md card">
+    <h2 className="text-xl font-semibold">로그인</h2>
+    {error && <p className="mt-2 text-red-600 text-sm">{error}</p>}
+    <form onSubmit={onSubmit} className="mt-4 space-y-3">
+      <div>
+        <label className="text-sm">이메일</label>
+        <input className="input mt-1" value={email} onChange={e=>setEmail(e.target.value)} />
+      </div>
+      <div>
+        <label className="text-sm">비밀번호</label>
+        <input className="input mt-1" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
+      </div>
+      <div className="flex items-center justify-between pt-2">
+        <button className="btn btn-primary" disabled={loading}>{loading?'로그인 중…':'로그인'}</button>
+        <Link to="/register" className="text-sm">회원가입</Link>
+      </div>
+    </form>
+  </div>
+}
+`,
+        register: `import { FormEvent, useState } from 'react'
+import { useAuth } from '../lib/auth'
+import { useNavigate, Link } from 'react-router-dom'
+
+export default function Register(){
+  const { register, loading, error } = useAuth()
+  const [name,setName] = useState('')
+  const [email,setEmail] = useState('')
+  const [password,setPassword] = useState('')
+  const nav = useNavigate()
+
+  async function onSubmit(e:FormEvent){
+    e.preventDefault()
+    await register(email, name, password)
+    nav('/dashboard', { replace:true })
+  }
+
+  return <div className="mx-auto max-w-md card">
+    <h2 className="text-xl font-semibold">회원가입</h2>
+    {error && <p className="mt-2 text-red-600 text-sm">{error}</p>}
+    <form onSubmit={onSubmit} className="mt-4 space-y-3">
+      <div>
+        <label className="text-sm">이름</label>
+        <input className="input mt-1" value={name} onChange={e=>setName(e.target.value)} />
+      </div>
+      <div>
+        <label className="text-sm">이메일</label>
+        <input className="input mt-1" value={email} onChange={e=>setEmail(e.target.value)} />
+      </div>
+      <div>
+        <label className="text-sm">비밀번호</label>
+        <input className="input mt-1" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
+      </div>
+      <div className="flex items-center justify-between pt-2">
+        <button className="btn btn-primary" disabled={loading}>{loading?'가입 중…':'가입하기'}</button>
+        <Link to="/login" className="text-sm">로그인</Link>
+      </div>
+    </form>
+  </div>
+}
+`,
+        dashboard: `import { useAuth } from '../lib/auth'
+export default function Dashboard(){
+  const { user } = useAuth()
+  return <section className="card">
+    <h2 className="text-xl font-semibold">대시보드</h2>
+    <p className="mt-2">환영합니다, <strong>{user?.name}</strong> 님!</p>
+  </section>
+}
+`,
+        storage: `export function getJSON<T>(k:string, fallback:T):T{
+  try{ const raw = localStorage.getItem(k); return raw ? JSON.parse(raw) as T : fallback }
+  catch{ return fallback }
+}
+export function setJSON(k:string, v:unknown){ localStorage.setItem(k, JSON.stringify(v)) }
+`,
+        authCtx: `// src/lib/auth.tsx
+import React, { createContext, useContext, useMemo, useState } from 'react'
+import { getJSON, setJSON } from './storage'
+
+type Session = { id: string; email: string; name: string } | null
+type User = { id: string; email: string; name: string; password: string }
+
+type AuthCtx = {
+  user: Session
+  login: (email: string, password: string) => Promise<void>
+  register: (email: string, name: string, password: string) => Promise<void>
+  logout: () => void
+  loading: boolean
+  error: string | null
+}
+
+const AuthContext = createContext<AuthCtx | null>(null)
+
+const SESSION_KEY = 'session_v1'
+const USERS_KEY = 'users_v1'
+
+// 로컬 유틸
+function getUsers(): User[] {
+  return getJSON<User[]>(USERS_KEY, [])
+}
+function saveUsers(users: User[]) {
+  setJSON(USERS_KEY, users)
+}
+function uuid() {
+  // 브라우저 지원 시
+  // @ts-ignore
+  return (globalThis.crypto?.randomUUID?.() as string) || 'id_' + Date.now() + '_' + Math.random().toString(16).slice(2)
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<Session>(() => getJSON<Session>(SESSION_KEY, null))
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function login(email: string, password: string) {
+    setLoading(true); setError(null)
+    try {
+      const users = getUsers()
+      const u = users.find(x => x.email === email && x.password === password)
+      if (!u) throw new Error('이메일 또는 비밀번호가 올바르지 않습니다.')
+      const session: Session = { id: u.id, email: u.email, name: u.name }
+      setUser(session); setJSON(SESSION_KEY, session)
+    } catch (e: any) {
+      setError(e?.message ?? '로그인 실패'); throw e
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function register(email: string, name: string, password: string) {
+    setLoading(true); setError(null)
+    try {
+      const users = getUsers()
+      if (users.some(u => u.email === email)) {
+        throw new Error('이미 가입된 이메일입니다.')
+      }
+      const u: User = { id: uuid(), email, name, password }
+      users.push(u); saveUsers(users)
+      const session: Session = { id: u.id, email: u.email, name: u.name }
+      setUser(session); setJSON(SESSION_KEY, session)
+    } catch (e: any) {
+      setError(e?.message ?? '회원가입 실패'); throw e
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function logout() {
+    setUser(null); setJSON(SESSION_KEY, null)
+  }
+
+  const value = useMemo(
+    () => ({ user, login, register, logout, loading, error }),
+    [user, loading, error]
+  )
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
+  return ctx
+}
+
+`,
+        axiosClient: `import axios from 'axios'
+export const api = axios.create({ baseURL: '/api', timeout: 8000 })
+api.interceptors.request.use(cfg=>{
+  const raw = localStorage.getItem('session_v1')
+  if(raw){
+    const token = (JSON.parse(raw) as { id:string }).id
+    cfg.headers.Authorization = 'Bearer ' + token
+  }
+  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
+}
+`,
+    };
+}

package/lib/files.js

@@ -0,0 +1,290 @@
+export const files = {
+    postcss: `export default { plugins: { tailwindcss: {}, autoprefixer: {} } }`,
+    tailwind: `import type { Config } from 'tailwindcss'
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors:{ ink:'#0b1220', muted:'#667085', bg:'#f8fafc', pri:'#2563eb' }
+    }
+  },
+  plugins: []
+} satisfies Config
+`,
+    indexCss: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,body,#root{height:100%}
+  body{@apply bg-bg text-ink antialiased}
+  a{@apply text-pri}
+}
+@layer components {
+  .card{@apply bg-white border border-gray-200 rounded-xl p-5 shadow-sm}
+  .btn{@apply inline-flex items-center justify-center rounded-lg border px-3.5 py-2.5 text-sm font-medium}
+  .btn-primary{@apply bg-pri text-white border-pri hover:opacity-90}
+  .input{@apply w-full rounded-lg border border-gray-200 px-3.5 py-2.5 text-sm outline-none focus:ring-2 focus:ring-pri/20}
+  .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}
+}
+`,
+    appTsx: `import Header from './components/Header'
+import RoutesView from './routes'
+export default function App(){
+  return <>
+    <Header />
+    <main className="container py-6">
+      <RoutesView />
+    </main>
+  </>
+}
+`,
+    routesIndex: `import { Routes, Route } from 'react-router-dom'
+import Home from '@/pages/Home'
+import Login from '@/pages/Login'
+import Register from '@/pages/Register'
+import Dashboard from '@/pages/Dashboard'
+import ProtectedRoute from '@/components/ProtectedRoute'
+
+export default function RoutesView(){
+  return (
+    <Routes>
+      <Route path="/" element={<Home/>} />
+      <Route path="/login" element={<Login/>} />
+      <Route path="/register" element={<Register/>} />
+      <Route path="/dashboard" element={
+        <ProtectedRoute><Dashboard/></ProtectedRoute>
+      } />
+      <Route path="*" element={<Home/>} />
+    </Routes>
+  )
+}
+`,
+    header: `import { Link, useNavigate } from 'react-router-dom'
+import { useAuth } from '@/lib/auth'
+
+export default function Header(){
+  const { user, logout } = useAuth()
+  const nav = useNavigate()
+  return (
+    <header className="header">
+      <div className="container flex h-14 items-center gap-4">
+        <Link to="/" className="font-semibold">MyApp</Link>
+        <nav className="hidden md:flex items-center gap-4 text-sm">
+          <Link to="/">Home</Link>
+          {user && <Link to="/dashboard">Dashboard</Link>}
+        </nav>
+        <div className="ml-auto flex items-center gap-2">
+          {user ? (
+            <>
+              <span className="text-sm text-muted">{user.name}님</span>
+              <button className="btn" onClick={()=>{logout(); nav('/')}}>Logout</button>
+            </>
+          ) : (
+            <>
+              <Link className="btn" to="/login">Login</Link>
+              <Link className="btn btn-primary" to="/register">Sign up</Link>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}
+`,
+    protectedRoute: `import { ReactNode } from 'react'
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from '@/lib/auth'
+
+export default function ProtectedRoute({children}:{children:ReactNode}){
+  const { user } = useAuth()
+  const loc = useLocation()
+  if(!user) return <Navigate to="/login" replace state={{ from: loc }} />
+  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>
+}
+`,
+    login: `import { FormEvent, useState } from 'react'
+import { useAuth } from '@/lib/auth'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
+
+export default function Login(){
+  const { login, loading, error } = useAuth()
+  const [email,setEmail] = useState('')
+  const [password,setPassword] = useState('')
+  const nav = useNavigate()
+  const loc = useLocation() as any
+  const from = loc.state?.from?.pathname || '/dashboard'
+
+  async function onSubmit(e:FormEvent){
+    e.preventDefault()
+    await login(email, password)
+    nav(from, { replace:true })
+  }
+
+  return <div className="mx-auto max-w-md card">
+    <h2 className="text-xl font-semibold">로그인</h2>
+    {error && <p className="mt-2 text-red-600 text-sm">{error}</p>}
+    <form onSubmit={onSubmit} className="mt-4 space-y-3">
+      <div>
+        <label className="text-sm">이메일</label>
+        <input className="input mt-1" value={email} onChange={e=>setEmail(e.target.value)} />
+      </div>
+      <div>
+        <label className="text-sm">비밀번호</label>
+        <input className="input mt-1" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
+      </div>
+      <div className="flex items-center justify-between pt-2">
+        <button className="btn btn-primary" disabled={loading}>{loading?'로그인 중…':'로그인'}</button>
+        <Link to="/register" className="text-sm">회원가입</Link>
+      </div>
+    </form>
+  </div>
+}
+`,
+    register: `import { FormEvent, useState } from 'react'
+import { useAuth } from '@/lib/auth'
+import { useNavigate, Link } from 'react-router-dom'
+
+export default function Register(){
+  const { register, loading, error } = useAuth()
+  const [name,setName] = useState('')
+  const [email,setEmail] = useState('')
+  const [password,setPassword] = useState('')
+  const nav = useNavigate()
+
+  async function onSubmit(e:FormEvent){
+    e.preventDefault()
+    await register(email, name, password)
+    nav('/dashboard', { replace:true })
+  }
+
+  return <div className="mx-auto max-w-md card">
+    <h2 className="text-xl font-semibold">회원가입</h2>
+    {error && <p className="mt-2 text-red-600 text-sm">{error}</p>}
+    <form onSubmit={onSubmit} className="mt-4 space-y-3">
+      <div>
+        <label className="text-sm">이름</label>
+        <input className="input mt-1" value={name} onChange={e=>setName(e.target.value)} />
+      </div>
+      <div>
+        <label className="text-sm">이메일</label>
+        <input className="input mt-1" value={email} onChange={e=>setEmail(e.target.value)} />
+      </div>
+      <div>
+        <label className="text-sm">비밀번호</label>
+        <input className="input mt-1" type="password" value={password} onChange={e=>setPassword(e.target.value)} />
+      </div>
+      <div className="flex items-center justify-between pt-2">
+        <button className="btn btn-primary" disabled={loading}>{loading?'가입 중…':'가입하기'}</button>
+        <Link to="/login" className="text-sm">로그인</Link>
+      </div>
+    </form>
+  </div>
+}
+`,
+    dashboard: `import { useAuth } from '@/lib/auth'
+export default function Dashboard(){
+  const { user } = useAuth()
+  return <section className="card">
+    <h2 className="text-xl font-semibold">대시보드</h2>
+    <p className="mt-2">환영합니다, <strong>{user?.name}</strong> 님!</p>
+  </section>
+}
+`,
+    storage: `export function getJSON<T>(k:string, fallback:T):T{
+  try{ const raw = localStorage.getItem(k); return raw ? JSON.parse(raw) as T : fallback }
+  catch{ return fallback }
+}
+export function setJSON(k:string, v:unknown){ localStorage.setItem(k, JSON.stringify(v)) }
+`,
+    authCtx: `import { createContext, useContext, useMemo, useState } from 'react'
+import * as api from '@/api/auth'
+import { getJSON, setJSON } from './storage'
+
+type Session = { id:string; email:string; name:string } | null
+type AuthCtx = {
+  user: Session
+  login:(email:string, password:string)=>Promise<void>
+  register:(email:string, name:string, password:string)=>Promise<void>
+  logout:()=>void
+  loading:boolean
+  error:string | null
+}
+const AuthContext = createContext<AuthCtx | null>(null)
+const KEY = 'session_v1'
+
+export function AuthProvider({children}:{children:React.ReactNode}){
+  const [user, setUser] = useState<Session>(()=>getJSON(KEY, null))
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string|null>(null)
+
+  async function login(email:string, password:string){
+    setLoading(true); setError(null)
+    try{ const u = await api.login(email,password); setUser(u); setJSON(KEY,u) }
+    catch(e:any){ setError(e?.message ?? '로그인 실패'); throw e }
+    finally{ setLoading(false) }
+  }
+  async function register(email:string, name:string, password:string){
+    setLoading(true); setError(null)
+    try{ const u = await api.register(email,name,password); setUser(u); setJSON(KEY,u) }
+    catch(e:any){ setError(e?.message ?? '회원가입 실패'); throw e }
+    finally{ setLoading(false) }
+  }
+  function logout(){ setUser(null); setJSON(KEY,null) }
+  const value = useMemo(()=>({user,login,register,logout,loading,error}),[user,loading,error])
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+export function useAuth(){
+  const ctx = useContext(AuthContext)
+  if(!ctx) throw new Error('useAuth must be used within AuthProvider')
+  return ctx
+}
+`,
+    axiosClient: `import axios from 'axios'
+export const api = axios.create({ baseURL: '/api', timeout: 8000 })
+api.interceptors.request.use(cfg=>{
+  const raw = localStorage.getItem('session_v1')
+  if(raw){
+    const token = (JSON.parse(raw) as { id:string }).id
+    cfg.headers.Authorization = 'Bearer ' + token
+  }
+  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'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+import { AuthProvider } from './lib/auth'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <AuthProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </AuthProvider>
+  </React.StrictMode>
+)
+`
+}

package/lib/utils.js

@@ -0,0 +1,13 @@
+import fs from "fs";
+import path from "path";
+
+export function write(p, content) {
+    fs.mkdirSync(path.dirname(p), { recursive: true });
+    fs.writeFileSync(p, content);
+}
+export function readJSON(p) {
+    return JSON.parse(fs.readFileSync(p, "utf-8"));
+}
+export function writeJSON(p, obj) {
+    fs.writeFileSync(p, JSON.stringify(obj, null, 2) + "\n");
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "create-vite-react-boot",
+    "version": "1.0.9",
+    "description": "Create a Vite + React + TS app with Tailwind, axios, AuthContext, login/register, routing.",
+    "type": "module",
+    "bin": {
+        "create-vite-react-boot": "./bin/cli.js"
+    },
+    "files": [
+        "bin",
+        "lib",
+        "README.md"
+    ],
+    "license": "MIT",
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "kolorist": "^1.8.0",
+        "prompts": "^2.4.2"
+    }
+}