개요

ModalForm은 모달 형태의 폼을 관리하는데 도움을 주는 커스텀 훅입니다. 이를 사용하여 React 애플리케이션에서 간편하게 모달 폼을 구현할 수 있습니다.

설치

먼저 npm 또는 yarn을 사용하여 ModalForm 패키지를 설치합니다.

npm install @moogieon/modal-form

또는

yarn add @moogieon/modal-form

사용법

ModalForm 불러오기 ModalForm을 React 컴포넌트에서 불러옵니다.

import ModalForm from "@moogieon/modal-form";

초기값 설정

ModalForm을 사용하기 위해 초기값을 설정합니다. initialValues 객체에는 모달 폼의 각 입력 필드의 초기값을 지정합니다.

const initialValues = { id: "", name: "" };

onSubmit 함수 정의 폼이 제출될 때 실행될 함수를 정의합니다. 이 함수는 ModalForm으로부터 전달되는 값을 받아서 처리합니다.

const handleSubmit = (values) => {
  // 폼 제출 처리 로직
  console.log("제출된 값:", values);
};

validate 함수 정의

폼 입력값의 유효성을 검사하기 위한 validate 함수를 정의합니다. 이 함수는 폼 입력값을 받아서 유효성 검사를 수행하고, 유효하지 않은 경우 오류 객체를 반환합니다.

const validate = (values) => {
  const errors = {};
  if (!values.id) {
    errors.id = "아이디를 입력하세요.";
  }
  if (!values.name) {
    errors.name = "이름을 입력하세요.";
  }
  return errors;
};

ModalForm 사용

위에서 정의한 초기값, 제출 함수, 유효성 검사 함수를 ModalForm에 전달하여 사용합니다.

const [isModal, setIsModal] = useState < boolean > (false);
const { values, errors, submitting, handleChange, handleSubmit } = ModalForm({
  initialValues: { name: "", id: "" },
  onSubmit: handleSubmit,
  validate: validate,
  errorModal: setIsModal,
});

폼 컴포넌트 작성

ModalForm으로부터 받은 값과 함수를 사용하여 폼 컴포넌트를 작성합니다.

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="id" value={values.id} onChange={handleChange} />
    {errors.id && <span>{errors.id}</span>}
    <input
      type="text"
      name="name"
      value={values.name}
      onChange={handleChange}
    />
    {errors.name && <span>{errors.name}</span>}
    <button type="submit" disabled={submitting}>
      제출
    </button>
  </form>
);

이제 ModalForm을 사용하여 모달 폼을 구현할 수 있습니다. 각 폼 입력 필드의 값과 오류 상태, 제출 상태 등을 ModalForm으로부터 전달받아 사용하여 필요한 로직을 구현할 수 있습니다.

Modal 사용법

import Modal from "@moogieon/modal-form";

const MyComponent = () => {
  const [isModal, setIsModal] = useState < boolean > (false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <button onClick={handleOpenModal}>모달 열기</button>
      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <div>
          <h2>모달 내용</h2>
          <p>모달 내용을 여기에 추가하세요.</p>
          <button onClick={handleCloseModal}>닫기</button>
        </div>
      </Modal>
    </>
  );
};

ModalForm

• initialValues: 폼의 초기값을 설정합니다.
• onSubmit: 폼 제출 시 실행될 함수를 설정합니다.
• validate: 폼 유효성 검사를 수행할 함수를 설정합니다.
• errorModal: 모달을 열거나 닫을 때 사용할 함수를 설정합니다.

Modal

• isOpen: 모달의 열림/닫힘 상태를 설정합니다.
• onClose: 모달을 닫을 때 실행될 함수를 설정합니다.