refactor: Update toast functionality to use Swal

This commit is contained in:
yoosangwook 2024-09-27 16:10:36 +09:00
parent 8779444b9b
commit f47fbbe7bd
4 changed files with 21 additions and 8 deletions

View File

@ -159,10 +159,13 @@ export default function Playground() {
</> </>
)} )}
</div> </div>
<div> <div className="my-2">
<Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button> <Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
</div> </div>
<div> <div className="my-2">
<Button onClick={() => swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })}>Sweetalert - alert - error</Button>
</div>
<div className="my-2">
<Button <Button
onClick={() => onClick={() =>
swalFire({ swalFire({

View File

@ -112,7 +112,7 @@ export default function FirstOption() {
swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage) })
}) })
} catch (error) { } catch (error) {
swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
} }
} }
@ -182,7 +182,7 @@ export default function FirstOption() {
swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage) })
}) })
} catch (error) { } catch (error) {
swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
} }
} }

View File

@ -113,7 +113,7 @@ export default function SecondOption() {
swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage) })
}) })
} catch (error) { } catch (error) {
swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
} }
setAdsorptionRange(option.range) setAdsorptionRange(option.range)
} }

View File

@ -1,15 +1,25 @@
import Swal from 'sweetalert2' import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content' import withReactContent from 'sweetalert2-react-content'
/**
* title: 제목
* text: 내용
* html: html
* type: alert, confirm
* icon: icontype (success, error, warning, info, question)
* confirmFn: 확인 버튼 클릭 실행할 함수
* denyFn: 취소 버튼 클릭 실행할 함수
* @returns
*/
export const useSwal = () => { export const useSwal = () => {
const MySwal = withReactContent(Swal) const MySwal = withReactContent(Swal)
const swalFire = ({ title = '', text = '', html = '', type = 'alert', confirmFn = () => {}, denyFn = () => {} }) => { const swalFire = ({ title = '', text = '', html = '', type = 'alert', icon = '', confirmFn = () => {}, denyFn = () => {} }) => {
if (type === 'alert') { if (type === 'alert') {
MySwal.fire({ MySwal.fire({
title, title,
text, text,
icon: 'success', icon: icon === '' ? 'success' : icon,
confirmButtonText: '확인', confirmButtonText: '확인',
}) })
} else if (type === 'confirm') { } else if (type === 'confirm') {
@ -17,7 +27,7 @@ export const useSwal = () => {
title, title,
text, text,
html, html,
icon: 'question', icon: icon === '' ? 'question' : icon,
showCloseButton: true, showCloseButton: true,
showCancelButton: true, showCancelButton: true,
confirmButtonText: '확인', confirmButtonText: '확인',