create-web-0to1 0.1.0

package/internal/engine/create-feature-crud.template.mjs

@@ -0,0 +1,601 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+
+const rootDir = process.cwd();
+const srcDir = path.join(rootDir, 'src');
+const __ROUTE_ROOT_CONST__ = path.join(srcDir, '__ROUTE_ROOT_NAME__');
+const featuresDir = path.join(srcDir, 'features');
+
+const rawName = process.argv[2];
+
+if (!rawName) {
+  console.error('사용법: npm run create:feature:crud -- <feature-name>');
+  process.exit(1);
+}
+
+if (!/^[a-z][a-z0-9-]*$/.test(rawName)) {
+  console.error('feature 이름은 영문 소문자 kebab-case 형식이어야 하며 문자로 시작해야 합니다.');
+  process.exit(1);
+}
+
+function toPascalCase(value) {
+  return value
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join('');
+}
+
+function toCamelCase(value) {
+  const pascal = toPascalCase(value);
+  return pascal[0].toLowerCase() + pascal.slice(1);
+}
+
+function toSingular(value) {
+  if (value.endsWith('ies')) {
+    return `${value.slice(0, -3)}y`;
+  }
+
+  if (value.endsWith('s')) {
+    return value.slice(0, -1);
+  }
+
+  return value;
+}
+
+function ensureFile(filePath, content) {
+  const exists = fs.existsSync(filePath);
+
+  if (exists) {
+    console.log(`skip: ${path.relative(rootDir, filePath)}`);
+    return;
+  }
+
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, content, 'utf8');
+  console.log(`create: ${path.relative(rootDir, filePath)}`);
+}
+
+function getStyleMode() {
+  const packageJsonPath = path.join(rootDir, 'package.json');
+
+  if (!fs.existsSync(packageJsonPath)) {
+    return 'tailwind';
+  }
+
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    return packageJson['__PACKAGE_JSON_KEY__']?.style === 'none' ? 'none' : 'tailwind';
+  } catch {
+    return 'tailwind';
+  }
+}
+
+const featureName = rawName;
+const featureNamePascal = toPascalCase(featureName);
+const featureNameCamel = toCamelCase(featureName);
+const entityName = toSingular(featureName);
+const entityNamePascal = toPascalCase(entityName);
+const entityNameCamel = toCamelCase(entityName);
+const createRouteKey = `${entityNameCamel}Create`;
+const featurePath = `/${featureName}`;
+const featureCreatePath = `${featurePath}/new`;
+const collectionLabel = featureNamePascal;
+const entityLabel = entityNamePascal;
+const useStyles = getStyleMode() !== 'none';
+
+const featureDir = path.join(featuresDir, featureName);
+const routeDir = path.join(__ROUTE_ROOT_CONST__, featureName);
+const routeNewDir = path.join(routeDir, 'new');
+
+function getListSectionContent() {
+  if (!useStyles) {
+    return `__LIST_IMPORTS__
+
+import { get${featureNamePascal} } from '@/features/${featureName}/api/get-${featureName}';
+import { ${entityNameCamel}QueryKeys } from '@/features/${featureName}/api/${entityName}-query-keys';
+import { formatDate, truncateText } from '@/shared/utils/format';
+
+export function ${entityNamePascal}ListSection() {
+  const [search, setSearch] = useState('');
+  const { data, isLoading, error } = useQuery({
+    queryKey: ${entityNameCamel}QueryKeys.list({ search }),
+    queryFn: ({ signal }) => get${featureNamePascal}(search, signal),
+  });
+
+  return (
+    <section>
+      <div>
+        <div>
+          <h2>${collectionLabel}</h2>
+          <p>TanStack Query와 검색 상태를 포함한 외부 API 연동 예시 목록입니다.</p>
+        </div>
+        <div>
+          <input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="${collectionLabel} 검색"
+          />
+          <Link __LIST_LINK_PROP__="${featureCreatePath}">${entityLabel} 추가</Link>
+        </div>
+      </div>
+
+      {isLoading ? <p>불러오는 중...</p> : null}
+      {error ? <p>목록을 불러오지 못했습니다.</p> : null}
+      {!isLoading && !error && data?.length === 0 ? <p>조건에 맞는 항목이 없습니다.</p> : null}
+
+      <div>
+        {data?.map((item) => (
+          <article key={item.id}>
+            <h3>{item.title}</h3>
+            <p>{formatDate(item.createdAt)}</p>
+            <p>{truncateText(item.description, 140)}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+`;
+  }
+
+  return `__LIST_IMPORTS__
+
+import { get${featureNamePascal} } from '@/features/${featureName}/api/get-${featureName}';
+import { ${entityNameCamel}QueryKeys } from '@/features/${featureName}/api/${entityName}-query-keys';
+import { formatDate, truncateText } from '@/shared/utils/format';
+
+export function ${entityNamePascal}ListSection() {
+  const [search, setSearch] = useState('');
+  const { data, isLoading, error } = useQuery({
+    queryKey: ${entityNameCamel}QueryKeys.list({ search }),
+    queryFn: ({ signal }) => get${featureNamePascal}(search, signal),
+  });
+
+  return (
+    <section className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
+      <div className="flex flex-col gap-4 border-b border-zinc-200 pb-5 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-zinc-950">${collectionLabel}</h2>
+          <p className="mt-1 text-sm text-zinc-500">
+            TanStack Query와 검색 상태를 포함한 외부 API 연동 예시 목록입니다.
+          </p>
+        </div>
+        <div className="flex gap-3">
+          <input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="${collectionLabel} 검색"
+            className="rounded-xl border border-zinc-300 px-4 py-2 text-sm outline-none"
+          />
+          <Link
+            __LIST_LINK_PROP__="${featureCreatePath}"
+            className="inline-flex items-center rounded-xl bg-zinc-950 px-4 py-2 text-sm font-medium text-white"
+          >
+            ${entityLabel} 추가
+          </Link>
+        </div>
+      </div>
+
+      {isLoading ? <p className="py-8 text-sm text-zinc-500">불러오는 중...</p> : null}
+      {error ? <p className="py-8 text-sm text-rose-600">목록을 불러오지 못했습니다.</p> : null}
+      {!isLoading && !error && data?.length === 0 ? (
+        <p className="py-8 text-sm text-zinc-500">조건에 맞는 항목이 없습니다.</p>
+      ) : null}
+
+      <div className="mt-6 grid gap-4">
+        {data?.map((item) => (
+          <article key={item.id} className="rounded-2xl border border-zinc-200 p-5">
+            <h3 className="text-lg font-semibold text-zinc-950">{item.title}</h3>
+            <p className="mt-1 text-sm text-zinc-500">{formatDate(item.createdAt)}</p>
+            <p className="mt-4 text-sm leading-6 text-zinc-700">
+              {truncateText(item.description, 140)}
+            </p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+`;
+}
+
+function getFormContent() {
+  if (!useStyles) {
+    return `__FORM_IMPORTS__
+
+import { ${entityNameCamel}FormSchema, type ${entityNamePascal}FormValues } from '@/features/${featureName}/lib/${entityName}-schema';
+import { Button } from '@/shared/ui/button';
+import { TextInputField } from '@/shared/ui/text-input-field';
+
+type ${entityNamePascal}FormProps = {
+  onSubmit: (values: ${entityNamePascal}FormValues) => Promise<unknown>;
+  submitLabel: string;
+  successPath?: string;
+};
+
+export function ${entityNamePascal}Form({ onSubmit, submitLabel, successPath }: ${entityNamePascal}FormProps) {
+  __FORM_NAVIGATION_HOOK__
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<${entityNamePascal}FormValues>({
+    resolver: zodResolver(${entityNameCamel}FormSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+    },
+  });
+
+  const submit = handleSubmit(async (values) => {
+    await onSubmit(values);
+
+    if (successPath) {
+      __FORM_SUCCESS_NAVIGATION__
+    }
+  });
+
+  return (
+    <form onSubmit={submit}>
+      <TextInputField
+        label="제목"
+        required
+        error={errors.title?.message}
+        placeholder="${entityLabel} 제목"
+        {...register('title')}
+      />
+__FORM_DESCRIPTION_BLOCK_NO_STYLE__
+      <div>
+        <Button type="submit" isLoading={isSubmitting}>
+          {submitLabel}
+        </Button>
+      </div>
+    </form>
+  );
+}
+`;
+  }
+
+  return `__FORM_IMPORTS__
+
+import { ${entityNameCamel}FormSchema, type ${entityNamePascal}FormValues } from '@/features/${featureName}/lib/${entityName}-schema';
+import { Button } from '@/shared/ui/button';
+import { TextInputField } from '@/shared/ui/text-input-field';
+
+type ${entityNamePascal}FormProps = {
+  onSubmit: (values: ${entityNamePascal}FormValues) => Promise<unknown>;
+  submitLabel: string;
+  successPath?: string;
+};
+
+export function ${entityNamePascal}Form({ onSubmit, submitLabel, successPath }: ${entityNamePascal}FormProps) {
+  __FORM_NAVIGATION_HOOK__
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<${entityNamePascal}FormValues>({
+    resolver: zodResolver(${entityNameCamel}FormSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+    },
+  });
+
+  const submit = handleSubmit(async (values) => {
+    await onSubmit(values);
+
+    if (successPath) {
+      __FORM_SUCCESS_NAVIGATION__
+    }
+  });
+
+  return (
+    <form onSubmit={submit} className="flex flex-col gap-5 rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
+      <TextInputField
+        label="제목"
+        required
+        error={errors.title?.message}
+        placeholder="${entityLabel} 제목"
+        {...register('title')}
+      />
+      <div className="flex flex-col gap-2">
+        <label htmlFor="description" className="text-sm font-semibold text-zinc-900">
+          설명
+          <span className="ml-1 text-rose-600">*</span>
+        </label>
+        <textarea
+          id="description"
+          className={\`min-h-40 rounded-xl border px-4 py-3 text-sm text-zinc-950 outline-none transition \${errors.description ? 'border-rose-500' : 'border-zinc-300'}\`}
+          placeholder="${entityLabel} 설명"
+          {...register('description')}
+        />
+        {errors.description ? <p className="text-sm text-rose-600">{errors.description.message}</p> : null}
+      </div>
+      <div className="flex justify-end">
+        <Button type="submit" isLoading={isSubmitting}>
+          {submitLabel}
+        </Button>
+      </div>
+    </form>
+  );
+}
+`;
+}
+
+function getListPageContent() {
+  if (!useStyles) {
+    return `import { ${entityNamePascal}ListSection } from '@/features/${featureName}/components/${entityName}-list-section';
+
+export default function ${featureNamePascal}Page() {
+  return (
+    <main>
+      <div>
+        <p>${featureNamePascal}</p>
+        <h1>${collectionLabel} 목록</h1>
+        <p>이 예시 화면을 실제 ${featureName} 도메인 화면으로 교체하세요.</p>
+      </div>
+
+      <${entityNamePascal}ListSection />
+    </main>
+  );
+}
+`;
+  }
+
+  return `import { ${entityNamePascal}ListSection } from '@/features/${featureName}/components/${entityName}-list-section';
+
+export default function ${featureNamePascal}Page() {
+  return (
+    <main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-8 px-6 py-16">
+      <div>
+        <p className="text-sm font-medium uppercase tracking-[0.2em] text-zinc-500">${featureNamePascal}</p>
+        <h1 className="mt-3 text-3xl font-semibold tracking-tight text-zinc-950">
+          ${collectionLabel} 목록
+        </h1>
+        <p className="mt-3 text-sm leading-6 text-zinc-600">
+          이 예시 화면을 실제 ${featureName} 도메인 화면으로 교체하세요.
+        </p>
+      </div>
+
+      <${entityNamePascal}ListSection />
+    </main>
+  );
+}
+`;
+}
+
+function getCreatePageContent() {
+  if (!useStyles) {
+    return `import { ${entityNamePascal}CreateFormSection } from '@/features/${featureName}/components/${entityName}-create-form-section';
+
+export default function Create${entityNamePascal}Page() {
+  return (
+    <main>
+      <div>
+        <p>${featureNamePascal}</p>
+        <h1>${entityLabel} 생성</h1>
+        <p>React Hook Form, Zod, React Query mutation을 포함한 예시 폼입니다.</p>
+      </div>
+
+      <${entityNamePascal}CreateFormSection />
+    </main>
+  );
+}
+`;
+  }
+
+  return `import { ${entityNamePascal}CreateFormSection } from '@/features/${featureName}/components/${entityName}-create-form-section';
+
+export default function Create${entityNamePascal}Page() {
+  return (
+    <main className="mx-auto flex min-h-screen w-full max-w-3xl flex-col gap-8 px-6 py-16">
+      <div>
+        <p className="text-sm font-medium uppercase tracking-[0.2em] text-zinc-500">${featureNamePascal}</p>
+        <h1 className="mt-3 text-3xl font-semibold tracking-tight text-zinc-950">
+          ${entityLabel} 생성
+        </h1>
+        <p className="mt-3 text-sm leading-6 text-zinc-600">
+          React Hook Form, Zod, React Query mutation을 포함한 예시 폼입니다.
+        </p>
+      </div>
+
+      <${entityNamePascal}CreateFormSection />
+    </main>
+  );
+}
+`;
+}
+
+ensureFile(
+  path.join(featureDir, 'api', `get-${featureName}.ts`),
+  `import { map${entityNamePascal}, type ${entityNamePascal}, type ${entityNamePascal}ResponseDto } from '@/features/${featureName}/lib/${entityName}-schema';
+import { requestClient } from '@/shared/api/request.client';
+
+export async function get${featureNamePascal}(search?: string, signal?: AbortSignal): Promise<${entityNamePascal}[]> {
+  const response = await requestClient<${entityNamePascal}ResponseDto[]>({
+    method: 'GET',
+    url: '/${featureName}',
+    params: { search },
+    signal,
+  });
+
+  return response.map(map${entityNamePascal});
+}
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'api', `create-${entityName}.ts`),
+  `import {
+  map${entityNamePascal},
+  type ${entityNamePascal},
+  type ${entityNamePascal}FormValues,
+  type ${entityNamePascal}ResponseDto,
+} from '@/features/${featureName}/lib/${entityName}-schema';
+import { requestClient } from '@/shared/api/request.client';
+
+export async function create${entityNamePascal}(values: ${entityNamePascal}FormValues): Promise<${entityNamePascal}> {
+  const response = await requestClient<${entityNamePascal}ResponseDto>({
+    method: 'POST',
+    url: '/${featureName}',
+    data: values,
+  });
+
+  return map${entityNamePascal}(response);
+}
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'api', `${entityName}-query-keys.ts`),
+  `export const ${entityNameCamel}QueryKeys = {
+  all: ['${featureName}'] as const,
+  lists: () => [...${entityNameCamel}QueryKeys.all, 'list'] as const,
+  list: (params: { search?: string }) => [...${entityNameCamel}QueryKeys.lists(), params] as const,
+};
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'api', 'index.ts'),
+  `export * from './create-${entityName}';
+export * from './get-${featureName}';
+export * from './${entityName}-query-keys';
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'components', `${entityName}-list-section.tsx`),
+  getListSectionContent(),
+);
+
+ensureFile(
+  path.join(featureDir, 'components', `${entityName}-form.tsx`),
+  getFormContent(),
+);
+
+ensureFile(
+  path.join(featureDir, 'components', `${entityName}-create-form-section.tsx`),
+  `__CREATE_FORM_SECTION_IMPORTS__
+
+export function ${entityNamePascal}CreateFormSection() {
+  const { mutation, submitLabel, successPath } = useCreate${entityNamePascal}Form();
+
+  return (
+    <${entityNamePascal}Form
+      onSubmit={(values) => mutation.mutateAsync(values)}
+      submitLabel={submitLabel}
+      successPath={successPath}
+    />
+  );
+}
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'components', 'index.ts'),
+  `export * from './${entityName}-create-form-section';
+export * from './${entityName}-form';
+export * from './${entityName}-list-section';
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'hooks', `use-create-${entityName}-form.ts`),
+  `__HOOK_IMPORTS__
+
+import { create${entityNamePascal} } from '@/features/${featureName}/api/create-${entityName}';
+import { ${entityNameCamel}QueryKeys } from '@/features/${featureName}/api/${entityName}-query-keys';
+import type { ${entityNamePascal}FormValues } from '@/features/${featureName}/lib/${entityName}-schema';
+
+export function useCreate${entityNamePascal}Form() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (values: ${entityNamePascal}FormValues) => create${entityNamePascal}(values),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ${entityNameCamel}QueryKeys.lists(),
+      });
+    },
+  });
+
+  return {
+    submitLabel: '${entityLabel} 저장',
+    successPath: '${featurePath}',
+    mutation,
+  };
+}
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'hooks', 'index.ts'),
+  `export * from './use-create-${entityName}-form';
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'lib', `${entityName}-schema.ts`),
+  `import { z } from 'zod';
+
+export const ${entityNameCamel}FormSchema = z.object({
+  title: z.string().min(1, '제목을 입력해주세요.'),
+  description: z.string().min(1, '설명을 입력해주세요.'),
+});
+
+export type ${entityNamePascal}FormValues = z.infer<typeof ${entityNameCamel}FormSchema>;
+
+export type ${entityNamePascal}ResponseDto = {
+  id: string;
+  title: string;
+  description: string;
+  created_at: string;
+};
+
+export type ${entityNamePascal} = {
+  id: string;
+  title: string;
+  description: string;
+  createdAt: Date;
+};
+
+export function map${entityNamePascal}(dto: ${entityNamePascal}ResponseDto): ${entityNamePascal} {
+  return {
+    id: dto.id,
+    title: dto.title,
+    description: dto.description,
+    createdAt: new Date(dto.created_at),
+  };
+}
+`,
+);
+
+ensureFile(
+  path.join(featureDir, 'lib', 'index.ts'),
+  `export * from './${entityName}-schema';
+`,
+);
+
+ensureFile(
+  path.join(routeDir, 'page.tsx'),
+  getListPageContent(),
+);
+
+ensureFile(
+  path.join(routeNewDir, 'page.tsx'),
+  getCreatePageContent(),
+);
+
+console.log('');
+console.log(`"${featureName}" feature CRUD 예시 스캐폴드 생성이 완료되었습니다.`);
+__OUTPUT_SUMMARY_LINE__
+__OPTIONAL_ROUTE_HINT__console.log(`중앙 route 상수가 필요하면 src/shared/routes/route-paths.ts에 직접 추가하세요:`);
+console.log(`  ${featureNameCamel}: '${featurePath}',`);
+console.log(`  ${createRouteKey}: '${featureCreatePath}',`);
+console.log('');
+console.log('주의: 생성된 API 함수는 외부 백엔드 연동을 전제로 합니다.');
+__ENV_HINT__