[희락] Modal Component 수정

---

ActionModal.tsx

기존에 사용하던 DeletePrayModal을 다른데서도 재사용하기위해서 수정함!

interface Props {
  open: boolean;
  onClose: () => void;
  onDelete: () => void;
  onAction: () => void;
  title: string;
  actionText: string;
}

export const ActionModal = ({ open, onClose, onAction, title, actionText }: Props) => {
  const handleAction = () => {
    onAction();
    onClose();
  };

  return (
    <Modal open={open} onClose={onClose}>
      <div className="fixed top-48 w-80 h-28 bg-white drop-shadow-md">
        <div className="text-center p-3">{title}</div>
        <div className="flex justify-center p-3 gap-10">
          <Button
            className="w-20 h-9 py-1.5 px-3 text-primary bg-white border border-primary rounded"
            onClick={handleAction}
          >
            {actionText}
          </Button>
          <Button
            className="w-20 h-9 py-1.5 px-3 text-danger bg-white border border-danger rounded"
            onClick={onClose}
          >
            취소
          </Button>
        </div>
      </div>
    </Modal>
  );
};

---

사용법

{isDeleteOpen && (
              <ActionModal
              open={isDeleteOpen}
              onClose={() => setIsDeleteOpen(false)}
              onDelete={() => handleDelete(selectedPost?.id)}
              onAction={()=>handleDelete(selectedPost?.id)}
              title="삭제하시겠습니까?"
              actionText="확인"
            />
            )}

title에는 모달창안에 뜨는 메세지를 적어서 넘겨주고, actionText는 '확인' 버튼을 지정해줌. 확인 버튼을 누르면 onaction에 할당된 함수 실행됨!!