회원가입 폼 만들기

npm install react-hook-form yup @hookform/resolvers

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const defaultValues = {
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
};

const schema = yup.object({
  username: yup.string()
    .required('사용자 이름은 필수입니다.')
    .min(3, '사용자 이름은 최소 3자 이상이어야 합니다.')
    .max(20, '사용자 이름은 최대 20자 이하여야 합니다.'),

  email: yup.string()
    .required('이메일은 필수입니다.')
    .email('유효한 이메일 주소를 입력해주세요.'),

  password: yup.string()
    .required('비밀번호는 필수입니다.')
    .min(8, '비밀번호는 최소 8자 이상이어야 합니다.')
    .matches(/[A-Z]/, '비밀번호는 최소 하나의 대문자를 포함해야 합니다.')
    .matches(/[a-z]/, '비밀번호는 최소 하나의 소문자를 포함해야 합니다.')
    .matches(/[0-9]/, '비밀번호는 최소 하나의 숫자를 포함해야 합니다.')
    .matches(
      /[!@#$%^&*]/,
      '비밀번호는 최소 하나의 특수 문자(!@#$%^&*)를 포함해야 합니다.',
    ),

  confirmPassword: yup.string()
    .required('비밀번호 확인은 필수입니다.')
    .oneOf([yup.ref('password')], '비밀번호가 일치하지 않습니다.'),
}).required();

{
  "fieldErrors": {
    "email": "이미 사용 중인 이메일입니다."
  },
  "message": "회원가입 요청을 처리하지 못했습니다."
}

const allowedServerFields = new Set([
  'username',
  'email',
  'password',
  'confirmPassword',
]);

export default function UserRegistrationForm() {
  const {
    register,
    handleSubmit,
    setError,
    clearErrors,
    reset,
    formState: {
      errors,
      isSubmitting,
      isValidating,
    },
  } = useForm({
    resolver: yupResolver(schema),
    mode: 'onBlur',
    defaultValues,
  });

  const registerField = name => register(name, {
    onChange: () => {
      if (errors[name]?.type === 'server') {
        clearErrors(name);
      }
    },
  });

  const onSubmit = async data => {
    clearErrors('root.server');

    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      const result = await response.json().catch(() => ({}));

      if (!response.ok) {
        let mappedFieldError = false;

        for (const [name, message] of Object.entries(
          result.fieldErrors ?? {},
        )) {
          if (
            allowedServerFields.has(name) &&
            typeof message === 'string'
          ) {
            setError(name, {
              type: 'server',
              message,
            });
            mappedFieldError = true;
          }
        }

        if (!mappedFieldError) {
          setError('root.server', {
            type: 'server',
            message: typeof result.message === 'string'
              ? result.message
              : '회원가입 요청을 처리하지 못했습니다.',
          });
        }

        return;
      }

      reset();
      alert('회원가입이 완료되었습니다.');
    } catch {
      setError('root.server', {
        type: 'network',
        message: '네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
      });
    }
  };

  const busy = isValidating || isSubmitting;

  return (
    <div className="form-container">
      <h2>사용자 등록</h2>

      <form
        onSubmit={handleSubmit(onSubmit)}
        aria-describedby={errors.root?.server ? 'form-error' : undefined}
      >
        <div className="form-group">
          <label htmlFor="username">사용자 이름</label>
          <input
            id="username"
            type="text"
            autoComplete="username"
            aria-invalid={Boolean(errors.username)}
            aria-describedby={
              errors.username ? 'username-error' : undefined
            }
            {...registerField('username')}
          />
          {errors.username && (
            <p id="username-error" className="error-message" role="alert">
              {errors.username.message}
            </p>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="email">이메일</label>
          <input
            id="email"
            type="email"
            autoComplete="email"
            aria-invalid={Boolean(errors.email)}
            aria-describedby={errors.email ? 'email-error' : undefined}
            {...registerField('email')}
          />
          {errors.email && (
            <p id="email-error" className="error-message" role="alert">
              {errors.email.message}
            </p>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="password">비밀번호</label>
          <input
            id="password"
            type="password"
            autoComplete="new-password"
            aria-invalid={Boolean(errors.password)}
            aria-describedby={
              errors.password ? 'password-error' : undefined
            }
            {...registerField('password')}
          />
          {errors.password && (
            <p id="password-error" className="error-message" role="alert">
              {errors.password.message}
            </p>
          )}
        </div>

        <div className="form-group">
          <label htmlFor="confirmPassword">비밀번호 확인</label>
          <input
            id="confirmPassword"
            type="password"
            autoComplete="new-password"
            aria-invalid={Boolean(errors.confirmPassword)}
            aria-describedby={
              errors.confirmPassword
                ? 'confirm-password-error'
                : undefined
            }
            {...registerField('confirmPassword')}
          />
          {errors.confirmPassword && (
            <p
              id="confirm-password-error"
              className="error-message"
              role="alert"
            >
              {errors.confirmPassword.message}
            </p>
          )}
        </div>

        {errors.root?.server && (
          <p id="form-error" className="error-message" role="alert">
            {errors.root.server.message}
          </p>
        )}

        <button type="submit" disabled={busy}>
          {isSubmitting
            ? '등록 중...'
            : isValidating
              ? '검증 중...'
              : '회원가입'}
        </button>
      </form>
    </div>
  );
}

export function makeRegistrationFetch(mode) {
  return async (url, options) => {
    if (url !== '/api/users' || options?.method !== 'POST') {
      throw new Error('모형의 요청 계약 밖입니다.');
    }
    JSON.parse(options.body); // 실제 예제의 JSON 요청 모양만 확인
    await new Promise(resolve => setTimeout(resolve, 150));
    if (mode === 'network') {
      throw new TypeError('연습용 연결 실패');
    }
    if (mode === 'field') {
      return new Response(JSON.stringify({
        fieldErrors: { email: '연습용 이메일 중복' },
      }), { status: 409 });
    }
    if (mode === 'global') {
      return new Response(JSON.stringify({
        fieldErrors: { unknownField: '허용하지 않는 key' },
        message: '연습용 일반 서버 실패',
      }), { status: 503 });
    }
    if (mode !== 'success') {
      throw new Error('정의하지 않은 모형 모드');
    }
    return new Response('{}', { status: 201 });
  };
}

import { makeRegistrationFetch } from '../registrationMock';
const registrationFetch = makeRegistrationFetch('field');

.form-container {
  max-width: 38rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #d4d4d4;
  border-radius: 0.5rem;
}

.form-group {
  margin-block: 1rem;
}

.form-group label {
  display: block;
  margin-block-end: 0.375rem;
  font-weight: 700;
}

.form-group input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid #a3a3a3;
  border-radius: 0.375rem;
}

.form-group input[aria-invalid="true"] {
  border-color: #b91c1c;
}

.error-message {
  color: #b91c1c;
  margin-block: 0.375rem 0;
}

button {
  width: 100%;
  padding: 0.75rem;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

import './index.css';
import UserRegistrationForm from './components/UserRegistrationForm';

export default function App() {
  return (
    <main>
      <UserRegistrationForm />
    </main>
  );
}