AlarmDialog 컴포넌트 사용법

[tkv00]

사용방법

• 위치는 styles폴더에 존재합니다.

• 기존에 쓰던 alert대신 sweatalert2라이브러리를 이용하여 구현했습니다. alert와 동일하게 AlarmDialog입력 후 제목,내용등을 입력 후 사용하시면 됩니다.

• 옵션은 아래와 같은 셀렉트 박스 유무입니다.필요시true값을 주면됩니다.

  

• 각 type별 아이콘 이미지

사용방법 예시

AlarmDialog({
      title: "신고 사유",
      text: "해당 게시글의 신고 사유를 선택해주세요.",
      type: "question",
      isOptions: true,
      //서버에 키값 전달
      inputOptions: {
        마음에들지않아요: "마음에 들지 않아요",
        선정적이에요: "선정적이에요",
        부적절해요: "부적절해요",
        스팸이에요: "스팸이에요",
        혐오발언이에요: "혐오 발언이에요",
        공격적인내용이있어요: "공격적인 내용이 있어요",
        거짓정보가포함돼있어요: "거짓 정보가 포함돼 있어요",
        기타사유: "기타 사유",
      },
    });

코드

---

import Swal from "sweetalert2";
export const AlarmDialog = async({
  isOptions = false,
  inputOptions = {},
  title = "",
  text= "",
  type,
  showCancel = false,
}) => {
  //옵션이 없는 경우
  //아이콘
  //성공-success
  //경고-warning
  //에러-error
  //인포-info
  //물음표-question
  const swalOptions = {
    title: title,
    content: content,
    //아이콘
    icon: type,
    showCloseButton: true,
    //취소 버튼
    showCancelButton: showCancel,
    //취소 텍스트
    confirmButtonText: "확인",
    //확인 텍스트
    denyButtonText: "취소",
    showClass: {
      popup: `
          animate__animated
          animate__fadeInUp
          animate__faster
        `,
    },
    hideClass: {
      popup: `
          animate__animated
          animate__fadeOutDown
          animate__faster
        `,
    },
  };
  //옵션있을 경우
  if (isOptions) {
    swalOptions.inputPlaceholder = "신고 사유";
    //전달받은 옵션값들
    swalOptions.inputOptions = inputOptions;
    swalOptions.input = "select";
  }

  const result= await Swal.fire(swalOptions);
  //사용자가 선택한 옵션 리턴
  if(result.isConfirmed){
    return isOptions ? result.value :true;
  }else if(result.isDismissed){
    return false;
  }
  return null;
};

---

사용예시 이미지

[yeongipark]

감사합니다~