Signup Form

아이디, 이름, 이메일, 비밀번호를 받는 가입 폼입니다. 이 네 가지는 항상 필수이고, 비밀번호 확인과 주소·전화번호·생년월일 같은 항목은 설정으로 켜고 끌 수 있습니다.

Preview

아래 버튼으로 항목을 켜 보세요. 폼이 부드럽게 늘어납니다.

<SignupForm
  onSubmit={(input) => signup.mutate(input)}
  pending={signup.isPending}
  passwordConfirm={false}
  optionalFields={[]}
  addressType="basic"
  terms={terms}
/>

Required fields

가입에 꼭 필요한 기본 항목입니다. 설정으로 끌 수 없습니다.

Optional fields

필요한 서비스만 골라 쓰는 선택 항목입니다. 켜면 라벨 옆에 (선택)이 붙고, 값을 비워 두면 서버로 보내지 않습니다. 아래는 샘플이며, 직접 만든 항목도 같은 방식으로 추가할 수 있습니다.

Enable with config

폼을 직접 고치지 않고 meerkit.config.ts에서 켭니다. AuthDialog가 이 값을 그대로 폼에 넘깁니다.

export default defineMeerkitConfig({
  signup: {
    passwordConfirm: true,
    optionalFields: ["nickname", "phone", "address", "birth_date", "gender"],
    addressType: "postcode",   // "basic" | "postcode"  (Address Field 참고)
    emailVerification: true,   // 이메일 인증 (Email Verification 참고)
    // 약관 동의는 Terms Agreement 페이지를 보세요
  },
});

Terms agreement

약관 동의 영역이 폼 아래에 붙습니다. 약관 목록은 signup.terms로 정하고, 필수 약관에 동의하지 않으면 가입할 수 없습니다.체크한 약관의 id 목록이 agreed_terms로 서버에 전달됩니다. 자세한 내용은 Terms Agreement 페이지를 보세요.

Password confirmation

• 두 입력이 다르면 "비밀번호가 일치하지 않습니다."를 보여 주고 제출하지 않습니다.
• password_confirm은 서버로 보내지 않습니다. 오타를 막는 클라이언트 전용 검사입니다.
• 서버는 이 값을 몰라도 됩니다. 비밀번호 규칙은 서버가 따로 검사합니다.

Email verification

이메일 옆에 [인증번호 받기] 버튼을 붙이고 인증을 마쳐야 가입할 수 있게 합니다. 서비스마다 필요 여부가 다르므로 signup.emailVerification으로 켜고 끄며 기본은 꺼져 있습니다. 위 미리보기의 이메일 인증 버튼을 눌러 보세요 (인증번호는 123456). 자세한 흐름과 API는 Email Verification 페이지를 보세요.

Address

주소는 검색 버튼으로 고르면 우편번호와 주소가 함께 채워지는 전용 입력입니다. 검색은 카카오 우편번호 팝업(기본) 또는 결과 목록이 있는 검색 창 중에서 고릅니다. addressType으로 두 가지 방식을 고릅니다: A(basic) 주소 + 상세 주소, B(postcode) 우편번호 + 주소 + 상세 주소. 자세한 내용은 Address Field 페이지를 보세요.

Nickname

optionalFields에 "nickname"을 켜면 가입 때 닉네임(2~12자)을 받습니다. 입력칸 옆의 [자동 생성] 버튼으로 "용감한미어캣482" 같은 이름을 받아 쓸 수 있고,nickname.autoFill을 켜면 폼을 열 때 미리 채워 둡니다. 닉네임이 있는 사용자는 메뉴와 아바타에 이름 대신 닉네임이 보이며, 마이페이지에서 바꿀 수 있습니다. 닉네임 중복 검사는 서버가 합니다. 자세한 내용은 Nickname 페이지를 보세요.

Add your own field

샘플에 없는 항목은 폼 상태, 입력, 타입, 백엔드 스키마를 함께 바꿉니다.

export interface SignupInput extends LoginInput {
  email: string;
  name: string;
  phone?: string;
  address?: string;
  birth_date?: string;
  company?: string; // 추가한 필드
}

Validation

• 클라이언트 검사는 사용자 편의용입니다. 같은 규칙을 서버가 반드시 다시 검사합니다.
• 아이디·이메일 중복은 서버만 알 수 있으므로, 서버 오류의 detail을 error로 전달해 표시합니다.
• 비밀번호 최소 길이는 SignupForm.tsx의 한 줄(password.length < 8)에서 바꿉니다.

Accessibility

• 라벨과 입력이 연결되어 있고, autoComplete로 username, name, email, new-password, tel, bday 등을 지정했습니다.
• 검증 오류는 role="alert"로 안내합니다.

Props