byuckchon-frontend-cli 1.0.2 → 1.1.0

package/README.md

@@ -1,2 +1,26 @@
 # byuckchon-frontend-cli
-byuckchon frontend CLI for creating React and Next.js projects
+
+[byuckchon](https://www.byuckchon.com) 컨벤션에 맞게 React(Vite) 또는 Next.js(App Router) TypeScript 프로젝트를 생성하는 CLI.
+
+## 요구 사항
+
+- [Node.js](https://nodejs.org/) (LTS 권장)
+
+## 사용법
+
+```bash
+npx byuckchon-frontend-cli
+```
+
+프로젝트 이름과 프레임워크를 묻는 프롬프트에 따라 답하면, 현재 디렉터리에 새 폴더가 만들어집니다.
+
+생성이 끝나면 안내에 따라 다음을 실행하세요.
+
+```bash
+cd <프로젝트-이름>
+npm run dev
+```
+
+## 라이선스
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byuckchon-frontend-cli",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "byuckchon frontend CLI for creating React and Next.js projects",
   "type": "module",
   "bin": {

package/src/commands/init.js

@@ -1,37 +1,41 @@
-import chalk from 'chalk';
+import chalk from "chalk";
 
-import { createProject } from '../generators/createProject.js';
-import { askInitQuestions } from '../prompts/initPrompts.js';
+import { createProject } from "../generators/createProject.js";
+import { askInitQuestions } from "../prompts/initPrompts.js";
 
 export async function initCommand() {
-  console.log(chalk.bold.cyan('\n  cli-test — 프로젝트 생성기\n'));
+  console.log(
+    chalk.bold.cyan("\n  byuckchon-frontend-cli — 프로젝트 생성기\n")
+  );
 
   try {
     const answers = await askInitQuestions();
 
     console.log(
       chalk.dim(
-        `\n  ${answers.framework} 프로젝트를 생성하는 중... (${answers.projectName})\n`,
-      ),
+        `\n  ${answers.framework} 프로젝트를 생성하는 중... (${answers.projectName})\n`
+      )
     );
 
     await createProject({ ...answers, typescript: true });
 
     console.log(
-      chalk.bold.green(`\n  ✓ ${answers.projectName} 프로젝트가 생성되었습니다!\n`),
+      chalk.bold.green(
+        `\n  ✓ ${answers.projectName} 프로젝트가 생성되었습니다!\n`
+      )
     );
-    console.log(chalk.yellow('  다음 명령어로 시작하세요:\n'));
+    console.log(chalk.yellow("  다음 명령어로 시작하세요:\n"));
     console.log(chalk.white(`    cd ${answers.projectName}`));
-    console.log(chalk.white('    npm run dev\n'));
+    console.log(chalk.white("    npm run dev\n"));
   } catch (error) {
-    if (error.code === 'EEXIST') {
+    if (error.code === "EEXIST") {
       console.error(
-        chalk.red(`\n  오류: '${error.path}' 폴더가 이미 존재합니다.\n`),
+        chalk.red(`\n  오류: '${error.path}' 폴더가 이미 존재합니다.\n`)
       );
     } else {
       console.error(
-        chalk.red('\n  프로젝트 생성 중 오류가 발생했습니다:'),
-        error.message,
+        chalk.red("\n  프로젝트 생성 중 오류가 발생했습니다:"),
+        error.message
       );
     }
     process.exit(1);

package/src/generators/createBaseFiles.js

@@ -1,34 +1,114 @@
-import fs from 'fs/promises';
-import path from 'path';
+import fs from "fs/promises";
+import path from "path";
 
 async function write(filePath, content) {
-  await fs.writeFile(filePath, content, 'utf-8');
+  await fs.writeFile(filePath, content, "utf-8");
 }
 
+const TOKEN_CONFIG_JS = `import StyleDictionary from "style-dictionary";
+
+// kebab-case 변환
+StyleDictionary.registerTransform({
+  name: "name/kebab",
+  type: "name",
+  transform: (token) =>
+    token.path
+      .join("-")
+      .replace(/([a-z])([A-Z])/g, "$1-$2")
+      .toLowerCase(),
+});
+
+// color는 Tailwind 유틸리티로, typography는 .text-* 클래스로 생성
+StyleDictionary.registerFormat({
+  name: "css/tailwind-theme",
+  format: ({ dictionary }) => {
+    let css = "";
+    const withPx = (value) =>
+      typeof value === "string" && /^\\d+(\\.\\d+)?$/.test(value)
+        ? \`\${value}px\`
+        : value;
+
+    css += "@theme {\\n";
+    dictionary.allTokens.forEach((token) => {
+      if (token.$type === "color") {
+        css += \`  --color-\${token.name}: \${token.$value};\\n\`;
+      }
+    });
+    css += "}\\n\\n";
+
+    css += "@layer components {\\n";
+    dictionary.allTokens.forEach((token) => {
+      if (token.$type === "typography" && token.$value) {
+        const typo = token.$value;
+        css += \`  .text-\${token.name} {\\n\`;
+        if (typo.fontSize) {
+          css += \`    font-size: \${withPx(typo.fontSize)};\\n\`;
+        }
+        if (typo.lineHeight) {
+          css += \`    line-height: \${withPx(typo.lineHeight)};\\n\`;
+        }
+        if (typo.letterSpacing) {
+          css += \`    letter-spacing: \${typo.letterSpacing};\\n\`;
+        }
+        if (typo.fontWeight) {
+          css += \`    font-weight: \${typo.fontWeight};\\n\`;
+        }
+        if (typo.fontFamily) {
+          css += \`    font-family: \${typo.fontFamily};\\n\`;
+        }
+        css += "  }\\n";
+      }
+    });
+    css += "}\\n";
+
+    return css;
+  },
+});
+
+export default {
+  source: ["src/tokens.json"],
+  platforms: {
+    css: {
+      transforms: ["name/kebab"], // 일단 attribute/cti 제거
+      buildPath: "src/",
+      files: [
+        {
+          destination: "tokens.css",
+          format: "css/tailwind-theme",
+        },
+      ],
+    },
+  },
+};
+`;
+
 // ─── 공통 설정 파일 ────────────────────────────────────────────────────────────
 
 async function createPrettierConfig(rootDir) {
   const config = {
     semi: true,
-    trailingComma: 'all',
+    trailingComma: "all",
     singleQuote: true,
     tabWidth: 2,
     useTabs: false,
     printWidth: 80,
     plugins: [
-      '@trivago/prettier-plugin-sort-imports',
-      'prettier-plugin-tailwindcss',
+      "@trivago/prettier-plugin-sort-imports",
+      "prettier-plugin-tailwindcss",
     ],
-    importOrder: ['^@core/(.*)$', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
+    importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
     importOrderSeparation: true,
     importOrderSortSpecifiers: true,
   };
-  await write(path.join(rootDir, '.prettierrc'), JSON.stringify(config, null, 2));
+  await write(
+    path.join(rootDir, ".prettierrc"),
+    JSON.stringify(config, null, 2)
+  );
 }
 
 async function createEslintConfig(rootDir) {
   await write(
-    path.join(rootDir, '.eslintrc.cjs'),
+    path.join(rootDir, ".eslintrc.cjs"),
     `module.exports = {
   env: {
     browser: true,
@@ -62,13 +142,13 @@ async function createEslintConfig(rootDir) {
     },
   },
 };
-`,
+`
   );
 }
 
 async function createNextEslintConfig(rootDir) {
   await write(
-    path.join(rootDir, '.eslintrc.cjs'),
+    path.join(rootDir, ".eslintrc.cjs"),
     `// 현 파일이 eslint config type 을 따른다는 선언
 /** @type {import("eslint").Linter.Config} */
 
@@ -116,7 +196,7 @@ module.exports = {
   // 정렬 제외 파일 목록
   ignorePatterns: ["node_modules/", ".next/", "out/", "build/", "next-env.d.ts"],
 };
-`,
+`
   );
 }
 
@@ -164,31 +244,34 @@ dist-ssr
 out/
 `;
 
-  await write(path.join(rootDir, '.gitignore'), base + (framework === 'next' ? nextExtra : ''));
+  await write(
+    path.join(rootDir, ".gitignore"),
+    base + (framework === "next" ? nextExtra : "")
+  );
 }
 
 async function createVscodeSettings(rootDir) {
-  await fs.mkdir(path.join(rootDir, '.vscode'), { recursive: true });
+  await fs.mkdir(path.join(rootDir, ".vscode"), { recursive: true });
   await write(
-    path.join(rootDir, '.vscode/settings.json'),
+    path.join(rootDir, ".vscode/settings.json"),
     JSON.stringify(
       {
-        'editor.defaultFormatter': 'esbenp.prettier-vscode',
-        'editor.formatOnSave': true,
-        'eslint.validate': [
-          'javascript',
-          'typescript',
-          'javascriptreact',
-          'typescriptreact',
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "eslint.validate": [
+          "javascript",
+          "typescript",
+          "javascriptreact",
+          "typescriptreact",
         ],
-        'editor.codeActionsOnSave': {
-          'source.organizeImports': 'always',
-          'source.fixAll.eslint': 'always',
+        "editor.codeActionsOnSave": {
+          "source.organizeImports": "always",
+          "source.fixAll.eslint": "always",
         },
       },
       null,
-      2,
-    ),
+      2
+    )
   );
 }
 
@@ -197,7 +280,7 @@ async function createVscodeSettings(rootDir) {
 async function createReactBaseFiles(rootDir, config) {
   // index.html
   await write(
-    path.join(rootDir, 'index.html'),
+    path.join(rootDir, "index.html"),
     `<!doctype html>
 <html lang="ko">
   <head>
@@ -210,13 +293,16 @@ async function createReactBaseFiles(rootDir, config) {
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-`,
+`
+  );
+  await write(
+    path.join(rootDir, "public/robots.txt"),
+    `User-agent: *\nDisallow: /\n`
   );
-  await write(path.join(rootDir, 'public/robots.txt'), `User-agent: *\nDisallow: /\n`);
 
   // vite.config.ts
   await write(
-    path.join(rootDir, 'vite.config.ts'),
+    path.join(rootDir, "vite.config.ts"),
     `import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
@@ -241,74 +327,77 @@ export default defineConfig({
     },
   },
 });
-`,
+`
   );
 
   // tsconfig.json
   await write(
-    path.join(rootDir, 'tsconfig.json'),
+    path.join(rootDir, "tsconfig.json"),
     JSON.stringify(
       {
         files: [],
-        references: [{ path: './tsconfig.app.json' }, { path: './tsconfig.node.json' }],
+        references: [
+          { path: "./tsconfig.app.json" },
+          { path: "./tsconfig.node.json" },
+        ],
       },
       null,
-      2,
-    ),
+      2
+    )
   );
 
   // tsconfig.app.json
   await write(
-    path.join(rootDir, 'tsconfig.app.json'),
+    path.join(rootDir, "tsconfig.app.json"),
     JSON.stringify(
       {
         compilerOptions: {
-          tsBuildInfoFile: './node_modules/.tmp/tsconfig.app.tsbuildinfo',
-          target: 'ES2020',
+          tsBuildInfoFile: "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+          target: "ES2020",
           useDefineForClassFields: true,
-          lib: ['ES2020', 'DOM', 'DOM.Iterable'],
-          module: 'ESNext',
+          lib: ["ES2020", "DOM", "DOM.Iterable"],
+          module: "ESNext",
           skipLibCheck: true,
-          moduleResolution: 'bundler',
+          moduleResolution: "bundler",
           allowImportingTsExtensions: true,
           isolatedModules: true,
-          moduleDetection: 'force',
+          moduleDetection: "force",
           noEmit: true,
-          jsx: 'react-jsx',
+          jsx: "react-jsx",
           strict: true,
           noUnusedLocals: true,
           noUnusedParameters: true,
           noFallthroughCasesInSwitch: true,
           noUncheckedSideEffectImports: true,
-          baseUrl: '.',
+          baseUrl: ".",
           paths: {
-            '@/*': ['src/*'],
-            '@icons/*': ['src/assets/icons/*'],
-            '@images/*': ['src/assets/images/*'],
+            "@/*": ["src/*"],
+            "@icons/*": ["src/assets/icons/*"],
+            "@images/*": ["src/assets/images/*"],
           },
         },
-        include: ['src', 'src/svg.d.ts'],
+        include: ["src", "src/svg.d.ts"],
       },
       null,
-      2,
-    ),
+      2
+    )
   );
 
   // tsconfig.node.json
   await write(
-    path.join(rootDir, 'tsconfig.node.json'),
+    path.join(rootDir, "tsconfig.node.json"),
     JSON.stringify(
       {
         compilerOptions: {
-          tsBuildInfoFile: './node_modules/.tmp/tsconfig.node.tsbuildinfo',
-          target: 'ES2022',
-          lib: ['ES2023'],
-          module: 'ESNext',
+          tsBuildInfoFile: "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+          target: "ES2022",
+          lib: ["ES2023"],
+          module: "ESNext",
           skipLibCheck: true,
-          moduleResolution: 'bundler',
+          moduleResolution: "bundler",
           allowImportingTsExtensions: true,
           isolatedModules: true,
-          moduleDetection: 'force',
+          moduleDetection: "force",
           noEmit: true,
           strict: true,
           noUnusedLocals: true,
@@ -316,125 +405,47 @@ export default defineConfig({
           noFallthroughCasesInSwitch: true,
           noUncheckedSideEffectImports: true,
         },
-        include: ['vite.config.ts'],
+        include: ["vite.config.ts"],
       },
       null,
-      2,
-    ),
+      2
+    )
   );
 
   await createPrettierConfig(rootDir);
   await createEslintConfig(rootDir);
-  await createGitignore(rootDir, 'react');
+  await createGitignore(rootDir, "react");
   await createVscodeSettings(rootDir);
-  await write(
-    path.join(rootDir, 'token.config.js'),
-    `import StyleDictionary from "style-dictionary";
-
-// kebab-case 변환
-StyleDictionary.registerTransform({
-  name: "name/kebab",
-  type: "name",
-  transform: (token) =>
-    token.path
-      .join("-")
-      .replace(/([a-z])([A-Z])/g, "$1-$2")
-      .toLowerCase(),
-});
-
-// color는 Tailwind 유틸리티로, typography는 .text-* 클래스로 생성
-StyleDictionary.registerFormat({
-  name: "css/tailwind-theme",
-  format: ({ dictionary }) => {
-    let css = "";
-    const withPx = (value) =>
-      typeof value === "string" && /^\\d+(\\.\\d+)?$/.test(value)
-        ? \`\${value}px\`
-        : value;
-
-    css += "@theme {\\n";
-    dictionary.allTokens.forEach((token) => {
-      if (token.$type === "color") {
-        css += \`  --color-\${token.name}: \${token.$value};\\n\`;
-      }
-    });
-    css += "}\\n\\n";
-
-    css += "@layer components {\\n";
-    dictionary.allTokens.forEach((token) => {
-      if (token.$type === "typography" && token.$value) {
-        const typo = token.$value;
-        css += \`  .text-\${token.name} {\\n\`;
-        if (typo.fontSize) {
-          css += \`    font-size: \${withPx(typo.fontSize)};\\n\`;
-        }
-        if (typo.lineHeight) {
-          css += \`    line-height: \${withPx(typo.lineHeight)};\\n\`;
-        }
-        if (typo.letterSpacing) {
-          css += \`    letter-spacing: \${typo.letterSpacing};\\n\`;
-        }
-        if (typo.fontWeight) {
-          css += \`    font-weight: \${typo.fontWeight};\\n\`;
-        }
-        if (typo.fontFamily) {
-          css += \`    font-family: \${typo.fontFamily};\\n\`;
-        }
-        css += "  }\\n";
-      }
-    });
-    css += "}\\n";
-
-    return css;
-  },
-});
-
-export default {
-  source: ["src/tokens.json"],
-  platforms: {
-    css: {
-      transforms: ["name/kebab"], // 일단 attribute/cti 제거
-      buildPath: "src/",
-      files: [
-        {
-          destination: "tokens.css",
-          format: "css/tailwind-theme",
-        },
-      ],
-    },
-  },
-};
-`,
-  );
+  await write(path.join(rootDir, "token.config.js"), TOKEN_CONFIG_JS);
 
   // src/App.css
   await write(
-    path.join(rootDir, 'src/App.css'),
+    path.join(rootDir, "src/App.css"),
     `@import "./tokens.css";
 @import 'tailwindcss';
-`,
+`
   );
-  await write(path.join(rootDir, 'src/tokens.css'), '');
-  await write(path.join(rootDir, 'src/tokens.json'), '{}\n');
+  await write(path.join(rootDir, "src/tokens.css"), "");
+  await write(path.join(rootDir, "src/tokens.json"), "{}\n");
 
   // src/main.tsx
   await write(
-    path.join(rootDir, 'src/main.tsx'),
+    path.join(rootDir, "src/main.tsx"),
     `import { createRoot } from 'react-dom/client';
 
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(<App />);
-`,
+`
   );
 
   await write(
-    path.join(rootDir, 'src/vite-env.d.ts'),
-    `/// <reference types="vite/client" />\n`,
+    path.join(rootDir, "src/vite-env.d.ts"),
+    `/// <reference types="vite/client" />\n`
   );
 
   await write(
-    path.join(rootDir, 'src/global.d.ts'),
+    path.join(rootDir, "src/global.d.ts"),
     `declare module '*.svg' {
   import React from 'react';
   export const ReactComponent: React.FunctionComponent<
@@ -456,12 +467,12 @@ declare module '*.webp' {
   const value: any;
   export = value;
 }
-`,
+`
   );
 
   // src/App.tsx
   await write(
-    path.join(rootDir, 'src/App.tsx'),
+    path.join(rootDir, "src/App.tsx"),
     `import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import './App.css';
@@ -487,7 +498,7 @@ function App() {
 }
 
 export default App;
-`,
+`
   );
 }
 
@@ -496,7 +507,7 @@ export default App;
 async function createNextBaseFiles(rootDir, config) {
   // next.config.ts
   await write(
-    path.join(rootDir, 'next.config.ts'),
+    path.join(rootDir, "next.config.ts"),
     `import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
@@ -520,73 +531,83 @@ const nextConfig: NextConfig = {
 };
 
 export default nextConfig;
-`,
+`
+  );
+  await write(
+    path.join(rootDir, "public/robots.txt"),
+    `User-agent: *\nDisallow: /\n`
   );
-  await write(path.join(rootDir, 'public/robots.txt'), `User-agent: *\nDisallow: /\n`);
 
   // tsconfig.json (Next.js)
   await write(
-    path.join(rootDir, 'tsconfig.json'),
+    path.join(rootDir, "tsconfig.json"),
     JSON.stringify(
       {
         compilerOptions: {
-          target: 'ES2017',
-          lib: ['dom', 'dom.iterable', 'esnext'],
+          target: "ES2017",
+          lib: ["dom", "dom.iterable", "esnext"],
           allowJs: true,
           skipLibCheck: true,
           strict: true,
           noEmit: true,
           esModuleInterop: true,
-          module: 'esnext',
-          moduleResolution: 'bundler',
+          module: "esnext",
+          moduleResolution: "bundler",
           resolveJsonModule: true,
           isolatedModules: true,
-          jsx: 'preserve',
+          jsx: "preserve",
           incremental: true,
-          plugins: [{ name: 'next' }],
-          paths: { '@/*': ['./src/*'] },
+          plugins: [{ name: "next" }],
+          paths: { "@/*": ["./src/*"] },
         },
-        include: ['next-env.d.ts', '**/*.ts', '**/*.tsx', '.next/types/**/*.ts'],
-        exclude: ['node_modules'],
+        include: [
+          "next-env.d.ts",
+          "**/*.ts",
+          "**/*.tsx",
+          ".next/types/**/*.ts",
+        ],
+        exclude: ["node_modules"],
       },
       null,
-      2,
-    ),
+      2
+    )
   );
 
   await createPrettierConfig(rootDir);
   await createNextEslintConfig(rootDir);
-  await createGitignore(rootDir, 'next');
+  await createGitignore(rootDir, "next");
   await createVscodeSettings(rootDir);
   await write(
-    path.join(rootDir, 'postcss.config.mjs'),
+    path.join(rootDir, "postcss.config.mjs"),
     `const config = {
   plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;
-`,
+`
   );
 
   // src/app/globals.css
   await write(
-    path.join(rootDir, 'src/app/globals.css'),
-    `@import "../src/tokens.css";
+    path.join(rootDir, "src/app/globals.css"),
+    `@import "../tokens.css";
 @import 'tailwindcss';
-`,
+`
   );
-  await write(path.join(rootDir, 'src/tokens.css'), '');
+  await write(path.join(rootDir, "token.config.js"), TOKEN_CONFIG_JS);
+  await write(path.join(rootDir, "src/tokens.css"), "");
+  await write(path.join(rootDir, "src/tokens.json"), "{}\n");
 
   // src/app/layout.tsx
   await write(
-    path.join(rootDir, 'src/app/layout.tsx'),
+    path.join(rootDir, "src/app/layout.tsx"),
     `import type { Metadata } from 'next';
 
 import './globals.css';
 
 export const metadata: Metadata = {
   title: '${config.projectName}',
-  description: 'Generated by cli-test',
+  description: 'Generated by byuckchon-frontend-cli',
 };
 
 export default function RootLayout({
@@ -603,12 +624,12 @@ export default function RootLayout({
     </html>
   );
 }
-`,
+`
   );
 
   // src/app/page.tsx
   await write(
-    path.join(rootDir, 'src/app/page.tsx'),
+    path.join(rootDir, "src/app/page.tsx"),
     `export default function MainPage() {
   return (
     <main className="flex min-h-screen items-center justify-center bg-gray-50">
@@ -622,29 +643,29 @@ export default function RootLayout({
     </main>
   );
 }
-`,
+`
   );
 
   await write(
-    path.join(rootDir, 'src/app/error.tsx'),
+    path.join(rootDir, "src/app/error.tsx"),
     `'use client';
 
 export default function Error() {
   return <div>Something went wrong.</div>;
 }
-`,
+`
   );
 
   await write(
-    path.join(rootDir, 'src/app/not-found.tsx'),
+    path.join(rootDir, "src/app/not-found.tsx"),
     `export default function NotFound() {
   return <div>Page not found.</div>;
 }
-`,
+`
   );
 
   await write(
-    path.join(rootDir, 'src/global.d.ts'),
+    path.join(rootDir, "src/global.d.ts"),
     `declare module '*.svg' {
   import React from 'react';
   export const ReactComponent: React.FunctionComponent<
@@ -666,26 +687,26 @@ declare module '*.webp' {
   const value: any;
   export = value;
 }
-`,
+`
   );
 
   await write(
-    path.join(rootDir, 'src/types.d.ts'),
+    path.join(rootDir, "src/types.d.ts"),
     `declare module "*.svg" {
   import React from "react";
   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
   export default ReactComponent;
 }
-`,
+`
   );
 }
 
 // ─── 진입점 ───────────────────────────────────────────────────────────────────
 
 export async function createBaseFiles(rootDir, config) {
-  if (config.framework === 'react') {
+  if (config.framework === "react") {
     await createReactBaseFiles(rootDir, config);
-  } else if (config.framework === 'next') {
+  } else if (config.framework === "next") {
     await createNextBaseFiles(rootDir, config);
   }
 }

package/src/generators/createPackageJson.js

@@ -10,7 +10,7 @@ export async function createPackageJson(rootDir, config) {
     name: config.projectName,
     version: '0.0.1',
     private: true,
-    ...(isReact ? { type: 'module' } : {}),
+    type: 'module',
     scripts: isReact
       ? {
           dev: 'vite',