@farmzone/fz-template-react 1.0.6 → 1.0.8

package/README.md

@@ -1,102 +1,102 @@
-# @farmzone/fz-template-react
-
-Farmzone React 프로젝트 보일러플레이트 생성 CLI.
-
-## 사용법
-
-```bash
-npx @farmzone/fz-template-react <프로젝트명>
-```
-
-예시:
-
-```bash
-npx @farmzone/fz-template-react my-app
-cd my-app
-pnpm install
-pnpm dev
-```
-
-프로젝트명을 생략하면 대화형으로 입력을 받습니다.
-
-```bash
-npx @farmzone/fz-template-react
-# 프로젝트 이름을 입력하세요: my-app
-```
-
-## 포함된 기술 스택
-
-| 항목                  | 버전    |
-| --------------------- | ------- |
-| React                 | ^19     |
-| Vite                  | ^7      |
-| TypeScript            | ~5.9    |
-| Tailwind CSS          | ^4      |
-| React Router          | ^7      |
-| TanStack Query        | ^5      |
-| @farmzone/fz-react-ui | ^0.0.6  |
-| react-hook-form       | ^7      |
-| zod                   | ^3      |
-| Zustand               | ^5      |
-| axios                 | ^1      |
-| dayjs                 | ^1      |
-| MSW                   | ^2      |
-| lucide-react          | ^1      |
-
-## 메뉴 추가
-
-`src/app/layout/menu.ts`의 `MENU_SECTIONS` 배열에 추가:
-
-```ts
-import type { MenuSection } from "@farmzone/fz-react-ui";
-import { LayoutDashboard, Users, FileText, ScrollText } from "lucide-react";
-
-export const MENU_SECTIONS: Array<MenuSection> = [
-  {
-    items: [
-      { icon: LayoutDashboard, label: "대시보드", path: "/" },
-      {
-        icon: FileText,
-        label: "게시글 관리",
-        children: [{ label: "게시글 관리", path: "/post" }],
-      },
-      {
-        icon: Users,
-        label: "사용자 관리",
-        children: [{ label: "사용자 관리", path: "/user" }],
-      },
-    ],
-  },
-  {
-    title: "시스템",
-    items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
-  },
-];
-```
-
-`children` 배열을 사용하면 아코디언 서브메뉴로 렌더링됩니다.
-
-## 라우트 추가
-
-`src/app/router/Router.tsx`의 `children` 배열에 추가:
-
-```tsx
-children: [
-  { index: true, element: <DashboardPage /> },
-  { path: "sample", element: <SamplePage /> },
-  { path: "sample/modal", element: <SampleModalPage /> },
-  { path: "sample/:id", element: <SampleDetailPage /> },
-  { path: "post", element: <PostPage /> },
-  { path: "post/:id", element: <PostDetailPage /> },
-  { path: "user", element: <UserPage /> },
-  { path: "system/log", element: <LogPage /> },
-],
-```
-
-`/login` 경로와 `authLoader`(토큰 미존재 시 `/login` 리다이렉트)는 Router.tsx에 이미 포함되어 있습니다.
-
-## npm 배포
-
-```bash
-npm publish --access public
-```
+# @farmzone/fz-template-react
+
+Farmzone React 프로젝트 보일러플레이트 생성 CLI.
+
+## 사용법
+
+```bash
+npx @farmzone/fz-template-react <프로젝트명>
+```
+
+예시:
+
+```bash
+npx @farmzone/fz-template-react my-app
+cd my-app
+pnpm install
+pnpm dev
+```
+
+프로젝트명을 생략하면 대화형으로 입력을 받습니다.
+
+```bash
+npx @farmzone/fz-template-react
+# 프로젝트 이름을 입력하세요: my-app
+```
+
+## 포함된 기술 스택
+
+| 항목                  | 버전    |
+| --------------------- | ------- |
+| React                 | ^19     |
+| Vite                  | ^7      |
+| TypeScript            | ~5.9    |
+| Tailwind CSS          | ^4      |
+| React Router          | ^7      |
+| TanStack Query        | ^5      |
+| @farmzone/fz-react-ui | ^0.0.6  |
+| react-hook-form       | ^7      |
+| zod                   | ^3      |
+| Zustand               | ^5      |
+| axios                 | ^1      |
+| dayjs                 | ^1      |
+| MSW                   | ^2      |
+| lucide-react          | ^1      |
+
+## 메뉴 추가
+
+`src/app/layout/menu.ts`의 `MENU_SECTIONS` 배열에 추가:
+
+```ts
+import type { MenuSection } from "@farmzone/fz-react-ui";
+import { LayoutDashboard, Users, FileText, ScrollText } from "lucide-react";
+
+export const MENU_SECTIONS: Array<MenuSection> = [
+  {
+    items: [
+      { icon: LayoutDashboard, label: "대시보드", path: "/" },
+      {
+        icon: FileText,
+        label: "게시글 관리",
+        children: [{ label: "게시글 관리", path: "/post" }],
+      },
+      {
+        icon: Users,
+        label: "사용자 관리",
+        children: [{ label: "사용자 관리", path: "/user" }],
+      },
+    ],
+  },
+  {
+    title: "시스템",
+    items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
+  },
+];
+```
+
+`children` 배열을 사용하면 아코디언 서브메뉴로 렌더링됩니다.
+
+## 라우트 추가
+
+`src/app/router/Router.tsx`의 `children` 배열에 추가:
+
+```tsx
+children: [
+  { index: true, element: <DashboardPage /> },
+  { path: "sample", element: <SamplePage /> },
+  { path: "sample/modal", element: <SampleModalPage /> },
+  { path: "sample/:id", element: <SampleDetailPage /> },
+  { path: "post", element: <PostPage /> },
+  { path: "post/:id", element: <PostDetailPage /> },
+  { path: "user", element: <UserPage /> },
+  { path: "system/log", element: <LogPage /> },
+],
+```
+
+`/login` 경로와 `authLoader`(토큰 미존재 시 `/login` 리다이렉트)는 Router.tsx에 이미 포함되어 있습니다.
+
+## npm 배포
+
+```bash
+npm publish --access public
+```

package/bin/create.js

@@ -1,108 +1,108 @@
-#!/usr/bin/env node
-
-import { createInterface } from "readline";
-import {
-  existsSync,
-  mkdirSync,
-  readdirSync,
-  statSync,
-  copyFileSync,
-  readFileSync,
-  writeFileSync,
-  renameSync,
-} from "fs";
-import { join, dirname } from "path";
-import { fileURLToPath } from "url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-function prompt(question) {
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      rl.close();
-      resolve(answer.trim());
-    });
-  });
-}
-
-function copyDir(src, dest) {
-  mkdirSync(dest, { recursive: true });
-  for (const entry of readdirSync(src)) {
-    const srcPath = join(src, entry);
-    const destPath = join(dest, entry);
-    if (statSync(srcPath).isDirectory()) {
-      copyDir(srcPath, destPath);
-    } else {
-      copyFileSync(srcPath, destPath);
-    }
-  }
-}
-
-function replaceInFile(filePath, search, replacement) {
-  if (!existsSync(filePath)) return;
-  const content = readFileSync(filePath, "utf-8");
-  writeFileSync(filePath, content.replaceAll(search, replacement));
-}
-
-async function main() {
-  console.log("\n🌱 Farmzone React Template\n");
-
-  let projectName = process.argv[2];
-
-  if (!projectName) {
-    projectName = await prompt("프로젝트 이름을 입력하세요: ");
-  }
-
-  if (!projectName) {
-    console.error("❌ 프로젝트 이름을 입력해야 합니다.");
-    process.exit(1);
-  }
-
-  if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(projectName)) {
-    console.error(
-      "❌ 프로젝트 이름은 소문자, 숫자, 하이픈(-)만 사용 가능하며 하이픈으로 시작하거나 끝날 수 없습니다.",
-    );
-    process.exit(1);
-  }
-
-  const targetDir = join(process.cwd(), projectName);
-
-  if (existsSync(targetDir)) {
-    console.error(`❌ '${projectName}' 디렉터리가 이미 존재합니다.`);
-    process.exit(1);
-  }
-
-  const templateDir = join(__dirname, "..", "template");
-
-  console.log(`\n🚀 '${projectName}' 프로젝트를 생성합니다...\n`);
-
-  // 템플릿 복사
-  copyDir(templateDir, targetDir);
-
-  // gitignore -> .gitignore 이름 변경 (npm publish 시 .gitignore는 자동으로 제외됨)
-  const gitignoreSrc = join(targetDir, "gitignore");
-  const gitignoreDest = join(targetDir, ".gitignore");
-  if (existsSync(gitignoreSrc)) renameSync(gitignoreSrc, gitignoreDest);
-
-  // __PROJECT_NAME__ 치환
-  replaceInFile(
-    join(targetDir, "package.json"),
-    "__PROJECT_NAME__",
-    projectName,
-  );
-  replaceInFile(join(targetDir, "index.html"), "__PROJECT_NAME__", projectName);
-
-  console.log("✅ 프로젝트 생성 완료!\n");
-  console.log("──────────────────────────────");
-  console.log("다음 명령어로 시작하세요:\n");
-  console.log(`  cd ${projectName}`);
-  console.log(`  pnpm install`);
-  console.log(`  pnpm run dev`);
-  console.log("──────────────────────────────\n");
-}
-
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
+#!/usr/bin/env node
+
+import { createInterface } from "readline";
+import {
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  statSync,
+  copyFileSync,
+  readFileSync,
+  writeFileSync,
+  renameSync,
+} from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function prompt(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true });
+  for (const entry of readdirSync(src)) {
+    const srcPath = join(src, entry);
+    const destPath = join(dest, entry);
+    if (statSync(srcPath).isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function replaceInFile(filePath, search, replacement) {
+  if (!existsSync(filePath)) return;
+  const content = readFileSync(filePath, "utf-8");
+  writeFileSync(filePath, content.replaceAll(search, replacement));
+}
+
+async function main() {
+  console.log("\n🌱 Farmzone React Template\n");
+
+  let projectName = process.argv[2];
+
+  if (!projectName) {
+    projectName = await prompt("프로젝트 이름을 입력하세요: ");
+  }
+
+  if (!projectName) {
+    console.error("❌ 프로젝트 이름을 입력해야 합니다.");
+    process.exit(1);
+  }
+
+  if (!/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(projectName)) {
+    console.error(
+      "❌ 프로젝트 이름은 소문자, 숫자, 하이픈(-)만 사용 가능하며 하이픈으로 시작하거나 끝날 수 없습니다.",
+    );
+    process.exit(1);
+  }
+
+  const targetDir = join(process.cwd(), projectName);
+
+  if (existsSync(targetDir)) {
+    console.error(`❌ '${projectName}' 디렉터리가 이미 존재합니다.`);
+    process.exit(1);
+  }
+
+  const templateDir = join(__dirname, "..", "template");
+
+  console.log(`\n🚀 '${projectName}' 프로젝트를 생성합니다...\n`);
+
+  // 템플릿 복사
+  copyDir(templateDir, targetDir);
+
+  // gitignore -> .gitignore 이름 변경 (npm publish 시 .gitignore는 자동으로 제외됨)
+  const gitignoreSrc = join(targetDir, "gitignore");
+  const gitignoreDest = join(targetDir, ".gitignore");
+  if (existsSync(gitignoreSrc)) renameSync(gitignoreSrc, gitignoreDest);
+
+  // __PROJECT_NAME__ 치환
+  replaceInFile(
+    join(targetDir, "package.json"),
+    "__PROJECT_NAME__",
+    projectName,
+  );
+  replaceInFile(join(targetDir, "index.html"), "__PROJECT_NAME__", projectName);
+
+  console.log("✅ 프로젝트 생성 완료!\n");
+  console.log("──────────────────────────────");
+  console.log("다음 명령어로 시작하세요:\n");
+  console.log(`  cd ${projectName}`);
+  console.log(`  pnpm install`);
+  console.log(`  pnpm run dev`);
+  console.log("──────────────────────────────\n");
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -1,24 +1,24 @@
-{
-  "name": "@farmzone/fz-template-react",
-  "version": "1.0.6",
-  "description": "Farmzone React 프로젝트 보일러플레이트 생성 CLI",
-  "type": "module",
-  "bin": {
-    "fz-template-react": "./bin/create.js"
-  },
-  "files": [
-    "bin",
-    "template"
-  ],
-  "keywords": [
-    "farmzone",
-    "react",
-    "template",
-    "boilerplate",
-    "vite"
-  ],
-  "license": "UNLICENSED",
-  "engines": {
-    "node": ">=18"
-  }
-}
+{
+  "name": "@farmzone/fz-template-react",
+  "version": "1.0.8",
+  "description": "Farmzone React 프로젝트 보일러플레이트 생성 CLI",
+  "type": "module",
+  "bin": {
+    "fz-template-react": "./bin/create.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "farmzone",
+    "react",
+    "template",
+    "boilerplate",
+    "vite"
+  ],
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">=18"
+  }
+}

package/template/.env.example

@@ -1,5 +1,5 @@
-# API 서버 호스트 (예: http://localhost:8080)
-VITE_APP_API_HOST=http://localhost:8080
-
-# API 버전 (예: v1)
-VITE_APP_API_VERSION=v1
+# API 서버 호스트 (예: http://localhost:8080)
+VITE_APP_API_HOST=http://localhost:8080
+
+# API 버전 (예: v1)
+VITE_APP_API_VERSION=v1

package/template/.prettierrc

@@ -1,9 +1,9 @@
-{
-  "printWidth": 110,
-  "tabWidth": 2,
-  "semi": true,
-  "bracketSpacing": true,
-  "singleQuote": false,
-  "jsxSingleQuote": false,
-  "trailingComma": "all"
-}
+{
+  "printWidth": 110,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "trailingComma": "all"
+}

package/template/eslint.config.js

@@ -1,26 +1,26 @@
-import js from "@eslint/js";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
-import { defineConfig, globalIgnores } from "eslint/config";
-
-export default defineConfig([
-  globalIgnores(["dist"]),
-  {
-    files: ["**/*.{ts,tsx}"],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs["recommended-latest"],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    rules: {
-      "@typescript-eslint/array-type": ["error", { default: "generic" }],
-    },
-  },
-]);
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      "@typescript-eslint/array-type": ["error", { default: "generic" }],
+    },
+  },
+]);

package/template/index.css

@@ -1,32 +1,32 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "@farmzone/fz-react-ui/tw.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@tailwind utilities;
-
-@theme inline {
-  --color-main: #3b82f6;
-  --color-sub-lightgray: #f3f4f6;
-  --color-sub-darkgray: #6b7280;
-  --color-sub-darkgray-2: #374151;
-  --color-basic-gray: #9ca3af;
-  --color-th: rgb(250 250 250);
-}
-
-@layer utilities {
-  .bg-th {
-    background-color: var(--color-th);
-  }
-}
-
-body {
-  font-family:
-    "Pretendard Variable",
-    Pretendard,
-    -apple-system,
-    BlinkMacSystemFont,
-    system-ui,
-    sans-serif;
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@farmzone/fz-react-ui/tw.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@tailwind utilities;
+
+@theme inline {
+  --color-main: #3b82f6;
+  --color-sub-lightgray: #f3f4f6;
+  --color-sub-darkgray: #6b7280;
+  --color-sub-darkgray-2: #374151;
+  --color-basic-gray: #9ca3af;
+  --color-th: rgb(250 250 250);
+}
+
+@layer utilities {
+  .bg-th {
+    background-color: var(--color-th);
+  }
+}
+
+body {
+  font-family:
+    "Pretendard Variable",
+    Pretendard,
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    sans-serif;
+}

package/template/index.html

@@ -1,19 +1,19 @@
-<!doctype html>
-<html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <link
-      rel="stylesheet"
-      as="style"
-      crossorigin
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>fz-template-react</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>fz-template-react</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>