From 65ea677839bb9ccbf758fd4f93ecd0f904f8a536 Mon Sep 17 00:00:00 2001
From: minkyeongJ <jomk2221@naver.com>
Date: Mon, 27 Nov 2023 04:02:52 +0900
Subject: [PATCH] =?UTF-8?q?UI:=20ToastBar=20atom=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atom/ToastBar.tsx | 45 ++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/atom/ToastBar.tsx

diff --git a/src/components/atom/ToastBar.tsx b/src/components/atom/ToastBar.tsx
new file mode 100644
index 0000000..93f08c7
--- /dev/null
+++ b/src/components/atom/ToastBar.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+
+interface Props {
+  type: string;
+  message: string;
+  isShow: boolean;
+}
+
+function ToastBar({ type, message, isShow = false }: Props) {
+  const [showAlert, setShowAlert] = useState(isShow);
+
+  if (!showAlert) {
+    return null;
+  }
+
+  const toastTypes = {
+    OK: 'bg-green-100 text-green-900',
+    INFO: 'bg-sky-100 text-sky-900',
+    ALERT: 'bg-red-100 text-red-900',
+    WARNING: 'bg-orange-100 text-orange-900',
+  } as { [key in string]: string };
+
+  const toastIconTypes = {
+    OK: 'bg-green-100 text-green-900',
+    INFO: 'bg-sky-100 text-sky-900',
+    ALERT: 'bg-red-100 text-red-900',
+    WARNING: 'bg-orange-100 text-orange-900',
+  } as { [key in string]: string };
+
+  return (
+    <div className={`px-6 py-4 border-0 rounded relative mb-4 ${toastTypes[type]}`}>
+      <span className="inline-block align-middle mr-8">{message}</span>
+      <button
+        className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
+        onClick={() => setShowAlert(false)}
+      >
+        <span>×</span>
+      </button>
+    </div>
+  );
+}
+
+export default ToastBar;