IROUL
회원가입로그인
Alert

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Alert / Confirm

Promise 기반 Alert / Confirm 모달을 사용하는 예시입니다. 각 버튼을 눌러 실제 동작을 확인할 수 있습니다.

기본 Alert

가장 단순한 정보용 Alert 예시

Source Code
const { alert } = useAlert();

await alert('가장 기본적인 알림(Alert) 예시입니다.', {
  title: '기본 Alert',
  variant: 'info',
});
Live Preview

여러 Variant Alert

success / warning / error 등의 다양한 Alert variant

Success
await alert('성공!', { title: 'Success', variant: 'success' });
Live Preview
Warning
await alert('주의!', { title: 'Warning', variant: 'warning' });
Live Preview
Error
await alert('에러!', { title: 'Error', variant: 'error' });
Live Preview

Confirm (확인 / 취소)

사용자의 선택에 따라 분기 처리하는 Confirm 예시

Source Code
const { alert, confirm } = useAlert();

const ok = await confirm('정말 삭제하시겠습니까?', {
  title: '삭제 확인',
  confirmText: '삭제',
  cancelText: '취소',
  variant: 'warning',
});

await alert(ok ? '삭제가 완료되었습니다.' : '삭제가 취소되었습니다.', {
  title: ok ? '완료' : '취소됨',
  variant: ok ? 'success' : 'info',
});
Live Preview

비동기 플로우 (Alert → Confirm → Alert)

Alert와 Confirm을 조합해 단계적인 비동기 플로우를 구성하는 예시

Source Code
const { alert, confirm } = useAlert();

await alert('비동기 플로우를 시작합니다.', {
  title: 'Step 1',
  variant: 'info',
});

const confirmed = await confirm('서버에 요청을 전송할까요?', {
  title: 'Step 2',
  confirmText: '전송',
  cancelText: '취소',
  variant: 'info',
});

if (!confirmed) {
  await alert('요청이 취소되었습니다.', {
    title: '중단',
    variant: 'warning',
  });
  return;
}

// 실제로는 여기서 await api 호출 등을 수행
await alert('요청이 성공적으로 처리되었습니다.', {
  title: '완료',
  variant: 'success',
});
Live Preview