feat: dismiss alert

public/assets/close-orange.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0833 4.23913L10.2608 3.41663L6.99999 6.67746L3.73916 3.41663L2.91666 4.23913L6.17749 7.49996L2.91666 10.7608L3.73916 11.5833L6.99999 8.32246L10.2608 11.5833L11.0833 10.7608L7.82249 7.49996L11.0833 4.23913Z" fill="#fe740c"/>
+</svg>

src/components/Toast/Toast.tsx

@@ -4,39 +4,8 @@ import { useAtomValue } from 'jotai'
 import { useEffect, useState } from 'react'
 import { userInfoAtom } from '../../../atoms/userInfo'
 
-const ToastContainer = styled.div`
-  position: relative;
-  padding: 14px;
-  justify-content: flex-end;
-  width: 100%;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  background: #321504;
-  z-index: 10000;
-
-  color: #fe740c;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.14px;
-
-  span {
-    margin-left: 20px;
-  }
-
-  @media (max-width: ${breakpoints.sm}px) {
-    font-size: 12px;
-    line-height: 16px;
-
-    span {
-      // new line
-      display: block;
-    }
-  }
-`
-
 const Toast: React.FC = () => {
+  const [showTopToast, setShowTopToast] = useState(true)
   const [time, setTime] = useState('DD:HH:mm:ss')
   const userInfo = useAtomValue(userInfoAtom)
 
@@ -77,7 +46,7 @@ const Toast: React.FC = () => {
   }, [])
 
   return (
-    <ToastContainer>
+    <ToastContainer showTopToast={showTopToast}>
       {userInfo?.message?.length > 0 ? (
         userInfo.message
       ) : (
@@ -86,8 +55,61 @@ const Toast: React.FC = () => {
           <span>Time remaining: {time}</span>
         </>
       )}
+      <div>
+        <button className="close-button" onClick={() => setShowTopToast(false)}>
+          <img src="/assets/close-orange.svg" alt="close" />
+        </button>
+      </div>
     </ToastContainer>
   )
 }
 
+const ToastContainer = styled.div<{ showTopToast: boolean }>`
+  display: ${({ showTopToast }) => (showTopToast ? 'flex' : 'none')};
+  position: relative;
+  padding: 14px;
+  justify-content: flex-end;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  background: #321504;
+  z-index: 10000;
+
+  color: #fe740c;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.14px;
+
+  span {
+    margin-left: 20px;
+  }
+
+  .close-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 28px;
+    height: 28px;
+    border: 1px solid #fe740c;
+    background: transparent;
+    padding: 0;
+  }
+
+  @media (max-width: ${breakpoints.sm}px) {
+    font-size: 12px;
+    line-height: 16px;
+
+    span {
+      // new line
+      display: block;
+    }
+  }
+`
+
 export default Toast