✨ 특징

• 🎯 스키마 기반: JSON 설정만으로 완성되는 폼
• 🛡️ 타입 안전: Zod 유효성 검사와 TypeScript 지원
• ⚡ 빠른 개발: 반복적인 폼 작성 작업 제거
• 🎨 커스터마이징: 독립적인 스타일 적용

🚀 빠른 시작

설치

1npm install @formgen-he2e2/core
2# 또는
3pnpm add @formgen-he2e2/core
4# 또는
5yarn add @formgen-he2e2/core

기본 사용법

1import { FormGenerator, type FormSchema } from "@formgen-he2e2/core";
2import "@formgen-he2e2/core/styles.css";
3import { z } from "zod";
4
5const schema: FormSchema = [
6  { type: "text", name: "username", label: "사용자명", required: true },
7  { type: "email", name: "email", label: "이메일", required: true },
8  { type: "password", name: "password", label: "비밀번호", required: true },
9];
10
11const customValidation = z.object({
12  username: z.string().min(3, "사용자명은 최소 3자 이상이어야 합니다"),
13  email: z.string().email("올바른 이메일을 입력하세요"),
14  password: z.string().min(8, "비밀번호는 최소 8자 이상이어야 합니다"),
15});
16
17function MyForm() {
18  const handleSubmit = (data) => {
19    console.log("폼 데이터:", data);
20  };
21
22  return (
23    <FormGenerator
24      schema={schema}
25      customSchema={customValidation}
26      onSubmit={handleSubmit}
27    />
28  );
29}

📚 지원하는 필드 타입

타입	설명	예시
text	기본 텍스트 입력	이름, 제목 등
email	이메일 입력	user@example.com
password	비밀번호 입력	•••••••••
number	숫자 입력	나이, 가격 등
textarea	긴 텍스트 입력	설명, 메모 등
select	드롭다운 선택	옵션 목록에서 선택
radio	라디오 버튼	단일 선택
checkbox	체크박스	다중 선택
date	날짜 선택	2025-01-01

각 타입별 인터페이스는 schema.ts에서 확인하실 수 있습니다.

🎨 고급 사용법

커스텀 스타일링

1const schema: FormSchema = [
2  {
3    type: 'text',
4    name: 'username',
5    label: '사용자명',
6    wrapperClassName: 'custom-wrapper',
7  },
8];

복잡한 유효성 검사

1const validationSchema = z.object({
2  password: z
3    .string()
4    .min(8, '비밀번호는 최소 8자 이상이어야 합니다')
5    .regex(
6      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
7      '대문자, 소문자, 숫자, 특수문자를 각각 하나 이상 포함해야 합니다',
8    ),
9});

🎮 예제

회원가입 폼

1const signupSchema: FormSchema = [
2  { type: 'text', name: 'name', label: '이름', required: true },
3  { type: 'email', name: 'email', label: '이메일', required: true },
4  { type: 'password', name: 'password', label: '비밀번호', required: true },
5  {
6    type: 'password',
7    name: 'confirmPassword',
8    label: '비밀번호 확인',
9    required: true,
10  },
11  {
12    type: 'select',
13    name: 'age',
14    label: '연령대',
15    options: ['10대', '20대', '30대', '40대 이상'],
16  },
17  {
18    type: 'checkbox',
19    name: 'terms',
20    label: '이용약관에 동의합니다',
21    required: true,
22  },
23];

🛠️ 기술 스택

🔗 링크

• 데모사이트
• npm 패키지
• GitHub
• 이슈 리포트