@farmzone/fz-template-react

Farmzone React 프로젝트 보일러플레이트 생성 CLI.

사용법

npx @farmzone/fz-template-react <프로젝트명>

예시:

npx @farmzone/fz-template-react my-app
cd my-app
pnpm install
pnpm dev

프로젝트명을 생략하면 대화형으로 입력을 받습니다.

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 배열에 추가:

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 배열에 추가:

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 배포

npm publish --access public