Merge branch 'feature/q-cast-iii-t-3' into dev

package.json

@@ -24,6 +24,7 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
     "react-responsive-modal": "^6.4.2",
+    "react-toastify": "^10.0.5",
     "recoil": "^0.7.7",
     "uuid": "^9.0.1"
   },

src/app/layout.js

@@ -5,6 +5,7 @@ import Headers from '@/components/Headers'
 import RecoilRootWrapper from './RecoilWrapper'
 import UIProvider from './UIProvider'
 import { headers } from 'next/headers'
+import { ToastContainer } from 'react-toastify'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -25,6 +26,7 @@ export default function RootLayout({ children }) {
         <RecoilRootWrapper>
           <UIProvider>{children}</UIProvider>
         </RecoilRootWrapper>
+        <ToastContainer />
       </body>
     </html>
   )

src/hooks/useToast.js

@@ -0,0 +1,35 @@
+import { toast } from 'react-toastify'
+
+const toastDefaultOptions = {
+  position: 'top-right',
+  autoClose: 3000,
+  draggable: false,
+  hideProgressBar: true,
+  rtl: false,
+  pauseOnFocusLoss: true,
+  pauseOnHover: true,
+  theme: 'light',
+  limit: 2,
+  closeOnClick: true,
+}
+
+const QToast = (props) => {
+  // type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default'
+  const { message, type = 'info', options } = props
+  const customOptions = { ...toastDefaultOptions, ...options }
+
+  switch (type) {
+    case 'info':
+      return toast.info(message, customOptions)
+    case 'success':
+      return toast.success(message, customOptions)
+    case 'warning':
+      return toast.warn(message, customOptions)
+    case 'error':
+      return toast.error(message, customOptions)
+    default:
+      return toast(message, customOptions)
+  }
+}
+
+export { QToast }

src/styles/style.scss

@@ -1 +1,2 @@
-@import '_test.scss';
+@import '_test.scss';
+@import 'react-toastify/dist/ReactToastify.css';