byuckchon-frontend-cli 1.0.0

package/bin/index.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { initCommand } from '../src/commands/init.js';
+
+initCommand();

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "byuckchon-frontend-cli",
+  "version": "1.0.0",
+  "description": "byuckchon frontend CLI for creating React and Next.js projects",
+  "type": "module",
+  "bin": {
+    "byuckchon-frontend-cli": "./bin/index.js"
+  },
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "inquirer": "^9.3.0"
+  },
+  "files": [
+    "bin",
+    "src",
+    "README.md"
+  ],
+  "license": "MIT"
+}

package/src/commands/init.js

@@ -0,0 +1,39 @@
+import chalk from 'chalk';
+
+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'));
+
+  try {
+    const answers = await askInitQuestions();
+
+    console.log(
+      chalk.dim(
+        `\n  ${answers.framework} 프로젝트를 생성하는 중... (${answers.projectName})\n`,
+      ),
+    );
+
+    await createProject({ ...answers, typescript: true });
+
+    console.log(
+      chalk.bold.green(`\n  ✓ ${answers.projectName} 프로젝트가 생성되었습니다!\n`),
+    );
+    console.log(chalk.yellow('  다음 명령어로 시작하세요:\n'));
+    console.log(chalk.white(`    cd ${answers.projectName}`));
+    console.log(chalk.white('    npm run dev\n'));
+  } catch (error) {
+    if (error.code === 'EEXIST') {
+      console.error(
+        chalk.red(`\n  오류: '${error.path}' 폴더가 이미 존재합니다.\n`),
+      );
+    } else {
+      console.error(
+        chalk.red('\n  프로젝트 생성 중 오류가 발생했습니다:'),
+        error.message,
+      );
+    }
+    process.exit(1);
+  }
+}

package/src/constants/versions.js

@@ -0,0 +1,49 @@
+export const versions = {
+  // Core frameworks
+  react: '^18.3.1',
+  'react-dom': '^18.3.1',
+  'next-react': '^19.2.1',
+  'next-react-dom': '^19.2.1',
+  next: '15.1.9',
+
+  // Build tool (React only)
+  vite: '^6.0.0',
+  '@vitejs/plugin-react': '^4.3.0',
+  'vite-plugin-svgr': '^4.3.0',
+  '@svgr/webpack': '^8.1.0',
+
+  // TypeScript
+  typescript: '^5.7.0',
+  '@types/react': '^18.3.3',
+  '@types/react-dom': '^18.3.0',
+  '@types/node': '^22.0.0',
+
+  // State & Data
+  zustand: '^5.0.3',
+  axios: '^1.8.4',
+  '@tanstack/react-query': '^5.74.4',
+
+  // Styling
+  tailwindcss: '^4.1.4',
+  '@tailwindcss/vite': '^4.1.4',
+  '@tailwindcss/postcss': '^4',
+
+  // Linting
+  eslint: '^8.57.0',
+  'eslint-config-expo': '^8.0.0',
+  'eslint-config-next': '^15.0.0',
+  'eslint-import-resolver-typescript': '^3.6.0',
+  'eslint-plugin-import': '^2.29.0',
+  'eslint-plugin-react': '^7.34.0',
+  'eslint-plugin-react-hooks': '^4.6.0',
+  '@typescript-eslint/eslint-plugin': '^7.0.0',
+  '@typescript-eslint/parser': '^7.0.0',
+
+  // Formatting
+  prettier: '^3.3.0',
+  'prettier-plugin-tailwindcss': '^0.6.11',
+  'style-dictionary': '^5.4.0',
+  zod: '^3.24.3',
+  '@trivago/prettier-plugin-sort-imports': '^5.2.2',
+  'eslint-plugin-unused-imports': '^4.1.4',
+};

package/src/generators/createBaseFiles.js

@@ -0,0 +1,681 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+async function write(filePath, content) {
+  await fs.writeFile(filePath, content, 'utf-8');
+}
+
+// ─── 공통 설정 파일 ────────────────────────────────────────────────────────────
+
+async function createPrettierConfig(rootDir) {
+  const config = {
+    semi: true,
+    trailingComma: 'all',
+    singleQuote: true,
+    tabWidth: 2,
+    useTabs: false,
+    printWidth: 80,
+    plugins: [
+      '@trivago/prettier-plugin-sort-imports',
+      'prettier-plugin-tailwindcss',
+    ],
+    importOrder: ['^@core/(.*)$', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
+  };
+  await write(path.join(rootDir, '.prettierrc'), JSON.stringify(config, null, 2));
+}
+
+async function createEslintConfig(rootDir) {
+  await write(
+    path.join(rootDir, '.eslintrc.cjs'),
+    `module.exports = {
+  env: {
+    browser: true,
+    es2022: true,
+    node: true,
+  },
+  extends: ['expo', 'eslint:recommended'],
+  plugins: ['unused-imports'],
+  rules: {
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'warn',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'react/self-closing-comp': [
+      'warn',
+      {
+        component: true,
+        html: true,
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+};
+`,
+  );
+}
+
+async function createNextEslintConfig(rootDir) {
+  await write(
+    path.join(rootDir, '.eslintrc.cjs'),
+    `// 현 파일이 eslint config type 을 따른다는 선언
+/** @type {import("eslint").Linter.Config} */
+
+module.exports = {
+  root: true,
+
+  // next.js 공식 eslint 규칙 적용
+  extends: ["next/core-web-vitals", "next/typescript"],
+
+  // import 문 자동정렬, 유효성 검사, 경로 오류 방지
+  plugins: ["import"],
+
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "import/order": [
+      "error",
+      {
+        // builtin: node 내장 모듈, external: npm 패키지, internal: 프로젝트 내 모듈, parent: 상위 경로, sibling: 형제 경로, index: 인덱스 파일
+        groups: ["builtin", "external", "internal", "parent", "sibling", "index"],
+        // 특정 패턴 그룹에 속하는 모듈 순서 지정
+        pathGroups: [
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
+          {
+            pattern: "next/**",
+            group: "external",
+            position: "before",
+          },
+          {
+            pattern: "@/**",
+            group: "internal",
+          },
+        ],
+        // 중복 정렬 방지
+        pathGroupsExcludedImportTypes: ["react"],
+        // 알파벳 순서대로 오름차순 정렬
+        alphabetize: { order: "asc", caseInsensitive: true },
+      },
+    ],
+  },
+
+  // 정렬 제외 파일 목록
+  ignorePatterns: ["node_modules/", ".next/", "out/", "build/", "next-env.d.ts"],
+};
+`,
+  );
+}
+
+async function createGitignore(rootDir, framework) {
+  const base = `# Dependencies
+node_modules/
+
+# Build
+dist/
+build/
+
+# Env files
+.env
+.env.*
+.env.local
+.env.*.local
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Editor
+.vscode/
+.idea/
+*.suo
+*.sw?
+
+# Logs
+npm-debug.log*
+yarn-error.log*
+
+# Additional ignores
+node_modules
+dist
+dist-ssr
+*.local
+.env
+.env.production
+.history
+`;
+
+  const nextExtra = `
+# Next.js
+.next/
+out/
+`;
+
+  await write(path.join(rootDir, '.gitignore'), base + (framework === 'next' ? nextExtra : ''));
+}
+
+async function createVscodeSettings(rootDir) {
+  await fs.mkdir(path.join(rootDir, '.vscode'), { recursive: true });
+  await write(
+    path.join(rootDir, '.vscode/settings.json'),
+    JSON.stringify(
+      {
+        'editor.defaultFormatter': 'esbenp.prettier-vscode',
+        'editor.formatOnSave': true,
+        'eslint.validate': [
+          'javascript',
+          'typescript',
+          'javascriptreact',
+          'typescriptreact',
+        ],
+        'editor.codeActionsOnSave': {
+          'source.organizeImports': 'always',
+          'source.fixAll.eslint': 'always',
+        },
+      },
+      null,
+      2,
+    ),
+  );
+}
+
+// ─── React (Vite) ─────────────────────────────────────────────────────────────
+
+async function createReactBaseFiles(rootDir, config) {
+  // index.html
+  await write(
+    path.join(rootDir, 'index.html'),
+    `<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${config.projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+  );
+  await write(path.join(rootDir, 'public/robots.txt'), `User-agent: *\nDisallow: /\n`);
+
+  // vite.config.ts
+  await write(
+    path.join(rootDir, 'vite.config.ts'),
+    `import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    svgr({
+      svgrOptions: {
+        icon: true,
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': '/src',
+      '@icons': '/src/assets/icons',
+      '@images': '/src/assets/images',
+    },
+  },
+});
+`,
+  );
+
+  // tsconfig.json
+  await write(
+    path.join(rootDir, 'tsconfig.json'),
+    JSON.stringify(
+      {
+        files: [],
+        references: [{ path: './tsconfig.app.json' }, { path: './tsconfig.node.json' }],
+      },
+      null,
+      2,
+    ),
+  );
+
+  // tsconfig.app.json
+  await write(
+    path.join(rootDir, 'tsconfig.app.json'),
+    JSON.stringify(
+      {
+        compilerOptions: {
+          tsBuildInfoFile: './node_modules/.tmp/tsconfig.app.tsbuildinfo',
+          target: 'ES2020',
+          useDefineForClassFields: true,
+          lib: ['ES2020', 'DOM', 'DOM.Iterable'],
+          module: 'ESNext',
+          skipLibCheck: true,
+          moduleResolution: 'bundler',
+          allowImportingTsExtensions: true,
+          isolatedModules: true,
+          moduleDetection: 'force',
+          noEmit: true,
+          jsx: 'react-jsx',
+          strict: true,
+          noUnusedLocals: true,
+          noUnusedParameters: true,
+          noFallthroughCasesInSwitch: true,
+          noUncheckedSideEffectImports: true,
+          baseUrl: '.',
+          paths: {
+            '@/*': ['src/*'],
+            '@icons/*': ['src/assets/icons/*'],
+            '@images/*': ['src/assets/images/*'],
+          },
+        },
+        include: ['src', 'src/svg.d.ts'],
+      },
+      null,
+      2,
+    ),
+  );
+
+  // tsconfig.node.json
+  await write(
+    path.join(rootDir, 'tsconfig.node.json'),
+    JSON.stringify(
+      {
+        compilerOptions: {
+          tsBuildInfoFile: './node_modules/.tmp/tsconfig.node.tsbuildinfo',
+          target: 'ES2022',
+          lib: ['ES2023'],
+          module: 'ESNext',
+          skipLibCheck: true,
+          moduleResolution: 'bundler',
+          allowImportingTsExtensions: true,
+          isolatedModules: true,
+          moduleDetection: 'force',
+          noEmit: true,
+          strict: true,
+          noUnusedLocals: true,
+          noUnusedParameters: true,
+          noFallthroughCasesInSwitch: true,
+          noUncheckedSideEffectImports: true,
+        },
+        include: ['vite.config.ts'],
+      },
+      null,
+      2,
+    ),
+  );
+
+  await createPrettierConfig(rootDir);
+  await createEslintConfig(rootDir);
+  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(),
+});
+
+// Tailwind v4 @theme 변수 생성
+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\`;
+      }
+      if (token.$type === "typography" && token.$value) {
+        const typo = token.$value;
+        if (typo.fontFamily) {
+          css += \`  --font-family-\${token.name}: \${typo.fontFamily};\\n\`;
+        }
+        if (typo.fontWeight) {
+          css += \`  --font-weight-\${token.name}: \${typo.fontWeight};\\n\`;
+        }
+        if (typo.fontSize) {
+          css += \`  --font-size-\${token.name}: \${withPx(typo.fontSize)};\\n\`;
+        }
+        if (typo.lineHeight) {
+          css += \`  --line-height-\${token.name}: \${withPx(typo.lineHeight)};\\n\`;
+        }
+      }
+    });
+    css += "}\\n\\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",
+        },
+      ],
+    },
+  },
+};
+`,
+  );
+
+  // src/App.css
+  await write(
+    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');
+
+  // src/main.tsx
+  await write(
+    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`,
+  );
+
+  await write(
+    path.join(rootDir, 'src/global.d.ts'),
+    `declare module '*.svg' {
+  import React from 'react';
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+  const src: string;
+
+  export default src;
+}
+
+declare module '*.svg?react' {
+  import React from 'react';
+  const Component: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+  export default Component;
+}
+
+declare module '*.webp' {
+  const value: any;
+  export = value;
+}
+`,
+  );
+
+  // src/App.tsx
+  await write(
+    path.join(rootDir, 'src/App.tsx'),
+    `import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import './App.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+function App() {
+  return (
+    <main>
+      <QueryClientProvider client={queryClient}>
+        <div>Hi! Byuckchon Frontend Developer</div>
+      </QueryClientProvider>
+    </main>
+  );
+}
+
+export default App;
+`,
+  );
+}
+
+// ─── Next.js (App Router) ─────────────────────────────────────────────────────
+
+async function createNextBaseFiles(rootDir, config) {
+  // next.config.ts
+  await write(
+    path.join(rootDir, 'next.config.ts'),
+    `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  experimental: {
+    turbo: {
+      rules: {
+        "*.svg": {
+          loaders: ["@svgr/webpack"],
+          as: "*.tsx",
+        },
+      },
+    },
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+};
+
+export default nextConfig;
+`,
+  );
+  await write(path.join(rootDir, 'public/robots.txt'), `User-agent: *\nDisallow: /\n`);
+
+  // tsconfig.json (Next.js)
+  await write(
+    path.join(rootDir, 'tsconfig.json'),
+    JSON.stringify(
+      {
+        compilerOptions: {
+          target: 'ES2017',
+          lib: ['dom', 'dom.iterable', 'esnext'],
+          allowJs: true,
+          skipLibCheck: true,
+          strict: true,
+          noEmit: true,
+          esModuleInterop: true,
+          module: 'esnext',
+          moduleResolution: 'bundler',
+          resolveJsonModule: true,
+          isolatedModules: true,
+          jsx: 'preserve',
+          incremental: true,
+          plugins: [{ name: 'next' }],
+          paths: { '@/*': ['./src/*'] },
+        },
+        include: ['next-env.d.ts', '**/*.ts', '**/*.tsx', '.next/types/**/*.ts'],
+        exclude: ['node_modules'],
+      },
+      null,
+      2,
+    ),
+  );
+
+  await createPrettierConfig(rootDir);
+  await createNextEslintConfig(rootDir);
+  await createGitignore(rootDir, 'next');
+  await createVscodeSettings(rootDir);
+  await write(
+    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";
+@import 'tailwindcss';
+`,
+  );
+  await write(path.join(rootDir, 'src/tokens.css'), '');
+
+  // src/app/layout.tsx
+  await write(
+    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',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <head>
+        <meta charSet="utf-8" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+`,
+  );
+
+  // src/app/page.tsx
+  await write(
+    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">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900">${config.projectName}</h1>
+        <p className="mt-3 text-lg font-medium text-gray-700">
+          Hi! Byuckchon Frontend Developer
+        </p>
+        <p className="mt-4 text-gray-500">Next.js + TypeScript + Tailwind</p>
+      </div>
+    </main>
+  );
+}
+`,
+  );
+
+  await write(
+    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'),
+    `export default function NotFound() {
+  return <div>Page not found.</div>;
+}
+`,
+  );
+
+  await write(
+    path.join(rootDir, 'src/global.d.ts'),
+    `declare module '*.svg' {
+  import React from 'react';
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+  const src: string;
+
+  export default src;
+}
+
+declare module '*.svg?react' {
+  import React from 'react';
+  const Component: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+  export default Component;
+}
+
+declare module '*.webp' {
+  const value: any;
+  export = value;
+}
+`,
+  );
+
+  await write(
+    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') {
+    await createReactBaseFiles(rootDir, config);
+  } else if (config.framework === 'next') {
+    await createNextBaseFiles(rootDir, config);
+  }
+}

package/src/generators/createFolders.js

@@ -0,0 +1,67 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+/**
+ * React 폴더 구조
+ * lib → store → api → hooks → context → components → layout → page
+ * assets는 모든 레이어에서 참조 가능
+ */
+const REACT_FOLDERS = [
+  'public',
+  'src/assets',
+  'src/assets/icons',
+  'src/assets/images',
+  'src/lib',
+  'src/store',
+  'src/api',
+  'src/hooks',
+  'src/context',
+  'src/components',
+  'src/layout',
+  'src/page',
+];
+
+/**
+ * Next.js App Router 폴더 구조
+ */
+const NEXT_FOLDERS = [
+  'public',
+  'src/app',
+  'src/assets',
+  'src/assets/common',
+  'src/assets/pages',
+  'src/components',
+  'src/constant',
+  'src/hooks',
+  'src/lib',
+  'src/providers',
+];
+
+async function writeFile(filePath, content) {
+  await fs.writeFile(filePath, content, 'utf-8');
+}
+
+export async function createFolders(rootDir, config) {
+  const folders =
+    config.framework === 'react' ? REACT_FOLDERS : NEXT_FOLDERS;
+
+  for (const folder of folders) {
+    await fs.mkdir(path.join(rootDir, folder), { recursive: true });
+  }
+
+  // 각 레이어에 placeholder 파일 생성
+  await writeFile(path.join(rootDir, 'src/lib/index.ts'), '// 유틸리티 함수, 상수, 헬퍼\n');
+  await writeFile(path.join(rootDir, 'src/hooks/index.ts'), '// 커스텀 훅\n');
+  await writeFile(path.join(rootDir, 'src/components/index.ts'), '// 재사용 가능한 UI 컴포넌트\n');
+
+  if (config.framework === 'react') {
+    await writeFile(path.join(rootDir, 'src/store/index.ts'), '// Zustand 스토어\n');
+    await writeFile(path.join(rootDir, 'src/api/index.ts'), '// Axios API 호출\n');
+    await writeFile(path.join(rootDir, 'src/context/index.tsx'), '// React Context\n');
+    await writeFile(path.join(rootDir, 'src/layout/index.tsx'), '// 레이아웃 컴포넌트\n');
+    await writeFile(path.join(rootDir, 'src/page/index.tsx'), '// 페이지 컴포넌트\n');
+  } else {
+    await writeFile(path.join(rootDir, 'src/constant/index.ts'), '// 상수 정의\n');
+    await writeFile(path.join(rootDir, 'src/providers/index.tsx'), '// 전역 Provider\n');
+  }
+}

package/src/generators/createPackageJson.js

@@ -0,0 +1,86 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+import { versions } from '../constants/versions.js';
+
+export async function createPackageJson(rootDir, config) {
+  const isReact = config.framework === 'react';
+
+  const pkg = {
+    name: config.projectName,
+    version: '0.0.1',
+    private: true,
+    ...(isReact ? { type: 'module' } : {}),
+    scripts: isReact
+      ? {
+          dev: 'vite',
+          build: 'tsc -b && vite build',
+          'tokens:build': 'style-dictionary build --config token.config.js',
+          lint: 'eslint . --ext ts,tsx',
+          preview: 'vite preview',
+          format: 'prettier --write "src/**/*.{ts,tsx,css}"',
+        }
+      : {
+          dev: 'next dev',
+          build: 'next build',
+          'tokens:build': 'style-dictionary build --config token.config.js',
+          start: 'next start',
+          lint: 'next lint',
+          format: 'prettier --write "src/**/*.{ts,tsx,css}"',
+        },
+    dependencies: {
+      react: isReact ? versions.react : versions['next-react'],
+      'react-dom': isReact ? versions['react-dom'] : versions['next-react-dom'],
+      ...(isReact ? {} : { next: versions.next }),
+      zustand: versions.zustand,
+      ...(isReact
+        ? {
+            axios: versions.axios,
+            '@tanstack/react-query': versions['@tanstack/react-query'],
+          }
+        : {}),
+      zod: versions.zod,
+    },
+    devDependencies: {
+      '@types/react': versions['@types/react'],
+      '@types/react-dom': versions['@types/react-dom'],
+      '@types/node': versions['@types/node'],
+      '@trivago/prettier-plugin-sort-imports':
+        versions['@trivago/prettier-plugin-sort-imports'],
+      eslint: versions.eslint,
+      'eslint-config-expo': versions['eslint-config-expo'],
+      'eslint-import-resolver-typescript':
+        versions['eslint-import-resolver-typescript'],
+      'eslint-plugin-import': versions['eslint-plugin-import'],
+      'eslint-plugin-react': versions['eslint-plugin-react'],
+      'eslint-plugin-react-hooks': versions['eslint-plugin-react-hooks'],
+      'eslint-plugin-unused-imports': versions['eslint-plugin-unused-imports'],
+      prettier: versions.prettier,
+      'prettier-plugin-tailwindcss': versions['prettier-plugin-tailwindcss'],
+      'style-dictionary': versions['style-dictionary'],
+      tailwindcss: versions.tailwindcss,
+      typescript: versions.typescript,
+      ...(isReact
+        ? {
+            '@tailwindcss/vite': versions['@tailwindcss/vite'],
+            '@typescript-eslint/eslint-plugin':
+              versions['@typescript-eslint/eslint-plugin'],
+            '@typescript-eslint/parser': versions['@typescript-eslint/parser'],
+            '@vitejs/plugin-react': versions['@vitejs/plugin-react'],
+            vite: versions.vite,
+            'vite-plugin-svgr': versions['vite-plugin-svgr'],
+          }
+        : {
+            '@tailwindcss/postcss': versions['@tailwindcss/postcss'],
+            '@svgr/webpack': versions['@svgr/webpack'],
+            'eslint-config-next': versions['eslint-config-next'],
+          }),
+    },
+  };
+
+  await fs.writeFile(
+    path.join(rootDir, 'package.json'),
+    JSON.stringify(pkg, null, 2),
+    'utf-8',
+  );
+}

package/src/generators/createProject.js

@@ -0,0 +1,31 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { exec as execCallback } from 'child_process';
+import { promisify } from 'util';
+
+import { createBaseFiles } from './createBaseFiles.js';
+import { createFolders } from './createFolders.js';
+import { createPackageJson } from './createPackageJson.js';
+import { createReadme } from './createReadme.js';
+
+const exec = promisify(execCallback);
+const BYUCKCHON_PACKAGES = [
+  '@byuckchon-frontend/hooks',
+  '@byuckchon-frontend/utils',
+  '@byuckchon-frontend/basic-ui',
+  '@byuckchon-frontend/core',
+];
+
+export async function createProject(config) {
+  const rootDir = path.resolve(config.projectName);
+
+  await fs.mkdir(rootDir);
+  await createFolders(rootDir, config);
+  await createPackageJson(rootDir, config);
+  await createBaseFiles(rootDir, config);
+  await createReadme(rootDir, config);
+
+  // 최신 버전(latest 포함) 의존성을 실제로 설치해 lockfile까지 생성
+  await exec('npm install', { cwd: rootDir });
+  await exec(`npm install ${BYUCKCHON_PACKAGES.join(' ')}`, { cwd: rootDir });
+}

package/src/generators/createReadme.js

@@ -0,0 +1,73 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function createReadme(rootDir, config) {
+  const isReact = config.framework === 'react';
+
+  const content = `# ${config.projectName}
+
+## 기술 스택
+
+| 항목 | 내용 |
+|------|------|
+| Framework | ${isReact ? 'React 19' : 'Next.js 15 (App Router)'} |
+| Language | TypeScript |
+| Build Tool | ${isReact ? 'Vite' : 'Next.js built-in'} |
+| Styling | Tailwind CSS |
+| State | Zustand |
+| HTTP | Axios |
+| Lint | ESLint + Prettier |
+
+## 시작하기
+
+\`\`\`bash
+# 의존성 설치
+npm install
+
+# 개발 서버 실행
+npm run dev
+
+# 프로덕션 빌드
+npm run build
+
+# 코드 포맷팅
+npm run format
+\`\`\`
+
+## 프로젝트 구조
+
+\`\`\`
+src/
+├── assets/        정적 파일 (이미지, 폰트 등)
+├── lib/           유틸리티 함수, 상수
+├── store/         Zustand 상태 관리
+├── api/           Axios API 호출
+├── hooks/         커스텀 훅
+├── context/       React Context
+├── components/    재사용 가능한 UI 컴포넌트${
+    isReact
+      ? `
+├── layout/        레이아웃 컴포넌트
+└── page/          페이지 컴포넌트`
+      : `
+└── app/           Next.js App Router (layout, page 등)`
+  }
+\`\`\`
+
+${
+  isReact
+    ? `## 레이어 의존성 규칙
+
+각 레이어는 아래 방향으로만 import 해야 합니다.
+
+\`\`\`
+lib → store → api → hooks → context → components → layout → page
+\`\`\`
+
+\`assets\`는 모든 레이어에서 자유롭게 참조 가능합니다.`
+    : ''
+}
+`;
+
+  await fs.writeFile(path.join(rootDir, 'README.md'), content, 'utf-8');
+}

package/src/prompts/initPrompts.js

@@ -0,0 +1,26 @@
+import inquirer from 'inquirer';
+
+export async function askInitQuestions() {
+  return inquirer.prompt([
+    {
+      type: 'input',
+      name: 'projectName',
+      message: '프로젝트 이름을 입력해주세요:',
+      validate: (input) => {
+        if (!input.trim()) return '프로젝트 이름을 입력해주세요.';
+        if (!/^[a-z0-9\-_]+$/i.test(input))
+          return '영문, 숫자, -, _ 만 사용 가능합니다.';
+        return true;
+      },
+    },
+    {
+      type: 'list',
+      name: 'framework',
+      message: '어떤 프레임워크를 사용할까요?',
+      choices: [
+        { name: 'React  (Vite + TypeScript)', value: 'react' },
+        { name: 'Next.js  (App Router + TypeScript)', value: 'next' },
+      ],
+    },
+  ]);
+}