목차

🖊️ 사용법

< 성공/실패 Modal >

<aside>

openModal의 매개변수는 상태 코드, 페이지 유형, 카드 정보로 구성됨.

• openModal(status, type, cardInfo)

각각의 내용:

• [status] 성공(200번대) 또는 실패(그 외)
• [type] 구매, 판매, 생성 中 택1
• [info] grade, name, count 연동 필요 </aside>

// 사전 작업
const { openNodal } = useStateModal() // 이름 겹치면 openStateModal 등으로 쓸 것

// 사용 예시("생성") -- react-query와 연동 ver.
const { mutate } = useMutation({
  mutationFn: postCard,
  onSuccess: (data) => {
    openModal(201, "생성", { grade, name, count: volumn }); // 여기!
  },
  onError: (err) => {
    openModal(500, "생성", { grade, name, count: volumn }); // 여기!
    console.error("카드 생성 실패", err.message);
  },
});

< 알림 Modal >

<aside>

openModal의 매개변수는 페이지 유형, 카드 정보, 함수 실행부로 구성됨.

• openModal(type, cardInfo, onAction)

각각의 내용:

• [type] 로그인, 구매, 교환 취소, 교환 거절, 교환 승인 中 택1
• [info] grade(카드 등급), name(카드 이름), count(”구매”일 때만 씀: 구매 희망 개수) 연동 필요
• [onAction] 버튼 클릭 시 실행될 함수를 쓰는 부분 (ex. 페이지 이동, 승인 확정 등) </aside>

// 0. 사전 작업
const { openModal } = useAlertModal(); // 이름 겹치면 openAlertModal 등으로 쓸 것

// 1. 로그인
openModal("로그인", {}, () => router.push("/login"));

// 2. 구매
openModal("구매", { grade: "COMMON", name: "카드", count: "2" }, () => { 함수 });

// 3. 교환 승인 + 추가 action 없을 때 함수
openModal("교환 승인", { grade: "RARE", name: "짱짱 센 카드" }, () => {});

// (+) 버튼에 연동해서 쓸 때
export default function MyPage() {
  const { openModal } = useAlertModal();

  const handleClick = () => {
    openAlertModal("교환 승인", { grade: "RARE", name: "짱짱 센 카드" }, () => {});
  };

  return (
    <>
      <button onClick={handleClick}>알림 모달 버튼</button>
      <NotiModal />
    </>
  );
}

요구 분석

• 성공/실패 ver.
• 알림 ver.