❗ Antd design의 Modal

• 예외가 발생하면 antd design의 **Modal**을 이용해 처리했습니다.
• 예외 Modal 기본 사용법

Modal.error({
    title: "오류 제목",
    content: "오류 내용",
  });

• utils 함수 분리

import { Modal } from 'antd';
import { EXCEPTION_MODAL_TITLE } from './constants';

export const exceptionModal = (ERROR_MESSAGE: string) => {
  Modal.error({
		// EXCEPTION_MODAL_TITLE = '오류'
    title: `${EXCEPTION_MODAL_TITLE}`,
    content: `${ERROR_MESSAGE}`,
  });
};

🎯 입력값이 없을 때 예외 처리하기

• 입력값을 저장하는 state가 없을 때 예외를 발생시키면 됩니다. handleChange 이벤트를 통해 value가 변경되고, handleSubmit으로 제출 했을 때 value가 비어있으면 예외를 발생시킵니다.

// TodoCreate.tsx
const TodoCreate = ({ nextId, createTodo, incrementNextId }: TodoCreateProps) => {
	const [startDate, setStartDate] = useState('');
  const [deadline, setDeadline] = useState('');
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => 
		setValue(e.target.value);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!value) {
			// BLANK_ERROR_MESSAGE = '검색어를 입력해주세요.'
      exceptionModal(BLANK_ERROR_MESSAGE);

      return;
    }

		// 다음 예외 처리
    if (!startDate || !deadline) {
			// SELECT_NOT_ERROR_MESSAGE : '시작일, 목표 완료일을 선택해주세요.'
      exceptionModal(SELECT_NOT_ERROR_MESSAGE);

      return;
    }
  };

  return (
    <>
      <InsertFormPositioner>
        <InsertForm onSubmit={handleSubmit}>
          ...
          <RangePickerWrapper onChange={handleDateChange} />
					...
        </InsertForm>
      </InsertFormPositioner>
    </>
  );
};

🎯 시작일, 목표 완료일이 없을 때 예외 처리

• 마찬가지로 startDate, deadline 데이터가 없을 때 예외 처리합니다.

    if (!startDate || !deadline) {
			// SELECT_NOT_ERROR_MESSAGE : '시작일, 목표 완료일을 선택해주세요.'
      exceptionModal(SELECT_NOT_ERROR_MESSAGE);

      return;
    }