feat: Add Swal hook

src/components/Playground.jsx

@@ -15,6 +15,7 @@ import QSelect from '@/components/ui/QSelect'
 import { Button } from '@nextui-org/react'
 import ColorPicker from './common/color-picker/ColorPicker'
 import { toastUp } from '@/hooks/useToast'
+import { useSwal } from '@/hooks/useSwal'
 
 import styles from './playground.module.css'
 import Image from 'next/image'
@@ -31,6 +32,7 @@ export default function Playground() {
   const testVar = process.env.NEXT_PUBLIC_TEST
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
   const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
 
   const [color, setColor] = useState('#ff0000')
 
@@ -103,6 +105,13 @@ export default function Playground() {
       date: '',
     },
   ]
+
+  const handleSwalAlert = () => {
+    swalFire({
+      text: '알림 테스트입니다.',
+    })
+  }
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -151,6 +160,24 @@ export default function Playground() {
             </>
           )}
         </div>
+        <div>
+          <Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
+        </div>
+        <div>
+          <Button
+            onClick={() =>
+              swalFire({
+                html: `confirm 테스트입니다.<br />당신은 바보입니까?`,
+                type: 'confirm',
+                confirmFn: () => {
+                  alert('test')
+                },
+              })
+            }
+          >
+            Sweetalert - confirm
+          </Button>
+        </div>
       </div>
     </>
   )

src/hooks/useSwal.js

@@ -0,0 +1,38 @@
+import Swal from 'sweetalert2'
+import withReactContent from 'sweetalert2-react-content'
+
+export const useSwal = () => {
+  const MySwal = withReactContent(Swal)
+
+  const swalFire = ({ title = '', text = '', html = '', type = 'alert', confirmFn = () => {}, denyFn = () => {} }) => {
+    if (type === 'alert') {
+      MySwal.fire({
+        title,
+        text,
+        icon: 'success',
+        confirmButtonText: '확인',
+      })
+    } else if (type === 'confirm') {
+      MySwal.fire({
+        title,
+        text,
+        html,
+        icon: 'question',
+        showCloseButton: true,
+        showCancelButton: true,
+        confirmButtonText: '확인',
+        cancelButtonText: '취소',
+      }).then((result) => {
+        if (result.isConfirmed) {
+          confirmFn()
+        } else if (result.isDenied) {
+          denyFn()
+        }
+      })
+    }
+  }
+
+  return {
+    swalFire,
+  }
+}