diff --git a/package.json b/package.json
index 78fd71b3..5355cae6 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,14 @@
     "react-colorful": "^5.6.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
-    "react-hook-form": "^7.53.0",
     "react-draggable": "^4.4.6",
+    "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
     "react-responsive-modal": "^6.4.2",
     "react-toastify": "^10.0.5",
     "recoil": "^0.7.7",
+    "sweetalert2": "^11.14.1",
+    "sweetalert2-react-content": "^5.0.7",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index f0a71e44..9614cea6 100644
--- a/src/components/Playground.jsx
+++ b/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>
     </>
   )
diff --git a/src/hooks/useSwal.js b/src/hooks/useSwal.js
new file mode 100644
index 00000000..e39351d8
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index d77f654f..affc38d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5932,6 +5932,16 @@ sweepline-intersections@^1.5.0:
   dependencies:
     tinyqueue "^2.0.0"
 
+sweetalert2-react-content@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/sweetalert2-react-content/-/sweetalert2-react-content-5.0.7.tgz#6fd7299978b2e0221d3049746ff2b39c1a7aa72d"
+  integrity sha512-8Fk82Mpk45lFXpJWKIFF/lq8k/dJKDDQGFcuqVosaL/qRdViyAs5+u37LoTGfnOIvf+rfQB3PAXcp1XLLn+0ew==
+
+sweetalert2@^11.14.1:
+  version "11.14.1"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.14.1.tgz#aa066422e1045aa6923ae5d0ef8cad7067b23097"
+  integrity sha512-xadhfcA4STGMh8nC5zHFFWURhRpWc4zyI3GdMDFH/m3hGWZeQQNWhX9xcG4lI9gZYsi/IlazKbwvvje3juL3Xg==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"