Modal

Modal: 화면 중앙에 표시되는 기본 모달 레이아웃 컴포넌트입니다.

AlertModalLayout: 안내용 메시지와 확인 버튼이 포함된 경고형 모달입니다.

ConfirmModalLayout: 확인/취소 버튼과 아이콘이 함께 표시되는 확인용 모달입니다.

공통 특징

• iconType에 따라 체크 또는 경고 아이콘이 동적으로 렌더링됩니다.
• 버튼 클릭 시 각 콜백 함수(onClick, onConfirm, onClose) 호출 후 closeModal()도 함께 처리됩니다.
• 반응형 Tailwind 스타일이 적용되어 있어 모바일/PC 환경에 적절히 대응합니다.

1. AlertModalLayout

목적

• 단일 버튼을 갖는 알림/메시지용 모달입니다.

Props

이름	타입	설명
type	"alert" | "message"	메시지 유형
iconType?	"check" | "warning" | "none"	아이콘 종류
message	string	표시할 메시지
button	{ label: string; style: "primary" | "white"; onClick: () => void }	버튼 정보

✅ type: "alert", iconType: "check", button-style: "primary" 예시

⚠️ type: "alert", iconType: "warning", button-style: "white" 예시

💬 type: "message", iconType: "none", button-style: "primary" 예시

2. ConfirmModalLayout

목적

• 취소/확인 버튼이 있는 확인용 모달입니다.

Props

이름	타입	설명
iconType?	"check" | "warning" | "none"	아이콘 종류
message	string	표시할 메시지
onClose	() => void	취소 시 호출 함수
onConfirm	() => void	확인 시 호출 함수
cancelText	string	취소 버튼 텍스트
confirmText	string	확인 버튼 텍스트

✅ iconType: "check" 예시

---

3. Modal (Portal)

목적

Zustand 기반 전역 상태를 통해 알림/확인 모달을 제어합니다.

동작 방식

1. useModalStore()에서 isOpen, options, openModal(), closeModal()을 가져옵니다.
2. options.type에 따라 AlertModalLayout 또는 ConfirmModalLayout을 내부적으로 조건 렌더링합니다.
3. Enter 키 이벤트로 확인 동작을 수행합니다. (handleKeyDown)

사용 예시

openModal({
  type: "confirm",
  iconType: "warning",
  message: "정말 삭제하시겠습니까?",
  onConfirm: () => { ... },
  onClose: () => { ... },
  confirmText: "삭제",
  cancelText: "취소"
});