feat: common Modal component

[Jinho1011]

공용으로 사용할 수 있는 Modal 컴포넌트를 구현했습니다!

뿐만 아니라 모달을 편하게 사용할 수 있게 useModal hook을 구현했는데요, 아래와 같이 사용하면 됩니다

const { Modal, toggleModal } = useModal('default' | 'action);

return (
  <Modal>
    <div style={{ height: 190 }}>모달</div>
  </Modal>
)

Modal 컴포넌트에 isOpen이나 toggleModal 등을 전달해주지 않아도 이렇게 간편하게 사용할 수 있습니다!

바로 useModal에서 Modal에게 열림 상태나 열고 닫는 등의 동작을 구현하여 선언형으로 Modal을 사용할 수 있도록 구현했습니다.

const useModal = (type: 'default' | 'action' = 'default') => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleModal = useCallback(() => {
    setIsOpen((prev) => !prev);
  }, []);

  const ModalComponent = type === 'default' ? DefaultModal : ActionModal;

  const Modal = ({ children }: { children: React.ReactNode }) => (
    <ModalComponent isOpen={isOpen} onClose={toggleModal}>
      {children}
    </ModalComponent>
  );

  return { Modal: isOpen ? Modal : () => null, toggleModal };
};

closes #84