useAlert
useAlert는 Alert을 더 쉽게 사용할 수 있도록 도와주는 훅입니다.
Alert 컴포넌트를 Promise<'confirm' | 'cancel'> 형태로 사용할 수 있습니다.
import { useAlert, Button, AlertActionAreaButton } from '@wanteddev/wds';
const Demo = () => {
const alert = useAlert();
const handleClick = async () => {
const result = await alert({
title: '제목',
content: '설명',
confirm: <AlertActionAreaButton>확인</AlertActionAreaButton>,
cancel: <AlertActionAreaButton variant="assistive">취소</AlertActionAreaButton>,
});
window.alert('결과: ' + result);
};
return (
<Button onClick={handleClick}>클릭</Button>
)
}
export default Demo;direction 옵션으로 확인과 취소 버튼 위치를 변경할 수 있습니다.
import { useAlert, Button, AlertActionAreaButton } from '@wanteddev/wds';
const Demo = () => {
const alert = useAlert();
const handleClick = async () => {
const result = await alert({
title: '제목',
content: '설명',
confirm: <AlertActionAreaButton>확인</AlertActionAreaButton>,
cancel: <AlertActionAreaButton variant="assistive">취소</AlertActionAreaButton>,
direction: 'reverse'
});
window.alert('결과: ' + result);
};
return (
<Button onClick={handleClick}>클릭</Button>
)
}
export default Demo;variant 옵션에 따라 버튼의 색상이 달라집니다.
import { useAlert, Button, AlertActionAreaButton } from '@wanteddev/wds';
const Demo = () => {
const alert = useAlert();
const handleClick = async () => {
const result = await alert({
title: '정말로 삭제하시겠습니까?',
content: '삭제된 내용은 복구할 수 없습니다.',
confirm: <AlertActionAreaButton variant="negative">확인</AlertActionAreaButton>,
cancel: <AlertActionAreaButton variant="assistive">취소</AlertActionAreaButton>
});
window.alert('결과: ' + result);
};
return (
<Button onClick={handleClick}>클릭</Button>
)
}
export default Demo;sx Prop을 통해 커스텀 스타일을 적용할 수 있습니다.
import { useAlert, Button, AlertActionAreaButton } from '@wanteddev/wds';
const Demo = () => {
const alert = useAlert();
const handleClick = async () => {
const result = await alert({
title: '정말로 삭제하시겠습니까?',
content: '삭제된 내용은 복구할 수 없습니다.',
confirm: <DialogActionAreaButton>확인</DialogActionAreaButton>,
cancel: <DialogActionAreaButton variant="assistive">취소</DialogActionAreaButton>,
sx: { padding: 40 }
});
window.alert('결과: ' + result);
};
return (
<Button onClick={handleClick}>클릭</Button>
)
}
export default Demo;e.preventDefault 를 이용하면 클릭 액션을 막을 수 있습니다.
import { useAlert, Button, AlertActionAreaButton } from '@wanteddev/wds';
const Demo = () => {
const alert = useAlert();
const handleClick = async () => {
const result = await alert({
title: '제목',
content: '내용',
confirm: <AlertActionAreaButton onClick={e => e.preventDefault()}>확인</AlertActionAreaButton>,
cancel: <AlertActionAreaButton variant="assistive">취소</AlertActionAreaButton>,
});
window.alert('결과: ' + result);
};
return (
<Button onClick={handleClick}>클릭</Button>
)
}
export default Demo;