- Toast Component 추가

package.json

@@ -19,6 +19,7 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-toastify": "^10.0.5",
     "recoil": "^0.7.7",
     "uuid": "^9.0.1"
   },

src/app/test/page.js

@@ -0,0 +1,50 @@
+'use client'
+
+import Hero from '@/components/Hero'
+import React from 'react'
+import QToast from '@/components/ui/Toast'
+import { ToastContainer } from 'react-toastify'
+
+export default function TestPage() {
+  const toastOption = {
+    position: 'top-right',
+    autoClose: 5000,
+    draggable: true,
+    hideProgressBar: true,
+    rtl: false,
+    pauseOnFocusLoss: true,
+    pauseOnHover: true,
+    theme: 'light',
+    limit: 2,
+    closeOnClick: true
+  }
+  const toastTest = () => {
+    QToast( {
+      type: 'info', // type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';
+      message: getContent('Toast Test'),
+      option: toastOption
+    });
+  }
+
+  const getContent = (title) => {
+    return <div>
+      <h1>{title}</h1>
+      <button onClick={onToastButtonClick}>BTN</button>
+    </div>
+  }
+
+  const onToastButtonClick = () => {
+    console.log('on toast button click')
+  }
+
+  return (
+    <>
+      <Hero title='Test Page'></Hero>
+      <div className="flex flex-col justify-center my-8 pt-20 h-full">
+        <button onClick={toastTest}>Test</button>
+      </div>
+      <ToastContainer/>
+    </>
+  )
+}
+

src/components/ui/Toast.js

@@ -0,0 +1,30 @@
+import { toast } from 'react-toastify'
+/*
+* toast option
+* position: top-left | top-right(default) | top-center | bottom-left | bottom-right | bottom-center
+* autoClose: n(Milliseconds); 자동 닫힘 시간 설정; default 3000
+* draggable: 드레그로 닫기; true | false(default)
+* hideProgressBar: 진행 시간바 숨김 여부; true | false(default)
+* rtl: Toast 좌우반전 여부; true | false(default)
+* pauseOnFocusLoss: 창에서 벗어나 있으면 닫힘시간 정지; true(default) | false
+* pauseOnHover: Mouse Hover 시 닫힘시간 정지; true(default) | false
+* theme: light(default) | dark | colored
+* limit: toast 개수 제한
+* closeOnClick: Toast 클릭시 닫기
+* */
+export default function QToast(props) {
+  const {message, type = '', option} = props;
+
+  switch(type) {
+    case 'info':
+      return toast.info(message, option);
+    case 'success':
+      return toast.success(message, option);
+    case 'warning':
+      return toast.warn(message, option);
+    case 'error':
+      return toast.error(message, option);
+    default:
+      return toast(message, option);
+  }
+}

src/styles/style.scss

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