♻️ [Refactor] 모달 추상화

[yoopark]

Summary

Material UI를 참고하여 모달을 추상화하였습니다.

• Modal
• Overlay
• Dialog : Overlay + Center children
• Drawer : Overlay + 상/하/좌/우에서 등장하는 children

Describe your changes

• Dialog 사용 예시

export const EvalLogSearchDialog = ({
  form,
  onSubmit,
}: EvalLogSearchDialogProps) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <EvalLogSearchAbsoluteButton onClick={onOpen} />
      <Dialog isOpen={isOpen} onClose={onClose}>
        <EvalLogSearchDialogView form={form} onSubmit={onSubmitWrapper} />
      </Dialog>
    </>
  );
};

• Drawer 사용 예시

type TabletNavDrawerViewProps = {
  isOpen: boolean;
  onClose: () => void;
};

export const TabletNavDrawerView = ({
  isOpen,
  onClose,
}: TabletNavDrawerViewProps) => {
  return (
    <Drawer anchor="left" isOpen={isOpen} onClose={onClose}>
      <DesktopNavBar fixed={false} />
    </Drawer>
  );
};

• Modal 사용 예시 (모바일에서 100% 전체를 먹는 모달은 Dialog가 아닌 모달이라고 네이밍하였습니다.)

type SearchModalProps = ModalType & {
  onClose: () => void;
};

export const SearchModal = ({ isOpen, onClose }: SearchModalProps) => {
  return (
    <Modal isOpen={isOpen}>
      <SearchModalView onClose={onClose} />
    </Modal>
  );
};

Issue number and link

• close Material UI 참고하여 Modal 및 하위 컴포넌트 추상화 #135