Modal

Modal

Modal 컴포넌트입니다.

---

✅ Props

interface ModalProps {
  isOpen?: boolean; // 모달이 열려있는지 여부
  onClose?: () => void; // 외부 클릭 또는 버튼으로 닫을 때 실행
  children: React.ReactNode; // 제목이나 설명 텍스트, 아이콘 등 컨텐츠
  isSecondary?: boolean; // 두 번째 모달 여부
  isThird?: boolean;  // 세 번째 모달 여부
  onActionClick?: (payload?: { rating: number; content: string }) => void; // '작성하기'/'취소하기' 버튼 누를 때 호출
}

• isSecondary 모달에서는 인자 없이 호출됩니다
• isThird 모달에서는 { rating, content } 형태의 payload가 전달됩니다.

---

🔄 동작 방식

• 첫 번째 모달은 단순 알림 모달입니다. 확인 버튼을 누르면 사라집니다.
• 두 번째 모달은 선택 모달입니다. 두 개의 버튼이 있는데, 왼쪽의 '아니오' 버튼을 누르면 모달창이 사라지고, 오른쪽 버튼의 삭제나 취소 버튼을 누르면 그 기능이 동작합니다.
• 두 번째 모달의 아이콘과 세 번째 모달의 별 아이콘은 SVG 아이콘으로 커스터마이징되어 있습니다.
• 별점 클릭은 isactive activeon과 activeoff로 활성화, 비활성화할 수 있습니다.
• 세 번째 모달은 별점 작성 모달입니다. 아래 작성하기 버튼을 누르면 detail 페이지에 별점과 내용이 기록됩니다.

// 세 모달을 렌더링하는 컴포넌트
export const ModalContainer = () => {
  const [isFirstModalOpen, setIsFirstModalOpen] = useState(true);
  const [isSecondModalOpen, setIsSecondModalOpen] = useState(true);
  const [isThirdModalOpen, setIsThirdModalOpen] = useState(true);

  return (
    <div>
      <Modal isOpen={isFirstModalOpen} onClose={() => setIsFirstModalOpen(false)}>
        <h2></h2>
      </Modal>

      <Modal
        isOpen={isSecondModalOpen}
        onClose={() => setIsSecondModalOpen(false)}
        isSecondary={true}
      >
        <img src={WarningIcon} className={styles.warningIcon} alt="warning" />
      </Modal>

      <Modal isOpen={isThirdModalOpen} onClose={() => setIsThirdModalOpen(false)} isThird={true}>
        <h2></h2>
      </Modal>
    </div>
  );
};

export default Modal;

---

⚙ 사용 예시